Storybook upgrade

package.json

@@ -14,7 +14,7 @@
     ],
     "scripts": {
         "start": "concurrently --kill-others-on-fail \"yarn workspace @adyen/adyen-web start\"  \"yarn workspace @adyen/adyen-web-playground start\" --names \"lib,playground\"",
-        "start:storybook": "yarn workspace @adyen/adyen-web start:storybook",
+        "start:storybook": "concurrently --kill-others-on-fail  \"yarn workspace @adyen/adyen-web-server start\"  \"yarn workspace @adyen/adyen-web start:storybook\" --names \"express-server,storybook\"",
         "start:prod-storybook": "yarn workspace @adyen/adyen-web-server start:storybook",
         "build": "yarn workspace @adyen/adyen-web build",
         "build:storybook": "yarn workspace @adyen/adyen-web build:storybook",

packages/e2e-playwright/playwright.config.ts

@@ -5,7 +5,8 @@ import * as path from 'path';
 import { protocol } from './environment-variables';
 
 dotenv.config({ path: path.resolve('../../', '.env') });
-const playgroundBaseUrl = `${protocol}://localhost:3020`;
+
+const playgroundBaseUrl = `${protocol}://localhost:3030`;
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -79,7 +80,7 @@ const config: PlaywrightTestConfig = {
         {
             command: 'npm run build:storybook && npm run start:prod-storybook',
             cwd: '../..',
-            port: 3020,
+            port: 3030,
             reuseExistingServer: !process.env.CI,
             timeout: 120 * 1000
         }

packages/lib/.storybook/main.ts

@@ -1,10 +1,15 @@
 import type { StorybookConfig } from '@storybook/preact-vite';
 import { mergeConfig } from 'vite';
 import * as path from 'path';
-// import eslint from '@rollup/plugin-eslint';
 import stylelint from 'vite-plugin-stylelint';
 import generateEnvironmentVariables from '../config/environment-variables';
 import { resolve } from 'node:path';
+import preact from '@preact/preset-vite';
+
+const certPath = process.env.CERT_PATH ?? path.resolve(__dirname, 'localhost.pem');
+const certKeyPath = process.env.CERT_KEY_PATH ?? path.resolve(__dirname, 'localhost-key.pem');
+
+const isHttps = process.env.IS_HTTPS === 'true';
 
 const config: StorybookConfig = {
     stories: ['../storybook/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -31,8 +36,9 @@ const config: StorybookConfig = {
     staticDirs: ['../storybook/assets', '../storybook/public'],
 
     viteFinal(config) {
-        return mergeConfig(config, {
+        const finalConfig = mergeConfig(config, {
             define: generateEnvironmentVariables(process.env.NODE_ENV),
+
             resolve: {
                 alias: [
                     {
@@ -43,24 +49,35 @@ const config: StorybookConfig = {
                     { find: /^styles(.*)$/, replacement: resolve(__dirname, '../src/styles') }
                 ]
             },
+
+            plugins: [preact(), stylelint({ emitErrorAsWarning: true })],
+
             server: {
+                ...(isHttps && {
+                    https: {
+                        key: certKeyPath,
+                        cert: certPath
+                    }
+                }),
+
                 watch: {
                     usePolling: true
+                },
+
+                proxy: {
+                    '/api': {
+                        target: `${isHttps ? 'https' : 'http'}://localhost:3030`,
+                        secure: false
+                    },
+                    '/sdk': {
+                        target: `${isHttps ? 'https' : 'http'}://localhost:3030`,
+                        secure: false
+                    }
                 }
-            },
-            plugins: [
-                stylelint({ emitErrorAsWarning: true })
-                // TODO: Enable this once @rollup/plugin-eslint supports ESLINT 9
-                // {
-                //     ...eslint({
-                //         include: ['./src/**'],
-                //         exclude: ['./src/**/*.json', './src/**/*.scss']
-                //     }),
-                //     enforce: 'pre',
-                //     apply: 'serve'
-                // }
-            ]
+            }
         });
+
+        return finalConfig;
     }
 };
 export default config;

packages/lib/package.json

@@ -92,16 +92,16 @@
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-terser": "0.4.4",
     "@size-limit/preset-big-lib": "11.1.6",
-    "@storybook/addon-a11y": "^8.3.4",
-    "@storybook/addon-essentials": "^8.3.4",
-    "@storybook/manager-api": "^8.3.4",
-    "@storybook/preact": "^8.3.4",
-    "@storybook/preact-vite": "^8.3.4",
+    "@storybook/addon-a11y": "8.6.3",
+    "@storybook/addon-essentials": "8.6.3",
+    "@storybook/manager-api": "8.6.3",
+    "@storybook/preact": "8.6.3",
+    "@storybook/preact-vite": "8.6.3",
     "@swc/core": "1.10.17",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/preact": "3.2.4",
     "@testing-library/preact-hooks": "1.1.0",
-    "@testing-library/user-event": "14.6.1",
+    "@testing-library/user-event": "14.5.2",
     "@types/eslint__js": "8.42.3",
     "@types/jest": "29.5.14",
     "autoprefixer": "10.4.20",
@@ -114,7 +114,7 @@
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-storybook": "0.11.3",
     "eslint-plugin-testing-library": "6.5.0",
     "globals": "15.14.0",
     "husky": "9.1.7",
@@ -133,7 +133,7 @@
     "rollup-plugin-swc3": "0.12.1",
     "sass": "1.77.8",
     "size-limit": "11.1.6",
-    "storybook": "^8.3.4",
+    "storybook": "8.6.3",
     "stylelint": "16.12.0",
     "stylelint-config-standard-scss": "13.1.0",
     "ts-jest": "29.2.5",

packages/lib/storybook/utils/http-post.ts

@@ -1,7 +1,7 @@
 const { host, protocol } = window.location;
 
 export async function httpPost<T>(endpoint: string, data: any): Promise<T> {
-    const response = await fetch(`${protocol}//${host}/${endpoint}`, {
+    const response = await fetch(`${protocol}//${host}/api/${endpoint}`, {
         method: 'POST',
         headers: {
             Accept: 'application/json, text/plain, */*',

packages/playground/src/utils.js

@@ -1,7 +1,7 @@
 const { host, protocol } = window.location;
 
 export const httpPost = (endpoint, data) =>
-    fetch(`${protocol}//${host}/${endpoint}`, {
+    fetch(`${protocol}//${host}/api/${endpoint}`, {
         method: 'POST',
         headers: {
             Accept: 'application/json, text/plain, */*',
@@ -69,7 +69,7 @@ const insertHeader = pages => {
 };
 
 export const searchFunctionExample = async (value, actions) => {
-    const url = `/mock/addressSearch?search=${encodeURIComponent(value)}`;
+    const url = `/api/mock/addressSearch?search=${encodeURIComponent(value)}`;
 
     const formattedData = await fetch(url)
         .then(res => res.json())

packages/server/index.js

@@ -40,32 +40,32 @@ module.exports = (app = express(), options = {}) => {
         app.use(express.static(path.join(__dirname, '../lib/storybook-static')));
     }
 
-    app.all('/paypal/updateOrder', (req, res) => paypalUpdateOrder(res, req.body));
+    app.all('/api/paypal/updateOrder', (req, res) => paypalUpdateOrder(res, req.body));
 
-    app.all('/paymentMethods', (req, res) => getPaymentMethods(res, req.body));
+    app.all('/api/paymentMethods', (req, res) => getPaymentMethods(res, req.body));
 
-    app.all('/paymentMethods/balance', (req, res) => getPaymentMethodsBalance(res, req.body));
+    app.all('/api/paymentMethods/balance', (req, res) => getPaymentMethodsBalance(res, req.body));
 
-    app.all('/payments', (req, res) => makePayment(res, req.body));
+    app.all('/api/payments', (req, res) => makePayment(res, req.body));
 
-    app.all('/details', (req, res) => postDetails(res, req.body));
+    app.all('/api/details', (req, res) => postDetails(res, req.body));
 
-    app.all('/orders', (req, res) => createOrder(res, req.body));
+    app.all('/api/orders', (req, res) => createOrder(res, req.body));
 
-    app.all('/orders/cancel', (req, res) => cancelOrder(res, req.body));
+    app.all('/api/orders/cancel', (req, res) => cancelOrder(res, req.body));
 
-    app.all('/sessions', (req, res) => createSession(res, req.body));
+    app.all('/api/sessions', (req, res) => createSession(res, req.body));
 
-    app.all('/mock/addressSearch', (req, res) => mockAddressSearch(res, req));
+    app.all('/api/mock/addressSearch', (req, res) => mockAddressSearch(res, req));
 
-    app.all('/donationCampaigns', (req, res) => getDonationCampaigns(res, req.body));
+    app.all('/api/donationCampaigns', (req, res) => getDonationCampaigns(res, req.body));
 
-    app.all('/donations', (req, res) => createDonation(res, req.body));
+    app.all('/api/donations', (req, res) => createDonation(res, req.body));
 
     app.all('/sdk/:adyenWebVersion/translations/:locale.json', (req, res) => getTranslation(res, req));
 
     if (options.listen) {
-        const port = process.env.PORT || 3020;
+        const port = process.env.PORT || 3030;
 
         isHttps
             ? https.createServer({ key, cert }, app).listen(port, () => {