📚 Add comprehensive Storybook stories for UI library components

frontend/packages/ui/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { Avatar } from './Avatar'
+
+const meta = {
+  component: Avatar,
+  argTypes: {
+    initial: {
+      control: 'text',
+      description: 'Initial character displayed in avatar',
+    },
+    size: {
+      control: 'select',
+      options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      description: 'Size of the avatar',
+    },
+    user: {
+      control: 'select',
+      options: [
+        'you',
+        'collaborator-1',
+        'collaborator-2',
+        'collaborator-3',
+        'collaborator-4',
+        'collaborator-5',
+        'collaborator-6',
+        'collaborator-7',
+        'collaborator-8',
+        'collaborator-9',
+        'collaborator-10',
+        'collaborator-11',
+        'jack',
+      ],
+      description: 'User type to determine background color',
+    },
+    color: {
+      control: 'color',
+      description: 'Custom background color',
+    },
+  },
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+  args: {
+    initial: 'A',
+    size: 'md',
+    user: 'you',
+  },
+}
+
+export const ExtraExtraSmall: Story = {
+  args: {
+    initial: 'A',
+    size: 'xxs',
+  },
+}
+
+export const ExtraSmall: Story = {
+  args: {
+    initial: 'A',
+    size: 'xs',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    initial: 'A',
+    size: 'sm',
+  },
+}
+
+export const Medium: Story = {
+  args: {
+    initial: 'A',
+    size: 'md',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    initial: 'A',
+    size: 'lg',
+  },
+}
+
+export const ExtraLarge: Story = {
+  args: {
+    initial: 'A',
+    size: 'xl',
+  },
+}
+
+export const TwoExtraLarge: Story = {
+  args: {
+    initial: 'A',
+    size: '2xl',
+  },
+}
+
+export const Collaborator1: Story = {
+  args: {
+    initial: 'B',
+    user: 'collaborator-1',
+  },
+}
+
+export const Collaborator2: Story = {
+  args: {
+    initial: 'C',
+    user: 'collaborator-2',
+  },
+}
+
+export const Collaborator3: Story = {
+  args: {
+    initial: 'D',
+    user: 'collaborator-3',
+  },
+}
+
+export const Jack: Story = {
+  args: {
+    initial: 'J',
+    user: 'jack',
+  },
+}
+
+export const CustomColor: Story = {
+  args: {
+    initial: 'X',
+    color: '#ff6b6b',
+  },
+}

frontend/packages/ui/src/components/Callout/Callout.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { Callout } from './Callout'
+
+const meta = {
+  component: Callout,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'danger', 'success', 'info', 'warning'],
+      description: 'The visual style of the callout',
+    },
+    device: {
+      control: 'select',
+      options: ['default', 'mobile'],
+      description: 'Device-specific styling',
+    },
+    children: {
+      control: 'text',
+      description: 'Content to display in the callout',
+    },
+  },
+} satisfies Meta<typeof Callout>
+
+export default meta
+type Story = StoryObj<typeof Callout>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    children: 'This is a default callout message.',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    children: 'This is a danger callout message.',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'This is a success callout message.',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    children: 'This is an info callout message.',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'This is a warning callout message.',
+  },
+}
+
+export const LongContent: Story = {
+  args: {
+    variant: 'info',
+    children:
+      'This is a callout with a longer message to demonstrate how the component handles multiple lines of text. The content should wrap properly and maintain good readability.',
+  },
+}

frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import { Button } from '../Button'
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from './Collapsible'
+
+const CollapsibleExample = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <CollapsibleRoot open={open} onOpenChange={setOpen}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <CollapsibleTrigger asChild>
+          <Button>{open ? 'Hide' : 'Show'} Details</Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div style={{ padding: '16px', background: '#f0f0f0' }}>
+            This is the collapsible content. It can contain any React elements.
+            You can add more content here as needed.
+          </div>
+        </CollapsibleContent>
+      </div>
+    </CollapsibleRoot>
+  )
+}
+
+const meta = {
+  component: CollapsibleRoot,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Radix UI Collapsible wrapper. Use CollapsibleRoot, CollapsibleTrigger, and CollapsibleContent together to create collapsible sections.',
+      },
+    },
+  },
+} satisfies Meta<typeof CollapsibleRoot>
+
+export default meta
+type Story = StoryObj<typeof CollapsibleRoot>
+
+export const Default: Story = {
+  render: () => <CollapsibleExample />,
+}

frontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { ContextMenu } from './ContextMenu'
+
+const meta = {
+  component: ContextMenu,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Right-click on the trigger element to open the context menu.',
+      },
+    },
+  },
+} satisfies Meta<typeof ContextMenu>
+
+export default meta
+type Story = StoryObj<typeof ContextMenu>
+
+export const Default: Story = {
+  args: {
+    TriggerElement: (
+      <div
+        style={{
+          border: '1px solid #ccc',
+          padding: '20px',
+          borderRadius: '4px',
+          textAlign: 'center',
+        }}
+      >
+        Right-click here
+      </div>
+    ),
+    ContextMenuElement: <span>Menu Item</span>,
+    onClick: () => {},
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    TriggerElement: (
+      <div
+        style={{
+          border: '1px solid #ccc',
+          padding: '20px',
+          borderRadius: '4px',
+          textAlign: 'center',
+        }}
+      >
+        Right-click to see icon menu
+      </div>
+    ),
+    ContextMenuElement: (
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <span>🔧</span>
+        <span>Settings</span>
+      </div>
+    ),
+    onClick: () => {},
+  },
+}

frontend/packages/ui/src/components/CookieConsent/CookieConsent.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { CookieConsent } from './CookieConsent'
+
+const meta = {
+  component: CookieConsent,
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Whether the cookie consent banner is visible',
+    },
+  },
+} satisfies Meta<typeof CookieConsent>
+
+export default meta
+type Story = StoryObj<typeof CookieConsent>
+
+export const Open: Story = {
+  args: {
+    open: true,
+    onClickAccept: () => {},
+    onClickDeny: () => {},
+  },
+}
+
+export const Closed: Story = {
+  args: {
+    open: false,
+    onClickAccept: () => {},
+    onClickDeny: () => {},
+  },
+}