Fixed conflicts

MiroMargineanu · MiroMargineanu · commit f39d60ea103d · 2025-10-13T16:47:45.000+03:00
diff --git a/.storybook/build-static.js b/.storybook/build-static.js
@@ -0,0 +1,48 @@
+import { readdirSync, writeFileSync, mkdirSync, existsSync, rmSync, cpSync } from 'fs';
+import path from 'path';
+
+// Paths
+const distPath = path.resolve('dist/web-components');
+const staticPath = path.resolve('storybook-static');
+const iframePath = path.join(staticPath, 'iframe.html');
+
+// 1️⃣ Clear previous static folder
+if (existsSync(staticPath)) rmSync(staticPath, { recursive: true });
+mkdirSync(staticPath, { recursive: true });
+
+// 2️⃣ Copy web-components folder
+cpSync(distPath, path.join(staticPath, 'web-components'), { recursive: true });
+
+// 3️⃣ Get all JS/CSS files in dist/web-components
+const files = readdirSync(distPath);
+const jsFiles = files.filter(f => f.endsWith('.js'));
+const cssFiles = files.filter(f => f.endsWith('.css'));
+
+// 4️⃣ Generate iframe.html dynamically
+let iframeContent = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Stencil Storybook</title>
+`;
+
+// Include CSS files
+cssFiles.forEach(file => {
+  iframeContent += `<link rel="stylesheet" href="/web-components/${file}" />\n`;
+});
+
+// Include JS files
+jsFiles.forEach(file => {
+  iframeContent += `<script type="module" src="/web-components/${file}"></script>\n`;
+});
+
+iframeContent += `</head>
+<body>
+<storybook-root></storybook-root>
+</body>
+</html>`;
+
+// 5️⃣ Write iframe.html
+writeFileSync(iframePath, iframeContent, 'utf-8');
+
+console.log('✅ Generated iframe.html with all JS/CSS files dynamically!');
diff --git a/.storybook/iframe.html b/.storybook/iframe.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stencil Storybook</title>
+    <!-- Include your compiled components -->
+    <script type="module" src="/web-components/your-component.js"></script>
+    <link rel="stylesheet" href="/web-components/your-component.css" />
+  </head>
+  <body>
+    <storybook-root></storybook-root>
+  </body>
+</html>
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,29 +1,19 @@
+import path from 'path';
+
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
-    name: '@storybook/web-components-vite',
+    name: '@stencil/storybook-plugin',
     options: {},
   },
-  managerHead: (head: string) => `
-    ${head}
-    <base href="./" />
-  `,
-  previewHead: (head: string) => `
-    ${head}
-    <base href="./" />
-    <script type="module">
-      import { defineCustomElements } from '../dist/web-components/index.js';
-      defineCustomElements();
-    </script>
-  `,
-  typescript: {
-    check: false,
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop: any) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-    },
+  staticDirs: ['../dist/web-components'], // <-- important
+  webpackFinal: async config => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@dist': path.resolve(__dirname, '../dist'),
+    };
+    return config;
   },
 };
 
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "start": "yarn run build:dev --watch --serve",
     "storybook-build-tailwind": "npx ts-node .storybook/generate-safelist.ts && npx @tailwindcss/cli -i src/global/tailwind.css -o .storybook/tailwind.css --content '.storybook/tailwind-safelist.html' && rm -f .storybook/tailwind-safelist.html",
     "storybook-dev": "yarn run build && yarn run storybook-build-tailwind && storybook dev -p 6006 --no-open",
-    "storybook-build": "yarn run build && yarn run storybook-build-tailwind && storybook build"
+    "storybook-build": "NODE_ENV=production yarn build && yarn storybook-build-tailwind && storybook build && node .storybook/build-static.js"
   },
   "dependencies": {
     "@stencil/core": "^4.36.2",
