Skip to content

Commit d497927

Browse files
castastrophecastastrophe
committed
feat(storybook): custom properties panel
1 parent 5eea58b commit d497927

File tree

89 files changed

+945
-7
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+945
-7
lines changed

‎.changeset/eleven-plants-grow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/generator": patch
3+
---
4+
5+
Update story templates to include the cssprops imports

‎.changeset/new-bulldogs-add.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/preview": minor
3+
---
4+
5+
New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component.

‎.storybook/main.js

+2
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export default {
4545
"@chromaui/addon-visual-tests",
4646
// https://storybook.js.org/addons/@storybook/addon-designs/
4747
"@storybook/addon-designs",
48+
// https://github.com/ljcl/storybook-addon-cssprops
49+
"@ljcl/storybook-addon-cssprops",
4850
],
4951
core: {
5052
disableTelemetry: true,

‎.storybook/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@babel/core": "^7.26.0",
3939
"@chromaui/addon-visual-tests": "^1.0.0",
4040
"@etchteam/storybook-addon-status": "^5.0.0",
41+
"@ljcl/storybook-addon-cssprops": "^4.0.0",
4142
"@storybook/addon-a11y": "^8.3.6",
4243
"@storybook/addon-actions": "^8.3.6",
4344
"@storybook/addon-console": "^3.0.0",

‎components/accordion/stories/accordion.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,17 @@ export default {
5959
chromatic: { disableSnapshot: true },
6060
packageJson,
6161
metadata,
62+
cssprops: {
63+
...metadata.modifiers.reduce((collection, item) => {
64+
const key = item.replace(/^--/, "");
65+
collection[key] = {
66+
category: "Modifiers",
67+
control: key.includes("color") ? "color" : "text",
68+
value: key.includes("color") ? undefined : " ",
69+
};
70+
return collection;
71+
}, {})
72+
},
6273
},
6374
tags: ["!autodocs"],
6475
};

‎components/actionbar/stories/actionbar.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,17 @@ export default {
6969
},
7070
packageJson,
7171
metadata,
72+
cssprops: {
73+
...metadata.modifiers.reduce((collection, item) => {
74+
const key = item.replace(/^--/, "");
75+
collection[key] = {
76+
category: "Modifiers",
77+
control: key.includes("color") ? "color" : "text",
78+
value: key.includes("color") ? undefined : " ",
79+
};
80+
return collection;
81+
}, {})
82+
},
7283
},
7384
tags: ["!autodocs"],
7485
};

‎components/actionbutton/stories/actionbutton.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,17 @@ export default {
8686
},
8787
packageJson,
8888
metadata,
89+
cssprops: {
90+
...metadata.modifiers.reduce((collection, item) => {
91+
const key = item.replace(/^--/, "");
92+
collection[key] = {
93+
category: "Modifiers",
94+
control: key.includes("color") ? "color" : "text",
95+
value: key.includes("color") ? undefined : " ",
96+
};
97+
return collection;
98+
}, {})
99+
},
89100
docs: {
90101
story: {
91102
height: "auto",

‎components/actiongroup/stories/actiongroup.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,17 @@ export default {
9595
},
9696
packageJson,
9797
metadata,
98+
cssprops: {
99+
...metadata.modifiers.reduce((collection, item) => {
100+
const key = item.replace(/^--/, "");
101+
collection[key] = {
102+
category: "Modifiers",
103+
control: key.includes("color") ? "color" : "text",
104+
value: key.includes("color") ? undefined : " ",
105+
};
106+
return collection;
107+
}, {})
108+
},
98109
},
99110
};
100111

‎components/actionmenu/stories/actionmenu.stories.js

+5
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ export default {
4949
],
5050
},
5151
packageJson,
52+
cssprops: {
53+
...(Popover?.parameters?.cssprops ?? {}),
54+
...(ActionButton?.parameters?.cssprops ?? {}),
55+
...(Menu.parameters?.cssprops ?? {}),
56+
},
5257
docs: {
5358
story: {
5459
height: "200px",

‎components/alertbanner/stories/alertbanner.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,17 @@ export default {
7171
},
7272
packageJson,
7373
metadata,
74+
cssprops: {
75+
...metadata.modifiers.reduce((collection, item) => {
76+
const key = item.replace(/^--/, "");
77+
collection[key] = {
78+
category: "Modifiers",
79+
control: key.includes("color") ? "color" : "text",
80+
value: key.includes("color") ? undefined : " ",
81+
};
82+
return collection;
83+
}, {})
84+
},
7485
},
7586
};
7687

‎components/alertdialog/stories/alertdialog.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,17 @@ export default {
5252
},
5353
packageJson,
5454
metadata,
55+
cssprops: {
56+
...metadata.modifiers.reduce((collection, item) => {
57+
const key = item.replace(/^--/, "");
58+
collection[key] = {
59+
category: "Modifiers",
60+
control: key.includes("color") ? "color" : "text",
61+
value: key.includes("color") ? undefined : " ",
62+
};
63+
return collection;
64+
}, {})
65+
},
5566
},
5667
decorators: [
5768
withUnderlayWrapper,

‎components/asset/stories/asset.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,17 @@ export default {
3838
parameters: {
3939
packageJson,
4040
metadata,
41+
cssprops: {
42+
...metadata.modifiers.reduce((collection, item) => {
43+
const key = item.replace(/^--/, "");
44+
collection[key] = {
45+
category: "Modifiers",
46+
control: key.includes("color") ? "color" : "text",
47+
value: key.includes("color") ? undefined : " ",
48+
};
49+
return collection;
50+
}, {})
51+
},
4152
},
4253
tags: ["!autodocs"],
4354
};

‎components/assetcard/stories/assetcard.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,17 @@ export default {
8888
},
8989
packageJson,
9090
metadata,
91+
cssprops: {
92+
...metadata.modifiers.reduce((collection, item) => {
93+
const key = item.replace(/^--/, "");
94+
collection[key] = {
95+
category: "Modifiers",
96+
control: key.includes("color") ? "color" : "text",
97+
value: key.includes("color") ? undefined : " ",
98+
};
99+
return collection;
100+
}, {})
101+
},
91102
},
92103
tags: ["!autodocs"],
93104
};

‎components/assetlist/stories/assetlist.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,17 @@ export default {
2222
},
2323
packageJson,
2424
metadata,
25+
cssprops: {
26+
...metadata.modifiers.reduce((collection, item) => {
27+
const key = item.replace(/^--/, "");
28+
collection[key] = {
29+
category: "Modifiers",
30+
control: key.includes("color") ? "color" : "text",
31+
value: key.includes("color") ? undefined : " ",
32+
};
33+
return collection;
34+
}, {})
35+
},
2536
},
2637
};
2738

‎components/avatar/stories/avatar.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,17 @@ export default {
6060
parameters: {
6161
packageJson,
6262
metadata,
63+
cssprops: {
64+
...metadata.modifiers.reduce((collection, item) => {
65+
const key = item.replace(/^--/, "");
66+
collection[key] = {
67+
category: "Modifiers",
68+
control: key.includes("color") ? "color" : "text",
69+
value: key.includes("color") ? undefined : " ",
70+
};
71+
return collection;
72+
}, {})
73+
},
6374
},
6475
tags: ["!autodocs"],
6576
};

‎components/badge/stories/badge.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,17 @@ export default {
6666
parameters: {
6767
packageJson,
6868
metadata,
69+
cssprops: {
70+
...metadata.modifiers.reduce((collection, item) => {
71+
const key = item.replace(/^--/, "");
72+
collection[key] = {
73+
category: "Modifiers",
74+
control: key.includes("color") ? "color" : "text",
75+
value: key.includes("color") ? undefined : " ",
76+
};
77+
return collection;
78+
}, {})
79+
},
6980
},
7081
tags: ["!autodocs"],
7182
};

‎components/breadcrumb/stories/breadcrumb.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,17 @@ export default {
4343
parameters: {
4444
packageJson,
4545
metadata,
46+
cssprops: {
47+
...metadata.modifiers.reduce((collection, item) => {
48+
const key = item.replace(/^--/, "");
49+
collection[key] = {
50+
category: "Modifiers",
51+
control: key.includes("color") ? "color" : "text",
52+
value: key.includes("color") ? undefined : " ",
53+
};
54+
return collection;
55+
}, {})
56+
},
4657
},
4758
};
4859

‎components/button/stories/button.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,17 @@ export default {
8787
},
8888
packageJson,
8989
metadata,
90+
cssprops: {
91+
...metadata.modifiers.reduce((collection, item) => {
92+
const key = item.replace(/^--/, "");
93+
collection[key] = {
94+
category: "Modifiers",
95+
control: key.includes("color") ? "color" : "text",
96+
value: key.includes("color") ? undefined : " ",
97+
};
98+
return collection;
99+
}, {})
100+
},
90101
},
91102
tags: ["!autodocs"],
92103
};

‎components/buttongroup/stories/buttongroup.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,17 @@ export default {
5959
parameters: {
6060
packageJson,
6161
metadata,
62+
cssprops: {
63+
...metadata.modifiers.reduce((collection, item) => {
64+
const key = item.replace(/^--/, "");
65+
collection[key] = {
66+
category: "Modifiers",
67+
control: key.includes("color") ? "color" : "text",
68+
value: key.includes("color") ? undefined : " ",
69+
};
70+
return collection;
71+
}, {})
72+
},
6273
},
6374
};
6475

‎components/calendar/stories/calendar.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,17 @@ export default {
9898
},
9999
packageJson,
100100
metadata,
101+
cssprops: {
102+
...metadata.modifiers.reduce((collection, item) => {
103+
const key = item.replace(/^--/, "");
104+
collection[key] = {
105+
category: "Modifiers",
106+
control: key.includes("color") ? "color" : "text",
107+
value: key.includes("color") ? undefined : " ",
108+
};
109+
return collection;
110+
}, {})
111+
},
101112
},
102113
tags: ["!autodocs"],
103114
};

‎components/card/stories/card.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,17 @@ export default {
9494
},
9595
packageJson,
9696
metadata,
97+
cssprops: {
98+
...metadata.modifiers.reduce((collection, item) => {
99+
const key = item.replace(/^--/, "");
100+
collection[key] = {
101+
category: "Modifiers",
102+
control: key.includes("color") ? "color" : "text",
103+
value: key.includes("color") ? undefined : " ",
104+
};
105+
return collection;
106+
}, {})
107+
},
97108
},
98109
tags: ["!autodocs"],
99110
};

‎components/checkbox/stories/checkbox.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,17 @@ export default {
5353
},
5454
packageJson,
5555
metadata,
56+
cssprops: {
57+
...metadata.modifiers.reduce((collection, item) => {
58+
const key = item.replace(/^--/, "");
59+
collection[key] = {
60+
category: "Modifiers",
61+
control: key.includes("color") ? "color" : "text",
62+
value: key.includes("color") ? undefined : " ",
63+
};
64+
return collection;
65+
}, {})
66+
},
5667
},
5768
};
5869

‎components/clearbutton/stories/clearbutton.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,17 @@ export default {
6161
parameters: {
6262
packageJson,
6363
metadata,
64+
cssprops: {
65+
...metadata.modifiers.reduce((collection, item) => {
66+
const key = item.replace(/^--/, "");
67+
collection[key] = {
68+
category: "Modifiers",
69+
control: key.includes("color") ? "color" : "text",
70+
value: key.includes("color") ? undefined : " ",
71+
};
72+
return collection;
73+
}, {})
74+
},
6475
},
6576
};
6677

‎components/closebutton/stories/closebutton.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,17 @@ export default {
4848
},
4949
packageJson,
5050
metadata,
51+
cssprops: {
52+
...metadata.modifiers.reduce((collection, item) => {
53+
const key = item.replace(/^--/, "");
54+
collection[key] = {
55+
category: "Modifiers",
56+
control: key.includes("color") ? "color" : "text",
57+
value: key.includes("color") ? undefined : " ",
58+
};
59+
return collection;
60+
}, {})
61+
},
5162
},
5263
};
5364

0 commit comments

Comments
 (0)