@tsiky/components-r19 1.1.0 → 1.3.0

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/DynamicInput.module.css

@@ -1,126 +1,125 @@
-/* DynamicInput.module.css */
-.container {
-  padding: 20px;
-  background-color: #f5f5f5;
-  border-radius: 8px;
-}
-
-.fieldGroup {
-  margin-bottom: 1.5rem;
-}
-
-.fieldLabel {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: #212529;
-}
-
-.required::after {
-  content: ' *';
-  color: #dc3545;
-}
-
-.fieldInput {
-  width: 100%;
-  padding: 0.5rem 1rem;
-  border: 1px solid #6c757d;
-  border-radius: 0.375rem;
-  transition:
-    border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-  line-height: 1.5;
-  font-size: 1rem;
-  background-color: #f8f9fa;
-}
-
-.fieldInput:focus {
-  border-color: #0d6efd;
-  outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-.fieldInvalid {
-  border-color: #dc3545;
-}
-
-.fieldValid {
-  border-color: #198754;
-}
-
-.fieldError {
-  display: block;
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
-  color: #dc3545;
-  font-weight: 500;
-}
-
-/* Styles spécifiques pour les radios */
-.radioGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  background-color: transparent;
-  padding: 0;
-}
-
-.radioGroup .form-check {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background-color: transparent;
-  margin-bottom: 0;
-}
-
-.radioGroup .form-check-label {
-  color: #212529;
-}
-
-/* Styles pour les checkboxes */
-.checkboxGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.checkboxGroup .form-check {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0;
-}
-
-/* Styles spécifiques pour les selects */
-.selectInput select {
-  appearance: none;
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-  background-size: 1rem;
-}
-
-/* Styles pour les textareas */
-.textareaInput textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-/* Styles pour les champs désactivés */
-.fieldInput:disabled {
-  background-color: rgba(0, 0, 0, 0.05);
-  cursor: not-allowed;
-}
-
-/* Amélioration de l'accessibilité pour le focus */
-.fieldInput:focus-visible {
-  outline: 2px solid #0d6efd;
-  outline-offset: 2px;
-}
-
-/* Styles pour la grille dans AllInputs */
-.gridContainer {
-  display: grid;
-  gap: 20px;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-}
+/* DynamicInput.module.css */
+.container {
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.fieldGroup {
+  margin-bottom: 1.5rem;
+}
+
+.fieldLabel {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #212529;
+}
+
+.required::after {
+  content: ' *';
+  color: #dc3545;
+}
+
+.fieldInput {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: 1px solid #6c757d;
+  border-radius: 0.375rem;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  line-height: 1.5;
+  font-size: 1rem;
+  background-color: #f8f9fa;
+}
+
+.fieldInput:focus {
+  border-color: #0d6efd;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.fieldInvalid {
+  border-color: #dc3545;
+}
+
+.fieldValid {
+  border-color: #198754;
+}
+
+.fieldError {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: #dc3545;
+  font-weight: 500;
+}
+
+/* Styles spécifiques pour les radios */
+.radioGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background-color: transparent;
+  padding: 0;
+}
+
+.radioGroup .form-check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: transparent;
+  margin-bottom: 0;
+}
+
+.radioGroup .form-check-label {
+  color: #212529;
+}
+
+/* Styles pour les checkboxes */
+.checkboxGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.checkboxGroup .form-check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0;
+}
+
+/* Styles spécifiques pour les selects */
+.selectInput select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+}
+
+/* Styles pour les textareas */
+.textareaInput textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+/* Styles pour les champs désactivés */
+.fieldInput:disabled {
+  background-color: rgba(0, 0, 0, 0.05);
+  cursor: not-allowed;
+}
+
+/* Amélioration de l'accessibilité pour le focus */
+.fieldInput:focus-visible {
+  outline: 2px solid #0d6efd;
+  outline-offset: 2px;
+}
+
+/* Styles pour la grille dans AllInputs */
+.gridContainer {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}

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>
+  );
+};