👷 Update storybook dockerfile

.github/workflows/build_storybook.yaml

@@ -20,10 +20,6 @@ jobs:
   build-storybook-with-docker:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [23.x]
-
     steps:
       - uses: actions/checkout@v4
       - name: Build the docker image

Dockerfile

@@ -1,30 +1,23 @@
 # Base
-FROM oven/bun:alpine as base
+FROM oven/bun:alpine AS base
 WORKDIR /app
-COPY package*.json ./
-COPY tsconfig*.json ./
+COPY package.json ./
+COPY bun.lockb ./
+COPY tsconfig.json ./
+COPY src ./src
+COPY .storybook ./.storybook
+COPY public ./public
+COPY eslint.config.js ./
+COPY vite.config.ts ./
 
-# Dependencies
-FROM base as dependencies
-WORKDIR /app
-RUN bun install --frozen-lockfile
-COPY src src
-COPY .storybook .storybook
-COPY public public
-COPY eslint.config.js eslint.config.js
-COPY vite.config.ts vite.config.ts
-
-# Build
-FROM dependencies as builder
-WORKDIR /app
-RUN bun run build-storybook
+RUN bun install --frozen-lockfile && bun run build-storybook
 
 # STAGE 2 => SETUP NGINX and Run
 FROM nginxinc/nginx-unprivileged:alpine
 USER 0
 # Clear default nginx html file
 RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/storybook-static /usr/share/nginx/html
+COPY --from=base /app/storybook-static /usr/share/nginx/html
 COPY proxy/nginx.conf /etc/nginx/conf.d/default.conf.template
 COPY proxy/securityheaders.conf /etc/nginx/securityheaders.conf
 

config/config_files/Dockerfile

@@ -2,7 +2,7 @@
 FROM oven/bun:alpine as base
 WORKDIR /app
 COPY package.json ./
-COPY package-lock.json ./
+COPY bun.lockb ./
 COPY tsconfig.json ./
 COPY vite.config.ts ./
 COPY index.html ./

package.json

@@ -20,8 +20,8 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "start": "NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
-    "build-storybook": "NODE_OPTIONS='--openssl-legacy-provider --max-old-space-size=2048' storybook build",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "pretty": "prettier --check ./config ./src ./.storybook",
     "pretty:fix": "prettier --write ./config ./src ./.storybook",
     "lint": "eslint ./src ./.storybook",
@@ -101,18 +101,18 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
-    "@storybook/addon-actions": "^8.3.5",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-docs": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-mdx-gfm": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/components": "^8.3.5",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/preview-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/components": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
     "@tanstack/react-query": "^5.59.15",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
@@ -151,9 +151,9 @@
     "rollup": "^4.24.0",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-import-css": "^3.5.5",
-    "storybook": "^8.3.5",
+    "storybook": "^8.4.7",
     "storybook-addon-data-theme-switcher": "^0.4.2",
-    "storybook-addon-remix-react-router": "^3.0.1",
+    "storybook-addon-remix-react-router": "^3.0.2",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",
     "uuid": "^10.0.0",

public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.11'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.8'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,26 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }