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

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 (7) hide show
  1. package/dist/components/TreeView/TreeView.cjs.js +9 -9
  2. package/dist/components/TreeView/TreeView.d.ts +1 -2
  3. package/dist/components/TreeView/TreeView.es.js +775 -809
  4. package/dist/components/stories/TreeView.stories.cjs.js +11 -5
  5. package/dist/components/stories/TreeView.stories.d.ts +1 -0
  6. package/dist/components/stories/TreeView.stories.es.js +98 -50
  7. 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"),l=require("../../createSvgIcon-DJMYlO0S.cjs"),r=require("react"),e=require("../TreeView/TreeView.cjs.js"),u=require("../../Box-DYA49L7w.cjs"),m=require("../../Typography-DPij13XT.cjs"),c=l.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=l.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é.",table:{type:{summary:"(event: React.SyntheticEvent, itemId: string) => void"}}},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,17 +13,23 @@ 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:
19
24
 
20
25
  \`\`\`typescript
21
- interface CustomTreeViewItem extends TreeViewBaseItem {
22
- id: string; // Identifiant unique de l'élément (obligatoire)
26
+ interface CustomTreeViewItemProps {
27
+ internalId: string; // Identifiant unique de l'élément (obligatoire)
23
28
  label: string; // Libellé à afficher (obligatoire)
24
- children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
25
29
  iconType?: IconType; // Type d'icône (facultatif)
26
30
  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
27
31
  }
32
+
33
+ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
28
34
  \`\`\`
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;
35
+ `}}}},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})]})},i=[{internalId:"documents",label:"Mes formulaires",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"folder1",label:"Premier dossier",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"subfolder1",label:"Sous-dossier 1",iconType:e.ICON_TYPE.FOLDER},{internalId:"subfolder2",label:"Sous-dossier 2",iconType:e.ICON_TYPE.FOLDER}]},{internalId:"folder2",label:"Deuxième dossier",iconType:e.ICON_TYPE.FOLDER},{internalId:"folder3",label:"Troisième dossier",iconType:e.ICON_TYPE.FOLDER}]},{internalId:"shared",label:"Formulaires partagés avec moi",iconType:e.ICON_TYPE.SHARE},{internalId:"trash",label:"Corbeille",iconType:e.ICON_TYPE.TRASH}],y=[{internalId:"bookmarks",label:"Favoris",iconType:c,children:[{internalId:"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."}}}},E={args:{items:i,onItemSelect:(o,t)=>{console.log(`Élément sélectionné: ${t}`)}},parameters:{docs:{description:{story:"Exemple avec développement automatique d'un dossier spécifique."}}}},b={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:[{internalId:"root",label:"Structure imbriquée complexe",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"level1-1",label:"Niveau 1.1",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"level2-1",label:"Niveau 2.1",iconType:e.ICON_TYPE.FOLDER,children:[{internalId:"level3-1",label:"Niveau 3.1",iconType:e.ICON_TYPE.FOLDER},{internalId:"level3-2",label:"Niveau 3.2",iconType:e.ICON_TYPE.SHARE}]},{internalId:"level2-2",label:"Niveau 2.2",iconType:e.ICON_TYPE.TRASH}]},{internalId:"level1-2",label:"Niveau 1.2",iconType:e.ICON_TYPE.CUSTOM,customIcon:c}]}],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=b;exports.Default=v;exports.StructureImbriquee=f;exports.WithExplicitExpand=E;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 o, 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 a, { 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 c = l(/* @__PURE__ */ o("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__ */ o("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"), R = {
9
12
  title: "Components/TreeView",
10
- component: r,
13
+ component: a,
11
14
  argTypes: {
12
15
  items: {
13
16
  description: "Liste des éléments à afficher dans le TreeView.",
@@ -18,12 +21,21 @@ const t = s(/* @__PURE__ */ n("path", {
18
21
  },
19
22
  onItemSelect: {
20
23
  description: "Fonction appelée lorsqu'un élément est sélectionné.",
21
- control: "none",
22
24
  table: {
23
25
  type: {
24
26
  summary: "(event: React.SyntheticEvent, itemId: string) => void"
25
27
  }
26
28
  }
29
+ },
30
+ iconColor: {
31
+ description: "Couleur des icônes.",
32
+ control: "select",
33
+ options: ["primary", "secondary", "success", "error", "info", "warning"],
34
+ defaultValue: "primary",
35
+ table: {
36
+ type: { summary: "string" },
37
+ defaultValue: { summary: "primary" }
38
+ }
27
39
  }
28
40
  },
29
41
  parameters: {
@@ -44,102 +56,137 @@ Le TreeView permet de personnaliser les icônes selon les types suivants:
44
56
 
45
57
  Vous pouvez également passer directement un composant SvgIcon comme valeur de \`iconType\`.
46
58
 
59
+ ### Navigation et sélection
60
+
61
+ - \`onItemSelect\`: Permet de réagir quand un utilisateur clique sur un élément
62
+ - \`expandedItemId\`: Permet d'ouvrir automatiquement un dossier spécifique
63
+
47
64
  ### Structure des données
48
65
 
49
66
  Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
50
67
 
51
68
  \`\`\`typescript
52
- interface CustomTreeViewItem extends TreeViewBaseItem {
53
- id: string; // Identifiant unique de l'élément (obligatoire)
69
+ interface CustomTreeViewItemProps {
70
+ internalId: string; // Identifiant unique de l'élément (obligatoire)
54
71
  label: string; // Libellé à afficher (obligatoire)
55
- children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
56
72
  iconType?: IconType; // Type d'icône (facultatif)
57
73
  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
58
74
  }
75
+
76
+ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
59
77
  \`\`\`
60
78
  `
61
79
  }
62
80
  }
63
81
  }
64
- }, c = [
82
+ }, f = ({ items: t }) => {
83
+ const [n, d] = p(void 0), m = u(
84
+ (v, s) => {
85
+ console.log(`Élément sélectionné: ${s}`), d(s);
86
+ },
87
+ []
88
+ );
89
+ return /* @__PURE__ */ r(I, { children: [
90
+ /* @__PURE__ */ r(T, { variant: "subtitle1", gutterBottom: !0, children: [
91
+ "Sélection actuelle: ",
92
+ n || "Aucun élément sélectionné"
93
+ ] }),
94
+ /* @__PURE__ */ o(
95
+ a,
96
+ {
97
+ items: t,
98
+ onItemSelect: m
99
+ }
100
+ )
101
+ ] });
102
+ }, i = [
65
103
  {
66
- id: "documents",
104
+ internalId: "documents",
67
105
  label: "Mes formulaires",
68
106
  iconType: e.FOLDER,
69
107
  children: [
70
108
  {
71
- id: "folder1",
109
+ internalId: "folder1",
72
110
  label: "Premier dossier",
73
111
  iconType: e.FOLDER,
74
112
  children: [
75
113
  {
76
- id: "subfolder1",
114
+ internalId: "subfolder1",
77
115
  label: "Sous-dossier 1",
78
116
  iconType: e.FOLDER
79
117
  },
80
118
  {
81
- id: "subfolder2",
119
+ internalId: "subfolder2",
82
120
  label: "Sous-dossier 2",
83
121
  iconType: e.FOLDER
84
122
  }
85
123
  ]
86
124
  },
87
125
  {
88
- id: "folder2",
126
+ internalId: "folder2",
89
127
  label: "Deuxième dossier",
90
128
  iconType: e.FOLDER
91
129
  },
92
130
  {
93
- id: "folder3",
131
+ internalId: "folder3",
94
132
  label: "Troisième dossier",
95
133
  iconType: e.FOLDER
96
134
  }
97
135
  ]
98
136
  },
99
137
  {
100
- id: "shared",
138
+ internalId: "shared",
101
139
  label: "Formulaires partagés avec moi",
102
140
  iconType: e.SHARE
103
141
  },
104
142
  {
105
- id: "trash",
143
+ internalId: "trash",
106
144
  label: "Corbeille",
107
145
  iconType: e.TRASH
108
146
  }
109
- ], a = [
147
+ ], b = [
110
148
  {
111
- id: "bookmarks",
149
+ internalId: "bookmarks",
112
150
  label: "Favoris",
113
- iconType: t,
151
+ iconType: c,
114
152
  children: [
115
153
  {
116
- id: "important",
154
+ internalId: "important",
117
155
  label: "Important",
118
156
  iconType: e.CUSTOM,
119
- customIcon: l
157
+ customIcon: y
120
158
  }
121
159
  ]
122
160
  },
123
- ...c
124
- ], T = {
161
+ ...i
162
+ ], L = {
163
+ render: () => /* @__PURE__ */ o(f, { items: i }),
164
+ parameters: {
165
+ docs: {
166
+ description: {
167
+ story: "Exemple de base avec des icônes standard et démonstration de sélection."
168
+ }
169
+ }
170
+ }
171
+ }, V = {
125
172
  args: {
126
- items: c,
127
- onItemSelect: (i, o) => {
128
- console.log(`Élément sélectionné: ${o}`);
173
+ items: i,
174
+ onItemSelect: (t, n) => {
175
+ console.log(`Élément sélectionné: ${n}`);
129
176
  }
130
177
  },
131
178
  parameters: {
132
179
  docs: {
133
180
  description: {
134
- story: "Exemple de base avec des icônes standard."
181
+ story: "Exemple avec développement automatique d'un dossier spécifique."
135
182
  }
136
183
  }
137
184
  }
138
- }, I = {
185
+ }, q = {
139
186
  args: {
140
- items: a,
141
- onItemSelect: (i, o) => {
142
- console.log(`Élément sélectionné: ${o}`);
187
+ items: b,
188
+ onItemSelect: (t, n) => {
189
+ console.log(`Élément sélectionné: ${n}`);
143
190
  }
144
191
  },
145
192
  parameters: {
@@ -149,54 +196,54 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
149
196
  }
150
197
  }
151
198
  }
152
- }, b = {
199
+ }, D = {
153
200
  args: {
154
201
  items: [
155
202
  {
156
- id: "root",
203
+ internalId: "root",
157
204
  label: "Structure imbriquée complexe",
158
205
  iconType: e.FOLDER,
159
206
  children: [
160
207
  {
161
- id: "level1-1",
208
+ internalId: "level1-1",
162
209
  label: "Niveau 1.1",
163
210
  iconType: e.FOLDER,
164
211
  children: [
165
212
  {
166
- id: "level2-1",
213
+ internalId: "level2-1",
167
214
  label: "Niveau 2.1",
168
215
  iconType: e.FOLDER,
169
216
  children: [
170
217
  {
171
- id: "level3-1",
218
+ internalId: "level3-1",
172
219
  label: "Niveau 3.1",
173
220
  iconType: e.FOLDER
174
221
  },
175
222
  {
176
- id: "level3-2",
223
+ internalId: "level3-2",
177
224
  label: "Niveau 3.2",
178
225
  iconType: e.SHARE
179
226
  }
180
227
  ]
181
228
  },
182
229
  {
183
- id: "level2-2",
230
+ internalId: "level2-2",
184
231
  label: "Niveau 2.2",
185
232
  iconType: e.TRASH
186
233
  }
187
234
  ]
188
235
  },
189
236
  {
190
- id: "level1-2",
237
+ internalId: "level1-2",
191
238
  label: "Niveau 1.2",
192
239
  iconType: e.CUSTOM,
193
- customIcon: t
240
+ customIcon: c
194
241
  }
195
242
  ]
196
243
  }
197
244
  ],
198
- onItemSelect: (i, o) => {
199
- console.log(`Élément sélectionné: ${o}`);
245
+ onItemSelect: (t, n) => {
246
+ console.log(`Élément sélectionné: ${n}`);
200
247
  }
201
248
  },
202
249
  parameters: {
@@ -208,8 +255,9 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
208
255
  }
209
256
  };
210
257
  export {
211
- I as AvecIconesPersonnalisees,
212
- T as Default,
213
- b as StructureImbriquee,
214
- u as default
258
+ q as AvecIconesPersonnalisees,
259
+ L as Default,
260
+ D as StructureImbriquee,
261
+ V as WithExplicitExpand,
262
+ R as default
215
263
  };
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.1741976077",
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",