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

@@ -45,6 +45,8 @@ export default {
 		"@chromaui/addon-visual-tests",
 		// 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,

.storybook/package.json

@@ -38,6 +38,7 @@
 		"@babel/core": "^7.25.2",
 		"@chromaui/addon-visual-tests": "^1.0.0",
 		"@etchteam/storybook-addon-status": "^5.0.0",
+		"@ljcl/storybook-addon-cssprops": "^4.0.0",
 		"@storybook/addon-a11y": "^8.3.6",
 		"@storybook/addon-actions": "^8.3.6",
 		"@storybook/addon-console": "^3.0.0",

components/accordion/stories/accordion.stories.js

@@ -59,6 +59,17 @@ export default {
 		chromatic: { disableSnapshot: true },
 		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;
+			}, {})
+		},
 	},
 	tags: ["!autodocs"],
 };

components/actionbar/stories/actionbar.stories.js

@@ -69,6 +69,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;
+			}, {})
+		},
 	},
 	tags: ["!autodocs"],
 };

components/actionbutton/stories/actionbutton.stories.js

@@ -86,6 +86,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

@@ -95,6 +95,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

@@ -71,6 +71,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;
+			}, {})
+		},
 	},
 };