Merge pull request #26671 from storybookjs/version-non-patch-from-8.1…

….0-alpha.5

Release: Prerelease 8.1.0-alpha.6

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 8.0.5
+
+- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+
 ## 8.0.4
 
 - Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 8.1.0-alpha.6
+
+- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
+- Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!
+- Dependency: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!
+- Dependency: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!
+- Dependency: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!
+- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
+- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
+
 ## 8.1.0-alpha.5
 
 - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!

code/builders/builder-vite/package.json

@@ -54,7 +54,7 @@
     "@storybook/types": "workspace:*",
     "@types/find-cache-dir": "^3.2.1",
     "browser-assert": "^1.2.1",
-    "es-module-lexer": "^0.9.3",
+    "es-module-lexer": "^1.5.0",
     "express": "^4.17.3",
     "find-cache-dir": "^3.0.0",
     "fs-extra": "^11.1.0",

code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts

@@ -19,12 +19,14 @@ export async function injectExportOrderPlugin() {
       //  instead of calling `await parse()` every time.
       const [, exports] = await parse(code);
 
-      if (exports.includes('__namedExportsOrder')) {
+      const exportNames = exports.map((e) => code.substring(e.s, e.e));
+
+      if (exportNames.includes('__namedExportsOrder')) {
         // user has defined named exports already
         return undefined;
       }
       const s = new MagicString(code);
-      const orderedExports = exports.filter((e) => e !== 'default');
+      const orderedExports = exportNames.filter((e) => e !== 'default');
       s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);
       return {
         code: s.toString(),

code/builders/builder-webpack5/package.json

@@ -78,7 +78,7 @@
     "cjs-module-lexer": "^1.2.3",
     "constants-browserify": "^1.0.0",
     "css-loader": "^6.7.1",
-    "es-module-lexer": "^1.4.1",
+    "es-module-lexer": "^1.5.0",
     "express": "^4.17.3",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^11.1.0",

code/frameworks/nextjs/package.json

@@ -108,8 +108,8 @@
     "loader-utils": "^3.2.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "pnp-webpack-plugin": "^1.7.0",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
     "react-refresh": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",

code/frameworks/nextjs/src/css/webpack.ts

@@ -36,7 +36,7 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig):
         ],
         // We transform the "target.css" files from next.js into Javascript
         // for Next.js to support fonts, so it should be ignored by the css-loader.
-        exclude: /next\/.*\/target.css$/,
+        exclude: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/,
       };
     }
   });

code/frameworks/nextjs/src/font/webpack/configureNextFont.ts

@@ -7,7 +7,7 @@ export function configureNextFont(baseConfig: Configuration, isSWC?: boolean) {
 
   if (isSWC) {
     baseConfig.module?.rules?.push({
-      test: /next\/.*\/target.css$/,
+      test: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/,
       loader: fontLoaderPath,
     });
   } else {

code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts

@@ -39,13 +39,9 @@ export async function getFontFaceDeclarations(
     .map(({ prop, value }: { prop: string; value: string }) => `${prop}: ${value};`)
     .join('\n');
 
-  const arePathsWin32Format = /^[a-z]:\\/iu.test(options.filename);
-  const cleanWin32Path = (pathString: string): string =>
-    arePathsWin32Format ? pathString.replace(/\\/gu, '/') : pathString;
-
   const getFontFaceCSS = () => {
     if (typeof localFontSrc === 'string') {
-      const localFontPath = cleanWin32Path(path.join(parentFolder, localFontSrc));
+      const localFontPath = path.join(parentFolder, localFontSrc).replaceAll('\\', '/');
 
       return `@font-face {
           font-family: ${id};
@@ -55,7 +51,7 @@ export async function getFontFaceDeclarations(
     }
     return localFontSrc
       .map((font) => {
-        const localFontPath = cleanWin32Path(path.join(parentFolder, font.path));
+        const localFontPath = path.join(parentFolder, font.path).replaceAll('\\', '/');
 
         return `@font-face {
           font-family: ${id};

code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts

@@ -3,6 +3,7 @@ import { getFontFaceDeclarations as getLocalFontFaceDeclarations } from './local
 import type { LoaderOptions } from './types';
 import { getCSSMeta } from './utils/get-css-meta';
 import { setFontDeclarationsInHead } from './utils/set-font-declarations-in-head';
+import path from 'path';
 
 type FontFaceDeclaration = {
   id: string;
@@ -39,11 +40,19 @@ export default async function storybookNextjsFontLoader(this: any) {
 
   let fontFaceDeclaration: FontFaceDeclaration | undefined;
 
-  if (options.source.endsWith('next/font/google') || options.source.endsWith('@next/font/google')) {
+  const pathSep = path.sep;
+
+  if (
+    options.source.endsWith(`next${pathSep}font${pathSep}google`) ||
+    options.source.endsWith(`@next${pathSep}font${pathSep}google`)
+  ) {
     fontFaceDeclaration = await getGoogleFontFaceDeclarations(options);
   }
 
-  if (options.source.endsWith('next/font/local') || options.source.endsWith('@next/font/local')) {
+  if (
+    options.source.endsWith(`next${pathSep}font${pathSep}local`) ||
+    options.source.endsWith(`@next${pathSep}font${pathSep}local`)
+  ) {
     fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx, swcMode);
   }
 

code/lib/cli/package.json

@@ -80,7 +80,7 @@
     "fs-extra": "^11.1.0",
     "get-npm-tarball-url": "^2.0.3",
     "giget": "^1.0.0",
-    "globby": "^11.0.2",
+    "globby": "^14.0.1",
     "jscodeshift": "^0.15.1",
     "leven": "^3.1.0",
     "ora": "^5.4.1",

code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts

@@ -2,7 +2,6 @@ import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import { basename } from 'path';
 import fse from 'fs-extra';
-import globby from 'globby';
 import type { Fix } from '../types';
 
 const MDX1_STYLE_START = /<style>{`/g;
@@ -48,6 +47,9 @@ export const mdx1to3: Fix<Mdx1to3Options> = {
   versionRange: ['<7.0.0', '>=8.0.0-alpha.0'],
 
   async check() {
+    // Dynamically import globby because it is a pure ESM module
+    const { globby } = await import('globby');
+
     const storiesMdxFiles = await globby('./!(node_modules)**/*.(story|stories).mdx');
     return storiesMdxFiles.length ? { storiesMdxFiles } : null;
   },

code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts

@@ -4,7 +4,7 @@ import { mdxgfm } from './mdx-gfm';
 
 vi.mock('globby', () => ({
   __esModule: true,
-  default: vi.fn().mockResolvedValue(['a/fake/file.mdx']),
+  globby: vi.fn().mockResolvedValue(['a/fake/file.mdx']),
 }));
 
 const check = async ({

code/lib/cli/src/automigrate/fixes/mdx-gfm.ts

@@ -1,7 +1,6 @@
 import { dedent } from 'ts-dedent';
 import { join } from 'path';
 import slash from 'slash';
-import glob from 'globby';
 import { commonGlobOptions } from '@storybook/core-common';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 import type { Fix } from '../types';
@@ -46,7 +45,10 @@ export const mdxgfm: Fix<Options> = {
         return false;
       }
 
-      const files = await glob(pattern, commonGlobOptions(pattern));
+      // Dynamically import globby because it is a pure ESM module
+      const { globby } = await import('globby');
+
+      const files = await globby(pattern, commonGlobOptions(pattern));
 
       return files.some((f) => f.endsWith('.mdx'));
     }, Promise.resolve(false));

code/lib/cli/src/generate.ts

@@ -126,6 +126,7 @@ command('migrate [migration]')
   .option('-l --list', 'List available migrations')
   .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js')
   .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
   .option(
     '-n --dry-run',
     'Dry run: verify the migration exists and show the files to which it will be applied'
@@ -142,7 +143,6 @@ command('migrate [migration]')
       list,
       rename,
       parser,
-      logger: consoleLogger,
     }).catch((err) => {
       logger.error(err);
       process.exit(1);

code/lib/cli/src/migrate.ts

@@ -11,21 +11,40 @@ import { getStorybookVersionSpecifier } from './helpers';
 
 const logger = console;
 
-export async function migrate(migration: any, { glob, dryRun, list, rename, parser }: any) {
+type CLIOptions = {
+  glob: string;
+  configDir?: string;
+  dryRun?: boolean;
+  list?: string[];
+  /**
+   * Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"
+   */
+  rename?: string;
+  /**
+   * jscodeshift parser
+   */
+  parser?: 'babel' | 'babylon' | 'flow' | 'ts' | 'tsx';
+};
+
+export async function migrate(
+  migration: any,
+  { glob, dryRun, list, rename, parser, configDir: userSpecifiedConfigDir }: CLIOptions
+) {
   if (list) {
     listCodemods().forEach((key: any) => logger.log(key));
   } else if (migration) {
     if (migration === 'mdx-to-csf' && !dryRun) {
       const packageManager = JsPackageManagerFactory.getPackageManager();
 
       const [packageJson, storybookVersion] = await Promise.all([
-        //
         packageManager.retrievePackageJson(),
         getCoercedStorybookVersion(packageManager),
       ]);
-      const { configDir: inferredConfigDir, mainConfig: mainConfigPath } =
-        getStorybookInfo(packageJson);
-      const configDir = inferredConfigDir || '.storybook';
+      const { configDir: inferredConfigDir, mainConfig: mainConfigPath } = getStorybookInfo(
+        packageJson,
+        userSpecifiedConfigDir
+      );
+      const configDir = userSpecifiedConfigDir || inferredConfigDir || '.storybook';
 
       // GUARDS
       if (!storybookVersion) {

code/lib/cli/src/warn.test.ts

@@ -1,10 +1,21 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import globby from 'globby';
 import { logger } from '@storybook/node-logger';
 import { warn } from './warn';
 
 vi.mock('@storybook/node-logger');
-vi.mock('globby');
+
+const mocks = vi.hoisted(() => {
+  return {
+    globby: vi.fn(),
+  };
+});
+
+vi.mock('globby', async (importOriginal) => {
+  return {
+    ...(await importOriginal<typeof import('globby')>()),
+    globby: mocks.globby,
+  };
+});
 
 describe('warn', () => {
   beforeEach(() => {
@@ -21,17 +32,17 @@ describe('warn', () => {
   });
 
   describe('when TypeScript is not installed as a dependency', () => {
-    it('should not warn if `.tsx?` files are not found', () => {
-      vi.mocked(globby.sync).mockReturnValueOnce([]);
-      warn({
+    it('should not warn if `.tsx?` files are not found', async () => {
+      mocks.globby.mockResolvedValue([]);
+      await warn({
         hasTSDependency: false,
       });
       expect(logger.warn).toHaveBeenCalledTimes(0);
     });
 
-    it('should warn if `.tsx?` files are found', () => {
-      vi.mocked(globby.sync).mockReturnValueOnce(['a.ts']);
-      warn({
+    it('should warn if `.tsx?` files are found', async () => {
+      mocks.globby.mockResolvedValue(['a.ts']);
+      await warn({
         hasTSDependency: false,
       });
       expect(logger.warn).toHaveBeenCalledTimes(2);

code/lib/cli/src/warn.ts

@@ -1,13 +1,18 @@
-import globby from 'globby';
 import { logger } from '@storybook/node-logger';
 
 interface Options {
   hasTSDependency: boolean;
 }
 
-export const warn = ({ hasTSDependency }: Options) => {
+export const warn = async ({ hasTSDependency }: Options) => {
   if (!hasTSDependency) {
-    const hasTSFiles = !!globby.sync(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']).length;
+    // Dynamically import globby because it is a pure ESM module
+    const { globby } = await import('globby');
+
+    const files = await globby(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']);
+
+    const hasTSFiles = !!files.length;
+
     if (hasTSFiles) {
       logger.warn(
         'We have detected TypeScript files in your project directory, however TypeScript is not listed as a project dependency.'

code/lib/codemod/package.json

@@ -63,7 +63,7 @@
     "@storybook/types": "workspace:*",
     "@types/cross-spawn": "^6.0.2",
     "cross-spawn": "^7.0.3",
-    "globby": "^11.0.2",
+    "globby": "^14.0.1",
     "jscodeshift": "^0.15.1",
     "lodash": "^4.17.21",
     "prettier": "^3.1.1",

code/lib/codemod/src/index.ts

@@ -2,7 +2,6 @@
 import fs from 'fs';
 import path from 'path';
 import { promisify } from 'util';
-import globby from 'globby';
 import { sync as spawnSync } from 'cross-spawn';
 import { jscodeshiftToPrettierParser } from './lib/utils';
 
@@ -63,6 +62,9 @@ export async function runCodemod(
     if (knownParser !== 'babel') inferredParser = extension;
   }
 
+  // Dynamically import globby because it is a pure ESM module
+  const { globby } = await import('globby');
+
   const files = await globby([glob, '!**/node_modules', '!**/dist']);
   const extensions = new Set(files.map((file) => path.extname(file).slice(1)));
   const commaSeparatedExtensions = Array.from(extensions).join(',');

code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts

@@ -1,5 +1,4 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import dedent from 'ts-dedent';
 import { Yarn2Proxy } from './Yarn2Proxy';
 
 describe('Yarn 2 Proxy', () => {

code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts

@@ -36,6 +36,7 @@ const CRITICAL_YARN2_ERROR_CODES = {
   YN0083: 'AUTOMERGE_GIT_ERROR',
 };
 
+// @ts-expect-error The error codes might be helpful in the future
 const YARN2_ERROR_CODES = {
   ...CRITICAL_YARN2_ERROR_CODES,
   YN0000: 'UNNAMED',
@@ -306,10 +307,12 @@ export class Yarn2Proxy extends JsPackageManager {
     while ((match = regex.exec(logs)) !== null) {
       const code = match[1];
       const message = match[2].replace(/[┌│└]/g, '').trim();
-      if (CRITICAL_YARN2_ERROR_CODES[code]) {
+      if (code in CRITICAL_YARN2_ERROR_CODES) {
         errorCodesWithMessages.push({
           code,
-          message: `${CRITICAL_YARN2_ERROR_CODES[code]}\n-> ${message}\n`,
+          message: `${
+            CRITICAL_YARN2_ERROR_CODES[code as keyof typeof CRITICAL_YARN2_ERROR_CODES]
+          }\n-> ${message}\n`,
         });
       }
     }

code/lib/core-server/package.json

@@ -83,7 +83,7 @@
     "detect-port": "^1.3.0",
     "express": "^4.17.3",
     "fs-extra": "^11.1.0",
-    "globby": "^11.0.2",
+    "globby": "^14.0.1",
     "ip": "^2.0.1",
     "lodash": "^4.17.21",
     "open": "^8.4.0",