@shohojdhara/atomix 0.3.14 → 0.3.15

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React, { useState } from 'react';
 import { ThemeColor } from '../../lib/types/components';
 import { Icon } from '../Icon';
@@ -12,8 +13,72 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Dropdown component provides a toggleable menu that appears relative to a trigger element. It supports multiple placement options, click or hover triggers, and can include dividers, headers, and icons. Dropdowns are ideal for navigation menus, action menus, or any context where options need to be revealed on demand.',
+        component: `
+# Dropdown
+
+## Overview
+
+Dropdown provides a toggleable menu that appears relative to a trigger element. It supports multiple placement options, click or hover triggers, and can include dividers, headers, and icons. Dropdowns are ideal for navigation menus, action menus, or any context where options need to be revealed on demand.
+
+## Features
+
+- Multiple placement options (top, bottom, left, right with start/end variations)
+- Click or hover trigger modes
+- Color variants
+- Glass morphism effect
+- Customizable dimensions
+- Auto-close behaviors
+- Rich content support (headers, dividers, icons)
+
+## Accessibility
+
+- Keyboard support: Navigate with arrow keys, activate with Enter/Space
+- Screen reader: Menu items and structure announced properly
+- ARIA support: Proper roles and properties for dropdown components
+- Focus management: Maintains focus within the dropdown menu
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Dropdown 
+  trigger="click"
+  placement="bottom-start"
+  children={<button>Dropdown</button>}
+  menu={<div>Menu content</div>}
+/>
+\`\`\`
+
+### With Glass Effect
+
+\`\`\`tsx
+<Dropdown 
+  trigger="click"
+  placement="bottom-start"
+  glass={true}
+  children={<button>Dropdown</button>}
+  menu={<div>Menu content</div>}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| placement | Placement | 'bottom-start' | The placement of the dropdown menu relative to the trigger element |
+| trigger | 'click' \\| 'hover' | 'click' | How the dropdown is triggered - by click or hover |
+| variant | ThemeColor | 'secondary' | The color variant of the dropdown |
+| minWidth | string | - | Minimum width of the dropdown menu |
+| maxHeight | string | - | Maximum height of the dropdown menu |
+| closeOnClickOutside | boolean | true | Whether to close the dropdown when clicking outside |
+| closeOnEscape | boolean | true | Whether to close the dropdown when pressing the Escape key |
+| glass | boolean | false | Enable glass morphism effect |
+| isOpen | boolean | - | Controlled open state of the dropdown |
+| onOpenChange | (open: boolean) => void | - | Callback when open state changes |
+        `,
       },
     },
   },
@@ -32,36 +97,80 @@ const meta = {
         'right-end',
       ],
       description: 'The placement of the dropdown menu relative to the trigger element',
+      table: {
+        type: { summary: 'Placement' },
+        defaultValue: { summary: 'bottom-start' },
+      },
     },
     trigger: {
       control: { type: 'radio' },
       options: ['click', 'hover'],
       description: 'How the dropdown is triggered - by click or hover',
+      table: {
+        type: { summary: '"click" | "hover"' },
+        defaultValue: { summary: 'click' },
+      },
     },
     variant: {
       control: { type: 'select' },
       options: THEME_COLORS,
       description: 'The color variant of the dropdown',
+      table: {
+        type: { summary: 'ThemeColor' },
+        defaultValue: { summary: 'secondary' },
+      },
     },
     minWidth: {
       control: 'text',
       description: 'Minimum width of the dropdown menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     maxHeight: {
       control: 'text',
       description: 'Maximum height of the dropdown menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     closeOnClickOutside: {
       control: 'boolean',
       description: 'Whether to close the dropdown when clicking outside',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     closeOnEscape: {
       control: 'boolean',
       description: 'Whether to close the dropdown when pressing the Escape key',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Controlled open state of the dropdown',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    onOpenChange: {
+      action: 'open state changed',
+      description: 'Callback when open state changes',
     },
   },
 } satisfies Meta<typeof Dropdown>;
@@ -85,10 +194,7 @@ const InteractiveDropdown = (args: React.ComponentProps<typeof Dropdown>) => {
   );
 };
 
-/**
- * Basic dropdown example with default settings
- */
-export const Default: Story = {
+export const BasicUsage: Story = {
   args: {
     trigger: 'click',
     placement: 'bottom-start',
@@ -99,35 +205,49 @@ export const Default: Story = {
     ),
     menu: (
       <>
-        <DropdownItem>Menu item 1</DropdownItem>
-        <DropdownItem>Menu item 2</DropdownItem>
-        <DropdownItem>Menu item 3</DropdownItem>
+        <DropdownHeader>Dropdown Header</DropdownHeader>
+        <DropdownDivider />
+        <DropdownItem>Option 1</DropdownItem>
+        <DropdownItem>Option 2</DropdownItem>
+        <DropdownItem>Option 3</DropdownItem>
+        <DropdownDivider />
+        <DropdownItem disabled>Disabled Option</DropdownItem>
       </>
     ),
   },
-  render: args => <InteractiveDropdown {...args} />,
-};
-
-/**
- * Dropdown that opens on click
- */
-export const ClickTrigger: Story = {
-  args: {
-    ...Default.args,
-    trigger: 'click',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic dropdown with default settings and menu items.',
+      },
+    },
   },
-  render: args => <InteractiveDropdown {...args} />,
 };
 
-/**
- * Dropdown that opens on hover
- */
 export const HoverTrigger: Story = {
   args: {
-    ...Default.args,
     trigger: 'hover',
+    placement: 'bottom-start',
+    children: (
+      <button className="c-btn c-btn--secondary">
+        Hover Dropdown <Icon name="CaretDown" className="c-dropdown__toggle-icon" size="sm" />
+      </button>
+    ),
+    menu: (
+      <>
+        <DropdownItem>Hover Option 1</DropdownItem>
+        <DropdownItem>Hover Option 2</DropdownItem>
+        <DropdownItem>Hover Option 3</DropdownItem>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown that opens on hover instead of click.',
+      },
+    },
   },
-  render: args => <InteractiveDropdown {...args} />,
 };
 
 /**
@@ -135,7 +255,7 @@ export const HoverTrigger: Story = {
  */
 export const WithIcons: Story = {
   args: {
-    ...Default.args,
+    ...BasicUsage.args,
     menu: (
       <>
         <DropdownItem icon={<Icon name="House" size="sm" />}>Home</DropdownItem>
@@ -153,7 +273,7 @@ export const WithIcons: Story = {
  */
 export const WithLinks: Story = {
   args: {
-    ...Default.args,
+    ...BasicUsage.args,
     menu: (
       <>
         <DropdownItem href="#home">Home</DropdownItem>
@@ -171,7 +291,7 @@ export const WithLinks: Story = {
  */
 export const WithHeader: Story = {
   args: {
-    ...Default.args,
+    ...BasicUsage.args,
     menu: (
       <>
         <DropdownHeader>Account Options</DropdownHeader>
@@ -192,7 +312,7 @@ export const WithHeader: Story = {
  */
 export const ActiveItem: Story = {
   args: {
-    ...Default.args,
+    ...BasicUsage.args,
     menu: (
       <>
         <DropdownItem active>Active Item</DropdownItem>
@@ -209,7 +329,7 @@ export const ActiveItem: Story = {
  */
 export const DisabledItem: Story = {
   args: {
-    ...Default.args,
+    ...BasicUsage.args,
     menu: (
       <>
         <DropdownItem>Regular Item</DropdownItem>
@@ -358,7 +478,7 @@ export const AllVariants: Story = {
  */
 export const GlassDropdown: Story = {
   args: {
-    ...Default.args,
+    ...BasicUsage.args,
     glass: true,
   },
   render: args => <InteractiveDropdown {...args} />,
@@ -382,7 +502,7 @@ export const GlassDropdown: Story = {
  */
 export const GlassDropdownCustom: Story = {
   args: {
-    ...Default.args,
+    ...BasicUsage.args,
     glass: {
       displacementScale: 80,
       blurAmount: 2,
@@ -499,4 +619,4 @@ export const GlassAllVariants: Story = {
       </div>
     );
   },
-};
+};

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useEffect, useState } from 'react';
 import React from 'react';
 import { Button } from '../Button/Button';
@@ -12,8 +13,76 @@ const meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component:
-          'EdgePanel is a versatile sliding panel that can appear from any edge of the screen. Commonly used for mobile navigation, filters, chat windows, or contextual actions.',
+        component: `
+# EdgePanel
+
+## Overview
+
+EdgePanel is a versatile sliding panel that can appear from any edge of the screen. Commonly used for mobile navigation, filters, chat windows, or contextual actions.
+
+## Features
+
+- Multiple position options (start, end, top, bottom)
+- Different animation modes (slide, push, none)
+- Backdrop with optional click-to-close
+- Keyboard support (Escape to close)
+- Title support
+- Controlled and uncontrolled usage
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Close with Escape key
+- Screen reader: Panel content and purpose announced appropriately
+- ARIA support: Proper roles and properties for panel components
+- Focus management: Traps focus within the panel when open
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<EdgePanel 
+  isOpen={isOpen} 
+  onOpenChange={setIsOpen}
+  position="start"
+  title="Panel Title"
+>
+  <p>Panel content</p>
+</EdgePanel>
+\`\`\`
+
+### With Configuration
+
+\`\`\`tsx
+<EdgePanel 
+  position="end"
+  mode="slide"
+  backdrop={true}
+  closeOnBackdropClick={true}
+  closeOnEscape={true}
+  title="Configured Panel"
+>
+  <p>Panel content</p>
+</EdgePanel>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| position | 'start' \\| 'end' \\| 'top' \\| 'bottom' | 'start' | Position of the edge panel |
+| mode | 'slide' \\| 'push' \\| 'none' | 'slide' | Animation mode of the panel |
+| backdrop | boolean | true | Show backdrop behind the panel |
+| closeOnBackdropClick | boolean | true | Close the panel when clicking on backdrop |
+| closeOnEscape | boolean | true | Close the panel when pressing Escape key |
+| title | string | - | Panel title |
+| isOpen | boolean | false | Whether the panel is open (controlled component) |
+| onOpenChange | (open: boolean) => void | - | Callback when open state changes |
+        `,
       },
     },
   },
@@ -23,31 +92,63 @@ const meta = {
       control: { type: 'select' },
       options: ['start', 'end', 'top', 'bottom'],
       description: 'Position of the edge panel',
+      table: {
+        type: { summary: '"start" | "end" | "top" | "bottom"' },
+        defaultValue: { summary: 'start' },
+      },
     },
     mode: {
       control: { type: 'select' },
       options: ['slide', 'push', 'none'],
       description: 'Animation mode of the panel',
+      table: {
+        type: { summary: '"slide" | "push" | "none"' },
+        defaultValue: { summary: 'slide' },
+      },
     },
     backdrop: {
       control: 'boolean',
       description: 'Show backdrop behind the panel',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     closeOnBackdropClick: {
       control: 'boolean',
       description: 'Close the panel when clicking on backdrop',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     closeOnEscape: {
       control: 'boolean',
       description: 'Close the panel when pressing Escape key',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     title: {
       control: 'text',
       description: 'Panel title',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     isOpen: {
       control: 'boolean',
       description: 'Whether the panel is open (controlled component)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    onOpenChange: {
+      action: 'open state changed',
+      description: 'Callback when open state changes',
     },
   },
   decorators: [
@@ -101,35 +202,143 @@ const DemoPanelContent = ({
           <strong>Mode:</strong> {mode}
         </li>
         <li className="u-mb-1">
-          <strong>Backdrop:</strong> {backdrop ? 'Visible' : 'Hidden'}
+          <strong>Backdrop:</strong> {backdrop ? 'Yes' : 'No'}
         </li>
         <li className="u-mb-1">
-          <strong>Close on backdrop:</strong> {closeOnBackdropClick ? 'Yes' : 'No'}
+          <strong>Close on backdrop click:</strong> {closeOnBackdropClick ? 'Yes' : 'No'}
         </li>
-        <li>
-          <strong>Close on ESC key:</strong> {closeOnEscape ? 'Yes' : 'No'}
+        <li className="u-mb-1">
+          <strong>Close on escape:</strong> {closeOnEscape ? 'Yes' : 'No'}
         </li>
       </ul>
     </div>
 
-    <p className="u-mb-3">Common uses include:</p>
-    <ul>
-      <li>
-        <strong>Start:</strong> Navigation menu, filters
-      </li>
-      <li>
-        <strong>End:</strong> Notifications, chat windows
-      </li>
-      <li>
-        <strong>Top:</strong> Alerts, confirmation messages
-      </li>
-      <li>
-        <strong>Bottom:</strong> Action sheets, mobile keyboards
-      </li>
-    </ul>
+    <p className="u-mb-3">
+      You can put any content inside the Edge Panel. This could be navigation links, filter options,
+      notifications, or any other UI elements that need to slide in from the edge.
+    </p>
+
+    <div className="u-flex u-gap-2">
+      <Button variant="primary" size="sm">
+        Primary Action
+      </Button>
+      <Button variant="secondary" size="sm">
+        Secondary
+      </Button>
+    </div>
   </>
 );
 
+export const BasicUsage: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Edge Panel</Button>
+        <EdgePanel
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Basic Edge Panel"
+        >
+          <DemoPanelContent {...args} />
+        </EdgePanel>
+      </>
+    );
+  },
+  args: {
+    position: 'start',
+    mode: 'slide',
+    backdrop: true,
+    closeOnBackdropClick: true,
+    closeOnEscape: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic Edge Panel with default configuration.',
+      },
+    },
+  },
+};
+
+export const AllPositions: Story = {
+  render: () => {
+    const [position, setPosition] = useState<'start' | 'end' | 'top' | 'bottom'>('start');
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div className="u-flex u-gap-2 u-flex-wrap">
+          {(['start', 'end', 'top', 'bottom'] as const).map((pos) => (
+            <Button
+              key={pos}
+              variant={position === pos ? 'primary' : 'secondary'}
+              onClick={() => {
+                setPosition(pos);
+                setIsOpen(true);
+              }}
+            >
+              {pos.charAt(0).toUpperCase() + pos.slice(1)} Panel
+            </Button>
+          ))}
+        </div>
+
+        <EdgePanel
+          position={position}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title={`${position} Edge Panel`}
+        >
+          <DemoPanelContent position={position} />
+        </EdgePanel>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge Panel in all available positions.',
+      },
+    },
+  },
+};
+
+export const WithSlideMode: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Slide Mode Panel</Button>
+        <EdgePanel
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Slide Mode Panel"
+        >
+          <DemoPanelContent {...args} />
+        </EdgePanel>
+      </>
+    );
+  },
+  args: {
+    position: 'start',
+    mode: 'slide',
+    backdrop: true,
+    closeOnBackdropClick: true,
+    closeOnEscape: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge Panel with slide animation mode.',
+      },
+    },
+  },
+};
+
 // Controller component to demonstrate the EdgePanel
 const EdgePanelController = ({
   position,