From 086153a90d0239bbcc8f9cae1353d682f0833917 Mon Sep 17 00:00:00 2001 From: kyletsang <6854874+kyletsang@users.noreply.github.com> Date: Fri, 29 Dec 2023 22:49:19 -0800 Subject: [PATCH 01/43] Core: move @types packages to dev deps in core-common --- code/lib/core-common/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 7a3c1b087205..a7b4ae22c860 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -47,10 +47,6 @@ "@storybook/core-events": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", - "@types/find-cache-dir": "^3.2.1", - "@types/node": "^18.0.0", - "@types/node-fetch": "^2.6.4", - "@types/pretty-hrtime": "^1.0.0", "chalk": "^4.1.0", "esbuild": "^0.18.0", "esbuild-register": "^3.5.0", @@ -69,9 +65,13 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "@types/find-cache-dir": "^3.2.1", "@types/fs-extra": "^11.0.1", "@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", From fd38e1ef8035bd61a3951e76bdc36c829fe9d26a Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 30 Jan 2024 15:04:28 +0100 Subject: [PATCH 02/43] deduplicate react and storybook pacakges in addon-docs vite --- code/addons/docs/package.json | 6 ++++-- code/addons/docs/src/preset.ts | 7 ++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 547571fed237..faff805e097a 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -112,8 +112,8 @@ "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "fs-extra": "^11.1.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" @@ -122,6 +122,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 ae79832240d1..c9f64366a03c 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -140,8 +140,8 @@ export const viteFinal = async (config: any, options: Options) => { // 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 reactAliasPlugin = { - name: 'storybook:react-alias', + const packageDeduplicationPlugin = { + name: 'storybook:package-deduplication', enforce: 'pre', config: () => ({ resolve: { @@ -149,13 +149,14 @@ export const viteFinal = async (config: any, options: Options) => { react, 'react-dom': reactDom, }, + 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; From 757f5cdf13c507f6e80237c53498784dd8be37a4 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 1 Feb 2024 17:22:36 +0000 Subject: [PATCH 03/43] Docs: StoriesOf API removal --- code/lib/preview-api/docs/storiesOf.md | 2 +- docs/api/csf.md | 4 +--- docs/configure/frameworks-feature-support.md | 10 +++++----- 3 files changed, 7 insertions(+), 9 deletions(-) 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/docs/api/csf.md b/docs/api/csf.md index 1ef89f2e4605..7b5731244a8e 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 are writing stories 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/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. | From 4271a38c3b6ed57792de77e63e7096493fc9354b Mon Sep 17 00:00:00 2001 From: tusharwebd Date: Thu, 1 Feb 2024 23:21:31 +0530 Subject: [PATCH 04/43] [Bug Fix] Mobile view should not hint at keyboard shortcut in search bar. This commit resolves issue: 25816 (mobile view should not hint at keyboard shortcut). --- .../manager/src/components/sidebar/Search.tsx | 20 +++++++++++++--- scripts/tsconfig.json | 23 +++++++++++++++---- yarn.lock | 21 +++++++++++++++++ 3 files changed, 56 insertions(+), 8 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 525337b8b2aa..e04b736d4247 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -5,7 +5,7 @@ import Downshift from 'downshift'; import type { FuseOptions } from 'fuse.js'; import Fuse from 'fuse.js'; import { global } from '@storybook/global'; -import React, { useMemo, useRef, useState, useCallback } from 'react'; +import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react'; import { CloseIcon, SearchIcon } from '@storybook/icons'; import { DEFAULT_REF_ID } from './Sidebar'; import type { @@ -175,6 +175,20 @@ export const Search = React.memo<{ [api, inputRef, showAllComponents, DEFAULT_REF_ID] ); + const useCheckMobileScreen = () => { + const [width, setWidth] = useState(window.innerWidth); + const handleWindowSizeChange = () => { + setWidth(window.innerWidth); + } + useEffect(() => { + window.addEventListener('resize', handleWindowSizeChange); + return () => { + window.removeEventListener('resize', handleWindowSizeChange); + } + }, []); + return (width <= 768); + } + const list: SearchItem[] = useMemo(() => { return dataset.entries.reduce((acc, [refId, { index, status }]) => { const groupStatus = getGroupStatus(index || {}, status); @@ -288,7 +302,7 @@ export const Search = React.memo<{ }, [inputRef, selectStory, showAllComponents] ); - + const isMobile = useCheckMobileScreen(); return ( initialInputValue={initialQuery} @@ -359,7 +373,7 @@ export const Search = React.memo<{ {/* @ts-expect-error (TODO) */} - {enableShortcuts && !isOpen && ( + {!isMobile && enableShortcuts && !isOpen && ( {searchShortcut === '⌘ K' ? ( <> diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index 77c8d8e2da1b..e07f7bb4a60f 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -13,8 +13,13 @@ "esModuleInterop": true, "isolatedModules": true, "strictBindCallApply": true, - "lib": ["dom", "es2023"], - "types": ["node"], + "lib": [ + "dom", + "es2023" + ], + "types": [ + "node" + ], "strict": true, "strictNullChecks": false, "forceConsistentCasingInFileNames": true, @@ -24,6 +29,14 @@ "noFallthroughCasesInSwitch": true, "resolveJsonModule": true }, - "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"], - "include": ["./**/*", "./.eslintrc.js"] -} + "exclude": [ + "dist", + "**/dist", + "node_modules", + "**/node_modules" + ], + "include": [ + "./**/*", + "./.eslintrc.js" + ] +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 14231d72f18e..55fcc018a277 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8,5 +8,26 @@ __metadata: "@storybook/root@workspace:.": version: 0.0.0-use.local resolution: "@storybook/root@workspace:." + dependencies: + react-device-detect: "npm:^2.2.3" languageName: unknown linkType: soft + +"react-device-detect@npm:^2.2.3": + version: 2.2.3 + resolution: "react-device-detect@npm:2.2.3" + dependencies: + ua-parser-js: "npm:^1.0.33" + peerDependencies: + react: ">= 0.14.0" + react-dom: ">= 0.14.0" + checksum: 7152e2b216b3bb6fd75c7859d3441b89658695c629a13c5d374f076756705650be585d5c4dc19d9d34908ef1b61f19b52f1055d74dd7104b77d1b6f897ee09e0 + languageName: node + linkType: hard + +"ua-parser-js@npm:^1.0.33": + version: 1.0.37 + resolution: "ua-parser-js@npm:1.0.37" + checksum: 56508f2428ebac64382c4d41da14189e5013e3e2a5f5918aff4bee3ba77df1f4eaad6f81f90c24999f1cf12cc1596764684497fec07e0ff5182ce9a323a8c05b + languageName: node + linkType: hard From ca9a7c36642f26f76ab465827288f3ccef3bc55f Mon Sep 17 00:00:00 2001 From: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com> Date: Fri, 2 Feb 2024 10:43:22 +0100 Subject: [PATCH 05/43] Revert "Build: Fix CI" --- code/lib/cli/src/generators/baseGenerator.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index dc5593ba6a4d..3c3cae9e5e5e 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 From 306405d67a5bf1a240a049a05080c10ffd2019d2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 2 Feb 2024 14:03:33 +0100 Subject: [PATCH 06/43] refactor: rename testing-utils paths to portable-stories --- code/lib/preview-api/src/modules/store/csf/index.ts | 2 +- .../store/csf/{testing-utils => portable-stories}/index.test.ts | 0 .../store/csf/{testing-utils => portable-stories}/index.ts | 0 code/renderers/react/src/index.ts | 2 +- .../renderers/react/src/{testing-api.ts => portable-stories.ts} | 0 .../vue3/src/__tests__/composeStories/composeStories.test.ts | 2 +- .../vue3/src/__tests__/composeStories/internals.test.tsx | 2 +- code/renderers/vue3/src/index.ts | 2 +- code/renderers/vue3/src/{testing-api.ts => portable-stories.ts} | 0 9 files changed, 5 insertions(+), 5 deletions(-) rename code/lib/preview-api/src/modules/store/csf/{testing-utils => portable-stories}/index.test.ts (100%) rename code/lib/preview-api/src/modules/store/csf/{testing-utils => portable-stories}/index.ts (100%) rename code/renderers/react/src/{testing-api.ts => portable-stories.ts} (100%) rename code/renderers/vue3/src/{testing-api.ts => portable-stories.ts} (100%) 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/testing-utils/index.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories/index.test.ts similarity index 100% rename from code/lib/preview-api/src/modules/store/csf/testing-utils/index.test.ts rename to code/lib/preview-api/src/modules/store/csf/portable-stories/index.test.ts 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/index.ts similarity index 100% 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/index.ts 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/vue3/src/__tests__/composeStories/composeStories.test.ts b/code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts index cb2372a4c4e9..73d415ee029c 100644 --- a/code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts +++ b/code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts @@ -5,7 +5,7 @@ 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); diff --git a/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx b/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx index 3be07251c9c0..db3765c6bf08 100644 --- a/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx +++ b/code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx @@ -3,7 +3,7 @@ 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 { composeStories, composeStory } from '../../portable-stories'; import * as stories from './Button.stories'; 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 From 9a323ef75605a9b3caeb27c9f5b6aa76d3c71ba6 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 2 Feb 2024 15:18:27 +0000 Subject: [PATCH 07/43] Address feedback --- docs/api/csf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/csf.md b/docs/api/csf.md index 7b5731244a8e..5ddbab04d894 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -8,7 +8,7 @@ Component Story Format (CSF) is the recommended way to [write stories](../writin -If you are writing stories 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. +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. From 98a575d77bfb3205c59a068eb3d3c6424b765081 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 3 Feb 2024 22:07:07 +0000 Subject: [PATCH 08/43] React Native: Remove watcher from init --- code/lib/cli/src/generators/REACT_NATIVE/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index 94724ba1af59..ba0105282803 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -47,7 +47,6 @@ const generator = async ( packageManager.addScripts({ 'storybook-generate': 'sb-rn-get-stories', - 'storybook-watch': 'sb-rn-watcher', }); const storybookConfigFolder = '.storybook'; From 8b80246a1cbfd2ca35f46b668c5fca22cd850629 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 5 Feb 2024 12:08:37 +0100 Subject: [PATCH 09/43] Next.js: Fix frameworkOptions resolution --- code/frameworks/nextjs/src/preset.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 027d5bad0b2b..bb7ac0ddf153 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, From 10de51692b0ea4ec40010975ef329d04f7dca832 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Mon, 5 Feb 2024 11:21:42 +0000 Subject: [PATCH 10/43] React Native: Fix init fails when package is already installed --- code/lib/cli/src/generators/REACT_NATIVE/index.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index ba0105282803..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', From e6956cd0acc08691284fba2aa4ee25cd1c72e859 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 5 Feb 2024 16:46:44 +0000 Subject: [PATCH 11/43] Update Refs.tsx --- code/ui/manager/src/components/sidebar/Refs.tsx | 1 + 1 file changed, 1 insertion(+) 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, From 1ce9e1bcfef8e1c8bb63aff1ed3f6efe75a8a6e2 Mon Sep 17 00:00:00 2001 From: tusharwebd Date: Mon, 5 Feb 2024 22:37:54 +0530 Subject: [PATCH 12/43] Remove keyboard shortcut hint in search bar on mobile viewports --- .../manager/src/components/sidebar/Search.tsx | 18 +++------------ yarn.lock | 23 +------------------ 2 files changed, 4 insertions(+), 37 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index e04b736d4247..a8913e4ca25c 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; @@ -175,20 +176,6 @@ export const Search = React.memo<{ [api, inputRef, showAllComponents, DEFAULT_REF_ID] ); - const useCheckMobileScreen = () => { - const [width, setWidth] = useState(window.innerWidth); - const handleWindowSizeChange = () => { - setWidth(window.innerWidth); - } - useEffect(() => { - window.addEventListener('resize', handleWindowSizeChange); - return () => { - window.removeEventListener('resize', handleWindowSizeChange); - } - }, []); - return (width <= 768); - } - const list: SearchItem[] = useMemo(() => { return dataset.entries.reduce((acc, [refId, { index, status }]) => { const groupStatus = getGroupStatus(index || {}, status); @@ -302,7 +289,8 @@ export const Search = React.memo<{ }, [inputRef, selectStory, showAllComponents] ); - const isMobile = useCheckMobileScreen(); + const { isMobile } = useLayout(); + return ( initialInputValue={initialQuery} diff --git a/yarn.lock b/yarn.lock index 55fcc018a277..41331a2f1000 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8,26 +8,5 @@ __metadata: "@storybook/root@workspace:.": version: 0.0.0-use.local resolution: "@storybook/root@workspace:." - dependencies: - react-device-detect: "npm:^2.2.3" languageName: unknown - linkType: soft - -"react-device-detect@npm:^2.2.3": - version: 2.2.3 - resolution: "react-device-detect@npm:2.2.3" - dependencies: - ua-parser-js: "npm:^1.0.33" - peerDependencies: - react: ">= 0.14.0" - react-dom: ">= 0.14.0" - checksum: 7152e2b216b3bb6fd75c7859d3441b89658695c629a13c5d374f076756705650be585d5c4dc19d9d34908ef1b61f19b52f1055d74dd7104b77d1b6f897ee09e0 - languageName: node - linkType: hard - -"ua-parser-js@npm:^1.0.33": - version: 1.0.37 - resolution: "ua-parser-js@npm:1.0.37" - checksum: 56508f2428ebac64382c4d41da14189e5013e3e2a5f5918aff4bee3ba77df1f4eaad6f81f90c24999f1cf12cc1596764684497fec07e0ff5182ce9a323a8c05b - languageName: node - linkType: hard + linkType: soft \ No newline at end of file From 22c13a7f90f249e7fb53305eaeb4af61f38ebd05 Mon Sep 17 00:00:00 2001 From: tusharwebd <65904813+tusharwebd@users.noreply.github.com> Date: Mon, 5 Feb 2024 22:48:13 +0530 Subject: [PATCH 13/43] Remove unused import for useEffect hook --- code/ui/manager/src/components/sidebar/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index a8913e4ca25c..cbbecc8264a6 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -5,7 +5,7 @@ import Downshift from 'downshift'; import type { FuseOptions } from 'fuse.js'; import Fuse from 'fuse.js'; import { global } from '@storybook/global'; -import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react'; +import React, { useMemo, useRef, useState, useCallback } from 'react'; import { CloseIcon, SearchIcon } from '@storybook/icons'; import { DEFAULT_REF_ID } from './Sidebar'; import type { From 68e5ec79391deb5549de4ee680c102f8c905be34 Mon Sep 17 00:00:00 2001 From: tusharwebd <65904813+tusharwebd@users.noreply.github.com> Date: Mon, 5 Feb 2024 22:49:58 +0530 Subject: [PATCH 14/43] Add new line at end of file in yarn.lock to avoid any parsing issues --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 41331a2f1000..14231d72f18e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9,4 +9,4 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." languageName: unknown - linkType: soft \ No newline at end of file + linkType: soft From 4b342ac5e6e08fd9ce06370933f73b3c1ca6831d Mon Sep 17 00:00:00 2001 From: tusharwebd <65904813+tusharwebd@users.noreply.github.com> Date: Mon, 5 Feb 2024 22:56:00 +0530 Subject: [PATCH 15/43] Update tsconfig.json to remove unnecessary linting changes --- scripts/tsconfig.json | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index e07f7bb4a60f..77c8d8e2da1b 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -13,13 +13,8 @@ "esModuleInterop": true, "isolatedModules": true, "strictBindCallApply": true, - "lib": [ - "dom", - "es2023" - ], - "types": [ - "node" - ], + "lib": ["dom", "es2023"], + "types": ["node"], "strict": true, "strictNullChecks": false, "forceConsistentCasingInFileNames": true, @@ -29,14 +24,6 @@ "noFallthroughCasesInSwitch": true, "resolveJsonModule": true }, - "exclude": [ - "dist", - "**/dist", - "node_modules", - "**/node_modules" - ], - "include": [ - "./**/*", - "./.eslintrc.js" - ] -} \ No newline at end of file + "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"], + "include": ["./**/*", "./.eslintrc.js"] +} From 41d17bdb031e07722968a57e537db54b8c0a8d03 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 5 Feb 2024 20:52:22 +0100 Subject: [PATCH 16/43] enable vitest for presets/server-webpack --- .../compiler/__testfixtures__/a11y.snapshot | 13 ++---- .../__testfixtures__/actions.snapshot | 17 +++----- .../__testfixtures__/backgrounds.snapshot | 19 +++----- .../__testfixtures__/controls.snapshot | 43 ++++++++----------- .../__testfixtures__/kitchen_sink.snapshot | 35 +++++++-------- .../compiler/__testfixtures__/links.snapshot | 11 ++--- .../multiple_stories.snapshot | 19 +++----- .../lib/compiler/__testfixtures__/params.json | 3 +- .../compiler/__testfixtures__/params.snapshot | 21 ++++----- .../__testfixtures__/params_override.snapshot | 17 +++----- .../compiler/__testfixtures__/yaml.snapshot | 19 +++----- .../compiler/__testfixtures__/yml.snapshot | 19 +++----- code/presets/server-webpack/vitest.config.ts | 14 ++++++ 13 files changed, 108 insertions(+), 142 deletions(-) create mode 100644 code/presets/server-webpack/vitest.config.ts 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), + }, + }) +); From 1d58763397f9657eb8a23a57dcae9539f8dee7e6 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 6 Feb 2024 21:21:33 +1100 Subject: [PATCH 17/43] Add a `rollup-plugin-webpack-stats` to allow stats from preview builds --- code/builders/builder-vite/src/build.ts | 6 + .../builder-vite/src/plugins/index.ts | 1 + .../src/plugins/webpack-stats-plugin.ts | 116 ++++++++++++++++++ code/builders/builder-vite/src/vite-config.ts | 2 + 4 files changed, 125 insertions(+) create mode 100644 code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index ccf9f9476a5f..ac831fcd335e 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -2,6 +2,7 @@ import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { sanitizeEnvVars } from './envs'; +import type { WebpackStatsPlugin } from './plugins'; export async function build(options: Options) { const { build: viteBuild, mergeConfig } = await import('vite'); @@ -29,4 +30,9 @@ export async function build(options: Options) { const finalConfig = await presets.apply('viteFinal', config, options); await viteBuild(await sanitizeEnvVars(options, finalConfig)); + + const statsPlugin = config.plugins?.find( + (p) => p && 'name' in p && p.name === '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..72d40463cd51 --- /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: '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 2383ebd6e5e5..4a1c2fb3ee44 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 From d1f67dcf0afd6fc8c76e9634119ec52f8e410019 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 6 Feb 2024 21:29:43 +1100 Subject: [PATCH 18/43] Avoid duplication with existing TS plugin --- code/builders/builder-vite/src/build.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index ac831fcd335e..254399825592 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -3,6 +3,12 @@ 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'; + +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'); @@ -29,10 +35,18 @@ export async function build(options: Options) { }).build; const finalConfig = await presets.apply('viteFinal', config, options); + + const turbosnapPlugin = findPlugin(finalConfig, 'rollup-plugin-turbosnap'); + if (turbosnapPlugin) { + logger.warn(`Found 'rollup-plugin-turbosnap' 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 = finalConfig.plugins?.filter((p) => p !== turbosnapPlugin); + } + await viteBuild(await sanitizeEnvVars(options, finalConfig)); - const statsPlugin = config.plugins?.find( - (p) => p && 'name' in p && p.name === 'rollup-plugin-webpack-stats' - ) as WebpackStatsPlugin; + const statsPlugin = findPlugin(finalConfig, 'rollup-plugin-webpack-stats') as WebpackStatsPlugin; return statsPlugin?.storybookGetStats(); } From a701072b5aab87976a03b5f2f266648cb901b32c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Feb 2024 12:18:24 +0100 Subject: [PATCH 19/43] Discard changes to code/addons/docs/docs/props-tables.md --- code/addons/docs/docs/props-tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md index 8dd5e8f7a285..dcfe92476c04 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) | From b4b7343a244689b98a4b9aa4c34b4ace7f6ef780 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Feb 2024 12:18:28 +0100 Subject: [PATCH 20/43] Discard changes to code/builders/builder-vite/input/iframe.html --- code/builders/builder-vite/input/iframe.html | 96 ++++++++------------ 1 file changed, 37 insertions(+), 59 deletions(-) diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html index 7720ef6b9482..dd976d6c4ab4 100644 --- a/code/builders/builder-vite/input/iframe.html +++ b/code/builders/builder-vite/input/iframe.html @@ -1,66 +1,44 @@ - + - - - Storybook - - - - - - + + + Storybook + - - - + ('OTHER_GLOBLALS HERE'); - - -
-
- - - - + // 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 From befe593200c260c284c34deaee7a028924011d1d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Feb 2024 12:18:32 +0100 Subject: [PATCH 21/43] Discard changes to code/frameworks/nextjs/README.md --- code/frameworks/nextjs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 87019027ca9a..adbfe7c785a1 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) +- [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent) \ No newline at end of file From 92753a4e015e52baef8a76386db4197d26715db6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Feb 2024 12:18:36 +0100 Subject: [PATCH 22/43] Discard changes to code/lib/cli/tsconfig.json --- code/lib/cli/tsconfig.json | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/tsconfig.json b/code/lib/cli/tsconfig.json index 9c5db279ca2d..e32ebe0f7b90 100644 --- a/code/lib/cli/tsconfig.json +++ b/code/lib/cli/tsconfig.json @@ -1,11 +1,15 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "types": ["node"], + "types": [ + "node" + ], "strict": true, "skipLibCheck": true, "resolveJsonModule": true, "noEmit": true }, - "include": ["src/**/*"] -} + "include": [ + "src/**/*" + ] +} \ No newline at end of file From ead01be566787fe5ec4839db77c6df64a6f5db06 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Feb 2024 12:18:40 +0100 Subject: [PATCH 23/43] Discard changes to code/presets/vue3-webpack/README.md --- code/presets/vue3-webpack/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md index 4c2a2df89914..e361f8bc4222 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) +- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/why-storybook) \ No newline at end of file From 08be5ef4b3253c727cb83e4576ac68ca7dc0f238 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Feb 2024 12:21:57 +0100 Subject: [PATCH 24/43] linting fixes --- code/addons/docs/docs/props-tables.md | 2 +- code/builders/builder-vite/input/iframe.html | 96 ++++++++++++------- code/frameworks/nextjs/README.md | 2 +- code/lib/cli/tsconfig.json | 10 +- .../templates/base-preview-head.html | 17 +++- code/presets/vue3-webpack/README.md | 2 +- 6 files changed, 79 insertions(+), 50 deletions(-) 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/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/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/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/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/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) From 38205a1c6a06c6cb3e2747c2c94a10acb5f52b1f Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 6 Feb 2024 13:51:05 +0100 Subject: [PATCH 25/43] alias @mdx-js/react in Vite --- code/addons/docs/src/preset.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index c9f64366a03c..45c832b5fe42 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -138,7 +138,7 @@ 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 packageDeduplicationPlugin = { name: 'storybook:package-deduplication', @@ -148,6 +148,7 @@ export const viteFinal = async (config: any, options: Options) => { alias: { react, 'react-dom': reactDom, + '@mdx-js/react': mdx, }, dedupe: ['@storybook/theming', '@storybook/components', '@storybook/blocks'], }, From d4dd21bdde4760b4153661f848915276599d519b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 6 Feb 2024 14:40:29 +0100 Subject: [PATCH 26/43] make react an optional peer dep of blocks --- code/ui/blocks/package.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 40180c3914ed..c721cb2ecd11 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -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" }, From d9614aae703e5fe0e437b4b444dac33afcb8e5e6 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 6 Feb 2024 14:52:01 +0100 Subject: [PATCH 27/43] make react an optional peer dep of theming --- code/lib/theming/package.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index f4eba20e29c2..711f4693b829 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -71,6 +71,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" }, From da000c87ede79cad96c17645476cb346c4425fcf Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 6 Feb 2024 14:55:41 +0100 Subject: [PATCH 28/43] make @storybook/icons a devDependency of addons --- code/addons/backgrounds/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 014b90c65a27..a1b64a1fccee 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -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/interactions/package.json b/code/addons/interactions/package.json index 83209d573b5b..1dba11e3c4c6 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -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/measure/package.json b/code/addons/measure/package.json index 372022fb39f9..fc8b9f7e6693 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -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..92a14a1228df 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -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:*", From 1c61a2f4d8890f15f1d680fa5b608d8176d5d0bc Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 6 Feb 2024 15:16:21 +0100 Subject: [PATCH 29/43] add @types/react to addon-docs to satisfy @mdx-js/react peerDep --- code/addons/docs/package.json | 1 + code/yarn.lock | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index f53ae233d210..00e2eb665df9 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -111,6 +111,7 @@ "@storybook/react-dom-shim": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", "fs-extra": "^11.1.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/yarn.lock b/code/yarn.lock index 3eb52a8fc859..56313ad4174c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4843,6 +4843,7 @@ __metadata: "@storybook/test": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" + "@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0" fs-extra: "npm:^11.1.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -5211,6 +5212,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 @@ -6683,6 +6689,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 @@ -7846,6 +7857,17 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0": + version: 18.2.55 + resolution: "@types/react@npm:18.2.55" + dependencies: + "@types/prop-types": "npm:*" + "@types/scheduler": "npm:*" + csstype: "npm:^3.0.2" + checksum: 6b1c73beafbbc582dc54ffd92b3779f6d850e8f6b5ce5d04b31e9498a3d77bfc416bb08f0d8d63ab4f4649ccd6639996472416871c01c74a528b16a55faeaf38 + languageName: node + linkType: hard + "@types/resolve@npm:^1.20.2": version: 1.20.3 resolution: "@types/resolve@npm:1.20.3" From fa5a56cbc6dd55f3f4e0a1cf68e465f1b8cd9be8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 6 Feb 2024 15:53:12 +0100 Subject: [PATCH 30/43] rename portable stories files, refactor tests --- .../store/csf/portable-stories.test.ts | 146 ++++++++++++++++++ .../index.ts => portable-stories.ts} | 12 +- .../store/csf/portable-stories/index.test.ts | 79 ---------- ...sx.snap => portable-stories.test.tsx.snap} | 0 .../react/src/__test__/internals.test.tsx | 117 -------------- ...ies.test.tsx => portable-stories.test.tsx} | 27 +++- .../composeStories/Button.stories.ts | 1 - ...tsx.snap => portable-stories.test.ts.snap} | 0 .../composeStories/internals.test.tsx | 122 --------------- ...ories.test.ts => portable-stories.test.ts} | 30 ++++ 10 files changed, 207 insertions(+), 327 deletions(-) create mode 100644 code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts rename code/lib/preview-api/src/modules/store/csf/{portable-stories/index.ts => portable-stories.ts} (90%) delete mode 100644 code/lib/preview-api/src/modules/store/csf/portable-stories/index.test.ts rename code/renderers/react/src/__test__/__snapshots__/{internals.test.tsx.snap => portable-stories.test.tsx.snap} (100%) delete mode 100644 code/renderers/react/src/__test__/internals.test.tsx rename code/renderers/react/src/__test__/{composeStories.test.tsx => portable-stories.test.tsx} (83%) rename code/renderers/vue3/src/__tests__/composeStories/__snapshots__/{internals.test.tsx.snap => portable-stories.test.ts.snap} (100%) delete mode 100644 code/renderers/vue3/src/__tests__/composeStories/internals.test.tsx rename code/renderers/vue3/src/__tests__/composeStories/{composeStories.test.ts => portable-stories.test.ts} (80%) 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..0531a5acdc18 --- /dev/null +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -0,0 +1,146 @@ +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 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/portable-stories/index.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts similarity index 90% rename from code/lib/preview-api/src/modules/store/csf/portable-stories/index.ts rename to code/lib/preview-api/src/modules/store/csf/portable-stories.ts index b15a3345ed0c..b9d7abc31213 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories/index.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts @@ -15,12 +15,12 @@ import type { } 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([]); diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories/index.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories/index.test.ts deleted file mode 100644 index f0c811aa5abc..000000000000 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories/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/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/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 db3765c6bf08..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 '../../portable-stories'; - -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 80% rename from code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts rename to code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts index 73d415ee029c..a56866fd6227 100644 --- a/code/renderers/vue3/src/__tests__/composeStories/composeStories.test.ts +++ b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts @@ -1,8 +1,10 @@ /// ; 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 '../../portable-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(); +}); From 13322ecb7b5d16fbf3474d637f27e52f8d1eb70e Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 6 Feb 2024 16:25:57 +0000 Subject: [PATCH 31/43] Write changelog for 8.0.0-beta.1 [skip ci] --- CHANGELOG.prerelease.md | 13 +++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index f6fd32e1f285..6f180e8a5640 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,16 @@ +## 8.0.0-beta.1 + +- 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)! +- 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)! +- Fix: Add Visual Test Addon to init command - [#25883](https://github.com/storybookjs/storybook/pull/25883), thanks [@vanessayuenn](https://github.com/vanessayuenn)! +- 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/package.json b/code/package.json index b02e0923a9f3..9dd44c00a1a2 100644 --- a/code/package.json +++ b/code/package.json @@ -292,5 +292,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-beta.1" } 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)!"}} From 34a76b237ae10f52d9b77d9ad0af0951f87888a7 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 6 Feb 2024 16:26:40 +0000 Subject: [PATCH 32/43] Update CHANGELOG.md for v7.6.13 [skip ci] --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) 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)! From 96e28b54e328d70bc337fcf7ebc0854de195bd4b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 7 Feb 2024 00:54:26 +0800 Subject: [PATCH 33/43] Update CHANGELOG.prerelease.md --- CHANGELOG.prerelease.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 6f180e8a5640..b3cf463bf917 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,9 +1,8 @@ ## 8.0.0-beta.1 -- 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)! +- 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)! -- Fix: Add Visual Test Addon to init command - [#25883](https://github.com/storybookjs/storybook/pull/25883), thanks [@vanessayuenn](https://github.com/vanessayuenn)! - 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)! From 30758180a488f9ee9203685bc8a256f920267e07 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 6 Feb 2024 17:33:19 +0000 Subject: [PATCH 34/43] Bump version from "8.0.0-beta.0" to "8.0.0-beta.1" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-manager/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/channels/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/client-logger/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-common/src/versions.ts | 158 +++++++++--------- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/docs-tools/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/manager-api/src/version.ts | 2 +- code/lib/node-logger/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/preview/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/router/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/telemetry/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- 82 files changed, 161 insertions(+), 162 deletions(-) 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 a1b64a1fccee..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", 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/package.json b/code/addons/docs/package.json index 00e2eb665df9..8aaf5c8da31d 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", 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 1dba11e3c4c6..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", 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 37429ea99f8c..c15123f4e396 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 fc8b9f7e6693..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", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 92a14a1228df..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", 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 995622bc85d7..43429b888c0d 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/package.json b/code/builders/builder-vite/package.json index 9765ca657029..819b73ee6eb6 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-webpack5/package.json b/code/builders/builder-webpack5/package.json index 3d7d2aa8ac7f..3be525873025 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/package.json b/code/frameworks/nextjs/package.json index 6a5550566c3a..f3e429300f78 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/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 15532e79e3e4..162d40fb70ce 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/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 4eae4908e965..eaf88cb1cc3a 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" 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-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 c2ee8bb910e9..55bd6868f8f4 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 6350496caaa1..6e6f7f6610ef 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/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/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 a0a70c30683c..c67d2ffa0fe1 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 711f4693b829..d115522a1b52 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" 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 9dd44c00a1a2..e80b1ff1d5d4 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/", @@ -292,6 +292,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.0.0-beta.1" + } } 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 882f50526a64..5ee1aa68e301 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 6e9075fe6929..1313cf96183a 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/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/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/server/package.json b/code/renderers/server/package.json index 1311f09a6c43..cc2a5c41496a 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/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 c721cb2ecd11..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" 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 cff15fac7497..c8cea8f2ff5c 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" From 27d4648deb05c2ac64feb9f9b96ccd11f39ff6e8 Mon Sep 17 00:00:00 2001 From: Karol Stawowski Date: Tue, 6 Feb 2024 18:56:54 +0100 Subject: [PATCH 35/43] fix: update essential addons link --- docs/api/parameters.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) From b629fa74293e70b9185242ec06580495291a09da Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 7 Feb 2024 14:42:07 +1100 Subject: [PATCH 36/43] Smaller refactors suggested by @JReinhold --- code/builders/builder-vite/src/build.ts | 12 ++++++++---- .../builder-vite/src/plugins/webpack-stats-plugin.ts | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 254399825592..31a2e6f62558 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -5,6 +5,8 @@ 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); @@ -36,13 +38,15 @@ export async function build(options: Options) { const finalConfig = await presets.apply('viteFinal', config, options); - const turbosnapPlugin = findPlugin(finalConfig, 'rollup-plugin-turbosnap'); - if (turbosnapPlugin) { - logger.warn(`Found 'rollup-plugin-turbosnap' which is now included by default in Storybook 8.`); + 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 = finalConfig.plugins?.filter((p) => p !== turbosnapPlugin); + finalConfig.plugins = await withoutVitePlugins(finalConfig.plugins, [turbosnapPluginName]); } await viteBuild(await sanitizeEnvVars(options, finalConfig)); diff --git a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts index 72d40463cd51..affb130c07e1 100644 --- a/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts +++ b/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts @@ -83,7 +83,7 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W const statsMap = new Map(); return { - name: 'rollup-plugin-webpack-stats', + 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) { From 96c9ddfeef9ce1a591811463b496a1944e1ca1ac Mon Sep 17 00:00:00 2001 From: Yongwoo Jung Date: Wed, 7 Feb 2024 21:37:16 +0900 Subject: [PATCH 37/43] docs(viewport.md): fix library name typos --- docs/essentials/viewport.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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` From 9c0d26aa12365640e10d78795eef53514333c50a Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 7 Feb 2024 20:00:44 +0000 Subject: [PATCH 38/43] Docs: Visual testing update minimum Storybook version --- docs/writing-tests/visual-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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. From 408ad0d2b043f966beef3b7ed7f317e8228b8ddc Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 7 Feb 2024 22:29:46 +0100 Subject: [PATCH 39/43] expect boolean args to be booleans instead of strings --- code/lib/preview-api/src/modules/store/args.test.ts | 7 ++++--- code/lib/preview-api/src/modules/store/args.ts | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) 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) => { From 4e6fc0dde0842841d99cb3cf5148ca293a950301 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 7 Feb 2024 23:04:36 +0100 Subject: [PATCH 40/43] Refactor CanvasWrap component to use 'show' prop instead of 'display' prop --- code/ui/manager/src/components/preview/Preview.tsx | 2 +- code/ui/manager/src/components/preview/utils/components.ts | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) 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)({ From 913946ad98c17e32f5c60696533bcbc13f6b088c Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 8 Feb 2024 12:43:00 +0100 Subject: [PATCH 41/43] manually set vitest thread count in CI --- code/vitest.workspace.ts | 16 ++++++++++++++++ scripts/vitest.config.ts | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/code/vitest.workspace.ts b/code/vitest.workspace.ts index fda0ab58e871..f09d1adbfd44 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/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, + }, + }, }, }); From ee90829b1605f7b1f075903d865530ecdf51639b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 8 Feb 2024 12:43:28 +0100 Subject: [PATCH 42/43] upgrade vitest --- code/package.json | 4 +- code/vitest-setup.ts | 1 + code/yarn.lock | 154 ++++++++++++++++++----------------- scripts/package.json | 4 +- scripts/yarn.lock | 185 ++++++++++++++++++++++++++----------------- 5 files changed, 197 insertions(+), 151 deletions(-) diff --git a/code/package.json b/code/package.json index e80b1ff1d5d4..0cd11c8c9a67 100644 --- a/code/package.json +++ b/code/package.json @@ -183,7 +183,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", @@ -220,7 +220,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/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/yarn.lock b/code/yarn.lock index 56313ad4174c..4b509e4df195 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: @@ -6418,7 +6418,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" @@ -6455,7 +6455,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: @@ -8416,9 +8416,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" @@ -8428,25 +8428,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 @@ -8461,6 +8450,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" @@ -8472,34 +8472,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 @@ -8512,14 +8503,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 @@ -8535,6 +8524,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" @@ -9183,13 +9184,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" @@ -19428,14 +19436,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 @@ -27426,10 +27434,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 @@ -28823,9 +28831,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" @@ -28834,7 +28842,7 @@ __metadata: vite: "npm:^5.0.0" bin: vite-node: vite-node.mjs - checksum: 3be4f8045a2c39afb57fdf83450791f872b10f883728eb58495640eed8d370f062a8bf25622afd005be8b375a1b4ac5731ca4fa0ae7c962742acf8f904f7748a + checksum: 39a5b9d9c806a012aab208eee0f59e4e12446ec19a4cf149a6459e7ff86491c289e189fda4f55a63b7e37d713f5edbda0e9efed95af4f7ebefa6d39eee093c0b languageName: node linkType: hard @@ -28977,16 +28985,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" @@ -28998,9 +29006,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": "*" @@ -29024,7 +29032,7 @@ __metadata: optional: true bin: vitest: vitest.mjs - checksum: 401cd3f7bc716269ed2e4d6304b3377a3957370f9ca1565d0fb328b3eb0017ba627e0357ccf7bf29126750ef312cc9e5319af8b5cfa87c3f746732480bebb813 + checksum: 085cb62146191b32dc98fac1a5b0de6d1c63c44cc1e7946a7d38309dd4135539432ec27b4bfad38ce79736688a0ce20d9b93f58de4ce4a41677cb3c5ca6ad980 languageName: node linkType: hard diff --git a/scripts/package.json b/scripts/package.json index 1d150aca19df..1bb83d136ea6 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -106,7 +106,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", @@ -179,7 +179,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/yarn.lock b/scripts/yarn.lock index f846c07ffb0e..c92afc1e9ed1 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" @@ -2746,7 +2766,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" @@ -2822,7 +2842,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" @@ -3038,6 +3058,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" @@ -3891,9 +3918,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" @@ -3903,67 +3930,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 @@ -4067,10 +4095,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 @@ -7056,6 +7084,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" @@ -10094,14 +10131,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 @@ -12304,14 +12341,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 @@ -14580,10 +14617,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 @@ -15723,28 +15760,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 @@ -15774,20 +15811,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" @@ -15799,9 +15836,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": "*" @@ -15825,7 +15862,7 @@ __metadata: optional: true bin: vitest: vitest.mjs - checksum: e59bab2c0a20411e3fc1e4afa954de5d9865e8d36a1ee646402c77251d769538241ba243519ed05d65fe9e956298313aeb7d61655f8fd2e0009f9bcb9bbf9a48 + checksum: 085cb62146191b32dc98fac1a5b0de6d1c63c44cc1e7946a7d38309dd4135539432ec27b4bfad38ce79736688a0ce20d9b93f58de4ce4a41677cb3c5ca6ad980 languageName: node linkType: hard From 8e2a37594fb564112754e36cef20645ca82960b8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 8 Feb 2024 13:05:51 +0100 Subject: [PATCH 43/43] pass story context to the play function of a composed story --- .../store/csf/portable-stories.test.ts | 32 ++++++++++++++++++ .../src/modules/store/csf/portable-stories.ts | 33 +++++++++++++++---- 2 files changed, 58 insertions(+), 7 deletions(-) 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 index 0531a5acdc18..eae92f09aac8 100644 --- 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 @@ -30,6 +30,38 @@ describe('composeStory', () => { ); }); + 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) diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts index b9d7abc31213..0ebf858e96e8 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts @@ -12,6 +12,7 @@ import type { Parameters, ComposedStoryFn, StrictArgTypes, + ComposedStoryPlayContext, } from '@storybook/types'; import { HooksContext } from '../../../addons'; @@ -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>, } );