@cgi-learning-hub/ui 1.6.0-dev.1749214505 → 1.6.0-dev.1750082787

package/dist/components/ButtonGroup/ButtonGroup.cjs.js

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),t=require("./style.cjs.js"),c=({viewMode:n,buttonList:s,onChange:u,colorVariant:l="primary",size:i="small",orientation:a="horizontal"})=>o.jsx(t.StyledToggleButtonGroup,{value:n,exclusive:!0,onChange:(e,r)=>{r!==null&&u(r)},size:i,orientation:a,colorvariant:l,children:s.map(e=>o.jsx(t.StyledToggleButton,{value:e.value,colorvariant:l,disabled:e.disabled,children:e.icon},e.value))});module.exports=c;
+"use strict";const l=require("react/jsx-runtime"),s=require("./style.cjs.js"),c=({viewMode:n,buttonList:i,onChange:o,colorVariant:r="primary",size:a="small",orientation:u="horizontal"})=>l.jsx(s.StyledToggleButtonGroup,{value:n,exclusive:!0,onChange:(e,t)=>{t!==null&&o(t)},size:a,orientation:u,colorvariant:r,children:i.map(e=>l.jsxs(s.StyledToggleButton,{value:e.value,colorvariant:r,disabled:e.disabled,children:[e.icon,e.text&&l.jsx("span",{style:{marginLeft:8},children:e.text})]},e.value))});module.exports=c;

package/dist/components/ButtonGroup/ButtonGroup.es.js

@@ -1,30 +1,33 @@
-import { jsx as o } from "react/jsx-runtime";
-import { StyledToggleButtonGroup as d, StyledToggleButton as m } from "./style.es.js";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { StyledToggleButtonGroup as m, StyledToggleButton as p } from "./style.es.js";
 const v = ({
-  viewMode: a,
-  buttonList: i,
+  viewMode: i,
+  buttonList: o,
   onChange: t,
   colorVariant: l = "primary",
   size: n = "small",
-  orientation: u = "horizontal"
-}) => /* @__PURE__ */ o(
-  d,
+  orientation: s = "horizontal"
+}) => /* @__PURE__ */ a(
+  m,
   {
-    value: a,
+    value: i,
     exclusive: !0,
     onChange: (e, r) => {
       r !== null && t(r);
     },
     size: n,
-    orientation: u,
+    orientation: s,
     colorvariant: l,
-    children: i.map((e) => /* @__PURE__ */ o(
-      m,
+    children: o.map((e) => /* @__PURE__ */ d(
+      p,
       {
         value: e.value,
         colorvariant: l,
         disabled: e.disabled,
-        children: e.icon
+        children: [
+          e.icon,
+          e.text && /* @__PURE__ */ a("span", { style: { marginLeft: 8 }, children: e.text })
+        ]
       },
       e.value
     ))

package/dist/components/ButtonGroup/types.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export interface ButtonItem<T extends string = string> {
     value: T;
     icon: ReactNode;
+    text?: string;
     disabled?: boolean;
 }
 export interface ButtonGroupProps<T extends readonly ButtonItem<string>[]> {

package/dist/components/stories/Alert.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { Alert } from '../Alert';
 declare const meta: Meta<typeof Alert>;
 export default meta;

package/dist/components/stories/Autocomplete.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 declare const Autocomplete: (props: any) => import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof Autocomplete>;
 export default meta;

package/dist/components/stories/Badge.stories.d.ts

@@ -1,5 +1,5 @@
 import { default as Badge } from '@mui/material/Badge';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof Badge>;

package/dist/components/stories/Button.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../Button';
 declare const meta: Meta<typeof Button>;
 export default meta;

package/dist/components/stories/ButtonGroup.stories.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("../../createSvgIcon-r-LuM8rr.cjs"),a=require("react"),u=require("../ButtonGroup/ButtonGroup.cjs.js"),d=require("../../Box-xgRKDOV1.cjs"),t=require("../../Typography-CTc5xI5k.cjs"),l=require("../../Grid-D0L0VF_j.cjs"),g=require("../../Button-qSgmSSw2.cjs"),i=require("../../Paper-Dy4nClba.cjs"),z=f.createSvgIcon(e.jsx("path",{d:"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2M8 11H4V6h4zm6 0h-4V6h4zm6 0h-4V6h4zM8 18H4v-5h4zm6 0h-4v-5h4zm6 0h-4v-5h4z"}),"CalendarViewMonth"),w=f.createSvgIcon(e.jsx("path",{fillRule:"evenodd",d:"M3 3v8h8V3zm6 6H5V5h4zm-6 4v8h8v-8zm6 6H5v-4h4zm4-16v8h8V3zm6 6h-4V5h4zm-6 4v8h8v-8zm6 6h-4v-4h4z"}),"GridView"),b=f.createSvgIcon(e.jsx("path",{d:"M3 13h2v-2H3zm0 4h2v-2H3zm0-8h2V7H3zm4 4h14v-2H7zm0 4h14v-2H7zM7 7v2h14V7z"}),"List"),j=f.createSvgIcon(e.jsx("path",{d:"M21 8H3V4h18zm0 2H3v4h18zm0 6H3v4h18z"}),"TableRows"),B=f.createSvgIcon(e.jsx("path",{d:"M2 4v7h20V4zm8 16h12v-7H10zm-8 0h6v-7H2z"}),"ViewComfy"),V=f.createSvgIcon(e.jsx("path",{d:"M14.67 5v6.5H9.33V5zm1 6.5H21V5h-5.33zm-1 7.5v-6.5H9.33V19zm1-6.5V19H21v-6.5zm-7.34 0H3V19h5.33zm0-1V5H3v6.5z"}),"ViewModule"),I={title:"Components/ButtonGroup",component:u,argTypes:{buttonList:{description:"**[Requis]** Liste des boutons à afficher dans le ButtonGroup.",control:"object",table:{required:!0,type:{summary:"readonly ButtonItem[]"}}},viewMode:{description:"**[Requis]** Valeur actuellement sélectionnée.",control:"text",table:{required:!0,type:{summary:"T[number]['value']"}}},onChange:{description:"**[Requis]** Fonction appelée lorsqu'un bouton est sélectionné.",table:{required:!0,type:{summary:"(value: T[number]['value']) => void"}}},colorVariant:{description:"**[Optionnel]** Variante de couleur des boutons.",control:"select",options:["primary","secondary"],defaultValue:"primary",table:{required:!1,type:{summary:"ColorVariant"},defaultValue:{summary:"primary"}}},size:{description:"**[Optionnel]** Taille des boutons.",control:"select",options:["small","medium","large"],defaultValue:"small",table:{required:!1,type:{summary:"string"},defaultValue:{summary:"small"}}},orientation:{description:"**[Optionnel]** Orientation du groupe de boutons.",control:"select",options:["horizontal","vertical"],defaultValue:"horizontal",table:{required:!1,type:{summary:"string"},defaultValue:{summary:"horizontal"}}}},parameters:{docs:{description:{component:`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),B=require("../../createSvgIcon-r-LuM8rr.cjs"),l=require("react"),p=require("../ButtonGroup/ButtonGroup.cjs.js"),u=require("../../Box-xgRKDOV1.cjs"),t=require("../../Typography-CTc5xI5k.cjs"),a=require("../../Grid-D0L0VF_j.cjs"),v=require("../../Button-qSgmSSw2.cjs"),o=require("../../Paper-Dy4nClba.cjs"),C=B.createSvgIcon(e.jsx("path",{d:"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2M8 11H4V6h4zm6 0h-4V6h4zm6 0h-4V6h4zM8 18H4v-5h4zm6 0h-4v-5h4zm6 0h-4v-5h4z"}),"CalendarViewMonth"),V=B.createSvgIcon(e.jsx("path",{fillRule:"evenodd",d:"M3 3v8h8V3zm6 6H5V5h4zm-6 4v8h8v-8zm6 6H5v-4h4zm4-16v8h8V3zm6 6h-4V5h4zm-6 4v8h8v-8zm6 6h-4v-4h4z"}),"GridView"),g=B.createSvgIcon(e.jsx("path",{d:"M3 13h2v-2H3zm0 4h2v-2H3zm0-8h2V7H3zm4 4h14v-2H7zm0 4h14v-2H7zM7 7v2h14V7z"}),"List"),j=B.createSvgIcon(e.jsx("path",{d:"M21 8H3V4h18zm0 2H3v4h18zm0 6H3v4h18z"}),"TableRows"),w=B.createSvgIcon(e.jsx("path",{d:"M2 4v7h20V4zm8 16h12v-7H10zm-8 0h6v-7H2z"}),"ViewComfy"),f=B.createSvgIcon(e.jsx("path",{d:"M14.67 5v6.5H9.33V5zm1 6.5H21V5h-5.33zm-1 7.5v-6.5H9.33V19zm1-6.5V19H21v-6.5zm-7.34 0H3V19h5.33zm0-1V5H3v6.5z"}),"ViewModule"),I={title:"Components/ButtonGroup",component:p,argTypes:{buttonList:{description:"**[Requis]** Liste des boutons à afficher dans le ButtonGroup.",control:"object",table:{required:!0,type:{summary:"readonly ButtonItem[]"}}},viewMode:{description:"**[Requis]** Valeur actuellement sélectionnée.",control:"text",table:{required:!0,type:{summary:"T[number]['value']"}}},onChange:{description:"**[Requis]** Fonction appelée lorsqu'un bouton est sélectionné.",table:{required:!0,type:{summary:"(value: T[number]['value']) => void"}}},colorVariant:{description:"**[Optionnel]** Variante de couleur des boutons.",control:"select",options:["primary","secondary"],defaultValue:"primary",table:{required:!1,type:{summary:"ColorVariant"},defaultValue:{summary:"primary"}}},size:{description:"**[Optionnel]** Taille des boutons.",control:"select",options:["small","medium","large"],defaultValue:"small",table:{required:!1,type:{summary:"string"},defaultValue:{summary:"small"}}},orientation:{description:"**[Optionnel]** Orientation du groupe de boutons.",control:"select",options:["horizontal","vertical"],defaultValue:"horizontal",table:{required:!1,type:{summary:"string"},defaultValue:{summary:"horizontal"}}}},parameters:{docs:{description:{component:`
 ## ButtonGroup
 
 Un composant générique TypeScript pour permettre à l'utilisateur de basculer entre différents modes d'affichage ou options avec une sécurité de type complète.
@@ -112,7 +112,17 @@ const viewButtons = [
 const createViewButton = <T extends string>(value: T, icon: ReactNode) => 
   ({ value, icon } as const);
 \`\`\`
-        `}}}},v=[{value:"cards",icon:e.jsx(V,{})},{value:"table",icon:e.jsx(j,{})},{value:"list",icon:e.jsx(b,{})}],C=[{value:"grid",icon:e.jsx(w,{})},{value:"cards",icon:e.jsx(B,{})},{value:"table",icon:e.jsx(j,{})},{value:"list",icon:e.jsx(b,{})},{value:"calendar",icon:e.jsx(z,{})}],q=[{value:"cards",icon:e.jsx(V,{})},{value:"table",icon:e.jsx(j,{}),disabled:!0},{value:"list",icon:e.jsx(b,{})}],G={render:()=>{const[n,r]=a.useState("cards"),c=a.useCallback(s=>{console.log(`Vue sélectionnée: ${s}`),r(s)},[]);return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Sélecteur de vue standard"}),e.jsx(u,{buttonList:v,viewMode:n,onChange:c}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Sélecteur de vue basique permettant de basculer entre trois modes d'affichage : cartes, tableau et liste."}}}},P={render:()=>{const[n,r]=a.useState("table"),[c,s]=a.useState("primary"),[h,o]=a.useState("small"),[x,m]=a.useState("horizontal");return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Personnalisation en temps réel"}),e.jsxs(l.Grid,{container:!0,spacing:2,sx:{mb:3},children:[e.jsxs(l.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Couleur"}),e.jsxs(d.Box,{sx:{display:"flex",gap:1},children:[e.jsx(g.Button,{size:"small",variant:c==="primary"?"contained":"outlined",onClick:()=>s("primary"),children:"Primary"}),e.jsx(g.Button,{size:"small",variant:c==="secondary"?"contained":"outlined",onClick:()=>s("secondary"),children:"Secondary"})]})]}),e.jsxs(l.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Taille"}),e.jsx(d.Box,{sx:{display:"flex",gap:1},children:["small","medium","large"].map(y=>e.jsx(g.Button,{size:"small",variant:h===y?"contained":"outlined",onClick:()=>o(y),children:y},y))})]}),e.jsxs(l.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Orientation"}),e.jsxs(d.Box,{sx:{display:"flex",gap:1},children:[e.jsx(g.Button,{size:"small",variant:x==="horizontal"?"contained":"outlined",onClick:()=>m("horizontal"),children:"Horizontal"}),e.jsx(g.Button,{size:"small",variant:x==="vertical"?"contained":"outlined",onClick:()=>m("vertical"),children:"Vertical"})]})]}),e.jsxs(l.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Vue actuelle"}),e.jsx(t.Typography,{variant:"body2",color:"primary",children:e.jsx("strong",{children:n})})]})]}),e.jsx(i.Paper,{sx:{p:3,display:"inline-block"},children:e.jsx(u,{buttonList:v,viewMode:n,onChange:y=>{console.log(`Vue sélectionnée: ${y}`),r(y)},colorVariant:c,size:h,orientation:x})})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Interface de démonstration permettant de tester toutes les options de personnalisation disponibles : couleur, taille et orientation des boutons."}}}},D={render:()=>{const n=[{value:"on",icon:e.jsx(V,{})},{value:"off",icon:e.jsx(j,{})}],r=[{value:"active",icon:e.jsx(B,{})},{value:"inactive",icon:e.jsx(b,{})},{value:"pending",icon:e.jsx(w,{})}],c=[{value:"edit",icon:e.jsx(V,{})},{value:"view",icon:e.jsx(j,{})},{value:"preview",icon:e.jsx(b,{})}],[s,h]=a.useState("on"),[o,x]=a.useState("active"),[m,y]=a.useState("edit");return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Différents contextes d'utilisation"}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",paragraph:!0,children:"Le même composant s'adapte automatiquement à différents types de données."}),e.jsxs(l.Grid,{container:!0,spacing:3,children:[e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Mode binaire"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Activation/Désactivation simple"}),e.jsx(u,{buttonList:n,viewMode:s,onChange:p=>{console.log("Simple:",p),h(p)}}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["État: ",s]})]})}),e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Statut système"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Gestion d'états métier"}),e.jsx(u,{buttonList:r,viewMode:o,onChange:p=>{console.log("Status:",p),x(p)},colorVariant:"secondary"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Statut: ",o]})]})}),e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Mode d'édition"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Interface utilisateur adaptative"}),e.jsx(u,{buttonList:c,viewMode:m,onChange:p=>{console.log("Mode:",p),y(p)},size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Mode: ",m]})]})})]}),e.jsxs(i.Paper,{sx:{p:2,mt:3,backgroundColor:"info.light",color:"info.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"🎯 Flexibilité du composant"}),e.jsx(t.Typography,{variant:"body2",children:"Un seul composant peut gérer n'importe quel ensemble d'options, s'adaptant automatiquement au contexte d'utilisation."})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de la polyvalence du composant avec différents ensembles d'options : mode binaire, statuts système et modes d'édition."}}}},L={render:()=>{const n=["primary","secondary"],[r,c]=a.useState({primary:"cards",secondary:"table"});return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Comparaison des variantes de couleurs"}),e.jsx(l.Grid,{container:!0,spacing:3,children:n.map(s=>e.jsx(l.Grid,{size:{xs:12,md:6},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsxs(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Variante ",s]}),e.jsx(u,{buttonList:v,viewMode:r[s],onChange:h=>{c(o=>({...o,[s]:h}))},colorVariant:s}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélectionné: ",r[s]]})]})},s))})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration des deux variantes de couleurs disponibles : primary et secondary."}}}},k={render:()=>{const n=["small","medium","large"],[r,c]=a.useState({small:"cards",medium:"table",large:"list"});return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Comparaison des tailles"}),e.jsx(l.Grid,{container:!0,spacing:3,children:n.map(s=>e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsxs(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Taille ",s]}),e.jsx(u,{buttonList:v,viewMode:r[s],onChange:h=>{c(o=>({...o,[s]:h}))},size:s}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélectionné: ",r[s]]})]})},s))})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration des trois tailles disponibles : small, medium et large."}}}},R={render:()=>{const[n,r]=a.useState("grid"),c=a.useCallback(s=>{r(s)},[]);return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Orientation verticale"}),e.jsxs(l.Grid,{container:!0,spacing:3,children:[e.jsx(l.Grid,{size:{xs:12,md:6},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Orientation verticale - Taille medium"}),e.jsx(u,{buttonList:C,viewMode:n,onChange:c,orientation:"vertical",size:"medium"})]})}),e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Orientation horizontale (comparaison)"}),e.jsx(u,{buttonList:C,viewMode:n,onChange:c,orientation:"horizontal",size:"medium"})]})})]}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de l'orientation verticale comparée à l'orientation horizontale avec plus d'options."}}}},E={render:()=>{const[n,r]=a.useState("cards"),c=a.useCallback(s=>{r(s)},[]);return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Gestion des boutons désactivés"}),e.jsxs(i.Paper,{sx:{p:3},children:[e.jsx(u,{buttonList:q,viewMode:n,onChange:c,size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",sx:{mt:1},children:'Le bouton "Table" est désactivé dans cet exemple'}),e.jsxs(d.Box,{sx:{mt:2},children:[e.jsx(g.Button,{variant:"outlined",size:"small",onClick:()=>r("list"),sx:{mr:1},children:"Sélectionner Liste"}),e.jsx(g.Button,{variant:"outlined",size:"small",onClick:()=>r("cards"),children:"Sélectionner Cartes"})]})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple montrant comment désactiver individuellement certains boutons en utilisant la propriété `disabled` dans les éléments du tableau."}}}},A={render:()=>{const[n,r]=a.useState("grid"),c=a.useCallback(s=>{r(s)},[]);return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Plus d'options d'affichage"}),e.jsxs(i.Paper,{sx:{p:3},children:[e.jsx(u,{buttonList:C,viewMode:n,onChange:c,colorVariant:"secondary",size:"large"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",sx:{mt:1},children:"Cet exemple montre un ButtonGroup avec 5 options différentes en variante secondary et taille large"})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple avec davantage d'options pour montrer la flexibilité du composant avec plusieurs modes d'affichage."}}}},O={render:()=>{const[n,r]=a.useState("cards"),c=a.useCallback(o=>{console.log("Changement de vue:",o),r(o)},[]),s=a.useCallback(o=>{console.log("Changement externe:",o),r(o)},[]),h=()=>{switch(n){case"cards":return"Affichage en cartes - Idéal pour une vue d'ensemble visuelle";case"table":return"Affichage en tableau - Parfait pour comparer des données";case"list":return"Affichage en liste - Optimal pour parcourir rapidement";default:return"Mode d'affichage inconnu"}};return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Synchronisation avec d'autres composants"}),e.jsxs(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Vue actuelle: ",e.jsx("strong",{children:n})]}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",paragraph:!0,children:h()}),e.jsxs(l.Grid,{container:!0,spacing:3,children:[e.jsx(l.Grid,{size:{xs:12,md:6},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"ButtonGroup Principal"}),e.jsx(u,{buttonList:v,viewMode:n,onChange:c,size:"medium"})]})}),e.jsx(l.Grid,{size:{xs:12,md:6},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Contrôles externes"}),e.jsx(d.Box,{sx:{display:"flex",flexDirection:"column",gap:1},children:v.map(o=>e.jsxs(g.Button,{variant:n===o.value?"contained":"outlined",onClick:()=>s(o.value),size:"small",startIcon:o.icon,children:["Mode ",o.value]},o.value))})]})})]}),e.jsxs(i.Paper,{sx:{p:2,mt:2,backgroundColor:"grey.50"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Actions rapides"}),e.jsx(g.Button,{variant:"text",size:"small",onClick:()=>{const o=["cards","table","list"],x=o[Math.floor(Math.random()*o.length)];s(x)},sx:{mr:1},children:"Vue aléatoire"}),e.jsx(g.Button,{variant:"text",size:"small",onClick:()=>{const x=(v.findIndex(m=>m.value===n)+1)%v.length;s(v[x].value)},children:"Vue suivante"})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de la synchronisation entre le ButtonGroup et d'autres composants. Cette story montre comment le ButtonGroup peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."}}}},H={render:()=>{const n=[{value:"overview",icon:e.jsx(B,{})},{value:"detailed",icon:e.jsx(j,{})},{value:"analytics",icon:e.jsx(w,{})}],r=[{value:"grid",icon:e.jsx(w,{})},{value:"list",icon:e.jsx(b,{})},{value:"tree",icon:e.jsx(V,{})}],c=[{value:"chart",icon:e.jsx(z,{})},{value:"table",icon:e.jsx(j,{})},{value:"raw",icon:e.jsx(b,{}),disabled:!0}],[s,h]=a.useState("overview"),[o,x]=a.useState("grid"),[m,y]=a.useState("chart");return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Cas d'utilisation dans une interface complexe"}),e.jsxs(l.Grid,{container:!0,spacing:3,children:[e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2,height:"100%"},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Dashboard"}),e.jsx(u,{buttonList:n,viewMode:s,onChange:p=>h(p),colorVariant:"primary",size:"small",orientation:"vertical"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Mode: ",s]})]})}),e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2,height:"100%"},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Explorateur de fichiers"}),e.jsx(u,{buttonList:r,viewMode:o,onChange:p=>x(p),colorVariant:"secondary",size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Affichage: ",o]})]})}),e.jsx(l.Grid,{size:{xs:12,md:4},children:e.jsxs(i.Paper,{sx:{p:2,height:"100%"},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Visualisation de données"}),e.jsx(u,{buttonList:c,viewMode:m,onChange:p=>y(p),colorVariant:"primary",size:"large"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Format: ",m]}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",children:'(Le mode "raw" est temporairement désactivé)'})]})})]}),e.jsxs(i.Paper,{sx:{p:2,mt:3,backgroundColor:"info.light",color:"info.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"📊 Résumé des sélections (tous typés !)"}),e.jsxs(t.Typography,{variant:"body2",children:["Dashboard: ",e.jsx("strong",{children:s})," | Fichiers:"," ",e.jsx("strong",{children:o})," | Données: ",e.jsx("strong",{children:m})]})]}),e.jsxs(i.Paper,{sx:{p:2,mt:2,backgroundColor:"warning.light",color:"warning.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"🔍 Inspection des types"}),e.jsxs(t.Typography,{variant:"body2",component:"div",children:[e.jsx("code",{children:"DashboardType:"})," ",'"overview" | "detailed" | "analytics"',e.jsx("br",{}),e.jsx("code",{children:"FileType:"})," ",'"grid" | "list" | "tree"',e.jsx("br",{}),e.jsx("code",{children:"DataType:"})," ",'"chart" | "table" | "raw"']}),e.jsx(t.Typography,{variant:"caption",sx:{mt:1,display:"block"},children:"Chaque callback reçoit exactement le bon type, aucune configuration supplémentaire requise !"})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple d'utilisation complexe montrant comment le ButtonGroup peut être utilisé dans différents contextes au sein d'une même interface, avec différentes configurations (tailles, couleurs, orientations) selon le besoin. Chaque instance a son propre type inféré automatiquement."}}}},U={render:()=>{const n={CARDS:"cards",TABLE:"table",LIST:"list"},r=(T,S,M=!1)=>({value:T,icon:S,disabled:M}),c=[r(n.CARDS,e.jsx(V,{})),r(n.TABLE,e.jsx(j,{})),r(n.LIST,e.jsx(b,{}))],s=[r("dashboard",e.jsx(w,{})),r("users",e.jsx(B,{})),r("settings",e.jsx(z,{})),r("logs",e.jsx(b,{}),!0)],[h,o]=a.useState(n.CARDS),[x,m]=a.useState("dashboard"),y=a.useCallback(T=>{console.log("Vue commune changée:",T),o(T)},[]),p=a.useCallback(T=>{console.log("Vue admin changée:",T),m(T)},[]);return e.jsxs(d.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"🚀 Bonnes pratiques pour le typage"}),e.jsxs(l.Grid,{container:!0,spacing:3,children:[e.jsx(l.Grid,{size:{xs:12,md:6},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Configuration standard"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Utilisation de constantes et factory functions"}),e.jsx(u,{buttonList:c,viewMode:h,onChange:y,size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélection: ",h]})]})}),e.jsx(l.Grid,{size:{xs:12,md:6},children:e.jsxs(i.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Configuration avancée"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Types spécialisés avec bouton désactivé"}),e.jsx(u,{buttonList:s,viewMode:x,onChange:p,colorVariant:"secondary",size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Admin: ",x]})]})})]}),e.jsxs(i.Paper,{sx:{p:3,mt:3,backgroundColor:"success.light"},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"📚 Code examples - Bonnes pratiques"}),e.jsxs(d.Box,{sx:{mb:2},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"1. ✅ Utilisation de constantes réutilisables"}),e.jsx(i.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`const VIEW_MODES = {
+        `}}}},b=[{value:"cards",icon:e.jsx(f,{})},{value:"table",icon:e.jsx(j,{})},{value:"list",icon:e.jsx(g,{})}],z=[{value:"grid",icon:e.jsx(V,{})},{value:"cards",icon:e.jsx(w,{})},{value:"table",icon:e.jsx(j,{})},{value:"list",icon:e.jsx(g,{})},{value:"calendar",icon:e.jsx(C,{})}],q=[{value:"cards",icon:e.jsx(f,{})},{value:"table",icon:e.jsx(j,{}),disabled:!0},{value:"list",icon:e.jsx(g,{})}],G={render:()=>{const[n,r]=l.useState("cards"),c=l.useCallback(s=>{console.log(`Vue sélectionnée: ${s}`),r(s)},[]);return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Sélecteur de vue standard"}),e.jsx(p,{buttonList:b,viewMode:n,onChange:c}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Sélecteur de vue basique permettant de basculer entre trois modes d'affichage : cartes, tableau et liste."}}}},P={render:()=>{const[n,r]=l.useState("table"),[c,s]=l.useState("primary"),[x,i]=l.useState("small"),[h,m]=l.useState("horizontal");return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Personnalisation en temps réel"}),e.jsxs(a.Grid,{container:!0,spacing:2,sx:{mb:3},children:[e.jsxs(a.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Couleur"}),e.jsxs(u.Box,{sx:{display:"flex",gap:1},children:[e.jsx(v.Button,{size:"small",variant:c==="primary"?"contained":"outlined",onClick:()=>s("primary"),children:"Primary"}),e.jsx(v.Button,{size:"small",variant:c==="secondary"?"contained":"outlined",onClick:()=>s("secondary"),children:"Secondary"})]})]}),e.jsxs(a.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Taille"}),e.jsx(u.Box,{sx:{display:"flex",gap:1},children:["small","medium","large"].map(y=>e.jsx(v.Button,{size:"small",variant:x===y?"contained":"outlined",onClick:()=>i(y),children:y},y))})]}),e.jsxs(a.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Orientation"}),e.jsxs(u.Box,{sx:{display:"flex",gap:1},children:[e.jsx(v.Button,{size:"small",variant:h==="horizontal"?"contained":"outlined",onClick:()=>m("horizontal"),children:"Horizontal"}),e.jsx(v.Button,{size:"small",variant:h==="vertical"?"contained":"outlined",onClick:()=>m("vertical"),children:"Vertical"})]})]}),e.jsxs(a.Grid,{size:{xs:12,sm:6,md:3},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Vue actuelle"}),e.jsx(t.Typography,{variant:"body2",color:"primary",children:e.jsx("strong",{children:n})})]})]}),e.jsx(o.Paper,{sx:{p:3,display:"inline-block"},children:e.jsx(p,{buttonList:b,viewMode:n,onChange:y=>{console.log(`Vue sélectionnée: ${y}`),r(y)},colorVariant:c,size:x,orientation:h})})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Interface de démonstration permettant de tester toutes les options de personnalisation disponibles : couleur, taille et orientation des boutons."}}}},L={render:()=>{const n=[{value:"on",icon:e.jsx(f,{})},{value:"off",icon:e.jsx(j,{})}],r=[{value:"active",icon:e.jsx(w,{})},{value:"inactive",icon:e.jsx(g,{})},{value:"pending",icon:e.jsx(V,{})}],c=[{value:"edit",icon:e.jsx(f,{})},{value:"view",icon:e.jsx(j,{})},{value:"preview",icon:e.jsx(g,{})}],[s,x]=l.useState("on"),[i,h]=l.useState("active"),[m,y]=l.useState("edit");return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Différents contextes d'utilisation"}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",paragraph:!0,children:"Le même composant s'adapte automatiquement à différents types de données."}),e.jsxs(a.Grid,{container:!0,spacing:3,children:[e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Mode binaire"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Activation/Désactivation simple"}),e.jsx(p,{buttonList:n,viewMode:s,onChange:d=>{console.log("Simple:",d),x(d)}}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["État: ",s]})]})}),e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Statut système"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Gestion d'états métier"}),e.jsx(p,{buttonList:r,viewMode:i,onChange:d=>{console.log("Status:",d),h(d)},colorVariant:"secondary"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Statut: ",i]})]})}),e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Mode d'édition"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Interface utilisateur adaptative"}),e.jsx(p,{buttonList:c,viewMode:m,onChange:d=>{console.log("Mode:",d),y(d)},size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Mode: ",m]})]})})]}),e.jsxs(o.Paper,{sx:{p:2,mt:3,backgroundColor:"info.light",color:"info.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"🎯 Flexibilité du composant"}),e.jsx(t.Typography,{variant:"body2",children:"Un seul composant peut gérer n'importe quel ensemble d'options, s'adaptant automatiquement au contexte d'utilisation."})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de la polyvalence du composant avec différents ensembles d'options : mode binaire, statuts système et modes d'édition."}}}},k={render:()=>{const n=["primary","secondary"],[r,c]=l.useState({primary:"cards",secondary:"table"});return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Comparaison des variantes de couleurs"}),e.jsx(a.Grid,{container:!0,spacing:3,children:n.map(s=>e.jsx(a.Grid,{size:{xs:12,md:6},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsxs(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Variante ",s]}),e.jsx(p,{buttonList:b,viewMode:r[s],onChange:x=>{c(i=>({...i,[s]:x}))},colorVariant:s}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélectionné: ",r[s]]})]})},s))})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration des deux variantes de couleurs disponibles : primary et secondary."}}}},D={render:()=>{const n=["small","medium","large"],[r,c]=l.useState({small:"cards",medium:"table",large:"list"});return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Comparaison des tailles"}),e.jsx(a.Grid,{container:!0,spacing:3,children:n.map(s=>e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsxs(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Taille ",s]}),e.jsx(p,{buttonList:b,viewMode:r[s],onChange:x=>{c(i=>({...i,[s]:x}))},size:s}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélectionné: ",r[s]]})]})},s))})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration des trois tailles disponibles : small, medium et large."}}}},R={render:()=>{const[n,r]=l.useState("grid"),c=l.useCallback(s=>{r(s)},[]);return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Orientation verticale"}),e.jsxs(a.Grid,{container:!0,spacing:3,children:[e.jsx(a.Grid,{size:{xs:12,md:6},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Orientation verticale - Taille medium"}),e.jsx(p,{buttonList:z,viewMode:n,onChange:c,orientation:"vertical",size:"medium"})]})}),e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Orientation horizontale (comparaison)"}),e.jsx(p,{buttonList:z,viewMode:n,onChange:c,orientation:"horizontal",size:"medium"})]})})]}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de l'orientation verticale comparée à l'orientation horizontale avec plus d'options."}}}},O={render:()=>{const n=[{value:"grid",icon:e.jsx(V,{}),text:"Grille"},{value:"table",icon:e.jsx(j,{}),text:"Tableau"},{value:"list",icon:e.jsx(g,{}),text:"Liste"}],r=[{value:"cards",icon:e.jsx(f,{})},{value:"comfort",icon:e.jsx(w,{})},{value:"calendar",icon:e.jsx(C,{})}],c=[{value:"overview",icon:e.jsx(V,{}),text:"Vue d'ensemble"},{value:"details",icon:e.jsx(w,{})},{value:"settings",icon:e.jsx(C,{}),text:"Paramètres"}],[s,x]=l.useState("grid"),[i,h]=l.useState("cards"),[m,y]=l.useState("overview");return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Texte optionnel dans les boutons"}),e.jsxs(a.Grid,{container:!0,spacing:3,children:[e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Avec texte"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Tous les boutons ont un texte explicatif"}),e.jsx(p,{buttonList:n,viewMode:s,onChange:d=>x(d),size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélection: ",s]})]})}),e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Icônes seulement"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Format classique avec icônes uniquement"}),e.jsx(p,{buttonList:r,viewMode:i,onChange:d=>h(d),colorVariant:"secondary",size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélection: ",i]})]})}),e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Format mixte"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Certains boutons avec texte, d'autres sans"}),e.jsx(p,{buttonList:c,viewMode:m,onChange:d=>y(d),size:"medium",orientation:"vertical"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélection: ",m]})]})})]}),e.jsxs(o.Paper,{sx:{p:3,mt:3,backgroundColor:"info.light"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"💡 Utilisation du texte optionnel"}),e.jsxs(t.Typography,{variant:"body2",component:"div",children:["• Le texte s'affiche automatiquement si la propriété"," ",e.jsx("code",{children:"text"})," est définie",e.jsx("br",{}),"• Compatible avec l'ancien format (icônes seules)",e.jsx("br",{}),"• Possibilité de mélanger boutons avec et sans texte",e.jsx("br",{}),"• L'espacement est automatiquement ajusté entre l'icône et le texte"]})]}),e.jsxs(o.Paper,{sx:{p:2,mt:2,backgroundColor:"grey.100"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Exemple de code"}),e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`const buttons = [
+  { 
+    value: "grid", 
+    icon: <GridIcon />, 
+    text: "Grille" // ← Texte optionnel
+  },
+  { 
+    value: "list", 
+    icon: <ListIcon /> // ← Pas de texte, seule l'icône
+  }
+] as const;`})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de l'utilisation du texte optionnel dans les boutons. Le texte s'affiche automatiquement si la propriété `text` est présente, permettant une grande flexibilité dans la présentation."}}}},A={render:()=>{const[n,r]=l.useState("cards"),c=l.useCallback(s=>{r(s)},[]);return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Gestion des boutons désactivés"}),e.jsxs(o.Paper,{sx:{p:3},children:[e.jsx(p,{buttonList:q,viewMode:n,onChange:c,size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",sx:{mt:1},children:'Le bouton "Table" est désactivé dans cet exemple'}),e.jsxs(u.Box,{sx:{mt:2},children:[e.jsx(v.Button,{variant:"outlined",size:"small",onClick:()=>r("list"),sx:{mr:1},children:"Sélectionner Liste"}),e.jsx(v.Button,{variant:"outlined",size:"small",onClick:()=>r("cards"),children:"Sélectionner Cartes"})]})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple montrant comment désactiver individuellement certains boutons en utilisant la propriété `disabled` dans les éléments du tableau."}}}},E={render:()=>{const[n,r]=l.useState("grid"),c=l.useCallback(s=>{r(s)},[]);return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Plus d'options d'affichage"}),e.jsxs(o.Paper,{sx:{p:3},children:[e.jsx(p,{buttonList:z,viewMode:n,onChange:c,colorVariant:"secondary",size:"large"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Vue actuelle: ",e.jsx("strong",{children:n})]}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",sx:{mt:1},children:"Cet exemple montre un ButtonGroup avec 5 options différentes en variante secondary et taille large"})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple avec davantage d'options pour montrer la flexibilité du composant avec plusieurs modes d'affichage."}}}},H={render:()=>{const[n,r]=l.useState("cards"),c=l.useCallback(i=>{console.log("Changement de vue:",i),r(i)},[]),s=l.useCallback(i=>{console.log("Changement externe:",i),r(i)},[]),x=()=>{switch(n){case"cards":return"Affichage en cartes - Idéal pour une vue d'ensemble visuelle";case"table":return"Affichage en tableau - Parfait pour comparer des données";case"list":return"Affichage en liste - Optimal pour parcourir rapidement";default:return"Mode d'affichage inconnu"}};return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Synchronisation avec d'autres composants"}),e.jsxs(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Vue actuelle: ",e.jsx("strong",{children:n})]}),e.jsx(t.Typography,{variant:"body2",color:"text.secondary",paragraph:!0,children:x()}),e.jsxs(a.Grid,{container:!0,spacing:3,children:[e.jsx(a.Grid,{size:{xs:12,md:6},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"ButtonGroup Principal"}),e.jsx(p,{buttonList:b,viewMode:n,onChange:c,size:"medium"})]})}),e.jsx(a.Grid,{size:{xs:12,md:6},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Contrôles externes"}),e.jsx(u.Box,{sx:{display:"flex",flexDirection:"column",gap:1},children:b.map(i=>e.jsxs(v.Button,{variant:n===i.value?"contained":"outlined",onClick:()=>s(i.value),size:"small",startIcon:i.icon,children:["Mode ",i.value]},i.value))})]})})]}),e.jsxs(o.Paper,{sx:{p:2,mt:2,backgroundColor:"grey.50"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"Actions rapides"}),e.jsx(v.Button,{variant:"text",size:"small",onClick:()=>{const i=["cards","table","list"],h=i[Math.floor(Math.random()*i.length)];s(h)},sx:{mr:1},children:"Vue aléatoire"}),e.jsx(v.Button,{variant:"text",size:"small",onClick:()=>{const h=(b.findIndex(m=>m.value===n)+1)%b.length;s(b[h].value)},children:"Vue suivante"})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de la synchronisation entre le ButtonGroup et d'autres composants. Cette story montre comment le ButtonGroup peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."}}}},U={render:()=>{const n=[{value:"overview",icon:e.jsx(w,{})},{value:"detailed",icon:e.jsx(j,{})},{value:"analytics",icon:e.jsx(V,{})}],r=[{value:"grid",icon:e.jsx(V,{})},{value:"list",icon:e.jsx(g,{})},{value:"tree",icon:e.jsx(f,{})}],c=[{value:"chart",icon:e.jsx(C,{})},{value:"table",icon:e.jsx(j,{})},{value:"raw",icon:e.jsx(g,{}),disabled:!0}],[s,x]=l.useState("overview"),[i,h]=l.useState("grid"),[m,y]=l.useState("chart");return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"Cas d'utilisation dans une interface complexe"}),e.jsxs(a.Grid,{container:!0,spacing:3,children:[e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2,height:"100%"},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Dashboard"}),e.jsx(p,{buttonList:n,viewMode:s,onChange:d=>x(d),colorVariant:"primary",size:"small",orientation:"vertical"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Mode: ",s]})]})}),e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2,height:"100%"},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Explorateur de fichiers"}),e.jsx(p,{buttonList:r,viewMode:i,onChange:d=>h(d),colorVariant:"secondary",size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Affichage: ",i]})]})}),e.jsx(a.Grid,{size:{xs:12,md:4},children:e.jsxs(o.Paper,{sx:{p:2,height:"100%"},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Visualisation de données"}),e.jsx(p,{buttonList:c,viewMode:m,onChange:d=>y(d),colorVariant:"primary",size:"large"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:2},children:["Format: ",m]}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",children:'(Le mode "raw" est temporairement désactivé)'})]})})]}),e.jsxs(o.Paper,{sx:{p:2,mt:3,backgroundColor:"info.light",color:"info.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"📊 Résumé des sélections (tous typés !)"}),e.jsxs(t.Typography,{variant:"body2",children:["Dashboard: ",e.jsx("strong",{children:s})," | Fichiers:"," ",e.jsx("strong",{children:i})," | Données: ",e.jsx("strong",{children:m})]})]}),e.jsxs(o.Paper,{sx:{p:2,mt:2,backgroundColor:"warning.light",color:"warning.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"🔍 Inspection des types"}),e.jsxs(t.Typography,{variant:"body2",component:"div",children:[e.jsx("code",{children:"DashboardType:"})," ",'"overview" | "detailed" | "analytics"',e.jsx("br",{}),e.jsx("code",{children:"FileType:"})," ",'"grid" | "list" | "tree"',e.jsx("br",{}),e.jsx("code",{children:"DataType:"})," ",'"chart" | "table" | "raw"']}),e.jsx(t.Typography,{variant:"caption",sx:{mt:1,display:"block"},children:"Chaque callback reçoit exactement le bon type, aucune configuration supplémentaire requise !"})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple d'utilisation complexe montrant comment le ButtonGroup peut être utilisé dans différents contextes au sein d'une même interface, avec différentes configurations (tailles, couleurs, orientations) selon le besoin. Chaque instance a son propre type inféré automatiquement."}}}},F={render:()=>{const n={CARDS:"cards",TABLE:"table",LIST:"list"},r=(T,S,M=!1)=>({value:T,icon:S,disabled:M}),c=[r(n.CARDS,e.jsx(f,{})),r(n.TABLE,e.jsx(j,{})),r(n.LIST,e.jsx(g,{}))],s=[r("dashboard",e.jsx(V,{})),r("users",e.jsx(w,{})),r("settings",e.jsx(C,{})),r("logs",e.jsx(g,{}),!0)],[x,i]=l.useState(n.CARDS),[h,m]=l.useState("dashboard"),y=l.useCallback(T=>{console.log("Vue commune changée:",T),i(T)},[]),d=l.useCallback(T=>{console.log("Vue admin changée:",T),m(T)},[]);return e.jsxs(u.Box,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"🚀 Bonnes pratiques pour le typage"}),e.jsxs(a.Grid,{container:!0,spacing:3,children:[e.jsx(a.Grid,{size:{xs:12,md:6},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Configuration standard"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Utilisation de constantes et factory functions"}),e.jsx(p,{buttonList:c,viewMode:x,onChange:y,size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Sélection: ",x]})]})}),e.jsx(a.Grid,{size:{xs:12,md:6},children:e.jsxs(o.Paper,{sx:{p:2},children:[e.jsx(t.Typography,{variant:"subtitle1",gutterBottom:!0,children:"Configuration avancée"}),e.jsx(t.Typography,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:"Types spécialisés avec bouton désactivé"}),e.jsx(p,{buttonList:s,viewMode:h,onChange:d,colorVariant:"secondary",size:"medium"}),e.jsxs(t.Typography,{variant:"body2",sx:{mt:1},children:["Admin: ",h]})]})})]}),e.jsxs(o.Paper,{sx:{p:3,mt:3,backgroundColor:"success.light"},children:[e.jsx(t.Typography,{variant:"h6",gutterBottom:!0,children:"📚 Code examples - Bonnes pratiques"}),e.jsxs(u.Box,{sx:{mb:2},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"1. ✅ Utilisation de constantes réutilisables"}),e.jsx(o.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`const VIEW_MODES = {
   CARDS: "cards",
   TABLE: "table", 
   LIST: "list"
@@ -120,7 +130,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
 
 const buttons = [
   { value: VIEW_MODES.CARDS, icon: <Icon /> }
-] as const;`})})]}),e.jsxs(d.Box,{sx:{mb:2},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"2. ✅ Factory functions pour la réutilisabilité"}),e.jsx(i.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`const createViewButton = <T extends string>(
+] as const;`})})]}),e.jsxs(u.Box,{sx:{mb:2},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"2. ✅ Factory functions pour la réutilisabilité"}),e.jsx(o.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`const createViewButton = <T extends string>(
   value: T, 
   icon: ReactNode, 
   disabled = false
@@ -129,15 +139,15 @@ const buttons = [
 const buttons = [
   createViewButton("cards", <CardsIcon />),
   createViewButton("table", <TableIcon />, true)
-] as const;`})})]}),e.jsxs(d.Box,{sx:{mb:2},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"3. ✅ Types helper pour éviter la répétition"}),e.jsx(i.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`type ViewType = (typeof buttons)[number]["value"];
+] as const;`})})]}),e.jsxs(u.Box,{sx:{mb:2},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"3. ✅ Types helper pour éviter la répétition"}),e.jsx(o.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`type ViewType = (typeof buttons)[number]["value"];
 
 const [view, setView] = useState<ViewType>("cards");
 
 const handleChange = useCallback((value: ViewType) => {
   // value est automatiquement typé !
   setView(value);
-}, []);`})})]}),e.jsxs(d.Box,{children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"4. ✅ Handler avec typage explicite"}),e.jsx(i.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`<ButtonGroup
+}, []);`})})]}),e.jsxs(u.Box,{children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"4. ✅ Handler avec typage explicite"}),e.jsx(o.Paper,{sx:{p:2,backgroundColor:"grey.100"},children:e.jsx("pre",{style:{margin:0,fontSize:"0.875rem",overflow:"auto"},children:`<ButtonGroup
   buttonList={buttons}
   viewMode={view}
   onChange={handleChange} // ← Pas de type 'any' !
-/>`})})]})]}),e.jsxs(i.Paper,{sx:{p:2,mt:2,backgroundColor:"error.light",color:"error.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"❌ À éviter"}),e.jsxs(t.Typography,{variant:"body2",component:"div",children:["• Oublier ",e.jsx("code",{children:"as const"})," après les tableaux",e.jsx("br",{}),"• Utiliser des handlers sans typage explicite",e.jsx("br",{}),"• Définir des valeurs en dur sans constantes",e.jsx("br",{}),"• Ignorer les warnings TypeScript"]})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Cette story présente les meilleures pratiques pour utiliser le ButtonGroup avec un typage TypeScript optimal. Elle montre comment structurer votre code pour éviter les types 'any' et maximiser la sécurité de type."}}}};exports.AvecBoutonsDesactives=E;exports.BonnesPratiques=U;exports.CasUtilisationComplexe=H;exports.Controlable=P;exports.Default=G;exports.OptionsEtendues=A;exports.OrientationVerticale=R;exports.Synchronisation=O;exports.TaillesDifferentes=k;exports.TypageGenerique=D;exports.VariantesDecouleurs=L;exports.default=I;
+/>`})})]})]}),e.jsxs(o.Paper,{sx:{p:2,mt:2,backgroundColor:"error.light",color:"error.contrastText"},children:[e.jsx(t.Typography,{variant:"subtitle2",gutterBottom:!0,children:"❌ À éviter"}),e.jsxs(t.Typography,{variant:"body2",component:"div",children:["• Oublier ",e.jsx("code",{children:"as const"})," après les tableaux",e.jsx("br",{}),"• Utiliser des handlers sans typage explicite",e.jsx("br",{}),"• Définir des valeurs en dur sans constantes",e.jsx("br",{}),"• Ignorer les warnings TypeScript"]})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Cette story présente les meilleures pratiques pour utiliser le ButtonGroup avec un typage TypeScript optimal. Elle montre comment structurer votre code pour éviter les types 'any' et maximiser la sécurité de type."}}}};exports.AvecBoutonsDesactives=A;exports.AvecTexteOptionnel=O;exports.BonnesPratiques=F;exports.CasUtilisationComplexe=U;exports.Controlable=P;exports.Default=G;exports.OptionsEtendues=E;exports.OrientationVerticale=R;exports.Synchronisation=H;exports.TaillesDifferentes=D;exports.TypageGenerique=L;exports.VariantesDecouleurs=k;exports.default=I;

package/dist/components/stories/ButtonGroup.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { ButtonGroup } from '../ButtonGroup';
 declare const meta: Meta<typeof ButtonGroup>;
 export default meta;
@@ -9,6 +9,7 @@ export declare const TypageGenerique: Story;
 export declare const VariantesDecouleurs: Story;
 export declare const TaillesDifferentes: Story;
 export declare const OrientationVerticale: Story;
+export declare const AvecTexteOptionnel: Story;
 export declare const AvecBoutonsDesactives: Story;
 export declare const OptionsEtendues: Story;
 export declare const Synchronisation: Story;