feat: Support Storybook 10 #246

Sidnioulz · 2025-10-24T13:04:02Z

BREAKING CHANGE: No longer supports Storybook versions < 10

Closes #244

netlify · 2025-10-24T13:04:10Z

❌ Deploy Preview for storybook-addon-mock failed.

Name	Link
🔨 Latest commit	`2375dfa`
🔍 Latest deploy log	https://app.netlify.com/projects/storybook-addon-mock/deploys/68fb86da2ec98700081a8a79

Sidnioulz · 2025-10-24T13:04:19Z

.nvmrc

@@ -1 +1 @@
-lts/jod
+22.19


This is the new minimal Node version supported by SB10.

BREAKING CHANGE: No longer supports Storybook versions < 10

Sidnioulz · 2025-10-24T13:05:39Z

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "storybook-addon-mock",
+  "name": "storybook-addon-mock-root",


Having the same package name at the root of a yarn workspace and within one of the packages causes errors on more recent yarn versions.

Sidnioulz · 2025-10-24T13:06:52Z

packages/mock-addon-docs/.storybook/main.ts

                },
            },
        },
+        import.meta.resolve('./local-preset.ts'),


New way of loading addons locally in SB10: you must import them. I've realigned local-preset on what we do on addon-kit.

Sidnioulz · 2025-10-24T13:07:08Z

packages/mock-addon-docs/.storybook/preview.tsx

    options: {
      storySort: {
-        order: ['Docs', ['Introduction', 'Installation', 'User guide']],
+        order: ['Docs', ['Introduction', 'Installation', 'Advanced setup', 'User guide']],


Fixed up missing docs page in the sort order.

Sidnioulz · 2025-10-24T13:07:47Z

packages/mock-addon-docs/package.json

-        "@storybook/addon-docs": "^9.0.12",
-        "@storybook/addon-links": "^9.0.12",
-        "@storybook/react-vite": "^9.0.12",
+        "@storybook/addon-docs": "next",


Recommended practice: point to the current development version in your addon workspace. Alternatively, you can set 10.0.0

Sidnioulz · 2025-10-24T13:11:28Z

packages/mock-addon/.babelrc.js

Historically, Storybook addons have had different build targets (node/browser), dts presence and externals based on whether files are consumed by the Storybook node server, manager UI, or preview environment.

Using Babel without dedicated build config for each environment prevents these optimisations from happening, and in some cases can cause addons to throw errors when your users build their own Storybook instance.

I've aligned your addon's build with our recommended tsup setup to make it easier for contributors to step in and update your addon, and to limit the risks associated with not distinguishing those three types of builds we consume.

Sidnioulz · 2025-10-24T13:12:04Z

packages/mock-addon/.eslintignore

@@ -1,3 +1,6 @@
+# zx environment
+scripts/prepublish-checks.js


Should not be linted, as it imports stuff like chalk that you don't have as a direct dependency and that's provided by zx

Sidnioulz · 2025-10-24T13:13:17Z

packages/mock-addon/.eslintrc

      "plugin:react/recommended",
      "plugin:prettier/recommended"
    ],
+    "root": true,


In recent ESLint versions, .eslintrc should not be used, and requires root: true for ESLint to avoid reading parent ESLint config sitting in e.g. your home folder.

I've left ESLint at version 8 to spare you having to switch to flat ESLint config immediately, and I've enabled this flag to avoid contributors accidentally merging their own eslintrc files when linting your code.

Sidnioulz · 2025-10-24T13:13:33Z

packages/mock-addon/.eslintrc

        "modules": true
      }
    },
+    "settings": {


Avoids a runtime warning.

Sidnioulz · 2025-10-24T13:13:51Z

packages/mock-addon/jest.config.ts

+import type { Config } from 'jest';
+
+export default {
+    extensionsToTreatAsEsm: ['.ts', '.jsx', '.tsx'],
+    testEnvironment: 'node',
+    transform: {
+        '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
+    },
+} satisfies Config;


Basic config to ensure Jest can run ESM + TS files

Sidnioulz · 2025-10-24T13:18:55Z

packages/mock-addon/src/components/ButtonToggle.tsx

 }));

-export const ButtonToggle = ({ name, value, onChange, onBlur, onFocus }) => {
+export const ButtonToggle = ({ name, value, onChange, onBlur, onFocus }: {


Jest really wanted your JSX to be written with TypeScript so I migrated those only (but not utils, I'd rather let you do that considering the amount of homemade classes you have).

Sidnioulz · 2025-10-24T13:19:13Z

packages/mock-addon/src/components/ButtonToggle.tsx

                id={name}
                type="checkbox"
-                onChange={(e) => onChange(e.target.checked)}
+                onChange={onChange ? (e) => onChange(e.target.checked) : undefined}


You don't always pass onChange

Sidnioulz · 2025-10-24T13:19:41Z

packages/mock-addon/src/components/Card.tsx

-        margin-bottom: 0;
-    }
-`;
+const Content = styled.div<{ enabled: boolean }>(({ enabled }) => ({


Ensure this is typed

Sidnioulz · 2025-10-24T13:21:43Z

packages/mock-addon/src/components/MockItem.tsx

-                    )}
-                </div>
-            </TabsState>
+            <Fieldset>


TabsState will be deprecated very soon, and permanently removed in Storybook 11. The way you used it would result in a WCAG violation.

I've replaced it with what I felt was semantically closer, though it does look different from what you had.

Sidnioulz · 2025-10-24T13:22:31Z

packages/mock-addon/src/components/Panel.tsx

+interface MockData {
+    url: string;
+    method: string;
+    status: string | number;
+    skip: boolean;
+    delay: number;
+    path: string;
+    searchParamKeys: string[];
+    errors: string[],
+    originalRequest: unknown;
+}


I've had to provide some basic typing here for useAddonState.

Sidnioulz · 2025-10-24T13:23:31Z

packages/mock-addon/src/index.ts

+if (
+    module &&
+    'hot' in module &&
+    module.hot &&
+    typeof module.hot === 'object' &&
+    'decline' in module.hot &&
+    module.hot.decline &&
+    typeof module.hot.decline === 'function'
+) {
+    module.hot.decline();
+}


I'm not quite sure why this code exists. I've just added a few more type guards to make TS and ESLint happy.

The part below will be mandatory in Storybook 11 and is part of CSF Next type safety.

Sidnioulz · 2025-10-24T13:25:00Z

packages/mock-addon/src/preview.ts

I've moved preview and manager back to the top-level because this is where external contributors usually look for those files, and this is the scenario we describe in every addon migration guide.

I want to make it easier for folks like me to parse the addon's code and propose update PRs. By keeping file locations the same as in migration guides, you'll have more chances of getting contributors to offer PRs for you.

Sidnioulz · 2025-10-24T13:25:41Z

packages/mock-addon/src/utils/response.js

            : JSON.stringify(responseText);

    return new Response(text, {
-        ok: ((status / 100) | 0) === 2, // 200-299


This should be computed by the Response constructor itself.

Sidnioulz · 2025-10-24T13:52:46Z

packages/mock-addon/src/utils/response.js

    return new Response(text, {
-        ok: ((status / 100) | 0) === 2, // 200-299
        status: status,
-        statusText: statusTextMap[status.toString()],


Let me know if I got this wrong. As far as I understand, your statusTextMap requires numbers as keys, so I'm thinking that turning the status to a string will actually strip status texts.

Leaving toString resulted in this error on my console:

Sidnioulz · 2025-10-24T13:53:08Z

packages/mock-addon/tsconfig.json

Aligned with our own tsconfig on addon-kit

nutboltu · 2025-11-02T02:29:56Z

@Sidnioulz, would you mind splitting this PR into multiple small PRs?

Sidnioulz · 2025-11-03T12:45:12Z

@nutboltu I don't think I'll have time for this in the coming weeks. I've been opening PRs on popular addons to get you folks started, but I now need to switch to other tasks. Feel free to cherry-pick anything you like and to commit it without preserving authorship information though.

Sidnioulz commented Oct 24, 2025

View reviewed changes

.nvmrc

@@ -1 +1 @@

lts/jod

22.19

Copy link

Author

Sidnioulz Oct 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the new minimal Node version supported by SB10.

Sidnioulz force-pushed the storybook-10 branch 2 times, most recently from ac6b6a6 to 6d0d065 Compare October 24, 2025 13:04

feat: Support Storybook 10

6d0d065

BREAKING CHANGE: No longer supports Storybook versions < 10

Sidnioulz commented Oct 24, 2025

View reviewed changes

packages/mock-addon/.eslintrc

"modules": true

}

},

"settings": {

Copy link

Author

Sidnioulz Oct 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoids a runtime warning.

Sidnioulz commented Oct 24, 2025

View reviewed changes

packages/mock-addon/tsconfig.json

Copy link

Author

Sidnioulz Oct 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aligned with our own tsconfig on addon-kit

chore: Adjust prebuild clean command

2375dfa

Sidnioulz mentioned this pull request Oct 25, 2025

[Tracking]: Storybook 10 addon migrations storybookjs/storybook#32836

Open

Uh oh!

feat: Support Storybook 10 #246

Are you sure you want to change the base?

feat: Support Storybook 10 #246

Uh oh!

Conversation

Sidnioulz commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for storybook-addon-mock failed.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nutboltu commented Nov 2, 2025

Uh oh!

Sidnioulz commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sidnioulz commented Oct 24, 2025 •

edited

Loading

netlify bot commented Oct 24, 2025 •

edited

Loading