@tsiky/components-r19 1.0.0

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

@@ -0,0 +1,773 @@
+/* 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"
+/>`,
+      },
+    },
+  },
+};