Skip to content

Commit 9d6789f

Browse files
castastrophecastastrophe
committed
feat(storybook): custom properties panel
1 parent 80d3338 commit 9d6789f

File tree

87 files changed

+929
-0
lines changed

Some content is hidden

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

87 files changed

+929
-0
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
@@ -75,6 +75,8 @@ export default {
7575
"@chromatic-com/storybook",
7676
// https://storybook.js.org/addons/@storybook/addon-designs/
7777
"@storybook/addon-designs",
78+
// https://github.com/ljcl/storybook-addon-cssprops
79+
"@ljcl/storybook-addon-cssprops",
7880
],
7981
core: {
8082
disableTelemetry: true,

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

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

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

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

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

+11
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,17 @@ export default {
9090
},
9191
packageJson,
9292
metadata,
93+
cssprops: {
94+
...metadata.modifiers.reduce((collection, item) => {
95+
const key = item.replace(/^--/, "");
96+
collection[key] = {
97+
category: "Modifiers",
98+
control: key.includes("color") ? "color" : "text",
99+
value: key.includes("color") ? undefined : " ",
100+
};
101+
return collection;
102+
}, {})
103+
},
93104
docs: {
94105
story: {
95106
height: "auto",

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

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

‎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
@@ -75,6 +75,17 @@ export default {
7575
},
7676
packageJson,
7777
metadata,
78+
cssprops: {
79+
...metadata.modifiers.reduce((collection, item) => {
80+
const key = item.replace(/^--/, "");
81+
collection[key] = {
82+
category: "Modifiers",
83+
control: key.includes("color") ? "color" : "text",
84+
value: key.includes("color") ? undefined : " ",
85+
};
86+
return collection;
87+
}, {})
88+
},
7889
},
7990
};
8091

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

+11
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,17 @@ export default {
5656
},
5757
packageJson,
5858
metadata,
59+
cssprops: {
60+
...metadata.modifiers.reduce((collection, item) => {
61+
const key = item.replace(/^--/, "");
62+
collection[key] = {
63+
category: "Modifiers",
64+
control: key.includes("color") ? "color" : "text",
65+
value: key.includes("color") ? undefined : " ",
66+
};
67+
return collection;
68+
}, {})
69+
},
5970
},
6071
decorators: [
6172
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
};
4354

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

+11
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,17 @@ export default {
9292
},
9393
packageJson,
9494
metadata,
95+
cssprops: {
96+
...metadata.modifiers.reduce((collection, item) => {
97+
const key = item.replace(/^--/, "");
98+
collection[key] = {
99+
category: "Modifiers",
100+
control: key.includes("color") ? "color" : "text",
101+
value: key.includes("color") ? undefined : " ",
102+
};
103+
return collection;
104+
}, {})
105+
},
95106
},
96107
};
97108

‎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
@@ -59,6 +59,17 @@ export default {
5959
},
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/badge/stories/badge.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
};
7485

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

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

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

+11
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,17 @@ export default {
9191
},
9292
packageJson,
9393
metadata,
94+
cssprops: {
95+
...metadata.modifiers.reduce((collection, item) => {
96+
const key = item.replace(/^--/, "");
97+
collection[key] = {
98+
category: "Modifiers",
99+
control: key.includes("color") ? "color" : "text",
100+
value: key.includes("color") ? undefined : " ",
101+
};
102+
return collection;
103+
}, {})
104+
},
94105
},
95106
tags: ["!autodocs"],
96107
};

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

+11
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,17 @@ export default {
6464
},
6565
packageJson,
6666
metadata,
67+
cssprops: {
68+
...metadata.modifiers.reduce((collection, item) => {
69+
const key = item.replace(/^--/, "");
70+
collection[key] = {
71+
category: "Modifiers",
72+
control: key.includes("color") ? "color" : "text",
73+
value: key.includes("color") ? undefined : " ",
74+
};
75+
return collection;
76+
}, {})
77+
},
6778
},
6879
};
6980

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

+11
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,17 @@ export default {
117117
},
118118
packageJson,
119119
metadata,
120+
cssprops: {
121+
...metadata.modifiers.reduce((collection, item) => {
122+
const key = item.replace(/^--/, "");
123+
collection[key] = {
124+
category: "Modifiers",
125+
control: key.includes("color") ? "color" : "text",
126+
value: key.includes("color") ? undefined : " ",
127+
};
128+
return collection;
129+
}, {})
130+
},
120131
},
121132
};
122133

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

+11
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,17 @@ export default {
127127
},
128128
packageJson,
129129
metadata,
130+
cssprops: {
131+
...metadata.modifiers.reduce((collection, item) => {
132+
const key = item.replace(/^--/, "");
133+
collection[key] = {
134+
category: "Modifiers",
135+
control: key.includes("color") ? "color" : "text",
136+
value: key.includes("color") ? undefined : " ",
137+
};
138+
return collection;
139+
}, {})
140+
},
130141
},
131142
};
132143

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

+11
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,17 @@ export default {
5959
},
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/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
@@ -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
};
5768

‎components/coachindicator/stories/coachindicator.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,17 @@ export default {
3030
},
3131
packageJson,
3232
metadata,
33+
cssprops: {
34+
...metadata.modifiers.reduce((collection, item) => {
35+
const key = item.replace(/^--/, "");
36+
collection[key] = {
37+
category: "Modifiers",
38+
control: key.includes("color") ? "color" : "text",
39+
value: key.includes("color") ? undefined : " ",
40+
};
41+
return collection;
42+
}, {})
43+
},
3344
},
3445
};
3546

0 commit comments

Comments
 (0)