Prepare for SB10

.babelrc.js

@@ -1,20 +1,9 @@
 module.exports = {
-  presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    '@babel/preset-typescript',
-    '@babel/preset-react',
-  ],
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
   env: {
-    esm: {
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            modules: false,
-            targets: { node: 'current' },
-          },
-        ],
-      ],
+    test: {
+      presets: ['@babel/preset-typescript'],
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
     },
   },
 };

.github/workflows/tests-extended.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [20.16.0, 22.x]
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [20.16.0]
     steps:
       - uses: actions/checkout@v4
 
@@ -19,17 +19,19 @@ jobs:
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 
-      - name: Run unit tests
+      - name: Build
         run: |
           yarn build
+
+      - name: Run unit tests
+        run: |
           yarn test --coverage
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
 
       - name: Run test runner
         run: |
-          yarn build
           yarn test-storybook:ci-coverage
 
       - name: Generate code coverage

.github/workflows/typecheck.yml

@@ -3,19 +3,18 @@ name: Typecheck
 on: [push, pull_request]
 
 jobs:
-    typecheck:
-        runs-on: ubuntu-latest
-        steps:
-        - uses: actions/checkout@v2
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
 
-        - name: Use Node.js 20.x
-          uses: actions/setup-node@v1
-          with:
-            node-version: '20.x'
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
 
-        - name: Install dependencies
-          uses: bahmutov/npm-install@v1
-
-        - name: Type check
-          run: yarn tsc
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
 
+      - name: Type check
+        run: yarn tsc

.nvmrc

@@ -1 +1 @@
-v18
+v20.16.0

jest.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   testMatch: ['**/*.test.ts'],
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest',
+  },
   moduleNameMapper: {
     '@storybook/test-runner/playwright/global-setup': '<rootDir>/playwright/global-setup',
     '@storybook/test-runner/playwright/global-teardown': '<rootDir>/playwright/global-teardown',

package.json

@@ -58,6 +58,8 @@
     "@jest/types": "^29.6.3",
     "@swc/core": "^1.5.22",
     "@swc/jest": "^0.2.23",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
+    "esbuild-register": "^3.6.0",
     "expect-playwright": "^0.8.0",
     "jest": "^29.6.4",
     "jest-circus": "^29.6.4",
@@ -68,7 +70,8 @@
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.0.0",
     "nyc": "^15.1.0",
-    "playwright": "^1.14.0"
+    "playwright": "^1.14.0",
+    "semver": "^7.6.2"
   },
   "devDependencies": {
     "@auto-it/released": "^11.1.6",
@@ -81,7 +84,7 @@
     "@storybook/addon-docs": "next",
     "@storybook/react-vite": "next",
     "@types/jest": "^29.0.0",
-    "@types/node": "^16.4.1",
+    "@types/node": "^20.0.0",
     "@types/node-fetch": "^2.6.11",
     "@vitejs/plugin-react": "^4.0.3",
     "auto": "^11.1.6",
@@ -101,7 +104,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "read-pkg-up": "^7.0.1",
-    "storybook": "next",
+    "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0",
     "ts-jest": "^29.0.0",

src/playwright/transformPlaywright.test.ts

@@ -5,7 +5,6 @@ import * as storybookMain from '../util/getStorybookMain';
 import { transformPlaywright } from './transformPlaywright';
 
 jest.mock('storybook/internal/common', () => ({
-  ...jest.requireActual('storybook/internal/common'),
   getProjectRoot: jest.fn(() => '/foo/bar'),
   normalizeStories: jest.fn(() => [
     {

src/playwright/transformPlaywright.ts

@@ -1,11 +1,11 @@
 import { relative } from 'path';
 import template from '@babel/template';
-import { userOrAutoTitle } from 'storybook/internal/preview-api';
 import dedent from 'ts-dedent';
 
 import { getStorybookMetadata } from '../util';
 import { transformCsf } from '../csf/transformCsf';
 import type { TestPrefixer } from '../csf/transformCsf';
+import { userOrAutoTitle } from '../util/autoTitle';
 
 const coverageErrorMessage = dedent`
   [Test runner] An error occurred when evaluating code coverage:

src/test-storybook.ts

@@ -7,7 +7,6 @@ import canBindToHost from 'can-bind-to-host';
 import dedent from 'ts-dedent';
 import path, { join, resolve } from 'path';
 import tempy from 'tempy';
-import { getInterpretedFile } from 'storybook/internal/common';
 import { readConfig } from 'storybook/internal/csf-tools';
 import { telemetry } from 'storybook/internal/telemetry';
 import { glob } from 'glob';
@@ -17,6 +16,7 @@ import { getStorybookMetadata } from './util/getStorybookMetadata';
 import { getTestRunnerConfig } from './util/getTestRunnerConfig';
 import { transformPlaywrightJson } from './playwright/transformPlaywrightJson';
 import { TestRunnerConfig } from './playwright/hooks';
+import { getInterpretedFile } from './util/serverRequire';
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'test';

src/util/autoTitle.ts

@@ -0,0 +1,98 @@
+import type { NormalizedStoriesSpecifier } from 'storybook/internal/types';
+
+import slash from 'slash';
+import { dedent } from 'ts-dedent';
+
+// FIXME: types duplicated type from `core-common', to be
+// removed when we remove v6 back-compat.
+
+// deal with files like "atoms/button/{button,index}.stories.js"
+const sanitize = (parts: string[]) => {
+  if (parts.length === 0) {
+    return parts;
+  }
+
+  const last = parts[parts.length - 1];
+  const lastStripped = last?.replace(/(?:[.](?:story|stories))?([.][^.]+)$/i, '');
+
+  if (parts.length === 1) {
+    return [lastStripped];
+  }
+
+  const nextToLast = parts[parts.length - 2];
+  if (lastStripped && nextToLast && lastStripped.toLowerCase() === nextToLast.toLowerCase()) {
+    return [...parts.slice(0, -2), lastStripped];
+  }
+
+  return lastStripped &&
+    (/^(story|stories)([.][^.]+)$/i.test(last) || /^index$/i.test(lastStripped))
+    ? parts.slice(0, -1)
+    : [...parts.slice(0, -1), lastStripped];
+};
+
+/**
+ * Combines path parts together, without duplicating separators (slashes). Used instead of
+ * `path.join` because this code runs in the browser.
+ *
+ * @param paths Array of paths to join together.
+ * @returns Joined path string, with single '/' between parts
+ */
+function pathJoin(paths: string[]): string {
+  return paths
+    .flatMap((p) => p.split('/'))
+    .filter(Boolean)
+    .join('/');
+}
+
+export const userOrAutoTitleFromSpecifier = (
+  fileName: string | number,
+  entry: NormalizedStoriesSpecifier,
+  userTitle?: string
+) => {
+  const { directory, importPathMatcher, titlePrefix = '' } = entry || {};
+  // On Windows, backslashes are used in paths, which can cause problems here
+  // slash makes sure we always handle paths with unix-style forward slash
+
+  if (typeof fileName === 'number') {
+    console.warn(dedent`
+      CSF Auto-title received a numeric fileName. This typically happens when
+      webpack is mis-configured in production mode. To force webpack to produce
+      filenames, set optimization.moduleIds = "named" in your webpack config.
+    `);
+  }
+
+  const normalizedFileName = slash(String(fileName));
+
+  if (importPathMatcher.exec(normalizedFileName)) {
+    if (!userTitle) {
+      const suffix = normalizedFileName.replace(directory, '');
+      let parts = pathJoin([titlePrefix, suffix]).split('/');
+      parts = sanitize(parts);
+      return parts.join('/');
+    }
+
+    if (!titlePrefix) {
+      return userTitle;
+    }
+
+    return pathJoin([titlePrefix, userTitle]);
+  }
+
+  return undefined;
+};
+
+export const userOrAutoTitle = (
+  fileName: string,
+  storiesEntries: NormalizedStoriesSpecifier[],
+  userTitle?: string
+) => {
+  for (let i = 0; i < storiesEntries.length; i += 1) {
+    const title = userOrAutoTitleFromSpecifier(fileName, storiesEntries[i], userTitle);
+
+    if (title) {
+      return title;
+    }
+  }
+
+  return userTitle || undefined;
+};

src/util/getStorybookMain.test.ts

@@ -1,7 +1,7 @@
 import { getStorybookMain, resetStorybookMainCache, storybookMainConfig } from './getStorybookMain';
-import * as coreCommon from 'storybook/internal/common';
+import * as coreCommon from './serverRequire';
 
-jest.mock('storybook/internal/common');
+jest.mock('./serverRequire');
 
 describe('getStorybookMain', () => {
   beforeEach(() => {

src/util/getStorybookMain.ts

@@ -1,7 +1,7 @@
 import { join, resolve } from 'path';
-import { serverRequire } from 'storybook/internal/common';
 import type { StorybookConfig } from 'storybook/internal/types';
 import dedent from 'ts-dedent';
+import { serverRequire } from './serverRequire';
 
 export const storybookMainConfig = new Map<string, StorybookConfig>();
 

src/util/getStorybookMetadata.test.ts

@@ -4,7 +4,6 @@ import * as storybookMain from './getStorybookMain';
 import { getStorybookMetadata } from './getStorybookMetadata';
 
 jest.mock('storybook/internal/common', () => ({
-  ...jest.requireActual('storybook/internal/common'),
   getProjectRoot: jest.fn(() => '/foo/bar'),
   normalizeStories: jest.fn(() => [
     {

src/util/getStorybookMetadata.ts

@@ -1,6 +1,6 @@
 import { join } from 'path';
 import { normalizeStories, getProjectRoot } from 'storybook/internal/common';
-import { StoriesEntry } from 'storybook/internal/types';
+import type { StoriesEntry } from 'storybook/internal/types';
 
 import { getStorybookMain } from './getStorybookMain';
 

src/util/getTestRunnerConfig.test.ts

@@ -26,7 +26,7 @@ const testRunnerConfig: TestRunnerConfig = {
   },
 };
 
-jest.mock('storybook/internal/common', () => ({
+jest.mock('./serverRequire', () => ({
   serverRequire: jest.fn(),
 }));
 
@@ -37,23 +37,19 @@ describe('getTestRunnerConfig', () => {
 
   it('should load the test runner config', () => {
     const configDir = '.storybook';
-    (require('storybook/internal/common').serverRequire as jest.Mock).mockReturnValueOnce(
-      testRunnerConfig
-    );
+    (require('./serverRequire').serverRequire as jest.Mock).mockReturnValueOnce(testRunnerConfig);
 
     const result = getTestRunnerConfig(configDir);
 
     expect(result).toEqual(testRunnerConfig);
-    expect(require('storybook/internal/common').serverRequire).toHaveBeenCalledWith(
+    expect(require('./serverRequire').serverRequire).toHaveBeenCalledWith(
       join(resolve('.storybook', 'test-runner'))
     );
   });
 
   it('should cache the test runner config', () => {
     const configDir = '.storybook';
-    (require('storybook/internal/common').serverRequire as jest.Mock).mockReturnValueOnce(
-      testRunnerConfig
-    );
+    (require('./serverRequire').serverRequire as jest.Mock).mockReturnValueOnce(testRunnerConfig);
 
     const result1 = getTestRunnerConfig(configDir);
     const result2 = getTestRunnerConfig(configDir);

src/util/getTestRunnerConfig.ts

@@ -1,6 +1,6 @@
-import { join, resolve } from 'path';
-import { serverRequire } from 'storybook/internal/common';
-import { TestRunnerConfig } from '../playwright/hooks';
+import { join, resolve } from 'node:path';
+import type { TestRunnerConfig } from '../playwright/hooks';
+import { serverRequire } from './serverRequire';
 
 let testRunnerConfig: TestRunnerConfig;
 let loaded = false;
@@ -13,7 +13,11 @@ export const getTestRunnerConfig = (
     return testRunnerConfig;
   }
 
-  testRunnerConfig = serverRequire(join(resolve(configDir), 'test-runner'));
-  loaded = true;
-  return testRunnerConfig;
+  try {
+    testRunnerConfig = serverRequire(join(resolve(configDir), 'test-runner'));
+    loaded = true;
+    return testRunnerConfig;
+  } catch (error) {
+    return undefined;
+  }
 };