From 50f84033e35f9c256101f31d0b4b5a066dea848f Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 17 Jun 2024 22:17:13 +0100
Subject: [PATCH 001/213] feat: migrate from chalk to picocolors
This migrates away from chalk to picocolors instead, primarily because
the latter is _much_ lighter.
Keep in mind, `node-logger` still uses chalk as we use `hex(code)` which
doesn't have an alternative in picocolors. This means it will still be
in the dependency tree for many packages (for now).
This seems preferable over upgrading chalk since the latest version of
chalk will still be heavier, and is ESM-only (not sure if we're able to
adopt ESM only deps in SB yet).
---
code/lib/cli/package.json | 2 +-
.../autoblock/block-dependencies-versions.ts | 10 +-
.../cli/src/autoblock/block-node-version.ts | 4 +-
.../cli/src/autoblock/block-storystorev6.ts | 6 +-
code/lib/cli/src/autoblock/index.ts | 6 +-
.../src/automigrate/fixes/addon-postcss.ts | 8 +-
.../cli/src/automigrate/fixes/addons-api.ts | 12 +--
.../fixes/angular-builders-multiproject.ts | 10 +-
.../src/automigrate/fixes/angular-builders.ts | 4 +-
.../src/automigrate/fixes/autodocs-tags.ts | 26 ++---
.../src/automigrate/fixes/autodocs-true.ts | 10 +-
.../cli/src/automigrate/fixes/builder-vite.ts | 8 +-
code/lib/cli/src/automigrate/fixes/cra5.ts | 8 +-
.../src/automigrate/fixes/eslint-plugin.ts | 6 +-
.../src/automigrate/fixes/initial-globals.ts | 12 ++-
.../cli/src/automigrate/fixes/mdx-1-to-3.ts | 6 +-
.../cli/src/automigrate/fixes/mdx-to-csf.ts | 14 +--
.../src/automigrate/fixes/new-frameworks.ts | 102 ++++++++++--------
.../cli/src/automigrate/fixes/react-docgen.ts | 16 +--
.../fixes/remove-argtypes-regex.ts | 8 +-
.../fixes/remove-global-client-apis.ts | 14 +--
.../fixes/remove-jest-testing-library.ts | 8 +-
.../cli/src/automigrate/fixes/sb-binary.ts | 8 +-
.../cli/src/automigrate/fixes/sb-scripts.ts | 16 +--
.../automigrate/fixes/storyshots-migration.ts | 6 +-
.../upgrade-storybook-related-dependencies.ts | 2 +-
code/lib/cli/src/automigrate/fixes/vta.ts | 4 +-
code/lib/cli/src/automigrate/fixes/vue3.ts | 10 +-
.../fixes/webpack5-compiler-setup.test.ts | 4 +-
.../fixes/webpack5-compiler-setup.ts | 20 ++--
.../lib/cli/src/automigrate/fixes/webpack5.ts | 8 +-
.../cli/src/automigrate/fixes/wrap-require.ts | 4 +-
.../helpers/checkWebpack5Builder.ts | 6 +-
.../src/automigrate/helpers/eslintPlugin.ts | 4 +-
.../helpers/getMigrationSummary.ts | 28 ++---
.../src/automigrate/helpers/mainConfigFile.ts | 8 +-
code/lib/cli/src/automigrate/index.ts | 18 ++--
.../src/doctor/getDuplicatedDepsWarnings.ts | 14 +--
.../getIncompatibleStorybookPackages.test.ts | 2 +-
.../getIncompatibleStorybookPackages.ts | 10 +-
.../doctor/getMismatchingVersionsWarning.ts | 14 +--
code/lib/cli/src/doctor/index.ts | 8 +-
code/lib/cli/src/generate.ts | 10 +-
code/lib/cli/src/helpers.ts | 4 +-
code/lib/cli/src/initiate.ts | 32 +++---
code/lib/cli/src/link.ts | 4 +-
code/lib/cli/src/sandbox.ts | 36 +++----
code/lib/cli/src/scaffold-new-project.ts | 18 ++--
code/lib/cli/src/upgrade.ts | 20 ++--
code/lib/core-common/package.json | 2 +-
.../js-package-manager/JsPackageManager.ts | 6 +-
code/lib/core-common/src/utils/log-config.ts | 4 +-
code/lib/core-common/src/utils/log.ts | 14 +--
.../core-common/src/utils/notify-telemetry.ts | 8 +-
code/lib/core-events/package.json | 2 +-
.../core-events/src/errors/server-errors.ts | 8 +-
code/lib/core-server/package.json | 2 +-
code/lib/core-server/src/build-static.ts | 6 +-
.../src/utils/StoryIndexGenerator.ts | 6 +-
.../src/utils/copy-all-static-files.ts | 12 ++-
.../src/utils/output-startup-information.ts | 16 +--
.../lib/core-server/src/utils/output-stats.ts | 6 +-
.../core-server/src/utils/server-statics.ts | 10 +-
.../lib/core-server/src/utils/update-check.ts | 10 +-
.../src/utils/warnWhenUsingArgTypesRegex.ts | 10 +-
code/lib/telemetry/package.json | 2 +-
code/lib/telemetry/src/notify.ts | 8 +-
code/yarn.lock | 17 ++-
68 files changed, 408 insertions(+), 359 deletions(-)
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index d36b17a533e3..e5dd2d3eac8e 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -70,7 +70,6 @@
"@types/semver": "^7.3.4",
"@yarnpkg/fslib": "2.10.3",
"@yarnpkg/libzip": "2.3.0",
- "chalk": "^4.1.0",
"commander": "^6.2.1",
"cross-spawn": "^7.0.3",
"detect-indent": "^6.1.0",
@@ -84,6 +83,7 @@
"jscodeshift": "^0.15.1",
"leven": "^3.1.0",
"ora": "^5.4.1",
+ "picocolors": "^1.0.1",
"prettier": "^3.1.1",
"prompts": "^2.4.0",
"read-pkg-up": "^7.0.1",
diff --git a/code/lib/cli/src/autoblock/block-dependencies-versions.ts b/code/lib/cli/src/autoblock/block-dependencies-versions.ts
index 45db54bac794..aef3a490f237 100644
--- a/code/lib/cli/src/autoblock/block-dependencies-versions.ts
+++ b/code/lib/cli/src/autoblock/block-dependencies-versions.ts
@@ -1,7 +1,7 @@
import { createBlocker } from './types';
import { dedent } from 'ts-dedent';
import { lt } from 'semver';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
const minimalVersionsMap = {
'@angular/core': '15.0.0',
@@ -51,7 +51,7 @@ export const blocker = createBlocker({
return dedent`
Support for react-script < 5.0.0 has been removed.
Please see the migration guide for more information:
- ${chalk.yellow(
+ ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#create-react-app-dropped-cra4-support'
)}
@@ -61,7 +61,7 @@ export const blocker = createBlocker({
return dedent`
Support for Vue 2 has been removed.
Please see the migration guide for more information:
- ${chalk.yellow('https://v3-migration.vuejs.org/')}
+ ${picocolors.yellow('https://v3-migration.vuejs.org/')}
Please upgrade to the latest version of Vue.
`;
@@ -69,7 +69,7 @@ export const blocker = createBlocker({
return dedent`
Support for Angular < 15 has been removed.
Please see the migration guide for more information:
- ${chalk.yellow('https://angular.io/guide/update-to-version-15')}
+ ${picocolors.yellow('https://angular.io/guide/update-to-version-15')}
Please upgrade to the latest version of Angular.
`;
@@ -77,7 +77,7 @@ export const blocker = createBlocker({
return dedent`
Support for Next.js < 13.5 has been removed.
Please see the migration guide for more information:
- ${chalk.yellow(
+ ${picocolors.yellow(
'https://nextjs.org/docs/pages/building-your-application/upgrading/version-13'
)}
diff --git a/code/lib/cli/src/autoblock/block-node-version.ts b/code/lib/cli/src/autoblock/block-node-version.ts
index 49c9744b08f0..a54736db960c 100644
--- a/code/lib/cli/src/autoblock/block-node-version.ts
+++ b/code/lib/cli/src/autoblock/block-node-version.ts
@@ -1,7 +1,7 @@
import { createBlocker } from './types';
import { dedent } from 'ts-dedent';
import { lt } from 'semver';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
export const blocker = createBlocker({
id: 'minimumNode16',
@@ -17,7 +17,7 @@ export const blocker = createBlocker({
We've detected you're using Node.js v${data.nodeVersion}.
Storybook needs Node.js 18 or higher.
- ${chalk.yellow('https://nodejs.org/en/download')}
+ ${picocolors.yellow('https://nodejs.org/en/download')}
`;
},
});
diff --git a/code/lib/cli/src/autoblock/block-storystorev6.ts b/code/lib/cli/src/autoblock/block-storystorev6.ts
index d284584c9fbc..5041fbd56374 100644
--- a/code/lib/cli/src/autoblock/block-storystorev6.ts
+++ b/code/lib/cli/src/autoblock/block-storystorev6.ts
@@ -1,7 +1,7 @@
import { createBlocker } from './types';
import { dedent } from 'ts-dedent';
import type { StorybookConfigRaw } from '@storybook/types';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
export const blocker = createBlocker({
id: 'storyStoreV7removal',
@@ -20,7 +20,7 @@ export const blocker = createBlocker({
StoryStoreV7 feature must be removed from your Storybook configuration.
This feature was removed in Storybook 8.0.0.
Please see the migration guide for more information:
- ${chalk.yellow(
+ ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated'
)}
@@ -28,7 +28,7 @@ export const blocker = createBlocker({
export default = {
features: {
- ${chalk.cyan(`storyStoreV7: false`)}, <--- ${chalk.bold('remove this line')}
+ ${picocolors.cyan(`storyStoreV7: false`)}, <--- ${picocolors.bold('remove this line')}
},
};
diff --git a/code/lib/cli/src/autoblock/index.ts b/code/lib/cli/src/autoblock/index.ts
index 6e71266926f6..82e7200f0d23 100644
--- a/code/lib/cli/src/autoblock/index.ts
+++ b/code/lib/cli/src/autoblock/index.ts
@@ -1,6 +1,6 @@
import type { AutoblockOptions, Blocker } from './types';
import { logger } from '@storybook/node-logger';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import boxen from 'boxen';
const excludesFalse = (x: T | false): x is T => x !== false;
@@ -47,7 +47,9 @@ export const autoblock = async (
if (faults.length > 0) {
const messages = {
welcome: `Storybook has found potential blockers in your project that need to be resolved before upgrading:`,
- reminder: chalk.yellow('Fix the above issues and try running the upgrade command again.'),
+ reminder: picocolors.yellow(
+ 'Fix the above issues and try running the upgrade command again.'
+ ),
};
const borderColor = '#FC521F';
diff --git a/code/lib/cli/src/automigrate/fixes/addon-postcss.ts b/code/lib/cli/src/automigrate/fixes/addon-postcss.ts
index f8d134183c0b..f3ba17f8cbf9 100644
--- a/code/lib/cli/src/automigrate/fixes/addon-postcss.ts
+++ b/code/lib/cli/src/automigrate/fixes/addon-postcss.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import type { Fix } from '../types';
import { getAddonNames } from '../helpers/mainConfigFile';
@@ -27,13 +27,13 @@ export const addonPostCSS: Fix = {
prompt() {
return dedent`
- ${chalk.bold(
+ ${picocolors.bold(
'Attention'
)}: We've detected that you're using the following package which is incompatible with Storybook 8 and beyond:
- - ${chalk.cyan(`@storybook/addon-postcss`)}
+ - ${picocolors.cyan(`@storybook/addon-postcss`)}
- Please migrate to ${chalk.cyan(
+ Please migrate to ${picocolors.cyan(
`@storybook/addon-styling-webpack`
)} once you're done upgrading.
`;
diff --git a/code/lib/cli/src/automigrate/fixes/addons-api.ts b/code/lib/cli/src/automigrate/fixes/addons-api.ts
index f193898aa82f..910f2d90c1de 100644
--- a/code/lib/cli/src/automigrate/fixes/addons-api.ts
+++ b/code/lib/cli/src/automigrate/fixes/addons-api.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import type { Fix } from '../types';
@@ -26,18 +26,18 @@ export const addonsAPI: Fix = {
prompt() {
return dedent`
- ${chalk.bold(
+ ${picocolors.bold(
'Attention'
)}: We've detected that you're using the following package which is removed in Storybook 8 and beyond:
- - ${chalk.cyan(`@storybook/addons`)}
+ - ${picocolors.cyan(`@storybook/addons`)}
- This package has been deprecated and replaced with ${chalk.cyan(
+ This package has been deprecated and replaced with ${picocolors.cyan(
`@storybook/preview-api`
- )} and ${chalk.cyan(`@storybook/manager-api`)}.
+ )} and ${picocolors.cyan(`@storybook/manager-api`)}.
You can find more information about the new addons API in the migration guide:
- ${chalk.yellow(
+ ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-addons-api'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts b/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts
index 3f72411be011..539800e12406 100644
--- a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts
+++ b/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts
@@ -1,6 +1,6 @@
import { dedent } from 'ts-dedent';
import semver from 'semver';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import type { Fix } from '../types';
import { isNxProject } from '../../helpers';
import { AngularJSON } from '../../generators/ANGULAR/helpers';
@@ -46,13 +46,13 @@ export const angularBuildersMultiproject: Fix:storybook')} to start Storybook.
+ )} and execute ${picocolors.yellow('ng run :storybook')} to start Storybook.
- ❌ Your Angular workspace uses multiple projects defined in the ${chalk.yellow(
+ ❌ Your Angular workspace uses multiple projects defined in the ${picocolors.yellow(
'angular.json'
- )} file and we were not able to detect a root project. Therefore we are not able to automigrate to use Angular Storybook builder. Instead, please visit ${chalk.yellow(
+ )} file and we were not able to detect a root project. Therefore we are not able to automigrate to use Angular Storybook builder. Instead, please visit ${picocolors.yellow(
'https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular'
)} to do the migration manually.
`;
diff --git a/code/lib/cli/src/automigrate/fixes/angular-builders.ts b/code/lib/cli/src/automigrate/fixes/angular-builders.ts
index ac2f2af99d2e..95a3298a81c8 100644
--- a/code/lib/cli/src/automigrate/fixes/angular-builders.ts
+++ b/code/lib/cli/src/automigrate/fixes/angular-builders.ts
@@ -1,6 +1,6 @@
import { dedent } from 'ts-dedent';
import type { StorybookConfig } from '@storybook/types';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import prompts from 'prompts';
import type { Fix } from '../types';
import { isNxProject } from '../../helpers';
@@ -59,7 +59,7 @@ export const angularBuilders: Fix = {
Also feel free to remove the Compodoc script from your package.json file if you don't use it apart from Storybook anymore. Storybook uses Compodoc internally and you don't have to call in separately anymore.
- Read more about the Angular builder here: ${chalk.yellow(
+ Read more about the Angular builder here: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular#how-do-i-migrate-to-an-angular-storybook-builder'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts b/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts
index 531bcc0ec69d..3b2416af91fd 100644
--- a/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts
+++ b/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts
@@ -1,5 +1,5 @@
import { dedent } from 'ts-dedent';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import type { DocsOptions } from '@storybook/types';
import { readConfig, writeConfig } from '@storybook/csf-tools';
import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -27,13 +27,13 @@ export const autodocsTags: Fix = {
if (autodocs === true && !previewConfigPath) {
throw Error(dedent`
- ❌ Failed to remove the deprecated ${chalk.cyan('docs.autodocs')} setting from ${chalk.cyan(
- mainConfigPath
- )}.
+ ❌ Failed to remove the deprecated ${picocolors.cyan(
+ 'docs.autodocs'
+ )} setting from ${picocolors.cyan(mainConfigPath)}.
- There is no preview config file in which to add the ${chalk.cyan('autodocs')} tag.
+ There is no preview config file in which to add the ${picocolors.cyan('autodocs')} tag.
- Please perform the migration by hand: ${chalk.yellow(MIGRATION)}
+ Please perform the migration by hand: ${picocolors.yellow(MIGRATION)}
`);
return null;
}
@@ -49,21 +49,23 @@ export const autodocsTags: Fix = {
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')}.
+ There is no ${picocolors.cyan('docs.autodocs = false')} equivalent.
+ You'll need to check your stories to ensure none are tagged with ${picocolors.cyan(
+ 'autodocs'
+ )}.
`;
} else if (autodocs === true) {
- trueMessage = ` and update ${chalk.cyan(previewConfigPath)}`;
+ trueMessage = ` and update ${picocolors.cyan(previewConfigPath)}`;
}
return dedent`
- The ${chalk.cyan('docs.autodocs')} setting in ${chalk.cyan(
+ The ${picocolors.cyan('docs.autodocs')} setting in ${picocolors.cyan(
mainConfigPath
)} is deprecated.${falseMessage}
- Learn more: ${chalk.yellow(MIGRATION)}
+ Learn more: ${picocolors.yellow(MIGRATION)}
- Remove ${chalk.cyan('docs.autodocs')}${trueMessage}?
+ Remove ${picocolors.cyan('docs.autodocs')}${trueMessage}?
`;
},
diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-true.ts b/code/lib/cli/src/automigrate/fixes/autodocs-true.ts
index e5c2aceda7c2..d9cac1583b41 100644
--- a/code/lib/cli/src/automigrate/fixes/autodocs-true.ts
+++ b/code/lib/cli/src/automigrate/fixes/autodocs-true.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import type { Fix } from '../types';
@@ -44,7 +44,9 @@ export const autodocsTrue: Fix = {
},
prompt({ value }) {
- const autodocsFormatted = chalk.cyan(`docs: { autodocs: ${JSON.stringify(value ?? true)} }`);
+ const autodocsFormatted = picocolors.cyan(
+ `docs: { autodocs: ${JSON.stringify(value ?? true)} }`
+ );
const tagWarning = dedent`
NOTE: if you're upgrading from an older 7.0-beta using the 'docsPage' tag,
please update your story files to use the 'autodocs' tag instead.
@@ -61,7 +63,7 @@ export const autodocsTrue: Fix = {
${autodocsFormatted}
${value === 'tag' ? tagWarning : ''}
- More info: ${chalk.yellow(
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
)}
`;
@@ -74,7 +76,7 @@ export const autodocsTrue: Fix = {
${autodocsFormatted}
- More info: ${chalk.yellow(
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/builder-vite.ts b/code/lib/cli/src/automigrate/fixes/builder-vite.ts
index b38cf9ccb677..66e573a0e75c 100644
--- a/code/lib/cli/src/automigrate/fixes/builder-vite.ts
+++ b/code/lib/cli/src/automigrate/fixes/builder-vite.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import { writeConfig } from '@storybook/csf-tools';
@@ -42,18 +42,18 @@ export const builderVite: Fix = {
},
prompt({ builder }) {
- const builderFormatted = chalk.cyan(JSON.stringify(builder, null, 2));
+ const builderFormatted = picocolors.cyan(JSON.stringify(builder, null, 2));
return dedent`
We've detected you're using the community vite builder: ${builderFormatted}
- 'storybook-builder-vite' is deprecated and now located at ${chalk.cyan(
+ 'storybook-builder-vite' is deprecated and now located at ${picocolors.cyan(
'@storybook/builder-vite'
)}.
We can upgrade your project to use the new builder automatically.
- More info: ${chalk.yellow(
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/cra5.ts b/code/lib/cli/src/automigrate/fixes/cra5.ts
index 468fbe90947b..ef831e2b1865 100644
--- a/code/lib/cli/src/automigrate/fixes/cra5.ts
+++ b/code/lib/cli/src/automigrate/fixes/cra5.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import semver from 'semver';
import type { Fix } from '../types';
@@ -34,17 +34,17 @@ export const cra5: Fix = {
},
prompt({ craVersion }) {
- const craFormatted = chalk.cyan(`Create React App (CRA) ${craVersion}`);
+ const craFormatted = picocolors.cyan(`Create React App (CRA) ${craVersion}`);
return dedent`
We've detected you are running ${craFormatted} which is powered by webpack5.
Your Storybook's main.js files specifies webpack4, which is incompatible.
- In order to work with your version of CRA, we need to install Storybook's ${chalk.cyan(
+ In order to work with your version of CRA, we need to install Storybook's ${picocolors.cyan(
'@storybook/builder-webpack5'
)}.
- More info: ${chalk.yellow(
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts
index de81e08008d8..b726818899bb 100644
--- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts
+++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import {
@@ -57,7 +57,9 @@ export const eslintPlugin: Fix = {
In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.
- More info: ${chalk.yellow('https://github.com/storybookjs/eslint-plugin-storybook#readme')}
+ More info: ${picocolors.yellow(
+ 'https://github.com/storybookjs/eslint-plugin-storybook#readme'
+ )}
`;
},
diff --git a/code/lib/cli/src/automigrate/fixes/initial-globals.ts b/code/lib/cli/src/automigrate/fixes/initial-globals.ts
index c9fac6d4cdbf..fd13157ca5bc 100644
--- a/code/lib/cli/src/automigrate/fixes/initial-globals.ts
+++ b/code/lib/cli/src/automigrate/fixes/initial-globals.ts
@@ -1,5 +1,5 @@
import { dedent } from 'ts-dedent';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { readFile, writeFile } from 'fs-extra';
import type { Expression } from '@babel/types';
import type { ConfigFile } from '@storybook/csf-tools';
@@ -33,12 +33,14 @@ export const initialGlobals: Fix = {
prompt({ previewConfigPath }) {
return dedent`
- The ${chalk.cyan('globals')} setting in ${chalk.cyan(previewConfigPath)} is deprecated
- and has been renamed to ${chalk.cyan('initialGlobals')}.
+ The ${picocolors.cyan('globals')} setting in ${picocolors.cyan(
+ previewConfigPath
+ )} is deprecated
+ and has been renamed to ${picocolors.cyan('initialGlobals')}.
- Learn more: ${chalk.yellow(MIGRATION)}
+ Learn more: ${picocolors.yellow(MIGRATION)}
- Rename ${chalk.cyan('globals')} to ${chalk.cyan('initalGlobals')}?
+ Rename ${picocolors.cyan('globals')} to ${picocolors.cyan('initalGlobals')}?
`;
},
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts b/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
index 8b556033a6ac..b66b4cb8da4e 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
+++ b/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import { basename } from 'path';
import fse from 'fs-extra';
@@ -56,7 +56,7 @@ export const mdx1to3: Fix = {
prompt({ storiesMdxFiles }) {
return dedent`
- We've found ${chalk.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
+ We've found ${picocolors.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
Storybook has upgraded to MDX3 (https://mdxjs.com/blog/v3/). MDX3 itself doesn't contain disruptive breaking changes, whereas the transition from MDX1 to MDX2 was a significant change.
We can try to automatically upgrade your MDX files to MDX3 format using some common patterns.
@@ -64,7 +64,7 @@ export const mdx1to3: Fix = {
After this install completes, and before you start Storybook, we strongly recommend reading the MDX2 section
of the 7.0 migration guide. It contains useful tools for detecting and fixing any remaining issues.
- ${chalk.cyan('https://storybook.js.org/migration-guides/7.0')}
+ ${picocolors.cyan('https://storybook.js.org/migration-guides/7.0')}
`;
},
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts b/code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts
index 72dc4ddbde00..74793efdb0c1 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts
+++ b/code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import dedent from 'ts-dedent';
import type { StoriesEntry } from '@storybook/types';
import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -40,9 +40,9 @@ export const mdxToCSF: Fix = {
if (!existingStoriesEntries) {
throw new Error(dedent`
- ❌ Unable to determine Storybook stories globs in ${chalk.blue(
+ ❌ Unable to determine Storybook stories globs in ${picocolors.blue(
mainConfig
- )}, skipping ${chalk.cyan(this.id)} fix.
+ )}, skipping ${picocolors.cyan(this.id)} fix.
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
@@ -50,7 +50,7 @@ export const mdxToCSF: Fix = {
We were unable to automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
We suggest you make this change manually.
- To learn more about this change, see: ${chalk.yellow(
+ To learn more about this change, see: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
)}
`);
@@ -94,7 +94,7 @@ export const mdxToCSF: Fix = {
.join('\n');
return dedent`
We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files:
- ${chalk.cyan(prettyExistingStoriesEntries)}
+ ${picocolors.cyan(prettyExistingStoriesEntries)}
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx. Since Storybook 8, we have removed the support of story definition in MDX files entirely. Therefore '.stories.mdx' files aren't supported anymore.
@@ -102,11 +102,11 @@ export const mdxToCSF: Fix = {
We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
That would result in the following 'stories' config:
- ${chalk.cyan(prettyNextStoriesEntries)}
+ ${picocolors.cyan(prettyNextStoriesEntries)}
Additionally, we will run the 'mdx-to-csf' codemod for you, which tries to transform '*.stories.mdx' files to '*.stories.js' and '*.mdx' files.
- To learn more about this change, see: ${chalk.yellow(
+ To learn more about this change, see: ${picocolors.yellow(
'https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
index 97ace48c8ee9..e18c5c137a4c 100644
--- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
+++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import dedent from 'ts-dedent';
import semver from 'semver';
import { frameworkPackages, rendererPackages } from '@storybook/core-common';
@@ -206,13 +206,13 @@ export const newFrameworks: Fix = {
if (viteVersion && semver.lt(viteVersion, '3.0.0')) {
throw new Error(dedent`
- ❌ Your project should be upgraded to use the framework package ${chalk.bold(
+ ❌ Your project should be upgraded to use the framework package ${picocolors.bold(
newFrameworkPackage
- )}, but we detected that you are using Vite ${chalk.bold(
+ )}, but we detected that you are using Vite ${picocolors.bold(
viteVersion
- )}, which is unsupported since ${chalk.bold(
+ )}, which is unsupported since ${picocolors.bold(
'Storybook 7.0'
- )}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration.
+ )}. Please upgrade Vite to ${picocolors.bold('3.0.0 or higher')} and rerun this migration.
`);
}
@@ -258,41 +258,47 @@ export const newFrameworks: Fix = {
if (dependenciesToRemove.length > 0) {
migrationSteps += `- Remove the following dependencies:
- ${dependenciesToRemove.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}\n`;
+ ${dependenciesToRemove.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}\n`;
}
if (dependenciesToAdd.length > 0) {
migrationSteps += `- Add the following dependencies:
- ${dependenciesToAdd.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}\n`;
+ ${dependenciesToAdd.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}\n`;
}
if (!hasFrameworkInMainConfig) {
- migrationSteps += `- Update or specify the ${chalk.yellow('framework')} field in ${chalk.blue(
- mainConfigPath
- )} with the value of "${chalk.cyan(frameworkPackage)}".\n`;
+ migrationSteps += `- Update or specify the ${picocolors.yellow(
+ 'framework'
+ )} field in ${picocolors.blue(mainConfigPath)} with the value of "${picocolors.cyan(
+ frameworkPackage
+ )}".\n`;
}
if (Object.keys(rendererOptions).length > 0) {
- migrationSteps += `- Move the ${chalk.yellow(`${renderer}Options`)} field in ${chalk.blue(
- mainConfigPath
- )} to ${chalk.yellow('framework.options')}, and remove that field entirely.
- More info: ${chalk.yellow(
+ migrationSteps += `- Move the ${picocolors.yellow(
+ `${renderer}Options`
+ )} field in ${picocolors.blue(mainConfigPath)} to ${picocolors.yellow(
+ 'framework.options'
+ )}, and remove that field entirely.
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#frameworkoptions-renamed'
)}\n`;
}
if (addonsToRemove.length > 0) {
- migrationSteps += `- Remove the following addons from your ${chalk.blue(
+ migrationSteps += `- Remove the following addons from your ${picocolors.blue(
mainConfigPath
)}, as the new framework also supports features provided by them:
- ${addonsToRemove.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}
+ ${addonsToRemove.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}
`;
}
if (Object.keys(addonOptions).length > 0) {
- migrationSteps += `- Move the addon options "${chalk.yellow(
+ migrationSteps += `- Move the addon options "${picocolors.yellow(
Object.keys(addonOptions).join(', ')
- )}" in ${chalk.blue(mainConfigPath)} to the ${chalk.yellow('framework.options')} field.\n`;
+ )}" in ${picocolors.blue(mainConfigPath)} to the ${picocolors.yellow(
+ 'framework.options'
+ )} field.\n`;
}
if (builderConfig) {
@@ -300,14 +306,16 @@ export const newFrameworks: Fix = {
typeof builderConfig === 'object' &&
Object.keys(builderConfig.options || {}).length > 0
) {
- migrationSteps += `- Move the ${chalk.yellow('core.builder.options')} field in ${chalk.blue(
- mainConfigPath
- )} to ${chalk.yellow('framework.options.builder')}\n`;
+ migrationSteps += `- Move the ${picocolors.yellow(
+ 'core.builder.options'
+ )} field in ${picocolors.blue(mainConfigPath)} to ${picocolors.yellow(
+ 'framework.options.builder'
+ )}\n`;
}
- migrationSteps += `- Remove the ${chalk.yellow('core.builder')} field in ${chalk.blue(
- mainConfigPath
- )}.\n`;
+ migrationSteps += `- Remove the ${picocolors.yellow(
+ 'core.builder'
+ )} field in ${picocolors.blue(mainConfigPath)}.\n`;
}
if (
@@ -315,47 +323,49 @@ export const newFrameworks: Fix = {
dependenciesToRemove.includes('@storybook/manager-webpack4')
) {
disclaimer = dedent`\n\n
- ${chalk.underline(chalk.bold(chalk.cyan('Webpack 4 users')))}
+ ${picocolors.underline(picocolors.bold(picocolors.cyan('Webpack 4 users')))}
Unless you're using Storybook's Vite builder, this automigration will install a Webpack 5 based framework.
Given you were using Storybook's Webpack 4 builder (default in 6.x, discontinued in 7.0), this could be a breaking change -- especially if your project has a custom webpack configuration.
- To learn more about migrating from Webpack4, see: ${chalk.yellow(
+ To learn more about migrating from Webpack4, see: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued'
)}`;
}
if (metaFramework === 'nextjs') {
if (dependenciesToRemove.includes('storybook-addon-next-router')) {
- migrationSteps += `- Migrate the usage of the ${chalk.cyan(
+ migrationSteps += `- Migrate the usage of the ${picocolors.cyan(
'storybook-addon-next-router'
- )} addon to use the APIs from the ${chalk.magenta(
+ )} addon to use the APIs from the ${picocolors.magenta(
'@storybook/nextjs'
)} framework package instead. Follow the instructions below.`;
}
if (frameworkPackage === '@storybook/react-vite') {
disclaimer = dedent`\n\n
- ${chalk.bold('Important')}: We've detected you are using Storybook in a Next.js project.
+ ${picocolors.bold(
+ 'Important'
+ )}: We've detected you are using Storybook in a Next.js project.
- This migration is set to update your project to use the ${chalk.magenta(
+ This migration is set to update your project to use the ${picocolors.magenta(
'@storybook/react-vite'
- )} framework, but Storybook provides a framework package specifically for Next.js projects: ${chalk.magenta(
+ )} framework, but Storybook provides a framework package specifically for Next.js projects: ${picocolors.magenta(
'@storybook/nextjs'
)}.
This package provides a better, out of the box experience for Next.js users, however it is only compatible with the Webpack 5 builder, so we can't automigrate for you, as you are using the Vite builder. If you switch this project to use Webpack 5 and rerun this migration, we can update your project.
- If you are interested in using this package, see: ${chalk.yellow(
+ If you are interested in using this package, see: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md'
)}
`;
} else if (frameworkPackage === '@storybook/nextjs') {
disclaimer = dedent`\n\n
- The ${chalk.magenta(
+ The ${picocolors.magenta(
'@storybook/nextjs'
- )} package provides great user experience for Next.js users, and we highly recommend you to read more about it at ${chalk.yellow(
+ )} package provides great user experience for Next.js users, and we highly recommend you to read more about it at ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md'
)}
`;
@@ -365,31 +375,33 @@ export const newFrameworks: Fix = {
if (metaFramework === 'sveltekit') {
if (frameworkPackage === '@storybook/svelte-webpack5') {
disclaimer = dedent`\n\n
- ${chalk.bold('Important')}: We've detected you are using Storybook in a SvelteKit project.
+ ${picocolors.bold(
+ 'Important'
+ )}: We've detected you are using Storybook in a SvelteKit project.
- This migration is set to update your project to use the ${chalk.magenta(
+ This migration is set to update your project to use the ${picocolors.magenta(
'@storybook/svelte-webpack5'
- )} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${chalk.magenta(
+ )} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${picocolors.magenta(
'@storybook/sveltekit'
)}.
This package provides a better experience for SvelteKit users, however it is only compatible with the Vite builder, so we can't automigrate for you, as you are using the Webpack builder.
- If you are interested in using this package, see: ${chalk.yellow(
+ If you are interested in using this package, see: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md'
)}
`;
} else {
- migrationSteps += `- Remove the ${chalk.yellow(
+ migrationSteps += `- Remove the ${picocolors.yellow(
`${renderer}Options`
- )} field from ${chalk.blue(mainConfigPath)}.
- More info: ${chalk.yellow(
+ )} field from ${picocolors.blue(mainConfigPath)}.
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-uses-vite-config-automatically'
)}\n`;
disclaimer = dedent`\n\n
- The ${chalk.magenta(
+ The ${picocolors.magenta(
'@storybook/sveltekit'
- )} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${chalk.yellow(
+ )} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md'
)}
`;
@@ -401,14 +413,14 @@ export const newFrameworks: Fix = {
Storybook 7 introduced the concept of frameworks, which abstracts configuration for renderers (e.g. React, Vue), builders (e.g. Webpack, Vite) and defaults to make integrations easier.
- Your project should be updated to use Storybook's framework: ${chalk.magenta(
+ Your project should be updated to use Storybook's framework: ${picocolors.magenta(
frameworkPackage
)}. We can attempt to do this for you automatically.
Here are the steps this migration will do to migrate your project:
${migrationSteps}
- To learn more about the new framework format, see: ${chalk.yellow(
+ To learn more about the new framework format, see: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api'
)}${disclaimer}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/react-docgen.ts b/code/lib/cli/src/automigrate/fixes/react-docgen.ts
index 9359a96bacd9..ee883c512dda 100644
--- a/code/lib/cli/src/automigrate/fixes/react-docgen.ts
+++ b/code/lib/cli/src/automigrate/fixes/react-docgen.ts
@@ -1,7 +1,7 @@
import { dedent } from 'ts-dedent';
import { getRendererName, updateMainConfig } from '../helpers/mainConfigFile';
import type { Fix } from '../types';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
const logger = console;
@@ -46,25 +46,25 @@ export const reactDocgen: Fix = {
`;
} else {
return dedent`
- Since Storybook 8.0, ${chalk.cyan(
+ Since Storybook 8.0, ${picocolors.cyan(
'react-docgen'
- )} is now the default for generating component controls, replacing ${chalk.cyan(
+ )} is now the default for generating component controls, replacing ${picocolors.cyan(
'react-docgen-typescript'
)}.
This offers better performance and suits most cases.
However, for complex TypeScript types or specific type features, the generated controls might not be as precise.
For more on this change, check the migration guide:
- ${chalk.yellow(
+ ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default'
)}
For known "react-docgen" limitations, see:
- ${chalk.yellow('https://github.com/storybookjs/storybook/issues/26606')}
+ ${picocolors.yellow('https://github.com/storybookjs/storybook/issues/26606')}
- Press Y to revert to ${chalk.cyan('react-docgen-typescript')}, press N to use ${chalk.cyan(
- 'react-docgen'
- )}
+ Press Y to revert to ${picocolors.cyan(
+ 'react-docgen-typescript'
+ )}, press N to use ${picocolors.cyan('react-docgen')}
`;
}
},
diff --git a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts
index 3220bbeeec9d..67b0ce73c5db 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts
+++ b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts
@@ -4,7 +4,7 @@ import * as babel from '@babel/core';
import type { BabelFile, NodePath } from '@babel/core';
import { babelParse } from '@storybook/csf-tools';
import dedent from 'ts-dedent';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPath: string }> = {
id: 'remove-argtypes-regex',
@@ -35,7 +35,7 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa
},
prompt({ argTypesRegex, previewConfigPath }) {
return dedent`
- ${chalk.bold('Attention')}: We've detected that you're using argTypesRegex:
+ ${picocolors.bold('Attention')}: We've detected that you're using argTypesRegex:
${argTypesRegex.buildCodeFrameError(`${previewConfigPath}`).message}
@@ -48,12 +48,12 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa
(fn) function to mock your component's methods instead.
Use the following command to check for implied mocked actions in your play functions:
- ${chalk.cyan(
+ ${picocolors.cyan(
'npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"'
)}
Then, refer to our docs to migrate your play functions to Storybook 8:
- ${chalk.yellow(
+ ${picocolors.yellow(
'https://storybook.js.org/docs/8.0/essentials/actions#via-storybooktest-fn-spy-function'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts b/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts
index 64de15f9a4b4..97327507af6a 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts
+++ b/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import dedent from 'ts-dedent';
import { readFile } from 'fs-extra';
import type { Fix } from '../types';
@@ -46,16 +46,18 @@ export const removedGlobalClientAPIs: Fix = {
},
prompt({ usedAPIs, previewPath }) {
return dedent`
- ${chalk.bold(
- chalk.red('Attention')
+ ${picocolors.bold(
+ picocolors.red('Attention')
)}: We could not automatically make this change. You'll need to do it manually.
- The following APIs (used in "${chalk.yellow(previewPath)}") have been removed from Storybook:
+ The following APIs (used in "${picocolors.yellow(
+ previewPath
+ )}") have been removed from Storybook:
- ${usedAPIs.map((api) => `- ${chalk.cyan(api)}`).join('\n')}
+ ${usedAPIs.map((api) => `- ${picocolors.cyan(api)}`).join('\n')}
Please see the migration guide for more information:
- ${chalk.yellow(
+ ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-global-client-apis'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts
index 59ce82d3cbbe..e1a189e70a6c 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts
+++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import dedent from 'ts-dedent';
import type { Fix } from '../types';
import { getStorybookVersionSpecifier } from '../../helpers';
@@ -21,13 +21,13 @@ export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> =
},
prompt({ incompatiblePackages }) {
return dedent`
- ${chalk.bold(
+ ${picocolors.bold(
'Attention'
)}: We've detected that you're using the following packages which are known to be incompatible since Storybook 8:
- ${incompatiblePackages.map((name) => `- ${chalk.cyan(`${name}`)}`).join('\n')}
+ ${incompatiblePackages.map((name) => `- ${picocolors.cyan(`${name}`)}`).join('\n')}
- We will uninstall them for you and install ${chalk.cyan('@storybook/test')} instead.
+ We will uninstall them for you and install ${picocolors.cyan('@storybook/test')} instead.
Also, we can help you migrate your stories to use the new package.
`;
diff --git a/code/lib/cli/src/automigrate/fixes/sb-binary.ts b/code/lib/cli/src/automigrate/fixes/sb-binary.ts
index 53b583b8a58f..3d28edfcbd81 100644
--- a/code/lib/cli/src/automigrate/fixes/sb-binary.ts
+++ b/code/lib/cli/src/automigrate/fixes/sb-binary.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import type { Fix } from '../types';
import { getStorybookVersionSpecifier } from '../../helpers';
@@ -53,10 +53,10 @@ export const sbBinary: Fix = {
},
prompt({ storybookVersion, hasSbBinary, hasStorybookBinary }) {
- const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+ const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
const storybookBinaryMessage = !hasStorybookBinary
- ? `We've detected you are using ${sbFormatted} without Storybook's ${chalk.magenta(
+ ? `We've detected you are using ${sbFormatted} without Storybook's ${picocolors.magenta(
'storybook'
)} binary. Starting in Storybook 7.0, it has to be installed.`
: '';
@@ -69,7 +69,7 @@ export const sbBinary: Fix = {
${storybookBinaryMessage}
${extraMessage}
- More info: ${chalk.yellow(
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts b/code/lib/cli/src/automigrate/fixes/sb-scripts.ts
index aad1796b9a38..374c5c6745bd 100644
--- a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts
+++ b/code/lib/cli/src/automigrate/fixes/sb-scripts.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import semver from 'semver';
import type { PackageJson } from '@storybook/types';
@@ -98,16 +98,16 @@ export const sbScripts: Fix = {
},
prompt({ storybookVersion, storybookScripts }) {
- const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+ const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
const newScriptsMessage = Object.keys(storybookScripts).reduce((acc: string[], scriptKey) => {
acc.push(
[
- chalk.bold(scriptKey),
+ picocolors.bold(scriptKey),
'from:',
- chalk.cyan(storybookScripts[scriptKey].before),
+ picocolors.cyan(storybookScripts[scriptKey].before),
'to:',
- chalk.cyan(storybookScripts[scriptKey].after),
+ picocolors.cyan(storybookScripts[scriptKey].after),
].join('\n')
);
return acc;
@@ -115,16 +115,16 @@ export const sbScripts: Fix = {
return dedent`
We've detected you are using ${sbFormatted} with scripts from previous versions of Storybook.
- Starting in Storybook 7, the ${chalk.yellow('start-storybook')} and ${chalk.yellow(
+ Starting in Storybook 7, the ${picocolors.yellow('start-storybook')} and ${picocolors.yellow(
'build-storybook'
- )} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta(
+ )} binaries have changed to ${picocolors.magenta('storybook dev')} and ${picocolors.magenta(
'storybook build'
)} respectively.
In order to work with ${sbFormatted}, your storybook scripts have to be adjusted to use the binary. We can adjust them for you:
${newScriptsMessage.join('\n\n')}
- In case this migration did not cover all of your scripts, or you'd like more info: ${chalk.yellow(
+ In case this migration did not cover all of your scripts, or you'd like more info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts
index deba1b9df901..8045a696a46e 100644
--- a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts
+++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import dedent from 'ts-dedent';
import type { Fix } from '../types';
@@ -20,12 +20,12 @@ export const storyshotsMigration: Fix = {
},
prompt() {
return dedent`
- ${chalk.bold(
+ ${picocolors.bold(
'Attention'
)}: Storyshots is now officially deprecated, is no longer being maintained, and was removed in Storybook 8.
We recommend following the migration guide we've prepared to help you during this transition period:
- ${chalk.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')}
+ ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')}
`;
},
};
diff --git a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts b/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
index c5a9d4218bb5..434204ef0e86 100644
--- a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
+++ b/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
@@ -1,5 +1,5 @@
import { dedent } from 'ts-dedent';
-import { cyan, yellow } from 'chalk';
+import { cyan, yellow } from 'picocolors';
import { gt } from 'semver';
import type { JsPackageManager } from '@storybook/core-common';
import { isCorePackage } from '@storybook/core-common';
diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts
index 468cfacf3238..eaebf13301fa 100644
--- a/code/lib/cli/src/automigrate/fixes/vta.ts
+++ b/code/lib/cli/src/automigrate/fixes/vta.ts
@@ -1,5 +1,5 @@
import { dedent } from 'ts-dedent';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile';
import type { Fix } from '../types';
@@ -32,7 +32,7 @@ export const vta: Fix = {
return dedent`
New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team.
- Learn more: ${chalk.yellow('https://storybook.js.org/docs/writing-tests/visual-testing')}
+ Learn more: ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/visual-testing')}
Install Visual Tests addon in your project?
`;
diff --git a/code/lib/cli/src/automigrate/fixes/vue3.ts b/code/lib/cli/src/automigrate/fixes/vue3.ts
index f641b30373de..69038c5a17cd 100644
--- a/code/lib/cli/src/automigrate/fixes/vue3.ts
+++ b/code/lib/cli/src/automigrate/fixes/vue3.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import semver from 'semver';
import type { Fix } from '../types';
@@ -33,17 +33,17 @@ export const vue3: Fix = {
},
prompt({ vueVersion, storybookVersion }) {
- const vueFormatted = chalk.cyan(`Vue ${vueVersion}`);
- const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+ const vueFormatted = picocolors.cyan(`Vue ${vueVersion}`);
+ const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
return dedent`
We've detected you are running ${vueFormatted} with Storybook.
${sbFormatted} runs webpack4 by default, which is incompatible.
- In order to work with your version of Vue, we need to install Storybook's ${chalk.cyan(
+ In order to work with your version of Vue, we need to install Storybook's ${picocolors.cyan(
'webpack5 builder'
)}.
- More info: ${chalk.yellow(
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3-upgrade'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts
index dcebc1f28b8b..373096a3c214 100644
--- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts
@@ -34,8 +34,8 @@ vi.mock('prompts', () => {
};
});
-// mock chalk yellow and cyan
-vi.mock('chalk', () => {
+// mock picocolors yellow and cyan
+vi.mock('picocolors', () => {
return {
default: {
yellow: (str: string) => str,
diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts
index d899ee5df3dd..c2dae6bc632b 100644
--- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts
+++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts
@@ -17,7 +17,7 @@ import {
compilerNameToCoreCompiler,
} from '../../project_types';
import dedent from 'ts-dedent';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { add } from '../../add';
type Options = {
@@ -113,23 +113,23 @@ export const webpack5CompilerSetup = {
if (shouldRemoveSWCFlag) {
message.push(dedent`
We need to update your Storybook configuration for Webpack 5.
- The ${chalk.yellow('framework.options.builder.useSWC')} flag will be removed.`);
+ The ${picocolors.yellow('framework.options.builder.useSWC')} flag will be removed.`);
}
if (isNextJs) {
message.push(dedent`
Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself:\n
- - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow(
+ - If you have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow(
'babel.config.js'
)}) file in your project, Storybook will use Babel as the compiler.
- - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow(
+ - If you have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow(
'babel.config.js'
)}) file in your project and you have set
- ${chalk.yellow('experimental.forceSwcTransforms = true')} in your ${chalk.yellow(
- 'next.config.js'
- )} file,
+ ${picocolors.yellow(
+ 'experimental.forceSwcTransforms = true'
+ )} in your ${picocolors.yellow('next.config.js')} file,
Storybook will use SWC as the compiler.
- - If you don't have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow(
+ - If you don't have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow(
'babel.config.js'
)}) file in your project, Storybook will use SWC as the compiler.
`);
@@ -140,7 +140,7 @@ export const webpack5CompilerSetup = {
- SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n
In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.\n
After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
- You can find more information here: ${chalk.yellow(
+ You can find more information here: ${picocolors.yellow(
'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support'
)}
`);
@@ -150,7 +150,7 @@ export const webpack5CompilerSetup = {
We have detected, that you want to use SWC as the compiler for Webpack5.\n
In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.\n
After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
- You can find more information here: ${chalk.yellow(
+ You can find more information here: ${picocolors.yellow(
'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support'
)}
`);
diff --git a/code/lib/cli/src/automigrate/fixes/webpack5.ts b/code/lib/cli/src/automigrate/fixes/webpack5.ts
index a2072be41eb9..734c22afb23d 100644
--- a/code/lib/cli/src/automigrate/fixes/webpack5.ts
+++ b/code/lib/cli/src/automigrate/fixes/webpack5.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import semver from 'semver';
import type { Fix } from '../types';
@@ -42,17 +42,17 @@ export const webpack5 = {
},
prompt({ webpackVersion }) {
- const webpackFormatted = chalk.cyan(`webpack ${webpackVersion}`);
+ const webpackFormatted = picocolors.cyan(`webpack ${webpackVersion}`);
return dedent`
We've detected you're running ${webpackFormatted}.
Your Storybook's main.js files specifies webpack4, which is incompatible.
- To run Storybook in webpack5-mode, we can install Storybook's ${chalk.cyan(
+ To run Storybook in webpack5-mode, we can install Storybook's ${picocolors.cyan(
'@storybook/builder-webpack5'
)} for you.
- More info: ${chalk.yellow(
+ More info: ${picocolors.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build'
)}
`;
diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.ts
index e241f05858ab..aa0114b5a6ff 100644
--- a/code/lib/cli/src/automigrate/fixes/wrap-require.ts
+++ b/code/lib/cli/src/automigrate/fixes/wrap-require.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';
import { readConfig } from '@storybook/csf-tools';
import type { Fix } from '../types';
@@ -48,7 +48,7 @@ export const wrapRequire: Fix = {
},
prompt({ storybookVersion, isStorybookInMonorepo }) {
- const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+ const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
return dedent`We have detected that you're using ${sbFormatted} in a ${
isStorybookInMonorepo ? 'monorepo' : 'PnP'
diff --git a/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts b/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts
index a350b23fd82b..72aec1db8336 100644
--- a/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts
+++ b/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import semver from 'semver';
import dedent from 'ts-dedent';
import type { StorybookConfigRaw } from '@storybook/types';
@@ -20,11 +20,11 @@ export const checkWebpack5Builder = async ({
To upgrade to the latest stable release, run this from your project directory:
- ${chalk.cyan('npx storybook@latest upgrade')}
+ ${picocolors.cyan('npx storybook@latest upgrade')}
To upgrade to the latest pre-release, run this from your project directory:
- ${chalk.cyan('npx storybook@next upgrade')}
+ ${picocolors.cyan('npx storybook@next upgrade')}
`.trim()
);
return null;
diff --git a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts b/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts
index 7f238a4f5dbd..f74ca37ec216 100644
--- a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts
+++ b/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts
@@ -2,7 +2,7 @@ import fse, { readFile, readJson, writeJson } from 'fs-extra';
import { dedent } from 'ts-dedent';
import detectIndent from 'detect-indent';
import prompts from 'prompts';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { readConfig, writeConfig } from '@storybook/csf-tools';
import type { JsPackageManager } from '@storybook/core-common';
@@ -95,7 +95,7 @@ export const suggestESLintPlugin = async (): Promise => {
type: 'confirm',
name: 'shouldInstall',
message: dedent`
- We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${chalk.yellow(
+ We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${picocolors.yellow(
'https://github.com/storybookjs/eslint-plugin-storybook#readme'
)}
diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts
index e0f708543bef..71d4b12ab0da 100644
--- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts
+++ b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import boxen from 'boxen';
import dedent from 'ts-dedent';
import { type InstallationMetadata } from '@storybook/core-common';
@@ -15,34 +15,36 @@ function getGlossaryMessages(
) {
const messages = [];
if (fixSummary.succeeded.length > 0) {
- messages.push(chalk.bold('Successful migrations:'));
- messages.push(fixSummary.succeeded.map((m) => chalk.green(m)).join(', '));
+ messages.push(picocolors.bold('Successful migrations:'));
+ messages.push(fixSummary.succeeded.map((m) => picocolors.green(m)).join(', '));
}
if (Object.keys(fixSummary.failed).length > 0) {
- messages.push(chalk.bold('Failed migrations:'));
+ messages.push(picocolors.bold('Failed migrations:'));
messages.push(
Object.entries(fixSummary.failed)
.map(([id, error]) => {
- return `${chalk.redBright(id)}:\n${error}`;
+ return `${picocolors.redBright(id)}:\n${error}`;
})
.join('\n')
);
- messages.push(`You can find the full logs in ${chalk.cyan(logFile)}`);
+ messages.push(`You can find the full logs in ${picocolors.cyan(logFile)}`);
}
if (fixSummary.manual.length > 0) {
- messages.push(chalk.bold('Manual migrations:'));
+ messages.push(picocolors.bold('Manual migrations:'));
messages.push(
fixSummary.manual
- .map((m) => (fixResults[m] === FixStatus.MANUAL_SUCCEEDED ? chalk.green(m) : chalk.blue(m)))
+ .map((m) =>
+ fixResults[m] === FixStatus.MANUAL_SUCCEEDED ? picocolors.green(m) : picocolors.blue(m)
+ )
.join(', ')
);
}
if (fixSummary.skipped.length > 0) {
- messages.push(chalk.bold('Skipped migrations:'));
- messages.push(fixSummary.skipped.map((m) => chalk.cyan(m)).join(', '));
+ messages.push(picocolors.bold('Skipped migrations:'));
+ messages.push(fixSummary.skipped.map((m) => picocolors.cyan(m)).join(', '));
}
return messages;
@@ -62,16 +64,16 @@ export function getMigrationSummary({
const messages = [];
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(
+ messages.push(dedent`If you'd like to run the migrations again, you can do so by running '${picocolors.cyan(
'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.
- Please check the changelog and migration guide for manual migrations and more information: ${chalk.yellow(
+ Please check the changelog and migration guide for manual migrations and more information: ${picocolors.yellow(
'https://storybook.js.org/docs/8.0/migration-guide'
)}
- And reach out on Discord if you need help: ${chalk.yellow('https://discord.gg/storybook')}
+ And reach out on Discord if you need help: ${picocolors.yellow('https://discord.gg/storybook')}
`);
const hasNoFixes = Object.values(fixResults).every((r) => r === FixStatus.UNNECESSARY);
diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
index 11a13c127e0e..bd0152d9eca5 100644
--- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
+++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
@@ -9,7 +9,7 @@ import {
import type { StorybookConfigRaw, StorybookConfig } from '@storybook/types';
import type { ConfigFile } from '@storybook/csf-tools';
import { readConfig, writeConfig as writeConfigFile } from '@storybook/csf-tools';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import dedent from 'ts-dedent';
import path from 'path';
import type { JsPackageManager } from '@storybook/core-common';
@@ -137,7 +137,7 @@ export const getStorybookData = async ({
mainConfig = (await loadMainConfig({ configDir, noCache: true })) as StorybookConfigRaw;
} catch (err) {
throw new Error(
- dedent`Unable to find or evaluate ${chalk.blue(mainConfigPath)}: ${String(err)}`
+ dedent`Unable to find or evaluate ${picocolors.blue(mainConfigPath)}: ${String(err)}`
);
}
@@ -178,13 +178,13 @@ export const updateMainConfig = async (
}
} catch (e) {
logger.info(
- `❌ The migration failed to update your ${chalk.blue(
+ `❌ The migration failed to update your ${picocolors.blue(
mainConfigPath
)} on your behalf because of the following error:
${e}\n`
);
logger.info(
- `⚠️ Storybook automigrations are based on AST parsing and it's possible that your ${chalk.blue(
+ `⚠️ Storybook automigrations are based on AST parsing and it's possible that your ${picocolors.blue(
mainConfigPath
)} file contains a non-standard format (e.g. your export is not an object) or that there was an error when parsing dynamic values (e.g. "require" calls, or usage of environment variables). When your main config is non-standard, automigrations are unfortunately not possible. Please follow the instructions given previously and follow the documentation to make the updates manually.`
);
diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts
index c5353602dbaa..153ae14198f0 100644
--- a/code/lib/cli/src/automigrate/index.ts
+++ b/code/lib/cli/src/automigrate/index.ts
@@ -1,5 +1,5 @@
import prompts from 'prompts';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import boxen from 'boxen';
import { createWriteStream, move, remove } from 'fs-extra';
import { join } from 'path';
@@ -60,7 +60,7 @@ const cleanup = () => {
const logAvailableMigrations = () => {
const availableFixes = allFixes
- .map((f) => chalk.yellow(f.id))
+ .map((f) => picocolors.yellow(f.id))
.map((x) => `- ${x}`)
.join('\n');
@@ -153,7 +153,7 @@ export const automigrate = async ({
const fixes: Fix[] = fixId ? selectedFixes.filter((f) => f.id === fixId) : selectedFixes;
if (fixId && fixes.length === 0) {
- logger.info(`📭 No migrations found for ${chalk.magenta(fixId)}.`);
+ logger.info(`📭 No migrations found for ${picocolors.magenta(fixId)}.`);
logAvailableMigrations();
return null;
}
@@ -264,7 +264,7 @@ export async function runFixes({
});
}
} catch (error) {
- logger.info(`⚠️ failed to check fix ${chalk.bold(f.id)}`);
+ logger.info(`⚠️ failed to check fix ${picocolors.bold(f.id)}`);
if (error instanceof Error) {
logger.error(`\n${error.stack}`);
fixSummary.failed[f.id] = error.message;
@@ -276,7 +276,7 @@ export async function runFixes({
const promptType: Prompt =
typeof f.promptType === 'function' ? await f.promptType(result) : f.promptType ?? 'auto';
- logger.info(`\n🔎 found a '${chalk.cyan(f.id)}' migration:`);
+ logger.info(`\n🔎 found a '${picocolors.cyan(f.id)}' migration:`);
const message = f.prompt(result);
const getTitle = () => {
@@ -341,7 +341,9 @@ export async function runFixes({
{
type: 'confirm',
name: 'fix',
- message: `Do you want to run the '${chalk.cyan(f.id)}' migration on your project?`,
+ message: `Do you want to run the '${picocolors.cyan(
+ f.id
+ )}' migration on your project?`,
initial: f.promptDefaultValue ?? true,
},
{
@@ -382,7 +384,7 @@ export async function runFixes({
mainConfigPath,
skipInstall,
});
- logger.info(`✅ ran ${chalk.cyan(f.id)} migration`);
+ logger.info(`✅ ran ${picocolors.cyan(f.id)} migration`);
fixResults[f.id] = FixStatus.SUCCEEDED;
fixSummary.succeeded.push(f.id);
@@ -391,7 +393,7 @@ export async function runFixes({
fixSummary.failed[f.id] =
error instanceof Error ? error.message : 'Failed to run migration';
- logger.info(`❌ error when running ${chalk.cyan(f.id)} migration`);
+ logger.info(`❌ error when running ${picocolors.cyan(f.id)} migration`);
logger.info(error);
logger.info();
}
diff --git a/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts b/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts
index 272313300728..a447ff97eacf 100644
--- a/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts
+++ b/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { frameworkPackages, rendererPackages } from '@storybook/core-common';
import type { InstallationMetadata } from '@storybook/core-common';
import { hasMultipleVersions } from './hasMultipleVersions';
@@ -67,9 +67,9 @@ export function getDuplicatedDepsWarnings(
const hasMultipleMajorVersions = hasMultipleVersions(packageVersions);
if (disallowList.includes(dep) && hasMultipleMajorVersions) {
- acc.critical.push(`${chalk.redBright(dep)}:\n${packageVersions.join(', ')}`);
+ acc.critical.push(`${picocolors.redBright(dep)}:\n${packageVersions.join(', ')}`);
} else {
- acc.trivial.push(`${chalk.hex('#ff9800')(dep)}:\n${packageVersions.join(', ')}`);
+ acc.trivial.push(`${picocolors.hex('#ff9800')(dep)}:\n${packageVersions.join(', ')}`);
}
return acc;
@@ -83,7 +83,7 @@ export function getDuplicatedDepsWarnings(
if (critical.length > 0) {
messages.push(
- `${chalk.bold(
+ `${picocolors.bold(
'Critical:'
)} The following dependencies are duplicated and WILL cause unexpected behavior:`
);
@@ -92,7 +92,7 @@ export function getDuplicatedDepsWarnings(
if (trivial.length > 0) {
messages.push(
- `${chalk.bold(
+ `${picocolors.bold(
'Attention:'
)} The following dependencies are duplicated which might cause unexpected behavior:`
);
@@ -101,14 +101,14 @@ export function getDuplicatedDepsWarnings(
messages.push(
'\n',
- `Please try de-duplicating these dependencies by running ${chalk.cyan(
+ `Please try de-duplicating these dependencies by running ${picocolors.cyan(
`${installationMetadata.dedupeCommand}`
)}`
);
messages.push(
'\n',
- `You can find more information for a given dependency by running ${chalk.cyan(
+ `You can find more information for a given dependency by running ${picocolors.cyan(
`${installationMetadata.infoCommand} `
)}`
);
diff --git a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.test.ts b/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.test.ts
index 5d5a2d8a6e87..f38326e4dd70 100644
--- a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.test.ts
+++ b/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.test.ts
@@ -7,7 +7,7 @@ import {
} from './getIncompatibleStorybookPackages';
import type { JsPackageManager } from '@storybook/core-common';
-vi.mock('chalk', () => {
+vi.mock('picocolors', () => {
return {
default: {
yellow: (str: string) => str,
diff --git a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts b/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts
index 09f0c40d5bb9..6fe2e5bb3797 100644
--- a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts
+++ b/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts
@@ -1,5 +1,5 @@
/* eslint-disable local-rules/no-uncategorized-errors */
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import semver from 'semver';
import type { JsPackageManager } from '@storybook/core-common';
import { JsPackageManagerFactory, versions as storybookCorePackages } from '@storybook/core-common';
@@ -103,15 +103,15 @@ export const getIncompatiblePackagesSummary = (
if (incompatiblePackages.length > 0) {
summaryMessage.push(
- `The following packages are incompatible with Storybook ${chalk.bold(
+ `The following packages are incompatible with Storybook ${picocolors.bold(
currentStorybookVersion
)} as they depend on different major versions of Storybook packages:`
);
incompatiblePackages.forEach(
({ packageName: addonName, packageVersion: addonVersion, homepage, availableUpdate }) => {
- const packageDescription = `${chalk.cyan(addonName)}@${chalk.cyan(addonVersion)}`;
+ const packageDescription = `${picocolors.cyan(addonName)}@${picocolors.cyan(addonVersion)}`;
const updateMessage = availableUpdate ? ` (${availableUpdate} available!)` : '';
- const packageRepo = homepage ? `\n Repo: ${chalk.yellow(homepage)}` : '';
+ const packageRepo = homepage ? `\n Repo: ${picocolors.yellow(homepage)}` : '';
summaryMessage.push(`- ${packageDescription}${updateMessage}${packageRepo}`);
}
@@ -121,7 +121,7 @@ export const getIncompatiblePackagesSummary = (
'\n',
'Please consider updating your packages or contacting the maintainers for compatibility details.',
'For more on Storybook 8 compatibility, see the linked GitHub issue:',
- chalk.yellow('https://github.com/storybookjs/storybook/issues/26031')
+ picocolors.yellow('https://github.com/storybookjs/storybook/issues/26031')
);
}
diff --git a/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts b/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts
index f8c9e0874a0f..11545df30184 100644
--- a/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts
+++ b/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import semver from 'semver';
import { frameworkPackages, versions as storybookCorePackages } from '@storybook/core-common';
import type { InstallationMetadata } from '@storybook/core-common';
@@ -40,7 +40,7 @@ export function getMismatchingVersionsWarnings(
}
messages.push(
- `${chalk.bold(
+ `${picocolors.bold(
'Attention:'
)} There seems to be a mismatch between your Storybook package versions. This can result in a broken Storybook installation.`
);
@@ -56,9 +56,9 @@ export function getMismatchingVersionsWarnings(
}
messages.push(
- `The version of your storybook core packages should align with ${chalk.yellow(
+ `The version of your storybook core packages should align with ${picocolors.yellow(
versionToCompare
- )} (from the ${chalk.cyan(packageToDisplay)} package) or higher.`
+ )} (from the ${picocolors.cyan(packageToDisplay)} package) or higher.`
);
const filteredDependencies = Object.entries(installationMetadata?.dependencies || []).filter(
@@ -79,7 +79,7 @@ export function getMismatchingVersionsWarnings(
filteredDependencies
.map(
([name, dep]) =>
- `${chalk.hex('#ff9800')(name)}: ${dep[0].version} ${
+ `${picocolors.hex('#ff9800')(name)}: ${dep[0].version} ${
allDependencies?.[name] ? packageJsonSuffix : ''
}`
)
@@ -92,11 +92,11 @@ export function getMismatchingVersionsWarnings(
}
messages.push(
- `You can run ${chalk.cyan(
+ `You can run ${picocolors.cyan(
'npx storybook@latest upgrade'
)} to upgrade all of your Storybook packages to the latest version.
- Alternatively you can try manually changing the versions to match in your package.json. We also recommend regenerating your lockfile, or running the following command to possibly deduplicate your Storybook package versions: ${chalk.cyan(
+ Alternatively you can try manually changing the versions to match in your package.json. We also recommend regenerating your lockfile, or running the following command to possibly deduplicate your Storybook package versions: ${picocolors.cyan(
installationMetadata?.dedupeCommand
)}`
);
diff --git a/code/lib/cli/src/doctor/index.ts b/code/lib/cli/src/doctor/index.ts
index 22e47ce7d32c..ef1e23bdeb24 100644
--- a/code/lib/cli/src/doctor/index.ts
+++ b/code/lib/cli/src/doctor/index.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import boxen from 'boxen';
import { createWriteStream, move, remove } from 'fs-extra';
import dedent from 'ts-dedent';
@@ -82,7 +82,7 @@ export const doctor = async ({
} catch (err: any) {
if (err.message.includes('No configuration files have been found')) {
logger.info(
- dedent`[Storybook doctor] Could not find or evaluate your Storybook main.js config directory at ${chalk.blue(
+ dedent`[Storybook doctor] Could not find or evaluate your Storybook main.js config directory at ${picocolors.blue(
userSpecifiedConfigDir || '.storybook'
)} so the doctor command cannot proceed. You might be running this command in a monorepo or a non-standard project structure. If that is the case, please rerun this command by specifying the path to your Storybook config directory via the --config-dir option.`
);
@@ -140,7 +140,7 @@ export const doctor = async ({
}
}
- const commandMessage = `You can always recheck the health of your project by running:\n${chalk.cyan(
+ const commandMessage = `You can always recheck the health of your project by running:\n${picocolors.cyan(
'npx storybook doctor'
)}`;
logger.info();
@@ -149,7 +149,7 @@ export const doctor = async ({
logger.info(commandMessage);
logger.info();
- logger.info(`Full logs are available in ${chalk.cyan(LOG_FILE_PATH)}`);
+ logger.info(`Full logs are available in ${picocolors.cyan(LOG_FILE_PATH)}`);
await move(TEMP_LOG_FILE_PATH, join(process.cwd(), LOG_FILE_NAME), { overwrite: true });
} else {
diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts
index a1a3d83ddfbb..3e3b4c755629 100644
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@@ -1,5 +1,5 @@
import program from 'commander';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import envinfo from 'envinfo';
import leven from 'leven';
import { sync as readUpSync } from 'read-pkg-up';
@@ -114,7 +114,7 @@ command('upgrade')
command('info')
.description('Prints debugging information about the local environment')
.action(async () => {
- consoleLogger.log(chalk.bold('\nStorybook Environment Info:'));
+ consoleLogger.log(picocolors.bold('\nStorybook Environment Info:'));
const pkgManager = await JsPackageManagerFactory.getPackageManager();
const activePackageManager = pkgManager.type.replace(/\d/, ''); // 'yarn1' -> 'yarn'
const output = await envinfo.run({
@@ -128,7 +128,7 @@ command('info')
consoleLogger.log(
output.replace(
activePackageManagerLine,
- chalk.bold(`${activePackageManagerLine} <----- active`)
+ picocolors.bold(`${activePackageManagerLine} <----- active`)
)
);
});
@@ -254,7 +254,7 @@ command('dev')
)
.action(async (options) => {
logger.setLevel(program.loglevel);
- consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));
+ consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}`) + picocolors.reset('\n'));
// The key is the field created in `options` variable for
// each command line argument. Value is the env variable.
@@ -294,7 +294,7 @@ command('build')
.action(async (options) => {
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
logger.setLevel(program.loglevel);
- consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`));
+ consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}\n`));
// The key is the field created in `options` variable for
// each command line argument. Value is the env variable.
diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts
index 5c8351cca7b0..b665c52619d6 100644
--- a/code/lib/cli/src/helpers.ts
+++ b/code/lib/cli/src/helpers.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import fs from 'fs';
import fse from 'fs-extra';
import path, { join } from 'path';
@@ -33,7 +33,7 @@ export function readFileAsJson(jsonPath: string, allowComments?: boolean) {
try {
return JSON.parse(jsonContent);
} catch (e) {
- logger.error(chalk.red(`Invalid json in file: ${filePath}`));
+ logger.error(picocolors.red(`Invalid json in file: ${filePath}`));
throw e;
}
}
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index dabe81cb2fcb..8c764c778851 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -1,6 +1,6 @@
import { appendFile, readFile } from 'fs/promises';
import findUp from 'find-up';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import prompts from 'prompts';
import { telemetry } from '@storybook/telemetry';
import { withTelemetry } from '@storybook/core-server';
@@ -184,7 +184,7 @@ const installStorybook = async (
return await runGenerator();
} catch (err: any) {
if (err?.message !== 'Canceled by the user' && err?.stack) {
- logger.error(`\n ${chalk.red(err.stack)}`);
+ logger.error(`\n ${picocolors.red(err.stack)}`);
}
throw new HandledError(err);
}
@@ -249,15 +249,15 @@ export async function doInitiate(options: CommandOptions): Promise<
const borderColor = isOutdated ? '#FC521F' : '#F1618C';
const messages = {
- welcome: `Adding Storybook version ${chalk.bold(currentVersion)} to your project..`,
- notLatest: chalk.red(dedent`
- This version is behind the latest release, which is: ${chalk.bold(latestVersion)}!
+ welcome: `Adding Storybook version ${picocolors.bold(currentVersion)} to your project..`,
+ notLatest: picocolors.red(dedent`
+ This version is behind the latest release, which is: ${picocolors.bold(latestVersion)}!
You likely ran the init command through npx, which can use a locally cached version, to get the latest please run:
- ${chalk.bold('npx storybook@latest init')}
+ ${picocolors.bold('npx storybook@latest init')}
You may want to CTRL+C to stop, and run with the latest version instead.
`),
- prelease: chalk.yellow('This is a pre-release version.'),
+ prelease: picocolors.yellow('This is a pre-release version.'),
};
logger.log(
@@ -353,22 +353,22 @@ export async function doInitiate(options: CommandOptions): Promise<
if (projectType === ProjectType.REACT_NATIVE) {
logger.log(dedent`
- ${chalk.yellow('NOTE: installation is not 100% automated.')}
+ ${picocolors.yellow('NOTE: installation is not 100% automated.')}
To run Storybook, you will need to:
1. Replace the contents of your app entry with the following
- ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')}
+ ${picocolors.inverse(' ' + "export {default} from './.storybook';" + ' ')}
2. Enable transformer.unstable_allowRequireContext in your metro config
For a more detailed guide go to:
- ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')}
+ ${picocolors.cyan('https://github.com/storybookjs/react-native#existing-project')}
Then to run your Storybook, type:
- ${chalk.inverse(' ' + packageManager.getRunCommand('start') + ' ')}
+ ${picocolors.inverse(' ' + packageManager.getRunCommand('start') + ' ')}
`);
@@ -393,12 +393,14 @@ export async function doInitiate(options: CommandOptions): Promise<
boxen(
dedent`
Storybook was successfully installed in your project! 🎉
- To run Storybook manually, run ${chalk.yellow(
- chalk.bold(storybookCommand)
+ To run Storybook manually, run ${picocolors.yellow(
+ picocolors.bold(storybookCommand)
)}. CTRL+C to stop.
- Wanna know more about Storybook? Check out ${chalk.cyan('https://storybook.js.org/')}
- Having trouble or want to chat? Join us at ${chalk.cyan('https://discord.gg/storybook/')}
+ Wanna know more about Storybook? Check out ${picocolors.cyan('https://storybook.js.org/')}
+ Having trouble or want to chat? Join us at ${picocolors.cyan(
+ 'https://discord.gg/storybook/'
+ )}
`,
{ borderStyle: 'round', padding: 1, borderColor: '#F1618C' }
)
diff --git a/code/lib/cli/src/link.ts b/code/lib/cli/src/link.ts
index 3af08643874b..4e242cdb12af 100644
--- a/code/lib/cli/src/link.ts
+++ b/code/lib/cli/src/link.ts
@@ -2,7 +2,7 @@ import fse from 'fs-extra';
import path from 'path';
import { sync as spawnSync, spawn as spawnAsync } from 'cross-spawn';
import { logger } from '@storybook/node-logger';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
type ExecOptions = Parameters[2];
@@ -44,7 +44,7 @@ export const exec = async (
if (code === 0) {
resolve(undefined);
} else {
- logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
+ logger.error(picocolors.red(`An error occurred while executing: \`${command}\``));
if (errorMessage) {
logger.info(errorMessage);
}
diff --git a/code/lib/cli/src/sandbox.ts b/code/lib/cli/src/sandbox.ts
index 621d62976c10..08809c31cd37 100644
--- a/code/lib/cli/src/sandbox.ts
+++ b/code/lib/cli/src/sandbox.ts
@@ -1,6 +1,6 @@
import prompts from 'prompts';
import path from 'path';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import boxen from 'boxen';
import { dedent } from 'ts-dedent';
import { downloadTemplate } from 'giget';
@@ -56,18 +56,18 @@ export const sandbox = async ({
const branch = isPrerelease ? 'next' : 'main';
const messages = {
- welcome: `Creating a Storybook ${chalk.bold(currentVersion)} sandbox..`,
- notLatest: chalk.red(dedent`
- This version is behind the latest release, which is: ${chalk.bold(latestVersion)}!
+ welcome: `Creating a Storybook ${picocolors.bold(currentVersion)} sandbox..`,
+ notLatest: picocolors.red(dedent`
+ This version is behind the latest release, which is: ${picocolors.bold(latestVersion)}!
You likely ran the init command through npx, which can use a locally cached version, to get the latest please run:
- ${chalk.bold('npx storybook@latest sandbox')}
+ ${picocolors.bold('npx storybook@latest sandbox')}
You may want to CTRL+C to stop, and run with the latest version instead.
`),
- longInitTime: chalk.yellow(
+ longInitTime: picocolors.yellow(
'The creation of the sandbox will take longer, because we will need to run init.'
),
- prerelease: chalk.yellow('This is a pre-release version.'),
+ prerelease: picocolors.yellow('This is a pre-release version.'),
};
logger.log(
@@ -114,12 +114,12 @@ export const sandbox = async ({
dedent`
🔎 You filtered out all templates. 🔍
- After filtering all the templates with "${chalk.yellow(
+ After filtering all the templates with "${picocolors.yellow(
filterValue
)}", we found no results. Please try again with a different filter.
Available templates:
- ${keys.map((key) => chalk.blue`- ${key}`).join('\n')}
+ ${keys.map((key) => picocolors.blue`- ${key}`).join('\n')}
`.trim(),
{ borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any
)
@@ -133,9 +133,9 @@ export const sandbox = async ({
logger.info(
boxen(
dedent`
- 🤗 Welcome to ${chalk.yellow('sb sandbox')}! 🤗
+ 🤗 Welcome to ${picocolors.yellow('sb sandbox')}! 🤗
- Create a ${chalk.green('new project')} to minimally reproduce Storybook issues.
+ Create a ${picocolors.green('new project')} to minimally reproduce Storybook issues.
1. select an environment that most closely matches your project setup.
2. select a location for the reproduction, outside of your project.
@@ -198,7 +198,7 @@ export const sandbox = async ({
logger.info(`🏃 Adding ${selectedConfig.name} into ${templateDestination}`);
- logger.log(`📦 Downloading sandbox template (${chalk.bold(downloadType)})...`);
+ logger.log(`📦 Downloading sandbox template (${picocolors.bold(downloadType)})...`);
try {
// Download the sandbox based on subfolder "after-storybook" and selected branch
const gitPath = `github:storybookjs/sandboxes/${templateId}/${downloadType}#${branch}`;
@@ -208,9 +208,9 @@ export const sandbox = async ({
});
// throw an error if templateDestination is an empty directory using fs-extra
if ((await readdir(templateDestination)).length === 0) {
- const selected = chalk.yellow(templateId);
+ const selected = picocolors.yellow(templateId);
throw new Error(dedent`
- Template downloaded from ${chalk.blue(gitPath)} is empty.
+ Template downloaded from ${picocolors.blue(gitPath)} is empty.
Are you use it exists? Or did you want to set ${selected} to inDevelopment first?
`);
}
@@ -236,23 +236,23 @@ export const sandbox = async ({
}
const initMessage = init
- ? chalk.yellow(dedent`
+ ? picocolors.yellow(dedent`
yarn install
yarn storybook
`)
- : `Recreate your setup, then ${chalk.yellow(`npx storybook@latest init`)}`;
+ : `Recreate your setup, then ${picocolors.yellow(`npx storybook@latest init`)}`;
logger.info(
boxen(
dedent`
🎉 Your Storybook reproduction project is ready to use! 🎉
- ${chalk.yellow(`cd ${selectedDirectory}`)}
+ ${picocolors.yellow(`cd ${selectedDirectory}`)}
${initMessage}
Once you've recreated the problem you're experiencing, please:
- 1. Document any additional steps in ${chalk.cyan('README.md')}
+ 1. Document any additional steps in ${picocolors.cyan('README.md')}
2. Publish the repository to github
3. Link to the repro repository in your issue
diff --git a/code/lib/cli/src/scaffold-new-project.ts b/code/lib/cli/src/scaffold-new-project.ts
index 16ca8b7d444c..49d79e720b6a 100644
--- a/code/lib/cli/src/scaffold-new-project.ts
+++ b/code/lib/cli/src/scaffold-new-project.ts
@@ -1,5 +1,5 @@
import boxen from 'boxen';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import execa from 'execa';
import { readdirSync, remove } from 'fs-extra';
import prompts from 'prompts';
@@ -103,7 +103,7 @@ const packageManagerToCoercedName = (
const buildProjectDisplayNameForPrint = ({ displayName }: SupportedProject) => {
const { type, builder, language } = displayName;
- return `${chalk.bold.blue(type)} ${builder ? `+ ${builder} ` : ''}(${language})`;
+ return `${picocolors.bold.blue(type)} ${builder ? `+ ${builder} ` : ''}(${language})`;
};
/**
@@ -122,14 +122,14 @@ export const scaffoldNewProject = async (
dedent`
Would you like to generate a new project from the following list?
- ${chalk.bold('Note:')}
+ ${picocolors.bold('Note:')}
Storybook supports many more frameworks and bundlers than listed below. If you don't see your
preferred setup, you can still generate a project then rerun this command to add Storybook.
- ${chalk.bold('Press ^C at any time to quit.')}
+ ${picocolors.bold('Press ^C at any time to quit.')}
`,
{
- title: chalk.bold('🔎 Empty directory detected'),
+ title: picocolors.bold('🔎 Empty directory detected'),
padding: 1,
borderStyle: 'double',
borderColor: 'yellow',
@@ -167,7 +167,7 @@ export const scaffoldNewProject = async (
logger.line(1);
logger.plain(
- `Creating a new "${projectDisplayName}" project with ${chalk.bold(packageManagerName)}...`
+ `Creating a new "${projectDisplayName}" project with ${picocolors.bold(packageManagerName)}...`
);
logger.line(1);
@@ -203,12 +203,14 @@ export const scaffoldNewProject = async (
logger.plain(
boxen(
dedent`
- "${projectDisplayName}" project with ${chalk.bold(packageManagerName)} created successfully!
+ "${projectDisplayName}" project with ${picocolors.bold(
+ packageManagerName
+ )} created successfully!
Continuing with Storybook installation...
`,
{
- title: chalk.bold('✅ Success!'),
+ title: picocolors.bold('✅ Success!'),
padding: 1,
borderStyle: 'double',
borderColor: 'green',
diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts
index 204e24710c6b..507488b80981 100644
--- a/code/lib/cli/src/upgrade.ts
+++ b/code/lib/cli/src/upgrade.ts
@@ -10,7 +10,7 @@ import {
UpgradeStorybookUnknownCurrentVersionError,
} from '@storybook/core-events/server-errors';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import dedent from 'ts-dedent';
import boxen from 'boxen';
import type { JsPackageManager, PackageManagerName } from '@storybook/core-common';
@@ -165,17 +165,19 @@ export const doUpgrade = async ({
const borderColor = isCLIOutdated ? '#FC521F' : '#F1618C';
const messages = {
- welcome: `Upgrading Storybook from version ${chalk.bold(beforeVersion)} to version ${chalk.bold(
- currentCLIVersion
- )}..`,
- notLatest: chalk.red(dedent`
- This version is behind the latest release, which is: ${chalk.bold(latestCLIVersionOnNPM)}!
+ welcome: `Upgrading Storybook from version ${picocolors.bold(
+ beforeVersion
+ )} to version ${picocolors.bold(currentCLIVersion)}..`,
+ notLatest: picocolors.red(dedent`
+ This version is behind the latest release, which is: ${picocolors.bold(
+ latestCLIVersionOnNPM
+ )}!
You likely ran the upgrade command through npx, which can use a locally cached version, to upgrade to the latest version please run:
- ${chalk.bold('npx storybook@latest upgrade')}
+ ${picocolors.bold('npx storybook@latest upgrade')}
You may want to CTRL+C to stop, and run with the latest version instead.
`),
- prerelease: chalk.yellow('This is a pre-release version.'),
+ prerelease: picocolors.yellow('This is a pre-release version.'),
};
logger.plain(
@@ -246,7 +248,7 @@ export const doUpgrade = async ({
const upgradedDependencies = toUpgradedDependencies(packageJson.dependencies);
const upgradedDevDependencies = toUpgradedDependencies(packageJson.devDependencies);
- logger.info(`Updating dependencies in ${chalk.cyan('package.json')}..`);
+ logger.info(`Updating dependencies in ${picocolors.cyan('package.json')}..`);
if (upgradedDependencies.length > 0) {
await packageManager.addDependencies(
{ installAsDevDependencies: false, skipInstall: true, packageJson },
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index e92ee9948da7..aeb46590a1ea 100644
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@@ -50,7 +50,6 @@
"@storybook/types": "workspace:*",
"@yarnpkg/fslib": "2.10.3",
"@yarnpkg/libzip": "2.3.0",
- "chalk": "^4.1.0",
"cross-spawn": "^7.0.3",
"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0",
"esbuild-register": "^3.5.0",
@@ -63,6 +62,7 @@
"handlebars": "^4.7.7",
"lazy-universal-dotenv": "^4.0.0",
"node-fetch": "^2.0.0",
+ "picocolors": "^1.0.1",
"picomatch": "^2.3.0",
"pkg-dir": "^5.0.0",
"prettier-fallback": "npm:prettier@^3",
diff --git a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts
index 8f306850b032..ee748f66b604 100644
--- a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts
+++ b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { gt, satisfies } from 'semver';
import type { CommonOptions } from 'execa';
import { command as execaCommand, sync as execaCommandSync } from 'execa';
@@ -392,11 +392,11 @@ export abstract class JsPackageManager {
latest = await this.latestVersion(packageName, constraint);
} catch (e) {
if (current) {
- logger.warn(`\n ${chalk.yellow(String(e))}`);
+ logger.warn(`\n ${picocolors.yellow(String(e))}`);
return current;
}
- logger.error(`\n ${chalk.red(String(e))}`);
+ logger.error(`\n ${picocolors.red(String(e))}`);
throw new HandledError(e);
}
diff --git a/code/lib/core-common/src/utils/log-config.ts b/code/lib/core-common/src/utils/log-config.ts
index 5d50f0285298..aab43e9b29ec 100644
--- a/code/lib/core-common/src/utils/log-config.ts
+++ b/code/lib/core-common/src/utils/log-config.ts
@@ -1,6 +1,6 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
export function logConfig(caption: unknown, config: unknown) {
- console.log(chalk.cyan(caption));
+ console.log(picocolors.cyan(String(caption)));
console.dir(config, { depth: null });
}
diff --git a/code/lib/core-common/src/utils/log.ts b/code/lib/core-common/src/utils/log.ts
index 43119e616b24..3f7e8d51cb72 100644
--- a/code/lib/core-common/src/utils/log.ts
+++ b/code/lib/core-common/src/utils/log.ts
@@ -1,15 +1,15 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
const logger = console;
export const commandLog = (message: string) => {
- process.stdout.write(chalk.cyan(' • ') + message);
+ process.stdout.write(picocolors.cyan(' • ') + message);
// Need `void` to be able to use this function in a then of a Promise
return (errorMessage?: string | void, errorInfo?: string) => {
if (errorMessage) {
- process.stdout.write(`. ${chalk.red('✖')}\n`);
- logger.error(`\n ${chalk.red(errorMessage)}`);
+ process.stdout.write(`. ${picocolors.red('✖')}\n`);
+ logger.error(`\n ${picocolors.red(errorMessage)}`);
if (!errorInfo) {
return;
@@ -17,13 +17,13 @@ export const commandLog = (message: string) => {
const newErrorInfo = errorInfo
.split('\n')
- .map((line) => ` ${chalk.dim(line)}`)
+ .map((line) => ` ${picocolors.dim(line)}`)
.join('\n');
logger.error(`${newErrorInfo}\n`);
return;
}
- process.stdout.write(`. ${chalk.green('✓')}\n`);
+ process.stdout.write(`. ${picocolors.green('✓')}\n`);
};
};
@@ -56,7 +56,7 @@ export function codeLog(codeLines: string[], leftPadAmount?: number) {
.map((line) => {
const rightPadAmount = maxLength - line.length;
let newLine = line + getChars(' ', rightPadAmount);
- newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `);
+ newLine = getChars(' ', leftPadAmount || 2) + picocolors.inverse(` ${newLine} `);
return newLine;
})
.join('\n');
diff --git a/code/lib/core-common/src/utils/notify-telemetry.ts b/code/lib/core-common/src/utils/notify-telemetry.ts
index 53b291b4b6a8..38703a3f09fe 100644
--- a/code/lib/core-common/src/utils/notify-telemetry.ts
+++ b/code/lib/core-common/src/utils/notify-telemetry.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { cache } from './cache';
const TELEMETRY_KEY_NOTIFY_DATE = 'telemetry-notification-date';
@@ -18,14 +18,14 @@ export const notifyTelemetry = async () => {
cache.set(TELEMETRY_KEY_NOTIFY_DATE, Date.now().toString());
logger.log(
- `${chalk.magenta.bold(
- 'Attention'
+ `${picocolors.magenta(
+ picocolors.bold('Attention')
)}: Storybook now collects completely anonymous telemetry regarding usage.`
);
logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`);
logger.log(
`You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:`
);
- logger.log(chalk.cyan('https://storybook.js.org/telemetry'));
+ logger.log(picocolors.cyan('https://storybook.js.org/telemetry'));
logger.log();
};
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index 24fefcf9b258..0caf1250bbd1 100644
--- a/code/lib/core-events/package.json
+++ b/code/lib/core-events/package.json
@@ -82,7 +82,7 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
- "chalk": "^4.1.0",
+ "picocolors": "^1.0.1",
"typescript": "^5.3.2"
},
"publishConfig": {
diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts
index e6719945d3f6..7a0cd12522a3 100644
--- a/code/lib/core-events/src/errors/server-errors.ts
+++ b/code/lib/core-events/src/errors/server-errors.ts
@@ -1,4 +1,4 @@
-import { bold, gray, grey, white, yellow, underline } from 'chalk';
+import { bold, gray, white, yellow, underline, cyan } from 'picocolors';
import dedent from 'ts-dedent';
import { StorybookError } from './storybook-error';
@@ -421,11 +421,11 @@ export class MainFileESMOnlyImportError extends StorybookError {
if (this.data.line) {
message.push(
white(
- `In your ${yellow(this.data.location)} file, line ${bold.cyan(
- this.data.num
+ `In your ${yellow(this.data.location)} file, line ${bold(
+ cyan(this.data.num)
)} threw an error:`
),
- grey(this.data.line)
+ gray(this.data.line)
);
}
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index ae1462790348..222f42b04b22 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -79,7 +79,6 @@
"@types/pretty-hrtime": "^1.0.0",
"@types/semver": "^7.3.4",
"better-opn": "^3.0.2",
- "chalk": "^4.1.0",
"cli-table3": "^0.6.1",
"compression": "^1.7.4",
"detect-port": "^1.3.0",
@@ -89,6 +88,7 @@
"globby": "^14.0.1",
"lodash": "^4.17.21",
"open": "^8.4.0",
+ "picocolors": "^1.0.1",
"pretty-hrtime": "^1.0.3",
"prompts": "^2.4.0",
"read-pkg-up": "^7.0.1",
diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts
index f1f842eaea28..fb945e98bc9b 100644
--- a/code/lib/core-server/src/build-static.ts
+++ b/code/lib/core-server/src/build-static.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { copy, emptyDir, ensureDir } from 'fs-extra';
import { dirname, join, relative, resolve } from 'path';
import { global } from '@storybook/global';
@@ -36,7 +36,9 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
options.outputDir = resolve(options.outputDir);
options.configDir = resolve(options.configDir);
- logger.info(chalk`=> Cleaning outputDir: {cyan ${relative(process.cwd(), options.outputDir)}}`);
+ logger.info(
+ `=> Cleaning outputDir: ${picocolors.cyan(relative(process.cwd(), options.outputDir))}`
+ );
if (options.outputDir === '/') {
throw new Error("Won't remove directory '/'. Check your outputDir!");
}
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 487447d18f4f..9c9565545911 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -1,5 +1,5 @@
import path from 'path';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import fs from 'fs-extra';
import slash from 'slash';
import invariant from 'tiny-invariant';
@@ -131,7 +131,7 @@ export class StoryIndexGenerator {
if (files.length === 0) {
once.warn(
- `No story files found for the specified pattern: ${chalk.blue(
+ `No story files found for the specified pattern: ${picocolors.blue(
path.join(specifier.directory, specifier.files)
)}`
);
@@ -495,7 +495,7 @@ export class StoryIndexGenerator {
} catch (err) {
if (err && (err as { source: any }).source?.match(/mdast-util-mdx-jsx/g)) {
logger.warn(
- `💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${chalk.yellow(
+ `💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${picocolors.yellow(
'https://storybook.js.org/migration-guides/7.0'
)}`
);
diff --git a/code/lib/core-server/src/utils/copy-all-static-files.ts b/code/lib/core-server/src/utils/copy-all-static-files.ts
index 5b0fb5227353..d21b395ce772 100644
--- a/code/lib/core-server/src/utils/copy-all-static-files.ts
+++ b/code/lib/core-server/src/utils/copy-all-static-files.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import fs from 'fs-extra';
import { join, relative } from 'path';
import { logger } from '@storybook/node-logger';
@@ -16,9 +16,9 @@ export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDi
// we copy prebuild static files from node_modules/@storybook/manager & preview
if (!staticDir.includes('node_modules')) {
logger.info(
- chalk`=> Copying static files: {cyan ${print(staticDir)}} => {cyan ${print(
- targetDir
- )}}`
+ `=> Copying static files: ${picocolors.cyan(print(staticDir))} => ${picocolors.cyan(
+ print(targetDir)
+ )}`
);
}
@@ -61,7 +61,9 @@ export async function copyAllStaticFilesRelativeToMain(
const skipPaths = ['index.html', 'iframe.html'].map((f) => join(targetPath, f));
if (!from.includes('node_modules')) {
logger.info(
- chalk`=> Copying static files: {cyan ${print(from)}} at {cyan ${print(targetPath)}}`
+ `=> Copying static files: ${picocolors.cyan(print(from))} at ${picocolors.cyan(
+ print(targetPath)
+ )}`
);
}
await fs.copy(from, targetPath, {
diff --git a/code/lib/core-server/src/utils/output-startup-information.ts b/code/lib/core-server/src/utils/output-startup-information.ts
index bc4af06174ca..12c736331d52 100644
--- a/code/lib/core-server/src/utils/output-startup-information.ts
+++ b/code/lib/core-server/src/utils/output-startup-information.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { colors } from '@storybook/node-logger';
import boxen from 'boxen';
import { dedent } from 'ts-dedent';
@@ -47,13 +47,13 @@ export function outputStartupInformation(options: {
});
serveMessage.push(
- ['Local:', chalk.cyan(address)],
- ['On your network:', chalk.cyan(networkAddress)]
+ ['Local:', picocolors.cyan(address)],
+ ['On your network:', picocolors.cyan(networkAddress)]
);
const timeStatement = [
- managerTotalTime && `${chalk.underline(prettyTime(managerTotalTime))} for manager`,
- previewTotalTime && `${chalk.underline(prettyTime(previewTotalTime))} for preview`,
+ managerTotalTime && `${picocolors.underline(prettyTime(managerTotalTime))} for manager`,
+ previewTotalTime && `${picocolors.underline(prettyTime(previewTotalTime))} for preview`,
]
.filter(Boolean)
.join(' and ');
@@ -61,8 +61,10 @@ export function outputStartupInformation(options: {
console.log(
boxen(
dedent`
- ${colors.green(`Storybook ${chalk.bold(version)} for ${chalk.bold(name)} started`)}
- ${chalk.gray(timeStatement)}
+ ${colors.green(
+ `Storybook ${picocolors.bold(version)} for ${picocolors.bold(name)} started`
+ )}
+ ${picocolors.gray(timeStatement)}
${serveMessage.toString()}${updateMessage ? `\n\n${updateMessage}` : ''}
`,
diff --git a/code/lib/core-server/src/utils/output-stats.ts b/code/lib/core-server/src/utils/output-stats.ts
index dd560c661bb5..907e8ae2e76a 100644
--- a/code/lib/core-server/src/utils/output-stats.ts
+++ b/code/lib/core-server/src/utils/output-stats.ts
@@ -1,18 +1,18 @@
import { stringifyStream } from '@discoveryjs/json-ext';
import { logger } from '@storybook/node-logger';
import type { Stats } from '@storybook/types';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import fs from 'fs-extra';
import path from 'path';
export async function outputStats(directory: string, previewStats?: any, managerStats?: any) {
if (previewStats) {
const filePath = await writeStats(directory, 'preview', previewStats as Stats);
- logger.info(`=> preview stats written to ${chalk.cyan(filePath)}`);
+ logger.info(`=> preview stats written to ${picocolors.cyan(filePath)}`);
}
if (managerStats) {
const filePath = await writeStats(directory, 'manager', managerStats as Stats);
- logger.info(`=> manager stats written to ${chalk.cyan(filePath)}`);
+ logger.info(`=> manager stats written to ${picocolors.cyan(filePath)}`);
}
}
diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts
index 2a0b93e1ca41..47dff83e0ca9 100644
--- a/code/lib/core-server/src/utils/server-statics.ts
+++ b/code/lib/core-server/src/utils/server-statics.ts
@@ -1,7 +1,7 @@
import { logger } from '@storybook/node-logger';
import type { Options } from '@storybook/types';
import { getDirectoryFromWorkingDir } from '@storybook/core-common';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import type { Router } from 'express';
import express from 'express';
import { pathExists } from 'fs-extra';
@@ -34,7 +34,9 @@ export async function useStatics(router: Router, options: Options) {
// Don't log for the internal static dir
if (!targetEndpoint.startsWith('/sb-')) {
logger.info(
- chalk`=> Serving static files from {cyan ${staticDir}} at {cyan ${targetEndpoint}}`
+ `=> Serving static files from ${picocolors.cyan(staticDir)} at ${picocolors.cyan(
+ targetEndpoint
+ )}`
);
}
@@ -67,8 +69,8 @@ export const parseStaticDir = async (arg: string) => {
if (!(await pathExists(staticPath))) {
throw new Error(
- dedent(chalk`
- Failed to load static files, no such directory: {cyan ${staticPath}}
+ dedent(`
+ Failed to load static files, no such directory: ${picocolors.cyan(staticPath)}
Make sure this directory exists.
`)
);
diff --git a/code/lib/core-server/src/utils/update-check.ts b/code/lib/core-server/src/utils/update-check.ts
index bb387e6e75f2..076127c52983 100644
--- a/code/lib/core-server/src/utils/update-check.ts
+++ b/code/lib/core-server/src/utils/update-check.ts
@@ -1,5 +1,5 @@
import fetch from 'node-fetch';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { colors } from '@storybook/node-logger';
import semver from 'semver';
import { dedent } from 'ts-dedent';
@@ -43,13 +43,13 @@ export function createUpdateMessage(updateInfo: VersionCheck, version: string):
updateInfo.success && semver.lt(version, updateInfo.data.latest.version)
? dedent`
${colors.orange(
- `A new version (${chalk.bold(updateInfo.data.latest.version)}) is available!`
+ `A new version (${picocolors.bold(updateInfo.data.latest.version)}) is available!`
)}
- ${chalk.gray('Upgrade now:')} ${colors.green(upgradeCommand)}
+ ${picocolors.gray('Upgrade now:')} ${colors.green(upgradeCommand)}
- ${chalk.gray('Read full changelog:')} ${chalk.gray.underline(
- 'https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md'
+ ${picocolors.gray('Read full changelog:')} ${picocolors.gray(
+ picocolors.underline('https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md')
)}
`
: '';
diff --git a/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts b/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts
index fa336373a8a4..af87f3d92c93 100644
--- a/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts
+++ b/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts
@@ -5,7 +5,7 @@ import * as babel from '@babel/core';
import type { BabelFile } from '@babel/core';
import { babelParse } from '@storybook/csf-tools';
import dedent from 'ts-dedent';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
export async function warnWhenUsingArgTypesRegex(
packageJson: PackageJson,
@@ -33,17 +33,17 @@ export async function warnWhenUsingArgTypesRegex(
Identifier: (path) => {
if (path.node.name === 'argTypesRegex') {
const message = dedent`
- ${chalk.bold('Attention')}: We've detected that you're using ${chalk.cyan(
+ ${picocolors.bold('Attention')}: We've detected that you're using ${picocolors.cyan(
'actions.argTypesRegex'
)} together with the visual test addon:
${path.buildCodeFrameError(previewConfig).message}
- We recommend removing the ${chalk.cyan(
+ We recommend removing the ${picocolors.cyan(
'argTypesRegex'
- )} and assigning explicit action with the ${chalk.cyan(
+ )} and assigning explicit action with the ${picocolors.cyan(
'fn'
- )} function from ${chalk.cyan('@storybook/test')} instead:
+ )} function from ${picocolors.cyan('@storybook/test')} instead:
https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props.
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index c98d7fc7da3d..7a936749163f 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -47,10 +47,10 @@
"@storybook/client-logger": "workspace:*",
"@storybook/core-common": "workspace:*",
"@storybook/csf-tools": "workspace:*",
- "chalk": "^4.1.0",
"detect-package-manager": "^2.0.1",
"fetch-retry": "^5.0.2",
"fs-extra": "^11.1.0",
+ "picocolors": "^1.0.1",
"read-pkg-up": "^7.0.1"
},
"devDependencies": {
diff --git a/code/lib/telemetry/src/notify.ts b/code/lib/telemetry/src/notify.ts
index dc57c7ff0003..856617a2e923 100644
--- a/code/lib/telemetry/src/notify.ts
+++ b/code/lib/telemetry/src/notify.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
import { cache } from '@storybook/core-common';
const TELEMETRY_KEY_NOTIFY_DATE = 'telemetry-notification-date';
@@ -19,14 +19,14 @@ export const notify = async () => {
logger.log();
logger.log(
- `${chalk.magenta.bold(
- 'attention'
+ `${picocolors.magenta(
+ picocolors.bold('attention')
)} => Storybook now collects completely anonymous telemetry regarding usage.`
);
logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`);
logger.log(
`You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:`
);
- logger.log(chalk.cyan('https://storybook.js.org/telemetry'));
+ logger.log(picocolors.cyan('https://storybook.js.org/telemetry'));
logger.log();
};
diff --git a/code/yarn.lock b/code/yarn.lock
index da5523a1023d..3f471ba3d000 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5757,7 +5757,6 @@ __metadata:
"@yarnpkg/fslib": "npm:2.10.3"
"@yarnpkg/libzip": "npm:2.3.0"
boxen: "npm:^7.1.1"
- chalk: "npm:^4.1.0"
commander: "npm:^6.2.1"
cross-spawn: "npm:^7.0.3"
detect-indent: "npm:^6.1.0"
@@ -5771,6 +5770,7 @@ __metadata:
jscodeshift: "npm:^0.15.1"
leven: "npm:^3.1.0"
ora: "npm:^5.4.1"
+ picocolors: "npm:^1.0.1"
prettier: "npm:^3.1.1"
prompts: "npm:^2.4.0"
read-pkg-up: "npm:^7.0.1"
@@ -5884,7 +5884,6 @@ __metadata:
"@types/pretty-hrtime": "npm:^1.0.0"
"@yarnpkg/fslib": "npm:2.10.3"
"@yarnpkg/libzip": "npm:2.3.0"
- chalk: "npm:^4.1.0"
cross-spawn: "npm:^7.0.3"
esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0"
esbuild-register: "npm:^3.5.0"
@@ -5898,6 +5897,7 @@ __metadata:
lazy-universal-dotenv: "npm:^4.0.0"
mock-fs: "npm:^5.2.0"
node-fetch: "npm:^2.0.0"
+ picocolors: "npm:^1.0.1"
picomatch: "npm:^2.3.0"
pkg-dir: "npm:^5.0.0"
prettier-fallback: "npm:prettier@^3"
@@ -5925,7 +5925,7 @@ __metadata:
resolution: "@storybook/core-events@workspace:lib/core-events"
dependencies:
"@storybook/csf": "npm:^0.1.8"
- chalk: "npm:^4.1.0"
+ picocolors: "npm:^1.0.1"
ts-dedent: "npm:^2.0.0"
typescript: "npm:^5.3.2"
languageName: unknown
@@ -5965,7 +5965,6 @@ __metadata:
better-opn: "npm:^3.0.2"
boxen: "npm:^7.1.1"
camelcase: "npm:^8.0.0"
- chalk: "npm:^4.1.0"
cli-table3: "npm:^0.6.1"
compression: "npm:^1.7.4"
detect-port: "npm:^1.3.0"
@@ -5976,6 +5975,7 @@ __metadata:
lodash: "npm:^4.17.21"
node-fetch: "npm:^3.3.1"
open: "npm:^8.4.0"
+ picocolors: "npm:^1.0.1"
pretty-hrtime: "npm:^1.0.3"
prompts: "npm:^2.4.0"
read-pkg-up: "npm:^7.0.1"
@@ -7023,12 +7023,12 @@ __metadata:
"@storybook/client-logger": "workspace:*"
"@storybook/core-common": "workspace:*"
"@storybook/csf-tools": "workspace:*"
- chalk: "npm:^4.1.0"
detect-package-manager: "npm:^2.0.1"
fetch-retry: "npm:^5.0.2"
fs-extra: "npm:^11.1.0"
nanoid: "npm:^4.0.2"
node-fetch: "npm:^3.3.1"
+ picocolors: "npm:^1.0.1"
read-pkg-up: "npm:^7.0.1"
typescript: "npm:^5.3.2"
languageName: unknown
@@ -22479,6 +22479,13 @@ __metadata:
languageName: node
linkType: hard
+"picocolors@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "picocolors@npm:1.0.1"
+ checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
+ languageName: node
+ linkType: hard
+
"picomatch@npm:4.0.1":
version: 4.0.1
resolution: "picomatch@npm:4.0.1"
From 050044f47c6e4cf0a9d324784e054a3f74b282eb Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Sun, 23 Jun 2024 01:08:35 +0100
Subject: [PATCH 002/213] feat: migrate from qs
Moves the `manager-api`, `preview-api` and `ui/amanger` to use
`picoquery` instead of `qs` - a much smaller and faster alternative.
Note that we still have `qs` in our overall monorepo tree, but that can
be tackled in a follow-up PR.
---
code/lib/manager-api/package.json | 1 -
code/lib/preview-api/package.json | 3 +-
.../src/modules/preview-web/SelectionStore.ts | 2 +-
.../src/modules/preview-web/UrlStore.test.ts | 4 +--
.../src/modules/preview-web/UrlStore.ts | 36 ++++++++++---------
code/lib/router/package.json | 2 +-
code/ui/manager/package.json | 2 +-
.../preview/utils/stringifyQueryParams.tsx | 4 +--
code/yarn.lock | 28 +++++++++++----
9 files changed, 49 insertions(+), 33 deletions(-)
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index 49270d11882d..5868ec58a2a9 100644
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@@ -62,7 +62,6 @@
},
"devDependencies": {
"@types/lodash": "^4.14.167",
- "@types/qs": "^6",
"@types/semver": "^7.3.4",
"flush-promises": "^1.0.2",
"react": "^18.2.0",
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 75415839d0d2..27d13a212ad8 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -50,11 +50,10 @@
"@storybook/csf": "^0.1.8",
"@storybook/global": "^5.0.0",
"@storybook/types": "workspace:*",
- "@types/qs": "^6.9.5",
"dequal": "^2.0.2",
"lodash": "^4.17.21",
"memoizerific": "^1.11.3",
- "qs": "^6.10.0",
+ "picoquery": "^1.0.0",
"tiny-invariant": "^1.3.1",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2"
diff --git a/code/lib/preview-api/src/modules/preview-web/SelectionStore.ts b/code/lib/preview-api/src/modules/preview-web/SelectionStore.ts
index 4faa9cb1089f..4b11ced29088 100644
--- a/code/lib/preview-api/src/modules/preview-web/SelectionStore.ts
+++ b/code/lib/preview-api/src/modules/preview-web/SelectionStore.ts
@@ -20,5 +20,5 @@ export interface SelectionStore {
setSelection(selection: Selection): void;
- setQueryParams(queryParams: qs.ParsedQs): void;
+ setQueryParams(queryParams: Record): void;
}
diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts
index cc6e57171968..ca1472e9ff42 100644
--- a/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts
+++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts
@@ -39,7 +39,7 @@ describe('UrlStore', () => {
);
});
it('should replace legacy parameters but preserve others', () => {
- document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
+ document.location.search = '?foo=bar&selectedStory=selStory&selectedKind=selKind';
setPath({ storyId: 'story--id', viewMode: 'story' });
expect(history.replaceState).toHaveBeenCalledWith(
{},
@@ -48,7 +48,7 @@ describe('UrlStore', () => {
);
});
it('should ignore + keep hashes', () => {
- document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
+ document.location.search = '?foo=bar&selectedStory=selStory&selectedKind=selKind';
document.location.hash = '#foobar';
setPath({ storyId: 'story--id', viewMode: 'story' });
expect(history.replaceState).toHaveBeenCalledWith(
diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
index b7890cc3687a..5b211235ef99 100644
--- a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
+++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
@@ -1,5 +1,5 @@
import { global } from '@storybook/global';
-import qs from 'qs';
+import * as pq from 'picoquery';
import type { ViewMode } from '@storybook/types';
import { parseArgsParam } from './parseArgsParam';
@@ -20,19 +20,20 @@ const getQueryString = ({
extraParams,
}: {
selection?: Selection;
- extraParams?: qs.ParsedQs;
+ extraParams?: Record;
}) => {
- const search = typeof document !== 'undefined' ? document.location.search : '';
- const { path, selectedKind, selectedStory, ...rest } = qs.parse(search, {
- ignoreQueryPrefix: true,
- });
- return qs.stringify(
- {
+ const search =
+ typeof document !== 'undefined' && document.location.search
+ ? document.location.search.slice(1)
+ : '';
+ const { path, selectedKind, selectedStory, ...rest } = pq.parse(search);
+ return (
+ '?' +
+ pq.stringify({
...rest,
...extraParams,
...(selection && { id: selection.storyId, viewMode: selection.viewMode }),
- },
- { encode: false, addQueryPrefix: true }
+ })
);
};
@@ -45,10 +46,10 @@ export const setPath = (selection?: Selection) => {
};
type ValueOf = T[keyof T];
-const isObject = (val: Record) =>
+const isObject = (val: Record): val is object =>
val != null && typeof val === 'object' && Array.isArray(val) === false;
-const getFirstString = (v: ValueOf): string | void => {
+const getFirstString = (v: ValueOf>): string | void => {
if (v === undefined) {
return undefined;
}
@@ -58,15 +59,18 @@ const getFirstString = (v: ValueOf): string | void => {
if (Array.isArray(v)) {
return getFirstString(v[0]);
}
- if (isObject(v)) {
- return getFirstString(Object.values(v).filter(Boolean) as string[]);
+ if (isObject(v as Record)) {
+ return getFirstString(
+ Object.values(v as Record).filter(Boolean) as string[]
+ );
}
return undefined;
};
export const getSelectionSpecifierFromPath: () => SelectionSpecifier | null = () => {
if (typeof document !== 'undefined') {
- const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
+ const queryStr = document.location.search ? document.location.search.slice(1) : '';
+ const query = pq.parse(queryStr);
const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
@@ -100,7 +104,7 @@ export class UrlStore implements SelectionStore {
setPath(this.selection);
}
- setQueryParams(queryParams: qs.ParsedQs) {
+ setQueryParams(queryParams: Record) {
const query = getQueryString({ extraParams: queryParams });
const { hash = '' } = document.location;
history.replaceState({}, '', `${document.location.pathname}${query}${hash}`);
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index c9a4b1bf2888..312a61f703fa 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -51,7 +51,7 @@
"dependencies": {
"@storybook/client-logger": "workspace:*",
"memoizerific": "^1.11.3",
- "qs": "^6.10.0"
+ "picoquery": "^1.0.0"
},
"devDependencies": {
"@storybook/global": "^5.0.0",
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index a976dab95595..62cbcf87ac97 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -97,8 +97,8 @@
"lodash": "^4.17.21",
"markdown-to-jsx": "^7.4.5",
"memoizerific": "^1.11.3",
+ "picoquery": "^1.0.0",
"polished": "^4.2.2",
- "qs": "^6.10.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
diff --git a/code/ui/manager/src/components/preview/utils/stringifyQueryParams.tsx b/code/ui/manager/src/components/preview/utils/stringifyQueryParams.tsx
index 4175503808bb..f98f5aed2066 100644
--- a/code/ui/manager/src/components/preview/utils/stringifyQueryParams.tsx
+++ b/code/ui/manager/src/components/preview/utils/stringifyQueryParams.tsx
@@ -1,4 +1,4 @@
-import qs from 'qs';
+import { stringify } from 'picoquery';
export const stringifyQueryParams = (queryParams: Record) =>
- qs.stringify(queryParams, { addQueryPrefix: true, encode: false }).replace(/^\?/, '&');
+ '&' + stringify(queryParams);
diff --git a/code/yarn.lock b/code/yarn.lock
index da5523a1023d..6eedbb821c1e 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6232,7 +6232,6 @@ __metadata:
"@storybook/theming": "workspace:*"
"@storybook/types": "workspace:*"
"@types/lodash": "npm:^4.14.167"
- "@types/qs": "npm:^6"
"@types/semver": "npm:^7.3.4"
dequal: "npm:^2.0.2"
flush-promises: "npm:^1.0.2"
@@ -6277,8 +6276,8 @@ __metadata:
lodash: "npm:^4.17.21"
markdown-to-jsx: "npm:^7.4.5"
memoizerific: "npm:^1.11.3"
+ picoquery: "npm:^1.0.0"
polished: "npm:^4.2.2"
- qs: "npm:^6.10.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
react-draggable: "npm:^4.4.5"
@@ -6568,12 +6567,11 @@ __metadata:
"@storybook/csf": "npm:^0.1.8"
"@storybook/global": "npm:^5.0.0"
"@storybook/types": "workspace:*"
- "@types/qs": "npm:^6.9.5"
ansi-to-html: "npm:^0.6.11"
dequal: "npm:^2.0.2"
lodash: "npm:^4.17.21"
memoizerific: "npm:^1.11.3"
- qs: "npm:^6.10.0"
+ picoquery: "npm:^1.0.0"
slash: "npm:^5.0.0"
tiny-invariant: "npm:^1.3.1"
ts-dedent: "npm:^2.0.0"
@@ -6877,7 +6875,7 @@ __metadata:
dequal: "npm:^2.0.2"
lodash: "npm:^4.17.21"
memoizerific: "npm:^1.11.3"
- qs: "npm:^6.10.0"
+ picoquery: "npm:^1.0.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
react-router-dom: "npm:6.0.2"
@@ -8191,7 +8189,7 @@ __metadata:
languageName: node
linkType: hard
-"@types/qs@npm:*, @types/qs@npm:^6, @types/qs@npm:^6.9.5":
+"@types/qs@npm:*":
version: 6.9.10
resolution: "@types/qs@npm:6.9.10"
checksum: 10c0/6be12e5f062d1b41eb037d59bf9cb65bc9410cedd5e6da832dfd7c8e2b3f4c91e81c9b90b51811140770e5052c6c4e8361181bd9437ddcd4515dc128b7c00353
@@ -14953,6 +14951,13 @@ __metadata:
languageName: node
linkType: hard
+"fast-decode-uri-component@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "fast-decode-uri-component@npm:1.0.1"
+ checksum: 10c0/039d50c2e99d64f999c3f2126c23fbf75a04a4117e218a149ca0b1d2aeb8c834b7b19d643b9d35d4eabce357189a6a94085f78cf48869e6e26cc59b036284bc3
+ languageName: node
+ linkType: hard
+
"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
version: 3.1.3
resolution: "fast-deep-equal@npm:3.1.3"
@@ -22493,6 +22498,15 @@ __metadata:
languageName: node
linkType: hard
+"picoquery@npm:^1.0.0":
+ version: 1.0.0
+ resolution: "picoquery@npm:1.0.0"
+ dependencies:
+ fast-decode-uri-component: "npm:^1.0.1"
+ checksum: 10c0/d5d89ca0ce6f150db02175b072eb881460bb3dc2a7a50d55be1b4f05d953136efc3815504d93045c8ba014c318f4a4e1f523b1a960db9db0bde357bca28aacde
+ languageName: node
+ linkType: hard
+
"pidtree@npm:0.6.0":
version: 0.6.0
resolution: "pidtree@npm:0.6.0"
@@ -23340,7 +23354,7 @@ __metadata:
languageName: node
linkType: hard
-"qs@npm:^6.10.0, qs@npm:^6.10.1, qs@npm:^6.11.2, qs@npm:^6.4.0":
+"qs@npm:^6.10.1, qs@npm:^6.11.2, qs@npm:^6.4.0":
version: 6.11.2
resolution: "qs@npm:6.11.2"
dependencies:
From 2b8156a716732d8f74fe00f36eb0e42479df073b Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sun, 23 Jun 2024 21:52:36 +0800
Subject: [PATCH 003/213] Use destructured imports
---
code/lib/preview-api/src/modules/preview-web/UrlStore.ts | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
index 5b211235ef99..b5089b3fd33a 100644
--- a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
+++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
@@ -1,5 +1,5 @@
import { global } from '@storybook/global';
-import * as pq from 'picoquery';
+import { parse, stringify } from 'picoquery';
import type { ViewMode } from '@storybook/types';
import { parseArgsParam } from './parseArgsParam';
@@ -26,10 +26,10 @@ const getQueryString = ({
typeof document !== 'undefined' && document.location.search
? document.location.search.slice(1)
: '';
- const { path, selectedKind, selectedStory, ...rest } = pq.parse(search);
+ const { path, selectedKind, selectedStory, ...rest } = parse(search);
return (
'?' +
- pq.stringify({
+ stringify({
...rest,
...extraParams,
...(selection && { id: selection.storyId, viewMode: selection.viewMode }),
@@ -70,7 +70,7 @@ const getFirstString = (v: ValueOf>): string | void
export const getSelectionSpecifierFromPath: () => SelectionSpecifier | null = () => {
if (typeof document !== 'undefined') {
const queryStr = document.location.search ? document.location.search.slice(1) : '';
- const query = pq.parse(queryStr);
+ const query = parse(queryStr);
const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
From 23f28dcd799405167168a1b36e7a19acc8a89b2c Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sun, 23 Jun 2024 22:26:34 +0800
Subject: [PATCH 004/213] qs => picoquery
---
code/lib/preview-api/src/modules/preview-web/WebView.ts | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/code/lib/preview-api/src/modules/preview-web/WebView.ts b/code/lib/preview-api/src/modules/preview-web/WebView.ts
index 82c6a294bf05..3f317701d087 100644
--- a/code/lib/preview-api/src/modules/preview-web/WebView.ts
+++ b/code/lib/preview-api/src/modules/preview-web/WebView.ts
@@ -2,7 +2,7 @@ import { global } from '@storybook/global';
import { logger } from '@storybook/client-logger';
import AnsiToHtml from 'ansi-to-html';
import { dedent } from 'ts-dedent';
-import qs from 'qs';
+import { parse } from 'picoquery';
import type { PreparedStory } from '@storybook/types';
import type { View } from './View';
@@ -48,9 +48,7 @@ export class WebView implements View {
// Special code for testing situations
if (typeof document !== 'undefined') {
// eslint-disable-next-line @typescript-eslint/naming-convention
- const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document.location.search, {
- ignoreQueryPrefix: true,
- });
+ const { __SPECIAL_TEST_PARAMETER__ } = parse(document.location.search);
switch (__SPECIAL_TEST_PARAMETER__) {
case 'preparing-story': {
this.showPreparingStory();
From 3c04a1e524069de068226faf93a044fb31ce3fbc Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Mon, 24 Jun 2024 18:03:24 +0100
Subject: [PATCH 005/213] feat: use js syntax in query strings
Uses the `foo.bar[0]` syntax picoquery provides, rather than dot-syntax
(`foo.bar.0`).
---
code/lib/preview-api/package.json | 2 +-
code/lib/router/package.json | 2 +-
code/lib/router/src/utils.test.ts | 26 ++++++++++++-------------
code/lib/router/src/utils.ts | 32 +++++++++++++++++--------------
code/ui/manager/package.json | 2 +-
code/yarn.lock | 14 +++++++-------
6 files changed, 41 insertions(+), 37 deletions(-)
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 27d13a212ad8..17e2aace0f67 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -53,7 +53,7 @@
"dequal": "^2.0.2",
"lodash": "^4.17.21",
"memoizerific": "^1.11.3",
- "picoquery": "^1.0.0",
+ "picoquery": "^1.3.0",
"tiny-invariant": "^1.3.1",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2"
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index 312a61f703fa..663deceab519 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -51,7 +51,7 @@
"dependencies": {
"@storybook/client-logger": "workspace:*",
"memoizerific": "^1.11.3",
- "picoquery": "^1.0.0"
+ "picoquery": "^1.3.0"
},
"devDependencies": {
"@storybook/global": "^5.0.0",
diff --git a/code/lib/router/src/utils.test.ts b/code/lib/router/src/utils.test.ts
index e12d257aa316..5eb0571b8f3a 100644
--- a/code/lib/router/src/utils.test.ts
+++ b/code/lib/router/src/utils.test.ts
@@ -137,12 +137,12 @@ describe('buildArgsParam', () => {
it('builds arrays', () => {
const param = buildArgsParam({}, { arr: ['1', '2', '3'] });
- expect(param).toEqual('arr[0]:1;arr[1]:2;arr[2]:3');
+ expect(param).toEqual('arr%5B0%5D:1;arr%5B1%5D:2;arr%5B2%5D:3');
});
it('builds sparse arrays', () => {
const param = buildArgsParam({}, { arr: ['1', , '3'] });
- expect(param).toEqual('arr[0]:1;arr[2]:3');
+ expect(param).toEqual('arr%5B0%5D:1;arr%5B2%5D:3');
});
it('builds simple objects', () => {
@@ -157,22 +157,22 @@ describe('buildArgsParam', () => {
it('builds arrays in objects', () => {
const param = buildArgsParam({}, { obj: { foo: ['1', , '3'] } });
- expect(param).toEqual('obj.foo[0]:1;obj.foo[2]:3');
+ expect(param).toEqual('obj.foo%5B0%5D:1;obj.foo%5B2%5D:3');
});
it('builds single object in array', () => {
const param = buildArgsParam({}, { arr: [{ one: '1', two: '2' }] });
- expect(param).toEqual('arr[0].one:1;arr[0].two:2');
+ expect(param).toEqual('arr%5B0%5D.one:1;arr%5B0%5D.two:2');
});
it('builds multiple objects in array', () => {
const param = buildArgsParam({}, { arr: [{ one: '1' }, { two: '2' }] });
- expect(param).toEqual('arr[0].one:1;arr[1].two:2');
+ expect(param).toEqual('arr%5B0%5D.one:1;arr%5B1%5D.two:2');
});
it('builds nested object in array', () => {
const param = buildArgsParam({}, { arr: [{ foo: { bar: 'val' } }] });
- expect(param).toEqual('arr[0].foo.bar:val');
+ expect(param).toEqual('arr%5B0%5D.foo.bar:val');
});
it('encodes space as +', () => {
@@ -187,7 +187,7 @@ describe('buildArgsParam', () => {
it('encodes nested null values as !null', () => {
const param = buildArgsParam({}, { foo: { bar: [{ key: null }], baz: null } });
- expect(param).toEqual('foo.bar[0].key:!null;foo.baz:!null');
+ expect(param).toEqual('foo.bar%5B0%5D.key:!null;foo.baz:!null');
});
it('encodes hex color values as !hex(value)', () => {
@@ -197,17 +197,17 @@ describe('buildArgsParam', () => {
it('encodes rgba color values by prefixing and compacting', () => {
const param = buildArgsParam({}, { rgb: 'rgb(255, 71, 133)', rgba: 'rgba(255, 71, 133, 0.5)' });
- expect(param).toEqual('rgb:!rgb(255,71,133);rgba:!rgba(255,71,133,0.5)');
+ expect(param).toEqual('rgb:!rgb(255%2C71%2C133);rgba:!rgba(255%2C71%2C133%2C0.5)');
});
it('encodes hsla color values by prefixing and compacting', () => {
const param = buildArgsParam({}, { hsl: 'hsl(45, 99%, 70%)', hsla: 'hsla(45, 99%, 70%, 0.5)' });
- expect(param).toEqual('hsl:!hsl(45,99,70);hsla:!hsla(45,99,70,0.5)');
+ expect(param).toEqual('hsl:!hsl(45%2C99%2C70);hsla:!hsla(45%2C99%2C70%2C0.5)');
});
it('encodes Date objects as !date(ISO string)', () => {
const param = buildArgsParam({}, { key: new Date('2001-02-03T04:05:06.789Z') });
- expect(param).toEqual('key:!date(2001-02-03T04:05:06.789Z)');
+ expect(param).toEqual('key:!date(2001-02-03T04%3A05%3A06.789Z)');
});
describe('with initial state', () => {
@@ -223,7 +223,7 @@ describe('buildArgsParam', () => {
it('sets !undefined for removed array values', () => {
const param = buildArgsParam({ arr: [1] }, { arr: [] });
- expect(param).toEqual('arr[0]:!undefined');
+ expect(param).toEqual('arr%5B0%5D:!undefined');
});
it('sets !undefined for removed object properties', () => {
@@ -233,7 +233,7 @@ describe('buildArgsParam', () => {
it('omits unchanged array values (yielding sparse arrays)', () => {
const param = buildArgsParam({ arr: [1, 2, 3] }, { arr: [1, 3, 4] });
- expect(param).toEqual('arr[1]:3;arr[2]:4');
+ expect(param).toEqual('arr%5B1%5D:3;arr%5B2%5D:4');
});
it('omits nested unchanged object properties and array values', () => {
@@ -241,7 +241,7 @@ describe('buildArgsParam', () => {
{ obj: { nested: [{ one: 1 }, { two: 2 }] } },
{ obj: { nested: [{ one: 1 }, { two: 2, three: 3 }] } }
);
- expect(param).toEqual('obj.nested[1].three:3');
+ expect(param).toEqual('obj.nested%5B1%5D.three:3');
});
});
});
diff --git a/code/lib/router/src/utils.ts b/code/lib/router/src/utils.ts
index c7cefd89bad3..596188609e0c 100644
--- a/code/lib/router/src/utils.ts
+++ b/code/lib/router/src/utils.ts
@@ -2,8 +2,8 @@ import { once } from '@storybook/client-logger';
import { dequal as deepEqual } from 'dequal';
import isPlainObject from 'lodash/isPlainObject.js';
import memoize from 'memoizerific';
-import type { IStringifyOptions } from 'qs';
-import qs from 'qs';
+import type { Options as QueryOptions } from 'picoquery';
+import { stringify, parse } from 'picoquery';
import { dedent } from 'ts-dedent';
export interface StoryData {
@@ -105,6 +105,10 @@ const encodeSpecialValues = (value: unknown): any => {
return `!${value}`;
}
+ if (value instanceof Date) {
+ return `!date(${value.toISOString()})`;
+ }
+
if (Array.isArray(value)) return value.map(encodeSpecialValues);
if (isPlainObject(value)) {
return Object.entries(value as Record).reduce(
@@ -115,12 +119,10 @@ const encodeSpecialValues = (value: unknown): any => {
return value;
};
-const QS_OPTIONS: IStringifyOptions = {
- encode: false, // we handle URL encoding ourselves
+const QS_OPTIONS: Partial = {
delimiter: ';', // we don't actually create multiple query params
- allowDots: true, // encode objects using dot notation: obj.key=val
- format: 'RFC1738', // encode spaces using the + sign
- serializeDate: (date: Date) => `!date(${date.toISOString()})`,
+ nesting: true,
+ nestingSyntax: 'js', // encode objects using dot notation: obj.key=val
};
export const buildArgsParam = (initialArgs: Args | undefined, args: Args): string => {
const update = deepDiff(initialArgs, args);
@@ -136,9 +138,8 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin
return acc;
}, {} as Args);
- return qs
- .stringify(encodeSpecialValues(object), QS_OPTIONS)
- .replace(/ /g, '+')
+ return stringify(encodeSpecialValues(object), QS_OPTIONS)
+ .replace(/%20/g, '+')
.split(';')
.map((part: string) => part.replace('=', ':'))
.join(';');
@@ -149,11 +150,14 @@ interface Query {
}
export const queryFromString = memoize(1000)(
- (s?: string): Query => (s !== undefined ? qs.parse(s, { ignoreQueryPrefix: true }) : {})
+ (s?: string): Query => (s !== undefined ? parse(s) : {})
);
-export const queryFromLocation = (location: Partial) => queryFromString(location.search);
-export const stringifyQuery = (query: Query) =>
- qs.stringify(query, { addQueryPrefix: true, encode: false });
+export const queryFromLocation = (location: Partial) =>
+ queryFromString(location.search ? location.search.slice(1) : '');
+export const stringifyQuery = (query: Query) => {
+ const queryStr = stringify(query);
+ return queryStr ? '?' + queryStr : '';
+};
type Match = { path: string };
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 62cbcf87ac97..05a20747c5e9 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -97,7 +97,7 @@
"lodash": "^4.17.21",
"markdown-to-jsx": "^7.4.5",
"memoizerific": "^1.11.3",
- "picoquery": "^1.0.0",
+ "picoquery": "^1.3.0",
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/code/yarn.lock b/code/yarn.lock
index 4ae5456b9ac5..c304fd27c3e9 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6276,7 +6276,7 @@ __metadata:
lodash: "npm:^4.17.21"
markdown-to-jsx: "npm:^7.4.5"
memoizerific: "npm:^1.11.3"
- picoquery: "npm:^1.0.0"
+ picoquery: "npm:^1.3.0"
polished: "npm:^4.2.2"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
@@ -6571,7 +6571,7 @@ __metadata:
dequal: "npm:^2.0.2"
lodash: "npm:^4.17.21"
memoizerific: "npm:^1.11.3"
- picoquery: "npm:^1.0.0"
+ picoquery: "npm:^1.3.0"
slash: "npm:^5.0.0"
tiny-invariant: "npm:^1.3.1"
ts-dedent: "npm:^2.0.0"
@@ -6875,7 +6875,7 @@ __metadata:
dequal: "npm:^2.0.2"
lodash: "npm:^4.17.21"
memoizerific: "npm:^1.11.3"
- picoquery: "npm:^1.0.0"
+ picoquery: "npm:^1.3.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
react-router-dom: "npm:6.0.2"
@@ -22481,12 +22481,12 @@ __metadata:
languageName: node
linkType: hard
-"picoquery@npm:^1.0.0":
- version: 1.0.0
- resolution: "picoquery@npm:1.0.0"
+"picoquery@npm:^1.3.0":
+ version: 1.3.0
+ resolution: "picoquery@npm:1.3.0"
dependencies:
fast-decode-uri-component: "npm:^1.0.1"
- checksum: 10c0/d5d89ca0ce6f150db02175b072eb881460bb3dc2a7a50d55be1b4f05d953136efc3815504d93045c8ba014c318f4a4e1f523b1a960db9db0bde357bca28aacde
+ checksum: 10c0/7bbd692d3996caff8e19bb0590b925d673ec87bc3c005cce55610c64a7348129bfc6b4f47dcd578ebcf4ea12db958fb004439cf827b67741b927a17f32af00d4
languageName: node
linkType: hard
From 4474a040197def77a4f53cff86a3904a9197f75b Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Mon, 24 Jun 2024 19:27:49 +0100
Subject: [PATCH 006/213] feat (preview-api): move to picoquery
Moves the preview api to use picoquery.
Note that tests will not pass yet.
---
.../src/modules/preview-web/parseArgsParam.ts | 25 ++++++++-----------
code/lib/router/src/utils.ts | 3 +++
2 files changed, 14 insertions(+), 14 deletions(-)
diff --git a/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts b/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts
index 3212a95b3e96..2e618a82cfc7 100644
--- a/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts
+++ b/code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts
@@ -1,4 +1,4 @@
-import qs from 'qs';
+import { parse, type Options } from 'picoquery';
import { dedent } from 'ts-dedent';
import type { Args } from '@storybook/types';
import { once } from '@storybook/client-logger';
@@ -30,17 +30,14 @@ const validateArgs = (key = '', value: unknown): boolean => {
return false;
};
-const QS_OPTIONS = {
+const QS_OPTIONS: Partial = {
delimiter: ';', // we're parsing a single query param
- allowDots: true, // objects are encoded using dot notation
- allowSparse: true, // arrays will be merged on top of their initial value
- decoder(
- str: string,
- defaultDecoder: (str: string, decoder?: any, charset?: string) => string,
- charset: string,
- type: 'key' | 'value'
- ) {
- if (type === 'value' && str.startsWith('!')) {
+ nesting: true,
+ arrayRepeat: true,
+ arrayRepeatSyntax: 'bracket',
+ nestingSyntax: 'js', // objects are encoded using dot notation
+ valueDeserializer(str: string) {
+ if (str.startsWith('!')) {
if (str === '!undefined') return undefined;
if (str === '!null') return null;
if (str === '!true') return true;
@@ -59,13 +56,13 @@ const QS_OPTIONS = {
: `${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%)`;
}
}
- if (type === 'value' && NUMBER_REGEXP.test(str)) return Number(str);
- return defaultDecoder(str, defaultDecoder, charset);
+ if (NUMBER_REGEXP.test(str)) return Number(str);
+ return str;
},
};
export const parseArgsParam = (argsString: string): Args => {
const parts = argsString.split(';').map((part) => part.replace('=', '~').replace(':', '='));
- return Object.entries(qs.parse(parts.join(';'), QS_OPTIONS)).reduce((acc, [key, value]) => {
+ return Object.entries(parse(parts.join(';'), QS_OPTIONS)).reduce((acc, [key, value]) => {
if (validateArgs(key, value)) return Object.assign(acc, { [key]: value });
once.warn(dedent`
Omitted potentially unsafe URL args.
diff --git a/code/lib/router/src/utils.ts b/code/lib/router/src/utils.ts
index 596188609e0c..b7d1097e27e3 100644
--- a/code/lib/router/src/utils.ts
+++ b/code/lib/router/src/utils.ts
@@ -92,6 +92,9 @@ const validateArgs = (key = '', value: unknown): boolean => {
return false;
};
+// Note this isn't a picoquery serializer because pq will turn any object
+// into a nested key internally. So we need to deal witth things like `Date`
+// up front.
const encodeSpecialValues = (value: unknown): any => {
if (value === undefined) return '!undefined';
if (value === null) return '!null';
From fcce3bbb3882e820cb883064451e6bce28747d5c Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Tue, 25 Jun 2024 17:31:44 +0100
Subject: [PATCH 007/213] fix: decode some known query string chars
Decodes certain chars we want to keep in our URIs (e.g. `[`).
---
.../src/modules/preview-web/UrlStore.ts | 21 ++++++---------
code/lib/router/src/utils.test.ts | 26 +++++++++----------
code/lib/router/src/utils.ts | 24 ++++++++++++++++-
3 files changed, 44 insertions(+), 27 deletions(-)
diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
index b5089b3fd33a..72da8f23fe72 100644
--- a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
+++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
@@ -22,19 +22,14 @@ const getQueryString = ({
selection?: Selection;
extraParams?: Record;
}) => {
- const search =
- typeof document !== 'undefined' && document.location.search
- ? document.location.search.slice(1)
- : '';
+ const search = document?.location.search.slice(1);
const { path, selectedKind, selectedStory, ...rest } = parse(search);
- return (
- '?' +
- stringify({
- ...rest,
- ...extraParams,
- ...(selection && { id: selection.storyId, viewMode: selection.viewMode }),
- })
- );
+ const queryStr = stringify({
+ ...rest,
+ ...extraParams,
+ ...(selection && { id: selection.storyId, viewMode: selection.viewMode }),
+ });
+ return `?${queryStr}`;
};
export const setPath = (selection?: Selection) => {
@@ -69,7 +64,7 @@ const getFirstString = (v: ValueOf>): string | void
export const getSelectionSpecifierFromPath: () => SelectionSpecifier | null = () => {
if (typeof document !== 'undefined') {
- const queryStr = document.location.search ? document.location.search.slice(1) : '';
+ const queryStr = document.location.search.slice(1);
const query = parse(queryStr);
const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
diff --git a/code/lib/router/src/utils.test.ts b/code/lib/router/src/utils.test.ts
index 5eb0571b8f3a..e12d257aa316 100644
--- a/code/lib/router/src/utils.test.ts
+++ b/code/lib/router/src/utils.test.ts
@@ -137,12 +137,12 @@ describe('buildArgsParam', () => {
it('builds arrays', () => {
const param = buildArgsParam({}, { arr: ['1', '2', '3'] });
- expect(param).toEqual('arr%5B0%5D:1;arr%5B1%5D:2;arr%5B2%5D:3');
+ expect(param).toEqual('arr[0]:1;arr[1]:2;arr[2]:3');
});
it('builds sparse arrays', () => {
const param = buildArgsParam({}, { arr: ['1', , '3'] });
- expect(param).toEqual('arr%5B0%5D:1;arr%5B2%5D:3');
+ expect(param).toEqual('arr[0]:1;arr[2]:3');
});
it('builds simple objects', () => {
@@ -157,22 +157,22 @@ describe('buildArgsParam', () => {
it('builds arrays in objects', () => {
const param = buildArgsParam({}, { obj: { foo: ['1', , '3'] } });
- expect(param).toEqual('obj.foo%5B0%5D:1;obj.foo%5B2%5D:3');
+ expect(param).toEqual('obj.foo[0]:1;obj.foo[2]:3');
});
it('builds single object in array', () => {
const param = buildArgsParam({}, { arr: [{ one: '1', two: '2' }] });
- expect(param).toEqual('arr%5B0%5D.one:1;arr%5B0%5D.two:2');
+ expect(param).toEqual('arr[0].one:1;arr[0].two:2');
});
it('builds multiple objects in array', () => {
const param = buildArgsParam({}, { arr: [{ one: '1' }, { two: '2' }] });
- expect(param).toEqual('arr%5B0%5D.one:1;arr%5B1%5D.two:2');
+ expect(param).toEqual('arr[0].one:1;arr[1].two:2');
});
it('builds nested object in array', () => {
const param = buildArgsParam({}, { arr: [{ foo: { bar: 'val' } }] });
- expect(param).toEqual('arr%5B0%5D.foo.bar:val');
+ expect(param).toEqual('arr[0].foo.bar:val');
});
it('encodes space as +', () => {
@@ -187,7 +187,7 @@ describe('buildArgsParam', () => {
it('encodes nested null values as !null', () => {
const param = buildArgsParam({}, { foo: { bar: [{ key: null }], baz: null } });
- expect(param).toEqual('foo.bar%5B0%5D.key:!null;foo.baz:!null');
+ expect(param).toEqual('foo.bar[0].key:!null;foo.baz:!null');
});
it('encodes hex color values as !hex(value)', () => {
@@ -197,17 +197,17 @@ describe('buildArgsParam', () => {
it('encodes rgba color values by prefixing and compacting', () => {
const param = buildArgsParam({}, { rgb: 'rgb(255, 71, 133)', rgba: 'rgba(255, 71, 133, 0.5)' });
- expect(param).toEqual('rgb:!rgb(255%2C71%2C133);rgba:!rgba(255%2C71%2C133%2C0.5)');
+ expect(param).toEqual('rgb:!rgb(255,71,133);rgba:!rgba(255,71,133,0.5)');
});
it('encodes hsla color values by prefixing and compacting', () => {
const param = buildArgsParam({}, { hsl: 'hsl(45, 99%, 70%)', hsla: 'hsla(45, 99%, 70%, 0.5)' });
- expect(param).toEqual('hsl:!hsl(45%2C99%2C70);hsla:!hsla(45%2C99%2C70%2C0.5)');
+ expect(param).toEqual('hsl:!hsl(45,99,70);hsla:!hsla(45,99,70,0.5)');
});
it('encodes Date objects as !date(ISO string)', () => {
const param = buildArgsParam({}, { key: new Date('2001-02-03T04:05:06.789Z') });
- expect(param).toEqual('key:!date(2001-02-03T04%3A05%3A06.789Z)');
+ expect(param).toEqual('key:!date(2001-02-03T04:05:06.789Z)');
});
describe('with initial state', () => {
@@ -223,7 +223,7 @@ describe('buildArgsParam', () => {
it('sets !undefined for removed array values', () => {
const param = buildArgsParam({ arr: [1] }, { arr: [] });
- expect(param).toEqual('arr%5B0%5D:!undefined');
+ expect(param).toEqual('arr[0]:!undefined');
});
it('sets !undefined for removed object properties', () => {
@@ -233,7 +233,7 @@ describe('buildArgsParam', () => {
it('omits unchanged array values (yielding sparse arrays)', () => {
const param = buildArgsParam({ arr: [1, 2, 3] }, { arr: [1, 3, 4] });
- expect(param).toEqual('arr%5B1%5D:3;arr%5B2%5D:4');
+ expect(param).toEqual('arr[1]:3;arr[2]:4');
});
it('omits nested unchanged object properties and array values', () => {
@@ -241,7 +241,7 @@ describe('buildArgsParam', () => {
{ obj: { nested: [{ one: 1 }, { two: 2 }] } },
{ obj: { nested: [{ one: 1 }, { two: 2, three: 3 }] } }
);
- expect(param).toEqual('obj.nested%5B1%5D.three:3');
+ expect(param).toEqual('obj.nested[1].three:3');
});
});
});
diff --git a/code/lib/router/src/utils.ts b/code/lib/router/src/utils.ts
index b7d1097e27e3..ac141c3a0b3b 100644
--- a/code/lib/router/src/utils.ts
+++ b/code/lib/router/src/utils.ts
@@ -127,6 +127,28 @@ const QS_OPTIONS: Partial = {
nesting: true,
nestingSyntax: 'js', // encode objects using dot notation: obj.key=val
};
+
+// Replaces some url-encoded characters with their decoded equivalents.
+// The URI RFC specifies these should be encoded, but all browsers will
+// tolerate them being decoded, so we opt to go with it for cleaner looking
+// URIs.
+const decodeKnownQueryChar = (chr: string) => {
+ switch (chr) {
+ case '%20':
+ return '+';
+ case '%5B':
+ return '[';
+ case '%5D':
+ return ']';
+ case '%2C':
+ return ',';
+ case '%3A':
+ return ':';
+ }
+ return chr;
+};
+const knownQueryChar = /%[0-9A-F]{2}/g;
+
export const buildArgsParam = (initialArgs: Args | undefined, args: Args): string => {
const update = deepDiff(initialArgs, args);
if (!update || update === DEEPLY_EQUAL) return '';
@@ -142,7 +164,7 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin
}, {} as Args);
return stringify(encodeSpecialValues(object), QS_OPTIONS)
- .replace(/%20/g, '+')
+ .replace(knownQueryChar, decodeKnownQueryChar)
.split(';')
.map((part: string) => part.replace('=', ':'))
.join(';');
From 13053d7a2deb1535b34bc52e6d49f625c50cbd95 Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Sun, 28 Jul 2024 10:49:07 +0100
Subject: [PATCH 008/213] test: fix parseArgsParam tests
---
code/core/package.json | 2 +-
.../preview-web/parseArgsParam.test.ts | 21 +-
code/yarn.lock | 189 ++++++++++++++++--
3 files changed, 181 insertions(+), 31 deletions(-)
diff --git a/code/core/package.json b/code/core/package.json
index 2882c273f465..42d351ffc5e8 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -352,7 +352,7 @@
"npmlog": "^7.0.0",
"open": "^8.4.0",
"picomatch": "^2.3.0",
- "picoquery": "^1.3.0",
+ "picoquery": "^1.4.0",
"polished": "^4.2.2",
"prettier": "^3.2.5",
"pretty-hrtime": "^1.0.3",
diff --git a/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts b/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
index f72df087ddcd..e484b511d3cd 100644
--- a/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
@@ -57,7 +57,7 @@ describe('parseArgsParam', () => {
});
it('parses Date with timezone offset', () => {
- const args = parseArgsParam('key:!date(2001-02-03T04:05:06.789+09:00)');
+ const args = parseArgsParam('key:!date(2001-02-03T04:05:06.789%2B09:00)');
expect(args).toStrictEqual({ key: new Date('2001-02-03T04:05:06.789+09:00') });
});
@@ -126,7 +126,7 @@ describe('parseArgsParam', () => {
});
it('parses single object in array', () => {
- const args = parseArgsParam('arr[].one:A;arr[].two:B');
+ const args = parseArgsParam('arr[0].one:A;arr[0].two:B');
expect(args).toStrictEqual({ arr: [{ one: 'A', two: 'B' }] });
});
@@ -134,14 +134,10 @@ describe('parseArgsParam', () => {
expect(parseArgsParam('arr[0].key:A;arr[1].key:B')).toStrictEqual({
arr: [{ key: 'A' }, { key: 'B' }],
});
- expect(parseArgsParam('arr[0][key]:A;arr[1][key]:B')).toStrictEqual({
- arr: [{ key: 'A' }, { key: 'B' }],
- });
});
it('parses nested object in array', () => {
- expect(parseArgsParam('arr[].foo.bar:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] });
- expect(parseArgsParam('arr[][foo][bar]:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] });
+ expect(parseArgsParam('arr[0].foo.bar:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] });
});
describe('key sanitization', () => {
@@ -163,8 +159,6 @@ describe('parseArgsParam', () => {
expect(parseArgsParam('a/b:val')).toStrictEqual({});
expect(parseArgsParam('a\\b:val')).toStrictEqual({});
expect(parseArgsParam('a|b:val')).toStrictEqual({});
- expect(parseArgsParam('a[b:val')).toStrictEqual({});
- expect(parseArgsParam('a]b:val')).toStrictEqual({});
expect(parseArgsParam('a{b:val')).toStrictEqual({});
expect(parseArgsParam('a}b:val')).toStrictEqual({});
expect(parseArgsParam('a?b:val')).toStrictEqual({});
@@ -184,14 +178,10 @@ describe('parseArgsParam', () => {
it('also applies to nested object keys', () => {
expect(parseArgsParam('obj.a!b:val')).toStrictEqual({});
- expect(parseArgsParam('obj[a!b]:val')).toStrictEqual({});
- expect(parseArgsParam('arr[][a!b]:val')).toStrictEqual({});
- expect(parseArgsParam('arr[0][a!b]:val')).toStrictEqual({});
});
it('completely omits an arg when a (deeply) nested key is invalid', () => {
expect(parseArgsParam('obj.foo.a!b:val;obj.foo.bar:val;obj.baz:val')).toStrictEqual({});
- expect(parseArgsParam('obj.foo[][a!b]:val;obj.foo.bar:val;obj.baz:val')).toStrictEqual({});
expect(parseArgsParam('obj.foo.a!b:val;key:val')).toStrictEqual({ key: 'val' });
});
});
@@ -246,9 +236,6 @@ describe('parseArgsParam', () => {
it('also applies to nested object and array values', () => {
expect(parseArgsParam('obj.key:a!b')).toStrictEqual({});
- expect(parseArgsParam('obj[key]:a!b')).toStrictEqual({});
- expect(parseArgsParam('arr[][key]:a!b')).toStrictEqual({});
- expect(parseArgsParam('arr[0][key]:a!b')).toStrictEqual({});
expect(parseArgsParam('arr[]:a!b')).toStrictEqual({});
expect(parseArgsParam('arr[0]:a!b')).toStrictEqual({});
});
@@ -257,7 +244,7 @@ describe('parseArgsParam', () => {
expect(parseArgsParam('obj.key:a!b;obj.foo:val;obj.bar.baz:val')).toStrictEqual({});
expect(parseArgsParam('obj.arr[]:a!b;obj.foo:val;obj.bar.baz:val')).toStrictEqual({});
expect(parseArgsParam('obj.arr[0]:val;obj.arr[1]:a!b;obj.foo:val')).toStrictEqual({});
- expect(parseArgsParam('obj.arr[][one]:a!b;obj.arr[][two]:val')).toStrictEqual({});
+ expect(parseArgsParam('obj.arr[]:a!b;obj.arr[]:val')).toStrictEqual({});
expect(parseArgsParam('arr[]:val;arr[]:a!b;key:val')).toStrictEqual({ key: 'val' });
expect(parseArgsParam('arr[0]:val;arr[1]:a!1;key:val')).toStrictEqual({ key: 'val' });
expect(parseArgsParam('arr[0]:val;arr[2]:a!1;key:val')).toStrictEqual({ key: 'val' });
diff --git a/code/yarn.lock b/code/yarn.lock
index af1e1c14190b..092f5969f580 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -370,6 +370,16 @@ __metadata:
languageName: node
linkType: hard
+"@babel/code-frame@npm:^7.24.1":
+ version: 7.24.2
+ resolution: "@babel/code-frame@npm:7.24.2"
+ dependencies:
+ "@babel/highlight": "npm:^7.24.2"
+ picocolors: "npm:^1.0.0"
+ checksum: 10c0/d1d4cba89475ab6aab7a88242e1fd73b15ecb9f30c109b69752956434d10a26a52cbd37727c4eca104b6d45227bd1dfce39a6a6f4a14c9b2f07f871e968cf406
+ languageName: node
+ linkType: hard
+
"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/compat-data@npm:7.24.7"
@@ -470,6 +480,18 @@ __metadata:
languageName: node
linkType: hard
+"@babel/generator@npm:^7.24.1":
+ version: 7.24.4
+ resolution: "@babel/generator@npm:7.24.4"
+ dependencies:
+ "@babel/types": "npm:^7.24.0"
+ "@jridgewell/gen-mapping": "npm:^0.3.5"
+ "@jridgewell/trace-mapping": "npm:^0.3.25"
+ jsesc: "npm:^2.5.1"
+ checksum: 10c0/67a1b2f7cc985aaaa11b01e8ddd4fffa4f285837bc7a209738eb8203aa34bdafeb8507ed75fd883ddbabd641a036ca0a8d984e760f28ad4a9d60bff29d0a60bb
+ languageName: node
+ linkType: hard
+
"@babel/helper-annotate-as-pure@npm:7.22.5":
version: 7.22.5
resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -582,6 +604,16 @@ __metadata:
languageName: node
linkType: hard
+"@babel/helper-function-name@npm:^7.23.0":
+ version: 7.23.0
+ resolution: "@babel/helper-function-name@npm:7.23.0"
+ dependencies:
+ "@babel/template": "npm:^7.22.15"
+ "@babel/types": "npm:^7.23.0"
+ checksum: 10c0/d771dd1f3222b120518176733c52b7cadac1c256ff49b1889dbbe5e3fed81db855b8cc4e40d949c9d3eae0e795e8229c1c8c24c0e83f27cfa6ee3766696c6428
+ languageName: node
+ linkType: hard
+
"@babel/helper-function-name@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-function-name@npm:7.24.7"
@@ -592,6 +624,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/helper-hoist-variables@npm:^7.22.5":
+ version: 7.22.5
+ resolution: "@babel/helper-hoist-variables@npm:7.22.5"
+ dependencies:
+ "@babel/types": "npm:^7.22.5"
+ checksum: 10c0/60a3077f756a1cd9f14eb89f0037f487d81ede2b7cfe652ea6869cd4ec4c782b0fb1de01b8494b9a2d2050e3d154d7d5ad3be24806790acfb8cbe2073bf1e208
+ languageName: node
+ linkType: hard
+
"@babel/helper-hoist-variables@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-hoist-variables@npm:7.24.7"
@@ -645,7 +686,14 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.24.7, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+ version: 7.24.0
+ resolution: "@babel/helper-plugin-utils@npm:7.24.0"
+ checksum: 10c0/90f41bd1b4dfe7226b1d33a4bb745844c5c63e400f9e4e8bf9103a7ceddd7d425d65333b564d9daba3cebd105985764d51b4bd4c95822b97c2e3ac1201a8a5da
+ languageName: node
+ linkType: hard
+
+"@babel/helper-plugin-utils@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-plugin-utils@npm:7.24.7"
checksum: 10c0/c3d38cd9b3520757bb4a279255cc3f956fc0ac1c193964bd0816ebd5c86e30710be8e35252227e0c9d9e0f4f56d9b5f916537f2bc588084b0988b4787a967d31
@@ -698,7 +746,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-split-export-declaration@npm:7.22.6":
+"@babel/helper-split-export-declaration@npm:7.22.6, @babel/helper-split-export-declaration@npm:^7.22.6":
version: 7.22.6
resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
dependencies:
@@ -716,6 +764,13 @@ __metadata:
languageName: node
linkType: hard
+"@babel/helper-string-parser@npm:^7.23.4":
+ version: 7.23.4
+ resolution: "@babel/helper-string-parser@npm:7.23.4"
+ checksum: 10c0/f348d5637ad70b6b54b026d6544bd9040f78d24e7ec245a0fc42293968181f6ae9879c22d89744730d246ce8ec53588f716f102addd4df8bbc79b73ea10004ac
+ languageName: node
+ linkType: hard
+
"@babel/helper-string-parser@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-string-parser@npm:7.24.7"
@@ -723,6 +778,13 @@ __metadata:
languageName: node
linkType: hard
+"@babel/helper-validator-identifier@npm:^7.22.20":
+ version: 7.22.20
+ resolution: "@babel/helper-validator-identifier@npm:7.22.20"
+ checksum: 10c0/dcad63db345fb110e032de46c3688384b0008a42a4845180ce7cd62b1a9c0507a1bed727c4d1060ed1a03ae57b4d918570259f81724aaac1a5b776056f37504e
+ languageName: node
+ linkType: hard
+
"@babel/helper-validator-identifier@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-validator-identifier@npm:7.24.7"
@@ -759,6 +821,18 @@ __metadata:
languageName: node
linkType: hard
+"@babel/highlight@npm:^7.24.2":
+ version: 7.24.2
+ resolution: "@babel/highlight@npm:7.24.2"
+ dependencies:
+ "@babel/helper-validator-identifier": "npm:^7.22.20"
+ chalk: "npm:^2.4.2"
+ js-tokens: "npm:^4.0.0"
+ picocolors: "npm:^1.0.0"
+ checksum: 10c0/98ce00321daedeed33a4ed9362dc089a70375ff1b3b91228b9f05e6591d387a81a8cba68886e207861b8871efa0bc997ceabdd9c90f6cce3ee1b2f7f941b42db
+ languageName: node
+ linkType: hard
+
"@babel/highlight@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/highlight@npm:7.24.7"
@@ -780,6 +854,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/parser@npm:^7.24.1":
+ version: 7.24.4
+ resolution: "@babel/parser@npm:7.24.4"
+ bin:
+ parser: ./bin/babel-parser.js
+ checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8
+ languageName: node
+ linkType: hard
+
"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4":
version: 7.24.4
resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4"
@@ -2238,6 +2321,17 @@ __metadata:
languageName: node
linkType: hard
+"@babel/template@npm:^7.22.15":
+ version: 7.24.0
+ resolution: "@babel/template@npm:7.24.0"
+ dependencies:
+ "@babel/code-frame": "npm:^7.23.5"
+ "@babel/parser": "npm:^7.24.0"
+ "@babel/types": "npm:^7.24.0"
+ checksum: 10c0/9d3dd8d22fe1c36bc3bdef6118af1f4b030aaf6d7d2619f5da203efa818a2185d717523486c111de8d99a8649ddf4bbf6b2a7a64962d8411cf6a8fa89f010e54
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.23.9, @babel/template@npm:^7.24.0, @babel/template@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/template@npm:7.24.7"
@@ -2249,7 +2343,25 @@ __metadata:
languageName: node
linkType: hard
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.4.5":
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.4.5":
+ version: 7.24.1
+ resolution: "@babel/traverse@npm:7.24.1"
+ dependencies:
+ "@babel/code-frame": "npm:^7.24.1"
+ "@babel/generator": "npm:^7.24.1"
+ "@babel/helper-environment-visitor": "npm:^7.22.20"
+ "@babel/helper-function-name": "npm:^7.23.0"
+ "@babel/helper-hoist-variables": "npm:^7.22.5"
+ "@babel/helper-split-export-declaration": "npm:^7.22.6"
+ "@babel/parser": "npm:^7.24.1"
+ "@babel/types": "npm:^7.24.0"
+ debug: "npm:^4.3.1"
+ globals: "npm:^11.1.0"
+ checksum: 10c0/c087b918f6823776537ba246136c70e7ce0719fc05361ebcbfd16f4e6f2f6f1f8f4f9167f1d9b675f27d12074839605189cc9d689de20b89a85e7c140f23daab
+ languageName: node
+ linkType: hard
+
+"@babel/traverse@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/traverse@npm:7.24.7"
dependencies:
@@ -2278,6 +2390,17 @@ __metadata:
languageName: node
linkType: hard
+"@babel/types@npm:^7.23.0":
+ version: 7.24.0
+ resolution: "@babel/types@npm:7.24.0"
+ dependencies:
+ "@babel/helper-string-parser": "npm:^7.23.4"
+ "@babel/helper-validator-identifier": "npm:^7.22.20"
+ to-fast-properties: "npm:^2.0.0"
+ checksum: 10c0/777a0bb5dbe038ca4c905fdafb1cdb6bdd10fe9d63ce13eca0bd91909363cbad554a53dc1f902004b78c1dcbc742056f877f2c99eeedff647333b1fadf51235d
+ languageName: node
+ linkType: hard
+
"@base2/pretty-print-object@npm:1.0.1":
version: 1.0.1
resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -5838,7 +5961,7 @@ __metadata:
npmlog: "npm:^7.0.0"
open: "npm:^8.4.0"
picomatch: "npm:^2.3.0"
- picoquery: "npm:^1.3.0"
+ picoquery: "npm:^1.4.0"
polished: "npm:^4.2.2"
prettier: "npm:^3.2.5"
pretty-hrtime: "npm:^1.0.3"
@@ -9244,7 +9367,16 @@ __metadata:
languageName: node
linkType: hard
-"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+ version: 8.11.3
+ resolution: "acorn@npm:8.11.3"
+ bin:
+ acorn: bin/acorn
+ checksum: 10c0/3ff155f8812e4a746fee8ecff1f227d527c4c45655bb1fad6347c3cb58e46190598217551b1500f18542d2bbe5c87120cb6927f5a074a59166fbdd9468f0a299
+ languageName: node
+ linkType: hard
+
+"acorn@npm:^8.12.1":
version: 8.12.1
resolution: "acorn@npm:8.12.1"
bin:
@@ -9935,7 +10067,7 @@ __metadata:
languageName: node
linkType: hard
-"available-typed-arrays@npm:^1.0.7":
+"available-typed-arrays@npm:^1.0.6, available-typed-arrays@npm:^1.0.7":
version: 1.0.7
resolution: "available-typed-arrays@npm:1.0.7"
dependencies:
@@ -10462,7 +10594,16 @@ __metadata:
languageName: node
linkType: hard
-"braces@npm:^3.0.2, braces@npm:^3.0.3, braces@npm:~3.0.2":
+"braces@npm:^3.0.2, braces@npm:~3.0.2":
+ version: 3.0.2
+ resolution: "braces@npm:3.0.2"
+ dependencies:
+ fill-range: "npm:^7.0.1"
+ checksum: 10c0/321b4d675791479293264019156ca322163f02dc06e3c4cab33bb15cd43d80b51efef69b0930cfde3acd63d126ebca24cd0544fa6f261e093a0fb41ab9dda381
+ languageName: node
+ linkType: hard
+
+"braces@npm:^3.0.3":
version: 3.0.3
resolution: "braces@npm:3.0.3"
dependencies:
@@ -14789,6 +14930,15 @@ __metadata:
languageName: node
linkType: hard
+"fill-range@npm:^7.0.1":
+ version: 7.0.1
+ resolution: "fill-range@npm:7.0.1"
+ dependencies:
+ to-regex-range: "npm:^5.0.1"
+ checksum: 10c0/7cdad7d426ffbaadf45aeb5d15ec675bbd77f7597ad5399e3d2766987ed20bda24d5fac64b3ee79d93276f5865608bb22344a26b9b1ae6c4d00bd94bf611623f
+ languageName: node
+ linkType: hard
+
"fill-range@npm:^7.1.1":
version: 7.1.1
resolution: "fill-range@npm:7.1.1"
@@ -16022,7 +16172,7 @@ __metadata:
languageName: node
linkType: hard
-"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.2":
+"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.1, has-tostringtag@npm:^1.0.2":
version: 1.0.2
resolution: "has-tostringtag@npm:1.0.2"
dependencies:
@@ -22034,12 +22184,12 @@ __metadata:
languageName: node
linkType: hard
-"picoquery@npm:^1.3.0":
- version: 1.3.0
- resolution: "picoquery@npm:1.3.0"
+"picoquery@npm:^1.4.0":
+ version: 1.4.0
+ resolution: "picoquery@npm:1.4.0"
dependencies:
fast-decode-uri-component: "npm:^1.0.1"
- checksum: 10c0/7bbd692d3996caff8e19bb0590b925d673ec87bc3c005cce55610c64a7348129bfc6b4f47dcd578ebcf4ea12db958fb004439cf827b67741b927a17f32af00d4
+ checksum: 10c0/8c2bdb85eabb51ce1534d0a70ac288dac8d241a32e5d1ee960ee1ed7c5f522752db23cdc63318ac69ce892bdbcc465f4e2d25a5b970b7a29ffa36455cc2d022c
languageName: node
linkType: hard
@@ -28507,7 +28657,20 @@ __metadata:
languageName: node
linkType: hard
-"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
+ version: 1.1.14
+ resolution: "which-typed-array@npm:1.1.14"
+ dependencies:
+ available-typed-arrays: "npm:^1.0.6"
+ call-bind: "npm:^1.0.5"
+ for-each: "npm:^0.3.3"
+ gopd: "npm:^1.0.1"
+ has-tostringtag: "npm:^1.0.1"
+ checksum: 10c0/0960f1e77807058819451b98c51d4cd72031593e8de990b24bd3fc22e176f5eee22921d68d852297c786aec117689f0423ed20aa4fde7ce2704d680677891f56
+ languageName: node
+ linkType: hard
+
+"which-typed-array@npm:^1.1.15":
version: 1.1.15
resolution: "which-typed-array@npm:1.1.15"
dependencies:
From 5171010d595d9f7f29c623fe0b7c8b401bd12a7c Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Sun, 28 Jul 2024 12:59:47 +0100
Subject: [PATCH 009/213] test: add prefix to test queries
---
code/core/src/manager-api/tests/url.test.js | 12 ++++++------
code/core/src/router/utils.ts | 2 +-
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/code/core/src/manager-api/tests/url.test.js b/code/core/src/manager-api/tests/url.test.js
index 53946d7ab6b9..ef9e70482dc2 100644
--- a/code/core/src/manager-api/tests/url.test.js
+++ b/code/core/src/manager-api/tests/url.test.js
@@ -18,7 +18,7 @@ describe('initial state', () => {
describe('config query parameters', () => {
it('handles full parameter', () => {
const navigate = vi.fn();
- const location = { search: new URLSearchParams({ full: '1' }).toString() };
+ const location = { search: '?' + new URLSearchParams({ full: '1' }).toString() };
const {
state: { layout },
@@ -33,7 +33,7 @@ describe('initial state', () => {
it('handles nav parameter', () => {
const navigate = vi.fn();
- const location = { search: new URLSearchParams({ nav: '0' }).toString() };
+ const location = { search: '?' + new URLSearchParams({ nav: '0' }).toString() };
const {
state: { layout },
@@ -44,7 +44,7 @@ describe('initial state', () => {
it('handles shortcuts parameter', () => {
const navigate = vi.fn();
- const location = { search: new URLSearchParams({ shortcuts: '0' }).toString() };
+ const location = { search: '?' + new URLSearchParams({ shortcuts: '0' }).toString() };
const {
state: { ui },
@@ -55,7 +55,7 @@ describe('initial state', () => {
it('handles panel parameter, bottom', () => {
const navigate = vi.fn();
- const location = { search: new URLSearchParams({ panel: 'bottom' }).toString() };
+ const location = { search: '?' + new URLSearchParams({ panel: 'bottom' }).toString() };
const {
state: { layout },
@@ -66,7 +66,7 @@ describe('initial state', () => {
it('handles panel parameter, right', () => {
const navigate = vi.fn();
- const location = { search: new URLSearchParams({ panel: 'right' }).toString() };
+ const location = { search: '?' + new URLSearchParams({ panel: 'right' }).toString() };
const {
state: { layout },
@@ -77,7 +77,7 @@ describe('initial state', () => {
it('handles panel parameter, 0', () => {
const navigate = vi.fn();
- const location = { search: new URLSearchParams({ panel: '0' }).toString() };
+ const location = { search: '?' + new URLSearchParams({ panel: '0' }).toString() };
const {
state: { layout },
diff --git a/code/core/src/router/utils.ts b/code/core/src/router/utils.ts
index c670c5aea790..e8a357b06f29 100644
--- a/code/core/src/router/utils.ts
+++ b/code/core/src/router/utils.ts
@@ -175,7 +175,7 @@ interface Query {
}
export const queryFromString = memoize(1000)(
- (s?: string): Query => (s !== undefined ? parse(s) : {})
+ (s?: string): Query => (s !== undefined ? parse(s, QS_OPTIONS) : {})
);
export const queryFromLocation = (location: Partial) =>
queryFromString(location.search ? location.search.slice(1) : '');
From 8f6ff036d1313c8b981993a9df9b6baabc9b14ea Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Fri, 2 Aug 2024 22:56:45 +0200
Subject: [PATCH 010/213] dedupe
---
code/yarn.lock | 179 +++----------------------------------------------
1 file changed, 8 insertions(+), 171 deletions(-)
diff --git a/code/yarn.lock b/code/yarn.lock
index f38ef7f57730..0c6f112474b9 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -370,16 +370,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/code-frame@npm:^7.24.1":
- version: 7.24.2
- resolution: "@babel/code-frame@npm:7.24.2"
- dependencies:
- "@babel/highlight": "npm:^7.24.2"
- picocolors: "npm:^1.0.0"
- checksum: 10c0/d1d4cba89475ab6aab7a88242e1fd73b15ecb9f30c109b69752956434d10a26a52cbd37727c4eca104b6d45227bd1dfce39a6a6f4a14c9b2f07f871e968cf406
- languageName: node
- linkType: hard
-
"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/compat-data@npm:7.24.7"
@@ -480,18 +470,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/generator@npm:^7.24.1":
- version: 7.24.4
- resolution: "@babel/generator@npm:7.24.4"
- dependencies:
- "@babel/types": "npm:^7.24.0"
- "@jridgewell/gen-mapping": "npm:^0.3.5"
- "@jridgewell/trace-mapping": "npm:^0.3.25"
- jsesc: "npm:^2.5.1"
- checksum: 10c0/67a1b2f7cc985aaaa11b01e8ddd4fffa4f285837bc7a209738eb8203aa34bdafeb8507ed75fd883ddbabd641a036ca0a8d984e760f28ad4a9d60bff29d0a60bb
- languageName: node
- linkType: hard
-
"@babel/helper-annotate-as-pure@npm:7.22.5":
version: 7.22.5
resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -604,16 +582,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-function-name@npm:^7.23.0":
- version: 7.23.0
- resolution: "@babel/helper-function-name@npm:7.23.0"
- dependencies:
- "@babel/template": "npm:^7.22.15"
- "@babel/types": "npm:^7.23.0"
- checksum: 10c0/d771dd1f3222b120518176733c52b7cadac1c256ff49b1889dbbe5e3fed81db855b8cc4e40d949c9d3eae0e795e8229c1c8c24c0e83f27cfa6ee3766696c6428
- languageName: node
- linkType: hard
-
"@babel/helper-function-name@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-function-name@npm:7.24.7"
@@ -624,15 +592,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-hoist-variables@npm:^7.22.5":
- version: 7.22.5
- resolution: "@babel/helper-hoist-variables@npm:7.22.5"
- dependencies:
- "@babel/types": "npm:^7.22.5"
- checksum: 10c0/60a3077f756a1cd9f14eb89f0037f487d81ede2b7cfe652ea6869cd4ec4c782b0fb1de01b8494b9a2d2050e3d154d7d5ad3be24806790acfb8cbe2073bf1e208
- languageName: node
- linkType: hard
-
"@babel/helper-hoist-variables@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-hoist-variables@npm:7.24.7"
@@ -686,14 +645,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
- version: 7.24.0
- resolution: "@babel/helper-plugin-utils@npm:7.24.0"
- checksum: 10c0/90f41bd1b4dfe7226b1d33a4bb745844c5c63e400f9e4e8bf9103a7ceddd7d425d65333b564d9daba3cebd105985764d51b4bd4c95822b97c2e3ac1201a8a5da
- languageName: node
- linkType: hard
-
-"@babel/helper-plugin-utils@npm:^7.24.7":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.24.7, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
version: 7.24.7
resolution: "@babel/helper-plugin-utils@npm:7.24.7"
checksum: 10c0/c3d38cd9b3520757bb4a279255cc3f956fc0ac1c193964bd0816ebd5c86e30710be8e35252227e0c9d9e0f4f56d9b5f916537f2bc588084b0988b4787a967d31
@@ -746,7 +698,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-split-export-declaration@npm:7.22.6, @babel/helper-split-export-declaration@npm:^7.22.6":
+"@babel/helper-split-export-declaration@npm:7.22.6":
version: 7.22.6
resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
dependencies:
@@ -764,13 +716,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-string-parser@npm:^7.23.4":
- version: 7.23.4
- resolution: "@babel/helper-string-parser@npm:7.23.4"
- checksum: 10c0/f348d5637ad70b6b54b026d6544bd9040f78d24e7ec245a0fc42293968181f6ae9879c22d89744730d246ce8ec53588f716f102addd4df8bbc79b73ea10004ac
- languageName: node
- linkType: hard
-
"@babel/helper-string-parser@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-string-parser@npm:7.24.7"
@@ -778,13 +723,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-validator-identifier@npm:^7.22.20":
- version: 7.22.20
- resolution: "@babel/helper-validator-identifier@npm:7.22.20"
- checksum: 10c0/dcad63db345fb110e032de46c3688384b0008a42a4845180ce7cd62b1a9c0507a1bed727c4d1060ed1a03ae57b4d918570259f81724aaac1a5b776056f37504e
- languageName: node
- linkType: hard
-
"@babel/helper-validator-identifier@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-validator-identifier@npm:7.24.7"
@@ -821,18 +759,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/highlight@npm:^7.24.2":
- version: 7.24.2
- resolution: "@babel/highlight@npm:7.24.2"
- dependencies:
- "@babel/helper-validator-identifier": "npm:^7.22.20"
- chalk: "npm:^2.4.2"
- js-tokens: "npm:^4.0.0"
- picocolors: "npm:^1.0.0"
- checksum: 10c0/98ce00321daedeed33a4ed9362dc089a70375ff1b3b91228b9f05e6591d387a81a8cba68886e207861b8871efa0bc997ceabdd9c90f6cce3ee1b2f7f941b42db
- languageName: node
- linkType: hard
-
"@babel/highlight@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/highlight@npm:7.24.7"
@@ -854,15 +780,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/parser@npm:^7.24.1":
- version: 7.24.4
- resolution: "@babel/parser@npm:7.24.4"
- bin:
- parser: ./bin/babel-parser.js
- checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8
- languageName: node
- linkType: hard
-
"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4":
version: 7.24.4
resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4"
@@ -2321,17 +2238,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/template@npm:^7.22.15":
- version: 7.24.0
- resolution: "@babel/template@npm:7.24.0"
- dependencies:
- "@babel/code-frame": "npm:^7.23.5"
- "@babel/parser": "npm:^7.24.0"
- "@babel/types": "npm:^7.24.0"
- checksum: 10c0/9d3dd8d22fe1c36bc3bdef6118af1f4b030aaf6d7d2619f5da203efa818a2185d717523486c111de8d99a8649ddf4bbf6b2a7a64962d8411cf6a8fa89f010e54
- languageName: node
- linkType: hard
-
"@babel/template@npm:^7.23.9, @babel/template@npm:^7.24.0, @babel/template@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/template@npm:7.24.7"
@@ -2343,25 +2249,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.4.5":
- version: 7.24.1
- resolution: "@babel/traverse@npm:7.24.1"
- dependencies:
- "@babel/code-frame": "npm:^7.24.1"
- "@babel/generator": "npm:^7.24.1"
- "@babel/helper-environment-visitor": "npm:^7.22.20"
- "@babel/helper-function-name": "npm:^7.23.0"
- "@babel/helper-hoist-variables": "npm:^7.22.5"
- "@babel/helper-split-export-declaration": "npm:^7.22.6"
- "@babel/parser": "npm:^7.24.1"
- "@babel/types": "npm:^7.24.0"
- debug: "npm:^4.3.1"
- globals: "npm:^11.1.0"
- checksum: 10c0/c087b918f6823776537ba246136c70e7ce0719fc05361ebcbfd16f4e6f2f6f1f8f4f9167f1d9b675f27d12074839605189cc9d689de20b89a85e7c140f23daab
- languageName: node
- linkType: hard
-
-"@babel/traverse@npm:^7.24.7":
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.4.5":
version: 7.24.7
resolution: "@babel/traverse@npm:7.24.7"
dependencies:
@@ -2390,17 +2278,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/types@npm:^7.23.0":
- version: 7.24.0
- resolution: "@babel/types@npm:7.24.0"
- dependencies:
- "@babel/helper-string-parser": "npm:^7.23.4"
- "@babel/helper-validator-identifier": "npm:^7.22.20"
- to-fast-properties: "npm:^2.0.0"
- checksum: 10c0/777a0bb5dbe038ca4c905fdafb1cdb6bdd10fe9d63ce13eca0bd91909363cbad554a53dc1f902004b78c1dcbc742056f877f2c99eeedff647333b1fadf51235d
- languageName: node
- linkType: hard
-
"@base2/pretty-print-object@npm:1.0.1":
version: 1.0.1
resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -9379,16 +9256,7 @@ __metadata:
languageName: node
linkType: hard
-"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
- version: 8.11.3
- resolution: "acorn@npm:8.11.3"
- bin:
- acorn: bin/acorn
- checksum: 10c0/3ff155f8812e4a746fee8ecff1f227d527c4c45655bb1fad6347c3cb58e46190598217551b1500f18542d2bbe5c87120cb6927f5a074a59166fbdd9468f0a299
- languageName: node
- linkType: hard
-
-"acorn@npm:^8.12.1":
+"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
version: 8.12.1
resolution: "acorn@npm:8.12.1"
bin:
@@ -10079,7 +9947,7 @@ __metadata:
languageName: node
linkType: hard
-"available-typed-arrays@npm:^1.0.6, available-typed-arrays@npm:^1.0.7":
+"available-typed-arrays@npm:^1.0.7":
version: 1.0.7
resolution: "available-typed-arrays@npm:1.0.7"
dependencies:
@@ -10606,16 +10474,7 @@ __metadata:
languageName: node
linkType: hard
-"braces@npm:^3.0.2, braces@npm:~3.0.2":
- version: 3.0.2
- resolution: "braces@npm:3.0.2"
- dependencies:
- fill-range: "npm:^7.0.1"
- checksum: 10c0/321b4d675791479293264019156ca322163f02dc06e3c4cab33bb15cd43d80b51efef69b0930cfde3acd63d126ebca24cd0544fa6f261e093a0fb41ab9dda381
- languageName: node
- linkType: hard
-
-"braces@npm:^3.0.3":
+"braces@npm:^3.0.2, braces@npm:^3.0.3, braces@npm:~3.0.2":
version: 3.0.3
resolution: "braces@npm:3.0.3"
dependencies:
@@ -14942,15 +14801,6 @@ __metadata:
languageName: node
linkType: hard
-"fill-range@npm:^7.0.1":
- version: 7.0.1
- resolution: "fill-range@npm:7.0.1"
- dependencies:
- to-regex-range: "npm:^5.0.1"
- checksum: 10c0/7cdad7d426ffbaadf45aeb5d15ec675bbd77f7597ad5399e3d2766987ed20bda24d5fac64b3ee79d93276f5865608bb22344a26b9b1ae6c4d00bd94bf611623f
- languageName: node
- linkType: hard
-
"fill-range@npm:^7.1.1":
version: 7.1.1
resolution: "fill-range@npm:7.1.1"
@@ -16184,7 +16034,7 @@ __metadata:
languageName: node
linkType: hard
-"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.1, has-tostringtag@npm:^1.0.2":
+"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.2":
version: 1.0.2
resolution: "has-tostringtag@npm:1.0.2"
dependencies:
@@ -28675,20 +28525,7 @@ __metadata:
languageName: node
linkType: hard
-"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
- version: 1.1.14
- resolution: "which-typed-array@npm:1.1.14"
- dependencies:
- available-typed-arrays: "npm:^1.0.6"
- call-bind: "npm:^1.0.5"
- for-each: "npm:^0.3.3"
- gopd: "npm:^1.0.1"
- has-tostringtag: "npm:^1.0.1"
- checksum: 10c0/0960f1e77807058819451b98c51d4cd72031593e8de990b24bd3fc22e176f5eee22921d68d852297c786aec117689f0423ed20aa4fde7ce2704d680677891f56
- languageName: node
- linkType: hard
-
-"which-typed-array@npm:^1.1.15":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
version: 1.1.15
resolution: "which-typed-array@npm:1.1.15"
dependencies:
From 2bdd9dc9692f04276d1809f0917af3342fc45ce7 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Mon, 19 Aug 2024 23:00:11 -0600
Subject: [PATCH 011/213] WIP: Docs for Test runner with Vitest
- Includes sidebar order updates
- Use non-zero-indexed orders
---
.../portable-stories-jest.mdx | 2 +-
.../portable-stories-playwright.mdx | 2 +-
.../portable-stories-vitest.mdx | 2 +-
docs/writing-tests/accessibility-testing.mdx | 2 +-
docs/writing-tests/addon-vitest.mdx | 346 ++++++++++++++++++
.../import-stories-in-tests/index.mdx | 2 +-
.../stories-in-end-to-end-tests.mdx | 2 +-
.../stories-in-unit-tests.mdx | 2 +-
docs/writing-tests/interaction-testing.mdx | 2 +-
docs/writing-tests/snapshot-testing/index.mdx | 2 +-
.../snapshot-testing/snapshot-testing.mdx | 2 +
.../storyshots-migration-guide.mdx | 2 +
docs/writing-tests/test-coverage.mdx | 2 +-
docs/writing-tests/visual-testing.mdx | 2 +-
14 files changed, 361 insertions(+), 11 deletions(-)
create mode 100644 docs/writing-tests/addon-vitest.mdx
diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx
index 64038d44dd7a..209aa2942e49 100644
--- a/docs/api/portable-stories/portable-stories-jest.mdx
+++ b/docs/api/portable-stories/portable-stories-jest.mdx
@@ -2,7 +2,7 @@
title: 'Portable stories in Jest'
sidebar:
title: Jest
- order: 1
+ order: 2
---
diff --git a/docs/api/portable-stories/portable-stories-playwright.mdx b/docs/api/portable-stories/portable-stories-playwright.mdx
index 2cbae20f3dd9..a2becdc78b74 100644
--- a/docs/api/portable-stories/portable-stories-playwright.mdx
+++ b/docs/api/portable-stories/portable-stories-playwright.mdx
@@ -2,7 +2,7 @@
title: 'Portable stories in Playwright CT'
sidebar:
title: Playwright
- order: 2
+ order: 3
---
(⚠️ **Experimental**)
diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
index 11aa9b99475d..281d18b1adf9 100644
--- a/docs/api/portable-stories/portable-stories-vitest.mdx
+++ b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -2,7 +2,7 @@
title: 'Portable stories in Vitest'
sidebar:
title: Vitest
- order: 0
+ order: 1
---
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
index 5942811bfb27..2c2eebbe506a 100644
--- a/docs/writing-tests/accessibility-testing.mdx
+++ b/docs/writing-tests/accessibility-testing.mdx
@@ -1,7 +1,7 @@
---
title: 'Accessibility tests'
sidebar:
- order: 3
+ order: 4
title: Accessibility tests
---
diff --git a/docs/writing-tests/addon-vitest.mdx b/docs/writing-tests/addon-vitest.mdx
new file mode 100644
index 000000000000..139f9e6d170e
--- /dev/null
+++ b/docs/writing-tests/addon-vitest.mdx
@@ -0,0 +1,346 @@
+---
+title: 'Test runner with Vitest'
+sidebar:
+ order: 2
+ title: Test runner with Vitest
+---
+
+TK - Intro
+
+## Set up
+
+To get started, run the following command to install and configure the addon:
+
+{/* TODO: Snippetize */}
+```sh
+npx storybook@latest add @storybook/experimental-addon-vitest
+```
+
+That command will do the following:
+
+1. Install and register the Vitest addon, which contains the plugin to run your stories as tests
+1. Inspect your project's Vite and Vitest setup
+ 1. If Vite is not installed and you're using the [`nextjs` framework](../get-started/frameworks/nextjs.mdx), it will install and configure Vite for you, as well as `vite-plugin-storybook-nextjs` (necessary to have your Next.js components function in Vitest).
+ 1. Otherwise, if Vite is not installed, it will stop and point you to these instructions to continue setting it up in your project.
+ 1. If Vite is installed, it will then check for Vitest.
+ 1. If Vitest is not installed, it will:
+ 1. Install `vitest`, `@vitest/browser`, and `playwright`
+ 1. Run `npx playwright install chromium` to install the Chromium browser engine
+ 1. Create a Vitest config file (`vitest.config.ts`) and a Vitest setup file (`storybook.setup.ts`)
+ 1. If Vitest is installed, it will stop and point you to these instructions to continue setting it up in your project.
+
+
+
+ If your stories use template-based Vue components, you may need to [alias the `vue` module](https://vuejs.org/guide/scaling-up/tooling#note-on-in-browser-template-compilation) to resolve correctly in the Playwright CT environment. You can do this via the [`ctViteConfig` property](https://playwright.dev/docs/test-components#i-have-a-project-that-already-uses-vite-can-i-reuse-the-config):
+
+
+ Example Playwright configuration
+
+```ts
+// playwright-config.ts
+import { defineConfig } from '@playwright/experimental-ct-vue';
+
+export default defineConfig({
+ ctViteConfig: {
+ resolve: {
+ alias: {
+ vue: 'vue/dist/vue.esm-bundler.js',
+ },
+ },
+ },
+});
+```
+
+
+
+
+The configuration produced by the `add` command will attempt to set some sensible defaults for your project. However, you may need to adjust the configuration to fit your project's needs. The full configuration options can be found in the [API section](#options), below.
+
+### Example configuration files
+
+Here are configuration files generated by the `add` command. You can use these as a reference when setting up your project.
+
+
+ Example Vitest setup file
+
+```ts title="storybook.setup.ts"
+TK
+```
+
+
+
+ Example Vitest config file
+
+```ts title="vitest.config.ts"
+import { defineConfig, mergeConfig } from 'vitest/config'
+import viteConfig from '../vite.config'
+import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
+
+export default mergeConfig(
+ viteConfig,
+ defineConfig({
+ // ... TK
+ })
+)
+```
+
+
+
+ Example Vitest workspace file
+
+{/* TODO: Nextjs & SvelteKit examples */}
+```ts title="vitest.workspace.ts"
+import { defineWorkspace } from 'vitest/config'
+import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
+
+export default defineWorkspace([
+ // This is the path to your existing Vitest config files
+ './vitest.config.ts',
+ {
+ name: 'storybook',
+ plugins: [
+ storybookTest({
+ storybookScript: 'yarn storybook --ci',
+ }),
+ ],
+ // Glob pattern to find story files
+ include: ['../src/**/*.stories.?(m)[jt]s?(x)'],
+ // Enable browser mode
+ browser: {
+ enabled: true,
+ name: 'chromium',
+ // Make sure to install Playwright
+ provider: 'playwright',
+ headless: true,
+ },
+ setupFiles: ['./storybook.setup.ts'],
+ }
+])
+```
+
+
+## How it works
+
+Before running tests using the plugin, it's helpful to understand how it works.
+
+First, the plugin does not need to run or build Storybook to test your stories. Instead, it transforms your stories into tests using Vite and [portable stories](../api/portable-stories/portable-stories-vitest.mdx). Portable stories are a mechanism to compose all of a story's configuration ([parameters](../writing-stories/parameters.mdx), [decorators](../writing-stories/decorators.mdx), etc.) with the story itself. This allows you to run your stories as tests without needing to run Storybook.
+
+Those tests are then run using Vitest. We recommend (and configure, by default) running Vitest in browser mode, using Playwright's Chromium browser. Browser mode ensures your components are tested in a real browser environment, which is more accurate than simulations like JSDom or HappyDom. This is especially important for testing components that rely on browser APIs or features.
+
+Stories are tested in two ways: a smoke test to ensure it renders and, if a [play function](../writing-stories/play-function.mdx) is defined, that function is run and any [assertions made](../writing-tests/interaction-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
+
+### Debugging
+
+While the plugin does not require Storybook to run when testing, you may still want to run Storybook to debug your tests. To enable this, provide the [`storybookScript` option](#storybookscript) in the plugin configuration. When you run Vitest in watch mode, the plugin will start Storybook using this script and provide links to the story in the output on test failures. This allows you to quickly jump to the story in Storybook to debug the issue.
+
+You can also provide a [`storybookUrl` option](#storybookurl) to the plugin configuration. When you're not using watch mode and tests fail, the plugin will provide a link to the story using this URL in the output. This is useful when [running tests in CI](#in-ci) or other environments where Storybook is not already running.
+
+TK - Screenshot of test output with links to SB
+
+## Usage
+
+There are three primary ways to run tests using the Vitest plugin:
+
+### CLI
+
+The plugin transforms your stories into real Vitest tests, so you run those tests just like you run any other Vitest tests in your project. Typically, you will have a `test` script in your `package.json` that runs Vitest. When you run that script, the addon will find and run your story-based tests. Here's an example of running your tests (in [watch mode](https://vitest.dev/guide/cli.html#vitest-watch), by default) using the Vitest CLI:
+
+{/* TODO: Snippetize */}
+```sh
+npm run test
+```
+
+### Editor extension
+
+Transforming your stories into Vitest tests with the plugin also enables you to run and debug tests using Vitest [IDE integrations](https://vitest.dev/guide/ide.html). This allows you to run tests directly from your editor, such as VSCode and JetBrains IDE.
+
+TK - Screenshot of VS Code
+
+### In CI
+
+For the most part, running your Storybook tests in CI is done [via the CLI](#cli). However, to have the test output link to your published Storybook on test failures, you need to provide the [`storybookUrl` option](#storybookurl) in the plugin configuration.
+
+Here's an example using GitHub Actions. The steps are similar for other CI providers, though details in the syntax or configuration may vary.
+
+First, we run a command to build and publish Storybook. In this case, we'll use Chromatic. This gives us a URL to the published Storybook instance. We then pass that URL to the plugin configuration using an environment variable. Finally, we update the plugin configuration to use that environment variable in the `storybookUrl` option.
+
+```yaml
+TK
+```
+
+```js title="vitest.workspace.ts"
+process.env.SB_URL
+```
+
+## Configuration
+
+Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested.
+
+In this example, the Default story will not be tested, and the Primary story will.
+
+{/* TODO: Snippetize */}
+```js title="Button.stories.tsx"
+import { Button } from './Button'
+
+export default {
+ component: Button,
+ // 👇 Apply `test` tag to all stories in this file
+ tags: ['test'],
+}
+
+export const Default = {
+ // 👇 Remove `test` tag from this story
+ tags: ['!test'],
+}
+
+export const Primary = {
+ args: { primary: true }
+}
+```
+
+By default, the plugin will run all stories with the `test` tag. You can adjust this behavior by providing the [`tags` option](#tags) in the plugin configuration. This allows you to include, exclude, or skip stories based on their tags.
+
+Here's an example of how you might configure the plugin to only run stories with the `test` and `spec` tags, while excluding stories with the `docs-only` tag:
+
+{/* TODO: Snippetize */}
+```js title="vitest.workspace.ts"
+{
+ plugins: [
+ storybookTest({
+ tags: {
+ include: ['test', 'spec'],
+ exclude: ['docs-only'],
+ },
+ }),
+ ],
+}
+```
+
+If the same tag is in both the `include` and `exclude` arrays, the `exclude` behavior takes precedence.
+
+## FAQ
+
+### How to ensure my tests can find assets in the public directory?
+
+If your stories use assets in the public directory and you're not using the default public directory location (`public`), you need to adjust the Vitest configuration to include the public directory. You can do this by providing the `publicDir` option in the Vitest configuration file.
+
+```ts
+TK
+```
+
+### How to debug my tests in Storybook?
+
+The plugin will attempt to provide links to the story in Storybook when tests fail, for [debugging](#debugging) purposes.
+
+If the URLs are not working when running tests in watch mode, you should check two configuration options:
+
+- [`storybookUrl`](#storybookurl): Ensure this URL is correct and accessible. For example, the default is `http://localhost:6006`, which may not use the same port number you're using.
+- [`storybookScript`](#storybookscript): Ensure this script is correctly starting Storybook.
+
+If the URLs are not working when running tests in CI, you should ensure the Storybook is built and published before running the tests. You can then provide the URL to the published Storybook using the `storybookUrl` option. See the [In CI](#in-ci) section for an example.
+
+### How to apply custom Vite configuration?
+
+If you have custom operations defined in [`viteFinal`](../api/main-config/main-config-vite-final.mdx) in your `.storybook/main.js|ts` file, you will need to translate those into the Vitest configuration. This is because the plugin does not use the Storybook Vite configuration.
+
+```ts
+TK
+```
+
+### Why do we recommend browser mode?
+
+```
+1. It’s a real browser environment. JSDom/HappyDom are simulations with shortcomings.
+2. https://vitest.dev/guide/browser/#motivation
+```
+
+### How to use WebDriver instead of Playwright?
+
+```
+https://vitest.dev/config/#browser-provider
+```
+
+### How to use a browser other than Chromium
+
+```
+https://vitest.dev/config/#browser-46-name
+```
+
+### How is this different from the test runner?
+
+```
+1. TR requires an SB instance to be running; this does not (except for debugging)
+2. TR runs SB and listens to results; this transforms stories (using portable stories) into tests
+3. TR is based on Jest; this is based on Vitest
+4. This is more configurable and more simple than TR
+ 1. TR is always a separate command; this is just Vitest (`yarn test`)
+5. This is faster than TR
+ 1. Needs benchmarks
+ 1. a sandbox run in our monorepo
+ 1. Vitest plugin: 1m 6s
+ 2. Test-runner: 1m 14s + SB build & publish time
+```
+
+### Why does the `add` command stop in some cases?
+
+TK
+
+## API
+
+### Exports
+
+`@storybook/experimental-addon-vitest/plugin`
+
+TK
+
+### Options
+
+#### `configDir`
+
+Type: `string`
+
+Default: `.storybook`
+
+The directory where the Storybook configuration is located, relative to CWD. If not provided, the plugin will use `.storybook` in the current working directory.
+
+#### `storybookScript`
+
+Type: `string`
+
+Optional script to run Storybook. If provided, Vitest will start Storybook using this script when run in watch mode. Only runs if the Storybook in `storybookUrl` is not already available.
+
+#### `storybookUrl`
+
+Type: `string`
+
+Default: `http://localhost:6006`
+
+The URL where Storybook is hosted. This is used for internal checks and to provide a link to the story in the test output on failures.
+
+#### `tags`
+
+Type:
+
+```ts
+{
+ include: string[];
+ exclude: string[];
+ skip: string[];
+}
+```
+
+Default:
+
+```ts
+{
+ include: ['test'],
+ exclude: [],
+ skip: [],
+}
+```
+
+Tags to include, exclude, or skip. These tags are defined as annotations in your story, meta, or preview.
+
+- `include`: `string[]` - Tags to include.
+- `exclude`: `string[]` - Tags to exclude.
+- `skip`: `string[]` - Tags to skip.
diff --git a/docs/writing-tests/import-stories-in-tests/index.mdx b/docs/writing-tests/import-stories-in-tests/index.mdx
index c845f373267b..dc51d8da2e83 100644
--- a/docs/writing-tests/import-stories-in-tests/index.mdx
+++ b/docs/writing-tests/import-stories-in-tests/index.mdx
@@ -1,6 +1,6 @@
---
title: Import stories in tests
sidebar:
- order: 7
+ order: 8
title: Import stories in tests
---
\ No newline at end of file
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
index 77167db0e88a..59997b7a38ee 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
@@ -2,7 +2,7 @@
title: 'Stories in end-to-end tests'
sidebar:
title: End-to-end tests
- order: 1
+ order: 2
---
Storybook seamlessly integrates with additional testing frameworks like [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/) to provide a comprehensive testing solution. By leveraging the Component Story Format (CSF), developers can write test cases that simulate user interactions and verify the behavior of individual components within the Storybook environment. This approach enables developers to thoroughly test their components' functionality, responsiveness, and visual appearance across different scenarios, resulting in more robust and reliable applications.
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
index 7d16abf31b5f..67ab0e6585b2 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx
@@ -2,7 +2,7 @@
title: 'Stories in unit tests'
sidebar:
title: Unit tests
- order: 0
+ order: 1
---
Teams test a variety of UI characteristics using different tools. Each tool requires you to replicate the same component state over and over. That’s a maintenance headache. Ideally, you’d set up your tests similarly and reuse that across tools.
diff --git a/docs/writing-tests/interaction-testing.mdx b/docs/writing-tests/interaction-testing.mdx
index a2ee5908316e..dee9c7409b11 100644
--- a/docs/writing-tests/interaction-testing.mdx
+++ b/docs/writing-tests/interaction-testing.mdx
@@ -1,7 +1,7 @@
---
title: 'Interaction tests'
sidebar:
- order: 4
+ order: 5
title: Interaction tests
---
diff --git a/docs/writing-tests/snapshot-testing/index.mdx b/docs/writing-tests/snapshot-testing/index.mdx
index 6ec310332af2..4ce4b3630102 100644
--- a/docs/writing-tests/snapshot-testing/index.mdx
+++ b/docs/writing-tests/snapshot-testing/index.mdx
@@ -1,6 +1,6 @@
---
title: Snapshot testing
sidebar:
- order: 6
+ order: 7
title: Snapshot testing
---
\ No newline at end of file
diff --git a/docs/writing-tests/snapshot-testing/snapshot-testing.mdx b/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
index bc9ca5b12225..7565090aff5a 100644
--- a/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
+++ b/docs/writing-tests/snapshot-testing/snapshot-testing.mdx
@@ -1,5 +1,7 @@
---
title: 'Write snapshot tests'
+sidebar:
+ order: 1
---
Snapshot tests compare the rendered markup of every story against known baselines. It’s a way to identify markup changes that trigger rendering errors and warnings.
diff --git a/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx b/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
index 7c4e5ec96847..18c2b5022be3 100644
--- a/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
+++ b/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx
@@ -1,5 +1,7 @@
---
title: 'Storyshots migration guide'
+sidebar:
+ order: 2
---
diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index 63ae072264eb..0d09d2033565 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -1,7 +1,7 @@
---
title: 'Test coverage'
sidebar:
- order: 5
+ order: 6
title: Test coverage
---
diff --git a/docs/writing-tests/visual-testing.mdx b/docs/writing-tests/visual-testing.mdx
index 33288d79a7f0..ba061e5f026f 100644
--- a/docs/writing-tests/visual-testing.mdx
+++ b/docs/writing-tests/visual-testing.mdx
@@ -2,7 +2,7 @@
title: Visual tests
hideRendererSelector: true
sidebar:
- order: 2
+ order: 3
title: Visual tests
---
From 89be6a0b45870c4b60d9f5ebb249b2bbb0675623 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Wed, 21 Aug 2024 14:54:54 -0600
Subject: [PATCH 012/213] More updates
---
docs/writing-tests/addon-vitest.mdx | 205 ++++++++++++++++------------
1 file changed, 120 insertions(+), 85 deletions(-)
diff --git a/docs/writing-tests/addon-vitest.mdx b/docs/writing-tests/addon-vitest.mdx
index 139f9e6d170e..0f472f806364 100644
--- a/docs/writing-tests/addon-vitest.mdx
+++ b/docs/writing-tests/addon-vitest.mdx
@@ -5,47 +5,43 @@ sidebar:
title: Test runner with Vitest
---
-TK - Intro
+(⚠️ **Experimental**)
-## Set up
+Storybook's test runner with Vitest uses a Vitest plugin to transform your [stories](../writing-stories/index.mdx) into tests. You can then run those tests just like any other in Vitest, which will check that the story renders without errors and, if a [play function](../writing-stories/play-function.mdx) is defined, that it runs as expected and any [assertions made](../writing-tests/interaction-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
-To get started, run the following command to install and configure the addon:
+By using Vitest's browser mode, those tests are run in a real browser environment, which gives you more reliable results for UI components that commonly rely on browser APIs or features.
+
+## Setup
+
+Get started by installing and configuring the plugin in your project.
+
+### Automatic
+
+Run the following command to install and configure the addon, which contains the plugin to run your stories as tests using Vitest:
{/* TODO: Snippetize */}
```sh
npx storybook@latest add @storybook/experimental-addon-vitest
```
-That command will do the following:
-
-1. Install and register the Vitest addon, which contains the plugin to run your stories as tests
-1. Inspect your project's Vite and Vitest setup
- 1. If Vite is not installed and you're using the [`nextjs` framework](../get-started/frameworks/nextjs.mdx), it will install and configure Vite for you, as well as `vite-plugin-storybook-nextjs` (necessary to have your Next.js components function in Vitest).
- 1. Otherwise, if Vite is not installed, it will stop and point you to these instructions to continue setting it up in your project.
- 1. If Vite is installed, it will then check for Vitest.
- 1. If Vitest is not installed, it will:
- 1. Install `vitest`, `@vitest/browser`, and `playwright`
- 1. Run `npx playwright install chromium` to install the Chromium browser engine
- 1. Create a Vitest config file (`vitest.config.ts`) and a Vitest setup file (`storybook.setup.ts`)
- 1. If Vitest is installed, it will stop and point you to these instructions to continue setting it up in your project.
+That command will install and register the Vitest addon. It will also inspect your project's Vite and Vitest setup, and install and configure them if necessary.
- If your stories use template-based Vue components, you may need to [alias the `vue` module](https://vuejs.org/guide/scaling-up/tooling#note-on-in-browser-template-compilation) to resolve correctly in the Playwright CT environment. You can do this via the [`ctViteConfig` property](https://playwright.dev/docs/test-components#i-have-a-project-that-already-uses-vite-can-i-reuse-the-config):
+ If your stories use template-based Vue components, you may need to [alias the `vue` module](https://vuejs.org/guide/scaling-up/tooling#note-on-in-browser-template-compilation) to resolve correctly in the test environment:
- Example Playwright configuration
+ Example Vite configuration
```ts
-// playwright-config.ts
-import { defineConfig } from '@playwright/experimental-ct-vue';
+// vite.config.ts
+import { defineConfig } from 'vite/config';
export default defineConfig({
- ctViteConfig: {
- resolve: {
- alias: {
- vue: 'vue/dist/vue.esm-bundler.js',
- },
+ // ...
+ resolve: {
+ alias: {
+ vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
@@ -56,6 +52,47 @@ export default defineConfig({
The configuration produced by the `add` command will attempt to set some sensible defaults for your project. However, you may need to adjust the configuration to fit your project's needs. The full configuration options can be found in the [API section](#options), below.
+### Manual
+
+For some project setups, the `add` command may be unable to automate the plugin setup and ask you to complete additional setup steps. Here's what to do:
+
+1. Install the addon, `@storybook/experimental-addon-vitest`, in your project and [register it in your Storybook configuration](http://storybook.js.org/docs/addons/install-addons#manual-installation).
+1. Make sure Vite and Vitest are configured in your project.
+1. Make sure Vitest is configured to use [browser mode](https://vitest.dev/guide/browser/).
+1. If you're using Next.js, make sure you're using [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs).
+1. If you're using SvelteKit, make sure you're using `@storybook/sveltekit/vite`.
+1. Create a [test setup file](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations), `storybook.setup.ts`, in the root of your project.
+1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. Here's an example:
+
+{/* TODO: Nextjs & SvelteKit examples */}
+```ts title="vitest.config.ts"
+import { defineConfig, mergeConfig } from 'vitest/config'
+import viteConfig from '../vite.config'
+import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
+
+export default mergeConfig(
+ viteConfig,
+ defineConfig({
+ plugins: [
+ storybookTest({
+ storybookScript: 'yarn storybook --ci',
+ }),
+ ],
+ // Glob pattern to find story files
+ include: ['../src/**/*.stories.?(m)[jt]s?(x)'],
+ // Enable browser mode
+ browser: {
+ enabled: true,
+ name: 'chromium',
+ // Make sure to install Playwright
+ provider: 'playwright',
+ headless: true,
+ },
+ setupFiles: ['./storybook.setup.ts'],
+ })
+)
+```
+
### Example configuration files
Here are configuration files generated by the `add` command. You can use these as a reference when setting up your project.
@@ -162,45 +199,51 @@ For the most part, running your Storybook tests in CI is done [via the CLI](#cli
Here's an example using GitHub Actions. The steps are similar for other CI providers, though details in the syntax or configuration may vary.
-First, we run a command to build and publish Storybook. In this case, we'll use Chromatic. This gives us a URL to the published Storybook instance. We then pass that URL to the plugin configuration using an environment variable. Finally, we update the plugin configuration to use that environment variable in the `storybookUrl` option.
+When actions for services like Vercel, Netlify and others run a deployment job, they follow a pattern of emitting a `deployment_status` event containing the newly generated URL under `deployment_status.target_url`. This is the URL to the published Storybook instance. We then pass that URL to the plugin configuration using an environment variable, `SB_URL`. Finally, we update the plugin configuration to use that environment variable in the `storybookUrl` option.
```yaml
-TK
+name: Storybook Tests
+on: deployment_status
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ if: github.event.deployment_status.state == 'success'
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: '18.x'
+ - name: Install dependencies
+ run: yarn
+ - name: Run Storybook tests
+ run: yarn test-storybook
+ env:
+ SB_URL: '${{ github.event.deployment_status.target_url }}'
```
```js title="vitest.workspace.ts"
-process.env.SB_URL
+storybookTest({
+ storybookScript: 'yarn storybook --ci',
+ storybookUrl: process.env.SB_URL
+}),
```
## Configuration
Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested.
-In this example, the Default story will not be tested, and the Primary story will.
+By default, the plugin will run all stories with the `test` tag. You can adjust this behavior by providing the [`tags` option](#tags) in the plugin configuration. This allows you to include, exclude, or skip stories based on their tags.
-{/* TODO: Snippetize */}
-```js title="Button.stories.tsx"
-import { Button } from './Button'
+In this example, we'll apply the `stable` tag to all of the Button component's stories, except for ExperimentalFeatureStory, which will have the `experimental` tag:
-export default {
- component: Button,
- // 👇 Apply `test` tag to all stories in this file
- tags: ['test'],
-}
+{/* prettier-ignore-start */}
-export const Default = {
- // 👇 Remove `test` tag from this story
- tags: ['!test'],
-}
+
-export const Primary = {
- args: { primary: true }
-}
-```
-
-By default, the plugin will run all stories with the `test` tag. You can adjust this behavior by providing the [`tags` option](#tags) in the plugin configuration. This allows you to include, exclude, or skip stories based on their tags.
+{/* prettier-ignore-end */}
-Here's an example of how you might configure the plugin to only run stories with the `test` and `spec` tags, while excluding stories with the `docs-only` tag:
+To connect those tags to our test behavior, we can adjust the plugin configuration to exclude the `experimental` tag:
{/* TODO: Snippetize */}
```js title="vitest.workspace.ts"
@@ -208,8 +251,8 @@ Here's an example of how you might configure the plugin to only run stories with
plugins: [
storybookTest({
tags: {
- include: ['test', 'spec'],
- exclude: ['docs-only'],
+ include: ['test'],
+ exclude: ['experimental'],
},
}),
],
@@ -222,11 +265,7 @@ If the same tag is in both the `include` and `exclude` arrays, the `exclude` beh
### How to ensure my tests can find assets in the public directory?
-If your stories use assets in the public directory and you're not using the default public directory location (`public`), you need to adjust the Vitest configuration to include the public directory. You can do this by providing the `publicDir` option in the Vitest configuration file.
-
-```ts
-TK
-```
+If your stories use assets in the public directory and you're not using the default public directory location (`public`), you need to adjust the Vitest configuration to include the public directory. You can do this by providing the [`publicDir` option in the Vitest configuration file](https://vitejs.dev/config/shared-options.html#publicdir).
### How to debug my tests in Storybook?
@@ -249,59 +288,55 @@ TK
### Why do we recommend browser mode?
-```
-1. It’s a real browser environment. JSDom/HappyDom are simulations with shortcomings.
-2. https://vitest.dev/guide/browser/#motivation
-```
+Vitest's browser mode runs your tests in a real browser (Chromium, via Playwright, in the default configuration). The alternative is a simulated browser environment, like JSDom or HappyDom, which can have differences in behavior compared to a real browser. For UI components, which can often depend on browser APIs or features, running tests in a real browser is more accurate.
+
+For more, see [Vitest's guide on using browser mode effectively](https://vitest.dev/guide/browser/#motivation).
### How to use WebDriver instead of Playwright?
-```
-https://vitest.dev/config/#browser-provider
-```
+We recommend running tests in a browser using Playwright, but you can use WebDriverIO instead. To do so, you need to adjust the [browser provider in the Vitest configuration file](https://vitest.dev/config/#browser-provider).
### How to use a browser other than Chromium
-```
-https://vitest.dev/config/#browser-46-name
-```
+We recommend using Chromium, because it is most likely to best match the experience of a majority of your users. However, you can use other browsers by adjusting the [browser name in the Vitest configuration file](https://vitest.dev/config/#browser-name). Note that [Playwright and WebDriverIO support different browsers](https://vitest.dev/guide/browser/#browser-option-types).
-### How is this different from the test runner?
+### How is this different from the previous test runner?
-```
-1. TR requires an SB instance to be running; this does not (except for debugging)
-2. TR runs SB and listens to results; this transforms stories (using portable stories) into tests
-3. TR is based on Jest; this is based on Vitest
-4. This is more configurable and more simple than TR
- 1. TR is always a separate command; this is just Vitest (`yarn test`)
-5. This is faster than TR
- 1. Needs benchmarks
- 1. a sandbox run in our monorepo
- 1. Vitest plugin: 1m 6s
- 2. Test-runner: 1m 14s + SB build & publish time
-```
+The [previous test runner](./test-runner.mdx) requires a running Storybook instance to test your stories, because it visits each one, executes the play function, and listens for results. This plugin, however, transforms your stories into tests using Vite and portable stories, so it does not need to run Storybook to test your stories. Beyond that core difference, there are a few other distinctions:
-### Why does the `add` command stop in some cases?
+Additionally, the previous test runner ran your stories as orchestrated tests in Jest, and that orchestration came with some complexity. By comparison, this plugin transforms your stories into real tests and then runs them using Vitest, which is simpler and more configurable.
-TK
+Finally, because of the simpler architecture and the use of Vitest, this plugin should be faster than the previous test runner for most projects. We'll do more benchmarking to quantify this in the future.
## API
### Exports
-`@storybook/experimental-addon-vitest/plugin`
+This addon contributes the following exports to Storybook:
-TK
+```js
+import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
+```
+
+#### `storybookTest`
+
+Type: `function`
+
+A [Vitest plugin](https://vitejs.dev/guide/api-plugin) that transforms your stories into tests. It accepts an [options object](#options) for configuration.
### Options
+The plugin is configured using an options object. Here are the available properties:
+
#### `configDir`
Type: `string`
Default: `.storybook`
-The directory where the Storybook configuration is located, relative to CWD. If not provided, the plugin will use `.storybook` in the current working directory.
+The directory where the Storybook configuration is located, relative to the current working directory.
+
+If your [Storybook configuration](../configure/index.mdx) is not in the default location, you **must** specify the location here so the plugin can function correctly.
#### `storybookScript`
@@ -341,6 +376,6 @@ Default:
Tags to include, exclude, or skip. These tags are defined as annotations in your story, meta, or preview.
-- `include`: `string[]` - Tags to include.
-- `exclude`: `string[]` - Tags to exclude.
-- `skip`: `string[]` - Tags to skip.
+- **`include`**: Stories with these tags will be tested
+- **`exclude`**: Stories with these tags will not be tested, and will not be counted in the test results
+- **`skip`**: Stories with these tags will not be tested, and will be counted in the test results
From 877e4a335af93d57cf345467fd5aaff40a4ee5d7 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Wed, 21 Aug 2024 16:32:58 -0600
Subject: [PATCH 013/213] More updates
---
...vitest.mdx => test-runner-with-vitest.mdx} | 65 +++++++++----------
1 file changed, 32 insertions(+), 33 deletions(-)
rename docs/writing-tests/{addon-vitest.mdx => test-runner-with-vitest.mdx} (94%)
diff --git a/docs/writing-tests/addon-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
similarity index 94%
rename from docs/writing-tests/addon-vitest.mdx
rename to docs/writing-tests/test-runner-with-vitest.mdx
index 0f472f806364..ba8b3f46517d 100644
--- a/docs/writing-tests/addon-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -61,10 +61,31 @@ For some project setups, the `add` command may be unable to automate the plugin
1. Make sure Vitest is configured to use [browser mode](https://vitest.dev/guide/browser/).
1. If you're using Next.js, make sure you're using [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs).
1. If you're using SvelteKit, make sure you're using `@storybook/sveltekit/vite`.
-1. Create a [test setup file](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations), `storybook.setup.ts`, in the root of your project.
-1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. Here's an example:
+1. Create a [test setup file](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations), `.storybook/vitest.setup.ts`.
+1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. You can reference examples, below.
+
+### Example configuration files
+
+Here are configuration files generated by the `add` command. You can use these as a reference when setting up your project.
+
+
+ Example Vitest setup file
+
+```ts title=".storybook/vitest.setup.ts"
+import { beforeAll } from 'vitest';
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, svelte, etc.)
+import { setProjectAnnotations } from '@storybook/your-renderer';
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations(projectAnnotations);
+
+beforeAll(project.beforeAll);
+```
+
+
+
+ Example Vitest config file
-{/* TODO: Nextjs & SvelteKit examples */}
```ts title="vitest.config.ts"
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from '../vite.config'
@@ -88,35 +109,10 @@ export default mergeConfig(
provider: 'playwright',
headless: true,
},
- setupFiles: ['./storybook.setup.ts'],
- })
-)
-```
-
-### Example configuration files
-
-Here are configuration files generated by the `add` command. You can use these as a reference when setting up your project.
-
-
- Example Vitest setup file
-
-```ts title="storybook.setup.ts"
-TK
-```
-
-
-
- Example Vitest config file
-
-```ts title="vitest.config.ts"
-import { defineConfig, mergeConfig } from 'vitest/config'
-import viteConfig from '../vite.config'
-import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
-
-export default mergeConfig(
- viteConfig,
- defineConfig({
- // ... TK
+ // Disabling isolation is faster and similar to how tests are isolated in Storybook itself.
+ // Consider removing this, if you have flaky tests.
+ isolate: false,
+ setupFiles: ['./.storybook/vitest.setup.ts'],
})
)
```
@@ -150,7 +146,10 @@ export default defineWorkspace([
provider: 'playwright',
headless: true,
},
- setupFiles: ['./storybook.setup.ts'],
+ // Disabling isolation is faster and similar to how tests are isolated in Storybook itself.
+ // Consider removing this, if you have flaky tests.
+ isolate: false,
+ setupFiles: ['./.storybook/vitest.setup.ts'],
}
])
```
From 8cdbbaf95adbbff8305fcb0b8127f32823e03533 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Mon, 26 Aug 2024 12:30:08 -0600
Subject: [PATCH 014/213] More polish
---
docs/_snippets/addon-vitest-install.md | 11 +++
docs/_snippets/addon-vitest-run-tests.md | 11 +++
.../writing-tests/test-runner-with-vitest.mdx | 80 +++++++++++--------
3 files changed, 70 insertions(+), 32 deletions(-)
create mode 100644 docs/_snippets/addon-vitest-install.md
create mode 100644 docs/_snippets/addon-vitest-run-tests.md
diff --git a/docs/_snippets/addon-vitest-install.md b/docs/_snippets/addon-vitest-install.md
new file mode 100644
index 000000000000..d54a74ca17d1
--- /dev/null
+++ b/docs/_snippets/addon-vitest-install.md
@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npx"
+npx storybook@latest add @storybook/experimental-addon-vitest
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm dlx storybook@latest add @storybook/experimental-addon-vitest
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn dlx storybook@latest add @storybook/experimental-addon-vitest
+```
diff --git a/docs/_snippets/addon-vitest-run-tests.md b/docs/_snippets/addon-vitest-run-tests.md
new file mode 100644
index 000000000000..3b91e2d284ea
--- /dev/null
+++ b/docs/_snippets/addon-vitest-run-tests.md
@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npm run test
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm run test
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn test
+```
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index ba8b3f46517d..343a20555535 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -7,22 +7,25 @@ sidebar:
(⚠️ **Experimental**)
+
+ While this feature is experimental, it is published as the `@storybook/experimental-addon-vitest` package.
+
+
Storybook's test runner with Vitest uses a Vitest plugin to transform your [stories](../writing-stories/index.mdx) into tests. You can then run those tests just like any other in Vitest, which will check that the story renders without errors and, if a [play function](../writing-stories/play-function.mdx) is defined, that it runs as expected and any [assertions made](../writing-tests/interaction-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
By using Vitest's browser mode, those tests are run in a real browser environment, which gives you more reliable results for UI components that commonly rely on browser APIs or features.
-## Setup
+## Install and set up
+
+Get started by upgrading to at least Storybook 8.3, then installing and configuring the plugin in your project.
-Get started by installing and configuring the plugin in your project.
+
-### Automatic
+### Automatic setup
Run the following command to install and configure the addon, which contains the plugin to run your stories as tests using Vitest:
-{/* TODO: Snippetize */}
-```sh
-npx storybook@latest add @storybook/experimental-addon-vitest
-```
+
That command will install and register the Vitest addon. It will also inspect your project's Vite and Vitest setup, and install and configure them if necessary.
@@ -52,7 +55,7 @@ export default defineConfig({
The configuration produced by the `add` command will attempt to set some sensible defaults for your project. However, you may need to adjust the configuration to fit your project's needs. The full configuration options can be found in the [API section](#options), below.
-### Manual
+### Manual setup
For some project setups, the `add` command may be unable to automate the plugin setup and ask you to complete additional setup steps. Here's what to do:
@@ -66,7 +69,7 @@ For some project setups, the `add` command may be unable to automate the plugin
### Example configuration files
-Here are configuration files generated by the `add` command. You can use these as a reference when setting up your project.
+Here are example configuration files generated by the `add` command. You can use these as a reference when setting up your project.
Example Vitest setup file
@@ -171,7 +174,7 @@ While the plugin does not require Storybook to run when testing, you may still w
You can also provide a [`storybookUrl` option](#storybookurl) to the plugin configuration. When you're not using watch mode and tests fail, the plugin will provide a link to the story using this URL in the output. This is useful when [running tests in CI](#in-ci) or other environments where Storybook is not already running.
-TK - Screenshot of test output with links to SB
+[TK - Screenshot of test output with links to SB]
## Usage
@@ -181,16 +184,13 @@ There are three primary ways to run tests using the Vitest plugin:
The plugin transforms your stories into real Vitest tests, so you run those tests just like you run any other Vitest tests in your project. Typically, you will have a `test` script in your `package.json` that runs Vitest. When you run that script, the addon will find and run your story-based tests. Here's an example of running your tests (in [watch mode](https://vitest.dev/guide/cli.html#vitest-watch), by default) using the Vitest CLI:
-{/* TODO: Snippetize */}
-```sh
-npm run test
-```
+
### Editor extension
Transforming your stories into Vitest tests with the plugin also enables you to run and debug tests using Vitest [IDE integrations](https://vitest.dev/guide/ide.html). This allows you to run tests directly from your editor, such as VSCode and JetBrains IDE.
-TK - Screenshot of VS Code
+[TK - Screenshot of VS Code]
### In CI
@@ -200,7 +200,7 @@ Here's an example using GitHub Actions. The steps are similar for other CI provi
When actions for services like Vercel, Netlify and others run a deployment job, they follow a pattern of emitting a `deployment_status` event containing the newly generated URL under `deployment_status.target_url`. This is the URL to the published Storybook instance. We then pass that URL to the plugin configuration using an environment variable, `SB_URL`. Finally, we update the plugin configuration to use that environment variable in the `storybookUrl` option.
-```yaml
+```yaml title=".github/workflows/test-storybook.yml"
name: Storybook Tests
on: deployment_status
jobs:
@@ -222,10 +222,20 @@ jobs:
```
```js title="vitest.workspace.ts"
-storybookTest({
- storybookScript: 'yarn storybook --ci',
- storybookUrl: process.env.SB_URL
-}),
+export default defineWorkspace([
+ // ...
+ {
+ // ...
+ {
+ plugins: [
+ storybookTest({
+ storybookScript: 'yarn storybook --ci',
+ storybookUrl: process.env.SB_URL
+ }),
+ ],
+ },
+ },
+])
```
## Configuration
@@ -244,18 +254,24 @@ In this example, we'll apply the `stable` tag to all of the Button component's s
To connect those tags to our test behavior, we can adjust the plugin configuration to exclude the `experimental` tag:
-{/* TODO: Snippetize */}
```js title="vitest.workspace.ts"
-{
- plugins: [
- storybookTest({
- tags: {
- include: ['test'],
- exclude: ['experimental'],
- },
- }),
- ],
-}
+export default defineWorkspace([
+ // ...
+ {
+ // ...
+ {
+ plugins: [
+ storybookTest({
+ // ...
+ tags: {
+ include: ['test'],
+ exclude: ['experimental'],
+ },
+ }),
+ ],
+ },
+ },
+])
```
If the same tag is in both the `include` and `exclude` arrays, the `exclude` behavior takes precedence.
@@ -282,7 +298,7 @@ If the URLs are not working when running tests in CI, you should ensure the Stor
If you have custom operations defined in [`viteFinal`](../api/main-config/main-config-vite-final.mdx) in your `.storybook/main.js|ts` file, you will need to translate those into the Vitest configuration. This is because the plugin does not use the Storybook Vite configuration.
```ts
-TK
+TK - Is there a good example we could offer here?
```
### Why do we recommend browser mode?
From b08238f919e8251fb238c4389ee414d71cd4f7d4 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Tue, 27 Aug 2024 15:16:43 +0200
Subject: [PATCH 015/213] no more lodash in core
---
code/core/package.json | 3 +-
.../core-server/utils/stories-json.test.ts | 6 +-
.../src/core-server/utils/stories-json.ts | 2 +-
.../argTypes/convert/convert.test.ts | 2 +-
.../argTypes/convert/proptypes/convert.ts | 2 +-
code/core/src/manager-api/lib/merge.ts | 60 +++++++++++++++++--
code/core/src/manager-api/lib/stories.ts | 7 +--
code/core/src/manager-api/modules/layout.ts | 18 +++---
.../src/manager-api/modules/notifications.ts | 2 +-
code/core/src/manager-api/root.tsx | 12 +---
.../navigation/MobileNavigation.stories.tsx | 2 +-
.../manager/components/preview/Preview.tsx | 2 +-
.../manager/components/preview/Toolbar.tsx | 5 +-
.../manager/components/sidebar/useExpanded.ts | 2 +-
.../components/sidebar/useLastViewed.ts | 2 +-
.../modules/preview-web/PreviewWeb.test.ts | 6 +-
.../modules/preview-web/parseArgsParam.ts | 2 +-
.../preview-api/modules/store/StoryStore.ts | 7 +--
.../src/preview-api/modules/store/args.ts | 3 +-
.../modules/store/csf/normalizeInputTypes.ts | 2 +-
.../modules/store/filterArgTypes.ts | 6 +-
.../modules/store/inferArgTypes.ts | 2 +-
.../modules/store/inferControls.ts | 4 +-
.../preview-api/modules/store/parameters.ts | 2 +-
code/core/src/router/utils.ts | 3 +-
code/core/template/stories/args.stories.ts | 4 +-
code/yarn.lock | 10 +++-
27 files changed, 114 insertions(+), 64 deletions(-)
diff --git a/code/core/package.json b/code/core/package.json
index d5f233d1eafc..6b6df37fa1b3 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -321,7 +321,6 @@
"@types/find-cache-dir": "^5.0.0",
"@types/fs-extra": "^11.0.1",
"@types/js-yaml": "^4.0.5",
- "@types/lodash": "^4.14.167",
"@types/node": "^22.0.0",
"@types/npmlog": "^7.0.0",
"@types/picomatch": "^2.3.0",
@@ -360,6 +359,7 @@
"diff": "^5.2.0",
"downshift": "^9.0.4",
"ejs": "^3.1.10",
+ "es-toolkit": "^1.16.0",
"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
"esbuild-plugin-alias": "^0.2.1",
"execa": "^8.0.1",
@@ -380,7 +380,6 @@
"jsdoc-type-pratt-parser": "^4.0.0",
"lazy-universal-dotenv": "^4.0.0",
"leven": "^4.0.0",
- "lodash": "^4.17.21",
"markdown-to-jsx": "^7.4.5",
"memfs": "^4.11.1",
"memoizerific": "^1.11.3",
diff --git a/code/core/src/core-server/utils/stories-json.test.ts b/code/core/src/core-server/utils/stories-json.test.ts
index e9f5e73a7378..78ff3697c3d6 100644
--- a/code/core/src/core-server/utils/stories-json.test.ts
+++ b/code/core/src/core-server/utils/stories-json.test.ts
@@ -6,8 +6,8 @@ import { normalizeStoriesEntry } from '@storybook/core/common';
import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events';
+import { debounce } from 'es-toolkit';
import type { Request, Response, Router } from 'express';
-import debounce from 'lodash/debounce.js';
import Watchpack from 'watchpack';
import { csfIndexer } from '../presets/common-preset';
@@ -17,7 +17,7 @@ import type { ServerChannel } from './get-server-channel';
import { DEBOUNCE, useStoriesJson } from './stories-json';
vi.mock('watchpack');
-vi.mock('lodash/debounce');
+vi.mock('es-toolkit');
vi.mock('@storybook/core/node-logger');
const workingDir = join(__dirname, '__mockdata__');
@@ -472,7 +472,7 @@ describe('useStoriesJson', () => {
it('debounces invalidation events', async () => {
vi.mocked(debounce).mockImplementation(
// @ts-expect-error it doesn't think default exists
- (await vi.importActual('lodash/debounce.js')).default
+ (await vi.importActual('debounce')).default
);
const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
diff --git a/code/core/src/core-server/utils/stories-json.ts b/code/core/src/core-server/utils/stories-json.ts
index 8956a4ed7ab1..21870aef79ad 100644
--- a/code/core/src/core-server/utils/stories-json.ts
+++ b/code/core/src/core-server/utils/stories-json.ts
@@ -4,9 +4,9 @@ import type { NormalizedStoriesSpecifier, StoryIndex } from '@storybook/core/typ
import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events';
+import { debounce } from 'es-toolkit';
import type { Request, Response, Router } from 'express';
import { writeJSON } from 'fs-extra';
-import debounce from 'lodash/debounce.js';
import type { StoryIndexGenerator } from './StoryIndexGenerator';
import type { ServerChannel } from './get-server-channel';
diff --git a/code/core/src/docs-tools/argTypes/convert/convert.test.ts b/code/core/src/docs-tools/argTypes/convert/convert.test.ts
index 25d1b04f01aa..11ca35291953 100644
--- a/code/core/src/docs-tools/argTypes/convert/convert.test.ts
+++ b/code/core/src/docs-tools/argTypes/convert/convert.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest';
import { transformSync } from '@storybook/core/babel';
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
import requireFromString from 'require-from-string';
import { normalizeNewlines } from '../utils';
diff --git a/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts b/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts
index 710ddfa449d5..c3426ecfd3e2 100644
--- a/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts
+++ b/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts
@@ -1,6 +1,6 @@
import type { SBType } from '@storybook/core/types';
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
import { parseLiteral } from '../utils';
import type { PTType } from './types';
diff --git a/code/core/src/manager-api/lib/merge.ts b/code/core/src/manager-api/lib/merge.ts
index ec4c474942b0..6dc618ade6db 100644
--- a/code/core/src/manager-api/lib/merge.ts
+++ b/code/core/src/manager-api/lib/merge.ts
@@ -1,10 +1,13 @@
import { logger } from '@storybook/core/client-logger';
-import isEqual from 'lodash/isEqual.js';
-import mergeWith from 'lodash/mergeWith.js';
+import { isEqual, mergeWith } from 'es-toolkit';
-export default (a: TObj, b: Partial) =>
- mergeWith({}, a, b, (objValue: TObj, srcValue: Partial) => {
+export default (a: TObj, ...b: Partial[]): TObj => {
+ // start with empty object
+ let target = {};
+
+ // merge object a unto target
+ target = mergeWith({}, a, (objValue: TObj, srcValue: Partial) => {
if (Array.isArray(srcValue) && Array.isArray(objValue)) {
srcValue.forEach((s) => {
const existing = objValue.find((o) => o === s || isEqual(o, s));
@@ -19,5 +22,52 @@ export default (a: TObj, b: Partial) =>
logger.log(['the types mismatch, picking', objValue]);
return objValue;
}
- return undefined;
});
+
+ for (const obj of b) {
+ // merge object b unto target
+ target = mergeWith(target, obj, (objValue: TObj, srcValue: Partial) => {
+ if (Array.isArray(srcValue) && Array.isArray(objValue)) {
+ srcValue.forEach((s) => {
+ const existing = objValue.find((o) => o === s || isEqual(o, s));
+ if (!existing) {
+ objValue.push(s);
+ }
+ });
+
+ return objValue;
+ }
+ if (Array.isArray(objValue)) {
+ logger.log(['the types mismatch, picking', objValue]);
+ return objValue;
+ }
+ });
+ }
+
+ return target as TObj;
+};
+
+export const noArrayMerge = (a: TObj, ...b: Partial[]): TObj => {
+ // start with empty object
+ let target = {};
+
+ // merge object a unto target
+ target = mergeWith({}, a, (objValue: TObj, srcValue: Partial) => {
+ // Treat arrays as scalars:
+ if (Array.isArray(srcValue)) {
+ return srcValue;
+ }
+ });
+
+ for (const obj of b) {
+ // merge object b unto target
+ target = mergeWith(target, obj, (objValue: TObj, srcValue: Partial) => {
+ // Treat arrays as scalars:
+ if (Array.isArray(srcValue)) {
+ return srcValue;
+ }
+ });
+ }
+
+ return target as TObj;
+};
diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index a4ff209c3249..556acba0076d 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -19,8 +19,7 @@ import type {
} from '@storybook/core/types';
import { sanitize } from '@storybook/csf';
-import countBy from 'lodash/countBy.js';
-import mapValues from 'lodash/mapValues.js';
+import { countBy, mapValues } from 'es-toolkit';
import memoize from 'memoizerific';
import { dedent } from 'ts-dedent';
@@ -41,7 +40,7 @@ export const denormalizeStoryParameters = ({
kindParameters[storyData.kind],
storyData.parameters as unknown as Parameters
),
- }));
+ })) as SetStoriesStoryData;
};
export const transformSetStoriesStoryDataToStoriesHash = (
@@ -112,7 +111,7 @@ export const transformStoryIndexV2toV3 = (index: StoryIndexV2): StoryIndexV3 =>
};
export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStoryIndex => {
- const countByTitle = countBy(Object.values(index.stories), 'title');
+ const countByTitle = countBy(Object.values(index.stories), (item) => item.title);
return {
v: 4,
entries: Object.values(index.stories).reduce(
diff --git a/code/core/src/manager-api/modules/layout.ts b/code/core/src/manager-api/modules/layout.ts
index 642f78fc5813..71b5523e2969 100644
--- a/code/core/src/manager-api/modules/layout.ts
+++ b/code/core/src/manager-api/modules/layout.ts
@@ -5,8 +5,7 @@ import { global } from '@storybook/global';
import { SET_CONFIG } from '@storybook/core/core-events';
-import { dequal as deepEqual } from 'dequal';
-import pick from 'lodash/pick.js';
+import { isEqual as deepEqual, pick, toMerged } from 'es-toolkit';
import merge from '../lib/merge';
import type { ModuleFn } from '../lib/types';
@@ -320,12 +319,15 @@ export const init: ModuleFn = ({ store, provider, singleStory
...defaultLayoutState,
layout: {
...defaultLayoutState.layout,
- ...pick(options, Object.keys(defaultLayoutState.layout)),
+ ...toMerged(
+ defaultLayoutState.layout,
+ pick(options, Object.keys(defaultLayoutState.layout))
+ ),
...(singleStory && { navSize: 0 }),
},
ui: {
...defaultLayoutState.ui,
- ...pick(options, Object.keys(defaultLayoutState.ui)),
+ ...toMerged(defaultLayoutState.ui, pick(options, Object.keys(defaultLayoutState.ui))),
},
selectedPanel: selectedPanel || defaultLayoutState.selectedPanel,
theme: theme || defaultLayoutState.theme,
@@ -351,15 +353,15 @@ export const init: ModuleFn = ({ store, provider, singleStory
const updatedLayout = {
...layout,
- ...options.layout,
- ...pick(options, Object.keys(layout)),
+ ...(options.layout || {}),
+ ...toMerged(options.layout || {}, pick(options, Object.keys(layout))),
...(singleStory && { navSize: 0 }),
};
const updatedUi = {
...ui,
...options.ui,
- ...pick(options, Object.keys(ui)),
+ ...toMerged(options.ui, pick(options, Object.keys(ui))),
};
const updatedTheme = {
@@ -388,7 +390,7 @@ export const init: ModuleFn = ({ store, provider, singleStory
},
};
- const persisted = pick(store.getState(), 'layout', 'selectedPanel');
+ const persisted = pick(store.getState(), ['layout', 'selectedPanel']);
provider.channel?.on(SET_CONFIG, () => {
api.setOptions(merge(api.getInitialOptions(), persisted));
diff --git a/code/core/src/manager-api/modules/notifications.ts b/code/core/src/manager-api/modules/notifications.ts
index cda1025001ae..c1410cfbeb78 100644
--- a/code/core/src/manager-api/modules/notifications.ts
+++ b/code/core/src/manager-api/modules/notifications.ts
@@ -1,6 +1,6 @@
import type { API_Notification } from '@storybook/core/types';
-import partition from 'lodash/partition.js';
+import { partition } from 'es-toolkit';
import type { ModuleFn } from '../lib/types';
diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx
index bf992f1907a8..1c150b47f4b3 100644
--- a/code/core/src/manager-api/root.tsx
+++ b/code/core/src/manager-api/root.tsx
@@ -41,11 +41,12 @@ import {
STORY_CHANGED,
} from '@storybook/core/core-events';
-import mergeWith from 'lodash/mergeWith.js';
+import { mergeWith } from 'es-toolkit';
import { createContext } from './context';
import getInitialState from './initial-state';
import { types } from './lib/addons';
+import { noArrayMerge } from './lib/merge';
import type { ModuleFn } from './lib/types';
import * as addons from './modules/addons';
import * as channel from './modules/channel';
@@ -129,14 +130,7 @@ export type ManagerProviderProps = RouterData &
// This is duplicated from @storybook/preview-api for the reasons mentioned in lib-addons/types.js
export const combineParameters = (...parameterSets: Parameters[]) =>
- mergeWith({}, ...parameterSets, (objValue: any, srcValue: any) => {
- // Treat arrays as scalars:
- if (Array.isArray(srcValue)) {
- return srcValue;
- }
-
- return undefined;
- });
+ noArrayMerge({}, ...parameterSets);
class ManagerProvider extends Component {
api: API = {} as API;
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
index e445d73dea23..37e18b66a1fe 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -5,7 +5,7 @@ import { within } from '@storybook/test';
import { ManagerContext } from '@storybook/core/manager-api';
-import { startCase } from 'lodash';
+import { startCase } from 'es-toolkit';
import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
import { MobileNavigation } from './MobileNavigation';
diff --git a/code/core/src/manager/components/preview/Preview.tsx b/code/core/src/manager/components/preview/Preview.tsx
index 8a459276f0e7..ed73a059951f 100644
--- a/code/core/src/manager/components/preview/Preview.tsx
+++ b/code/core/src/manager/components/preview/Preview.tsx
@@ -202,7 +202,7 @@ export function filterTabs(panels: Addon_BaseType[], parameters?: Record ({
index,
...(typeof tabs[key] === 'string' ? { title: tabs[key] } : tabs[key]),
diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index 2f81f309435d..5dd460e80e69 100644
--- a/code/core/src/manager/components/preview/Toolbar.tsx
+++ b/code/core/src/manager/components/preview/Toolbar.tsx
@@ -188,7 +188,10 @@ function toolbarItemHasBeenExcluded(item: Partial, entry: LeafEn
const toolbarItemsFromStoryParameters = 'toolbar' in parameters ? parameters.toolbar : undefined;
const { toolbar: toolbarItemsFromAddonsConfig } = addons.getConfig();
- const toolbarItems = merge(toolbarItemsFromAddonsConfig, toolbarItemsFromStoryParameters);
+ const toolbarItems = merge(
+ toolbarItemsFromAddonsConfig || {},
+ toolbarItemsFromStoryParameters || {}
+ );
// @ts-expect-error (non strict)
return toolbarItems ? !!toolbarItems[item?.id]?.hidden : false;
diff --git a/code/core/src/manager/components/sidebar/useExpanded.ts b/code/core/src/manager/components/sidebar/useExpanded.ts
index 5f9a479b3308..e216c2b2e0cc 100644
--- a/code/core/src/manager/components/sidebar/useExpanded.ts
+++ b/code/core/src/manager/components/sidebar/useExpanded.ts
@@ -7,7 +7,7 @@ import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core/core-e
import type { StoriesHash } from '@storybook/core/manager-api';
import { useStorybookApi } from '@storybook/core/manager-api';
-import throttle from 'lodash/throttle.js';
+import { throttle } from 'es-toolkit';
import { matchesKeyCode, matchesModifiers } from '../../keybinding';
import { getAncestorIds, getDescendantIds, isAncestor, scrollIntoView } from '../../utils/tree';
diff --git a/code/core/src/manager/components/sidebar/useLastViewed.ts b/code/core/src/manager/components/sidebar/useLastViewed.ts
index da53f6645ba3..e4132d6f8f3a 100644
--- a/code/core/src/manager/components/sidebar/useLastViewed.ts
+++ b/code/core/src/manager/components/sidebar/useLastViewed.ts
@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useRef } from 'react';
-import debounce from 'lodash/debounce.js';
+import { debounce } from 'es-toolkit';
import store from 'store2';
import type { Selection, StoryRef } from './types';
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 7994173c2d07..3e31095abc27 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
@@ -31,7 +31,7 @@ import {
UPDATE_STORY_ARGS,
} from '@storybook/core/core-events';
-import merge from 'lodash/merge.js';
+import { merge, toMerged } from 'es-toolkit';
import { addons } from '../addons';
import type { StoryStore } from '../store';
@@ -2927,7 +2927,7 @@ describe('PreviewWeb', () => {
});
describe('when the current story changes', () => {
- const newComponentOneExports = merge({}, componentOneExports, {
+ const newComponentOneExports = toMerged(componentOneExports, {
a: { args: { foo: 'edited' } },
});
const newImportFn = vi.fn(async (path) => {
@@ -3282,7 +3282,7 @@ describe('PreviewWeb', () => {
afterEach(() => {
vi.useRealTimers();
});
- const newComponentOneExports = merge({}, componentOneExports, {
+ const newComponentOneExports = toMerged(componentOneExports, {
a: { args: { bar: 'edited' }, argTypes: { bar: { type: { name: 'string' } } } },
});
const newImportFn = vi.fn(async (path) => {
diff --git a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
index 6cdffe7eae10..75be5bfb57e2 100644
--- a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
+++ b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
@@ -2,7 +2,7 @@ import type { Args } from '@storybook/core/types';
import { once } from '@storybook/core/client-logger';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isPlainObject } from 'es-toolkit';
import qs from 'qs';
import { dedent } from 'ts-dedent';
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 510373177fa9..6e753905ee04 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -31,8 +31,7 @@ import {
MissingStoryFromCsfFileError,
} from '@storybook/core/preview-errors';
-import mapValues from 'lodash/mapValues.js';
-import pick from 'lodash/pick.js';
+import { mapValues, pick, toMerged } from 'es-toolkit';
import memoize from 'memoizerific';
import { HooksContext } from '../addons';
@@ -354,7 +353,7 @@ export class StoryStore {
const stories: Record = mapValues(value.stories, (story) => {
const { importPath } = this.storyIndex.entries[story.id];
return {
- ...pick(story, ['id', 'name', 'title']),
+ ...toMerged({}, pick(story, ['id', 'name', 'title'])),
importPath,
// These 3 fields were going to be dropped in v7, but instead we will keep them for the
// 7.x cycle so that v7 Storybooks can be composed successfully in v6 Storybook.
@@ -362,7 +361,7 @@ export class StoryStore {
kind: story.title,
story: story.name,
parameters: {
- ...pick(story.parameters, allowedParameters),
+ ...toMerged({}, pick(story.parameters, allowedParameters)),
fileName: importPath,
},
};
diff --git a/code/core/src/preview-api/modules/store/args.ts b/code/core/src/preview-api/modules/store/args.ts
index e34df974c42c..ea678dd4d2df 100644
--- a/code/core/src/preview-api/modules/store/args.ts
+++ b/code/core/src/preview-api/modules/store/args.ts
@@ -9,8 +9,7 @@ import type {
import { once } from '@storybook/core/client-logger';
-import { dequal as deepEqual } from 'dequal';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isEqual as deepEqual, isPlainObject } from 'es-toolkit';
import { dedent } from 'ts-dedent';
const INCOMPATIBLE = Symbol('incompatible');
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts b/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts
index d0bdaabdfe1b..f4685dc83090 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts
@@ -7,7 +7,7 @@ import type {
StrictInputType,
} from '@storybook/core/types';
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
const normalizeType = (type: InputType['type']): StrictInputType['type'] => {
return typeof type === 'string' ? { name: type } : type;
diff --git a/code/core/src/preview-api/modules/store/filterArgTypes.ts b/code/core/src/preview-api/modules/store/filterArgTypes.ts
index 274489a67cf4..16c2dd3a6c51 100644
--- a/code/core/src/preview-api/modules/store/filterArgTypes.ts
+++ b/code/core/src/preview-api/modules/store/filterArgTypes.ts
@@ -1,6 +1,6 @@
import type { StrictArgTypes } from '@storybook/core/types';
-import pickBy from 'lodash/pickBy.js';
+import { pickBy } from 'es-toolkit';
export type PropDescriptor = string[] | RegExp;
@@ -18,8 +18,8 @@ export const filterArgTypes = (
return (
argTypes &&
pickBy(argTypes, (argType, key) => {
- const name = argType.name || key;
- return (!include || matches(name, include)) && (!exclude || !matches(name, exclude));
+ const name = argType.name || key.toString();
+ return !!(!include || matches(name, include)) && (!exclude || !matches(name, exclude));
})
);
};
diff --git a/code/core/src/preview-api/modules/store/inferArgTypes.ts b/code/core/src/preview-api/modules/store/inferArgTypes.ts
index ea8b45b75609..007b4971a173 100644
--- a/code/core/src/preview-api/modules/store/inferArgTypes.ts
+++ b/code/core/src/preview-api/modules/store/inferArgTypes.ts
@@ -2,7 +2,7 @@ import type { ArgTypesEnhancer, Renderer, SBType } from '@storybook/core/types';
import { logger } from '@storybook/core/client-logger';
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
import { dedent } from 'ts-dedent';
import { combineParameters } from './parameters';
diff --git a/code/core/src/preview-api/modules/store/inferControls.ts b/code/core/src/preview-api/modules/store/inferControls.ts
index b4408d85921f..92447845cc92 100644
--- a/code/core/src/preview-api/modules/store/inferControls.ts
+++ b/code/core/src/preview-api/modules/store/inferControls.ts
@@ -7,7 +7,7 @@ import type {
import { logger } from '@storybook/core/client-logger';
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
import { filterArgTypes } from './filterArgTypes';
import { combineParameters } from './parameters';
@@ -77,7 +77,7 @@ export const inferControls: ArgTypesEnhancer = (context) => {
const filteredArgTypes = filterArgTypes(argTypes, include, exclude);
const withControls = mapValues(filteredArgTypes, (argType, name) => {
- return argType?.type && inferControl(argType, name, matchers);
+ return argType?.type && inferControl(argType, name.toString(), matchers);
});
return combineParameters(withControls, filteredArgTypes);
diff --git a/code/core/src/preview-api/modules/store/parameters.ts b/code/core/src/preview-api/modules/store/parameters.ts
index 43dee876d71b..3b6077614801 100644
--- a/code/core/src/preview-api/modules/store/parameters.ts
+++ b/code/core/src/preview-api/modules/store/parameters.ts
@@ -1,7 +1,7 @@
// Utilities for handling parameters
import type { Parameters } from '@storybook/core/types';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isPlainObject } from 'es-toolkit';
/**
* Safely combine parameters recursively. Only copy objects when needed. Algorithm = always
diff --git a/code/core/src/router/utils.ts b/code/core/src/router/utils.ts
index 3859668c175e..c9cb79852661 100644
--- a/code/core/src/router/utils.ts
+++ b/code/core/src/router/utils.ts
@@ -1,7 +1,6 @@
import { once } from '@storybook/core/client-logger';
-import { dequal as deepEqual } from 'dequal';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isEqual as deepEqual, isPlainObject } from 'es-toolkit';
import memoize from 'memoizerific';
import type { IStringifyOptions } from 'qs';
import qs from 'qs';
diff --git a/code/core/template/stories/args.stories.ts b/code/core/template/stories/args.stories.ts
index 4f3b766b5a30..b861f9cbb910 100644
--- a/code/core/template/stories/args.stories.ts
+++ b/code/core/template/stories/args.stories.ts
@@ -8,7 +8,7 @@ import {
UPDATE_STORY_ARGS,
} from '@storybook/core/core-events';
-import pick from 'lodash/pick';
+import { pick, toMerged } from 'es-toolkit';
export default {
component: globalThis.Components.Pre,
@@ -26,7 +26,7 @@ export default {
(storyFn: PartialStoryFn, context: StoryContext) => {
const { argNames } = context.parameters;
const args = { ...context.args };
- const object = argNames ? pick(args, argNames) : args;
+ const object = argNames ? toMerged({}, pick(args, argNames)) : args;
return storyFn({ args: { object } });
},
],
diff --git a/code/yarn.lock b/code/yarn.lock
index 900a35673a5f..622e3c9f8213 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5932,7 +5932,6 @@ __metadata:
"@types/find-cache-dir": "npm:^5.0.0"
"@types/fs-extra": "npm:^11.0.1"
"@types/js-yaml": "npm:^4.0.5"
- "@types/lodash": "npm:^4.14.167"
"@types/node": "npm:^22.0.0"
"@types/npmlog": "npm:^7.0.0"
"@types/picomatch": "npm:^2.3.0"
@@ -5972,6 +5971,7 @@ __metadata:
diff: "npm:^5.2.0"
downshift: "npm:^9.0.4"
ejs: "npm:^3.1.10"
+ es-toolkit: "npm:^1.16.0"
esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0"
esbuild-plugin-alias: "npm:^0.2.1"
esbuild-register: "npm:^3.5.0"
@@ -5993,7 +5993,6 @@ __metadata:
jsdoc-type-pratt-parser: "npm:^4.0.0"
lazy-universal-dotenv: "npm:^4.0.0"
leven: "npm:^4.0.0"
- lodash: "npm:^4.17.21"
markdown-to-jsx: "npm:^7.4.5"
memfs: "npm:^4.11.1"
memoizerific: "npm:^1.11.3"
@@ -13969,6 +13968,13 @@ __metadata:
languageName: node
linkType: hard
+"es-toolkit@npm:^1.16.0":
+ version: 1.16.0
+ resolution: "es-toolkit@npm:1.16.0"
+ checksum: 10c0/d2dc29a049e24583d31e5a4b3772ee157b598aaf99bb886d650c1bf52c2d7342101f5b52dbed663c39232f34eec59cade15d1b2c422df1489fa8f033b7be73ae
+ languageName: node
+ linkType: hard
+
"es6-promise@npm:^3.1.2":
version: 3.3.1
resolution: "es6-promise@npm:3.3.1"
From 74a0353fb77f5092697a72f97dd87f4afe99d5a9 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Tue, 27 Aug 2024 16:18:25 +0200
Subject: [PATCH 016/213] fixes
---
code/core/src/core-server/utils/stories-json.ts | 4 +---
.../src/preview-api/modules/preview-web/PreviewWeb.test.ts | 4 ++--
2 files changed, 3 insertions(+), 5 deletions(-)
diff --git a/code/core/src/core-server/utils/stories-json.ts b/code/core/src/core-server/utils/stories-json.ts
index 21870aef79ad..9dd0005cdcb6 100644
--- a/code/core/src/core-server/utils/stories-json.ts
+++ b/code/core/src/core-server/utils/stories-json.ts
@@ -40,9 +40,7 @@ export function useStoriesJson({
configDir?: string;
normalizedStories: NormalizedStoriesSpecifier[];
}) {
- const maybeInvalidate = debounce(() => serverChannel.emit(STORY_INDEX_INVALIDATED), DEBOUNCE, {
- leading: true,
- });
+ const maybeInvalidate = debounce(() => serverChannel.emit(STORY_INDEX_INVALIDATED), DEBOUNCE, {});
watchStorySpecifiers(normalizedStories, { workingDir }, async (specifier, path, removed) => {
const generator = await initializedStoryIndexGenerator;
generator.invalidate(specifier, path, removed);
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 3e31095abc27..57e3b0357a44 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
@@ -308,7 +308,7 @@ describe('PreviewWeb', () => {
expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING, 'component-one--missing');
mockChannel.emit.mockClear();
- const newComponentOneExports = merge({}, componentOneExports, {
+ const newComponentOneExports = toMerged(componentOneExports, {
d: { args: { foo: 'd' }, play: vi.fn() },
});
const newImportFn = vi.fn(async (path) => {
@@ -362,7 +362,7 @@ describe('PreviewWeb', () => {
});
await waitForSetCurrentStory();
- const newComponentOneExports = merge({}, componentOneExports, {
+ const newComponentOneExports = toMerged(componentOneExports, {
d: { args: { foo: 'd' }, play: vi.fn() },
});
const newImportFn = vi.fn(async (path) => {
From 5d06f4d7507e6a866408efe83228bd2e7017e317 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Tue, 27 Aug 2024 09:02:09 -0600
Subject: [PATCH 017/213] Apply suggestions from code review
Co-authored-by: Kasper Peulen
---
docs/writing-tests/test-runner-with-vitest.mdx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index 343a20555535..aaa24c3b58f8 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -91,7 +91,7 @@ beforeAll(project.beforeAll);
```ts title="vitest.config.ts"
import { defineConfig, mergeConfig } from 'vitest/config'
-import viteConfig from '../vite.config'
+import viteConfig from './vite.config'
import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
export default mergeConfig(
@@ -103,7 +103,7 @@ export default mergeConfig(
}),
],
// Glob pattern to find story files
- include: ['../src/**/*.stories.?(m)[jt]s?(x)'],
+ include: ['src/**/*.stories.?(m)[jt]s?(x)'],
// Enable browser mode
browser: {
enabled: true,
@@ -140,7 +140,7 @@ export default defineWorkspace([
}),
],
// Glob pattern to find story files
- include: ['../src/**/*.stories.?(m)[jt]s?(x)'],
+ include: ['src/**/*.stories.?(m)[jt]s?(x)'],
// Enable browser mode
browser: {
enabled: true,
From 4aeab563118f47f575088ef92f450b88a9be247d Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Tue, 27 Aug 2024 09:52:16 -0600
Subject: [PATCH 018/213] Further updates
---
docs/_snippets/addon-vitest-install.md | 6 ++--
.../writing-tests/test-runner-with-vitest.mdx | 34 +++++++++++++++++--
2 files changed, 35 insertions(+), 5 deletions(-)
diff --git a/docs/_snippets/addon-vitest-install.md b/docs/_snippets/addon-vitest-install.md
index d54a74ca17d1..06a229138d18 100644
--- a/docs/_snippets/addon-vitest-install.md
+++ b/docs/_snippets/addon-vitest-install.md
@@ -1,11 +1,11 @@
```shell renderer="common" language="js" packageManager="npx"
-npx storybook@latest add @storybook/experimental-addon-vitest
+npx storybook add @storybook/experimental-addon-vitest
```
```shell renderer="common" language="js" packageManager="pnpm"
-pnpm dlx storybook@latest add @storybook/experimental-addon-vitest
+pnpm exec storybook add @storybook/experimental-addon-vitest
```
```shell renderer="common" language="js" packageManager="yarn"
-yarn dlx storybook@latest add @storybook/experimental-addon-vitest
+yarn exec storybook add @storybook/experimental-addon-vitest
```
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index aaa24c3b58f8..ee470d740622 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -130,10 +130,12 @@ import { defineWorkspace } from 'vitest/config'
import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
export default defineWorkspace([
- // This is the path to your existing Vitest config files
+ // This is the path to your existing Vitest config file
'./vitest.config.ts',
{
name: 'storybook',
+ // This is the path to your existing Vite config file
+ extends: './vite.config.ts',
plugins: [
storybookTest({
storybookScript: 'yarn storybook --ci',
@@ -182,7 +184,29 @@ There are three primary ways to run tests using the Vitest plugin:
### CLI
-The plugin transforms your stories into real Vitest tests, so you run those tests just like you run any other Vitest tests in your project. Typically, you will have a `test` script in your `package.json` that runs Vitest. When you run that script, the addon will find and run your story-based tests. Here's an example of running your tests (in [watch mode](https://vitest.dev/guide/cli.html#vitest-watch), by default) using the Vitest CLI:
+The plugin transforms your stories into real Vitest tests, so you run those tests just like you run any other Vitest tests in your project. Typically, you will have a `test` script in your `package.json` that runs your tests.
+
+If you don't already have a `test` script, you can add one that runs Vitest:
+
+```json title="package.json"
+{
+ "scripts": {
+ "test": "vitest"
+ }
+}
+```
+
+If you already have a `test` script that runs something other than Vitest, you can either adjust it to run Vitest (as above) or add a new script that runs Vitest:
+
+```json title="package.json"
+{
+ "scripts": {
+ "test-storybook": "vitest"
+ }
+}
+```
+
+When you run that script, the addon will find and run your story-based tests. Here's an example of running your tests (in [watch mode](https://vitest.dev/guide/cli.html#vitest-watch), by default) using the Vitest CLI:
@@ -323,6 +347,12 @@ Additionally, the previous test runner ran your stories as orchestrated tests in
Finally, because of the simpler architecture and the use of Vitest, this plugin should be faster than the previous test runner for most projects. We'll do more benchmarking to quantify this in the future.
+### How to isolate Storybook tests from others?
+
+Some projects might contain a `test` property in their Vite configuration. Because the Vitest configuration used by this plugin extends that Vite config, the `test` properties are merged. This lack of isolation can cause issues with your Storybook tests.
+
+To isolate your Storybook tests from other tests, you need to move the `test` property from your Vite configuration to the Vitest configuration. The Vitest config used by the plugin can then safely extend your Vite config without merging the `test` property.
+
## API
### Exports
From f1f4724be226e7e924c313ffb90320a267f5b71f Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Tue, 27 Aug 2024 17:54:42 +0200
Subject: [PATCH 019/213] wip
---
.../core/src/core-server/utils/stories-json.test.ts | 3 +--
code/core/src/manager-api/lib/merge.ts | 9 ++++++++-
code/core/src/manager-api/modules/layout.ts | 8 ++++----
.../src/preview-api/modules/store/StoryStore.ts | 13 ++++++++++---
code/core/template/stories/args.stories.ts | 10 ++++++++--
5 files changed, 31 insertions(+), 12 deletions(-)
diff --git a/code/core/src/core-server/utils/stories-json.test.ts b/code/core/src/core-server/utils/stories-json.test.ts
index 78ff3697c3d6..9e876dd8d93f 100644
--- a/code/core/src/core-server/utils/stories-json.test.ts
+++ b/code/core/src/core-server/utils/stories-json.test.ts
@@ -471,8 +471,7 @@ describe('useStoriesJson', () => {
it('debounces invalidation events', async () => {
vi.mocked(debounce).mockImplementation(
- // @ts-expect-error it doesn't think default exists
- (await vi.importActual('debounce')).default
+ (await vi.importActual('es-toolkit')).debounce
);
const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
diff --git a/code/core/src/manager-api/lib/merge.ts b/code/core/src/manager-api/lib/merge.ts
index 6dc618ade6db..92ada66badba 100644
--- a/code/core/src/manager-api/lib/merge.ts
+++ b/code/core/src/manager-api/lib/merge.ts
@@ -1,6 +1,6 @@
import { logger } from '@storybook/core/client-logger';
-import { isEqual, mergeWith } from 'es-toolkit';
+import { isEqual, mergeWith, omitBy, pick } from 'es-toolkit';
export default (a: TObj, ...b: Partial[]): TObj => {
// start with empty object
@@ -71,3 +71,10 @@ export const noArrayMerge = (a: TObj, ...b: Partial[]): TObj =
return target as TObj;
};
+
+export function picky, K extends keyof T>(
+ obj: T,
+ keys: K[]
+): Partial> {
+ return omitBy(pick(obj, keys), (v) => v === undefined);
+}
diff --git a/code/core/src/manager-api/modules/layout.ts b/code/core/src/manager-api/modules/layout.ts
index 71b5523e2969..b90d552f4478 100644
--- a/code/core/src/manager-api/modules/layout.ts
+++ b/code/core/src/manager-api/modules/layout.ts
@@ -5,9 +5,9 @@ import { global } from '@storybook/global';
import { SET_CONFIG } from '@storybook/core/core-events';
-import { isEqual as deepEqual, pick, toMerged } from 'es-toolkit';
+import { isEqual as deepEqual, omitBy, pick, toMerged } from 'es-toolkit';
-import merge from '../lib/merge';
+import merge, { picky } from '../lib/merge';
import type { ModuleFn } from '../lib/types';
import type { State } from '../root';
@@ -354,14 +354,14 @@ export const init: ModuleFn = ({ store, provider, singleStory
const updatedLayout = {
...layout,
...(options.layout || {}),
- ...toMerged(options.layout || {}, pick(options, Object.keys(layout))),
+ ...picky(options, Object.keys(layout)),
...(singleStory && { navSize: 0 }),
};
const updatedUi = {
...ui,
...options.ui,
- ...toMerged(options.ui, pick(options, Object.keys(ui))),
+ ...toMerged(options.ui || {}, picky(options, Object.keys(ui))),
};
const updatedTheme = {
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 6e753905ee04..0d129f65400a 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -31,7 +31,7 @@ import {
MissingStoryFromCsfFileError,
} from '@storybook/core/preview-errors';
-import { mapValues, pick, toMerged } from 'es-toolkit';
+import { mapValues, omitBy, pick, toMerged } from 'es-toolkit';
import memoize from 'memoizerific';
import { HooksContext } from '../addons';
@@ -46,6 +46,13 @@ import {
processCSFFile,
} from './csf';
+export function picky, K extends keyof T>(
+ obj: T,
+ keys: K[]
+): Partial> {
+ return omitBy(pick(obj, keys), (v) => v === undefined);
+}
+
// TODO -- what are reasonable values for these?
const CSF_CACHE_SIZE = 1000;
const STORY_CACHE_SIZE = 10000;
@@ -353,7 +360,7 @@ export class StoryStore {
const stories: Record = mapValues(value.stories, (story) => {
const { importPath } = this.storyIndex.entries[story.id];
return {
- ...toMerged({}, pick(story, ['id', 'name', 'title'])),
+ ...picky(story, ['id', 'name', 'title']),
importPath,
// These 3 fields were going to be dropped in v7, but instead we will keep them for the
// 7.x cycle so that v7 Storybooks can be composed successfully in v6 Storybook.
@@ -361,7 +368,7 @@ export class StoryStore {
kind: story.title,
story: story.name,
parameters: {
- ...toMerged({}, pick(story.parameters, allowedParameters)),
+ ...picky(story.parameters, allowedParameters),
fileName: importPath,
},
};
diff --git a/code/core/template/stories/args.stories.ts b/code/core/template/stories/args.stories.ts
index b861f9cbb910..4c83a98ca0ae 100644
--- a/code/core/template/stories/args.stories.ts
+++ b/code/core/template/stories/args.stories.ts
@@ -8,7 +8,13 @@ import {
UPDATE_STORY_ARGS,
} from '@storybook/core/core-events';
-import { pick, toMerged } from 'es-toolkit';
+function pick(obj, keys) {
+ const result = {};
+ for (const key of keys) {
+ result[key] = obj[key];
+ }
+ return result;
+}
export default {
component: globalThis.Components.Pre,
@@ -26,7 +32,7 @@ export default {
(storyFn: PartialStoryFn, context: StoryContext) => {
const { argNames } = context.parameters;
const args = { ...context.args };
- const object = argNames ? toMerged({}, pick(args, argNames)) : args;
+ const object = argNames ? pick(args, argNames) : args;
return storyFn({ args: { object } });
},
],
From e6d7ac5f56d04e9aac19ef68d8fc7ae7bdb99dc7 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic
Date: Tue, 27 Aug 2024 20:14:51 +0200
Subject: [PATCH 020/213] Builder-Vite: Fix missing source map warning
---
.../src/codegen-modern-iframe-script.ts | 3 ++-
.../src/plugins/code-generator-plugin.ts | 23 +++++++++++--------
.../src/plugins/webpack-stats-plugin.ts | 7 +++++-
.../builder-vite/src/utils/virtual-module.ts | 3 +++
.../src/plugins/vue-component-meta.ts | 2 +-
5 files changed, 26 insertions(+), 12 deletions(-)
create mode 100644 code/builders/builder-vite/src/utils/virtual-module.ts
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 2de92617befa..86756b002a27 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -2,6 +2,7 @@ import { getFrameworkName, loadPreviewOrConfigFile } from 'storybook/internal/co
import type { Options, PreviewAnnotation } from 'storybook/internal/types';
import { processPreviewAnnotation } from './utils/process-preview-annotation';
+import { getResolvedVirtualModuleId } from './utils/virtual-module';
import { virtualAddonSetupFile, virtualStoriesFile } from './virtual-file-names';
export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
@@ -45,7 +46,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
return `
if (import.meta.hot) {
- import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
+ import.meta.hot.accept('${getResolvedVirtualModuleId(virtualStoriesFile)}', (newModule) => {
// importFn has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
});
diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
index 89f6430f7584..1909ceda0988 100644
--- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
@@ -8,6 +8,7 @@ import { generateImportFnScriptCode } from '../codegen-importfn-script';
import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
import { generateAddonSetupCode } from '../codegen-set-addon-channel';
import { transformIframeHtml } from '../transform-iframe-html';
+import { getResolvedVirtualModuleId } from '../utils/virtual-module';
import {
virtualAddonSetupFile,
virtualFileId,
@@ -28,11 +29,15 @@ export function codeGeneratorPlugin(options: Options): Plugin {
// invalidate the whole vite-app.js script on every file change.
// (this might be a little too aggressive?)
server.watcher.on('change', () => {
- const appModule = server.moduleGraph.getModuleById(virtualFileId);
+ const appModule = server.moduleGraph.getModuleById(
+ getResolvedVirtualModuleId(virtualFileId)
+ );
if (appModule) {
server.moduleGraph.invalidateModule(appModule);
}
- const storiesModule = server.moduleGraph.getModuleById(virtualStoriesFile);
+ const storiesModule = server.moduleGraph.getModuleById(
+ getResolvedVirtualModuleId(virtualStoriesFile)
+ );
if (storiesModule) {
server.moduleGraph.invalidateModule(storiesModule);
}
@@ -70,33 +75,33 @@ export function codeGeneratorPlugin(options: Options): Plugin {
},
resolveId(source) {
if (source === virtualFileId) {
- return `${virtualFileId}`;
+ return getResolvedVirtualModuleId(virtualFileId);
}
if (source === iframePath) {
return iframeId;
}
if (source === virtualStoriesFile) {
- return `${virtualStoriesFile}`;
+ return getResolvedVirtualModuleId(virtualStoriesFile);
}
if (source === virtualPreviewFile) {
- return virtualPreviewFile;
+ return getResolvedVirtualModuleId(virtualPreviewFile);
}
if (source === virtualAddonSetupFile) {
- return `${virtualAddonSetupFile}`;
+ return getResolvedVirtualModuleId(virtualAddonSetupFile);
}
return undefined;
},
async load(id, config) {
- if (id === `${virtualStoriesFile}`) {
+ if (id === getResolvedVirtualModuleId(virtualStoriesFile)) {
return generateImportFnScriptCode(options);
}
- if (id === `${virtualAddonSetupFile}`) {
+ if (id === getResolvedVirtualModuleId(virtualAddonSetupFile)) {
return generateAddonSetupCode();
}
- if (id === `${virtualFileId}`) {
+ if (id === getResolvedVirtualModuleId(virtualFileId)) {
return generateModernIframeScriptCode(options, projectRoot);
}
diff --git a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
index 3b8deebc8111..9442291df2aa 100644
--- a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
@@ -6,6 +6,8 @@ import type { BuilderStats } from 'storybook/internal/types';
import slash from 'slash';
import type { Plugin } from 'vite';
+import { getResolvedVirtualModuleId } from '../utils/virtual-module';
+
/*
* Reason, Module are copied from chromatic types
* https://github.com/chromaui/chromatic-cli/blob/145a5e295dde21042e96396c7e004f250d842182/bin-src/types.ts#L265-L276
@@ -50,7 +52,10 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
/** Convert an absolute path name to a path relative to the vite root, with a starting `./` */
function normalize(filename: string) {
// Do not try to resolve virtual files
- if (filename.startsWith('/virtual:')) {
+ if (
+ filename.startsWith('/virtual:') ||
+ filename.startsWith(getResolvedVirtualModuleId('/virtual:'))
+ ) {
return filename;
}
// Otherwise, we need them in the format `./path/to/file.js`.
diff --git a/code/builders/builder-vite/src/utils/virtual-module.ts b/code/builders/builder-vite/src/utils/virtual-module.ts
new file mode 100644
index 000000000000..6f72ce19d650
--- /dev/null
+++ b/code/builders/builder-vite/src/utils/virtual-module.ts
@@ -0,0 +1,3 @@
+export function getResolvedVirtualModuleId(virtualModuleId: string) {
+ return `\0${virtualModuleId}`;
+}
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
index bb06a958a771..036ab18945ae 100644
--- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
@@ -26,7 +26,7 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<
// exclude stories, virtual modules and storybook internals
const exclude =
- /\.stories\.(ts|tsx|js|jsx)$|^\/virtual:|^\/sb-preview\/|\.storybook\/.*\.(ts|js)$/;
+ /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|^\/sb-preview\/|\.storybook\/.*\.(ts|js)$/;
const include = /\.(vue|ts|js|tsx|jsx)$/;
const filter = createFilter(include, exclude);
From cfd8912b2cc40de40e70768bdce95c655268e3cd Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 28 Aug 2024 08:55:38 +0200
Subject: [PATCH 021/213] fix lockfile
---
code/yarn.lock | 11 +----------
1 file changed, 1 insertion(+), 10 deletions(-)
diff --git a/code/yarn.lock b/code/yarn.lock
index 9c4f21999f31..007b51ef4f6d 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -23009,16 +23009,7 @@ __metadata:
languageName: node
linkType: hard
-"prettier@npm:*, prettier@npm:^3.1.1":
- version: 3.2.5
- resolution: "prettier@npm:3.2.5"
- bin:
- prettier: bin/prettier.cjs
- checksum: 10c0/ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6
- languageName: node
- linkType: hard
-
-"prettier@npm:^3.2.5":
+"prettier@npm:*, prettier@npm:^3.1.1, prettier@npm:^3.2.5":
version: 3.3.3
resolution: "prettier@npm:3.3.3"
bin:
From 5768354461bce54aad24715cb4c9cf39a5a7d9dc Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 28 Aug 2024 08:55:48 +0200
Subject: [PATCH 022/213] fix
---
code/core/src/preview-api/modules/store/StoryStore.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 0d129f65400a..cd7dc40a6ed1 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -371,7 +371,7 @@ export class StoryStore {
...picky(story.parameters, allowedParameters),
fileName: importPath,
},
- };
+ } as V3CompatIndexEntry;
});
return {
From 7f56606607457b2861620c193691387bf3842c65 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 28 Aug 2024 09:42:26 +0200
Subject: [PATCH 023/213] fix linting
---
code/core/src/common/js-package-manager/JsPackageManager.ts | 2 +-
.../src/preview-api/modules/store/csf/portable-stories.ts | 2 +-
code/e2e-tests/util.ts | 2 +-
code/frameworks/angular/src/server/angular-cli-webpack.js | 2 +-
code/frameworks/vue3-vite/src/preset.ts | 2 +-
.../cli-storybook/src/automigrate/helpers/mainConfigFile.ts | 4 +++-
.../src/automigrate/helpers/new-frameworks-utils.ts | 4 ++--
code/lib/cli-storybook/src/automigrate/index.ts | 2 +-
code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts | 2 +-
code/renderers/vue3/src/docs/extractArgTypes.ts | 2 +-
10 files changed, 13 insertions(+), 11 deletions(-)
diff --git a/code/core/src/common/js-package-manager/JsPackageManager.ts b/code/core/src/common/js-package-manager/JsPackageManager.ts
index 4b3e00c2f5e7..359c45351a01 100644
--- a/code/core/src/common/js-package-manager/JsPackageManager.ts
+++ b/code/core/src/common/js-package-manager/JsPackageManager.ts
@@ -60,7 +60,7 @@ export abstract class JsPackageManager {
/** Get the INSTALLED version of a package from the package.json file */
async getPackageVersion(packageName: string, basePath = this.cwd): Promise {
const packageJSON = await this.getPackageJSON(packageName, basePath);
- return packageJSON ? packageJSON.version ?? null : null;
+ return packageJSON ? (packageJSON.version ?? null) : null;
}
constructor(options?: JsPackageManagerOptions) {
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 1525b6e3e6d8..7f6dd737cadc 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -116,7 +116,7 @@ export function composeStory 0
? defaultConfig
- : globalThis.defaultProjectAnnotations ?? {},
+ : (globalThis.defaultProjectAnnotations ?? {}),
globalThis.globalProjectAnnotations ?? {},
projectAnnotations ?? {},
])
diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index da0ff313431b..cd2936e4a99d 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -49,7 +49,7 @@ export class SbPage {
await this.page.waitForURL((url) =>
url.search.includes(
- `path=/${viewMode ?? name === 'docs' ? 'docs' : 'story'}/${titleId}--${storyId}`
+ `path=/${(viewMode ?? name === 'docs') ? 'docs' : 'story'}/${titleId}--${storyId}`
)
);
diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.js b/code/frameworks/angular/src/server/angular-cli-webpack.js
index 92ed6225d19f..6be86712e5bc 100644
--- a/code/frameworks/angular/src/server/angular-cli-webpack.js
+++ b/code/frameworks/angular/src/server/angular-cli-webpack.js
@@ -68,7 +68,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
outputPath:
typeof builderOptions.outputPath === 'string'
? builderOptions.outputPath
- : builderOptions.outputPath?.base ?? 'noop-out',
+ : (builderOptions.outputPath?.base ?? 'noop-out'),
// Fixed options
optimization: false,
diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts
index 057b9a3d92a1..ea80b09bf3d7 100644
--- a/code/frameworks/vue3-vite/src/preset.ts
+++ b/code/frameworks/vue3-vite/src/preset.ts
@@ -21,7 +21,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
const framework = await options.presets.apply('framework');
const frameworkOptions: FrameworkOptions =
- typeof framework === 'string' ? {} : framework.options ?? {};
+ typeof framework === 'string' ? {} : (framework.options ?? {});
const docgen = resolveDocgenOptions(frameworkOptions.docgen);
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
index bf9daf36c7ae..c306d2578a13 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
@@ -94,7 +94,9 @@ export const getBuilderPackageName = (mainConfig?: StorybookConfigRaw) => {
export const getFrameworkOptions = (
mainConfig?: StorybookConfigRaw
): Record | null => {
- return typeof mainConfig?.framework === 'string' ? null : mainConfig?.framework?.options ?? null;
+ return typeof mainConfig?.framework === 'string'
+ ? null
+ : (mainConfig?.framework?.options ?? null);
};
/**
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
index a4ab6ee34a4f..280bb2cf5034 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
@@ -77,14 +77,14 @@ export const detectBuilderInfo = async ({
const builderPackageName = getBuilderPackageName(mainConfig);
const frameworkPackageName = getFrameworkPackageName(mainConfig) as string;
- let builderOptions = typeof builder !== 'string' ? builder?.options ?? {} : {};
+ let builderOptions = typeof builder !== 'string' ? (builder?.options ?? {}) : {};
if (builderPackageName) {
builderOrFrameworkName = builderPackageName;
} else if (framework) {
if (Object.keys(frameworkPackages).includes(frameworkPackageName)) {
builderOrFrameworkName = frameworkPackageName;
- builderOptions = typeof framework === 'object' ? framework.options?.builder ?? {} : {};
+ builderOptions = typeof framework === 'object' ? (framework.options?.builder ?? {}) : {};
}
}
diff --git a/code/lib/cli-storybook/src/automigrate/index.ts b/code/lib/cli-storybook/src/automigrate/index.ts
index 690c3d1b15f7..f9b6f613d405 100644
--- a/code/lib/cli-storybook/src/automigrate/index.ts
+++ b/code/lib/cli-storybook/src/automigrate/index.ts
@@ -274,7 +274,7 @@ export async function runFixes({
if (result) {
const promptType: Prompt =
- typeof f.promptType === 'function' ? await f.promptType(result) : f.promptType ?? 'auto';
+ typeof f.promptType === 'function' ? await f.promptType(result) : (f.promptType ?? 'auto');
logger.info(`\n🔎 found a '${chalk.cyan(f.id)}' migration:`);
const message = f.prompt(result);
diff --git a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
index 304fb0c40b05..6d41995d3e82 100644
--- a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
@@ -7,7 +7,7 @@ import { dedent } from 'ts-dedent';
import jscodeshift, { nameToValidExport } from '../mdx-to-csf';
expect.addSnapshotSerializer({
- print: (val: any) => (typeof val === 'string' ? val : JSON.stringify(val, null, 2) ?? ''),
+ print: (val: any) => (typeof val === 'string' ? val : (JSON.stringify(val, null, 2) ?? '')),
test: () => true,
});
diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts
index 7e76c731177f..f52f21c15255 100644
--- a/code/renderers/vue3/src/docs/extractArgTypes.ts
+++ b/code/renderers/vue3/src/docs/extractArgTypes.ts
@@ -129,7 +129,7 @@ export const extractFromVueDocgenApi = (
}
}
- const required = 'required' in docgenInfo ? docgenInfo.required ?? false : false;
+ const required = 'required' in docgenInfo ? (docgenInfo.required ?? false) : false;
return {
name: docgenInfo.name,
From a92353857292eb83964588c21557b94c78e9dd28 Mon Sep 17 00:00:00 2001
From: Lars Rickert
Date: Wed, 31 Jul 2024 10:19:34 +0200
Subject: [PATCH 024/213] fix: add missing prop controls
---
code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
index bb06a958a771..2696f116ffbd 100644
--- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
@@ -284,7 +284,11 @@ async function getTsConfigReferences(tsConfigPath: string) {
* HTMLElement, MouseEvent) are used.
*/
function removeNestedSchemas(schema: PropertyMetaSchema) {
- if (typeof schema !== 'object') {
+ if (typeof schema !== 'object') return;
+ if (schema.kind === 'enum') {
+ // for enum types, we do not want to remove the schemas because otherwise the controls will be missing
+ // instead we remove the nested schemas for the enum entries to prevent out of memory errors for types like "HTMLElement | MouseEvent"
+ schema.schema?.forEach((enumSchema) => removeNestedSchemas(enumSchema));
return;
}
delete schema.schema;
From 78b22a96fe36a2331627a19523f9c89674c0be78 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Wed, 28 Aug 2024 14:35:38 -0600
Subject: [PATCH 025/213] Address feedback
---
.../writing-tests/test-runner-with-vitest.mdx | 86 +++++++++----------
1 file changed, 39 insertions(+), 47 deletions(-)
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index ee470d740622..91244342922f 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -11,9 +11,11 @@ sidebar:
While this feature is experimental, it is published as the `@storybook/experimental-addon-vitest` package.
-Storybook's test runner with Vitest uses a Vitest plugin to transform your [stories](../writing-stories/index.mdx) into tests. You can then run those tests just like any other in Vitest, which will check that the story renders without errors and, if a [play function](../writing-stories/play-function.mdx) is defined, that it runs as expected and any [assertions made](../writing-tests/interaction-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
+Storybook's test runner with Vitest transforms your [stories](../writing-stories/index.mdx) into tests using a Vitest plugin and [portable stories](../api/portable-stories/portable-stories-vitest.mdx). Those tests are then run using [Vitest](https://vitest.dev). This approach is faster and more flexible than the [previous test runner](./test-runner.mdx), which required a running Storybook instance to test your stories.
-By using Vitest's browser mode, those tests are run in a real browser environment, which gives you more reliable results for UI components that commonly rely on browser APIs or features.
+We recommend (and configure, by default) running Vitest in [browser mode](https://vitest.dev/guide/browser/), using [Playwright's](https://playwright.dev) Chromium browser. Browser mode ensures your components are tested in a real browser environment, which is more accurate than simulations like JSDom or HappyDom. This is especially important for testing components that rely on browser APIs or features.
+
+Stories are tested in two ways: a smoke test to ensure it renders and, if a [play function](../writing-stories/play-function.mdx) is defined, that function is run and any [assertions made](../writing-tests/interaction-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
## Install and set up
@@ -27,7 +29,7 @@ Run the following command to install and configure the addon, which contains the
-That command will install and register the Vitest addon. It will also inspect your project's Vite and Vitest setup, and install and configure them if necessary.
+That [`add` command](../addons/install-addons.mdx#automatic-installation) will install and register the Vitest addon. It will also inspect your project's Vite and Vitest setup, and install and configure them with sensible defaults, if necessary. You may need to adjust the configuration to fit your project's needs. The full configuration options can be found in the [API section](#options), below.
@@ -53,23 +55,21 @@ export default defineConfig({
-The configuration produced by the `add` command will attempt to set some sensible defaults for your project. However, you may need to adjust the configuration to fit your project's needs. The full configuration options can be found in the [API section](#options), below.
-
### Manual setup
For some project setups, the `add` command may be unable to automate the plugin setup and ask you to complete additional setup steps. Here's what to do:
-1. Install the addon, `@storybook/experimental-addon-vitest`, in your project and [register it in your Storybook configuration](http://storybook.js.org/docs/addons/install-addons#manual-installation).
1. Make sure Vite and Vitest are configured in your project.
-1. Make sure Vitest is configured to use [browser mode](https://vitest.dev/guide/browser/).
+1. Configure Vitest to use [browser mode](https://vitest.dev/guide/browser/).
+1. Install the addon, `@storybook/experimental-addon-vitest`, in your project and [register it in your Storybook configuration](http://storybook.js.org/docs/addons/install-addons#manual-installation).
1. If you're using Next.js, make sure you're using [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs).
1. If you're using SvelteKit, make sure you're using `@storybook/sveltekit/vite`.
1. Create a [test setup file](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations), `.storybook/vitest.setup.ts`.
-1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. You can reference examples, below.
+1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. You can use the example configuration files, below, as a guide.
### Example configuration files
-Here are example configuration files generated by the `add` command. You can use these as a reference when setting up your project.
+When the addon is set up automatically, it will create or adjust your Vitest configuration files for you. If you're setting up manually, you can use the following examples as a reference when configuring your project.
Example Vitest setup file
@@ -112,8 +112,9 @@ export default mergeConfig(
provider: 'playwright',
headless: true,
},
- // Disabling isolation is faster and similar to how tests are isolated in Storybook itself.
- // Consider removing this, if you have flaky tests.
+ // Speed up tests and better match how they run in Storybook itself
+ // https://vitest.dev/config/#isolate
+ // Consider removing this if you have flaky tests
isolate: false,
setupFiles: ['./.storybook/vitest.setup.ts'],
})
@@ -151,8 +152,9 @@ export default defineWorkspace([
provider: 'playwright',
headless: true,
},
- // Disabling isolation is faster and similar to how tests are isolated in Storybook itself.
- // Consider removing this, if you have flaky tests.
+ // Speed up tests and better match how they run in Storybook itself
+ // https://vitest.dev/config/#isolate
+ // Consider removing this if you have flaky tests
isolate: false,
setupFiles: ['./.storybook/vitest.setup.ts'],
}
@@ -160,24 +162,6 @@ export default defineWorkspace([
```
-## How it works
-
-Before running tests using the plugin, it's helpful to understand how it works.
-
-First, the plugin does not need to run or build Storybook to test your stories. Instead, it transforms your stories into tests using Vite and [portable stories](../api/portable-stories/portable-stories-vitest.mdx). Portable stories are a mechanism to compose all of a story's configuration ([parameters](../writing-stories/parameters.mdx), [decorators](../writing-stories/decorators.mdx), etc.) with the story itself. This allows you to run your stories as tests without needing to run Storybook.
-
-Those tests are then run using Vitest. We recommend (and configure, by default) running Vitest in browser mode, using Playwright's Chromium browser. Browser mode ensures your components are tested in a real browser environment, which is more accurate than simulations like JSDom or HappyDom. This is especially important for testing components that rely on browser APIs or features.
-
-Stories are tested in two ways: a smoke test to ensure it renders and, if a [play function](../writing-stories/play-function.mdx) is defined, that function is run and any [assertions made](../writing-tests/interaction-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
-
-### Debugging
-
-While the plugin does not require Storybook to run when testing, you may still want to run Storybook to debug your tests. To enable this, provide the [`storybookScript` option](#storybookscript) in the plugin configuration. When you run Vitest in watch mode, the plugin will start Storybook using this script and provide links to the story in the output on test failures. This allows you to quickly jump to the story in Storybook to debug the issue.
-
-You can also provide a [`storybookUrl` option](#storybookurl) to the plugin configuration. When you're not using watch mode and tests fail, the plugin will provide a link to the story using this URL in the output. This is useful when [running tests in CI](#in-ci) or other environments where Storybook is not already running.
-
-[TK - Screenshot of test output with links to SB]
-
## Usage
There are three primary ways to run tests using the Vitest plugin:
@@ -262,6 +246,14 @@ export default defineWorkspace([
])
```
+### Debugging
+
+While the plugin does not require Storybook to run when testing, you may still want to run Storybook to debug your tests. To enable this, provide the [`storybookScript` option](#storybookscript) in the plugin configuration. When you run Vitest in watch mode, the plugin will start Storybook using this script and provide links to the story in the output on test failures. This allows you to quickly jump to the story in Storybook to debug the issue.
+
+You can also provide a [`storybookUrl` option](#storybookurl) to the plugin configuration. When you're not using watch mode and tests fail, the plugin will provide a link to the story using this URL in the output. This is useful when [running tests in CI](#in-ci) or other environments where Storybook is not already running.
+
+[TK - Screenshot of test output with links to SB]
+
## Configuration
Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested.
@@ -302,11 +294,7 @@ If the same tag is in both the `include` and `exclude` arrays, the `exclude` beh
## FAQ
-### How to ensure my tests can find assets in the public directory?
-
-If your stories use assets in the public directory and you're not using the default public directory location (`public`), you need to adjust the Vitest configuration to include the public directory. You can do this by providing the [`publicDir` option in the Vitest configuration file](https://vitejs.dev/config/shared-options.html#publicdir).
-
-### How to debug my tests in Storybook?
+### How do I debug my tests in Storybook?
The plugin will attempt to provide links to the story in Storybook when tests fail, for [debugging](#debugging) purposes.
@@ -317,7 +305,11 @@ If the URLs are not working when running tests in watch mode, you should check t
If the URLs are not working when running tests in CI, you should ensure the Storybook is built and published before running the tests. You can then provide the URL to the published Storybook using the `storybookUrl` option. See the [In CI](#in-ci) section for an example.
-### How to apply custom Vite configuration?
+### How do I ensure my tests can find assets in the public directory?
+
+If your stories use assets in the public directory and you're not using the default public directory location (`public`), you need to adjust the Vitest configuration to include the public directory. You can do this by providing the [`publicDir` option in the Vitest configuration file](https://vitejs.dev/config/shared-options.html#publicdir).
+
+### How do I apply custom Vite configuration?
If you have custom operations defined in [`viteFinal`](../api/main-config/main-config-vite-final.mdx) in your `.storybook/main.js|ts` file, you will need to translate those into the Vitest configuration. This is because the plugin does not use the Storybook Vite configuration.
@@ -325,17 +317,23 @@ If you have custom operations defined in [`viteFinal`](../api/main-config/main-c
TK - Is there a good example we could offer here?
```
+### How do I isolate Storybook tests from others?
+
+Some projects might contain a `test` property in their Vite configuration. Because the Vitest configuration used by this plugin extends that Vite config, the `test` properties are merged. This lack of isolation can cause issues with your Storybook tests.
+
+To isolate your Storybook tests from other tests, you need to move the `test` property from your Vite configuration to the Vitest configuration. The Vitest config used by the plugin can then safely extend your Vite config without merging the `test` property.
+
### Why do we recommend browser mode?
Vitest's browser mode runs your tests in a real browser (Chromium, via Playwright, in the default configuration). The alternative is a simulated browser environment, like JSDom or HappyDom, which can have differences in behavior compared to a real browser. For UI components, which can often depend on browser APIs or features, running tests in a real browser is more accurate.
For more, see [Vitest's guide on using browser mode effectively](https://vitest.dev/guide/browser/#motivation).
-### How to use WebDriver instead of Playwright?
+### How do I use WebDriver instead of Playwright?
We recommend running tests in a browser using Playwright, but you can use WebDriverIO instead. To do so, you need to adjust the [browser provider in the Vitest configuration file](https://vitest.dev/config/#browser-provider).
-### How to use a browser other than Chromium
+### How do I use a browser other than Chromium
We recommend using Chromium, because it is most likely to best match the experience of a majority of your users. However, you can use other browsers by adjusting the [browser name in the Vitest configuration file](https://vitest.dev/config/#browser-name). Note that [Playwright and WebDriverIO support different browsers](https://vitest.dev/guide/browser/#browser-option-types).
@@ -347,12 +345,6 @@ Additionally, the previous test runner ran your stories as orchestrated tests in
Finally, because of the simpler architecture and the use of Vitest, this plugin should be faster than the previous test runner for most projects. We'll do more benchmarking to quantify this in the future.
-### How to isolate Storybook tests from others?
-
-Some projects might contain a `test` property in their Vite configuration. Because the Vitest configuration used by this plugin extends that Vite config, the `test` properties are merged. This lack of isolation can cause issues with your Storybook tests.
-
-To isolate your Storybook tests from other tests, you need to move the `test` property from your Vite configuration to the Vitest configuration. The Vitest config used by the plugin can then safely extend your Vite config without merging the `test` property.
-
## API
### Exports
@@ -395,7 +387,7 @@ Type: `string`
Default: `http://localhost:6006`
-The URL where Storybook is hosted. This is used for internal checks and to provide a link to the story in the test output on failures.
+The URL where Storybook is hosted. This is used for internal checks and to provide a [link to the story in the test output on failures](#debugging).
#### `tags`
@@ -419,7 +411,7 @@ Default:
}
```
-Tags to include, exclude, or skip. These tags are defined as annotations in your story, meta, or preview.
+[Tags](../writing-stories/tags.mdx) to include, exclude, or skip. These tags are defined as annotations in your story, meta, or preview.
- **`include`**: Stories with these tags will be tested
- **`exclude`**: Stories with these tags will not be tested, and will not be counted in the test results
From 1654ac5fa7c65a196fbe7d1d3bc9e7cb1de1cd68 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Thu, 29 Aug 2024 12:59:41 -0600
Subject: [PATCH 026/213] Fixes
---
docs/writing-tests/index.mdx | 2 +-
.../writing-tests/test-runner-with-vitest.mdx | 60 ++++++++++---------
2 files changed, 33 insertions(+), 29 deletions(-)
diff --git a/docs/writing-tests/index.mdx b/docs/writing-tests/index.mdx
index e5f0524f7f7b..36f3ccefcfa7 100644
--- a/docs/writing-tests/index.mdx
+++ b/docs/writing-tests/index.mdx
@@ -25,4 +25,4 @@ Storybook also comes with tools, [a test runner](./test-runner.mdx), and handy i
* [Test runner](./test-runner.mdx) to automate test execution
* [Test coverage](./test-coverage.mdx) for measuring code coverage
* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
-* [**Unit tests**](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
+* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index 91244342922f..5e2f69230215 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -102,21 +102,23 @@ export default mergeConfig(
storybookScript: 'yarn storybook --ci',
}),
],
- // Glob pattern to find story files
- include: ['src/**/*.stories.?(m)[jt]s?(x)'],
- // Enable browser mode
- browser: {
- enabled: true,
- name: 'chromium',
- // Make sure to install Playwright
- provider: 'playwright',
- headless: true,
+ test: {
+ // Glob pattern to find story files
+ include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+ // Enable browser mode
+ browser: {
+ enabled: true,
+ name: 'chromium',
+ // Make sure to install Playwright
+ provider: 'playwright',
+ headless: true,
+ },
+ // Speed up tests and better match how they run in Storybook itself
+ // https://vitest.dev/config/#isolate
+ // Consider removing this if you have flaky tests
+ isolate: false,
+ setupFiles: ['./.storybook/vitest.setup.ts'],
},
- // Speed up tests and better match how they run in Storybook itself
- // https://vitest.dev/config/#isolate
- // Consider removing this if you have flaky tests
- isolate: false,
- setupFiles: ['./.storybook/vitest.setup.ts'],
})
)
```
@@ -142,21 +144,23 @@ export default defineWorkspace([
storybookScript: 'yarn storybook --ci',
}),
],
- // Glob pattern to find story files
- include: ['src/**/*.stories.?(m)[jt]s?(x)'],
- // Enable browser mode
- browser: {
- enabled: true,
- name: 'chromium',
- // Make sure to install Playwright
- provider: 'playwright',
- headless: true,
+ test: {
+ // Glob pattern to find story files
+ include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+ // Enable browser mode
+ browser: {
+ enabled: true,
+ name: 'chromium',
+ // Make sure to install Playwright
+ provider: 'playwright',
+ headless: true,
+ },
+ // Speed up tests and better match how they run in Storybook itself
+ // https://vitest.dev/config/#isolate
+ // Consider removing this if you have flaky tests
+ isolate: false,
+ setupFiles: ['./.storybook/vitest.setup.ts'],
},
- // Speed up tests and better match how they run in Storybook itself
- // https://vitest.dev/config/#isolate
- // Consider removing this if you have flaky tests
- isolate: false,
- setupFiles: ['./.storybook/vitest.setup.ts'],
}
])
```
From e233abea31a98edda96c310df48781b7b1fe1ec6 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:51:50 +0700
Subject: [PATCH 027/213] chore: update picocolors
---
code/core/package.json | 2 +-
code/lib/cli/package.json | 2 +-
code/yarn.lock | 13 ++++++++++---
3 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/code/core/package.json b/code/core/package.json
index dc5948900296..955579cf82b2 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -380,7 +380,7 @@
"nanoid": "^4.0.2",
"npmlog": "^7.0.0",
"open": "^8.4.0",
- "picocolors": "^1.0.1",
+ "picocolors": "^1.1.0",
"picomatch": "^2.3.0",
"polished": "^4.2.2",
"prettier": "^3.2.5",
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 327164dccaef..89b2e66c33e3 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -310,7 +310,7 @@
},
"dependencies": {
"@storybook/core": "workspace:*",
- "picocolors": "^1.0.1"
+ "picocolors": "^1.1.0"
},
"devDependencies": {
"typescript": "^5.3.2"
diff --git a/code/yarn.lock b/code/yarn.lock
index 0cd25257f93c..84280e3f1376 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6687,7 +6687,7 @@ __metadata:
nanoid: "npm:^4.0.2"
npmlog: "npm:^7.0.0"
open: "npm:^8.4.0"
- picocolors: "npm:^1.0.1"
+ picocolors: "npm:^1.1.0"
picomatch: "npm:^2.3.0"
polished: "npm:^4.2.2"
prettier: "npm:^3.2.5"
@@ -22949,13 +22949,20 @@ __metadata:
languageName: node
linkType: hard
-"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1":
+"picocolors@npm:^1.0.0":
version: 1.0.1
resolution: "picocolors@npm:1.0.1"
checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
languageName: node
linkType: hard
+"picocolors@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "picocolors@npm:1.1.0"
+ checksum: 10c0/86946f6032148801ef09c051c6fb13b5cf942eaf147e30ea79edb91dd32d700934edebe782a1078ff859fb2b816792e97ef4dab03d7f0b804f6b01a0df35e023
+ languageName: node
+ linkType: hard
+
"picomatch@npm:4.0.1":
version: 4.0.1
resolution: "picomatch@npm:4.0.1"
@@ -26452,7 +26459,7 @@ __metadata:
resolution: "storybook@workspace:lib/cli"
dependencies:
"@storybook/core": "workspace:*"
- picocolors: "npm:^1.0.1"
+ picocolors: "npm:^1.1.0"
typescript: "npm:^5.3.2"
bin:
getstorybook: ./bin/index.cjs
From 59f926afa6311f95bdbac0ac6ac086fca2f75704 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Tue, 3 Sep 2024 12:04:12 -0600
Subject: [PATCH 028/213] Address comments and further changes
- Limit to react, vue, and svelte renderers
- `addon-vitest` -> `addon-test`
- `addon-vitest/plugin` -> `addon-test/vite-plugin`
- Add requirements
- Add more details and examples about framework plugins
- Add more detail about test setup file
- Move comparison to previous test runner into its own section
- Format snippets
---
...itest-install.md => addon-test-install.md} | 6 +-
...t-run-tests.md => addon-test-run-tests.md} | 0
.../writing-tests/test-runner-with-vitest.mdx | 178 +++++++++++++-----
3 files changed, 132 insertions(+), 52 deletions(-)
rename docs/_snippets/{addon-vitest-install.md => addon-test-install.md} (53%)
rename docs/_snippets/{addon-vitest-run-tests.md => addon-test-run-tests.md} (100%)
diff --git a/docs/_snippets/addon-vitest-install.md b/docs/_snippets/addon-test-install.md
similarity index 53%
rename from docs/_snippets/addon-vitest-install.md
rename to docs/_snippets/addon-test-install.md
index 06a229138d18..b516f291b85f 100644
--- a/docs/_snippets/addon-vitest-install.md
+++ b/docs/_snippets/addon-test-install.md
@@ -1,11 +1,11 @@
```shell renderer="common" language="js" packageManager="npx"
-npx storybook add @storybook/experimental-addon-vitest
+npx storybook add @storybook/experimental-addon-test
```
```shell renderer="common" language="js" packageManager="pnpm"
-pnpm exec storybook add @storybook/experimental-addon-vitest
+pnpm exec storybook add @storybook/experimental-addon-test
```
```shell renderer="common" language="js" packageManager="yarn"
-yarn exec storybook add @storybook/experimental-addon-vitest
+yarn exec storybook add @storybook/experimental-addon-test
```
diff --git a/docs/_snippets/addon-vitest-run-tests.md b/docs/_snippets/addon-test-run-tests.md
similarity index 100%
rename from docs/_snippets/addon-vitest-run-tests.md
rename to docs/_snippets/addon-test-run-tests.md
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index 5e2f69230215..b1fb80d74a3f 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -5,10 +5,22 @@ sidebar:
title: Test runner with Vitest
---
+
+
+ Test runner with Vitest is currently only supported in [React](?renderer=react), [Vue](?renderer=vue) and [Svelte](?renderer=svelte) projects.
+
+ If you are using a different renderer, you can use the [previous test runner](./test-runner.mdx) to test your stories.
+
+
+ {/* End non-supported renderers */}
+
+
+
+
(⚠️ **Experimental**)
- While this feature is experimental, it is published as the `@storybook/experimental-addon-vitest` package.
+ While this feature is experimental, it is published as the `@storybook/experimental-addon-test` package.
Storybook's test runner with Vitest transforms your [stories](../writing-stories/index.mdx) into tests using a Vitest plugin and [portable stories](../api/portable-stories/portable-stories-vitest.mdx). Those tests are then run using [Vitest](https://vitest.dev). This approach is faster and more flexible than the [previous test runner](./test-runner.mdx), which required a running Storybook instance to test your stories.
@@ -19,7 +31,15 @@ Stories are tested in two ways: a smoke test to ensure it renders and, if a [pla
## Install and set up
-Get started by upgrading to at least Storybook 8.3, then installing and configuring the plugin in your project.
+Before installing, make sure your project meets the following requirements:
+
+- Storybook ≥ 8.3
+- A Storybook framework that uses Vite (e.g. [`vue3-vite`](../get-started/frameworks/vue3-vite.mdx)), or the [Storybook Next.js framework](../get-started/frameworks/nextjs.mdx)
+- Vitest ≥ 2.0
+ - If you're not using Vitest, it will be installed and configured for you when you install the addon
+- For Next.js projects, Next.js ≥ 14.0
+
+If you're not yet using Storybook 8.3, you can [upgrade your Storybook](../configure/upgrading.mdx) to the latest version:
@@ -27,45 +47,94 @@ Get started by upgrading to at least Storybook 8.3, then installing and configur
Run the following command to install and configure the addon, which contains the plugin to run your stories as tests using Vitest:
-
+
That [`add` command](../addons/install-addons.mdx#automatic-installation) will install and register the Vitest addon. It will also inspect your project's Vite and Vitest setup, and install and configure them with sensible defaults, if necessary. You may need to adjust the configuration to fit your project's needs. The full configuration options can be found in the [API section](#options), below.
+### Manual setup
+
+For some project setups, the `add` command may be unable to automate the plugin setup and ask you to complete additional setup steps. Here's what to do:
+
+1. Make sure Vite and Vitest are configured in your project.
+1. Configure Vitest to use [browser mode](https://vitest.dev/guide/browser/).
+1. Install the addon, `@storybook/experimental-addon-test`, in your project and [register it in your Storybook configuration](http://storybook.js.org/docs/addons/install-addons#manual-installation).
+1. Create a test setup file, `.storybook/vitest.setup.ts`. You can use the example setup file, below, as a guide
+1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. You can use the example configuration files, below, as a guide.
+
+#### Framework plugins
+
+Some Storybook frameworks require additional setup to enable the framework's features to work with Vitest. Each of those frameworks exports a Vite plugin that you can use to configure your project correctly:
+
+
+ If you're using Next.js, use `@storybook/experimental-nextjs-vite/vite-plugin`:
+
+ ```js title="vitest.config.ts"
+ import { defineConfig, mergeConfig } from 'vitest/config';
+ import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
+ import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
+
+ import viteConfig from './vite.config';
+
+ export default mergeConfig(
+ viteConfig,
+ defineConfig({
+ plugins: [
+ storybookTest(),
+ storybookNextjsPlugin(), // 👈 Use the plugin here
+ ],
+ // ...
+ })
+ );
+ ```
+
+
-
- If your stories use template-based Vue components, you may need to [alias the `vue` module](https://vuejs.org/guide/scaling-up/tooling#note-on-in-browser-template-compilation) to resolve correctly in the test environment:
+ Vue projects should use `@storybook/vue3-vite/vite-plugin`:
-
- Example Vite configuration
+ ```js title="vitest.config.ts"
+ import { defineConfig, mergeConfig } from 'vitest/config';
+ import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
+ import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin';
-```ts
-// vite.config.ts
-import { defineConfig } from 'vite/config';
+ import viteConfig from './vite.config'
-export default defineConfig({
- // ...
- resolve: {
- alias: {
- vue: 'vue/dist/vue.esm-bundler.js',
- },
- },
-});
-```
-
-
+ export default mergeConfig(
+ viteConfig,
+ defineConfig({
+ plugins: [
+ storybookTest(),
+ storybookVuePlugin(), // 👈 Use the plugin here
+ ],
+ // ...
+ })
+ );
+ ```
-### Manual setup
+
+ If you're using SvelteKit, use `@storybook/sveltekit/vite-plugin`:
-For some project setups, the `add` command may be unable to automate the plugin setup and ask you to complete additional setup steps. Here's what to do:
+ ```js title="vitest.config.ts"
+ import { defineConfig, mergeConfig } from 'vitest/config';
+ import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
+ import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin';
-1. Make sure Vite and Vitest are configured in your project.
-1. Configure Vitest to use [browser mode](https://vitest.dev/guide/browser/).
-1. Install the addon, `@storybook/experimental-addon-vitest`, in your project and [register it in your Storybook configuration](http://storybook.js.org/docs/addons/install-addons#manual-installation).
-1. If you're using Next.js, make sure you're using [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs).
-1. If you're using SvelteKit, make sure you're using `@storybook/sveltekit/vite`.
-1. Create a [test setup file](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations), `.storybook/vitest.setup.ts`.
-1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. You can use the example configuration files, below, as a guide.
+ import viteConfig from './vite.config';
+
+ export default mergeConfig(
+ viteConfig,
+ defineConfig({
+ plugins: [
+ storybookTest(),
+ storybookSveltekitPlugin(), // 👈 Use the plugin here
+ ],
+ // ...
+ })
+ );
+ ```
+
+
+The above example uses the framework's plugin in a Vitest configuration file. You can also use it in a Vitest workspace file, if that is how your project is configured.
### Example configuration files
@@ -74,25 +143,33 @@ When the addon is set up automatically, it will create or adjust your Vitest con
Example Vitest setup file
+ Storybook stories contain configuration defined in `.storybook/preview.js|ts`. To ensure that configuration is available to your tests, you can apply it in a Vitest setup file. Here's an example of how to do that:
+
```ts title=".storybook/vitest.setup.ts"
import { beforeAll } from 'vitest';
// Replace your-renderer with the renderer you are using (e.g., react, vue3, svelte, etc.)
import { setProjectAnnotations } from '@storybook/your-renderer';
+
import * as projectAnnotations from './preview';
const project = setProjectAnnotations(projectAnnotations);
beforeAll(project.beforeAll);
```
+
+ The `setProjectAnnotations` function is part of the portable stories API, which is used to transform your stories into tests. For more details, see the [portable stories API documentation](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations).
Example Vitest config file
+ The most simple application of the plugin is to include it in your Vitest configuration file:
+
```ts title="vitest.config.ts"
-import { defineConfig, mergeConfig } from 'vitest/config'
-import viteConfig from './vite.config'
-import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
+
+import viteConfig from './vite.config';
export default mergeConfig(
viteConfig,
@@ -120,17 +197,18 @@ export default mergeConfig(
setupFiles: ['./.storybook/vitest.setup.ts'],
},
})
-)
+);
```
Example Vitest workspace file
-{/* TODO: Nextjs & SvelteKit examples */}
+ If you're using a [Vitest workspace](https://vitest.dev/guide/workspace), you can define a new workspace project:
+
```ts title="vitest.workspace.ts"
-import { defineWorkspace } from 'vitest/config'
-import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
+import { defineWorkspace } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
export default defineWorkspace([
// This is the path to your existing Vitest config file
@@ -162,7 +240,7 @@ export default defineWorkspace([
setupFiles: ['./.storybook/vitest.setup.ts'],
},
}
-])
+]);
```
@@ -196,7 +274,7 @@ If you already have a `test` script that runs something other than Vitest, you c
When you run that script, the addon will find and run your story-based tests. Here's an example of running your tests (in [watch mode](https://vitest.dev/guide/cli.html#vitest-watch), by default) using the Vitest CLI:
-
+
### Editor extension
@@ -260,7 +338,7 @@ You can also provide a [`storybookUrl` option](#storybookurl) to the plugin conf
## Configuration
-Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested.
+Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration and setup files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested.
By default, the plugin will run all stories with the `test` tag. You can adjust this behavior by providing the [`tags` option](#tags) in the plugin configuration. This allows you to include, exclude, or skip stories based on their tags.
@@ -296,6 +374,14 @@ export default defineWorkspace([
If the same tag is in both the `include` and `exclude` arrays, the `exclude` behavior takes precedence.
+## Comparison to the previous test runner
+
+The [previous test runner](./test-runner.mdx) requires a running Storybook instance to test your stories, because it visits each one, executes the play function, and listens for results. This plugin, however, transforms your stories into tests using Vite and portable stories, so it does not need to run Storybook to test your stories. Beyond that core difference, there are a few other distinctions:
+
+Additionally, the previous test runner ran your stories as orchestrated tests in Jest, and that orchestration came with some complexity. By comparison, this plugin transforms your stories into real tests and then runs them using Vitest, which is simpler and more configurable.
+
+Finally, because of the simpler architecture and the use of Vitest, this plugin should be faster than the previous test runner for most projects. We'll do more benchmarking to quantify this in the future.
+
## FAQ
### How do I debug my tests in Storybook?
@@ -341,14 +427,6 @@ We recommend running tests in a browser using Playwright, but you can use WebDri
We recommend using Chromium, because it is most likely to best match the experience of a majority of your users. However, you can use other browsers by adjusting the [browser name in the Vitest configuration file](https://vitest.dev/config/#browser-name). Note that [Playwright and WebDriverIO support different browsers](https://vitest.dev/guide/browser/#browser-option-types).
-### How is this different from the previous test runner?
-
-The [previous test runner](./test-runner.mdx) requires a running Storybook instance to test your stories, because it visits each one, executes the play function, and listens for results. This plugin, however, transforms your stories into tests using Vite and portable stories, so it does not need to run Storybook to test your stories. Beyond that core difference, there are a few other distinctions:
-
-Additionally, the previous test runner ran your stories as orchestrated tests in Jest, and that orchestration came with some complexity. By comparison, this plugin transforms your stories into real tests and then runs them using Vitest, which is simpler and more configurable.
-
-Finally, because of the simpler architecture and the use of Vitest, this plugin should be faster than the previous test runner for most projects. We'll do more benchmarking to quantify this in the future.
-
## API
### Exports
@@ -356,7 +434,7 @@ Finally, because of the simpler architecture and the use of Vitest, this plugin
This addon contributes the following exports to Storybook:
```js
-import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
+import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin'
```
#### `storybookTest`
@@ -420,3 +498,5 @@ Default:
- **`include`**: Stories with these tags will be tested
- **`exclude`**: Stories with these tags will not be tested, and will not be counted in the test results
- **`skip`**: Stories with these tags will not be tested, and will be counted in the test results
+
+
\ No newline at end of file
From 483325a656e9884d4322d0ed38a9a518b9ea1f8f Mon Sep 17 00:00:00 2001
From: Valentin Palkovic
Date: Wed, 4 Sep 2024 10:20:57 +0200
Subject: [PATCH 029/213] Portable Stories: Improve Handling of React Updates
and Errors
Co-authored-by: Yann Braga
Co-authored-by: Jeppe Reinhold
---
.../modules/store/csf/portable-stories.ts | 4 +
.../react-dom-shim/src/preventActChecks.tsx | 17 --
code/lib/react-dom-shim/src/react-16.tsx | 6 +-
code/lib/react-dom-shim/src/react-18.tsx | 23 +-
code/renderers/react/package.json | 4 +
.../react/src/__test__/Button.stories.tsx | 9 +-
.../__test__/ComponentWithError.stories.tsx | 13 +
.../react/src/__test__/ComponentWithError.tsx | 4 +
.../portable-stories-legacy.test.tsx.snap | 34 +++
.../__test__/portable-stories-legacy.test.tsx | 6 +-
.../src/__test__/portable-stories.test.tsx | 90 +++---
code/renderers/react/src/act-compat.ts | 65 +++++
code/renderers/react/src/portable-stories.tsx | 80 +++++-
code/renderers/react/src/renderToCanvas.tsx | 7 +-
code/vitest-setup.ts | 1 +
code/yarn.lock | 269 +++++++++++++++++-
16 files changed, 557 insertions(+), 75 deletions(-)
delete mode 100644 code/lib/react-dom-shim/src/preventActChecks.tsx
create mode 100644 code/renderers/react/src/__test__/ComponentWithError.stories.tsx
create mode 100644 code/renderers/react/src/__test__/ComponentWithError.tsx
create mode 100644 code/renderers/react/src/act-compat.ts
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 1525b6e3e6d8..7adc83196eb1 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -74,6 +74,10 @@ export function setProjectAnnotations(
| NamedOrDefaultProjectAnnotations[]
): NormalizedProjectAnnotations {
const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
+ if (globalThis.defaultProjectAnnotations) {
+ annotations.push(globalThis.defaultProjectAnnotations);
+ }
+
globalThis.globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
return globalThis.globalProjectAnnotations;
diff --git a/code/lib/react-dom-shim/src/preventActChecks.tsx b/code/lib/react-dom-shim/src/preventActChecks.tsx
deleted file mode 100644
index f35e2fb25dc5..000000000000
--- a/code/lib/react-dom-shim/src/preventActChecks.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export {};
-
-declare const globalThis: {
- IS_REACT_ACT_ENVIRONMENT?: boolean;
-};
-
-// TODO(9.0): We should actually wrap all those lines in `act`, but that might be a breaking change.
-// We should make that breaking change for SB 9.0
-export function preventActChecks(callback: () => void): void {
- const originalActEnvironment = globalThis.IS_REACT_ACT_ENVIRONMENT;
- globalThis.IS_REACT_ACT_ENVIRONMENT = false;
- try {
- callback();
- } finally {
- globalThis.IS_REACT_ACT_ENVIRONMENT = originalActEnvironment;
- }
-}
diff --git a/code/lib/react-dom-shim/src/react-16.tsx b/code/lib/react-dom-shim/src/react-16.tsx
index a1e7b1e97009..8c7b2c8f5a67 100644
--- a/code/lib/react-dom-shim/src/react-16.tsx
+++ b/code/lib/react-dom-shim/src/react-16.tsx
@@ -2,14 +2,12 @@
import type { ReactElement } from 'react';
import * as ReactDOM from 'react-dom';
-import { preventActChecks } from './preventActChecks';
-
export const renderElement = async (node: ReactElement, el: Element) => {
return new Promise((resolve) => {
- preventActChecks(() => void ReactDOM.render(node, el, () => resolve(null)));
+ ReactDOM.render(node, el, () => resolve(null));
});
};
export const unmountElement = (el: Element) => {
- preventActChecks(() => void ReactDOM.unmountComponentAtNode(el));
+ ReactDOM.unmountComponentAtNode(el);
};
diff --git a/code/lib/react-dom-shim/src/react-18.tsx b/code/lib/react-dom-shim/src/react-18.tsx
index 5eb72b20eb17..f3398fc65ff0 100644
--- a/code/lib/react-dom-shim/src/react-18.tsx
+++ b/code/lib/react-dom-shim/src/react-18.tsx
@@ -1,15 +1,21 @@
/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-import type { FC, ReactElement } from 'react';
+import type { ReactElement } from 'react';
import * as React from 'react';
import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
import * as ReactDOM from 'react-dom/client';
-import { preventActChecks } from './preventActChecks';
-
// A map of all rendered React 18 nodes
const nodes = new Map();
-const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
+declare const globalThis: {
+ IS_REACT_ACT_ENVIRONMENT: boolean;
+};
+
+function getIsReactActEnvironment() {
+ return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+
+const WithCallback: React.FC<{ callback: () => void; children: ReactElement }> = ({
callback,
children,
}) => {
@@ -43,8 +49,13 @@ export const renderElement = async (node: ReactElement, el: Element, rootOptions
// Create Root Element conditionally for new React 18 Root Api
const root = await getReactRoot(el, rootOptions);
+ if (getIsReactActEnvironment()) {
+ root.render(node);
+ return;
+ }
+
const { promise, resolve } = Promise.withResolvers();
- preventActChecks(() => root.render({node}));
+ root.render({node});
return promise;
};
@@ -52,7 +63,7 @@ export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => {
const root = nodes.get(el);
if (root) {
- preventActChecks(() => root.unmount());
+ root.unmount();
nodes.delete(el);
}
};
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 4d370bbb8a1e..003466f1b182 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -94,12 +94,16 @@
"require-from-string": "^2.0.2"
},
"peerDependencies": {
+ "@storybook/test": "workspace:*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"storybook": "workspace:^",
"typescript": ">= 4.2.x"
},
"peerDependenciesMeta": {
+ "@storybook/test": {
+ "optional": true
+ },
"typescript": {
"optional": true
}
diff --git a/code/renderers/react/src/__test__/Button.stories.tsx b/code/renderers/react/src/__test__/Button.stories.tsx
index bde220fdf469..0e6e0d6e8c67 100644
--- a/code/renderers/react/src/__test__/Button.stories.tsx
+++ b/code/renderers/react/src/__test__/Button.stories.tsx
@@ -103,7 +103,6 @@ export const HooksStory: CSF3Story = {
);
},
play: async ({ canvasElement, step }) => {
- console.log('start of play function');
const canvas = within(canvasElement);
await step('Step label', async () => {
const inputEl = canvas.getByTestId('input');
@@ -112,8 +111,8 @@ export const HooksStory: CSF3Story = {
await userEvent.type(inputEl, 'Hello world!');
await expect(inputEl).toHaveValue('Hello world!');
+ await expect(buttonEl).toHaveTextContent('I am clicked');
});
- console.log('end of play function');
},
};
@@ -182,6 +181,12 @@ export const MountInPlayFunction: CSF3Story<{ mockFn: (val: string) => string }>
},
};
+export const MountInPlayFunctionThrow: CSF3Story<{ mockFn: (val: string) => string }> = {
+ play: async () => {
+ throw new Error('Error thrown in play');
+ },
+};
+
export const WithActionArg: CSF3Story<{ someActionArg: HandlerFunction }> = {
args: {
someActionArg: action('some-action-arg'),
diff --git a/code/renderers/react/src/__test__/ComponentWithError.stories.tsx b/code/renderers/react/src/__test__/ComponentWithError.stories.tsx
new file mode 100644
index 000000000000..627055e2d965
--- /dev/null
+++ b/code/renderers/react/src/__test__/ComponentWithError.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '..';
+import { ComponentWithError } from './ComponentWithError';
+
+const meta = {
+ title: 'Example/ComponentWithError',
+ component: ComponentWithError as any,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const ThrowsError: Story = {};
diff --git a/code/renderers/react/src/__test__/ComponentWithError.tsx b/code/renderers/react/src/__test__/ComponentWithError.tsx
new file mode 100644
index 000000000000..37f667cb4f2c
--- /dev/null
+++ b/code/renderers/react/src/__test__/ComponentWithError.tsx
@@ -0,0 +1,4 @@
+export function ComponentWithError() {
+ // eslint-disable-next-line local-rules/no-uncategorized-errors
+ throw new Error('Error in render');
+}
diff --git a/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap b/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap
index b4753327aaf1..b690349bed8d 100644
--- a/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap
+++ b/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap
@@ -147,6 +147,40 @@ exports[`Legacy Portable Stories API > Renders Modal story 1`] = `
+
+
+ loaded data
+
+
+ mockFn return value
+
+
+
+
+
+ loaded data
+
+
+ mockFn return value
+
+
+
diff --git a/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx b/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx
index 3c7321cdfe63..5567b1fd9fbc 100644
--- a/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx
+++ b/code/renderers/react/src/__test__/portable-stories-legacy.test.tsx
@@ -200,7 +200,11 @@ describe('Legacy Portable Stories API', () => {
it.each(testCases)('Renders %s story', async (_storyName, Story) => {
cleanup();
- if (_storyName === 'CSF2StoryWithLocale' || _storyName === 'MountInPlayFunction') {
+ if (
+ _storyName === 'CSF2StoryWithLocale' ||
+ _storyName === 'MountInPlayFunction' ||
+ _storyName === 'MountInPlayFunctionThrow'
+ ) {
return;
}
diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
index 90346edff991..94de89e093a5 100644
--- a/code/renderers/react/src/__test__/portable-stories.test.tsx
+++ b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -2,7 +2,7 @@
/* eslint-disable import/namespace */
import { cleanup, render, screen } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
import React from 'react';
@@ -16,23 +16,28 @@ import { expectTypeOf } from 'expect-type';
import { composeStories, composeStory, setProjectAnnotations } from '..';
import type { Button } from './Button';
-import * as stories from './Button.stories';
+import * as ButtonStories from './Button.stories';
+import * as ComponentWithErrorStories from './ComponentWithError.stories';
-setProjectAnnotations([]);
+const HooksStory = composeStory(ButtonStories.HooksStory, ButtonStories.default);
+
+const projectAnnotations = setProjectAnnotations([]);
// example with composeStories, returns an object with all stories composed with args/decorators
-const { CSF3Primary, LoaderStory, MountInPlayFunction } = composeStories(stories);
+const { CSF3Primary, LoaderStory, MountInPlayFunction, MountInPlayFunctionThrow } =
+ composeStories(ButtonStories);
+const { ThrowsError } = composeStories(ComponentWithErrorStories);
+
+beforeAll(async () => {
+ await projectAnnotations.beforeAll?.();
+});
afterEach(() => {
cleanup();
});
-declare const globalThis: {
- IS_REACT_ACT_ENVIRONMENT?: boolean;
-};
-
// example with composeStory, returns a single story composed with args/decorators
-const Secondary = composeStory(stories.CSF2Secondary, stories.default);
+const Secondary = composeStory(ButtonStories.CSF2Secondary, ButtonStories.default);
describe('renders', () => {
it('renders primary button', () => {
render(
Hello world);
@@ -60,6 +65,10 @@ describe('renders', () => {
expect(buttonElement).not.toBeNull();
});
+ it('should throw error when rendering a component with a render error', async () => {
+ await expect(() => ThrowsError.run()).rejects.toThrowError('Error in render');
+ });
+
it('should render component mounted in play function', async () => {
await MountInPlayFunction.run();
@@ -67,6 +76,10 @@ describe('renders', () => {
expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
});
+ it('should throw an error in play function', () => {
+ expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
+ });
+
it('should call and compose loaders data', async () => {
await LoaderStory.load();
const { getByTestId } = render(
);
@@ -78,10 +91,6 @@ describe('renders', () => {
});
describe('projectAnnotations', () => {
- afterEach(() => {
- cleanup();
- });
-
it('renders with default projectAnnotations', () => {
setProjectAnnotations([
{
@@ -91,7 +100,7 @@ describe('projectAnnotations', () => {
},
},
]);
- const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);
+ const WithEnglishText = composeStory(ButtonStories.CSF2StoryWithLocale, ButtonStories.default);
const { getByText } = render(
);
const buttonElement = getByText('Hello!');
expect(buttonElement).not.toBeNull();
@@ -99,24 +108,31 @@ describe('projectAnnotations', () => {
});
it('renders with custom projectAnnotations via composeStory params', () => {
- const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
- initialGlobals: { locale: 'pt' },
- });
+ const WithPortugueseText = composeStory(
+ ButtonStories.CSF2StoryWithLocale,
+ ButtonStories.default,
+ {
+ initialGlobals: { locale: 'pt' },
+ }
+ );
const { getByText } = render(
);
const buttonElement = getByText('Olá!');
expect(buttonElement).not.toBeNull();
});
it('has action arg from argTypes when addon-actions annotations are added', () => {
- //@ts-expect-error our tsconfig.jsn#moduleResulution is set to 'node', which doesn't support this import
- const Story = composeStory(stories.WithActionArgType, stories.default, addonActionsPreview);
+ const Story = composeStory(
+ ButtonStories.WithActionArgType,
+ ButtonStories.default,
+ addonActionsPreview
+ );
expect(Story.args.someActionArg).toHaveProperty('isAction', true);
});
});
describe('CSF3', () => {
it('renders with inferred globalRender', () => {
- const Primary = composeStory(stories.CSF3Button, stories.default);
+ const Primary = composeStory(ButtonStories.CSF3Button, ButtonStories.default);
render(
Hello world);
const buttonElement = screen.getByText(/Hello world/i);
@@ -124,14 +140,17 @@ describe('CSF3', () => {
});
it('renders with custom render function', () => {
- const Primary = composeStory(stories.CSF3ButtonWithRender, stories.default);
+ const Primary = composeStory(ButtonStories.CSF3ButtonWithRender, ButtonStories.default);
render(
);
expect(screen.getByTestId('custom-render')).not.toBeNull();
});
it('renders with play function without canvas element', async () => {
- const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
+ const CSF3InputFieldFilled = composeStory(
+ ButtonStories.CSF3InputFieldFilled,
+ ButtonStories.default
+ );
await CSF3InputFieldFilled.run();
const input = screen.getByTestId('input') as HTMLInputElement;
@@ -139,7 +158,10 @@ describe('CSF3', () => {
});
it('renders with play function with canvas element', async () => {
- const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
+ const CSF3InputFieldFilled = composeStory(
+ ButtonStories.CSF3InputFieldFilled,
+ ButtonStories.default
+ );
const div = document.createElement('div');
document.body.appendChild(div);
@@ -153,21 +175,16 @@ describe('CSF3', () => {
});
it('renders with hooks', async () => {
- // TODO find out why act is not working here
- globalThis.IS_REACT_ACT_ENVIRONMENT = false;
- const HooksStory = composeStory(stories.HooksStory, stories.default);
-
await HooksStory.run();
const input = screen.getByTestId('input') as HTMLInputElement;
expect(input.value).toEqual('Hello world!');
- globalThis.IS_REACT_ACT_ENVIRONMENT = true;
});
});
// common in addons that need to communicate between manager and preview
it('should pass with decorators that need addons channel', () => {
- const PrimaryWithChannels = composeStory(stories.CSF3Primary, stories.default, {
+ const PrimaryWithChannels = composeStory(ButtonStories.CSF3Primary, ButtonStories.default, {
decorators: [
(StoryFn: any) => {
addons.getChannel();
@@ -186,27 +203,24 @@ describe('ComposeStories types', () => {
type ComposeStoriesParam = Parameters
[0];
expectTypeOf({
- ...stories,
- default: stories.default as Meta,
+ ...ButtonStories,
+ default: ButtonStories.default as Meta,
}).toMatchTypeOf();
expectTypeOf({
- ...stories,
- default: stories.default satisfies Meta,
+ ...ButtonStories,
+ default: ButtonStories.default satisfies Meta,
}).toMatchTypeOf();
});
});
-// Batch snapshot testing
-const testCases = Object.values(composeStories(stories)).map(
+const testCases = Object.values(composeStories(ButtonStories)).map(
(Story) => [Story.storyName, Story] as [string, typeof Story]
);
it.each(testCases)('Renders %s story', async (_storyName, Story) => {
- if (_storyName === 'CSF2StoryWithLocale') {
+ if (_storyName === 'CSF2StoryWithLocale' || _storyName === 'MountInPlayFunctionThrow') {
return;
}
- globalThis.IS_REACT_ACT_ENVIRONMENT = false;
await Story.run();
- globalThis.IS_REACT_ACT_ENVIRONMENT = true;
expect(document.body).toMatchSnapshot();
});
diff --git a/code/renderers/react/src/act-compat.ts b/code/renderers/react/src/act-compat.ts
new file mode 100644
index 000000000000..afe1cc902316
--- /dev/null
+++ b/code/renderers/react/src/act-compat.ts
@@ -0,0 +1,65 @@
+// Copied from
+// https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/act-compat.js
+import * as React from 'react';
+
+import * as DeprecatedReactTestUtils from 'react-dom/test-utils';
+
+declare const globalThis: {
+ IS_REACT_ACT_ENVIRONMENT: boolean;
+};
+
+// @ts-expect-error act might not be available in some versions of React
+const reactAct = typeof React.act === 'function' ? React.act : DeprecatedReactTestUtils.act;
+
+export function setReactActEnvironment(isReactActEnvironment: boolean) {
+ globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
+}
+
+export function getReactActEnvironment() {
+ return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+
+function withGlobalActEnvironment(actImplementation: (callback: () => void) => Promise) {
+ return (callback: () => any) => {
+ const previousActEnvironment = getReactActEnvironment();
+ setReactActEnvironment(true);
+ try {
+ // The return value of `act` is always a thenable.
+ let callbackNeedsToBeAwaited = false;
+ const actResult = actImplementation(() => {
+ const result = callback();
+ if (result !== null && typeof result === 'object' && typeof result.then === 'function') {
+ callbackNeedsToBeAwaited = true;
+ }
+ return result;
+ });
+ if (callbackNeedsToBeAwaited) {
+ const thenable: Promise = actResult;
+ return {
+ then: (resolve: (param: any) => void, reject: (param: any) => void) => {
+ thenable.then(
+ (returnValue) => {
+ setReactActEnvironment(previousActEnvironment);
+ resolve(returnValue);
+ },
+ (error) => {
+ setReactActEnvironment(previousActEnvironment);
+ reject(error);
+ }
+ );
+ },
+ };
+ } else {
+ setReactActEnvironment(previousActEnvironment);
+ return actResult;
+ }
+ } catch (error) {
+ // Can't be a `finally {}` block since we don't know if we have to immediately restore IS_REACT_ACT_ENVIRONMENT
+ // or if we have to await the callback first.
+ setReactActEnvironment(previousActEnvironment);
+ throw error;
+ }
+ };
+}
+
+export const act = withGlobalActEnvironment(reactAct);
diff --git a/code/renderers/react/src/portable-stories.tsx b/code/renderers/react/src/portable-stories.tsx
index 2ea196e85b4b..ced0bbd289e3 100644
--- a/code/renderers/react/src/portable-stories.tsx
+++ b/code/renderers/react/src/portable-stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
import {
composeStories as originalComposeStories,
@@ -17,6 +17,7 @@ import type {
StoryAnnotationsOrFn,
} from 'storybook/internal/types';
+import { act, getReactActEnvironment, setReactActEnvironment } from './act-compat';
import * as reactProjectAnnotations from './entry-preview';
import type { Meta } from './public-types';
import type { ReactRenderer } from './types';
@@ -54,9 +55,66 @@ export function setProjectAnnotations(
// This will not be necessary once we have auto preset loading
export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations = {
...reactProjectAnnotations,
- renderToCanvas: (renderContext, canvasElement) => {
+ beforeAll: async function reactBeforeAll() {
+ try {
+ // copied from
+ // https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/pure.js
+ const { configure } = await import('@storybook/test');
+
+ configure({
+ unstable_advanceTimersWrapper: (cb) => {
+ return act(cb);
+ },
+ asyncWrapper: async (cb) => {
+ const previousActEnvironment = getReactActEnvironment();
+ setReactActEnvironment(false);
+ try {
+ const result = await cb();
+ // Drain microtask queue.
+ // Otherwise we'll restore the previous act() environment, before we resolve the `waitFor` call.
+ // The caller would have no chance to wrap the in-flight Promises in `act()`
+ await new Promise((resolve) => {
+ setTimeout(() => {
+ resolve();
+ }, 0);
+
+ if (jestFakeTimersAreEnabled()) {
+ // @ts-expect-error global jest
+ jest.advanceTimersByTime(0);
+ }
+ });
+
+ return result;
+ } finally {
+ setReactActEnvironment(previousActEnvironment);
+ }
+ },
+ eventWrapper: (cb) => {
+ let result;
+ act(() => {
+ result = cb();
+ });
+ return result;
+ },
+ });
+ } catch (e) {
+ console.log(e);
+ // @storybook/test might not be available
+ }
+ },
+ renderToCanvas: async (renderContext, canvasElement) => {
if (renderContext.storyContext.testingLibraryRender == null) {
- return reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+ let unmount: () => void;
+
+ await act(async () => {
+ unmount = await reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+ });
+
+ return async () => {
+ await act(() => {
+ unmount();
+ });
+ };
}
const {
storyContext: { context, unboundStoryFn: Story, testingLibraryRender: render },
@@ -149,3 +207,19 @@ export function composeStories;
}
+
+/** The function is used to configure jest's fake timers in environments where React's act is enabled */
+function jestFakeTimersAreEnabled() {
+ // @ts-expect-error global jest
+ if (typeof jest !== 'undefined' && jest !== null) {
+ return (
+ // legacy timers
+
+ // eslint-disable-next-line no-underscore-dangle
+ (setTimeout as any)._isMockFunction === true || // modern timers
+ Object.prototype.hasOwnProperty.call(setTimeout, 'clock')
+ );
+ }
+
+ return false;
+}
diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx
index f3a4231d078c..3ae6136f9582 100644
--- a/code/renderers/react/src/renderToCanvas.tsx
+++ b/code/renderers/react/src/renderToCanvas.tsx
@@ -5,6 +5,7 @@ import type { RenderContext } from 'storybook/internal/types';
import { global } from '@storybook/global';
+import { getReactActEnvironment } from './act-compat';
import type { ReactRenderer, StoryContext } from './types';
const { FRAMEWORK_OPTIONS } = global;
@@ -57,7 +58,11 @@ export async function renderToCanvas(
const { renderElement, unmountElement } = await import('@storybook/react-dom-shim');
const Story = unboundStoryFn as FC>;
- const content = (
+ const isActEnabled = getReactActEnvironment();
+
+ const content = isActEnabled ? (
+
+ ) : (
diff --git a/code/vitest-setup.ts b/code/vitest-setup.ts
index 8edd64c36314..5eba16740d1d 100644
--- a/code/vitest-setup.ts
+++ b/code/vitest-setup.ts
@@ -7,6 +7,7 @@ const ignoreList = [
(error: any) => error.message.includes('":nth-child" is potentially unsafe'),
(error: any) => error.message.includes('":first-child" is potentially unsafe'),
(error: any) => error.message.match(/Browserslist: .* is outdated. Please run:/),
+ (error: any) => error.message.includes('Consider adding an error boundary'),
(error: any) =>
error.message.includes('react-async-component-lifecycle-hooks') &&
error.stack.includes('addons/knobs/src/components/__tests__/Options.js'),
diff --git a/code/yarn.lock b/code/yarn.lock
index 9b8a426f6016..397b6cd54ff5 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2490,7 +2490,7 @@ __metadata:
languageName: node
linkType: hard
-"@emnapi/runtime@npm:^1.1.1":
+"@emnapi/runtime@npm:^1.1.1, @emnapi/runtime@npm:^1.2.0":
version: 1.2.0
resolution: "@emnapi/runtime@npm:1.2.0"
dependencies:
@@ -3424,6 +3424,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-darwin-arm64@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+ dependenciesMeta:
+ "@img/sharp-libvips-darwin-arm64":
+ optional: true
+ conditions: os=darwin & cpu=arm64
+ languageName: node
+ linkType: hard
+
"@img/sharp-darwin-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-darwin-x64@npm:0.33.4"
@@ -3436,6 +3448,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-darwin-x64@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-darwin-x64@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+ dependenciesMeta:
+ "@img/sharp-libvips-darwin-x64":
+ optional: true
+ conditions: os=darwin & cpu=x64
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-darwin-arm64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2"
@@ -3443,6 +3467,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-darwin-arm64@npm:1.0.4":
+ version: 1.0.4
+ resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4"
+ conditions: os=darwin & cpu=arm64
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-darwin-x64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2"
@@ -3450,6 +3481,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-darwin-x64@npm:1.0.4":
+ version: 1.0.4
+ resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4"
+ conditions: os=darwin & cpu=x64
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-linux-arm64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2"
@@ -3457,6 +3495,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-linux-arm64@npm:1.0.4":
+ version: 1.0.4
+ resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4"
+ conditions: os=linux & cpu=arm64 & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-linux-arm@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2"
@@ -3464,6 +3509,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-linux-arm@npm:1.0.5":
+ version: 1.0.5
+ resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5"
+ conditions: os=linux & cpu=arm & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-linux-s390x@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2"
@@ -3471,6 +3523,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-linux-s390x@npm:1.0.4":
+ version: 1.0.4
+ resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4"
+ conditions: os=linux & cpu=s390x & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-linux-x64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2"
@@ -3478,6 +3537,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-linux-x64@npm:1.0.4":
+ version: 1.0.4
+ resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4"
+ conditions: os=linux & cpu=x64 & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2"
@@ -3485,6 +3551,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4":
+ version: 1.0.4
+ resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4"
+ conditions: os=linux & cpu=arm64 & libc=musl
+ languageName: node
+ linkType: hard
+
"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2"
@@ -3492,6 +3565,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4":
+ version: 1.0.4
+ resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4"
+ conditions: os=linux & cpu=x64 & libc=musl
+ languageName: node
+ linkType: hard
+
"@img/sharp-linux-arm64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-arm64@npm:0.33.4"
@@ -3504,6 +3584,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-linux-arm64@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-linux-arm64@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+ dependenciesMeta:
+ "@img/sharp-libvips-linux-arm64":
+ optional: true
+ conditions: os=linux & cpu=arm64 & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-linux-arm@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-arm@npm:0.33.4"
@@ -3516,6 +3608,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-linux-arm@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-linux-arm@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+ dependenciesMeta:
+ "@img/sharp-libvips-linux-arm":
+ optional: true
+ conditions: os=linux & cpu=arm & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-linux-s390x@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-s390x@npm:0.33.4"
@@ -3528,6 +3632,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-linux-s390x@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-linux-s390x@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+ dependenciesMeta:
+ "@img/sharp-libvips-linux-s390x":
+ optional: true
+ conditions: os=linux & cpu=s390x & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-linux-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-x64@npm:0.33.4"
@@ -3540,6 +3656,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-linux-x64@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-linux-x64@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+ dependenciesMeta:
+ "@img/sharp-libvips-linux-x64":
+ optional: true
+ conditions: os=linux & cpu=x64 & libc=glibc
+ languageName: node
+ linkType: hard
+
"@img/sharp-linuxmusl-arm64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.4"
@@ -3552,6 +3680,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-linuxmusl-arm64@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+ dependenciesMeta:
+ "@img/sharp-libvips-linuxmusl-arm64":
+ optional: true
+ conditions: os=linux & cpu=arm64 & libc=musl
+ languageName: node
+ linkType: hard
+
"@img/sharp-linuxmusl-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linuxmusl-x64@npm:0.33.4"
@@ -3564,6 +3704,18 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-linuxmusl-x64@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5"
+ dependencies:
+ "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+ dependenciesMeta:
+ "@img/sharp-libvips-linuxmusl-x64":
+ optional: true
+ conditions: os=linux & cpu=x64 & libc=musl
+ languageName: node
+ linkType: hard
+
"@img/sharp-wasm32@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-wasm32@npm:0.33.4"
@@ -3573,6 +3725,15 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-wasm32@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-wasm32@npm:0.33.5"
+ dependencies:
+ "@emnapi/runtime": "npm:^1.2.0"
+ conditions: cpu=wasm32
+ languageName: node
+ linkType: hard
+
"@img/sharp-win32-ia32@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-win32-ia32@npm:0.33.4"
@@ -3580,6 +3741,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-win32-ia32@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-win32-ia32@npm:0.33.5"
+ conditions: os=win32 & cpu=ia32
+ languageName: node
+ linkType: hard
+
"@img/sharp-win32-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-win32-x64@npm:0.33.4"
@@ -3587,6 +3755,13 @@ __metadata:
languageName: node
linkType: hard
+"@img/sharp-win32-x64@npm:0.33.5":
+ version: 0.33.5
+ resolution: "@img/sharp-win32-x64@npm:0.33.5"
+ conditions: os=win32 & cpu=x64
+ languageName: node
+ linkType: hard
+
"@inquirer/confirm@npm:^3.0.0":
version: 3.1.20
resolution: "@inquirer/confirm@npm:3.1.20"
@@ -3903,13 +4078,20 @@ __metadata:
languageName: node
linkType: hard
-"@next/env@npm:14.2.5, @next/env@npm:^14.2.5":
+"@next/env@npm:14.2.5":
version: 14.2.5
resolution: "@next/env@npm:14.2.5"
checksum: 10c0/63d8b88ac450b3c37940a9e2119a63a1074aca89908574ade6157a8aa295275dcb3ac5f69e00883fc55d0f12963b73b74e87ba32a5768a489f9609c6be57b699
languageName: node
linkType: hard
+"@next/env@npm:^14.2.5":
+ version: 14.2.7
+ resolution: "@next/env@npm:14.2.7"
+ checksum: 10c0/1cda023007acda4d47036a25fba0e039d9b2df9c3770651dc289207e0537506675546c02b5b574fe92bb1adc1c887d948d5cb630673aa572754278b82d150b7e
+ languageName: node
+ linkType: hard
+
"@next/swc-darwin-arm64@npm:14.2.5":
version: 14.2.5
resolution: "@next/swc-darwin-arm64@npm:14.2.5"
@@ -6668,11 +6850,14 @@ __metadata:
type-fest: "npm:~2.19"
util-deprecate: "npm:^1.0.2"
peerDependencies:
+ "@storybook/test": "workspace:*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
storybook: "workspace:^"
typescript: ">= 4.2.x"
peerDependenciesMeta:
+ "@storybook/test":
+ optional: true
typescript:
optional: true
languageName: unknown
@@ -25319,6 +25504,15 @@ __metadata:
languageName: node
linkType: hard
+"semver@npm:^7.6.3":
+ version: 7.6.3
+ resolution: "semver@npm:7.6.3"
+ bin:
+ semver: bin/semver.js
+ checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
+ languageName: node
+ linkType: hard
+
"send@npm:0.18.0":
version: 0.18.0
resolution: "send@npm:0.18.0"
@@ -25470,7 +25664,7 @@ __metadata:
languageName: node
linkType: hard
-"sharp@npm:^0.33.3, sharp@npm:^0.33.4":
+"sharp@npm:^0.33.3":
version: 0.33.4
resolution: "sharp@npm:0.33.4"
dependencies:
@@ -25539,6 +25733,75 @@ __metadata:
languageName: node
linkType: hard
+"sharp@npm:^0.33.4":
+ version: 0.33.5
+ resolution: "sharp@npm:0.33.5"
+ dependencies:
+ "@img/sharp-darwin-arm64": "npm:0.33.5"
+ "@img/sharp-darwin-x64": "npm:0.33.5"
+ "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+ "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+ "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+ "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+ "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+ "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+ "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+ "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+ "@img/sharp-linux-arm": "npm:0.33.5"
+ "@img/sharp-linux-arm64": "npm:0.33.5"
+ "@img/sharp-linux-s390x": "npm:0.33.5"
+ "@img/sharp-linux-x64": "npm:0.33.5"
+ "@img/sharp-linuxmusl-arm64": "npm:0.33.5"
+ "@img/sharp-linuxmusl-x64": "npm:0.33.5"
+ "@img/sharp-wasm32": "npm:0.33.5"
+ "@img/sharp-win32-ia32": "npm:0.33.5"
+ "@img/sharp-win32-x64": "npm:0.33.5"
+ color: "npm:^4.2.3"
+ detect-libc: "npm:^2.0.3"
+ semver: "npm:^7.6.3"
+ dependenciesMeta:
+ "@img/sharp-darwin-arm64":
+ optional: true
+ "@img/sharp-darwin-x64":
+ optional: true
+ "@img/sharp-libvips-darwin-arm64":
+ optional: true
+ "@img/sharp-libvips-darwin-x64":
+ optional: true
+ "@img/sharp-libvips-linux-arm":
+ optional: true
+ "@img/sharp-libvips-linux-arm64":
+ optional: true
+ "@img/sharp-libvips-linux-s390x":
+ optional: true
+ "@img/sharp-libvips-linux-x64":
+ optional: true
+ "@img/sharp-libvips-linuxmusl-arm64":
+ optional: true
+ "@img/sharp-libvips-linuxmusl-x64":
+ optional: true
+ "@img/sharp-linux-arm":
+ optional: true
+ "@img/sharp-linux-arm64":
+ optional: true
+ "@img/sharp-linux-s390x":
+ optional: true
+ "@img/sharp-linux-x64":
+ optional: true
+ "@img/sharp-linuxmusl-arm64":
+ optional: true
+ "@img/sharp-linuxmusl-x64":
+ optional: true
+ "@img/sharp-wasm32":
+ optional: true
+ "@img/sharp-win32-ia32":
+ optional: true
+ "@img/sharp-win32-x64":
+ optional: true
+ checksum: 10c0/6b81421ddfe6ee524d8d77e325c5e147fef22884e1c7b1656dfd89a88d7025894115da02d5f984261bf2e6daa16f98cadd1721c4ba408b4212b1d2a60f233484
+ languageName: node
+ linkType: hard
+
"shebang-command@npm:^1.2.0":
version: 1.2.0
resolution: "shebang-command@npm:1.2.0"
From da21bfecb75a64abeb40a23fa01ec32daccbb40d Mon Sep 17 00:00:00 2001
From: Valentin Palkovic
Date: Wed, 4 Sep 2024 13:00:05 +0200
Subject: [PATCH 030/213] Next.js: Update webpack configuration to support
react-dom/test-utils
---
code/frameworks/nextjs/src/config/webpack.ts | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index 3860207e124e..3e0d758c1514 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -25,9 +25,17 @@ export const configureConfig = async ({
if (tryResolve('next/dist/compiled/react')) {
addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
}
+ if (tryResolve('next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js')) {
+ addScopedAlias(
+ baseConfig,
+ 'react-dom/test-utils',
+ 'next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js'
+ );
+ }
if (tryResolve('next/dist/compiled/react-dom')) {
- addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
+ addScopedAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
}
+
setupRuntimeConfig(baseConfig, nextConfig);
return nextConfig;
From 64fbe39ad01c17cff9ea4c18c69bb25509fc6b3b Mon Sep 17 00:00:00 2001
From: "yevhenii.honcharenko"
Date: Tue, 3 Sep 2024 14:36:31 +0300
Subject: [PATCH 031/213] NextJS: fix sass-loader version for compatibility
with nodejs > 20
---
code/frameworks/nextjs/package.json | 2 +-
code/yarn.lock | 13 ++++++-------
2 files changed, 7 insertions(+), 8 deletions(-)
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index e0f5cbb511e0..7a10bfa6e8e3 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -157,7 +157,7 @@
"postcss-loader": "^8.1.1",
"react-refresh": "^0.14.0",
"resolve-url-loader": "^5.0.0",
- "sass-loader": "^12.4.0",
+ "sass-loader": "^13.2.0",
"semver": "^7.3.5",
"style-loader": "^3.3.1",
"styled-jsx": "5.1.1",
diff --git a/code/yarn.lock b/code/yarn.lock
index 83b4b2ba2bdc..358cfc7dee3c 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6332,7 +6332,7 @@ __metadata:
postcss-loader: "npm:^8.1.1"
react-refresh: "npm:^0.14.0"
resolve-url-loader: "npm:^5.0.0"
- sass-loader: "npm:^12.4.0"
+ sass-loader: "npm:^13.2.0"
semver: "npm:^7.3.5"
sharp: "npm:^0.33.3"
style-loader: "npm:^3.3.1"
@@ -25159,15 +25159,14 @@ __metadata:
languageName: node
linkType: hard
-"sass-loader@npm:^12.4.0":
- version: 12.6.0
- resolution: "sass-loader@npm:12.6.0"
+"sass-loader@npm:^13.2.0":
+ version: 13.3.3
+ resolution: "sass-loader@npm:13.3.3"
dependencies:
- klona: "npm:^2.0.4"
neo-async: "npm:^2.6.2"
peerDependencies:
fibers: ">= 3.1.0"
- node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+ node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
sass: ^1.3.0
sass-embedded: "*"
webpack: ^5.0.0
@@ -25180,7 +25179,7 @@ __metadata:
optional: true
sass-embedded:
optional: true
- checksum: 10c0/e1ef655f3898cc4c45f02b3c627f8baf998139993a9a79c524153a80814282bfe20d8d8d703b8cf1d05457c1930940b65e2156d11285ed0861f9a1016f993e53
+ checksum: 10c0/5e955a4ffce35ee0a46fce677ce51eaa69587fb5371978588c83af00f49e7edc36dcf3bb559cbae27681c5e24a71284463ebe03a1fb65e6ecafa1db0620e3fc8
languageName: node
linkType: hard
From e76df5823098a27f57f593f34c826023a2608f9e Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Wed, 4 Sep 2024 11:05:39 -0600
Subject: [PATCH 032/213] Update heading
---
docs/writing-tests/test-runner-with-vitest.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index b1fb80d74a3f..c57c4cfde3f1 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -336,7 +336,7 @@ You can also provide a [`storybookUrl` option](#storybookurl) to the plugin conf
[TK - Screenshot of test output with links to SB]
-## Configuration
+## Configuring tests
Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration and setup files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested.
From aff35807c5096eb8dcd4950b031007e28e686871 Mon Sep 17 00:00:00 2001
From: Alexander Chudesnov
Date: Wed, 4 Sep 2024 19:28:35 +0200
Subject: [PATCH 033/213] Replace .at() call with [] in Vite Builder codegen
Unblocks loading Storybook instances built with Vite devices with pre-2022 browser versions.
Resolves #29030
---
code/builders/builder-vite/src/codegen-modern-iframe-script.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 2de92617befa..700adefffddb 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -27,7 +27,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
.map(
(previewAnnotation, index) =>
// Prefer the updated module from an HMR update, otherwise import the original module
- `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
+ `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`
)
.join(',\n')}])
return composeConfigs(configs);
From 7a32c16cfd49ad25185ee216d36530d5ed775f5c Mon Sep 17 00:00:00 2001
From: Shota FUJI
Date: Thu, 5 Sep 2024 15:30:37 +0900
Subject: [PATCH 034/213] Docs: Fix broken links ending with ".mdx"
When I checked "How to contribute" page on storybook.js.org, a link
titled "Continue reading our contributor covenant" pointed to GitHub's
404 page. The last item of the URL path was "CODE_OF_CONDUCT.mdx", which
is not common filename people uses, therefore I suspected this is not
the only broken link in the docs.
And I was right. I ran the below command (rg = RipGrep) then found
several 404 links.
```
$ cd docs
$ rg "https?:[\S)]+mdx\)" --sort path
```
Git blame told me that some of ".md" to ".mdx" migration works
accidentally changed non-docs URLs ending with ".md" too.
StackBlitz URL in docs/api/main-config/main-config-indexers.mdx is not
actually a dead link, as the service redirects to the `README.md`.
However, the redirection takes loooong so I replaced that as well.
There are still two links that match to the above regexp:
*
at docs/contribute/documentation/new-snippets.mdx L42
*
at docs/writing-docs/mdx.mdx
but those two are both valid (alive) URLs.
---
docs/api/main-config/main-config-indexers.mdx | 2 +-
docs/configure/upgrading.mdx | 2 +-
docs/contribute/framework.mdx | 2 +-
docs/contribute/index.mdx | 2 +-
docs/faq.mdx | 6 +++---
docs/migration-guide/from-older-version.mdx | 2 +-
docs/migration-guide/index.mdx | 2 +-
7 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx
index 9d31b0c169cc..67a6cf5c45b1 100644
--- a/docs/api/main-config/main-config-indexers.mdx
+++ b/docs/api/main-config/main-config-indexers.mdx
@@ -341,7 +341,7 @@ Some example usages of custom indexers include:
Generating stories with an alternative API
- You can use a custom indexer and builder plugin to create your API to define stories extending the CSF format. To learn more, see the following [proof of concept](https://stackblitz.com/edit/github-h2rgfk?file=README.mdx) to set up a custom indexer to generate stories dynamically. It contains everything needed to support such a feature, including the indexer, a Vite plugin, and a Webpack loader.
+ You can use a custom indexer and builder plugin to create your API to define stories extending the CSF format. To learn more, see the following [proof of concept](https://stackblitz.com/edit/github-h2rgfk?file=README.md) to set up a custom indexer to generate stories dynamically. It contains everything needed to support such a feature, including the indexer, a Vite plugin, and a Webpack loader.
diff --git a/docs/configure/upgrading.mdx b/docs/configure/upgrading.mdx
index ac75aff8a701..918182b7e931 100644
--- a/docs/configure/upgrading.mdx
+++ b/docs/configure/upgrading.mdx
@@ -31,7 +31,7 @@ After running the command, the script will:
* Run the relevant [automigrations](../migration-guide/index.mdx#automatic-upgrade) factoring in the [breaking changes](../migration-guide/index.mdx#major-breaking-changes) between your current version and the specified version
- In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.mdx), for the detailed log of relevant changes and deprecations that might affect your upgrade.
+ In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
### Verifying the upgrade
diff --git a/docs/contribute/framework.mdx b/docs/contribute/framework.mdx
index 71ef9f1328cd..2b6cce765192 100644
--- a/docs/contribute/framework.mdx
+++ b/docs/contribute/framework.mdx
@@ -27,7 +27,7 @@ The library or libraries your framework supports may have different major versio
### 3. Write the documentation
-Before writing any code, write a helpful README that contains installation instructions and a list of available features. Use the [README for `@storybook/nextjs`](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.mdx) as a template. Writing the documentation first helps guide your other work.
+Before writing any code, write a helpful README that contains installation instructions and a list of available features. Use the [README for `@storybook/nextjs`](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md) as a template. Writing the documentation first helps guide your other work.
### 4. Author the framework itself
diff --git a/docs/contribute/index.mdx b/docs/contribute/index.mdx
index dd27c951753b..db8d512ca179 100644
--- a/docs/contribute/index.mdx
+++ b/docs/contribute/index.mdx
@@ -10,7 +10,7 @@ Storybook is a community-oriented open source project that welcomes contribution
## Contributor covenant
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. [Continue reading our contributor covenant »](https://github.com/storybookjs/storybook/blob/next/CODE_OF_CONDUCT.mdx)
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. [Continue reading our contributor covenant »](https://github.com/storybookjs/storybook/blob/next/CODE_OF_CONDUCT.md)
## Ways to contribute
diff --git a/docs/faq.mdx b/docs/faq.mdx
index 57c010639e1d..5bfab8ad93d1 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -195,7 +195,7 @@ We're actively working to provide a better way to address this situation, but in
## Is it possible to browse the documentation for past versions of Storybook?
-With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.mdx).
+With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md).
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
@@ -246,7 +246,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | Environment variables | [See current documentation](./configure/environment-variables.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
| Builders | Introduction | [See current documentation](./builders/index.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Vite | [See current documentation](./builders/vite.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Webpack | [See current documentation](./builders/webpack.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.mdx) |
+| | Webpack | [See current documentation](./builders/webpack.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
| | Builder API | [See current documentation](./builders/builder-api.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| Addons | Introduction | [See current documentation](./addons/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Install addons | [See current documentation](./addons/install-addons.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
@@ -301,7 +301,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | CLI options | [See current documentation](./api/cli-options.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
- If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide/index.mdx#storiesof-to-csf) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.mdx) for reference.
+ If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide/index.mdx#storiesof-to-csf) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md) for reference.
## What icons are available for my toolbar or my addon?
diff --git a/docs/migration-guide/from-older-version.mdx b/docs/migration-guide/from-older-version.mdx
index a5fb7e4cfc6c..ae1f484c7988 100644
--- a/docs/migration-guide/from-older-version.mdx
+++ b/docs/migration-guide/from-older-version.mdx
@@ -119,7 +119,7 @@ The automatic upgrade should get your Storybook into a working state. If you enc
If you prefer to debug yourself, here are a few useful things you can do to help narrow down the problem:
1. Try removing all addons that are not in the `@storybook` npm namespace (make sure you don't remove the `storybook` package). Community addons that work well with 7.x might not yet be compatible with 8.0, and this is the fastest way to isolate that possibility. If you find an addon that needs to be upgraded to work with Storybook 8, please post an issue on the addon’s repository, or better yet, a pull request to upgrade it!
-2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.mdx) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
+2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
## Optional migrations
diff --git a/docs/migration-guide/index.mdx b/docs/migration-guide/index.mdx
index 560d61b94cef..93e91a901910 100644
--- a/docs/migration-guide/index.mdx
+++ b/docs/migration-guide/index.mdx
@@ -133,7 +133,7 @@ The automatic upgrade should get your Storybook into a working state. If you enc
If you prefer to debug yourself, here are a few useful things you can do to help narrow down the problem:
1. Try removing all addons that are not in the `@storybook` npm namespace (make sure you don't remove the `storybook` package). Community addons that work well with 7.x might not yet be compatible with 8.0, and this is the fastest way to isolate that possibility. If you find an addon that needs to be upgraded to work with Storybook 8, please post an issue on the addon’s repository, or better yet, a pull request to upgrade it!
-2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.mdx) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
+2. Another debugging technique is to bisect to older prerelease versions of Storybook to figure out which release broke your Storybook. For example, assuming that the current prerelease of Storybook is `8.0.0-beta.56`, you could set the version to `8.0.0-alpha.0` in your `package.json` and reinstall to verify that it still works (`alpha.0` should be nearly identical to `7.6.x`). If it works, you could then try `8.0.0-beta.0`, then `8.0.0-beta.28` and so forth. Once you’ve isolated the bad release, read through its [CHANGELOG](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) entry and perhaps there’s a change that jumps out as the culprit. If you find the problem, please submit an issue or pull request to the Storybook monorepo and we’ll do our best to take care of it quickly.
## Package structure changes
From da2aee4928b7cc5ba104df99ec9a62873a4b3b3b Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Thu, 5 Sep 2024 09:12:51 +0200
Subject: [PATCH 035/213] name decorators for easier debugging
---
code/core/template/stories/preview.ts | 16 +-
code/frameworks/sveltekit/src/preview.ts | 222 +++++++++++------------
2 files changed, 119 insertions(+), 119 deletions(-)
diff --git a/code/core/template/stories/preview.ts b/code/core/template/stories/preview.ts
index 4cd4c64abff5..bba2716864bc 100644
--- a/code/core/template/stories/preview.ts
+++ b/code/core/template/stories/preview.ts
@@ -30,14 +30,14 @@ export const parameters = {
export const loaders = [async () => ({ projectValue: 2 })];
-export const decorators = [
- (storyFn: PartialStoryFn, context: StoryContext) => {
- if (context.parameters.useProjectDecorator) {
- return storyFn({ args: { ...context.args, text: `project ${context.args.text}` } });
- }
- return storyFn();
- },
-];
+const testProjectDecorator = (storyFn: PartialStoryFn, context: StoryContext) => {
+ if (context.parameters.useProjectDecorator) {
+ return storyFn({ args: { ...context.args, text: `project ${context.args.text}` } });
+ }
+ return storyFn();
+};
+
+export const decorators = [testProjectDecorator];
export const initialGlobals = {
foo: 'fooValue',
diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts
index f93c06862c29..c93cbde37a55 100644
--- a/code/frameworks/sveltekit/src/preview.ts
+++ b/code/frameworks/sveltekit/src/preview.ts
@@ -15,125 +15,125 @@ const normalizeHrefConfig = (hrefConfig: HrefConfig): NormalizedHrefConfig => {
return hrefConfig;
};
-export const decorators: Decorator[] = [
- (Story, ctx) => {
- const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
- setPage(svelteKitParameters?.stores?.page);
- setNavigating(svelteKitParameters?.stores?.navigating);
- setUpdated(svelteKitParameters?.stores?.updated);
- setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
+const svelteKitMocksDecorator = (Story, ctx) => {
+ const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
+ setPage(svelteKitParameters?.stores?.page);
+ setNavigating(svelteKitParameters?.stores?.navigating);
+ setUpdated(svelteKitParameters?.stores?.updated);
+ setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
- onMount(() => {
- const globalClickListener = (e: MouseEvent) => {
- // we add a global click event listener and we check if there's a link in the composedPath
- const path = e.composedPath();
- const element = path.findLast((el) => el instanceof HTMLElement && el.tagName === 'A');
- if (element && element instanceof HTMLAnchorElement) {
- // if the element is an a-tag we get the href of the element
- // and compare it to the hrefs-parameter set by the user
- const to = element.getAttribute('href');
- if (!to) {
- return;
- }
- e.preventDefault();
- const defaultActionCallback = () => action('navigate')(to, e);
- if (!svelteKitParameters.hrefs) {
- defaultActionCallback();
- return;
- }
-
- let callDefaultCallback = true;
- // we loop over every href set by the user and check if the href matches
- // if it does we call the callback provided by the user and disable the default callback
- Object.entries(svelteKitParameters.hrefs).forEach(([href, hrefConfig]) => {
- const { callback, asRegex } = normalizeHrefConfig(hrefConfig);
- const isMatch = asRegex ? new RegExp(href).test(to) : to === href;
- if (isMatch) {
- callDefaultCallback = false;
- callback?.(to, e);
- }
- });
- if (callDefaultCallback) {
- defaultActionCallback();
- }
+ onMount(() => {
+ const globalClickListener = (e: MouseEvent) => {
+ // we add a global click event listener and we check if there's a link in the composedPath
+ const path = e.composedPath();
+ const element = path.findLast((el) => el instanceof HTMLElement && el.tagName === 'A');
+ if (element && element instanceof HTMLAnchorElement) {
+ // if the element is an a-tag we get the href of the element
+ // and compare it to the hrefs-parameter set by the user
+ const to = element.getAttribute('href');
+ if (!to) {
+ return;
+ }
+ e.preventDefault();
+ const defaultActionCallback = () => action('navigate')(to, e);
+ if (!svelteKitParameters.hrefs) {
+ defaultActionCallback();
+ return;
}
- };
-
- /**
- * Function that create and add listeners for the event that are emitted by the mocked
- * functions. The event name is based on the function name
- *
- * Eg. storybook:goto, storybook:invalidateAll
- *
- * @param baseModule The base module where the function lives (navigation|forms)
- * @param functions The list of functions in that module that emit events
- * @param {boolean} [defaultToAction] The list of functions in that module that emit events
- * @returns A function to remove all the listener added
- */
- function createListeners(
- baseModule: keyof SvelteKitParameters,
- functions: string[],
- defaultToAction?: boolean
- ) {
- // the array of every added listener, we can use this in the return function
- // to clean them
- const toRemove: Array<{
- eventType: string;
- listener: (event: { detail: any[] }) => void;
- }> = [];
- functions.forEach((func) => {
- // we loop over every function and check if the user actually passed
- // a function in sveltekit_experimental[baseModule][func] eg. sveltekit_experimental.navigation.goto
- const hasFunction =
- (svelteKitParameters as any)[baseModule]?.[func] &&
- (svelteKitParameters as any)[baseModule][func] instanceof Function;
- // if we default to an action we still add the listener (this will be the case for goto, invalidate, invalidateAll)
- if (hasFunction || defaultToAction) {
- // we create the listener that will just get the detail array from the custom element
- // and call the user provided function spreading this args in...this will basically call
- // the function that the user provide with the same arguments the function is invoked to
- // eg. if it calls goto("/my-route") inside the component the function sveltekit_experimental.navigation.goto
- // it provided to storybook will be called with "/my-route"
- const listener = ({ detail = [] as any[] }) => {
- const args = Array.isArray(detail) ? detail : [];
- // if it has a function in the parameters we call that function
- // otherwise we invoke the action
- const fnToCall = hasFunction
- ? (svelteKitParameters as any)[baseModule][func]
- : action(func);
- fnToCall(...args);
- };
- const eventType = `storybook:${func}`;
- toRemove.push({ eventType, listener });
- // add the listener to window
- (window.addEventListener as any)(eventType, listener);
+ let callDefaultCallback = true;
+ // we loop over every href set by the user and check if the href matches
+ // if it does we call the callback provided by the user and disable the default callback
+ Object.entries(svelteKitParameters.hrefs).forEach(([href, hrefConfig]) => {
+ const { callback, asRegex } = normalizeHrefConfig(hrefConfig);
+ const isMatch = asRegex ? new RegExp(href).test(to) : to === href;
+ if (isMatch) {
+ callDefaultCallback = false;
+ callback?.(to, e);
}
});
- return () => {
- // loop over every listener added and remove them
- toRemove.forEach(({ eventType, listener }) => {
- // @ts-expect-error apparently you can't remove a custom listener to the window with TS
- window.removeEventListener(eventType, listener);
- });
- };
+ if (callDefaultCallback) {
+ defaultActionCallback();
+ }
}
+ };
- const removeNavigationListeners = createListeners(
- 'navigation',
- ['goto', 'invalidate', 'invalidateAll', 'pushState', 'replaceState'],
- true
- );
- const removeFormsListeners = createListeners('forms', ['enhance']);
- window.addEventListener('click', globalClickListener);
+ /**
+ * Function that create and add listeners for the event that are emitted by the mocked
+ * functions. The event name is based on the function name
+ *
+ * Eg. storybook:goto, storybook:invalidateAll
+ *
+ * @param baseModule The base module where the function lives (navigation|forms)
+ * @param functions The list of functions in that module that emit events
+ * @param {boolean} [defaultToAction] The list of functions in that module that emit events
+ * @returns A function to remove all the listener added
+ */
+ function createListeners(
+ baseModule: keyof SvelteKitParameters,
+ functions: string[],
+ defaultToAction?: boolean
+ ) {
+ // the array of every added listener, we can use this in the return function
+ // to clean them
+ const toRemove: Array<{
+ eventType: string;
+ listener: (event: { detail: any[] }) => void;
+ }> = [];
+ functions.forEach((func) => {
+ // we loop over every function and check if the user actually passed
+ // a function in sveltekit_experimental[baseModule][func] eg. sveltekit_experimental.navigation.goto
+ const hasFunction =
+ (svelteKitParameters as any)[baseModule]?.[func] &&
+ (svelteKitParameters as any)[baseModule][func] instanceof Function;
+ // if we default to an action we still add the listener (this will be the case for goto, invalidate, invalidateAll)
+ if (hasFunction || defaultToAction) {
+ // we create the listener that will just get the detail array from the custom element
+ // and call the user provided function spreading this args in...this will basically call
+ // the function that the user provide with the same arguments the function is invoked to
+ // eg. if it calls goto("/my-route") inside the component the function sveltekit_experimental.navigation.goto
+ // it provided to storybook will be called with "/my-route"
+ const listener = ({ detail = [] as any[] }) => {
+ const args = Array.isArray(detail) ? detail : [];
+ // if it has a function in the parameters we call that function
+ // otherwise we invoke the action
+ const fnToCall = hasFunction
+ ? (svelteKitParameters as any)[baseModule][func]
+ : action(func);
+ fnToCall(...args);
+ };
+ const eventType = `storybook:${func}`;
+ toRemove.push({ eventType, listener });
+ // add the listener to window
+ (window.addEventListener as any)(eventType, listener);
+ }
+ });
return () => {
- window.removeEventListener('click', globalClickListener);
- removeNavigationListeners();
- removeFormsListeners();
+ // loop over every listener added and remove them
+ toRemove.forEach(({ eventType, listener }) => {
+ // @ts-expect-error apparently you can't remove a custom listener to the window with TS
+ window.removeEventListener(eventType, listener);
+ });
};
- });
+ }
+
+ const removeNavigationListeners = createListeners(
+ 'navigation',
+ ['goto', 'invalidate', 'invalidateAll', 'pushState', 'replaceState'],
+ true
+ );
+ const removeFormsListeners = createListeners('forms', ['enhance']);
+ window.addEventListener('click', globalClickListener);
+
+ return () => {
+ window.removeEventListener('click', globalClickListener);
+ removeNavigationListeners();
+ removeFormsListeners();
+ };
+ });
+
+ return Story();
+};
- return Story();
- },
-];
+export const decorators: Decorator[] = [svelteKitMocksDecorator];
From 4f1b73d8ff7c5c49323912b9e420385cce45946c Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Thu, 5 Sep 2024 09:13:27 +0200
Subject: [PATCH 036/213] fix duplicate default annotations
---
.../modules/store/csf/portable-stories.ts | 16 +++++++++++-----
1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 7adc83196eb1..1133e2e87a84 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -74,13 +74,19 @@ export function setProjectAnnotations(
| NamedOrDefaultProjectAnnotations[]
): NormalizedProjectAnnotations {
const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
- if (globalThis.defaultProjectAnnotations) {
- annotations.push(globalThis.defaultProjectAnnotations);
- }
-
globalThis.globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
- return globalThis.globalProjectAnnotations;
+ /*
+ We must return the composition of default and global annotations here
+ To ensure that the user has the full project annotations, eg. when running
+
+ const projectAnnotations = setProjectAnnotations(...);
+ beforeAll(projectAnnotations.beforeAll)
+ */
+ return composeConfigs([
+ globalThis.defaultProjectAnnotations,
+ globalThis.globalProjectAnnotations,
+ ]);
}
const cleanups: CleanupCallback[] = [];
From 8a7d8eee7ce16030111e009779b9fb15a70099c0 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Thu, 5 Sep 2024 10:53:11 +0200
Subject: [PATCH 037/213] fix decorator type
---
code/frameworks/sveltekit/src/preview.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts
index c93cbde37a55..6eb8a816dd12 100644
--- a/code/frameworks/sveltekit/src/preview.ts
+++ b/code/frameworks/sveltekit/src/preview.ts
@@ -15,7 +15,7 @@ const normalizeHrefConfig = (hrefConfig: HrefConfig): NormalizedHrefConfig => {
return hrefConfig;
};
-const svelteKitMocksDecorator = (Story, ctx) => {
+const svelteKitMocksDecorator: Decorator = (Story, ctx) => {
const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
setPage(svelteKitParameters?.stores?.page);
setNavigating(svelteKitParameters?.stores?.navigating);
From e4697f9d782700879ed2b4706965fcba8ff7a988 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Thu, 5 Sep 2024 13:25:27 +0200
Subject: [PATCH 038/213] fix composing undefined defaultProjectAnnotations
---
.../src/preview-api/modules/store/csf/portable-stories.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 1133e2e87a84..fd50bd57c2dd 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -84,8 +84,8 @@ export function setProjectAnnotations(
beforeAll(projectAnnotations.beforeAll)
*/
return composeConfigs([
- globalThis.defaultProjectAnnotations,
- globalThis.globalProjectAnnotations,
+ globalThis.defaultProjectAnnotations ?? {},
+ globalThis.globalProjectAnnotations ?? {},
]);
}
From 758aaa1497d8ded23bc2f1c2e3662cf597ced881 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic
Date: Thu, 5 Sep 2024 13:29:09 +0200
Subject: [PATCH 039/213] Next.js-Vite: Update vite-plugin-storybook-nextjs
---
code/frameworks/experimental-nextjs-vite/package.json | 2 +-
code/yarn.lock | 10 +++++-----
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index c0a70eaecffd..83e8bfc35993 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -99,7 +99,7 @@
"@storybook/react": "workspace:*",
"@storybook/test": "workspace:*",
"styled-jsx": "5.1.6",
- "vite-plugin-storybook-nextjs": "^1.0.10"
+ "vite-plugin-storybook-nextjs": "^1.0.11"
},
"devDependencies": {
"@types/node": "^18.0.0",
diff --git a/code/yarn.lock b/code/yarn.lock
index c3b25a45ce54..b7dcbf2eaa77 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6340,7 +6340,7 @@ __metadata:
sharp: "npm:^0.33.3"
styled-jsx: "npm:5.1.6"
typescript: "npm:^5.3.2"
- vite-plugin-storybook-nextjs: "npm:^1.0.10"
+ vite-plugin-storybook-nextjs: "npm:^1.0.11"
peerDependencies:
"@storybook/test": "workspace:*"
next: ^14.1.0
@@ -28697,9 +28697,9 @@ __metadata:
languageName: node
linkType: hard
-"vite-plugin-storybook-nextjs@npm:^1.0.10":
- version: 1.0.10
- resolution: "vite-plugin-storybook-nextjs@npm:1.0.10"
+"vite-plugin-storybook-nextjs@npm:^1.0.11":
+ version: 1.0.11
+ resolution: "vite-plugin-storybook-nextjs@npm:1.0.11"
dependencies:
"@next/env": "npm:^14.2.5"
image-size: "npm:^1.1.1"
@@ -28715,7 +28715,7 @@ __metadata:
dependenciesMeta:
sharp:
optional: true
- checksum: 10c0/e0e373ef94e1761b871b2cc846c205a846901d93c7e61f9d9ee3c69740681e42e6403a7d61109c59f2d98d5829476c3e6d4e9d5a329c4bd51e758b763fa8ea9e
+ checksum: 10c0/9652b76c13a682b688d9a4f617b1a66263f25f395a99af8e258bedef4f3b3ce1c856ec1ff66cc0359d6aedc96adee9750fd6b0432514dd575ad7896cd1de70df
languageName: node
linkType: hard
From 714913d6443c524666ef81de37d4e59709712b33 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic
Date: Thu, 5 Sep 2024 15:33:36 +0200
Subject: [PATCH 040/213] Next.js: Fix react-dom/test-utils aliasing
---
code/frameworks/nextjs/src/config/webpack.ts | 15 ++++++++++++++-
code/renderers/react/src/act-compat.ts | 8 ++++++--
2 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index 3e0d758c1514..57e7caa47bbe 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -20,6 +20,9 @@ export const configureConfig = async ({
nextConfigPath?: string;
}): Promise => {
const nextConfig = await resolveNextConfig({ nextConfigPath });
+ baseConfig.resolve ??= {};
+ baseConfig.resolve.alias ??= {};
+ const aliasConfig = baseConfig.resolve.alias;
addScopedAlias(baseConfig, 'next/config');
if (tryResolve('next/dist/compiled/react')) {
@@ -31,9 +34,19 @@ export const configureConfig = async ({
'react-dom/test-utils',
'next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js'
);
+ } else {
+ const name = 'react-dom/test-utils';
+ if (Array.isArray(aliasConfig)) {
+ aliasConfig.push({
+ name,
+ alias: name,
+ });
+ } else {
+ aliasConfig[name] = name;
+ }
}
if (tryResolve('next/dist/compiled/react-dom')) {
- addScopedAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
+ addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
}
setupRuntimeConfig(baseConfig, nextConfig);
diff --git a/code/renderers/react/src/act-compat.ts b/code/renderers/react/src/act-compat.ts
index afe1cc902316..31b4fb72e54f 100644
--- a/code/renderers/react/src/act-compat.ts
+++ b/code/renderers/react/src/act-compat.ts
@@ -8,8 +8,12 @@ declare const globalThis: {
IS_REACT_ACT_ENVIRONMENT: boolean;
};
-// @ts-expect-error act might not be available in some versions of React
-const reactAct = typeof React.act === 'function' ? React.act : DeprecatedReactTestUtils.act;
+const reactAct =
+ // @ts-expect-error act might not be available in some versions of React
+ typeof React.act === 'function'
+ ? // @ts-expect-error act might not be available in some versions of React
+ React.act
+ : DeprecatedReactTestUtils.act ?? (async (cb: () => Promise | void) => cb());
export function setReactActEnvironment(isReactActEnvironment: boolean) {
globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
From e6fdccdad3b31e954fb2dcdb6fcaa58e3dddcfdb Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Fri, 6 Sep 2024 14:27:32 +0200
Subject: [PATCH 041/213] skip source map generation for external globals
---
.../builder-vite/src/plugins/external-globals-plugin.ts | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
index 1c7ada46b7be..a71f9f3b0fe8 100644
--- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
@@ -91,10 +91,7 @@ export async function externalGlobalsPlugin(externals: Record) {
return {
code: src.toString(),
- map: src.generateMap({
- source: id,
- hires: true,
- }),
+ map: null,
};
},
} satisfies Plugin;
From 55d2ac1bdedff231b57a9b6895ece475e607bb88 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Fri, 6 Sep 2024 14:28:28 +0200
Subject: [PATCH 042/213] add test case for multi-line imports in external
globals replacements
---
.../src/plugins/external-globals-plugin.test.ts | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.test.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.test.ts
index 9555a4dd6b86..67b62690da43 100644
--- a/code/builders/builder-vite/src/plugins/external-globals-plugin.test.ts
+++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.test.ts
@@ -12,6 +12,22 @@ const cases = [
input: `import { Rain, Jour as Day, Nuit as Night, Sun } from "${packageName}"`,
output: `const { Rain, Jour: Day, Nuit: Night, Sun } = ${globals[packageName]}`,
},
+ {
+ globals,
+ packageName,
+ input: `import {
+ Rain,
+ Jour as Day,
+ Nuit as Night,
+ Sun
+ } from "${packageName}"`,
+ output: `const {
+ Rain,
+ Jour: Day,
+ Nuit: Night,
+ Sun
+ } = ${globals[packageName]}`,
+ },
{
globals,
packageName,
From ea1a533a4b4e0017fb1a93baaf76c51be25fe66b Mon Sep 17 00:00:00 2001
From: Valentin Palkovic
Date: Fri, 6 Sep 2024 11:46:32 +0200
Subject: [PATCH 043/213] Fix Webpack aliasing
---
code/frameworks/nextjs/src/config/webpack.ts | 31 ++++++++++----------
code/frameworks/nextjs/src/utils.ts | 20 ++++++++-----
code/renderers/react/src/act-compat.ts | 5 +---
3 files changed, 28 insertions(+), 28 deletions(-)
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index 57e7caa47bbe..a0ea2d47bded 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -2,7 +2,7 @@ import type { NextConfig } from 'next';
import type { Configuration as WebpackConfig } from 'webpack';
import { DefinePlugin } from 'webpack';
-import { addScopedAlias, resolveNextConfig } from '../utils';
+import { addScopedAlias, resolveNextConfig, setAlias } from '../utils';
const tryResolve = (path: string) => {
try {
@@ -20,33 +20,32 @@ export const configureConfig = async ({
nextConfigPath?: string;
}): Promise => {
const nextConfig = await resolveNextConfig({ nextConfigPath });
- baseConfig.resolve ??= {};
- baseConfig.resolve.alias ??= {};
- const aliasConfig = baseConfig.resolve.alias;
addScopedAlias(baseConfig, 'next/config');
+
+ // @ts-expect-error We know that alias is an object
+ if (baseConfig.resolve?.alias?.['react-dom']) {
+ // Removing the alias to react-dom to avoid conflicts with the alias we are setting
+ // because the react-dom alias is an exact match and we need to alias separate parts of react-dom
+ // in different places
+ // @ts-expect-error We know that alias is an object
+ delete baseConfig.resolve.alias?.['react-dom'];
+ }
+
if (tryResolve('next/dist/compiled/react')) {
addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
}
if (tryResolve('next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js')) {
- addScopedAlias(
+ setAlias(
baseConfig,
'react-dom/test-utils',
'next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js'
);
- } else {
- const name = 'react-dom/test-utils';
- if (Array.isArray(aliasConfig)) {
- aliasConfig.push({
- name,
- alias: name,
- });
- } else {
- aliasConfig[name] = name;
- }
}
if (tryResolve('next/dist/compiled/react-dom')) {
- addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
+ setAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
+ setAlias(baseConfig, 'react-dom/client', 'next/dist/compiled/react-dom/client');
+ setAlias(baseConfig, 'react-dom/server', 'next/dist/compiled/react-dom/server');
}
setupRuntimeConfig(baseConfig, nextConfig);
diff --git a/code/frameworks/nextjs/src/utils.ts b/code/frameworks/nextjs/src/utils.ts
index 9c8abc6c88c8..198917513166 100644
--- a/code/frameworks/nextjs/src/utils.ts
+++ b/code/frameworks/nextjs/src/utils.ts
@@ -27,23 +27,27 @@ export const resolveNextConfig = async ({
return loadConfig(PHASE_DEVELOPMENT_SERVER, dir, undefined);
};
-// This is to help the addon in development
-// Without it, webpack resolves packages in its node_modules instead of the example's node_modules
-export const addScopedAlias = (baseConfig: WebpackConfig, name: string, alias?: string): void => {
+export function setAlias(baseConfig: WebpackConfig, name: string, alias: string) {
baseConfig.resolve ??= {};
baseConfig.resolve.alias ??= {};
const aliasConfig = baseConfig.resolve.alias;
- const scopedAlias = scopedResolve(`${alias ?? name}`);
-
if (Array.isArray(aliasConfig)) {
aliasConfig.push({
name,
- alias: scopedAlias,
+ alias,
});
} else {
- aliasConfig[name] = scopedAlias;
+ aliasConfig[name] = alias;
}
+}
+
+// This is to help the addon in development
+// Without it, webpack resolves packages in its node_modules instead of the example's node_modules
+export const addScopedAlias = (baseConfig: WebpackConfig, name: string, alias?: string): void => {
+ const scopedAlias = scopedResolve(`${alias ?? name}`);
+
+ setAlias(baseConfig, name, scopedAlias);
};
/**
@@ -64,7 +68,7 @@ export const scopedResolve = (id: string): string => {
let scopedModulePath;
try {
- // TODO: Remove in next major release (SB 8.0) and use the statement in the catch block per default instead
+ // TODO: Remove in next major release (SB 9.0) and use the statement in the catch block per default instead
scopedModulePath = require.resolve(id, { paths: [resolve()] });
} catch (e) {
scopedModulePath = require.resolve(id);
diff --git a/code/renderers/react/src/act-compat.ts b/code/renderers/react/src/act-compat.ts
index 31b4fb72e54f..3eab722d3bb1 100644
--- a/code/renderers/react/src/act-compat.ts
+++ b/code/renderers/react/src/act-compat.ts
@@ -10,10 +10,7 @@ declare const globalThis: {
const reactAct =
// @ts-expect-error act might not be available in some versions of React
- typeof React.act === 'function'
- ? // @ts-expect-error act might not be available in some versions of React
- React.act
- : DeprecatedReactTestUtils.act ?? (async (cb: () => Promise | void) => cb());
+ typeof React.act === 'function' ? React.act : DeprecatedReactTestUtils.act;
export function setReactActEnvironment(isReactActEnvironment: boolean) {
globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
From 0a1d9e8dfb769054740e626e86f79fe4dde45ce5 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Fri, 6 Sep 2024 14:53:42 +0200
Subject: [PATCH 044/213] exclude sb-preview/runtime.js from stats-json
---
.../src/plugins/webpack-stats-plugin.ts | 41 +-
preview-stats-new-ids.json | 2914 +++++++++++++++++
2 files changed, 2936 insertions(+), 19 deletions(-)
create mode 100644 preview-stats-new-ids.json
diff --git a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
index 9442291df2aa..658f8ea9c31e 100644
--- a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
@@ -42,7 +42,8 @@ function isUserCode(moduleName: string) {
!moduleName.startsWith('\x00') &&
!moduleName.startsWith('\u0000') &&
moduleName !== 'react/jsx-runtime' &&
- !moduleName.match(/node_modules\//)
+ !moduleName.match(/node_modules\//) &&
+ !moduleName.includes('sb-preview/runtime.js')
);
}
@@ -87,25 +88,27 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
// We want this to run after the vite build plugins (https://vitejs.dev/guide/api-plugin.html#plugin-ordering)
enforce: 'post',
moduleParsed: function (mod) {
- if (isUserCode(mod.id)) {
- mod.importedIds
- .concat(mod.dynamicallyImportedIds)
- .filter((name) => isUserCode(name))
- .forEach((depIdUnsafe) => {
- const depId = normalize(depIdUnsafe);
- if (statsMap.has(depId)) {
- const m = statsMap.get(depId);
- if (m) {
- m.reasons = (m.reasons ?? [])
- .concat(createReasons([mod.id]))
- .filter((r) => r.moduleName !== depId);
- statsMap.set(depId, m);
- }
- } else {
- statsMap.set(depId, createStatsMapModule(depId, [mod.id]));
- }
- });
+ if (!isUserCode(mod.id)) {
+ return;
}
+ mod.importedIds
+ .concat(mod.dynamicallyImportedIds)
+ .filter((name) => isUserCode(name))
+ .forEach((depIdUnsafe) => {
+ const depId = normalize(depIdUnsafe);
+ if (!statsMap.has(depId)) {
+ statsMap.set(depId, createStatsMapModule(depId, [mod.id]));
+ return;
+ }
+ const m = statsMap.get(depId);
+ if (!m) {
+ return;
+ }
+ m.reasons = (m.reasons ?? [])
+ .concat(createReasons([mod.id]))
+ .filter((r) => r.moduleName !== depId);
+ statsMap.set(depId, m);
+ });
},
storybookGetStats() {
diff --git a/preview-stats-new-ids.json b/preview-stats-new-ids.json
new file mode 100644
index 000000000000..9bc467c67f5b
--- /dev/null
+++ b/preview-stats-new-ids.json
@@ -0,0 +1,2914 @@
+{
+ "modules": [
+ {
+ "id": "./iframe.html",
+ "name": "./iframe.html",
+ "reasons": [
+ {
+ "moduleName": "./iframe.html"
+ }
+ ]
+ },
+ {
+ "id": "./sb-preview/runtime.js",
+ "name": "./sb-preview/runtime.js",
+ "reasons": [
+ {
+ "moduleName": "./iframe.html"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Button.jsx",
+ "name": "./renderers/react/template/components/Button.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Form.jsx",
+ "name": "./renderers/react/template/components/Form.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Html.jsx",
+ "name": "./renderers/react/template/components/Html.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Pre.jsx",
+ "name": "./renderers/react/template/components/Pre.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/mocks/index.ts",
+ "name": "./addons/interactions/src/mocks/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/Interaction.tsx",
+ "name": "./addons/interactions/src/components/Interaction.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/Subnav.stories.tsx",
+ "name": "./addons/interactions/src/components/Subnav.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/brand/StorybookIcon.tsx",
+ "name": "./core/src/components/brand/StorybookIcon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/brand/StorybookIcon.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/controls/src/SaveStory.tsx",
+ "name": "./addons/controls/src/SaveStory.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/controls/src/SaveStory.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/brand/StorybookLogo.tsx",
+ "name": "./core/src/components/brand/StorybookLogo.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/brand/StorybookLogo.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/index.ts",
+ "name": "./lib/blocks/src/components/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./.storybook/preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/mdx.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./.storybook/isChromatic.ts",
+ "name": "./.storybook/isChromatic.ts",
+ "reasons": [
+ {
+ "moduleName": "./.storybook/preview.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/InteractionsPanel.tsx",
+ "name": "./addons/interactions/src/components/InteractionsPanel.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/MatcherResult.tsx",
+ "name": "./addons/interactions/src/components/MatcherResult.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/MatcherResult.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/StatusIcon.tsx",
+ "name": "./addons/interactions/src/components/StatusIcon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/StatusIcon.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/MethodCall.tsx",
+ "name": "./addons/interactions/src/components/MethodCall.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/MethodCall.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/MatcherResult.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/StatusBadge.tsx",
+ "name": "./addons/interactions/src/components/StatusBadge.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/StatusBadge.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Subnav.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/ActionBar/ActionBar.tsx",
+ "name": "./core/src/components/components/ActionBar/ActionBar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/ActionBar/ActionBar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/Subnav.tsx",
+ "name": "./addons/interactions/src/components/Subnav.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Subnav.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/form/index.tsx",
+ "name": "./core/src/components/components/form/index.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Button/Button.deprecated.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Button/Button.tsx",
+ "name": "./core/src/components/components/Button/Button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Button/Button.deprecated.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/Button/Button.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/form/index.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/IconButton/IconButton.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/Button/Button.tsx",
+ "name": "./addons/onboarding/src/components/Button/Button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/Button/Button.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Badge/Badge.tsx",
+ "name": "./core/src/components/components/Badge/Badge.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Badge/Badge.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/Confetti/Confetti.tsx",
+ "name": "./addons/onboarding/src/components/Confetti/Confetti.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/Confetti/Confetti.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/docs/template/stories/docs2/button.stories.ts",
+ "name": "./addons/docs/template/stories/docs2/button.stories.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/docs/template/stories/docs2/MetaOf.mdx"
+ },
+ {
+ "moduleName": "./addons/docs/template/stories/docs2/MetaOfNamed.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/brand/SideBySide.tsx",
+ "name": "./core/src/components/brand/SideBySide.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/brand/colorpalette.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Button/Button.stories.tsx",
+ "name": "./core/src/components/components/Button/Button.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Button/Docs.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Unstyled.tsx",
+ "name": "./lib/blocks/src/blocks/Unstyled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Unstyled.mdx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/ErrorFormatter/ErrorFormatter.tsx",
+ "name": "./core/src/components/components/ErrorFormatter/ErrorFormatter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/ErrorFormatter/ErrorFormatter.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/HighlightElement/HighlightElement.tsx",
+ "name": "./addons/onboarding/src/components/HighlightElement/HighlightElement.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx",
+ "name": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/IconButton/IconButton.tsx",
+ "name": "./core/src/components/components/IconButton/IconButton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/IconButton/IconButton.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.styled.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Loader/Loader.tsx",
+ "name": "./core/src/components/components/Loader/Loader.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Loader/Loader.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/List.tsx",
+ "name": "./addons/onboarding/src/components/List/List.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/List.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx",
+ "name": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/List.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/features/SplashScreen/SplashScreen.tsx",
+ "name": "./addons/onboarding/src/features/SplashScreen/SplashScreen.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Modal/Modal.tsx",
+ "name": "./core/src/components/components/Modal/Modal.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/ScrollArea/ScrollArea.tsx",
+ "name": "./core/src/components/components/ScrollArea/ScrollArea.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/ScrollArea/ScrollArea.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/bar/bar.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/docs/template/stories/docs2/ResolvedReact.jsx",
+ "name": "./addons/docs/template/stories/docs2/ResolvedReact.jsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/docs/template/stories/docs2/ResolvedReact.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/form/field/field.tsx",
+ "name": "./core/src/components/components/form/field/field.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/form/form.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/form/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/form/input/input.tsx",
+ "name": "./core/src/components/components/form/input/input.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/form/form.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/form/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Zoom/Zoom.tsx",
+ "name": "./core/src/components/components/Zoom/Zoom.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Zoom/Zoom.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/icon/icon.tsx",
+ "name": "./core/src/components/components/icon/icon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/icon/icon.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/typography/link/link.tsx",
+ "name": "./core/src/components/components/typography/link/link.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/placeholder/placeholder.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/typography/link/link.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipMessage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/placeholder/placeholder.tsx",
+ "name": "./core/src/components/components/placeholder/placeholder.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/placeholder/placeholder.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/spaced/Spaced.tsx",
+ "name": "./core/src/components/components/spaced/Spaced.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/spaced/Spaced.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/EmptyTabContent.tsx",
+ "name": "./core/src/components/components/tabs/EmptyTabContent.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/EmptyTabContent.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/tabs.tsx",
+ "name": "./core/src/components/components/tabs/tabs.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/Tooltip.tsx",
+ "name": "./core/src/components/components/tooltip/Tooltip.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/Tooltip.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/WithTooltip.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/ListItem.tsx",
+ "name": "./core/src/components/components/tooltip/ListItem.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/ListItem.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/TooltipLinkList.tsx",
+ "name": "./core/src/components/components/tooltip/TooltipLinkList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/WithTooltip.tsx",
+ "name": "./core/src/components/components/tooltip/WithTooltip.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipNote.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipMessage.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/WithTooltip.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/assets/ellipse.png",
+ "name": "./core/src/components/components/tooltip/assets/ellipse.png",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/TooltipNote.tsx",
+ "name": "./core/src/components/components/tooltip/TooltipNote.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipNote.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/TooltipMessage.tsx",
+ "name": "./core/src/components/components/tooltip/TooltipMessage.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipMessage.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/WithTooltip.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx",
+ "name": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/typography/DocumentWrapper.tsx",
+ "name": "./core/src/components/components/typography/DocumentWrapper.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/typography/DocumentWrapper.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/layout/Layout.tsx",
+ "name": "./core/src/manager/components/layout/Layout.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/layout/LayoutProvider.tsx",
+ "name": "./core/src/manager/components/layout/LayoutProvider.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/panel/Panel.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/about/MobileAbout.tsx",
+ "name": "./core/src/manager/components/mobile/about/MobileAbout.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/notifications/NotificationItem.tsx",
+ "name": "./core/src/manager/components/notifications/NotificationItem.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationItem.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/notifications/NotificationItem.stories.tsx",
+ "name": "./core/src/manager/components/notifications/NotificationItem.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/notifications/NotificationList.tsx",
+ "name": "./core/src/manager/components/notifications/NotificationList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/container/Notifications.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/preview/Iframe.tsx",
+ "name": "./core/src/manager/components/preview/Iframe.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/preview/Iframe.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/defaultShortcuts.tsx",
+ "name": "./core/src/manager/settings/defaultShortcuts.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/panel/Panel.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/settings/shortcuts.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/panel/Panel.tsx",
+ "name": "./core/src/manager/components/panel/Panel.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/panel/Panel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Explorer.tsx",
+ "name": "./core/src/manager/components/sidebar/Explorer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/IconSymbols.tsx",
+ "name": "./core/src/manager/components/sidebar/IconSymbols.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/IconSymbols.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/utils/status.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Refs.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/Refs.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/mockdata.ts",
+ "name": "./core/src/manager/components/sidebar/mockdata.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchList.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FilterToggle.tsx",
+ "name": "./core/src/manager/components/sidebar/FilterToggle.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FilterToggle.stories.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SidebarBottom.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchModal.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchModal.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Heading.tsx",
+ "name": "./core/src/manager/components/sidebar/Heading.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Heading.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Search.tsx",
+ "name": "./core/src/manager/components/sidebar/Search.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/SearchResults.tsx",
+ "name": "./core/src/manager/components/sidebar/SearchResults.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/SearchResults.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/SearchResults.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Sidebar.tsx",
+ "name": "./core/src/manager/components/sidebar/Sidebar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/utils/tree.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/mockdata.large.ts",
+ "name": "./core/src/manager/components/sidebar/mockdata.large.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/container/Menu.tsx",
+ "name": "./core/src/manager/container/Menu.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/container/Menu.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Menu.tsx",
+ "name": "./core/src/manager/components/sidebar/Menu.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Heading.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/utils/tree.ts",
+ "name": "./core/src/manager/utils/tree.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useHighlighted.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/utils/status.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/StatusContext.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useExpanded.ts"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Heading.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/Heading.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Refs.tsx",
+ "name": "./core/src/manager/components/sidebar/Refs.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/SidebarBottom.tsx",
+ "name": "./core/src/manager/components/sidebar/SidebarBottom.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SidebarBottom.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Tree.tsx",
+ "name": "./core/src/manager/components/sidebar/Tree.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/upgrade/UpgradeBlock.tsx",
+ "name": "./core/src/manager/components/upgrade/UpgradeBlock.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/settings/About.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/HighlightStyles.tsx",
+ "name": "./core/src/manager/components/sidebar/HighlightStyles.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/TreeNode.tsx",
+ "name": "./core/src/manager/components/sidebar/TreeNode.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/shortcuts.tsx",
+ "name": "./core/src/manager/settings/shortcuts.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/shortcuts.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/whats_new.tsx",
+ "name": "./core/src/manager/settings/whats_new.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/whats_new_footer.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx",
+ "name": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/about.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/About.tsx",
+ "name": "./core/src/manager/settings/About.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/about.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/SettingsFooter.tsx",
+ "name": "./core/src/manager/settings/SettingsFooter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/SettingsFooter.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/settings/shortcuts.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/template/stories/import.js",
+ "name": "./core/template/stories/import.js",
+ "reasons": [
+ {
+ "moduleName": "./core/template/stories/interleavedExports.stories.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Anchor.tsx",
+ "name": "./lib/blocks/src/blocks/Anchor.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Anchor.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/EmptyBlock.tsx",
+ "name": "./lib/blocks/src/components/EmptyBlock.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/EmptyBlock.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Source.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/ArgTypes.tsx",
+ "name": "./lib/blocks/src/blocks/ArgTypes.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/Button.stories.tsx",
+ "name": "./lib/blocks/src/examples/Button.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/CanvasParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/CanvasParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/SourceParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/SourceParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Canvas.tsx",
+ "name": "./lib/blocks/src/blocks/Canvas.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Source.stories.tsx",
+ "name": "./lib/blocks/src/blocks/Source.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/IconGallery.tsx",
+ "name": "./lib/blocks/src/components/IconGallery.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/IconGallery.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Markdown.tsx",
+ "name": "./lib/blocks/src/blocks/Markdown.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Markdown.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Markdown.stories.tsx",
+ "name": "./lib/blocks/src/blocks/Markdown.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/DocsPage.tsx",
+ "name": "./lib/blocks/src/components/DocsPage.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Preview.stories.tsx",
+ "name": "./lib/blocks/src/components/Preview.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Source.stories.tsx",
+ "name": "./lib/blocks/src/components/Source.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ControlsParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ControlsParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/EmptyArgTypes.stories.tsx",
+ "name": "./lib/blocks/src/examples/EmptyArgTypes.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Controls.tsx",
+ "name": "./lib/blocks/src/blocks/Controls.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/Button.tsx",
+ "name": "./lib/blocks/src/examples/Button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonNoAutodocs.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonReadonly.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonSomeAutodocs.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/Button.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Description.tsx",
+ "name": "./lib/blocks/src/blocks/Description.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Source.tsx",
+ "name": "./lib/blocks/src/components/Source.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Source.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/Markdown-content.md",
+ "name": "./lib/blocks/src/examples/Markdown-content.md",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Markdown.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Title.tsx",
+ "name": "./lib/blocks/src/components/Title.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Title.stories.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/DocsPage.tsx",
+ "name": "./lib/blocks/src/blocks/DocsPage.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Preview.tsx",
+ "name": "./lib/blocks/src/components/Preview.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Story.tsx",
+ "name": "./lib/blocks/src/components/Story.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Typeset.tsx",
+ "name": "./lib/blocks/src/components/Typeset.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Typeset.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/StoriesParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/StoriesParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Primary.tsx",
+ "name": "./lib/blocks/src/blocks/Primary.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Source.tsx",
+ "name": "./lib/blocks/src/blocks/Source.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/SourceContainer.tsx",
+ "name": "./lib/blocks/src/blocks/SourceContainer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Stories.tsx",
+ "name": "./lib/blocks/src/blocks/Stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Boolean.tsx",
+ "name": "./lib/blocks/src/controls/Boolean.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Boolean.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Color.tsx",
+ "name": "./lib/blocks/src/controls/Color.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Color.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Files.tsx",
+ "name": "./lib/blocks/src/controls/Files.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Files.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Story.stories.tsx",
+ "name": "./lib/blocks/src/components/Story.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/StoryParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/StoryParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Story.tsx",
+ "name": "./lib/blocks/src/blocks/Story.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Date.tsx",
+ "name": "./lib/blocks/src/controls/Date.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Date.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Subtitle.tsx",
+ "name": "./lib/blocks/src/blocks/Subtitle.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Number.tsx",
+ "name": "./lib/blocks/src/controls/Number.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Number.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Range.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Title.tsx",
+ "name": "./lib/blocks/src/blocks/Title.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Object.tsx",
+ "name": "./lib/blocks/src/controls/Object.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Object.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Range.tsx",
+ "name": "./lib/blocks/src/controls/Range.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Range.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/SectionRow.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/SectionRow.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Text.tsx",
+ "name": "./lib/blocks/src/controls/Text.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Text.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Options.tsx",
+ "name": "./lib/blocks/src/controls/options/Options.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/CheckOptions.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/RadioOptions.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/SelectOptions.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ArgTypesParameters.tsx",
+ "name": "./lib/blocks/src/examples/ArgTypesParameters.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ColorPalette.tsx",
+ "name": "./lib/blocks/src/components/ColorPalette.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ColorPalette.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ControlsParameters.tsx",
+ "name": "./lib/blocks/src/examples/ControlsParameters.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/ControlsParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/EmptyExample.tsx",
+ "name": "./lib/blocks/src/examples/EmptyExample.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/CanvasParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/DocsPageParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/SourceParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/StoriesParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/SimpleSizeTest.tsx",
+ "name": "./lib/blocks/src/examples/SimpleSizeTest.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/StoryParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/index.ts",
+ "name": "./lib/blocks/src/components/ArgsTable/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/IFrame.tsx",
+ "name": "./lib/blocks/src/components/IFrame.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/utils.ts",
+ "name": "./addons/interactions/src/utils.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/EmptyState.tsx",
+ "name": "./addons/interactions/src/components/EmptyState.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/shared/animation.ts",
+ "name": "./core/src/components/components/shared/animation.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Loader/Loader.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx",
+ "name": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/List.styled.tsx",
+ "name": "./addons/onboarding/src/components/List/List.styled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/List.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/ListItem/ListItem.styled.tsx",
+ "name": "./addons/onboarding/src/components/List/ListItem/ListItem.styled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Modal/Modal.styled.tsx",
+ "name": "./core/src/components/components/Modal/Modal.styled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Zoom/ZoomElement.tsx",
+ "name": "./core/src/components/components/Zoom/ZoomElement.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Zoom/Zoom.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Zoom/ZoomIFrame.tsx",
+ "name": "./core/src/components/components/Zoom/ZoomIFrame.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Zoom/Zoom.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx",
+ "name": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/syntaxhighlighter/formatter.ts",
+ "name": "./core/src/components/components/syntaxhighlighter/formatter.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/bar/bar.tsx",
+ "name": "./core/src/components/components/bar/bar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/bar/button.tsx",
+ "name": "./core/src/components/components/bar/button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/tabs.helpers.tsx",
+ "name": "./core/src/components/components/tabs/tabs.helpers.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/tabs.hooks.tsx",
+ "name": "./core/src/components/components/tabs/tabs.hooks.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/constants.ts",
+ "name": "./core/src/manager/constants.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/LayoutProvider.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/upgrade/UpgradeBlock.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/hooks/useMedia.tsx",
+ "name": "./core/src/manager/components/hooks/useMedia.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/LayoutProvider.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/container/Notifications.tsx",
+ "name": "./core/src/manager/container/Notifications.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/layout/useDragging.ts",
+ "name": "./core/src/manager/components/layout/useDragging.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileList.tsx",
+ "name": "./core/src/manager/components/sidebar/FileList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/useHighlighted.ts",
+ "name": "./core/src/manager/components/sidebar/useHighlighted.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/hooks/useMeasure.tsx",
+ "name": "./core/src/manager/hooks/useMeasure.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FIleSearchList.utils.tsx",
+ "name": "./core/src/manager/components/sidebar/FIleSearchList.utils.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Brand.tsx",
+ "name": "./core/src/manager/components/sidebar/Brand.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Heading.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/useLastViewed.ts",
+ "name": "./core/src/manager/components/sidebar/useLastViewed.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/keybinding.ts",
+ "name": "./core/src/manager/keybinding.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useHighlighted.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useExpanded.ts"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/utils/status.tsx",
+ "name": "./core/src/manager/utils/status.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/StatusButton.tsx",
+ "name": "./core/src/manager/components/sidebar/StatusButton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/types.ts",
+ "name": "./core/src/manager/components/sidebar/types.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx",
+ "name": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/RefBlocks.tsx",
+ "name": "./core/src/manager/components/sidebar/RefBlocks.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/RefIndicator.tsx",
+ "name": "./core/src/manager/components/sidebar/RefIndicator.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/components/CollapseIcon.tsx",
+ "name": "./core/src/manager/components/sidebar/components/CollapseIcon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/StatusContext.tsx",
+ "name": "./core/src/manager/components/sidebar/StatusContext.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/useExpanded.ts",
+ "name": "./core/src/manager/components/sidebar/useExpanded.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useOf.ts",
+ "name": "./lib/blocks/src/blocks/useOf.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/utils.ts",
+ "name": "./lib/blocks/src/blocks/utils.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/BlockBackgroundStyles.tsx",
+ "name": "./lib/blocks/src/components/BlockBackgroundStyles.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/IconGallery.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Typeset.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ColorPalette.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/mdx.tsx",
+ "name": "./lib/blocks/src/blocks/mdx.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Markdown.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Heading.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subheading.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/DocsContext.ts",
+ "name": "./lib/blocks/src/blocks/DocsContext.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/useOf.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/mdx.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useArgs.ts",
+ "name": "./lib/blocks/src/blocks/useArgs.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useGlobals.ts",
+ "name": "./lib/blocks/src/blocks/useGlobals.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Toolbar.tsx",
+ "name": "./lib/blocks/src/components/Toolbar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ZoomContext.tsx",
+ "name": "./lib/blocks/src/components/ZoomContext.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/DocsStory.tsx",
+ "name": "./lib/blocks/src/blocks/DocsStory.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Heading.tsx",
+ "name": "./lib/blocks/src/blocks/Heading.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/helpers.ts",
+ "name": "./lib/blocks/src/controls/helpers.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Boolean.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Files.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Color.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Number.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Date.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Object.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Range.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Text.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Checkbox.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Radio.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Select.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useStory.ts",
+ "name": "./lib/blocks/src/blocks/useStory.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Object.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgValue.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgValue.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/Empty.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/Empty.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/Skeleton.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/Skeleton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Checkbox.tsx",
+ "name": "./lib/blocks/src/controls/options/Checkbox.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Radio.tsx",
+ "name": "./lib/blocks/src/controls/options/Radio.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Select.tsx",
+ "name": "./lib/blocks/src/controls/options/Select.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/types.ts",
+ "name": "./lib/blocks/src/components/ArgsTable/types.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/constants.ts",
+ "name": "./addons/interactions/src/constants.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/EmptyState.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Loader.tsx",
+ "name": "./core/src/manager/components/sidebar/Loader.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/RefBlocks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/hooks/useDebounce.ts",
+ "name": "./core/src/manager/hooks/useDebounce.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchModal.utils.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchModal.utils.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Subheading.tsx",
+ "name": "./lib/blocks/src/blocks/Subheading.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/index.tsx",
+ "name": "./lib/blocks/src/controls/index.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/helpers.ts",
+ "name": "./lib/blocks/src/controls/options/helpers.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Checkbox.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Radio.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Select.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/types.ts",
+ "name": "./lib/blocks/src/controls/types.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/index.ts",
+ "name": "./lib/blocks/src/controls/options/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
From c24f22182edb47bf7da8fa4230b0b37cc054db62 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic
Date: Fri, 6 Sep 2024 15:21:04 +0200
Subject: [PATCH 045/213] Remove console.log
---
code/renderers/react/src/portable-stories.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/code/renderers/react/src/portable-stories.tsx b/code/renderers/react/src/portable-stories.tsx
index ced0bbd289e3..bc031a04717e 100644
--- a/code/renderers/react/src/portable-stories.tsx
+++ b/code/renderers/react/src/portable-stories.tsx
@@ -98,7 +98,7 @@ export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations
Date: Fri, 6 Sep 2024 15:56:46 +0200
Subject: [PATCH 046/213] keep virtual files backwards compatible in stats-json
also cleanup code slightly
---
.../src/codegen-modern-iframe-script.ts | 9 +-
.../src/plugins/code-generator-plugin.ts | 36 +-
.../src/plugins/webpack-stats-plugin.ts | 71 +-
.../builder-vite/src/utils/virtual-module.ts | 3 -
.../builder-vite/src/virtual-file-names.ts | 18 +-
preview-stats-new-ids.json | 2914 +++++++++++++++++
6 files changed, 2989 insertions(+), 62 deletions(-)
delete mode 100644 code/builders/builder-vite/src/utils/virtual-module.ts
create mode 100644 preview-stats-new-ids.json
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 86756b002a27..7ad50afec12f 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -2,8 +2,7 @@ import { getFrameworkName, loadPreviewOrConfigFile } from 'storybook/internal/co
import type { Options, PreviewAnnotation } from 'storybook/internal/types';
import { processPreviewAnnotation } from './utils/process-preview-annotation';
-import { getResolvedVirtualModuleId } from './utils/virtual-module';
-import { virtualAddonSetupFile, virtualStoriesFile } from './virtual-file-names';
+import { SB_VIRTUAL_FILES, getResolvedVirtualModuleId } from './virtual-file-names';
export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
const { presets, configDir } = options;
@@ -46,7 +45,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
return `
if (import.meta.hot) {
- import.meta.hot.accept('${getResolvedVirtualModuleId(virtualStoriesFile)}', (newModule) => {
+ import.meta.hot.accept('${getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)}', (newModule) => {
// importFn has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
});
@@ -69,8 +68,8 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
*/
const code = `
import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
- import '${virtualAddonSetupFile}';
- import { importFn } from '${virtualStoriesFile}';
+ import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
+ import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';
${getPreviewAnnotationsFunction}
diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
index 1909ceda0988..77509b97cf93 100644
--- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
@@ -8,13 +8,7 @@ import { generateImportFnScriptCode } from '../codegen-importfn-script';
import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
import { generateAddonSetupCode } from '../codegen-set-addon-channel';
import { transformIframeHtml } from '../transform-iframe-html';
-import { getResolvedVirtualModuleId } from '../utils/virtual-module';
-import {
- virtualAddonSetupFile,
- virtualFileId,
- virtualPreviewFile,
- virtualStoriesFile,
-} from '../virtual-file-names';
+import { SB_VIRTUAL_FILES, getResolvedVirtualModuleId } from '../virtual-file-names';
export function codeGeneratorPlugin(options: Options): Plugin {
const iframePath = require.resolve('@storybook/builder-vite/input/iframe.html');
@@ -30,13 +24,13 @@ export function codeGeneratorPlugin(options: Options): Plugin {
// (this might be a little too aggressive?)
server.watcher.on('change', () => {
const appModule = server.moduleGraph.getModuleById(
- getResolvedVirtualModuleId(virtualFileId)
+ getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_APP_FILE)
);
if (appModule) {
server.moduleGraph.invalidateModule(appModule);
}
const storiesModule = server.moduleGraph.getModuleById(
- getResolvedVirtualModuleId(virtualStoriesFile)
+ getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)
);
if (storiesModule) {
server.moduleGraph.invalidateModule(storiesModule);
@@ -50,7 +44,7 @@ export function codeGeneratorPlugin(options: Options): Plugin {
// TODO maybe use the stories declaration in main
if (/\.stories\.([tj])sx?$/.test(path) || /\.mdx$/.test(path)) {
// We need to emit a change event to trigger HMR
- server.watcher.emit('change', virtualStoriesFile);
+ server.watcher.emit('change', SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE);
}
});
},
@@ -74,34 +68,34 @@ export function codeGeneratorPlugin(options: Options): Plugin {
iframeId = `${config.root}/iframe.html`;
},
resolveId(source) {
- if (source === virtualFileId) {
- return getResolvedVirtualModuleId(virtualFileId);
+ if (source === SB_VIRTUAL_FILES.VIRTUAL_APP_FILE) {
+ return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_APP_FILE);
}
if (source === iframePath) {
return iframeId;
}
- if (source === virtualStoriesFile) {
- return getResolvedVirtualModuleId(virtualStoriesFile);
+ if (source === SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE) {
+ return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE);
}
- if (source === virtualPreviewFile) {
- return getResolvedVirtualModuleId(virtualPreviewFile);
+ if (source === SB_VIRTUAL_FILES.VIRTUAL_PREVIEW_FILE) {
+ return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_PREVIEW_FILE);
}
- if (source === virtualAddonSetupFile) {
- return getResolvedVirtualModuleId(virtualAddonSetupFile);
+ if (source === SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE) {
+ return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE);
}
return undefined;
},
async load(id, config) {
- if (id === getResolvedVirtualModuleId(virtualStoriesFile)) {
+ if (id === getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)) {
return generateImportFnScriptCode(options);
}
- if (id === getResolvedVirtualModuleId(virtualAddonSetupFile)) {
+ if (id === getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE)) {
return generateAddonSetupCode();
}
- if (id === getResolvedVirtualModuleId(virtualFileId)) {
+ if (id === getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_APP_FILE)) {
return generateModernIframeScriptCode(options, projectRoot);
}
diff --git a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
index 9442291df2aa..cacea74ccaf2 100644
--- a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
@@ -6,7 +6,11 @@ import type { BuilderStats } from 'storybook/internal/types';
import slash from 'slash';
import type { Plugin } from 'vite';
-import { getResolvedVirtualModuleId } from '../utils/virtual-module';
+import {
+ SB_VIRTUAL_FILES,
+ getOriginalVirtualModuleId,
+ getResolvedVirtualModuleId,
+} from '../virtual-file-names';
/*
* Reason, Module are copied from chromatic types
@@ -37,12 +41,13 @@ function stripQueryParams(filePath: string): string {
/** We only care about user code, not node_modules, vite files, or (most) virtual files. */
function isUserCode(moduleName: string) {
return Boolean(
- moduleName &&
- !moduleName.startsWith('vite/') &&
- !moduleName.startsWith('\x00') &&
- !moduleName.startsWith('\u0000') &&
- moduleName !== 'react/jsx-runtime' &&
- !moduleName.match(/node_modules\//)
+ (moduleName &&
+ // keep Storybook's virtual files because they import the story files, so they are essential to the module graph
+ Object.values(SB_VIRTUAL_FILES).includes(getOriginalVirtualModuleId(moduleName))) ||
+ (!moduleName.startsWith('vite/') &&
+ !moduleName.startsWith('\0') &&
+ moduleName !== 'react/jsx-runtime' &&
+ !moduleName.match(/node_modules\//))
);
}
@@ -52,12 +57,17 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
/** Convert an absolute path name to a path relative to the vite root, with a starting `./` */
function normalize(filename: string) {
// Do not try to resolve virtual files
- if (
- filename.startsWith('/virtual:') ||
- filename.startsWith(getResolvedVirtualModuleId('/virtual:'))
- ) {
+ if (filename.startsWith('/virtual:')) {
return filename;
}
+ // ! Maintain backwards compatibility with the old virtual file names
+ // ! to ensure that the stats file doesn't change between the versions
+ // ! Turbosnap is also only compatible with the old virtual file names
+ // ! the old virtual file names did not start with the obligatory \0 character
+ if (Object.values(SB_VIRTUAL_FILES).includes(getOriginalVirtualModuleId(filename))) {
+ return getOriginalVirtualModuleId(filename);
+ }
+
// Otherwise, we need them in the format `./path/to/file.js`.
else {
const relativePath = relative(workingDir, stripQueryParams(filename));
@@ -87,25 +97,28 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
// We want this to run after the vite build plugins (https://vitejs.dev/guide/api-plugin.html#plugin-ordering)
enforce: 'post',
moduleParsed: function (mod) {
- if (isUserCode(mod.id)) {
- mod.importedIds
- .concat(mod.dynamicallyImportedIds)
- .filter((name) => isUserCode(name))
- .forEach((depIdUnsafe) => {
- const depId = normalize(depIdUnsafe);
- if (statsMap.has(depId)) {
- const m = statsMap.get(depId);
- if (m) {
- m.reasons = (m.reasons ?? [])
- .concat(createReasons([mod.id]))
- .filter((r) => r.moduleName !== depId);
- statsMap.set(depId, m);
- }
- } else {
- statsMap.set(depId, createStatsMapModule(depId, [mod.id]));
- }
- });
+ if (!isUserCode(mod.id)) {
+ return;
}
+ mod.importedIds
+ .concat(mod.dynamicallyImportedIds)
+ .filter((name) => isUserCode(name))
+ .forEach((depIdUnsafe) => {
+ const depId = normalize(depIdUnsafe);
+ console.log('LOG: normalization', { depIdUnsafe, depId });
+ if (!statsMap.has(depId)) {
+ statsMap.set(depId, createStatsMapModule(depId, [mod.id]));
+ return;
+ }
+ const m = statsMap.get(depId);
+ if (!m) {
+ return;
+ }
+ m.reasons = (m.reasons ?? [])
+ .concat(createReasons([mod.id]))
+ .filter((r) => r.moduleName !== depId);
+ statsMap.set(depId, m);
+ });
},
storybookGetStats() {
diff --git a/code/builders/builder-vite/src/utils/virtual-module.ts b/code/builders/builder-vite/src/utils/virtual-module.ts
deleted file mode 100644
index 6f72ce19d650..000000000000
--- a/code/builders/builder-vite/src/utils/virtual-module.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function getResolvedVirtualModuleId(virtualModuleId: string) {
- return `\0${virtualModuleId}`;
-}
diff --git a/code/builders/builder-vite/src/virtual-file-names.ts b/code/builders/builder-vite/src/virtual-file-names.ts
index 0da0c5517dec..c38cb7322db6 100644
--- a/code/builders/builder-vite/src/virtual-file-names.ts
+++ b/code/builders/builder-vite/src/virtual-file-names.ts
@@ -1,4 +1,14 @@
-export const virtualFileId = '/virtual:/@storybook/builder-vite/vite-app.js';
-export const virtualStoriesFile = '/virtual:/@storybook/builder-vite/storybook-stories.js';
-export const virtualPreviewFile = '/virtual:/@storybook/builder-vite/preview-entry.js';
-export const virtualAddonSetupFile = '/virtual:/@storybook/builder-vite/setup-addons.js';
+export const SB_VIRTUAL_FILES = {
+ VIRTUAL_APP_FILE: '/virtual:/@storybook/builder-vite/vite-app.js',
+ VIRTUAL_STORIES_FILE: '/virtual:/@storybook/builder-vite/storybook-stories.js',
+ VIRTUAL_PREVIEW_FILE: '/virtual:/@storybook/builder-vite/preview-entry.js',
+ VIRTUAL_ADDON_SETUP_FILE: '/virtual:/@storybook/builder-vite/setup-addons.js',
+};
+
+export function getResolvedVirtualModuleId(virtualModuleId: string) {
+ return `\0${virtualModuleId}`;
+}
+
+export function getOriginalVirtualModuleId(resolvedVirtualModuleId: string) {
+ return resolvedVirtualModuleId.slice(1);
+}
diff --git a/preview-stats-new-ids.json b/preview-stats-new-ids.json
new file mode 100644
index 000000000000..9bc467c67f5b
--- /dev/null
+++ b/preview-stats-new-ids.json
@@ -0,0 +1,2914 @@
+{
+ "modules": [
+ {
+ "id": "./iframe.html",
+ "name": "./iframe.html",
+ "reasons": [
+ {
+ "moduleName": "./iframe.html"
+ }
+ ]
+ },
+ {
+ "id": "./sb-preview/runtime.js",
+ "name": "./sb-preview/runtime.js",
+ "reasons": [
+ {
+ "moduleName": "./iframe.html"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Button.jsx",
+ "name": "./renderers/react/template/components/Button.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Form.jsx",
+ "name": "./renderers/react/template/components/Form.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Html.jsx",
+ "name": "./renderers/react/template/components/Html.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./renderers/react/template/components/Pre.jsx",
+ "name": "./renderers/react/template/components/Pre.jsx",
+ "reasons": [
+ {
+ "moduleName": "./renderers/react/template/components/index.js"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/mocks/index.ts",
+ "name": "./addons/interactions/src/mocks/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/Interaction.tsx",
+ "name": "./addons/interactions/src/components/Interaction.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/Subnav.stories.tsx",
+ "name": "./addons/interactions/src/components/Subnav.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/brand/StorybookIcon.tsx",
+ "name": "./core/src/components/brand/StorybookIcon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/brand/StorybookIcon.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/controls/src/SaveStory.tsx",
+ "name": "./addons/controls/src/SaveStory.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/controls/src/SaveStory.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/brand/StorybookLogo.tsx",
+ "name": "./core/src/components/brand/StorybookLogo.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/brand/StorybookLogo.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/index.ts",
+ "name": "./lib/blocks/src/components/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./.storybook/preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/mdx.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./.storybook/isChromatic.ts",
+ "name": "./.storybook/isChromatic.ts",
+ "reasons": [
+ {
+ "moduleName": "./.storybook/preview.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/InteractionsPanel.tsx",
+ "name": "./addons/interactions/src/components/InteractionsPanel.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/MatcherResult.tsx",
+ "name": "./addons/interactions/src/components/MatcherResult.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/MatcherResult.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/StatusIcon.tsx",
+ "name": "./addons/interactions/src/components/StatusIcon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/StatusIcon.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/MethodCall.tsx",
+ "name": "./addons/interactions/src/components/MethodCall.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/MethodCall.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/MatcherResult.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/StatusBadge.tsx",
+ "name": "./addons/interactions/src/components/StatusBadge.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/StatusBadge.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/Subnav.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/ActionBar/ActionBar.tsx",
+ "name": "./core/src/components/components/ActionBar/ActionBar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/ActionBar/ActionBar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/Subnav.tsx",
+ "name": "./addons/interactions/src/components/Subnav.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Subnav.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/form/index.tsx",
+ "name": "./core/src/components/components/form/index.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Button/Button.deprecated.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Button/Button.tsx",
+ "name": "./core/src/components/components/Button/Button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Button/Button.deprecated.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/Button/Button.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/form/index.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/IconButton/IconButton.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/Button/Button.tsx",
+ "name": "./addons/onboarding/src/components/Button/Button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/Button/Button.stories.tsx"
+ },
+ {
+ "moduleName": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Badge/Badge.tsx",
+ "name": "./core/src/components/components/Badge/Badge.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Badge/Badge.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/Confetti/Confetti.tsx",
+ "name": "./addons/onboarding/src/components/Confetti/Confetti.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/Confetti/Confetti.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/docs/template/stories/docs2/button.stories.ts",
+ "name": "./addons/docs/template/stories/docs2/button.stories.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/docs/template/stories/docs2/MetaOf.mdx"
+ },
+ {
+ "moduleName": "./addons/docs/template/stories/docs2/MetaOfNamed.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/brand/SideBySide.tsx",
+ "name": "./core/src/components/brand/SideBySide.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/brand/colorpalette.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Button/Button.stories.tsx",
+ "name": "./core/src/components/components/Button/Button.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Button/Docs.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Unstyled.tsx",
+ "name": "./lib/blocks/src/blocks/Unstyled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Unstyled.mdx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/ErrorFormatter/ErrorFormatter.tsx",
+ "name": "./core/src/components/components/ErrorFormatter/ErrorFormatter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/ErrorFormatter/ErrorFormatter.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/HighlightElement/HighlightElement.tsx",
+ "name": "./addons/onboarding/src/components/HighlightElement/HighlightElement.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx",
+ "name": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/IconButton/IconButton.tsx",
+ "name": "./core/src/components/components/IconButton/IconButton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/IconButton/IconButton.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.styled.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Loader/Loader.tsx",
+ "name": "./core/src/components/components/Loader/Loader.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Loader/Loader.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/List.tsx",
+ "name": "./addons/onboarding/src/components/List/List.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/List.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx",
+ "name": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/List.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/features/SplashScreen/SplashScreen.tsx",
+ "name": "./addons/onboarding/src/features/SplashScreen/SplashScreen.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Modal/Modal.tsx",
+ "name": "./core/src/components/components/Modal/Modal.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/ScrollArea/ScrollArea.tsx",
+ "name": "./core/src/components/components/ScrollArea/ScrollArea.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/ScrollArea/ScrollArea.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/bar/bar.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/docs/template/stories/docs2/ResolvedReact.jsx",
+ "name": "./addons/docs/template/stories/docs2/ResolvedReact.jsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/docs/template/stories/docs2/ResolvedReact.mdx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/form/field/field.tsx",
+ "name": "./core/src/components/components/form/field/field.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/form/form.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/form/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/form/input/input.tsx",
+ "name": "./core/src/components/components/form/input/input.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/form/form.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/form/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Zoom/Zoom.tsx",
+ "name": "./core/src/components/components/Zoom/Zoom.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Zoom/Zoom.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/icon/icon.tsx",
+ "name": "./core/src/components/components/icon/icon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/icon/icon.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/typography/link/link.tsx",
+ "name": "./core/src/components/components/typography/link/link.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/placeholder/placeholder.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/typography/link/link.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipMessage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/placeholder/placeholder.tsx",
+ "name": "./core/src/components/components/placeholder/placeholder.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/placeholder/placeholder.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/spaced/Spaced.tsx",
+ "name": "./core/src/components/components/spaced/Spaced.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/spaced/Spaced.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/EmptyTabContent.tsx",
+ "name": "./core/src/components/components/tabs/EmptyTabContent.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/EmptyTabContent.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/tabs.tsx",
+ "name": "./core/src/components/components/tabs/tabs.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/Tooltip.tsx",
+ "name": "./core/src/components/components/tooltip/Tooltip.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/Tooltip.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/WithTooltip.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/ListItem.tsx",
+ "name": "./core/src/components/components/tooltip/ListItem.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/ListItem.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/TooltipLinkList.tsx",
+ "name": "./core/src/components/components/tooltip/TooltipLinkList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/WithTooltip.tsx",
+ "name": "./core/src/components/components/tooltip/WithTooltip.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipNote.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipMessage.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/WithTooltip.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/assets/ellipse.png",
+ "name": "./core/src/components/components/tooltip/assets/ellipse.png",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/TooltipNote.tsx",
+ "name": "./core/src/components/components/tooltip/TooltipNote.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipNote.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tooltip/TooltipMessage.tsx",
+ "name": "./core/src/components/components/tooltip/TooltipMessage.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tooltip/TooltipMessage.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tooltip/WithTooltip.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx",
+ "name": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/typography/DocumentWrapper.tsx",
+ "name": "./core/src/components/components/typography/DocumentWrapper.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/typography/DocumentWrapper.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/layout/Layout.tsx",
+ "name": "./core/src/manager/components/layout/Layout.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/layout/LayoutProvider.tsx",
+ "name": "./core/src/manager/components/layout/LayoutProvider.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/panel/Panel.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/about/MobileAbout.tsx",
+ "name": "./core/src/manager/components/mobile/about/MobileAbout.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/notifications/NotificationItem.tsx",
+ "name": "./core/src/manager/components/notifications/NotificationItem.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationItem.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/notifications/NotificationItem.stories.tsx",
+ "name": "./core/src/manager/components/notifications/NotificationItem.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/notifications/NotificationList.tsx",
+ "name": "./core/src/manager/components/notifications/NotificationList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/container/Notifications.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/preview/Iframe.tsx",
+ "name": "./core/src/manager/components/preview/Iframe.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/preview/Iframe.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/defaultShortcuts.tsx",
+ "name": "./core/src/manager/settings/defaultShortcuts.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/panel/Panel.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/settings/shortcuts.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/panel/Panel.tsx",
+ "name": "./core/src/manager/components/panel/Panel.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/panel/Panel.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Explorer.tsx",
+ "name": "./core/src/manager/components/sidebar/Explorer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/IconSymbols.tsx",
+ "name": "./core/src/manager/components/sidebar/IconSymbols.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/IconSymbols.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/utils/status.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Refs.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/Refs.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/mockdata.ts",
+ "name": "./core/src/manager/components/sidebar/mockdata.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchList.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FilterToggle.tsx",
+ "name": "./core/src/manager/components/sidebar/FilterToggle.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FilterToggle.stories.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SidebarBottom.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchModal.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchModal.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Heading.tsx",
+ "name": "./core/src/manager/components/sidebar/Heading.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Heading.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Search.tsx",
+ "name": "./core/src/manager/components/sidebar/Search.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/SearchResults.tsx",
+ "name": "./core/src/manager/components/sidebar/SearchResults.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/SearchResults.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/SearchResults.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Sidebar.tsx",
+ "name": "./core/src/manager/components/sidebar/Sidebar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/utils/tree.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/mockdata.large.ts",
+ "name": "./core/src/manager/components/sidebar/mockdata.large.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/container/Menu.tsx",
+ "name": "./core/src/manager/container/Menu.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/container/Menu.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Menu.tsx",
+ "name": "./core/src/manager/components/sidebar/Menu.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Heading.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/utils/tree.ts",
+ "name": "./core/src/manager/utils/tree.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useHighlighted.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/utils/status.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/StatusContext.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useExpanded.ts"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Heading.stories.tsx",
+ "name": "./core/src/manager/components/sidebar/Heading.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Refs.tsx",
+ "name": "./core/src/manager/components/sidebar/Refs.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/SidebarBottom.tsx",
+ "name": "./core/src/manager/components/sidebar/SidebarBottom.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SidebarBottom.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Tree.tsx",
+ "name": "./core/src/manager/components/sidebar/Tree.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/upgrade/UpgradeBlock.tsx",
+ "name": "./core/src/manager/components/upgrade/UpgradeBlock.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/settings/About.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/HighlightStyles.tsx",
+ "name": "./core/src/manager/components/sidebar/HighlightStyles.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/TreeNode.tsx",
+ "name": "./core/src/manager/components/sidebar/TreeNode.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/shortcuts.tsx",
+ "name": "./core/src/manager/settings/shortcuts.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/shortcuts.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/whats_new.tsx",
+ "name": "./core/src/manager/settings/whats_new.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/whats_new_footer.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx",
+ "name": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/about.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/About.tsx",
+ "name": "./core/src/manager/settings/About.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/about.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/settings/SettingsFooter.tsx",
+ "name": "./core/src/manager/settings/SettingsFooter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/settings/SettingsFooter.stories.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/settings/shortcuts.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/template/stories/import.js",
+ "name": "./core/template/stories/import.js",
+ "reasons": [
+ {
+ "moduleName": "./core/template/stories/interleavedExports.stories.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Anchor.tsx",
+ "name": "./lib/blocks/src/blocks/Anchor.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Anchor.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/EmptyBlock.tsx",
+ "name": "./lib/blocks/src/components/EmptyBlock.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/EmptyBlock.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Source.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/ArgTypes.tsx",
+ "name": "./lib/blocks/src/blocks/ArgTypes.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/Button.stories.tsx",
+ "name": "./lib/blocks/src/examples/Button.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/CanvasParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/CanvasParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/SourceParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/SourceParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Canvas.tsx",
+ "name": "./lib/blocks/src/blocks/Canvas.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Source.stories.tsx",
+ "name": "./lib/blocks/src/blocks/Source.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/IconGallery.tsx",
+ "name": "./lib/blocks/src/components/IconGallery.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/IconGallery.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Markdown.tsx",
+ "name": "./lib/blocks/src/blocks/Markdown.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Markdown.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Markdown.stories.tsx",
+ "name": "./lib/blocks/src/blocks/Markdown.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/DocsPage.tsx",
+ "name": "./lib/blocks/src/components/DocsPage.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Preview.stories.tsx",
+ "name": "./lib/blocks/src/components/Preview.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Source.stories.tsx",
+ "name": "./lib/blocks/src/components/Source.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ControlsParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ControlsParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/EmptyArgTypes.stories.tsx",
+ "name": "./lib/blocks/src/examples/EmptyArgTypes.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Controls.tsx",
+ "name": "./lib/blocks/src/blocks/Controls.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/Button.tsx",
+ "name": "./lib/blocks/src/examples/Button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonNoAutodocs.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonReadonly.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonSomeAutodocs.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/Button.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Description.tsx",
+ "name": "./lib/blocks/src/blocks/Description.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Source.tsx",
+ "name": "./lib/blocks/src/components/Source.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Source.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/Markdown-content.md",
+ "name": "./lib/blocks/src/examples/Markdown-content.md",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Markdown.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Title.tsx",
+ "name": "./lib/blocks/src/components/Title.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Title.stories.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/DocsPage.tsx",
+ "name": "./lib/blocks/src/blocks/DocsPage.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Preview.tsx",
+ "name": "./lib/blocks/src/components/Preview.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Story.tsx",
+ "name": "./lib/blocks/src/components/Story.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Typeset.tsx",
+ "name": "./lib/blocks/src/components/Typeset.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Typeset.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/StoriesParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/StoriesParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Primary.tsx",
+ "name": "./lib/blocks/src/blocks/Primary.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Source.tsx",
+ "name": "./lib/blocks/src/blocks/Source.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/SourceContainer.tsx",
+ "name": "./lib/blocks/src/blocks/SourceContainer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Stories.tsx",
+ "name": "./lib/blocks/src/blocks/Stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Boolean.tsx",
+ "name": "./lib/blocks/src/controls/Boolean.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Boolean.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Color.tsx",
+ "name": "./lib/blocks/src/controls/Color.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Color.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Files.tsx",
+ "name": "./lib/blocks/src/controls/Files.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Files.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Story.stories.tsx",
+ "name": "./lib/blocks/src/components/Story.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/StoryParameters.stories.tsx",
+ "name": "./lib/blocks/src/examples/StoryParameters.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Story.tsx",
+ "name": "./lib/blocks/src/blocks/Story.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Date.tsx",
+ "name": "./lib/blocks/src/controls/Date.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Date.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx",
+ "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Subtitle.tsx",
+ "name": "./lib/blocks/src/blocks/Subtitle.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Number.tsx",
+ "name": "./lib/blocks/src/controls/Number.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Number.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Range.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Title.tsx",
+ "name": "./lib/blocks/src/blocks/Title.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Object.tsx",
+ "name": "./lib/blocks/src/controls/Object.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Object.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Range.tsx",
+ "name": "./lib/blocks/src/controls/Range.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Range.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/SectionRow.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/SectionRow.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/Text.tsx",
+ "name": "./lib/blocks/src/controls/Text.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Text.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Options.tsx",
+ "name": "./lib/blocks/src/controls/options/Options.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/CheckOptions.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/RadioOptions.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/SelectOptions.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ArgTypesParameters.tsx",
+ "name": "./lib/blocks/src/examples/ArgTypesParameters.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ColorPalette.tsx",
+ "name": "./lib/blocks/src/components/ColorPalette.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ColorPalette.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/ControlsParameters.tsx",
+ "name": "./lib/blocks/src/examples/ControlsParameters.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/ControlsParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/EmptyExample.tsx",
+ "name": "./lib/blocks/src/examples/EmptyExample.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/CanvasParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/DocsPageParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/SourceParameters.stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/examples/StoriesParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/examples/SimpleSizeTest.tsx",
+ "name": "./lib/blocks/src/examples/SimpleSizeTest.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/examples/StoryParameters.stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/index.ts",
+ "name": "./lib/blocks/src/components/ArgsTable/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/IFrame.tsx",
+ "name": "./lib/blocks/src/components/IFrame.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/index.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/utils.ts",
+ "name": "./addons/interactions/src/utils.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/Interaction.tsx"
+ },
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/components/EmptyState.tsx",
+ "name": "./addons/interactions/src/components/EmptyState.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/shared/animation.ts",
+ "name": "./core/src/components/components/shared/animation.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Loader/Loader.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx",
+ "name": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/List.styled.tsx",
+ "name": "./addons/onboarding/src/components/List/List.styled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/List.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./addons/onboarding/src/components/List/ListItem/ListItem.styled.tsx",
+ "name": "./addons/onboarding/src/components/List/ListItem/ListItem.styled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Modal/Modal.styled.tsx",
+ "name": "./core/src/components/components/Modal/Modal.styled.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Modal/Modal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Zoom/ZoomElement.tsx",
+ "name": "./core/src/components/components/Zoom/ZoomElement.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Zoom/Zoom.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/Zoom/ZoomIFrame.tsx",
+ "name": "./core/src/components/components/Zoom/ZoomIFrame.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/Zoom/Zoom.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx",
+ "name": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/syntaxhighlighter/formatter.ts",
+ "name": "./core/src/components/components/syntaxhighlighter/formatter.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/bar/bar.tsx",
+ "name": "./core/src/components/components/bar/bar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/bar/button.tsx",
+ "name": "./core/src/components/components/bar/button.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ },
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/tabs.helpers.tsx",
+ "name": "./core/src/components/components/tabs/tabs.helpers.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/components/components/tabs/tabs.hooks.tsx",
+ "name": "./core/src/components/components/tabs/tabs.hooks.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/components/components/tabs/tabs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/constants.ts",
+ "name": "./core/src/manager/constants.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/LayoutProvider.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/notifications/NotificationList.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/upgrade/UpgradeBlock.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/hooks/useMedia.tsx",
+ "name": "./core/src/manager/components/hooks/useMedia.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/LayoutProvider.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx",
+ "name": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/container/Notifications.tsx",
+ "name": "./core/src/manager/container/Notifications.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/layout/useDragging.ts",
+ "name": "./core/src/manager/components/layout/useDragging.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/layout/Layout.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileList.tsx",
+ "name": "./core/src/manager/components/sidebar/FileList.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/useHighlighted.ts",
+ "name": "./core/src/manager/components/sidebar/useHighlighted.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/hooks/useMeasure.tsx",
+ "name": "./core/src/manager/hooks/useMeasure.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FIleSearchList.utils.tsx",
+ "name": "./core/src/manager/components/sidebar/FIleSearchList.utils.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Brand.tsx",
+ "name": "./core/src/manager/components/sidebar/Brand.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Heading.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/useLastViewed.ts",
+ "name": "./core/src/manager/components/sidebar/useLastViewed.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/keybinding.ts",
+ "name": "./core/src/manager/keybinding.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useHighlighted.ts"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/useExpanded.ts"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/utils/status.tsx",
+ "name": "./core/src/manager/utils/status.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/StatusButton.tsx",
+ "name": "./core/src/manager/components/sidebar/StatusButton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/types.ts",
+ "name": "./core/src/manager/components/sidebar/types.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx",
+ "name": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/RefBlocks.tsx",
+ "name": "./core/src/manager/components/sidebar/RefBlocks.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/RefIndicator.tsx",
+ "name": "./core/src/manager/components/sidebar/RefIndicator.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/components/CollapseIcon.tsx",
+ "name": "./core/src/manager/components/sidebar/components/CollapseIcon.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/TreeNode.tsx"
+ },
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/StatusContext.tsx",
+ "name": "./core/src/manager/components/sidebar/StatusContext.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/useExpanded.ts",
+ "name": "./core/src/manager/components/sidebar/useExpanded.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useOf.ts",
+ "name": "./lib/blocks/src/blocks/useOf.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Description.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subtitle.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Title.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/utils.ts",
+ "name": "./lib/blocks/src/blocks/utils.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/BlockBackgroundStyles.tsx",
+ "name": "./lib/blocks/src/components/BlockBackgroundStyles.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/IconGallery.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Typeset.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/ColorPalette.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/mdx.tsx",
+ "name": "./lib/blocks/src/blocks/mdx.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Markdown.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Heading.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Subheading.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/DocsContext.ts",
+ "name": "./lib/blocks/src/blocks/DocsContext.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Source.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/useOf.ts"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/mdx.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useArgs.ts",
+ "name": "./lib/blocks/src/blocks/useArgs.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useGlobals.ts",
+ "name": "./lib/blocks/src/blocks/useGlobals.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/Toolbar.tsx",
+ "name": "./lib/blocks/src/components/Toolbar.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ZoomContext.tsx",
+ "name": "./lib/blocks/src/components/ZoomContext.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/Preview.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/components/Story.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/DocsStory.tsx",
+ "name": "./lib/blocks/src/blocks/DocsStory.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Heading.tsx",
+ "name": "./lib/blocks/src/blocks/Heading.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/helpers.ts",
+ "name": "./lib/blocks/src/controls/helpers.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Boolean.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Files.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Color.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Number.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Date.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Object.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Range.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/Text.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Checkbox.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Radio.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Select.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/useStory.ts",
+ "name": "./lib/blocks/src/blocks/useStory.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/Story.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/Object.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/ArgValue.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/ArgValue.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/Empty.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/Empty.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/Skeleton.tsx",
+ "name": "./lib/blocks/src/components/ArgsTable/Skeleton.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Checkbox.tsx",
+ "name": "./lib/blocks/src/controls/options/Checkbox.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Radio.tsx",
+ "name": "./lib/blocks/src/controls/options/Radio.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/Select.tsx",
+ "name": "./lib/blocks/src/controls/options/Select.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/components/ArgsTable/types.ts",
+ "name": "./lib/blocks/src/components/ArgsTable/types.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
+ }
+ ]
+ },
+ {
+ "id": "./addons/interactions/src/constants.ts",
+ "name": "./addons/interactions/src/constants.ts",
+ "reasons": [
+ {
+ "moduleName": "./addons/interactions/src/components/EmptyState.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/Loader.tsx",
+ "name": "./core/src/manager/components/sidebar/Loader.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/RefBlocks.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/hooks/useDebounce.ts",
+ "name": "./core/src/manager/hooks/useDebounce.ts",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./core/src/manager/components/sidebar/FileSearchModal.utils.tsx",
+ "name": "./core/src/manager/components/sidebar/FileSearchModal.utils.tsx",
+ "reasons": [
+ {
+ "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/blocks/Subheading.tsx",
+ "name": "./lib/blocks/src/blocks/Subheading.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/index.tsx",
+ "name": "./lib/blocks/src/controls/index.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts",
+ "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/helpers.ts",
+ "name": "./lib/blocks/src/controls/options/helpers.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Checkbox.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Radio.tsx"
+ },
+ {
+ "moduleName": "./lib/blocks/src/controls/options/Select.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/types.ts",
+ "name": "./lib/blocks/src/controls/types.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ },
+ {
+ "id": "./lib/blocks/src/controls/options/index.ts",
+ "name": "./lib/blocks/src/controls/options/index.ts",
+ "reasons": [
+ {
+ "moduleName": "./lib/blocks/src/controls/index.tsx"
+ }
+ ]
+ }
+ ]
+}
\ No newline at end of file
From 298399351af83b00a90b72b3fd8d63cfcbfa6b4a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Fri, 6 Sep 2024 16:00:21 +0200
Subject: [PATCH 047/213] cleanup
---
preview-stats-new-ids.json | 2914 ------------------------------------
1 file changed, 2914 deletions(-)
delete mode 100644 preview-stats-new-ids.json
diff --git a/preview-stats-new-ids.json b/preview-stats-new-ids.json
deleted file mode 100644
index 9bc467c67f5b..000000000000
--- a/preview-stats-new-ids.json
+++ /dev/null
@@ -1,2914 +0,0 @@
-{
- "modules": [
- {
- "id": "./iframe.html",
- "name": "./iframe.html",
- "reasons": [
- {
- "moduleName": "./iframe.html"
- }
- ]
- },
- {
- "id": "./sb-preview/runtime.js",
- "name": "./sb-preview/runtime.js",
- "reasons": [
- {
- "moduleName": "./iframe.html"
- }
- ]
- },
- {
- "id": "./renderers/react/template/components/Button.jsx",
- "name": "./renderers/react/template/components/Button.jsx",
- "reasons": [
- {
- "moduleName": "./renderers/react/template/components/index.js"
- }
- ]
- },
- {
- "id": "./renderers/react/template/components/Form.jsx",
- "name": "./renderers/react/template/components/Form.jsx",
- "reasons": [
- {
- "moduleName": "./renderers/react/template/components/index.js"
- }
- ]
- },
- {
- "id": "./renderers/react/template/components/Html.jsx",
- "name": "./renderers/react/template/components/Html.jsx",
- "reasons": [
- {
- "moduleName": "./renderers/react/template/components/index.js"
- }
- ]
- },
- {
- "id": "./renderers/react/template/components/Pre.jsx",
- "name": "./renderers/react/template/components/Pre.jsx",
- "reasons": [
- {
- "moduleName": "./renderers/react/template/components/index.js"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/mocks/index.ts",
- "name": "./addons/interactions/src/mocks/index.ts",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/Interaction.tsx",
- "name": "./addons/interactions/src/components/Interaction.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/Subnav.stories.tsx",
- "name": "./addons/interactions/src/components/Subnav.stories.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/Interaction.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/brand/StorybookIcon.tsx",
- "name": "./core/src/components/brand/StorybookIcon.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/brand/StorybookIcon.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/controls/src/SaveStory.tsx",
- "name": "./addons/controls/src/SaveStory.tsx",
- "reasons": [
- {
- "moduleName": "./addons/controls/src/SaveStory.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/brand/StorybookLogo.tsx",
- "name": "./core/src/components/brand/StorybookLogo.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/brand/StorybookLogo.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/index.ts",
- "name": "./lib/blocks/src/components/index.ts",
- "reasons": [
- {
- "moduleName": "./.storybook/preview.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Preview.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Subtitle.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Story.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Title.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/mdx.tsx"
- }
- ]
- },
- {
- "id": "./.storybook/isChromatic.ts",
- "name": "./.storybook/isChromatic.ts",
- "reasons": [
- {
- "moduleName": "./.storybook/preview.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/InteractionsPanel.tsx",
- "name": "./addons/interactions/src/components/InteractionsPanel.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/MatcherResult.tsx",
- "name": "./addons/interactions/src/components/MatcherResult.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/MatcherResult.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/Interaction.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/StatusIcon.tsx",
- "name": "./addons/interactions/src/components/StatusIcon.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/StatusIcon.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/Interaction.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/MethodCall.tsx",
- "name": "./addons/interactions/src/components/MethodCall.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/MethodCall.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/Interaction.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/MatcherResult.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/StatusBadge.tsx",
- "name": "./addons/interactions/src/components/StatusBadge.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/StatusBadge.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/Subnav.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/ActionBar/ActionBar.tsx",
- "name": "./core/src/components/components/ActionBar/ActionBar.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/ActionBar/ActionBar.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/Subnav.tsx",
- "name": "./addons/interactions/src/components/Subnav.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/Subnav.stories.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/form/index.tsx",
- "name": "./core/src/components/components/form/index.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Button/Button.deprecated.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Button/Button.tsx",
- "name": "./core/src/components/components/Button/Button.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Button/Button.deprecated.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/Button/Button.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/Modal/Modal.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/form/index.tsx"
- },
- {
- "moduleName": "./core/src/components/components/IconButton/IconButton.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/components/Button/Button.tsx",
- "name": "./addons/onboarding/src/components/Button/Button.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/components/Button/Button.stories.tsx"
- },
- {
- "moduleName": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Badge/Badge.tsx",
- "name": "./core/src/components/components/Badge/Badge.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Badge/Badge.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/components/Confetti/Confetti.tsx",
- "name": "./addons/onboarding/src/components/Confetti/Confetti.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/components/Confetti/Confetti.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/docs/template/stories/docs2/button.stories.ts",
- "name": "./addons/docs/template/stories/docs2/button.stories.ts",
- "reasons": [
- {
- "moduleName": "./addons/docs/template/stories/docs2/MetaOf.mdx"
- },
- {
- "moduleName": "./addons/docs/template/stories/docs2/MetaOfNamed.mdx"
- }
- ]
- },
- {
- "id": "./core/src/components/brand/SideBySide.tsx",
- "name": "./core/src/components/brand/SideBySide.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/brand/colorpalette.mdx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Button/Button.stories.tsx",
- "name": "./core/src/components/components/Button/Button.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Button/Docs.mdx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Unstyled.tsx",
- "name": "./lib/blocks/src/blocks/Unstyled.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Unstyled.mdx"
- },
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/ErrorFormatter/ErrorFormatter.tsx",
- "name": "./core/src/components/components/ErrorFormatter/ErrorFormatter.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/ErrorFormatter/ErrorFormatter.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/components/HighlightElement/HighlightElement.tsx",
- "name": "./addons/onboarding/src/components/HighlightElement/HighlightElement.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx",
- "name": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/IconButton/IconButton.tsx",
- "name": "./core/src/components/components/IconButton/IconButton.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/IconButton/IconButton.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tabs/tabs.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/Modal/Modal.styled.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Loader/Loader.tsx",
- "name": "./core/src/components/components/Loader/Loader.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Loader/Loader.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/components/List/List.tsx",
- "name": "./addons/onboarding/src/components/List/List.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/components/List/List.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx",
- "name": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/components/List/List.stories.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/features/SplashScreen/SplashScreen.tsx",
- "name": "./addons/onboarding/src/features/SplashScreen/SplashScreen.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Modal/Modal.tsx",
- "name": "./core/src/components/components/Modal/Modal.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Modal/Modal.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/ScrollArea/ScrollArea.tsx",
- "name": "./core/src/components/components/ScrollArea/ScrollArea.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/ScrollArea/ScrollArea.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/bar/bar.tsx"
- },
- {
- "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx"
- }
- ]
- },
- {
- "id": "./addons/docs/template/stories/docs2/ResolvedReact.jsx",
- "name": "./addons/docs/template/stories/docs2/ResolvedReact.jsx",
- "reasons": [
- {
- "moduleName": "./addons/docs/template/stories/docs2/ResolvedReact.mdx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/form/field/field.tsx",
- "name": "./core/src/components/components/form/field/field.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/form/form.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/form/index.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/form/input/input.tsx",
- "name": "./core/src/components/components/form/input/input.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/form/form.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/form/index.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Zoom/Zoom.tsx",
- "name": "./core/src/components/components/Zoom/Zoom.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Zoom/Zoom.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/icon/icon.tsx",
- "name": "./core/src/components/components/icon/icon.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/icon/icon.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/typography/link/link.tsx",
- "name": "./core/src/components/components/typography/link/link.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/placeholder/placeholder.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/typography/link/link.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipMessage.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/placeholder/placeholder.tsx",
- "name": "./core/src/components/components/placeholder/placeholder.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/placeholder/placeholder.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/spaced/Spaced.tsx",
- "name": "./core/src/components/components/spaced/Spaced.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/spaced/Spaced.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tabs/EmptyTabContent.tsx",
- "name": "./core/src/components/components/tabs/EmptyTabContent.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tabs/EmptyTabContent.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tabs/tabs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tabs/tabs.tsx",
- "name": "./core/src/components/components/tabs/tabs.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tabs/tabs.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tooltip/Tooltip.tsx",
- "name": "./core/src/components/components/tooltip/Tooltip.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tooltip/Tooltip.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tooltip/WithTooltip.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tooltip/ListItem.tsx",
- "name": "./core/src/components/components/tooltip/ListItem.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tooltip/ListItem.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tooltip/TooltipLinkList.tsx",
- "name": "./core/src/components/components/tooltip/TooltipLinkList.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tooltip/WithTooltip.tsx",
- "name": "./core/src/components/components/tooltip/WithTooltip.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipNote.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipMessage.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tooltip/WithTooltip.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tooltip/assets/ellipse.png",
- "name": "./core/src/components/components/tooltip/assets/ellipse.png",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipLinkList.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tooltip/TooltipNote.tsx",
- "name": "./core/src/components/components/tooltip/TooltipNote.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipNote.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tooltip/TooltipMessage.tsx",
- "name": "./core/src/components/components/tooltip/TooltipMessage.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tooltip/TooltipMessage.stories.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tooltip/WithTooltip.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx",
- "name": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/typography/DocumentWrapper.tsx",
- "name": "./core/src/components/components/typography/DocumentWrapper.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/typography/DocumentWrapper.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx",
- "name": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/layout/Layout.tsx",
- "name": "./core/src/manager/components/layout/Layout.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/layout/LayoutProvider.tsx",
- "name": "./core/src/manager/components/layout/LayoutProvider.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/layout/Layout.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/layout/Layout.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/panel/Panel.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Menu.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/mobile/about/MobileAbout.tsx",
- "name": "./core/src/manager/components/mobile/about/MobileAbout.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/notifications/NotificationItem.tsx",
- "name": "./core/src/manager/components/notifications/NotificationItem.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/notifications/NotificationItem.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/notifications/NotificationList.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/notifications/NotificationItem.stories.tsx",
- "name": "./core/src/manager/components/notifications/NotificationItem.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/notifications/NotificationList.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/notifications/NotificationList.tsx",
- "name": "./core/src/manager/components/notifications/NotificationList.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/notifications/NotificationList.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/container/Notifications.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx",
- "name": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/layout/Layout.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/preview/Iframe.tsx",
- "name": "./core/src/manager/components/preview/Iframe.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/preview/Iframe.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/settings/defaultShortcuts.tsx",
- "name": "./core/src/manager/settings/defaultShortcuts.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/panel/Panel.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/settings/shortcuts.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/panel/Panel.tsx",
- "name": "./core/src/manager/components/panel/Panel.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/panel/Panel.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx",
- "name": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Explorer.tsx",
- "name": "./core/src/manager/components/sidebar/Explorer.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/IconSymbols.tsx",
- "name": "./core/src/manager/components/sidebar/IconSymbols.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/IconSymbols.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/TreeNode.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- },
- {
- "moduleName": "./core/src/manager/utils/status.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Refs.stories.tsx",
- "name": "./core/src/manager/components/sidebar/Refs.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/mockdata.ts",
- "name": "./core/src/manager/components/sidebar/mockdata.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Explorer.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FileSearchList.tsx",
- "name": "./core/src/manager/components/sidebar/FileSearchList.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FilterToggle.tsx",
- "name": "./core/src/manager/components/sidebar/FilterToggle.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FilterToggle.stories.ts"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/SidebarBottom.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx",
- "name": "./core/src/manager/components/sidebar/FileSearchList.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FileSearchModal.tsx",
- "name": "./core/src/manager/components/sidebar/FileSearchModal.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Heading.tsx",
- "name": "./core/src/manager/components/sidebar/Heading.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Heading.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Search.tsx",
- "name": "./core/src/manager/components/sidebar/Search.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/SearchResults.tsx",
- "name": "./core/src/manager/components/sidebar/SearchResults.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/SearchResults.stories.tsx",
- "name": "./core/src/manager/components/sidebar/SearchResults.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Sidebar.tsx",
- "name": "./core/src/manager/components/sidebar/Sidebar.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/utils/tree.ts"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/mockdata.large.ts",
- "name": "./core/src/manager/components/sidebar/mockdata.large.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/container/Menu.tsx",
- "name": "./core/src/manager/container/Menu.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/container/Menu.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Menu.tsx",
- "name": "./core/src/manager/components/sidebar/Menu.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Menu.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Heading.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/utils/tree.ts",
- "name": "./core/src/manager/utils/tree.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/useHighlighted.ts"
- },
- {
- "moduleName": "./core/src/manager/utils/status.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/StatusContext.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/useExpanded.ts"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Heading.stories.tsx",
- "name": "./core/src/manager/components/sidebar/Heading.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Refs.tsx",
- "name": "./core/src/manager/components/sidebar/Refs.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/SidebarBottom.tsx",
- "name": "./core/src/manager/components/sidebar/SidebarBottom.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/SidebarBottom.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Tree.tsx",
- "name": "./core/src/manager/components/sidebar/Tree.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/upgrade/UpgradeBlock.tsx",
- "name": "./core/src/manager/components/upgrade/UpgradeBlock.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
- },
- {
- "moduleName": "./core/src/manager/settings/About.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/HighlightStyles.tsx",
- "name": "./core/src/manager/components/sidebar/HighlightStyles.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/TreeNode.tsx",
- "name": "./core/src/manager/components/sidebar/TreeNode.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/TreeNode.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/settings/shortcuts.tsx",
- "name": "./core/src/manager/settings/shortcuts.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/settings/shortcuts.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/settings/whats_new.tsx",
- "name": "./core/src/manager/settings/whats_new.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/settings/whats_new_footer.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx",
- "name": "./core/src/manager/components/upgrade/UpgradeBlock.stories.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/settings/about.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/settings/About.tsx",
- "name": "./core/src/manager/settings/About.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/settings/about.stories.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/settings/SettingsFooter.tsx",
- "name": "./core/src/manager/settings/SettingsFooter.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/settings/SettingsFooter.stories.tsx"
- },
- {
- "moduleName": "./core/src/manager/settings/shortcuts.tsx"
- }
- ]
- },
- {
- "id": "./core/template/stories/import.js",
- "name": "./core/template/stories/import.js",
- "reasons": [
- {
- "moduleName": "./core/template/stories/interleavedExports.stories.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Anchor.tsx",
- "name": "./lib/blocks/src/blocks/Anchor.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Anchor.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/EmptyBlock.tsx",
- "name": "./lib/blocks/src/components/EmptyBlock.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/EmptyBlock.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- },
- {
- "moduleName": "./lib/blocks/src/components/Source.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/ArgTypes.tsx",
- "name": "./lib/blocks/src/blocks/ArgTypes.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/ArgTypes.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/Button.stories.tsx",
- "name": "./lib/blocks/src/examples/Button.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Story.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Title.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/CanvasParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/CanvasParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/SourceParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/SourceParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Canvas.tsx",
- "name": "./lib/blocks/src/blocks/Canvas.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Source.stories.tsx",
- "name": "./lib/blocks/src/blocks/Source.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/IconGallery.tsx",
- "name": "./lib/blocks/src/components/IconGallery.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/IconGallery.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Markdown.tsx",
- "name": "./lib/blocks/src/blocks/Markdown.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Markdown.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Description.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Markdown.stories.tsx",
- "name": "./lib/blocks/src/blocks/Markdown.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/DocsPage.tsx",
- "name": "./lib/blocks/src/components/DocsPage.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Preview.stories.tsx",
- "name": "./lib/blocks/src/components/Preview.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Source.stories.tsx",
- "name": "./lib/blocks/src/components/Source.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/DocsPage.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ControlsParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/ControlsParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/EmptyArgTypes.stories.tsx",
- "name": "./lib/blocks/src/examples/EmptyArgTypes.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Controls.tsx",
- "name": "./lib/blocks/src/blocks/Controls.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/Button.tsx",
- "name": "./lib/blocks/src/examples/Button.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonNoAutodocs.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonReadonly.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonSomeAutodocs.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/Button.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx",
- "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx",
- "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx",
- "name": "./lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Description.tsx",
- "name": "./lib/blocks/src/blocks/Description.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Description.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Source.tsx",
- "name": "./lib/blocks/src/components/Source.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/Source.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Source.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/Markdown-content.md",
- "name": "./lib/blocks/src/examples/Markdown-content.md",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Markdown.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Title.tsx",
- "name": "./lib/blocks/src/components/Title.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/Title.stories.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/DocsPage.tsx",
- "name": "./lib/blocks/src/blocks/DocsPage.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Preview.tsx",
- "name": "./lib/blocks/src/components/Preview.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Story.tsx",
- "name": "./lib/blocks/src/components/Story.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/Preview.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Story.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- },
- {
- "moduleName": "./lib/blocks/src/components/Preview.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Typeset.tsx",
- "name": "./lib/blocks/src/components/Typeset.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/Typeset.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/StoriesParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/StoriesParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Primary.tsx",
- "name": "./lib/blocks/src/blocks/Primary.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Primary.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Source.tsx",
- "name": "./lib/blocks/src/blocks/Source.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/SourceContainer.tsx",
- "name": "./lib/blocks/src/blocks/SourceContainer.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Source.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Source.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Stories.tsx",
- "name": "./lib/blocks/src/blocks/Stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Stories.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Boolean.tsx",
- "name": "./lib/blocks/src/controls/Boolean.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Boolean.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Color.tsx",
- "name": "./lib/blocks/src/controls/Color.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Color.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Files.tsx",
- "name": "./lib/blocks/src/controls/Files.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Files.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Story.stories.tsx",
- "name": "./lib/blocks/src/components/Story.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/StoryParameters.stories.tsx",
- "name": "./lib/blocks/src/examples/StoryParameters.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Story.tsx",
- "name": "./lib/blocks/src/blocks/Story.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Story.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Date.tsx",
- "name": "./lib/blocks/src/controls/Date.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Date.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx",
- "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx",
- "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx",
- "name": "./lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Subtitle.tsx",
- "name": "./lib/blocks/src/blocks/Subtitle.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Subtitle.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Number.tsx",
- "name": "./lib/blocks/src/controls/Number.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Number.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Range.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Title.tsx",
- "name": "./lib/blocks/src/blocks/Title.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Title.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Object.tsx",
- "name": "./lib/blocks/src/controls/Object.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Object.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Range.tsx",
- "name": "./lib/blocks/src/controls/Range.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Range.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/SectionRow.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/SectionRow.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/Text.tsx",
- "name": "./lib/blocks/src/controls/Text.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Text.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/options/Options.tsx",
- "name": "./lib/blocks/src/controls/options/Options.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/options/CheckOptions.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/RadioOptions.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/SelectOptions.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ArgTypesParameters.tsx",
- "name": "./lib/blocks/src/examples/ArgTypesParameters.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/examples/ArgTypesWithSubcomponentsParameters.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ArgTypesParameters.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ColorPalette.tsx",
- "name": "./lib/blocks/src/components/ColorPalette.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ColorPalette.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/ControlsParameters.tsx",
- "name": "./lib/blocks/src/examples/ControlsParameters.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/examples/ControlsParameters.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/EmptyExample.tsx",
- "name": "./lib/blocks/src/examples/EmptyExample.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/examples/CanvasParameters.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/DocsPageParameters.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/SourceParameters.stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/examples/StoriesParameters.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/examples/SimpleSizeTest.tsx",
- "name": "./lib/blocks/src/examples/SimpleSizeTest.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/examples/StoryParameters.stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/index.ts",
- "name": "./lib/blocks/src/components/ArgsTable/index.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/IFrame.tsx",
- "name": "./lib/blocks/src/components/IFrame.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/index.ts"
- },
- {
- "moduleName": "./lib/blocks/src/components/Story.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/utils.ts",
- "name": "./addons/interactions/src/utils.ts",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/Interaction.tsx"
- },
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/components/EmptyState.tsx",
- "name": "./addons/interactions/src/components/EmptyState.tsx",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/InteractionsPanel.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/shared/animation.ts",
- "name": "./core/src/components/components/shared/animation.ts",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Loader/Loader.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx",
- "name": "./addons/onboarding/src/features/GuidedTour/Tooltip.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/features/GuidedTour/GuidedTour.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/components/List/List.styled.tsx",
- "name": "./addons/onboarding/src/components/List/List.styled.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/components/List/List.tsx"
- }
- ]
- },
- {
- "id": "./addons/onboarding/src/components/List/ListItem/ListItem.styled.tsx",
- "name": "./addons/onboarding/src/components/List/ListItem/ListItem.styled.tsx",
- "reasons": [
- {
- "moduleName": "./addons/onboarding/src/components/List/ListItem/ListItem.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Modal/Modal.styled.tsx",
- "name": "./core/src/components/components/Modal/Modal.styled.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Modal/Modal.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Zoom/ZoomElement.tsx",
- "name": "./core/src/components/components/Zoom/ZoomElement.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Zoom/Zoom.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/Zoom/ZoomIFrame.tsx",
- "name": "./core/src/components/components/Zoom/ZoomIFrame.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/Zoom/Zoom.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx",
- "name": "./core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
- },
- {
- "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/syntaxhighlighter/formatter.ts",
- "name": "./core/src/components/components/syntaxhighlighter/formatter.ts",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/bar/bar.tsx",
- "name": "./core/src/components/components/bar/bar.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tabs/tabs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/bar/button.tsx",
- "name": "./core/src/components/components/bar/button.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tabs/tabs.tsx"
- },
- {
- "moduleName": "./core/src/components/components/tabs/tabs.hooks.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tabs/tabs.helpers.tsx",
- "name": "./core/src/components/components/tabs/tabs.helpers.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tabs/tabs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/components/components/tabs/tabs.hooks.tsx",
- "name": "./core/src/components/components/tabs/tabs.hooks.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/components/components/tabs/tabs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/constants.ts",
- "name": "./core/src/manager/constants.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/layout/LayoutProvider.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/layout/Layout.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/notifications/NotificationList.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/about/MobileAbout.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/upgrade/UpgradeBlock.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/hooks/useMedia.tsx",
- "name": "./core/src/manager/components/hooks/useMedia.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/layout/LayoutProvider.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx",
- "name": "./core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx",
- "name": "./core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/mobile/navigation/MobileNavigation.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/container/Notifications.tsx",
- "name": "./core/src/manager/container/Notifications.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/layout/Layout.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/layout/useDragging.ts",
- "name": "./core/src/manager/components/layout/useDragging.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/layout/Layout.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FileList.tsx",
- "name": "./core/src/manager/components/sidebar/FileList.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchListSkeleton.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/useHighlighted.ts",
- "name": "./core/src/manager/components/sidebar/useHighlighted.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Explorer.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/hooks/useMeasure.tsx",
- "name": "./core/src/manager/hooks/useMeasure.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchModal.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FIleSearchList.utils.tsx",
- "name": "./core/src/manager/components/sidebar/FIleSearchList.utils.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/FileSearchList.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Brand.tsx",
- "name": "./core/src/manager/components/sidebar/Brand.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Heading.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/useLastViewed.ts",
- "name": "./core/src/manager/components/sidebar/useLastViewed.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Sidebar.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/keybinding.ts",
- "name": "./core/src/manager/keybinding.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/useHighlighted.ts"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/useExpanded.ts"
- }
- ]
- },
- {
- "id": "./core/src/manager/utils/status.tsx",
- "name": "./core/src/manager/utils/status.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/StatusButton.tsx",
- "name": "./core/src/manager/components/sidebar/StatusButton.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/types.ts",
- "name": "./core/src/manager/components/sidebar/types.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/SearchResults.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx",
- "name": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Search.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/RefBlocks.tsx",
- "name": "./core/src/manager/components/sidebar/RefBlocks.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/RefIndicator.tsx",
- "name": "./core/src/manager/components/sidebar/RefIndicator.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/components/CollapseIcon.tsx",
- "name": "./core/src/manager/components/sidebar/components/CollapseIcon.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Refs.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/TreeNode.tsx"
- },
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/StatusContext.tsx",
- "name": "./core/src/manager/components/sidebar/StatusContext.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/useExpanded.ts",
- "name": "./core/src/manager/components/sidebar/useExpanded.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/Tree.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/useOf.ts",
- "name": "./lib/blocks/src/blocks/useOf.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Description.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsPage.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Subtitle.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Title.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/utils.ts",
- "name": "./lib/blocks/src/blocks/utils.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/ArgTypes.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/BlockBackgroundStyles.tsx",
- "name": "./lib/blocks/src/components/BlockBackgroundStyles.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/IconGallery.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Typeset.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Preview.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/ColorPalette.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/mdx.tsx",
- "name": "./lib/blocks/src/blocks/mdx.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Markdown.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Heading.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Subheading.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/DocsContext.ts",
- "name": "./lib/blocks/src/blocks/DocsContext.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Canvas.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Source.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Story.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/useOf.ts"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/mdx.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/useArgs.ts",
- "name": "./lib/blocks/src/blocks/useArgs.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/useGlobals.ts",
- "name": "./lib/blocks/src/blocks/useGlobals.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Controls.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/Toolbar.tsx",
- "name": "./lib/blocks/src/components/Toolbar.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/Preview.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ZoomContext.tsx",
- "name": "./lib/blocks/src/components/ZoomContext.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/Preview.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/components/Story.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/DocsStory.tsx",
- "name": "./lib/blocks/src/blocks/DocsStory.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/blocks/Primary.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Heading.tsx",
- "name": "./lib/blocks/src/blocks/Heading.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Stories.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/helpers.ts",
- "name": "./lib/blocks/src/controls/helpers.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Boolean.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Files.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Color.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Number.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Date.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Object.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Range.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/Text.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/Checkbox.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/Radio.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/Select.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/useStory.ts",
- "name": "./lib/blocks/src/blocks/useStory.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/Story.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/Object.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/ArgValue.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/ArgValue.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgRow.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/Empty.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/Empty.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/Skeleton.tsx",
- "name": "./lib/blocks/src/components/ArgsTable/Skeleton.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgsTable.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/options/Checkbox.tsx",
- "name": "./lib/blocks/src/controls/options/Checkbox.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/options/Radio.tsx",
- "name": "./lib/blocks/src/controls/options/Radio.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/options/Select.tsx",
- "name": "./lib/blocks/src/controls/options/Select.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/options/Options.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/components/ArgsTable/types.ts",
- "name": "./lib/blocks/src/components/ArgsTable/types.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/index.ts"
- }
- ]
- },
- {
- "id": "./addons/interactions/src/constants.ts",
- "name": "./addons/interactions/src/constants.ts",
- "reasons": [
- {
- "moduleName": "./addons/interactions/src/components/EmptyState.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/Loader.tsx",
- "name": "./core/src/manager/components/sidebar/Loader.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/RefBlocks.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/hooks/useDebounce.ts",
- "name": "./core/src/manager/hooks/useDebounce.ts",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
- }
- ]
- },
- {
- "id": "./core/src/manager/components/sidebar/FileSearchModal.utils.tsx",
- "name": "./core/src/manager/components/sidebar/FileSearchModal.utils.tsx",
- "reasons": [
- {
- "moduleName": "./core/src/manager/components/sidebar/CreateNewStoryFileModal.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/blocks/Subheading.tsx",
- "name": "./lib/blocks/src/blocks/Subheading.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/blocks/DocsStory.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/index.tsx",
- "name": "./lib/blocks/src/controls/index.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/components/ArgsTable/ArgControl.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts",
- "name": "./lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/react-editable-json-tree/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/options/helpers.ts",
- "name": "./lib/blocks/src/controls/options/helpers.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/options/Checkbox.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/Radio.tsx"
- },
- {
- "moduleName": "./lib/blocks/src/controls/options/Select.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/types.ts",
- "name": "./lib/blocks/src/controls/types.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- },
- {
- "id": "./lib/blocks/src/controls/options/index.ts",
- "name": "./lib/blocks/src/controls/options/index.ts",
- "reasons": [
- {
- "moduleName": "./lib/blocks/src/controls/index.tsx"
- }
- ]
- }
- ]
-}
\ No newline at end of file
From d982babd5571d163856cf7e80babca6a835bb564 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Fri, 6 Sep 2024 10:13:38 -0600
Subject: [PATCH 048/213] Apply suggestions from code review
Co-authored-by: Yann Braga
---
docs/writing-tests/test-runner-with-vitest.mdx | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/docs/writing-tests/test-runner-with-vitest.mdx b/docs/writing-tests/test-runner-with-vitest.mdx
index c57c4cfde3f1..2b636ffd4a64 100644
--- a/docs/writing-tests/test-runner-with-vitest.mdx
+++ b/docs/writing-tests/test-runner-with-vitest.mdx
@@ -37,7 +37,7 @@ Before installing, make sure your project meets the following requirements:
- A Storybook framework that uses Vite (e.g. [`vue3-vite`](../get-started/frameworks/vue3-vite.mdx)), or the [Storybook Next.js framework](../get-started/frameworks/nextjs.mdx)
- Vitest ≥ 2.0
- If you're not using Vitest, it will be installed and configured for you when you install the addon
-- For Next.js projects, Next.js ≥ 14.0
+- For Next.js projects, Next.js ≥ 14.1
If you're not yet using Storybook 8.3, you can [upgrade your Storybook](../configure/upgrading.mdx) to the latest version:
@@ -152,7 +152,7 @@ import { setProjectAnnotations } from '@storybook/your-renderer';
import * as projectAnnotations from './preview';
-const project = setProjectAnnotations(projectAnnotations);
+const project = setProjectAnnotations([projectAnnotations]);
beforeAll(project.beforeAll);
```
@@ -222,6 +222,7 @@ export default defineWorkspace([
storybookScript: 'yarn storybook --ci',
}),
],
+ name: 'storybook',
test: {
// Glob pattern to find story files
include: ['src/**/*.stories.?(m)[jt]s?(x)'],
From bdfd3a5246fd90900236c920477491149944b736 Mon Sep 17 00:00:00 2001
From: Lucas Bancroft-Baer <1879691+elbeezi@users.noreply.github.com>
Date: Fri, 6 Sep 2024 19:42:14 -0400
Subject: [PATCH 049/213] Fix typo in setup.mdx
---
docs/get-started/setup.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/get-started/setup.mdx b/docs/get-started/setup.mdx
index 6794e694e35c..be35c28e11a2 100644
--- a/docs/get-started/setup.mdx
+++ b/docs/get-started/setup.mdx
@@ -77,4 +77,4 @@ Your project may have additional requirements before components can be rendered
## Load assets and resources
-We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories. Read our [documentation](../configure/integration/images-and-assets.mdx) to learn how to hosting static files with Storybook.
+We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories. Read our [documentation](../configure/integration/images-and-assets.mdx) to learn how to host static files with Storybook.
From 6f19cac299d25ab3d935124c341522d05cf18923 Mon Sep 17 00:00:00 2001
From: Michael Cebrian
Date: Sat, 7 Sep 2024 06:02:59 -0400
Subject: [PATCH 050/213] Fix Angular sourceDecorator to apply
excludeDecorators flag
---
.../frameworks/angular/src/client/docs/sourceDecorator.ts | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/code/frameworks/angular/src/client/docs/sourceDecorator.ts b/code/frameworks/angular/src/client/docs/sourceDecorator.ts
index cd3335c8efa2..cbd3f838b340 100644
--- a/code/frameworks/angular/src/client/docs/sourceDecorator.ts
+++ b/code/frameworks/angular/src/client/docs/sourceDecorator.ts
@@ -1,6 +1,6 @@
import { SNIPPET_RENDERED, SourceType } from 'storybook/internal/docs-tools';
import { addons, useEffect } from 'storybook/internal/preview-api';
-import { PartialStoryFn } from 'storybook/internal/types';
+import { ArgsStoryFn, PartialStoryFn } from 'storybook/internal/types';
import { computesTemplateSourceFromComponent } from '../../renderer';
import { AngularRenderer, StoryContext } from '../types';
@@ -32,9 +32,11 @@ export const sourceDecorator = (
return story;
}
const channel = addons.getChannel();
- const { props, template, userDefinedTemplate } = story;
-
+ const { props, userDefinedTemplate } = story;
const { component, argTypes, parameters } = context;
+ const template: string = parameters.docs?.source?.excludeDecorators
+ ? (context.originalStoryFn as ArgsStoryFn)(context.args, context).template
+ : story.template;
let toEmit: string;
From 06b30567926ebe7c09eb9901b1081800e4e715ad Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Mon, 9 Sep 2024 09:48:26 +0200
Subject: [PATCH 051/213] improve readability of case when matching internal
virtual files.
---
.../src/plugins/webpack-stats-plugin.ts | 20 ++++++++++++-------
1 file changed, 13 insertions(+), 7 deletions(-)
diff --git a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
index 701f7bd15b96..7e6f596e022f 100644
--- a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
@@ -40,14 +40,20 @@ function stripQueryParams(filePath: string): string {
/** We only care about user code, not node_modules, vite files, or (most) virtual files. */
function isUserCode(moduleName: string) {
+ if (!moduleName) {
+ return false;
+ }
+
+ // keep Storybook's virtual files because they import the story files, so they are essential to the module graph
+ if (Object.values(SB_VIRTUAL_FILES).includes(getOriginalVirtualModuleId(moduleName))) {
+ return true;
+ }
+
return Boolean(
- (moduleName &&
- // keep Storybook's virtual files because they import the story files, so they are essential to the module graph
- Object.values(SB_VIRTUAL_FILES).includes(getOriginalVirtualModuleId(moduleName))) ||
- (!moduleName.startsWith('vite/') &&
- !moduleName.startsWith('\0') &&
- moduleName !== 'react/jsx-runtime' &&
- !moduleName.match(/node_modules\//))
+ !moduleName.startsWith('vite/') &&
+ !moduleName.startsWith('\0') &&
+ moduleName !== 'react/jsx-runtime' &&
+ !moduleName.match(/node_modules\//)
);
}
From e672f1f2204d0f7769bab2d9270f30440ba5b170 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Mon, 9 Sep 2024 10:10:56 +0200
Subject: [PATCH 052/213] fix lock-file changes
---
code/yarn.lock | 257 +------------------------------------------------
1 file changed, 3 insertions(+), 254 deletions(-)
diff --git a/code/yarn.lock b/code/yarn.lock
index 2e596fc708a3..52f251440bb3 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2490,7 +2490,7 @@ __metadata:
languageName: node
linkType: hard
-"@emnapi/runtime@npm:^1.1.1, @emnapi/runtime@npm:^1.2.0":
+"@emnapi/runtime@npm:^1.1.1":
version: 1.2.0
resolution: "@emnapi/runtime@npm:1.2.0"
dependencies:
@@ -3424,18 +3424,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-darwin-arm64@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
- dependenciesMeta:
- "@img/sharp-libvips-darwin-arm64":
- optional: true
- conditions: os=darwin & cpu=arm64
- languageName: node
- linkType: hard
-
"@img/sharp-darwin-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-darwin-x64@npm:0.33.4"
@@ -3448,18 +3436,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-darwin-x64@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-darwin-x64@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
- dependenciesMeta:
- "@img/sharp-libvips-darwin-x64":
- optional: true
- conditions: os=darwin & cpu=x64
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-darwin-arm64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2"
@@ -3467,13 +3443,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-darwin-arm64@npm:1.0.4":
- version: 1.0.4
- resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4"
- conditions: os=darwin & cpu=arm64
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-darwin-x64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2"
@@ -3481,13 +3450,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-darwin-x64@npm:1.0.4":
- version: 1.0.4
- resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4"
- conditions: os=darwin & cpu=x64
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-linux-arm64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2"
@@ -3495,13 +3457,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-linux-arm64@npm:1.0.4":
- version: 1.0.4
- resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4"
- conditions: os=linux & cpu=arm64 & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-linux-arm@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2"
@@ -3509,13 +3464,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-linux-arm@npm:1.0.5":
- version: 1.0.5
- resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5"
- conditions: os=linux & cpu=arm & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-linux-s390x@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2"
@@ -3523,13 +3471,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-linux-s390x@npm:1.0.4":
- version: 1.0.4
- resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4"
- conditions: os=linux & cpu=s390x & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-linux-x64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2"
@@ -3537,13 +3478,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-linux-x64@npm:1.0.4":
- version: 1.0.4
- resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4"
- conditions: os=linux & cpu=x64 & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2"
@@ -3551,13 +3485,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4":
- version: 1.0.4
- resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4"
- conditions: os=linux & cpu=arm64 & libc=musl
- languageName: node
- linkType: hard
-
"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2":
version: 1.0.2
resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2"
@@ -3565,13 +3492,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4":
- version: 1.0.4
- resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4"
- conditions: os=linux & cpu=x64 & libc=musl
- languageName: node
- linkType: hard
-
"@img/sharp-linux-arm64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-arm64@npm:0.33.4"
@@ -3584,18 +3504,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-linux-arm64@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-linux-arm64@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
- dependenciesMeta:
- "@img/sharp-libvips-linux-arm64":
- optional: true
- conditions: os=linux & cpu=arm64 & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-linux-arm@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-arm@npm:0.33.4"
@@ -3608,18 +3516,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-linux-arm@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-linux-arm@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-linux-arm": "npm:1.0.5"
- dependenciesMeta:
- "@img/sharp-libvips-linux-arm":
- optional: true
- conditions: os=linux & cpu=arm & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-linux-s390x@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-s390x@npm:0.33.4"
@@ -3632,18 +3528,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-linux-s390x@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-linux-s390x@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
- dependenciesMeta:
- "@img/sharp-libvips-linux-s390x":
- optional: true
- conditions: os=linux & cpu=s390x & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-linux-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linux-x64@npm:0.33.4"
@@ -3656,18 +3540,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-linux-x64@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-linux-x64@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-linux-x64": "npm:1.0.4"
- dependenciesMeta:
- "@img/sharp-libvips-linux-x64":
- optional: true
- conditions: os=linux & cpu=x64 & libc=glibc
- languageName: node
- linkType: hard
-
"@img/sharp-linuxmusl-arm64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.4"
@@ -3680,18 +3552,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-linuxmusl-arm64@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
- dependenciesMeta:
- "@img/sharp-libvips-linuxmusl-arm64":
- optional: true
- conditions: os=linux & cpu=arm64 & libc=musl
- languageName: node
- linkType: hard
-
"@img/sharp-linuxmusl-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-linuxmusl-x64@npm:0.33.4"
@@ -3704,18 +3564,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-linuxmusl-x64@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5"
- dependencies:
- "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
- dependenciesMeta:
- "@img/sharp-libvips-linuxmusl-x64":
- optional: true
- conditions: os=linux & cpu=x64 & libc=musl
- languageName: node
- linkType: hard
-
"@img/sharp-wasm32@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-wasm32@npm:0.33.4"
@@ -3725,15 +3573,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-wasm32@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-wasm32@npm:0.33.5"
- dependencies:
- "@emnapi/runtime": "npm:^1.2.0"
- conditions: cpu=wasm32
- languageName: node
- linkType: hard
-
"@img/sharp-win32-ia32@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-win32-ia32@npm:0.33.4"
@@ -3741,13 +3580,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-win32-ia32@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-win32-ia32@npm:0.33.5"
- conditions: os=win32 & cpu=ia32
- languageName: node
- linkType: hard
-
"@img/sharp-win32-x64@npm:0.33.4":
version: 0.33.4
resolution: "@img/sharp-win32-x64@npm:0.33.4"
@@ -3755,13 +3587,6 @@ __metadata:
languageName: node
linkType: hard
-"@img/sharp-win32-x64@npm:0.33.5":
- version: 0.33.5
- resolution: "@img/sharp-win32-x64@npm:0.33.5"
- conditions: os=win32 & cpu=x64
- languageName: node
- linkType: hard
-
"@inquirer/confirm@npm:^3.0.0":
version: 3.1.20
resolution: "@inquirer/confirm@npm:3.1.20"
@@ -4078,20 +3903,13 @@ __metadata:
languageName: node
linkType: hard
-"@next/env@npm:14.2.5":
+"@next/env@npm:14.2.5, @next/env@npm:^14.2.5":
version: 14.2.5
resolution: "@next/env@npm:14.2.5"
checksum: 10c0/63d8b88ac450b3c37940a9e2119a63a1074aca89908574ade6157a8aa295275dcb3ac5f69e00883fc55d0f12963b73b74e87ba32a5768a489f9609c6be57b699
languageName: node
linkType: hard
-"@next/env@npm:^14.2.5":
- version: 14.2.7
- resolution: "@next/env@npm:14.2.7"
- checksum: 10c0/1cda023007acda4d47036a25fba0e039d9b2df9c3770651dc289207e0537506675546c02b5b574fe92bb1adc1c887d948d5cb630673aa572754278b82d150b7e
- languageName: node
- linkType: hard
-
"@next/swc-darwin-arm64@npm:14.2.5":
version: 14.2.5
resolution: "@next/swc-darwin-arm64@npm:14.2.5"
@@ -25822,7 +25640,7 @@ __metadata:
languageName: node
linkType: hard
-"sharp@npm:^0.33.3":
+"sharp@npm:^0.33.3, sharp@npm:^0.33.4":
version: 0.33.4
resolution: "sharp@npm:0.33.4"
dependencies:
@@ -25891,75 +25709,6 @@ __metadata:
languageName: node
linkType: hard
-"sharp@npm:^0.33.4":
- version: 0.33.5
- resolution: "sharp@npm:0.33.5"
- dependencies:
- "@img/sharp-darwin-arm64": "npm:0.33.5"
- "@img/sharp-darwin-x64": "npm:0.33.5"
- "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
- "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
- "@img/sharp-libvips-linux-arm": "npm:1.0.5"
- "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
- "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
- "@img/sharp-libvips-linux-x64": "npm:1.0.4"
- "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
- "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
- "@img/sharp-linux-arm": "npm:0.33.5"
- "@img/sharp-linux-arm64": "npm:0.33.5"
- "@img/sharp-linux-s390x": "npm:0.33.5"
- "@img/sharp-linux-x64": "npm:0.33.5"
- "@img/sharp-linuxmusl-arm64": "npm:0.33.5"
- "@img/sharp-linuxmusl-x64": "npm:0.33.5"
- "@img/sharp-wasm32": "npm:0.33.5"
- "@img/sharp-win32-ia32": "npm:0.33.5"
- "@img/sharp-win32-x64": "npm:0.33.5"
- color: "npm:^4.2.3"
- detect-libc: "npm:^2.0.3"
- semver: "npm:^7.6.3"
- dependenciesMeta:
- "@img/sharp-darwin-arm64":
- optional: true
- "@img/sharp-darwin-x64":
- optional: true
- "@img/sharp-libvips-darwin-arm64":
- optional: true
- "@img/sharp-libvips-darwin-x64":
- optional: true
- "@img/sharp-libvips-linux-arm":
- optional: true
- "@img/sharp-libvips-linux-arm64":
- optional: true
- "@img/sharp-libvips-linux-s390x":
- optional: true
- "@img/sharp-libvips-linux-x64":
- optional: true
- "@img/sharp-libvips-linuxmusl-arm64":
- optional: true
- "@img/sharp-libvips-linuxmusl-x64":
- optional: true
- "@img/sharp-linux-arm":
- optional: true
- "@img/sharp-linux-arm64":
- optional: true
- "@img/sharp-linux-s390x":
- optional: true
- "@img/sharp-linux-x64":
- optional: true
- "@img/sharp-linuxmusl-arm64":
- optional: true
- "@img/sharp-linuxmusl-x64":
- optional: true
- "@img/sharp-wasm32":
- optional: true
- "@img/sharp-win32-ia32":
- optional: true
- "@img/sharp-win32-x64":
- optional: true
- checksum: 10c0/6b81421ddfe6ee524d8d77e325c5e147fef22884e1c7b1656dfd89a88d7025894115da02d5f984261bf2e6daa16f98cadd1721c4ba408b4212b1d2a60f233484
- languageName: node
- linkType: hard
-
"shebang-command@npm:^1.2.0":
version: 1.2.0
resolution: "shebang-command@npm:1.2.0"
From 63e46fa47b3e5a98f331f335f6a9c4052e09ad90 Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Mon, 9 Sep 2024 13:31:16 -0600
Subject: [PATCH 053/213] Rename to 'Storybook Vitest plugin', and more
---
.../vitest-plugin-test-failure.png | Bin 0 -> 213655 bytes
.../writing-tests/vitest-plugin-vscode.png | Bin 0 -> 332373 bytes
...s-vitest-set-project-annotations-simple.md | 35 ++++
...-stories-vitest-set-project-annotations.md | 18 +-
...un-tests.md => vitest-plugin-run-tests.md} | 0
.../vitest-plugin-vitest-config-alias.md | 29 +++
docs/_snippets/vitest-plugin-vitest-config.md | 118 ++++++++++++
.../vitest-plugin-vitest-workspace.md | 128 +++++++++++++
...nner-with-vitest.mdx => vitest-plugin.mdx} | 181 +++++++-----------
9 files changed, 382 insertions(+), 127 deletions(-)
create mode 100644 docs/_assets/writing-tests/vitest-plugin-test-failure.png
create mode 100644 docs/_assets/writing-tests/vitest-plugin-vscode.png
create mode 100644 docs/_snippets/portable-stories-vitest-set-project-annotations-simple.md
rename docs/_snippets/{addon-test-run-tests.md => vitest-plugin-run-tests.md} (100%)
create mode 100644 docs/_snippets/vitest-plugin-vitest-config-alias.md
create mode 100644 docs/_snippets/vitest-plugin-vitest-config.md
create mode 100644 docs/_snippets/vitest-plugin-vitest-workspace.md
rename docs/writing-tests/{test-runner-with-vitest.mdx => vitest-plugin.mdx} (71%)
diff --git a/docs/_assets/writing-tests/vitest-plugin-test-failure.png b/docs/_assets/writing-tests/vitest-plugin-test-failure.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c2277c9e54729e6726acd28140c2ef2d846068d
GIT binary patch
literal 213655
zcmZ^LWmsHWwk;N1LvXhc+`aJN5C{Z!hv4q+?yf;YaCdjt;O_2LNbxFtPWSD1Z}$(r
zV%OSx`5JS~Ip(e~g)b5)i1>&Q5D+L*lAjeJAfWHSe^BtS;BP+B@2f#TK!%uqQ*%_4
zljSwEv0~IWvN14bbhWYtmqS1R1YK?Q4K0ivNezrm&8_*#FIqdvNzIM;$yGVznB{Cm
zjm^v@-R+H)+`oJ?bhj|%F(MZfKm@q*f-A5xcGM?zwX(E!;C1CE|3|&N;Q#-8%|uT6
zk6Roq_{r7e6i7vF?2Sn|8JQWG$psKe0ro~Fyo#U2|9%*J#ZPYL=xEE!#N^`Q!sx=r
zXk%~6#KObF!^F(W#LCJ5zJtNR&Dv4lmBHG9;!hQS)$!Tb!O-5^*3sO?n)FYd`UW;m
zj{M~0;BwNxD>rsE|DW2e9sV9Zcp{kolrXU{GBf?-_CHs=3g)iHmTI5Pt&FW5z;*JI
zvoN!;{jXy6e=FwVVkT$$Ga#nFM+BZ4rhm;1_~Ku)YitdkQhV^+MI{&OgO^0lTvSv+
zN>r3o!QRHi+|n4lR&iFbf-=2&=mR-((j`Sx!j4DiA*dor=>x;U-?8W%;eY4-rjfHy
zJj_XRFZ}~P)e>*T~V2h-Ty)W_naSQ{h|n{Y06c(H5>Gz)KVetUmgr}
z@g@}yr_wA22~(Yn*+Y)TF=BUi4@p)qg4mKO@zy3;iG4jqaip>ymn<`{d`>kK?wLI?LME`($XX^lDud53JLCQ;RA``Pr{_we65Xlmv#J~9Ay$dm
z8WSpie}-RUF>?L%dN4`i0~+BQKTqo6f5+*3QFV7v+4<(?Y~Q}fHdlev{^gXHTwrN|
zd-z~-W3ib1^yPKug2d;o%;$n6+a*DL`Qr-p*{yLxyY2GwPHJG#5({-;RYL=(7e;jw
zG=D=v|G1<(@zfa+(G^v4``FBmfk0`5eVG7Kt>Jc?_uxjQVCUN{&(5DdJUtI?bOPX5
zuRtLWoo#PNuQmrH2@yU^Hy-3R)bu6tQY;YIVLV&`{2$2HY4K6wQvO
z>P4E((d@D_{%L17nKU{|dNNJnx<1}-OZ7XGIUMI$KA^{&!JJMI=<4A@!SLrj)2^5P
zEBk@q__J>H4o5ZU3$CIKPCN!h`&B`JqBArU*%3oDprLYWW>{{Ng8wRTDM%)DkM0E5
z!Y#;N%4Yix&A^&lT#{<_YQaLTGU+t^>SXdl@J}NP8-jMs>)BCHTJ(6S*AJDBZS8L?
z1-b{XOcy@xZ+zsNFNOx!XsrSZd(I-U?u-hURDnS$06X#U+wN@jvS7#98mO`z0A&oJ
znFhVa%lqMzT4wl?IeBh_7IkV-n~z~TY7!vh3`F2qOOf?Uomhb&ozkcjtLrPq1>yU@
zR^SD=GpXxE`SeU(n|_&{US2+BxEb=~^^=$bMPa*_yOw`U-#MHQ=<@}t4@i7LvI4>9t?$m}<@Mwh
z?ZU@+fce5_|JD4$hwn`-z-RbX|7G$~Mc2k=)0A+!=d9ge5_`|4N2aL){fT^Fiymbq
zadL^n>?+-k0i<42ccWs|NiJ`J@UG;@J(KN1R1F+W~x@@|+YZZZW=-g=Q{1***c&>cwP
z3V8U}wp#%Xx?V9o6~VuvofVtBL|2i&X$8FDsZY96UCrmr+Hd{(Kxr^p@5sQGW(6nBOO&HZbDs_A~
zHcA!dgiE^i@+k%qdZ_JG9N6cX(9=<7w^r4+j5Hzvf=iXqt
z{5*nxo!~y8Iq>^chd`9V?9*rdS{1zRYQt^G(TMEwETa`TW+{y2AU(|BRO1jY-Z07Z
znA^yNf|cm|=&|_hLirIoIqK%&-Y|(l&Y4j`n3*qp==CF*AI+!bec~%>yv;3^i7S23
zD_;OSAn#Y;U!eLAKwE#i1f@I(w!f8U_5vlKK}q~fks*6+P)z56K6n>(RwEQk3nilV
zYuyX7>~aHQQE=~rKS@wA?zA_^0V@jYuLtb;tP6-q>sY9kp@{SJq;~54@Pq;h>_X@r
zuD+{@=MI-rYC@eE?P+#n*dssgQnh^&sr164gG7wF9QeIE!$rt8`+xlt)BB(PXmo
zsa(samu0bBZR*Zibe*`oyguDLPv!`MUhWAWyW>$qX>sYyu0|b6wj)-&0I?#S~1PLBXl
zG()9q&S+Q-3OT!XLBZkZ#T6)=)MQAbHwd40mFSwAc6YFa388+ZEKYq4d2KogAOaer
z`z4GIE7;ZwLtG0j+Lcc-!6NJ|5~mi#Nv>VO#mnubPKaAs;@gA!g>w;7EO
ztFtV}G2pOg?v;|kp#OY_qr13@=KTh|k*I|J18n~~dDo!gKPVQN>{Iv>IPRzLwk7RaQ9{Oob0jq#jwk_TXaZZ&=SLg
z_{b{+L-jMzG8;~vZ**&ir)>d2adBy&G_Z{orhfqvZ1^mB^!^1tV6$)Vw(tiVok9AmGoh@SducN<{vH(h~Lej4tf>=dWFJ`gwqJeE4Ca
zFckEVdl*!u>Uj7j(#D!yzx&TA`NI>$dyVFL@qI^oA@WJ%;c%W0_ZfF}x|CQMx8@8P
z(ROQ}O47ZC+AvI`Mvwg*AIjo?Uj>B@Vq%|A1NO158DZLUT#ql3o@%{DD6;ly0r8em
zPgFuHg+a?CCFp0W-Z+K)lszcF4
zBUpuXOpu~xE=Bo!KDp&rEh!gR*$$?W5-g%pH_qa2{LpoD*KsD4-{La8D7aB6*K^@P
z{VSBv@7_nJCS~hMx_h*qD(GO#H>10T^5uKbBHFJ~bsp2{hyI?N-?m-SJNLwoId{eA
z>kjQcf*c!V)|O-{R@%2`jv{ps{z$JP=Gf6ia)drI$8aY@)B>OTj{}&pfphx!Zy0#1
z+xGV3wZ5!#_qB2nXP^J*RsO<9o)gsFZuvsz&XRn|v=h8Ee-12qk(a`M2toZQ_GSL#
zYMeVp!w3=5>iD&JdgPmacL?->*0=j45}CXq!Tf~=_5EQBgO{b~a&JECnltW$ogBVK
zDG`|f#gfJ9D52Cm@riPM!USw8KPdv5L3AVOZ%A$I#KEQJtO{kG$8&MmkjuUoy)%qy
z;3G_
zC06bI4f&U-;*SPGl2R5D||85K@
zAa6krM*AcIFAzEm)Wy9=
z`w2+>#FdR39`@`E^+{f&FkLbmflGKWH5-7TrbXuXgVz2lP8e1669D_8-M*z2m@0yx3}5njS0bl2%oRk
zyFsj2EyWVWezQ0stq5{T9dK(Q60{+sk0j=iF5=dME3`ZD>iCZ|vjcE&gp^T)y>NHU
zA9Esm&OHmgbCAsvUmT7iPPSH%7;3HesRE^1$1WxamJ1ROVoLLsYaQoW
zR&HE9{Kf10AeFLH{@B%+cIwwx3opvQ=}Mf8>)XoX_7knW
zfnHBb4UfEABc0d%C#lvbrcrLZMu?5!_H|7pKvVW}|JL6mm?pzPDT)<#Iy^(+VMZi6
zGMRR(WNx)}=4wmc*FO$x4slIJifDd*W4Ni|c*lcn#EzGb;jTaI0>TZ^BZ1^L5?ao~
zmcgserQdJL_}oE4qCl6-gjT9r9zUJ*`+Ied|6VQ?li7%qLQnPRp|%SnhHX
zg-?JLD0d0dl>J6dMOgDXxjeSJ63J9ZYaEC{{G6n;d3o>SIal!D51#%Ezw=bRn{D7P
zS`pLfbJXejMuG44$D05je7-kadC3#||5Lw4Bp}M=Tp-Ik16kR3jMmH}(hAQn_PfX;dy2S$)VuZ%8m0_TJ1iGuu
z`5LZLs8nj;B{ON_pFfYHY{j+OAWbr9;Oe+-HBZ&LE2~w%D39;>{4e+ZZ=c_+
z|2Ho2r{iYf5Pj(+lthi5^f$9ba!8t%t)zrE$!~n84vQ@M`vVShD;cbI!y(uwAMB%l
z$CL2Sv$$iLZ`4w^yStluCiAjK1=9UUDaRW=O9gy1)^}UI$k7tu{-*b%#!4i;#4&WV
z`BSI@*=`0m)!p)pIZj~N>mx_PISiC>4zSU&US_2mvAgP_V$nW
zg8wBJq9Fot&F}T(NcA9*`IKyX&2yn-5YtaweYd)JkZ@#j%8BN@okUX0m~mQK+*RY$!-&|RepXm8T^={FuY}TU?C%Q6DlKDS0IG4xmMI2
zI6FQseiCM>#&A{oJS%)E#sec}n{zR%yedWmG)02c3o~T_>=UU01I0?cbk*AJ#hT8R
z>3ZsM-ewTIFkA(l|5FFmOyTuxO*FVY@8&HS(Mkh5MLN`P$|bO!R9)PsQ7zihb?!c^
zT4$EirO;MDL%buFYrEQIw@P^Bkn}PZR%9`_IsEM;^x=yH7JR^1X_AgOrCDwiYit%4
z6oyKjsjV-`uJ^D^MDOoTPzk2H*x=iL44uhR!bC2l5oKT9t7>OS{AX*60+X^pSO6b8GM(j`q(Q-(~)!4U+E7mSV+=)6>)6sRy>j8QdSEw&hK4jf!{3k
zEr&SXoB1z?jp#
z<8gPXTU4?_3Nh|4L06o7J5oX==*ID-VW5*E_mX<=0^FwpJo}%?u3ts8_t`|`{SBy8
zY$>m+&G1L4Pe^YiDPOkzy9CWM%_<{y89dzVvc)l3b`H3lvA&Hw`>s*RSVPM^q&rkEzC!Bs95_)
z3zCSP?x5VvMI!!lrV5jmsT_>z*jG8*;+lALBEqx?h?bKYqWIu%K`#
zm&BKm5F@(Ihm8FASrziD8c01gX)qqtL_I|ga*~AhP^Xv2?|L}q(As{a^i8sH^E&w}
zjLdw6VV2;xg2%@MUwgk!BfIh4+brP#^y@$uQRdw96MgeZ_f)6-U7t;$#o@mNo`pnV
zHp?$nhxk{Md2WcbFAc~pSYHWiHl~*f3$O0DX6XDv#(H!1NM`5xY=2MoZ1&rlKe9fD
zRy)e&lZn15Fxu58yUYA!gpk@o_dwJ;@=p9d`SERq*1HLB(;2NqmCK`qWE8N6a){^~
zU=7>QCTPd_Hy$Uz`IX%42bOO*i==vOX8$nkHQ)Y~#6M`vkmN>9h@ZT6BdPYdBhzCM
z!}#8%W*(`dY!usNWONoVI$ubPS#n-c!Kl4!N`AE4@-M8wd3>!A_f928GXE)%8MbRa7Z-wkZ_S>20cD=Q=g#pawe3MQY-*WY`ztq99Kq|M)z>8
zSYkG;+K*OEixZe%tLl1j0Pg0L^tXC~dY#WEM_0a=R&50nj8uuikEV3uV>94uyJ?1b
z6GZ!YJGrU>a9|Vxlh``gTn_uPXPb<=9a=Zn#iA2LTY4kkqs1WeX~2A?P$uR3xGbK$#)sg3)j{5CzmYbkzs{XX?W@0N=6cxb-II7#T=CZ**-_J!`+1koy*|21?
zbu~zWHYxCInGZ0GGmBtonCj@;?vLmdMdPm%kHg%0sr-=$_xDtor@O#o448g4sLiU??i+*X@G*u8vKz$e=zUAg5a=m{|
zuk&MfeCdMOYMYWW_JuCvTr$E$Ihb^q%qGH_h>?qv-FZhymnf;a_q;ZU#VW
zmZ|HRXPGj4_Y$n<+U;(=2)tbOrl%OIlbjwtM%(UUD
zdZ-Ob2h8oTc^{i(1QQ83e@Sfsu2$VGQ3r-}0%xagwlBk6u>6s*>EQ`%+U#7Pj*4#%
z6qTP02q{tg$8xCxnpdnEwT<1Bioc+=p4LR5T2~+`PCBIe!4=gvh7H~2awkQOlkM2>wDC6G4;!ig@G1Dzf_TZ$L;qMRpN@_$%
zUZLW=bS&wQ?p}5)ekzAY8@ze+@JM>~A}Ql-H(3Cgh}mlZ7Ypdc5@HpRH-%G_Z+}^&
zMmF%+^n;_#b=oW5ySi41rNZ1}Nzyx>GuK~-AE7|ob26F5fE~@?rGGuXmETEW(8Nxr
zSI-k%4!V0sG-JD6-9h1Kee}8gvIl9IM~5`a_*%aiLPApDzy&-%zi)%F>|$RIa(r}l
zTvqJ{g$9TInE82K7?aZ`t5h0?!@X)ov>|l&WCpZS93}(;XB#X|0lk>2D?g9GG>C>^I@gD>MW_uBj88O1-CIv%&1jz&o@
zuvE2JJ_f+HvEkD14{l0fZmk(yps&;Y69%KZ`ou`_Yuq-vFK$b1M0V>PCWWJIf
zrK>zL`}+}yHU}dJGVW}oS8dB%U4&EJVU%k%Nbic7f4pRqAQl6zw*Qo3m0MuidR3=j
zSGcdH6#^NnVtvd6sKuIhNxn<*kmT#DQHv(Rlz{WAi;1AqO;U4J_3#_3I{kpvEV
z;?B`*aVb`KG}iq4GClb7yTG((eig!Kybn!R0|Zz;u=4w3Y58u4j(@PZ>nW^jY^@=}
z;qVT~(A)CF2(KT(7K2oKza|&Gcl7Zh29#8~+fFt)!I;)lyK=v^r+JQ5S^i^P9UyT@
zzbswE$I>)ZyEDOefjkMgiS!>7+5#WFqWRk-I@RMkTCHBCg`07%4XrSW^ILRbKzJ%D
zOj_R)s0$h`(Br&WBFC^e(>^@eV_FO+2#?Jquosn&zD%QDI?U_J@(RR#m>b~Om0-Go
zDG&H6TcZ*aH8(rJf4@j^S~vUU*h;L`jj8?Rdi0p}Z8t&w*x@nNFnYRyS=(i;
zkefbMSTp;=)r#deVp%t`4gKZE^XfrjC8mm&o8HzgKyMQ&w@({p*IX5B!Jh^up$~c{
zxGo4LF!fy%$l6446R9(Aym}C*4-?_nH`cCEDbSuHuo)1aFFHGkckGKDF0@p`#U
z?(q9cK%E)u9Rw3tD-eG3+m&Af9=xgrUwJ*O;oPse=(ZO%4~%7PXg!t7>B(js!cD>2
zddR6LIsffzq!Pk+MPbliYg^3#F*KXLYVNPF1vT>%%mqJh_ebL{nU>BjvH4H31lxew
z*bNkiDKJMvhQCh@Y3zeaif?2nK^#|UtH$L~pD}}9m4roGoxIM}r(*Ie&rUSeAhYHe
zXt+IEl@QjD?37LfB7EL}mqjiz6!R0KD!`B@<*gYJ2M%k+o4>|tmWhfV?{?_D0wg)?VkMV{CVn!xw58eRqf~%fN0-UZSQ2
z3a0j3#mCnRACijJbKY@LiP7sVlz#~ACrnWEv4gE-DUS+Blc4*UEf%|4pVOC|U{fC#
zuS3H~gzf;x9pcH_kZy@k`aqf_@X{)W
zVHgYP45Kv%oW|qK1YX()ja}_zeRkg--vcltyynLU@Y1VQ3Ed4e@u1oT^@)DL$Ob0La4R}_OCqVm
zIYNjb*5m4;2=kEyL%E*}uZqVHM}?3M
z(s;+mJEe7x$w{C|+a{Z`r?NO;Mhebf8hdbwa2>0KX_xz)#@vL;iyzD2#Dnd%&GN0BI%u&qCpIKNvg;%WNFERsQ%Z~%MHfCV?8EKl_u)Q+a{bo9pdDZA5qey
z)-{t6aVcb*WNOr7+m^|Q$CObR6Tj@?MrBrLWVP@=j!!Y9x_~1XY@FeJjU8S*d|vY7m$*8CRqNK>si~JGS
ztzi9|s|qXp^k=mVO0O^1$U(QlAktrbhEe-#uzs(zIiP}FEY@&6?EyZ>ZcW5W=yj*!
zEa!Aoh0VKIM&^gsjaSCXi$%kj->5LjcJyY6a`8^>c?UEleE>He
zbu7e(3oz;0y&h#kJIHj1#vTN2y|Cu`rY;0!DPo=M
z?JmNy{;HtH20Skk5l0v+znCnhrLYVcFW|(JKfhptBK>O>CnUyST5MQMoT%
zIdb6^e0ae+`5#gOb}{|J!XOB7%`u_ITE)Z~khu-}Os?9#9LWpqBFx?z#TDRoZY_Ix
zxpqpVys(0@QV3+2UNxnT@vxY0dFey9B6Y7v4?Q-sJzARTDjn={+HS4BCVsd{NLchiuryAa(67FS6Mp9Wwh
zKMy>ayHPy%X1bQ)shu1_;PCY)N)P6NdFGoxgmtmwbrXEG(Uf0r`3CHlq22{p(%XW3
z=n2m;akYe{KL-6H6_jU4_JdFcU`4s+VbLEg6U*eRnS!qWuvRXo@F~+`)@ETPkujF`bZiH2q7!@sCH(h@xgf8$@g6R*loVpX(^HR
znhZIaSwUn8+thd=i^OAcTgN&8)YP4!VDeRs8BGz@&D0lCxYMGdS^Obtj?FeMoMGzw
z`O!Xx$zVbGERGj0gq~2JBeibJBnxZiO^!h%Y8x9y?_z_P=UGc$d8R1rdv2dE$5;Yy
zJAcl1SD*w0F+p*`sDo~*)0eq^3hiOffsk^tv$D#MuhdP7s>Qh8EVeR6yQwo?@ed#N
zj-J^Fn3;*KjT5aj6Wk?Bofo$w!p78)=j@p@l}RHcFvQ8{J~KUkS|SU~VYe4j8P1Rc
znbH9zXG2<{C_bd#OMG%XuIe(x$dwgeOEV48D-m*47Zn*t%=Kdc(QA|Mh4p)yNl?~S
zKy&>Xsg&3cWSqoKwfLF{Tk4%i{X~PUc6KTR1XvZb{(DYMw^P*yL9
zoJdfz#VI{BA5*#*D>IELbjqz8N*Iu(yk
zU>m3H9vf5eL{!me#~21CT7kLd1d0_PXKznD8>CE6%=U?fWpLSYlDMoBQ0u0nQfWWJx(^-M|xDAI;+(Y7C^;w6pjkZs@0WG(j>Hk=>>&d@lfS9j;|
zdNq6F0`$@SE8&E4(fDttX5y8QPbPfAS$KV+U44-PJ_d6<7WLfqIYkod1sB{Eng26D
ztG7*-`-*&K@%f~!Wn`3P>vF?vF`4K3?9%Yc00%Y9aj2);*0{;mv{>!>NOt&bC@TLq
z@p9PWvohiyDJ(Xq;p3gU2m{P}G`|#)pYZz1kKT3_F^H1yM8?bmDH9jR`UNZ$EI(iq
zNzK~ibR+=C6V3CV@tMa2(WQ8y=hZj+&6y_aK1sH#+s|BXcO=0fETq&>hTa1s7om&j
zkwY{3^2S)d(NpkGj3$WX4dLMoM^MFo>D^sr|INhULHTS_eu1qhZyLZk)7rs-%twxNmQhB^-TZM&W3nh|?Q)cJr+75oSSBQ%-Zl=_J9!5CS(y2#3+Dhyn1HY>8qachsL?#8;qGT
zLa&h>uUY9(5(JDwK-sv7T~QRE6j*2gjVPvwMrJeu*&{INH2=|zDpoR-&nUecHG|c+
z9(Pr-gilZwLr8a>dUMnRdIs6q)yht`)m4ztY3}P*G~fADiFUyc0Y@?vsI+=c?DE@^
zFUrqOPZ~P6Tj@Wq%W%(ujWyGdFXj{uyXHs%N0Pkg{Va??EhWxF7}%pO81p|?@ejg(
zWQLl7^A{xZV*RZp+xh*+LFz+>mlTQ!YS@Jt&XZiH)OMnBxH0i{+wv#6|H}x!N_coFYFewLsn~l+e;};>3VYvOKIR|gj!eBve;d8Q~HUcwfC2DT!
z&9GvegGh(5O?!2M2(=ZSMysy}v|i?X6(G+3Zu*0M-c#3tgAK>7o$}UJP3;rBsm=5+
zL7V|d3pfE=oBMy~nlihg`??-@a_;osqi(I0UC_GW^!!L`vG!bYr8Odn|Cv)4py@#G
z@6r}8vBU)`$53xOr}kN9)O`FtmIm{EYpFUKT~aI=UQEG1JWR>OGpzrC1S9*`3`KC*9h*Muq6ZDY~wVo(D)d3KmhYs5fXtP|qs-M1r-;(9D9oMomk?
zvKgUCgT;p}166I!4qVC)h_}%4t4!|iVz!PK3Q+Q;3@b`Y`e8?Lhy)?t2{%$2iYzYg_cDvMYcosW5sM
zx&BUjZ!JROsmdhjHQQ8ZVcnly@4$u+o#fC-lGHs0D#xus7?y
z%hnO)SLffKvTN{5yijRmexLJVA8y7oIo6GL*m&${-pU>
zQk?yZZdTWM$v9~pcDFKt*6WVH%q#xTOHFlNa#E1jSLUj%?XKKL+2#ZGf}wAKV|m31
z?;2qJ55EGBYmKx^=-#9A(nf!Fyb)PxmngC-)jb4XAYat8xM|5SNHzXTTN|dDDe8mA
zx>p;4I%TD3Jl-L#*fX!+<59YQA>+S5aFDMY**I3;2sdk>EydO0R8Wv*%N{hwJ~i+X
z+g6KY;$z&7;^Pj?zQ^v22m3ysT2XhlTZ!LiyjO=c`kCQ~>>Q)=>sIc>N^$bfWX@&b
z%v?JB(|z@Xzns{{Tc^Glub@%7BP!BwT1HA6+(q#jz+I;a)QzVjDJr})aOGUTu>D@Y
zJt_cD-;tbCn5Vp(Ga^sIMUa605V@OqaUn+H6MrAUQPfUBz%Nu?hP)!}A}fxU$|tX(
z(vyN=&NG#gT0j($f@ch1Jl}p95c%ltW;iX*)cX&HTrC8F1c=zYa=;^jsoKAGt8-+4
zbf6*`e!FP>
zALWx2ev?M|HrYU+X&ixsE*2M{rYe$?JG{(wBHdYCwjf~4m2B*;{`dVBB#=LuUep#V
zueTEyA4a~NpkC>m##chp6bD1fXsEP?u-&-vt$TTLR8$Ijml97{%`Q7_Ifto&7*<=Q
zX$@&0-pvdH(Vh1DDT?aedjrKudI;@4Yr|7AnOo`u#6Kv^z{2A?>7fei=L+9E|2GAP
zoFX?+o4bCWr5=8SY{MkO+DHnDp9$!W=4x`1hF_i`_t8F_OcDN99qT9j
zW-~EOy~ZioW}5!$P)EzW=`m*U`h`gA?{|Vb-L^(M(><{ZW|rTL7KWgFh^3E_mN;s^
z>0x_hbjjCrK-%@E^eE)&4)b8Yj%n+Lw#2)stD3ja3H#@+{@=>pM@*_%0WH#R(iRp3DSx-^UjHd
zBJ~sbFxW1jEo{;x7F7uSI$_mb3E?m$RSoJu-fR>O+dk!0M{^`iZ0S|4r4Thu13`
z=!)vHvvgE)~<^W^BXrM&=6EJn6X9{frZjlU*k9zNk+?Gjd&}OSOZ+d{~nzsUTbA
z6XABnJ7dJ3ifS8Vr;3mfo71=|UBwtfo2$Un=ezinX$0k|8Oi)Yv%me!zsShnoa7HG
zDw4&vjP*tYT_G|>!)Qfq_r&NA*)i~tJ;&ZeDm{e7@vSI}auH@Y?hcAn?inL&PAjuY
z9@8yyVC}*P(xKQ-NPc#t2yM|XQN@7*+Y=xqHPcLMdR%0azjx8!J(L@Tl&{X9oV1A^2ep7pd6y6&99Afs?am?Lubrf%LC)
z|NoEN4RX=zQthRmsQ3*=?@om8sRv9M-_1ZIKmNB2gO5m1
zxRqOdSJbdJz>uwFSNmmD4wHxlUUBQJhUiA#s1$8W&6|5FkPUvxokx
z#gID9Hs#O#?d|QnHpDnk(Oo3k-2wXkGP3{seVJ5Wcq6T3
zvF)w;V{04T;NEea`P`F}FuRg_@l_>a6yXNj8T_|-KR@#eTI=Ar13VjUjw3}
zzd*62_^Pp-!${8+8i>=X;rg;is#KjFo*I>j5c~`ZzmBwS`j_tbKREm6WuJt1kfDte
zX*fYk2hZ2&o>*mf25uLJ??H5#jjGt=Y<_HL-iS7~-}#Q1ed&BYR$pC4`e=f-Rn(e8
zjlT5LUvkpsdTJro?A9t!N7nQARhClW+_n&Bmda`TPs_C%XTIln?~Xmw{8QwcLH`2H!S|Qw
zOk7aJG~v0dcm3i?viwH>yTf|+rur+RmG@uC!3c93iM=>aD-1~_rN{n50g~3BoGWiK
z^XZ<`dxo^^Y1><#2g8?}yQ?GOKfln#oQB?2gBlkyd)@opCggA8lrrV05~>X>XrdZI8E5*914KnY{Z#ELpHTvk17O!chy
z%(w1om=C_4J-QA)T=cQL8vpRWrH)Aj3h55mjVEQBAB^M_qTDk)ABIngxLH8B65DjrN0F=PGYk)3-7IdvN<6-&}+&6
z=8P3WuWiwl%`Gh_#%~q*EU^Cl*tzKTkWpUg;}5-o7Cau`y20{Kv|H`hYy2a6j1X=V
zOQxW<@eHo*i4kAc4WU(xxnJ_ccI~FVz8K*P5wbY~{A1}H7BieKH7A1WU3>yNQB^5|
z+3>Piyd1VDTuETb=Vz<>>}~eMzpa$t9Rg(JI&L)>7KRx=6GcaM{Xhsfp&eAwVNh|U
zdaYUJ*NshJUgWwOD5RNvY{dV)ms%c{Yz$|)_4~-qPLPPE3m;8iRTV?ig3mC=Gvo1e4i0KwK3
zO^$rpY12;hj?yFLrzAH$I6_+??z6hto;J4|e2X@)_8u}TFUWsdGs+ls<0|s+R%9Lr
zCUUUHCFu?E>tH*v-`jf)r2(Juii=X1n1?$_{QPeLy!F<~zgGIfR_6
zwxZ>wsui965jY`Wk)5OM>A2LQ5L6e>>e=zUb`cELuUR|~_%@~s-maP6@{-5p!F8L@
z+btceKdnD>q<93E>9q3#F1w)d@4>2Dv`p5{*TWa!P4AyH3+oQx{?#X)(N(L)H7Jz>
z2@)@M#&aHPj&k+OWwVX+dQ=pi)2iNE-mRtE+gbU8I4x1Wi#CTvuugW@(E%2PZ@8V$
z!C4GdmP<8N;9P~D7E6E97%11#{)dx*Rr(wZU%C_O)s_Amt<_TuSsWjI|=tj>Uj2*Agdn
zbQE5N4{SdPg-nW7IZ>noU_S{*@JF#v1EIgyr=ZgbQamJ^$Tkd)!RzNI%Mm2diYpE^
ztXLC}s(|&*G0B?B8-VeX1L#gfQ)2n+12~)F17qilJ=NrxI?wUX{P{3W<45q2QGvP8
z(kyodR&t#X8D|YEj9?{+T+8XV@;}ltVjC-cUQhfWLx;%;tm?ildfto=Dr;XhKW>BV
z|BvFY7WrPvn^xc?4nMzlu-l3v^28M>e`K)U(Q}8QZ!ACInnPaD2Aw*ksbd`eE#XOz
zl@#Ku=~n>7sfb;@pn0-W+iH@k=_(#-rh_rr`EBJ~Xm<00=porXFEgp#K-$(`362*=
zMz?;T0rH??topRFI?F<-ga=h=WL%`?#RMdg`jaS#$taO-)C%+90I0toQqH1Q~BAmvO+@KFeyx)ny94gav}
z5c9Er9LH0xix|hOZ1`crrxSMJNIq{t$Ah5_tT;dAM}yB8>sTg_(&V)3j%iCR5rRPG
zjlAbJrhd2oJNI#+Xwo%)e*Uc}8&AW>U24ISgG^^TZ?Z27S`KoLF>jA(<>@E;N;yx7
z@h;c4)}8nDl}GgkEq44~I|Lh3y$@{%{9Bn06JJMZRn#55pI0`B|KtGG*ZIGyc0T=n
zdD{2%JT)Yly@7MvaTktZ^4vm-I^p6UX;5AusaQjohW*~s($e!MA|kdKWCzybPP~8L
ziTSrYKY(@jv9)o$m!|D-x;m|AC6`y_BOBwoWlnQlWgz;YVKk3;JJPB55B}Ze>k+ye
z)6b<(41^bC*%si0iM)4vniVCZjIFXc^0HsesE~2>%QuV?mCkGDf37S
zam3$VUnj(2an(tYYiy2;B(`_R-J5XDn)a#aHIA(W{PunTURhFvKv7|qWQ@opnFKvp
zqxcx^$Ey~V?Q{0w7EFPN7IZM9Mk9$d_^|37JJEblgGZ~H*RxArk6R&0q1M&?*vGV%
zKr0zjoCw0Kjc=q`==I#8-8nWk)vDivBKD^~;Zba8^pkGYt;StMLev~S>T@N<4DMaNz00&AbW^P&CXH>DO6
z@+X!;-y3Iecj@%qM>W^qbFMim$=v`aeFTJd&s#4#E>|5U-xZ0ry}e$@m*Upg=s?AC
z@3Q3pBTFBNd@RTRx^ra~R-bDJhhOzLEH?fO6KZwqsbJ|(sr1ULJjc#hl{lo*jZ
z*m^fg{t!jD*h6|U;=y`unC!(7DDwvPTy-GOJur3#-ljnR{4Ic8_t+P_5$1UKY4Idc
zJgxKbU)IUb0CN>c#FFyx-
zz6C?PSu){1p+edx6iyIx=m&z6U(gnG7+02LzyriOlBRXD@t2osd{Gm!{p5xuP@*tC
zIJmO9=zdau=ehmcH91Il7yg~|I0
z>F&JiNgh9%>^`x#e#{qgLBImS_DmO?4COYBzW?#=08jeQj=1U2Lk~Z}zSd4`If=Mc
zeyCh~SiM1R`A~TNR65hCrgGIJ^?W>H${cbBi|eU(8G7JfU!ta4YM9-7Z)u%WB*krP
zi_-k>uGXcyFa&6{=gQXPbBnSaow%JV8>|iex%h+B>1_cS}E7#71(Ze_36Ykr
z85)t4ZbVAyZWy`+327L*yM~&X_vYDqe}B(@_uhYc9C*ykTI*ixTGx4g&iiL`x$R?a
z#_yJsn%|F!+ax|xd?>Ed?SB0myG4bAb6;2P{s-DC;sFs(kzSQq;{s4J_1CstCi0!o
z=43x|tdayWT+N-c0=hn`?Y7{na}ht;d5={^de_TuBd$}1iervF)K*)GAj<};M%)fW
zV0ZJSD^}k_&}?ihFOCw^q6rvzwP{10zDwqS!JMxPquy#exh`?=eKp7uB>+2)a{m!7
z-AfQ5yGU}=Ox;DY+-RDGPL^wpNUiVAVxKY&FQ%DayH-BrEkWx6N7r{Yj80iJ%1ksl=jgs
zX0{F