feat(storybook): display custom properties

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

.github/workflows/development.yml

@@ -112,9 +112,7 @@ jobs:
                         - '*.md'
                         - .storybook/*.md
                         - .storybook/*/*.md
-                        - .storybook/*/*.mdx
                         - components/*/*.md
-                        - components/*/stories/*.mdx
                         - plugins/*/*.md
                         - tokens/*.md
                         - tools/*/*.md

.github/workflows/lint.yml

@@ -116,10 +116,11 @@ 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/[email protected]
+              if: ${{ inputs.mdlint_added_files != '' || inputs.mdlint_modified_files != '' }}
               with:
                 reporter: github-pr-review
                 filter_mode: diff_context

.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 */
@@ -77,4 +75,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.
  *
@@ -125,5 +123,3 @@ div.sb-bar {
 	color: var(--spectrum-neutral-content-color-default) !important;
 	background-color: var(--spectrum-background-layer-2-color) !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",
@@ -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",