@scm-manager/ui-core 4.0.0-REACT18-20250701-125025 → 4.0.0-REACT18-20250824-143504

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 (56) hide show
  1. package/{src/base/buttons/a11y.test.ts → .storybook/i18n.ts} +27 -9
  2. package/.storybook/main.ts +54 -0
  3. package/.storybook/preview-head.html +6 -1
  4. package/.storybook/preview.tsx +125 -0
  5. package/.turbo/turbo-test.log +164 -0
  6. package/.turbo/turbo-typecheck.log +3 -2
  7. package/package.json +36 -41
  8. package/src/base/buttons/Button.stories.tsx +179 -70
  9. package/src/base/buttons/Button.tsx +9 -9
  10. package/src/base/forms/AddListEntryForm.tsx +8 -8
  11. package/src/base/forms/ConfigurationForm.tsx +14 -5
  12. package/src/base/forms/Form.stories.tsx +599 -289
  13. package/src/base/forms/Form.tsx +8 -8
  14. package/src/base/forms/FormPathContext.tsx +3 -3
  15. package/src/base/forms/ScmFormContext.tsx +7 -4
  16. package/src/base/forms/ScmFormListContext.tsx +2 -1
  17. package/src/base/forms/base/Field.tsx +1 -1
  18. package/src/base/forms/base/label/Label.tsx +1 -1
  19. package/src/base/forms/chip-input/ChipInputField.stories.tsx +109 -28
  20. package/src/base/forms/chip-input/ChipInputField.tsx +20 -8
  21. package/src/base/forms/chip-input/ControlledChipInputField.tsx +3 -1
  22. package/src/base/forms/combobox/Combobox.stories.tsx +216 -89
  23. package/src/base/forms/combobox/Combobox.tsx +4 -2
  24. package/src/base/forms/combobox/ComboboxField.tsx +2 -1
  25. package/src/base/forms/headless-chip-input/ChipInput.tsx +9 -9
  26. package/src/base/forms/helpers.ts +12 -9
  27. package/src/base/forms/input/ControlledSecretConfirmationField.tsx +4 -2
  28. package/src/base/forms/radio-button/RadioButton.stories.tsx +317 -124
  29. package/src/base/forms/radio-button/RadioButton.tsx +8 -4
  30. package/src/base/forms/radio-button/RadioButtonContext.tsx +2 -1
  31. package/src/base/forms/table/ControlledColumn.tsx +1 -1
  32. package/src/base/forms/table/ControlledTable.tsx +12 -4
  33. package/src/base/helpers/useDocumentTitle.test.ts +15 -7
  34. package/src/base/layout/card/Card.stories.tsx +171 -72
  35. package/src/base/layout/card/Card.tsx +4 -4
  36. package/src/base/layout/card/CardDetail.tsx +2 -3
  37. package/src/base/layout/card-list/CardList.stories.tsx +283 -169
  38. package/src/base/layout/collapsible/Collapsible.stories.tsx +54 -16
  39. package/src/base/layout/index.ts +2 -5
  40. package/src/base/layout/tabs/Tabs.stories.tsx +58 -16
  41. package/src/base/layout/templates/data-page/DataPage.stories.tsx +289 -156
  42. package/src/base/layout/templates/data-page/DataPageHeader.tsx +1 -1
  43. package/src/base/overlays/dialog/Dialog.stories.tsx +94 -34
  44. package/src/base/overlays/menu/Menu.stories.tsx +116 -48
  45. package/src/base/overlays/menu/Menu.tsx +1 -0
  46. package/src/base/overlays/popover/Popover.stories.tsx +50 -37
  47. package/src/base/shortcuts/iterator/keyboardIterator.test.tsx +16 -7
  48. package/src/base/shortcuts/iterator/keyboardIterator.tsx +13 -5
  49. package/src/base/status/StatusIcon.stories.tsx +76 -27
  50. package/src/base/status/index.ts +1 -1
  51. package/src/base/text/SplitAndReplace.stories.tsx +128 -50
  52. package/src/base/text/index.ts +1 -1
  53. package/.storybook/RemoveThemesPlugin.js +0 -49
  54. package/.storybook/main.js +0 -86
  55. package/.storybook/preview.js +0 -87
  56. package/src/base/buttons/image-snapshot.test.ts +0 -26
package/src/base/layout/card-list/CardList.stories.tsx CHANGED
@@ -14,180 +14,294 @@
14
14
  * along with this program. If not, see https://www.gnu.org/licenses/.
15
15
  */
16
16
 
17
- import StoryRouter from "storybook-react-router";
18
- import { ComponentMeta, ComponentStory } from "@storybook/react";
17
+ // import StoryRouter from "storybook-react-router";
18
+ // import { ComponentMeta, ComponentStory } from "@storybook/react";
19
+ // import React from "react";
20
+ // import { Link } from "react-router-dom";
21
+ // import CardList, { CardListBox, CardListCard } from "./CardList";
22
+ // import CardTitle from "../card/CardTitle";
23
+ // import { Menu } from "../../overlays";
24
+ // import { Icon } from "../../buttons";
25
+ // import CardRow, { SecondaryRow } from "../card/CardRow";
26
+ // import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag, CardLinkDetail } from "../card/CardDetail";
27
+ //
28
+ // export default {
29
+ // title: "CardList",
30
+ // component: CardList,
31
+ // decorators: [StoryRouter()],
32
+ // } as ComponentMeta<typeof CardList>;
33
+ //
34
+ // export const Default: ComponentStory<typeof CardListBox> = () => (
35
+ // <CardListBox>
36
+ // <CardListCard
37
+ // action={
38
+ // <Menu>
39
+ // <Menu.Button>
40
+ // <Icon>trash</Icon>
41
+ // Delete
42
+ // </Menu.Button>
43
+ // </Menu>
44
+ // }
45
+ // >
46
+ // <CardRow>
47
+ // Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
48
+ // dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
49
+ // clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
50
+ // consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
51
+ // diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
52
+ // takimata sanctus est Lorem ipsum dolor sit amet.
53
+ // </CardRow>
54
+ // </CardListCard>
55
+ // <CardListCard>
56
+ // <CardRow>
57
+ // <CardTitle>My favorite repository</CardTitle>
58
+ // </CardRow>
59
+ // </CardListCard>
60
+ // <CardListCard
61
+ // action={
62
+ // <Menu>
63
+ // <Menu.Button>
64
+ // <Icon>trash</Icon>
65
+ // Delete
66
+ // </Menu.Button>
67
+ // </Menu>
68
+ // }
69
+ // >
70
+ // <CardRow>
71
+ // <CardTitle level={5}>
72
+ // <Link aria-label="Edit My least liked repo" to="/cards/1">
73
+ // My favorite repository with a very long title and some other things
74
+ // </Link>
75
+ // </CardTitle>
76
+ // </CardRow>
77
+ // </CardListCard>
78
+ // <CardListCard>
79
+ // <CardRow>
80
+ // <CardTitle>
81
+ // <Link aria-label="Edit My least liked repo" to="/cards/1">
82
+ // My least liked repo
83
+ // </Link>
84
+ // </CardTitle>
85
+ // </CardRow>
86
+ // </CardListCard>
87
+ // <CardListCard
88
+ // action={
89
+ // <Menu>
90
+ // <Menu.Button>
91
+ // <Icon>trash</Icon>
92
+ // Delete
93
+ // </Menu.Button>
94
+ // </Menu>
95
+ // }
96
+ // >
97
+ // <CardRow className="is-flex is-justify-content-space-between">
98
+ // <CardTitle>
99
+ // <Link aria-label="Edit My other favorite repository" to="/cards/1">
100
+ // My other favorite repository
101
+ // </Link>
102
+ // </CardTitle>
103
+ // (TAG)
104
+ // </CardRow>
105
+ // <CardRow className="is-size-6">
106
+ // This is a card description in the second row. Highlighting how the layout flows if there are multiple rows in
107
+ // one card while the card also has an action.
108
+ // </CardRow>
109
+ // <CardRow className="is-size-6 is-flex is-justify-content-space-between">
110
+ // <span>This is a third row, lets see how this works out.</span>(MERGED)
111
+ // </CardRow>
112
+ // </CardListCard>
113
+ // <CardListCard>
114
+ // <CardRow className="is-flex is-align-items-center">
115
+ // <CardTitle>
116
+ // <Link
117
+ // aria-label="Edit Enhance descriptions to differentiate between dumps with and without metadata."
118
+ // to="/cards/1"
119
+ // >
120
+ // Enhance descriptions to differentiate between dumps with and without metadata.
121
+ // </Link>
122
+ // </CardTitle>
123
+ // <small>#13456</small>
124
+ // </CardRow>
125
+ // <CardRow className="is-size-6">
126
+ // Another Name requested to merge <strong>feature/asdkjertg</strong> into <strong>develop</strong> about 3 months
127
+ // ago.
128
+ // </CardRow>
129
+ // <CardRow className="is-size-6 is-flex is-justify-content-space-between">
130
+ // <div>
131
+ // <span>Tasks (3/3)</span>
132
+ // <span>Reviewers (1)</span>
133
+ // <span>Analyses (✓)</span>
134
+ // <span>Workflow (✓)</span>
135
+ // </div>
136
+ // <span>(OPEN)</span>
137
+ // </CardRow>
138
+ // </CardListCard>
139
+ // <CardListCard>
140
+ // <CardRow>
141
+ // <CardTitle>
142
+ // <Link aria-label="Edit My least liked repo" to="/cards/1">
143
+ // My least liked repo
144
+ // </Link>
145
+ // </CardTitle>
146
+ // </CardRow>
147
+ // <CardRow>
148
+ // <CardDetails>
149
+ // <CardDetail>
150
+ // <CardDetailLabel>Workers</CardDetailLabel>
151
+ // <CardDetailTag>2/3</CardDetailTag>
152
+ // </CardDetail>
153
+ // <CardLinkDetail to="/my/detail">
154
+ // <CardDetailLabel>Go to docs</CardDetailLabel>
155
+ // </CardLinkDetail>
156
+ // </CardDetails>
157
+ // </CardRow>
158
+ // </CardListCard>
159
+ // <CardListCard avatar={<Icon>user</Icon>} action={<Icon>ellipsis-v</Icon>}>
160
+ // <CardRow>
161
+ // <CardTitle>
162
+ // 3c991eec687444630c0929e4e23d8a1a2565011d4bea28d4338dd1d024bb74c8
163
+ // c076ca5eea66545ee227c8854acc8b9bf075676a6848d54fa0bc1fa291f78887
164
+ // 72d7e2ef64c9575dd8ceeed8ed6b24f185646deb6595b13fd51c5705c61a2c46
165
+ // 9127daa67e066bc49f39cca9670b92de3d576ac1fb9c916e9b44692923e12a9d
166
+ // 14d07434e8c5b3d0ba2e752bc580888a30963d4e8021be573392bb625f6150da
167
+ // 60fc6f2e7503b1ca5963afb627ef560f4e2191c0da4c9328ae4ab088e177fb41
168
+ // 749e63a6af1731d5c599e960a2f6c8cb9a15d6cf6a82493f419d417829f7b2a8
169
+ // 0ca9334aeda2e5dab101e4af13c9610839afc3b9dd2ec56ffb067d6914ce9b67
170
+ // b708983948a1750f79fbb91875399fcce453410dad6191c5dc5059f4b28aee1d
171
+ // 0d13a4349270947bc79cfc59c7c2aa59960d847a49b40feccd3388fa9a600a68
172
+ // </CardTitle>
173
+ // </CardRow>
174
+ // <SecondaryRow className="is-ellipsis-overflow">
175
+ // 7cab5486ab8cd946af71a77d37c84bac c05156ef54a1f0bfd5d4fa12f774148c 4f2964e1895470b6313e3264fef276d8
176
+ // 8c57fdf7fde5fc227ea0c59a0f359122 3bc64067ff6fb9c64f4ae5ac15e4375d 91943ad0c020859ad6cc3723fe9bd325
177
+ // 07bb6d93d9faf2df68d02949ec10e58e 0bee2b579b7ab5777683f3d5b5975960 4a3009269d971f555524374e7da745ad
178
+ // a693ffb57da89f191249de6480c2387b
179
+ // </SecondaryRow>
180
+ // <CardRow>
181
+ // <CardDetails>
182
+ // <CardDetail>
183
+ // <CardDetailLabel>Workers</CardDetailLabel>
184
+ // <CardDetailTag>2/3</CardDetailTag>
185
+ // </CardDetail>
186
+ // <CardLinkDetail to="/to/docs">
187
+ // <CardDetailLabel>Go to docs</CardDetailLabel>
188
+ // </CardLinkDetail>
189
+ // </CardDetails>
190
+ // </CardRow>
191
+ // </CardListCard>
192
+ // </CardListBox>
193
+ // );
194
+
19
195
  import React from "react";
20
- import { Link } from "react-router-dom";
196
+ import type { Meta, StoryObj } from "@storybook/react";
197
+
21
198
  import CardList, { CardListBox, CardListCard } from "./CardList";
22
199
  import CardTitle from "../card/CardTitle";
23
- import { Menu } from "../../overlays";
24
- import { Icon } from "../../buttons";
25
200
  import CardRow, { SecondaryRow } from "../card/CardRow";
26
201
  import { CardDetail, CardDetailLabel, CardDetails, CardDetailTag, CardLinkDetail } from "../card/CardDetail";
202
+ import { Menu } from "../../overlays";
203
+ import { Icon } from "../../buttons";
27
204
 
28
- export default {
29
- title: "CardList",
205
+ const meta: Meta<typeof CardList> = {
206
+ title: "Components/CardList",
30
207
  component: CardList,
31
- decorators: [StoryRouter()],
32
- } as ComponentMeta<typeof CardList>;
208
+ decorators: [
209
+ (Story) => (
210
+ <div style={{ margin: "2rem" }}>
211
+ <Story />
212
+ </div>
213
+ ),
214
+ ],
215
+ tags: ["autodocs"],
216
+ };
217
+
218
+ export default meta;
219
+
220
+ type Story = StoryObj<typeof CardList>;
33
221
 
34
- export const Default: ComponentStory<typeof CardListBox> = () => (
35
- <CardListBox>
36
- <CardListCard
37
- action={
38
- <Menu>
39
- <Menu.Button>
40
- <Icon>trash</Icon>
41
- Delete
42
- </Menu.Button>
43
- </Menu>
44
- }
45
- >
46
- <CardRow>
47
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
48
- dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
49
- clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
50
- consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
51
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
52
- takimata sanctus est Lorem ipsum dolor sit amet.
53
- </CardRow>
54
- </CardListCard>
55
- <CardListCard>
56
- <CardRow>
57
- <CardTitle>My favorite repository</CardTitle>
58
- </CardRow>
59
- </CardListCard>
60
- <CardListCard
61
- action={
62
- <Menu>
63
- <Menu.Button>
64
- <Icon>trash</Icon>
65
- Delete
66
- </Menu.Button>
67
- </Menu>
68
- }
69
- >
70
- <CardRow>
71
- <CardTitle level={5}>
72
- <Link aria-label="Edit My least liked repo" to="/cards/1">
73
- My favorite repository with a very long title and some other things
74
- </Link>
75
- </CardTitle>
76
- </CardRow>
77
- </CardListCard>
78
- <CardListCard>
79
- <CardRow>
80
- <CardTitle>
81
- <Link aria-label="Edit My least liked repo" to="/cards/1">
82
- My least liked repo
83
- </Link>
84
- </CardTitle>
85
- </CardRow>
86
- </CardListCard>
87
- <CardListCard
88
- action={
89
- <Menu>
90
- <Menu.Button>
91
- <Icon>trash</Icon>
92
- Delete
93
- </Menu.Button>
94
- </Menu>
95
- }
96
- >
97
- <CardRow className="is-flex is-justify-content-space-between">
98
- <CardTitle>
99
- <Link aria-label="Edit My other favorite repository" to="/cards/1">
100
- My other favorite repository
101
- </Link>
102
- </CardTitle>
103
- (TAG)
104
- </CardRow>
105
- <CardRow className="is-size-6">
106
- This is a card description in the second row. Highlighting how the layout flows if there are multiple rows in
107
- one card while the card also has an action.
108
- </CardRow>
109
- <CardRow className="is-size-6 is-flex is-justify-content-space-between">
110
- <span>This is a third row, lets see how this works out.</span>(MERGED)
111
- </CardRow>
112
- </CardListCard>
113
- <CardListCard>
114
- <CardRow className="is-flex is-align-items-center">
115
- <CardTitle>
116
- <Link
117
- aria-label="Edit Enhance descriptions to differentiate between dumps with and without metadata."
118
- to="/cards/1"
119
- >
120
- Enhance descriptions to differentiate between dumps with and without metadata.
121
- </Link>
122
- </CardTitle>
123
- <small>#13456</small>
124
- </CardRow>
125
- <CardRow className="is-size-6">
126
- Another Name requested to merge <strong>feature/asdkjertg</strong> into <strong>develop</strong> about 3 months
127
- ago.
128
- </CardRow>
129
- <CardRow className="is-size-6 is-flex is-justify-content-space-between">
130
- <div>
131
- <span>Tasks (3/3)</span>
132
- <span>Reviewers (1)</span>
133
- <span>Analyses (✓)</span>
134
- <span>Workflow (✓)</span>
135
- </div>
136
- <span>(OPEN)</span>
137
- </CardRow>
138
- </CardListCard>
139
- <CardListCard>
140
- <CardRow>
141
- <CardTitle>
142
- <Link aria-label="Edit My least liked repo" to="/cards/1">
143
- My least liked repo
144
- </Link>
145
- </CardTitle>
146
- </CardRow>
147
- <CardRow>
148
- <CardDetails>
149
- <CardDetail>
150
- <CardDetailLabel>Workers</CardDetailLabel>
151
- <CardDetailTag>2/3</CardDetailTag>
152
- </CardDetail>
153
- <CardLinkDetail to="/my/detail">
154
- <CardDetailLabel>Go to docs</CardDetailLabel>
155
- </CardLinkDetail>
156
- </CardDetails>
157
- </CardRow>
158
- </CardListCard>
159
- <CardListCard avatar={<Icon>user</Icon>} action={<Icon>ellipsis-v</Icon>}>
160
- <CardRow>
161
- <CardTitle>
162
- 3c991eec687444630c0929e4e23d8a1a2565011d4bea28d4338dd1d024bb74c8
163
- c076ca5eea66545ee227c8854acc8b9bf075676a6848d54fa0bc1fa291f78887
164
- 72d7e2ef64c9575dd8ceeed8ed6b24f185646deb6595b13fd51c5705c61a2c46
165
- 9127daa67e066bc49f39cca9670b92de3d576ac1fb9c916e9b44692923e12a9d
166
- 14d07434e8c5b3d0ba2e752bc580888a30963d4e8021be573392bb625f6150da
167
- 60fc6f2e7503b1ca5963afb627ef560f4e2191c0da4c9328ae4ab088e177fb41
168
- 749e63a6af1731d5c599e960a2f6c8cb9a15d6cf6a82493f419d417829f7b2a8
169
- 0ca9334aeda2e5dab101e4af13c9610839afc3b9dd2ec56ffb067d6914ce9b67
170
- b708983948a1750f79fbb91875399fcce453410dad6191c5dc5059f4b28aee1d
171
- 0d13a4349270947bc79cfc59c7c2aa59960d847a49b40feccd3388fa9a600a68
172
- </CardTitle>
173
- </CardRow>
174
- <SecondaryRow className="is-ellipsis-overflow">
175
- 7cab5486ab8cd946af71a77d37c84bac c05156ef54a1f0bfd5d4fa12f774148c 4f2964e1895470b6313e3264fef276d8
176
- 8c57fdf7fde5fc227ea0c59a0f359122 3bc64067ff6fb9c64f4ae5ac15e4375d 91943ad0c020859ad6cc3723fe9bd325
177
- 07bb6d93d9faf2df68d02949ec10e58e 0bee2b579b7ab5777683f3d5b5975960 4a3009269d971f555524374e7da745ad
178
- a693ffb57da89f191249de6480c2387b
179
- </SecondaryRow>
180
- <CardRow>
181
- <CardDetails>
182
- <CardDetail>
183
- <CardDetailLabel>Workers</CardDetailLabel>
184
- <CardDetailTag>2/3</CardDetailTag>
185
- </CardDetail>
186
- <CardLinkDetail to="/to/docs">
187
- <CardDetailLabel>Go to docs</CardDetailLabel>
188
- </CardLinkDetail>
189
- </CardDetails>
190
- </CardRow>
191
- </CardListCard>
192
- </CardListBox>
193
- );
222
+ export const Default: Story = {
223
+ render: () => (
224
+ <CardListBox>
225
+ <CardListCard
226
+ action={
227
+ <Menu>
228
+ <Menu.Button>
229
+ <Icon>trash</Icon>Delete
230
+ </Menu.Button>
231
+ </Menu>
232
+ }
233
+ >
234
+ <CardRow>
235
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
236
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
237
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
238
+ </CardRow>
239
+ </CardListCard>
240
+ <CardListCard>
241
+ <CardRow>
242
+ <CardTitle>My favorite repository</CardTitle>
243
+ </CardRow>
244
+ </CardListCard>
245
+ <CardListCard
246
+ action={
247
+ <Menu>
248
+ <Menu.Button>
249
+ <Icon>trash</Icon>Delete
250
+ </Menu.Button>
251
+ </Menu>
252
+ }
253
+ >
254
+ <CardRow>
255
+ <CardTitle level={5}>
256
+ {/* Ersetzt durch <a>-Tag, um Router-Abhängigkeit zu entfernen */}
257
+ <a href="/cards/1" onClick={(e) => e.preventDefault()}>
258
+ My favorite repository with a very long title and some other things
259
+ </a>
260
+ </CardTitle>
261
+ </CardRow>
262
+ </CardListCard>
263
+ <CardListCard>
264
+ <CardRow>
265
+ <CardTitle>
266
+ <a href="/cards/1" onClick={(e) => e.preventDefault()}>
267
+ My least liked repo
268
+ </a>
269
+ </CardTitle>
270
+ </CardRow>
271
+ <CardRow>
272
+ <CardDetails>
273
+ <CardDetail>
274
+ <CardDetailLabel>Workers</CardDetailLabel>
275
+ <CardDetailTag>2/3</CardDetailTag>
276
+ </CardDetail>
277
+ {/* CardLinkDetail wurde durch CardDetail mit <a>-Tag ersetzt */}
278
+ <CardDetail>
279
+ <a href="/my/detail" onClick={(e) => e.preventDefault()} style={{ textDecoration: "none" }}>
280
+ <CardDetailLabel>Go to docs</CardDetailLabel>
281
+ </a>
282
+ </CardDetail>
283
+ </CardDetails>
284
+ </CardRow>
285
+ </CardListCard>
286
+ <CardListCard avatar={<Icon>user</Icon>} action={<Icon>ellipsis-v</Icon>}>
287
+ <CardRow>
288
+ <CardTitle>
289
+ 3c991eec687444630c0929e4e23d8a1a2565011d4bea28d4338dd1d024bb74c8
290
+ c076ca5eea66545ee227c8854acc8b9bf075676a6848d54fa0bc1fa291f78887
291
+ </CardTitle>
292
+ </CardRow>
293
+ <SecondaryRow className="is-ellipsis-overflow">
294
+ 7cab5486ab8cd946af71a77d37c84bac c05156ef54a1f0bfd5d4fa12f774148c
295
+ </SecondaryRow>
296
+ <CardRow>
297
+ <CardDetails>
298
+ <CardDetail>
299
+ <CardDetailLabel>Workers</CardDetailLabel>
300
+ <CardDetailTag>2/3</CardDetailTag>
301
+ </CardDetail>
302
+ </CardDetails>
303
+ </CardRow>
304
+ </CardListCard>
305
+ </CardListBox>
306
+ ),
307
+ };
package/src/base/layout/collapsible/Collapsible.stories.tsx CHANGED
@@ -14,24 +14,62 @@
14
14
  * along with this program. If not, see https://www.gnu.org/licenses/.
15
15
  */
16
16
 
17
- import StoryRouter from "storybook-react-router";
18
- import { ComponentMeta, StoryFn } from "@storybook/react";
19
- import React, { ComponentProps } from "react";
17
+ // import StoryRouter from "storybook-react-router";
18
+ // import { ComponentMeta, StoryFn } from "@storybook/react";
19
+ // import React, { ComponentProps } from "react";
20
+ // import Collapsible from "./Collapsible";
21
+ //
22
+ // export default {
23
+ // title: "Collapsible",
24
+ // component: Collapsible,
25
+ // decorators: [StoryRouter()],
26
+ // } as ComponentMeta<typeof Collapsible>;
27
+ //
28
+ // const Template: StoryFn<ComponentProps<typeof Collapsible>> = (args) => <Collapsible {...args} />;
29
+ //
30
+ // export const Default = Template.bind({});
31
+ // // More on args: https://storybook.js.org/docs/react/writing-stories/args
32
+ // Default.args = {
33
+ // children: [
34
+ // "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
35
+ // ],
36
+ // header: "This is a collapsible",
37
+ // } as ComponentProps<typeof Collapsible>;
38
+
39
+ import React from "react";
40
+ import type { Meta, StoryObj } from "@storybook/react";
41
+
20
42
  import Collapsible from "./Collapsible";
21
43
 
22
- export default {
23
- title: "Collapsible",
44
+ const meta: Meta<typeof Collapsible> = {
45
+ title: "Components/Collapsible",
24
46
  component: Collapsible,
25
- decorators: [StoryRouter()],
26
- } as ComponentMeta<typeof Collapsible>;
47
+ decorators: [
48
+ (Story) => (
49
+ <div style={{ margin: "2rem", maxWidth: "40rem" }}>
50
+ <Story />
51
+ </div>
52
+ ),
53
+ ],
54
+ tags: ["autodocs"],
55
+ };
27
56
 
28
- const Template: StoryFn<ComponentProps<typeof Collapsible>> = (args) => <Collapsible {...args} />;
57
+ export default meta;
29
58
 
30
- export const Default = Template.bind({});
31
- // More on args: https://storybook.js.org/docs/react/writing-stories/args
32
- Default.args = {
33
- children: [
34
- "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
35
- ],
36
- header: "This is a collapsible",
37
- } as ComponentProps<typeof Collapsible>;
59
+ type Story = StoryObj<typeof meta>;
60
+
61
+ export const Default: Story = {
62
+ args: {
63
+ header: "This is a collapsible",
64
+ children:
65
+ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
66
+ },
67
+ };
68
+
69
+ // export const InitiallyOpen: Story = {
70
+ // args: {
71
+ // ...Default.args,
72
+ // header: "This collapsible is open by default",
73
+ // initiallyCollapsed: false,
74
+ // },
75
+ // };
package/src/base/layout/index.ts CHANGED
@@ -24,8 +24,6 @@ import {
24
24
  CardDetails,
25
25
  CardDetailTag,
26
26
  CardLinkDetail,
27
- CardVariants,
28
- CardVariant
29
27
  } from "./card/CardDetail";
30
28
  import CardComponent from "./card/Card";
31
29
  import {
@@ -34,7 +32,7 @@ import {
34
32
  DataPageHeaderSetting,
35
33
  DataPageHeaderSettingField,
36
34
  DataPageHeaderSettingLabel,
37
- DataPageHeaderSettings
35
+ DataPageHeaderSettings,
38
36
  } from "./templates/data-page/DataPageHeader";
39
37
  import TabsComponent from "./tabs/Tabs";
40
38
  import TabsContent from "./tabs/TabsContent";
@@ -87,5 +85,4 @@ export const Tabs = Object.assign(TabsComponent, {
87
85
  });
88
86
 
89
87
  export { CardVariants } from "./card/CardDetail";
90
- export { CardVariant } from "./card/CardDetail";
91
-
88
+ export { type CardVariant } from "./card/CardDetail";
package/src/base/layout/tabs/Tabs.stories.tsx CHANGED
@@ -14,27 +14,69 @@
14
14
  * along with this program. If not, see https://www.gnu.org/licenses/.
15
15
  */
16
16
 
17
+ // import React from "react";
18
+ // import StoryRouter from "storybook-react-router";
19
+ // import { ComponentMeta, ComponentStory } from "@storybook/react";
20
+ // import Tabs from "./Tabs";
21
+ // import TabsList from "./TabsList";
22
+ // import TabTrigger from "./TabTrigger";
23
+ // import TabsContent from "./TabsContent";
24
+ //
25
+ // export default {
26
+ // title: "Tab",
27
+ // component: Tabs,
28
+ // decorators: [StoryRouter()],
29
+ // } as ComponentMeta<typeof Tabs>;
30
+ //
31
+ // export const Default: ComponentStory<typeof Tabs> = () => (
32
+ // <Tabs defaultValue="tab2">
33
+ // <TabsList>
34
+ // <TabTrigger value="tab1">Account</TabTrigger>
35
+ // <TabTrigger value="tab2">Password</TabTrigger>
36
+ // </TabsList>
37
+ // <TabsContent value="tab1">Account Settings</TabsContent>
38
+ // <TabsContent value="tab2">Password Settings</TabsContent>
39
+ // </Tabs>
40
+ // );
41
+
17
42
  import React from "react";
18
- import StoryRouter from "storybook-react-router";
19
- import { ComponentMeta, ComponentStory } from "@storybook/react";
43
+ import type { Meta, StoryObj } from "@storybook/react";
44
+
20
45
  import Tabs from "./Tabs";
21
46
  import TabsList from "./TabsList";
22
47
  import TabTrigger from "./TabTrigger";
23
48
  import TabsContent from "./TabsContent";
24
49
 
25
- export default {
26
- title: "Tab",
50
+ const meta: Meta<typeof Tabs> = {
51
+ title: "Components/Tabs",
27
52
  component: Tabs,
28
- decorators: [StoryRouter()],
29
- } as ComponentMeta<typeof Tabs>;
53
+ decorators: [
54
+ (Story) => (
55
+ <div style={{ margin: "2rem", width: "30rem" }}>
56
+ <Story />
57
+ </div>
58
+ ),
59
+ ],
60
+ tags: ["autodocs"],
61
+ };
62
+
63
+ export default meta;
64
+
65
+ type Story = StoryObj<typeof meta>;
30
66
 
31
- export const Default: ComponentStory<typeof Tabs> = () => (
32
- <Tabs defaultValue="tab2">
33
- <TabsList>
34
- <TabTrigger value="tab1">Account</TabTrigger>
35
- <TabTrigger value="tab2">Password</TabTrigger>
36
- </TabsList>
37
- <TabsContent value="tab1">Account Settings</TabsContent>
38
- <TabsContent value="tab2">Password Settings</TabsContent>
39
- </Tabs>
40
- );
67
+ export const Default: Story = {
68
+ render: () => (
69
+ <Tabs defaultValue="tab2">
70
+ <TabsList>
71
+ <TabTrigger value="tab1">Account</TabTrigger>
72
+ <TabTrigger value="tab2">Password</TabTrigger>
73
+ </TabsList>
74
+ <TabsContent value="tab1">
75
+ <p className="p-4">Here you can change your account settings.</p>
76
+ </TabsContent>
77
+ <TabsContent value="tab2">
78
+ <p className="p-4">Here you can change your password.</p>
79
+ </TabsContent>
80
+ </Tabs>
81
+ ),
82
+ };