Fixed deploy

MiroMargineanu · MiroMargineanu · commit c1d07fdddabe · 2025-10-13T16:23:33.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,10 +1,20 @@
+import path from 'path';
+
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
     name: '@stencil/storybook-plugin',
+    options: {},
+  },
+  staticDirs: ['../dist/web-components'], // <-- important
+  webpackFinal: async config => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@dist': path.resolve(__dirname, '../dist'),
+    };
+    return config;
   },
-  staticDirs: ['../dist/web-components'],
 };
 
 export default 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",
