@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,174 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import DropdownMenu from './DropdownMenu';
-import type { MenuCategory } from './DropdownMenu';
-// Données mock pour les catégories de menu
-const mockCategories: MenuCategory[] = [
-  {
-    title: 'Account',
-    items: [
-      { label: 'Profile', href: '/profile', type: 'link' },
-      { label: 'Settings', href: '/settings', type: 'link' },
-      { label: 'Logout', type: 'button' },
-    ],
-  },
-  {
-    title: 'Support',
-    items: [
-      { label: 'Help Center', href: '/help', type: 'link' },
-      { label: 'Contact Us', href: '/contact', type: 'link' },
-      { label: 'Feedback', type: 'button' },
-    ],
-  },
-];
-
-const meta = {
-  title: 'Components/DropdownMenu',
-  component: DropdownMenu,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    categories: {
-      control: 'object',
-      description: 'Categories and items for the dropdown menu',
-      table: {
-        category: 'Content',
-      },
-    },
-    buttonContent: {
-      control: 'text',
-      description: 'Content of the dropdown toggle button',
-      table: {
-        category: 'Content',
-      },
-    },
-    position: {
-      control: 'select',
-      options: ['left', 'right'],
-      description: 'Position of the dropdown relative to the button',
-      table: {
-        category: 'Appearance',
-      },
-    },
-    closeOnClickOutside: {
-      control: 'boolean',
-      description: 'Whether to close the dropdown when clicking outside',
-      table: {
-        category: 'Behavior',
-      },
-    },
-  },
-  args: {
-    buttonContent: '☰ Menu',
-    position: 'right',
-    closeOnClickOutside: true,
-  },
-} satisfies Meta<typeof DropdownMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    categories: mockCategories,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default dropdown menu with account and support categories',
-      },
-    },
-  },
-};
-
-export const LeftPositioned: Story = {
-  args: {
-    categories: mockCategories,
-    position: 'left',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu positioned to the left of the button',
-      },
-    },
-  },
-};
-
-export const CustomButtonContent: Story = {
-  args: {
-    categories: mockCategories,
-    buttonContent: 'Options',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu with custom button content',
-      },
-    },
-  },
-};
-
-export const WithoutClickOutsideClose: Story = {
-  args: {
-    categories: mockCategories,
-    closeOnClickOutside: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Dropdown menu that doesn't close when clicking outside",
-      },
-    },
-  },
-};
-
-export const SingleCategory: Story = {
-  args: {
-    categories: [mockCategories[0]],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu with only one category',
-      },
-    },
-  },
-};
-
-export const WithMixedItems: Story = {
-  args: {
-    categories: [
-      {
-        title: 'Actions',
-        items: [
-          { label: 'View Details', href: '/details', type: 'link' },
-          { label: 'Edit', type: 'button' },
-          { label: 'Delete', type: 'button' },
-          { label: 'Download', href: '/download', type: 'link' },
-        ],
-      },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu with a mix of link and button items',
-      },
-    },
-  },
-};
-
-export const EmptyMenu: Story = {
-  args: {
-    categories: [],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu without any categories (empty state)',
-      },
-    },
-  },
-};

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,106 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import './DropdownMenu.css';
-import type { LucideProps } from 'lucide-react';
-import * as Icons from 'lucide-react';
-import { useNavigation } from '../NavBar/NavContext';
-
-export interface MenuItem {
-  id?: string;
-  label: string;
-  href?: string;
-  onClick?: () => void;
-  type?: 'link' | 'button';
-}
-
-export interface MenuCategory {
-  title?: string;
-  items: MenuItem[];
-}
-
-export interface DropdownMenuProps {
-  categories?: MenuCategory[];
-  buttonContent?: React.ReactNode;
-  position?: 'left' | 'right';
-  closeOnClickOutside?: boolean;
-  logo?: string;
-}
-
-const DropdownMenu: React.FC<DropdownMenuProps> = ({
-  categories,
-  logo = 'Menu',
-  buttonContent,
-  position = 'right',
-  closeOnClickOutside = true,
-}) => {
-  const [open, setOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const { activeNav, activeSubNav } = useNavigation();
-
-  useEffect(() => {
-    if (!closeOnClickOutside) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [closeOnClickOutside]);
-
-  const LucideIcon = logo
-    ? (Icons[logo as keyof typeof Icons] as React.ComponentType<LucideProps>)
-    : null;
-
-  return (
-    <div className='dropdown' ref={dropdownRef}>
-      <button className='dropdown-button' onClick={() => setOpen(!open)}>
-        {LucideIcon && <LucideIcon size={20} />}
-        {buttonContent && <span className='button-text'>{buttonContent}</span>}
-      </button>
-      {open && (
-        <div className={`dropdown-content ${position}`}>
-          {categories?.map((category, categoryIndex) => (
-            <div key={categoryIndex} className='dropdown-category'>
-              {category.title && <div className='category-title'>{category.title}</div>}
-              <div className='category-items'>
-                {category.items.map((item, itemIndex) => {
-                  const itemId = item.id ?? item.label;
-                  const isActive = activeNav === itemId || activeSubNav === itemId;
-
-                  const commonProps = {
-                    className: `dropdown-item ${isActive ? 'active' : ''}`,
-                    onClick: () => {
-                      item.onClick?.();
-                      setOpen(false);
-                    },
-                  };
-
-                  if (item.type === 'button' || !item.href) {
-                    return (
-                      <button key={itemIndex} {...commonProps}>
-                        {item.label}
-                      </button>
-                    );
-                  }
-
-                  return (
-                    <a key={itemIndex} {...commonProps} href={item.href}>
-                      {item.label}
-                    </a>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DropdownMenu;

package/src/components/DropdownMenu/index.ts

@@ -1 +0,0 @@
-export * from './DropdownMenu';