Upgrade to StoryBook 8

.github/workflows/acceptance.yml

@@ -1022,6 +1022,10 @@ jobs:
         run: yarn stylelint
         working-directory: ${{env.project-directory}}
 
+      - name: Build Storybook
+        run: yarn build-storybook
+        working-directory: ${{env.project-directory}}
+
       - name: Cypress acceptance tests
         uses: cypress-io/github-action@v6
         env:

docs/source/upgrade-guide/index.md

@@ -186,6 +186,30 @@ becomes:
 import { slateBeforeEach } from '@plone/volto/cypress/support/helpers';
 ```
 
+### Storybook 8
+
+Storybook was upgraded from version 6 to 8 in core and in the project generator.
+This section is relevant if you have Storybook stories in your project or add-on.
+The versions will be upgraded automatically using the `volto-update-deps` script.
+The configuration of your project must also be updated with the new one.
+Replace the `.storybook` folder in your project with this one:
+
+https://github.com/plone/volto/tree/5605131868689778bbdca0c3003a40cb9f153c1a/packages/generator-volto/generators/app/templates/.storybook
+
+
+```{seealso}
+[Migration guide from Storybook 6.x to 8.0](https://storybook.js.org/docs/migration-guide/from-older-version)
+```
+
+If you haven't customized the configuration, the migration is straightforward.
+The stories format (CSF) is almost the same.
+However, writing stories directly in MDX was removed in Storybook 8.
+The `.stories.mdx` extension is no longer supported.
+
+```{note}
+Although it is technically possible to keep the old version running, the script `volto-update-deps` will try to update to Storybook 8 every time you run it.
+```
+
 (volto-upgrade-guide-17.x.x)=
 
 ## Upgrading to Volto 17.x.x

package.json

@@ -8,7 +8,7 @@
     "build:deps": "pnpm --filter @plone/registry --filter @plone/client build",
     "build:registry": "pnpm --filter @plone/registry run build",
     "build:components": "pnpm --filter @plone/components run build",
-    "build": "pnpm build:deps && pnpm --filter @plone/volto build",
+    "build": "pnpm --filter @plone/volto build",
     "start": "pnpm build:deps && pnpm --filter @plone/volto start",
     "start:project": "pnpm --filter plone run start",
     "lint": "pnpm build:deps && eslint --max-warnings=0 '{apps,packages}/**/*.{js,jsx,ts,tsx}'",
@@ -30,8 +30,8 @@
   "devDependencies": {
     "@parcel/packager-ts": "^2.12.0",
     "@parcel/transformer-typescript-types": "^2.12.0",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "9.1.0",
@@ -51,8 +51,7 @@
   "pnpm": {
     "overrides": {
       "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
-      "react-refresh": "0.14.0",
-      "webpack": "5.90.1"
+      "react-refresh": "0.14.0"
     }
   }
 }

packages/blocks/package.json

@@ -63,7 +63,7 @@
     "parcel": "^2.12.0",
     "release-it": "17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "5.2.2",
+    "typescript": "5.4.2",
     "vitest": "^1.3.1"
   }
 }

packages/client/news/5912.internal

@@ -0,0 +1 @@
+Sync TypeScript version @sneridagh

packages/client/package.json

@@ -85,7 +85,7 @@
     "react-dom": "^18.2.0",
     "release-it": "17.1.1",
     "tsup": "^8.0.2",
-    "typescript": "5.2.2",
+    "typescript": "5.4.2",
     "uuid": "^9.0.1",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^3.7.3",

packages/components/news/5912.internal

@@ -0,0 +1 @@
+Upgrade Storybook to version 8. @sneridagh

packages/components/package.json

@@ -84,22 +84,22 @@
     "@parcel/transformer-typescript-types": "^2.12.0",
     "@plone/types": "workspace: *",
     "@react-types/shared": "^3.22.0",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-mdx-gfm": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@types/jest-axe": "^3.5.7",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "@vitejs/plugin-react": "^4.1.0",
     "@vitest/coverage-v8": "^1.3.1",
     "browserslist": "^4.23.0",
@@ -113,18 +113,19 @@
     "parcel-optimizer-react-client": "workspace:^",
     "prettier": "3.2.5",
     "release-it": "17.1.1",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.4",
     "stylelint": "16.2.1",
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-prettier": "5.0.0",
-    "typescript": "5.2.2",
+    "typescript": "5.4.2",
     "vite": "^5.1.4",
     "vitest": "^1.3.1",
     "vitest-axe": "^0.1.0"
   },
   "dependencies": {
     "@react-aria/utils": "^3.22.0",
     "@react-spectrum/utils": "^3.11.1",
+    "@storybook/test": "^8.0.4",
     "clsx": "^2.0.0",
     "react-aria-components": "^1.1.1"
   },

packages/generator-volto/generators/app/templates/.storybook/main.js

@@ -61,19 +61,20 @@ const defaultRazzleOptions = {
 };
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    // '@storybook/preset-scss',
+    '@storybook/addon-webpack5-compiler-babel',
   ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { builder: { useSWC: true } },
+  },
   typescript: {
     check: false,
     checkOptions: {},
-    reactDocgen: 'react-docgen-typescript-plugin',
+    reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       compilerOptions: {
         allowSyntheticDefaultImports: false,
@@ -151,9 +152,12 @@ module.exports = {
       .getAddons()
       .map((addon) => fs.realpathSync(addon.modulePath));
 
-    resultConfig.module.rules[1].exclude = (input) =>
+    resultConfig.module.rules[13].exclude = (input) =>
       // exclude every input from node_modules except from @plone/volto
       /node_modules\/(?!(@plone\/volto)\/)/.test(input) &&
+      // Storybook default exclusions
+      /storybook-config-entry\.js$/.test(input) &&
+      /storybook-stories\.js$/.test(input) &&
       // If input is in an addon, DON'T exclude it
       !addonPaths.some((p) => input.includes(p));
 
@@ -172,19 +176,4 @@ module.exports = {
 
     return extendedConfig;
   },
-  babel: async (options) => {
-    return {
-      ...options,
-      plugins: [
-        ...options.plugins,
-        [
-          './node_modules/babel-plugin-root-import/build/index.js',
-          {
-            rootPathSuffix: './src',
-          },
-        ],
-      ],
-      // any extra options you want to set
-    };
-  },
 };

packages/generator-volto/generators/app/templates/.storybook/preview.js

@@ -7,7 +7,6 @@ import enMessages from '@root/../locales/en.json';
 import '@root/theme';
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,

packages/generator-volto/generators/app/templates/package.json.tpl

@@ -23,8 +23,8 @@
     "start:prod": "NODE_ENV=production node build/server.js",
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n",
     "volto-update-deps": "volto-update-deps",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "private": <%- private %>,
   "workspaces": <%- workspaces %>,

packages/generator-volto/news/5912.internal

@@ -0,0 +1 @@
+Update project template to use Storybook 8. @sneridagh

packages/helpers/package.json

@@ -62,7 +62,7 @@
     "parcel": "2.12.0",
     "release-it": "^17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "vitest": "^1.3.1"
   }
 }

packages/registry/news/5912.internal

@@ -0,0 +1 @@
+Sync TypeScript version @sneridagh

packages/registry/package.json

@@ -83,7 +83,7 @@
     "react-dom": "^18.2.0",
     "release-it": "16.2.1",
     "tsconfig": "workspace:*",
-    "typescript": "5.2.2",
+    "typescript": "5.4.2",
     "vitest": "^0.34.6"
   }
 }

packages/types/news/5912.internal

@@ -0,0 +1 @@
+Sync TypeScript version @sneridagh

packages/types/package.json

@@ -56,6 +56,6 @@
     "react-intl": "3.8.0",
     "release-it": "^17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "5.3.3"
+    "typescript": "5.4.2"
   }
 }

packages/volto/.storybook/main.js

@@ -58,9 +58,29 @@ const defaultRazzleOptions = {
   ],
 };
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-webpack5-compiler-babel',
+  ],
   staticDirs: ['./static'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { builder: { useSWC: true } },
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      propFilter: () => true,
+    },
+  },
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -125,41 +145,16 @@ module.exports = {
     const addonPaths = registry.addonNames.map((addon) =>
       fs.realpathSync(registry.packages[addon].modulePath),
     );
-    resultConfig.module.rules[1].exclude = (input) =>
+
+    resultConfig.module.rules[13].exclude = (input) =>
       // exclude every input from node_modules except from @plone/volto
       /node_modules\/(?!(@plone\/volto)\/)/.test(input) &&
+      // Storybook default exclusions
+      /storybook-config-entry\.js$/.test(input) &&
+      /storybook-stories\.js$/.test(input) &&
       // If input is in an addon, DON'T exclude it
       !addonPaths.some((p) => input.includes(p));
+
     return resultConfig;
   },
-  babel: async (options) => {
-    return {
-      ...options,
-      plugins: [
-        ...options.plugins,
-        [
-          './node_modules/babel-plugin-root-import/build/index.js',
-          {
-            rootPathSuffix: './src',
-          },
-        ],
-      ],
-      // any extra options you want to set
-    };
-  },
-  core: {
-    builder: 'webpack5',
-  },
-  typescript: {
-    check: false,
-    checkOptions: {},
-    reactDocgen: 'react-docgen-typescript-plugin',
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
-      propFilter: () => true,
-    },
-  },
 };

packages/volto/.storybook/manager.js

@@ -1,15 +1,6 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
 
 addons.setConfig({
-  isFullscreen: false,
-  showNav: true,
-  showPanel: true,
-  panelPosition: 'bottom',
-  sidebarAnimations: true,
-  enableShortcuts: true,
-  isToolshown: true,
-  theme: undefined,
-  selectedPanel: undefined,
-  initialActive: 'sidebar',
-  showRoots: true,
+  theme,
 });