feat(storybook): live modifiers preview

Author: castastrophe

.changeset/eleven-plants-grow.md

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

.changeset/modern-times-happen.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.

.changeset/new-bulldogs-add.md

@@ -154,7 +154,6 @@
     "metal-fireants-switch",
     "mighty-pigs-accept",
     "modern-chairs-sit",
-    "modern-times-happen",
     "nasty-rats-rhyme",
     "neat-schools-take",
     "nice-cows-shout",

.changeset/pre.json

@@ -8,6 +8,11 @@
 	"parserOptions": {
 		"sourceType": "module"
 	},
+	"settings": {
+		"react": {
+		"version": "detect"
+		}
+	},
 	"extends": "eslint:recommended",
 	"rules": {
 		"brace-style": ["warn", "stroustrup", { "allowSingleLine": true }],
@@ -17,7 +22,8 @@
 		"no-console": ["warn", { "allow": ["warn", "error"] }],
 		"quotes": ["warn", "double"],
 		"semi": ["warn", "always"],
-		"space-before-blocks": ["warn", "always"]
+		"space-before-blocks": ["warn", "always"],
+		"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
 	},
 	"overrides": [
 		{
@@ -174,6 +180,7 @@
 				".storybook/*.js",
 				".storybook/**/*.js"
 			],
+			"extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"],
 			"parserOptions": {
 				"ecmaVersion": "latest",
 				"sourceType": "module",

.eslintrc

@@ -1,13 +1,5 @@
 # Change Log
 
-## 12.1.0-next.17
-
-### Patch Changes
-
-Updated dependencies []:
-
-- @spectrum-css/bundle@2.0.0-next.13
-
 ## 12.1.0-next.16
 
 ### Patch Changes

.storybook/CHANGELOG.md

@@ -68,6 +68,8 @@ export default {
 			name: "@storybook/addon-actions",
 			options: {},
 		},
+		// https://github.com/ljcl/storybook-addon-cssprops
+		"@ljcl/storybook-addon-cssprops",
 		// https://www.npmjs.com/package/@whitespace/storybook-addon-html
 		"@whitespace/storybook-addon-html",
 		// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y

.storybook/main.js

@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/preview",
-	"version": "12.1.0-next.17",
+	"version": "12.1.0-next.16",
 	"description": "A Spectrum CSS preview",
 	"license": "Apache-2.0",
 	"author": "Adobe",
@@ -40,14 +40,15 @@
 	},
 	"dependencies": {
 		"@adobe/spectrum-css-workflow-icons": "^5.0.0",
-		"@spectrum-css/bundle": "2.0.0-next.13",
+		"@spectrum-css/bundle": "2.0.0-next.12",
 		"@spectrum-css/tokens": "16.1.0-next.8",
 		"@spectrum-css/ui-icons": "2.0.0-next.2"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.28.3",
 		"@chromatic-com/storybook": "^3.2.7",
 		"@etchteam/storybook-addon-status": "^5.0.0",
+		"@ljcl/storybook-addon-cssprops": "4.0.0",
 		"@storybook/addon-a11y": "8.4.7",
 		"@storybook/addon-actions": "8.4.7",
 		"@storybook/addon-designs": "^8.2.1",
@@ -60,7 +61,7 @@
 		"@storybook/core-events": "8.4.7",
 		"@storybook/manager-api": "8.4.7",
 		"@storybook/preview-api": "8.4.7",
-		"@storybook/test-runner": "^0.22.0",
+		"@storybook/test-runner": "^0.23.0",
 		"@storybook/theming": "8.4.7",
 		"@storybook/web-components-vite": "8.4.7",
 		"@whitespace/storybook-addon-html": "^7.0.0",

.storybook/package.json

@@ -15,6 +15,7 @@ import DocumentationTemplate from "./templates/DocumentationTemplate.mdx";
 import { argTypes, globalTypes } from "./types";
 
 // Import the custom base styles
+import "@spectrum-css/bundle/dist/index.css";
 import "./assets/base.css";
 
 /** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */