Fixed workflow build

Author: MiroMargineanu

.github/workflows/deploy-storybook.yml

@@ -34,6 +34,17 @@ jobs:
       - name: Build Storybook (includes Stencil build)
         run: yarn run storybook-build
 
+      - name: Verify iframe.html exists
+        run: |
+          if [ ! -f "./storybook-static/iframe.html" ]; then
+            echo "❌ Error: iframe.html missing - Storybook build failed"
+            echo "This indicates the @stencil/storybook-plugin compatibility issue"
+            echo "Stories will not load without iframe.html"
+            ls -la ./storybook-static/ || true
+            exit 1
+          fi
+          echo "✅ iframe.html found - Storybook build successful"
+
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:

.storybook/main.ts

@@ -2,16 +2,25 @@ const config = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
-    name: '@stencil/storybook-plugin',
+    name: '@storybook/web-components-vite',
+    options: {},
   },
-  managerHead: (head) => `
+  managerHead: (head: string) => `
     ${head}
     <base href="./" />
   `,
-  previewHead: (head) => `
+  previewHead: (head: string) => `
     ${head}
     <base href="./" />
   `,
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop: any) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
 };
 
 export default config;

.storybook/preview.tsx

@@ -1,6 +1,5 @@
-/** @jsx h */
-import { h } from '@stencil/core';
-import type { Preview } from '@stencil/storybook-plugin';
+import type { Preview } from '@storybook/web-components';
+import { html } from 'lit';
 
 import { defineCustomElements } from '../dist/web-components';
 
@@ -11,11 +10,13 @@ import './tailwind.css';
 defineCustomElements();
 
 export const decorators: Preview['decorators'] = [
-  (Story, context) => (
-    <div data-mvx-theme={`mvx:${context.globals.backgrounds.value}-theme`}>
-      <Story />
-    </div>
-  ),
+  (story, context) => {
+    return html`
+      <div data-mvx-theme="mvx:${context.globals.backgrounds.value}-theme">
+        ${story()}
+      </div>
+    `;
+  },
 ];
 
 export const initialGlobals: Preview['initialGlobals'] = {

package.json

@@ -101,9 +101,10 @@
     "@rollup/plugin-image": "^3.0.3",
     "@stencil/sass": "^3.0.12",
     "@stencil/store": "2.0.16",
-    "@stencil/storybook-plugin": "^0.4.2",
-    "@storybook/addon-docs": "9.1.7",
-    "@storybook/addon-links": "9.1.7",
+    "@storybook/addon-docs": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/web-components-vite": "8.4.7",
+    "lit": "^3.0.0",
     "@tailwindcss/cli": "4.0.17",
     "@tailwindcss/postcss": "4.1.3",
     "@types/jest": "^29.5.14",
@@ -114,7 +115,7 @@
     "@typescript-eslint/parser": "^8.23.0",
     "eslint": "^9.19.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "9.1.7",
+    "eslint-plugin-storybook": "0.10.2",
     "globals": "^15.14.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -124,7 +125,7 @@
     "rollup-plugin-node-polyfills": "^0.2.1",
     "sass-embedded": "^1.85.1",
     "stencil-tailwind-plugin": "2.0.5",
-    "storybook": "^9.1.7",
+    "storybook": "^8.4.7",
     "tailwindcss": "4.0.15",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.7.3",