@tsiky/components-r19 1.0.0

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

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