@tsiky/components-r19 1.3.0 → 1.3.1

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

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

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

@@ -1,125 +0,0 @@
-/* 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/DynamicInput.stories.ts

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