@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/Grid/grid.css

@@ -1,285 +0,0 @@
-/* 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/Header/Header.stories.tsx

@@ -1,164 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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'>
-          <div className='switcher'>
-            <DraggableSwitcherButton />
-            <ThemeSwitcherButton />
-          </div>
-          <DropdownMenu
-            categories={dropdownItems?.categories}
-            buttonContent={dropdownItems?.buttonContent}
-          />
-        </div>
-      </div>
-    </header>
-  );
-};

package/src/components/Header/header.css

@@ -1,61 +0,0 @@
-.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;
-}
-
-.switcher {
-  display: flex;
-  align-items: center;
-}
-
-@media (max-width: 500px) {
-  .switcher {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0.2025rem;
-  }
-
-  .switcher {
-    animation: slideDown 0.4s ease;
-  }
-
-  @keyframes slideDown {
-    from {
-      transform: translateY(-15px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-}

package/src/components/Header/index.ts

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

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

@@ -1,135 +0,0 @@
-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)',
-      },
-    },
-  },
-};