feat(storybook): live modifiers preview

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

.github/workflows/lint.yml

@@ -115,7 +115,7 @@ jobs:
                   reporter: github-pr-review
                   filter_mode: diff_context
                 #   eslint_flags: "components/*/stories/*.js"
-                  eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
+                  eslint_flags: "--config ${{ github.workspace }}/.eslintrc ${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
 
             - name: Run markdownlint on documentation
               uses: reviewdog/action-markdownlint@v0.26.2

.storybook/assets/base.css

@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -89,4 +87,14 @@ svg:has(symbol):not(:has(use)) {
 	overflow: visible !important;
 }
 
-/* stylelint-enable selector-class-pattern */
+#panel-tab-content tr th:nth-child(1),
+#panel-tab-content tr th:nth-child(3),
+#panel-tab-content tr td:nth-child(1),
+#panel-tab-content tr td:nth-child(3) {
+	min-inline-size: 100px !important;
+}
+
+#panel-tab-content tr th:nth-child(2),
+#panel-tab-content tr td:nth-child(2) {
+	max-inline-size: 500px !important;
+}

.storybook/assets/index.css

@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -119,4 +117,3 @@ select:focus,
 	border-color: rgb(2, 101, 220) !important;
 	box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !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

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

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

.storybook/preview.js

@@ -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 */