@cgi-learning-hub/ui 1.4.0-dev.1741974011 → 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 (6) 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 +804 -866
  4. package/dist/components/stories/TreeView.stories.cjs.js +6 -5
  5. package/dist/components/stories/TreeView.stories.es.js +48 -57
  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 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:`
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.
@@ -23,12 +23,13 @@ Vous pouvez également passer directement un composant SvgIcon comme valeur de \
23
23
  Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
24
24
 
25
25
  \`\`\`typescript
26
- interface CustomTreeViewItem extends TreeViewBaseItem {
27
- id: string; // Identifiant unique de l'élément (obligatoire)
26
+ interface CustomTreeViewItemProps {
27
+ internalId: string; // Identifiant unique de l'élément (obligatoire)
28
28
  label: string; // Libellé à afficher (obligatoire)
29
- children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
30
29
  iconType?: IconType; // Type d'icône (facultatif)
31
30
  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
32
31
  }
32
+
33
+ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
33
34
  \`\`\`
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;
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.es.js CHANGED
@@ -1,16 +1,16 @@
1
- import { jsx as n, jsxs as r } from "react/jsx-runtime";
1
+ import { jsx as o, jsxs as r } from "react/jsx-runtime";
2
2
  import { c as l } from "../../createSvgIcon-K1Hd8ryN.js";
3
3
  import { useState as p, useCallback as u } from "react";
4
- import c, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
4
+ import a, { ICON_TYPE as e } from "../TreeView/TreeView.es.js";
5
5
  import { B as I } from "../../Box-DgqaLb7j.js";
6
6
  import { T } from "../../Typography-SIQ6eleU.js";
7
- const a = l(/* @__PURE__ */ n("path", {
7
+ const c = l(/* @__PURE__ */ o("path", {
8
8
  d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
9
- }), "Bookmark"), y = l(/* @__PURE__ */ n("path", {
9
+ }), "Bookmark"), y = l(/* @__PURE__ */ o("path", {
10
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"
11
- }), "Person"), x = {
11
+ }), "Person"), R = {
12
12
  title: "Components/TreeView",
13
- component: c,
13
+ component: a,
14
14
  argTypes: {
15
15
  items: {
16
16
  description: "Liste des éléments à afficher dans le TreeView.",
@@ -21,20 +21,12 @@ const a = l(/* @__PURE__ */ n("path", {
21
21
  },
22
22
  onItemSelect: {
23
23
  description: "Fonction appelée lorsqu'un élément est sélectionné.",
24
- control: "none",
25
24
  table: {
26
25
  type: {
27
26
  summary: "(event: React.SyntheticEvent, itemId: string) => void"
28
27
  }
29
28
  }
30
29
  },
31
- expandedItemId: {
32
- description: "ID de l'élément à développer automatiquement.",
33
- control: "text",
34
- table: {
35
- type: { summary: "string" }
36
- }
37
- },
38
30
  iconColor: {
39
31
  description: "Couleur des icônes.",
40
32
  control: "select",
@@ -74,20 +66,21 @@ Vous pouvez également passer directement un composant SvgIcon comme valeur de \
74
66
  Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
75
67
 
76
68
  \`\`\`typescript
77
- interface CustomTreeViewItem extends TreeViewBaseItem {
78
- id: string; // Identifiant unique de l'élément (obligatoire)
69
+ interface CustomTreeViewItemProps {
70
+ internalId: string; // Identifiant unique de l'élément (obligatoire)
79
71
  label: string; // Libellé à afficher (obligatoire)
80
- children?: CustomTreeViewItem[]; // Sous-éléments (facultatif)
81
72
  iconType?: IconType; // Type d'icône (facultatif)
82
73
  customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
83
74
  }
75
+
76
+ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
84
77
  \`\`\`
85
78
  `
86
79
  }
87
80
  }
88
81
  }
89
- }, f = ({ items: o }) => {
90
- const [t, d] = p(void 0), m = u(
82
+ }, f = ({ items: t }) => {
83
+ const [n, d] = p(void 0), m = u(
91
84
  (v, s) => {
92
85
  console.log(`Élément sélectionné: ${s}`), d(s);
93
86
  },
@@ -96,70 +89,69 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
96
89
  return /* @__PURE__ */ r(I, { children: [
97
90
  /* @__PURE__ */ r(T, { variant: "subtitle1", gutterBottom: !0, children: [
98
91
  "Sélection actuelle: ",
99
- t || "Aucun élément sélectionné"
92
+ n || "Aucun élément sélectionné"
100
93
  ] }),
101
- /* @__PURE__ */ n(
102
- c,
94
+ /* @__PURE__ */ o(
95
+ a,
103
96
  {
104
- items: o,
105
- onItemSelect: m,
106
- expandedItemId: t
97
+ items: t,
98
+ onItemSelect: m
107
99
  }
108
100
  )
109
101
  ] });
110
102
  }, i = [
111
103
  {
112
- id: "documents",
104
+ internalId: "documents",
113
105
  label: "Mes formulaires",
114
106
  iconType: e.FOLDER,
115
107
  children: [
116
108
  {
117
- id: "folder1",
109
+ internalId: "folder1",
118
110
  label: "Premier dossier",
119
111
  iconType: e.FOLDER,
120
112
  children: [
121
113
  {
122
- id: "subfolder1",
114
+ internalId: "subfolder1",
123
115
  label: "Sous-dossier 1",
124
116
  iconType: e.FOLDER
125
117
  },
126
118
  {
127
- id: "subfolder2",
119
+ internalId: "subfolder2",
128
120
  label: "Sous-dossier 2",
129
121
  iconType: e.FOLDER
130
122
  }
131
123
  ]
132
124
  },
133
125
  {
134
- id: "folder2",
126
+ internalId: "folder2",
135
127
  label: "Deuxième dossier",
136
128
  iconType: e.FOLDER
137
129
  },
138
130
  {
139
- id: "folder3",
131
+ internalId: "folder3",
140
132
  label: "Troisième dossier",
141
133
  iconType: e.FOLDER
142
134
  }
143
135
  ]
144
136
  },
145
137
  {
146
- id: "shared",
138
+ internalId: "shared",
147
139
  label: "Formulaires partagés avec moi",
148
140
  iconType: e.SHARE
149
141
  },
150
142
  {
151
- id: "trash",
143
+ internalId: "trash",
152
144
  label: "Corbeille",
153
145
  iconType: e.TRASH
154
146
  }
155
147
  ], b = [
156
148
  {
157
- id: "bookmarks",
149
+ internalId: "bookmarks",
158
150
  label: "Favoris",
159
- iconType: a,
151
+ iconType: c,
160
152
  children: [
161
153
  {
162
- id: "important",
154
+ internalId: "important",
163
155
  label: "Important",
164
156
  iconType: e.CUSTOM,
165
157
  customIcon: y
@@ -167,8 +159,8 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
167
159
  ]
168
160
  },
169
161
  ...i
170
- ], R = {
171
- render: () => /* @__PURE__ */ n(f, { items: i }),
162
+ ], L = {
163
+ render: () => /* @__PURE__ */ o(f, { items: i }),
172
164
  parameters: {
173
165
  docs: {
174
166
  description: {
@@ -176,12 +168,11 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
176
168
  }
177
169
  }
178
170
  }
179
- }, L = {
171
+ }, V = {
180
172
  args: {
181
173
  items: i,
182
- expandedItemId: "subfolder1",
183
- onItemSelect: (o, t) => {
184
- console.log(`Élément sélectionné: ${t}`);
174
+ onItemSelect: (t, n) => {
175
+ console.log(`Élément sélectionné: ${n}`);
185
176
  }
186
177
  },
187
178
  parameters: {
@@ -194,8 +185,8 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
194
185
  }, q = {
195
186
  args: {
196
187
  items: b,
197
- onItemSelect: (o, t) => {
198
- console.log(`Élément sélectionné: ${t}`);
188
+ onItemSelect: (t, n) => {
189
+ console.log(`Élément sélectionné: ${n}`);
199
190
  }
200
191
  },
201
192
  parameters: {
@@ -209,50 +200,50 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
209
200
  args: {
210
201
  items: [
211
202
  {
212
- id: "root",
203
+ internalId: "root",
213
204
  label: "Structure imbriquée complexe",
214
205
  iconType: e.FOLDER,
215
206
  children: [
216
207
  {
217
- id: "level1-1",
208
+ internalId: "level1-1",
218
209
  label: "Niveau 1.1",
219
210
  iconType: e.FOLDER,
220
211
  children: [
221
212
  {
222
- id: "level2-1",
213
+ internalId: "level2-1",
223
214
  label: "Niveau 2.1",
224
215
  iconType: e.FOLDER,
225
216
  children: [
226
217
  {
227
- id: "level3-1",
218
+ internalId: "level3-1",
228
219
  label: "Niveau 3.1",
229
220
  iconType: e.FOLDER
230
221
  },
231
222
  {
232
- id: "level3-2",
223
+ internalId: "level3-2",
233
224
  label: "Niveau 3.2",
234
225
  iconType: e.SHARE
235
226
  }
236
227
  ]
237
228
  },
238
229
  {
239
- id: "level2-2",
230
+ internalId: "level2-2",
240
231
  label: "Niveau 2.2",
241
232
  iconType: e.TRASH
242
233
  }
243
234
  ]
244
235
  },
245
236
  {
246
- id: "level1-2",
237
+ internalId: "level1-2",
247
238
  label: "Niveau 1.2",
248
239
  iconType: e.CUSTOM,
249
- customIcon: a
240
+ customIcon: c
250
241
  }
251
242
  ]
252
243
  }
253
244
  ],
254
- onItemSelect: (o, t) => {
255
- console.log(`Élément sélectionné: ${t}`);
245
+ onItemSelect: (t, n) => {
246
+ console.log(`Élément sélectionné: ${n}`);
256
247
  }
257
248
  },
258
249
  parameters: {
@@ -265,8 +256,8 @@ interface CustomTreeViewItem extends TreeViewBaseItem {
265
256
  };
266
257
  export {
267
258
  q as AvecIconesPersonnalisees,
268
- R as Default,
259
+ L as Default,
269
260
  D as StructureImbriquee,
270
- L as WithExplicitExpand,
271
- x as default
261
+ V as WithExplicitExpand,
262
+ R as default
272
263
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cgi-learning-hub/ui",
3
- "version": "1.4.0-dev.1741974011",
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",