design system token v0.1

stories/Layout/Card.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+
+const meta = {
+  title: 'Layout/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-87.5">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card content with some example text to demonstrate the layout.</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Action</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const WithAction: Story = {
+  render: () => (
+    <Card className="w-87.5">
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">Mark all read</Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>Here are your latest notifications.</p>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <Card className="w-87.5">
+      <CardHeader>
+        <CardTitle>Simple Card</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>A card with just a title and content.</p>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const WithFooter: Story = {
+  render: () => (
+    <Card className="w-87.5">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Configure your project settings below.</p>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const ContentOnly: Story = {
+  render: () => (
+    <Card className="w-87.5">
+      <CardContent>
+        <p>A minimal card with only content, no header or footer.</p>
+      </CardContent>
+    </Card>
+  ),
+}