diff --git a/CHANGELOG.md b/CHANGELOG.md index c1a25029e92c..918bef245067 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 7.6.13 + +- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)! +- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)! +- Webpack: Update StorybookConfig import in core-webpack types.ts - [#25740](https://github.com/storybookjs/storybook/pull/25740), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + ## 7.6.12 - CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index f6fd32e1f285..b3cf463bf917 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,15 @@ +## 8.0.0-beta.1 + +- Addon-docs: Fix MDX components not applied in Vite and theme loading twice - [#25925](https://github.com/storybookjs/storybook/pull/25925), thanks [@JReinhold](https://github.com/JReinhold)! +- Core: Fix React peer dependency warnings - [#25926](https://github.com/storybookjs/storybook/pull/25926), thanks [@JReinhold](https://github.com/JReinhold)! +- Core: Remove CSF batching, as it isn't required any more - [#25872](https://github.com/storybookjs/storybook/pull/25872), thanks [@tmeasday](https://github.com/tmeasday)! +- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)! +- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)! +- Test: Fix jest-dom matcher type imports - [#25869](https://github.com/storybookjs/storybook/pull/25869), thanks [@alitas](https://github.com/alitas)! +- UI: Fix overlapping on the ref button in the sidebar - [#25914](https://github.com/storybookjs/storybook/pull/25914), thanks [@cdedreuille](https://github.com/cdedreuille)! +- UI: Remove keyboard shortcut hint in search bar on mobile viewports - [#25866](https://github.com/storybookjs/storybook/pull/25866), thanks [@tusharwebd](https://github.com/tusharwebd)! + ## 8.0.0-beta.0 - CLI: Add Visual Tests addon to `init` - [#25850](https://github.com/storybookjs/storybook/pull/25850), thanks [@shilman](https://github.com/shilman)! diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 3fcd47d2ff26..51666014253b 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 376afa69b1ca..6f79f9e0c519 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 014b90c65a27..471b4aa7ff8c 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -53,13 +53,13 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.3", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", + "@storybook/icons": "^1.2.3", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 893bc81b3264..bffc041b0329 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md index dcfe92476c04..8dd5e8f7a285 100644 --- a/code/addons/docs/docs/props-tables.md +++ b/code/addons/docs/docs/props-tables.md @@ -228,7 +228,7 @@ This package relies on a variety of sub-packages to extract property information | Framework | Underlying library | Docs | Open issues | | -------------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | React | `react-docgen` `react-docgen-typescript` | [Docs](../react/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+react%22) | -| Vue 3 | `vue-docgen-api` | [Docs](../vue3/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22vue3%22) | +| Vue 3 | `vue-docgen-api` | [Docs](../vue3/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22vue3%22) | | Angular | `compodoc` | [Docs](../angular/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22) | | Web-components | `custom-elements.json` | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) | | Ember | `yui-doc` | [Docs](../ember/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22) | diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index fb6e378b7fb3..cf0baaea1cdc 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -114,8 +114,8 @@ "@storybook/types": "workspace:*", "@types/fs-extra": "^11.0.4", "fs-extra": "^11.2.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "rehype-external-links": "^3.0.0", "rehype-slug": "^6.0.0", "ts-dedent": "^2.0.0" @@ -124,6 +124,8 @@ "@mdx-js/mdx": "^3.0.0", "@rollup/pluginutils": "^5.0.2", "@storybook/test": "workspace:*", + "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^5.3.2", "vite": "^4.0.4" }, diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 4c2bec392f01..67157f39004b 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -138,24 +138,26 @@ export const viteFinal = async (config: any, options: Options) => { const { mdxPlugin } = await import('./plugins/mdx-plugin'); // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs - const { react, reactDom } = await getResolvedReact(options); + const { react, reactDom, mdx } = await getResolvedReact(options); - const reactAliasPlugin = { - name: 'storybook:react-alias', + const packageDeduplicationPlugin = { + name: 'storybook:package-deduplication', enforce: 'pre', config: () => ({ resolve: { alias: { react, 'react-dom': reactDom, + '@mdx-js/react': mdx, }, + dedupe: ['@storybook/theming', '@storybook/components', '@storybook/blocks'], }, }), }; // add alias plugin early to ensure any other plugins that also add the aliases will override this // eg. the preact vite plugin adds its own aliases - plugins.unshift(reactAliasPlugin); + plugins.unshift(packageDeduplicationPlugin); plugins.push(mdxPlugin(options)); return config; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index e9a65dfdde1e..92c7608db139 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 2c59e89d2152..fb3a24762eb7 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 5356338dbe35..e422f17d6978 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 83209d573b5b..dc8f90acc6a0 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -50,7 +50,6 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.3", "@storybook/types": "workspace:*", "jest-mock": "^27.0.6", "polished": "^4.2.2", @@ -62,6 +61,7 @@ "@storybook/components": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", + "@storybook/icons": "^1.2.3", "@storybook/instrumenter": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 0fa00e084931..c35b6b08d53b 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 18f32a208e95..806c4d026a80 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 372022fb39f9..7f7d7e785da4 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -65,13 +65,13 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.3", "tiny-invariant": "^1.3.1" }, "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", + "@storybook/icons": "^1.2.3", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index b05149872107..551f7bf90ae2 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -55,13 +55,13 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.3", "ts-dedent": "^2.0.0" }, "devDependencies": { "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", + "@storybook/icons": "^1.2.3", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 093a804f99ab..a14b1a6e5be3 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 69946acf8c38..65ac5f10cce5 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 344f74c3fe65..806e3094db16 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index f0ad9666dd56..d35deb4fb890 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 188376d18cf7..9798c84098f2 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html index dd976d6c4ab4..7720ef6b9482 100644 --- a/code/builders/builder-vite/input/iframe.html +++ b/code/builders/builder-vite/input/iframe.html @@ -1,44 +1,66 @@ - + + + + Storybook + - - - Storybook - + + + + + - - - - - + + + - // We do this so that "module && module.hot" etc. in Storybook source code - // doesn't fail (it will simply be disabled) - window.module = undefined; - window.global = window; - - - - - - -
-
- - - - - \ No newline at end of file + + +
+
+ + + + diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 3bbaf2d00f25..36268fe85534 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index ccf9f9476a5f..31a2e6f62558 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -2,6 +2,15 @@ import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { sanitizeEnvVars } from './envs'; +import type { WebpackStatsPlugin } from './plugins'; +import type { InlineConfig } from 'vite'; +import { logger } from '@storybook/node-logger'; +import { hasVitePlugins } from './utils/has-vite-plugins'; +import { withoutVitePlugins } from './utils/without-vite-plugins'; + +function findPlugin(config: InlineConfig, name: string) { + return config.plugins?.find((p) => p && 'name' in p && p.name === name); +} export async function build(options: Options) { const { build: viteBuild, mergeConfig } = await import('vite'); @@ -28,5 +37,20 @@ export async function build(options: Options) { }).build; const finalConfig = await presets.apply('viteFinal', config, options); + + const turbosnapPluginName = 'rollup-plugin-turbosnap'; + const hasTurbosnapPlugin = + finalConfig.plugins && hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]); + if (hasTurbosnapPlugin) { + logger.warn(`Found '${turbosnapPluginName}' which is now included by default in Storybook 8.`); + logger.warn( + `Removing from your plugins list. Ensure you pass \`--webpack-stats-json\` to generate stats.` + ); + finalConfig.plugins = await withoutVitePlugins(finalConfig.plugins, [turbosnapPluginName]); + } + await viteBuild(await sanitizeEnvVars(options, finalConfig)); + + const statsPlugin = findPlugin(finalConfig, 'rollup-plugin-webpack-stats') as WebpackStatsPlugin; + return statsPlugin?.storybookGetStats(); } diff --git a/code/builders/builder-vite/src/plugins/index.ts b/code/builders/builder-vite/src/plugins/index.ts index 68e540908dc6..bc72dc8755d5 100644 --- a/code/builders/builder-vite/src/plugins/index.ts +++ b/code/builders/builder-vite/src/plugins/index.ts @@ -3,3 +3,4 @@ export * from './strip-story-hmr-boundaries'; export * from './code-generator-plugin'; export * from './csf-plugin'; export * from './external-globals-plugin'; +export * from './webpack-stats-plugin'; diff --git a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts new file mode 100644 index 000000000000..affb130c07e1 --- /dev/null +++ b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts @@ -0,0 +1,116 @@ +// This plugin is a direct port of https://github.com/IanVS/vite-plugin-turbosnap + +import type { BuilderStats } from '@storybook/types'; +import path from 'path'; +import type { Plugin } from 'vite'; + +/* + * Reason, Module are copied from chromatic types + * https://github.com/chromaui/chromatic-cli/blob/145a5e295dde21042e96396c7e004f250d842182/bin-src/types.ts#L265-L276 + */ +interface Reason { + moduleName: string; +} +interface Module { + id: string | number; + name: string; + modules?: Array>; + reasons?: Reason[]; +} + +type WebpackStatsPluginOptions = { + workingDir: string; +}; + +/** + * Strips off query params added by rollup/vite to ids, to make paths compatible for comparison with git. + */ +function stripQueryParams(filePath: string): string { + return filePath.split('?')[0]; +} + +/** + * 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\//) + ); +} + +export type WebpackStatsPlugin = Plugin & { storybookGetStats: () => BuilderStats }; + +export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): WebpackStatsPlugin { + /** + * 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:')) { + return filename; + } + // Otherwise, we need them in the format `./path/to/file.js`. + else { + const relativePath = path.relative(workingDir, stripQueryParams(filename)); + // This seems hacky, got to be a better way to add a `./` to the start of a path. + return `./${relativePath}`; + } + } + + /** + * Helper to create Reason objects out of a list of string paths + */ + function createReasons(importers?: readonly string[]): Reason[] { + return (importers || []).map((i) => ({ moduleName: normalize(i) })); + } + + /** + * Helper function to build a `Module` given a filename and list of files that import it + */ + function createStatsMapModule(filename: string, importers?: readonly string[]): Module { + return { + id: filename, + name: filename, + reasons: createReasons(importers), + }; + } + + const statsMap = new Map(); + + return { + name: 'storybook:rollup-plugin-webpack-stats', + // 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])); + } + }); + } + }, + + storybookGetStats() { + const stats = { modules: Array.from(statsMap.values()) }; + return { ...stats, toJson: () => stats }; + }, + }; +} diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 4eb5bccae4c8..8b86fbbf5484 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -20,6 +20,7 @@ import { injectExportOrderPlugin, stripStoryHMRBoundary, externalGlobalsPlugin, + pluginWebpackStats, } from './plugins'; import type { BuilderOptions } from './types'; @@ -112,6 +113,7 @@ export async function pluginConfig(options: Options) { }, }, await externalGlobalsPlugin(externals), + pluginWebpackStats({ workingDir: process.cwd() }), ] as PluginOption[]; // TODO: framework doesn't exist, should move into framework when/if built diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 67dbe9f4918b..26d3f222d321 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index b8baab95424e..46399086ecbc 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index cd56a61fcbf5..28e68a74cd9b 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index eca7b38b67dd..ebfc0e7f2db9 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 070e90942a92..5a551c5b40e7 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index adbfe7c785a1..87019027ca9a 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -7,4 +7,4 @@ See [documentation](https://storybook.js.org/docs/8.0/get-started/nextjs) for in This framework borrows heavily from these Storybook addons: - [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next) by [RyanClementsHax](https://github.com/RyanClementsHax/) -- [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent) \ No newline at end of file +- [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 9d642767bb45..0d419532e5b0 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 29b79492d873..d3c9d9dc75de 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -110,10 +110,7 @@ export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOption }; export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => { - const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>( - 'frameworkOptions' - ); - const { options: { nextConfigPath } = {} } = frameworkOptions; + const { nextConfigPath } = await options.presets.apply('frameworkOptions'); const nextConfig = await configureConfig({ baseConfig, nextConfigPath, diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index fdf637142085..e26a428baa1a 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 44caca7cc481..6ad58bad4b99 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index ae8ef5db601e..80993b4e2c08 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 840b1941e725..a2ef73806655 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 434658c2f663..14493c91a01f 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index dea5e068095b..32f52a7823bd 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 6cd00abc44d4..05e83741b3b4 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index a15f1b66b187..973344cf9446 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index d09b89a686d6..46d2946d001e 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 5d3849fefb1f..73f22ceea645 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 7aca41bb465c..27a3c768fff9 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 148b36783793..b2ce42e0ef0e 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 908121555031..ce71214294ff 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 4124e5f342dd..784b77018a08 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 125166734a3e..643892327e68 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index ca4abe014599..5326a1857815 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index 94724ba1af59..c8e4582382dd 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -14,12 +14,15 @@ const generator = async ( const reactVersion = packageJson.dependencies.react; - const packagesToResolve = [ - // addon-ondevice-controls peer deps + const controlsPeerDependencies = [ 'react-native-safe-area-context', '@react-native-async-storage/async-storage', '@react-native-community/datetimepicker', '@react-native-community/slider', + ].filter((dep) => !packageJson.dependencies[dep] && !packageJson.devDependencies[dep]); + + const packagesToResolve = [ + ...controlsPeerDependencies, '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions', '@storybook/react-native', @@ -47,7 +50,6 @@ const generator = async ( packageManager.addScripts({ 'storybook-generate': 'sb-rn-get-stories', - 'storybook-watch': 'sb-rn-watcher', }); const storybookConfigFolder = '.storybook'; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index d54329288f97..0eb8e0bacaa7 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -224,8 +224,8 @@ export async function baseGenerator( extraAddonsToInstall.push( '@storybook/addon-links', - '@storybook/addon-essentials' - // '@chromatic-com/storybook@^1' + '@storybook/addon-essentials', + '@chromatic-com/storybook@^1' ); // added to main.js diff --git a/code/lib/cli/tsconfig.json b/code/lib/cli/tsconfig.json index e32ebe0f7b90..9c5db279ca2d 100644 --- a/code/lib/cli/tsconfig.json +++ b/code/lib/cli/tsconfig.json @@ -1,15 +1,11 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "types": [ - "node" - ], + "types": ["node"], "strict": true, "skipLibCheck": true, "resolveJsonModule": true, "noEmit": true }, - "include": [ - "src/**/*" - ] -} \ No newline at end of file + "include": ["src/**/*"] +} diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index f55c77becf84..4cc58a364813 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index ac50e8d6289c..52599bff2bfe 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 0d15d1e90dc9..92f99e76a24c 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -49,11 +49,6 @@ "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", - "@types/find-cache-dir": "^3.2.1", - "@types/fs-extra": "^11.0.4", - "@types/node": "^18.0.0", - "@types/node-fetch": "^2.6.4", - "@types/pretty-hrtime": "^1.0.0", "@yarnpkg/fslib": "2.10.3", "@yarnpkg/libzip": "2.3.0", "chalk": "^4.1.0", @@ -80,9 +75,13 @@ "util": "^0.12.4" }, "devDependencies": { - "@types/fs-extra": "^11.0.1", + "@types/find-cache-dir": "^3.2.1", + "@types/fs-extra": "^11.0.4", "@types/mock-fs": "^4.13.1", + "@types/node": "^18.0.0", + "@types/node-fetch": "^2.6.4", "@types/picomatch": "^2.3.0", + "@types/pretty-hrtime": "^1.0.0", "mock-fs": "^5.2.0", "slash": "^5.0.0", "type-fest": "~2.19", diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index 94ce77b1ccad..4699de998094 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,82 +1,82 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-beta.0', - '@storybook/addon-actions': '8.0.0-beta.0', - '@storybook/addon-backgrounds': '8.0.0-beta.0', - '@storybook/addon-controls': '8.0.0-beta.0', - '@storybook/addon-docs': '8.0.0-beta.0', - '@storybook/addon-essentials': '8.0.0-beta.0', - '@storybook/addon-highlight': '8.0.0-beta.0', - '@storybook/addon-interactions': '8.0.0-beta.0', - '@storybook/addon-jest': '8.0.0-beta.0', - '@storybook/addon-links': '8.0.0-beta.0', - '@storybook/addon-mdx-gfm': '8.0.0-beta.0', - '@storybook/addon-measure': '8.0.0-beta.0', - '@storybook/addon-outline': '8.0.0-beta.0', - '@storybook/addon-storysource': '8.0.0-beta.0', - '@storybook/addon-themes': '8.0.0-beta.0', - '@storybook/addon-toolbars': '8.0.0-beta.0', - '@storybook/addon-viewport': '8.0.0-beta.0', - '@storybook/angular': '8.0.0-beta.0', - '@storybook/blocks': '8.0.0-beta.0', - '@storybook/builder-manager': '8.0.0-beta.0', - '@storybook/builder-vite': '8.0.0-beta.0', - '@storybook/builder-webpack5': '8.0.0-beta.0', - '@storybook/channels': '8.0.0-beta.0', - '@storybook/cli': '8.0.0-beta.0', - '@storybook/client-logger': '8.0.0-beta.0', - '@storybook/codemod': '8.0.0-beta.0', - '@storybook/components': '8.0.0-beta.0', - '@storybook/core-common': '8.0.0-beta.0', - '@storybook/core-events': '8.0.0-beta.0', - '@storybook/core-server': '8.0.0-beta.0', - '@storybook/core-webpack': '8.0.0-beta.0', - '@storybook/csf-plugin': '8.0.0-beta.0', - '@storybook/csf-tools': '8.0.0-beta.0', - '@storybook/docs-tools': '8.0.0-beta.0', - '@storybook/ember': '8.0.0-beta.0', - '@storybook/html': '8.0.0-beta.0', - '@storybook/html-vite': '8.0.0-beta.0', - '@storybook/html-webpack5': '8.0.0-beta.0', - '@storybook/instrumenter': '8.0.0-beta.0', - '@storybook/manager': '8.0.0-beta.0', - '@storybook/manager-api': '8.0.0-beta.0', - '@storybook/nextjs': '8.0.0-beta.0', - '@storybook/node-logger': '8.0.0-beta.0', - '@storybook/preact': '8.0.0-beta.0', - '@storybook/preact-vite': '8.0.0-beta.0', - '@storybook/preact-webpack5': '8.0.0-beta.0', - '@storybook/preset-create-react-app': '8.0.0-beta.0', - '@storybook/preset-html-webpack': '8.0.0-beta.0', - '@storybook/preset-preact-webpack': '8.0.0-beta.0', - '@storybook/preset-react-webpack': '8.0.0-beta.0', - '@storybook/preset-server-webpack': '8.0.0-beta.0', - '@storybook/preset-svelte-webpack': '8.0.0-beta.0', - '@storybook/preset-vue3-webpack': '8.0.0-beta.0', - '@storybook/preview': '8.0.0-beta.0', - '@storybook/preview-api': '8.0.0-beta.0', - '@storybook/react': '8.0.0-beta.0', - '@storybook/react-dom-shim': '8.0.0-beta.0', - '@storybook/react-vite': '8.0.0-beta.0', - '@storybook/react-webpack5': '8.0.0-beta.0', - '@storybook/router': '8.0.0-beta.0', - '@storybook/server': '8.0.0-beta.0', - '@storybook/server-webpack5': '8.0.0-beta.0', - '@storybook/source-loader': '8.0.0-beta.0', - '@storybook/svelte': '8.0.0-beta.0', - '@storybook/svelte-vite': '8.0.0-beta.0', - '@storybook/svelte-webpack5': '8.0.0-beta.0', - '@storybook/sveltekit': '8.0.0-beta.0', - '@storybook/telemetry': '8.0.0-beta.0', - '@storybook/test': '8.0.0-beta.0', - '@storybook/theming': '8.0.0-beta.0', - '@storybook/types': '8.0.0-beta.0', - '@storybook/vue3': '8.0.0-beta.0', - '@storybook/vue3-vite': '8.0.0-beta.0', - '@storybook/vue3-webpack5': '8.0.0-beta.0', - '@storybook/web-components': '8.0.0-beta.0', - '@storybook/web-components-vite': '8.0.0-beta.0', - '@storybook/web-components-webpack5': '8.0.0-beta.0', - sb: '8.0.0-beta.0', - storybook: '8.0.0-beta.0', + '@storybook/addon-a11y': '8.0.0-beta.1', + '@storybook/addon-actions': '8.0.0-beta.1', + '@storybook/addon-backgrounds': '8.0.0-beta.1', + '@storybook/addon-controls': '8.0.0-beta.1', + '@storybook/addon-docs': '8.0.0-beta.1', + '@storybook/addon-essentials': '8.0.0-beta.1', + '@storybook/addon-highlight': '8.0.0-beta.1', + '@storybook/addon-interactions': '8.0.0-beta.1', + '@storybook/addon-jest': '8.0.0-beta.1', + '@storybook/addon-links': '8.0.0-beta.1', + '@storybook/addon-mdx-gfm': '8.0.0-beta.1', + '@storybook/addon-measure': '8.0.0-beta.1', + '@storybook/addon-outline': '8.0.0-beta.1', + '@storybook/addon-storysource': '8.0.0-beta.1', + '@storybook/addon-themes': '8.0.0-beta.1', + '@storybook/addon-toolbars': '8.0.0-beta.1', + '@storybook/addon-viewport': '8.0.0-beta.1', + '@storybook/angular': '8.0.0-beta.1', + '@storybook/blocks': '8.0.0-beta.1', + '@storybook/builder-manager': '8.0.0-beta.1', + '@storybook/builder-vite': '8.0.0-beta.1', + '@storybook/builder-webpack5': '8.0.0-beta.1', + '@storybook/channels': '8.0.0-beta.1', + '@storybook/cli': '8.0.0-beta.1', + '@storybook/client-logger': '8.0.0-beta.1', + '@storybook/codemod': '8.0.0-beta.1', + '@storybook/components': '8.0.0-beta.1', + '@storybook/core-common': '8.0.0-beta.1', + '@storybook/core-events': '8.0.0-beta.1', + '@storybook/core-server': '8.0.0-beta.1', + '@storybook/core-webpack': '8.0.0-beta.1', + '@storybook/csf-plugin': '8.0.0-beta.1', + '@storybook/csf-tools': '8.0.0-beta.1', + '@storybook/docs-tools': '8.0.0-beta.1', + '@storybook/ember': '8.0.0-beta.1', + '@storybook/html': '8.0.0-beta.1', + '@storybook/html-vite': '8.0.0-beta.1', + '@storybook/html-webpack5': '8.0.0-beta.1', + '@storybook/instrumenter': '8.0.0-beta.1', + '@storybook/manager': '8.0.0-beta.1', + '@storybook/manager-api': '8.0.0-beta.1', + '@storybook/nextjs': '8.0.0-beta.1', + '@storybook/node-logger': '8.0.0-beta.1', + '@storybook/preact': '8.0.0-beta.1', + '@storybook/preact-vite': '8.0.0-beta.1', + '@storybook/preact-webpack5': '8.0.0-beta.1', + '@storybook/preset-create-react-app': '8.0.0-beta.1', + '@storybook/preset-html-webpack': '8.0.0-beta.1', + '@storybook/preset-preact-webpack': '8.0.0-beta.1', + '@storybook/preset-react-webpack': '8.0.0-beta.1', + '@storybook/preset-server-webpack': '8.0.0-beta.1', + '@storybook/preset-svelte-webpack': '8.0.0-beta.1', + '@storybook/preset-vue3-webpack': '8.0.0-beta.1', + '@storybook/preview': '8.0.0-beta.1', + '@storybook/preview-api': '8.0.0-beta.1', + '@storybook/react': '8.0.0-beta.1', + '@storybook/react-dom-shim': '8.0.0-beta.1', + '@storybook/react-vite': '8.0.0-beta.1', + '@storybook/react-webpack5': '8.0.0-beta.1', + '@storybook/router': '8.0.0-beta.1', + '@storybook/server': '8.0.0-beta.1', + '@storybook/server-webpack5': '8.0.0-beta.1', + '@storybook/source-loader': '8.0.0-beta.1', + '@storybook/svelte': '8.0.0-beta.1', + '@storybook/svelte-vite': '8.0.0-beta.1', + '@storybook/svelte-webpack5': '8.0.0-beta.1', + '@storybook/sveltekit': '8.0.0-beta.1', + '@storybook/telemetry': '8.0.0-beta.1', + '@storybook/test': '8.0.0-beta.1', + '@storybook/theming': '8.0.0-beta.1', + '@storybook/types': '8.0.0-beta.1', + '@storybook/vue3': '8.0.0-beta.1', + '@storybook/vue3-vite': '8.0.0-beta.1', + '@storybook/vue3-webpack5': '8.0.0-beta.1', + '@storybook/web-components': '8.0.0-beta.1', + '@storybook/web-components-vite': '8.0.0-beta.1', + '@storybook/web-components-webpack5': '8.0.0-beta.1', + sb: '8.0.0-beta.1', + storybook: '8.0.0-beta.1', }; diff --git a/code/lib/core-common/templates/base-preview-head.html b/code/lib/core-common/templates/base-preview-head.html index c19b0b5bdbcf..c4732d25281c 100644 --- a/code/lib/core-common/templates/base-preview-head.html +++ b/code/lib/core-common/templates/base-preview-head.html @@ -62,8 +62,17 @@ left: 0; right: 0; padding: 20px; - font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', - BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: + 'Nunito Sans', + -apple-system, + '.SFNSText-Regular', + 'San Francisco', + BlinkMacSystemFont, + 'Segoe UI', + 'Helvetica Neue', + Helvetica, + Arial, + sans-serif; -webkit-font-smoothing: antialiased; overflow: auto; } @@ -257,7 +266,9 @@ .sb-argstableBlock-body { border-radius: 4px; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px; + box-shadow: + rgba(0, 0, 0, 0.1) 0 1px 3px 1px, + rgba(0, 0, 0, 0.065) 0 0 0 1px; } .sb-argstableBlock-body tr { background: transparent; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 03fd44c49bc6..36896a3bc07d 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 21ee8b12b6de..35141357cf47 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 69bb14698e7e..164aa3f9eddd 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 0759e3cbd778..3e919f6b704d 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index fec45c3e6296..e69bdb2d61cf 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index c3343d920484..f90022e891a1 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index d783812b8dbf..0a040fd1d028 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index ea873875fab6..4ab145c186af 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 33442736966d..756cc22bdb01 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-beta.0'; +export const version = '8.0.0-beta.1'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index e542ce6b66ad..b7f1add533ae 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/docs/storiesOf.md b/code/lib/preview-api/docs/storiesOf.md index 00f3b2945879..08e7009a9d0d 100644 --- a/code/lib/preview-api/docs/storiesOf.md +++ b/code/lib/preview-api/docs/storiesOf.md @@ -4,7 +4,7 @@ In Storybook 5.2 we introduced a simpler and more portable [Component Story Format](https://storybook.js.org/docs/react/api/csf), and all future tools and infrastructure will be oriented towards CSF. Therefore, we recommend migrating your stories out of `storiesOf` API, and even provide [automated tools to do this](#component-story-format-migration). -That said, the `storiesOf` API is not officially deprecated. For the time being we plan to support it for the foreseeable future. +That said, the `storiesOf` API is no longer actively maintained and has been removed as part of the Storybook 8 release. If you're working with a custom indexer or similar tooling that implements this API, we encourage using custom story indexers instead. Read our [Indexer API documentation](https://storybook.js.org/docs/api/main-config-indexers) for more information. ## storiesOf API diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 8ea9244bbf7d..481c0db5f1a4 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/src/modules/store/args.test.ts b/code/lib/preview-api/src/modules/store/args.test.ts index 0bfc4ab41a20..0d39874c766f 100644 --- a/code/lib/preview-api/src/modules/store/args.test.ts +++ b/code/lib/preview-api/src/modules/store/args.test.ts @@ -67,8 +67,9 @@ describe('mapArgsToTypes', () => { }); it('maps booleans', () => { + expect(mapArgsToTypes({ a: true }, { a: { type: booleanType } })).toStrictEqual({ a: true }); expect(mapArgsToTypes({ a: 'true' }, { a: { type: booleanType } })).toStrictEqual({ a: true }); - expect(mapArgsToTypes({ a: 'false' }, { a: { type: booleanType } })).toStrictEqual({ + expect(mapArgsToTypes({ a: false }, { a: { type: booleanType } })).toStrictEqual({ a: false, }); expect(mapArgsToTypes({ a: 'yes' }, { a: { type: booleanType } })).toStrictEqual({ a: false }); @@ -127,7 +128,7 @@ describe('mapArgsToTypes', () => { { key: { arr: ['1', '2'], - obj: { bool: 'true' }, + obj: { bool: true }, }, }, { @@ -157,7 +158,7 @@ describe('mapArgsToTypes', () => { key: [ { arr: ['1', '2'], - obj: { bool: 'true' }, + obj: { bool: true }, }, ], }, diff --git a/code/lib/preview-api/src/modules/store/args.ts b/code/lib/preview-api/src/modules/store/args.ts index 2634015bce76..7ce46f94a512 100644 --- a/code/lib/preview-api/src/modules/store/args.ts +++ b/code/lib/preview-api/src/modules/store/args.ts @@ -19,7 +19,7 @@ const map = (arg: unknown, argType: InputType): any => { case 'number': return Number(arg); case 'boolean': - return arg === 'true'; + return String(arg) === 'true'; case 'array': if (!type.value || !Array.isArray(arg)) return INCOMPATIBLE; return arg.reduce((acc, item, index) => { diff --git a/code/lib/preview-api/src/modules/store/csf/index.ts b/code/lib/preview-api/src/modules/store/csf/index.ts index 4b3aa8fa8c97..3ce7ca25109e 100644 --- a/code/lib/preview-api/src/modules/store/csf/index.ts +++ b/code/lib/preview-api/src/modules/store/csf/index.ts @@ -7,4 +7,4 @@ export * from './normalizeProjectAnnotations'; export * from './getValuesFromArgTypes'; export * from './composeConfigs'; export * from './stepRunners'; -export * from './testing-utils'; +export * from './portable-stories'; diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts new file mode 100644 index 000000000000..eae92f09aac8 --- /dev/null +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -0,0 +1,178 @@ +import { describe, expect, vi, it } from 'vitest'; +import { composeStory, composeStories } from './portable-stories'; + +// Most integration tests for this functionality are located under renderers/react +describe('composeStory', () => { + const meta = { + title: 'Button', + parameters: { + firstAddon: true, + }, + args: { + label: 'Hello World', + primary: true, + }, + }; + + it('should return story with composed args and parameters', () => { + const Story = () => {}; + Story.args = { primary: true }; + Story.parameters = { + parameters: { + secondAddon: true, + }, + }; + + const composedStory = composeStory(Story, meta); + expect(composedStory.args).toEqual({ ...Story.args, ...meta.args }); + expect(composedStory.parameters).toEqual( + expect.objectContaining({ ...Story.parameters, ...meta.parameters }) + ); + }); + + it('should compose with a play function', async () => { + const spy = vi.fn(); + const Story = () => {}; + Story.args = { + primary: true, + }; + Story.play = async (context: any) => { + spy(context); + }; + + const composedStory = composeStory(Story, meta); + await composedStory.play({ canvasElement: null }); + expect(spy).toHaveBeenCalledWith( + expect.objectContaining({ + args: { + ...Story.args, + ...meta.args, + }, + }) + ); + }); + + it('should throw when executing the play function but the story does not have one', async () => { + const Story = () => {}; + Story.args = { + primary: true, + }; + + const composedStory = composeStory(Story, meta); + expect(composedStory.play({ canvasElement: null })).rejects.toThrow(); + }); + + it('should throw an error if Story is undefined', () => { + expect(() => { + // @ts-expect-error (invalid input) + composeStory(undefined, meta); + }).toThrow(); + }); + + describe('Id of the story', () => { + it('is exposed correctly when composeStories is used', () => { + const module = { + default: { + title: 'Example/Button', + }, + CSF3Primary: () => {}, + }; + const Primary = composeStory(module.CSF3Primary, module.default, {}); + expect(Primary.id).toBe('example-button--csf-3-primary'); + }); + it('is exposed correctly when composeStory is used and exportsName is passed', () => { + const module = { + default: { + title: 'Example/Button', + }, + CSF3Primary: () => {}, + }; + const Primary = composeStory(module.CSF3Primary, module.default, {}, {}, 'overwritten'); + expect(Primary.id).toBe('example-button--overwritten'); + }); + it("is not unique when composeStory is used and exportsName isn't passed", () => { + const Primary = composeStory({ render: () => {} }, {}); + expect(Primary.id).toContain('unknown'); + }); + }); +}); + +describe('composeStories', () => { + const composeStoryFn = vi.fn((v) => v); + const defaultAnnotations = { render: () => '' }; + it('should call composeStoryFn with stories', () => { + const composeStorySpy = vi.fn((v) => v); + const module = { + default: { + title: 'Button', + }, + StoryOne: () => {}, + StoryTwo: () => {}, + }; + const globalConfig = {}; + composeStories(module, globalConfig, composeStorySpy); + expect(composeStorySpy).toHaveBeenCalledWith( + module.StoryOne, + module.default, + globalConfig, + 'StoryOne' + ); + expect(composeStorySpy).toHaveBeenCalledWith( + module.StoryTwo, + module.default, + globalConfig, + 'StoryTwo' + ); + }); + + it('should not call composeStoryFn for non-story exports', () => { + const composeStorySpy = vi.fn((v) => v); + const module = { + default: { + title: 'Button', + excludeStories: /Data/, + }, + mockData: {}, + }; + composeStories(module, defaultAnnotations, composeStoryFn); + expect(composeStorySpy).not.toHaveBeenCalled(); + }); + + describe('non-story exports', () => { + it('should filter non-story exports with excludeStories', () => { + const StoryModuleWithNonStoryExports = { + default: { + title: 'Some/Component', + excludeStories: /.*Data/, + }, + LegitimateStory: () => 'hello world', + mockData: {}, + }; + + const result = composeStories( + StoryModuleWithNonStoryExports, + defaultAnnotations, + composeStoryFn + ); + expect(Object.keys(result)).not.toContain('mockData'); + }); + + it('should filter non-story exports with includeStories', () => { + const StoryModuleWithNonStoryExports = { + default: { + title: 'Some/Component', + includeStories: /.*Story/, + }, + LegitimateStory: () => 'hello world', + mockData: {}, + }; + + const result = composeStories( + StoryModuleWithNonStoryExports, + defaultAnnotations, + composeStoryFn + ); + expect(Object.keys(result)).not.toContain('mockData'); + }); + }); +}); diff --git a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts similarity index 72% rename from code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts rename to code/lib/preview-api/src/modules/store/csf/portable-stories.ts index b15a3345ed0c..0ebf858e96e8 100644 --- a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts @@ -12,15 +12,16 @@ import type { Parameters, ComposedStoryFn, StrictArgTypes, + ComposedStoryPlayContext, } from '@storybook/types'; import { HooksContext } from '../../../addons'; -import { composeConfigs } from '../composeConfigs'; -import { prepareContext, prepareStory } from '../prepareStory'; -import { normalizeStory } from '../normalizeStory'; -import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; -import { getValuesFromArgTypes } from '../getValuesFromArgTypes'; -import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations'; +import { composeConfigs } from './composeConfigs'; +import { prepareContext, prepareStory } from './prepareStory'; +import { normalizeStory } from './normalizeStory'; +import { normalizeComponentAnnotations } from './normalizeComponentAnnotations'; +import { getValuesFromArgTypes } from './getValuesFromArgTypes'; +import { normalizeProjectAnnotations } from './normalizeProjectAnnotations'; let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs([]); @@ -74,24 +75,42 @@ export function composeStory = { + hooks: new HooksContext(), + globals: defaultGlobals, + args: { ...story.initialArgs }, + viewMode: 'story', + loaded: {}, + abortSignal: null as unknown as AbortSignal, + canvasElement: null, + ...story, + }; + const composedStory: ComposedStoryFn> = Object.assign( (extraArgs?: Partial) => { - const context: Partial = { - ...story, - hooks: new HooksContext(), - globals: defaultGlobals, - args: { ...story.initialArgs, ...extraArgs }, + const finalContext: StoryContext = { + ...context, + args: { ...context.initialArgs, ...extraArgs }, }; - return story.unboundStoryFn(prepareContext(context as StoryContext)); + return story.unboundStoryFn(prepareContext(finalContext)); }, { storyName, args: story.initialArgs as Partial, - play: story.playFunction as ComposedStoryPlayFn>, parameters: story.parameters as Parameters, argTypes: story.argTypes as StrictArgTypes, id: story.id, + play: (async (extraContext: ComposedStoryPlayContext) => { + if (story.playFunction === undefined) { + throw new Error('The story does not have a play function. Make sure to add one.'); + } + + await story.playFunction({ + ...context, + ...extraContext, + }); + }) as unknown as ComposedStoryPlayFn>, } ); diff --git a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.test.ts b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.test.ts deleted file mode 100644 index f0c811aa5abc..000000000000 --- a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.test.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { describe, expect, vi, it } from 'vitest'; -import { composeStory, composeStories } from './index'; - -// Most integration tests for this functionality are located under renderers/react -describe('composeStory', () => { - const meta = { - title: 'Button', - parameters: { - firstAddon: true, - }, - args: { - label: 'Hello World', - primary: true, - }, - }; - - it('should return story with composed args and parameters', () => { - const Story = () => {}; - Story.args = { primary: true }; - Story.parameters = { - parameters: { - secondAddon: true, - }, - }; - - const composedStory = composeStory(Story, meta); - expect(composedStory.args).toEqual({ ...Story.args, ...meta.args }); - expect(composedStory.parameters).toEqual( - expect.objectContaining({ ...Story.parameters, ...meta.parameters }) - ); - }); - - it('should throw an error if Story is undefined', () => { - expect(() => { - // @ts-expect-error (invalid input) - composeStory(undefined, meta); - }).toThrow(); - }); -}); - -describe('composeStories', () => { - it('should call composeStoryFn with stories', () => { - const composeConfigFn = vi.fn((v) => v); - const module = { - default: { - title: 'Button', - }, - StoryOne: () => {}, - StoryTwo: () => {}, - }; - const globalConfig = {}; - composeStories(module, globalConfig, composeConfigFn); - expect(composeConfigFn).toHaveBeenCalledWith( - module.StoryOne, - module.default, - globalConfig, - 'StoryOne' - ); - expect(composeConfigFn).toHaveBeenCalledWith( - module.StoryTwo, - module.default, - globalConfig, - 'StoryTwo' - ); - }); - - it('should not call composeStoryFn for non-story exports', () => { - const composeConfigFn = vi.fn((v) => v); - const module = { - default: { - title: 'Button', - excludeStories: /Data/, - }, - mockData: {}, - }; - composeStories(module, {}, composeConfigFn); - expect(composeConfigFn).not.toHaveBeenCalled(); - }); -}); diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index e5eea22deffc..9b6c52feacda 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index c8e0e08c8ae6..adb4dc97e083 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 3d2753b5c899..ed26d25929ab 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index ed88aa198683..9cab29821d0d 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index 0d62154642b6..d5ff447bf711 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 21b78a6df9da..bb5cac4461e5 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index cc3893088f08..d431265e2cb8 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -72,6 +72,14 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + }, "publishConfig": { "access": "public" }, diff --git a/code/lib/types/package.json b/code/lib/types/package.json index ffb3c4ad5dc3..e2b155001ae7 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 8abee33a9a35..6a17ddf14470 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -184,7 +184,7 @@ "@typescript-eslint/experimental-utils": "^5.62.0", "@typescript-eslint/parser": "^6.18.1", "@vitejs/plugin-react": "^3.0.1", - "@vitest/coverage-v8": "^1.0.1", + "@vitest/coverage-v8": "^1.2.2", "chromatic": "7.1.0", "concurrently": "^5.3.0", "cross-env": "^7.0.3", @@ -221,7 +221,7 @@ "util": "^0.12.4", "vite": "^4.0.0", "vite-plugin-turbosnap": "^1.0.1", - "vitest": "^1.0.1", + "vitest": "^1.2.2", "wait-on": "^7.0.1" }, "devDependencies": { diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 63755379e0fa..7b0c006ff04a 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 2a6eb8148e9a..2e086ea9bb49 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 0556560b4928..a8512abf7b61 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 8caada62cbb9..1ba9eec38d0c 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index bcb57f9ffa80..f70abc4c37d2 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.snapshot index 0057e3dd70c4..6d22e73bf022 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.snapshot @@ -1,23 +1,18 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler a11y.json 1`] = ` -" export default { - title: \\"Addons/a11y\\", + title: "Addons/a11y", parameters: { options: { - selectedPanel: \\"storybook/a11y/panel\\" + selectedPanel: "storybook/a11y/panel" } } }; export const Label = { - name: \\"Label\\", + name: "Label", parameters: { server: { - id: \\"addons/a11y/label\\" + id: "addons/a11y/label" } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.snapshot index b2f7434f4b0b..2317e70d92d2 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.snapshot @@ -1,30 +1,25 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler actions.json 1`] = ` -" export default { - title: \\"Addons/Actions\\", + title: "Addons/Actions", parameters: { options: { - selectedPanel: \\"storybook/actions/panel\\" + selectedPanel: "storybook/actions/panel" } } }; export const Multiple_actions_config = { - name: \\"Multiple actions + config\\", + name: "Multiple actions + config", parameters: { actions: [ - \\"click\\", - \\"contextmenu\\", + "click", + "contextmenu", { clearOnStoryChange: false } ], server: { - id: \\"addons/actions/story3\\" + id: "addons/actions/story3" } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.snapshot index 12bac06c25cb..40a2bf3524a1 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.snapshot @@ -1,18 +1,15 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler backgrounds.json 1`] = ` -" export default { - title: \\"Addons/Backgrounds\\", + title: "Addons/Backgrounds", parameters: { backgrounds: [ { - name: \\"light\\", - value: \\"#eeeeee\\" + name: "light", + value: "#eeeeee" }, { - name: \\"dark\\", - value: \\"#222222\\", + name: "dark", + value: "#222222", default: true } ] @@ -20,12 +17,10 @@ export default { }; export const Story_1 = { - name: \\"Story 1\\", + name: "Story 1", parameters: { server: { - id: \\"addons/backgrounds/story1\\" + id: "addons/backgrounds/story1" } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.snapshot index ccbda5cd711c..519ae472aca0 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.snapshot @@ -1,62 +1,57 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler controls.json 1`] = ` -" export default { - title: \\"Addons/Controls\\", + title: "Addons/Controls", parameters: { options: { - selectedPanel: \\"storybook/controls/panel\\" + selectedPanel: "storybook/controls/panel" } } }; export const Simple = { - name: \\"Simple\\", + name: "Simple", parameters: { server: { - id: \\"addons/controls/simple\\" + id: "addons/controls/simple" } }, args: { - name: \\"John Doe\\", - birthday: \\"1960-12-25T00:42:03.600Z\\", - favorite_color: \\"red\\", + name: "John Doe", + birthday: "1960-12-25T00:42:03.600Z", + favorite_color: "red", active: true, pets: 2, sports: [ - \\"football\\", - \\"baseball\\" + "football", + "baseball" ], - favorite_food: \\"Ice Cream\\", + favorite_food: "Ice Cream", other_things: { - hair: \\"Brown\\", - eyes: \\"Blue\\" + hair: "Brown", + eyes: "Blue" } }, argTypes: { birthday: { control: { - type: \\"date\\" + type: "date" } }, favorite_color: { control: { - type: \\"color\\" + type: "color" } }, favorite_food: { control: { - type: \\"select\\", + type: "select", options: { - hot_dog: \\"Hot Dog\\", - pizza: \\"Pizza\\", - burgers: \\"Burgers\\", - ice_cream: \\"Ice Cream\\" + hot_dog: "Hot Dog", + pizza: "Pizza", + burgers: "Burgers", + ice_cream: "Ice Cream" } } } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot index 14b34271465e..c8af3046016c 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot @@ -1,62 +1,57 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler kitchen_sink.json 1`] = ` -" export default { - title: \\"Kitchen Sink\\", + title: "Kitchen Sink", parameters: { backgrounds: [ { - name: \\"light\\", - value: \\"#eeeeee\\" + name: "light", + value: "#eeeeee" }, { - name: \\"dark\\", - value: \\"#222222\\", + name: "dark", + value: "#222222", default: true } ], options: { - selectedPanel: \\"storybook/a11y/panel\\" + selectedPanel: "storybook/a11y/panel" }, server: { params: { - color: \\"red\\" + color: "red" } } } }; export const Heading = { - name: \\"Heading\\", + name: "Heading", parameters: { actions: [ - \\"click\\", - \\"contextmenu\\", + "click", + "contextmenu", { clearOnStoryChange: false } ], server: { - id: \\"demo/heading\\", + id: "demo/heading", params: { - color: \\"orange\\" + color: "orange" } } }, args: { - name: \\"John Doe\\", + name: "John Doe", age: 44 } }; export const Button = { - name: \\"Button\\", + name: "Button", parameters: { server: { - id: \\"demo/button\\" + id: "demo/button" } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/links.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/links.snapshot index 9c269a837cf1..140837fa3c52 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/links.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/links.snapshot @@ -1,18 +1,13 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler links.json 1`] = ` -" export default { - title: \\"Welcome\\", + title: "Welcome", }; export const Welcome = { - name: \\"Welcome\\", + name: "Welcome", parameters: { server: { - id: \\"welcome/welcome\\" + id: "welcome/welcome" } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.snapshot index 756da4e91ab6..1e4c59f1ea35 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.snapshot @@ -1,36 +1,31 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler multiple_stories.json 1`] = ` -" export default { - title: \\"Demo\\", + title: "Demo", }; export const Heading = { - name: \\"Heading\\", + name: "Heading", parameters: { server: { - id: \\"demo/heading\\" + id: "demo/heading" } } }; export const Headings = { - name: \\"Headings\\", + name: "Headings", parameters: { server: { - id: \\"demo/headings\\" + id: "demo/headings" } } }; export const Button = { - name: \\"Button\\", + name: "Button", parameters: { server: { - id: \\"demo/button\\" + id: "demo/button" } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.json b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.json index 60f6b720cf42..5084fdbe743f 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.json +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.json @@ -2,7 +2,8 @@ "title": "Params", "parameters": { "server": { - "params": { "color": "red" } + "params": { "color": "red" }, + "1200x600": { "viewport": { "width": 1200, "height": 600 } } } }, "stories": [ diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.snapshot index 1423ce39b9c5..0c6757db5a00 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params.snapshot @@ -1,28 +1,29 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler params.json 1`] = ` -" export default { - title: \\"Params\\", + title: "Params", parameters: { server: { params: { - color: \\"red\\" + color: "red" + }, + 1200x600: { + viewport: { + width: 1200, + height: 600 + } } } } }; export const Story = { - name: \\"Story\\", + name: "Story", parameters: { server: { - id: \\"params/story\\", + id: "params/story", params: { - message: \\"Hello World\\" + message: "Hello World" } } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.snapshot index 11a59bd1b516..7d6396a17ece 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.snapshot @@ -1,29 +1,24 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`json-to-csf-compiler params_override.json 1`] = ` -" export default { - title: \\"Params\\", + title: "Params", parameters: { server: { params: { - color: \\"red\\" + color: "red" } } } }; export const Override = { - name: \\"Override\\", + name: "Override", parameters: { server: { - id: \\"params/override\\", + id: "params/override", params: { - message: \\"Hello World\\", - color: \\"green\\" + message: "Hello World", + color: "green" } } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.snapshot index cde9cda3d0bc..f22f2f5685d5 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.snapshot @@ -1,36 +1,31 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ya?ml-to-csf-compiler yaml.yaml 1`] = ` -" export default { - title: \\"Demo YAML\\", + title: "Demo YAML", }; export const Heading = { - name: \\"Heading\\", + name: "Heading", parameters: { server: { - id: \\"yaml/heading\\" + id: "yaml/heading" } } }; export const Headings = { - name: \\"Headings\\", + name: "Headings", parameters: { server: { - id: \\"yaml/headings\\" + id: "yaml/headings" } } }; export const Button = { - name: \\"Button\\", + name: "Button", parameters: { server: { - id: \\"yaml/button\\" + id: "yaml/button" } } }; -" -`; diff --git a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.snapshot b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.snapshot index 15c610e2fe6e..c95096f6c85e 100644 --- a/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.snapshot +++ b/code/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.snapshot @@ -1,36 +1,31 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ya?ml-to-csf-compiler yml.yml 1`] = ` -" export default { - title: \\"Demo YML\\", + title: "Demo YML", }; export const Heading = { - name: \\"Heading\\", + name: "Heading", parameters: { server: { - id: \\"yaml/heading\\" + id: "yaml/heading" } } }; export const Headings = { - name: \\"Headings\\", + name: "Headings", parameters: { server: { - id: \\"yaml/headings\\" + id: "yaml/headings" } } }; export const Button = { - name: \\"Button\\", + name: "Button", parameters: { server: { - id: \\"yaml/button\\" + id: "yaml/button" } } }; -" -`; diff --git a/code/presets/server-webpack/vitest.config.ts b/code/presets/server-webpack/vitest.config.ts new file mode 100644 index 000000000000..045610882bc0 --- /dev/null +++ b/code/presets/server-webpack/vitest.config.ts @@ -0,0 +1,14 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { defineConfig, mergeConfig } from 'vitest/config'; +import { sep, posix } from 'path'; +import { vitestCommonConfig } from '../../vitest.workspace'; + +export default mergeConfig( + vitestCommonConfig, + defineConfig({ + test: { + environment: 'node', + name: __dirname.split(sep).slice(-2).join(posix.sep), + }, + }) +); diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 0e1578f51ca0..851637defe5b 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md index e361f8bc4222..4c2a2df89914 100644 --- a/code/presets/vue3-webpack/README.md +++ b/code/presets/vue3-webpack/README.md @@ -3,4 +3,4 @@ This package is a [preset](https://storybook.js.org/docs/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue 3. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/why-storybook) \ No newline at end of file +- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/why-storybook) diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index a44399cfa4a6..b3101a4d0a20 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 051ed4fa1d2b..aa17c45d0da2 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index b5b2f347dad3..9acec879c52e 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 07d8aea98f46..a98f4977760f 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/src/__test__/__snapshots__/internals.test.tsx.snap b/code/renderers/react/src/__test__/__snapshots__/portable-stories.test.tsx.snap similarity index 100% rename from code/renderers/react/src/__test__/__snapshots__/internals.test.tsx.snap rename to code/renderers/react/src/__test__/__snapshots__/portable-stories.test.tsx.snap diff --git a/code/renderers/react/src/__test__/internals.test.tsx b/code/renderers/react/src/__test__/internals.test.tsx deleted file mode 100644 index 8bed037619be..000000000000 --- a/code/renderers/react/src/__test__/internals.test.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { describe, it, expect } from 'vitest'; -import React from 'react'; -import { addons } from '@storybook/preview-api'; -import { cleanup, render, screen } from '@testing-library/react'; - -import { composeStories, composeStory } from '..'; - -import * as stories from './Button.stories'; - -const { CSF2StoryWithParamsAndDecorator } = composeStories(stories); - -it('returns composed args including default values from argtypes', () => { - expect(CSF2StoryWithParamsAndDecorator.args).toEqual({ - ...stories.CSF2StoryWithParamsAndDecorator.args, - }); -}); - -it('returns composed parameters from story', () => { - expect(CSF2StoryWithParamsAndDecorator.parameters).toEqual( - expect.objectContaining({ - ...stories.CSF2StoryWithParamsAndDecorator.parameters, - }) - ); -}); - -describe('Id of the story', () => { - it('is exposed correctly when composeStories is used', () => { - expect(CSF2StoryWithParamsAndDecorator.id).toBe( - 'example-button--csf-2-story-with-params-and-decorator' - ); - }); - it('is exposed correctly when composeStory is used and exportsName is passed', () => { - const exportName = Object.entries(stories).filter( - ([_, story]) => story === stories.CSF3Primary - )[0][0]; - const Primary = composeStory(stories.CSF3Primary, stories.default, {}, exportName); - expect(Primary.id).toBe('example-button--csf-3-primary'); - }); - it("is not unique when composeStory is used and exportsName isn't passed", () => { - const Primary = composeStory(stories.CSF3Primary, stories.default); - expect(Primary.id).toContain('unknown'); - }); -}); - -// 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, { - decorators: [ - (StoryFn: any) => { - addons.getChannel(); - return ; - }, - ], - }); - render(Hello world); - const buttonElement = screen.getByText(/Hello world/i); - expect(buttonElement).not.toBeNull(); - cleanup(); -}); - -describe('Unsupported formats', () => { - it('should throw error if story is undefined', () => { - const UnsupportedStory = () =>
hello world
; - UnsupportedStory.story = { parameters: {} }; - - const UnsupportedStoryModule: any = { - default: {}, - UnsupportedStory: undefined, - }; - - expect(() => { - composeStories(UnsupportedStoryModule); - }).toThrow(); - }); -}); - -describe('non-story exports', () => { - it('should filter non-story exports with excludeStories', () => { - const StoryModuleWithNonStoryExports = { - default: { - title: 'Some/Component', - excludeStories: /.*Data/, - }, - LegitimateStory: () =>
hello world
, - mockData: {}, - }; - - const result = composeStories(StoryModuleWithNonStoryExports); - expect(Object.keys(result)).not.toContain('mockData'); - }); - - it('should filter non-story exports with includeStories', () => { - const StoryModuleWithNonStoryExports = { - default: { - title: 'Some/Component', - includeStories: /.*Story/, - }, - LegitimateStory: () =>
hello world
, - mockData: {}, - }; - - const result = composeStories(StoryModuleWithNonStoryExports); - expect(Object.keys(result)).not.toContain('mockData'); - }); -}); - -// Batch snapshot testing -const testCases = Object.values(composeStories(stories)).map((Story) => [ - // The ! is necessary in Typescript only, as the property is part of a partial type - Story.storyName!, - Story, -]); -it.each(testCases)('Renders %s story', async (_storyName, Story) => { - cleanup(); - const tree = await render(); - expect(tree.baseElement).toMatchSnapshot(); -}); diff --git a/code/renderers/react/src/__test__/composeStories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx similarity index 83% rename from code/renderers/react/src/__test__/composeStories.test.tsx rename to code/renderers/react/src/__test__/portable-stories.test.tsx index a8cc360e751b..221404d5ee42 100644 --- a/code/renderers/react/src/__test__/composeStories.test.tsx +++ b/code/renderers/react/src/__test__/portable-stories.test.tsx @@ -1,11 +1,11 @@ import { vi, it, expect, afterEach, describe } from 'vitest'; import React from 'react'; import { render, screen, cleanup } from '@testing-library/react'; - +import { addons } from '@storybook/preview-api'; import type { Meta } from '@storybook/react'; import { expectTypeOf } from 'expect-type'; -import { setProjectAnnotations, composeStories, composeStory } from '..'; +import { setProjectAnnotations, composeStories, composeStory } from '..'; import type { Button } from './Button'; import * as stories from './Button.stories'; @@ -106,6 +106,21 @@ describe('CSF3', () => { }); }); +// 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, { + decorators: [ + (StoryFn: any) => { + addons.getChannel(); + return StoryFn(); + }, + ], + }); + render(Hello world); + const buttonElement = screen.getByText(/Hello world/i); + expect(buttonElement).not.toBeNull(); +}); + describe('ComposeStories types', () => { // this file tests Typescript types that's why there are no assertions it('Should support typescript operators', () => { @@ -122,3 +137,11 @@ describe('ComposeStories types', () => { }).toMatchTypeOf(); }); }); + +// Batch snapshot testing +const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName, Story]); +it.each(testCases)('Renders %s story', async (_storyName, Story) => { + cleanup(); + const tree = await render(); + expect(tree.baseElement).toMatchSnapshot(); +}); diff --git a/code/renderers/react/src/index.ts b/code/renderers/react/src/index.ts index 07a118109716..bad002de9370 100644 --- a/code/renderers/react/src/index.ts +++ b/code/renderers/react/src/index.ts @@ -4,7 +4,7 @@ import './globals'; export * from './public-types'; -export * from './testing-api'; +export * from './portable-stories'; // optimization: stop HMR propagation in webpack if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/react/src/testing-api.ts b/code/renderers/react/src/portable-stories.ts similarity index 100% rename from code/renderers/react/src/testing-api.ts rename to code/renderers/react/src/portable-stories.ts diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 3b3c14027b3e..7eee24a42b0e 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 0b114b0fcec3..411011c64088 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index e3681176fb24..db50b0d05ecc 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts b/code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts index 1b14978a9976..239416df5c35 100644 --- a/code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts +++ b/code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts @@ -53,7 +53,6 @@ const getCaptionForLocale = (locale: string) => { export const CSF2StoryWithLocale: CSF2Story = (args, { globals }) => ({ components: { Button }, setup() { - console.log({ globals }); const label = getCaptionForLocale(globals.locale); return { args: { ...args, label } }; }, diff --git a/code/renderers/vue3/src/__tests__/composeStories/__snapshots__/internals.test.tsx.snap b/code/renderers/vue3/src/__tests__/composeStories/__snapshots__/portable-stories.test.ts.snap similarity index 100% rename from code/renderers/vue3/src/__tests__/composeStories/__snapshots__/internals.test.tsx.snap rename to code/renderers/vue3/src/__tests__/composeStories/__snapshots__/portable-stories.test.ts.snap diff --git a/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx b/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx deleted file mode 100644 index 3be07251c9c0..000000000000 --- a/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React from 'react'; -import { addons } from '@storybook/preview-api'; -import { render, screen } from '@testing-library/vue'; -import { describe, it, expect } from 'vitest'; - -import { composeStories, composeStory } from '../../testing-api'; - -import * as stories from './Button.stories'; - -const { CSF2StoryWithParamsAndDecorator } = composeStories(stories); - -it('returns composed args including default values from argtypes', () => { - expect({ - ...stories.default.args, - ...CSF2StoryWithParamsAndDecorator.args, - }).toEqual(expect.objectContaining(CSF2StoryWithParamsAndDecorator.args)); -}); - -it('returns composed parameters from story', () => { - expect(CSF2StoryWithParamsAndDecorator.parameters).toEqual( - expect.objectContaining({ - ...stories.CSF2StoryWithParamsAndDecorator.parameters, - }) - ); -}); - -describe('Id of the story', () => { - it('is exposed correctly when composeStories is used', () => { - expect(CSF2StoryWithParamsAndDecorator.id).toBe( - 'example-button--csf-2-story-with-params-and-decorator' - ); - }); - it('is exposed correctly when composeStory is used and exportsName is passed', () => { - const exportName = Object.entries(stories).filter( - ([_, story]) => story === stories.CSF3Primary - )[0][0]; - const Primary = composeStory(stories.CSF3Primary, stories.default, {}, exportName); - expect(Primary.id).toBe('example-button--csf-3-primary'); - }); - it("is not unique when composeStory is used and exportsName isn't passed", () => { - const Primary = composeStory(stories.CSF3Primary, stories.default); - expect(Primary.id).toContain('unknown'); - }); -}); - -// 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, { - decorators: [ - (StoryFn: any) => { - addons.getChannel(); - return StoryFn(); - }, - ], - }); - render(PrimaryWithChannels({ label: 'Hello world' })); - const buttonElement = screen.getByText(/Hello world/i); - expect(buttonElement).not.toBeNull(); -}); - -describe('Unsupported formats', () => { - it('should throw error if story is undefined', () => { - const UnsupportedStory = () =>
hello world
; - UnsupportedStory.story = { parameters: {} }; - - const UnsupportedStoryModule: any = { - default: {}, - UnsupportedStory: undefined, - }; - - expect(() => { - composeStories(UnsupportedStoryModule); - }).toThrow(); - }); -}); - -describe('non-story exports', () => { - it('should filter non-story exports with excludeStories', () => { - const StoryModuleWithNonStoryExports = { - default: { - title: 'Some/Component', - excludeStories: /.*Data/, - }, - LegitimateStory: () =>
hello world
, - mockData: {}, - }; - - const result = composeStories(StoryModuleWithNonStoryExports); - expect(Object.keys(result)).not.toContain('mockData'); - }); - - it('should filter non-story exports with includeStories', () => { - const StoryModuleWithNonStoryExports = { - default: { - title: 'Some/Component', - includeStories: /.*Story/, - }, - LegitimateStory: () =>
hello world
, - mockData: {}, - }; - - const result = composeStories(StoryModuleWithNonStoryExports); - expect(Object.keys(result)).not.toContain('mockData'); - }); -}); - -// Batch snapshot testing -const testCases = Object.values(composeStories(stories)).map((Story) => [ - // The ! is necessary in Typescript only, as the property is part of a partial type - Story.storyName!, - Story, -]); -it.each(testCases)('Renders %s story', async (_storyName, Story) => { - if (typeof Story === 'string' || _storyName === 'CSF2StoryWithParamsAndDecorator') { - return; - } - - await new Promise((resolve) => setTimeout(resolve, 0)); - - const tree = await render(Story()); - expect(tree.baseElement).toMatchSnapshot(); -}); diff --git a/code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts similarity index 79% rename from code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts rename to code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts index cb2372a4c4e9..a56866fd6227 100644 --- a/code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts +++ b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts @@ -1,11 +1,13 @@ /// ; import { it, expect, vi, describe } from 'vitest'; import { render, screen } from '@testing-library/vue'; +import { addons } from '@storybook/preview-api'; import { expectTypeOf } from 'expect-type'; import type { Meta } from '@storybook/vue3'; + import * as stories from './Button.stories'; import type Button from './Button.vue'; -import { composeStories, composeStory, setProjectAnnotations } from '../../testing-api'; +import { composeStories, composeStory, setProjectAnnotations } from '../../portable-stories'; // example with composeStories, returns an object with all stories composed with args/decorators const { CSF3Primary } = composeStories(stories); @@ -91,6 +93,21 @@ describe('CSF3', () => { }); }); +// 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, { + decorators: [ + (StoryFn: any) => { + addons.getChannel(); + return StoryFn(); + }, + ], + }); + render(PrimaryWithChannels({ label: 'Hello world' })); + const buttonElement = screen.getByText(/Hello world/i); + expect(buttonElement).not.toBeNull(); +}); + describe('ComposeStories types', () => { it('Should support typescript operators', () => { type ComposeStoriesParam = Parameters[0]; @@ -106,3 +123,16 @@ describe('ComposeStories types', () => { }).toMatchTypeOf(); }); }); + +// Batch snapshot testing +const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName, Story]); +it.each(testCases)('Renders %s story', async (_storyName, Story) => { + if (typeof Story === 'string' || _storyName === 'CSF2StoryWithParamsAndDecorator') { + return; + } + + await new Promise((resolve) => setTimeout(resolve, 0)); + + const tree = await render(Story()); + expect(tree.baseElement).toMatchSnapshot(); +}); diff --git a/code/renderers/vue3/src/index.ts b/code/renderers/vue3/src/index.ts index d3c7431a00e1..87e6074fb708 100644 --- a/code/renderers/vue3/src/index.ts +++ b/code/renderers/vue3/src/index.ts @@ -4,7 +4,7 @@ import './globals'; export { setup } from './render'; export * from './public-types'; -export * from './testing-api'; +export * from './portable-stories'; // optimization: stop HMR propagation in webpack try { diff --git a/code/renderers/vue3/src/testing-api.ts b/code/renderers/vue3/src/portable-stories.ts similarity index 100% rename from code/renderers/vue3/src/testing-api.ts rename to code/renderers/vue3/src/portable-stories.ts diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 362e8d0a667c..746ed69809a8 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 40180c3914ed..bb26603fce09 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Storybook Doc Blocks", "keywords": [ "storybook" @@ -78,6 +78,14 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + }, "publishConfig": { "access": "public" }, diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 18e7af6e9b99..9c1df8f39fa5 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 425a62f30daa..116cf3e93d2b 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-beta.0", + "version": "8.0.0-beta.1", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/ui/manager/src/components/preview/Preview.tsx b/code/ui/manager/src/components/preview/Preview.tsx index 63d2a7fb8601..49c77ba6a125 100644 --- a/code/ui/manager/src/components/preview/Preview.tsx +++ b/code/ui/manager/src/components/preview/Preview.tsx @@ -103,7 +103,7 @@ const Preview = React.memo(function Preview(props) { /> {tabContent && {tabContent({ active: true })}} - + diff --git a/code/ui/manager/src/components/preview/utils/components.ts b/code/ui/manager/src/components/preview/utils/components.ts index 1e6e358f8fa0..a8c2d9b30f98 100644 --- a/code/ui/manager/src/components/preview/utils/components.ts +++ b/code/ui/manager/src/components/preview/utils/components.ts @@ -16,21 +16,20 @@ export const FrameWrap = styled.div({ background: 'transparent', flex: 1, }); -export const CanvasWrap = styled.div<{ display: boolean }>( +export const CanvasWrap = styled.div<{ show: boolean }>( { alignContent: 'center', alignItems: 'center', justifyContent: 'center', justifyItems: 'center', overflow: 'auto', - display: 'grid', gridTemplateColumns: '100%', gridTemplateRows: '100%', position: 'relative', width: '100%', height: '100%', }, - ({ display }) => (display ? {} : { display: 'none' }) + ({ show }) => ({ display: show ? 'grid' : 'none' }) ); export const UnstyledLink = styled(Link)({ diff --git a/code/ui/manager/src/components/sidebar/Refs.tsx b/code/ui/manager/src/components/sidebar/Refs.tsx index 04f90148f7b8..1cd5c6c7a5a0 100644 --- a/code/ui/manager/src/components/sidebar/Refs.tsx +++ b/code/ui/manager/src/components/sidebar/Refs.tsx @@ -67,6 +67,7 @@ const CollapseButton = styled.button(({ theme }) => ({ gap: 6, alignItems: 'center', cursor: 'pointer', + overflow: 'hidden', '&:focus': { borderColor: theme.color.secondary, diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 525337b8b2aa..cbbecc8264a6 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -20,6 +20,7 @@ import { isSearchResult, isExpandType } from './types'; import { scrollIntoView, searchItem } from '../../utils/tree'; import { getGroupStatus, getHighestStatus } from '../../utils/status'; +import { useLayout } from '../layout/LayoutProvider'; const { document } = global; @@ -288,6 +289,7 @@ export const Search = React.memo<{ }, [inputRef, selectStory, showAllComponents] ); + const { isMobile } = useLayout(); return ( @@ -359,7 +361,7 @@ export const Search = React.memo<{ {/* @ts-expect-error (TODO) */} - {enableShortcuts && !isOpen && ( + {!isMobile && enableShortcuts && !isOpen && ( {searchShortcut === '⌘ K' ? ( <> diff --git a/code/vitest-setup.ts b/code/vitest-setup.ts index 431af5b3c14d..98a40b698bbb 100644 --- a/code/vitest-setup.ts +++ b/code/vitest-setup.ts @@ -16,6 +16,7 @@ const ignoreList = [ error.message.match( /React will try to recreate this component tree from scratch using the error boundary you provided/ ), + (error: any) => error.message.includes('Lit is in dev mode. Not recommended for production!'), ]; const throwMessage = (type: any, message: any) => { diff --git a/code/vitest.workspace.ts b/code/vitest.workspace.ts index 2e0b65e5226c..ef77b6093b2f 100644 --- a/code/vitest.workspace.ts +++ b/code/vitest.workspace.ts @@ -12,10 +12,26 @@ export default defineWorkspace([ 'renderers/*/vitest.config.ts', ]); +/** + * CircleCI reports the wrong number of threads to Node.js, so we need to set it manually. + * Unit tests are running with the xlarge resource class, which has 8 vCPUs. + * @see https://jahed.dev/2022/11/20/fixing-node-js-multi-threading-on-circleci/ + * @see https://vitest.dev/config/#pooloptions-threads-maxthreads + * @see https://circleci.com/docs/configuration-reference/#x86 + * @see .circleci/config.yml#L214 + */ +const threadCount = process.env.CI ? 8 : undefined; + export const vitestCommonConfig = defineConfig({ test: { clearMocks: true, setupFiles: [resolve('./vitest-setup.ts')], globals: true, + poolOptions: { + threads: { + minThreads: threadCount, + maxThreads: threadCount, + }, + }, }, }); diff --git a/code/yarn.lock b/code/yarn.lock index e3aa438be26c..3d583c7f7840 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -751,7 +751,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": version: 7.23.6 resolution: "@babel/parser@npm:7.23.6" bin: @@ -2238,7 +2238,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.23.6 resolution: "@babel/types@npm:7.23.6" dependencies: @@ -5228,6 +5228,11 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true languageName: unknown linkType: soft @@ -5505,7 +5510,7 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/find-cache-dir": "npm:^3.2.1" - "@types/fs-extra": "npm:^11.0.1" + "@types/fs-extra": "npm:^11.0.4" "@types/mock-fs": "npm:^4.13.1" "@types/node": "npm:^18.0.0" "@types/node-fetch": "npm:^2.6.4" @@ -6450,7 +6455,7 @@ __metadata: "@typescript-eslint/experimental-utils": "npm:^5.62.0" "@typescript-eslint/parser": "npm:^6.18.1" "@vitejs/plugin-react": "npm:^3.0.1" - "@vitest/coverage-v8": "npm:^1.0.1" + "@vitest/coverage-v8": "npm:^1.2.2" chromatic: "npm:7.1.0" concurrently: "npm:^5.3.0" cross-env: "npm:^7.0.3" @@ -6487,7 +6492,7 @@ __metadata: util: "npm:^0.12.4" vite: "npm:^4.0.0" vite-plugin-turbosnap: "npm:^1.0.1" - vitest: "npm:^1.0.1" + vitest: "npm:^1.2.2" wait-on: "npm:^7.0.1" dependenciesMeta: ejs: @@ -6725,6 +6730,11 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true languageName: unknown linkType: soft @@ -8436,9 +8446,9 @@ __metadata: languageName: node linkType: hard -"@vitest/coverage-v8@npm:^1.0.1": - version: 1.0.4 - resolution: "@vitest/coverage-v8@npm:1.0.4" +"@vitest/coverage-v8@npm:^1.2.2": + version: 1.2.2 + resolution: "@vitest/coverage-v8@npm:1.2.2" dependencies: "@ampproject/remapping": "npm:^2.2.1" "@bcoe/v8-coverage": "npm:^0.2.3" @@ -8448,25 +8458,14 @@ __metadata: istanbul-lib-source-maps: "npm:^4.0.1" istanbul-reports: "npm:^3.1.6" magic-string: "npm:^0.30.5" - magicast: "npm:^0.3.2" + magicast: "npm:^0.3.3" picocolors: "npm:^1.0.0" std-env: "npm:^3.5.0" test-exclude: "npm:^6.0.0" v8-to-istanbul: "npm:^9.2.0" peerDependencies: vitest: ^1.0.0 - checksum: e4fb7e7f818a320dcef451193a6aba7b4173a3246695fb5c7b406251c860e10a02f41c3a9678301d6d14e9453bef16de5624658bc3abc11775c708bb20f15ace - languageName: node - linkType: hard - -"@vitest/expect@npm:1.0.4": - version: 1.0.4 - resolution: "@vitest/expect@npm:1.0.4" - dependencies: - "@vitest/spy": "npm:1.0.4" - "@vitest/utils": "npm:1.0.4" - chai: "npm:^4.3.10" - checksum: a5f3d0ab334938cd70f4d2b44205885532d3d24466617a3c4a230378b6cfa0b5de5f5d9ce80e48508c3cc02dfde1f064ea1126912d7e9f46e18b305b41417f2a + checksum: 90e3cfdc7d36df86f95b4bc372851dbf0a9e78ca9d80177674ebb30cf5dff1e786660016aa7e369bd30ac7d1d3edc18d7ab0f6ccfdc9cdfe04ada0e0b5d5911a languageName: node linkType: hard @@ -8481,6 +8480,17 @@ __metadata: languageName: node linkType: hard +"@vitest/expect@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/expect@npm:1.2.2" + dependencies: + "@vitest/spy": "npm:1.2.2" + "@vitest/utils": "npm:1.2.2" + chai: "npm:^4.3.10" + checksum: 920e80b956d9d5ef7909cbe2bf883c8556da11c5123ea037396cb672d7038116c9773bd36915a3df7be2ffd76b661d5a6487e7e5ded78f39e2500cb36ae81e59 + languageName: node + linkType: hard + "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch": version: 1.1.3 resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch::version=1.1.3&hash=8fb073" @@ -8492,34 +8502,25 @@ __metadata: languageName: node linkType: hard -"@vitest/runner@npm:1.0.4": - version: 1.0.4 - resolution: "@vitest/runner@npm:1.0.4" +"@vitest/runner@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/runner@npm:1.2.2" dependencies: - "@vitest/utils": "npm:1.0.4" + "@vitest/utils": "npm:1.2.2" p-limit: "npm:^5.0.0" pathe: "npm:^1.1.1" - checksum: 4e60471997cbac61c2b7f5e8c701a7459ed51177c709f27c53ffa1e889097782132d21ed816c10cf3bf5dadf82e973c65d6e2210f77aba19f8be9d5e9a1a1002 + checksum: 25a9c03cca5b40738fe606757b14ee9d60d25193115b4674e3cc402c2b2c3844d234902d48bfa7646cb205455ea27891fef96733e033a570b85fe74ed29ff81c languageName: node linkType: hard -"@vitest/snapshot@npm:1.0.4": - version: 1.0.4 - resolution: "@vitest/snapshot@npm:1.0.4" +"@vitest/snapshot@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/snapshot@npm:1.2.2" dependencies: magic-string: "npm:^0.30.5" pathe: "npm:^1.1.1" pretty-format: "npm:^29.7.0" - checksum: 77fc4a7b74f4bce56bfa7ff5bfefa5d9a7511988d3e7e7fc798a877325ed3db4a3252fa343adff1c77482bc18e69f7279290d165fe5688d8f63a4266d2d716a8 - languageName: node - linkType: hard - -"@vitest/spy@npm:1.0.4": - version: 1.0.4 - resolution: "@vitest/spy@npm:1.0.4" - dependencies: - tinyspy: "npm:^2.2.0" - checksum: dece5db1aabc667a549d6e0a382d338fa0bfee684aadf4695d0633e1e30e11ad244d0be2163238598e615dfea683b73b2b095e89cc4854a2a2d6cb528c4bfca8 + checksum: 0f8a69a289aa6466c7dd56f8327190d56a0bc7ad10412127de001c94784f6dba5e5bccb757def21f565f4efa3e00c307b92e8b6c302f11fc57889b743ba18a95 languageName: node linkType: hard @@ -8532,14 +8533,12 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:1.0.4": - version: 1.0.4 - resolution: "@vitest/utils@npm:1.0.4" +"@vitest/spy@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/spy@npm:1.2.2" dependencies: - diff-sequences: "npm:^29.6.3" - loupe: "npm:^2.3.7" - pretty-format: "npm:^29.7.0" - checksum: 4a87f98b9192f544a6d52232ed1605ac9a6d7418e35de40b4ef36d0d0f6905112a9a21f1393e16f47838e67992399958d524e6b99f6a3583c0a0527fa7557e49 + tinyspy: "npm:^2.2.0" + checksum: 5480048d26c0d82b524317552fbdcc05fed6ea626d887620647826453a344798a360f2a75af477512a1569b1b6c918eae62338e8b35575f875fc2d7ef51419f3 languageName: node linkType: hard @@ -8555,6 +8554,18 @@ __metadata: languageName: node linkType: hard +"@vitest/utils@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/utils@npm:1.2.2" + dependencies: + diff-sequences: "npm:^29.6.3" + estree-walker: "npm:^3.0.3" + loupe: "npm:^2.3.7" + pretty-format: "npm:^29.7.0" + checksum: 32449cb7eca8ecea56e0fce280c9770f65fa6b60bbba73be06ca2891096818899b4b3220bd3c815df8beb4266034db394fcf235e4de8959cce686b8b360948d1 + languageName: node + linkType: hard + "@vitest/utils@npm:^0.34.6": version: 0.34.7 resolution: "@vitest/utils@npm:0.34.7" @@ -9203,13 +9214,20 @@ __metadata: languageName: node linkType: hard -"acorn-walk@npm:^8.1.1, acorn-walk@npm:^8.3.0": +"acorn-walk@npm:^8.1.1": version: 8.3.1 resolution: "acorn-walk@npm:8.3.1" checksum: a23d2f7c6b6cad617f4c77f14dfeb062a239208d61753e9ba808d916c550add92b39535467d2e6028280761ac4f5a904cc9df21530b84d3f834e3edef74ddde5 languageName: node linkType: hard +"acorn-walk@npm:^8.3.2": + version: 8.3.2 + resolution: "acorn-walk@npm:8.3.2" + checksum: 7e2a8dad5480df7f872569b9dccff2f3da7e65f5353686b1d6032ab9f4ddf6e3a2cb83a9b52cf50b1497fd522154dda92f0abf7153290cc79cd14721ff121e52 + languageName: node + linkType: hard + "acorn@npm:^7.1.1, acorn@npm:^7.4.1": version: 7.4.1 resolution: "acorn@npm:7.4.1" @@ -19448,14 +19466,14 @@ __metadata: languageName: node linkType: hard -"magicast@npm:^0.3.2": - version: 0.3.2 - resolution: "magicast@npm:0.3.2" +"magicast@npm:^0.3.3": + version: 0.3.3 + resolution: "magicast@npm:0.3.3" dependencies: - "@babel/parser": "npm:^7.23.3" - "@babel/types": "npm:^7.23.3" + "@babel/parser": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" source-map-js: "npm:^1.0.2" - checksum: cd157b250d962ccdb313f250509220f10ad63f673d88a0a001d201fd2b2dae90c6c65c4e9b6ce164f05c25c400139715edce750e3e2f41b5a249e29225d6c4fb + checksum: 2eeba19545ac4328433be817bd81fcfa8a517ec67599260541e13ce5ce18b27ff8830f1b87d54a1392d408d1b96e44938bf026920f0110edbdfecc96980919b3 languageName: node linkType: hard @@ -27446,10 +27464,10 @@ __metadata: languageName: node linkType: hard -"tinypool@npm:^0.8.1": - version: 0.8.1 - resolution: "tinypool@npm:0.8.1" - checksum: d965c057a1866c9d83716f4e434f7be18b2a067ed3b32cc2de3b3bf34ca1756ac1c35bd04433e2086c8cc2afa75b328e4b17baa6b4e6292dba2ce31cc76770e0 +"tinypool@npm:^0.8.2": + version: 0.8.2 + resolution: "tinypool@npm:0.8.2" + checksum: 8998626614172fc37c394e9a14e701dc437727fc6525488a4d4fd42044a4b2b59d6f076d750cbf5c699f79c58dd4e40599ab09e2f1ae0df4b23516b98c9c3055 languageName: node linkType: hard @@ -28843,9 +28861,9 @@ __metadata: languageName: node linkType: hard -"vite-node@npm:1.0.4": - version: 1.0.4 - resolution: "vite-node@npm:1.0.4" +"vite-node@npm:1.2.2": + version: 1.2.2 + resolution: "vite-node@npm:1.2.2" dependencies: cac: "npm:^6.7.14" debug: "npm:^4.3.4" @@ -28854,7 +28872,7 @@ __metadata: vite: "npm:^5.0.0" bin: vite-node: vite-node.mjs - checksum: 3be4f8045a2c39afb57fdf83450791f872b10f883728eb58495640eed8d370f062a8bf25622afd005be8b375a1b4ac5731ca4fa0ae7c962742acf8f904f7748a + checksum: 39a5b9d9c806a012aab208eee0f59e4e12446ec19a4cf149a6459e7ff86491c289e189fda4f55a63b7e37d713f5edbda0e9efed95af4f7ebefa6d39eee093c0b languageName: node linkType: hard @@ -28997,16 +29015,16 @@ __metadata: languageName: node linkType: hard -"vitest@npm:^1.0.1": - version: 1.0.4 - resolution: "vitest@npm:1.0.4" - dependencies: - "@vitest/expect": "npm:1.0.4" - "@vitest/runner": "npm:1.0.4" - "@vitest/snapshot": "npm:1.0.4" - "@vitest/spy": "npm:1.0.4" - "@vitest/utils": "npm:1.0.4" - acorn-walk: "npm:^8.3.0" +"vitest@npm:^1.2.2": + version: 1.2.2 + resolution: "vitest@npm:1.2.2" + dependencies: + "@vitest/expect": "npm:1.2.2" + "@vitest/runner": "npm:1.2.2" + "@vitest/snapshot": "npm:1.2.2" + "@vitest/spy": "npm:1.2.2" + "@vitest/utils": "npm:1.2.2" + acorn-walk: "npm:^8.3.2" cac: "npm:^6.7.14" chai: "npm:^4.3.10" debug: "npm:^4.3.4" @@ -29018,9 +29036,9 @@ __metadata: std-env: "npm:^3.5.0" strip-literal: "npm:^1.3.0" tinybench: "npm:^2.5.1" - tinypool: "npm:^0.8.1" + tinypool: "npm:^0.8.2" vite: "npm:^5.0.0" - vite-node: "npm:1.0.4" + vite-node: "npm:1.2.2" why-is-node-running: "npm:^2.2.2" peerDependencies: "@edge-runtime/vm": "*" @@ -29044,7 +29062,7 @@ __metadata: optional: true bin: vitest: vitest.mjs - checksum: 401cd3f7bc716269ed2e4d6304b3377a3957370f9ca1565d0fb328b3eb0017ba627e0357ccf7bf29126750ef312cc9e5319af8b5cfa87c3f746732480bebb813 + checksum: 085cb62146191b32dc98fac1a5b0de6d1c63c44cc1e7946a7d38309dd4135539432ec27b4bfad38ce79736688a0ce20d9b93f58de4ce4a41677cb3c5ca6ad980 languageName: node linkType: hard diff --git a/docs/api/csf.md b/docs/api/csf.md index 1ef89f2e4605..5ddbab04d894 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -8,14 +8,12 @@ Component Story Format (CSF) is the recommended way to [write stories](../writin -If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md). +If you have stories written in the older `storiesOf()` syntax, it was removed in Storybook 8.0 and is no longer maintained. We recommend migrating your stories to CSF. See the [migration guide](../migration-guide.md#storiesof-to-csf) for more information. In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export). -CSF is supported in all frameworks except React Native, where you should use the [storiesOf API](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) instead. - ## Default export The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../writing-stories/naming-components-and-hierarchy.md#sorting-stories)), [decorators](../writing-stories/decorators.md), and [parameters](../writing-stories/parameters.md). diff --git a/docs/api/parameters.md b/docs/api/parameters.md index 70c555c61783..506dc051b3df 100644 --- a/docs/api/parameters.md +++ b/docs/api/parameters.md @@ -145,7 +145,7 @@ See [the guide](../writing-stories/naming-components-and-hierarchy/#sorting-stor ### Essential addons -All other parameters are contributed by addons. The [essential addon's](../addons/essentials.md) parameters are documented on their individual pages: +All other parameters are contributed by addons. The [essential addon's](../essentials/index.md) parameters are documented on their individual pages: - [Actions](../essentials/actions.md#parameters) - [Backgrounds](../essentials/backgrounds.md#parameters) diff --git a/docs/configure/frameworks-feature-support.md b/docs/configure/frameworks-feature-support.md index 912ee32eb207..7ae41614e248 100644 --- a/docs/configure/frameworks-feature-support.md +++ b/docs/configure/frameworks-feature-support.md @@ -110,8 +110,8 @@ Community frameworks have fewer contributors which means they may not be as up t To align the Storybook ecosystem with the current state of frontend development, the following features and addons are now deprecated, no longer maintained, and will be removed in future versions of Storybook -| Feature | Status | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../essentials/controls.md) instead. | -| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | -| [`StoriesOf`](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) | The `storiesOf` API was officially deprecated with the release of Storybook 7.5 and is no longer actively maintained. We recommend using the [CSF API](../api/csf.md) instead for writing stories.
See the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated) for more information. | +| Feature | Status | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../essentials/controls.md) instead. | +| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | +| [`StoriesOf`](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../api/csf.md) instead for writing stories.
See the [migration guide](../migration-guide.md#storiesof-to-csf) for more information. | diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index a5aa4082a6f9..d58b033ea101 100644 --- a/docs/essentials/viewport.md +++ b/docs/essentials/viewport.md @@ -231,7 +231,7 @@ Specify the available viewports. The key is used to reference the viewport and t This addon contributes the following exports to Storybook: ```js -import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewports'; +import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; ``` #### `INITIAL_VIEWPORTS` diff --git a/docs/versions/next.json b/docs/versions/next.json index f183795f3f3e..2f237198e882 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-beta.0","info":{"plain":"- CLI: Add Visual Tests addon to `init` - [#25850](https://github.com/storybookjs/storybook/pull/25850), thanks [@shilman](https://github.com/shilman)!\n- CLI: Upgrade boxen library - [#25713](https://github.com/storybookjs/storybook/pull/25713), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix custom tabs not showing in the manager - [#25792](https://github.com/storybookjs/storybook/pull/25792), thanks [@ndelangen](https://github.com/ndelangen)!"}} +{"version":"8.0.0-beta.1","info":{"plain":"- Addon-docs: Fix MDX components not being applied in Vite and theming loading twice - [#25925](https://github.com/storybookjs/storybook/pull/25925), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Fix React peer dependency warnings - [#25926](https://github.com/storybookjs/storybook/pull/25926), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Remove CSF batching, as it isn't required any more - [#25872](https://github.com/storybookjs/storybook/pull/25872), thanks [@tmeasday](https://github.com/tmeasday)!\n- Fix: Add Visual Test Addon to init command - [#25883](https://github.com/storybookjs/storybook/pull/25883), thanks [@vanessayuenn](https://github.com/vanessayuenn)!\n- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)!\n- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)!\n- Test: Fix jest-dom matcher type imports - [#25869](https://github.com/storybookjs/storybook/pull/25869), thanks [@alitas](https://github.com/alitas)!\n- UI: Fix overlapping on the ref button in the sidebar - [#25914](https://github.com/storybookjs/storybook/pull/25914), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- UI: Remove keyboard shortcut hint in search bar on mobile viewports - [#25866](https://github.com/storybookjs/storybook/pull/25866), thanks [@tusharwebd](https://github.com/tusharwebd)!"}} diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md index a848ada9eb60..5c37a8d3614f 100644 --- a/docs/writing-tests/visual-testing.md +++ b/docs/writing-tests/visual-testing.md @@ -32,7 +32,7 @@ Add visual tests to your project by installing `@chromatic-com/storybook`, the o -Storybook 7.4 or higher is required. Read the [migration guide](../migration-guide.md) to upgrade your project. +Storybook 7.6 or higher is required. Read the [migration guide](../migration-guide.md) to upgrade your project. diff --git a/scripts/package.json b/scripts/package.json index d0fdf0fa9454..eb4cded806bf 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -107,7 +107,7 @@ "@types/window-size": "^1.1.3", "@typescript-eslint/experimental-utils": "^5.62.0", "@typescript-eslint/parser": "^6.18.1", - "@vitest/coverage-v8": "^1.0.1", + "@vitest/coverage-v8": "^1.2.2", "ansi-regex": "^5.0.0", "babel-eslint": "^10.1.0", "babel-loader": "^9.1.2", @@ -180,7 +180,7 @@ "typescript": "~5.2.2", "util": "^0.12.4", "uuid": "^9.0.0", - "vitest": "^1.0.1", + "vitest": "^1.2.2", "wait-on": "^7.0.1", "window-size": "^1.1.1", "yaml": "^2.3.1", diff --git a/scripts/vitest.config.ts b/scripts/vitest.config.ts index 34528af8bcb6..a4ef4be99c32 100644 --- a/scripts/vitest.config.ts +++ b/scripts/vitest.config.ts @@ -1,7 +1,23 @@ import { defineConfig } from 'vitest/config'; +/** + * CircleCI reports the wrong number of threads to Node.js, so we need to set it manually. + * Script tests are running with the small resource class, which has 1 vCPU. + * @see https://jahed.dev/2022/11/20/fixing-node-js-multi-threading-on-circleci/ + * @see https://vitest.dev/config/#pooloptions-threads-maxthreads + * @see https://circleci.com/docs/configuration-reference/#x86 + * @see .circleci/config.yml#L187 + */ +const threadCount = process.env.CI ? 1 : undefined; + export default defineConfig({ test: { clearMocks: true, + poolOptions: { + threads: { + minThreads: threadCount, + maxThreads: threadCount, + }, + }, }, }); diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 99bfc3f30b9b..d6809eeba861 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -361,7 +361,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.4, @babel/parser@npm:^7.7.0": +"@babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.4, @babel/parser@npm:^7.7.0": version: 7.23.5 resolution: "@babel/parser@npm:7.23.5" bin: @@ -370,6 +370,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.23.6": + version: 7.23.9 + resolution: "@babel/parser@npm:7.23.9" + bin: + parser: ./bin/babel-parser.js + checksum: 7df97386431366d4810538db4b9ec538f4377096f720c0591c7587a16f6810e62747e9fbbfa1ff99257fd4330035e4fb1b5b77c7bd3b97ce0d2e3780a6618975 + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.15": version: 7.22.15 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.15" @@ -1472,7 +1481,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3": +"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3": version: 7.23.5 resolution: "@babel/types@npm:7.23.5" dependencies: @@ -1483,6 +1492,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.23.6": + version: 7.23.9 + resolution: "@babel/types@npm:7.23.9" + 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: edc7bb180ce7e4d2aea10c6972fb10474341ac39ba8fdc4a27ffb328368dfdfbf40fca18e441bbe7c483774500d5c05e222cec276c242e952853dcaf4eb884f7 + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -2760,7 +2780,7 @@ __metadata: "@typescript-eslint/experimental-utils": "npm:^5.62.0" "@typescript-eslint/parser": "npm:^6.18.1" "@verdaccio/types": "npm:^10.2.0" - "@vitest/coverage-v8": "npm:^1.0.1" + "@vitest/coverage-v8": "npm:^1.2.2" ansi-regex: "npm:^5.0.0" babel-eslint: "npm:^10.1.0" babel-loader: "npm:^9.1.2" @@ -2836,7 +2856,7 @@ __metadata: uuid: "npm:^9.0.0" verdaccio: "npm:^5.19.1" verdaccio-auth-memory: "npm:^10.2.0" - vitest: "npm:^1.0.1" + vitest: "npm:^1.2.2" wait-on: "npm:^7.0.1" window-size: "npm:^1.1.1" yaml: "npm:^2.3.1" @@ -3052,6 +3072,13 @@ __metadata: languageName: node linkType: hard +"@types/estree@npm:^1.0.0": + version: 1.0.5 + resolution: "@types/estree@npm:1.0.5" + checksum: b3b0e334288ddb407c7b3357ca67dbee75ee22db242ca7c56fe27db4e1a31989cb8af48a84dd401deb787fe10cc6b2ab1ee82dc4783be87ededbe3d53c79c70d + languageName: node + linkType: hard + "@types/express-serve-static-core@npm:^4.17.33": version: 4.17.39 resolution: "@types/express-serve-static-core@npm:4.17.39" @@ -3905,9 +3932,9 @@ __metadata: languageName: node linkType: hard -"@vitest/coverage-v8@npm:^1.0.1": - version: 1.0.1 - resolution: "@vitest/coverage-v8@npm:1.0.1" +"@vitest/coverage-v8@npm:^1.2.2": + version: 1.2.2 + resolution: "@vitest/coverage-v8@npm:1.2.2" dependencies: "@ampproject/remapping": "npm:^2.2.1" "@bcoe/v8-coverage": "npm:^0.2.3" @@ -3917,67 +3944,68 @@ __metadata: istanbul-lib-source-maps: "npm:^4.0.1" istanbul-reports: "npm:^3.1.6" magic-string: "npm:^0.30.5" - magicast: "npm:^0.3.2" + magicast: "npm:^0.3.3" picocolors: "npm:^1.0.0" std-env: "npm:^3.5.0" test-exclude: "npm:^6.0.0" v8-to-istanbul: "npm:^9.2.0" peerDependencies: vitest: ^1.0.0 - checksum: 950d8db1815424d4a9d5291903b7b6a5f1d8afce3e8475b775b107a3b8afca77c81fbb426c3e77a3c2d66230c506b495c44c1a02ef757324201c353adbc0633f + checksum: 90e3cfdc7d36df86f95b4bc372851dbf0a9e78ca9d80177674ebb30cf5dff1e786660016aa7e369bd30ac7d1d3edc18d7ab0f6ccfdc9cdfe04ada0e0b5d5911a languageName: node linkType: hard -"@vitest/expect@npm:1.0.1": - version: 1.0.1 - resolution: "@vitest/expect@npm:1.0.1" +"@vitest/expect@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/expect@npm:1.2.2" dependencies: - "@vitest/spy": "npm:1.0.1" - "@vitest/utils": "npm:1.0.1" + "@vitest/spy": "npm:1.2.2" + "@vitest/utils": "npm:1.2.2" chai: "npm:^4.3.10" - checksum: cf8a9db9d3149dec548177b0ddf2255c3b0d8f8922d87d9d3032d465b69d2807532b7f16f0528bdf07699da6b3ebfa0c6d9c01a5fac414c8eab290efbd5bf015 + checksum: 920e80b956d9d5ef7909cbe2bf883c8556da11c5123ea037396cb672d7038116c9773bd36915a3df7be2ffd76b661d5a6487e7e5ded78f39e2500cb36ae81e59 languageName: node linkType: hard -"@vitest/runner@npm:1.0.1": - version: 1.0.1 - resolution: "@vitest/runner@npm:1.0.1" +"@vitest/runner@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/runner@npm:1.2.2" dependencies: - "@vitest/utils": "npm:1.0.1" + "@vitest/utils": "npm:1.2.2" p-limit: "npm:^5.0.0" pathe: "npm:^1.1.1" - checksum: d6289b695a335dd688df6e7512e65b46c3deb352364d1895f98198a104597a808b1ccdc676adaeb6222264a8d207bcd04dab13ff100bdf7768f4086813fac42a + checksum: 25a9c03cca5b40738fe606757b14ee9d60d25193115b4674e3cc402c2b2c3844d234902d48bfa7646cb205455ea27891fef96733e033a570b85fe74ed29ff81c languageName: node linkType: hard -"@vitest/snapshot@npm:1.0.1": - version: 1.0.1 - resolution: "@vitest/snapshot@npm:1.0.1" +"@vitest/snapshot@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/snapshot@npm:1.2.2" dependencies: magic-string: "npm:^0.30.5" pathe: "npm:^1.1.1" pretty-format: "npm:^29.7.0" - checksum: 2345b758ea24b4de3e79a6349d6b1d4b50d3bbda3d9bf50cfea86c3334722ca1c3b399d30e926a266a56e764d2b050f20929d847ae11361d0ddcc4a1fa070251 + checksum: 0f8a69a289aa6466c7dd56f8327190d56a0bc7ad10412127de001c94784f6dba5e5bccb757def21f565f4efa3e00c307b92e8b6c302f11fc57889b743ba18a95 languageName: node linkType: hard -"@vitest/spy@npm:1.0.1": - version: 1.0.1 - resolution: "@vitest/spy@npm:1.0.1" +"@vitest/spy@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/spy@npm:1.2.2" dependencies: tinyspy: "npm:^2.2.0" - checksum: 17169f8f303377c3464d067318594bb07700b26fc61b27ed90097f175a058f496872a3966250ad23b268f528674bbb6627e97812e83554293f0ad47f432f4dd4 + checksum: 5480048d26c0d82b524317552fbdcc05fed6ea626d887620647826453a344798a360f2a75af477512a1569b1b6c918eae62338e8b35575f875fc2d7ef51419f3 languageName: node linkType: hard -"@vitest/utils@npm:1.0.1": - version: 1.0.1 - resolution: "@vitest/utils@npm:1.0.1" +"@vitest/utils@npm:1.2.2": + version: 1.2.2 + resolution: "@vitest/utils@npm:1.2.2" dependencies: diff-sequences: "npm:^29.6.3" + estree-walker: "npm:^3.0.3" loupe: "npm:^2.3.7" pretty-format: "npm:^29.7.0" - checksum: 9cb232c20cbbff39910a39a4fc7f36f81460960bf8191672be7c05dd1641e4486f0cdccce115ef77fa223e79e9c59998e8de5a015c7628b6c9304afe140d17f6 + checksum: 32449cb7eca8ecea56e0fce280c9770f65fa6b60bbba73be06ca2891096818899b4b3220bd3c815df8beb4266034db394fcf235e4de8959cce686b8b360948d1 languageName: node linkType: hard @@ -4081,10 +4109,10 @@ __metadata: languageName: node linkType: hard -"acorn-walk@npm:^8.3.0": - version: 8.3.0 - resolution: "acorn-walk@npm:8.3.0" - checksum: 24346e595f507b6e704a60d35f3c5e1aa9891d4fb6a3fc3d856503ab718cc26cabb5e3e1ff0ff8da6ec03d60a8226ebdb602805a94f970e7f797ea3b8b09437f +"acorn-walk@npm:^8.3.2": + version: 8.3.2 + resolution: "acorn-walk@npm:8.3.2" + checksum: 7e2a8dad5480df7f872569b9dccff2f3da7e65f5353686b1d6032ab9f4ddf6e3a2cb83a9b52cf50b1497fd522154dda92f0abf7153290cc79cd14721ff121e52 languageName: node linkType: hard @@ -7070,6 +7098,15 @@ __metadata: languageName: node linkType: hard +"estree-walker@npm:^3.0.3": + version: 3.0.3 + resolution: "estree-walker@npm:3.0.3" + dependencies: + "@types/estree": "npm:^1.0.0" + checksum: c12e3c2b2642d2bcae7d5aa495c60fa2f299160946535763969a1c83fc74518ffa9c2cd3a8b69ac56aea547df6a8aac25f729a342992ef0bbac5f1c73e78995d + languageName: node + linkType: hard + "esutils@npm:^2.0.2": version: 2.0.3 resolution: "esutils@npm:2.0.3" @@ -10119,14 +10156,14 @@ __metadata: languageName: node linkType: hard -"magicast@npm:^0.3.2": - version: 0.3.2 - resolution: "magicast@npm:0.3.2" +"magicast@npm:^0.3.3": + version: 0.3.3 + resolution: "magicast@npm:0.3.3" dependencies: - "@babel/parser": "npm:^7.23.3" - "@babel/types": "npm:^7.23.3" + "@babel/parser": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" source-map-js: "npm:^1.0.2" - checksum: cd157b250d962ccdb313f250509220f10ad63f673d88a0a001d201fd2b2dae90c6c65c4e9b6ce164f05c25c400139715edce750e3e2f41b5a249e29225d6c4fb + checksum: 2eeba19545ac4328433be817bd81fcfa8a517ec67599260541e13ce5ce18b27ff8830f1b87d54a1392d408d1b96e44938bf026920f0110edbdfecc96980919b3 languageName: node linkType: hard @@ -12329,14 +12366,14 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.32": - version: 8.4.32 - resolution: "postcss@npm:8.4.32" +"postcss@npm:^8.4.35": + version: 8.4.35 + resolution: "postcss@npm:8.4.35" dependencies: nanoid: "npm:^3.3.7" picocolors: "npm:^1.0.0" source-map-js: "npm:^1.0.2" - checksum: 39308a9195fa34d4dbdd7b58a896cff0c7809f84f7a4ac1b95b68ca86c9138a395addff33075668ed3983d41b90aac05754c445237a9365eb1c3a5602ebd03ad + checksum: e8dd04e48001eb5857abc9475365bf08f4e508ddf9bc0b8525449a95d190f10d025acebc5b56ac2e94b3c7146790e4ae78989bb9633cb7ee20d1cc9b7dc909b2 languageName: node linkType: hard @@ -14605,10 +14642,10 @@ __metadata: languageName: node linkType: hard -"tinypool@npm:^0.8.1": - version: 0.8.1 - resolution: "tinypool@npm:0.8.1" - checksum: d965c057a1866c9d83716f4e434f7be18b2a067ed3b32cc2de3b3bf34ca1756ac1c35bd04433e2086c8cc2afa75b328e4b17baa6b4e6292dba2ce31cc76770e0 +"tinypool@npm:^0.8.2": + version: 0.8.2 + resolution: "tinypool@npm:0.8.2" + checksum: 8998626614172fc37c394e9a14e701dc437727fc6525488a4d4fd42044a4b2b59d6f076d750cbf5c699f79c58dd4e40599ab09e2f1ae0df4b23516b98c9c3055 languageName: node linkType: hard @@ -15748,28 +15785,28 @@ __metadata: languageName: node linkType: hard -"vite-node@npm:1.0.1": - version: 1.0.1 - resolution: "vite-node@npm:1.0.1" +"vite-node@npm:1.2.2": + version: 1.2.2 + resolution: "vite-node@npm:1.2.2" dependencies: cac: "npm:^6.7.14" debug: "npm:^4.3.4" pathe: "npm:^1.1.1" picocolors: "npm:^1.0.0" - vite: "npm:^5.0.0-beta.15 || ^5.0.0" + vite: "npm:^5.0.0" bin: vite-node: vite-node.mjs - checksum: 12e2e863597deae1539f4415238a2f32696cce986df71103afb4d6df1187558141417d3c2f67c43e13d7b111e6ac11318c7f93017490890f57fb07cd32c77ee5 + checksum: 39a5b9d9c806a012aab208eee0f59e4e12446ec19a4cf149a6459e7ff86491c289e189fda4f55a63b7e37d713f5edbda0e9efed95af4f7ebefa6d39eee093c0b languageName: node linkType: hard -"vite@npm:^5.0.0-beta.15 || ^5.0.0, vite@npm:^5.0.0-beta.19 || ^5.0.0": - version: 5.0.5 - resolution: "vite@npm:5.0.5" +"vite@npm:^5.0.0": + version: 5.1.0 + resolution: "vite@npm:5.1.0" dependencies: esbuild: "npm:^0.19.3" fsevents: "npm:~2.3.3" - postcss: "npm:^8.4.32" + postcss: "npm:^8.4.35" rollup: "npm:^4.2.0" peerDependencies: "@types/node": ^18.0.0 || >=20.0.0 @@ -15799,20 +15836,20 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 22fbaacbc87eff7d1de46104880c5d269d3bb2964957e9d13edaac819e6a90b5ce2567b5d0ba8c92a7bd5bcf0412ae7d22ce958047490931fbb466b1908ff17c + checksum: 62aa632b6f30cfca39db534b5b461b1e73dc4f4a3093088c1140a1e1b0c4c8f4eacc0e472a0d96d765ad6976b00e202da20a647865886df692240a2b06b62c6f languageName: node linkType: hard -"vitest@npm:^1.0.1": - version: 1.0.1 - resolution: "vitest@npm:1.0.1" - dependencies: - "@vitest/expect": "npm:1.0.1" - "@vitest/runner": "npm:1.0.1" - "@vitest/snapshot": "npm:1.0.1" - "@vitest/spy": "npm:1.0.1" - "@vitest/utils": "npm:1.0.1" - acorn-walk: "npm:^8.3.0" +"vitest@npm:^1.2.2": + version: 1.2.2 + resolution: "vitest@npm:1.2.2" + dependencies: + "@vitest/expect": "npm:1.2.2" + "@vitest/runner": "npm:1.2.2" + "@vitest/snapshot": "npm:1.2.2" + "@vitest/spy": "npm:1.2.2" + "@vitest/utils": "npm:1.2.2" + acorn-walk: "npm:^8.3.2" cac: "npm:^6.7.14" chai: "npm:^4.3.10" debug: "npm:^4.3.4" @@ -15824,9 +15861,9 @@ __metadata: std-env: "npm:^3.5.0" strip-literal: "npm:^1.3.0" tinybench: "npm:^2.5.1" - tinypool: "npm:^0.8.1" - vite: "npm:^5.0.0-beta.19 || ^5.0.0" - vite-node: "npm:1.0.1" + tinypool: "npm:^0.8.2" + vite: "npm:^5.0.0" + vite-node: "npm:1.2.2" why-is-node-running: "npm:^2.2.2" peerDependencies: "@edge-runtime/vm": "*" @@ -15850,7 +15887,7 @@ __metadata: optional: true bin: vitest: vitest.mjs - checksum: e59bab2c0a20411e3fc1e4afa954de5d9865e8d36a1ee646402c77251d769538241ba243519ed05d65fe9e956298313aeb7d61655f8fd2e0009f9bcb9bbf9a48 + checksum: 085cb62146191b32dc98fac1a5b0de6d1c63c44cc1e7946a7d38309dd4135539432ec27b4bfad38ce79736688a0ce20d9b93f58de4ce4a41677cb3c5ca6ad980 languageName: node linkType: hard