Upgrade Storybook 8 to 10 (#24)

Run via the official upgrade CLI one major at a time with automigrations.

Drop unused addons: essentials and interactions are core in Storybook 9+;
links, docs and Chromatic were unused (no linkTo, MDX, autodocs, or
Chromatic CI). This leaves storybook, @storybook/react-vite and
eslint-plugin-storybook as the only Storybook dev dependencies.

Exclude stories from the CJS build: Storybook 10 types don't resolve
under node10 module resolution. The ESM build still typechecks them.

Ignore generated docs/build in eslint: a new eslint-plugin-storybook
rule flagged stale typedoc output there.

Disable the onboarding checklist and what's new notifications.

The lockfile is regenerated as npm could not resolve the major bumps
in place.

Author: microbit-matt-hillsdon

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:storybook/recommended',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', 'docs/build', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {

.storybook/main.ts

@@ -2,12 +2,14 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
+  features: {
+    // No onboarding checklist in the sidebar or menu.
+    sidebarOnboardingChecklist: false,
+    menuOnboardingChecklist: false,
+  },
+  core: {
+    disableWhatsNewNotifications: true,
+  },
   framework: {
     name: '@storybook/react-vite',
     options: {},

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
 
 const preview: Preview = {
   parameters: {

package-lock.json

@@ -70,24 +70,17 @@
     "tslib": ">=2.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/react-vite": "^10.5.10",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^10.5.10",
     "prettier": "^3.2.5",
-    "storybook": "^8.2.9",
+    "storybook": "^10.5.10",
     "tslib": "^2.6.2",
     "typedoc": "^0.27.6",
     "typescript": "^5.2.2"

package.json

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { ReactNode, useState } from 'react';
 import MakeCodeBlocksRendering from '../../react/MakeCodeBlocksRendering.js';
 import { MakeCodeRenderBlocksProvider } from '../../react/MakeCodeRenderBlocksProvider.js';

src/stories/react/MakeCodeBlocksRendering.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { useCallback, useRef } from 'react';
 import { defaultMakeCodeProject } from '../../vanilla/examples.js';
 import { MakeCodeFrameDriver } from '../../vanilla/makecode-frame-driver.js';

src/stories/react/MakeCodeFrame.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { useRef } from 'react';
 import { defaultMakeCodeProject } from '../../vanilla/examples.js';
 import {

src/stories/vanilla/makecode-frame-driver.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import {
   createMakeCodeRenderBlocks,
   MakeCodeRenderBlocksOptions,

src/stories/vanilla/makecode-render-blocks.stories.tsx

@@ -5,5 +5,8 @@
     "moduleResolution": "Node",
     "esModuleInterop": true,
     "outDir": "./dist/cjs"
-  }
+  },
+  // Storybook 10 types don't resolve under "moduleResolution": "Node".
+  // The ESM build still typechecks the stories.
+  "exclude": ["src/stories"]
 }