@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/DayStatCard/DayStatCard.stories.tsx

@@ -1,273 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DayStatCard } from './DayStatCard';
-
-const meta = {
-  title: 'Components/DayStatCard',
-  component: DayStatCard,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'A card component that displays three circular progress indicators in a specific layout.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    headerTop: {
-      control: 'text',
-      description: 'Top header text of the card',
-      table: {
-        category: 'Content',
-      },
-    },
-    headerBottom: {
-      control: 'text',
-      description: 'Bottom header text of the card (optional)',
-      table: {
-        category: 'Content',
-      },
-    },
-    headerTopStyle: {
-      control: 'object',
-      description: 'Custom styles for the top header',
-      table: {
-        category: 'Styling',
-      },
-    },
-    headerBottomStyle: {
-      control: 'object',
-      description: 'Custom styles for the bottom header',
-      table: {
-        category: 'Styling',
-      },
-    },
-    progress1: {
-      control: 'object',
-      description: 'Props for the first circular progress (top)',
-      table: {
-        category: 'Progress Indicators',
-      },
-    },
-    progress2: {
-      control: 'object',
-      description: 'Props for the second circular progress (bottom left)',
-      table: {
-        category: 'Progress Indicators',
-      },
-    },
-    progress3: {
-      control: 'object',
-      description: 'Props for the third circular progress (bottom right)',
-      table: {
-        category: 'Progress Indicators',
-      },
-    },
-  },
-  args: {
-    headerTop: 'Daily Statistics',
-    headerBottom: 'Overview',
-    progress1: {
-      progress: 75,
-      textTop: '75%',
-      textBottom: 'Completed',
-      color: '#4CAF50',
-    },
-    progress2: {
-      progress: 50,
-      textTop: '50%',
-      textBottom: 'In Progress',
-      color: '#FFC107',
-    },
-    progress3: {
-      progress: 25,
-      textTop: '25%',
-      textBottom: 'Remaining',
-      color: '#F44336',
-    },
-  },
-} satisfies Meta<typeof DayStatCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default DayStatCard with three progress indicators in a 1+2 layout',
-      },
-    },
-  },
-};
-
-export const CustomHeaders: Story = {
-  args: {
-    headerTop: 'Weekly Performance',
-    headerBottom: 'Team Metrics',
-    headerTopStyle: { color: '#2d3748', fontSize: '1.5rem' },
-    headerBottomStyle: { color: '#718096', fontStyle: 'italic' },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'DayStatCard with custom header styles',
-      },
-    },
-  },
-};
-
-export const DifferentProgressValues: Story = {
-  args: {
-    progress1: {
-      progress: 90,
-      textTop: '90%',
-      textBottom: 'Efficiency',
-      color: '#4CAF50',
-      size: 100,
-    },
-    progress2: {
-      progress: 65,
-      textTop: '65%',
-      textBottom: 'Accuracy',
-      color: '#2196F3',
-      size: 80,
-    },
-    progress3: {
-      progress: 40,
-      textTop: '40%',
-      textBottom: 'Speed',
-      color: '#FF9800',
-      size: 80,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'DayStatCard with different progress values and sizes',
-      },
-    },
-  },
-};
-
-export const Minimal: Story = {
-  args: {
-    headerBottom: undefined,
-    progress1: {
-      progress: 60,
-      textTop: '60%',
-      textBottom: undefined,
-    },
-    progress2: {
-      progress: 30,
-      textTop: '30%',
-      textBottom: undefined,
-    },
-    progress3: {
-      progress: 80,
-      textTop: '80%',
-      textBottom: undefined,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Minimal DayStatCard without bottom header and progress labels',
-      },
-    },
-  },
-};
-
-export const WithLabels: Story = {
-  args: {
-    progress1: {
-      progress: 75,
-      textTop: '75%',
-      textBottom: 'Tasks',
-      label: 'Completed',
-    },
-    progress2: {
-      progress: 50,
-      textTop: '50%',
-      textBottom: 'Tasks',
-      label: 'In Progress',
-    },
-    progress3: {
-      progress: 25,
-      textTop: '25%',
-      textBottom: 'Tasks',
-      label: 'Pending',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'DayStatCard with labels below each progress indicator',
-      },
-    },
-  },
-};
-
-export const CustomSizes: Story = {
-  args: {
-    progress1: {
-      progress: 75,
-      size: 120,
-      strokeWidth: 10,
-      textTop: '75%',
-      textBottom: 'Main',
-    },
-    progress2: {
-      progress: 50,
-      size: 90,
-      strokeWidth: 6,
-      textTop: '50%',
-      textBottom: 'Sub 1',
-    },
-    progress3: {
-      progress: 25,
-      size: 90,
-      strokeWidth: 6,
-      textTop: '25%',
-      textBottom: 'Sub 2',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'DayStatCard with custom sizes for progress indicators',
-      },
-    },
-  },
-};
-
-export const SingleColorTheme: Story = {
-  args: {
-    progress1: {
-      progress: 75,
-      textTop: '75%',
-      textBottom: 'Design',
-      color: '#9C27B0',
-    },
-    progress2: {
-      progress: 50,
-      textTop: '50%',
-      textBottom: 'Development',
-      color: '#9C27B0',
-    },
-    progress3: {
-      progress: 25,
-      textTop: '25%',
-      textBottom: 'Testing',
-      color: '#9C27B0',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'DayStatCard with a single color theme across all progress indicators',
-      },
-    },
-  },
-};

package/src/components/DayStatCard/DayStatCard.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import type { CSSProperties } from 'react';
-import './DayStatCard.css';
-import { CircularProgress } from '../CircularProgress/CircularProgress';
-import type { CircularProgressProps } from '../CircularProgress/CircularProgress';
-import { Move } from 'lucide-react';
-
-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;
-  draggable?: boolean; // nouvelle prop
-};
-
-export const DayStatCard: React.FC<DayStatCardProps> = ({
-  size = 200,
-  background = '#fff',
-  headerTop,
-  headerBottom,
-  headerTopStyle,
-  headerBottomStyle,
-  progress1,
-  progress2,
-  progress3,
-  style,
-  className = '',
-  draggable = false,
-}) => {
-  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, position: 'relative', ...style }}
-      className={`stat-card ${className}`}
-    >
-      {/* Header toujours visible */}
-      <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>
-
-      {/* Body */}
-      <div className='stat-card-body' style={{ opacity: draggable ? 0 : 1 }}>
-        {/* 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>
-
-      {/* Overlay Move */}
-      {draggable && (
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            pointerEvents: 'none',
-          }}
-        >
-          <Move size={32} strokeWidth={1.5} style={{ opacity: 0.8 }} />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/DraggableSwitcher/DraggableSwitcherButton.tsx

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

@@ -1,45 +0,0 @@
-'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/DropdownMenu/DropdownMenu.css

@@ -1,100 +0,0 @@
-.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;
-  }
-}