@tsiky/components-r19 1.1.0 → 1.2.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/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>
+  );
+};

package/src/components/DynamicInput/input/assets/SelectInput.module.css

@@ -1,95 +1,95 @@
-.wrapper {
-  position: relative;
-  width: 100%;
-  border: 1px solid #d3d6db;
-  border-radius: 10px;
-  padding: 12px 44px 12px 14px;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.wrapper:focus-within {
-  border-color: #2684ff;
-}
-
-.wrapperInvalid {
-  border-color: #dc3545;
-}
-
-.nativeSelect {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-.display {
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-  user-select: none;
-}
-
-.topLabel {
-  font-size: 0.8rem;
-  color: #8b9094;
-  font-weight: 500;
-  line-height: 1;
-  margin-bottom: 6px;
-}
-
-.valueLine {
-  font-size: 1rem;
-  line-height: 1.1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.valuePlaceholder {
-  color: #99a0a6;
-}
-
-.valueActive {
-  color: var(--color-text, #222);
-}
-
-.caret {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  pointer-events: none;
-  background-image: url("data:image/svg+xml;utf8,<svg fill='%23888' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px;
-}
-
-.error {
-  display: block;
-  margin-top: 8px;
-  font-size: 0.85rem;
-  color: #dc3545;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wrapper,
-  .wrapper:focus-within {
-    transition: none;
-  }
-}
-
-.optionStyle {
-  background-color: var(--color-card-background);
-  color: var(--color-text);
-}
+.wrapper {
+  position: relative;
+  width: 100%;
+  border: 1px solid #d3d6db;
+  border-radius: 10px;
+  padding: 12px 44px 12px 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.wrapper:focus-within {
+  border-color: #2684ff;
+}
+
+.wrapperInvalid {
+  border-color: #dc3545;
+}
+
+.nativeSelect {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.display {
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  user-select: none;
+}
+
+.topLabel {
+  font-size: 0.8rem;
+  color: #8b9094;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+
+.valueLine {
+  font-size: 1rem;
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.valuePlaceholder {
+  color: #99a0a6;
+}
+
+.valueActive {
+  color: var(--color-text, #222);
+}
+
+.caret {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='%23888' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px;
+}
+
+.error {
+  display: block;
+  margin-top: 8px;
+  font-size: 0.85rem;
+  color: #dc3545;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wrapper,
+  .wrapper:focus-within {
+    transition: none;
+  }
+}
+
+.optionStyle {
+  background-color: var(--color-card-background);
+  color: var(--color-text);
+}