@tsiky/components-r19 1.0.0

package/src/components/Grid/grid.css

@@ -0,0 +1,285 @@
+/* Conteneur flex qui wrap */
+.grid-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, 0px);
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+/* Chaque item */
+.grid-item {
+  box-sizing: border-box;
+  cursor: grab;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+  user-select: none;
+  padding: 0;
+}
+
+.grid-item-grabbing:active {
+  cursor: grabbing;
+  opacity: 0.6;
+  transform: scale(1.02);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+}
+
+/* ===== XS (mobile par défaut) ===== */
+.grid-xs-1 {
+  flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+  max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+}
+.grid-xs-2 {
+  flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+  max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+}
+.grid-xs-3 {
+  flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+  max-width: calc(25% - (var(--gap) * 9 / 12));
+}
+.grid-xs-4 {
+  flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+  max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+}
+.grid-xs-5 {
+  flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+  max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+}
+.grid-xs-6 {
+  flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+  max-width: calc(50% - (var(--gap) * 6 / 12));
+}
+.grid-xs-7 {
+  flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+  max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+}
+.grid-xs-8 {
+  flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+  max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+}
+.grid-xs-9 {
+  flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+  max-width: calc(75% - (var(--gap) * 3 / 12));
+}
+.grid-xs-10 {
+  flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+  max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+}
+.grid-xs-11 {
+  flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+  max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+}
+.grid-xs-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+/* ===== SM ≥ 600px ===== */
+@media (min-width: 600px) {
+  .grid-sm-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-sm-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-sm-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-sm-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-sm-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-sm-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-sm-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-sm-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-sm-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-sm-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-sm-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/* ===== MD ≥ 900px ===== */
+@media (min-width: 900px) {
+  .grid-md-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-md-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-md-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-md-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-md-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-md-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-md-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-md-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-md-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-md-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-md-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/* ===== LG ≥ 1200px ===== */
+@media (min-width: 1200px) {
+  .grid-lg-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-lg-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-lg-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-lg-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-lg-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-lg-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-lg-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-lg-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-lg-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-lg-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-lg-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-lg-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/* ===== XL ≥ 1536px ===== */
+@media (min-width: 1536px) {
+  .grid-xl-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-xl-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-xl-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-xl-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-xl-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-xl-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-xl-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-xl-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-xl-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-xl-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-xl-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-xl-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}

package/src/components/Grid/index.ts

@@ -0,0 +1,2 @@
+export { default as Grid } from './Grid';
+export * from './Grid';

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+import { NavProvider } from '../NavBar/NavContext';
+
+// Mock data for dropdown menu - corrigé avec les bons types
+const mockDropdownItems = {
+  categories: [
+    {
+      title: 'Account',
+      items: [
+        { label: 'Profile', href: '/profile', type: 'link' as const },
+        { label: 'Settings', href: '/settings', type: 'link' as const },
+        { label: 'Logout', type: 'button' as const },
+      ],
+    },
+    {
+      title: 'Support',
+      items: [
+        { label: 'Help Center', href: '/help', type: 'link' as const },
+        { label: 'Contact Us', href: '/contact', type: 'link' as const },
+        { label: 'Feedback', type: 'button' as const },
+      ],
+    },
+  ],
+  buttonContent: 'Menu',
+};
+
+const meta = {
+  title: 'Components/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    logoPath: {
+      control: 'text',
+      description: 'Path to the logo image',
+      table: {
+        category: 'Content',
+      },
+    },
+    navItems: {
+      control: 'object',
+      description: 'Array of navigation items for the main navigation',
+      table: {
+        category: 'Content',
+      },
+    },
+    headerBg: {
+      control: 'color',
+      description: 'Background color for the header',
+      table: {
+        category: 'Appearance',
+      },
+    },
+    highlightColor: {
+      control: 'color',
+      description: 'Highlight color for active navigation items',
+      table: {
+        category: 'Appearance',
+      },
+    },
+    onNavClick: {
+      action: 'navItemClicked',
+      description: 'Callback function when a navigation item is clicked',
+      table: {
+        category: 'Events',
+      },
+    },
+    dropdownItems: {
+      control: 'object',
+      description: 'Items for the dropdown menu',
+      table: {
+        category: 'Content',
+      },
+    },
+  },
+  args: {
+    logoPath: '/logo.png',
+    navItems: [
+      { id: 'home', label: 'Home' },
+      { id: 'about', label: 'About' },
+      { id: 'services', label: 'Services' },
+      { id: 'contact', label: 'Contact' },
+    ],
+    highlightColor: '#1387C8',
+    onNavClick: (item: string) => console.log(`Clicked on ${item}`),
+  },
+  decorators: [
+    (Story) => (
+      <NavProvider>
+        <Story />
+      </NavProvider>
+    ),
+  ],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default header with logo and main navigation',
+      },
+    },
+  },
+};
+
+export const WithDropdownMenu: Story = {
+  args: {
+    dropdownItems: mockDropdownItems,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Header with a dropdown menu on the right side',
+      },
+    },
+  },
+};
+
+export const WithCustomBackground: Story = {
+  args: {
+    headerBg: '#2c3e50',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Header with custom background color',
+      },
+    },
+  },
+};
+
+export const CompleteHeader: Story = {
+  args: {
+    dropdownItems: mockDropdownItems,
+    headerBg: '#f8f9fa',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete header with all elements: logo, navigation, dropdown menu, and sub-navigation',
+      },
+    },
+  },
+};
+
+export const MobileView: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+    docs: {
+      description: {
+        story: 'Header in mobile view with responsive navigation',
+      },
+    },
+  },
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import './header.css';
+import { Logo } from '../Logo/Logo';
+import { NavBar } from '../NavBar/NavBar';
+import type { NavItemType } from '../NavItem/NavItem';
+import DropdownMenu from '../DropdownMenu/DropdownMenu';
+import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu';
+import ThemeSwitcherButton from '../theme/ThemeSwitcherButton';
+import { DraggableSwitcherButton } from '../DraggableSwitcher';
+
+export type HeaderProps = {
+  logoPath?: string;
+  navItems: NavItemType[];
+  activeNav?: string;
+  onNavClick?: (id: string) => void;
+  headerBg?: string;
+  highlightColor?: string;
+  dropdownItems?: DropdownMenuProps;
+  moduleConfig?: Record<string, boolean>;
+};
+
+export const Header: React.FC<HeaderProps> = ({
+  logoPath,
+  navItems,
+  onNavClick,
+  dropdownItems,
+  headerBg,
+  highlightColor = '#1387C8',
+  moduleConfig = {},
+}) => {
+  return (
+    <header className='header' style={{ backgroundColor: headerBg }}>
+      <div className='header-container'>
+        {/* Gauche : logo + nav */}
+        <div className='header-left'>
+          <a href='/'>
+            <Logo imagePath={logoPath} />
+          </a>
+          <NavBar
+            moduleConfig={moduleConfig}
+            items={navItems}
+            onNavClick={onNavClick}
+            highlightColor={highlightColor}
+          />
+        </div>
+
+        {/* Droite : menu */}
+        <div className='header-right'>
+          <DraggableSwitcherButton />
+          <ThemeSwitcherButton />
+          <DropdownMenu
+            categories={dropdownItems?.categories}
+            buttonContent={dropdownItems?.buttonContent}
+          />
+        </div>
+      </div>
+    </header>
+  );
+};

package/src/components/Header/header.css

@@ -0,0 +1,31 @@
+.header {
+  background: var(--headerBg);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  max-width: 100vw;
+  font-size: var(--text-small);
+}
+
+/* container centré */
+.header-container {
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 17px;
+  gap: 20px;
+}
+
+/* gauche : logo + nav */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+
+/* droite : menu bouton */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}

package/src/components/Header/index.ts

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

package/src/components/IconText/IconText..stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconText } from './IconText';
+
+const meta = {
+  title: 'Components/IconText',
+  component: IconText,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: 'select',
+      options: ['Home', 'User', 'Settings', 'Search', 'Bell', 'Mail'],
+      description: 'Lucide icon name',
+      table: {
+        category: 'Content',
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'Text to display alongside the icon',
+      table: {
+        category: 'Content',
+      },
+    },
+    size: {
+      control: { type: 'number', min: 8, max: 32, step: 2 },
+      description: 'Icon size in pixels',
+      table: {
+        category: 'Appearance',
+      },
+    },
+    color: {
+      control: 'color',
+      description: 'Color for both icon and text',
+      table: {
+        category: 'Appearance',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        category: 'Styling',
+      },
+    },
+    active: {
+      control: 'boolean',
+      description: 'Whether the component is in active state',
+      table: {
+        category: 'State',
+      },
+    },
+    href: {
+      control: 'text',
+      description: 'URL if the component should render as a link',
+      table: {
+        category: 'Behavior',
+      },
+    },
+  },
+  args: {
+    text: 'Menu Item',
+    size: 16,
+  },
+} satisfies Meta<typeof IconText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: 'Home',
+    text: 'Home',
+  },
+};
+
+export const WithCustomColor: Story = {
+  args: {
+    icon: 'User',
+    text: 'Profile',
+    color: '#3b82f6',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'IconText with custom color applied to both icon and text',
+      },
+    },
+  },
+};
+
+export const ActiveState: Story = {
+  args: {
+    icon: 'Settings',
+    text: 'Settings',
+    active: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'IconText in active state with highlighted appearance',
+      },
+    },
+  },
+};
+
+export const AsLink: Story = {
+  args: {
+    icon: 'Mail',
+    text: 'Contact',
+    href: '/contact',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'IconText rendered as a link with href attribute',
+      },
+    },
+  },
+};
+
+export const WithoutIcon: Story = {
+  args: {
+    text: 'Text Only',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'IconText without an icon (text only)',
+      },
+    },
+  },
+};