testing storybook

src/App.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ShoppingCart } from 'lucide-react';
 import { Sheet, SheetTrigger } from '@/components/ui/sheet';
-import Cart from './components/Cart';
+import Cart from './components/Card';
 import Product from './components/Product';
 import CartContext from './lib/context';
 import useTheme from './hooks/useTheme';
@@ -14,25 +14,24 @@ function App() {
   return (
     <CartContext.Provider value={{ count, setCount }}>
       <Sheet>
-        <div className="flex flex-col items-center justify-center min-h-screen bg-stone-400">
-          <SheetTrigger className="absolute top-4 right-4">
-            <div className="h-10 w-10 relative flex items-center justify-center">
-              <span className="absolute -top-1 -right-1 text-[8px] bg-black text-white rounded-full px-2 py-1">
+        <div className='flex flex-col items-center justify-center min-h-screen bg-stone-400'>
+          <SheetTrigger className='absolute top-4 right-4'>
+            <div className='h-10 w-10 relative flex items-center justify-center'>
+              <span className='absolute -top-1 -right-1 text-[8px] bg-black text-white rounded-full px-2 py-1'>
                 {count}
               </span>
-              <ShoppingCart className="size-6" />
+              <ShoppingCart className='size-6' />
             </div>
           </SheetTrigger>
           <button
-            className="absolute top-4 left-4 bg-black text-white px-4 py-2 rounded-lg"
+            className='absolute top-4 left-4 bg-black text-white px-4 py-2 rounded-lg'
             onClick={() => toggleTheme()}
           >
             Toggle theme
           </button>
-          <div className="card">
-            <Product name="apple" description="A juicy red apple" />
+          <div className='card'>
+            <Product name='apple' description='A juicy red apple' />
           </div>
-          <Cart quantity={count} setCount={setCount} />
         </div>
       </Sheet>
     </CartContext.Provider>

src/components/Card.tsx

@@ -0,0 +1,16 @@
+type cardProps = {
+  text?:string
+  time:number
+}
+
+
+export default function Card({text} :cardProps) {
+//  if (text){
+//   const title = text + "title"
+//  }
+
+  return <div className='bg-blue-800 flex'>{text ? <h1 className="bg-red-500">
+    {text}
+  </h1>:null}
+  </div>;
+}

src/stories/Card.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import Card from '@/components/Card';
+
+const meta = {
+  component: Card,
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: 'Card Title',
+    time: 10,
+  },
+};