@cgi-learning-hub/ui 1.4.0-dev.1741961819 → 1.4.0-dev.1741972878

package/dist/components/TreeView/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TreeView.cjs.js");exports.TreeView=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TreeView.cjs.js");exports.ICON_TYPE=e.ICON_TYPE;exports.TreeView=e.default;

package/dist/components/TreeView/index.es.js

@@ -1,4 +1,5 @@
-import { default as a } from "./TreeView.es.js";
+import { ICON_TYPE as a, default as f } from "./TreeView.es.js";
 export {
-  a as TreeView
+  a as ICON_TYPE,
+  f as TreeView
 };

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

@@ -1 +1,29 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),o=require("../../createSvgIcon-DJMYlO0S.cjs"),i=require("../TreeView/TreeView.cjs.js"),n=o.createSvgIcon(l.jsx("path",{d:"M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2m0 12H4V8h16z"}),"FolderOpen"),c={title:"Components/TreeView",component:i,argTypes:{items:{description:"Liste des éléments à afficher dans le TreeView.",control:"object",table:{type:{summary:"TreeViewBaseItem[]"}}},onItemSelect:{description:"Fonction appelée lorsqu'un élément est sélectionné.",table:{type:{summary:"(event: React.SyntheticEvent, itemId: string) => void"}}},folderIcon:{description:"Icône de dossier personnalisée.",control:!1,table:{type:{summary:"SvgIconComponent"}}}}},e=[{id:"root",label:"Root",children:[{id:"child1",label:"Child 1",children:[{id:"child1-1",label:"Child 1.1"},{id:"child1-2",label:"Child 1.2"}]},{id:"child2",label:"Child 2",children:[{id:"child2-1",label:"Child 2.1"}]}]}],s={args:{items:e}},r={args:{items:e,folderIcon:n}},d={args:{items:e,onItemSelect:(a,t)=>{console.log(`Selected item: ${t}`)}}};exports.Default=s;exports.WithCustomIcon=r;exports.WithItemSelect=d;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),t=require("../../createSvgIcon-DJMYlO0S.cjs"),e=require("../TreeView/TreeView.cjs.js"),s=t.createSvgIcon(i.jsx("path",{d:"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"}),"Bookmark"),r=t.createSvgIcon(i.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"}),"Person"),l={title:"Components/TreeView",component:e.default,argTypes:{items:{description:"Liste des éléments à afficher dans le TreeView.",control:"object",table:{type:{summary:"CustomTreeViewItem[]"}}},onItemSelect:{description:"Fonction appelée lorsqu'un élément est sélectionné.",control:"none",table:{type:{summary:"(event: React.SyntheticEvent, itemId: string) => void"}}}},parameters:{docs:{description:{component:`
+## TreeView
+
+Un composant pour afficher des données hiérarchiques sous forme d'arborescence.
+
+### Utilisation des icônes
+
+Le TreeView permet de personnaliser les icônes selon les types suivants:
+- \`ICON_TYPE.FOLDER\`: Icône de dossier (défaut)
+- \`ICON_TYPE.SHARE\`: Icône de partage
+- \`ICON_TYPE.TRASH\`: Icône de corbeille
+- \`ICON_TYPE.CUSTOM\`: Icône personnalisée (nécessite de définir \`customIcon\`)
+
+Vous pouvez également passer directement un composant SvgIcon comme valeur de \`iconType\`.
+
+### Structure des données
+
+Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
+
+\`\`\`typescript
+interface CustomTreeViewItem extends TreeViewBaseItem {
+  id: string;              // Identifiant unique de l'élément (obligatoire)
+  label: string;           // Libellé à afficher (obligatoire)
+  children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
+  iconType?: IconType;     // Type d'icône (facultatif)
+  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
+}
+\`\`\`
+        `}}}},c=[{id:"documents",label:"Mes formulaires",iconType:e.ICON_TYPE.FOLDER,children:[{id:"folder1",label:"Premier dossier",iconType:e.ICON_TYPE.FOLDER,children:[{id:"subfolder1",label:"Sous-dossier 1",iconType:e.ICON_TYPE.FOLDER},{id:"subfolder2",label:"Sous-dossier 2",iconType:e.ICON_TYPE.FOLDER}]},{id:"folder2",label:"Deuxième dossier",iconType:e.ICON_TYPE.FOLDER},{id:"folder3",label:"Troisième dossier",iconType:e.ICON_TYPE.FOLDER}]},{id:"shared",label:"Formulaires partagés avec moi",iconType:e.ICON_TYPE.SHARE},{id:"trash",label:"Corbeille",iconType:e.ICON_TYPE.TRASH}],a=[{id:"bookmarks",label:"Favoris",iconType:s,children:[{id:"important",label:"Important",iconType:e.ICON_TYPE.CUSTOM,customIcon:r}]},...c],d={args:{items:c,onItemSelect:(n,o)=>{console.log(`Élément sélectionné: ${o}`)}},parameters:{docs:{description:{story:"Exemple de base avec des icônes standard."}}}},m={args:{items:a,onItemSelect:(n,o)=>{console.log(`Élément sélectionné: ${o}`)}},parameters:{docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."}}}},u={args:{items:[{id:"root",label:"Structure imbriquée complexe",iconType:e.ICON_TYPE.FOLDER,children:[{id:"level1-1",label:"Niveau 1.1",iconType:e.ICON_TYPE.FOLDER,children:[{id:"level2-1",label:"Niveau 2.1",iconType:e.ICON_TYPE.FOLDER,children:[{id:"level3-1",label:"Niveau 3.1",iconType:e.ICON_TYPE.FOLDER},{id:"level3-2",label:"Niveau 3.2",iconType:e.ICON_TYPE.SHARE}]},{id:"level2-2",label:"Niveau 2.2",iconType:e.ICON_TYPE.TRASH}]},{id:"level1-2",label:"Niveau 1.2",iconType:e.ICON_TYPE.CUSTOM,customIcon:s}]}],onItemSelect:(n,o)=>{console.log(`Élément sélectionné: ${o}`)}},parameters:{docs:{description:{story:"Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau."}}}};exports.AvecIconesPersonnalisees=m;exports.Default=d;exports.StructureImbriquee=u;exports.default=l;

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

@@ -4,5 +4,5 @@ declare const meta: Meta<typeof TreeView>;
 export default meta;
 type Story = StoryObj<typeof TreeView>;
 export declare const Default: Story;
-export declare const WithCustomIcon: Story;
-export declare const WithItemSelect: Story;
+export declare const AvecIconesPersonnalisees: Story;
+export declare const StructureImbriquee: Story;

package/dist/components/stories/TreeView.stories.es.js

@@ -1,86 +1,215 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as l } from "../../createSvgIcon-K1Hd8ryN.js";
-import i from "../TreeView/TreeView.es.js";
-const n = l(/* @__PURE__ */ o("path", {
-  d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2m0 12H4V8h16z"
-}), "FolderOpen"), m = {
+import { jsx as n } from "react/jsx-runtime";
+import { c as s } from "../../createSvgIcon-K1Hd8ryN.js";
+import r, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
+const t = s(/* @__PURE__ */ n("path", {
+  d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
+}), "Bookmark"), l = s(/* @__PURE__ */ n("path", {
+  d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
+}), "Person"), u = {
   title: "Components/TreeView",
-  component: i,
+  component: r,
   argTypes: {
     items: {
       description: "Liste des éléments à afficher dans le TreeView.",
       control: "object",
       table: {
-        type: { summary: "TreeViewBaseItem[]" }
+        type: { summary: "CustomTreeViewItem[]" }
       }
     },
     onItemSelect: {
       description: "Fonction appelée lorsqu'un élément est sélectionné.",
+      control: "none",
       table: {
         type: {
           summary: "(event: React.SyntheticEvent, itemId: string) => void"
         }
       }
-    },
-    folderIcon: {
-      description: "Icône de dossier personnalisée.",
-      control: !1,
-      table: {
-        type: { summary: "SvgIconComponent" }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## TreeView
+
+Un composant pour afficher des données hiérarchiques sous forme d'arborescence.
+
+### Utilisation des icônes
+
+Le TreeView permet de personnaliser les icônes selon les types suivants:
+- \`ICON_TYPE.FOLDER\`: Icône de dossier (défaut)
+- \`ICON_TYPE.SHARE\`: Icône de partage
+- \`ICON_TYPE.TRASH\`: Icône de corbeille
+- \`ICON_TYPE.CUSTOM\`: Icône personnalisée (nécessite de définir \`customIcon\`)
+
+Vous pouvez également passer directement un composant SvgIcon comme valeur de \`iconType\`.
+
+### Structure des données
+
+Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
+
+\`\`\`typescript
+interface CustomTreeViewItem extends TreeViewBaseItem {
+  id: string;              // Identifiant unique de l'élément (obligatoire)
+  label: string;           // Libellé à afficher (obligatoire)
+  children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
+  iconType?: IconType;     // Type d'icône (facultatif)
+  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
+}
+\`\`\`
+        `
       }
     }
   }
-}, e = [
+}, c = [
   {
-    id: "root",
-    label: "Root",
+    id: "documents",
+    label: "Mes formulaires",
+    iconType: e.FOLDER,
     children: [
       {
-        id: "child1",
-        label: "Child 1",
+        id: "folder1",
+        label: "Premier dossier",
+        iconType: e.FOLDER,
         children: [
           {
-            id: "child1-1",
-            label: "Child 1.1"
+            id: "subfolder1",
+            label: "Sous-dossier 1",
+            iconType: e.FOLDER
           },
           {
-            id: "child1-2",
-            label: "Child 1.2"
+            id: "subfolder2",
+            label: "Sous-dossier 2",
+            iconType: e.FOLDER
           }
         ]
       },
       {
-        id: "child2",
-        label: "Child 2",
-        children: [
-          {
-            id: "child2-1",
-            label: "Child 2.1"
-          }
-        ]
+        id: "folder2",
+        label: "Deuxième dossier",
+        iconType: e.FOLDER
+      },
+      {
+        id: "folder3",
+        label: "Troisième dossier",
+        iconType: e.FOLDER
       }
     ]
+  },
+  {
+    id: "shared",
+    label: "Formulaires partagés avec moi",
+    iconType: e.SHARE
+  },
+  {
+    id: "trash",
+    label: "Corbeille",
+    iconType: e.TRASH
   }
-], a = {
+], a = [
+  {
+    id: "bookmarks",
+    label: "Favoris",
+    iconType: t,
+    children: [
+      {
+        id: "important",
+        label: "Important",
+        iconType: e.CUSTOM,
+        customIcon: l
+      }
+    ]
+  },
+  ...c
+], T = {
   args: {
-    items: e
+    items: c,
+    onItemSelect: (i, o) => {
+      console.log(`Élément sélectionné: ${o}`);
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Exemple de base avec des icônes standard."
+      }
+    }
   }
-}, h = {
+}, I = {
   args: {
-    items: e,
-    folderIcon: n
+    items: a,
+    onItemSelect: (i, o) => {
+      console.log(`Élément sélectionné: ${o}`);
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."
+      }
+    }
   }
-}, p = {
+}, b = {
   args: {
-    items: e,
-    onItemSelect: (c, t) => {
-      console.log(`Selected item: ${t}`);
+    items: [
+      {
+        id: "root",
+        label: "Structure imbriquée complexe",
+        iconType: e.FOLDER,
+        children: [
+          {
+            id: "level1-1",
+            label: "Niveau 1.1",
+            iconType: e.FOLDER,
+            children: [
+              {
+                id: "level2-1",
+                label: "Niveau 2.1",
+                iconType: e.FOLDER,
+                children: [
+                  {
+                    id: "level3-1",
+                    label: "Niveau 3.1",
+                    iconType: e.FOLDER
+                  },
+                  {
+                    id: "level3-2",
+                    label: "Niveau 3.2",
+                    iconType: e.SHARE
+                  }
+                ]
+              },
+              {
+                id: "level2-2",
+                label: "Niveau 2.2",
+                iconType: e.TRASH
+              }
+            ]
+          },
+          {
+            id: "level1-2",
+            label: "Niveau 1.2",
+            iconType: e.CUSTOM,
+            customIcon: t
+          }
+        ]
+      }
+    ],
+    onItemSelect: (i, o) => {
+      console.log(`Élément sélectionné: ${o}`);
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau."
+      }
     }
   }
 };
 export {
-  a as Default,
-  h as WithCustomIcon,
-  p as WithItemSelect,
-  m as default
+  I as AvecIconesPersonnalisees,
+  T as Default,
+  b as StructureImbriquee,
+  u as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.4.0-dev.1741961819",
+  "version": "1.4.0-dev.1741972878",
   "private": false,
   "author": "CGI Learning-hub Team",
   "description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",