@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/DynamicInput/DynamicInput.tsx

@@ -1,144 +0,0 @@
-/* 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/input/CheckboxInput.tsx

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

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

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

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

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

@@ -1,46 +0,0 @@
-/* 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

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

@@ -1,75 +0,0 @@
-/* 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>
-  );
-};