@shohojdhara/atomix 0.1.30 → 0.2.2

package/src/components/Navigation/SideMenu/SideMenu.stories.tsx

@@ -0,0 +1,609 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import React from 'react';
+import { Icon } from '../../Icon';
+import { SideMenu } from './SideMenu';
+import { SideMenuItem } from './SideMenuItem';
+import { SideMenuList } from './SideMenuList';
+
+const meta = {
+  title: 'Components/Navigation/SideMenu',
+  component: SideMenu,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The SideMenu component provides a collapsible navigation menu with title and menu items. It automatically collapses on mobile devices and can be toggled via a header button. The component follows the Atomix design system guidelines and includes both React and vanilla JavaScript implementations.
+
+## Features
+
+- **Responsive Design**: Automatically collapses on mobile devices
+- **Collapsible**: Can be toggled open/closed with smooth animations
+- **Accessibility**: Full keyboard navigation and screen reader support
+- **Active States**: Support for active menu items
+- **Icon Support**: Menu items can include Phosphor icons
+- **Vanilla JS Support**: Complete vanilla JavaScript implementation available
+
+## Usage
+
+### Basic SideMenu
+\`\`\`tsx
+<SideMenu title="Navigation">
+  <SideMenuList>
+    <SideMenuItem href="/" active>Home</SideMenuItem>
+    <SideMenuItem href="/about">About</SideMenuItem>
+    <SideMenuItem href="/contact">Contact</SideMenuItem>
+  </SideMenuList>
+</SideMenu>
+\`\`\`
+
+### With Icons
+\`\`\`tsx
+<SideMenu title="Navigation">
+  <SideMenuList>
+    <SideMenuItem href="/" icon={<Icon name="House" />} active>
+      Home
+    </SideMenuItem>
+    <SideMenuItem href="/about" icon={<Icon name="Info" />}>
+      About
+    </SideMenuItem>
+  </SideMenuList>
+</SideMenu>
+\`\`\`
+
+### Vanilla JavaScript
+\`\`\`html
+<div class="c-side-menu" data-side-menu data-collapsible="true">
+  <div class="c-side-menu__toggler">
+    <span class="c-side-menu__title">Navigation</span>
+    <span class="c-side-menu__toggler-icon">▶</span>
+  </div>
+  <div class="c-side-menu__wrapper">
+    <div class="c-side-menu__inner">
+      <ul class="c-side-menu__list">
+        <li class="c-side-menu__item">
+          <a href="/" class="c-side-menu__link is-active">Home</a>
+        </li>
+        <li class="c-side-menu__item">
+          <a href="/about" class="c-side-menu__link">About</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Menu title displayed at the top',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the menu is open (for controlled component)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    collapsible: {
+      control: 'boolean',
+      description: 'Whether the menu is collapsible on mobile',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the menu is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    onToggle: fn(),
+  },
+} satisfies Meta<typeof SideMenu>;
+
+export default meta;
+type Story = StoryObj<typeof SideMenu>;
+
+// Default SideMenu
+export const Default: Story = {
+  args: {
+    title: 'Navigation',
+    children: (
+      <SideMenuList>
+        <SideMenuItem href="/" active>
+          Home
+        </SideMenuItem>
+        <SideMenuItem href="/about">About</SideMenuItem>
+        <SideMenuItem href="/services">Services</SideMenuItem>
+        <SideMenuItem href="/contact">Contact</SideMenuItem>
+      </SideMenuList>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// With Icons
+export const WithIcons: Story = {
+  args: {
+    title: 'Main Menu',
+    children: (
+      <SideMenuList>
+        <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+          Home
+        </SideMenuItem>
+        <SideMenuItem href="/about" icon={<Icon name="Info" size="sm" />}>
+          About
+        </SideMenuItem>
+        <SideMenuItem href="/services" icon={<Icon name="Gear" size="sm" />}>
+          Services
+        </SideMenuItem>
+        <SideMenuItem href="/portfolio" icon={<Icon name="Briefcase" size="sm" />}>
+          Portfolio
+        </SideMenuItem>
+        <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+          Contact
+        </SideMenuItem>
+      </SideMenuList>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// Multiple Lists
+export const MultipleLists: Story = {
+  args: {
+    title: 'Dashboard',
+    children: (
+      <>
+        <SideMenuList>
+          <SideMenuItem href="/dashboard" icon={<Icon name="ChartBar" size="sm" />} active>
+            Dashboard
+          </SideMenuItem>
+          <SideMenuItem href="/analytics" icon={<Icon name="TrendUp" size="sm" />}>
+            Analytics
+          </SideMenuItem>
+          <SideMenuItem href="/reports" icon={<Icon name="FileText" size="sm" />}>
+            Reports
+          </SideMenuItem>
+        </SideMenuList>
+
+        <SideMenuList>
+          <SideMenuItem href="/users" icon={<Icon name="Users" size="sm" />}>
+            Users
+          </SideMenuItem>
+          <SideMenuItem href="/settings" icon={<Icon name="Gear" size="sm" />}>
+            Settings
+          </SideMenuItem>
+          <SideMenuItem href="/help" icon={<Icon name="Question" size="sm" />}>
+            Help
+          </SideMenuItem>
+        </SideMenuList>
+      </>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// With Disabled Items
+export const WithDisabledItems: Story = {
+  args: {
+    title: 'Navigation',
+    children: (
+      <SideMenuList>
+        <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+          Home
+        </SideMenuItem>
+        <SideMenuItem href="/about" icon={<Icon name="Info" size="sm" />}>
+          About
+        </SideMenuItem>
+        <SideMenuItem href="/services" icon={<Icon name="Gear" size="sm" />} disabled>
+          Services (Coming Soon)
+        </SideMenuItem>
+        <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+          Contact
+        </SideMenuItem>
+      </SideMenuList>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// Non-Collapsible
+export const NonCollapsible: Story = {
+  args: {
+    title: 'Quick Links',
+    children: (
+      <SideMenuList>
+        <SideMenuItem href="/dashboard" icon={<Icon name="ChartBar" size="sm" />} active>
+          Dashboard
+        </SideMenuItem>
+        <SideMenuItem href="/profile" icon={<Icon name="User" size="sm" />}>
+          Profile
+        </SideMenuItem>
+        <SideMenuItem href="/settings" icon={<Icon name="Gear" size="sm" />}>
+          Settings
+        </SideMenuItem>
+        <SideMenuItem href="/logout" icon={<Icon name="SignOut" size="sm" />}>
+          Logout
+        </SideMenuItem>
+      </SideMenuList>
+    ),
+    collapsible: false,
+    onToggle: fn(),
+  },
+};
+
+// Controlled Component
+export const Controlled: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const handleToggle = (newIsOpen: boolean) => {
+      setIsOpen(newIsOpen);
+      args.onToggle?.(newIsOpen);
+    };
+
+    return (
+      <div>
+        <button onClick={() => handleToggle(!isOpen)} style={{ marginBottom: '1rem' }}>
+          Toggle Menu (Currently: {isOpen ? 'Open' : 'Closed'})
+        </button>
+
+        <SideMenu
+          {...args}
+          title="Controlled Menu"
+          isOpen={isOpen}
+          onToggle={handleToggle}
+          collapsible
+        >
+          <SideMenuList>
+            <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+              Home
+            </SideMenuItem>
+            <SideMenuItem href="/about" icon={<Icon name="Info" size="sm" />}>
+              About
+            </SideMenuItem>
+            <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+              Contact
+            </SideMenuItem>
+          </SideMenuList>
+        </SideMenu>
+      </div>
+    );
+  },
+  args: {
+    onToggle: fn(),
+  },
+};
+
+// Button Items (No href)
+export const ButtonItems: Story = {
+  args: {
+    title: 'Actions',
+    children: (
+      <SideMenuList>
+        <SideMenuItem onClick={fn()} icon={<Icon name="ChartBar" size="sm" />} active>
+          Dashboard
+        </SideMenuItem>
+        <SideMenuItem onClick={fn()} icon={<Icon name="Plus" size="sm" />}>
+          Create New
+        </SideMenuItem>
+        <SideMenuItem onClick={fn()} icon={<Icon name="Export" size="sm" />}>
+          Export Data
+        </SideMenuItem>
+        <SideMenuItem onClick={fn()} icon={<Icon name="Gear" size="sm" />}>
+          Settings
+        </SideMenuItem>
+      </SideMenuList>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// Custom Toggle Icon
+export const CustomToggleIcon: Story = {
+  args: {
+    title: 'Custom Menu',
+    toggleIcon: <Icon name="CaretDown" size="xs" />,
+    children: (
+      <SideMenuList>
+        <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+          Home
+        </SideMenuItem>
+        <SideMenuItem href="/about" icon={<Icon name="Info" size="sm" />}>
+          About
+        </SideMenuItem>
+        <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+          Contact
+        </SideMenuItem>
+      </SideMenuList>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// Disabled Menu
+export const DisabledMenu: Story = {
+  args: {
+    title: 'Disabled Menu',
+    disabled: true,
+    children: (
+      <SideMenuList>
+        <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+          Home
+        </SideMenuItem>
+        <SideMenuItem href="/about" icon={<Icon name="Info" size="sm" />}>
+          About
+        </SideMenuItem>
+        <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+          Contact
+        </SideMenuItem>
+      </SideMenuList>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// Complex Navigation
+export const ComplexNavigation: Story = {
+  args: {
+    title: 'Admin Panel',
+    children: (
+      <>
+        <SideMenuList>
+          <SideMenuItem href="/dashboard" icon={<Icon name="ChartBar" size="sm" />} active>
+            Dashboard
+          </SideMenuItem>
+        </SideMenuList>
+
+        <SideMenuList>
+          <SideMenuItem href="/users" icon={<Icon name="Users" size="sm" />}>
+            User Management
+          </SideMenuItem>
+          <SideMenuItem href="/roles" icon={<Icon name="Shield" size="sm" />}>
+            Roles & Permissions
+          </SideMenuItem>
+          <SideMenuItem href="/audit" icon={<Icon name="FileText" size="sm" />}>
+            Audit Logs
+          </SideMenuItem>
+        </SideMenuList>
+
+        <SideMenuList>
+          <SideMenuItem href="/content" icon={<Icon name="Article" size="sm" />}>
+            Content Management
+          </SideMenuItem>
+          <SideMenuItem href="/media" icon={<Icon name="Image" size="sm" />}>
+            Media Library
+          </SideMenuItem>
+          <SideMenuItem href="/seo" icon={<Icon name="MagnifyingGlass" size="sm" />}>
+            SEO Settings
+          </SideMenuItem>
+        </SideMenuList>
+
+        <SideMenuList>
+          <SideMenuItem href="/analytics" icon={<Icon name="TrendUp" size="sm" />}>
+            Analytics
+          </SideMenuItem>
+          <SideMenuItem href="/reports" icon={<Icon name="ChartBar" size="sm" />}>
+            Reports
+          </SideMenuItem>
+          <SideMenuItem href="/exports" icon={<Icon name="Export" size="sm" />}>
+            Data Exports
+          </SideMenuItem>
+        </SideMenuList>
+
+        <SideMenuList>
+          <SideMenuItem href="/settings" icon={<Icon name="Gear" size="sm" />}>
+            System Settings
+          </SideMenuItem>
+          <SideMenuItem href="/integrations" icon={<Icon name="Plugs" size="sm" />}>
+            Integrations
+          </SideMenuItem>
+          <SideMenuItem href="/backup" icon={<Icon name="Database" size="sm" />}>
+            Backup & Restore
+          </SideMenuItem>
+        </SideMenuList>
+      </>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// Responsive Demo
+export const ResponsiveDemo: Story = {
+  render: args => (
+    <div style={{ maxWidth: '300px' }}>
+      <p style={{ marginBottom: '1rem', fontSize: '0.875rem', color: '#666' }}>
+        Resize your browser window to see the responsive behavior. On mobile (less than 768px), the
+        menu becomes collapsible.
+      </p>
+
+      <SideMenu {...args} title="Responsive Menu" collapsible>
+        <SideMenuList>
+          <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+            Home
+          </SideMenuItem>
+          <SideMenuItem href="/products" icon={<Icon name="Package" size="sm" />}>
+            Products
+          </SideMenuItem>
+          <SideMenuItem href="/services" icon={<Icon name="Gear" size="sm" />}>
+            Services
+          </SideMenuItem>
+          <SideMenuItem href="/about" icon={<Icon name="Info" size="sm" />}>
+            About Us
+          </SideMenuItem>
+          <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+            Contact
+          </SideMenuItem>
+        </SideMenuList>
+
+        <SideMenuList>
+          <SideMenuItem href="/account" icon={<Icon name="User" size="sm" />}>
+            My Account
+          </SideMenuItem>
+          <SideMenuItem href="/orders" icon={<Icon name="FileText" size="sm" />}>
+            Order History
+          </SideMenuItem>
+          <SideMenuItem href="/support" icon={<Icon name="Question" size="sm" />}>
+            Support
+          </SideMenuItem>
+        </SideMenuList>
+      </SideMenu>
+    </div>
+  ),
+  args: {
+    onToggle: fn(),
+  },
+};
+
+// E-commerce Navigation Example
+export const EcommerceNavigation: Story = {
+  args: {
+    title: 'Shop Categories',
+    children: (
+      <>
+        <SideMenuList>
+          <SideMenuItem href="/electronics" icon={<Icon name="DeviceMobile" size="sm" />} active>
+            Electronics
+          </SideMenuItem>
+          <SideMenuItem href="/clothing" icon={<Icon name="TShirt" size="sm" />}>
+            Clothing
+          </SideMenuItem>
+          <SideMenuItem href="/home-garden" icon={<Icon name="House" size="sm" />}>
+            Home & Garden
+          </SideMenuItem>
+          <SideMenuItem href="/sports" icon={<Icon name="Basketball" size="sm" />}>
+            Sports & Outdoors
+          </SideMenuItem>
+        </SideMenuList>
+
+        <SideMenuList>
+          <SideMenuItem href="/account" icon={<Icon name="User" size="sm" />}>
+            My Account
+          </SideMenuItem>
+          <SideMenuItem href="/orders" icon={<Icon name="Package" size="sm" />}>
+            Order History
+          </SideMenuItem>
+          <SideMenuItem href="/wishlist" icon={<Icon name="Heart" size="sm" />}>
+            Wishlist
+          </SideMenuItem>
+          <SideMenuItem href="/cart" icon={<Icon name="ShoppingCart" size="sm" />}>
+            Shopping Cart
+          </SideMenuItem>
+        </SideMenuList>
+      </>
+    ),
+    collapsible: true,
+    onToggle: fn(),
+  },
+};
+
+// Interactive Demo with Actions
+export const InteractiveDemo: Story = {
+  render: args => {
+    const [activeItem, setActiveItem] = React.useState('/dashboard');
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const handleToggle = (newIsOpen: boolean) => {
+      setIsOpen(newIsOpen);
+      args.onToggle?.(newIsOpen);
+    };
+
+    const handleItemClick = (href: string) => {
+      setActiveItem(href);
+      // Simulate navigation action
+      args.onToggle?.(false); // Close menu on mobile after selection
+    };
+
+    return (
+      <div>
+        <div
+          style={{
+            marginBottom: '1rem',
+            padding: '0.5rem',
+            backgroundColor: '#f5f5f5',
+            borderRadius: '4px',
+          }}
+        >
+          <strong>Current Page:</strong> {activeItem} | <strong>Menu:</strong>{' '}
+          {isOpen ? 'Open' : 'Closed'}
+        </div>
+
+        <SideMenu
+          {...args}
+          title="Interactive Menu"
+          isOpen={isOpen}
+          onToggle={handleToggle}
+          collapsible
+        >
+          <SideMenuList>
+            <SideMenuItem
+              href="/dashboard"
+              icon={<Icon name="ChartBar" size="sm" />}
+              active={activeItem === '/dashboard'}
+              onClick={() => handleItemClick('/dashboard')}
+            >
+              Dashboard
+            </SideMenuItem>
+            <SideMenuItem
+              href="/analytics"
+              icon={<Icon name="TrendUp" size="sm" />}
+              active={activeItem === '/analytics'}
+              onClick={() => handleItemClick('/analytics')}
+            >
+              Analytics
+            </SideMenuItem>
+            <SideMenuItem
+              href="/users"
+              icon={<Icon name="Users" size="sm" />}
+              active={activeItem === '/users'}
+              onClick={() => handleItemClick('/users')}
+            >
+              Users
+            </SideMenuItem>
+          </SideMenuList>
+
+          <SideMenuList>
+            <SideMenuItem
+              href="/settings"
+              icon={<Icon name="Gear" size="sm" />}
+              active={activeItem === '/settings'}
+              onClick={() => handleItemClick('/settings')}
+            >
+              Settings
+            </SideMenuItem>
+            <SideMenuItem onClick={fn()} icon={<Icon name="SignOut" size="sm" />}>
+              Logout
+            </SideMenuItem>
+          </SideMenuList>
+        </SideMenu>
+      </div>
+    );
+  },
+  args: {
+    onToggle: fn(),
+  },
+};