From d81bba30be1e43ff357ba131bd78539209ac4b3d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Sat, 6 Jul 2024 16:29:38 +0200 Subject: [PATCH 1/2] Align templates and address feedback --- code/core/src/preview-errors.ts | 12 +-- code/core/src/server-errors.ts | 162 ++++++++++++++------------------ 2 files changed, 73 insertions(+), 101 deletions(-) diff --git a/code/core/src/preview-errors.ts b/code/core/src/preview-errors.ts index b7f8b7ff2ba1..f832a4172a40 100644 --- a/code/core/src/preview-errors.ts +++ b/code/core/src/preview-errors.ts @@ -63,8 +63,7 @@ export class ImplicitActionsDuringRendering extends StorybookError { ... args: { ${data.name}: fn() - } - `, + }`, }); } } @@ -90,7 +89,7 @@ export class MissingRenderToCanvasError extends StorybookError { message: dedent` Expected your framework's preset to export a \`renderToCanvas\` field. - Perhaps it needs to be upgraded for Storybook 6.4?`, + Perhaps it needs to be upgraded for Storybook 7.0?`, documentation: 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field', }); @@ -218,8 +217,7 @@ export class MountMustBeDestructuredError extends StorybookError { To use mount in the play function, you must use object destructuring, e.g. play: ({ mount }) => {}. Instead received: - ${data.playFunction} - `, + ${data.playFunction}`, }); } } @@ -255,9 +253,7 @@ export class TestingLibraryMustBeConfiguredError extends StorybookError { // or for React render(); }, - }); - - `, + });`, }); } } diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts index b6ee843174e2..54cc3d3e0b02 100644 --- a/code/core/src/server-errors.ts +++ b/code/core/src/server-errors.ts @@ -58,8 +58,7 @@ export class NxProjectDetectedError extends StorybookError { documentation: 'https://nx.dev/packages/storybook', message: dedent` We have detected Nx in your project. Nx has its own Storybook initializer, so please use it instead. - Run "nx g @nx/storybook:configuration" to add Storybook to your project. - `, + Run "nx g @nx/storybook:configuration" to add Storybook to your project.`, }); } } @@ -73,9 +72,8 @@ export class MissingFrameworkFieldError extends StorybookError { 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api', message: dedent` Could not find a 'framework' field in Storybook config. - - Please run 'npx storybook automigrate' to automatically fix your config. - `, + + Please run 'npx storybook automigrate' to automatically fix your config.`, }); } } @@ -89,7 +87,7 @@ export class InvalidFrameworkNameError extends StorybookError { 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api', message: dedent` Invalid value of '${data.frameworkName}' in the 'framework' field of Storybook config. - + Please run 'npx storybook automigrate' to automatically fix your config. `, }); @@ -104,9 +102,8 @@ export class CouldNotEvaluateFrameworkError extends StorybookError { documentation: '', message: dedent` Could not evaluate the '${data.frameworkName}' package from the 'framework' field of Storybook config. - - Are you sure it's a valid package and is installed? - `, + + Are you sure it's a valid package and is installed?`, }); } } @@ -125,8 +122,7 @@ export class ConflictingStaticDirConfigError extends StorybookError { * Storybook's option in the config file: 'staticDirs' * Storybook's (deprecated) CLI flag: '--staticDir' or '-s' - Please remove the CLI flag from your storybook script and use only the 'staticDirs' option instead. - `, + Please remove the CLI flag from your storybook script and use only the 'staticDirs' option instead.`, }); } } @@ -142,8 +138,7 @@ export class InvalidStoriesEntryError extends StorybookError { Storybook could not index your stories. Your main configuration somehow does not contain a 'stories' field, or it resolved to an empty array. - Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array. - `, + Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.`, }); } } @@ -159,8 +154,7 @@ export class WebpackMissingStatsError extends StorybookError { ], message: dedent` No Webpack stats found. Did you turn off stats reporting in your Webpack config? - Storybook needs Webpack stats (including errors) in order to build correctly. - `, + Storybook needs Webpack stats (including errors) in order to build correctly.`, }); } } @@ -226,8 +220,7 @@ export class MissingAngularJsonError extends StorybookError { documentation: 'https://storybook.js.org/docs/angular/faq#error-no-angularjson-file-found', message: dedent` An angular.json file was not found in the current working directory: ${data.path} - Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located. - `, + Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located.`, }); } } @@ -242,11 +235,10 @@ export class AngularLegacyBuildOptionsError extends StorybookError { 'https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular#how-do-i-migrate-to-an-angular-storybook-builder', ], message: dedent` - 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 automigrate' to automatically fix your config. - `, + 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 automigrate' to automatically fix your config.`, }); } } @@ -263,14 +255,13 @@ export class CriticalPresetLoadError extends StorybookError { code: 2, documentation: '', message: dedent` - Storybook failed to load the following preset: ${data.presetName}. - - Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes. - - If you believe this is a bug, please open an issue on Github. - - ${data.error.stack || data.error.message} - `, + Storybook failed to load the following preset: ${data.presetName}. + + Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes. + + If you believe this is a bug, please open an issue on Github. + + ${data.error.stack || data.error.message}`, }); } } @@ -282,16 +273,15 @@ export class MissingBuilderError extends StorybookError { code: 3, documentation: 'https://github.com/storybookjs/storybook/issues/24071', message: dedent` - Storybook could not find a builder configuration for your project. - Builders normally come from a framework package e.g. '@storybook/react-vite', or from builder packages e.g. '@storybook/builder-vite'. - - - Does your main config file contain a 'framework' field configured correctly? - - Is the Storybook framework package installed correctly? - - If you don't use a framework, does your main config contain a 'core.builder' configured correctly? - - Are you in a monorepo and perhaps the framework package is hoisted incorrectly? - - If you believe this is a bug, please describe your issue in detail on Github. - `, + Storybook could not find a builder configuration for your project. + Builders normally come from a framework package e.g. '@storybook/react-vite', or from builder packages e.g. '@storybook/builder-vite'. + + - Does your main config file contain a 'framework' field configured correctly? + - Is the Storybook framework package installed correctly? + - If you don't use a framework, does your main config contain a 'core.builder' configured correctly? + - Are you in a monorepo and perhaps the framework package is hoisted incorrectly? + + If you believe this is a bug, please describe your issue in detail on Github.`, }); } } @@ -304,8 +294,7 @@ export class GoogleFontsDownloadError extends StorybookError { documentation: 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#nextjs-font-optimization', message: dedent` - Failed to fetch \`${data.fontFamily}\` from Google Fonts with URL: \`${data.url}\` - `, + Failed to fetch \`${data.fontFamily}\` from Google Fonts with URL: \`${data.url}\``, }); } } @@ -318,10 +307,9 @@ export class GoogleFontsLoadingError extends StorybookError { documentation: 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#nextjs-font-optimization', message: dedent` - An error occurred when trying to load Google Fonts with URL \`${data.url}\`. - - ${data.error instanceof Error ? data.error.message : ''} - `, + An error occurred when trying to load Google Fonts with URL \`${data.url}\`. + + ${data.error instanceof Error ? data.error.message : ''}`, }); } } @@ -333,17 +321,16 @@ export class NoMatchingExportError extends StorybookError { code: 4, documentation: '', message: dedent` - There was an exports mismatch error when trying to build Storybook. - Please check whether the versions of your Storybook packages match whenever possible, as this might be the cause. - - Problematic example: - { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.4.5", "storybook": "7.3.0" } - - Correct example: - { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" } - - Please run \`npx storybook doctor\` for guidance on how to fix this issue. - `, + There was an exports mismatch error when trying to build Storybook. + Please check whether the versions of your Storybook packages match whenever possible, as this might be the cause. + + Problematic example: + { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.4.5", "storybook": "7.3.0" } + + Correct example: + { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" } + + Please run \`npx storybook doctor\` for guidance on how to fix this issue.`, }); } } @@ -400,16 +387,12 @@ export class MainFileMissingError extends StorybookError { No configuration files have been found in your configDir: ${chalk.yellow(data.location)}. Storybook needs a "main.js" file, please add it. - You can pass a --config-dir flag to tell Storybook, where your main.js file is located at). - `, + You can pass a --config-dir flag to tell Storybook, where your main.js file is located at).`, }); } } export class MainFileEvaluationError extends StorybookError { - // TODO: check if this error is still showing proper stack - readonly stack = ''; - constructor(public data: { location: string; error: Error }) { const errorText = chalk.white( (data.error.stack || data.error.message).replaceAll(process.cwd(), '') @@ -419,10 +402,10 @@ export class MainFileEvaluationError extends StorybookError { category: Category.CORE_SERVER, code: 7, message: dedent` - Storybook couldn't evaluate your ${chalk.yellow(data.location)} file. - - ${errorText} - `, + Storybook couldn't evaluate your ${chalk.yellow(data.location)} file. + + Original error: + ${errorText}`, }); } } @@ -436,12 +419,11 @@ export class GenerateNewProjectOnInitError extends StorybookError { code: 3, documentation: '', message: dedent` - There was an error while using ${data.packageManager} to create a new ${ - data.projectType - } project. - - ${data.error instanceof Error ? data.error.message : ''} - `, + There was an error while using ${data.packageManager} to create a new ${ + data.projectType + } project. + + ${data.error instanceof Error ? data.error.message : ''}`, }); } } @@ -453,16 +435,15 @@ export class UpgradeStorybookToLowerVersionError extends StorybookError { code: 3, message: dedent` You are trying to upgrade Storybook to a lower version than the version currently installed. This is not supported. - + Storybook version ${data.beforeVersion} was detected in your project, but you are trying to "upgrade" to version ${data.currentVersion}. This usually happens when running the upgrade command without a version specifier, e.g. "npx storybook upgrade". This will cause npm to run the globally cached storybook binary, which might be an older version. - + Instead you should always run the Storybook CLI with a version specifier to force npm to download the latest version: - "npx storybook@latest upgrade" - `, + "npx storybook@latest upgrade"`, }); } } @@ -478,15 +459,14 @@ export class UpgradeStorybookToSameVersionError extends StorybookError { This usually happens when running the upgrade command without a version specifier, e.g. "npx storybook upgrade". This will cause npm to run the globally cached storybook binary, which might be the same version that you already have. This also happens if you're running the Storybook CLI that is locally installed in your project. - + If you intended to upgrade to the latest version, you should always run the Storybook CLI with a version specifier to force npm to download the latest version: - + "npx storybook@latest upgrade" - + If you intended to re-run automigrations, you should run the "automigrate" command directly instead: - - "npx storybook automigrate" - `, + + "npx storybook automigrate"`, }); } } @@ -498,10 +478,9 @@ export class UpgradeStorybookUnknownCurrentVersionError extends StorybookError { code: 5, message: dedent` We couldn't determine the current version of Storybook in your project. - + Are you running the Storybook CLI in a project without Storybook? - It might help if you specify your Storybook config directory with the --config-dir flag. - `, + It might help if you specify your Storybook config directory with the --config-dir flag.`, }); } } @@ -513,9 +492,8 @@ export class UpgradeStorybookInWrongWorkingDirectory extends StorybookError { code: 6, message: 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. - `, + + 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.`, }); } } @@ -527,9 +505,8 @@ export class NoStatsForViteDevError extends StorybookError { code: 1, message: dedent` Unable to write preview stats as the Vite builder does not support stats in dev mode. - - Please remove the \`--stats-json\` flag when running in dev mode. - `, + + Please remove the \`--stats-json\` flag when running in dev mode.`, }); } } @@ -543,8 +520,7 @@ export class FindPackageVersionsError extends StorybookError { code: 1, message: dedent` Unable to find versions of "${data.packageName}" using ${data.packageManager} - ${data.error && `Reason: ${data.error}`} - `, + ${data.error && `Reason: ${data.error}`}`, }); } } From 13338a26f0af037df314707245831b699ce5ee54 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Sun, 7 Jul 2024 12:25:23 +0200 Subject: [PATCH 2/2] Adress feedback and fix unit test --- .../core/src/preview-api/modules/preview-web/PreviewWeb.test.ts | 2 +- code/core/src/storybook-error.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts index 9c51892e78ff..c0862f643683 100644 --- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts +++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts @@ -518,7 +518,7 @@ describe('PreviewWeb', () => { expect(vi.mocked(preview.view.showErrorDisplay).mock.calls[0][0]).toMatchInlineSnapshot(` [SB_PREVIEW_API_0004 (MissingRenderToCanvasError): Expected your framework's preset to export a \`renderToCanvas\` field. - Perhaps it needs to be upgraded for Storybook 6.4? + Perhaps it needs to be upgraded for Storybook 7.0? More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field ] diff --git a/code/core/src/storybook-error.ts b/code/core/src/storybook-error.ts index 2518e71fc43d..6cbcda3d28e3 100644 --- a/code/core/src/storybook-error.ts +++ b/code/core/src/storybook-error.ts @@ -28,7 +28,7 @@ export abstract class StorybookError extends Error { * - If a string, uses the provided URL for documentation (external or FAQ links). * - If `false` (default), no documentation link is added. */ - public documentation: boolean | string | string[]; + public readonly documentation: boolean | string | string[]; /** * Flag used to easily determine if the error originates from Storybook.