@tribepad/themis 1.0.0

package/src/elements/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,397 @@
+/**
+ * Dropdown Menu Storybook Stories
+ *
+ * @see spec.md FR-001 to FR-054 (Dropdown Component Requirements)
+ * @see tasks.md T027 (Storybook stories with 7+ examples)
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Dropdown } from './Dropdown';
+import { Button } from '../Button';
+import {
+  Edit,
+  Trash,
+  Copy,
+  Download,
+  Upload,
+  Settings,
+  User,
+  LogOut,
+  ChevronRight,
+} from 'lucide-react';
+
+const meta = {
+  title: 'Elements/Dropdown',
+  component: Dropdown,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible dropdown menu with WCAG 2.2 AAA compliance, React Aria primitives, nested submenus, and automatic collision detection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Default open state (uncontrolled mode)',
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Controlled open state',
+    },
+    onOpenChange: {
+      action: 'onOpenChange',
+      description: 'Callback when open state changes',
+    },
+  },
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default story: Basic menu with 3-5 items
+ */
+export const Default: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="outline">Open Menu</Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Item onAction={() => console.log('New File')}>New File</Dropdown.Item>
+        <Dropdown.Item onAction={() => console.log('Open')}>Open</Dropdown.Item>
+        <Dropdown.Separator />
+        <Dropdown.Item onAction={() => console.log('Save')}>Save</Dropdown.Item>
+        <Dropdown.Item onAction={() => console.log('Save As')}>Save As</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};
+
+/**
+ * WithIcons story: Menu items with left icons
+ */
+export const WithIcons: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="outline">Actions</Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Item icon={<Edit />} onAction={() => console.log('Edit')}>
+          Edit
+        </Dropdown.Item>
+        <Dropdown.Item icon={<Copy />} onAction={() => console.log('Duplicate')}>
+          Duplicate
+        </Dropdown.Item>
+        <Dropdown.Item icon={<Download />} onAction={() => console.log('Download')}>
+          Download
+        </Dropdown.Item>
+        <Dropdown.Separator />
+        <Dropdown.Item icon={<Trash />} onAction={() => console.log('Delete')}>
+          Delete
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};
+
+/**
+ * WithShortcuts story: Menu items with keyboard shortcuts
+ */
+export const WithShortcuts: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="outline">Edit</Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Item shortcut="⌘N" onAction={() => console.log('New')}>
+          New
+        </Dropdown.Item>
+        <Dropdown.Item shortcut="⌘O" onAction={() => console.log('Open')}>
+          Open
+        </Dropdown.Item>
+        <Dropdown.Item shortcut="⌘S" onAction={() => console.log('Save')}>
+          Save
+        </Dropdown.Item>
+        <Dropdown.Separator />
+        <Dropdown.Item shortcut="⌘Z" onAction={() => console.log('Undo')}>
+          Undo
+        </Dropdown.Item>
+        <Dropdown.Item shortcut="⌘⇧Z" onAction={() => console.log('Redo')}>
+          Redo
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};
+
+/**
+ * WithSeparators story: Menu sections with separators and labels
+ */
+export const WithSeparators: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="outline">Menu</Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Label>File Operations</Dropdown.Label>
+        <Dropdown.Item icon={<Upload />} onAction={() => console.log('Upload')}>
+          Upload
+        </Dropdown.Item>
+        <Dropdown.Item icon={<Download />} onAction={() => console.log('Download')}>
+          Download
+        </Dropdown.Item>
+
+        <Dropdown.Separator />
+
+        <Dropdown.Label>Edit</Dropdown.Label>
+        <Dropdown.Item icon={<Edit />} onAction={() => console.log('Edit')}>
+          Edit
+        </Dropdown.Item>
+        <Dropdown.Item icon={<Copy />} onAction={() => console.log('Duplicate')}>
+          Duplicate
+        </Dropdown.Item>
+
+        <Dropdown.Separator />
+
+        <Dropdown.Label>Danger Zone</Dropdown.Label>
+        <Dropdown.Item icon={<Trash />} onAction={() => console.log('Delete')}>
+          Delete
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};
+
+/**
+ * NestedSubmenus story: Multi-level nested menu
+ */
+export const NestedSubmenus: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="outline">Account</Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Item icon={<User />} onAction={() => console.log('Profile')}>
+          Profile
+        </Dropdown.Item>
+        <Dropdown.Item icon={<Settings />} onAction={() => console.log('Settings')}>
+          Settings
+        </Dropdown.Item>
+
+        <Dropdown.Separator />
+
+        <Dropdown.Item>
+          More Options
+          <Dropdown.Menu>
+            <Dropdown.Item onAction={() => console.log('Export Data')}>
+              Export Data
+            </Dropdown.Item>
+            <Dropdown.Item onAction={() => console.log('Import Data')}>
+              Import Data
+            </Dropdown.Item>
+
+            <Dropdown.Separator />
+
+            <Dropdown.Item>
+              Advanced
+              <Dropdown.Menu>
+                <Dropdown.Item onAction={() => console.log('Developer Tools')}>
+                  Developer Tools
+                </Dropdown.Item>
+                <Dropdown.Item onAction={() => console.log('Debug Mode')}>
+                  Debug Mode
+                </Dropdown.Item>
+                <Dropdown.Item onAction={() => console.log('Experimental Features')}>
+                  Experimental Features
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown.Item>
+
+        <Dropdown.Separator />
+
+        <Dropdown.Item icon={<LogOut />} onAction={() => console.log('Logout')}>
+          Logout
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};
+
+/**
+ * DisabledItems story: Mix of enabled and disabled items
+ */
+export const DisabledItems: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="outline">File</Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Item onAction={() => console.log('New')}>New</Dropdown.Item>
+        <Dropdown.Item onAction={() => console.log('Open')}>Open</Dropdown.Item>
+        <Dropdown.Item isDisabled onAction={() => console.log('Save (disabled)')}>
+          Save (No changes)
+        </Dropdown.Item>
+        <Dropdown.Separator />
+        <Dropdown.Item onAction={() => console.log('Print')}>Print</Dropdown.Item>
+        <Dropdown.Item isDisabled onAction={() => console.log('Export (disabled)')}>
+          Export (Pro feature)
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};
+
+/**
+ * Positioning story: Menu with different align/side props
+ */
+export const Positioning: Story = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap">
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button variant="outline">Bottom Start</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu align="start" side="bottom">
+          <Dropdown.Item>Option 1</Dropdown.Item>
+          <Dropdown.Item>Option 2</Dropdown.Item>
+          <Dropdown.Item>Option 3</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button variant="outline">Bottom Center</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu align="center" side="bottom">
+          <Dropdown.Item>Option 1</Dropdown.Item>
+          <Dropdown.Item>Option 2</Dropdown.Item>
+          <Dropdown.Item>Option 3</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button variant="outline">Bottom End</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu align="end" side="bottom">
+          <Dropdown.Item>Option 1</Dropdown.Item>
+          <Dropdown.Item>Option 2</Dropdown.Item>
+          <Dropdown.Item>Option 3</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button variant="outline">Top Start</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu align="start" side="top">
+          <Dropdown.Item>Option 1</Dropdown.Item>
+          <Dropdown.Item>Option 2</Dropdown.Item>
+          <Dropdown.Item>Option 3</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button variant="outline">Right Start</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu align="start" side="right">
+          <Dropdown.Item>Option 1</Dropdown.Item>
+          <Dropdown.Item>Option 2</Dropdown.Item>
+          <Dropdown.Item>Option 3</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button variant="outline">Left Start</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu align="start" side="left">
+          <Dropdown.Item>Option 1</Dropdown.Item>
+          <Dropdown.Item>Option 2</Dropdown.Item>
+          <Dropdown.Item>Option 3</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  ),
+};
+
+/**
+ * AllVariants story: Comprehensive example showcasing all features
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="outline">Full Feature Demo</Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        <Dropdown.Label>File Operations</Dropdown.Label>
+        <Dropdown.Item icon={<Upload />} shortcut="⌘U" onAction={() => console.log('Upload')}>
+          Upload
+        </Dropdown.Item>
+        <Dropdown.Item
+          icon={<Download />}
+          shortcut="⌘D"
+          onAction={() => console.log('Download')}
+        >
+          Download
+        </Dropdown.Item>
+
+        <Dropdown.Separator />
+
+        <Dropdown.Label>Edit</Dropdown.Label>
+        <Dropdown.Item icon={<Edit />} shortcut="⌘E" onAction={() => console.log('Edit')}>
+          Edit
+        </Dropdown.Item>
+        <Dropdown.Item icon={<Copy />} shortcut="⌘C" onAction={() => console.log('Duplicate')}>
+          Duplicate
+        </Dropdown.Item>
+        <Dropdown.Item isDisabled icon={<Edit />} onAction={() => console.log('Disabled')}>
+          Disabled Action
+        </Dropdown.Item>
+
+        <Dropdown.Separator />
+
+        <Dropdown.Item>
+          More Options
+          <Dropdown.Menu>
+            <Dropdown.Item onAction={() => console.log('Export as PDF')}>
+              Export as PDF
+            </Dropdown.Item>
+            <Dropdown.Item onAction={() => console.log('Export as CSV')}>
+              Export as CSV
+            </Dropdown.Item>
+            <Dropdown.Item>
+              Advanced Export
+              <Dropdown.Menu>
+                <Dropdown.Item onAction={() => console.log('JSON')}>JSON</Dropdown.Item>
+                <Dropdown.Item onAction={() => console.log('XML')}>XML</Dropdown.Item>
+                <Dropdown.Item onAction={() => console.log('YAML')}>YAML</Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown.Item>
+
+        <Dropdown.Separator />
+
+        <Dropdown.Label>Danger Zone</Dropdown.Label>
+        <Dropdown.Item icon={<Trash />} shortcut="⌘⌫" onAction={() => console.log('Delete')}>
+          Delete
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};