Release: Patch 8.0.4

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 8.0.4
+
+- Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!
+- CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!
+- CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!
+
 ## 8.0.3
 
 - Bug: Remove redundant component check, as we auto-generate titles from the file system - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!

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

@@ -104,7 +104,7 @@ describe('getMigrationSummary', () => {
 
       ─────────────────────────────────────────────────
 
-      If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'
+      If you'd like to run the migrations again, you can do so by running 'npx storybook automigrate'
 
       The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
 
@@ -124,7 +124,7 @@ describe('getMigrationSummary', () => {
     expect(summary).toMatchInlineSnapshot(`
       "No migrations were applicable to your project
 
-      If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'
+      If you'd like to run the migrations again, you can do so by running 'npx storybook automigrate'
 
       The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
 
@@ -144,7 +144,7 @@ describe('getMigrationSummary', () => {
     expect(summary).toMatchInlineSnapshot(`
       "No migrations were applicable to your project
 
-      If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'
+      If you'd like to run the migrations again, you can do so by running 'npx storybook automigrate'
 
       The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
 

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

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import boxen from 'boxen';
 import dedent from 'ts-dedent';
-import type { InstallationMetadata } from '@storybook/core-common';
+import { type InstallationMetadata } from '@storybook/core-common';
 import type { FixSummary } from '../types';
 import { FixStatus } from '../types';
 
@@ -63,7 +63,7 @@ export function getMigrationSummary({
   messages.push(getGlossaryMessages(fixSummary, fixResults, logFile).join(messageDivider));
 
   messages.push(dedent`If you'd like to run the migrations again, you can do so by running '${chalk.cyan(
-    'npx storybook@next automigrate'
+    'npx storybook automigrate'
   )}'
 
     The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.

code/lib/cli/src/doctor/index.ts

@@ -15,7 +15,6 @@ import {
   getIncompatibleStorybookPackages,
 } from './getIncompatibleStorybookPackages';
 import { getDuplicatedDepsWarnings } from './getDuplicatedDepsWarnings';
-import { isPrerelease } from './utils';
 
 const logger = console;
 const LOG_FILE_NAME = 'doctor-storybook.log';
@@ -141,12 +140,8 @@ export const doctor = async ({
     }
   }
 
-  const doctorCommand = isPrerelease(storybookVersion)
-    ? 'npx storybook@next doctor'
-    : 'npx storybook@latest doctor';
-
   const commandMessage = `You can always recheck the health of your project by running:\n${chalk.cyan(
-    doctorCommand
+    'npx storybook doctor'
   )}`;
   logger.info();
 

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

@@ -210,4 +210,20 @@ describe('Helpers', () => {
       }).toThrowError(`Could not coerce ${invalidSemverString} into a semver.`);
     });
   });
+
+  describe('hasStorybookDependencies', () => {
+    it(`should return true when any storybook dependency exists`, async () => {
+      const result = await helpers.hasStorybookDependencies({
+        getAllDependencies: async () => ({ storybook: 'x.y.z' }),
+      } as unknown as JsPackageManager);
+      expect(result).toEqual(true);
+    });
+
+    it(`should return false when no storybook dependency exists`, async () => {
+      const result = await helpers.hasStorybookDependencies({
+        getAllDependencies: async () => ({ axios: 'x.y.z' }),
+      } as unknown as JsPackageManager);
+      expect(result).toEqual(false);
+    });
+  });
 });

code/lib/cli/src/helpers.ts

@@ -296,3 +296,9 @@ export function coerceSemver(version: string) {
   invariant(coercedSemver != null, `Could not coerce ${version} into a semver.`);
   return coercedSemver;
 }
+
+export async function hasStorybookDependencies(packageManager: JsPackageManager) {
+  const currentPackageDeps = await packageManager.getAllDependencies();
+
+  return Object.keys(currentPackageDeps).some((dep) => dep.includes('storybook'));
+}

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

@@ -16,6 +16,7 @@ vi.mock('@storybook/core-common', async (importOriginal) => {
     JsPackageManagerFactory: {
       getPackageManager: () => ({
         findInstallations: findInstallationsMock,
+        getAllDependencies: async () => ({ storybook: '8.0.0' }),
       }),
     },
     versions: Object.keys(originalModule.versions).reduce(

code/lib/cli/src/upgrade.ts

@@ -4,6 +4,7 @@ import semver, { eq, lt, prerelease } from 'semver';
 import { logger } from '@storybook/node-logger';
 import { withTelemetry } from '@storybook/core-server';
 import {
+  UpgradeStorybookInWrongWorkingDirectory,
   UpgradeStorybookToLowerVersionError,
   UpgradeStorybookToSameVersionError,
   UpgradeStorybookUnknownCurrentVersionError,
@@ -23,6 +24,7 @@ import {
 } from '@storybook/core-common';
 import { automigrate } from './automigrate/index';
 import { autoblock } from './autoblock/index';
+import { hasStorybookDependencies } from './helpers';
 
 type Package = {
   package: string;
@@ -135,6 +137,9 @@ export const doUpgrade = async ({
     beforeVersion.startsWith('portal:') ||
     beforeVersion.startsWith('workspace:');
 
+  if (!(await hasStorybookDependencies(packageManager))) {
+    throw new UpgradeStorybookInWrongWorkingDirectory();
+  }
   if (!isCanary && lt(currentVersion, beforeVersion)) {
     throw new UpgradeStorybookToLowerVersionError({ beforeVersion, currentVersion });
   }

code/lib/core-events/src/errors/server-errors.ts

@@ -77,7 +77,7 @@ export class MissingFrameworkFieldError extends StorybookError {
     return dedent`
       Could not find a 'framework' field in Storybook config.
 
-      Please run 'npx storybook@next automigrate' to automatically fix your config.
+      Please run 'npx storybook automigrate' to automatically fix your config.
     `;
   }
 }
@@ -98,7 +98,7 @@ export class InvalidFrameworkNameError extends StorybookError {
     return dedent`
       Invalid value of '${this.data.frameworkName}' in the 'framework' field of Storybook config.
 
-      Please run 'npx storybook@next automigrate' to automatically fix your config.
+      Please run 'npx storybook automigrate' to automatically fix your config.
     `;
   }
 }
@@ -276,7 +276,7 @@ export class AngularLegacyBuildOptionsError extends StorybookError {
       Your Storybook startup script uses a solution that is not supported anymore.
       You must use Angular builder to have an explicit configuration on the project used in angular.json.
 
-      Please run 'npx storybook@next automigrate' to automatically fix your config.
+      Please run 'npx storybook automigrate' to automatically fix your config.
     `;
   }
 }
@@ -390,7 +390,7 @@ export class NoMatchingExportError extends StorybookError {
       Correct example:
       { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" }
 
-      Please run \`npx storybook@latest doctor\` for guidance on how to fix this issue.
+      Please run \`npx storybook doctor\` for guidance on how to fix this issue.
     `;
   }
 }
@@ -557,7 +557,7 @@ export class UpgradeStorybookToSameVersionError extends StorybookError {
 
       If you intended to re-run automigrations, you should run the "automigrate" command directly instead:
 
-      "npx storybook@${this.data.beforeVersion} automigrate"
+      "npx storybook automigrate"
     `;
   }
 }
@@ -577,6 +577,20 @@ export class UpgradeStorybookUnknownCurrentVersionError extends StorybookError {
   }
 }
 
+export class UpgradeStorybookInWrongWorkingDirectory extends StorybookError {
+  readonly category = Category.CLI_UPGRADE;
+
+  readonly code = 6;
+
+  template() {
+    return dedent`
+      You are running the upgrade command in a CWD that does not contain Storybook dependencies.
+
+      Did you mean to run it in a different directory? Make sure the directory you run this command in contains a package.json with your Storybook dependencies.
+    `;
+  }
+}
+
 export class NoStatsForViteDevError extends StorybookError {
   readonly category = Category.BUILDER_VITE;
 

code/package.json

@@ -295,5 +295,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.4"
 }

code/renderers/react/src/docs/jsxDecorator.test.tsx

@@ -123,30 +123,55 @@ describe('renderJsx', () => {
     `);
   });
 
-  it('forwardRef component', () => {
-    const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
-      function MyExoticComponent(props, _ref) {
-        return <div>{props.children}</div>;
-      }
-    );
+  describe('forwardRef component', () => {
+    it('with no displayName', () => {
+      const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
+        function MyExoticComponent(props, _ref) {
+          return <div>{props.children}</div>;
+        }
+      );
+
+      expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
+        .toMatchInlineSnapshot(`
+          <React.ForwardRef>
+            I am forwardRef!
+          </React.ForwardRef>
+        `);
+    });
 
-    expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
-      .toMatchInlineSnapshot(`
-        <React.ForwardRef>
-          I am forwardRef!
-        </React.ForwardRef>
-      `);
+    it('with displayName coming from docgen', () => {
+      const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
+        function MyExoticComponent(props, _ref) {
+          return <div>{props.children}</div>;
+        }
+      );
+      (MyExoticComponentRef as any).__docgenInfo = {
+        displayName: 'ExoticComponent',
+      };
+      expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
+        .toMatchInlineSnapshot(`
+          <ExoticComponent>
+            I am forwardRef!
+          </ExoticComponent>
+        `);
+    });
 
-    // if docgenInfo is present, it should use the displayName from there
-    (MyExoticComponentRef as any).__docgenInfo = {
-      displayName: 'ExoticComponent',
-    };
-    expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
-      .toMatchInlineSnapshot(`
+    it('with displayName coming from forwarded render function', () => {
+      const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
+        Object.assign(
+          function MyExoticComponent(props: any, _ref: any) {
+            return <div>{props.children}</div>;
+          },
+          { displayName: 'ExoticComponent' }
+        )
+      );
+      expect(renderJsx(<MyExoticComponentRef>I am forwardRef!</MyExoticComponentRef>))
+        .toMatchInlineSnapshot(`
         <ExoticComponent>
           I am forwardRef!
         </ExoticComponent>
       `);
+    });
   });
 
   it('memo component', () => {

code/renderers/react/src/docs/jsxDecorator.tsx

@@ -130,6 +130,8 @@ export const renderJsx = (code: React.ReactElement, options?: JSXOptions) => {
           return el.type.displayName;
         } else if (getDocgenSection(el.type, 'displayName')) {
           return getDocgenSection(el.type, 'displayName');
+        } else if (el.type.render?.displayName) {
+          return el.type.render.displayName;
         } else if (
           typeof el.type === 'symbol' ||
           (el.type.$$typeof && typeof el.type.$$typeof === 'symbol')

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"8.0.3","info":{"plain":"- Bug: Remove redundant component check, as we auto-generate titles from the file system - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!\n- UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!"}}
+{"version":"8.0.4","info":{"plain":"- Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!\n- CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!\n- CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!"}}