Merge pull request #27085 from storybookjs/version-non-patch-from-8.1.0-beta.0

Release: Prerelease 8.1.0-beta.1

Author: shilman

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 8.1.0-beta.1
+
+- API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
+- CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman!
+- CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman!
+- Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin!
+- Next.js: Fix Compatibility with <v14.0.4 - [#27082](https://github.com/storybookjs/storybook/pull/27082), thanks @JReinhold!
+- Tags: Fix missing default tags if no `preview.js` - [#27098](https://github.com/storybookjs/storybook/pull/27098), thanks @shilman!
+
 ## 8.1.0-beta.0
 
 - Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!

code/addons/actions/src/addArgsHelpers.ts

@@ -51,13 +51,11 @@ export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
     return {};
   }
 
-  const argTypesWithAction = Object.entries(argTypes).filter(
-    ([name, argType]) => !!argType['action']
-  );
+  const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
 
   return argTypesWithAction.reduce((acc, [name, argType]) => {
     if (isInInitialArgs(name, initialArgs)) {
-      acc[name] = action(typeof argType['action'] === 'string' ? argType['action'] : name);
+      acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
     }
     return acc;
   }, {} as Args);

code/addons/actions/src/decorator.ts

@@ -62,8 +62,8 @@ export const withActions: <T extends Renderer>(storyFn: PartialStoryFn<T>) => T[
     parameterName: PARAM_KEY,
     skipIfNoParametersOrOptions: true,
     wrapper: (getStory, context, { parameters }) => {
-      if (parameters?.['handles']) {
-        applyEventHandlers(actions, ...parameters['handles']);
+      if (parameters?.handles) {
+        applyEventHandlers(actions, ...parameters.handles);
       }
 
       return getStory(context);

code/frameworks/nextjs/src/compatibility/compatibility-map.ts

@@ -3,8 +3,12 @@ import semver from 'semver';
 import { getNextjsVersion, addScopedAlias } from '../utils';
 
 const mapping: Record<string, Record<string, string>> = {
-  '<14.0.0': {
+  '<14.1.0': {
+    // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts
     'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat',
+  },
+  '<14.0.4': {
+    // https://github.com/vercel/next.js/blob/v14.0.4/packages/next/src/client/components/redirect-status-code.ts
     'next/dist/client/components/redirect-status-code':
       '@storybook/nextjs/dist/compatibility/redirect-status-code.compat',
   },
@@ -14,7 +18,7 @@ export const getCompatibilityAliases = () => {
   const version = getNextjsVersion();
   const result: Record<string, string> = {};
 
-  Object.keys(mapping).filter((key) => {
+  Object.keys(mapping).forEach((key) => {
     if (semver.intersects(version, key)) {
       Object.assign(result, mapping[key]);
     }

code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import type { StorybookConfig } from '@storybook/types';
+import { autodocsTags } from './autodocs-tags';
+
+const check = async ({
+  main: mainConfig,
+  storybookVersion = '7.0.0',
+  previewConfigPath,
+}: {
+  main: Partial<StorybookConfig> & Record<string, unknown>;
+  storybookVersion?: string;
+  previewConfigPath?: string;
+}) => {
+  return autodocsTags.check({
+    packageManager: {} as any,
+    configDir: '',
+    mainConfig: mainConfig as any,
+    storybookVersion,
+    previewConfigPath,
+  });
+};
+
+it('with no docs setting', async () => {
+  await expect(
+    check({
+      main: {},
+    })
+  ).resolves.toBeFalsy();
+});
+
+describe('docs.autodocs = true', () => {
+  it('errors with no preview.js', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: true },
+        },
+      })
+    ).rejects.toThrowError();
+  });
+
+  it('continues with preview.js', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: true },
+        },
+        previewConfigPath: '.storybook/preview.js',
+      })
+    ).resolves.toBeTruthy();
+  });
+});
+
+describe('docs.autodocs != true', () => {
+  it('docs.autodocs = false', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: false },
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+
+  it('docs.autodocs = "tag"', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: 'tag' },
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+});

code/lib/cli/src/automigrate/fixes/autodocs-tags.ts

@@ -0,0 +1,90 @@
+import { dedent } from 'ts-dedent';
+import chalk from 'chalk';
+import type { DocsOptions } from '@storybook/types';
+import { readConfig, writeConfig } from '@storybook/csf-tools';
+import { updateMainConfig } from '../helpers/mainConfigFile';
+import type { Fix } from '../types';
+
+const logger = console;
+
+const MIGRATION =
+  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated';
+
+interface Options {
+  autodocs: DocsOptions['autodocs'];
+  mainConfigPath?: string;
+  previewConfigPath?: string;
+}
+
+/**
+ */
+export const autodocsTags: Fix<Options> = {
+  id: 'autodocs-tags',
+  versionRange: ['*.*.*', '>=8.0.*'],
+  async check({ mainConfig, mainConfigPath, previewConfigPath }) {
+    const autodocs = mainConfig?.docs?.autodocs;
+    if (autodocs === undefined) return null;
+
+    if (autodocs === true && !previewConfigPath) {
+      throw Error(dedent`
+        ❌ Failed to remove the deprecated ${chalk.cyan('docs.autodocs')} setting from ${chalk.cyan(
+          mainConfigPath
+        )}.
+        
+        There is no preview config file in which to add the ${chalk.cyan('autodocs')} tag.
+
+        Please perform the migration by hand: ${chalk.yellow(MIGRATION)}
+      `);
+      return null;
+    }
+
+    return { autodocs, mainConfigPath, previewConfigPath };
+  },
+
+  prompt({ autodocs, mainConfigPath, previewConfigPath }) {
+    let falseMessage = '',
+      trueMessage = '';
+
+    if (autodocs === false) {
+      falseMessage = dedent`
+
+
+        There is no ${chalk.cyan('docs.autodocs = false')} equivalent.
+        You'll need to check your stories to ensure none are tagged with ${chalk.cyan('autodocs')}.
+      `;
+    } else if (autodocs === true) {
+      trueMessage = ` and update ${chalk.cyan(previewConfigPath)}`;
+    }
+
+    return dedent`
+      The ${chalk.cyan('docs.autodocs')} setting in ${chalk.cyan(
+        mainConfigPath
+      )} is deprecated.${falseMessage}
+        
+      Learn more: ${chalk.yellow(MIGRATION)}
+      
+      Remove ${chalk.cyan('docs.autodocs')}${trueMessage}?
+    `;
+  },
+
+  async run({ dryRun, mainConfigPath, result }) {
+    if (!dryRun) {
+      if (result.autodocs === true) {
+        logger.info(`✅ Adding "autodocs" tag to ${result.previewConfigPath}`);
+        const previewConfig = await readConfig(result.previewConfigPath!);
+        const tags = previewConfig.getFieldNode(['tags']);
+        if (tags) {
+          previewConfig.appendValueToArray(['tags'], 'autodocs');
+        } else {
+          previewConfig.setFieldValue(['tags'], ['autodocs']);
+        }
+        await writeConfig(previewConfig);
+      }
+
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
+        logger.info(`✅ Removing "docs.autodocs" from ${mainConfigPath}`);
+        main.removeField(['docs', 'autodocs']);
+      });
+    }
+  },
+};

code/lib/cli/src/automigrate/fixes/index.ts

@@ -28,6 +28,7 @@ import { mdx1to3 } from './mdx-1-to-3';
 import { addonPostCSS } from './addon-postcss';
 import { vta } from './vta';
 import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';
+import { autodocsTags } from './autodocs-tags';
 
 export * from '../types';
 
@@ -60,6 +61,7 @@ export const allFixes: Fix[] = [
   mdx1to3,
   upgradeStorybookRelatedDependencies,
   vta,
+  autodocsTags,
 ];
 
 export const initFixes: Fix[] = [eslintPlugin];

code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest';
+import { normalizeExtends } from './eslintPlugin';
+
+describe('normalizeExtends', () => {
+  it('returns empty array when existingExtends is falsy', () => {
+    expect(normalizeExtends(null)).toEqual([]);
+    expect(normalizeExtends(undefined)).toEqual([]);
+  });
+
+  it('returns existingExtends when it is a string', () => {
+    expect(normalizeExtends('foo')).toEqual(['foo']);
+  });
+
+  it('returns existingExtends when it is an array', () => {
+    expect(normalizeExtends(['foo'])).toEqual(['foo']);
+  });
+
+  it('throws when existingExtends is not a string or array', () => {
+    expect(() => normalizeExtends(true)).toThrowError('Invalid eslint extends true');
+  });
+});

code/lib/cli/src/automigrate/helpers/eslintPlugin.ts

@@ -47,6 +47,13 @@ export async function extractEslintInfo(packageManager: JsPackageManager): Promi
   return { hasEslint, isStorybookPluginInstalled, eslintConfigFile };
 }
 
+export const normalizeExtends = (existingExtends: any): string[] => {
+  if (!existingExtends) return [];
+  if (typeof existingExtends === 'string') return [existingExtends];
+  if (Array.isArray(existingExtends)) return existingExtends;
+  throw new Error(`Invalid eslint extends ${existingExtends}`);
+};
+
 export async function configureEslintPlugin(
   eslintFile: string | undefined,
   packageManager: JsPackageManager
@@ -55,38 +62,29 @@ export async function configureEslintPlugin(
     paddedLog(`Configuring Storybook ESLint plugin at ${eslintFile}`);
     if (eslintFile.endsWith('json')) {
       const eslintConfig = (await readJson(eslintFile)) as { extends?: string[] };
-      const existingConfigValue = Array.isArray(eslintConfig.extends)
-        ? eslintConfig.extends
-        : [eslintConfig.extends].filter(Boolean);
-      eslintConfig.extends = [
-        ...(existingConfigValue || []),
-        'plugin:storybook/recommended',
-      ] as string[];
+      const existingExtends = normalizeExtends(eslintConfig.extends).filter(Boolean);
+      eslintConfig.extends = [...existingExtends, 'plugin:storybook/recommended'] as string[];
 
       const eslintFileContents = await readFile(eslintFile, 'utf8');
       const spaces = detectIndent(eslintFileContents).amount || 2;
       await writeJson(eslintFile, eslintConfig, { spaces });
     } else {
       const eslint = await readConfig(eslintFile);
-      const extendsConfig = eslint.getFieldValue(['extends']) || [];
-      const existingConfigValue = Array.isArray(extendsConfig)
-        ? extendsConfig
-        : [extendsConfig].filter(Boolean);
-      eslint.setFieldValue(
-        ['extends'],
-        [...(existingConfigValue || []), 'plugin:storybook/recommended']
-      );
+      const existingExtends = normalizeExtends(eslint.getFieldValue(['extends'])).filter(Boolean);
+      eslint.setFieldValue(['extends'], [...existingExtends, 'plugin:storybook/recommended']);
 
       await writeConfig(eslint);
     }
   } else {
     paddedLog(`Configuring eslint-plugin-storybook in your package.json`);
     const packageJson = await packageManager.retrievePackageJson();
+    const existingExtends = normalizeExtends(packageJson.eslintConfig?.extends).filter(Boolean);
+
     await packageManager.writePackageJson({
       ...packageJson,
       eslintConfig: {
         ...packageJson.eslintConfig,
-        extends: [...(packageJson.eslintConfig?.extends || []), 'plugin:storybook/recommended'],
+        extends: [...existingExtends, 'plugin:storybook/recommended'],
       },
     });
   }

code/lib/core-common/src/utils/get-storybook-info.ts

@@ -96,7 +96,7 @@ export const findConfigFile = (prefix: string, configDir: string) => {
 
 export const getConfigInfo = (packageJson: PackageJson, configDir?: string) => {
   let storybookConfigDir = configDir ?? '.storybook';
-  const storybookScript = packageJson.scripts?.['storybook'];
+  const storybookScript = packageJson.scripts?.storybook;
   if (storybookScript && !configDir) {
     const configParam = getStorybookConfiguration(storybookScript, '-c', '--config-dir');
     if (configParam) storybookConfigDir = configParam;