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

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,34 @@
-"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 n=require("react/jsx-runtime"),c=require("../../createSvgIcon-DJMYlO0S.cjs"),r=require("react"),e=require("../TreeView/TreeView.cjs.js"),u=require("../../Box-DYA49L7w.cjs"),m=require("../../Typography-DPij13XT.cjs"),l=c.createSvgIcon(n.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"),p=c.createSvgIcon(n.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"),I={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"}}},expandedItemId:{description:"ID de l'élément à développer automatiquement.",control:"text",table:{type:{summary:"string"}}},iconColor:{description:"Couleur des icônes.",control:"select",options:["primary","secondary","success","error","info","warning"],defaultValue:"primary",table:{type:{summary:"string"},defaultValue:{summary:"primary"}}}},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\`.
+
+### Navigation et sélection
+
+- \`onItemSelect\`: Permet de réagir quand un utilisateur clique sur un élément
+- \`expandedItemId\`: Permet d'ouvrir automatiquement un dossier spécifique
+
+### 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)
+}
+\`\`\`
+        `}}}},T=({items:o})=>{const[t,a]=r.useState(void 0),d=r.useCallback((O,s)=>{console.log(`Élément sélectionné: ${s}`),a(s)},[]);return n.jsxs(u.Box,{children:[n.jsxs(m.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Sélection actuelle: ",t||"Aucun élément sélectionné"]}),n.jsx(e.default,{items:o,onItemSelect:d,expandedItemId:t})]})},i=[{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}],y=[{id:"bookmarks",label:"Favoris",iconType:l,children:[{id:"important",label:"Important",iconType:e.ICON_TYPE.CUSTOM,customIcon:p}]},...i],v={render:()=>n.jsx(T,{items:i}),parameters:{docs:{description:{story:"Exemple de base avec des icônes standard et démonstration de sélection."}}}},b={args:{items:i,expandedItemId:"subfolder1",onItemSelect:(o,t)=>{console.log(`Élément sélectionné: ${t}`)}},parameters:{docs:{description:{story:"Exemple avec développement automatique d'un dossier spécifique."}}}},E={args:{items:y,onItemSelect:(o,t)=>{console.log(`Élément sélectionné: ${t}`)}},parameters:{docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."}}}},f={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:l}]}],onItemSelect:(o,t)=>{console.log(`Élément sélectionné: ${t}`)}},parameters:{docs:{description:{story:"Exemple d'une structure profondément imbriquée avec différents types d'icônes à chaque niveau."}}}};exports.AvecIconesPersonnalisees=E;exports.Default=v;exports.StructureImbriquee=f;exports.WithExplicitExpand=b;exports.default=I;

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

@@ -4,5 +4,6 @@ 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 WithExplicitExpand: Story;
+export declare const AvecIconesPersonnalisees: Story;
+export declare const StructureImbriquee: Story;

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

@@ -1,86 +1,272 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } 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 { useState as p, useCallback as u } from "react";
+import c, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
+import { B as I } from "../../Box-DgqaLb7j.js";
+import { T } from "../../Typography-SIQ6eleU.js";
+const a = l(/* @__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"), y = l(/* @__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"), x = {
   title: "Components/TreeView",
-  component: i,
+  component: c,
   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,
+    expandedItemId: {
+      description: "ID de l'élément à développer automatiquement.",
+      control: "text",
       table: {
-        type: { summary: "SvgIconComponent" }
+        type: { summary: "string" }
+      }
+    },
+    iconColor: {
+      description: "Couleur des icônes.",
+      control: "select",
+      options: ["primary", "secondary", "success", "error", "info", "warning"],
+      defaultValue: "primary",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "primary" }
+      }
+    }
+  },
+  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\`.
+
+### Navigation et sélection
+
+- \`onItemSelect\`: Permet de réagir quand un utilisateur clique sur un élément
+- \`expandedItemId\`: Permet d'ouvrir automatiquement un dossier spécifique
+
+### 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 = [
+}, f = ({ items: o }) => {
+  const [t, d] = p(void 0), m = u(
+    (v, s) => {
+      console.log(`Élément sélectionné: ${s}`), d(s);
+    },
+    []
+  );
+  return /* @__PURE__ */ r(I, { children: [
+    /* @__PURE__ */ r(T, { variant: "subtitle1", gutterBottom: !0, children: [
+      "Sélection actuelle: ",
+      t || "Aucun élément sélectionné"
+    ] }),
+    /* @__PURE__ */ n(
+      c,
+      {
+        items: o,
+        onItemSelect: m,
+        expandedItemId: t
+      }
+    )
+  ] });
+}, i = [
   {
-    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
+  }
+], b = [
+  {
+    id: "bookmarks",
+    label: "Favoris",
+    iconType: a,
+    children: [
+      {
+        id: "important",
+        label: "Important",
+        iconType: e.CUSTOM,
+        customIcon: y
       }
     ]
+  },
+  ...i
+], R = {
+  render: () => /* @__PURE__ */ n(f, { items: i }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Exemple de base avec des icônes standard et démonstration de sélection."
+      }
+    }
   }
-], a = {
+}, L = {
   args: {
-    items: e
+    items: i,
+    expandedItemId: "subfolder1",
+    onItemSelect: (o, t) => {
+      console.log(`Élément sélectionné: ${t}`);
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Exemple avec développement automatique d'un dossier spécifique."
+      }
+    }
   }
-}, h = {
+}, q = {
   args: {
-    items: e,
-    folderIcon: n
+    items: b,
+    onItemSelect: (o, t) => {
+      console.log(`Élément sélectionné: ${t}`);
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."
+      }
+    }
   }
-}, p = {
+}, D = {
   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: a
+          }
+        ]
+      }
+    ],
+    onItemSelect: (o, t) => {
+      console.log(`Élément sélectionné: ${t}`);
+    }
+  },
+  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
+  q as AvecIconesPersonnalisees,
+  R as Default,
+  D as StructureImbriquee,
+  L as WithExplicitExpand,
+  x 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.1741974011",
   "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",