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

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.
Files changed (6) hide show
  1. package/dist/components/TreeView/TreeView.cjs.js +8 -8
  2. package/dist/components/TreeView/TreeView.es.js +831 -803
  3. package/dist/components/stories/TreeView.stories.cjs.js +7 -2
  4. package/dist/components/stories/TreeView.stories.d.ts +1 -0
  5. package/dist/components/stories/TreeView.stories.es.js +86 -29
  6. package/package.json +1 -1
package/dist/components/stories/TreeView.stories.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "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:`
1
+ "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:`
2
2
  ## TreeView
3
3
 
4
4
  Un composant pour afficher des données hiérarchiques sous forme d'arborescence.
@@ -13,6 +13,11 @@ Le TreeView permet de personnaliser les icônes selon les types suivants:
13
13
 
14
14
  Vous pouvez également passer directement un composant SvgIcon comme valeur de \`iconType\`.
15
15
 
16
+ ### Navigation et sélection
17
+
18
+ - \`onItemSelect\`: Permet de réagir quand un utilisateur clique sur un élément
19
+ - \`expandedItemId\`: Permet d'ouvrir automatiquement un dossier spécifique
20
+
16
21
  ### Structure des données
17
22
 
18
23
  Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
@@ -26,4 +31,4 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
26
31
  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
27
32
  }
28
33
  \`\`\`
29
- `}}}},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;
34
+ `}}}},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 CHANGED
@@ -4,5 +4,6 @@ declare const meta: Meta<typeof TreeView>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof TreeView>;
6
6
  export declare const Default: Story;
7
+ export declare const WithExplicitExpand: Story;
7
8
  export declare const AvecIconesPersonnalisees: Story;
8
9
  export declare const StructureImbriquee: Story;
package/dist/components/stories/TreeView.stories.es.js CHANGED
@@ -1,13 +1,16 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import { c as s } from "../../createSvgIcon-K1Hd8ryN.js";
3
- import r, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
4
- const t = s(/* @__PURE__ */ n("path", {
1
+ import { jsx as n, jsxs as r } from "react/jsx-runtime";
2
+ import { c as l } from "../../createSvgIcon-K1Hd8ryN.js";
3
+ import { useState as p, useCallback as u } from "react";
4
+ import c, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
5
+ import { B as I } from "../../Box-DgqaLb7j.js";
6
+ import { T } from "../../Typography-SIQ6eleU.js";
7
+ const a = l(/* @__PURE__ */ n("path", {
5
8
  d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
6
- }), "Bookmark"), l = s(/* @__PURE__ */ n("path", {
9
+ }), "Bookmark"), y = l(/* @__PURE__ */ n("path", {
7
10
  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"
8
- }), "Person"), u = {
11
+ }), "Person"), x = {
9
12
  title: "Components/TreeView",
10
- component: r,
13
+ component: c,
11
14
  argTypes: {
12
15
  items: {
13
16
  description: "Liste des éléments à afficher dans le TreeView.",
@@ -24,6 +27,23 @@ const t = s(/* @__PURE__ */ n("path", {
24
27
  summary: "(event: React.SyntheticEvent, itemId: string) => void"
25
28
  }
26
29
  }
30
+ },
31
+ expandedItemId: {
32
+ description: "ID de l'élément à développer automatiquement.",
33
+ control: "text",
34
+ table: {
35
+ type: { summary: "string" }
36
+ }
37
+ },
38
+ iconColor: {
39
+ description: "Couleur des icônes.",
40
+ control: "select",
41
+ options: ["primary", "secondary", "success", "error", "info", "warning"],
42
+ defaultValue: "primary",
43
+ table: {
44
+ type: { summary: "string" },
45
+ defaultValue: { summary: "primary" }
46
+ }
27
47
  }
28
48
  },
29
49
  parameters: {
@@ -44,6 +64,11 @@ Le TreeView permet de personnaliser les icônes selon les types suivants:
44
64
 
45
65
  Vous pouvez également passer directement un composant SvgIcon comme valeur de \`iconType\`.
46
66
 
67
+ ### Navigation et sélection
68
+
69
+ - \`onItemSelect\`: Permet de réagir quand un utilisateur clique sur un élément
70
+ - \`expandedItemId\`: Permet d'ouvrir automatiquement un dossier spécifique
71
+
47
72
  ### Structure des données
48
73
 
49
74
  Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
@@ -61,7 +86,28 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
61
86
  }
62
87
  }
63
88
  }
64
- }, c = [
89
+ }, f = ({ items: o }) => {
90
+ const [t, d] = p(void 0), m = u(
91
+ (v, s) => {
92
+ console.log(`Élément sélectionné: ${s}`), d(s);
93
+ },
94
+ []
95
+ );
96
+ return /* @__PURE__ */ r(I, { children: [
97
+ /* @__PURE__ */ r(T, { variant: "subtitle1", gutterBottom: !0, children: [
98
+ "Sélection actuelle: ",
99
+ t || "Aucun élément sélectionné"
100
+ ] }),
101
+ /* @__PURE__ */ n(
102
+ c,
103
+ {
104
+ items: o,
105
+ onItemSelect: m,
106
+ expandedItemId: t
107
+ }
108
+ )
109
+ ] });
110
+ }, i = [
65
111
  {
66
112
  id: "documents",
67
113
  label: "Mes formulaires",
@@ -106,40 +152,50 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
106
152
  label: "Corbeille",
107
153
  iconType: e.TRASH
108
154
  }
109
- ], a = [
155
+ ], b = [
110
156
  {
111
157
  id: "bookmarks",
112
158
  label: "Favoris",
113
- iconType: t,
159
+ iconType: a,
114
160
  children: [
115
161
  {
116
162
  id: "important",
117
163
  label: "Important",
118
164
  iconType: e.CUSTOM,
119
- customIcon: l
165
+ customIcon: y
120
166
  }
121
167
  ]
122
168
  },
123
- ...c
124
- ], T = {
169
+ ...i
170
+ ], R = {
171
+ render: () => /* @__PURE__ */ n(f, { items: i }),
172
+ parameters: {
173
+ docs: {
174
+ description: {
175
+ story: "Exemple de base avec des icônes standard et démonstration de sélection."
176
+ }
177
+ }
178
+ }
179
+ }, L = {
125
180
  args: {
126
- items: c,
127
- onItemSelect: (i, o) => {
128
- console.log(`Élément sélectionné: ${o}`);
181
+ items: i,
182
+ expandedItemId: "subfolder1",
183
+ onItemSelect: (o, t) => {
184
+ console.log(`Élément sélectionné: ${t}`);
129
185
  }
130
186
  },
131
187
  parameters: {
132
188
  docs: {
133
189
  description: {
134
- story: "Exemple de base avec des icônes standard."
190
+ story: "Exemple avec développement automatique d'un dossier spécifique."
135
191
  }
136
192
  }
137
193
  }
138
- }, I = {
194
+ }, q = {
139
195
  args: {
140
- items: a,
141
- onItemSelect: (i, o) => {
142
- console.log(`Élément sélectionné: ${o}`);
196
+ items: b,
197
+ onItemSelect: (o, t) => {
198
+ console.log(`Élément sélectionné: ${t}`);
143
199
  }
144
200
  },
145
201
  parameters: {
@@ -149,7 +205,7 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
149
205
  }
150
206
  }
151
207
  }
152
- }, b = {
208
+ }, D = {
153
209
  args: {
154
210
  items: [
155
211
  {
@@ -190,13 +246,13 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
190
246
  id: "level1-2",
191
247
  label: "Niveau 1.2",
192
248
  iconType: e.CUSTOM,
193
- customIcon: t
249
+ customIcon: a
194
250
  }
195
251
  ]
196
252
  }
197
253
  ],
198
- onItemSelect: (i, o) => {
199
- console.log(`Élément sélectionné: ${o}`);
254
+ onItemSelect: (o, t) => {
255
+ console.log(`Élément sélectionné: ${t}`);
200
256
  }
201
257
  },
202
258
  parameters: {
@@ -208,8 +264,9 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
208
264
  }
209
265
  };
210
266
  export {
211
- I as AvecIconesPersonnalisees,
212
- T as Default,
213
- b as StructureImbriquee,
214
- u as default
267
+ q as AvecIconesPersonnalisees,
268
+ R as Default,
269
+ D as StructureImbriquee,
270
+ L as WithExplicitExpand,
271
+ x as default
215
272
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cgi-learning-hub/ui",
3
- "version": "1.4.0-dev.1741972878",
3
+ "version": "1.4.0-dev.1741974011",
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",