WIP: @stencil/storybook-plugin experimentation

packages/react-library/package.json

@@ -34,9 +34,9 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@types/react": "^18.0.31",
+    "@types/react": "^19.1.0",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "^5.0.3"
   }

packages/stencil-library/.storybook/main.ts

@@ -1,25 +1,19 @@
-import type { StorybookConfig } from '@storybook/web-components-vite';
-import { join, dirname } from "path"
+import type { StorybookConfig } from "@stencil/storybook-plugin";
+
 
-/**
-* This function is used to resolve the absolute path of a package.
-* It is needed in projects that use Yarn PnP or are set up within a monorepo.
-*/
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')))
-}
 const config: StorybookConfig = {
   "stories": [
-    "../src/**/*.mdx",
-    "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/components/**/*.stories.tsx",
+    // "../src/**/*.mdx",
+    // "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"
   ],
-  "addons": [
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-a11y'),
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
   ],
   "framework": {
-    "name": getAbsolutePath('@storybook/web-components-vite'),
-    "options": {}
+    "name": "@stencil/storybook-plugin",
   },
   staticDirs: [{ from: './assets', to: '/assets'}],
 };

packages/stencil-library/.storybook/manager.ts

@@ -1,5 +1,5 @@
-import {addons} from '@storybook/manager-api';
-import {create} from '@storybook/theming';
+import {addons} from 'storybook/manager-api';
+import {create} from 'storybook/theming';
 
 const theme = create({
   base: 'dark',

packages/stencil-library/.storybook/preview.tsx

@@ -1,44 +1,37 @@
-// Reverting to .ts as React is no longer part of this version
-import type { Preview } from '@storybook/web-components';
-import { setCustomElementsManifest } from '@storybook/web-components';
-import { defineCustomElements } from '../loader';
-import customElements from '../custom-elements.json';
-import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import React from 'react';
-import { h } from '@stencil/core';
-
-// Register Stencil components and set the custom elements manifest
-defineCustomElements();
-setCustomElementsManifest(customElements);
+import { type Preview } from "@stencil/storybook-plugin";
+import { Title, Subtitle, Description, Primary, Controls, Stories} from "@storybook/addon-docs/blocks";
+import { h } from "@stencil/core";
 
 const preview: Preview = {
+  tags: ["autodocs"],
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
-    tags: ["autodocs"],
+    actions: { argTypesRegex: "^on[A-Z].*" },
     docs: {
-      page: () => (
-        [
+      source: {
+        excludeDecorators: true,
+      },
+      page: () => [
           <Title />,
           <Subtitle />,
           <Primary />,
           <Controls />,
           <Stories />,
-          <Description />
-        ]
-      ),
+          <Description />,
+      ],
       extractComponentDescription: (component, { notes }) => {
         if (notes) {
-          return typeof notes === 'string' ? notes : notes.markdown || notes.text;
+          return typeof notes === "string" ? notes : notes.markdown || notes.text;
         }
         return null;
       },
     },
   },
 };
 
-export default preview;
+export default preview;

packages/stencil-library/eslint.config.ts

@@ -1,15 +1,18 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import stencil from "@stencil/eslint-plugin";
 import tseslint from "typescript-eslint";
 import eslint from "@eslint/js";
 import dnnElements from "./eslint-plugin";
-import storybook from "eslint-plugin-storybook";
+//import storybook from "eslint-plugin-storybook";
 
 export default (tseslint.config(
     eslint.configs.recommended,
     tseslint.configs.recommendedTypeChecked,
     stencil.configs.flat.recommended,
     dnnElements.configs.flat.recommended,
-    storybook.configs["flat/recommended"],
+    //storybook.configs["flat/recommended"],
     {
         files: [
             "src/**/*.{ts,tsx}",
@@ -79,4 +82,5 @@ export default (tseslint.config(
             "no-fallthrough": "off",
         }
     },
+    storybook.configs["flat/recommended"]
 ));

packages/stencil-library/licenses.json

@@ -4,11 +4,5 @@
         "repository": "https://github.com/dnncommunity/dnn-elements",
         "path": "",
         "licenseFile": "D:\\dnn-elements\\packages\\stencil-library\\README.md"
-    },
-    "[email protected]": {
-        "licenses": "MIT",
-        "repository": "https://github.com/facebook/react",
-        "path": "node_modules\\react",
-        "licenseFile": "D:\\dnn-elements\\packages\\stencil-library\\node_modules\\react\\LICENSE"
     }
 }

packages/stencil-library/package.json

@@ -46,27 +46,22 @@
     "generate": "stencil generate",
     "lint": "eslint",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
     "deploy-storybook": "gh-pages -d storybook-static --branch site",
     "build.eslint-plugin": "tsc -p eslint-plugin/tsconfig.json",
     "test.eslint-plugin": "vitest run --config eslint-plugin/vitest.config.ts",
-    "test.eslint-plugin.watch": "vitest --config eslint-plugin/vitest.config.ts --watch"
+    "test.eslint-plugin.watch": "vitest --config eslint-plugin/vitest.config.ts --watch",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.1.0",
     "@eslint/js": "^9.24.0",
-    "@stencil/core": "4.31.0",
+    "@stencil/core": "^4.33.1",
     "@stencil/eslint-plugin": "1.0.0",
     "@stencil/react-output-target": "^0.5.1",
     "@stencil/sass": "^3.0.4",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
-    "@storybook/web-components": "^8.6.12",
-    "@storybook/web-components-vite": "^8.6.12",
+    "@stencil/storybook-plugin": "^0.4.0",
+    "@storybook/addon-a11y": "^9.0.8",
+    "@storybook/addon-docs": "^9.0.8",
+    "@storybook/addon-links": "^9.0.8",
     "@timkendrick/monaco-editor": "^0.0.9",
     "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^8.30.1",
@@ -76,20 +71,20 @@
     "axe-playwright": "^2.0.1",
     "babel-loader": "^9.1.2",
     "eslint": "^9.24.0",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^9.0.8",
     "gh-pages": "^6.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jiti": "^2.4.2",
     "license-checker-rseidelsohn": "^4.2.6",
     "lit": "^3.1.0",
     "npm-run-all": "^4.1.5",
+    "playwright": "^1.52.0",
     "puppeteer": "^24.6.1",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.8",
     "ts-node": "^10.9.2",
     "typescript": "5.8.3",
     "typescript-debounce-decorator": "^0.0.18",