@tsiky/components-r19 1.0.0

package/src/components/DayStatCard/DayStatCard.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+import './DayStatCard.css';
+import { CircularProgress } from '../CircularProgress/CircularProgress';
+import type { CircularProgressProps } from '../CircularProgress/CircularProgress';
+
+export type DayStatCardProps = {
+  background?: string;
+  headerTop: string;
+  headerBottom?: string;
+  headerTopStyle?: CSSProperties;
+  headerBottomStyle?: CSSProperties;
+  progress1: CircularProgressProps;
+  progress2: CircularProgressProps;
+  progress3: CircularProgressProps;
+  style?: CSSProperties;
+  size?: number;
+  className?: string;
+};
+
+export const DayStatCard: React.FC<DayStatCardProps> = ({
+  size = 200,
+  background = '#fff',
+  headerTop,
+  headerBottom,
+  headerTopStyle,
+  headerBottomStyle,
+  progress1,
+  progress2,
+  progress3,
+  style,
+  className = '',
+}) => {
+  const progress1WithDefaults = { size: size * 0.5, ...progress1 };
+  const progress2WithDefaults = { size: size * 0.4, ...progress2 };
+  const progress3WithDefaults = { size: size * 0.4, ...progress3 };
+
+  return (
+    <div style={{ width: size, background, ...style }} className={`stat-card ${className}`}>
+      <div className='stat-card-header'>
+        <div className='stat-card-header-top' style={headerTopStyle}>
+          {headerTop}
+        </div>
+        {headerBottom && (
+          <div className='stat-card-header-bottom' style={headerBottomStyle}>
+            {headerBottom}
+          </div>
+        )}
+      </div>
+
+      <div className='stat-card-body'>
+        {/* Première ligne - Progress Centré */}
+        <div className='progress-row-single'>
+          <CircularProgress {...progress1WithDefaults} />
+        </div>
+
+        {/* Deuxième ligne - Deux Progress côte à côte */}
+        <div className='progress-row-double'>
+          <div className='progress-item'>
+            <CircularProgress {...progress2WithDefaults} />
+          </div>
+          <div className='progress-item'>
+            <CircularProgress {...progress3WithDefaults} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/DayStatCard/index.ts

@@ -0,0 +1,2 @@
+export { DayStatCard } from './DayStatCard';
+export type { DayStatCardProps } from './DayStatCard';

package/src/components/DraggableSwitcher/DraggableSwitcherButton.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { useDraggableSwitcher } from './context/useDraggableSwitcher';
+import { Switcher } from '../Switcher/Switcher';
+
+export interface DraggableSwitcherButtonProps {
+  leftIcon?: string;
+  rightIcon?: string;
+  colors?: {
+    bg?: string;
+    activeBg?: string;
+    border?: string;
+    circle?: string;
+    icon?: string;
+    icon2?: string;
+  };
+  size?: number;
+}
+
+export const DraggableSwitcherButton = ({
+  leftIcon = 'Move',
+  rightIcon = 'MoveDiagonal',
+  colors = {
+    bg: '#e5e7eb',
+    activeBg: '#10b981',
+    border: '#ffffff',
+    circle: '#ffffff',
+    icon: '#10b981',
+    icon2: '#ffffff',
+  },
+  size = 24,
+}: DraggableSwitcherButtonProps) => {
+  const { isDraggable, switchDraggable } = useDraggableSwitcher();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const handleToggle = (checked: boolean) => {
+    switchDraggable(checked);
+  };
+
+  return (
+    <Switcher
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      checked={isDraggable}
+      onToggle={handleToggle}
+      colors={colors}
+      size={size}
+    />
+  );
+};
+
+export default DraggableSwitcherButton;

package/src/components/DraggableSwitcher/context/useDraggableSwitcher.tsx

@@ -0,0 +1,45 @@
+'use client';
+import { createContext, useContext, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+interface DraggableContextType {
+  isDraggable: boolean;
+  switchDraggable: (value: boolean) => void;
+}
+
+const DraggableContext = createContext<DraggableContextType | undefined>(undefined);
+
+export const DraggableProvider = ({ children }: { children: ReactNode }) => {
+  const [isDraggable, setIsDraggable] = useState(false);
+
+  // Charger depuis localStorage au premier rendu
+  useEffect(() => {
+    const stored = localStorage.getItem('isDraggable');
+    if (stored !== null) {
+      setIsDraggable(stored === 'true'); // localStorage stocke toujours des strings
+    }
+  }, []);
+
+  // Sauvegarder dans localStorage quand ça change
+  useEffect(() => {
+    localStorage.setItem('isDraggable', String(isDraggable));
+  }, [isDraggable]);
+
+  const switchDraggable = (value: boolean) => {
+    setIsDraggable(value);
+  };
+
+  return (
+    <DraggableContext.Provider value={{ isDraggable, switchDraggable }}>
+      {children}
+    </DraggableContext.Provider>
+  );
+};
+
+export const useDraggableSwitcher = () => {
+  const context = useContext(DraggableContext);
+  if (!context) {
+    throw new Error('useDraggableSwitcher must be used inside a DraggableProvider');
+  }
+  return context;
+};

package/src/components/DraggableSwitcher/index.ts

@@ -0,0 +1,2 @@
+export * from './DraggableSwitcherButton';
+export * from './context/useDraggableSwitcher';

package/src/components/DropdownMenu/DropdownMenu.css

@@ -0,0 +1,100 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #ccc;
+  padding: 8px 16px;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  font-size: var(--text-paragraph, 1rem);
+  font-weight: var(--font-medium, 500);
+  transition: all 0.2s ease;
+}
+
+.dropdown-button:hover {
+  background-color: #f5f5f5;
+}
+
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.dropdown-content.left {
+  left: 0;
+  right: auto;
+}
+
+.dropdown-content.right {
+  right: 0;
+  left: auto;
+}
+
+.dropdown-category {
+  padding: 8px 0;
+}
+
+.dropdown-category:not(:last-child) {
+  border-bottom: 1px solid #eee;
+}
+
+.category-title {
+  padding: 8px 16px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: var(--text-small, 0.875rem);
+  font-weight: var(--font-medium, 500);
+}
+
+.category-items {
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown-item {
+  padding: 10px 16px;
+  text-decoration: none;
+  color: #333;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--text-paragraph, 1rem);
+  font-weight: var(--font-normal, 400);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+  display: block;
+}
+
+.dropdown-item:hover {
+  background: #f0f0f0;
+}
+
+.dropdown-item.active {
+  color: var(--color-primary, #008fbb); /* couleur mise en avant */
+  font-weight: var(--font-medium, 600);
+  text-decoration: underline;
+}
+
+/* Masquer le texte du bouton sur les petits écrans */
+@media (max-width: 768px) {
+  .button-text {
+    display: none;
+  }
+}

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

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

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

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