chore: automatically detect component props and description

Author: scriptcoded

packages/storybook/.storybook/main.ts

@@ -4,7 +4,6 @@ import type { UserConfig } from "vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@chromatic-com/storybook",
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
     "@storybook/addon-vitest",

packages/storybook/.storybook/preview.ts

@@ -2,22 +2,56 @@ import type { Preview } from "@storybook/react-vite";
 
 import "@scouterna/ui-webc/dist/ui-webc/ui-webc.css";
 
+import { setCustomElementsManifest } from "@stencil/storybook-plugin";
+import kebabCase from "lodash.kebabcase";
+import customElements from "../../ui-webc/dist/custom-elements.json";
+// This export isn't very nice, but @stencil/storybook-plugin doesn't expose this functionality
+import { parameters } from "../node_modules/@stencil/storybook-plugin/dist/entry-preview-argtypes";
+
+setCustomElementsManifest(customElements);
+
+const getComponentWebcName = (component: unknown): string | null => {
+  if (
+    component &&
+    typeof component === "object" &&
+    "displayName" in component &&
+    typeof component.displayName === "string"
+  ) {
+    return `scout-${kebabCase(component.displayName)}`;
+  }
+
+  return null;
+};
+
 const preview: Preview = {
   parameters: {
+    docs: {
+      extractArgTypes: (component: unknown) => {
+        const webcName = getComponentWebcName(component);
+        if (!webcName) return null;
+        return parameters.docs.extractArgTypes(webcName);
+      },
+      extractComponentDescription: (component: unknown) => {
+        const webcName = getComponentWebcName(component);
+        if (!webcName) return null;
+        return parameters.docs.extractComponentDescription(webcName);
+      },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
-
+    actions: { argTypesRegex: "^onScout.*" },
     a11y: {
       // 'todo' - show a11y violations in the test UI only
       // 'error' - fail CI on a11y violations
       // 'off' - skip a11y checks entirely
       test: "todo",
     },
   },
+  tags: ["autodocs"],
 };
 
 export default preview;

packages/storybook/package.json

@@ -12,34 +12,36 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "lodash.kebabcase": "^4.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.39.1",
-    "@scouterna/ui-webc": "workspace:^",
     "@scouterna/ui-react": "workspace:^",
+    "@scouterna/ui-webc": "workspace:^",
+    "@stencil/storybook-plugin": "^0.5.6",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",
     "@storybook/addon-vitest": "^10.0.8",
     "@storybook/react-vite": "^10.0.8",
+    "@types/lodash.kebabcase": "^4.1.9",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.12",
+    "@vitest/coverage-v8": "^4.0.12",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "eslint-plugin-storybook": "^10.0.8",
     "globals": "^16.5.0",
+    "playwright": "^1.56.1",
     "storybook": "^10.0.8",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
-    "vitest": "^4.0.12",
-    "playwright": "^1.56.1",
-    "@vitest/browser-playwright": "^4.0.12",
-    "@vitest/coverage-v8": "^4.0.12"
+    "vitest": "^4.0.12"
   }
 }

packages/storybook/src/stories/button.stories.tsx

@@ -1,8 +1,6 @@
 import { ScoutButton } from "@scouterna/ui-react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-// import { ScoutButton } from "../../../ui-react/lib/components/stencil-generated/components";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -12,10 +10,6 @@ const meta = {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered",
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"],
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
-  args: { onClick: fn() },
 } satisfies Meta<typeof ScoutButton>;
 
 export default meta;

packages/ui-webc/src/components.d.ts

@@ -22,6 +22,9 @@ export namespace Components {
          */
         "type": ItemType;
     }
+    /**
+     * A simple button component.
+     */
     interface ScoutButton {
         "icon"?: string;
         /**
@@ -54,6 +57,9 @@ declare global {
     interface HTMLScoutButtonElementEventMap {
         "scoutClick": void;
     }
+    /**
+     * A simple button component.
+     */
     interface HTMLScoutButtonElement extends Components.ScoutButton, HTMLStencilElement {
         addEventListener<K extends keyof HTMLScoutButtonElementEventMap>(type: K, listener: (this: HTMLScoutButtonElement, ev: ScoutButtonCustomEvent<HTMLScoutButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -87,6 +93,9 @@ declare namespace LocalJSX {
          */
         "type"?: ItemType;
     }
+    /**
+     * A simple button component.
+     */
     interface ScoutButton {
         "icon"?: string;
         "onScoutClick"?: (event: ScoutButtonCustomEvent<void>) => void;
@@ -111,6 +120,9 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "scout-bottom-bar": LocalJSX.ScoutBottomBar & JSXBase.HTMLAttributes<HTMLScoutBottomBarElement>;
             "scout-bottom-bar-item": LocalJSX.ScoutBottomBarItem & JSXBase.HTMLAttributes<HTMLScoutBottomBarItemElement>;
+            /**
+             * A simple button component.
+             */
             "scout-button": LocalJSX.ScoutButton & JSXBase.HTMLAttributes<HTMLScoutButtonElement>;
         }
     }

packages/ui-webc/src/components/button/button.tsx

@@ -2,6 +2,9 @@ import { Component, Event, type EventEmitter, h, Prop } from "@stencil/core";
 
 export type Variant = "primary" | "outlined" | "text" | "caution" | "danger";
 
+/**
+ * A simple button component.
+ */
 @Component({
   tag: "scout-button",
   styleUrl: "button.css",

packages/ui-webc/src/components/button/readme.md

@@ -5,6 +5,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+A simple button component.
+
 ## Properties
 
 | Property  | Attribute | Description | Type                                                         | Default      |

packages/ui-webc/stencil.config.ts

@@ -30,6 +30,10 @@ export const config: Config = {
       type: "www",
       serviceWorker: null, // disable service workers
     },
+    {
+      type: "docs-json",
+      file: "dist/custom-elements.json",
+    },
   ],
   testing: {
     browserHeadless: "shell",