@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/SideComponent/SideComponent.tsx

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

@@ -1,15 +0,0 @@
-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/portal.ts

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

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

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

package/src/components/Switcher/Switcher.css

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

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

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

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

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

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

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

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