From f55cb5705f770995cd780e3b66f4f76915f8ae10 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 20 Mar 2024 20:19:49 +0100 Subject: [PATCH 1/4] Merge pull request #26515 from storybookjs/norbert/fix-mention-next-in-cli CLI: Instruct the correct auto-migration command (cherry picked from commit 17266228986692f4be66ea8e2f8f166ec484d55a) --- .../automigrate/helpers/getMigrationSummary.test.ts | 6 +++--- .../cli/src/automigrate/helpers/getMigrationSummary.ts | 4 ++-- code/lib/cli/src/doctor/index.ts | 7 +------ code/lib/core-events/src/errors/server-errors.ts | 10 +++++----- 4 files changed, 11 insertions(+), 16 deletions(-) diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts index eb49848ab2c0..92c9c91c9f04 100644 --- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts +++ b/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. diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts index 12c8ac07bfa7..e0f708543bef 100644 --- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts +++ b/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. diff --git a/code/lib/cli/src/doctor/index.ts b/code/lib/cli/src/doctor/index.ts index 69884c2f6755..2dfecaa96d17 100644 --- a/code/lib/cli/src/doctor/index.ts +++ b/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(); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index c8eccef6eb2a..85bf7cda02c4 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/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" `; } } From 5149d0f64e227c8d4afa3a4b0ca08759eb519e77 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 21 Mar 2024 09:25:06 +0100 Subject: [PATCH 2/4] Merge pull request #26585 from storybookjs/yann/fix-installations-command CLI: Throw an error when running upgrade command in incorrect cwd (cherry picked from commit 7b9e094bc0f6645c6e955d98036ad7aa9b3acf51) --- code/lib/cli/src/helpers.test.ts | 16 ++++++++++++++++ code/lib/cli/src/helpers.ts | 6 ++++++ code/lib/cli/src/upgrade.test.ts | 1 + code/lib/cli/src/upgrade.ts | 5 +++++ code/lib/core-events/src/errors/server-errors.ts | 14 ++++++++++++++ 5 files changed, 42 insertions(+) diff --git a/code/lib/cli/src/helpers.test.ts b/code/lib/cli/src/helpers.test.ts index 73d7efa548bd..35cdeb0c3150 100644 --- a/code/lib/cli/src/helpers.test.ts +++ b/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); + }); + }); }); diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index ed273831eefb..ab3bf239592c 100644 --- a/code/lib/cli/src/helpers.ts +++ b/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')); +} diff --git a/code/lib/cli/src/upgrade.test.ts b/code/lib/cli/src/upgrade.test.ts index 14bafd7cf5b9..c64bf35a9399 100644 --- a/code/lib/cli/src/upgrade.test.ts +++ b/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( diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index bb07d053d5d4..a49b6730bca8 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/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 }); } diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 85bf7cda02c4..efd3c929de0c 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -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; From eac115d7f30975b57bef1f33979cdae9f0d8e7fc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 21 Mar 2024 11:22:50 +0100 Subject: [PATCH 3/4] Merge pull request #26592 from storybookjs/yann/fix-forward-ref-docgen-usecase Addon Docs: Support Stencil based display names in source snippets (cherry picked from commit d7db290ca69fd2400b663eb6a2dbd23b847a41f6) --- .../react/src/docs/jsxDecorator.test.tsx | 61 +++++++++++++------ .../renderers/react/src/docs/jsxDecorator.tsx | 2 + 2 files changed, 45 insertions(+), 18 deletions(-) diff --git a/code/renderers/react/src/docs/jsxDecorator.test.tsx b/code/renderers/react/src/docs/jsxDecorator.test.tsx index b8868265333e..97c267a3b2a2 100644 --- a/code/renderers/react/src/docs/jsxDecorator.test.tsx +++ b/code/renderers/react/src/docs/jsxDecorator.test.tsx @@ -123,30 +123,55 @@ describe('renderJsx', () => { `); }); - it('forwardRef component', () => { - const MyExoticComponentRef = React.forwardRef( - function MyExoticComponent(props, _ref) { - return
{props.children}
; - } - ); + describe('forwardRef component', () => { + it('with no displayName', () => { + const MyExoticComponentRef = React.forwardRef( + function MyExoticComponent(props, _ref) { + return
{props.children}
; + } + ); + + expect(renderJsx(I am forwardRef!)) + .toMatchInlineSnapshot(` + + I am forwardRef! + + `); + }); - expect(renderJsx(I am forwardRef!)) - .toMatchInlineSnapshot(` - - I am forwardRef! - - `); + it('with displayName coming from docgen', () => { + const MyExoticComponentRef = React.forwardRef( + function MyExoticComponent(props, _ref) { + return
{props.children}
; + } + ); + (MyExoticComponentRef as any).__docgenInfo = { + displayName: 'ExoticComponent', + }; + expect(renderJsx(I am forwardRef!)) + .toMatchInlineSnapshot(` + + I am forwardRef! + + `); + }); - // if docgenInfo is present, it should use the displayName from there - (MyExoticComponentRef as any).__docgenInfo = { - displayName: 'ExoticComponent', - }; - expect(renderJsx(I am forwardRef!)) - .toMatchInlineSnapshot(` + it('with displayName coming from forwarded render function', () => { + const MyExoticComponentRef = React.forwardRef( + Object.assign( + function MyExoticComponent(props: any, _ref: any) { + return
{props.children}
; + }, + { displayName: 'ExoticComponent' } + ) + ); + expect(renderJsx(I am forwardRef!)) + .toMatchInlineSnapshot(` I am forwardRef! `); + }); }); it('memo component', () => { diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx index e6b1934c2e6e..f3a6d3b05cff 100644 --- a/code/renderers/react/src/docs/jsxDecorator.tsx +++ b/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') From 4910760478af45dd6abf476cafb796842daf28a9 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 21 Mar 2024 16:36:26 +0000 Subject: [PATCH 4/4] Write changelog for 8.0.4 [skip ci] --- CHANGELOG.md | 6 ++++++ code/package.json | 3 ++- docs/versions/latest.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e88193fafcc..c78e29fa62ae 100644 --- a/CHANGELOG.md +++ b/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! diff --git a/code/package.json b/code/package.json index 18343405c635..2b7e310ca735 100644 --- a/code/package.json +++ b/code/package.json @@ -295,5 +295,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.4" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 652adccbcd70..7b7e0fcf84ca 100644 --- a/docs/versions/latest.json +++ b/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!"}}