@tsiky/components-r19 1.0.0

package/src/components/SideComponent/SideComponent.tsx

@@ -0,0 +1,243 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useEffect,
+  type CSSProperties,
+} from 'react';
+import { X } from 'lucide-react';
+import './SideComponent.css';
+
+export type SideComponentRef = {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+};
+
+export interface SideComponentProps {
+  title: string;
+  subtitle?: string;
+  size?: string | number;
+  beforeOpen?: () => void;
+  afterOpen?: () => void;
+  beforeClose?: () => void;
+  afterClose?: () => void;
+  style?: CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+  closeOnOverlayClick?: boolean;
+  showCloseButton?: boolean;
+  useFocusTrap?: boolean;
+}
+
+const TRANSITION_MS = 250; // must match CSS transition duration
+
+export const SideComponent = forwardRef<SideComponentRef, SideComponentProps>(
+  (
+    {
+      title,
+      subtitle,
+      size = '420px',
+      beforeOpen,
+      afterOpen,
+      beforeClose,
+      afterClose,
+      style,
+      className = '',
+      children,
+      closeOnOverlayClick = true,
+      showCloseButton = true,
+    },
+    ref
+  ) => {
+    const [open, setOpen] = useState<boolean>(false);
+    const [interactive, setInteractive] = useState<boolean>(false);
+    const rootRef = useRef<HTMLDivElement | null>(null);
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const openerRef = useRef<HTMLElement | null>(null);
+    const fallbackTimer = useRef<number | null>(null);
+
+    useEffect(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const parent = root.parentElement;
+      if (!parent) return;
+
+      const computed = window.getComputedStyle(parent);
+      if (computed.position === 'static') {
+        parent.setAttribute('data-scp-prev-position', parent.style.position ?? '');
+        parent.style.position = 'relative';
+        parent.setAttribute('data-scp-position-changed', 'true');
+      }
+
+      return () => {
+        if (parent.getAttribute('data-scp-position-changed') === 'true') {
+          const prev = parent.getAttribute('data-scp-prev-position') ?? '';
+          parent.style.position = prev;
+          parent.removeAttribute('data-scp-position-changed');
+          parent.removeAttribute('data-scp-prev-position');
+        }
+      };
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: () => {
+          if (!open) {
+            beforeOpen?.();
+            setInteractive(false);
+            setOpen(true);
+          }
+        },
+        close: () => {
+          if (open) {
+            beforeClose?.();
+            setInteractive(false);
+            setOpen(false);
+          }
+        },
+        toggle: () => {
+          if (open) {
+            beforeClose?.();
+            setInteractive(false);
+            setOpen(false);
+          } else {
+            beforeOpen?.();
+            setInteractive(false);
+            setOpen(true);
+          }
+        },
+      }),
+      [open, beforeOpen, beforeClose]
+    );
+
+    useEffect(() => {
+      const node = panelRef.current;
+      if (fallbackTimer.current) {
+        window.clearTimeout(fallbackTimer.current);
+        fallbackTimer.current = null;
+      }
+
+      const handleTransitionEnd = (e: TransitionEvent) => {
+        if (e.target !== node) return;
+        if (e.propertyName !== 'transform' && e.propertyName !== 'opacity') return;
+
+        if (open) {
+          setInteractive(true);
+          afterOpen?.();
+          try {
+            node?.focus();
+          } catch {
+            // TODO: handle focus error
+          }
+        } else {
+          afterClose?.();
+          try {
+            openerRef.current?.focus();
+          } catch {
+            // TODO: handle focus error
+          }
+        }
+      };
+
+      if (node) {
+        node.addEventListener('transitionend', handleTransitionEnd);
+        fallbackTimer.current = window.setTimeout(() => {
+          if (open) {
+            setInteractive(true);
+            afterOpen?.();
+            try {
+              node?.focus();
+            } catch {
+              // TODO: handle focus error
+            }
+          } else {
+            afterClose?.();
+            try {
+              openerRef.current?.focus();
+            } catch {
+              // TODO: handle focus error
+            }
+          }
+        }, TRANSITION_MS + 60);
+      }
+
+      if (open) openerRef.current = document.activeElement as HTMLElement | null;
+
+      return () => {
+        if (node) node.removeEventListener('transitionend', handleTransitionEnd);
+        if (fallbackTimer.current) {
+          window.clearTimeout(fallbackTimer.current);
+          fallbackTimer.current = null;
+        }
+      };
+    }, [open, afterOpen, afterClose]);
+
+    useEffect(() => {
+      const onKey = (e: KeyboardEvent) => {
+        if (e.key === 'Escape' && open) {
+          beforeClose?.();
+          setInteractive(false);
+          setOpen(false);
+        }
+      };
+      window.addEventListener('keydown', onKey);
+      return () => window.removeEventListener('keydown', onKey);
+    }, [open, beforeClose]);
+
+    const onOverlayClick = () => {
+      if (!closeOnOverlayClick) return;
+      beforeClose?.();
+      setInteractive(false);
+      setOpen(false);
+    };
+
+    const cssSize = typeof size === 'number' ? `${size}px` : size;
+
+    return (
+      <div ref={rootRef} className={`scp-inline-root ${open ? 'open' : ''}`} aria-hidden={!open}>
+        <div
+          className={`scp-overlay ${open ? 'visible' : ''}`}
+          onMouseDown={onOverlayClick}
+          role='presentation'
+        />
+
+        <aside
+          className={`scp-panel ${open ? 'in' : 'out'} ${interactive ? 'interactive' : ''} ${className}`}
+          style={{ width: cssSize, ...style }}
+          ref={panelRef}
+          tabIndex={-1}
+          role='dialog'
+          aria-label={title}
+        >
+          <div className='scp-header'>
+            <div>
+              <h3 className='scp-title'>{title}</h3>
+              {subtitle && <div className='scp-subtitle'>{subtitle}</div>}
+            </div>
+
+            {showCloseButton && (
+              <button
+                className='scp-close'
+                aria-label='Close'
+                onClick={() => {
+                  beforeClose?.();
+                  setInteractive(false);
+                  setOpen(false);
+                }}
+              >
+                <X size={18} />
+              </button>
+            )}
+          </div>
+
+          <div className='scp-body'>{children}</div>
+        </aside>
+      </div>
+    );
+  }
+);
+
+export default SideComponent;

package/src/components/SideComponent/hooks/useBodyScrollLock.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+export function useBodyScrollLock(active: boolean) {
+  const prev = useRef<string>('');
+
+  useEffect(() => {
+    if (active) {
+      prev.current = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return;
+    }
+    // restore
+    document.body.style.overflow = prev.current || '';
+  }, [active]);
+}

package/src/components/SideComponent/index.ts

@@ -0,0 +1,2 @@
+export * from './SideComponent';
+export * from './hooks/useBodyScrollLock';

package/src/components/SideComponent/portal.ts

@@ -0,0 +1,11 @@
+export const PORTAL_ID = 'sidecomponent-portal-root';
+
+export function ensurePortalRoot(): HTMLElement {
+  let root = document.getElementById(PORTAL_ID);
+  if (!root) {
+    root = document.createElement('div');
+    root.id = PORTAL_ID;
+    document.body.appendChild(root);
+  }
+  return root;
+}

package/src/components/SubNavBar/SubNavBar.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ScrollableHorizontale } from '../ScrollableHorizontale/ScrollableHorizontale';
+import { IconText } from '../IconText/IconText';
+import { useNavigation } from '../NavBar/NavContext';
+import type { MenuCategory } from '../DropdownMenu';
+
+export type SubNavItemType = {
+  id: string;
+  icon?: string;
+  label: string;
+  href?: string;
+};
+export type SubNavBarProps = {
+  subNavItems?: SubNavItemType[];
+  highlightColor?: string;
+  style?: React.CSSProperties;
+  item?: MenuCategory[];
+};
+
+export const SubNavBar: React.FC<SubNavBarProps> = ({
+  subNavItems,
+  highlightColor = '#1387C8',
+  style,
+  item,
+}) => {
+  const { activeSubNav } = useNavigation();
+  return (
+    <ScrollableHorizontale style={style} item={item}>
+      {subNavItems?.map((item) => (
+        <IconText
+          key={item.id}
+          icon={item.icon}
+          text={item.label}
+          href={item.href}
+          color={item.id === activeSubNav ? highlightColor : ''}
+          active={item.id === activeSubNav}
+        />
+      ))}
+    </ScrollableHorizontale>
+  );
+};

package/src/components/SubNavBar/index.ts

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

package/src/components/Switcher/Switcher.css

@@ -0,0 +1,65 @@
+.switcher {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(var(--size) * 2);
+  height: var(--size);
+  background-color: var(--bg);
+  border-radius: var(--size);
+  border: calc(var(--size) * 0.08) solid var(--border);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  outline: none;
+  overflow: hidden;
+}
+
+.switcher:focus {
+  box-shadow: 0 0 0 calc(var(--size) * 0.15) rgba(59, 130, 246, 0.4);
+}
+
+.switcher-checked {
+  background-color: var(--active-bg);
+}
+
+.switcher-circle {
+  position: absolute;
+  top: calc(var(--size) * 0.085);
+  left: calc(var(--size) * 0.1);
+  width: calc(var(--size) * 0.7);
+  height: calc(var(--size) * 0.7);
+  background-color: var(--circle);
+  border-radius: 50%;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 calc(var(--size) * 0.08) calc(var(--size) * 0.25) rgba(0, 0, 0, 0.25);
+}
+
+.switcher-checked .switcher-circle {
+  transform: translateX(calc(var(--size)));
+}
+
+.switcher-icons {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 calc(var(--size) * 0.25);
+  pointer-events: none;
+}
+
+.switcher-icons svg:first-child {
+  color: var(--circle);
+}
+
+.switcher-icons svg:last-child {
+  color: var(--icon);
+}
+
+.switcher-checked .switcher-icons svg:first-child {
+  color: var(--circle);
+}
+
+.switcher-checked .switcher-icons svg:last-child {
+  color: var(--icon2);
+}

package/src/components/Switcher/Switcher.stories.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Switcher } from './Switcher';
+
+// Définir le type des propriétés du Switcher
+type SwitcherProps = React.ComponentProps<typeof Switcher>;
+
+const meta: Meta<SwitcherProps> = {
+  title: 'Components/Switcher',
+  component: Switcher,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    leftIcon: {
+      control: { type: 'select' },
+      options: ['Moon', 'ChevronLeft', 'ArrowLeft', 'Settings', 'Menu', 'Sun'],
+      description: "Nom de l'icône Lucide pour le côté gauche",
+    },
+    rightIcon: {
+      control: { type: 'select' },
+      options: ['Sun', 'ChevronRight', 'ArrowRight', 'Plus', 'Menu', 'Moon'],
+      description: "Nom de l'icône Lucide pour le côté droit",
+    },
+    size: {
+      control: { type: 'range', min: 16, max: 64, step: 4 },
+      description: 'Taille du cercle (px)',
+    },
+    colors: {
+      control: 'object',
+      description:
+        'Objet de configuration des couleurs (bg, activeBg, border, circle, icon, icon2)',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'État du switch (ON/OFF)',
+    },
+    onToggle: { action: 'toggled' },
+    className: {
+      control: 'text',
+      description: 'Classe CSS supplémentaire',
+    },
+  },
+  args: {
+    leftIcon: 'Moon',
+    rightIcon: 'Sun',
+    size: 32,
+    checked: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<SwitcherProps>;
+
+// Stories de base
+export const Default: Story = {};
+
+export const WithDifferentIcons: Story = {
+  args: {
+    leftIcon: 'Settings',
+    rightIcon: 'Menu',
+  },
+};
+
+export const LargeSize: Story = {
+  args: { size: 48 },
+};
+
+export const SmallSize: Story = {
+  args: { size: 20 },
+};
+
+// Stories pour différents styles de couleurs
+export const PrimaryColors: Story = {
+  args: {
+    colors: {
+      bg: '#1f2937',
+      activeBg: '#3b82f6',
+      border: '#2563eb',
+      circle: '#fff',
+      icon: '#93c5fd',
+      icon2: '#dbeafe', // Nouvelle propriété icon2
+    },
+  },
+};
+
+export const SuccessColors: Story = {
+  args: {
+    colors: {
+      bg: '#064e3b',
+      activeBg: '#10b981',
+      border: '#047857',
+      circle: '#fff',
+      icon: '#a7f3d0',
+      icon2: '#d1fae5', // Nouvelle propriété icon2
+    },
+  },
+};
+
+export const WarningColors: Story = {
+  args: {
+    colors: {
+      bg: '#78350f',
+      activeBg: '#f59e0b',
+      border: '#d97706',
+      circle: '#fff',
+      icon: '#fde68a',
+      icon2: '#fef3c7', // Nouvelle propriété icon2
+    },
+  },
+};
+
+export const ErrorColors: Story = {
+  args: {
+    colors: {
+      bg: '#7f1d1d',
+      activeBg: '#ef4444',
+      border: '#b91c1c',
+      circle: '#fff',
+      icon: '#fecaca',
+      icon2: '#fee2e2', // Nouvelle propriété icon2
+    },
+  },
+};
+
+// Nouvelle story pour démontrer l'utilisation de icon2
+export const WithDifferentIconColors: Story = {
+  args: {
+    colors: {
+      bg: '#e5e7eb',
+      activeBg: '#3b82f6',
+      border: '#ffffff',
+      circle: '#ffffff',
+      icon: '#3b82f6',
+      icon2: '#9ca3af',
+    },
+  },
+};
+
+// Story avec gestion d'état contrôlée
+export const Controlled: Story = {
+  render: (args) => {
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <Switcher {...args} checked={checked} onToggle={setChecked} />
+        <span>{checked ? 'ON' : 'OFF'}</span>
+      </div>
+    );
+  },
+};

package/src/components/Switcher/Switcher.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo, type KeyboardEvent } from 'react';
+import * as LucideIcons from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
+import './Switcher.css';
+
+export interface SwitcherProps {
+  colors?: {
+    bg?: string;
+    activeBg?: string;
+    border?: string;
+    circle?: string;
+    icon?: string;
+    icon2?: string;
+  };
+  leftIcon?: string;
+  rightIcon?: string;
+  checked?: boolean;
+  onToggle?: (checked: boolean) => void;
+  size?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const Switcher: React.FC<SwitcherProps> = ({
+  colors = {},
+  leftIcon,
+  rightIcon,
+  checked = false,
+  onToggle,
+  size = 24,
+  className = '',
+  style,
+}) => {
+  const LeftIconComponent = useMemo(() => {
+    return leftIcon
+      ? (LucideIcons[leftIcon as keyof typeof LucideIcons] as React.ComponentType<LucideProps>)
+      : null;
+  }, [leftIcon]);
+
+  const RightIconComponent = useMemo(() => {
+    return rightIcon
+      ? (LucideIcons[rightIcon as keyof typeof LucideIcons] as React.ComponentType<LucideProps>)
+      : null;
+  }, [rightIcon]);
+
+  const toggle = () => onToggle?.(!checked);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle();
+    }
+  };
+
+  return (
+    <div
+      role='switch'
+      aria-checked={checked}
+      tabIndex={0}
+      className={`switcher ${checked ? 'switcher-checked' : ''} ${className}`}
+      style={
+        {
+          '--bg': colors.bg || '#1f2937',
+          '--active-bg': colors.activeBg || '#facc15',
+          '--border': colors.border || '#fff',
+          '--circle': colors.circle || '#fff',
+          '--icon': colors.icon || '#fbbf24',
+          '--icon2': colors.icon2 || colors.icon || '#fbbf24',
+          '--size': `${size}px`,
+          ...style,
+        } as React.CSSProperties
+      }
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+    >
+      <div className='switcher-circle' />
+      <div className='switcher-icons'>
+        {LeftIconComponent && <LeftIconComponent size={size * 0.5} />}
+        {RightIconComponent && <RightIconComponent size={size * 0.5} />}
+      </div>
+    </div>
+  );
+};

package/src/components/Switcher/index.ts

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

package/src/components/Title/Title.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Title } from './Title';
+
+const meta: Meta<typeof Title> = {
+  component: Title,
+  title: 'Components/Title',
+};
+export default meta;
+
+type Story = StoryObj<typeof Title>;
+
+export const Default: Story = {
+  args: {
+    title: 'Gestion des clés',
+    fontSize: '3rem',
+    barColor: '#e12d2d',
+  },
+};

package/src/components/Title/Title.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface TitleProps {
+  title: string;
+  fontSize?: string;
+  barColor?: string;
+}
+
+export const Title: React.FC<TitleProps> = ({
+  title,
+  fontSize = '1.5rem',
+  barColor = '#1E90FF',
+}) => {
+  return (
+    <div
+      style={{
+        borderLeft: `4px solid ${barColor}`,
+        paddingLeft: '12px',
+        marginBottom: '16px',
+        width: '100%',
+      }}
+    >
+      <h2 style={{ fontSize, wordWrap: 'break-word' }}>{title}</h2>
+    </div>
+  );
+};

package/src/components/Title/index.ts

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