diff --git a/.circleci/config.yml b/.circleci/config.yml index 0d3340694846..b34288f775cb 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -124,6 +124,7 @@ jobs: command: | yarn task --task compile --start-from=auto --no-link --debug git diff --exit-code + yarn dedupe --check - run: name: Publish to Verdaccio command: | diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a1978abc0d9..9826390c44b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 8.0.1 + +- Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman! +- Core: Fix addon bundling script - [#26145](https://github.com/storybookjs/storybook/pull/26145), thanks @ndelangen! +- Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks @ndelangen! +- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen! + ## 8.0.0 #### Storybook 8.0 is here diff --git a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch b/code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch similarity index 85% rename from code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch rename to code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch index 9a1b74e203bd..b2028a85b1ff 100644 --- a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch +++ b/code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch @@ -1,10 +1,10 @@ diff --git a/dist/index.js b/dist/index.js -index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e016d2b06 100644 +index 640839e4b9fef0f25d08d055d4350845a8a29791..844f3d5834147848b5fa54276e96e665bcc675f9 100644 --- a/dist/index.js +++ b/dist/index.js -@@ -6,28 +6,35 @@ import { processError } from '@vitest/utils/error'; +@@ -6,26 +6,32 @@ import { processError } from '@vitest/utils/error'; import { util } from 'chai'; - + const MATCHERS_OBJECT = Symbol.for("matchers-object"); -const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object"); +// Patched this symbol for storybook, so that @storybook/test can be used in a jest environment as well. @@ -12,10 +12,11 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e +const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object-storybook"); const GLOBAL_EXPECT = Symbol.for("expect-global"); const ASYMMETRIC_MATCHERS_OBJECT = Symbol.for("asymmetric-matchers-object"); - + if (!Object.prototype.hasOwnProperty.call(globalThis, MATCHERS_OBJECT)) { const globalState = /* @__PURE__ */ new WeakMap(); - const matchers = /* @__PURE__ */ Object.create(null); +- const customEqualityTesters = []; - const assymetricMatchers = /* @__PURE__ */ Object.create(null); Object.defineProperty(globalThis, MATCHERS_OBJECT, { get: () => globalState @@ -23,12 +24,14 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e +} +if (!Object.prototype.hasOwnProperty.call(globalThis, JEST_MATCHERS_OBJECT)) { + const matchers = /* @__PURE__ */ Object.create(null); ++ const customEqualityTesters = []; Object.defineProperty(globalThis, JEST_MATCHERS_OBJECT, { configurable: true, get: () => ({ - state: globalState.get(globalThis[GLOBAL_EXPECT]), + state: globalThis[MATCHERS_OBJECT].get(globalThis[GLOBAL_EXPECT]), - matchers + matchers, + customEqualityTesters }) }); +} @@ -37,8 +40,3 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e Object.defineProperty(globalThis, ASYMMETRIC_MATCHERS_OBJECT, { get: () => assymetricMatchers }); - } -+ - function getState(expect) { - return globalThis[MATCHERS_OBJECT].get(expect); - } diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts index a647a8eb0d1b..fab9e8aae1d4 100644 --- a/code/addons/actions/src/runtime/action.ts +++ b/code/addons/actions/src/runtime/action.ts @@ -21,10 +21,9 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent => findProto(e, (proto) => /^Synthetic(?:Base)?Event$/.test(proto.constructor.name)) && typeof (e as SyntheticEvent).persist === 'function' ); -const serializeArg = (a: T) => { +const serializeArg = (a: T) => { if (isReactSyntheticEvent(a)) { const e: SyntheticEvent = Object.create( - // @ts-expect-error (Converted from ts-ignore) a.constructor.prototype, Object.getOwnPropertyDescriptors(a) ); diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index a3f2fb45fa40..7a410ef3fc4b 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -50,8 +50,9 @@ }, "dependencies": { "@storybook/global": "^5.0.0", + "@storybook/instrumenter": "workspace:*", + "@storybook/test": "workspace:*", "@storybook/types": "workspace:*", - "jest-mock": "^27.0.6", "polished": "^4.2.2", "ts-dedent": "^2.2.0" }, @@ -62,10 +63,8 @@ "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/icons": "^1.2.5", - "@storybook/instrumenter": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/test": "workspace:*", "@storybook/theming": "workspace:*", "@types/node": "^18.0.0", "formik": "^2.2.9", diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts index 51d8c09c5fc4..651183a9df66 100644 --- a/code/addons/links/src/utils.ts +++ b/code/addons/links/src/utils.ts @@ -37,9 +37,7 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise return new Promise((resolve) => { const { location } = document; const query = parseQuery(location.search); - // @ts-expect-error (Converted from ts-ignore) - const existingId = [].concat(query.id)[0]; - // @ts-expect-error (Converted from ts-ignore) + const existingId = query.id; const titleToLink = title || existingId.split('--', 2)[0]; const id = toId(titleToLink, name); const path = `/story/${id}`; diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 1972fde8e8e7..7d38b61cb747 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -3,6 +3,8 @@ import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite'; import type { Options } from '@storybook/types'; import { listStories } from './list-stories'; +// It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart +// TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens const INCLUDE_CANDIDATES = [ '@base2/pretty-print-object', '@emotion/core', @@ -27,7 +29,6 @@ const INCLUDE_CANDIDATES = [ 'fast-deep-equal', 'html-tags', 'isobject', - 'jest-mock', 'loader-utils', 'lodash/camelCase.js', 'lodash/camelCase', diff --git a/code/frameworks/svelte-webpack5/README.md b/code/frameworks/svelte-webpack5/README.md index d490ff6af11c..fa37e5b2e74b 100644 --- a/code/frameworks/svelte-webpack5/README.md +++ b/code/frameworks/svelte-webpack5/README.md @@ -1,32 +1,3 @@ -# Storybook for Svelte +# Storybook for Svelte & Webpack -Storybook for Svelte is a UI development environment for your Svelte components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-svelte-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/svelte/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## TODOs - -- Support `addon-info` -- Support Svelte markup directly in stories -- Add Svelte storybook generator -- Provide stories that show advanced Svelte use cases -- Hydratable -- Advanced mount options +See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 0243fde57b23..8bb8789a879d 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -1,190 +1,6 @@ -# Storybook for SvelteKit +# Storybook for SvelteKit -Our goal is to help you use the tools you love together with Storybook. That’s why Storybook has zero-config support for SvelteKit with the `@storybook/sveltekit` package. - -Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) announcement for what this all means for you and our continued efforts to make Storybook a seamless integration for any project. - -## Table of Contents - -- [Supported features](#supported-features) -- [Requirements](#requirements) -- [Getting Started](#getting-started) - - [In a project without Storybook](#in-a-project-without-storybook) - - [In a project with Storybook](#in-a-project-with-storybook) - - [Automatic migration](#automatic-migration) - - [Manual migration](#manual-migration) -- [How to mock](#how-to-mock) - - [Mocking links](#mocking-links) -- [Troubleshooting](#troubleshooting) - - [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook) -- [Acknowledgements](#acknowledgements) - -## Supported features - -All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath. -However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon: - -| **Module** | **Status** | **Note** | -| ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. | -| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ✅ Supported | See [How to mock](#how-to-mock) | -| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ✅ Supported | See [How to mock](#how-to-mock) | -| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer | -| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | See [How to mock](#how-to-mock) | -| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | -| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. | -| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | -| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | | -| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | | -| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers | -| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | | - -This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/svelte/writing-stories), [test](https://storybook.js.org/docs/svelte/writing-tests) and [document](https://storybook.js.org/docs/svelte/writing-docs) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love. - -## Requirements - -- [SvelteKit](https://kit.svelte.dev/) >= 1.0.0 (not including beta versions) -- [Storybook](https://storybook.js.org/) >= 7.x - -## Getting Started - -### In a project without Storybook - -Run the following command in your SvelteKit project's root directory, and follow the prompts: - -```bash -npx storybook@latest init -``` - -[More on getting started with Storybook](https://storybook.js.org/docs/svelte/get-started/install) - -### In a project with Storybook - -This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command: - -```bash -npx storybook@latest upgrade -``` - -#### Automatic migration - -When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below. - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.js` the automigration will have removed it, as it is no longer supported. - -#### Manual migration - -Install the framework: - -```bash -yarn add -D @storybook/sveltekit -``` - -Update your `main.js` to change the framework property: - -```js -// .storybook/main.js -export default { - ... - framework: '@storybook/sveltekit', -}; -``` - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.js` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below. - -Remove any redundant dependencies, if you have them: - -```bash -yarn remove @storybook/svelte-vite -yarn remove @storybook/svelte-webpack5 -yarn remove storybook-builder-vite -yarn remove @storybook/builder-vite -``` - -## How to mock - -To mock a SvelteKit import you can set it on `parameters.sveltekit_experimental`: - -```ts -export const MyStory = { - parameters: { - sveltekit_experimental: { - stores: { - page: { - data: { - test: 'passed', - }, - }, - navigating: { - route: { - id: '/storybook', - }, - }, - updated: true, - }, - }, - }, -}; -``` - -You can add the name of the module you want to mock to `parameters.sveltekit_experimental` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects: - -| Module | Path in parameters | Kind of objects | -| ------------------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `import { page } from "$app/stores"` | `parameters.sveltekit_experimental.stores.page` | A Partial of the page store | -| `import { navigating } from "$app/stores"` | `parameters.sveltekit_experimental.stores.navigating` | A Partial of the navigating store | -| `import { updated } from "$app/stores"` | `parameters.sveltekit_experimental.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | -| `import { goto } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.goto` | A callback that will be called whenever goto is called, in no function is provided an action will be logged to the Actions panel | -| `import { pushState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.pushState` | A callback that will be called whenever pushState is called, in no function is provided an action will be logged to the Actions panel | -| `import { replaceState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.replaceState` | A callback that will be called whenever replaceState is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidate` | A callback that will be called whenever invalidate is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidateAll } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called, in no function is provided an action will be logged to the Actions panel | -| `import { afterNavigate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | -| `import { enhance } from "$app/forms"` | `parameters.sveltekit_experimental.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | - -All the other functions are still exported as `noop` from the mocked modules so that your application will still work. - -### Mocking links - -The default link-handling behavior (ie. clicking an `` tag with an `href` attribute) is to log an action to the Actions panel. - -You can override this by setting an object on `parameter.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values are objects typed as `{ callback: (href, event) => void, asRegex?: boolean }`. - -If you have an `` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based on the `asRegex` property) the corresponding `callback` will be called. - -Example: - -```ts -export const MyStory = { - parameters: { - sveltekit_experimental: { - hrefs: { - '/basic-href': (to, event) => { - console.log(to, event); - }, - '/root.*': { - callback: (to, event) => { - console.log(to, event); - }, - asRegex: true, - }, - }, - }, - }, -}; -``` - -## Troubleshooting - -### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook - -> When starting Storybook after upgrading to v7.0, it breaks with the following error: -> -> ``` -> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared -> ``` - -You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0. +See [documentation](https://storybook.js.org/docs/8.0/get-started/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more. ## Acknowledgements diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md index 2e365a8a7f8e..a4e696468d58 100644 --- a/code/frameworks/vue3-webpack5/README.md +++ b/code/frameworks/vue3-webpack5/README.md @@ -1,44 +1,3 @@ # Storybook for Vue 3 and Webpack -Storybook for Vue 3 is a UI development environment for your Vue 3 components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-vue3-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## Extending the Vue application - -Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. -When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. - -Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. - -```js -// .storybook/preview.js - -import { setup } from '@storybook/vue3'; - -setup((app) => { - app.use(MyPlugin); - app.component('my-component', MyComponent); - app.mixin({ - /* My mixin */ - }); -}); -``` +See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more. \ No newline at end of file diff --git a/code/frameworks/web-components-vite/README.md b/code/frameworks/web-components-vite/README.md index 9c68eca98041..af1a9ffaa853 100644 --- a/code/frameworks/web-components-vite/README.md +++ b/code/frameworks/web-components-vite/README.md @@ -1 +1,3 @@ -# Storybook for Web components +# Storybook for Web components & Vite + +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md index 4562b5dc35ee..d9ee9b9fd385 100644 --- a/code/frameworks/web-components-webpack5/README.md +++ b/code/frameworks/web-components-webpack5/README.md @@ -1,71 +1,3 @@ -# Storybook for web-components +# Storybook for Web components & Webpack ---- - -Storybook for web-components is a UI development environment for your plain web-component snippets. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-app -npx storybook@latest init -t web_components -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/web-components/sharing/publish-storybook) of your storybook and deploy it anywhere you want. - -# Hot Module Reloading (HMR) - -As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast. - -# Setup es6/7 dependencies - -By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation". - -For example if you have a library called `my-library` which is in ES2017 then you can add it like so - -```js -// .storybook/main.js - -export default { - webpackFinal: async (config) => { - // find web-components rule for extra transpilation - const webComponentsRule = config.module.rules.find( - (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false - ); - // add your own `my-library` - webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); - - return config; - }, -}; -``` - -By default the following folders are included - -- `src/*.js` -- `packages/*/src/*.js` -- `node_modules/lit-html/*.js` -- `node_modules/lit-element/*.js` -- `node_modules/@open-wc/*.js` -- `node_modules/@polymer/*.js` -- `node_modules/@vaadin/*.js` - -As you can see the `src` folder is also included. -The reason for that is as it has some extra configuration to allow for example `import.meta`. -If you use a different folder you will need to make sure webpack/babel can handle it. - -# FAQ - -- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry` - => please see Setup page reload via HMR +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index f0b7cc5ff612..bb07d053d5d4 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -19,6 +19,7 @@ import { getStorybookInfo, loadMainConfig, JsPackageManagerFactory, + getCoercedStorybookVersion, } from '@storybook/core-common'; import { automigrate } from './automigrate/index'; import { autoblock } from './autoblock/index'; @@ -141,10 +142,11 @@ export const doUpgrade = async ({ throw new UpgradeStorybookToSameVersionError({ beforeVersion }); } - const [latestVersion, packageJson] = await Promise.all([ + const [latestVersion, packageJson, storybookVersion] = await Promise.all([ // packageManager.latestVersion('@storybook/cli'), packageManager.retrievePackageJson(), + getCoercedStorybookVersion(packageManager), ]); const isOutdated = lt(currentVersion, latestVersion); @@ -188,7 +190,7 @@ export const doUpgrade = async ({ const mainConfig = await loadMainConfig({ configDir }); // GUARDS - if (!beforeVersion) { + if (!storybookVersion) { throw new UpgradeStorybookUnknownCurrentVersionError(); } diff --git a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts index 8523d7224eda..7e6fb6b3472a 100644 --- a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts @@ -17,6 +17,8 @@ const logger = console; export type PackageManagerName = 'npm' | 'yarn1' | 'yarn2' | 'pnpm'; +type StorybookPackage = keyof typeof storybookPackagesVersions; + /** * Extract package name and version from input * @@ -381,9 +383,8 @@ export abstract class JsPackageManager { public async getVersion(packageName: string, constraint?: string): Promise { let current: string | undefined; - if (/(@storybook|^sb$|^storybook$)/.test(packageName)) { - // @ts-expect-error (Converted from ts-ignore) - current = storybookPackagesVersions[packageName]; + if (packageName in storybookPackagesVersions) { + current = storybookPackagesVersions[packageName as StorybookPackage]; } let latest; diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 9e8578e5b392..e08d7b2748b9 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -49,7 +49,7 @@ "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", - "@vitest/utils": "^0.34.6", + "@vitest/utils": "^1.3.1", "util": "^0.12.4" }, "devDependencies": { diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 71a5a793d9a3..96e67f5e65bc 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -60,7 +60,6 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@jest/globals": "^29.3.1", "@types/lodash": "^4.14.167", "@types/qs": "^6", "@types/semver": "^7.3.4", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 61aa33464abc..45b6377e83e2 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -60,7 +60,6 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@jest/globals": "^29.5.0", "@storybook/core-common": "workspace:*", "ansi-to-html": "^0.6.11", "slash": "^5.0.0" diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index af851edfc304..29ea71045949 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -100,9 +100,7 @@ export class Preview { get: (_, method) => { if (this.storyStoreValue) { deprecate('Accessing the Story Store is deprecated and will be removed in 9.0'); - - // @ts-expect-error I'm not sure if there's a way to keep TS happy here - return this.storyStoreValue[method]; + return this.storyStoreValue[method as keyof StoryStore]; } throw new StoryStoreAccessedBeforeInitializationError(); diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 5510b4b5f882..974127cc88e0 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -47,12 +47,12 @@ "@storybook/core-events": "workspace:*", "@storybook/instrumenter": "workspace:*", "@storybook/preview-api": "workspace:*", - "@testing-library/dom": "^9.3.1", - "@testing-library/jest-dom": "^6.4.0", + "@testing-library/dom": "^9.3.4", + "@testing-library/jest-dom": "^6.4.2", "@testing-library/user-event": "^14.5.2", - "@vitest/expect": "1.1.3", - "@vitest/spy": "^1.1.3", - "chai": "^4.3.7", + "@vitest/expect": "1.3.1", + "@vitest/spy": "^1.3.1", + "chai": "^4.4.1", "util": "^0.12.4" }, "devDependencies": { diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index 600c68f1d3b4..7bd72666f341 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -36,6 +36,6 @@ const resetAllMocksLoader: LoaderFunction = ({ parameters }) => { } }; -// @ts-expect-error We are using this as a default Storybook loader, when the test package is used. This avoids the need for optional peer dependency workarounds. +// We are using this as a default Storybook loader, when the test package is used. This avoids the need for optional peer dependency workarounds. // eslint-disable-next-line no-underscore-dangle -global.__STORYBOOK_TEST_LOADERS__ = [resetAllMocksLoader]; +(global as any).__STORYBOOK_TEST_LOADERS__ = [resetAllMocksLoader]; diff --git a/code/package.json b/code/package.json index 9e44d4f7f088..a44e8420f1c9 100644 --- a/code/package.json +++ b/code/package.json @@ -78,8 +78,9 @@ "resolutions": { "@playwright/test": "1.36.0", "@storybook/theming": "workspace:*", + "@testing-library/jest-dom/aria-query": "5.1.3", "@types/node": "^18.0.0", - "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch", + "@vitest/expect": "patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch", "esbuild": "^0.20.1", "playwright": "1.36.0", "playwright-core": "1.36.0", @@ -170,7 +171,7 @@ "@storybook/web-components-vite": "workspace:*", "@storybook/web-components-webpack5": "workspace:*", "@testing-library/dom": "^7.29.4", - "@testing-library/jest-dom": "^6.1.4", + "@testing-library/jest-dom": "6.1.4", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "@types/express": "^4.17.11", @@ -294,5 +295,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.1" } diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts index 797e7a648d9a..525cfbbfd281 100644 --- a/code/renderers/vue3/src/docs/sourceDecorator.ts +++ b/code/renderers/vue3/src/docs/sourceDecorator.ts @@ -15,7 +15,7 @@ import type { import { baseParse } from '@vue/compiler-core'; import type { ConcreteComponent, FunctionalComponent, VNode } from 'vue'; import { h, isVNode, watch } from 'vue'; -import { kebabCase } from 'lodash'; +import kebabCase from 'lodash/kebabCase'; import { attributeSource, htmlEventAttributeToVueEventAttribute, diff --git a/code/ui/blocks/src/blocks/ArgTypes.tsx b/code/ui/blocks/src/blocks/ArgTypes.tsx index 7fe3cf8a66c9..fc64e7ba16e1 100644 --- a/code/ui/blocks/src/blocks/ArgTypes.tsx +++ b/code/ui/blocks/src/blocks/ArgTypes.tsx @@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api'; import type { ArgTypesExtractor } from '@storybook/docs-tools'; import React from 'react'; -import { mapValues } from 'lodash'; import type { SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { useOf } from './useOf'; @@ -83,10 +82,15 @@ export const ArgTypes: FC = (props) => { } const mainComponentName = getComponentName(component); - const subcomponentTabs = mapValues(subcomponents, (comp) => ({ - rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), - sort, - })); + const subcomponentTabs = Object.fromEntries( + Object.entries(subcomponents).map(([key, comp]) => [ + key, + { + rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), + sort, + }, + ]) + ); const tabs = { [mainComponentName]: { rows: filteredArgTypes, sort }, ...subcomponentTabs, diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx index f47194033f1d..4e3ea828e289 100644 --- a/code/ui/blocks/src/blocks/Controls.tsx +++ b/code/ui/blocks/src/blocks/Controls.tsx @@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api'; import type { PropDescriptor } from '@storybook/preview-api'; import type { ArgTypesExtractor } from '@storybook/docs-tools'; -import { mapValues } from 'lodash'; import type { SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { DocsContext } from './DocsContext'; @@ -75,10 +74,15 @@ export const Controls: FC = (props) => { } const mainComponentName = getComponentName(component); - const subcomponentTabs = mapValues(subcomponents, (comp) => ({ - rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), - sort, - })); + const subcomponentTabs = Object.fromEntries( + Object.entries(subcomponents).map(([key, comp]) => [ + key, + { + rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), + sort, + }, + ]) + ); const tabs = { [mainComponentName]: { rows: filteredArgTypes, sort }, ...subcomponentTabs, diff --git a/code/yarn.lock b/code/yarn.lock index 19b2f6697c04..2a8cf58a01de 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -24,7 +24,7 @@ __metadata: languageName: node linkType: hard -"@adobe/css-tools@npm:^4.3.2": +"@adobe/css-tools@npm:^4.3.1, @adobe/css-tools@npm:^4.3.2": version: 4.3.3 resolution: "@adobe/css-tools@npm:4.3.3" checksum: e76e712df713964b87cdf2aca1f0477f19bebd845484d5fcba726d3ec7782366e2f26ec8cb2dcfaf47081a5c891987d8a9f5c3f30d11e1eb3c1848adc27fcb24 @@ -404,7 +404,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5": version: 7.23.5 resolution: "@babel/code-frame@npm:7.23.5" dependencies: @@ -444,7 +444,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": +"@babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": version: 7.23.9 resolution: "@babel/core@npm:7.23.9" dependencies: @@ -479,7 +479,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -905,7 +905,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-class-properties@npm:^7.12.13, @babel/plugin-syntax-class-properties@npm:^7.8.3": +"@babel/plugin-syntax-class-properties@npm:^7.12.13": version: 7.12.13 resolution: "@babel/plugin-syntax-class-properties@npm:7.12.13" dependencies: @@ -993,7 +993,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.8.3": +"@babel/plugin-syntax-import-meta@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4" dependencies: @@ -1015,7 +1015,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.7.2": +"@babel/plugin-syntax-jsx@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-syntax-jsx@npm:7.23.3" dependencies: @@ -1026,7 +1026,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3": +"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4" dependencies: @@ -1048,7 +1048,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-numeric-separator@npm:^7.10.4, @babel/plugin-syntax-numeric-separator@npm:^7.8.3": +"@babel/plugin-syntax-numeric-separator@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-numeric-separator@npm:7.10.4" dependencies: @@ -1103,7 +1103,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-top-level-await@npm:^7.14.5, @babel/plugin-syntax-top-level-await@npm:^7.8.3": +"@babel/plugin-syntax-top-level-await@npm:^7.14.5": version: 7.14.5 resolution: "@babel/plugin-syntax-top-level-await@npm:7.14.5" dependencies: @@ -1114,7 +1114,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-typescript@npm:^7.23.3, @babel/plugin-syntax-typescript@npm:^7.7.2": +"@babel/plugin-syntax-typescript@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-syntax-typescript@npm:7.23.3" dependencies: @@ -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.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @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.23.9, @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.9 resolution: "@babel/types@npm:7.23.9" dependencies: @@ -3405,63 +3405,6 @@ __metadata: languageName: node linkType: hard -"@jest/environment@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/environment@npm:29.7.0" - dependencies: - "@jest/fake-timers": "npm:^29.7.0" - "@jest/types": "npm:^29.6.3" - "@types/node": "npm:*" - jest-mock: "npm:^29.7.0" - checksum: c7b1b40c618f8baf4d00609022d2afa086d9c6acc706f303a70bb4b67275868f620ad2e1a9efc5edd418906157337cce50589a627a6400bbdf117d351b91ef86 - languageName: node - linkType: hard - -"@jest/expect-utils@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/expect-utils@npm:29.7.0" - dependencies: - jest-get-type: "npm:^29.6.3" - checksum: 60b79d23a5358dc50d9510d726443316253ecda3a7fb8072e1526b3e0d3b14f066ee112db95699b7a43ad3f0b61b750c72e28a5a1cac361d7a2bb34747fa938a - languageName: node - linkType: hard - -"@jest/expect@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/expect@npm:29.7.0" - dependencies: - expect: "npm:^29.7.0" - jest-snapshot: "npm:^29.7.0" - checksum: b41f193fb697d3ced134349250aed6ccea075e48c4f803159db102b826a4e473397c68c31118259868fd69a5cba70e97e1c26d2c2ff716ca39dc73a2ccec037e - languageName: node - linkType: hard - -"@jest/fake-timers@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/fake-timers@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@sinonjs/fake-timers": "npm:^10.0.2" - "@types/node": "npm:*" - jest-message-util: "npm:^29.7.0" - jest-mock: "npm:^29.7.0" - jest-util: "npm:^29.7.0" - checksum: cf0a8bcda801b28dc2e2b2ba36302200ee8104a45ad7a21e6c234148932f826cb3bc57c8df3b7b815aeea0861d7b6ca6f0d4778f93b9219398ef28749e03595c - languageName: node - linkType: hard - -"@jest/globals@npm:^29.3.1, @jest/globals@npm:^29.5.0": - version: 29.7.0 - resolution: "@jest/globals@npm:29.7.0" - dependencies: - "@jest/environment": "npm:^29.7.0" - "@jest/expect": "npm:^29.7.0" - "@jest/types": "npm:^29.6.3" - jest-mock: "npm:^29.7.0" - checksum: a385c99396878fe6e4460c43bd7bb0a5cc52befb462cc6e7f2a3810f9e7bcce7cdeb51908fd530391ee452dc856c98baa2c5f5fa8a5b30b071d31ef7f6955cea - languageName: node - linkType: hard - "@jest/schemas@npm:^29.6.3": version: 29.6.3 resolution: "@jest/schemas@npm:29.6.3" @@ -3471,29 +3414,6 @@ __metadata: languageName: node linkType: hard -"@jest/transform@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/transform@npm:29.7.0" - dependencies: - "@babel/core": "npm:^7.11.6" - "@jest/types": "npm:^29.6.3" - "@jridgewell/trace-mapping": "npm:^0.3.18" - babel-plugin-istanbul: "npm:^6.1.1" - chalk: "npm:^4.0.0" - convert-source-map: "npm:^2.0.0" - fast-json-stable-stringify: "npm:^2.1.0" - graceful-fs: "npm:^4.2.9" - jest-haste-map: "npm:^29.7.0" - jest-regex-util: "npm:^29.6.3" - jest-util: "npm:^29.7.0" - micromatch: "npm:^4.0.4" - pirates: "npm:^4.0.4" - slash: "npm:^3.0.0" - write-file-atomic: "npm:^4.0.2" - checksum: 7f4a7f73dcf45dfdf280c7aa283cbac7b6e5a904813c3a93ead7e55873761fc20d5c4f0191d2019004fac6f55f061c82eb3249c2901164ad80e362e7a7ede5a6 - languageName: node - linkType: hard - "@jest/types@npm:^26.6.2": version: 26.6.2 resolution: "@jest/types@npm:26.6.2" @@ -3507,33 +3427,6 @@ __metadata: languageName: node linkType: hard -"@jest/types@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/types@npm:27.5.1" - dependencies: - "@types/istanbul-lib-coverage": "npm:^2.0.0" - "@types/istanbul-reports": "npm:^3.0.0" - "@types/node": "npm:*" - "@types/yargs": "npm:^16.0.0" - chalk: "npm:^4.0.0" - checksum: 4598b302398db0eb77168b75a6c58148ea02cc9b9f21c5d1bbe985c1c9257110a5653cf7b901c3cab87fba231e3fed83633687f1c0903b4bc6939ab2a8452504 - languageName: node - linkType: hard - -"@jest/types@npm:^29.6.3": - version: 29.6.3 - resolution: "@jest/types@npm:29.6.3" - dependencies: - "@jest/schemas": "npm:^29.6.3" - "@types/istanbul-lib-coverage": "npm:^2.0.0" - "@types/istanbul-reports": "npm:^3.0.0" - "@types/node": "npm:*" - "@types/yargs": "npm:^17.0.8" - chalk: "npm:^4.0.0" - checksum: ea4e493dd3fb47933b8ccab201ae573dcc451f951dc44ed2a86123cd8541b82aa9d2b1031caf9b1080d6673c517e2dcc25a44b2dc4f3fbc37bfc965d444888c0 - languageName: node - linkType: hard - "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": version: 0.3.0 resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" @@ -4904,24 +4797,6 @@ __metadata: languageName: node linkType: hard -"@sinonjs/commons@npm:^3.0.0": - version: 3.0.0 - resolution: "@sinonjs/commons@npm:3.0.0" - dependencies: - type-detect: "npm:4.0.8" - checksum: 1df9cd257942f4e4960dfb9fd339d9e97b6a3da135f3d5b8646562918e863809cb8e00268535f4f4723535d2097881c8fc03d545c414d8555183376cfc54ee84 - languageName: node - linkType: hard - -"@sinonjs/fake-timers@npm:^10.0.2": - version: 10.3.0 - resolution: "@sinonjs/fake-timers@npm:10.3.0" - dependencies: - "@sinonjs/commons": "npm:^3.0.0" - checksum: 2e2fb6cc57f227912814085b7b01fede050cd4746ea8d49a1e44d5a0e56a804663b0340ae2f11af7559ea9bf4d087a11f2f646197a660ea3cb04e19efc04aa63 - languageName: node - linkType: hard - "@socket.io/component-emitter@npm:~3.1.0": version: 3.1.0 resolution: "@socket.io/component-emitter@npm:3.1.0" @@ -5126,7 +5001,6 @@ __metadata: "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" formik: "npm:^2.2.9" - jest-mock: "npm:^27.0.6" polished: "npm:^4.2.2" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -6054,7 +5928,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" - "@vitest/utils": "npm:^0.34.6" + "@vitest/utils": "npm:^1.3.1" typescript: "npm:^5.3.2" util: "npm:^0.12.4" languageName: unknown @@ -6091,7 +5965,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/manager-api@workspace:lib/manager-api" dependencies: - "@jest/globals": "npm:^29.3.1" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -6422,7 +6295,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" dependencies: - "@jest/globals": "npm:^29.5.0" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -6659,7 +6531,7 @@ __metadata: "@storybook/web-components-vite": "workspace:*" "@storybook/web-components-webpack5": "workspace:*" "@testing-library/dom": "npm:^7.29.4" - "@testing-library/jest-dom": "npm:^6.1.4" + "@testing-library/jest-dom": "npm:6.1.4" "@testing-library/react": "npm:^14.0.0" "@testing-library/user-event": "npm:^14.4.3" "@types/express": "npm:^4.17.11" @@ -6900,12 +6772,12 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/instrumenter": "workspace:*" "@storybook/preview-api": "workspace:*" - "@testing-library/dom": "npm:^9.3.1" - "@testing-library/jest-dom": "npm:^6.4.0" + "@testing-library/dom": "npm:^9.3.4" + "@testing-library/jest-dom": "npm:^6.4.2" "@testing-library/user-event": "npm:^14.5.2" - "@vitest/expect": "npm:1.1.3" - "@vitest/spy": "npm:^1.1.3" - chai: "npm:^4.3.7" + "@vitest/expect": "npm:1.3.1" + "@vitest/spy": "npm:^1.3.1" + chai: "npm:^4.4.1" ts-dedent: "npm:^2.2.0" type-fest: "npm:~2.19" typescript: "npm:^5.3.2" @@ -7155,9 +7027,9 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.1, @testing-library/dom@npm:^9.3.3": - version: 9.3.3 - resolution: "@testing-library/dom@npm:9.3.3" +"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.3, @testing-library/dom@npm:^9.3.4": + version: 9.3.4 + resolution: "@testing-library/dom@npm:9.3.4" dependencies: "@babel/code-frame": "npm:^7.10.4" "@babel/runtime": "npm:^7.12.5" @@ -7167,13 +7039,43 @@ __metadata: dom-accessibility-api: "npm:^0.5.9" lz-string: "npm:^1.5.0" pretty-format: "npm:^27.0.2" - checksum: c3bbd67503634fd955233dc172531640656701fe35ecb9a83f85e5965874b786452f5e7c26b4f8b3b4fc4379f3a80193c74425b57843ba191f4845e22b0ac483 + checksum: 147da340e8199d7f98f3a4ad8aa22ed55b914b83957efa5eb22bfea021a979ebe5a5182afa9c1e5b7a5f99a7f6744a5a4d9325ae46ec3b33b5a15aed8750d794 languageName: node linkType: hard -"@testing-library/jest-dom@npm:^6.1.4, @testing-library/jest-dom@npm:^6.4.0": - version: 6.4.0 - resolution: "@testing-library/jest-dom@npm:6.4.0" +"@testing-library/jest-dom@npm:6.1.4": + version: 6.1.4 + resolution: "@testing-library/jest-dom@npm:6.1.4" + dependencies: + "@adobe/css-tools": "npm:^4.3.1" + "@babel/runtime": "npm:^7.9.2" + aria-query: "npm:^5.0.0" + chalk: "npm:^3.0.0" + css.escape: "npm:^1.5.1" + dom-accessibility-api: "npm:^0.5.6" + lodash: "npm:^4.17.15" + redent: "npm:^3.0.0" + peerDependencies: + "@jest/globals": ">= 28" + "@types/jest": ">= 28" + jest: ">= 28" + vitest: ">= 0.32" + peerDependenciesMeta: + "@jest/globals": + optional: true + "@types/jest": + optional: true + jest: + optional: true + vitest: + optional: true + checksum: 2e23f120613fd8ae6d5169bbc94f1a2e4c82b07182057dc94db8ec54ebf32555833442e6c43a187e59715d83704ffb5df49ba88a71f6f32d2683f3d95ba721c7 + languageName: node + linkType: hard + +"@testing-library/jest-dom@npm:^6.4.2": + version: 6.4.2 + resolution: "@testing-library/jest-dom@npm:6.4.2" dependencies: "@adobe/css-tools": "npm:^4.3.2" "@babel/runtime": "npm:^7.9.2" @@ -7200,7 +7102,7 @@ __metadata: optional: true vitest: optional: true - checksum: 6b7eba9ca388986a721fb12f84adf0f5534bf7ec5851982023a889c4a0afac6e9e91291bdac39e1f59a05adefd7727e30463d98b21c3da32fbfec229ccb11ef1 + checksum: e7eba527b34ce30cde94424d2ec685bdfed51daaafb7df9b68b51aec6052e99a50c8bfe654612dacdf857a1eb81d68cf294fc89de558ee3a992bf7a6019fffcc languageName: node linkType: hard @@ -7682,15 +7584,6 @@ __metadata: languageName: node linkType: hard -"@types/graceful-fs@npm:^4.1.3": - version: 4.1.7 - resolution: "@types/graceful-fs@npm:4.1.7" - dependencies: - "@types/node": "npm:*" - checksum: a8c04a250cb40207b15097b33c053f5ecf4352f5107c0a2635f674dae8c9a90b28dc9bd6e28307d5aab0b5d3853e713de42110a149a6e303626915047134e87d - languageName: node - linkType: hard - "@types/hast@npm:^2.0.0": version: 2.3.6 resolution: "@types/hast@npm:2.3.6" @@ -8201,13 +8094,6 @@ __metadata: languageName: node linkType: hard -"@types/stack-utils@npm:^2.0.0": - version: 2.0.1 - resolution: "@types/stack-utils@npm:2.0.1" - checksum: 3327ee919a840ffe907bbd5c1d07dfd79137dd9732d2d466cf717ceec5bb21f66296173c53bb56cff95fae4185b9cd6770df3e9745fe4ba528bbc4975f54d13f - languageName: node - linkType: hard - "@types/supports-color@npm:^8.0.0": version: 8.1.3 resolution: "@types/supports-color@npm:8.1.3" @@ -8380,24 +8266,6 @@ __metadata: languageName: node linkType: hard -"@types/yargs@npm:^16.0.0": - version: 16.0.6 - resolution: "@types/yargs@npm:16.0.6" - dependencies: - "@types/yargs-parser": "npm:*" - checksum: a2cc5796cea1aac492c856ff35e829a6a230e6d72540a9446273ab16392f6ef04b8fef05ddcff71c8106c047820b5534b22e031245ee55995b1ba0c8caa382b2 - languageName: node - linkType: hard - -"@types/yargs@npm:^17.0.8": - version: 17.0.26 - resolution: "@types/yargs@npm:17.0.26" - dependencies: - "@types/yargs-parser": "npm:*" - checksum: 34ab6eff6dff086b1044c65d53131e1d14e87c0c6dc44cb6851d74d8a4d1ac4503f7d12d1e1ecff25f8aea62ff7a9d6b04b05870a0324d15bbb226ddfc1d6065 - languageName: node - linkType: hard - "@typescript-eslint/eslint-plugin@npm:^6.18.1": version: 6.21.0 resolution: "@typescript-eslint/eslint-plugin@npm:6.21.0" @@ -8725,36 +8593,25 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@npm:1.1.3": - version: 1.1.3 - resolution: "@vitest/expect@npm:1.1.3" - dependencies: - "@vitest/spy": "npm:1.1.3" - "@vitest/utils": "npm:1.1.3" - chai: "npm:^4.3.10" - checksum: fe5c9eade516a754efc26d4b6378a250f0c3b668fa15b3e6b6042190b64a65c4459b7fd67bfca72fb1fbf215feb838b68da4ab224a2a10137d8828ca6af70516 - languageName: node - linkType: hard - -"@vitest/expect@npm:1.2.2": - version: 1.2.2 - resolution: "@vitest/expect@npm:1.2.2" +"@vitest/expect@npm:1.3.1": + version: 1.3.1 + resolution: "@vitest/expect@npm:1.3.1" dependencies: - "@vitest/spy": "npm:1.2.2" - "@vitest/utils": "npm:1.2.2" + "@vitest/spy": "npm:1.3.1" + "@vitest/utils": "npm:1.3.1" chai: "npm:^4.3.10" - checksum: 920e80b956d9d5ef7909cbe2bf883c8556da11c5123ea037396cb672d7038116c9773bd36915a3df7be2ffd76b661d5a6487e7e5ded78f39e2500cb36ae81e59 + checksum: ea66a1e912d896a481a27631b68089b885af7e8ed62ba8aaa119c37a9beafe6c094fd672775a20e6e23460af66e294f9ca259e6e0562708d1b7724eaaf53c7bb 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" +"@vitest/expect@patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch": + version: 1.3.1 + resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch::version=1.3.1&hash=9dbd39" dependencies: - "@vitest/spy": "npm:1.1.3" - "@vitest/utils": "npm:1.1.3" + "@vitest/spy": "npm:1.3.1" + "@vitest/utils": "npm:1.3.1" chai: "npm:^4.3.10" - checksum: c3bbcae82050b7e92438c85e679ef2cb09162dc5638a10b3f0b5a8fc5600dfb0be578a244d84012ae2f1715748189393ac0fc72b891efff3503338221795ebe5 + checksum: f54446b97ffac9d64653ed771b883e4d733dc4f3bb6d4b161a583a8c5ef0461383f3d457174af71baf5b2d3c92e1b75495f0c1d0cca75644ad4a6f0df8f4ec55 languageName: node linkType: hard @@ -8780,16 +8637,7 @@ __metadata: languageName: node linkType: hard -"@vitest/spy@npm:1.1.3": - version: 1.1.3 - resolution: "@vitest/spy@npm:1.1.3" - dependencies: - tinyspy: "npm:^2.2.0" - checksum: d1692582afb7b665ec283723b15bbb7da95896cbfd7befaad9fdac6b64a8250fd918781263d43e8e10ee4874cdd18646224f6d993749c3751296dced8095a9ed - languageName: node - linkType: hard - -"@vitest/spy@npm:1.2.2, @vitest/spy@npm:^1.1.3": +"@vitest/spy@npm:1.2.2": version: 1.2.2 resolution: "@vitest/spy@npm:1.2.2" dependencies: @@ -8798,15 +8646,12 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:1.1.3": - version: 1.1.3 - resolution: "@vitest/utils@npm:1.1.3" +"@vitest/spy@npm:1.3.1, @vitest/spy@npm:^1.3.1": + version: 1.3.1 + resolution: "@vitest/spy@npm:1.3.1" 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: 86f48a7722927741449f40f33584dd9857629782f6661654225b5dd3c039d61cc60806c5dfe419bd793f2a231ba91fe708cbdec5d99b62a1f6f819b6f2121fc3 + tinyspy: "npm:^2.2.0" + checksum: efc42f679d2a51fc6583ca3136ccd47581cb27c923ed3cb0500f5dee9aac99b681bfdd400c16ef108f2e0761daa642bc190816a6411931a2aba99ebf8b213dd4 languageName: node linkType: hard @@ -8822,14 +8667,15 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:^0.34.6": - version: 0.34.7 - resolution: "@vitest/utils@npm:0.34.7" +"@vitest/utils@npm:1.3.1, @vitest/utils@npm:^1.3.1": + version: 1.3.1 + resolution: "@vitest/utils@npm:1.3.1" dependencies: - diff-sequences: "npm:^29.4.3" - loupe: "npm:^2.3.6" - pretty-format: "npm:^29.5.0" - checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e + diff-sequences: "npm:^29.6.3" + estree-walker: "npm:^3.0.3" + loupe: "npm:^2.3.7" + pretty-format: "npm:^29.7.0" + checksum: d604c8ad3b1aee30d4dcd889098f591407bfe18547ff96485b1d1ed54eff58219c756a9544a7fbd4e37886863abacd7a89a76334cb3ea7f84c3d496bb757db23 languageName: node linkType: hard @@ -9781,7 +9627,7 @@ __metadata: languageName: node linkType: hard -"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.2": +"anymatch@npm:^3.0.0, anymatch@npm:~3.1.2": version: 3.1.3 resolution: "anymatch@npm:3.1.3" dependencies: @@ -9876,7 +9722,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0": +"aria-query@npm:^5.3.0": version: 5.3.0 resolution: "aria-query@npm:5.3.0" dependencies: @@ -10389,7 +10235,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-istanbul@npm:6.1.1, babel-plugin-istanbul@npm:^6.1.1": +"babel-plugin-istanbul@npm:6.1.1": version: 6.1.1 resolution: "babel-plugin-istanbul@npm:6.1.1" dependencies: @@ -10473,28 +10319,6 @@ __metadata: languageName: node linkType: hard -"babel-preset-current-node-syntax@npm:^1.0.0": - version: 1.0.1 - resolution: "babel-preset-current-node-syntax@npm:1.0.1" - dependencies: - "@babel/plugin-syntax-async-generators": "npm:^7.8.4" - "@babel/plugin-syntax-bigint": "npm:^7.8.3" - "@babel/plugin-syntax-class-properties": "npm:^7.8.3" - "@babel/plugin-syntax-import-meta": "npm:^7.8.3" - "@babel/plugin-syntax-json-strings": "npm:^7.8.3" - "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.8.3" - "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" - "@babel/plugin-syntax-numeric-separator": "npm:^7.8.3" - "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" - "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" - "@babel/plugin-syntax-top-level-await": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 5ba39a3a0e6c37d25e56a4fb843be632dac98d54706d8a0933f9bcb1a07987a96d55c2b5a6c11788a74063fb2534fe68c1f1dbb6c93626850c785e0938495627 - languageName: node - linkType: hard - "babel-walk@npm:3.0.0-canary-5": version: 3.0.0-canary-5 resolution: "babel-walk@npm:3.0.0-canary-5" @@ -11176,15 +11000,6 @@ __metadata: languageName: node linkType: hard -"bser@npm:2.1.1": - version: 2.1.1 - resolution: "bser@npm:2.1.1" - dependencies: - node-int64: "npm:^0.4.0" - checksum: 24d8dfb7b6d457d73f32744e678a60cc553e4ec0e9e1a01cf614b44d85c3c87e188d3cc78ef0442ce5032ee6818de20a0162ba1074725c0d08908f62ea979227 - languageName: node - linkType: hard - "buffer-crc32@npm:^0.2.5": version: 0.2.13 resolution: "buffer-crc32@npm:0.2.13" @@ -11491,9 +11306,9 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10, chai@npm:^4.3.7": - version: 4.3.10 - resolution: "chai@npm:4.3.10" +"chai@npm:^4.3.10, chai@npm:^4.4.1": + version: 4.4.1 + resolution: "chai@npm:4.4.1" dependencies: assertion-error: "npm:^1.1.0" check-error: "npm:^1.0.3" @@ -11502,7 +11317,7 @@ __metadata: loupe: "npm:^2.3.6" pathval: "npm:^1.1.1" type-detect: "npm:^4.0.8" - checksum: c887d24f67be6fb554c7ebbde3bb0568697a8833d475e4768296916891ba143f25fc079f6eb34146f3dd5a3279d34c1f387c32c9a6ab288e579f948d9ccf53fe + checksum: 91590a8fe18bd6235dece04ccb2d5b4ecec49984b50924499bdcd7a95c02cb1fd2a689407c19bb854497bde534ef57525cfad6c7fdd2507100fd802fbc2aefbd languageName: node linkType: hard @@ -11694,13 +11509,6 @@ __metadata: languageName: node linkType: hard -"ci-info@npm:^3.2.0": - version: 3.9.0 - resolution: "ci-info@npm:3.9.0" - checksum: 6f0109e36e111684291d46123d491bc4e7b7a1934c3a20dea28cba89f1d4a03acd892f5f6a81ed3855c38647e285a150e3c9ba062e38943bef57fee6c1554c3a - languageName: node - linkType: hard - "ci-info@npm:^4.0.0": version: 4.0.0 resolution: "ci-info@npm:4.0.0" @@ -13252,7 +13060,7 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^29.4.3, diff-sequences@npm:^29.6.3": +"diff-sequences@npm:^29.6.3": version: 29.6.3 resolution: "diff-sequences@npm:29.6.3" checksum: 32e27ac7dbffdf2fb0eb5a84efd98a9ad084fbabd5ac9abb8757c6770d5320d2acd172830b28c4add29bb873d59420601dfc805ac4064330ce59b1adfd0593b2 @@ -14324,13 +14132,6 @@ __metadata: languageName: node linkType: hard -"escape-string-regexp@npm:^2.0.0": - version: 2.0.0 - resolution: "escape-string-regexp@npm:2.0.0" - checksum: 2530479fe8db57eace5e8646c9c2a9c80fa279614986d16dcc6bcaceb63ae77f05a851ba6c43756d816c61d7f4534baf56e3c705e3e0d884818a46808811c507 - languageName: node - linkType: hard - "escape-string-regexp@npm:^4.0.0": version: 4.0.0 resolution: "escape-string-regexp@npm:4.0.0" @@ -15126,19 +14927,6 @@ __metadata: languageName: node linkType: hard -"expect@npm:^29.7.0": - version: 29.7.0 - resolution: "expect@npm:29.7.0" - dependencies: - "@jest/expect-utils": "npm:^29.7.0" - jest-get-type: "npm:^29.6.3" - jest-matcher-utils: "npm:^29.7.0" - jest-message-util: "npm:^29.7.0" - jest-util: "npm:^29.7.0" - checksum: 2eddeace66e68b8d8ee5f7be57f3014b19770caaf6815c7a08d131821da527fb8c8cb7b3dcd7c883d2d3d8d184206a4268984618032d1e4b16dc8d6596475d41 - languageName: node - linkType: hard - "exponential-backoff@npm:^3.1.1": version: 3.1.1 resolution: "exponential-backoff@npm:3.1.1" @@ -15299,7 +15087,7 @@ __metadata: languageName: node linkType: hard -"fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0": +"fast-json-stable-stringify@npm:^2.0.0": version: 2.1.0 resolution: "fast-json-stable-stringify@npm:2.1.0" checksum: 7f081eb0b8a64e0057b3bb03f974b3ef00135fbf36c1c710895cd9300f13c94ba809bb3a81cf4e1b03f6e5285610a61abbd7602d0652de423144dfee5a389c9b @@ -15371,15 +15159,6 @@ __metadata: languageName: node linkType: hard -"fb-watchman@npm:^2.0.0": - version: 2.0.2 - resolution: "fb-watchman@npm:2.0.2" - dependencies: - bser: "npm:2.1.1" - checksum: feae89ac148adb8f6ae8ccd87632e62b13563e6fb114cacb5265c51f585b17e2e268084519fb2edd133872f1d47a18e6bfd7e5e08625c0d41b93149694187581 - languageName: node - linkType: hard - "fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4": version: 3.2.0 resolution: "fetch-blob@npm:3.2.0" @@ -16058,7 +15837,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": +"fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" dependencies: @@ -16077,7 +15856,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin": +"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin::version=2.3.3&hash=df0bf1" dependencies: @@ -18545,7 +18324,7 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^29.4.1, jest-diff@npm:^29.7.0": +"jest-diff@npm:^29.4.1": version: 29.7.0 resolution: "jest-diff@npm:29.7.0" dependencies: @@ -18564,128 +18343,6 @@ __metadata: languageName: node linkType: hard -"jest-haste-map@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-haste-map@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@types/graceful-fs": "npm:^4.1.3" - "@types/node": "npm:*" - anymatch: "npm:^3.0.3" - fb-watchman: "npm:^2.0.0" - fsevents: "npm:^2.3.2" - graceful-fs: "npm:^4.2.9" - jest-regex-util: "npm:^29.6.3" - jest-util: "npm:^29.7.0" - jest-worker: "npm:^29.7.0" - micromatch: "npm:^4.0.4" - walker: "npm:^1.0.8" - dependenciesMeta: - fsevents: - optional: true - checksum: 2683a8f29793c75a4728787662972fedd9267704c8f7ef9d84f2beed9a977f1cf5e998c07b6f36ba5603f53cb010c911fe8cd0ac9886e073fe28ca66beefd30c - languageName: node - linkType: hard - -"jest-matcher-utils@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-matcher-utils@npm:29.7.0" - dependencies: - chalk: "npm:^4.0.0" - jest-diff: "npm:^29.7.0" - jest-get-type: "npm:^29.6.3" - pretty-format: "npm:^29.7.0" - checksum: 0d0e70b28fa5c7d4dce701dc1f46ae0922102aadc24ed45d594dd9b7ae0a8a6ef8b216718d1ab79e451291217e05d4d49a82666e1a3cc2b428b75cd9c933244e - languageName: node - linkType: hard - -"jest-message-util@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-message-util@npm:29.7.0" - dependencies: - "@babel/code-frame": "npm:^7.12.13" - "@jest/types": "npm:^29.6.3" - "@types/stack-utils": "npm:^2.0.0" - chalk: "npm:^4.0.0" - graceful-fs: "npm:^4.2.9" - micromatch: "npm:^4.0.4" - pretty-format: "npm:^29.7.0" - slash: "npm:^3.0.0" - stack-utils: "npm:^2.0.3" - checksum: 850ae35477f59f3e6f27efac5215f706296e2104af39232bb14e5403e067992afb5c015e87a9243ec4d9df38525ef1ca663af9f2f4766aa116f127247008bd22 - languageName: node - linkType: hard - -"jest-mock@npm:^27.0.6": - version: 27.5.1 - resolution: "jest-mock@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - checksum: 6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52 - languageName: node - linkType: hard - -"jest-mock@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-mock@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@types/node": "npm:*" - jest-util: "npm:^29.7.0" - checksum: 7b9f8349ee87695a309fe15c46a74ab04c853369e5c40952d68061d9dc3159a0f0ed73e215f81b07ee97a9faaf10aebe5877a9d6255068a0977eae6a9ff1d5ac - languageName: node - linkType: hard - -"jest-regex-util@npm:^29.6.3": - version: 29.6.3 - resolution: "jest-regex-util@npm:29.6.3" - checksum: 4e33fb16c4f42111159cafe26397118dcfc4cf08bc178a67149fb05f45546a91928b820894572679d62559839d0992e21080a1527faad65daaae8743a5705a3b - languageName: node - linkType: hard - -"jest-snapshot@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-snapshot@npm:29.7.0" - dependencies: - "@babel/core": "npm:^7.11.6" - "@babel/generator": "npm:^7.7.2" - "@babel/plugin-syntax-jsx": "npm:^7.7.2" - "@babel/plugin-syntax-typescript": "npm:^7.7.2" - "@babel/types": "npm:^7.3.3" - "@jest/expect-utils": "npm:^29.7.0" - "@jest/transform": "npm:^29.7.0" - "@jest/types": "npm:^29.6.3" - babel-preset-current-node-syntax: "npm:^1.0.0" - chalk: "npm:^4.0.0" - expect: "npm:^29.7.0" - graceful-fs: "npm:^4.2.9" - jest-diff: "npm:^29.7.0" - jest-get-type: "npm:^29.6.3" - jest-matcher-utils: "npm:^29.7.0" - jest-message-util: "npm:^29.7.0" - jest-util: "npm:^29.7.0" - natural-compare: "npm:^1.4.0" - pretty-format: "npm:^29.7.0" - semver: "npm:^7.5.3" - checksum: 6e9003c94ec58172b4a62864a91c0146513207bedf4e0a06e1e2ac70a4484088a2683e3a0538d8ea913bcfd53dc54a9b98a98cdfa562e7fe1d1339aeae1da570 - languageName: node - linkType: hard - -"jest-util@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-util@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - ci-info: "npm:^3.2.0" - graceful-fs: "npm:^4.2.9" - picomatch: "npm:^2.2.3" - checksum: bc55a8f49fdbb8f51baf31d2a4f312fb66c9db1483b82f602c9c990e659cdd7ec529c8e916d5a89452ecbcfae4949b21b40a7a59d4ffc0cd813a973ab08c8150 - languageName: node - linkType: hard - "jest-worker@npm:^27.4.5": version: 27.5.1 resolution: "jest-worker@npm:27.5.1" @@ -18697,18 +18354,6 @@ __metadata: languageName: node linkType: hard -"jest-worker@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-worker@npm:29.7.0" - dependencies: - "@types/node": "npm:*" - jest-util: "npm:^29.7.0" - merge-stream: "npm:^2.0.0" - supports-color: "npm:^8.0.0" - checksum: 5570a3a005b16f46c131968b8a5b56d291f9bbb85ff4217e31c80bd8a02e7de799e59a54b95ca28d5c302f248b54cbffde2d177c2f0f52ffcee7504c6eabf660 - languageName: node - linkType: hard - "jiti@npm:^1.18.2, jiti@npm:^1.20.0": version: 1.21.0 resolution: "jiti@npm:1.21.0" @@ -20011,15 +19656,6 @@ __metadata: languageName: node linkType: hard -"makeerror@npm:1.0.12": - version: 1.0.12 - resolution: "makeerror@npm:1.0.12" - dependencies: - tmpl: "npm:1.0.5" - checksum: b0e6e599780ce6bab49cc413eba822f7d1f0dfebd1c103eaa3785c59e43e22c59018323cf9e1708f0ef5329e94a745d163fcbb6bff8e4c6742f9be9e86f3500c - languageName: node - linkType: hard - "map-async@npm:~0.1.1": version: 0.1.1 resolution: "map-async@npm:0.1.1" @@ -21989,13 +21625,6 @@ __metadata: languageName: node linkType: hard -"node-int64@npm:^0.4.0": - version: 0.4.0 - resolution: "node-int64@npm:0.4.0" - checksum: a6a4d8369e2f2720e9c645255ffde909c0fbd41c92ea92a5607fc17055955daac99c1ff589d421eee12a0d24e99f7bfc2aabfeb1a4c14742f6c099a51863f31a - languageName: node - linkType: hard - "node-machine-id@npm:1.1.12": version: 1.1.12 resolution: "node-machine-id@npm:1.1.12" @@ -23277,7 +22906,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be @@ -23337,7 +22966,7 @@ __metadata: languageName: node linkType: hard -"pirates@npm:^4.0.4, pirates@npm:^4.0.5": +"pirates@npm:^4.0.5": version: 4.0.6 resolution: "pirates@npm:4.0.6" checksum: 00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36 @@ -23793,7 +23422,7 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^29.5.0, pretty-format@npm:^29.7.0": +"pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" dependencies: @@ -27061,15 +26690,6 @@ __metadata: languageName: node linkType: hard -"stack-utils@npm:^2.0.3": - version: 2.0.6 - resolution: "stack-utils@npm:2.0.6" - dependencies: - escape-string-regexp: "npm:^2.0.0" - checksum: 651c9f87667e077584bbe848acaecc6049bc71979f1e9a46c7b920cad4431c388df0f51b8ad7cfd6eed3db97a2878d0fc8b3122979439ea8bac29c61c95eec8a - languageName: node - linkType: hard - "stackback@npm:0.0.2": version: 0.0.2 resolution: "stackback@npm:0.0.2" @@ -28089,13 +27709,6 @@ __metadata: languageName: node linkType: hard -"tmpl@npm:1.0.5": - version: 1.0.5 - resolution: "tmpl@npm:1.0.5" - checksum: f935537799c2d1922cb5d6d3805f594388f75338fe7a4a9dac41504dd539704ca4db45b883b52e7b0aa5b2fd5ddadb1452bf95cd23a69da2f793a843f9451cc9 - languageName: node - linkType: hard - "to-fast-properties@npm:^2.0.0": version: 2.0.0 resolution: "to-fast-properties@npm:2.0.0" @@ -28474,7 +28087,7 @@ __metadata: languageName: node linkType: hard -"type-detect@npm:4.0.8, type-detect@npm:^4.0.0, type-detect@npm:^4.0.8": +"type-detect@npm:^4.0.0, type-detect@npm:^4.0.8": version: 4.0.8 resolution: "type-detect@npm:4.0.8" checksum: 8fb9a51d3f365a7de84ab7f73b653534b61b622aa6800aecdb0f1095a4a646d3f5eb295322127b6573db7982afcd40ab492d038cf825a42093a58b1e1353e0bd @@ -29982,15 +29595,6 @@ __metadata: languageName: node linkType: hard -"walker@npm:^1.0.8": - version: 1.0.8 - resolution: "walker@npm:1.0.8" - dependencies: - makeerror: "npm:1.0.12" - checksum: a17e037bccd3ca8a25a80cb850903facdfed0de4864bd8728f1782370715d679fa72e0a0f5da7c1c1379365159901e5935f35be531229da53bbfc0efdabdb48e - languageName: node - linkType: hard - "warning@npm:^4.0.2, warning@npm:^4.0.3": version: 4.0.3 resolution: "warning@npm:4.0.3" @@ -30562,16 +30166,6 @@ __metadata: languageName: node linkType: hard -"write-file-atomic@npm:^4.0.2": - version: 4.0.2 - resolution: "write-file-atomic@npm:4.0.2" - dependencies: - imurmurhash: "npm:^0.1.4" - signal-exit: "npm:^3.0.7" - checksum: a2c282c95ef5d8e1c27b335ae897b5eca00e85590d92a3fd69a437919b7b93ff36a69ea04145da55829d2164e724bc62202cdb5f4b208b425aba0807889375c7 - languageName: node - linkType: hard - "ws@npm:^8.13.0, ws@npm:^8.14.2, ws@npm:^8.2.3": version: 8.15.1 resolution: "ws@npm:8.15.1" diff --git a/docs/addons/addon-initial-state.png b/docs/addons/addon-initial-state.png deleted file mode 100644 index d06a36f5f813..000000000000 Binary files a/docs/addons/addon-initial-state.png and /dev/null differ diff --git a/docs/addons/github-secrets-screen.png b/docs/addons/github-secrets-screen.png index 657049ae3e08..b50b9548282e 100644 Binary files a/docs/addons/github-secrets-screen.png and b/docs/addons/github-secrets-screen.png differ diff --git a/docs/addons/manager-preview.png b/docs/addons/manager-preview.png index 52d06bce0f1c..2e9a790f86f6 100644 Binary files a/docs/addons/manager-preview.png and b/docs/addons/manager-preview.png differ diff --git a/docs/addons/storybook-addon-initial-state.png b/docs/addons/storybook-addon-initial-state.png index 76947325fbc9..ba68141d5efc 100644 Binary files a/docs/addons/storybook-addon-initial-state.png and b/docs/addons/storybook-addon-initial-state.png differ diff --git a/docs/addons/storybook-addon-installed-registered.png b/docs/addons/storybook-addon-installed-registered.png index 1bb1de4728ec..00b7843c9f9b 100644 Binary files a/docs/addons/storybook-addon-installed-registered.png and b/docs/addons/storybook-addon-installed-registered.png differ diff --git a/docs/addons/storybook-panel.png b/docs/addons/storybook-panel.png index 1946e347c2bd..e37ccb6b6347 100644 Binary files a/docs/addons/storybook-panel.png and b/docs/addons/storybook-panel.png differ diff --git a/docs/addons/storybook-tab.png b/docs/addons/storybook-tab.png index 37b4186cba2e..085bb68c88a3 100644 Binary files a/docs/addons/storybook-tab.png and b/docs/addons/storybook-tab.png differ diff --git a/docs/addons/storybook-toolbar.png b/docs/addons/storybook-toolbar.png index 826fa2a3d6d3..84f2c0cf0a10 100644 Binary files a/docs/addons/storybook-toolbar.png and b/docs/addons/storybook-toolbar.png differ diff --git a/docs/api/button-args-grouped-categories.png b/docs/api/button-args-grouped-categories.png index 99d894ecaca9..ee58b801133c 100644 Binary files a/docs/api/button-args-grouped-categories.png and b/docs/api/button-args-grouped-categories.png differ diff --git a/docs/api/button-args-grouped-subcategories.png b/docs/api/button-args-grouped-subcategories.png index d30326a25332..ee9277674643 100644 Binary files a/docs/api/button-args-grouped-subcategories.png and b/docs/api/button-args-grouped-subcategories.png differ diff --git a/docs/api/doc-block-argtypes.png b/docs/api/doc-block-argtypes.png index 7d1236e7b418..b555f8b7b2eb 100644 Binary files a/docs/api/doc-block-argtypes.png and b/docs/api/doc-block-argtypes.png differ diff --git a/docs/api/doc-block-canvas.png b/docs/api/doc-block-canvas.png index 92f930bfab70..e099929e7083 100644 Binary files a/docs/api/doc-block-canvas.png and b/docs/api/doc-block-canvas.png differ diff --git a/docs/api/doc-block-colorpalette.png b/docs/api/doc-block-colorpalette.png index 48d6d95946d6..1fd1852673c5 100644 Binary files a/docs/api/doc-block-colorpalette.png and b/docs/api/doc-block-colorpalette.png differ diff --git a/docs/api/doc-block-controls.png b/docs/api/doc-block-controls.png index d33c3b046a99..a256ea55c38e 100644 Binary files a/docs/api/doc-block-controls.png and b/docs/api/doc-block-controls.png differ diff --git a/docs/api/doc-block-icongallery.png b/docs/api/doc-block-icongallery.png index 5bba9d1de516..b57f4035f6bf 100644 Binary files a/docs/api/doc-block-icongallery.png and b/docs/api/doc-block-icongallery.png differ diff --git a/docs/api/doc-block-markdown.png b/docs/api/doc-block-markdown.png index 4ace4c99b37e..58a4d6159d0f 100644 Binary files a/docs/api/doc-block-markdown.png and b/docs/api/doc-block-markdown.png differ diff --git a/docs/api/doc-block-primary.png b/docs/api/doc-block-primary.png index d9389c7de741..16f319a32e75 100644 Binary files a/docs/api/doc-block-primary.png and b/docs/api/doc-block-primary.png differ diff --git a/docs/api/doc-block-source.png b/docs/api/doc-block-source.png index 91ce598a83f4..9fa698640b66 100644 Binary files a/docs/api/doc-block-source.png and b/docs/api/doc-block-source.png differ diff --git a/docs/api/doc-block-stories.png b/docs/api/doc-block-stories.png index 3b30468293dc..768111905388 100644 Binary files a/docs/api/doc-block-stories.png and b/docs/api/doc-block-stories.png differ diff --git a/docs/api/doc-block-story.png b/docs/api/doc-block-story.png index 7d07e5e52298..91ec0e9542b6 100644 Binary files a/docs/api/doc-block-story.png and b/docs/api/doc-block-story.png differ diff --git a/docs/api/doc-block-title-subtitle-description.png b/docs/api/doc-block-title-subtitle-description.png index 89e3c4957471..93d2e12bec40 100644 Binary files a/docs/api/doc-block-title-subtitle-description.png and b/docs/api/doc-block-title-subtitle-description.png differ diff --git a/docs/api/doc-block-typeset.png b/docs/api/doc-block-typeset.png index 90b7226c4e90..69bdec27dfce 100644 Binary files a/docs/api/doc-block-typeset.png and b/docs/api/doc-block-typeset.png differ diff --git a/docs/api/doc-block-unstyled.png b/docs/api/doc-block-unstyled.png index 5b4fd530e8c9..09e274794e38 100644 Binary files a/docs/api/doc-block-unstyled.png and b/docs/api/doc-block-unstyled.png differ diff --git a/docs/builders/storybook-builder-workflow.png b/docs/builders/storybook-builder-workflow.png index afe93bf67c48..f4621f3620ef 100644 Binary files a/docs/builders/storybook-builder-workflow.png and b/docs/builders/storybook-builder-workflow.png differ diff --git a/docs/builders/storybook-builders.png b/docs/builders/storybook-builders.png index e217be7cd39b..b83628351ad8 100644 Binary files a/docs/builders/storybook-builders.png and b/docs/builders/storybook-builders.png differ diff --git a/docs/configure/addon-locations.png b/docs/configure/addon-locations.png index 387a9eff756c..f6554c1e0422 100644 Binary files a/docs/configure/addon-locations.png and b/docs/configure/addon-locations.png differ diff --git a/docs/configure/layout-params-story-centered.png b/docs/configure/layout-params-story-centered.png index b04b2c9f4016..364f33139306 100644 Binary files a/docs/configure/layout-params-story-centered.png and b/docs/configure/layout-params-story-centered.png differ diff --git a/docs/configure/sidebar-anatomy.png b/docs/configure/sidebar-anatomy.png index 83b9f6c74e79..ef79798a4a78 100644 Binary files a/docs/configure/sidebar-anatomy.png and b/docs/configure/sidebar-anatomy.png differ diff --git a/docs/configure/sidebar-roots.png b/docs/configure/sidebar-roots.png index 20712af50d6c..e3f1ce1d8836 100644 Binary files a/docs/configure/sidebar-roots.png and b/docs/configure/sidebar-roots.png differ diff --git a/docs/configure/storybook-custom-theme.png b/docs/configure/storybook-custom-theme.png index 5d3ce56c36fc..16ea741e966c 100644 Binary files a/docs/configure/storybook-custom-theme.png and b/docs/configure/storybook-custom-theme.png differ diff --git a/docs/configure/storybook-starter-custom-theme.png b/docs/configure/storybook-starter-custom-theme.png index 94517da63043..d5a2288e173b 100644 Binary files a/docs/configure/storybook-starter-custom-theme.png and b/docs/configure/storybook-starter-custom-theme.png differ diff --git a/docs/contribute/github-docs-edit-optimized.png b/docs/contribute/github-docs-edit-optimized.png index d644ed3846b9..c0d132d564ba 100644 Binary files a/docs/contribute/github-docs-edit-optimized.png and b/docs/contribute/github-docs-edit-optimized.png differ diff --git a/docs/contribute/github-new-repository-reproduction-optimized.png b/docs/contribute/github-new-repository-reproduction-optimized.png index 1df70404a777..23049b0512ae 100644 Binary files a/docs/contribute/github-new-repository-reproduction-optimized.png and b/docs/contribute/github-new-repository-reproduction-optimized.png differ diff --git a/docs/contribute/github-repository-steps-optimized.png b/docs/contribute/github-repository-steps-optimized.png index f78dde3d4c5e..417f563a77d4 100644 Binary files a/docs/contribute/github-repository-steps-optimized.png and b/docs/contribute/github-repository-steps-optimized.png differ diff --git a/docs/contribute/local-storybook-website-dropdown-optimized.png b/docs/contribute/local-storybook-website-dropdown-optimized.png index 1feac771ca76..229efa469abf 100644 Binary files a/docs/contribute/local-storybook-website-dropdown-optimized.png and b/docs/contribute/local-storybook-website-dropdown-optimized.png differ diff --git a/docs/contribute/storybook-cra-examples-optimized.png b/docs/contribute/storybook-cra-examples-optimized.png deleted file mode 100644 index 7a3fb823fe64..000000000000 Binary files a/docs/contribute/storybook-cra-examples-optimized.png and /dev/null differ diff --git a/docs/contribute/storybook-docs-submit-changes-optimized.png b/docs/contribute/storybook-docs-submit-changes-optimized.png index e8f4c0740865..83fce590281b 100644 Binary files a/docs/contribute/storybook-docs-submit-changes-optimized.png and b/docs/contribute/storybook-docs-submit-changes-optimized.png differ diff --git a/docs/contribute/storybook-docs-submit-pr-optimized.png b/docs/contribute/storybook-docs-submit-pr-optimized.png deleted file mode 100644 index 9b5c6ff2672f..000000000000 Binary files a/docs/contribute/storybook-docs-submit-pr-optimized.png and /dev/null differ diff --git a/docs/contribute/storybook-edit-docs-optimized.png b/docs/contribute/storybook-edit-docs-optimized.png index daeb3e249e5e..d930a4202f1e 100644 Binary files a/docs/contribute/storybook-edit-docs-optimized.png and b/docs/contribute/storybook-edit-docs-optimized.png differ diff --git a/docs/contribute/storybook-manager-preview.jpg b/docs/contribute/storybook-manager-preview.jpg deleted file mode 100644 index d2757b922b9a..000000000000 Binary files a/docs/contribute/storybook-manager-preview.jpg and /dev/null differ diff --git a/docs/contribute/storybook-sandbox.png b/docs/contribute/storybook-sandbox.png deleted file mode 100644 index 6b47fa748a08..000000000000 Binary files a/docs/contribute/storybook-sandbox.png and /dev/null differ diff --git a/docs/essentials/addon-actions-screenshot.png b/docs/essentials/addon-actions-screenshot.png index 3090542e69fb..9b8319bc7de1 100644 Binary files a/docs/essentials/addon-actions-screenshot.png and b/docs/essentials/addon-actions-screenshot.png differ diff --git a/docs/essentials/addon-controls-args-background-color.png b/docs/essentials/addon-controls-args-background-color.png deleted file mode 100644 index 9da6bf3d9669..000000000000 Binary files a/docs/essentials/addon-controls-args-background-color.png and /dev/null differ diff --git a/docs/essentials/addon-controls-args-background-string.png b/docs/essentials/addon-controls-args-background-string.png deleted file mode 100644 index 3583cc30557b..000000000000 Binary files a/docs/essentials/addon-controls-args-background-string.png and /dev/null differ diff --git a/docs/essentials/addon-controls-args-no-annotation.png b/docs/essentials/addon-controls-args-no-annotation.png deleted file mode 100644 index 69ab1d027a44..000000000000 Binary files a/docs/essentials/addon-controls-args-no-annotation.png and /dev/null differ diff --git a/docs/essentials/addon-controls-args-variant-optimized.png b/docs/essentials/addon-controls-args-variant-optimized.png index aacfe3feb029..f77e14f2f4eb 100644 Binary files a/docs/essentials/addon-controls-args-variant-optimized.png and b/docs/essentials/addon-controls-args-variant-optimized.png differ diff --git a/docs/essentials/addon-controls-args-variant-string.png b/docs/essentials/addon-controls-args-variant-string.png index 3c0670be7898..0958740fd420 100644 Binary files a/docs/essentials/addon-controls-args-variant-string.png and b/docs/essentials/addon-controls-args-variant-string.png differ diff --git a/docs/essentials/addon-controls-expanded.png b/docs/essentials/addon-controls-expanded.png index 39090d728829..f8be11ff1e0d 100644 Binary files a/docs/essentials/addon-controls-expanded.png and b/docs/essentials/addon-controls-expanded.png differ diff --git a/docs/essentials/addon-interactions-installed-registered.png b/docs/essentials/addon-interactions-installed-registered.png index fc4786152b6f..e910308b5da3 100644 Binary files a/docs/essentials/addon-interactions-installed-registered.png and b/docs/essentials/addon-interactions-installed-registered.png differ diff --git a/docs/essentials/highlight.png b/docs/essentials/highlight.png index 2d1aef2f56ea..30673e4cdcd9 100644 Binary files a/docs/essentials/highlight.png and b/docs/essentials/highlight.png differ diff --git a/docs/essentials/toolbars-and-globals.png b/docs/essentials/toolbars-and-globals.png index d27b42d3b336..375817ae2d82 100644 Binary files a/docs/essentials/toolbars-and-globals.png and b/docs/essentials/toolbars-and-globals.png differ diff --git a/docs/get-started/addons.png b/docs/get-started/addons.png index 87b0274f29e1..3555f43b6c48 100644 Binary files a/docs/get-started/addons.png and b/docs/get-started/addons.png differ diff --git a/docs/get-started/docblock-source.png b/docs/get-started/docblock-source.png index bf47d72a0ebe..9d014a58cd98 100644 Binary files a/docs/get-started/docblock-source.png and b/docs/get-started/docblock-source.png differ diff --git a/docs/get-started/example-button-args.png b/docs/get-started/example-button-args.png index dc37ee7675b8..4a95804ae02f 100644 Binary files a/docs/get-started/example-button-args.png and b/docs/get-started/example-button-args.png differ diff --git a/docs/get-started/example-button-noargs.png b/docs/get-started/example-button-noargs.png index 49f8c91de619..9e065ecbb4a8 100644 Binary files a/docs/get-started/example-button-noargs.png and b/docs/get-started/example-button-noargs.png differ diff --git a/docs/get-started/example-onboarding-wizard.png b/docs/get-started/example-onboarding-wizard.png index bc1c173ae0a6..45eeb599a3e2 100644 Binary files a/docs/get-started/example-onboarding-wizard.png and b/docs/get-started/example-onboarding-wizard.png differ diff --git a/docs/get-started/index.md b/docs/get-started/index.md new file mode 100644 index 000000000000..a89a028e7357 --- /dev/null +++ b/docs/get-started/index.md @@ -0,0 +1,313 @@ +--- +title: Get started with Storybook +hideRendererSelector: true +--- + + + +export const RightArrow = () => ( + +); + + + +Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then, explore Storybook's main concepts and discover additional resources to help you grow and maintain your Storybook. + +## What is Storybook? + +Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Thousands of teams use it for UI development, testing, and documentation. It's open source and free. + +## Install Storybook + +Storybook is a standalone tool that runs alongside your app. It's a zero-config environment that works with any modern frontend framework. You can install Storybook into an existing project or create a new one from scratch. + + + + + + + +
+ + +

Next.js

+ + + +
+

React

+

with Vite

+
+ + + +
+

React

+

with Webpack

+
+ + + +

React Native

+ + + +
+

Vue

+

with Vite

+
+ + + +
+

Vue

+

with Webpack

+
+ + + +

Angular

+ + + +

SvelteKit

+ + + +
+

Svelte

+

with Vite

+
+ + + +
+

Svelte

+

with Webpack

+
+ + + +
+

Web Components

+

with Vite

+
+ + + +
+

Web Components

+

with Webpack

+
+ +
+ +Want to know more about installing Storybook? Check out the [installation guide](./install.md). + +## Main concepts + +Storybook is a powerful tool that can help you with many aspects of your UI development workflow. Here are some of the main concepts to get you started. + +
+ + +

Stories

+

A story captures the rendered state of a UI component. Each component can have multiple stories, where each story describes a different component state.

+ + + +

Docs

+

Storybook can analyze your components to automatically create documentation alongside your stories. This automatic documentation makes it easier for you to create UI library usage guidelines, design system sites, and more.

+ + + +

Testing

+

Stories are a pragmatic starting point for your UI testing strategy. You already write stories as a natural part of UI development, so testing those stories is a low-effort way to prevent UI bugs over time.

+ + + +

Sharing

+

Publishing your Storybook allows you to share your work with others. You can also embed your stories in places like Notion or Figma.

+ +
+ +## Additional resources + +Once you've learned the basics, explore these other ways to get the most out of Storybook. + +
+ + + Essential addons + + + + Addon catalog + + + + Recipes + + + + Builders + + + + How to contribute + + + + Migrate to 8.0 + + + + FAQ + +
+ +--- + +
+
+

Need some help?

+ Join a discussion on GitHub +
+
+

Latest product updates

+ See changelog +
+
+ + diff --git a/docs/get-started/mdx-example.png b/docs/get-started/mdx-example.png index ab732baa5a20..3c15bc7c14a1 100644 Binary files a/docs/get-started/mdx-example.png and b/docs/get-started/mdx-example.png differ diff --git a/docs/get-started/storybook-keyboard-shortcuts.png b/docs/get-started/storybook-keyboard-shortcuts.png index 0027cbeedc6a..db6a06d09019 100644 Binary files a/docs/get-started/storybook-keyboard-shortcuts.png and b/docs/get-started/storybook-keyboard-shortcuts.png differ diff --git a/docs/get-started/svelte-webpack5.md b/docs/get-started/svelte-webpack5.md new file mode 100644 index 000000000000..a2676a3e1cec --- /dev/null +++ b/docs/get-started/svelte-webpack5.md @@ -0,0 +1,183 @@ +--- +title: Storybook for Svelte & Webpack +--- + +export const SUPPORTED_RENDERER = 'svelte'; + +Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Svelte & Webpack is only supported in [Svelte](?renderer=svelte) projects. + + + + + + + + + +## Requirements + +- Svelte ≥ 4.0 +- Webpack ≥ 5.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Svelte project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/svelte-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Writing native Svelte stories + +Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature. + +Run the following command to install the addon. + + + + + + + + + +The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf). + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/svelte-webpack5', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + + + + diff --git a/docs/get-started/sveltekit.md b/docs/get-started/sveltekit.md new file mode 100644 index 000000000000..c75c68cf6549 --- /dev/null +++ b/docs/get-started/sveltekit.md @@ -0,0 +1,342 @@ +--- +title: Storybook for SvelteKit +--- + +export const SUPPORTED_RENDERER = 'svelte'; + +Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [SvelteKit](https://kit.svelte.dev/) applications. It includes: + +- 🪄 Zero config +- 🧩 Easily mock many Kit modules +- 🔗 Automatic link handling +- 💫 and more! + + + + + +Storybook for SvelteKit is only supported in [Svelte](?renderer=svelte) projects. + + + + + + + + + +## Requirements + +- SvelteKit ≥ 1.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Sveltekit project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +Finally, these packages are now either obsolete or part of `@storybook/sveltekit`, so you no longer need to depend on them directly. You can remove them (`npm uninstall`, `yarn remove`, `pnpm remove`) from your project: + +- `@storybook/svelte-vite` +- `@storybook/svelte-webpack5` +- `storybook-builder-vite` +- `@storybook/builder-vite` + +## Supported features + +All Svelte language features are supported out of the box, as the Storybook framework uses the Svelte compiler directly. +However, SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that aren't supported. Here's a breakdown of what will and will not work within Storybook: + +| Module | Status | Note | +| ---------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. | +| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer. | +| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API, so it cannot dynamically serve content. | +| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | | +| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | | +| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | | +| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | This is a server-side feature, and Storybook renders all components on the client. | +| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | This is a server-side feature, and Storybook renders all components on the client. | +| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | This is a service worker feature, which does not apply to Storybook. | + +## How to mock + +To mock a SvelteKit import you can define it within `parameters.sveltekit_experimental`: + +```ts +// MyComponent.stories.svelte +export const MyStory = { + parameters: { + sveltekit_experimental: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; +``` + +The [available parameters](#parameters) are documented in the API section, below. + +### Mocking links + +The default link-handling behavior (e.g. when clicking an `` element) is to log an action to the [Actions panel](../essentials/actions.md). + +You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values define your mock. For example: + +```ts +// MyComponent.stories.svelte +export const MyStory = { + parameters: { + sveltekit_experimental: { + hrefs: { + '/basic-href': (to, event) => { + console.log(to, event); + }, + '/root.*': { + callback: (to, event) => { + console.log(to, event); + }, + asRegex: true, + }, + }, + }, + }, +}; +``` + +See the [API reference](#hrefs) for more information. + +## Writing native Svelte stories + +Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature. + +Run the following command to install the addon. + + + + + + + + + +The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf). + + + +## API + +### Parameters + +This framework contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `sveltekit_experimental` namespace: + +#### `forms` + +Type: `{ enhance: () => void }` + +Provides mocks for the [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) module. + +##### `forms.enhance` + +Type: `() => void` + +A callback that will be called when a form with [`use:enhance`](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance) is submitted. + +#### `hrefs` + +Type: `Record<[path: string], (to: string, event: MouseEvent) => void | { callback: (to: string, event: MouseEvent) => void, asRegex?: boolean }>` + +If you have an `` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based if the `asRegex` property is `true`) the corresponding `callback` will be called. If no matching `hrefs` are defined, an action will be logged to the [Actions panel](../essentials/actions.md). See [Mocking links](#mocking-links) for an example. + +#### `navigation` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation) + +Provides mocks for the [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) module. + +##### `navigation.goto` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-goto) + +A callback that will be called whenever [`goto`](https://kit.svelte.dev/docs/modules#$app-navigation-goto) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.pushState` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) + +A callback that will be called whenever [`pushState`](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.replaceState` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) + +A callback that will be called whenever [`replaceState`](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.invalidate` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) + +A callback that will be called whenever [`invalidate`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.invalidateAll` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) + +A callback that will be called whenever [`invalidateAll`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.afterNavigate` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) + +An object that will be passed to the [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) function, which will be invoked when the `onMount` event fires. + +#### `stores` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores) + +Provides mocks for the [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) module. + +##### `stores.navigating` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores-navigating) + +A partial version of the [`navigating`](https://kit.svelte.dev/docs/modules#$app-stores-navigating) store. + +##### `stores.page` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores-page) + +A partial version of the [`page`](https://kit.svelte.dev/docs/modules#$app-stores-page) store. + +##### `stores.updated` + +Type: boolean + +A boolean representing the value of [`updated`](https://kit.svelte.dev/docs/modules#$app-stores-updated) (you can also access `updated.check()` which will be a no-op). + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/sveltekit', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For Sveltekit, available options can be found in the [Vite builder docs](../builders/vite.md). + +## Troubleshooting + +### Error when starting Storybook + +When starting Storybook after upgrading to v7.0, it may quit with the following error: + +```sh +ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared +``` + +This can occur when manually upgrading from 6.5 to 7.0. To resolve it, you'll need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported (and no longer necessary) in Storybook 7+ with SvelteKit. + + + + diff --git a/docs/get-started/vue3-vite.md b/docs/get-started/vue3-vite.md index e79cc1f3b6fc..776281caf29b 100644 --- a/docs/get-started/vue3-vite.md +++ b/docs/get-started/vue3-vite.md @@ -28,8 +28,8 @@ Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects. ## Requirements - Vue ≥ 3 -- Vite ≥ 3.0 (4.X recommended) -- Storybook ≥ 7.0 +- Vite ≥ 4.0 +- Storybook ≥ 8.0 ## Getting started diff --git a/docs/get-started/vue3-webpack5.md b/docs/get-started/vue3-webpack5.md new file mode 100644 index 000000000000..283ba4fbe2d3 --- /dev/null +++ b/docs/get-started/vue3-webpack5.md @@ -0,0 +1,197 @@ +--- +title: Storybook for Vue & Webpack +--- + +export const SUPPORTED_RENDERER = 'vue'; + +Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Vue & Webpack is only supported in [Vue](?renderer=vue) projects. + + + + + + + + + +## Requirements + +- Vue ≥ 3.0 +- Webpack ≥ 5.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Vue project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/vue3-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Extending the Vue application + +Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. +When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. + +Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. + +```js +// .storybook/preview.js + +import { setup } from '@storybook/vue3'; + +setup((app) => { + app.use(MyPlugin); + app.component('my-component', MyComponent); + app.mixin({ + /* My mixin */ + }); +}); +``` + +## Troubleshooting + +### Storybook doesn't work with my Vue 2 project + +[Vue 2 entered End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31st, 2023, and is no longer maintained by the Vue team. As a result, Storybook no longer supports Vue 2. We recommend you upgrade your project to Vue 3, which Storybook fully supports. If that's not an option, you can still use Storybook with Vue 2 by installing the latest version of Storybook 7 with the following command: + + + + + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```ts +// .storybook/main.ts +import type { StorybookConfig } from '@storybook/vue-webpack5'; + +const config: StorybookConfig = { + framework: { + name: '@storybook/vue-webpack5', + options: { + // ... + }, + }, +}; + +export default config; +``` + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + + + + diff --git a/docs/get-started/web-components-vite.md b/docs/get-started/web-components-vite.md new file mode 100644 index 000000000000..e6099d32e99a --- /dev/null +++ b/docs/get-started/web-components-vite.md @@ -0,0 +1,128 @@ +--- +title: Storybook for Web components & Vite +--- + +export const SUPPORTED_RENDERER = 'web-components'; + +Storybook for Web components & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/). + + + + + +Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects. + + + + + + + + + +## Requirements + +- Vite ≥ 4.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Web components project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/web-components-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/web-components-vite', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md). + + + + diff --git a/docs/get-started/web-components-webpack5.md b/docs/get-started/web-components-webpack5.md new file mode 100644 index 000000000000..03e2205ccb20 --- /dev/null +++ b/docs/get-started/web-components-webpack5.md @@ -0,0 +1,215 @@ +--- +title: Storybook for Web components & Webpack +--- + +export const SUPPORTED_RENDERER = 'web-components'; + +Storybook for Web components & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Web components & Webpack is only supported in [Web components](?renderer=web-components) projects. + + + + + + + + + +## Requirements + +- Webpack ≥ 5.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Web components project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/web-components-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Hot Module Reloading (HMR) + +Web components are registered on global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas on how to achieve HMR with a static registry, there is no proven solution yet. Therefore, the best approach for now is to do full page reloads while developing. You can ensure those page reloads happen quickly by defining your stories as specific states of components (which we would recommend regardless). + +## Set up es6/7 dependencies + +By default, Storybook only works with precompiled ES5 code. Because most web components themselves and their libs are distributed as ES2017, you will need to manually mark those packages as "needs transpilation". + +For example, if you have a library called `my-library` which is in ES2017, then you can configure your project like so: + +```js +// .storybook/main.js + +export default { + webpackFinal: async (config) => { + // Find web-components rule for extra transpilation + const webComponentsRule = config.module.rules.find( + (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false + ); + // Add your own `my-library` + webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); + + return config; + }, +}; +``` + +By default, the following folders are transpiled: + +- `src/*.js` +- `packages/*/src/*.js` +- `node_modules/lit-html/*.js` +- `node_modules/lit-element/*.js` +- `node_modules/@open-wc/*.js` +- `node_modules/@polymer/*.js` +- `node_modules/@vaadin/*.js` + + + +Note that the `src` folder is also included. This provides some extra configuration to allow for `import.meta` and some other features. + +If you use a folder for your components/stories other than `src`, you will need to use the configuration example above to have it properly transpiled. + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/web-components-webpack5', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + +## Troubleshooting + +### Error while developing with HMR + +While developing a component, you might encounter this error: + +```sh +Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry +``` + +This error occurs because the component is already registered in the global registry. See the [limitations of HMR with web components](#hot-module-reloading-hmr) for more information. + + + + diff --git a/docs/sharing/build-publish-only.png b/docs/sharing/build-publish-only.png index a47aeca62dd1..dcbca79784f6 100644 Binary files a/docs/sharing/build-publish-only.png and b/docs/sharing/build-publish-only.png differ diff --git a/docs/sharing/combine-storybooks.png b/docs/sharing/combine-storybooks.png index 75993480c689..a838f7f777fc 100644 Binary files a/docs/sharing/combine-storybooks.png and b/docs/sharing/combine-storybooks.png differ diff --git a/docs/sharing/composition-versioning.png b/docs/sharing/composition-versioning.png index 58edbf93fdb8..8f803484552d 100644 Binary files a/docs/sharing/composition-versioning.png and b/docs/sharing/composition-versioning.png differ diff --git a/docs/sharing/design-addon-panel.png b/docs/sharing/design-addon-panel.png index 7f6088611ca3..0641fa273953 100644 Binary files a/docs/sharing/design-addon-panel.png and b/docs/sharing/design-addon-panel.png differ diff --git a/docs/sharing/package-composition.png b/docs/sharing/package-composition.png index 0c40b3452181..76ac6bd719a5 100644 Binary files a/docs/sharing/package-composition.png and b/docs/sharing/package-composition.png differ diff --git a/docs/sharing/prbadge-publish.png b/docs/sharing/prbadge-publish.png index 89df78ef3275..bc8eab5c6484 100644 Binary files a/docs/sharing/prbadge-publish.png and b/docs/sharing/prbadge-publish.png differ diff --git a/docs/sharing/reference-external-storybooks-composition.png b/docs/sharing/reference-external-storybooks-composition.png index 9b7b1bf0b597..c12468b06f7c 100644 Binary files a/docs/sharing/reference-external-storybooks-composition.png and b/docs/sharing/reference-external-storybooks-composition.png differ diff --git a/docs/sharing/storybook-figma-addon.png b/docs/sharing/storybook-figma-addon.png index 830c5fc0c907..553f9e90b23e 100644 Binary files a/docs/sharing/storybook-figma-addon.png and b/docs/sharing/storybook-figma-addon.png differ diff --git a/docs/sharing/storybook-zeplin-addon.png b/docs/sharing/storybook-zeplin-addon.png index 95a57111a038..f8951f1f6fa5 100644 Binary files a/docs/sharing/storybook-zeplin-addon.png and b/docs/sharing/storybook-zeplin-addon.png differ diff --git a/docs/sharing/workflow-history-versioning.png b/docs/sharing/workflow-history-versioning.png index 67246da16604..cb8233608f91 100644 Binary files a/docs/sharing/workflow-history-versioning.png and b/docs/sharing/workflow-history-versioning.png differ diff --git a/docs/sharing/workflow-publish.png b/docs/sharing/workflow-publish.png index 37668d11ab44..50509d4ef2dd 100644 Binary files a/docs/sharing/workflow-publish.png and b/docs/sharing/workflow-publish.png differ diff --git a/docs/sharing/workflow-uireview.png b/docs/sharing/workflow-uireview.png index 9500000b6a02..4a25d22dc766 100644 Binary files a/docs/sharing/workflow-uireview.png and b/docs/sharing/workflow-uireview.png differ diff --git a/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx b/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx index 326bfdb04741..8532b7a3646f 100644 --- a/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx +++ b/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx @@ -1,6 +1,6 @@ ```shell # Builds Storybook with Angular's custom builder -# See https://storybook.js.org/docs/get-started/install +# See https://storybook.js.org/docs/get-started/angular # to learn how to create the custom builder ng run my-project:build-storybook ``` diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..de6a0bdc94f0 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/svelte-webpack5', // 👈 Add this +}; +``` diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..e2c5a9e91c04 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/svelte-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/svelte-webpack5', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..395d6086a967 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..34cd1d6fc725 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..0350df4376bf --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.js.mdx b/docs/snippets/svelte/sveltekit-add-framework.js.mdx new file mode 100644 index 000000000000..12ea1574f451 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-add-framework.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/sveltekit', // 👈 Add this + // svelteOptions: { ... }, 👈 Remove this +}; +``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.ts.mdx b/docs/snippets/svelte/sveltekit-add-framework.ts.mdx new file mode 100644 index 000000000000..d9b21745ab48 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-add-framework.ts.mdx @@ -0,0 +1,12 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/nextjs'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/sveltekit', // 👈 Add this + // svelteOptions: { ... }, 👈 Remove this +}; + +export default config; +``` diff --git a/docs/snippets/svelte/sveltekit-install.npm.js.mdx b/docs/snippets/svelte/sveltekit-install.npm.js.mdx new file mode 100644 index 000000000000..b63e43de7c6b --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/sveltekit +``` diff --git a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx new file mode 100644 index 000000000000..fcbd37499ee9 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/sveltekit +``` diff --git a/docs/snippets/svelte/sveltekit-install.yarn.js.mdx b/docs/snippets/svelte/sveltekit-install.yarn.js.mdx new file mode 100644 index 000000000000..2cb71e06c9ed --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/sveltekit +``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..c5b6324a748e --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/vue3-webpack5', // 👈 Add this +}; +``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..d83650ea1e35 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/vue3-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/vue3-webpack5', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..55a7bc78bd80 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..24ce6105b49e --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx b/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..e811a7ae3025 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.js.mdx b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx new file mode 100644 index 000000000000..25c7d8e1b51b --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/web-components-vite', // 👈 Add this +}; +``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx new file mode 100644 index 000000000000..c4eee76aeb56 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/web-components-vite'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/web-components-vite', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/web-components/web-components-vite-install.npm.js.mdx b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx new file mode 100644 index 000000000000..4472f27ea2a2 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx new file mode 100644 index 000000000000..c2fa67cea100 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx new file mode 100644 index 000000000000..895cf072d24a --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..620630a1322a --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js +export default { + // ... + // framework: '@storybook/react-webpack5', 👈 Remove this + framework: '@storybook/nextjs', // 👈 Add this +}; +``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..8ec81b767573 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/web-components-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/web-components-webpack5', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..cb74724ce972 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/web-components-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..91bf902cac48 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/web-components-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..561008e42cd4 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/web-components-webpack5 +``` diff --git a/docs/toc.js b/docs/toc.js index 5b660a93cce5..7cb02b998a51 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -2,7 +2,6 @@ module.exports = { toc: [ { pathSegment: 'get-started', - redirectPath: 'get-started/install', title: 'Get started', type: 'heading', children: [ @@ -43,16 +42,41 @@ module.exports = { title: 'React & Webpack', type: 'link', }, + { + pathSegment: 'sveltekit', + title: 'SvelteKit', + type: 'link', + }, { pathSegment: 'svelte-vite', title: 'Svelte & Vite', type: 'link', }, + { + pathSegment: 'svelte-webpack5', + title: 'Svelte & Webpack', + type: 'link', + }, { pathSegment: 'vue3-vite', title: 'Vue & Vite', type: 'link', }, + { + pathSegment: 'vue3-webpack5', + title: 'Vue & Webpack', + type: 'link', + }, + { + pathSegment: 'web-components-vite', + title: 'Web components & Vite', + type: 'link', + }, + { + pathSegment: 'web-components-webpack5', + title: 'Web components & Webpack', + type: 'link', + }, ], }, { diff --git a/docs/versions/latest.json b/docs/versions/latest.json index a3980819747b..42c1c16caaac 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1,6 +1 @@ -{ - "version": "8.0.0", - "info": { - "plain": "#### Storybook 8.0 is here\n\nIt brings major improvements to Storybook's feature set for testing and documentation, with strengthened framework support across React, Vue, Angular, web-components, Svelte, and more.\n\n- 🩻 Built-in visual testing\n- ⚛️ React Server Component support\n- 🎛️ Improved controls for React and Vue projects\n- ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support\n- 🧪 2-4x faster Storybooks for testing\n- ✨ Refreshed desktop UI\n- 📲 Rebuilt mobile UX\n- 🙅‍♀️ No more React requirement in non-React projects\n\nPlease checkout our [Migration Guide](https://storybook.js.org/docs/8.0/migration-guide) to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 8.0, you can refer to the [8.0 prerelease changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.prerelease.md)." - } -} +{"version":"8.0.1","info":{"plain":"- Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman!\n- Core: Fix addon bundling script - [#26145](https://github.com/storybookjs/storybook/pull/26145), thanks @ndelangen!\n- Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks @ndelangen!\n- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index e522ee4c40f2..284bc9c1d6a1 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-rc.5","info":{"plain":"- CLI: Automigration fix version detection of upgrading related packages - [#26410](https://github.com/storybookjs/storybook/pull/26410), thanks @ndelangen!"}} +{"version":"8.1.0-alpha.2","info":{"plain":"- CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!\n- CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!\n- Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!\n- Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!\n- Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!\n- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!\n- UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!"}} diff --git a/docs/writing-docs/autodocs-default-template.png b/docs/writing-docs/autodocs-default-template.png index f8909d24f227..fdeb4e3a2520 100644 Binary files a/docs/writing-docs/autodocs-default-template.png and b/docs/writing-docs/autodocs-default-template.png differ diff --git a/docs/writing-docs/autodocs.png b/docs/writing-docs/autodocs.png index b7bba4c9c868..ebca59a9c3ec 100644 Binary files a/docs/writing-docs/autodocs.png and b/docs/writing-docs/autodocs.png differ diff --git a/docs/writing-docs/docs-completed.png b/docs/writing-docs/docs-completed.png index f63576b0cba1..21e7592fe28f 100644 Binary files a/docs/writing-docs/docs-completed.png and b/docs/writing-docs/docs-completed.png differ diff --git a/docs/writing-docs/index.md b/docs/writing-docs/index.md index 0c9acac972b5..aa656f0e9764 100644 --- a/docs/writing-docs/index.md +++ b/docs/writing-docs/index.md @@ -9,7 +9,7 @@ Storybook gives you tools to expand this essential documentation with prose and ![Docs page](./docs-completed.png) -If you're including Storybook in your project for the [first time](../get-started/install.md), we provide you with a [documentation page](./autodocs.md) ("Autodocs" for short), positioned near your stories. It's a baseline template automatically generated, listing your existing stories and relevant metadata. +If you're including Storybook in your project for the [first time](../get-started/index.md), we provide you with a [documentation page](./autodocs.md) ("Autodocs" for short), positioned near your stories. It's a baseline template automatically generated, listing your existing stories and relevant metadata. Additionally, you can customize this template if needed or create free-form pages for each component using [MDX](./mdx.md). In both cases, you’ll use Doc Blocks as the building blocks to create full-featured documentation. diff --git a/docs/writing-docs/mdx-documentation-only.png b/docs/writing-docs/mdx-documentation-only.png index 072a72ff6995..e6fe1acf9aad 100644 Binary files a/docs/writing-docs/mdx-documentation-only.png and b/docs/writing-docs/mdx-documentation-only.png differ diff --git a/docs/writing-docs/mdx-example.png b/docs/writing-docs/mdx-example.png index 55e883bea62a..ebca59a9c3ec 100644 Binary files a/docs/writing-docs/mdx-example.png and b/docs/writing-docs/mdx-example.png differ diff --git a/docs/writing-docs/mdx-hero.png b/docs/writing-docs/mdx-hero.png index ef2c305fd85e..7b5777fc0c9b 100644 Binary files a/docs/writing-docs/mdx-hero.png and b/docs/writing-docs/mdx-hero.png differ diff --git a/docs/writing-docs/mdx-markdown-docs-import.png b/docs/writing-docs/mdx-markdown-docs-import.png index e5cacf3b6d5c..682dc62d5082 100644 Binary files a/docs/writing-docs/mdx-markdown-docs-import.png and b/docs/writing-docs/mdx-markdown-docs-import.png differ diff --git a/docs/writing-docs/mdx-page.png b/docs/writing-docs/mdx-page.png deleted file mode 100644 index 3ab2c5e87147..000000000000 Binary files a/docs/writing-docs/mdx-page.png and /dev/null differ diff --git a/docs/writing-docs/mdx-simple.png b/docs/writing-docs/mdx-simple.png index 767b307a29ce..18fd3b7f20b2 100644 Binary files a/docs/writing-docs/mdx-simple.png and b/docs/writing-docs/mdx-simple.png differ diff --git a/docs/writing-docs/mdx-standalone-page.png b/docs/writing-docs/mdx-standalone-page.png index 03f200ce75b4..645462c71c2f 100644 Binary files a/docs/writing-docs/mdx-standalone-page.png and b/docs/writing-docs/mdx-standalone-page.png differ diff --git a/docs/writing-docs/storybook-docs-build.png b/docs/writing-docs/storybook-docs-build.png index b0a52b6353eb..5f6455119c38 100644 Binary files a/docs/writing-docs/storybook-docs-build.png and b/docs/writing-docs/storybook-docs-build.png differ diff --git a/docs/writing-stories/argstable-subcomponents.png b/docs/writing-stories/argstable-subcomponents.png new file mode 100644 index 000000000000..4da3263d4ebc Binary files /dev/null and b/docs/writing-stories/argstable-subcomponents.png differ diff --git a/docs/writing-stories/decorators-no-padding.png b/docs/writing-stories/decorators-no-padding.png index 5468b082d59c..a494e3e9cef4 100644 Binary files a/docs/writing-stories/decorators-no-padding.png and b/docs/writing-stories/decorators-no-padding.png differ diff --git a/docs/writing-stories/decorators-padding.png b/docs/writing-stories/decorators-padding.png index 37275741f505..93c4b30f20fd 100644 Binary files a/docs/writing-stories/decorators-padding.png and b/docs/writing-stories/decorators-padding.png differ diff --git a/docs/writing-stories/naming-hierarchy-no-path.png b/docs/writing-stories/naming-hierarchy-no-path.png index c0ab4536ff0a..816a6304e447 100644 Binary files a/docs/writing-stories/naming-hierarchy-no-path.png and b/docs/writing-stories/naming-hierarchy-no-path.png differ diff --git a/docs/writing-stories/naming-hierarchy-sidebar anatomy.png b/docs/writing-stories/naming-hierarchy-sidebar anatomy.png new file mode 100644 index 000000000000..084ccaf16c34 Binary files /dev/null and b/docs/writing-stories/naming-hierarchy-sidebar anatomy.png differ diff --git a/docs/writing-stories/naming-hierarchy-single-story-hoisting.png b/docs/writing-stories/naming-hierarchy-single-story-hoisting.png index 7b7fba6b82dd..47d9ae16483b 100644 Binary files a/docs/writing-stories/naming-hierarchy-single-story-hoisting.png and b/docs/writing-stories/naming-hierarchy-single-story-hoisting.png differ diff --git a/docs/writing-stories/naming-hierarchy-with-path.png b/docs/writing-stories/naming-hierarchy-with-path.png index a701b4750958..47d9ae16483b 100644 Binary files a/docs/writing-stories/naming-hierarchy-with-path.png and b/docs/writing-stories/naming-hierarchy-with-path.png differ diff --git a/docs/writing-stories/parameters-background-colors.png b/docs/writing-stories/parameters-background-colors.png index 378cc3419300..e8262288f9a1 100644 Binary files a/docs/writing-stories/parameters-background-colors.png and b/docs/writing-stories/parameters-background-colors.png differ diff --git a/docs/writing-tests/storybook-a11y-addon-optimized.png b/docs/writing-tests/storybook-a11y-addon-optimized.png index 816d92d1f975..3b028c9533d2 100644 Binary files a/docs/writing-tests/storybook-a11y-addon-optimized.png and b/docs/writing-tests/storybook-a11y-addon-optimized.png differ diff --git a/docs/writing-tests/storybook-addon-interactions-error-optimized.png b/docs/writing-tests/storybook-addon-interactions-error-optimized.png index 1a250fd7c26d..c26a46a9d0e7 100644 Binary files a/docs/writing-tests/storybook-addon-interactions-error-optimized.png and b/docs/writing-tests/storybook-addon-interactions-error-optimized.png differ diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts index 719522c74902..8ef82912851d 100755 --- a/scripts/prepare/addon-bundle.ts +++ b/scripts/prepare/addon-bundle.ts @@ -126,8 +126,10 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { platform: 'neutral', external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages], esbuildOptions: (options) => { + /* eslint-disable no-param-reassign */ options.platform = 'neutral'; Object.assign(options, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ }, }) );