@cgi-learning-hub/ui 1.4.0-dev.1742031230 → 1.4.0-dev.1742031677
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -32,4 +32,4 @@ interface CustomTreeViewItemProps {
|
|
|
32
32
|
|
|
33
33
|
type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
34
34
|
\`\`\`
|
|
35
|
-
`}}}},h=r=>{const o=[],i=n=>{o.push(n),n.children&&n.children.forEach(s=>i(s))};return r.forEach(n=>i(n)),o},P=({items:r,selectedItemId:o,onItemSelect:i})=>{const n=h(r);return e.jsxs(x.Paper,{sx:{width:"100%",maxHeight:300,overflow:"auto"},children:[e.jsx(I.Typography,{variant:"h6",sx:{p:2},children:"Sélection externe"}),e.jsx(E.Divider,{}),e.jsx(v.List,{children:n.map(s=>e.jsx(O.ListItem,{disablePadding:!0,children:e.jsx(m.ListItemButton,{selected:o===s.internalId,onClick:()=>i(s.internalId),children:e.jsx(m.ListItemText,{primary:s.label})})},s.internalId))})]})},R=({items:r,onRandomSelect:o})=>{const i=h(r),n=()=>{const s=Math.floor(Math.random()*i.length);o(i[s].internalId)};return e.jsx(d.Box,{sx:{mt:2,mb:2},children:e.jsx(C.Button,{variant:"contained",color:"primary",onClick:n,children:"Sélection aléatoire"})})},T=[{internalId:"documents",label:"Mes formulaires",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"folder1",label:"Premier dossier",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"subfolder1",label:"Sous-dossier 1",iconType:t.ICON_TYPE.FOLDER},{internalId:"subfolder2",label:"Sous-dossier 2",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"folder2",label:"Deuxième dossier",iconType:t.ICON_TYPE.FOLDER},{internalId:"folder3",label:"Troisième dossier",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"shared",label:"Formulaires partagés avec moi",iconType:t.ICON_TYPE.SHARE},{internalId:"trash",label:"Corbeille",iconType:t.ICON_TYPE.TRASH}],Y=[{internalId:"bookmarks",label:"Favoris",iconType:b,children:[{internalId:"important",label:"Important",iconType:t.ICON_TYPE.CUSTOM,customIcon:S}]},...T],p=[{internalId:"documents",label:"Documents",iconType:t.ICON_TYPE.SHARE,children:[{internalId:"reports",label:"Rapports",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"report1",label:"Rapport Janvier",iconType:t.ICON_TYPE.FOLDER},{internalId:"report2",label:"Rapport Février",iconType:t.ICON_TYPE.FOLDER},{internalId:"report3",label:"Rapport Mars",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"invoices",label:"Factures",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"media",label:"Médias",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"images",label:"Images",iconType:t.ICON_TYPE.FOLDER},{internalId:"videos",label:"Vidéos",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"downloads",label:"Téléchargements",iconType:t.ICON_TYPE.FOLDER}],j={render:()=>{const[r,o]=a.useState(""),i=a.useCallback((n,s)=>{console.log(`Élément sélectionné: ${s}`),s&&o(s)},[]);return e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{items:T,selectedItemId:r,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple de base avec des icônes standard et démonstration de sélection."}}}},N={args:{items:T,selectedItemId:"folder1",handleSelectedItemChange:(r,o)=>{console.log(`Élément sélectionné: ${o}`)},iconColor:"success"},render:r=>e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{...r})}),parameters:{docs:{description:{story:"Cette story permet de contrôler les propriétés du TreeView directement via le panneau de contrôle de Storybook. Essayez de changer la couleur des icônes pour voir l'effet en temps réel."}}}},_={render:()=>{const[r,o]=a.useState("bookmarks"),i=a.useCallback((n,s)=>{console.log(`Élément sélectionné: ${s}`),s&&o(s)},[]);return e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{items:Y,selectedItemId:r,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."}}}},w={render:()=>{const r=[{internalId:"root",label:"Structure imbriquée complexe",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level1-1",label:"Niveau 1.1",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level2-1",label:"Niveau 2.1",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level3-1V",label:"VOUS M'AVEZ TROUVÉ HIHIHI",iconType:t.ICON_TYPE.FOLDER},{internalId:"level3-2",label:"Niveau 3.2",iconType:t.ICON_TYPE.SHARE}]},{internalId:"level2-2",label:"Niveau 2.2",iconType:t.ICON_TYPE.TRASH}]},{internalId:"level1-2",label:"Niveau 1.2",iconType:t.ICON_TYPE.CUSTOM,customIcon:b}]}],[o,i]=a.useState("level2-1"),n=a.useCallback((s,l)=>{console.log(`Élément sélectionné: ${l}`),l&&i(l)},[]);return e.jsx(d.Box,{sx:{maxWidth:400,overflowY:"hidden"},children:e.jsx(u,{items:r,selectedItemId:o,handleSelectedItemChange:n
|
|
35
|
+
`}}}},h=r=>{const o=[],i=n=>{o.push(n),n.children&&n.children.forEach(s=>i(s))};return r.forEach(n=>i(n)),o},P=({items:r,selectedItemId:o,onItemSelect:i})=>{const n=h(r);return e.jsxs(x.Paper,{sx:{width:"100%",maxHeight:300,overflow:"auto"},children:[e.jsx(I.Typography,{variant:"h6",sx:{p:2},children:"Sélection externe"}),e.jsx(E.Divider,{}),e.jsx(v.List,{children:n.map(s=>e.jsx(O.ListItem,{disablePadding:!0,children:e.jsx(m.ListItemButton,{selected:o===s.internalId,onClick:()=>i(s.internalId),children:e.jsx(m.ListItemText,{primary:s.label})})},s.internalId))})]})},R=({items:r,onRandomSelect:o})=>{const i=h(r),n=()=>{const s=Math.floor(Math.random()*i.length);o(i[s].internalId)};return e.jsx(d.Box,{sx:{mt:2,mb:2},children:e.jsx(C.Button,{variant:"contained",color:"primary",onClick:n,children:"Sélection aléatoire"})})},T=[{internalId:"documents",label:"Mes formulaires",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"folder1",label:"Premier dossier",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"subfolder1",label:"Sous-dossier 1",iconType:t.ICON_TYPE.FOLDER},{internalId:"subfolder2",label:"Sous-dossier 2",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"folder2",label:"Deuxième dossier",iconType:t.ICON_TYPE.FOLDER},{internalId:"folder3",label:"Troisième dossier",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"shared",label:"Formulaires partagés avec moi",iconType:t.ICON_TYPE.SHARE},{internalId:"trash",label:"Corbeille",iconType:t.ICON_TYPE.TRASH}],Y=[{internalId:"bookmarks",label:"Favoris",iconType:b,children:[{internalId:"important",label:"Important",iconType:t.ICON_TYPE.CUSTOM,customIcon:S}]},...T],p=[{internalId:"documents",label:"Documents",iconType:t.ICON_TYPE.SHARE,children:[{internalId:"reports",label:"Rapports",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"report1",label:"Rapport Janvier",iconType:t.ICON_TYPE.FOLDER},{internalId:"report2",label:"Rapport Février",iconType:t.ICON_TYPE.FOLDER},{internalId:"report3",label:"Rapport Mars",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"invoices",label:"Factures",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"media",label:"Médias",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"images",label:"Images",iconType:t.ICON_TYPE.FOLDER},{internalId:"videos",label:"Vidéos",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"downloads",label:"Téléchargements",iconType:t.ICON_TYPE.FOLDER}],j={render:()=>{const[r,o]=a.useState(""),i=a.useCallback((n,s)=>{console.log(`Élément sélectionné: ${s}`),s&&o(s)},[]);return e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{items:T,selectedItemId:r,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple de base avec des icônes standard et démonstration de sélection."}}}},N={args:{items:T,selectedItemId:"folder1",handleSelectedItemChange:(r,o)=>{console.log(`Élément sélectionné: ${o}`)},iconColor:"success"},render:r=>e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{...r})}),parameters:{docs:{description:{story:"Cette story permet de contrôler les propriétés du TreeView directement via le panneau de contrôle de Storybook. Essayez de changer la couleur des icônes pour voir l'effet en temps réel."}}}},_={render:()=>{const[r,o]=a.useState("bookmarks"),i=a.useCallback((n,s)=>{console.log(`Élément sélectionné: ${s}`),s&&o(s)},[]);return e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{items:Y,selectedItemId:r,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."}}}},w={render:()=>{const r=[{internalId:"root",label:"Structure imbriquée complexe",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level1-1",label:"Niveau 1.1",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level2-1",label:"Niveau 2.1",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level3-1V",label:"VOUS M'AVEZ TROUVÉ HIHIHI",iconType:t.ICON_TYPE.FOLDER},{internalId:"level3-2",label:"Niveau 3.2",iconType:t.ICON_TYPE.SHARE}]},{internalId:"level2-2",label:"Niveau 2.2",iconType:t.ICON_TYPE.TRASH}]},{internalId:"level1-2",label:"Niveau 1.2",iconType:t.ICON_TYPE.CUSTOM,customIcon:b}]}],[o,i]=a.useState("level2-1"),n=a.useCallback((s,l)=>{console.log(`Élément sélectionné: ${l}`),l&&i(l)},[]);return e.jsx(d.Box,{sx:{maxWidth:400,overflowY:"hidden"},children:e.jsx(u,{items:r,selectedItemId:o,handleSelectedItemChange:n})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple d'une structure profondément imbriquée."}}}},L={render:()=>{const r=["primary","secondary","info"],[o,i]=a.useState({primary:"",secondary:"",info:""});return e.jsx(d.Box,{sx:{display:"flex",flexDirection:"row",gap:3,overflowY:"hidden"},children:r.map(n=>e.jsxs(d.Box,{sx:{maxWidth:250,overflowY:"hidden"},children:[e.jsxs(I.Typography,{variant:"subtitle2",gutterBottom:!0,children:["Icônes ",n]}),e.jsx(u,{items:T,selectedItemId:o[n],handleSelectedItemChange:(s,l)=>{l&&i(c=>({...c,[n]:l}))},iconColor:n})]},n))})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration des principales options de couleurs disponibles pour les icônes."}}}},D={render:()=>{const[r,o]=a.useState("reports"),i=(l,c)=>{console.log("TreeView sélection:",c),c&&o(c)},n=l=>{console.log("Sélection externe:",l),o(l)},s=()=>{const c=h(p).find(f=>f.internalId===r);return c?c.label:"Aucun élément sélectionné"};return e.jsxs(d.Box,{sx:{width:"100%",overflowY:"hidden"},children:[e.jsxs(I.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Élément sélectionné: ",e.jsx("strong",{children:s()})," (ID:"," ",r,")"]}),e.jsx(R,{items:p,onRandomSelect:n}),e.jsxs(m.Grid,{container:!0,spacing:3,sx:{overflowY:"hidden"},children:[e.jsx(m.Grid,{item:!0,xs:12,md:6,children:e.jsxs(x.Paper,{sx:{p:2,overflowY:"hidden"},children:[e.jsx(I.Typography,{variant:"h6",gutterBottom:!0,children:"TreeView"}),e.jsx(u,{items:p,selectedItemId:r,handleSelectedItemChange:i})]})}),e.jsx(m.Grid,{item:!0,xs:12,md:6,children:e.jsx(P,{items:p,selectedItemId:r,onItemSelect:n})})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de la synchronisation entre le TreeView et d'autres composants. Cette story montre comment le TreeView peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."}}}};exports.AvecIconesPersonnalisees=_;exports.Controlable=N;exports.Default=j;exports.OptionsDeCouleurs=L;exports.StructureImbriquee=w;exports.Synchronicite=D;exports.default=g;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cgi-learning-hub/ui",
|
|
3
|
-
"version": "1.4.0-dev.
|
|
3
|
+
"version": "1.4.0-dev.1742031677",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "CGI Learning-hub Team",
|
|
6
6
|
"description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",
|