@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/DayStatCard/DayStatCard.tsx

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

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

package/src/components/DynamicInput/input/SelectInput.tsx

@@ -1,75 +1,75 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import styles from './assets/SelectInput.module.css';
-
-interface SelectInputProps {
-  field: any;
-  value: any;
-  onChange: (value: any) => void;
-  onBlur: () => void;
-  error?: string;
-  touched?: boolean;
-}
-
-export const SelectInput: React.FC<SelectInputProps> = ({
-  field,
-  value,
-  onChange,
-  onBlur,
-  error,
-  touched,
-}) => {
-  const hasError = Boolean(touched && error);
-  const displayLabel = field.label || '';
-  const placeholder = field.placeholder || '';
-
-  // Trouve le label de l'option sélectionnée si présente
-  const selectedOptionLabel =
-    field.options?.find((o: any) => String(o.value) === String(value))?.label ?? '';
-
-  return (
-    <div
-      className={`${styles.wrapper} ${hasError ? styles.wrapperInvalid : ''} ${
-        value ? styles.wrapperHasValue : ''
-      }`}
-    >
-      {/* Select natif (masqué visuellement mais accessible) */}
-      <select
-        id={field.name}
-        name={field.name}
-        className={styles.nativeSelect}
-        value={value ?? ''}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        aria-invalid={hasError}
-        aria-label={displayLabel}
-      >
-        {/* Placeholder : visible quand le select est fermé, caché dans la liste */}
-        <option value='' disabled hidden>
-          {placeholder || `Sélectionnez ${displayLabel?.toLowerCase() || ''}`}
-        </option>
-
-        {field.options?.map((option: any, idx: number) => (
-          <option key={idx} value={option.value} className={styles.optionStyle}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-
-      {/* Couche visuelle */}
-      <div className={styles.display}>
-        {displayLabel && <span className={styles.topLabel}>{displayLabel}</span>}
-        <span
-          className={`${styles.valueLine} ${value ? styles.valueActive : styles.valuePlaceholder}`}
-        >
-          {value ? selectedOptionLabel : placeholder}
-        </span>
-
-        {/* caret (SVG) */}
-        <span className={styles.caret} aria-hidden='true'></span>
-      </div>
-
-      {hasError && <span className={styles.error}>{error}</span>}
-    </div>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import styles from './assets/SelectInput.module.css';
+
+interface SelectInputProps {
+  field: any;
+  value: any;
+  onChange: (value: any) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const SelectInput: React.FC<SelectInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  const hasError = Boolean(touched && error);
+  const displayLabel = field.label || '';
+  const placeholder = field.placeholder || '';
+
+  // Trouve le label de l'option sélectionnée si présente
+  const selectedOptionLabel =
+    field.options?.find((o: any) => String(o.value) === String(value))?.label ?? '';
+
+  return (
+    <div
+      className={`${styles.wrapper} ${hasError ? styles.wrapperInvalid : ''} ${
+        value ? styles.wrapperHasValue : ''
+      }`}
+    >
+      {/* Select natif (masqué visuellement mais accessible) */}
+      <select
+        id={field.name}
+        name={field.name}
+        className={styles.nativeSelect}
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onBlur}
+        aria-invalid={hasError}
+        aria-label={displayLabel}
+      >
+        {/* Placeholder : visible quand le select est fermé, caché dans la liste */}
+        <option value='' disabled hidden>
+          {placeholder || `Sélectionnez ${displayLabel?.toLowerCase() || ''}`}
+        </option>
+
+        {field.options?.map((option: any, idx: number) => (
+          <option key={idx} value={option.value} className={styles.optionStyle}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+
+      {/* Couche visuelle */}
+      <div className={styles.display}>
+        {displayLabel && <span className={styles.topLabel}>{displayLabel}</span>}
+        <span
+          className={`${styles.valueLine} ${value ? styles.valueActive : styles.valuePlaceholder}`}
+        >
+          {value ? selectedOptionLabel : placeholder}
+        </span>
+
+        {/* caret (SVG) */}
+        <span className={styles.caret} aria-hidden='true'></span>
+      </div>
+
+      {hasError && <span className={styles.error}>{error}</span>}
+    </div>
+  );
+};