@tsiky/components-r19 1.0.0

package/src/components/DynamicForm/tools/form-metadata.ts

@@ -0,0 +1,82 @@
+/* tools/form-metadata.ts */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ComponentType } from 'react';
+
+export interface FieldOption {
+  value: string;
+  label: string;
+}
+
+export interface FieldValidation {
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  min?: number | string;
+  max?: number | string;
+  minDate?: string;
+  maxDate?: string;
+  acceptedTypes?: string;
+  maxFileSize?: number;
+}
+
+export type FieldType =
+  | 'text'
+  | 'email'
+  | 'number'
+  | 'select'
+  | 'checkbox'
+  | 'textarea'
+  | 'date'
+  | 'radio'
+  | 'file'
+  | 'month'
+  | 'week'
+  | 'time'
+  | 'datetime-local'
+  | 'color'
+  | 'range'
+  | 'url'
+  | 'password'
+  | 'section';
+
+export interface FieldMetadata {
+  disabled: boolean | undefined;
+  name: string;
+  type: FieldType;
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  options?: FieldOption[];
+  validation?: FieldValidation;
+  gridCol?: number;
+  attributes?: {
+    multiple?: boolean;
+    accept?: string;
+    step?: number | string;
+    icon?: string;
+    iconComponent?: ComponentType<any>;
+    iconPosition?: 'suffix' | 'prefix';
+    showPasswordToggle?: boolean;
+  };
+  help?: string;
+}
+
+export interface FormSchema {
+  title: string;
+  description?: string;
+  fields: FieldMetadata[];
+  submitText?: string;
+  layout?: 'grid' | 'stack';
+  columns?: number;
+  submitIcon?: string;
+  submitIconPosition?: 'left' | 'right';
+}
+
+export function getFormSchema(modelClass: any): FormSchema {
+  return {
+    title: modelClass._formTitle || 'Formulaire',
+    description: modelClass._formDescription,
+    fields: modelClass._fieldMetadata || [],
+    submitText: modelClass._submitText || 'Valider',
+  };
+}

package/src/components/DynamicForm/tools/validation.ts

@@ -0,0 +1,168 @@
+import type { FieldMetadata } from './form-metadata';
+
+export interface ValidationResult {
+  isValid: boolean;
+  error?: string;
+}
+
+function validateRequired(value: unknown, field: FieldMetadata): ValidationResult | null {
+  if (!field.required) return null;
+
+  if (field.type === 'checkbox' && !value) {
+    return { isValid: false, error: `${field.label} est requis` };
+  }
+  if (!value || (typeof value === 'string' && value.trim() === '')) {
+    return { isValid: false, error: `${field.label} est requis` };
+  }
+  return null;
+}
+
+function isEmpty(value: unknown): boolean {
+  return !value || (typeof value === 'string' && value.trim() === '');
+}
+
+function validateEmail(value: string): ValidationResult | null {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(value)) {
+    return { isValid: false, error: "Format d'email invalide" };
+  }
+  return null;
+}
+
+function validateUrl(value: string): ValidationResult | null {
+  const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
+  if (!urlRegex.test(value)) {
+    return { isValid: false, error: "Format d'URL invalide" };
+  }
+  return null;
+}
+
+function validateNumber(value: unknown, field: FieldMetadata): ValidationResult | null {
+  const numValue = Number(value);
+  if (isNaN(numValue)) {
+    return { isValid: false, error: 'Doit être un nombre valide' };
+  }
+  if (field.validation?.min !== undefined && numValue < Number(field.validation.min)) {
+    return { isValid: false, error: `Doit être ≥ ${field.validation.min}` };
+  }
+  if (field.validation?.max !== undefined && numValue > Number(field.validation.max)) {
+    return { isValid: false, error: `Doit être ≤ ${field.validation.max}` };
+  }
+  return null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function validateDate(value: any, field: FieldMetadata): ValidationResult | null {
+  if (field.validation?.minDate && new Date(value) < new Date(field.validation.minDate)) {
+    return { isValid: false, error: `Doit être après ${field.validation.minDate}` };
+  }
+  if (field.validation?.maxDate && new Date(value) > new Date(field.validation.maxDate)) {
+    return { isValid: false, error: `Doit être avant ${field.validation.maxDate}` };
+  }
+  return null;
+}
+
+function validateFile(value: File, field: FieldMetadata): ValidationResult | null {
+  if (field.validation?.acceptedTypes) {
+    const acceptedTypes = field.validation.acceptedTypes.split(',');
+    const fileType = value.type;
+    if (!acceptedTypes.some((type) => fileType.match(type.replace('*', '.*')))) {
+      return { isValid: false, error: `Type de fichier non supporté: ${fileType}` };
+    }
+  }
+  if (field.validation?.maxFileSize && value.size > field.validation.maxFileSize) {
+    const maxSizeMB = field.validation.maxFileSize / (1024 * 1024);
+    return { isValid: false, error: `Fichier trop volumineux (max ${maxSizeMB}MB)` };
+  }
+  return null;
+}
+
+function validateCommonRules(value: string, field: FieldMetadata): ValidationResult | null {
+  if (!field.validation) return null;
+
+  if (field.validation.minLength && value.length < field.validation.minLength) {
+    return { isValid: false, error: `Minimum ${field.validation.minLength} caractères` };
+  }
+  if (field.validation.maxLength && value.length > field.validation.maxLength) {
+    return { isValid: false, error: `Maximum ${field.validation.maxLength} caractères` };
+  }
+  if (field.validation.pattern) {
+    const regex = new RegExp(field.validation.pattern);
+    if (!regex.test(value)) {
+      return { isValid: false, error: 'Format invalide' };
+    }
+  }
+  return null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function validateField(value: any, field: FieldMetadata): ValidationResult {
+  // Validation obligatoire
+  const requiredCheck = validateRequired(value, field);
+  if (requiredCheck) return requiredCheck;
+
+  // Si vide et non requis => valide
+  if (isEmpty(value)) return { isValid: true };
+
+  const stringValue = value.toString();
+
+  // Validation selon type
+  switch (field.type) {
+    case 'email': {
+      const res = validateEmail(stringValue);
+      if (res) return res;
+      break;
+    }
+    case 'url': {
+      const res = validateUrl(stringValue);
+      if (res) return res;
+      break;
+    }
+    case 'number': {
+      const res = validateNumber(value, field);
+      if (res) return res;
+      break;
+    }
+    case 'date':
+    case 'month':
+    case 'week':
+    case 'time':
+    case 'datetime-local': {
+      const res = validateDate(value, field);
+      if (res) return res;
+      break;
+    }
+    case 'file': {
+      const res = validateFile(value as File, field);
+      if (res) return res;
+      break;
+    }
+  }
+
+  // Validation commune
+  const commonCheck = validateCommonRules(stringValue, field);
+  if (commonCheck) return commonCheck;
+
+  return { isValid: true };
+}
+
+export function validateForm(
+  data: Record<string, unknown>,
+  fields: FieldMetadata[]
+): {
+  isValid: boolean;
+  errors: Record<string, string>;
+} {
+  const errors: Record<string, string> = {};
+  let isValid = true;
+
+  for (const field of fields) {
+    const result = validateField(data[field.name], field);
+    if (!result.isValid) {
+      errors[field.name] = result.error!;
+      isValid = false;
+    }
+  }
+
+  return { isValid, errors };
+}

package/src/components/DynamicInput/DynamicInput.module.css

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

package/src/components/DynamicInput/DynamicInput.stories.ts

@@ -0,0 +1,350 @@
+import React, { useState } from 'react';
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { DynamicInput } from './DynamicInput';
+import type { FieldMetadata, FieldType } from '../DynamicForm/tools/form-metadata';
+
+const meta: Meta<typeof DynamicInput> = {
+  title: 'Components/DynamicInput',
+  component: DynamicInput,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    error: {
+      control: 'text',
+      description: 'Error message to display',
+    },
+    touched: {
+      control: 'boolean',
+      description: 'Whether the field has been touched',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DynamicInput>;
+
+// Wrapper component pour gérer l'état
+const DynamicInputWrapper: React.FC<{
+  field: FieldMetadata;
+  error?: string;
+  touched?: boolean;
+}> = (args) => {
+  const [value, setValue] = useState<unknown>('');
+
+  return React.createElement(
+    'div',
+    { style: { maxWidth: '400px' } },
+    React.createElement(DynamicInput, {
+      field: args.field,
+      value: value,
+      onChange: setValue,
+      onBlur: () => console.log('Blurred'),
+      error: args.error,
+      touched: args.touched,
+    })
+  );
+};
+
+// Helper function pour créer des fields avec toutes les propriétés requises
+const createField = (
+  overrides: Partial<FieldMetadata> & { name: string; type: FieldType; label: string }
+): FieldMetadata => ({
+  disabled: false,
+  required: false,
+  placeholder: '',
+  options: [],
+  validation: {},
+  attributes: {},
+  ...overrides,
+});
+
+// Stories pour les différents types de champs
+export const Text: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'text',
+        name: 'textField',
+        label: 'Text Input',
+        placeholder: 'Entrez votre texte',
+      }),
+    }),
+};
+
+export const Textarea: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'textarea',
+        name: 'textareaField',
+        label: 'Textarea Input',
+        placeholder: 'Entrez votre texte long',
+      }),
+    }),
+};
+
+export const Select: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'select',
+        name: 'selectField',
+        label: 'Select Input',
+        options: [
+          { value: 'opt1', label: 'Option 1' },
+          { value: 'opt2', label: 'Option 2' },
+          { value: 'opt3', label: 'Option 3' },
+        ],
+      }),
+    }),
+};
+
+export const Checkbox: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'checkbox',
+        name: 'checkboxField',
+        label: 'Checkbox Input',
+      }),
+    }),
+};
+
+export const Radio: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'radio',
+        name: 'radioField',
+        label: 'Radio Input',
+        options: [
+          { value: 'opt1', label: 'Option 1' },
+          { value: 'opt2', label: 'Option 2' },
+        ],
+      }),
+    }),
+};
+
+export const File: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'file',
+        name: 'fileField',
+        label: 'File Input',
+      }),
+    }),
+};
+
+export const DateInput: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'date',
+        name: 'dateField',
+        label: 'Date Input',
+      }),
+    }),
+};
+
+export const DateTimeLocal: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'datetime-local',
+        name: 'datetimeField',
+        label: 'Date & Time Input',
+      }),
+    }),
+};
+
+export const Time: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'time',
+        name: 'timeField',
+        label: 'Time Input',
+      }),
+    }),
+};
+
+export const Month: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'month',
+        name: 'monthField',
+        label: 'Month Input',
+      }),
+    }),
+};
+
+export const Week: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'week',
+        name: 'weekField',
+        label: 'Week Input',
+      }),
+    }),
+};
+
+export const Range: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'range',
+        name: 'rangeField',
+        label: 'Range Input',
+        validation: { min: 0, max: 100 },
+      }),
+    }),
+};
+
+export const Color: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'color',
+        name: 'colorField',
+        label: 'Color Input',
+      }),
+    }),
+};
+
+// Story avec état d'erreur
+export const WithError: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'text',
+        name: 'errorField',
+        label: 'Input avec erreur',
+      }),
+      error: 'Ce champ est requis',
+      touched: true,
+    }),
+};
+
+// Story avec état requis
+export const Required: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'text',
+        name: 'requiredField',
+        label: 'Input requis',
+        required: true,
+      }),
+    }),
+};
+
+// Story avec champ désactivé
+export const Disabled: Story = {
+  render: (args) =>
+    React.createElement(DynamicInputWrapper, {
+      ...args,
+      field: createField({
+        type: 'text',
+        name: 'disabledField',
+        label: 'Input désactivé',
+        disabled: true,
+      }),
+    }),
+};
+
+// Story avec plusieurs champs pour démontrer différents types
+export const AllInputs: Story = {
+  render: () => {
+    const [values, setValues] = useState<Record<string, unknown>>({});
+
+    const handleChange = (fieldName: string, value: unknown) => {
+      setValues((prev) => ({ ...prev, [fieldName]: value }));
+    };
+
+    const fields = [
+      createField({
+        type: 'text',
+        name: 'textField',
+        label: 'Text Input',
+        placeholder: 'Entrez votre texte',
+      }),
+      createField({
+        type: 'textarea',
+        name: 'textareaField',
+        label: 'Textarea Input',
+        placeholder: 'Entrez votre texte long',
+      }),
+      createField({
+        type: 'select',
+        name: 'selectField',
+        label: 'Select Input',
+        options: [
+          { value: 'opt1', label: 'Option 1' },
+          { value: 'opt2', label: 'Option 2' },
+          { value: 'opt3', label: 'Option 3' },
+        ],
+      }),
+      createField({
+        type: 'date',
+        name: 'dateField',
+        label: 'Date Input',
+      }),
+      createField({
+        type: 'datetime-local',
+        name: 'datetimeField',
+        label: 'Date & Time Input',
+      }),
+      createField({
+        type: 'color',
+        name: 'colorField',
+        label: 'Color Input',
+      }),
+      createField({
+        type: 'range',
+        name: 'rangeField',
+        label: 'Range Input',
+        validation: { min: 0, max: 100 },
+      }),
+    ];
+
+    return React.createElement(
+      'div',
+      { style: { display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '400px' } },
+      ...fields.map((field) =>
+        React.createElement(
+          'div',
+          { key: field.name },
+          React.createElement(DynamicInput, {
+            field: field,
+            value: values[field.name] || '',
+            onChange: (value) => handleChange(field.name, value),
+            onBlur: () => console.log('Blurred'),
+            error: undefined,
+            touched: false,
+          })
+        )
+      )
+    );
+  },
+};