@tsiky/components-r19 1.0.0

package/src/components/DynamicInput/DynamicInput.tsx

@@ -0,0 +1,144 @@
+/* DynamicInput.tsx */
+import React from 'react';
+import { TextInput } from './input/TextInput';
+import { TextareaInput } from './input/TextareaInput';
+import { SelectInput } from './input/SelectInput';
+import { CheckboxInput } from './input/CheckboxInput';
+import { RadioInput } from './input/RadioInput';
+import { FileInput } from './input/FileInput';
+import { DateInput } from './input/DateInput';
+import { RangeInput } from './input/RangeInput';
+import { ColorInput } from './input/ColorInput';
+import type { FieldMetadata } from '../DynamicForm/tools/form-metadata';
+
+interface DynamicInputProps {
+  field: FieldMetadata;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange: (value: any) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const DynamicInput: React.FC<DynamicInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  const dateTypes = ['date', 'month', 'week', 'time', 'datetime-local'];
+
+  if (field.type === 'file') {
+    return (
+      <FileInput
+        field={field}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        error={error}
+        touched={touched}
+      />
+    );
+  }
+
+  if (dateTypes.includes(field.type)) {
+    return (
+      <DateInput
+        field={field}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        error={error}
+        touched={touched}
+      />
+    );
+  }
+
+  if (field.type === 'range') {
+    return (
+      <RangeInput
+        field={field}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        error={error}
+        touched={touched}
+      />
+    );
+  }
+
+  if (field.type === 'color') {
+    return (
+      <ColorInput
+        field={field}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        error={error}
+        touched={touched}
+      />
+    );
+  }
+
+  switch (field.type) {
+    case 'textarea':
+      return (
+        <TextareaInput
+          field={field}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          error={error}
+          touched={touched}
+        />
+      );
+    case 'select':
+      return (
+        <SelectInput
+          field={field}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          error={error}
+          touched={touched}
+        />
+      );
+    case 'checkbox':
+      return (
+        <CheckboxInput
+          field={field}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          error={error}
+          touched={touched}
+        />
+      );
+    case 'radio':
+      return (
+        <RadioInput
+          field={field}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          error={error}
+          touched={touched}
+        />
+      );
+    default:
+      return (
+        <TextInput
+          field={field}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          error={error}
+          touched={touched}
+        />
+      );
+  }
+};

package/src/components/DynamicInput/index.ts

@@ -0,0 +1,2 @@
+export * from './input';
+export * from './DynamicInput';

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { InputWrapper } from './InputWrapper';
+
+interface CheckboxInputProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  field: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange: (value: any) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const CheckboxInput: React.FC<CheckboxInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  return (
+    <InputWrapper field={field} error={error} touched={touched}>
+      <div className='form-check'>
+        <input
+          type='checkbox'
+          className='form-check-input'
+          id={field.name}
+          checked={!!value}
+          onChange={(e) => onChange(e.target.checked)}
+          onBlur={onBlur}
+        />
+        <label className='form-check-label' htmlFor={field.name}>
+          {field.label}
+        </label>
+      </div>
+    </InputWrapper>
+  );
+};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { FieldMetadata } from '../../DynamicForm/tools/form-metadata';
+import styles from './assets/ColorInput.module.css';
+
+interface ColorInputProps {
+  field: FieldMetadata;
+  value: string;
+  onChange: (value: unknown) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const ColorInput: React.FC<ColorInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  return (
+    <div className='mb-3'>
+      <label htmlFor={field.name} className='form-label'>
+        {field.label}
+        {field.required && <span className='text-danger'> *</span>}
+      </label>
+
+      <div className={styles.colorPickerContainer}>
+        <input
+          type='color'
+          id={field.name}
+          name={field.name}
+          value={value || '#000000'}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          className={styles.colorInput}
+        />
+
+        <span className={styles.colorValue}>{value}</span>
+      </div>
+
+      {touched && error && <div className='invalid-feedback'>{error}</div>}
+    </div>
+  );
+};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { FieldMetadata } from '../../DynamicForm/tools/form-metadata';
+import styles from './assets/DateInput.module.css';
+
+interface DateInputProps {
+  field: FieldMetadata;
+  value: string;
+  onChange: (value: unknown) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const DateInput: React.FC<DateInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  const inputType =
+    field.type === 'month'
+      ? 'month'
+      : field.type === 'week'
+        ? 'week'
+        : field.type === 'time'
+          ? 'time'
+          : field.type === 'datetime-local'
+            ? 'datetime-local'
+            : 'date';
+
+  return (
+    <div className={styles.container}>
+      <label htmlFor={field.name} className={styles.label}>
+        {field.label}
+        {field.required && <span className={styles.requiredIndicator}>*</span>}
+      </label>
+
+      <input
+        type={inputType}
+        id={field.name}
+        name={field.name}
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onBlur}
+        className={`${styles.input} ${touched && error ? styles.inputError : ''}`}
+        min={field.validation?.min}
+        max={field.validation?.max}
+        step={field.type === 'time' ? field.attributes?.step : undefined}
+        disabled={field.disabled}
+      />
+
+      {touched && error && <div className={styles.errorMessage}>{error}</div>}
+    </div>
+  );
+};

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

@@ -0,0 +1,174 @@
+import React, { useRef, useState, type DragEvent } from 'react';
+import type { FieldMetadata } from '../../DynamicForm/tools/form-metadata';
+import styles from './assets/FileInput.module.css';
+
+interface FileInputProps {
+  field: FieldMetadata;
+  value: FileList | File[] | null;
+  onChange: (value: FileList | File[] | null) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const FileInput: React.FC<FileInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [dragOver, setDragOver] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.files);
+  };
+
+  const handleClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragOver(false);
+  };
+
+  const handleDrop = (e: DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    setDragOver(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      onChange(e.dataTransfer.files);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    if (!value) return;
+
+    const files = Array.from(value);
+    files.splice(index, 1);
+
+    // Créer un nouveau FileList simulé
+    const dataTransfer = new DataTransfer();
+    files.forEach((file) => dataTransfer.items.add(file));
+
+    onChange(dataTransfer.files);
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return (
+    <div className={`${styles.fileInputContainer} ${touched && error ? styles.hasError : ''}`}>
+      <label htmlFor={field.name} className='form-label'>
+        {field.label}
+        {field.required && <span className='text-danger'> *</span>}
+      </label>
+
+      <input
+        type='file'
+        id={field.name}
+        name={field.name}
+        multiple={field.attributes?.multiple || false}
+        accept={field.attributes?.accept}
+        onChange={handleChange}
+        onBlur={onBlur}
+        ref={fileInputRef}
+        className={styles.customFileInput}
+      />
+
+      <label
+        htmlFor={field.name}
+        className={`${styles.fileInputLabel} ${dragOver ? styles.dragOver : ''}`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleClick}
+        tabIndex={0}
+      >
+        <div className={styles.uploadIcon}>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            width='48'
+            height='48'
+            fill='currentColor'
+            viewBox='0 0 16 16'
+          >
+            <path d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z' />
+            <path d='M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z' />
+          </svg>
+        </div>
+        <div className={styles.uploadText}>
+          {dragOver ? 'Déposez vos fichiers ici' : 'Cliquez ou glissez-déposez pour téléverser'}
+        </div>
+        <div className={styles.uploadHint}>
+          {field.attributes?.accept || 'Tous les fichiers'}{' '}
+          {field.attributes?.multiple ? '(Multiple autorisé)' : ''}
+        </div>
+      </label>
+
+      {value && value.length > 0 && (
+        <div className={styles.fileList}>
+          <div className={styles.fileListTitle}>Fichiers sélectionnés:</div>
+          <ul>
+            {Array.from(value).map((file, index) => (
+              <li key={index} className={styles.fileItem}>
+                <div className={styles.fileIcon}>
+                  <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    width='16'
+                    height='16'
+                    fill='currentColor'
+                    viewBox='0 0 16 16'
+                  >
+                    <path d='M4 0h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5.5 1.5v2a1 1 0 0 0 1 1h2l-3-3z' />
+                  </svg>
+                </div>
+                <div className={styles.fileName}>{file.name}</div>
+                <div className={styles.fileSize}>{formatFileSize(file.size)}</div>
+                <button
+                  type='button'
+                  className={styles.removeButton}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeFile(index);
+                  }}
+                  aria-label={`Supprimer ${file.name}`}
+                >
+                  <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    width='16'
+                    height='16'
+                    fill='currentColor'
+                    viewBox='0 0 16 16'
+                  >
+                    <path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z' />
+                    <path
+                      fillRule='evenodd'
+                      d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'
+                    />
+                  </svg>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {touched && error && <div className={styles.errorText}>{error}</div>}
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import styles from '../DynamicInput.module.css';
+import type { FieldMetadata } from '../../DynamicForm/tools/form-metadata';
+
+interface InputWrapperProps {
+  field: FieldMetadata;
+  children: React.ReactNode;
+  error?: string;
+  touched?: boolean;
+}
+
+export const InputWrapper: React.FC<InputWrapperProps> = ({ field, children, error, touched }) => {
+  const hasError = touched && error;
+
+  return (
+    <div className={styles.fieldGroup}>
+      {field.type !== 'checkbox' && field.type !== 'radio' && (
+        <label className={`${styles.fieldLabel} ${field.required ? styles.required : ''}`}>
+          {field.label}
+        </label>
+      )}
+      {children}
+      {hasError && <span className={styles.fieldError}>{error}</span>}
+    </div>
+  );
+};

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

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import styles from '../DynamicInput.module.css';
+import { InputWrapper } from './InputWrapper';
+
+interface RadioInputProps {
+  field: any;
+  value: any;
+  onChange: (value: any) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const RadioInput: React.FC<RadioInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  return (
+    <InputWrapper field={field} error={error} touched={touched}>
+      <div className={styles.radioGroup}>
+        {field.options?.map((option: any) => (
+          <div key={option.value} className='form-check'>
+            <input
+              type='radio'
+              className='form-check-input'
+              id={`${field.name}-${option.value}`}
+              name={field.name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={(e) => onChange(e.target.value)}
+              onBlur={onBlur}
+            />
+            <label className='form-check-label' htmlFor={`${field.name}-${option.value}`}>
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>
+    </InputWrapper>
+  );
+};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { FieldMetadata } from '../../DynamicForm/tools/form-metadata';
+import styles from './assets/RangeInput.module.css';
+
+interface RangeInputProps {
+  field: FieldMetadata;
+  value: number | string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange: (value: any) => void;
+  onBlur: () => void;
+  error?: string;
+  touched?: boolean;
+}
+
+export const RangeInput: React.FC<RangeInputProps> = ({
+  field,
+  value,
+  onChange,
+  onBlur,
+  error,
+  touched,
+}) => {
+  return (
+    <div className={`mb-3 ${styles.rangeContainer}`}>
+      <label htmlFor={field.name} className='form-label'>
+        {field.label}: {value}
+        {field.required && <span className='text-danger'> *</span>}
+      </label>
+
+      <input
+        type='range'
+        id={field.name}
+        name={field.name}
+        value={value || 0}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onBlur}
+        className={`form-range ${touched && error ? 'is-invalid' : ''}`}
+        min={field.validation?.min || 0}
+        max={field.validation?.max || 100}
+        step={field.attributes?.step || 1}
+      />
+
+      {touched && error && <div className='invalid-feedback'>{error}</div>}
+    </div>
+  );
+};

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

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