Merge pull request #3 from sanak/upgrade-storybook-8.4

Upgrade storybook 8.4

.github/workflows/deploy-pages.yml

@@ -4,28 +4,33 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
 
 jobs:
   # Build job
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Setup Node.js 16
-        uses: actions/setup-node@v3
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: 'npm'
 
       - name: install deps
         run: npm install
 
       - name: Build Storybook
-        run: npm run build-storybook
+        env:
+          BASE_PATH: "/${{ github.event.repository.name }}/"
+        run: |
+          npm run build-storybook
+          node scripts/update-assets-paths.js storybook-static ${BASE_PATH}
 
-      - uses: actions/upload-pages-artifact@v1
+      - uses: actions/upload-pages-artifact@v3
         with:
           path: storybook-static
 
@@ -49,4 +54,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,3 +1,4 @@
 /.cache
 /node_modules
 /storybook-static
+/dist

.storybook/main.js

@@ -1,19 +1,72 @@
-module.exports = {
-  "stories": [
-    "../src/stories/**/*.stories.mdx",
-    "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"
+import path from 'path';
+import vitePluginHtml from '../src/utils/vite-plugin-html';
+
+const framework = process.env.BUILDER == 'vite' ? '@storybook/html-vite'
+                                                : '@storybook/html-webpack5'
+
+export default {
+  stories: [
+    "../src/stories"
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-viewport",
+
+  addons: [
+    "@storybook/addon-essentials"
   ],
+
   staticDirs: [
-    '../public'
+    '../public',
+    '../src/assets'
   ],
-  "framework": "@storybook/html",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
+
+  framework: {
+    name: framework
   },
+
+  webpackFinal: (config) => {
+
+    config.amd = false;
+
+    // Skip html-loader sources processing
+    const htmlLoader = config.module.rules.find(
+      (rule) => rule.test?.toString() === "/\\.html$/"
+    )
+    htmlLoader.use = {
+      loader: 'html-loader',
+      options: {
+        sources: false,
+      }
+    }
+    return {
+      ...config,
+      resolve: {
+        alias: {
+          '@': path.join(__dirname, '../src/assets/')
+        },
+        roots: [
+          path.join(__dirname, '../src/assets/'),
+          path.join(__dirname, '../public')
+        ]
+      }
+    }
+  },
+
+  viteFinal: async (config) => {
+
+    config.plugins.push(
+      vitePluginHtml()
+    )
+
+    return {
+      ...config,
+      resolve: {
+        alias: {
+          '@/': path.join(__dirname, '../src/assets/')
+        }
+      },
+      define: {
+        "process.env": {}
+      },
+      base: process.env.BASE_PATH || '/'
+    }
+  }
 }

.storybook/preview-head.html

@@ -1,15 +1,15 @@
-<script src="./javascripts/jquery-3.6.1-ui-1.13.2-ujs-6.1.7.js"></script>
+<script src="/javascripts/jquery-3.6.1-ui-1.13.2-ujs-6.1.7.js"></script>
 
-<script src="./javascripts/tribute-5.1.3.min.js"></script>
-<script src="./javascripts/tablesort-5.2.1.min.js"></script>
-<script src="./javascripts/tablesort-5.2.1.number.min.js"></script>
+<script src="/javascripts/tribute-5.1.3.min.js"></script>
+<script src="/javascripts/tablesort-5.2.1.min.js"></script>
+<script src="/javascripts/tablesort-5.2.1.number.min.js"></script>
 
-<script src="./javascripts/application.js"></script>
-<script src="./javascripts/responsive.js"></script>
+<script src="/javascripts/application.js"></script>
+<script src="/javascripts/responsive.js"></script>
 
-<script src="./javascripts/jstoolbar/jstoolbar.js"></script>
-<script src="./javascripts/jstoolbar/common_mark.js"></script>
-<script src="./javascripts/jstoolbar/lang/jstoolbar-ja.js"></script>
+<script src="/javascripts/jstoolbar/jstoolbar.js"></script>
+<script src="/javascripts/jstoolbar/common_mark.js"></script>
+<script src="/javascripts/jstoolbar/lang/jstoolbar-ja.js"></script>
 <script>
   window.addEventListener('DOMContentLoaded', () => {
     $.ready();

.storybook/preview.js

@@ -1,6 +1,7 @@
-import '../public/stylesheets/jquery/jquery-ui-1.13.2.css'
-import '../public/stylesheets/application.css'
-import '../public/stylesheets/responsive.css'
+import '@/stylesheets/jquery/jquery-ui-1.13.2.css';
+import '@/stylesheets/application.css';
+import '@/stylesheets/responsive.css';
+import '@/stylesheets/jstoolbar.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },