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/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/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 c8eccef6eb2a..efd3c929de0c 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" `; } } @@ -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; 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/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') 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!"}}