@k3-universe/react-kit 0.0.28 → 0.0.30

package/src/stories/kit/components/TimeRangePicker.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import * as React from 'react'
-import { TimeRangePicker } from '../../../kit/components/timepicker/TimeRangePicker'
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { TimeRangePicker } from '../../../kit/components/timepicker/TimeRangePicker';
 
 const meta: Meta<typeof TimeRangePicker> = {
   title: 'Kit/Components/TimeRangePicker',
@@ -9,11 +9,11 @@ const meta: Meta<typeof TimeRangePicker> = {
     controls: { expanded: true },
     backgrounds: { disable: true },
   },
-}
+};
 
-export default meta
+export default meta;
 
-type Story = StoryObj<typeof TimeRangePicker>
+type Story = StoryObj<typeof TimeRangePicker>;
 
 export const Basic: Story = {
   name: 'Basic (HH:mm – HH:mm, 24h)',
@@ -22,16 +22,22 @@ export const Basic: Story = {
     hourCycle: 24,
   },
   render: (args) => {
-    const [value, setValue] = React.useState<{ from?: Date | null; to?: Date | null } | null>({
+    const [value, setValue] = React.useState<{
+      from?: Date | null;
+      to?: Date | null;
+    } | null>({
       from: new Date(),
-      to: new Date(new Date().getTime() + 60 * 60 * 1000),
-    })
+      to: new Date(Date.now() + 60 * 60 * 1000),
+    });
 
     return (
       <div className="p-6 space-y-4">
         <TimeRangePicker {...args} value={value} onChange={setValue} />
-        <div className="text-xs text-muted-foreground">Value: {value?.from?.toLocaleTimeString?.()} – {value?.to?.toLocaleTimeString?.()}</div>
+        <div className="text-xs text-muted-foreground">
+          Value: {value?.from?.toLocaleTimeString?.()} –{' '}
+          {value?.to?.toLocaleTimeString?.()}
+        </div>
       </div>
-    )
+    );
   },
-}
+};

package/src/stories/kit/layouts/admin/AdminLayout.Basic.stories.tsx

@@ -21,17 +21,34 @@ export default meta;
 type Story = StoryObj<typeof AdminLayout>;
 
 function RegisterMenus() {
-  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
   useEffect(() => {
     clear();
     registerGroup({ id: 'main', label: 'Main' });
-    registerItem('main', { id: 'dashboard', title: 'Dashboard', url: '/', icon: Home });
+    registerItem('main', {
+      id: 'dashboard',
+      title: 'Dashboard',
+      url: '/',
+      icon: Home,
+    });
 
     registerGroup({ id: 'commerce', label: 'Commerce' });
-    registerItem('commerce', { id: 'orders', title: 'Orders', url: '/orders', icon: ShoppingCart, badge: 12 });
+    registerItem('commerce', {
+      id: 'orders',
+      title: 'Orders',
+      url: '/orders',
+      icon: ShoppingCart,
+      badge: 12,
+    });
 
     registerGroup({ id: 'settings', label: 'Settings' });
-    registerItem('settings', { id: 'general', title: 'General', url: '/settings', icon: Settings });
+    registerItem('settings', {
+      id: 'general',
+      title: 'General',
+      url: '/settings',
+      icon: Settings,
+    });
   }, [registerGroup, registerItem, clear]);
   return null;
 }
@@ -78,12 +95,18 @@ function App(props: AdminLayoutStoryProps) {
     component: () => (
       <div className="p-6">
         <h2 className="text-xl font-semibold mb-2">Settings</h2>
-        <p className="text-muted-foreground">Update your application settings.</p>
+        <p className="text-muted-foreground">
+          Update your application settings.
+        </p>
       </div>
     ),
   });
 
-  const routeTree = rootRoute.addChildren([indexRoute, ordersRoute, settingsRoute]);
+  const routeTree = rootRoute.addChildren([
+    indexRoute,
+    ordersRoute,
+    settingsRoute,
+  ]);
   const router = createRouter({ routeTree, basepath: '/iframe.html' });
 
   return <RouterProvider router={router} />;

package/src/stories/kit/layouts/admin/AdminLayout.Collapsible.stories.tsx

@@ -23,15 +23,32 @@ type Story = StoryObj<typeof AdminLayout>;
 type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
 
 function RegisterMenus() {
-  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
   useEffect(() => {
     clear();
     registerGroup({ id: 'main', label: 'Main' });
-    registerItem('main', { id: 'dashboard', title: 'Dashboard', url: '/', icon: Home });
+    registerItem('main', {
+      id: 'dashboard',
+      title: 'Dashboard',
+      url: '/',
+      icon: Home,
+    });
     registerGroup({ id: 'commerce', label: 'Commerce' });
-    registerItem('commerce', { id: 'orders', title: 'Orders', url: '/orders', icon: ShoppingCart, badge: 12 });
+    registerItem('commerce', {
+      id: 'orders',
+      title: 'Orders',
+      url: '/orders',
+      icon: ShoppingCart,
+      badge: 12,
+    });
     registerGroup({ id: 'settings', label: 'Settings' });
-    registerItem('settings', { id: 'general', title: 'General', url: '/settings', icon: Settings });
+    registerItem('settings', {
+      id: 'general',
+      title: 'General',
+      url: '/settings',
+      icon: Settings,
+    });
   }, [registerGroup, registerItem, clear]);
   return null;
 }
@@ -48,7 +65,11 @@ function App(props: AdminLayoutStoryProps) {
     ),
   });
 
-  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => <div className="p-6">Home</div>,
+  });
   const routeTree = rootRoute.addChildren([indexRoute]);
   const router = createRouter({ routeTree, basepath: '/iframe.html' });
   return <RouterProvider router={router} />;

package/src/stories/kit/layouts/admin/AdminLayout.Complex.stories.tsx

@@ -10,7 +10,17 @@ import {
   createRoute,
   createRouter,
 } from '@tanstack/react-router';
-import { Home, ShoppingCart, Settings, Users, BarChart3, FileText, Shield, Bell, LifeBuoy } from 'lucide-react';
+import {
+  Home,
+  ShoppingCart,
+  Settings,
+  Users,
+  BarChart3,
+  FileText,
+  Shield,
+  Bell,
+  LifeBuoy,
+} from 'lucide-react';
 
 const meta: Meta<typeof AdminLayout> = {
   title: 'Kit/Layouts/Admin',
@@ -23,13 +33,25 @@ type Story = StoryObj<typeof AdminLayout>;
 type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
 
 function RegisterComplexMenus() {
-  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
   useEffect(() => {
     clear();
     // Overview
     registerGroup({ id: 'overview', label: 'Overview' });
-    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
-    registerItem('overview', { id: 'reports', title: 'Reports', url: '/reports', icon: BarChart3, badge: 'New' });
+    registerItem('overview', {
+      id: 'home',
+      title: 'Home',
+      url: '/',
+      icon: Home,
+    });
+    registerItem('overview', {
+      id: 'reports',
+      title: 'Reports',
+      url: '/reports',
+      icon: BarChart3,
+      badge: 'New',
+    });
 
     // Management
     registerGroup({ id: 'management', label: 'Management' });
@@ -49,8 +71,16 @@ function RegisterComplexMenus() {
               title: 'Team Alpha',
               url: '/users/teams/alpha',
               children: [
-                { id: 'team-alpha-members', title: 'Members', url: '/users/teams/alpha/members' },
-                { id: 'team-alpha-settings', title: 'Settings', url: '/users/teams/alpha/settings' },
+                {
+                  id: 'team-alpha-members',
+                  title: 'Members',
+                  url: '/users/teams/alpha/members',
+                },
+                {
+                  id: 'team-alpha-settings',
+                  title: 'Settings',
+                  url: '/users/teams/alpha/settings',
+                },
               ],
             },
             { id: 'team-beta', title: 'Team Beta', url: '/users/teams/beta' },
@@ -64,12 +94,25 @@ function RegisterComplexMenus() {
       icon: ShoppingCart,
       children: [
         { id: 'orders-all', title: 'All Orders', url: '/orders' },
-        { id: 'orders-pending', title: 'Pending', url: '/orders/pending', badge: 5 },
-        { id: 'orders-completed', title: 'Completed', url: '/orders/completed' },
+        {
+          id: 'orders-pending',
+          title: 'Pending',
+          url: '/orders/pending',
+          badge: 5,
+        },
+        {
+          id: 'orders-completed',
+          title: 'Completed',
+          url: '/orders/completed',
+        },
       ],
     });
     // Action-only item
-    registerItem('management', { id: 'export', title: 'Export CSV', onClick: () => console.log('Export CSV') });
+    registerItem('management', {
+      id: 'export',
+      title: 'Export CSV',
+      onClick: () => console.log('Export CSV'),
+    });
 
     // Content
     registerGroup({ id: 'content', label: 'Content' });
@@ -79,20 +122,51 @@ function RegisterComplexMenus() {
       icon: FileText,
       children: [
         { id: 'articles-published', title: 'Published', url: '/articles' },
-        { id: 'articles-archived', title: 'Archived', url: '/articles/archived' },
+        {
+          id: 'articles-archived',
+          title: 'Archived',
+          url: '/articles/archived',
+        },
       ],
     });
-    registerItem('content', { id: 'drafts', title: 'Drafts', url: '/drafts', icon: FileText, badge: 7 });
+    registerItem('content', {
+      id: 'drafts',
+      title: 'Drafts',
+      url: '/drafts',
+      icon: FileText,
+      badge: 7,
+    });
 
     // System
     registerGroup({ id: 'system', label: 'System' });
-    registerItem('system', { id: 'alerts', title: 'Alerts', url: '/alerts', icon: Bell });
-    registerItem('system', { id: 'security', title: 'Security', url: '/security', icon: Shield, disabled: true });
-    registerItem('system', { id: 'support', title: 'Support', url: '/support', icon: LifeBuoy });
+    registerItem('system', {
+      id: 'alerts',
+      title: 'Alerts',
+      url: '/alerts',
+      icon: Bell,
+    });
+    registerItem('system', {
+      id: 'security',
+      title: 'Security',
+      url: '/security',
+      icon: Shield,
+      disabled: true,
+    });
+    registerItem('system', {
+      id: 'support',
+      title: 'Support',
+      url: '/support',
+      icon: LifeBuoy,
+    });
 
     // Settings
     registerGroup({ id: 'settings', label: 'Settings' });
-    registerItem('settings', { id: 'general', title: 'General', url: '/settings', icon: Settings });
+    registerItem('settings', {
+      id: 'general',
+      title: 'General',
+      url: '/settings',
+      icon: Settings,
+    });
   }, [registerGroup, registerItem, clear]);
   return null;
 }
@@ -147,7 +221,7 @@ function App(props: AdminLayoutStoryProps) {
           <p className="text-muted-foreground">This is the {title} page.</p>
         </div>
       ),
-    })
+    }),
   );
 
   const routeTree = rootRoute.addChildren([indexRoute, ...extraRoutes]);
@@ -161,8 +235,17 @@ export const Complex: Story = {
     <App
       sidebarHeaderIcon={Home}
       sidebarHeaderTitle={<span>Admin App</span>}
-      headerAfterTrigger={<input className="h-8 w-64 rounded-md border px-3 text-sm" placeholder="Quick search…" />}
-      headerAfterTheme={<button className="h-8 rounded-md border px-3 text-sm">Help</button>}
+      headerAfterTrigger={
+        <input
+          className="h-8 w-64 rounded-md border px-3 text-sm"
+          placeholder="Quick search…"
+        />
+      }
+      headerAfterTheme={
+        <button type="button" className="h-8 rounded-md border px-3 text-sm">
+          Help
+        </button>
+      }
     />
   ),
 };

package/src/stories/kit/layouts/admin/AdminLayout.CustomSidebarHeaderComponent.stories.tsx

@@ -23,11 +23,17 @@ type Story = StoryObj<typeof AdminLayout>;
 type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
 
 function RegisterMenus() {
-  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
   useEffect(() => {
     clear();
     registerGroup({ id: 'overview', label: 'Overview' });
-    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
+    registerItem('overview', {
+      id: 'home',
+      title: 'Home',
+      url: '/',
+      icon: Home,
+    });
   }, [registerGroup, registerItem, clear]);
   return null;
 }
@@ -43,7 +49,11 @@ function App(props: AdminLayoutStoryProps) {
       </ThemeProvider>
     ),
   });
-  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => <div className="p-6">Home</div>,
+  });
   const routeTree = rootRoute.addChildren([indexRoute]);
   const router = createRouter({ routeTree, basepath: '/iframe.html' });
   return <RouterProvider router={router} />;
@@ -56,7 +66,11 @@ export const CustomSidebarHeaderComponent: Story = {
       sidebarHeader={
         <div className="px-4 py-3">
           <div className="flex items-center gap-2">
-            <img src="https://dummyimage.com/32x32/000/fff.png&text=A" alt="Logo" className="h-8 w-8 rounded" />
+            <img
+              src="https://dummyimage.com/32x32/000/fff.png&text=A"
+              alt="Logo"
+              className="h-8 w-8 rounded"
+            />
             <span className="font-semibold">My Admin</span>
           </div>
         </div>

package/src/stories/kit/layouts/admin/AdminLayout.CustomSidebarTitleAndIcon.stories.tsx

@@ -23,11 +23,17 @@ type Story = StoryObj<typeof AdminLayout>;
 type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
 
 function RegisterMenus() {
-  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
   useEffect(() => {
     clear();
     registerGroup({ id: 'overview', label: 'Overview' });
-    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
+    registerItem('overview', {
+      id: 'home',
+      title: 'Home',
+      url: '/',
+      icon: Home,
+    });
   }, [registerGroup, registerItem, clear]);
   return null;
 }
@@ -43,7 +49,11 @@ function App(props: AdminLayoutStoryProps) {
       </ThemeProvider>
     ),
   });
-  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => <div className="p-6">Home</div>,
+  });
   const routeTree = rootRoute.addChildren([indexRoute]);
   const router = createRouter({ routeTree, basepath: '/iframe.html' });
   return <RouterProvider router={router} />;
@@ -52,6 +62,9 @@ function App(props: AdminLayoutStoryProps) {
 export const CustomSidebarTitleAndIcon: Story = {
   name: 'Custom sidebar title and icon',
   render: () => (
-    <App sidebarHeaderIcon={BarChart3} sidebarHeaderTitle={<span>Custom Title</span>} />
+    <App
+      sidebarHeaderIcon={BarChart3}
+      sidebarHeaderTitle={<span>Custom Title</span>}
+    />
   ),
 };

package/src/stories/kit/layouts/admin/AdminLayout.HeaderSlots.stories.tsx

@@ -23,11 +23,17 @@ type Story = StoryObj<typeof AdminLayout>;
 type AdminLayoutStoryProps = React.ComponentProps<typeof AdminLayout>;
 
 function RegisterMenus() {
-  const { registerGroup, registerItem, clear } = useAdminSidebarMenuRegistration();
+  const { registerGroup, registerItem, clear } =
+    useAdminSidebarMenuRegistration();
   useEffect(() => {
     clear();
     registerGroup({ id: 'overview', label: 'Overview' });
-    registerItem('overview', { id: 'home', title: 'Home', url: '/', icon: Home });
+    registerItem('overview', {
+      id: 'home',
+      title: 'Home',
+      url: '/',
+      icon: Home,
+    });
   }, [registerGroup, registerItem, clear]);
   return null;
 }
@@ -43,7 +49,11 @@ function App(props: AdminLayoutStoryProps) {
       </ThemeProvider>
     ),
   });
-  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <div className="p-6">Home</div> });
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => <div className="p-6">Home</div>,
+  });
   const routeTree = rootRoute.addChildren([indexRoute]);
   const router = createRouter({ routeTree, basepath: '/iframe.html' });
   return <RouterProvider router={router} />;
@@ -53,11 +63,23 @@ export const HeaderSlots: Story = {
   name: 'Header slots (after trigger/theme)',
   render: () => (
     <App
-      headerAfterTrigger={<input className="h-8 w-64 rounded-md border px-3 text-sm" placeholder="Search…" />}
+      headerAfterTrigger={
+        <input
+          className="h-8 w-64 rounded-md border px-3 text-sm"
+          placeholder="Search…"
+        />
+      }
       headerAfterTheme={
         <div className="flex items-center gap-2">
-          <button className="h-8 rounded-md border px-3 text-sm">Invite</button>
-          <button className="h-8 rounded-md bg-primary px-3 text-sm text-primary-foreground">New</button>
+          <button type="button" className="h-8 rounded-md border px-3 text-sm">
+            Invite
+          </button>
+          <button
+            type="button"
+            className="h-8 rounded-md bg-primary px-3 text-sm text-primary-foreground"
+          >
+            New
+          </button>
         </div>
       }
     />

package/src/stories/shadcn/ui/Accordion.stories.tsx

@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../../shadcn/ui/accordion';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../../../shadcn/ui/accordion';
 import { useState } from 'react';
 
 const meta: Meta<typeof Accordion> = {
@@ -20,15 +25,21 @@ export const Basic: Story = {
     <Accordion {...args}>
       <AccordionItem value="item-1">
         <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>Yes. It adheres to WAI-ARIA design patterns.</AccordionContent>
+        <AccordionContent>
+          Yes. It adheres to WAI-ARIA design patterns.
+        </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
         <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>Yes. It comes with default styles that can be overridden.</AccordionContent>
+        <AccordionContent>
+          Yes. It comes with default styles that can be overridden.
+        </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-3">
         <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>Yes. It uses utility classes for smooth animations.</AccordionContent>
+        <AccordionContent>
+          Yes. It uses utility classes for smooth animations.
+        </AccordionContent>
       </AccordionItem>
     </Accordion>
   ),
@@ -43,15 +54,21 @@ export const Multiple: Story = {
     <Accordion {...args}>
       <AccordionItem value="item-1">
         <AccordionTrigger>Open multiple items?</AccordionTrigger>
-        <AccordionContent>Yes. In multiple mode you can keep several sections open.</AccordionContent>
+        <AccordionContent>
+          Yes. In multiple mode you can keep several sections open.
+        </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
         <AccordionTrigger>Keeps state independent?</AccordionTrigger>
-        <AccordionContent>Each item can be toggled independently in multiple mode.</AccordionContent>
+        <AccordionContent>
+          Each item can be toggled independently in multiple mode.
+        </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-3">
         <AccordionTrigger>Works with defaultValue?</AccordionTrigger>
-        <AccordionContent>Provide an array of values to open initially.</AccordionContent>
+        <AccordionContent>
+          Provide an array of values to open initially.
+        </AccordionContent>
       </AccordionItem>
     </Accordion>
   ),
@@ -66,7 +83,9 @@ export const DisabledItem: Story = {
       </AccordionItem>
       <AccordionItem value="item-2" disabled>
         <AccordionTrigger>Disabled item</AccordionTrigger>
-        <AccordionContent>This content cannot be toggled because the item is disabled.</AccordionContent>
+        <AccordionContent>
+          This content cannot be toggled because the item is disabled.
+        </AccordionContent>
       </AccordionItem>
     </Accordion>
   ),
@@ -79,11 +98,15 @@ function ControlledAccordionDemo() {
     <Accordion type="single" collapsible value={value} onValueChange={setValue}>
       <AccordionItem value="item-1">
         <AccordionTrigger>Controlled: Item 1</AccordionTrigger>
-        <AccordionContent>Clicking again will collapse because collapsible is true.</AccordionContent>
+        <AccordionContent>
+          Clicking again will collapse because collapsible is true.
+        </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
         <AccordionTrigger>Controlled: Item 2</AccordionTrigger>
-        <AccordionContent>State is managed via value/onValueChange.</AccordionContent>
+        <AccordionContent>
+          State is managed via value/onValueChange.
+        </AccordionContent>
       </AccordionItem>
     </Accordion>
   );

package/src/stories/shadcn/ui/AlertDialog.stories.tsx

@@ -61,7 +61,9 @@ export const Destructive: Story = {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction className={buttonVariants({ variant: 'destructive' })}>
+          <AlertDialogAction
+            className={buttonVariants({ variant: 'destructive' })}
+          >
             Delete
           </AlertDialogAction>
         </AlertDialogFooter>

package/src/stories/shadcn/ui/Button.stories.tsx

@@ -31,7 +31,9 @@ export const Sizes: Story = {
       <Button size="default">Default</Button>
       <Button size="lg">Large</Button>
       <Button size="icon" aria-label="icon" className="rounded-full">
-        <span role="img" aria-label="waving hand">👋</span>
+        <span role="img" aria-label="waving hand">
+          👋
+        </span>
       </Button>
     </div>
   ),

package/src/stories/shadcn/ui/Calendar.stories.tsx

@@ -15,7 +15,12 @@ function CalendarSingleStory() {
   const [date, setDate] = useState<Date | undefined>(new Date());
   return (
     <div className="p-2">
-      <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        className="rounded-md border"
+      />
       <div className="text-sm text-muted-foreground mt-2">
         Selected: {date ? date.toDateString() : '—'}
       </div>

package/src/stories/shadcn/ui/Card.stories.tsx

@@ -1,5 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../../shadcn/ui/card';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '../../../shadcn/ui/card';
 import { Button } from '../../../shadcn/ui/button';
 
 const meta: Meta<typeof Card> = {
@@ -19,7 +26,9 @@ export const Basic: Story = {
         <CardDescription>Deploy your new project in one-click.</CardDescription>
       </CardHeader>
       <CardContent>
-        <p>Card content goes here. You can place forms, text, or other elements.</p>
+        <p>
+          Card content goes here. You can place forms, text, or other elements.
+        </p>
       </CardContent>
       <CardFooter className="flex justify-between">
         <Button variant="outline">Cancel</Button>