@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/DynamicTable/TableauDynamic.stories.ts

@@ -1,1014 +0,0 @@
-import React, { useState } from 'react';
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/react';
-import TableauDynamique from './TableauDynamique';
-import type { TableColumn, TableRowData } from './tools/tableTypes';
-import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
-import {
-  User,
-  Mail,
-  Calendar,
-  Banknote,
-  LogIn,
-  Clock,
-  Stethoscope,
-  Microscope,
-  Image,
-  FileText,
-  MessageCircle,
-  LogOut,
-} from 'lucide-react';
-
-/**
- * Extrait TSX principal (affiché dans "Show code") — prêt à copier/coller
- * Contient une demo multi-tables + démonstrations de executeOnApply / fonctions-as-value
- */
-const exampleUsage = `import React, { useState } from 'react';
-import TableauDynamique from './TableauDynamique';
-import type { TableColumn, TableRowData } from './tools/tableTypes';
-import type { FilterConfig } from './tools/filterTypes';
-
-/* Données d'exemple */
-const data = [
-  { id: 'u1', data: { name: 'Alice Martin', email: 'alice@example.com', age: 34, status: 'Actif', balance: 1234.56, joinDate: '2022-01-12' } },
-  { id: 'u2', data: { name: 'Bob Durand', email: 'bob@example.com', age: 28, status: 'Inactif', balance: 0, joinDate: '2023-08-05' } },
-];
-
-/* Colonnes d'exemple */
-const columns = [
-  { id: 'name', label: 'Nom' },
-  { id: 'email', label: 'Email' },
-  { id: 'age', label: 'Âge' },
-  { id: 'status', label: 'Statut' },
-  { id: 'balance', label: 'Solde' },
-  { id: 'joinDate', label: 'Date d\\'inscription' },
-];
-
-/* Exemple 1 — executeOnApply (appelle "backend" asynchrone au moment d'Appliquer) */
-const executeOnApplyFilterConfig = [
-  {
-    id: 'customerLookup',
-    type: 'text',
-    label: 'Client (recherche enrichie)',
-    placeholder: 'Tapez un nom puis Appliquer...',
-    // simulate API lookup on apply
-    executeOnApply: async (value) => {
-      if (!value) return value;
-      // simulation d'appel backend
-      await new Promise((r) => setTimeout(r, 700));
-      // retourne un id "résolu" depuis la saisie
-      return { resolvedCustomerId: 'c-' + String(value).toLowerCase().replace(/\\s+/g, '-') };
-    },
-  },
-];
-
-/* Exemple 2 — valeur par défaut fournie comme fonction async
-   (useFilters initialise tempFilters avec defaultValue et apply() l'exécute)
-*/
-const functionValueFilterConfig = [
-  {
-    id: 'autoIds',
-    type: 'multiselect',
-    label: 'IDs dynamiques',
-    // defaultValue est une fonction async — lorsqu'on cliquera Appliquer, la fonction sera exécutée
-    defaultValue: async (tempFilters) => {
-      // peut utiliser tempFilters pour décider du résultat
-      await new Promise((r) => setTimeout(r, 600));
-      return ['id-42', 'id-99'];
-    },
-  },
-];
-
-export default function DemoExecuteExamples() {
-  const [applied, setApplied] = useState([]);
-
-  return (
-    <div style={{ padding: 16, display: 'grid', gap: 24 }}>
-      <section>
-        <h4>executeOnApply (exécution back-end au moment d'Appliquer)</h4>
-        <TableauDynamique
-          columns={columns}
-          data={data}
-          filterConfig={executeOnApplyFilterConfig}
-          filterable
-          columnFilterable
-          filtersControlled={false}
-          onApplyFilters={(filters) => {
-            console.log('Filters applied (executeOnApply):', filters);
-            setApplied(filters);
-          }}
-          pagination={{ pageSize: 5, currentPage: 1 }}
-        />
-      </section>
-
-      <section>
-        <h4>defaultValue as function (valeur fournie par fonction async)</h4>
-        <TableauDynamique
-          columns={columns}
-          data={data}
-          filterConfig={functionValueFilterConfig}
-          filterable
-          columnFilterable
-          filtersControlled={false}
-          onApplyFilters={(filters) => {
-            console.log('Filters applied (function defaultValue):', filters);
-          }}
-          pagination={{ pageSize: 5, currentPage: 1 }}
-        />
-      </section>
-    </div>
-  );
-}
-`;
-
-/* -----------------------
-   Meta & configuration
-   ----------------------- */
-const meta: Meta<typeof TableauDynamique> = {
-  title: 'Components/TableauDynamique',
-  component: TableauDynamique,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      source: {
-        language: 'tsx',
-        code: exampleUsage,
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    filterable: { control: 'boolean' },
-    columnFilterable: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof TableauDynamique>;
-
-/* -----------------------
-   Helpers & données (identiques à ce que tu avais)
-   ----------------------- */
-const createData = (count: number): TableRowData[] =>
-  Array.from({ length: count }, (_, i) => ({
-    id: `id-${i}`,
-    data: {
-      name: `Utilisateur ${i + 1}`,
-      email: `user${i + 1}@example.com`,
-      age: Math.floor(Math.random() * 50) + 18,
-      status: i % 3 === 0 ? 'Actif' : i % 3 === 1 ? 'Inactif' : 'En attente',
-      balance: Math.round(Math.random() * 10000) / 100,
-      joinDate: new Date(Date.now() - Math.random() * 1e10).toISOString().split('T')[0],
-    },
-  }));
-
-const renderStatusBadge = (value: unknown) => {
-  const status = (value ?? '').toString();
-  const baseStyle: React.CSSProperties = {
-    display: 'inline-block',
-    padding: '4px 8px',
-    borderRadius: 999,
-    fontSize: '12px',
-    fontWeight: 700,
-    minWidth: '72px',
-    textAlign: 'center',
-    boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
-  };
-
-  let style: React.CSSProperties = {};
-  switch (status) {
-    case 'Actif':
-      style = { background: 'linear-gradient(135deg,#10b981,#059669)', color: '#fff' };
-      break;
-    case 'Inactif':
-      style = { background: 'linear-gradient(135deg,#ef4444,#dc2626)', color: '#fff' };
-      break;
-    case 'En attente':
-      style = { background: 'linear-gradient(135deg,#f59e0b,#f97316)', color: '#fff' };
-      break;
-    default:
-      style = { background: '#e5e7eb', color: '#374151' };
-  }
-
-  return React.createElement('span', { style: { ...baseStyle, ...style } }, status || '--');
-};
-
-const StepCell = ({
-  icon: Icon,
-  time,
-  variant,
-}: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  icon: any;
-  time?: string;
-  variant?: string;
-  noLeft?: boolean;
-  noRight?: boolean;
-}) => {
-  const getVariantStyle = () => {
-    switch (variant) {
-      case 'admissions':
-        return { background: 'linear-gradient(135deg,#2ecc71,#28a745)', color: '#fff' };
-      case 'tri':
-        return { background: 'linear-gradient(135deg,#f6d365,#fda085)', color: '#fff' };
-      case 'examen':
-        return { background: 'linear-gradient(135deg,#6f86ff,#8b5cf6)', color: '#fff' };
-      case 'labo':
-        return { background: 'linear-gradient(135deg,#7dd3fc,#38bdf8)', color: '#fff' };
-      case 'radio':
-        return { background: 'linear-gradient(135deg,#ffb86b,#ff7a59)', color: '#fff' };
-      case 'diag':
-        return { background: 'linear-gradient(135deg,#ffd6a5,#ffadad)', color: '#fff' };
-      case 'sortie':
-        return { background: 'linear-gradient(135deg,#94d82d,#51cf66)', color: '#fff' };
-      default:
-        return { background: '#e5e7eb', color: '#374151' };
-    }
-  };
-
-  return React.createElement(
-    'div',
-    {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '6px',
-        minWidth: '60px',
-        whiteSpace: 'nowrap',
-        position: 'relative',
-      },
-    },
-    React.createElement(
-      'div',
-      {
-        style: {
-          width: '40px',
-          height: '40px',
-          borderRadius: '50%',
-          display: 'grid',
-          placeItems: 'center',
-          fontSize: '18px',
-          boxShadow: '0 3px 8px rgba(15, 23, 42, 0.06)',
-          position: 'relative',
-          zIndex: 2,
-          ...getVariantStyle(),
-        },
-      },
-      React.createElement(Icon, { 'aria-hidden': 'true' })
-    ),
-    React.createElement(
-      'div',
-      { style: { fontSize: '12px', color: '#1370a6', fontWeight: '600' } },
-      time || '--:--'
-    )
-  );
-};
-
-const basicColumns: TableColumn<unknown>[] = [
-  { id: 'name', label: 'Nom', width: 200, sortable: true },
-  { id: 'email', label: 'Email', width: 250, sortable: true },
-  { id: 'age', label: 'Âge', width: 100, sortable: true, align: 'center' },
-  {
-    id: 'status',
-    label: 'Statut',
-    width: 120,
-    sortable: true,
-    render: (value: unknown) => renderStatusBadge(value),
-  },
-  {
-    id: 'balance',
-    label: 'Solde',
-    width: 120,
-    sortable: true,
-    align: 'right',
-    type: 'currency',
-    render: (value: unknown) =>
-      React.createElement(
-        'div',
-        { style: { textAlign: 'right' } },
-        new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(Number(value))
-      ),
-  },
-  { id: 'joinDate', label: "Date d'inscription", width: 150, sortable: true, type: 'date' },
-];
-
-const iconColumns: TableColumn<unknown>[] = [
-  {
-    id: 'name',
-    label: 'Nom',
-    width: 200,
-    sortable: true,
-    render: (value) =>
-      React.createElement(
-        'div',
-        { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-        React.createElement(User, { 'aria-hidden': 'true' }),
-        value
-      ),
-  },
-  {
-    id: 'email',
-    label: 'Email',
-    width: 250,
-    sortable: true,
-    render: (value) =>
-      React.createElement(
-        'div',
-        { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-        React.createElement(Mail, { 'aria-hidden': 'true' }),
-        value
-      ),
-  },
-  {
-    id: 'joinDate',
-    label: "Date d'inscription",
-    width: 150,
-    sortable: true,
-    render: (value) =>
-      React.createElement(
-        'div',
-        { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-        React.createElement(Calendar, { 'aria-hidden': 'true' }),
-        new Date(value).toLocaleDateString()
-      ),
-  },
-  {
-    id: 'balance',
-    label: 'Solde',
-    width: 120,
-    sortable: true,
-    align: 'right',
-    render: (value) =>
-      React.createElement(
-        'div',
-        {
-          style: { display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'flex-end' },
-        },
-        React.createElement(Banknote, { 'aria-hidden': 'true' }),
-        new Intl.NumberFormat('fr-FR', {
-          style: 'currency',
-          currency: 'EUR',
-        }).format(Number(value))
-      ),
-  },
-  {
-    id: 'status',
-    label: 'Statut',
-    width: 120,
-    sortable: true,
-    render: (value: unknown) => renderStatusBadge(value),
-  },
-];
-
-const getRowStyle = () => ({
-  backgroundColor: '#f0fff4',
-  accentColor: '#22c55e',
-});
-
-const TableWrapper: React.FC<{
-  columns: TableColumn<unknown>[];
-  data: TableRowData[];
-  filterable?: boolean;
-  columnFilterable?: boolean;
-  filterConfig?: FilterConfig[];
-}> = (args) => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([]);
-
-  return React.createElement(TableauDynamique, {
-    columns: args.columns,
-    data: args.data,
-    filterable: args.filterable ?? false,
-    columnFilterable: args.columnFilterable ?? false,
-    searchTerm,
-    onSearch: setSearchTerm,
-    pagination: { pageSize: 5, currentPage: 1 },
-    filterConfig: args.filterConfig,
-    externalFilters: appliedFilters,
-    onFiltersChange: setAppliedFilters,
-    filtersControlled: true,
-    getRowStyle,
-  });
-};
-
-const basicFilterConfig: FilterConfig[] = [
-  { id: 'name', type: 'text', label: 'Nom', placeholder: 'Filtrer par nom...' },
-  { id: 'email', type: 'text', label: 'Email', placeholder: 'Filtrer par email...' },
-  { id: 'age', type: 'number', label: 'Âge', placeholder: 'Filtrer par âge...', min: 18, max: 100 },
-  {
-    id: 'status',
-    type: 'select',
-    label: 'Statut',
-    options: [
-      { value: 'Actif', label: 'Actif' },
-      { value: 'Inactif', label: 'Inactif' },
-      { value: 'En attente', label: 'En attente' },
-    ],
-  },
-  { id: 'balance', type: 'number', label: 'Solde', placeholder: 'Filtrer par solde...' },
-  { id: 'joinDate', type: 'date', label: "Date d'inscription" },
-];
-
-export const BasicTable: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) =>
-    React.createElement(TableWrapper, {
-      columns: basicColumns,
-      data: createData(15),
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable,
-      filterConfig: basicFilterConfig,
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-import React from 'react';
-import TableauDynamique from './TableauDynamique';
-import { basicColumns, createData, basicFilterConfig } from './__stories__/helpers';
-
-function Example() {
-  return <TableauDynamique columns={basicColumns} data={createData(15)} filterConfig={basicFilterConfig} filterable columnFilterable />;
-}
-export default Example;
-        `.trim(),
-      },
-    },
-  },
-};
-
-export const TableWithIcons: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) =>
-    React.createElement(TableWrapper, {
-      columns: iconColumns,
-      data: createData(10),
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable,
-      filterConfig: basicFilterConfig,
-    }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-import React from 'react';
-import TableauDynamique from './TableauDynamique';
-import { iconColumns, createData, basicFilterConfig } from './__stories__/helpers';
-
-function Example() {
-  return <TableauDynamique columns={iconColumns} data={createData(10)} filterConfig={basicFilterConfig} filterable columnFilterable />;
-}
-export default Example;
-        `.trim(),
-      },
-    },
-  },
-};
-
-export const EmptyTable: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) =>
-    React.createElement(TableWrapper, {
-      columns: basicColumns,
-      data: [],
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable,
-      filterConfig: basicFilterConfig,
-    }),
-};
-
-const medicalFilterConfig: FilterConfig[] = [
-  { id: 'iep', type: 'text', label: 'IEP', placeholder: 'Filtrer par IEP...' },
-  { id: 'ddn', type: 'text', label: 'DDN', placeholder: 'Filtrer par date de naissance...' },
-  {
-    id: 'genre',
-    type: 'select',
-    label: 'Genre',
-    options: [
-      { value: 'M', label: 'Masculin' },
-      { value: 'F', label: 'Féminin' },
-    ],
-  },
-  { id: 'motif', type: 'text', label: 'Motif', placeholder: 'Filtrer par motif...' },
-  {
-    id: 'gravite',
-    type: 'select',
-    label: 'Gravité',
-    options: [
-      { value: 'Élevée', label: 'Élevée' },
-      { value: 'Moyenne', label: 'Moyenne' },
-      { value: 'Modérée', label: 'Modérée' },
-    ],
-  },
-  { id: 'urgentiste', type: 'text', label: 'Urgentiste', placeholder: 'Filtrer par urgentiste...' },
-];
-
-export const MedicalTable: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) => {
-    const medicalData: TableRowData[] = [
-      {
-        id: '1',
-        data: {
-          iep: '12345',
-          ddn: '01/01/1980 (43)',
-          genre: 'M',
-          motif: 'Douleur thoracique',
-          gravite: 'Élevée',
-          urgentiste: 'Dr. Martin',
-          admissions: '08:30',
-          tri: '08:45',
-          examen: '09:15',
-          labo: '09:45',
-          radio: '10:30',
-          diag: '11:00',
-          avis: ['11:30', '12:00'],
-          sortie: '13:15',
-          status: 'Actif',
-        },
-      },
-      {
-        id: '2',
-        data: {
-          iep: '67890',
-          ddn: '15/05/1995 (28)',
-          genre: 'F',
-          motif: 'Fracture bras',
-          gravite: 'Moyenne',
-          urgentiste: 'Dr. Dupont',
-          admissions: '09:15',
-          tri: '09:30',
-          examen: '10:00',
-          labo: null,
-          radio: '10:45',
-          diag: '11:30',
-          avis: ['12:15'],
-          sortie: '13:45',
-          status: 'Inactif',
-        },
-      },
-      {
-        id: '3',
-        data: {
-          iep: '24680',
-          ddn: '20/11/1972 (51)',
-          genre: 'M',
-          motif: 'Malaise',
-          gravite: 'Modérée',
-          urgentiste: 'Dr. Leroy',
-          admissions: '10:20',
-          tri: '10:35',
-          examen: '11:05',
-          labo: '11:40',
-          radio: null,
-          diag: '12:20',
-          avis: ['13:00'],
-          sortie: '14:30',
-          status: 'En attente',
-        },
-      },
-    ];
-
-    const medicalColumns: TableColumn<unknown>[] = [
-      { id: 'iep', label: 'IEP', width: 100, sortable: true },
-      { id: 'ddn', label: 'DDN (AGE)', width: 120, sortable: true },
-      { id: 'genre', label: 'GENRE', width: 80, sortable: true },
-      { id: 'motif', label: 'MOTIF', width: 150, sortable: true },
-      { id: 'gravite', label: 'GRAVITE', width: 100, sortable: true },
-      { id: 'urgentiste', label: 'URGENTISTE', width: 150, sortable: true },
-      {
-        id: 'status',
-        label: 'STATUT',
-        width: 120,
-        sortable: true,
-        render: (v: unknown) => renderStatusBadge(v),
-      },
-      {
-        id: 'admissions',
-        label: 'ADMISSIONS',
-        width: 120,
-        sortable: true,
-        render: (v) =>
-          React.createElement(StepCell, {
-            icon: LogIn,
-            time: v,
-            variant: 'admissions',
-            noLeft: true,
-          }),
-      },
-      {
-        id: 'tri',
-        label: 'TRI',
-        width: 80,
-        sortable: true,
-        render: (v) => React.createElement(StepCell, { icon: Clock, time: v, variant: 'tri' }),
-      },
-      {
-        id: 'examen',
-        label: 'EXAMEN',
-        width: 80,
-        render: (v) =>
-          React.createElement(StepCell, { icon: Stethoscope, time: v, variant: 'examen' }),
-      },
-      {
-        id: 'labo',
-        label: 'LABO',
-        width: 80,
-        sortable: true,
-        render: (v) =>
-          React.createElement(StepCell, { icon: Microscope, time: v, variant: 'labo' }),
-      },
-      {
-        id: 'radio',
-        label: 'RADIO',
-        width: 80,
-        render: (v) => React.createElement(StepCell, { icon: Image, time: v, variant: 'radio' }),
-      },
-      {
-        id: 'diag',
-        label: 'DIAG',
-        width: 80,
-        sortable: true,
-        render: (v) => React.createElement(StepCell, { icon: FileText, time: v, variant: 'diag' }),
-      },
-      {
-        id: 'avis',
-        label: 'AVIS',
-        width: 160,
-        sortable: true,
-        render: (value) => {
-          if (!value || !Array.isArray(value)) return null;
-          return React.createElement(
-            'div',
-            {
-              style: {
-                display: 'flex',
-                gap: '8px',
-                alignItems: 'center',
-                whiteSpace: 'nowrap',
-                overflowX: 'auto',
-                padding: '6px 0',
-              },
-            },
-            ...value.map((item: string, index: number) =>
-              React.createElement(
-                'div',
-                {
-                  key: index,
-                  style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    minWidth: '46px',
-                    gap: '6px',
-                  },
-                },
-                React.createElement(
-                  'div',
-                  {
-                    style: {
-                      width: '30px',
-                      height: '30px',
-                      borderRadius: '50%',
-                      display: 'grid',
-                      placeItems: 'center',
-                      fontSize: '14px',
-                      background: 'linear-gradient(135deg,#6b46ff,#8b5cf6)',
-                      color: '#fff',
-                    },
-                  },
-                  React.createElement(MessageCircle, { 'aria-hidden': 'true' })
-                ),
-                React.createElement('div', { style: { fontSize: '11px', color: '#1370a6' } }, item)
-              )
-            )
-          );
-        },
-      },
-      {
-        id: 'sortie',
-        label: 'SORTIE',
-        width: 100,
-        sortable: true,
-        render: (v) =>
-          React.createElement(StepCell, {
-            icon: LogOut,
-            time: v,
-            variant: 'sortie',
-            noRight: true,
-          }),
-      },
-    ];
-
-    return React.createElement(TableWrapper, {
-      columns: medicalColumns,
-      data: medicalData,
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable,
-      filterConfig: medicalFilterConfig,
-    });
-  },
-};
-
-export const TableWithActions: Story = {
-  args: { filterable: false, columnFilterable: false },
-  render: (args) => {
-    const actionColumns: TableColumn<unknown>[] = [
-      ...basicColumns,
-      {
-        id: 'actions',
-        label: 'Actions',
-        width: 120,
-        align: 'center',
-        render: (_: unknown, row: unknown) =>
-          React.createElement(
-            'div',
-            { style: { display: 'flex', gap: '8px', justifyContent: 'center' } },
-            React.createElement(
-              'button',
-              {
-                onClick: () => console.log('Edit:', row),
-                style: {
-                  padding: '4px 8px',
-                  border: '1px solid #3b82f6',
-                  background: 'white',
-                  color: '#3b82f6',
-                  borderRadius: '4px',
-                  cursor: 'pointer',
-                },
-              },
-              'Modifier'
-            ),
-            React.createElement(
-              'button',
-              {
-                onClick: () => console.log('Delete:', row),
-                style: {
-                  padding: '4px 8px',
-                  border: '1px solid #ef4444',
-                  background: 'white',
-                  color: '#ef4444',
-                  borderRadius: '4px',
-                  cursor: 'pointer',
-                },
-              },
-              'Supprimer'
-            )
-          ),
-      },
-    ];
-
-    return React.createElement(TableWrapper, {
-      columns: actionColumns,
-      data: createData(8),
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable,
-      filterConfig: basicFilterConfig,
-    });
-  },
-};
-
-const allFilterConfig: FilterConfig[] = [
-  { id: 'text-filter', type: 'text', label: 'Filtre texte', placeholder: 'Rechercher...' },
-  {
-    id: 'number-filter',
-    type: 'number',
-    label: 'Filtre numérique',
-    placeholder: 'Entrez un nombre...',
-    min: 0,
-    max: 100,
-    step: 1,
-  },
-  {
-    id: 'select-filter',
-    type: 'select',
-    label: 'Filtre sélect',
-    options: [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
-      { value: 'option3', label: 'Option 3' },
-    ],
-  },
-  {
-    id: 'operator-filter',
-    type: 'operator',
-    label: 'Filtre avec opérateurs',
-    operators: [
-      { value: '=', label: 'Égal à' },
-      { value: '>', label: 'Supérieur à' },
-      { value: '<', label: 'Inférieur à' },
-      { value: '>=', label: 'Supérieur ou égal' },
-      { value: '<=', label: 'Inférieur ou égal' },
-    ],
-  },
-  { id: 'date-filter', type: 'date', label: 'Filtre date' },
-  { id: 'daterange-filter', type: 'daterange', label: 'Plage de dates' },
-  { id: 'boolean-filter', type: 'boolean', label: 'Filtre booléen' },
-];
-
-export const AllFilterTypes: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) => {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([]);
-
-    return React.createElement(TableauDynamique, {
-      columns: basicColumns,
-      data: createData(15),
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable ?? false,
-      searchTerm,
-      onSearch: setSearchTerm,
-      pagination: { pageSize: 5, currentPage: 1 },
-      filterConfig: allFilterConfig,
-      externalFilters: appliedFilters,
-      onFiltersChange: setAppliedFilters,
-      filtersControlled: true,
-      getRowStyle,
-    });
-  },
-};
-
-const asyncOptions = async (): Promise<{ value: string; label: string }[]> =>
-  new Promise((resolve) => {
-    setTimeout(() => {
-      resolve([
-        { value: 'async1', label: 'Option asynchrone 1' },
-        { value: 'async2', label: 'Option asynchrone 2' },
-        { value: 'async3', label: 'Option asynchrone 3' },
-      ]);
-    }, 1000);
-  });
-
-const asyncFilterConfig: FilterConfig[] = [
-  { id: 'async-select', type: 'select', label: 'Select asynchrone', options: [], asyncOptions },
-];
-
-export const AsyncOptionsFilter: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) => {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([]);
-
-    return React.createElement(TableauDynamique, {
-      columns: basicColumns,
-      data: createData(10),
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable ?? false,
-      searchTerm,
-      onSearch: setSearchTerm,
-      pagination: { pageSize: 5, currentPage: 1 },
-      filterConfig: asyncFilterConfig,
-      externalFilters: appliedFilters,
-      onFiltersChange: setAppliedFilters,
-      filtersControlled: true,
-      getRowStyle,
-    });
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-const asyncFilterConfig = [
-  { id: 'async-select', type: 'select', label: 'Select asynchrone', options: [], asyncOptions: async () => {
-    // fetch les options au chargement du filtre
-    const res = await fetch('/api/options');
-    return res.json();
-  } },
-];
-        `.trim(),
-      },
-    },
-  },
-};
-
-export const WithColumnFilters: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) => {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([]);
-
-    return React.createElement(TableauDynamique, {
-      columns: basicColumns,
-      data: createData(20),
-      filterable: args.filterable,
-      columnFilterable: args.columnFilterable ?? false,
-      searchTerm,
-      onSearch: setSearchTerm,
-      pagination: { pageSize: 5, currentPage: 1 },
-      filterConfig: basicFilterConfig,
-      externalFilters: appliedFilters,
-      onFiltersChange: setAppliedFilters,
-      filtersControlled: true,
-      getRowStyle,
-    });
-  },
-};
-
-/* -----------------------
-   --- NOUVEAU : story démontrant executeOnApply et defaultValue function
-   ----------------------- */
-const executeOnApplyFilterConfig: FilterConfig[] = [
-  {
-    id: 'customerLookup',
-    type: 'text',
-    label: 'Client (recherche enrichie)',
-    placeholder: 'Tapez un nom puis Appliquer...',
-    executeOnApply: async (value) => {
-      if (!value) return value;
-      // simulate API call
-      await new Promise((r) => setTimeout(r, 700));
-      return { resolvedCustomerId: 'c-' + String(value).toLowerCase().replace(/\s+/g, '-') };
-    },
-  },
-];
-
-const functionValueFilterConfig: FilterConfig[] = [
-  {
-    id: 'autoIds',
-    type: 'multiselect',
-    label: 'IDs dynamiques',
-    defaultValue: async () => {
-      // use tempFilters if needed; simulate backend
-      await new Promise((r) => setTimeout(r, 600));
-      return ['id-42', 'id-99'];
-    },
-  },
-];
-
-export const ExecuteOnApplyFilter: Story = {
-  args: { filterable: true, columnFilterable: true },
-  render: (args) => {
-    const [applied, setApplied] = useState<AppliedFilter[]>([]);
-
-    return React.createElement('div', { style: { padding: 12 } }, [
-      React.createElement('h3', { key: 'h' }, 'executeOnApply & function defaultValue example'),
-      React.createElement(TableauDynamique, {
-        key: 't1',
-        columns: basicColumns,
-        data: createData(8),
-        filterable: true,
-        columnFilterable: true,
-        filterConfig: executeOnApplyFilterConfig,
-        filtersControlled: false,
-        onApplyFilters: (f: AppliedFilter[]) => {
-          console.log('Applied (executeOnApply):', f);
-          setApplied(f);
-        },
-        pagination: { pageSize: 5, currentPage: 1 },
-      }),
-      React.createElement('div', { key: 'sep', style: { height: 18 } }),
-      React.createElement(TableauDynamique, {
-        key: 't2',
-        columns: basicColumns,
-        data: createData(6),
-        filterable: true,
-        columnFilterable: true,
-        filterConfig: functionValueFilterConfig,
-        filtersControlled: false,
-        onApplyFilters: (f: AppliedFilter[]) => {
-          console.log('Applied (function defaultValue):', f);
-        },
-        pagination: { pageSize: 5, currentPage: 1 },
-      }),
-    ]);
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-/* executeOnApply example (config) */
-const executeOnApplyFilterConfig = [
-  {
-    id: 'customerLookup',
-    type: 'text',
-    label: 'Client (recherche enrichie)',
-    executeOnApply: async (value) => {
-      if (!value) return value;
-      const res = await fetch('/api/resolve-customer?q=' + encodeURIComponent(value));
-      return await res.json(); // retourne la valeur finale
-    }
-  }
-];
-
-/* defaultValue as function example */
-const functionValueFilterConfig = [
-  {
-    id: 'autoIds',
-    type: 'multiselect',
-    label: 'IDs dynamiques',
-    defaultValue: async (tempFilters) => {
-      const res = await fetch('/api/ids');
-      return await res.json();
-    }
-  }
-];
-
-<TableauDynamique filterConfig={executeOnApplyFilterConfig} />
-<TableauDynamique filterConfig={functionValueFilterConfig} />
-        `.trim(),
-      },
-    },
-  },
-};