@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/DynamicForm/DynamicFom.stories.ts

@@ -1,773 +0,0 @@
-/* DynamicForm.stories.tsx */
-import React, { useState } from 'react';
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/react';
-import { DynamicForm } from './DynamicForm';
-import type { FormSchema } from './tools/form-metadata';
-
-const meta: Meta<typeof DynamicForm> = {
-  title: 'Components/DynamicForm',
-  component: DynamicForm,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    submitLabel: {
-      control: 'text',
-      description: 'Texte personnalisé pour le bouton de soumission',
-    },
-    submitIcon: {
-      control: 'text',
-      description: 'Nom de l\'icône lucide-react (ex: "Send", "Check", "Save")',
-    },
-    submitIconPosition: {
-      control: { type: 'inline-radio', options: ['left', 'right'] },
-      description: "Position de l'icône sur le bouton (left | right)",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DynamicForm>;
-
-// Helper pour créer des schémas de formulaire
-const createSchema = (overrides: Partial<FormSchema>): FormSchema => ({
-  title: 'Formulaire Dynamique',
-  description: 'Un formulaire générique avec validation',
-  submitText: 'Soumettre',
-  fields: [],
-  ...overrides,
-});
-
-// Wrapper component pour gérer l'état et les soumissions
-const DynamicFormWrapper: React.FC<{
-  schema: FormSchema;
-  initialData?: Record<string, unknown>;
-  submitLabel?: string;
-  submitIcon?: string;
-  submitIconPosition?: 'left' | 'right';
-  onCancel?: () => void;
-  cancelLabel?: string;
-  cancelIcon?: string;
-}> = (args) => {
-  const [submittedData, setSubmittedData] = useState<Record<string, unknown> | null>(null);
-
-  const handleSubmit = (data: Record<string, unknown>) => {
-    // Dans la story on log et on affiche les données soumises
-    // Replacez par votre logique (API call, etc.) dans l'app réelle
-
-    console.log('Données soumises:', data);
-    setSubmittedData(data);
-    return Promise.resolve();
-  };
-
-  return React.createElement(
-    'div',
-    { style: { maxWidth: '900px', margin: '0 auto' } },
-    React.createElement(DynamicForm, {
-      schema: args.schema,
-      initialData: args.initialData,
-      onSubmit: handleSubmit,
-      submitLabel: args.submitLabel,
-      submitIcon: args.submitIcon,
-      submitIconPosition: args.submitIconPosition,
-      onCancel: args.onCancel,
-      cancelLabel: args.cancelLabel,
-      cancelIcon: args.cancelIcon,
-    }),
-    submittedData &&
-      React.createElement(
-        'div',
-        { style: { marginTop: '2rem', padding: '1rem', background: '#f8f9fa', borderRadius: 8 } },
-        React.createElement('h3', null, 'Données soumises:'),
-        React.createElement('pre', null, JSON.stringify(submittedData, null, 2))
-      )
-  );
-};
-
-/* ===========================
-   STORIES SANS GRID (STACK)
-   =========================== */
-
-/** Contact simple (avec icône Send à gauche) */
-export const ContactForm: Story = {
-  render: () =>
-    React.createElement(DynamicFormWrapper, {
-      schema: createSchema({
-        title: 'Formulaire de Contact',
-        description: 'Entrez vos informations pour nous contacter',
-        fields: [
-          {
-            type: 'text',
-            name: 'firstName',
-            label: 'Prénom',
-            required: true,
-            placeholder: 'Votre prénom',
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'lastName',
-            label: 'Nom',
-            required: true,
-            placeholder: 'Votre nom',
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'email',
-            name: 'email',
-            label: 'Email',
-            required: true,
-            placeholder: 'votre@email.com',
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'textarea',
-            name: 'message',
-            label: 'Message',
-            required: true,
-            placeholder: 'Votre message...',
-            gridCol: 12,
-            disabled: undefined,
-          },
-        ],
-      }),
-      submitLabel: 'Envoyer',
-      submitIcon: 'Send',
-      submitIconPosition: 'left',
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `<DynamicForm
-  schema={createSchema({
-    title: 'Formulaire de Contact',
-    fields: [
-      { type: 'text', name: 'firstName', label: 'Prénom', required: true },
-      { type: 'text', name: 'lastName', label: 'Nom', required: true },
-      { type: 'email', name: 'email', label: 'Email', required: true },
-      { type: 'textarea', name: 'message', label: 'Message', required: true },
-    ],
-  })}
-  submitLabel="Envoyer"
-  submitIcon="Send"
-  submitIconPosition="left"
-/>`,
-      },
-    },
-  },
-};
-
-/** Inscription (sans icône) */
-export const RegistrationForm: Story = {
-  render: () =>
-    React.createElement(DynamicFormWrapper, {
-      schema: createSchema({
-        title: 'Inscription',
-        description: 'Créez votre compte',
-        fields: [
-          {
-            type: 'text',
-            name: 'username',
-            label: "Nom d'utilisateur",
-            required: true,
-            placeholder: 'Choisissez un nom utilisateur',
-            validation: { minLength: 3 },
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'password',
-            name: 'password',
-            label: 'Mot de passe',
-            required: true,
-            placeholder: 'Créez un mot de passe',
-            validation: { minLength: 6 },
-            attributes: { showPasswordToggle: true },
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'select',
-            name: 'gender',
-            label: 'Genre',
-            options: [
-              { value: '', label: 'Sélectionnez' },
-              { value: 'male', label: 'Homme' },
-              { value: 'female', label: 'Femme' },
-              { value: 'other', label: 'Autre' },
-            ],
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'date',
-            name: 'birthdate',
-            label: 'Date de naissance',
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'checkbox',
-            name: 'newsletter',
-            label: "S'abonner à la newsletter",
-            gridCol: 12,
-            disabled: undefined,
-          },
-        ],
-      }),
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `<DynamicForm
-  schema={createSchema({
-    title: 'Inscription',
-    fields: [
-      { type: 'text', name: 'username', label: "Nom d'utilisateur", required: true },
-      { type: 'password', name: 'password', label: 'Mot de passe', required: true, attributes: { showPasswordToggle: true } },
-      { type: 'select', name: 'gender', label: 'Genre', options: [{ value:'', label:'Sélectionnez' }, { value:'male', label:'Homme' }] },
-      { type: 'date', name: 'birthdate', label: 'Date de naissance' },
-      { type: 'checkbox', name: 'newsletter', label: "S'abonner à la newsletter" },
-    ]
-  })}
-/>`,
-      },
-    },
-  },
-};
-
-/* ===========================
-   STORIES AVEC GRID
-   =========================== */
-
-/** Grid simple 2 colonnes (avec icône Check à droite) */
-export const GridTwoColumns: Story = {
-  render: () =>
-    React.createElement(DynamicFormWrapper, {
-      schema: createSchema({
-        title: 'Formulaire (Grid 2 colonnes)',
-        description: 'Exemple avec layout grid et 2 colonnes par ligne.',
-        layout: 'grid',
-        columns: 12,
-        fields: [
-          {
-            type: 'text',
-            name: 'firstName',
-            label: 'Prénom',
-            gridCol: 6,
-            placeholder: 'Prénom',
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'lastName',
-            label: 'Nom',
-            gridCol: 6,
-            placeholder: 'Nom',
-            disabled: undefined,
-          },
-          {
-            type: 'email',
-            name: 'email',
-            label: 'Email',
-            gridCol: 6,
-            placeholder: 'email@example.com',
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'phone',
-            label: 'Téléphone',
-            gridCol: 6,
-            placeholder: '+33 ...',
-            disabled: undefined,
-          },
-          {
-            type: 'select',
-            name: 'country',
-            label: 'Pays',
-            gridCol: 4,
-            options: [
-              { value: '', label: 'Sélectionner' },
-              { value: 'fr', label: 'France' },
-              { value: 'mg', label: 'Madagascar' },
-            ],
-            disabled: undefined,
-          },
-          {
-            type: 'date',
-            name: 'start',
-            label: 'Date de début',
-            gridCol: 4,
-            disabled: undefined,
-          },
-          {
-            type: 'date',
-            name: 'end',
-            label: 'Date de fin',
-            gridCol: 4,
-            disabled: undefined,
-          },
-        ],
-      }),
-      submitLabel: 'Terminer',
-      submitIcon: 'Check',
-      submitIconPosition: 'right',
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `<DynamicForm
-  schema={createSchema({
-    title: 'Formulaire (Grid 2 colonnes)',
-    layout: 'grid',
-    columns: 12,
-    fields: [
-      { type: 'text', name: 'firstName', gridCol: 6 },
-      { type: 'text', name: 'lastName', gridCol: 6 },
-      { type: 'email', name: 'email', gridCol: 6 },
-      { type: 'text', name: 'phone', gridCol: 6 },
-      { type: 'select', name: 'country', gridCol: 4, options: [{ value:'', label:'Sélectionner' }, { value:'fr', label:'France' }] },
-      { type: 'date', name: 'start', gridCol: 4 },
-      { type: 'date', name: 'end', gridCol: 4 },
-    ],
-  })}
-  submitLabel="Terminer"
-  submitIcon="Check"
-  submitIconPosition="right"
-/>`,
-      },
-    },
-  },
-};
-
-/** Grid mixte — sans icône (ex. champs larges + petits) */
-export const GridMixed: Story = {
-  render: () =>
-    React.createElement(DynamicFormWrapper, {
-      schema: createSchema({
-        title: 'Formulaire (Grid mixte)',
-        description: 'Exemple mélangeant champs pleine largeur et colonnes partagées.',
-        layout: 'grid',
-        columns: 12,
-        fields: [
-          {
-            type: 'section',
-            name: 'sec_personal',
-            label: 'Informations personnelles',
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'company',
-            label: 'Entreprise',
-            gridCol: 12,
-            placeholder: 'Nom de l’entreprise',
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'jobTitle',
-            label: 'Poste',
-            gridCol: 6,
-            placeholder: 'Poste',
-            disabled: undefined,
-          },
-          {
-            type: 'number',
-            name: 'teamSize',
-            label: 'Taille de l’équipe',
-            gridCol: 6,
-            placeholder: 'Nombre',
-            disabled: undefined,
-          },
-
-          {
-            type: 'section',
-            name: 'sec_address',
-            label: 'Adresse',
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'street',
-            label: 'Rue',
-            gridCol: 8,
-            placeholder: 'Rue et numéro',
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'zip',
-            label: 'Code postal',
-            gridCol: 4,
-            placeholder: 'Code postal',
-            disabled: undefined,
-          },
-
-          {
-            type: 'section',
-            name: 'sec_notes',
-            label: 'Notes',
-            disabled: undefined,
-          },
-          {
-            type: 'textarea',
-            name: 'notes',
-            label: 'Notes',
-            gridCol: 12,
-            placeholder: 'Informations supplémentaires...',
-            disabled: undefined,
-          },
-        ],
-      }),
-      // pas d'icône
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `<DynamicForm
-  schema={createSchema({
-    title: 'Formulaire (Grid mixte)',
-    layout: 'grid',
-    columns: 12,
-    fields: [
-      { type: 'section', name: 'sec_personal', label: 'Informations personnelles' },
-      { type: 'text', name: 'company', gridCol: 12 },
-      { type: 'text', name: 'jobTitle', gridCol: 6 },
-      { type: 'number', name: 'teamSize', gridCol: 6 },
-      { type: 'section', name: 'sec_address', label: 'Adresse' },
-      { type: 'text', name: 'street', gridCol: 8 },
-      { type: 'text', name: 'zip', gridCol: 4 },
-      { type: 'section', name: 'sec_notes', label: 'Notes' },
-      { type: 'textarea', name: 'notes', gridCol: 12 },
-    ]
-  })}
-/>`,
-      },
-    },
-  },
-};
-
-/** Account Settings — avec icône Save (à gauche) */
-export const AccountSettings: Story = {
-  render: () =>
-    React.createElement(DynamicFormWrapper, {
-      schema: createSchema({
-        title: 'Informations du compte',
-        description: '',
-        submitText: 'Valider',
-        layout: 'grid',
-        columns: 12,
-        fields: [
-          {
-            type: 'section',
-            name: 'sec_account',
-            label: 'Informations du compte',
-            disabled: undefined,
-          },
-          {
-            type: 'email',
-            name: 'email',
-            label: 'Adresse e-mail',
-            placeholder: 'tsiky@appy.solutions',
-            required: true,
-            gridCol: 12,
-            disabled: true,
-            attributes: { icon: 'Mail', iconPosition: 'prefix' },
-          },
-
-          {
-            type: 'section',
-            name: 'sec_password',
-            label: 'Changer le mot de passe',
-            disabled: undefined,
-          },
-          {
-            type: 'password',
-            name: 'password',
-            label: 'Entrez Votre Nouveau mot de passe',
-            placeholder: 'Mot de passe',
-            gridCol: 6,
-            validation: { minLength: 6 },
-            attributes: { icon: 'Lock', showPasswordToggle: true },
-            disabled: undefined,
-          },
-          {
-            type: 'password',
-            name: 'confirmPassword',
-            label: 'Confirmer nouveau mot de passe',
-            placeholder: 'Confirmer nouveau mot de passe',
-            gridCol: 6,
-            attributes: { icon: 'Lock' },
-            disabled: undefined,
-          },
-
-          {
-            type: 'section',
-            name: 'sec_pref',
-            label: 'Préférences',
-            disabled: undefined,
-          },
-          {
-            type: 'select',
-            name: 'defaultScreen',
-            label: 'Ecran par défaut',
-            placeholder: 'Sélectionnez un écran par défaut',
-            gridCol: 6,
-            options: [
-              { value: 'dashboard', label: 'Tableau de bord' },
-              { value: 'films', label: 'Films' },
-            ],
-            attributes: { icon: 'Monitor' },
-            disabled: undefined,
-          },
-          {
-            type: 'select',
-            name: 'language',
-            label: 'Langue',
-            placeholder: 'Français',
-            gridCol: 6,
-            options: [
-              { value: 'fr', label: 'Français' },
-              { value: 'en', label: 'English' },
-            ],
-            attributes: { icon: 'Globe' },
-            disabled: undefined,
-          },
-        ],
-      }),
-      initialData: { email: 'tsiky@appy.solutions' },
-      submitLabel: 'Valider',
-      submitIcon: 'Save',
-      submitIconPosition: 'left',
-      onCancel: () => console.log('Retour'),
-      cancelLabel: 'Retour',
-      cancelIcon: 'ChevronLeft',
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `<DynamicForm
-  schema={createSchema({
-    title: 'Informations du compte',
-    layout: 'grid',
-    columns: 12,
-    fields: [
-      { type: 'email', name: 'email', gridCol: 12, disabled: true, attributes: { icon: 'Mail' } },
-      { type: 'password', name: 'password', gridCol: 6, attributes: { icon: 'Lock', showPasswordToggle: true } },
-      { type: 'password', name: 'confirmPassword', gridCol: 6, attributes: { icon: 'Lock' } },
-      { type: 'select', name: 'defaultScreen', gridCol: 6, attributes: { icon: 'Monitor' } },
-      { type: 'select', name: 'language', gridCol: 6, attributes: { icon: 'Globe' } },
-    ]
-  })}
-  initialData={{ email: 'tsiky@appy.solutions' }}
-  submitLabel="Valider"
-  submitIcon="Save"
-  submitIconPosition="left"
-  onCancel={() => {}}
-  cancelLabel="Retour"
-  cancelIcon="ChevronLeft"
-/>`,
-      },
-    },
-  },
-};
-
-/* ===========================
-   STORIES UTILES / DIVERS
-   =========================== */
-
-/** WithInitialData: montre l'édition avec valeurs initiales (sans icône) */
-export const WithInitialData: Story = {
-  render: () =>
-    React.createElement(DynamicFormWrapper, {
-      initialData: {
-        firstName: 'Jean',
-        lastName: 'Dupont',
-        email: 'jean.dupont@example.com',
-        newsletter: true,
-      },
-      schema: createSchema({
-        title: 'Modification de profil',
-        fields: [
-          {
-            type: 'text',
-            name: 'firstName',
-            label: 'Prénom',
-            required: true,
-            gridCol: 6,
-            disabled: undefined,
-          },
-          {
-            type: 'text',
-            name: 'lastName',
-            label: 'Nom',
-            required: true,
-            gridCol: 6,
-            disabled: undefined,
-          },
-          {
-            type: 'email',
-            name: 'email',
-            label: 'Email',
-            required: true,
-            gridCol: 12,
-            disabled: undefined,
-          },
-          {
-            type: 'checkbox',
-            name: 'newsletter',
-            label: 'Recevoir les newsletters',
-            gridCol: 12,
-            disabled: undefined,
-          },
-        ],
-      }),
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `<DynamicForm
-  schema={createSchema({
-    title: 'Modification de profil',
-    fields: [
-      { type: 'text', name: 'firstName', gridCol: 6 },
-      { type: 'text', name: 'lastName', gridCol: 6 },
-      { type: 'email', name: 'email', gridCol: 12 },
-      { type: 'checkbox', name: 'newsletter', gridCol: 12 },
-    ],
-  })}
-  initialData={{ firstName: 'Jean', lastName: 'Dupont', email: 'jean.dupont@example.com' }}
-/>`,
-      },
-    },
-  },
-};
-
-/** AllFieldTypes: montrer tous les types (avec icône Paperclip à droite) */
-export const AllFieldTypes: Story = {
-  render: () =>
-    React.createElement(DynamicFormWrapper, {
-      schema: createSchema({
-        title: 'Tous les Types de Champs',
-        description: 'Démonstration de tous les types de champs disponibles',
-        fields: [
-          {
-            type: 'text',
-            name: 'textField',
-            label: 'Texte',
-            placeholder: 'Champ texte simple',
-            disabled: undefined,
-          },
-          {
-            type: 'textarea',
-            name: 'textareaField',
-            label: 'Zone de texte',
-            placeholder: 'Texte long...',
-            disabled: undefined,
-          },
-          {
-            type: 'email',
-            name: 'emailField',
-            label: 'Email',
-            placeholder: 'email@example.com',
-            disabled: undefined,
-          },
-          {
-            type: 'password',
-            name: 'passwordField',
-            label: 'Mot de passe',
-            disabled: undefined,
-          },
-          {
-            type: 'number',
-            name: 'numberField',
-            label: 'Nombre',
-            placeholder: '0',
-            disabled: undefined,
-          },
-          {
-            type: 'select',
-            name: 'selectField',
-            label: 'Sélection',
-            options: [
-              { value: '', label: 'Sélectionner' },
-              { value: 'opt1', label: 'Option 1' },
-              { value: 'opt2', label: 'Option 2' },
-            ],
-            disabled: undefined,
-          },
-          {
-            type: 'checkbox',
-            name: 'checkboxField',
-            label: 'Case à cocher',
-            disabled: undefined,
-          },
-          {
-            type: 'radio',
-            name: 'radioField',
-            label: 'Boutons radio',
-            options: [
-              { value: 'radio1', label: 'Choix 1' },
-              { value: 'radio2', label: 'Choix 2' },
-            ],
-            disabled: undefined,
-          },
-          {
-            type: 'date',
-            name: 'dateField',
-            label: 'Date',
-            disabled: undefined,
-          },
-          {
-            type: 'datetime-local',
-            name: 'datetimeField',
-            label: 'Date et Heure',
-            disabled: undefined,
-          },
-          {
-            type: 'file',
-            name: 'fileField',
-            label: 'Fichier',
-            disabled: undefined,
-          },
-        ],
-      }),
-      submitLabel: 'Envoyer fichiers',
-      submitIcon: 'Paperclip',
-      submitIconPosition: 'right',
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `<DynamicForm
-  schema={createSchema({
-    title: 'Tous les Types de Champs',
-    fields: [
-      { type: 'text', name: 'textField' },
-      { type: 'textarea', name: 'textareaField' },
-      { type: 'email', name: 'emailField' },
-      { type: 'password', name: 'passwordField' },
-      { type: 'number', name: 'numberField' },
-      { type: 'select', name: 'selectField', options: [{ value:'', label:'Sélectionner' }, { value:'opt1', label:'Option 1' }] },
-      { type: 'checkbox', name: 'checkboxField' },
-      { type: 'radio', name: 'radioField', options: [{ value:'radio1', label:'Choix 1' }] },
-      { type: 'date', name: 'dateField' },
-      { type: 'datetime-local', name: 'datetimeField' },
-      { type: 'file', name: 'fileField' },
-    ],
-  })}
-  submitLabel="Envoyer fichiers"
-  submitIcon="Paperclip"
-  submitIconPosition="right"
-/>`,
-      },
-    },
-  },
-};