feat(storybook): custom properties panel

Author: castastrophe

.changeset/eleven-plants-grow.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/generator": patch
+---
+
+Update story templates to include the cssprops imports

.changeset/new-bulldogs-add.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": minor
+---
+
+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

@@ -75,6 +75,8 @@ export default {
 		"@chromatic-com/storybook",
 		// https://storybook.js.org/addons/@storybook/addon-designs/
 		"@storybook/addon-designs",
+		// https://github.com/ljcl/storybook-addon-cssprops
+		"@ljcl/storybook-addon-cssprops",
 	],
 	core: {
 		disableTelemetry: true,

components/accordion/stories/accordion.stories.js

@@ -68,6 +68,17 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 

components/actionbar/stories/actionbar.stories.js

@@ -72,6 +72,17 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 

components/actionbutton/stories/actionbutton.stories.js

@@ -90,6 +90,17 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 		docs: {
 			story: {
 				height: "auto",

components/actiongroup/stories/actiongroup.stories.js

@@ -99,6 +99,17 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 

components/actionmenu/stories/actionmenu.stories.js

@@ -49,6 +49,11 @@ export default {
 			],
 		},
 		packageJson,
+		cssprops: {
+			...(Popover?.parameters?.cssprops ?? {}),
+			...(ActionButton?.parameters?.cssprops ?? {}),
+			...(Menu.parameters?.cssprops ?? {}),
+		},
 		docs: {
 			story: {
 				height: "200px",

components/alertbanner/stories/alertbanner.stories.js

@@ -75,6 +75,17 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 

components/alertdialog/stories/alertdialog.stories.js

@@ -56,6 +56,17 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 	decorators: [
 		withUnderlayWrapper,