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.

.eslintrc

@@ -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",

.storybook/assets/base.css

@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -31,7 +29,7 @@ body {
 .spectrum {
 	color: var(--spectrum-neutral-content-color-default);
 	background-color: var(--spectrum-background-base-color);
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+	-webkit-tap-highlight-color: rgb(0, 0, 0, 0%);
 }
 
 .spectrum .spectrum-examples-static-black {
@@ -61,7 +59,7 @@ svg:has(symbol):not(:has(use)) {
 	line-height: normal;
 	letter-spacing: normal;
 	text-transform: none;
-	border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%);
+	border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%);
 }
 
 /* Force the modal wrapper to be contained by the frame not the viewport */
@@ -76,5 +74,3 @@ svg:has(symbol):not(:has(use)) {
 	story view), due to Storybook's inline style that sets overflow: auto */
 	overflow: visible !important;
 }
-
-/* stylelint-enable selector-class-pattern */

.storybook/decorators/utilities.js

@@ -556,12 +556,12 @@ export const renderContent = (content = [], {
 	if (content.length === 0) return nothing;
 
 	return html`
-		${content.map((c) => {
+		${content.map((c, idx) => {
 			if (typeof c === "undefined") return nothing;
 
 			/* If the content is an object (but not a lit object), we need to merge the object with the template */
 			if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
-				return callback({ ...args, ...c }, context);
+				return callback({ ...args, ...c, idx }, context);
 			}
 
 			if (typeof c === "function") {

.storybook/main.js

@@ -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/package.json

@@ -48,6 +48,7 @@
 		"@babel/core": "^7.28.0",
 		"@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",