feat: add Storybook stories for UI components and update existing stories

apps/web/client/src/stories/Alert.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Alert, AlertTitle, AlertDescription } from '@onlook/ui/alert';
+import { AlertCircle, Info, CheckCircle2, AlertTriangle } from 'lucide-react';
+
+const meta = {
+    component: Alert,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            description: 'Visual style variant of the alert',
+            control: { type: 'select' },
+            options: ['default', 'destructive'],
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div className="w-[400px]">
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <Alert>
+            <Info className="h-4 w-4" />
+            <AlertTitle>Information</AlertTitle>
+            <AlertDescription>
+                This is an informational alert message.
+            </AlertDescription>
+        </Alert>
+    ),
+};
+
+export const Destructive: Story = {
+    render: () => (
+        <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>
+                Something went wrong. Please try again later.
+            </AlertDescription>
+        </Alert>
+    ),
+};
+
+export const Success: Story = {
+    render: () => (
+        <Alert>
+            <CheckCircle2 className="h-4 w-4 text-green-500" />
+            <AlertTitle>Success</AlertTitle>
+            <AlertDescription>
+                Your changes have been saved successfully.
+            </AlertDescription>
+        </Alert>
+    ),
+};
+
+export const Warning: Story = {
+    render: () => (
+        <Alert>
+            <AlertTriangle className="h-4 w-4 text-yellow-500" />
+            <AlertTitle>Warning</AlertTitle>
+            <AlertDescription>
+                This action may have unintended consequences.
+            </AlertDescription>
+        </Alert>
+    ),
+};
+
+export const TitleOnly: Story = {
+    render: () => (
+        <Alert>
+            <Info className="h-4 w-4" />
+            <AlertTitle>Quick notification</AlertTitle>
+        </Alert>
+    ),
+};
+
+export const Variants: Story = {
+    render: () => (
+        <div className="flex flex-col gap-4">
+            <Alert>
+                <Info className="h-4 w-4" />
+                <AlertTitle>Default Alert</AlertTitle>
+                <AlertDescription>
+                    This is the default alert style.
+                </AlertDescription>
+            </Alert>
+            <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Destructive Alert</AlertTitle>
+                <AlertDescription>
+                    This is the destructive alert style.
+                </AlertDescription>
+            </Alert>
+        </div>
+    ),
+};

apps/web/client/src/stories/Avatar.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Avatar, AvatarImage, AvatarFallback } from '@onlook/ui/avatar';
+
+const meta = {
+    component: Avatar,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+    ),
+};
+
+export const WithFallback: Story = {
+    render: () => (
+        <Avatar>
+            <AvatarImage src="/broken-image.jpg" alt="User" />
+            <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+    ),
+};
+
+export const FallbackOnly: Story = {
+    render: () => (
+        <Avatar>
+            <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+    ),
+};
+
+export const Sizes: Story = {
+    render: () => (
+        <div className="flex items-center gap-4">
+            <Avatar className="size-6">
+                <AvatarImage src="https://github.com/shadcn.png" alt="Small" />
+                <AvatarFallback>SM</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-8">
+                <AvatarImage src="https://github.com/shadcn.png" alt="Default" />
+                <AvatarFallback>MD</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-12">
+                <AvatarImage src="https://github.com/shadcn.png" alt="Large" />
+                <AvatarFallback>LG</AvatarFallback>
+            </Avatar>
+            <Avatar className="size-16">
+                <AvatarImage src="https://github.com/shadcn.png" alt="Extra Large" />
+                <AvatarFallback>XL</AvatarFallback>
+            </Avatar>
+        </div>
+    ),
+};
+
+export const Group: Story = {
+    render: () => (
+        <div className="flex -space-x-2">
+            <Avatar className="border-2 border-background">
+                <AvatarImage src="https://github.com/shadcn.png" alt="User 1" />
+                <AvatarFallback>U1</AvatarFallback>
+            </Avatar>
+            <Avatar className="border-2 border-background">
+                <AvatarFallback>U2</AvatarFallback>
+            </Avatar>
+            <Avatar className="border-2 border-background">
+                <AvatarFallback>U3</AvatarFallback>
+            </Avatar>
+            <Avatar className="border-2 border-background">
+                <AvatarFallback>+5</AvatarFallback>
+            </Avatar>
+        </div>
+    ),
+};

apps/web/client/src/stories/Badge.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Badge } from '@onlook/ui/badge';
+import { Check, AlertCircle, Clock } from 'lucide-react';
+
+const meta = {
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            description: 'Visual style variant of the badge',
+            control: { type: 'select' },
+            options: ['default', 'secondary', 'destructive', 'outline'],
+        },
+        asChild: {
+            description: 'Whether to render as a child component',
+            control: 'boolean',
+        },
+    },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'Badge',
+        variant: 'default',
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        children: 'Secondary',
+        variant: 'secondary',
+    },
+};
+
+export const Destructive: Story = {
+    args: {
+        children: 'Destructive',
+        variant: 'destructive',
+    },
+};
+
+export const Outline: Story = {
+    args: {
+        children: 'Outline',
+        variant: 'outline',
+    },
+};
+
+export const WithIcon: Story = {
+    args: {
+        children: (
+            <>
+                <Check />
+                Success
+            </>
+        ),
+        variant: 'default',
+    },
+};
+
+export const Variants: Story = {
+    render: () => (
+        <div className="flex flex-wrap gap-4">
+            <Badge variant="default">Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="destructive">Destructive</Badge>
+            <Badge variant="outline">Outline</Badge>
+        </div>
+    ),
+};
+
+export const WithIcons: Story = {
+    render: () => (
+        <div className="flex flex-wrap gap-4">
+            <Badge variant="default">
+                <Check />
+                Success
+            </Badge>
+            <Badge variant="destructive">
+                <AlertCircle />
+                Error
+            </Badge>
+            <Badge variant="secondary">
+                <Clock />
+                Pending
+            </Badge>
+        </div>
+    ),
+};

apps/web/client/src/stories/Button.stories.tsx

@@ -1,9 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { Button } from '@onlook/ui/button';
 import { Heart, Plus, Trash2 } from 'lucide-react';
 
 const meta = {
-    title: 'UI/Button',
     component: Button,
     parameters: {
         layout: 'centered',