Skip to content

Commit 82d2f9e

Browse files
castastrophecastastrophe
committed
feat(storybook): custom properties panel
1 parent eb20c09 commit 82d2f9e

File tree

89 files changed

+944
-6
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

+944
-6
lines changed

‎.changeset/eleven-plants-grow.md

Lines changed: 5 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ export default {
6767
"@chromaui/addon-visual-tests",
6868
// https://storybook.js.org/addons/@storybook/addon-designs/
6969
"@storybook/addon-designs",
70+
// https://github.com/ljcl/storybook-addon-cssprops
71+
"@ljcl/storybook-addon-cssprops",
7072
],
7173
core: {
7274
disableTelemetry: true,

‎.storybook/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"@babel/core": "^7.26.0",
4141
"@chromaui/addon-visual-tests": "^1.0.0",
4242
"@etchteam/storybook-addon-status": "^5.0.0",
43+
"@ljcl/storybook-addon-cssprops": "^4.0.0",
4344
"@storybook/addon-a11y": "^8.4.6",
4445
"@storybook/addon-actions": "^8.4.6",
4546
"@storybook/addon-console": "^3.0.0",

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,17 @@ export default {
6363
},
6464
packageJson,
6565
metadata,
66+
cssprops: {
67+
...metadata.modifiers.reduce((collection, item) => {
68+
const key = item.replace(/^--/, "");
69+
collection[key] = {
70+
category: "Modifiers",
71+
control: key.includes("color") ? "color" : "text",
72+
value: key.includes("color") ? undefined : " ",
73+
};
74+
return collection;
75+
}, {})
76+
},
6677
},
6778
tags: ["!autodocs"],
6879
};

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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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
tags: ["!autodocs"],
6980
};

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

Lines changed: 11 additions & 0 deletions
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
tags: ["!autodocs"],
7384
};

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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,17 @@ export default {
5757
},
5858
packageJson,
5959
metadata,
60+
cssprops: {
61+
...metadata.modifiers.reduce((collection, item) => {
62+
const key = item.replace(/^--/, "");
63+
collection[key] = {
64+
category: "Modifiers",
65+
control: key.includes("color") ? "color" : "text",
66+
value: key.includes("color") ? undefined : " ",
67+
};
68+
return collection;
69+
}, {})
70+
},
6071
},
6172
};
6273

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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

0 commit comments

Comments
 (0)