design system token v0.1

stories/Feedback/Alert.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Terminal, AlertCircle } from 'lucide-react'
+
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
+
+const meta = {
+  title: 'Feedback/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-125">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Alert>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <Terminal className="size-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the CLI.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertCircle className="size-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const WithoutIcon: Story = {
+  render: () => (
+    <Alert>
+      <AlertTitle>Note</AlertTitle>
+      <AlertDescription>
+        This alert has no icon, just a title and description.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const TitleOnly: Story = {
+  render: () => (
+    <Alert>
+      <Terminal className="size-4" />
+      <AlertTitle>A simple alert with only a title.</AlertTitle>
+    </Alert>
+  ),
+}

stories/Feedback/Skeleton.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Skeleton } from '@/components/ui/skeleton'
+
+const meta = {
+  title: 'Feedback/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'h-4 w-62.5',
+  },
+}
+
+export const Circle: Story = {
+  args: {
+    className: 'size-12 rounded-full',
+  },
+}
+
+export const CardSkeleton: Story = {
+  render: () => (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="size-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-62.5" />
+        <Skeleton className="h-4 w-50" />
+      </div>
+    </div>
+  ),
+}
+
+export const FormSkeleton: Story = {
+  render: () => (
+    <div className="space-y-4 w-75">
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-9 w-full" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-30" />
+        <Skeleton className="h-9 w-full" />
+      </div>
+      <Skeleton className="h-9 w-25" />
+    </div>
+  ),
+}
+
+export const TextBlock: Story = {
+  render: () => (
+    <div className="space-y-2 w-87.5">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+    </div>
+  ),
+}

stories/Feedback/Spinner.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Spinner } from '@/components/ui/spinner'
+
+const meta = {
+  title: 'Feedback/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Spinner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Small: Story = {
+  args: {
+    className: 'size-3 animate-spin',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    className: 'size-8 animate-spin',
+  },
+}
+
+export const ExtraLarge: Story = {
+  args: {
+    className: 'size-12 animate-spin',
+  },
+}
+
+export const WithText: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Spinner />
+      <span className="text-sm text-muted-foreground">Loading...</span>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner className="size-3 animate-spin" />
+      <Spinner />
+      <Spinner className="size-6 animate-spin" />
+      <Spinner className="size-8 animate-spin" />
+      <Spinner className="size-12 animate-spin" />
+    </div>
+  ),
+}