-NOTE: This API is experimental and may change outside of the typical semver release cycle
+NOTE: This API is experimental and may change outside of the typical semver release cycle
-ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg you constrain the values that it can take and can also provide information about args that are not explicitly set (i.e. not required).
+ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg, you constrain the values that it can take and provide information about args that are not explicitly set (i.e., not required).
-You can also use argTypes to “annotate” args with information that is used by addons that make use of those args, for instance to instruct the controls addons to render a color choose for a string-valued arg.
+You can also use argTypes to “annotate” args with information used by addons that make use of those args. For instance, to instruct the controls addon to render a color, you could choose a string-valued arg.
-The most concrete realization of argTypes is the [Args Table](../writing-docs/doc-blocks.md#argstable) doc block. Each row in the table corresponds to a single argType, as well as the current value of that arg.
+The most concrete realization of argTypes is the [Args Table](../writing-docs/doc-blocks.md#argstable) doc block. Each row in the table corresponds to a single argType and the current value of that arg.
@@ -34,7 +34,7 @@ To do so, Storybook uses various static analysis tools depending on your framewo
- Ember
- [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components)
-The format of the generated argType will look something like:
+The format of the generated argType will look something like this:
@@ -46,11 +46,11 @@ The format of the generated argType will look something like:
-In this ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how label gets rendered, and the control annotation provides extra information for the control for editing the property.
+This ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how the label gets rendered, and the control annotation includes additional information for the control editing the property.
-`@storybook/addon-docs` provide shorthand for common tasks:
+💡 The `@storybook/addon-docs` provide a shorthand for common tasks:
- `type: 'number'` is shorthand for type: { name: 'number' }
- `control: 'radio'` is shorthand for control: { type: 'radio' }
@@ -59,7 +59,7 @@ In this ArgTypes data structure, name, type, defaultValue, and description are s
#### Manual specification
-If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above inferred argTypes and the following default export:
+If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above-inferred argTypes and the following default export:
@@ -71,7 +71,7 @@ If you want more control over the args table or any other aspect of using argTyp
-These values--description, table.type, and controls.type--get merged over the defaults that are extracted by Storybook. The final merged values would be:
+The `values.description`, `table.type`, and `controls.type` are merged into the defaults extracted by Storybook. The final merged values would be:
@@ -86,9 +86,7 @@ These values--description, table.type, and controls.type--get merged over the de
In particular, this would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `start-storybook -s public` |
-| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `start-storybook -c .storybook` |
-| --https | Serve Storybook over HTTPS. Note: You must provide your own certificate information. | `start-storybook --https` |
-| --ssl-ca `` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) | `start-storybook --ssl-ca my-certificate` |
-| --ssl-cert `` | Provide an SSL certificate. (Required with --https) | `start-storybook --ssl-cert my-ssl-certificate` |
-| --ssl-key `` | Provide an SSL key. (Required with --https) | `start-storybook --ssl-key my-ssl-key` |
-| --smoke-test | Exit after successful start | `start-storybook --smoke-test` |
-| --ci | CI mode (skip interactive prompts, don't open browser) | `start-storybook --ci` |
-| --no-open | Do not open Storybook automatically in the browser | `start-storybook --no-open` |
-| --quiet | Suppress verbose build output | `start-storybook --quiet` |
-| --no-dll | Do not use dll reference (no-op) | `start-storybook --no-dll` |
-| --debug-webpack | Display final webpack configurations for debugging purposes | `start-storybook --debug-webpack` |
-| `--webpack-stats-json ` | Write Webpack Stats JSON to disk | `start-storybook --webpack-stats-json /tmp/webpack-stats` |
-| --docs | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) | `start-storybook --docs` |
-| --no-manager-cache | Disables Storybook's manager caching mechanism. See note below. | `start-storybook --no-manager-cache` |
+| Options | Description |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--help` | Output usage information
`start-storybook --help` | +| `-V`, `--version` | Output the version number
`start-storybook -V` | +| `-p`, `--port [number]` | Port to run Storybook
`start-storybook -p 9009` | +| `-h`, `--host [string]` | Host to run Storybook
`start-storybook -h my-host.com` | +| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`start-storybook -s public` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`start-storybook -c .storybook` | +| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information.
`start-storybook --https` | +| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`start-storybook --ssl-ca my-certificate` | +| `--ssl-cert` | Provide an SSL certificate. (Required with --https)
`start-storybook --ssl-cert my-ssl-certificate` | +| `--ssl-key` | Provide an SSL key. (Required with --https)
`start-storybook --ssl-key my-ssl-key` | +| `--smoke-test` | Exit after successful start
`start-storybook --smoke-test` | +| `--ci` | CI mode (skip interactive prompts, don't open browser)
`start-storybook --ci` | +| `--no-open` | Do not open Storybook automatically in the browser
`start-storybook --no-open` | +| `--quiet` | Suppress verbose build output
`start-storybook --quiet` | +| `--no-dll` | Do not use dll reference (no-op)
`start-storybook --no-dll` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`start-storybook --debug-webpack` | +| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`start-storybook --webpack-stats-json /tmp/webpack-stats` | +| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)
`start-storybook --docs` | +| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below.
`start-storybook --no-manager-cache` |` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `build-storybook -s public` |
-| -o, --output-dir [dir-name] | Directory where to store built files | `build-storybook -o /my-deployed-storybook` |
-| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `build-storybook -c .storybook` |
-| --loglevel [level] | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] | `build-storybook --loglevel warn` |
-| --quiet | Suppress verbose build output | `build-storybook --quiet` |
-| --no-dll | Do not use dll reference (no-op) | `build-storybook --no-dll` |
-| --debug-webpack | Display final webpack configurations for debugging purposes | `build-storybook --debug-webpack` |
-| `--webpack-stats-json ` | Write Webpack Stats JSON to disk | `build-storybook --webpack-stats-json /my-storybook/webpack-stats` |
-| --docs | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs` |
+| Options | Description |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help` | Output usage information
`build-storybook --help` | +| `-V`, `--version` | Output the version number
`build-storybook -V` | +| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`build-storybook -s public` | +| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`build-storybook -o /my-deployed-storybook` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`build-storybook -c .storybook` | +| `--loglevel [level]` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]
`build-storybook --loglevel warn` | +| `--quiet` | Suppress verbose build output
`build-storybook --quiet` | +| `--no-dll` | Do not use dll reference (no-op)
`build-storybook --no-dll` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`build-storybook --debug-webpack` | +| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`build-storybook --webpack-stats-json /my-storybook/webpack-stats` | +| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)
`build-storybook --docs` |
\ No newline at end of file
diff --git a/docs/api/csf.md b/docs/api/csf.md
index b2d26ad635d6..af8b1d8041cb 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -6,7 +6,7 @@ Component Story Format (CSF) is the recommended way to [write stories](../writin
-
-As it happens with other properties such as `args`, `argTypes` can be overridden in a single story.
-
+💡 As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis.
#### Using argTypes in addons
@@ -103,4 +101,4 @@ If you want to access the argTypes of the current component inside an addon, you
]}
/>
-
+
\ No newline at end of file
diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 1011f5c4a1ea..953d12320b71 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -12,52 +12,58 @@ Pass these commands the following options to alter Storybook's behavior.
Usage: start-storybook [options]
```
-| Options | Description | Example |
-| ---------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
-| --help | Output usage information | `start-storybook --help` |
-| -V, --version | Output the version number | `start-storybook -V` |
-| -p, --port [number] | Port to run Storybook | `start-storybook -p 9009` |
-| -h, --host [string] | Host to run Storybook | `start-storybook -h my-host.com` |
-| -s, --static-dir ``start-storybook --help` | +| `-V`, `--version` | Output the version number
`start-storybook -V` | +| `-p`, `--port [number]` | Port to run Storybook
`start-storybook -p 9009` | +| `-h`, `--host [string]` | Host to run Storybook
`start-storybook -h my-host.com` | +| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`start-storybook -s public` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`start-storybook -c .storybook` | +| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information.
`start-storybook --https` | +| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`start-storybook --ssl-ca my-certificate` | +| `--ssl-cert` | Provide an SSL certificate. (Required with --https)
`start-storybook --ssl-cert my-ssl-certificate` | +| `--ssl-key` | Provide an SSL key. (Required with --https)
`start-storybook --ssl-key my-ssl-key` | +| `--smoke-test` | Exit after successful start
`start-storybook --smoke-test` | +| `--ci` | CI mode (skip interactive prompts, don't open browser)
`start-storybook --ci` | +| `--no-open` | Do not open Storybook automatically in the browser
`start-storybook --no-open` | +| `--quiet` | Suppress verbose build output
`start-storybook --quiet` | +| `--no-dll` | Do not use dll reference (no-op)
`start-storybook --no-dll` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`start-storybook --debug-webpack` | +| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`start-storybook --webpack-stats-json /tmp/webpack-stats` | +| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)
`start-storybook --docs` | +| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below.
`start-storybook --no-manager-cache` |
💡 NOTE: The flag
+--no-manager-cache disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
+
+💡 NOTE: Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
+
+
+
## build-storybook
```plaintext
Usage: build-storybook [options]
```
-| Options | Description | Example |
-| ---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------- |
-| -h, --help | Output usage information | `build-storybook --help` |
-| -V, --version | Output the version number | `build-storybook -V` |
-| -s, --static-dir ``build-storybook --help` | +| `-V`, `--version` | Output the version number
`build-storybook -V` | +| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`build-storybook -s public` | +| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`build-storybook -o /my-deployed-storybook` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`build-storybook -c .storybook` | +| `--loglevel [level]` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]
`build-storybook --loglevel warn` | +| `--quiet` | Suppress verbose build output
`build-storybook --quiet` | +| `--no-dll` | Do not use dll reference (no-op)
`build-storybook --no-dll` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`build-storybook --debug-webpack` | +| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`build-storybook --webpack-stats-json /my-storybook/webpack-stats` | +| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)
`build-storybook --docs` |
💡 NOTE: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example,
+npm run build-storybook -- -o ./path/to/build.
-
-If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/core/docs/storiesOf.md).
+💡 If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/core/docs/storiesOf.md).
@@ -18,7 +18,7 @@ CSF is supported in all frameworks except React Native, where you should use the
The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../writing-stories/naming-components-and-hierarchy.md#sorting-stories)), [decorators](../writing-stories/decorators.md), and [parameters](../writing-stories/parameters.md).
-The `component` field is optional (but encouraged!), and is used by addons for automatic prop table generation and display of other component metadata. `title` should be unique, i.e. not re-used across files.
+The `component` field is required and used by addons for automatic prop table generation and display of other component metadata. The `title` field is optional and should be unique (i.e., not re-used across files).
@@ -34,16 +34,18 @@ For more examples, see [writing stories](../writing-stories/introduction.md).
## Named story exports
-With CSF, every named export in the file represents a story function by default.
+With CSF, every named export in the file represents a story object by default.
-If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. ``
+💡 If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. ``
@@ -67,20 +67,20 @@ You can also use specific files for specific modes. Add a .env.development
You can also pass these environment variables when you are [building your Storybook](../workflows/publish-storybook.md) with `build-storybook`.
-Then they'll be hard coded to the static version of your Storybook.
+Then they'll be hardcoded to the static version of your Storybook.
### Using environment variables to choose the browser
-Storybook allows you to choose the browser you want to preview your stories. Either through an `.env` file entry or directly in your `storybook` script.
+Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script.
The table below lists the available options:
| Browser | Example |
-|----------|----------------------|
+| -------- | -------------------- |
| Safari | `BROWSER="safari"` |
| Firefox | `BROWSER="firefox"` |
| Chromium | `BROWSER="chromium"` |
-Note: By default Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
-
+💡 Note: By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
+
\ No newline at end of file
diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md
index 4d419ef78979..42d791c02226 100644
--- a/docs/configure/features-and-behavior.md
+++ b/docs/configure/features-and-behavior.md
@@ -16,42 +16,42 @@ To control the layout of Storybook’s UI you can use `addons.setConfig` in your
The following table details how to use the API values:
-| Name | Type | Description | Example Value |
-| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
-| **isFullscreen** | Boolean |Show story component as full screen |`false` |
-| **showNav** | Boolean |Display panel that shows a list of stories |`true` |
-| **showPanel** | Boolean |Display panel that shows addon configurations |`true` |
-| **panelPosition** | String/Object |Where to show the addon panel |`bottom` or `right` |
-| **enableShortcuts** | Boolean |Enable/disable shortcuts |`true` |
-| **isToolshown** | Boolean |Show/hide tool bar |`true` |
-| **theme** | Object |Storybook Theme, see next section |`undefined` |
-| **selectedPanel** | String |Id to select an addon panel |`storybook/actions/panel` |
-| **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` |
-| **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` |
-| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` |
+| Name | Type | Description | Example Value |
+| ------------------- | :-----------: | :------------------------------------------------: | :-----------------------------------: |
+| **isFullscreen** | Boolean | Show story component as full screen | `false` |
+| **showNav** | Boolean | Display panel that shows a list of stories | `true` |
+| **showPanel** | Boolean | Display panel that shows addon configurations | `true` |
+| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` |
+| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
+| **isToolshown** | Boolean | Show/hide tool bar | `true` |
+| **theme** | Object | Storybook Theme, see next section | `undefined` |
+| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
+| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
+| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` |
+| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` |
The following options are configurable under the `sidebar` namespace:
-| Name | Type | Description | Example Value |
-| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
-| **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` |
-| **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` |
-| **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => {item.name}`|
+| Name | Type | Description | Example Value |
+| ------------------ | :------: | :-----------------------------------------------------------: | :----------------------------------------------: |
+| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` |
+| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` |
+| **renderLabel** | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => {item.name}` |
The following options are configurable under the `toolbar` namespace:
-| Name | Type | Description | Example Value |
-| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
-| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` |
+| Name | Type | Description | Example Value |
+| ------ | :----: | :--------------------------------: | :-----------------: |
+| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |
## Configuring through URL parameters
-Some features can be controlled through URL parameters:
+You can use URL parameters to configure some of the available features:
-| Config option | Query param | Supported values |
-| ----------------------|:-------------:|:--------------------------:|
-| **enableShortcuts** | `shortcuts` | `false` |
-| **isFullscreen** | `full` | `true` |
-| **showNav** | `nav` | `false` |
-| **showPanel** | `panel` | `false`, `right`, `bottom` |
-| **selectedPanel** | `addonPanel` | Any panel ID |
+| Config option | Query param | Supported values |
+| ------------------- | :----------: | :------------------------: |
+| **enableShortcuts** | `shortcuts` | `false` |
+| **isFullscreen** | `full` | `true` |
+| **showNav** | `nav` | `false` |
+| **showPanel** | `panel` | `false`, `right`, `bottom` |
+| **selectedPanel** | `addonPanel` | Any panel ID |
\ No newline at end of file
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index a680ed3a8a2a..779a8c7bb3f6 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -6,15 +6,16 @@ Components often rely on images, videos, fonts, and other assets to render as th
### Import assets into stories
-You can import any media assets by importing (or requiring) them. This works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the file-loader to handle the required files.
+You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://v4.webpack.js.org/loaders/) to handle the required files.
-Afterwards you can use any asset in your stories:
+Afterward, you can use any asset in your stories:
-You can map your local static directories to a different path like this:
+
+
+
-Note you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts.
+Note that you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts.
## Configure your Storybook project
-The main configuration file is `main.js`. This file controls the behavior of the Storybook server, and so you must restart Storybook’s process when you change it. It contains the following:
+The main configuration file is `main.js`. This file controls the Storybook server's behavior, so you must restart Storybook’s process when you change it. It contains the following:
@@ -24,7 +24,7 @@ The main configuration file is `main.js`. This file controls the behavior of the
-The `main.js` configuration file is a [preset](../addons/addon-types.md) and as such has a powerful interface, but the key fields within it are:
+The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are:
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
- `addons` - a list of the [addons](/addons) you are using.
@@ -32,23 +32,23 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and as
- `babel` - custom [babel configuration](./babel.md).
- Tip: Customize your default story by referencing it first in the `stories` array.
+ 💡 Tip: Customize your default story by referencing it first in the `stories` array.
## Configure story loading
-By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.js`. The intention is you colocate a story file with the component it documents.
+By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.*`. The intention is you colocate a story file with the component it documents.
```
•
└── components
- ├── Button.js
- └── Button.stories.js
+ ├── Button.js
+ └── Button.stories.js
```
If you want to use a different naming convention, you can alter the glob, using the syntax supported by [picomatch](https://github.com/micromatch/picomatch#globbing-features).
-For example if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
+For example, if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
@@ -60,20 +60,77 @@ For example if you wanted to pull both `.md` and `.js` files from the `my-projec
-If you want to use a custom logic for loading stories which is not supported by a glob pattern, you can supply the final list of stories files:
+### With a configuration object
-```js
-// .storybook/main.js
+Additionally, you can also customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a `packages` directory, you could adjust your `stories` configuration field into the following:
-function findStories() {
- // your custom logic returns a list of files
-}
+
-module.exports = {
- stories: async (list) => [...list, ...findStories()],
-};
-```
+/projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
+### Bundle splitting
+
+Starting with Storybook 6.4, [bundle splitting](https://v4.webpack.js.org/guides/code-splitting/) is supported through a configuration flag. Update your Storybook configuration and add the `storyStoreV7` flag:
+
+
+
+ `. Selector is optional; it defaults to all elements.
+This will bind a standard HTML event handler to the outermost HTML element rendered by your component and trigger an action when the event is called for a given selector. The format is ` `. The selector is optional; it defaults to all elements.
## Advanced / legacy usage
-There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
+There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
\ No newline at end of file
diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx
index ab1b01981cfd..b3653588a1ce 100644
--- a/docs/essentials/auto-generated-controls/react.mdx
+++ b/docs/essentials/auto-generated-controls/react.mdx
@@ -1,7 +1,7 @@
To use auto-detected controls with React, you must fill in the `component` field in your story metadata:
```ts
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
import { Button } from './Button';
diff --git a/docs/essentials/backgrounds.md b/docs/essentials/backgrounds.md
index e40687a77889..aeee50d61d64 100644
--- a/docs/essentials/backgrounds.md
+++ b/docs/essentials/backgrounds.md
@@ -2,7 +2,7 @@
title: 'Backgrounds'
---
-The backgrounds toolbar item allows you to adjust the background that your story is rendered on via Storybook’s UI:
+The backgrounds toolbar addon allows you to set the background color in which the story renders in the UI:
\ No newline at end of file
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index 901a23a758ad..efa82574d2aa 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -2,11 +2,11 @@
title: 'Toolbars & globals'
---
-Storybook ships with toolbar items to control the [viewport](./viewport.md) and [background](./backgrounds.md) the story renders in. You can also create your own toolbar items which control special “globals” which you can then read to create [decorators](../writing-stories/decorators.md) to control story rendering.
+Storybook ships with toolbar addons to control the [viewport](./viewport.md) and [background](./backgrounds.md) the story renders in. You can also create your own toolbar items which control special “globals” which you can then read to create [decorators](../writing-stories/decorators.md) to control story rendering.
## Globals
-Globals in Storybook represent “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators, which apply to all stories.
+Globals in Storybook represents “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators, which apply to all stories.
When the globals change, the story re-renders, and the decorators rerun with the new values. The easiest way to change globals is to create a toolbar item for them.
@@ -26,11 +26,11 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you
-As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering).
+💡 As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering).
-When you start your Storybook, you should see a new dropdown in your toolbar with options `light` and `dark`.
+When you start your Storybook, you should see a new dropdown with the `light` and `dark` options in your toolbar.
## Create a decorator
@@ -50,7 +50,7 @@ For example, suppose you are using `styled-components`. You can add a theme prov
## Advanced usage
-So far we've managed to create and consume a global inside Storybook.
+So far, we've managed to create and consume a global inside Storybook.
Now let's take a look at a more complex example. Let's suppose we wanted to implement a new global called **locale** for internationalization, which shows a flag on the right side of the toolbar.
@@ -68,12 +68,12 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
-The icon element used in the examples loads the icons from the @storybook/components package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+💡 The icon element used in the examples loads the icons from the @storybook/components package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
- The @storybook/addon-toolbars addon is required to use toolbars. The toolbars addon is included by default in @storybook/addon-essentials.
+💡The @storybook/addon-toolbars addon is required to use toolbars. The toolbars addon is included by default in @storybook/addon-essentials.
By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu once you connect it to a decorator.
@@ -116,7 +116,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
-In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwards compatibility, the story context is passed as the first argument:
+💡 In Storybook 6.0, if you set the global option `passArgsFirst: false` for backward compatibility, the story context is passed as the first argument:
@@ -136,9 +136,9 @@ In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwa
## Consuming globals from within an addon
-If you're working on a Storybook addon and you need to retrieve globals, you can do so. The `@storybook/api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.
+If you're working on a Storybook addon and need to retrieve globals, you can do so. The `@storybook/api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.
-Using the ThemeProvider example above, you could expand it to display which current theme is being shown inside a panel like so:
+Using the ThemeProvider example above, you could expand it to display which theme is active inside a panel as such:
@@ -152,11 +152,11 @@ Using the ThemeProvider example above, you could expand it to display which curr
## Updating globals from within an addon
-If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you want.
+If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you need.
-Also, you can use the `@storybook/addons` and `@storybook/core-events` packages together to trigger the refresh.
+Also, you can use both `@storybook/addons` and `@storybook/core-events` packages together to trigger the refresh.
-For example, if you were working on a [toolbar addon](../addons/addon-types.md#toolbars), and you want to refresh the UI and update the global once the user clicks on a button, like so:
+For example, if you were working on a [toolbar addon](../addons/addon-types.md#toolbars), and you want to refresh the UI and update the global once the user clicks on a button:
diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
index 24adc95e0c0d..09b1e8cd856b 100644
--- a/docs/essentials/viewport.md
+++ b/docs/essentials/viewport.md
@@ -2,7 +2,7 @@
title: 'Viewport'
---
-The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. This makes it easy to develop responsive UIs.
+The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
-The [“Docs”](../writing-docs/introduction.md) tab shows auto-generated documentation about components (inferred from the source code). Usage docs are helpful when sharing reusable components with your team. For example, in a design system or component library.
+The [“Docs”](../writing-docs/introduction.md) tab shows auto-generated documentation about components (inferred from the source code). Usage docs are helpful when sharing reusable components with your team, for example, in a design system or component library.
`,
})
-export default class DocumentScreen implements OnInit {
+export class DocumentScreen implements OnInit {
user: any = { id: 0, name: 'Some User' };
document: any = { id: 0, title: 'Some Title' };
@@ -45,4 +45,4 @@ export default class DocumentScreen implements OnInit {
});
}
}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/document-screen-with-graphql.ts.mdx b/docs/snippets/angular/document-screen-with-graphql.ts.mdx
index be521f486212..31b4711befd5 100644
--- a/docs/snippets/angular/document-screen-with-graphql.ts.mdx
+++ b/docs/snippets/angular/document-screen-with-graphql.ts.mdx
@@ -66,4 +66,4 @@ export class SampleGraphqlComponent implements OnInit {
});
}
}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
index 16849250c632..13f45f9fcfe4 100644
--- a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
@@ -1,21 +1,28 @@
```ts
// YourPage.stories.ts
+import { Meta, Story } from '@storybook/angular';
+
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
-import { Story, Meta, moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { graphql } from 'msw';
-import DocumentScreen from './YourPage.component';
-import DocumentList from './DocumentList.component';
-import DocumentHeader from './DocumentHeader.component';
-import PageLayout from './PageLayout.component';
+import { DocumentScreen } from './YourPage.component';
+import { DocumentList } from './DocumentList.component';
+import { DocumentHeader } from './DocumentHeader.component';
+import { PageLayout } from './PageLayout.component';
import { MockGraphQLModule } from './mock-graphql.module';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'DocumentScreen',
component: DocumentScreen,
decorators: [
moduleMetadata({
@@ -23,7 +30,6 @@ export default {
imports: [CommonModule, HttpClientModule, MockGraphQLModule],
}),
],
- title: 'Mock GraphQL query with Storybook and MSW',
} as Meta;
//👇The mocked data that will be used in the story
@@ -75,8 +81,8 @@ const TestData = {
],
};
-const PageTemplate: Story = (args) => ({
- props: args,
+const PageTemplate: Story = () => ({
+ props: {},
});
export const MockedSuccess = PageTemplate.bind({});
@@ -103,4 +109,4 @@ MockedError.parameters = {
}),
],
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
index 5ae41166c1b6..b322e273b2b2 100644
--- a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
@@ -1,19 +1,26 @@
```ts
// YourPage.stories.ts
+import { Meta, Story } from '@storybook/angular';
+
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
-import { Story, Meta, moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { rest } from 'msw';
-import DocumentScreen from './YourPage.component';
-import DocumentList from './DocumentList.component';
-import DocumentHeader from './DocumentHeader.component';
-import PageLayout from './PageLayout.component';
+import { DocumentScreen } from './YourPage.component';
+import { DocumentList } from './DocumentList.component';
+import { DocumentHeader } from './DocumentHeader.component';
+import { PageLayout } from './PageLayout.component';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'DocumentScreen',
component: DocumentScreen,
decorators: [
moduleMetadata({
@@ -21,7 +28,6 @@ export default {
imports: [CommonModule, HttpClientModule],
}),
],
- title: 'Mock Rest request with Storybook and MSW',
} as Meta;
//👇The mocked data that will be used in the story
@@ -73,8 +79,8 @@ const TestData = {
],
};
-const PageTemplate: Story = (args) => ({
- props: args,
+const PageTemplate: Story = () => ({
+ props: {},
});
export const MockedSuccess = PageTemplate.bind({});
@@ -94,4 +100,4 @@ MockedError.parameters = {
}),
],
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/form-story-component-with-play-function.ts.mdx b/docs/snippets/angular/form-story-component-with-play-function.ts.mdx
new file mode 100644
index 000000000000..415f907d2adc
--- /dev/null
+++ b/docs/snippets/angular/form-story-component-with-play-function.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// Form.stories.ts
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import { LoginForm } from './LoginForm.component';
+
+export default {
+ component: LoginForm,
+};
+
+export const FilledForm = {
+ play: async ({ args, canvasElement }) => {
+ // Starts querying the component from it's root element
+ const canvas = within(canvasElement);
+
+ await userEvent.type(canvas.getByTestId('email'), 'email');
+ await userEvent.type(canvas.getByTestId('password'), 'password');
+
+ // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-expanded.ts.mdx b/docs/snippets/angular/list-story-expanded.ts.mdx
index 5856847a1b6a..2a3d5e1c9f82 100644
--- a/docs/snippets/angular/list-story-expanded.ts.mdx
+++ b/docs/snippets/angular/list-story-expanded.ts.mdx
@@ -1,46 +1,49 @@
```ts
// List.stories.ts
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
-import List from './list.component';
-import ListItem from './list-item.component';
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
export default {
- component: List,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'List',
+ component: List,
decorators: [
moduleMetadata({
- declarations: [List,ListItem],
+ declarations: [List, ListItem],
imports: [CommonModule],
}),
],
} as Meta;
// Always an empty list, not super interesting
-export const Empty: Story = (args: List) => ({
+export const Empty: Story = (args) => ({
props: args,
- template: ``,
+ template: ` = (args) => ({
+export const OneItem: Story = (args) => ({
props: args,
template: `
`,
});
-export const ManyItems: Story = (args) => ({
+export const ManyItems: Story = (args) => ({
props: args,
template: `
`,
});
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-reuse-data.ts.mdx b/docs/snippets/angular/list-story-reuse-data.ts.mdx
index d39179ff0bac..e58dd12c2aa1 100644
--- a/docs/snippets/angular/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/angular/list-story-reuse-data.ts.mdx
@@ -1,20 +1,44 @@
```ts
// List.stories.ts
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+
+import { CommonModule } from '@angular/common';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
//👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
-export const ManyItems: Story = (args) => ({
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+ decorators: [
+ moduleMetadata({
+ declarations: [List, ListItem],
+ imports: [CommonModule],
+ }),
+ ],
+} as Meta;
+
+
+export const ManyItems: Story = (args) => ({
props: args,
template: `
- `,
+
+ `,
});
ManyItems.args= {
- Selected: Selected.args.itemProperty,
- Unselected: Unselected.args.itemProperty,
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-starter.ts.mdx b/docs/snippets/angular/list-story-starter.ts.mdx
index ec53eccb4bdd..d325679ad9e3 100644
--- a/docs/snippets/angular/list-story-starter.ts.mdx
+++ b/docs/snippets/angular/list-story-starter.ts.mdx
@@ -1,17 +1,19 @@
```ts
// List.stories.ts
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
-import List from './list.component';
+import { List } from './list.component';
export default {
- title: 'List',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
component: List,
- decorators: [
+ decorators: [
moduleMetadata({
declarations: [List],
imports: [CommonModule],
@@ -20,8 +22,8 @@ export default {
} as Meta;
// Always an empty list, not super interesting
-const Template: Story = (args) => ({
+const Template: Story = (args) => ({
props: args,
template: ` = (args) => ({
- moduleMetadata: {
- declarations: [ListComponent, ListItemComponent],
- },
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+ decorators: [
+ moduleMetadata({
+ declarations: [List, ListItem],
+ imports: [CommonModule],
+ }),
+ ],
+} as Meta;
+
+
+const ListTemplate: Story = (args) => ({
props: args,
template: `
-
-
- `,
+
+
+
+ `,
});
-export const EmptyWithTemplate = ListTemplate.bind({});
-Empty.args = { items: [] };
-
+export const Empty = ListTemplate.bind({});
+EmptyListTemplate.args = {
+ items: [],
+};
-export const OneItemWithTemplate = ListTemplate.bind({});
-OneItemWithTemplate.args = { items: [Unchecked.args.item] };
+export const OneItem = ListTemplate.bind({});
+OneItem.args = {
+ items: [
+ {
+ ...Unchecked.args,
+ },
+ ],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx
index 09795904fde9..017d94620c1c 100644
--- a/docs/snippets/angular/list-story-unchecked.ts.mdx
+++ b/docs/snippets/angular/list-story-unchecked.ts.mdx
@@ -1,27 +1,42 @@
```ts
// List.stories.ts
-import { Story } from '@storybook/angular/types-6-0';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import ListComponent from './List.component';
-import ListItemComponent from './ListItem.component';
+import { CommonModule } from '@angular/common';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
-export const OneItem: Story = (args) => ({
- moduleMetadata: {
- declarations: [ListComponent, ListItemComponent],
- },
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+ decorators: [
+ moduleMetadata({
+ declarations: [List, ListItem],
+ imports: [CommonModule],
+ }),
+ ],
+} as Meta;
+
+
+export const OneItem: Story = (args) => ({
props: args,
template: `
-
-
- `,
+
+
+ `,
});
OneItem.args = {
- ...Unchecked.args,
+ ...Unchecked.args,
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
index 8bf4f645830c..459bf8791a68 100644
--- a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
@@ -2,24 +2,42 @@
// List.stories.ts
import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { ListItemComponent } from './list-item.component';
-import { ListComponent } from './list.component';
+
+import { CommonModule } from '@angular/common';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'List',
- component: ListComponent,
- subcomponents: { ListItemComponent }, //👈 Adds the ListItem component as a subcomponent
+ component: List,
+ subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+ decorators: [
+ moduleMetadata({
+ declarations: [List, ListItem],
+ imports: [CommonModule],
+ }),
+ ],
} as Meta;
-const Template: Story = (args) => ({
- props: args,
- moduleMetadata: {
- declarations: [ListComponent, ListItemComponent],
+export const Empty: Story = () => ({
+ props: {
+ args,
},
});
-export const OneItem = Template.bind({});
-OneItem.args = {
- items: [ListItemComponent],
-};
-```
+export const OneItem: Story = () => ({
+ props: {
+ args,
+ },
+ template: `
+
+
+ `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/loader-story.mdx.mdx b/docs/snippets/angular/loader-story.mdx.mdx
index e1f84461b134..b1ea6fa0b5bd 100644
--- a/docs/snippets/angular/loader-story.mdx.mdx
+++ b/docs/snippets/angular/loader-story.mdx.mdx
@@ -3,7 +3,7 @@
import { Meta, Story } from '@storybook/addon-docs/blocks';
-import TodoItem from './TodoItem';
+import { TodoItem } from './TodoItem';
import fetch from 'node-fetch';
@@ -14,11 +14,10 @@ import fetch from 'node-fetch';
loaders={[
async () => ({
todo: await (
- await fetch("https://jsonplaceholder.typicode.com/todos/1")
+ await fetch('https://jsonplaceholder.typicode.com/todos/1')
).json(),
}),
- ]}
->
+ ]} >
{(args, { loaded: { todo } }) => ({
props: {
todo: todo,
diff --git a/docs/snippets/angular/loader-story.ts.mdx b/docs/snippets/angular/loader-story.ts.mdx
index 837cd804a9a5..a48f5f9e78f8 100644
--- a/docs/snippets/angular/loader-story.ts.mdx
+++ b/docs/snippets/angular/loader-story.ts.mdx
@@ -1,15 +1,20 @@
```ts
// TodoItem.stories.ts
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
import fetch from 'node-fetch';
import { CommonModule } from '@angular/common';
-import TodoItem from './TodoItem';
+import { TodoItem } from './TodoItem';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Examples/Loader',
component: TodoItem,
decorators: [
moduleMetadata({
@@ -17,7 +22,6 @@ export default {
imports: [CommonModule],
}),
],
- title: 'Examples/Loader',
} as Meta;
export const Primary = (args, { loaded: { todo } }) => {
diff --git a/docs/snippets/angular/login-form-with-play-function.mdx.mdx b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
new file mode 100644
index 000000000000..f4420917d418
--- /dev/null
+++ b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
@@ -0,0 +1,38 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { within, userEvent } from '@storybook/testing-library';
+
+import { LoginForm } from './LoginForm.component';
+
+
+
+export const Template = (args) => ({ props: args });
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx
new file mode 100644
index 000000000000..2124d9d4582c
--- /dev/null
+++ b/docs/snippets/angular/login-form-with-play-function.ts.mdx
@@ -0,0 +1,40 @@
+```ts
+// LoginForm.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import { LoginForm } from './LoginForm.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Form',
+ component: LoginForm,
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const EmptyForm: Story = Template.bind({});
+
+export const FilledForm: Story = Template.bind({});
+FilledForm.play = async ({ canvasElement }) => {
+ // Starts querying the component from it's root element
+ const canvas = within(canvasElement);
+
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
+ delay: 100,
+ });
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
index 4db96cee2d55..9c803f6368d7 100644
--- a/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
@@ -1,7 +1,12 @@
```md
-
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { Badge } from './badge.component';
+
+
-import { Canvas, Story } from '@storybook/addon-docs';
export const Template = (args) => ({ props: args });
diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx
new file mode 100644
index 000000000000..39d95c5bd919
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx
@@ -0,0 +1,31 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = (args) => ({ props: args });
+
+ {
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+ }} >
+ {Template.bind({})}
+
+
+ {
+ // The play function interacts with the component and looks for the text
+ await screen.findByText('example string');
+ }} >
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
new file mode 100644
index 000000000000..fae563d58d89
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
@@ -0,0 +1,35 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'QueryMethods',
+ component: MyComponent,
+
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const ExampleWithRole: Story = Template.bind({});
+ExampleWithRole.play = async () => {
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+};
+
+export const ExampleWithText: Story = Template.bind({});
+ExampleWithText.play = async () => {
+ // The play function interacts with the component and looks for the text
+ await screen.findByText('example string');
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-composition.ts.mdx b/docs/snippets/angular/my-component-play-function-composition.ts.mdx
new file mode 100644
index 000000000000..818de2f6f011
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-composition.ts.mdx
@@ -0,0 +1,40 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const FirstStory: Story = Template.bind({});
+FirstStory.play = async () => {
+ userEvent.type(screen.getByTestId('an-element'), 'example-value');
+};
+
+export const SecondStory: Story = Template.bind({});
+SecondStory.play = async () => {
+ await userEvent.type(screen.getByTestId('other-element'), 'another value');
+};
+
+export const CombinedStories: Story = Template.bind({});
+CombinedStories.play = async () => {
+ // Runs the FirstStory and Second story play function before running this story's play function
+ await FirstStory.play();
+ await SecondStory.play();
+ await userEvent.type(screen.getByTestId('another-element'), 'random value');
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx
new file mode 100644
index 000000000000..b0423221fde9
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx
@@ -0,0 +1,36 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent, waitFor } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = (args) => ({ props: args });
+
+ {
+ const Input = screen.getByLabelText('Username', {
+ selector: 'input',
+ });
+
+ await userEvent.type(Input, 'WrongInput', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+
+ const Submit = screen.getByRole('button');
+ await userEvent.click(Submit);
+
+ await waitFor(async () => {
+ await userEvent.hover(screen.getByTestId('error'));
+ });
+ }} >
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
new file mode 100644
index 000000000000..bb8cfebfc317
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
@@ -0,0 +1,42 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { screen, userEvent, waitFor } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithAsync',
+ component: MyComponent,
+
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const ExampleAsyncStory: Story = Template.bind({});
+ExampleAsyncStory.play = async () => {
+ const Input = screen.getByLabelText('Username', {
+ selector: 'input',
+ });
+
+ await userEvent.type(Input, 'WrongInput', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+ await userEvent.click(Submit);
+
+ await waitFor(async () => {
+ await userEvent.hover(screen.getByTestId('error'));
+ });
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx
new file mode 100644
index 000000000000..420cd8114f5d
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx
@@ -0,0 +1,26 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { getByRole, userEvent, within } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = (args) => ({ props: args });
+
+ {
+ // Assigns canvas to the component root element
+ const canvas = within(canvasElement);
+
+ // Starts querying from the component's root element
+ await userEvent.type(canvas.getByTestId('example-element'), 'something');
+ await userEvent.click(canvas.getByRole('another-element'));
+ }} >
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
new file mode 100644
index 000000000000..1cfc409bb7cc
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
@@ -0,0 +1,32 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { getByRole, userEvent, within } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithCanvasElement',
+ component: MyComponent,
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const ExampleStory: Story = Template.bind({});
+ExampleStory.play = async ({ canvasElement }) => {
+ // Assigns canvas to the component root element
+ const canvas = within(canvasElement);
+
+ // Starts querying from the component's root element
+ await userEvent.type(canvas.getByTestId('example-element'), 'something');
+ await userEvent.click(canvas.getByRole('another-element'));
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx
new file mode 100644
index 000000000000..f14eb480c156
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx
@@ -0,0 +1,31 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = (args) => ({ props: args });
+
+ {
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button'));
+ }}>
+ {Template.bind({})}
+
+
+ {
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await fireEvent.click(screen.getByTestId('data-testid'));
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
new file mode 100644
index 000000000000..87dc0d2f1c74
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
@@ -0,0 +1,34 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ClickExamples',
+ component: MyComponent,
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const ClickExample: Story = Template.bind({});
+ClickExample.play = async () => {
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button'));
+};
+
+export const FireEventExample: Story = Template.bind({});
+FireEventExample.play = async () => {
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await fireEvent.click(screen.getByTestId('data-testid'));
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
new file mode 100644
index 000000000000..20b6d5cc2a49
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
@@ -0,0 +1,31 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = (args) => ({ props: args });
+
+ {
+ const exampleElement= screen.getByLabelText('example-element');
+
+ // The delay option set the ammount of milliseconds between characters being typed
+ await userEvent.type(exampleElement, 'random string', {
+ delay: 100,
+ });
+
+ const AnotherExampleElement= screen.getByLabelText('another-example-element');
+ await userEvent.type(AnotherExampleElement, 'another random string', {
+ delay: 100,
+ });
+ }} >
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
new file mode 100644
index 000000000000..c0bdc9307061
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithDelay',
+ component: MyComponent,
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const DelayedStory: Story = Template.bind({});
+DelayedStory.play = () => {
+ const exampleElement= screen.getByLabelText('example-element');
+ // The delay option set the ammount of milliseconds between characters being typed
+ await userEvent.type(exampleElement, 'random string', {
+ delay: 100,
+ });
+
+ const AnotherExampleElement= screen.getByLabelText('another-example-element');
+ await userEvent.type(AnotherExampleElement, 'another random string', {
+ delay: 100,
+ });
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx
new file mode 100644
index 000000000000..4638665ad343
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx
@@ -0,0 +1,36 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+
+
+export const sleep= (ms) => {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+export const Template = (args) => ({ props: args });
+
+ {
+ const select = screen.getByRole('listbox');
+
+ await userEvent.selectOptions(select, ['One Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Another Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Yet another item']);
+
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
new file mode 100644
index 000000000000..d88755a5cb1c
--- /dev/null
+++ b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
@@ -0,0 +1,40 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithSelectEvent',
+ component: MyComponent,
+} as Meta;
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const ExampleChangeEvent: Story = Template.bind({});
+ExampleChangeEvent.play = async () => {
+ const select = screen.getByRole('listbox');
+
+ await userEvent.selectOptions(select, ['One Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Another Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Yet another item']);
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
new file mode 100644
index 000000000000..4d212e54bec1
--- /dev/null
+++ b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Path/To/MyComponent',
+ component: MyComponent,
+} as Meta;
+
+
+export const Default: Story = () => ({
+ props: {},
+});
+
+export const WithProp: Story = () => ({
+ props: {
+ prop: 'value',
+ },
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx
index 2f7d761176f3..4e7ecefe55b3 100644
--- a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx
+++ b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx
@@ -5,15 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { MyComponent } from './MyComponent.component';
+
+ component={MyComponent} />
{{
- template: '',
+ template: '
```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
index edb5c126d176..31b17240aaee 100644
--- a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
@@ -1,32 +1,32 @@
```ts
// MyComponent.stories.ts
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import { Meta, Story } from '@storybook/angular';
+
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
export default {
- title: 'Stories',
- component: MyComponent,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
parameters: {
//👇 The viewports object from the Essentials addon
viewport: {
- /👇 The viewports you want to use
+ //👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
- }
+ },
},
} as Meta;
-export const myStory: Story = () => ({
- template: ''
+export const MyStory: Story = () => ({
+ template: ' = (args) => ({
- props: args
+const Template: Story = (args) => ({
+ props: args,
});
-export const Default = Template.bind({});
-Default.args = {
+export const ExampleStory = Template.bind({});
+ExampleStory.args = {
propertyA: process.env.STORYBOOK_DATA_KEY
};
```
\ No newline at end of file
diff --git a/docs/snippets/angular/page-story-slots.mdx.mdx b/docs/snippets/angular/page-story-slots.mdx.mdx
index c5f87d589668..333bc3bec80f 100644
--- a/docs/snippets/angular/page-story-slots.mdx.mdx
+++ b/docs/snippets/angular/page-story-slots.mdx.mdx
@@ -1,9 +1,9 @@
```md
-
+
import { Meta, Story } from '@storybook/addon-docs';
-import Page from './page.component.ts';
+import { Page } from './page.component';
@@ -11,7 +11,7 @@ export const Template = (args) => ({
props: args,
template:`
- ${args.footer}
+ ${args.footer}
`,
});
diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
index fff0622251a4..4a59a2b1b5f7 100644
--- a/docs/snippets/angular/page-story-slots.ts.mdx
+++ b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -1,15 +1,21 @@
```ts
// Page.stories.ts
-import { Meta, Story } from '@storybook/angular/types-6-0';
-import Page from './page.component';
+import { Meta, Story } from '@storybook/angular';
+
+import { Page } from './page.component';
export default {
- component: Page,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Page',
+ component: Page,
} as Meta;
-const Template: Story = (args) => ({
+
+const Template: Story = (args) => ({
props: args,
template: `
@@ -21,5 +27,4 @@ export const CustomFooter = Template.bind({});
CustomFooter.args = {
footer: 'Built with Storybook',
};
-
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/page-story-with-args-composition.ts.mdx b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
index 4c40c631d25a..6b141cf0a9a7 100644
--- a/docs/snippets/angular/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
@@ -1,15 +1,14 @@
```ts
// YourPage.stories.ts
-import { moduleMetadata } from '@storybook/angular'
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CommonModule } from '@angular/common';
-import DocumentScreen from './YourPage.component';
-import DocumentList from './DocumentList.component';
-import DocumentHeader from './DocumentHeader.component';
-import PageLayout from './PageLayout.component';
+import { DocumentScreen } from './YourPage.component';
+import { DocumentList } from './DocumentList.component';
+import { DocumentHeader } from './DocumentHeader.component';
+import { PageLayout } from './PageLayout.component';
//👇 Imports the required stories
import * as PageLayoutStories from './PageLayout.stories';
@@ -17,18 +16,22 @@ import * as DocumentHeaderStories from './DocumentHeader.stories';
import * as DocumentListStories from './DocumentList.stories';
export default {
- component: DocumentScreen,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'DocumentScreen',
+ component: DocumentScreen,
decorators: [
moduleMetadata({
- // imports components to allow component composition with Storybook
- declarations: [DocumentList, DocumentHeader,PageLayout],
+ declarations: [DocumentList, DocumentHeader, PageLayout],
imports: [CommonModule],
}),
],
} as Meta;
-const Template: Story = (args) => ({
+
+const Template: Story = (args) => ({
props: args,
});
diff --git a/docs/snippets/angular/page-story.ts.mdx b/docs/snippets/angular/page-story.ts.mdx
index 4dd54b5648f1..b10dacff8340 100644
--- a/docs/snippets/angular/page-story.ts.mdx
+++ b/docs/snippets/angular/page-story.ts.mdx
@@ -1,18 +1,22 @@
```ts
// Page.stories.ts
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
-import Button from './button.component';
-import Header from './header.component';
-import Page from './page.component';
+import { Button } from './button.component';
+import { Header } from './header.component';
+import { Page } from './page.component';
+//👇 Imports all Header stories
import * as HeaderStories from './Header.stories';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Page',
component: Page,
decorators: [
@@ -23,12 +27,13 @@ export default {
],
} as Meta;
-const Template: Story = (args) => ({
+const Template: Story = (args) => ({
props: args,
});
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
- ...HeaderStories.LoggedIn.args,
+export const LoggedIn = {
+ args: {
+ ...HeaderStories.LoggedIn.args,
+ },
};
```
\ No newline at end of file
diff --git a/docs/snippets/angular/register-component-with-play-function.mdx.mdx b/docs/snippets/angular/register-component-with-play-function.mdx.mdx
new file mode 100644
index 000000000000..e157ee1d754f
--- /dev/null
+++ b/docs/snippets/angular/register-component-with-play-function.mdx.mdx
@@ -0,0 +1,40 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { RegistrationForm } from './RegistrationForm.component';
+
+
+
+export const Template = (args) => ({ props: args });
+
+ {
+ const emailInput = screen.getByLabelText('email', {
+ selector: 'input',
+ });
+
+ await userEvent.type(emailInput, 'example-email@email.com', {
+ delay: 100,
+ });
+
+ const passwordInput = screen.getByLabelText('password', {
+ selector: 'input',
+ });
+
+ await userEvent.type(passwordInput, 'ExamplePassword', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+
+ await userEvent.click(Submit);
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/register-component-with-play-function.ts.mdx b/docs/snippets/angular/register-component-with-play-function.ts.mdx
new file mode 100644
index 000000000000..39f62fd79993
--- /dev/null
+++ b/docs/snippets/angular/register-component-with-play-function.ts.mdx
@@ -0,0 +1,45 @@
+```ts
+// RegistrationForm.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { RegistrationForm } from './RegistrationForm.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'RegistrationForm',
+ component: RegistrationForm,
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+});
+
+export const FilledForm: Story = Template.bind({});
+FilledForm.play = async () => {
+ const emailInput = screen.getByLabelText('email', {
+ selector: 'input',
+ });
+
+ await userEvent.type(emailInput, 'example-email@email.com', {
+ delay: 100,
+ });
+
+ const passwordInput = screen.getByLabelText('password', {
+ selector: 'input',
+ });
+
+ await userEvent.type(passwordInput, 'ExamplePassword', {
+ delay: 100,
+ });
+ // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+
+ await userEvent.click(Submit);
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/simple-page-implementation.ts.mdx b/docs/snippets/angular/simple-page-implementation.ts.mdx
index ff6b75176448..84bdbf7aa3b8 100644
--- a/docs/snippets/angular/simple-page-implementation.ts.mdx
+++ b/docs/snippets/angular/simple-page-implementation.ts.mdx
@@ -12,7 +12,7 @@ import { Component, Input } from '@angular/core';
`,
})
-export default class DocumentScreen {
+export class DocumentScreen {
@Input()
user: any = { id: 0, name: 'Some User' };
@@ -22,5 +22,4 @@ export default class DocumentScreen {
@Input()
subdocuments: any = [];
}
-
```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx
new file mode 100644
index 000000000000..3e1845ee0ffb
--- /dev/null
+++ b/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx
@@ -0,0 +1,24 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = () => ({});
+
+
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
new file mode 100644
index 000000000000..7b3aec3f59d2
--- /dev/null
+++ b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Disable a11y addon',
+ component: MyComponent,
+} as Meta;
+
+const Template: Story = () => ({});
+
+export const NonA11yStory = Template.bind({});
+NonA11yStory.parameters = {
+ a11y: {
+ // This option disables all a11y checks on this story
+ disable: true,
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx
new file mode 100644
index 000000000000..4b39ad459c52
--- /dev/null
+++ b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx
@@ -0,0 +1,39 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = () => ({});
+
+
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
new file mode 100644
index 000000000000..9b434d8a6506
--- /dev/null
+++ b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, Story } from '@storybook/angular';
+
+import { MyComponent } from './MyComponent.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Configure a11y addon',
+ component: MyComponent,
+} as Meta;
+
+const Template: Story = () => ({});
+
+export const ExampleStory = Template.bind({});
+ExampleStory.parameters = {
+ a11y: {
+ element: '#root',
+ config: {
+ rules: [
+ {
+ // The autocomplete rule will not run based on the CSS selector provided
+ id: 'autocomplete-valid',
+ selector: '*:not([autocomplete="nope"])',
+ },
+ {
+ // Setting the enabled option to false will disable checks for this particular rule on all stories.
+ id: 'image-alt',
+ enabled: false,
+ },
+ ],
+ },
+ options: {},
+ manual: true,
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx b/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx
index fc26f240d84d..77513950c915 100644
--- a/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx
+++ b/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx
@@ -6,4 +6,4 @@ import { componentWrapperDecorator } from '@storybook/angular';
export const decorators = [
componentWrapperDecorator((story) => `${story}`),
];
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx b/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx
index 9d0aa980ed2a..5b58038841fb 100644
--- a/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx
+++ b/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx
@@ -17,4 +17,4 @@ export const decorators = [
({ globals }) => ({ theme: globals.theme })
),
];
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx
index d94776f7c643..51fccdf7d9fa 100644
--- a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx
+++ b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx
@@ -1,7 +1,11 @@
```md
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { Table } from './Table.component';
+
+
export const TableStory = (args) => ({
props: args,
diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
index 7dfbb55d1738..17982a224f13 100644
--- a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
+++ b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
@@ -1,7 +1,20 @@
```ts
// Table.stories.ts
-const TableStory: Story = (args) => ({
+import { Meta, Story } from '@storybook/angular',
+
+import { Table } from './Table.component';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Custom Table',
+ component: Table,
+} as Meta;
+
+const TableStory: Story = (args) => ({
props: args,
template: `
@@ -26,4 +39,4 @@ Numeric.args = {
//👇 The remaining args get passed to the `Table` component
size: 'large',
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/your-component-with-decorator.mdx.mdx b/docs/snippets/angular/your-component-with-decorator.mdx.mdx
index b83c399446f7..b3a823be40b5 100644
--- a/docs/snippets/angular/your-component-with-decorator.mdx.mdx
+++ b/docs/snippets/angular/your-component-with-decorator.mdx.mdx
@@ -1,5 +1,5 @@
```md
-
+
import { Meta } from '@storybook/addon-docs';
diff --git a/docs/snippets/angular/your-component-with-decorator.ts.mdx b/docs/snippets/angular/your-component-with-decorator.ts.mdx
index 8f29fd5f1bfb..927536968cb5 100644
--- a/docs/snippets/angular/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/angular/your-component-with-decorator.ts.mdx
@@ -1,11 +1,17 @@
```ts
-// your-component.stories.ts
+// YourComponent.stories.ts
-import { Meta, componentWrapperDecorator } from '@storybook/angular';
+import { componentWrapperDecorator, Meta } from '@storybook/angular';
+
+import { YourComponent } from './your.component';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'YourComponent',
component: YourComponent,
decorators: [componentWrapperDecorator((story) => `${story}`)],
} as Meta;
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/your-component.mdx.mdx b/docs/snippets/angular/your-component.mdx.mdx
index d42291faac70..8c2bd62e6f2a 100644
--- a/docs/snippets/angular/your-component.mdx.mdx
+++ b/docs/snippets/angular/your-component.mdx.mdx
@@ -8,7 +8,7 @@ import { YourComponent } from './your.component';
-
+
export const Template = (args) => ({ props: args });
diff --git a/docs/snippets/angular/your-component.ts.mdx b/docs/snippets/angular/your-component.ts.mdx
index cccec7f8fa00..e33f39347f74 100644
--- a/docs/snippets/angular/your-component.ts.mdx
+++ b/docs/snippets/angular/your-component.ts.mdx
@@ -3,21 +3,26 @@
import { Meta, Story } from '@storybook/angular';
+
import { YourComponent } from './your.component';
//👇 This default export determines where your story goes in the story list
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'YourComponent',
component: YourComponent,
} as Meta;
//👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ({
- props: args,
+const Template: Story = (args) => ({
+ props:args,
});
-export const YourStory = Template.bind({});
-YourStory.args = {
- /* 👇 The args you need here will depend on your component */
+export const FirstStory = Template.bind({});
+FirstStory.args= {
+ //👇 The args you need here will depend on your component
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx
index a86ae5b595c8..7c1ccf730efd 100644
--- a/docs/snippets/common/args-usage-with-addons.js.mdx
+++ b/docs/snippets/common/args-usage-with-addons.js.mdx
@@ -9,8 +9,8 @@ const [args, updateArgs, resetArgs] = useArgs();
updateArgs({ key: 'value' });
// To reset one (or more) args:
-resetArgs(['key']);
+resetArgs((argNames: ['key']));
// To reset all args
resetArgs();
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
index 7ffb54787e47..1a4d2a33ec0a 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
@@ -1,43 +1,43 @@
```js
-// Badge.stories.js | Badge.stories.jsx | Badge.stories.ts | Badge.stories.tsx
+// Badge.stories.js|jsx|ts|tsx
+
+import { Badge } from './Badge';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Badge',
component: Badge,
- title: 'CSF/Badge',
argTypes: {
status: {
name: 'Badge Status',
description: 'Available options available to the Badge',
- options: [
- 'positive',
- 'negative',
- 'warning',
- 'error',
- 'neutral'
- ],
+ options: ['positive', 'negative', 'warning', 'error', 'neutral'],
table: {
defaultValue: {
- summary: 'positive'
+ summary: 'positive',
},
type: {
summary: 'Shows options to the Badge',
- detail: 'Listing of available options'
- }
+ detail: 'Listing of available options',
+ },
},
},
label: {
name: 'Badge Content',
description: 'Text shown by Badge',
control: {
- type: 'text'
+ type: 'text',
},
table: {
type: {
summary: 'The label contents',
- detail: 'Text displayed by the Badge'
- }
- }
- }
- }
+ detail: 'Text displayed by the Badge',
+ },
+ },
+ },
+ },
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx b/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
index 4d5168e1f5e3..6c787f97d614 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
@@ -1,7 +1,7 @@
```md
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { Badge } from './Badge';
@@ -42,7 +42,7 @@ import { Badge } from './Badge';
}
}
}}
-/>
+ component={Badge}/>
### Badge
@@ -51,4 +51,4 @@ Let's define a story for our `Badge` component
+
import { Meta } from '@storybook/addon-docs';
diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx
index ec2b02425fd7..a7a5098295c9 100644
--- a/docs/snippets/common/button-story-default-export.js.mdx
+++ b/docs/snippets/common/button-story-default-export.js.mdx
@@ -1,7 +1,14 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
+
+import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
+ component: Button,
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx
index 84656a63b51e..30655cd5be7b 100644
--- a/docs/snippets/common/button-story-disable-addon.js.mdx
+++ b/docs/snippets/common/button-story-disable-addon.js.mdx
@@ -1,8 +1,15 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
+
+import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
+ component: Button,
parameters: {
myAddon: { disable: true }, // Disables the addon
},
diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
index 9acd2461f7ba..f6da64894f03 100644
--- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx
+++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
@@ -1,18 +1,22 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
- parameters: {
- docs: {
- page: null
- }
+ parameters: {
+ docs: {
+ page: null,
+ },
},
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx
index c4130f7d16f2..9fe963c74b40 100644
--- a/docs/snippets/common/button-story-docs-code-type.js.mdx
+++ b/docs/snippets/common/button-story-docs-code-type.js.mdx
@@ -1,7 +1,13 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
+
+import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
argTypes: {
@@ -11,9 +17,9 @@ export default {
docs: {
source: {
type: 'code',
- }
- }
- }
+ },
+ },
+ },
};
// Remainder story implementation
diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
index 1cfd5c698d85..49b77125e0ee 100644
--- a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
@@ -1,20 +1,24 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
import { Button } from './Button';
-import ButtonDocumentationComponent from './CustomDocumentationComponent';
+import { CustomDocumentationComponent } from './CustomDocumentationComponent';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
- parameters: {
- docs: {
- page: ButtonDocumentationComponent,
- }
+ parameters: {
+ docs: {
+ page: CustomDocumentationComponent,
+ },
},
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
index f06e53ac85a4..ce8fad9d9645 100644
--- a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
@@ -1,12 +1,16 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
import { Button } from './Button';
-import CustomMDXDocumentation from './Custom-MDX-Documentation.mdx'
+import CustomMDXDocumentation from './Custom-MDX-Documentation.mdx';
export default {
- title: 'Example/Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
@@ -14,15 +18,31 @@ export default {
parameters: {
docs: {
page: CustomMDXDocumentation,
- }
+ },
},
};
-export const Primary = () => ;
+const Template = (args) => ({
+ //👇 Your template goes here
+});
-export const Secondary = () => ;
+export const Primary = Template.bind({});
+Primary.args = {
+ backgroundColor: 'primary',
+};
-export const Large = () => ;
+export const Secondary = Template.bind({});
+Secondary.args = {
+ backgroundColor: 'secondary',
+};
-export const Small = () => ;
+export const Large = Template.bind({});
+Large.args = {
+ size: 'large',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+ size: 'small',
+};
```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx
index 94c157e22f0d..9028a5814afe 100644
--- a/docs/snippets/common/button-story-grouped.js.mdx
+++ b/docs/snippets/common/button-story-grouped.js.mdx
@@ -1,7 +1,14 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
+
+import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Design System/Atoms/Button',
+ component: Button,
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
index bee9dd999ac9..c58e8ebc6eb7 100644
--- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
+++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
@@ -1,8 +1,22 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
-export const Large = Template.bind({});
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
+const Template = (args) => ({
+ //👇 Your template goes here
+});
+
+export const Large = Template.bind({});
Large.parameters = {
controls: { hideNoControlsWarning: true },
};
diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
index f47bd55e388b..6ad1284bba47 100644
--- a/docs/snippets/common/button-story-hoisted.js.mdx
+++ b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -1,13 +1,19 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
import { Button as ButtonComponent } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Design System/Atoms/Button',
component: ButtonComponent,
};
// This is the only named export in the file, and it matches the component name
-export const Button = (args) => Template.bind({});
+import { Button } from './Button';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
+
+export const Template = (args) => ({
+ //👇 Your template goes here
+});
+
+export const CustomSource = Template.bind({});
CustomSource.parameters = {
docs: {
source: {
diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
index 9d208e4b5447..9a42a63bffa7 100644
--- a/docs/snippets/common/component-story-disable-controls-alt.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
@@ -1,16 +1,20 @@
```js
-// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.js|jsx|ts|tsx
-import { YourComponent } from './your-component'
+import { YourComponent } from './YourComponent';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'YourComponent',
component: YourComponent,
- title:'My Story',
- argTypes:{
+ argTypes: {
// foo is the property we want to remove from the UI
- foo:{
- control:false
- }
- }
+ foo: {
+ control: false,
+ },
+ },
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx b/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx
index 0859fc32651d..733bd9a3a7aa 100644
--- a/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx
+++ b/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx
@@ -1,23 +1,16 @@
```md
-
+
-import { Meta,Story, Canvas } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
import { YourComponent } from './your-component'
-
-export const Template = (args) =>
+
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
import { YourComponent } from './YourComponent'
-
-
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-dynamic-title.js.mdx b/docs/snippets/common/component-story-dynamic-title.js.mdx
index 7a0d96736792..da1e331e17bb 100644
--- a/docs/snippets/common/component-story-dynamic-title.js.mdx
+++ b/docs/snippets/common/component-story-dynamic-title.js.mdx
@@ -1,5 +1,5 @@
```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx|ts|tsx
import base from 'paths.macro';
diff --git a/docs/snippets/common/component-story-mdx-argstable-block-for-component.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-block-for-component.mdx.mdx
index f269fe4f46ef..f989cb3c8964 100644
--- a/docs/snippets/common/component-story-mdx-argstable-block-for-component.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-argstable-block-for-component.mdx.mdx
@@ -1,5 +1,5 @@
```md
-
+
import { ArgsTable } from '@storybook/addon-docs';
@@ -8,4 +8,4 @@ import { MyComponent } from './MyComponent';
# My Component!
-
- {(args) =>
+ {Template.bind({})}
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
index a8ca246f0009..fb7f3f44598e 100644
--- a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
@@ -1,12 +1,15 @@
```md
-
+
import { Meta, Story } from '@storybook/addon-docs';
+import { MyComponent } from './MyComponent';
+
diff --git a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
index 57d621c42264..856a73b8ca66 100644
--- a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
@@ -1,5 +1,5 @@
```md
-
+
import { Source } from '@storybook/addon-docs';
@@ -13,4 +13,4 @@ import dedent from 'ts-dedent';
}
`}
/>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-description.mdx.mdx b/docs/snippets/common/component-story-mdx-description.mdx.mdx
index 94077ec4f814..4397d4f09413 100644
--- a/docs/snippets/common/component-story-mdx-description.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-description.mdx.mdx
@@ -1,5 +1,5 @@
```md
-
+
import { Description } from '@storybook/addon-docs';
@@ -15,4 +15,4 @@ import { Button } from './Button';
Insert fancy markdown here.
`}/>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-embed.mdx.mdx b/docs/snippets/common/component-story-mdx-embed.mdx.mdx
index 2c6dd0c9e9c1..a87ba2dda8d1 100644
--- a/docs/snippets/common/component-story-mdx-embed.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-embed.mdx.mdx
@@ -1,5 +1,5 @@
```md
-
+
import { Story } from '@storybook/addon-docs';
@@ -8,4 +8,4 @@ import { Story } from '@storybook/addon-docs';
And Markdown here
Replacing DocsPage with a custom component
diff --git a/docs/snippets/common/custom-docs-page.mdx.mdx b/docs/snippets/common/custom-docs-page.mdx.mdx
index 7d5cf0bcc0b0..1d5edbc864ec 100644
--- a/docs/snippets/common/custom-docs-page.mdx.mdx
+++ b/docs/snippets/common/custom-docs-page.mdx.mdx
@@ -1,12 +1,11 @@
```md
-
# Replacing DocsPage with custom `MDX` content
This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
-It can be further expanded with your own code snippets and include specific information related to your stories.
+It can be further expanded with your own code snippets and include specific information related to your stories.
For example:
@@ -21,6 +20,10 @@ Button is the primary component. It has four possible states.
- [Large](#large)
- [Small](#small)
+## With the story title defined
+
+If you included the title in the story's default export, use this approach.
+
### Primary
{
+ const canvas = within(canvasElement);
+
+ await userEvent.type(screen.getByTestId('email'), 'emailaddress@provider.com', {
+ delay: 100,
+ });
+ await userEvent.type(screen.getByTestId('password'), 'a-random-password', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+}} />
+```
diff --git a/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx b/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
new file mode 100644
index 000000000000..16c223db6e54
--- /dev/null
+++ b/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
@@ -0,0 +1,23 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+ argTypes: {
+ label:{
+ options: ['Normal', 'Bold', 'Italic'],
+ mapping: {
+ Bold: Bold,
+ Italic: Italic,
+ },
+ },
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-interaction-test-with-play-function.js.mdx b/docs/snippets/common/my-component-interaction-test-with-play-function.js.mdx
new file mode 100644
index 000000000000..4a457d970841
--- /dev/null
+++ b/docs/snippets/common/my-component-interaction-test-with-play-function.js.mdx
@@ -0,0 +1,34 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+import { expect } from '@storybook/jest';
+
+import { within, waitFor, userEvent } from '@storybook/testing-library';
+
+import { YourForm } from './YourForm';
+
+export default {
+ component: YourForm,
+};
+
+export const ExampleStory = {
+ play: async ({ args, canvasElement }) => {
+ // Starts querying the component from it's root element
+ const canvas = within(canvasElement);
+
+ await userEvent.type(canvas.getByTestId('email'), 'email@email-provider.com');
+ await userEvent.type(canvas.getByTestId('password'), 'randompassword');
+
+ // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByTestId('submit'));
+
+ await waitFor(async () => {
+ await expect(args.onSubmit).toHaveBeenCalledTimes(1);
+ await expect(args.onSubmit).toHaveBeenCalledWith({
+ email: 'email@email-provider.com',
+ password: 'password',
+ });
+ });
+ },
+};
+```
diff --git a/docs/snippets/common/my-component-story-import-json.js.mdx b/docs/snippets/common/my-component-story-import-json.js.mdx
index 56b0e6431166..15dcf593f73b 100644
--- a/docs/snippets/common/my-component-story-import-json.js.mdx
+++ b/docs/snippets/common/my-component-story-import-json.js.mdx
@@ -1,5 +1,5 @@
```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx|ts|tsx
// This will automatically be parsed to the contents of `data.json`
import data from './data.json';
diff --git a/docs/snippets/common/my-component-story-import-static-asset.js.mdx b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
index 8aa950ac4c07..d0f5a3b13d8b 100644
--- a/docs/snippets/common/my-component-story-import-static-asset.js.mdx
+++ b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
@@ -1,5 +1,5 @@
```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx|ts|tsx
// This will include './static/image.png' in the bundle.
// And return a path to be included in a src attribute
diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
index 3aa3727adb73..e242cb17b315 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.js.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
@@ -1,9 +1,13 @@
```js
-// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
+// MyComponent.story.js|jsx|ts|tsx
-import MyComponent from './MyComponent';
+import { MyComponent } from './MyComponent';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Path/To/MyComponent',
component: MyComponent,
decorators: [ ... ],
diff --git a/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx b/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
index dcb1eeda49db..7bd6a19fd386 100644
--- a/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
+++ b/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
@@ -1,12 +1,14 @@
```md
-
+
import { Meta, Story } from '@storybook/addon-docs';
+import { MyComponent } from './MyComponent';
({
+ //👇 Your template goes here
+});
export const Large = Template.bind({});
Large.parameters = {
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx
index 127d4a17c06f..f39b32039904 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx
@@ -1,7 +1,15 @@
```md
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { Button } from './Button';
+
+
+
+export const Template = (args) => ({
+ //👇 Your template goes here
+});
+ }} >
{Template.bind({})}
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
index c11b02c7a26e..80f9c094ae65 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
@@ -1,8 +1,23 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx|ts|tsx
+
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
+
+const Template = (args) => ({
+ //👇 Your template goes here
+});
export const Large = Template.bind({});
Large.parameters = {
- backgrounds: { default: 'facebook' }
+ backgrounds: { default: 'facebook' },
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx
index 3b3d161f87dc..0b49c369c4d8 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx
@@ -1,7 +1,15 @@
```md
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { Button } from './Button';
+
+
+
+export const Template = (args) => ({
+ //👇 Your template goes here
+});
[...list, ...findStories()],
+ addons: ['@storybook/addon-essentials'],
+};
+```
diff --git a/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
new file mode 100644
index 000000000000..7b05042aafe1
--- /dev/null
+++ b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
@@ -0,0 +1,17 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: [
+ {
+ // 👇 The directory field sets the directory your stories
+ directory: '../packages/stories',
+ // 👇 The titlePrefix field will generate automatic titles for your stories
+ titlePrefix: 'MyComponents',
+ // 👇 Storybook will load all files that contain the stories extensio
+ files: '*.stories.*',
+ },
+ ],
+ addons: ['@storybook/addon-essentials'],
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-storyloading-with-directory.js.mdx b/docs/snippets/common/storybook-storyloading-with-directory.js.mdx
new file mode 100644
index 000000000000..c0664b954c25
--- /dev/null
+++ b/docs/snippets/common/storybook-storyloading-with-directory.js.mdx
@@ -0,0 +1,9 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ // 👇 Storybook will load all existing stories within the MyStories folder
+ stories: ['../packages/MyStories'],
+ addons: ['@storybook/addon-essentials'],
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/preact/button-test.js.mdx b/docs/snippets/preact/button-test.js.mdx
deleted file mode 100644
index 2c1889942549..000000000000
--- a/docs/snippets/preact/button-test.js.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-```js
-// Button.test.js
-
-import { h } from 'preact';
-
-import { render, screen } from '@testing-library/preact';
-
-import '@testing-library/jest-dom/extend-expect';
-
-//👇 Imports a specific story for the test
-import { Primary } from './Button.stories';
-
-it('renders the button in the primary state', () => {
- render(;
+
+const Template: ComponentStory = () =>
@@ -31,7 +31,7 @@ We can drop it in a `Canvas` to get a code snippet:
args={{
status: 'negative',
label: 'Negative'
- }}>
+ }}>
{Template.bind({})}
@@ -46,7 +46,7 @@ with unique URLs, which is great for review and testing.
args={{
status: 'warning',
label: 'Warning'
- }}>
+ }}>
{Template.bind({})}
@@ -55,7 +55,7 @@ with unique URLs, which is great for review and testing.
args={{
status: 'neutral',
label: 'Neutral'
- }}>
+ }}>
{Template.bind({})}
@@ -64,7 +64,7 @@ with unique URLs, which is great for review and testing.
args={{
status: 'error',
label: 'Error'
- }}>
+ }}>
{Template.bind({})}
@@ -73,7 +73,7 @@ with unique URLs, which is great for review and testing.
args={{
status: 'warning',
label: (;
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-component-decorator.ts.mdx b/docs/snippets/react/button-story-component-decorator.ts.mdx
index a2abfb4fecd2..7c088fc34b81 100644
--- a/docs/snippets/react/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/react/button-story-component-decorator.ts.mdx
@@ -1,14 +1,18 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
export default {
- title: 'Example/Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
decorators: [
(Story) => (
@@ -17,5 +21,5 @@ export default {
),
],
-} as Meta;
+} as ComponentMeta;
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.js.mdx b/docs/snippets/react/button-story-decorator.js.mdx
index 40389fcfda17..909e514f5dbf 100644
--- a/docs/snippets/react/button-story-decorator.js.mdx
+++ b/docs/snippets/react/button-story-decorator.js.mdx
@@ -1,6 +1,27 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx
-export const Primary = …
-Primary.decorators = [(Story) =>
),
]}>
+ {Template.bind({})}
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
new file mode 100644
index 000000000000..507a41844ceb
--- /dev/null
+++ b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+export const Primary = Template.bind({});
+Primary.decorators = [(Story) => {Story()}];
+```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.story-function.js.mdx b/docs/snippets/react/button-story-decorator.story-function.js.mdx
index d68c572cfb64..396fbd6aec25 100644
--- a/docs/snippets/react/button-story-decorator.story-function.js.mdx
+++ b/docs/snippets/react/button-story-decorator.story-function.js.mdx
@@ -1,6 +1,19 @@
```js
-// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
+// Button.stories.js|jsx
-export const Primary = …
+import React from 'react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
+
+const Template = (args) => ;
+
+export const Primary = Template.bind({});
Primary.decorators = [(Story) => {Story()}];
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.ts.mdx b/docs/snippets/react/button-story-decorator.ts.mdx
new file mode 100644
index 000000000000..48ed75e585e6
--- /dev/null
+++ b/docs/snippets/react/button-story-decorator.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+export const Primary = Template.bind({});
+Primary.decorators = [
+ (Story) => (
+
+ {
primary: true,
size: 'small',
label: 'button',
- }}
->
+ }}>
{(args) => {
const { label } = args;
const functionResult = someFunction(label);
diff --git a/docs/snippets/react/button-story-default-docs-code.ts.mdx b/docs/snippets/react/button-story-default-docs-code.ts.mdx
index 0d2f0091f6f5..13abf6e69b8a 100644
--- a/docs/snippets/react/button-story-default-docs-code.ts.mdx
+++ b/docs/snippets/react/button-story-default-docs-code.ts.mdx
@@ -1,11 +1,11 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
//👇 Some function to demonstrate the behavior
const someFunction = (someValue: String) => {
@@ -13,15 +13,19 @@ const someFunction = (someValue: String) => {
};
export default {
- title: 'Example/Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
-} as Meta;
+} as ComponentMeta;
-export const ExampleStory: Story = (args) => {
+export const ExampleStory: ComponentStory = (args) => {
//👇 Destructure the label from the args object
const { label } = args;
diff --git a/docs/snippets/react/button-story-default-export-with-component.js.mdx b/docs/snippets/react/button-story-default-export-with-component.js.mdx
index 625f39a703f7..f7b5b88f05c2 100644
--- a/docs/snippets/react/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.js.mdx
@@ -1,12 +1,16 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
import { Button } from './Button';
export default {
- title: 'Components/Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
-}
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-default-export-with-component.ts.mdx b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
index 0970a531367e..3cb7e46e9fee 100644
--- a/docs/snippets/react/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
@@ -1,14 +1,18 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
import React from 'react';
-import { Meta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
import { Button } from './Button';
export default {
- title: 'Components/Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
-} as Meta;
-```
+} as ComponentMeta;
+```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-rename-story.js.mdx b/docs/snippets/react/button-story-rename-story.js.mdx
index 50b7c172cd50..a9d0dc818383 100644
--- a/docs/snippets/react/button-story-rename-story.js.mdx
+++ b/docs/snippets/react/button-story-rename-story.js.mdx
@@ -1,11 +1,19 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
import { Button } from './Button';
-export const Primary = () => ;
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
+export const Primary = () => ;
Primary.storyName = 'I am the primary';
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
index 0dd876a88651..368c94a2a84b 100644
--- a/docs/snippets/react/button-story-rename-story.ts.mdx
+++ b/docs/snippets/react/button-story-rename-story.ts.mdx
@@ -1,13 +1,21 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
import React from 'react';
-import { Story } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
-export const Primary: Story = () => ;
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as ComponentMeta;
+export const Primary: ComponentStory = () => ;
Primary.storyName = 'I am the primary';
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-using-args.js.mdx b/docs/snippets/react/button-story-using-args.js.mdx
index 91d890ff84da..c4a139a0060f 100644
--- a/docs/snippets/react/button-story-using-args.js.mdx
+++ b/docs/snippets/react/button-story-using-args.js.mdx
@@ -1,10 +1,23 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
+
+import React from 'react';
+
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
//👇 We create a “template” of how args map to rendering
const Template = (args) => ;
-//👇 Each story then reuses that template
+// 👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };
diff --git a/docs/snippets/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx
index cb603ac1300c..60590f4dfe21 100644
--- a/docs/snippets/react/button-story-using-args.ts.mdx
+++ b/docs/snippets/react/button-story-using-args.ts.mdx
@@ -1,12 +1,27 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as ComponentMeta;
//👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ;
+const Template: ComponentStory = (args) => ;
//👇 Each story then reuses that template
export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+Primary.args = { backgroundColor: '#ff0', label: 'Button' };
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
diff --git a/docs/snippets/react/button-story-with-addon-example.js.mdx b/docs/snippets/react/button-story-with-addon-example.js.mdx
index 0c500b151291..02ba3fec7e98 100644
--- a/docs/snippets/react/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.js.mdx
@@ -1,12 +1,17 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
-import Button from './Button';
+import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
+ component: Button,
//👇 Creates specific parameters for the story
parameters: {
myAddon: {
diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx
new file mode 100644
index 000000000000..8c1fd7d10081
--- /dev/null
+++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ //👇 Creates specific parameters for the story
+ parameters: {
+ myAddon: {
+ data: 'this data is passed to the addon',
+ },
+ },
+} as ComponentMeta;
+
+const Basic: ComponentStory = () => ;
+```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx
index 3d466dc47bdc..430d0187f520 100644
--- a/docs/snippets/react/button-story-with-args.js.mdx
+++ b/docs/snippets/react/button-story-with-args.js.mdx
@@ -1,13 +1,17 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
- title: 'Components/Button',
};
//👇 We create a “template” of how args map to rendering
@@ -15,9 +19,8 @@ const Template = (args) => ;
//👇 Each story then reuses that template
export const Primary = Template.bind({});
-
Primary.args = {
- primary: true,
- label: 'Button',
+ primary: true,
+ label: 'Button',
};
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-args.mdx.mdx b/docs/snippets/react/button-story-with-args.mdx.mdx
index 6ce206350c1b..e7ceed0467f5 100644
--- a/docs/snippets/react/button-story-with-args.mdx.mdx
+++ b/docs/snippets/react/button-story-with-args.mdx.mdx
@@ -5,10 +5,13 @@ import { Meta, Story } from '@storybook/addon-docs';
import { Button } from './Button';
-
+
+
+
export const Template = (args) => ;
+
;
}}>
{Template.bind({})}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx
index 966855070001..76b502fa348d 100644
--- a/docs/snippets/react/button-story-with-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-args.ts.mdx
@@ -1,19 +1,23 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button, ButtonProps } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
- title: 'Components/Button',
-} as Meta;
+} as ComponentMeta;
//👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ;
+const Template: ComponentStory = (args) => ;
export const Primary = Template.bind({});
diff --git a/docs/snippets/react/button-story-with-blue-args.js.mdx b/docs/snippets/react/button-story-with-blue-args.js.mdx
index 5f374f1ea86f..27ee66e8f691 100644
--- a/docs/snippets/react/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.js.mdx
@@ -1,12 +1,16 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
import { Button } from './Button';
export default {
- title: 'Components/Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
//👇 Creates specific parameters for the story
parameters: {
diff --git a/docs/snippets/react/button-story-with-blue-args.mdx.mdx b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
index b005052263e7..f9f69d188f71 100644
--- a/docs/snippets/react/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
@@ -1,13 +1,13 @@
```md
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
import { Button } from './Button';
;
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-emojis.js.mdx b/docs/snippets/react/button-story-with-emojis.js.mdx
index eda989460390..7254e5cc7493 100644
--- a/docs/snippets/react/button-story-with-emojis.js.mdx
+++ b/docs/snippets/react/button-story-with-emojis.js.mdx
@@ -1,13 +1,19 @@
```ts
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
+
+import React from 'react';
import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
- title: 'Components/Button',
-}
-export const Primary = () => ;
-export const Secondary = () => ;
-export const Tertiary = () => ;
+};
+export const Primary = () => ;
+export const Secondary = () => ;
+export const Tertiary = () => ;
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-emojis.mdx.mdx b/docs/snippets/react/button-story-with-emojis.mdx.mdx
index 43876acdd8f4..f2e62a5178f2 100644
--- a/docs/snippets/react/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/react/button-story-with-emojis.mdx.mdx
@@ -5,20 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
import { Button } from './Button';
-
+
-
+
-
+
-
+
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index 18c4791768bc..271dec845b7e 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -1,16 +1,30 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
-import { Meta } from '@storybook/react';
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
- title: 'Components/Button',
-} as Meta;
+} as ComponentMeta;
+
+export const Primary: ComponentStory = () => (
+
+);
+
+export const Secondary: ComponentStory = () => (
+
+);
-export const Primary: React.VFC<{}> = () => ;
-export const Secondary: React.VFC<{}> = () => ;
-export const Tertiary: React.VFC<{}> = () => ;
+export const Tertiary: ComponentStory = () => (
+
+);
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-parameters.js.mdx b/docs/snippets/react/button-story-with-parameters.js.mdx
index 552ef1ce2a58..fad4c9f8d853 100644
--- a/docs/snippets/react/button-story-with-parameters.js.mdx
+++ b/docs/snippets/react/button-story-with-parameters.js.mdx
@@ -1,11 +1,15 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
-import Button from './Button';
+import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
//👇 Creates specific parameters for the story
diff --git a/docs/snippets/react/button-story-with-parameters.ts.mdx b/docs/snippets/react/button-story-with-parameters.ts.mdx
index 71c2a7bfe06e..bf1efee5237b 100644
--- a/docs/snippets/react/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/react/button-story-with-parameters.ts.mdx
@@ -1,13 +1,17 @@
```js
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
import React from 'react';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
-import { Meta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
//👇 Creates specific parameters for the story
@@ -19,5 +23,5 @@ export default {
],
}
},
-} as Meta;
+} as ComponentMeta;
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-sample.js.mdx b/docs/snippets/react/button-story-with-sample.js.mdx
index 512965eab21d..77accffcd239 100644
--- a/docs/snippets/react/button-story-with-sample.js.mdx
+++ b/docs/snippets/react/button-story-with-sample.js.mdx
@@ -1,12 +1,16 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
import { Button } from './Button';
export default {
- title: 'Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
};
diff --git a/docs/snippets/react/button-story.js.mdx b/docs/snippets/react/button-story.js.mdx
index c2dd5b5885d6..4942dabf0aa9 100644
--- a/docs/snippets/react/button-story.js.mdx
+++ b/docs/snippets/react/button-story.js.mdx
@@ -1,14 +1,18 @@
```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
import React from 'react';
import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
- title: 'Components/Button',
-}
+};
export const Primary = () => ;
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story.mdx.mdx b/docs/snippets/react/button-story.mdx.mdx
index 746ecccc37eb..64d5bf0c541f 100644
--- a/docs/snippets/react/button-story.mdx.mdx
+++ b/docs/snippets/react/button-story.mdx.mdx
@@ -1,11 +1,11 @@
```md
-
+
import { Meta, Story } from '@storybook/addon-docs';
import { Button } from './Button';
-
+
# Button
diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx
index d6026e9d2c0d..50a95e304e45 100644
--- a/docs/snippets/react/button-story.ts.mdx
+++ b/docs/snippets/react/button-story.ts.mdx
@@ -1,16 +1,20 @@
```ts
-// Button.stories.ts | Button.stories.tsx
+// Button.stories.ts|tsx
-import React from 'react'
+import React from 'react';
-import { Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
- title: 'Components/Button',
-} as Meta;
+} as ComponentMeta;
-export const Primary: React.VFC<{}> = () => ;
+export const Primary: ComponentStory = () => ;
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index 0a4f6ea112a2..a55ac3a4bc24 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -1,14 +1,23 @@
```js
-// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx
+// Button.stories.js|ts|jsx|tsx
import React, { useState } from 'react';
import { Button } from './Button';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
+
/*
-* Example Button story with React Hooks.
-* See note below related to this example.
-*/
+ * Example Button story with React Hooks.
+ * See note below related to this example.
+ */
export const Primary = () => {
// Sets the hooks for both the label and primary props
const [value, setValue] = useState('Secondary');
diff --git a/docs/snippets/react/button-test.js.mdx b/docs/snippets/react/button-test.js.mdx
deleted file mode 100644
index 40b8c93004e5..000000000000
--- a/docs/snippets/react/button-test.js.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-```js
-// Button.test.js
-
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-
-import '@testing-library/jest-dom/extend-expect';
-
-//👇 Imports a specific story for the test
-import { Primary } from './Button.stories';
-
-it('renders the button in the primary state', () => {
- render(;
+
+export const allCheckboxes: ComponentStory = () => (
+
+);
+```
\ No newline at end of file
diff --git a/docs/snippets/react/checkbox-story-starter-example.mdx.mdx b/docs/snippets/react/checkbox-story-starter-example.mdx.mdx
index 08630bffdbe4..e87c1b9ed624 100644
--- a/docs/snippets/react/checkbox-story-starter-example.mdx.mdx
+++ b/docs/snippets/react/checkbox-story-starter-example.mdx.mdx
@@ -1,7 +1,7 @@
```md
-
+
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Checkbox } from './Checkbox';
@@ -11,7 +11,7 @@ import { Checkbox } from './Checkbox';
With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
-
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/checkbox-story.mdx.mdx b/docs/snippets/react/checkbox-story.mdx.mdx
index 00e2ebf53491..2621dc968d12 100644
--- a/docs/snippets/react/checkbox-story.mdx.mdx
+++ b/docs/snippets/react/checkbox-story.mdx.mdx
@@ -1,45 +1,45 @@
```md
-
+
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Checkbox } from './Checkbox';
+export const Template = (args) =>
- {Template.bind({})}
-
-
+ }}>
+ {Template.bind({})}
+
+
- {Template.bind({})}
-
+ }}>
+ {Template.bind({})}
+
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx
index 417dd18f0e04..870ce8bdd85d 100644
--- a/docs/snippets/react/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx
@@ -1,23 +1,22 @@
```js
-// YourComponent.stories.js | YourComponent.stories.jsx
+// YourComponent.stories.js|jsx
import React from 'react';
import { YourComponent } from './your-component';
-//👇 Some function to demonstrate the behavior
-const someFunction = (valuePropertyA, valuePropertyB) => {
- // Makes some computations and returns something
-};
-
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'YourComponent',
component: YourComponent,
- title: 'A complex case with a function',
//👇 Creates specific argTypes with options
argTypes: {
propertyA: {
options: ['Item One', 'Item Two', 'Item Three'],
- control: { type: 'select' } // Automatically inferred when 'options' is defined
+ control: { type: 'select' }, // Automatically inferred when 'options' is defined
},
propertyB: {
options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
@@ -25,10 +24,21 @@ export default {
},
};
+//👇 Some function to demonstrate the behavior
+const someFunction = (valuePropertyA, valuePropertyB) => {
+ // Makes some computations and returns something
+};
+
const Template = ({ propertyA, propertyB, ...rest }) => {
//👇 Assigns the function result to a variable
const someFunctionResult = someFunction(propertyA, propertyB);
return ;
-const Template: Story = ({ propertyA, propertyB, ...rest }) => {
+const Template: ComponentStory = ({ propertyA, propertyB, ...rest }) => {
//👇 Assigns the result from the function to a variable
const someFunctionResult = someFunction(propertyA, propertyB);
return
+
{Template.bind({})}
-
-```
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-cdn.js.mdx b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
index b6a12b5e57d6..1343f1e1f692 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
@@ -1,13 +1,15 @@
```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx
import React from 'react';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'img',
};
-export const withAnImage = () => (
- 
-);
+export const WithAnImage = () => ;
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx
index 7d16f24833f3..c2be3438add0 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.mdx.mdx
@@ -3,9 +3,12 @@
import { Meta, Story } from '@storybook/addon-docs';
-
+import { MyComponent } from './MyComponent';
-
-
+
+
+
+ }
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
new file mode 100644
index 000000000000..902c61d9baca
--- /dev/null
+++ b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { Meta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'img',
+} as Meta;
+
+export const WithAnImage = () => ;
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-with-import.js.mdx b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
index 5f98c47ee1f4..2e0e9672a329 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
@@ -1,11 +1,15 @@
```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx
import React from 'react';
import imageFile from './static/image.png';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'img',
};
@@ -14,5 +18,5 @@ const image = {
alt: 'my image',
};
-export const withAnImage = () => 
;
+export const WithAnImage = () => ;
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-with-import.mdx.mdx b/docs/snippets/react/component-story-static-asset-with-import.mdx.mdx
index 07a0ed55fa8d..9f154ad6659f 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.mdx.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.mdx.mdx
@@ -12,7 +12,7 @@ export const image = {
alt: 'my image',
};
-
+
;
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
new file mode 100644
index 000000000000..4d5665e7cf05
--- /dev/null
+++ b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import imageFile from './static/image.png';
+
+import { Meta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'img',
+} as Meta;
+
+const image = {
+ src: imageFile,
+ alt: 'my image',
+};
+
+export const WithAnImage = () => ;
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-without-import.js.mdx b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
index 712932573c55..1c9cfe4fe771 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
@@ -1,14 +1,16 @@
```js
-// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
+// MyComponent.stories.js|jsx
import React from 'react';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'img',
};
// Assume image.png is located in the "public" directory.
-export const withAnImage = () => (
- 
-);
+export const WithAnImage = () => ;
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/react/component-story-static-asset-without-import.mdx.mdx
index 44e6ecf967b1..83d7bc71268f 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.mdx.mdx
@@ -3,8 +3,15 @@
import { Meta, Story } from '@storybook/addon-docs';
+import { MyComponent } from './MyComponent';
+
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+
diff --git a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
new file mode 100644
index 000000000000..4f47a7c9718d
--- /dev/null
+++ b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import imageFile from './static/image.png';
+
+import { Meta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'img',
+} as Meta;
+
+const image = {
+ src: imageFile,
+ alt: 'my image',
+};
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = () => ;
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-accessibility.js.mdx b/docs/snippets/react/component-story-with-accessibility.js.mdx
new file mode 100644
index 000000000000..6f46af0ede4f
--- /dev/null
+++ b/docs/snippets/react/component-story-with-accessibility.js.mdx
@@ -0,0 +1,34 @@
+```js
+// Button.stories.js|jsx
+
+import React from 'react';
+
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading to learn how to generate automatic titles
+ */
+ title: 'Accessibility testing',
+ component: Button,
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+};
+
+const Template = (args) => ;
+
+// This is an accessible story
+export const Accessible = Template.bind({});
+Accessible.args = {
+ primary: false,
+ label: 'Button',
+};
+
+// This is not
+export const Inaccessible = Template.bind({});
+Inaccessible.args = {
+ ...Accessible.args,
+ backgroundColor: 'red',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-accessibility.mdx.mdx b/docs/snippets/react/component-story-with-accessibility.mdx.mdx
new file mode 100644
index 000000000000..280fe7353e17
--- /dev/null
+++ b/docs/snippets/react/component-story-with-accessibility.mdx.mdx
@@ -0,0 +1,43 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { Button } from './Button';
+
+
+
+export const Template = (args) => ;
+
+## This is an accessible story
+
+
+ {Template.bind({})}
+
+
+## This is not
+
+
+ {Template.bind({})}
+
+```
diff --git a/docs/snippets/react/component-story-with-accessibility.ts.mdx b/docs/snippets/react/component-story-with-accessibility.ts.mdx
new file mode 100644
index 000000000000..84fd419b4457
--- /dev/null
+++ b/docs/snippets/react/component-story-with-accessibility.ts.mdx
@@ -0,0 +1,37 @@
+```ts
+// Button.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading to learn how to generate automatic titles
+ */
+ title: 'Accessibility testing',
+ component: Button,
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+} as ComponentMeta;
+
+
+const Template: ComponentStory = (args) => ;
+
+// This is an accessible story
+export const Accessible = Template.bind({});
+Accessible.args = {
+ primary: false,
+ label: 'Button',
+};
+
+// This is not
+export const Inaccessible = Template.bind({});
+Inaccessible.args = {
+ ...Accessible.args,
+ backgroundColor: 'red',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-styled-variables-object-notation.js.mdx b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
index ee08893b9fb2..3a2ea73ecc8f 100644
--- a/docs/snippets/react/component-styled-variables-object-notation.js.mdx
+++ b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
@@ -1,5 +1,5 @@
```js
-// MyComponent.js | MyComponent.jsx
+// MyComponent.js|jsx
const Component = styled.div(({ theme }) => ({
background: theme.background.app,
diff --git a/docs/snippets/react/component-styled-variables-template-literals.js.mdx b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
index f74138241ec1..22591ab54d8d 100644
--- a/docs/snippets/react/component-styled-variables-template-literals.js.mdx
+++ b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
@@ -1,5 +1,5 @@
```js
-// MyComponent.js | MyComponent.jsx
+// MyComponent.js|jsx
const Component = styled.div`
background: `${props => props.theme.background.app}`
diff --git a/docs/snippets/react/component-test-with-testing-library.js.mdx b/docs/snippets/react/component-test-with-testing-library.js.mdx
new file mode 100644
index 000000000000..d2fba62bea1b
--- /dev/null
+++ b/docs/snippets/react/component-test-with-testing-library.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Form.test.js
+
+import { render, fireEvent } from '@testing-library/react';
+
+import { InvalidForm } from './LoginForm.stories'; //👈 Our stories imported here.
+
+it('Checks if the form is valid', () => {
+ const { getByTestId, getByText } = render(
;
diff --git a/docs/snippets/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx
index 4f0ce279881c..78f814a4add9 100644
--- a/docs/snippets/react/list-story-expanded.ts.mdx
+++ b/docs/snippets/react/list-story-expanded.ts.mdx
@@ -1,27 +1,31 @@
```ts
-// List.stories.ts | List.stories.tsx
+// List.stories.ts|tsx
import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { List, ListProps } from './List';
-import { ListItem, ListItemProps } from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
export default {
- component: List,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'List',
-} as Meta;
+ component: List,
+} as ComponentMeta;
-export const Empty: Story = (args) =>
;
+export const Empty: ComponentStory = (args) =>
;
-export const OneItem = (args) => (
+export const OneItem: ComponentStory = (args) => (
);
-export const ManyItems = (args) => (
+export const ManyItems: ComponentStory = (args) => (
;
+
+export const ManyItems: ComponentStory = (args) => (
;
//👇 Always an empty list, not super interesting
-const Template : Story = (args) =>
;
+const Template: ComponentStory = (args) =>
;
```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx
index e5e199487e50..c43e38e571b2 100644
--- a/docs/snippets/react/list-story-template.js.mdx
+++ b/docs/snippets/react/list-story-template.js.mdx
@@ -1,14 +1,23 @@
```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
import React from 'react';
-import List from './List';
-import ListItem from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+};
+
const ListTemplate = ({ items, ...args }) => (
{items.map((item) => (
@@ -21,5 +30,11 @@ export const Empty = ListTemplate.bind({});
Empty.args = { items: [] };
export const OneItem = ListTemplate.bind({});
-OneItem.args = { items: [Unchecked.args] };
+OneItem.args = {
+ items: [
+ {
+ ...Unchecked.args,
+ },
+ ],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index 9e0f4aa2ec2d..b8b8e736411d 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -1,25 +1,44 @@
```js
-// List.stories.ts | List.stories.tsx
+// List.stories.ts|tsx
import React from 'react';
-import { List, ListProps } from './List';
-import { ListItem, ListItemProps } from './ListItem';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
-const ListTemplate = ({ items, ...args }) => (
-
- {items.map((item) => (
- ;
+
+const ListTemplate: ComponentStory = (args) => {
+ const { items } = args;
+ return (
+
+ {items.map((item) => (
+
-);
+)};
export const Empty = ListTemplate.bind({});
Empty.args = { items: [] };
export const OneItem = ListTemplate.bind({});
-OneItem.args = { items: [Unchecked.args] };
+OneItem.args = {
+ items: [
+ {
+ ...Unchecked.args,
+ },
+ ],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
index 9ae4ae4ce146..d0669a6bd8b2 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -1,13 +1,22 @@
```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
import React from 'react';
-import List from './List';
+import { List } from './List';
//👇 Instead of importing ListItem, we import the stories
import { Unchecked } from './ListItem.stories';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+};
+
export const OneItem = (args) => (
;
+
+const OneItem: ComponentStory = (args) => (
diff --git a/docs/snippets/react/list-story-with-subcomponents.js.mdx b/docs/snippets/react/list-story-with-subcomponents.js.mdx
index dc9f9a491761..e81a24462c7d 100644
--- a/docs/snippets/react/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.js.mdx
@@ -1,15 +1,19 @@
```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
import React from 'react';
-import List from './List';
-import ListItem from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
component: List,
subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
- title: 'List',
};
export const Empty = (args) =>
;
diff --git a/docs/snippets/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
index 4ceb909024b5..83ead074b96d 100644
--- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
@@ -1,22 +1,27 @@
```ts
-// List.stories.ts | List.stories.tsx
+// List.stories.ts|tsx
import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { List, ListProps } from './List';
-import { ListItem, ListItemProps } from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
component: List,
subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
title: 'List',
-} as Meta;
+} as ComponentMeta;
-export const Empty: Story = (args) =>
;
+const Empty: ComponentStory = (args) =>
;
-export const OneItem = (args) => (
+const OneItem: ComponentStory = (args) =>(
diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
index c92ece6d0191..0a56226a15eb 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
@@ -1,13 +1,22 @@
```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
import React from 'react';
-import List from './List';
+import { List } from './List';
//👇 Instead of importing ListItem, we import the stories
import { Unchecked } from './ListItem.stories';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+};
+
const Template = (args) =>
;
export const OneItem = Template.bind({});
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index 628e57ec1ebd..f77d847ad0dc 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -1,14 +1,25 @@
```ts
-// List.stories.ts | List.stories.tsx
+// List.stories.ts|tsx
import React from 'react';
-import { List, ListProps } from './List';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { List } from './List';
//👇 Instead of importing ListItem, we import the stories
import { Unchecked } from './ListItem.stories';
-const Template: Story = (args) =>
;
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) =>
;
export const OneItem = Template.bind({});
OneItem.args = {
diff --git a/docs/snippets/react/loader-story.js.mdx b/docs/snippets/react/loader-story.js.mdx
index d901a012173a..d048c0f36bb4 100644
--- a/docs/snippets/react/loader-story.js.mdx
+++ b/docs/snippets/react/loader-story.js.mdx
@@ -1,5 +1,5 @@
```js
-// TodoItem.stories.js | TodoItem.stories.jsx | TodoItem.stories.ts | TodoItem.stories.tsx
+// TodoItem.stories.js|jsx|ts|tsx
import React from 'react';
@@ -8,14 +8,18 @@ import fetch from 'node-fetch';
import { TodoItem } from './TodoItem';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Examples/Loader'
component: TodoItem,
- title: 'Examples/Loader',
};
export const Primary = (args, { loaded: { todo } }) =>
+ ;
+
+const Template: ComponentStory = (args) =>
);
};
-
-export default AppProfilePage;
```
\ No newline at end of file
diff --git a/docs/snippets/react/mock-context-container.js.mdx b/docs/snippets/react/mock-context-container.js.mdx
index 1f2b3e0ee85f..ca752289d6d8 100644
--- a/docs/snippets/react/mock-context-container.js.mdx
+++ b/docs/snippets/react/mock-context-container.js.mdx
@@ -1,16 +1,21 @@
```js
-// ProfilePage.stories.js | ProfilePage.stories.jsx
+// ProfilePage.stories.js|jsx
import React from 'react';
-import ProfilePage from './ProfilePage';
-import UserPosts from './UserPosts';
+import { ProfilePage } from './ProfilePage';
+import { UserPosts } from './UserPosts';
//👇 Imports a specific story from a story file
import { normal as UserFriendsNormal } from './UserFriends.stories';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'ProfilePage',
+ component: ProfilePage,
};
const ProfilePageProps = {
diff --git a/docs/snippets/react/mock-context-in-use.js.mdx b/docs/snippets/react/mock-context-in-use.js.mdx
index 940b17d88539..a2b9fb8bbf5c 100644
--- a/docs/snippets/react/mock-context-in-use.js.mdx
+++ b/docs/snippets/react/mock-context-in-use.js.mdx
@@ -1,11 +1,11 @@
```js
-// ProfilePage.js | ProfilePage.jsx
+// ProfilePage.js|jsx
import { useContext } from 'react';
import ProfilePageContext from './ProfilePageContext';
-const ProfilePage = ({ name, userId }) => {
+export const ProfilePage = ({ name, userId }) => {
const { UserPostsContainer, UserFriendsContainer } = useContext(ProfilePageContext);
return (
@@ -16,6 +16,4 @@ const ProfilePage = ({ name, userId }) => {
);
};
-
-export default ProfilePage;
```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.js.mdx b/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
new file mode 100644
index 000000000000..129856ff200d
--- /dev/null
+++ b/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
@@ -0,0 +1,32 @@
+```js
+// MyComponent.stories.js|jsx
+
+import React from 'react';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'QueryMethods',
+ component: MyComponent,
+};
+
+const Template = (args) => {
+ // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+ }}>
+ {Template.bind({})}
+
+
+ {
+ // The play function interacts with the component and looks for the text
+ await screen.findByText('example string');
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
new file mode 100644
index 000000000000..753b76843dce
--- /dev/null
+++ b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
@@ -0,0 +1,34 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'QueryMethods',
+ component: MyComponent,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+const Template: ComponentStory = (args) => {
+ const Input = screen.getByLabelText('Username', {
+ selector: 'input',
+ });
+
+ await userEvent.type(Input, 'WrongInput', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+
+ await userEvent.click(Submit);
+
+ await waitFor(async () => {
+ await userEvent.hover(screen.getByTestId('error'));
+ });
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
new file mode 100644
index 000000000000..2ace28d7a369
--- /dev/null
+++ b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { screen, userEvent, waitFor } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithAsync',
+ component: MyComponent,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => {
+ // Assigns canvas to the component root element
+ const canvas = within(canvasElement);
+
+ // Starts querying from the component's root element
+ await userEvent.type(canvas.getByTestId('example-element'), 'something');
+ await userEvent.click(canvas.getByRole('another-element'));
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
new file mode 100644
index 000000000000..30b939abf272
--- /dev/null
+++ b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
@@ -0,0 +1,32 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithCanvasElement',
+ component: MyComponent,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => {
+ // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button'));
+ }}>
+ {Template.bind({})}
+
+
+{
+ // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await fireEvent.click(screen.getByTestId('data-testid'));
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
new file mode 100644
index 000000000000..876c1cc32015
--- /dev/null
+++ b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
@@ -0,0 +1,34 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ClickExamples',
+ component: MyComponent,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => {
+ const exampleElement= screen.getByLabelText('example-element');
+
+ // The delay option set the ammount of milliseconds between characters being typed
+ await userEvent.type(exampleElement, 'random string', {
+ delay: 100,
+ });
+
+ const AnotherExampleElement= screen.getByLabelText('another-example-element');
+ await userEvent.type(AnotherExampleElement, 'another random string', {
+ delay: 100,
+ });
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
new file mode 100644
index 000000000000..93ce662baabd
--- /dev/null
+++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
@@ -0,0 +1,37 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithDelay',
+ component: MyComponent,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => {
+ const select = screen.getByRole('listbox');
+
+ await userEvent.selectOptions(select, ['One Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Another Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Yet another item']);
+
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
new file mode 100644
index 000000000000..2bc79c8dd1fa
--- /dev/null
+++ b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
@@ -0,0 +1,40 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { userEvent, screen } from '@storybook/testing-library';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithSelectEvent',
+ component: MyComponent,
+} as ComponentMeta;
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const Template: ComponentStory = (args) => ;
+
+export const Basic: ComponentStory = () => = () =>
-
+
```
diff --git a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
new file mode 100644
index 000000000000..8ab4c0a95185
--- /dev/null
+++ b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+ parameters: {
+ //👇 The viewports object from the Essentials addon
+ viewport: {
+ //👇 The viewports you want to use
+ viewports: INITIAL_VIEWPORTS,
+ //👇 Your own default viewport
+ defaultViewport: 'iphone6',
+ },
+ },
+} as ComponentMeta;
+
+export const MyStory: ComponentStory = () => ;
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+const Template: ComponentStory = (args) => ;
-const Template: Story = (args) => = (args) =>
);
-export const CustomFooter = Template.bind({});
+export const CustomFooter= Template.bind({});
CustomFooter.args = {
footer: 'Built with Storybook',
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-slots.mdx.mdx b/docs/snippets/react/page-story-slots.mdx.mdx
index c436a2de70fb..fc0f0220bb3e 100644
--- a/docs/snippets/react/page-story-slots.mdx.mdx
+++ b/docs/snippets/react/page-story-slots.mdx.mdx
@@ -3,19 +3,20 @@
import { Meta, Story } from '@storybook/addon-docs';
-import Page from './Page';
+import { Page } from './Page';
+
export const Template = (args) => (
);
-
{Template.bind({})}
diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx
index a1c5ab359331..46feb98468c5 100644
--- a/docs/snippets/react/page-story-slots.ts.mdx
+++ b/docs/snippets/react/page-story-slots.ts.mdx
@@ -1,18 +1,22 @@
```ts
-// Page.stories.ts | Page.stories.tsx
+// Page.stories.ts|tsx
import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Page, PageProps } from './Page';
+import { Page } from './Page';
export default {
- component: Page,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Page',
-} as Meta;
+ component: Page,
+} as ComponentMeta;
-const Template: Story = (args) => (
+const Template: ComponentStory = (args) => (
@@ -22,4 +26,4 @@ export const CustomFooter = Template.bind({});
CustomFooter.args = {
footer: 'Built with Storybook',
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-with-args-composition.js.mdx b/docs/snippets/react/page-story-with-args-composition.js.mdx
index 3c040ad80784..f111fbf2d215 100644
--- a/docs/snippets/react/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.js.mdx
@@ -1,18 +1,22 @@
```js
-// YourPage.stories.js | YourPage.stories.jsx
+// YourPage.stories.js|jsx
import React from 'react';
-import DocumentScreen from './YourPage';
+import { DocumentScreen } from './YourPage';
//👇 Imports the required stories
-import PageLayout from './PageLayout.stories';
-import DocumentHeader from './DocumentHeader.stories';
-import DocumentList from './DocumentList.stories';
+import * as PageLayout from './PageLayout.stories';
+import * as DocumentHeader from './DocumentHeader.stories';
+import * as DocumentList from './DocumentList.stories';
export default {
- component: DocumentScreen,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'DocumentScreen',
+ component: DocumentScreen,
};
const Template = (args) => ;
+
-const Template: Story = (args) => = (args) => ;
-const Template: Story = (args) => = (args) => {
+ const emailInput = screen.getByLabelText('email', {
+ selector: 'input',
+ });
+
+ await userEvent.type(emailInput, 'example-email@email.com', {
+ delay: 100,
+ });
+
+ const passwordInput = screen.getByLabelText('password', {
+ selector: 'input',
+ });
+
+ await userEvent.type(passwordInput, 'ExamplePassword', {
+ delay: 100,
+ });
+ // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const submitButton = screen.getByRole('button');
+
+ await userEvent.click(submitButton);
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/register-component-with-play-function.ts.mdx b/docs/snippets/react/register-component-with-play-function.ts.mdx
new file mode 100644
index 000000000000..31bdad97cb54
--- /dev/null
+++ b/docs/snippets/react/register-component-with-play-function.ts.mdx
@@ -0,0 +1,45 @@
+```ts
+// RegistrationForm.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import { RegistrationForm } from './RegistrationForm';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'RegistrationForm',
+ component: RegistrationForm,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) =>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
new file mode 100644
index 000000000000..113f6fd5127a
--- /dev/null
+++ b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
@@ -0,0 +1,28 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Disable a11y addon',
+ component: MyComponent,
+} as ComponentMeta;
+
+const Template: ComponentStory = () =>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
new file mode 100644
index 000000000000..9ae7ea00ea79
--- /dev/null
+++ b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
@@ -0,0 +1,43 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Configure a11y addon',
+ component: MyComponent,
+} as ComponentMeta;
+
+const Template: ComponentStory = () =>
- {data.map(row => ({row.map(item => {item} } ))}
+import React from 'react';
+
+import { Table } from './Table';
+import { TD } from './TableDataCell';
+import { TR } from './TableRow';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Custom Table',
+ component: Table,
+};
+
+const TableStory = ({ data, ...args}) => (
+
+ {data.map((row) => (
+
+ {row.map((item) => (
+ {item}
+ ))}
+
+ ))}
-)
+);
export const Numeric = TableStory.bind({});
-
Numeric.args = {
//👇 This arg is for the story component
data: [[1, 2, 3], [4, 5, 6]],
//👇 The remaining args get passed to the `Table` component
size: 'large',
-}
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx
index c180808a93e9..f656ff9b88b6 100644
--- a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx
+++ b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx
@@ -1,9 +1,13 @@
```md
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
-import Table from './Table';
+import { Table } from './Table';
+import { TD } from './TableDataCell';
+import { TR } from './TableRow';
+
+
export const TableStory = ({ data, ...args }) => (
@@ -16,8 +20,7 @@ export const TableStory = ({ data, ...args }) => (
args={{
data: [[1, 2, 3], [4, 5, 6]],
size: 'large',
- }}
->
+ }}>
{TableStory.bind({})}
```
\ No newline at end of file
diff --git a/docs/snippets/react/your-component-with-decorator.js.mdx b/docs/snippets/react/your-component-with-decorator.js.mdx
index ceaf12500515..9b2d3f20058b 100644
--- a/docs/snippets/react/your-component-with-decorator.js.mdx
+++ b/docs/snippets/react/your-component-with-decorator.js.mdx
@@ -1,14 +1,21 @@
```js
-// YourComponent.stories.js | YourComponent.stories.jsx
+// YourComponent.stories.js|jsx
+
+import { YourComponent } from './YourComponent';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'YourComponent',
component: YourComponent,
decorators: [
(Story) => (
- ;
```
\ No newline at end of file
diff --git a/docs/snippets/react/your-component-with-decorator.ts.mdx b/docs/snippets/react/your-component-with-decorator.ts.mdx
index c7cc9e780ae8..dc89e46e4c69 100644
--- a/docs/snippets/react/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/react/your-component-with-decorator.ts.mdx
@@ -1,9 +1,16 @@
```ts
-// YourComponent.stories.ts | YourComponent.stories.tsx
+// YourComponent.stories.ts|tsx
-import { Meta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
+
+import { YourComponent } from './YourComponent';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'YourComponent',
component: YourComponent,
decorators: [
(Story) => (
@@ -12,5 +19,5 @@ export default {
),
],
-} as Meta;
+} as ComponentMeta;
```
\ No newline at end of file
diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx
index 8c226cbd9a1c..10c286edc0fb 100644
--- a/docs/snippets/react/your-component.js.mdx
+++ b/docs/snippets/react/your-component.js.mdx
@@ -1,12 +1,14 @@
```js
-// YourComponent.stories.js | YourComponent.stories.jsx
-
-import React from 'react';
+// YourComponent.stories.js|jsx
import { YourComponent } from './YourComponent';
//👇 This default export determines where your story goes in the story list
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'YourComponent',
component: YourComponent,
};
@@ -14,9 +16,9 @@ export default {
//👇 We create a “template” of how args map to rendering
const Template = (args) => ;
//👇 We create a “template” of how args map to rendering
-const Template: Story> = (args) => = (args) =>
+
{Template.bind({})}
We can drop it in a `Canvas` to get a code snippet:
@@ -39,22 +43,39 @@ gets rendered as a group but defines individual stories
with unique URLs, which is great for review and testing.
diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx
index 8d5237a31a1a..78ebad33838c 100644
--- a/docs/snippets/svelte/button-group-story.js.mdx
+++ b/docs/snippets/svelte/button-group-story.js.mdx
@@ -2,16 +2,23 @@
// ButtonGroup.stories.js
import ButtonGroup from '../ButtonGroup.svelte';
+
+//👇 Imports the Button stories
import * as ButtonStories from './Button.stories';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'ButtonGroup',
component: ButtonGroup,
-}
+};
const Template = (args) => ({
+ Component: ButtonGroup,
props: args,
- });
+});
export const Pair = Template.bind({});
Pair.args = {
diff --git a/docs/snippets/svelte/button-story-click-handler.js.mdx b/docs/snippets/svelte/button-story-click-handler.js.mdx
index 17da89288614..822519e0f529 100644
--- a/docs/snippets/svelte/button-story-click-handler.js.mdx
+++ b/docs/snippets/svelte/button-story-click-handler.js.mdx
@@ -6,18 +6,21 @@ import Button from './Button.svelte';
import { action } from '@storybook/addon-actions';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
};
-export const Text = () =>({
- //👇 This is the same component as the one used in the default export and it's optional
+export const Text = () => ({
Component: Button,
props:{
label: 'Hello',
},
- on:{
- onClick={action('clicked')}
- }
+ on: {
+ click: action('clicked'),
+ },
});
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-component-args-primary.js.mdx b/docs/snippets/svelte/button-story-component-args-primary.js.mdx
index 6516efa57dac..cf7b5b6e0856 100644
--- a/docs/snippets/svelte/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/svelte/button-story-component-args-primary.js.mdx
@@ -4,6 +4,10 @@
import Button from './Button.svelte';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
//👇 Creates specific argTypes
diff --git a/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx b/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx
index df63061c90d1..8dcda41aff7a 100644
--- a/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx
+++ b/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx
@@ -6,6 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
+
MarginDecorator],
+ decorators: [() => MarginDecorator],
};
-// Your templates and stories here.
-// Don't forget to use the component you're testing and not the MarginDecorator component
+// Your stories here.
+// Don't forget to use the component you're testing and not the MarginDecorator component
```
```html
- MarginDecorator]}>
+ {Template.bind({})}
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-default-docs-code.js.mdx b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
index 34ad96da9c3e..b2fec6cfe5f1 100644
--- a/docs/snippets/svelte/button-story-default-docs-code.js.mdx
+++ b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
@@ -4,6 +4,10 @@
import Button from './Button.svelte';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
//👇 Creates specific argTypes
@@ -31,7 +35,6 @@ export const ExampleStory = (args) => {
},
};
};
-
ExampleStory.args = {
primary: true,
size: 'small',
diff --git a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx b/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
index 734b9c53c9b7..410d3fc6b0c1 100644
--- a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
+++ b/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
@@ -21,6 +21,7 @@ export const someFunction = (someValue) => {
return `i am a ${someValue}`;
};
+
({
Component: Button,
props: {
- primary: true,
- label: 'Button',
- },
+ primary: true,
+ label: 'Button',
+ },
});
Primary.storyName = 'I am the primary';
diff --git a/docs/snippets/svelte/button-story-using-args.js.mdx b/docs/snippets/svelte/button-story-using-args.js.mdx
index 0062e54848eb..8aa730112e10 100644
--- a/docs/snippets/svelte/button-story-using-args.js.mdx
+++ b/docs/snippets/svelte/button-story-using-args.js.mdx
@@ -1,6 +1,17 @@
```js
// Button.stories.js
+import Button from './Button.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+};
+
//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
Component: Button,
diff --git a/docs/snippets/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
index 54bc9576dea7..876b38d4aae5 100644
--- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
@@ -4,6 +4,10 @@
import Button from './Button.svelte';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
//👇 Creates specific parameters for the story
parameters: {
@@ -13,8 +17,7 @@ export default {
},
};
-export const Basic = (args) => ({
+export const Basic = () => ({
Component: Button,
- props: args,
});
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx b/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx
index abd0f1d5f88e..2a8f80ceb074 100644
--- a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx
+++ b/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx
@@ -8,7 +8,7 @@
({ Component: Button, props: args });
+// 👇 We create a “template” of how args map to rendering
+const Template = (args)=>({
+ component: Button,
+ props: args,
+});
+//👇 Each story then reuses that template
export const Primary = Template.bind({});
-
Primary.args = {
primary: true,
label: 'Button',
diff --git a/docs/snippets/svelte/button-story-with-args.mdx.mdx b/docs/snippets/svelte/button-story-with-args.mdx.mdx
index 31a439535a29..cd26e64a3168 100644
--- a/docs/snippets/svelte/button-story-with-args.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-args.mdx.mdx
@@ -5,13 +5,16 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
-
+
+
+
export const Template = (args) => ({
Component: Button,
props: args,
});
+
+
+
+
+
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
import Button from './Button.svelte';
({
Component: Button,
diff --git a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
index 78b1dc8ec510..b9690ff2e4db 100644
--- a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
-
+
diff --git a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx b/docs/snippets/svelte/button-story-with-emojis.native-format.mdx
index d44721384085..f30d8290eab2 100644
--- a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx
+++ b/docs/snippets/svelte/button-story-with-emojis.native-format.mdx
@@ -5,7 +5,7 @@
import Button from './Button.svelte';
-
+
diff --git a/docs/snippets/svelte/button-story.js.mdx b/docs/snippets/svelte/button-story.js.mdx
index 1bfaec8c93c5..a79a36bf5398 100644
--- a/docs/snippets/svelte/button-story.js.mdx
+++ b/docs/snippets/svelte/button-story.js.mdx
@@ -4,9 +4,13 @@
import Button from './Button.svelte';
export default {
- title: 'Components/Button',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
component: Button,
-}
+};
export const Primary = () => ({
Component: Button,
@@ -15,4 +19,4 @@ export const Primary = () => ({
label: 'Button',
},
});
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-test.js.mdx b/docs/snippets/svelte/button-test.js.mdx
deleted file mode 100644
index c0b950ef100a..000000000000
--- a/docs/snippets/svelte/button-test.js.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-```js
-// Button.test.js
-
-import Button from './Button.svelte';
-
-import { render } from '@testing-library/svelte';
-
-import { Primary } from './Button.stories'; //👈 Our story imported here
-
-test('renders the button in the primary state', () => {
- //👇 Story's args used with our test
- const { container } = render(Button, {
- props: Primary.args,
- });
- expect(container.firstChild.children[0].classList.contains('storybook-button--primary')).toBe(true);
-});
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/checkbox-story.mdx.mdx b/docs/snippets/svelte/checkbox-story.mdx.mdx
index 6cd24dea2378..e3f325b59ac4 100644
--- a/docs/snippets/svelte/checkbox-story.mdx.mdx
+++ b/docs/snippets/svelte/checkbox-story.mdx.mdx
@@ -1,7 +1,7 @@
```md
-
+
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
import Checkbox from './Checkbox.svelte';
diff --git a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
index 2976968861e1..917f82f212d7 100644
--- a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
@@ -4,7 +4,11 @@
import YourComponent from './YourComponent.svelte';
export default {
- title: 'A complex case with a function',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'YourComponent',
component: YourComponent,
//👇 Creates specific argTypes
argTypes: {
@@ -36,4 +40,10 @@ const Template = (args) => {
},
};
};
+
+export const ExampleStory = Template.bind({});
+ExampleStory.args= {
+ propertyA: 'Item One',
+ propertyB: 'Another Item One',
+};
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx b/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx
index 8524e4d75f42..f5f51fc97166 100644
--- a/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx
+++ b/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx
@@ -15,7 +15,7 @@
+
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
+
+
export const Template = (args) => ({
Component: Button,
props: args,
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
index 2807cc04cdd8..0ac4fa2292d8 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
@@ -4,12 +4,15 @@
import MyComponent from './MyComponent.svelte';
export default {
- component: MyComponent,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'img',
+ component: MyComponent,
};
-// Assume image.png is located in the "public" directory.
-export const withAnImage = () => ({
+export const WithAnImage = () => ({
Component: MyComponent,
props: {
src: 'https://place-hold.it/350x150',
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
index 74073dadbd30..5358e00db8da 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
@@ -5,9 +5,10 @@ import { Meta, Story } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte';
-
+
-
+
{() => {
return {
Component: MyComponent,
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx
index ee24be7cc1af..964cc8ccb26a 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx
@@ -16,5 +16,5 @@
+
{() => {
return {
Component: MyComponent,
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
index 85b6e9ef80d8..ac464f27b845 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
@@ -4,16 +4,20 @@
import MyComponent from './MyComponent.svelte';
export default {
- component: MyComponent,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'img',
+ component: MyComponent,
};
// Assume image.png is located in the "public" directory.
-export const withAnImage = () => ({
+export const WithAnImage = () => ({
Component: MyComponent,
- props: {
- src: '/image.png',
- alt: 'my image',
- },
+ props: {
+ src: '/image.png',
+ alt: 'my image',
+ },
});
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
index 7c7c636e3607..8012053b0c52 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
@@ -1,11 +1,13 @@
```md
-
+
import { Meta, Story } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte0;
-
+
+
+
{() => {
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx
index 151700f21146..8e8af2a9e7c6 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx
@@ -13,8 +13,8 @@
/>
-
+ {Template.bind({})}
+
+
+## This is not
+
+
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-test-with-testing-library.js.mdx b/docs/snippets/svelte/component-test-with-testing-library.js.mdx
new file mode 100644
index 000000000000..f7e1702c3451
--- /dev/null
+++ b/docs/snippets/svelte/component-test-with-testing-library.js.mdx
@@ -0,0 +1,20 @@
+```js
+// Form.test.js
+
+import { render, fireEvent } from '@testing-library/svelte';
+
+import LoginForm from './LoginForm.svelte';
+
+import { InvalidForm } from './LoginForm.stories'; //👈 Our stories imported here.
+
+it('Checks if the form is valid', async () => {
+ const { getByTestId, getByText } = render(LoginForm, {
+ props: InvalidForm.args,
+ });
+
+ await fireEvent.click(getByText('Submit'));
+
+ const isFormValid = getByTestId('invalid-form');
+ expect(isFormValid).toBeInTheDocument();
+});
+```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
index 2005122bfe1e..ee5818cedfbf 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
@@ -3,13 +3,17 @@
import { graphql } from 'msw';
-import DocumentScreen from './DocumentScreen.svelte';
+import DocumentScreen from './YourPage.svelte';
import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'DocumentScreen',
component: DocumentScreen,
decorators: [() => MockGraphqlProvider],
- title: 'Mock GraphQL query with Storybook and MSW',
};
//👇The mocked data that will be used in the story
@@ -61,9 +65,8 @@ const TestData = {
],
};
-const PageTemplate = (args) => ({
+const PageTemplate = () => ({
Component: DocumentScreen,
- props: args,
});
export const MockedSuccess = PageTemplate.bind({});
@@ -89,4 +92,4 @@ MockedError.parameters = {
}),
],
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
index 953003799733..e828bb388f32 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
@@ -1,12 +1,17 @@
```js
// YourPage.stories.js
-import DocumentScreen from './DocumentScreen.svelte';
+import DocumentScreen from './YourPage.svelte';
import { rest } from 'msw';
+
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'DocumentScreen',
component: DocumentScreen,
- title: 'Mock Rest request with Storybook and MSW',
};
//👇The mocked data that will be used in the story
@@ -58,9 +63,8 @@ const TestData = {
],
};
-const PageTemplate = (args) => ({
+const PageTemplate = () => ({
Component: DocumentScreen,
- props: args,
});
export const MockedSuccess = PageTemplate.bind({});
@@ -80,4 +84,4 @@ MockedError.parameters = {
}),
],
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/form-story-component-with-play-function.js.mdx b/docs/snippets/svelte/form-story-component-with-play-function.js.mdx
new file mode 100644
index 000000000000..963c699318f6
--- /dev/null
+++ b/docs/snippets/svelte/form-story-component-with-play-function.js.mdx
@@ -0,0 +1,27 @@
+```js
+// Form.stories.js
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import LoginForm from './LoginForm.svelte';
+
+export default {
+ component: LoginForm,
+};
+
+export const FilledForm = {
+ play: async ({ args, canvasElement }) => {
+ // Starts querying the component from it's root element
+ const canvas = within(canvasElement);
+
+ await userEvent.type(canvas.getByTestId('email'), 'email');
+ await userEvent.type(canvas.getByTestId('password'), 'password');
+ // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+ },
+ render: (args) => {
+ Component: LoginForm,
+ props: args,
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.js.mdx b/docs/snippets/svelte/loader-story.js.mdx
index 7fc57ea8be6a..6cf31b630e77 100644
--- a/docs/snippets/svelte/loader-story.js.mdx
+++ b/docs/snippets/svelte/loader-story.js.mdx
@@ -6,8 +6,12 @@ import fetch from 'node-fetch';
import TodoItem from './TodoItem.svelte';
export default {
- component: TodoItem,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Examples/Loader',
+ component: TodoItem,
};
export const Primary = (args, { loaded: { todo } }) => ({
diff --git a/docs/snippets/svelte/loader-story.mdx.mdx b/docs/snippets/svelte/loader-story.mdx.mdx
index fcda10e867d9..b068479999f2 100644
--- a/docs/snippets/svelte/loader-story.mdx.mdx
+++ b/docs/snippets/svelte/loader-story.mdx.mdx
@@ -17,10 +17,9 @@ import fetch from 'node-fetch';
await fetch("https://jsonplaceholder.typicode.com/todos/1")
).json(),
}),
- ]}
->
+ ]}>
{(args, { loaded: { todo } }) => ({
- Component: SampleLoaderComponent,
+ Component: TodoItem,
props: {
...args,
todo,
diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx
new file mode 100644
index 000000000000..59b5ad4ee159
--- /dev/null
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -0,0 +1,39 @@
+```js
+// LoginForm.stories.js
+
+import { within, userEvent } from '@storybook/testing-library';
+
+import LoginForm from './LoginForm.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Form',
+ component: LoginForm,
+};
+
+const Template = (args) => ({
+ Component: LoginForm,
+ props: args,
+});
+
+export const EmptyForm = Template.bind({});
+
+export const FilledForm = Template.bind({});
+FilledForm.play = async ({ canvasElement }) => {
+ // Starts querying the component from it's root element
+ const canvas = within(canvasElement);
+
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
+ delay: 100,
+ });
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
new file mode 100644
index 000000000000..82a460a316c1
--- /dev/null
+++ b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
@@ -0,0 +1,42 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { within, userEvent } from '@storybook/testing-library';
+
+import LoginForm from './LoginForm.svelte';
+
+
+
+export const Template = (args) => ({
+ Component: LoginForm,
+ props: args,
+});
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
index e369a3f7bf93..338eadfbfe43 100644
--- a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
@@ -1,7 +1,11 @@
```md
-
+
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import Badge from './Badge.svelte';
+
+
export const Template = (args) => ({
Component: Badge,
diff --git a/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx b/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
new file mode 100644
index 000000000000..43e558f83e01
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'QueryMethods',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+export const ExampleWithRole = Template.bind({});
+ExampleWithRole.play = async () => {
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+};
+
+export const ExampleWithText = Template.bind({});
+ExampleWithText.play = async () => {
+ // The play function interacts with the component and looks for the text
+ await screen.findByText('example string');
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx
new file mode 100644
index 000000000000..d1514e09e9f8
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx
@@ -0,0 +1,34 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+ {
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+ }}>
+ {Template.bind({})}
+
+
+ {
+ // The play function interacts with the component and looks for the text
+ await screen.findByText('example string');
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-composition.js.mdx b/docs/snippets/svelte/my-component-play-function-composition.js.mdx
new file mode 100644
index 000000000000..f863d7ea4bf9
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-composition.js.mdx
@@ -0,0 +1,39 @@
+```js
+// MyComponent.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+export const FirstStory = Template.bind({});
+FirstStory.play = async () => {
+ userEvent.type(screen.getByTestId('an-element'), 'example-value');
+};
+
+export const SecondStory = Template.bind({});
+SecondStory.play = async () => {
+ await userEvent.type(screen.getByTestId('other-element'), 'another value');
+};
+
+export const CombinedStories = Template.bind({});
+CombinedStories.play = async () => {
+ // Runs the FirstStory and Second story play function before running this story's play function
+ await FirstStory.play();
+ await SecondStory.play();
+ await userEvent.type(screen.getByTestId('another-element'), 'random value');
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx b/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
new file mode 100644
index 000000000000..2697261ca5a7
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
@@ -0,0 +1,40 @@
+```js
+// MyComponent.stories.js
+
+import { screen, userEvent, waitFor } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithAsync',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+export const ExampleAsyncStory = Template.bind({});
+ExampleAsyncStory.play = async () => {
+ const Input = screen.getByLabelText('Username', {
+ selector: 'input',
+ });
+
+ await userEvent.type(Input, 'WrongInput', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+ await userEvent.click(Submit);
+
+ await waitFor(async () => {
+ await userEvent.hover(screen.getByTestId('error'));
+ });
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx
new file mode 100644
index 000000000000..07b8966a6a6f
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx
@@ -0,0 +1,38 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent, waitFor } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+ {
+ const Input = screen.getByLabelText('Username', {
+ selector: 'input',
+ });
+
+ await userEvent.type(Input, 'WrongInput', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+ await userEvent.click(Submit);
+
+ await waitFor(async () => {
+ await userEvent.hover(screen.getByTestId('error'));
+ });
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx b/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
new file mode 100644
index 000000000000..1f826ddccc8d
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
@@ -0,0 +1,31 @@
+```js
+// MyComponent.stories.js
+
+import { getByRole, userEvent, within } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithCanvasElement',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+export const ExampleStory = Template.bind({});
+ExampleStory.play = async ({ canvasElement }) => {
+ // Assigns canvas to the component root element
+ const canvas = within(canvasElement);
+
+ // Starts querying from the component's root element
+ await userEvent.type(canvas.getByTestId('example-element'), 'something');
+ await userEvent.click(canvas.getByRole('another-element'));
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx
new file mode 100644
index 000000000000..7fdbc2663300
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx
@@ -0,0 +1,29 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { getByRole, userEvent, within } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+ {
+ // Assigns canvas to the component root element
+ const canvas = within(canvasElement);
+
+ // Starts querying from the component's root element
+ await userEvent.type(canvas.getByTestId('example-element'), 'something');
+ await userEvent.click(canvas.getByRole('another-element'));
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
new file mode 100644
index 000000000000..e1e8931e911a
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js
+
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ClickExamples',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+export const ClickExample = Template.bind({});
+ClickExample.play = async () => {
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button'));
+};
+
+export const FireEventExample = Template.bind({});
+FireEventExample.play = async () => {
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await fireEvent.click(screen.getByTestId('data-testid'));
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx
new file mode 100644
index 000000000000..29618daa1302
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx
@@ -0,0 +1,34 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+ {
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button'));
+ }}>
+ {Template.bind({})}
+
+
+{
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await fireEvent.click(screen.getByTestId('data-testid'));
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
new file mode 100644
index 000000000000..2c84dca6544a
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
@@ -0,0 +1,36 @@
+```js
+// MyComponent.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithDelay',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+export const DelayedStory = Template.bind({});
+DelayedStory.play = async () => {
+ const exampleElement= screen.getByLabelText('example-element');
+
+ // The delay option set the ammount of milliseconds between characters being typed
+ await userEvent.type(exampleElement, 'random string', {
+ delay: 100,
+ });
+
+ const AnotherExampleElement= screen.getByLabelText('another-example-element');
+ await userEvent.type(AnotherExampleElement, 'another random string', {
+ delay: 100,
+ });
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
new file mode 100644
index 000000000000..79f0fee163c0
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
@@ -0,0 +1,34 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+ {
+ const exampleElement= screen.getByLabelText('example-element');
+
+ // The delay option set the ammount of milliseconds between characters being typed
+ await userEvent.type(exampleElement, 'random string', {
+ delay: 100,
+ });
+
+ const AnotherExampleElement= screen.getByLabelText('another-example-element');
+ await userEvent.type(AnotherExampleElement, 'another random string', {
+ delay: 100,
+ });
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
new file mode 100644
index 000000000000..f5bd1ffc6204
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
@@ -0,0 +1,39 @@
+```js
+// MyComponent.stories.js
+
+import { userEvent, screen } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithSelectEvent',
+ component: MyComponent,
+};
+
+// Function to emulate pausing between interactions
+function sleep(ms) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const Template = (args) => ({
+ Component: MyComponent,
+ props: args,
+});
+
+export const ExampleChangeEvent = Template.bind({});
+ExampleChangeEvent.play = async () => {
+ const select = screen.getByRole('listbox');
+
+ await userEvent.selectOptions(select, ['One Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Another Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Yet another item']);
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx
new file mode 100644
index 000000000000..6bae3642ade7
--- /dev/null
+++ b/docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx
@@ -0,0 +1,39 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { userEvent, screen } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+
+
+export const sleep(ms) => {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+export const Template= (args)=>({
+ Component: MyComponent,
+ props: args,
+});
+
+ {
+ const select = screen.getByRole('listbox');
+
+ await userEvent.selectOptions(select, ['One Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Another Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Yet another item']);
+
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
index 2fcae46737f7..a67422f4d357 100644
--- a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
@@ -4,6 +4,10 @@
import MyComponent from './MyComponent.svelte';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Path/To/MyComponent',
component: MyComponent,
};
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
index 986fec445fc4..3720e5ed3998 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
@@ -1,12 +1,16 @@
```js
// MyComponent.stories.js
-import MyComponent from './MyComponent.svelte';
-
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import MyComponent from './MyComponent.svelte';
+
export default {
- title: 'Stories',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
component: MyComponent,
parameters: {
//👇 The viewports object from the Essentials addon
@@ -19,11 +23,9 @@ export default {
},
};
-export const MyStory = (args) => ({
+export const MyStory = () => ({
Component: MyComponent,
- props: args,
});
-
MyStory.parameters = {
viewport: {
defaultViewport: 'iphonex',
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
index c1dfed148b60..afd1ced8915a 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
@@ -8,14 +8,14 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import MyComponent from './MyComponent.svelte';
+ component={MyComponent} />
{
const caption = getCaptionForLocale(locale);
return {
- component: SampleComponent,
+ component: MyComponent,
props: {
locale: caption,
},
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
index 8ba057256fd4..510c59460176 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
@@ -1,6 +1,17 @@
```js
// MyComponent.stories.js
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+};
+
const getCaptionForLocale = (locale) => {
switch (locale) {
case 'es':
@@ -19,7 +30,7 @@ const getCaptionForLocale = (locale) => {
export const StoryWithLocale = (args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {
- component: SampleComponent,
+ component: MyComponent,
props: {
locale: caption,
},
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
index 7cf31e8abb13..07fca01dd1c8 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
@@ -1,7 +1,11 @@
```md
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
+
+import MyComponent from './MyComponent.svelte';
+
+
export const getCaptionForLocale = (locale) => {
switch(locale) {
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
index ae0f67a682da..43779b2731ab 100644
--- a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
@@ -6,7 +6,11 @@ import MyComponent from './MyComponent.svelte';
import someData from './data.json';
export default {
- title: 'MyComponent',
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
component: MyComponent,
includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
@@ -15,17 +19,20 @@ export default {
export const simpleData = { foo: 1, bar: 'baz' };
export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
-export const SimpleStory = () => ({
- Component: MyComponent,
- props: {
- data: simpleData,
- },
-});
-export const ComplexStory = () => ({
+const Template = (args) => ({
Component: MyComponent,
- props: {
- data: complexData,
- },
+ props: args,
});
+
+
+export const SimpleStory = Template.bind({});
+SimpleStory.args = {
+ data: simpleData,
+};
+
+export const ComplexStory = Template.bind({});
+ComplexStory.args = {
+ data: complexData,
+};
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-with-env-variables.js.mdx b/docs/snippets/svelte/my-component-with-env-variables.js.mdx
index a64506f64745..6dfb2cfbe662 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.js.mdx
@@ -4,18 +4,22 @@
import MyComponent from './MyComponent.svelte';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
component: MyComponent,
- title: 'A story using environment variables inside a .env file',
};
+
const Template = (args) => ({
Component: MyComponent,
props: args,
});
-export const Default = Template.bind({});
-
-Default.args = {
- propertyA: process.env.STORYBOOK_DATA_KEY,
+export const ExampleStory = Template.bind({});
+ExampleStory.args = {
+ propertyA: process.env.STORYBOOK_DATA_KEY
};
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
index 2d5fd8bc9041..9dfc843bad60 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
@@ -1,11 +1,11 @@
```md
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte';
-
+
export const Template = (args) => ({
Component: MyComponent,
@@ -14,12 +14,10 @@ export const Template = (args) => ({
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx b/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx
index e5f3997e0590..7ded57ef2db3 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx
@@ -8,7 +8,7 @@
@@ -17,7 +17,7 @@
({
- Component: DocumentScreen,
+ component: DocumentScreen,
props: args,
});
diff --git a/docs/snippets/svelte/page-story.js.mdx b/docs/snippets/svelte/page-story.js.mdx
index e380f1b4854a..f6f88c50c350 100644
--- a/docs/snippets/svelte/page-story.js.mdx
+++ b/docs/snippets/svelte/page-story.js.mdx
@@ -3,14 +3,22 @@
import Page from './Page.svelte';
+//👇 Imports all Header stories
import * as HeaderStories from './Header.stories';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Page',
component: Page,
};
-const Template = (args) => ({ props: args });
+const Template = (args) => ({
+ Component: Page,
+ props: args,
+});
export const LoggedIn = Template.bind({});
LoggedIn.args = {
diff --git a/docs/snippets/svelte/register-component-with-play-function.js.mdx b/docs/snippets/svelte/register-component-with-play-function.js.mdx
new file mode 100644
index 000000000000..9ca947780a30
--- /dev/null
+++ b/docs/snippets/svelte/register-component-with-play-function.js.mdx
@@ -0,0 +1,44 @@
+```js
+// RegistrationForm.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'RegistrationForm',
+ component: RegistrationForm,
+};
+
+const Template = (args) => ({
+ Component: RegistrationForm,
+ props: args,
+});
+
+export const FilledForm = Template.bind({});
+FilledForm.play = async () => {
+ const emailInput = screen.getByLabelText('email', {
+ selector: 'input',
+ });
+
+ await userEvent.type(emailInput, 'example-email@email.com', {
+ delay: 100,
+ });
+
+ const passwordInput = screen.getByLabelText('password', {
+ selector: 'input',
+ });
+
+ await userEvent.type(passwordInput, 'ExamplePassword', {
+ delay: 100,
+ });
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const submitButton = screen.getByRole('button');
+
+ await userEvent.click(submitButton);
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/register-component-with-play-function.mdx.mdx b/docs/snippets/svelte/register-component-with-play-function.mdx.mdx
new file mode 100644
index 000000000000..ed9ab116afdc
--- /dev/null
+++ b/docs/snippets/svelte/register-component-with-play-function.mdx.mdx
@@ -0,0 +1,40 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+
+
+export const Template = (args) => ({
+ Component: RegistrationForm,
+ props: args,
+});
+
+ {
+ const emailInput = screen.getByLabelText('email', {
+ selector: 'input',
+ });
+ await userEvent.type(emailInput, 'example-email@email.com', {
+ delay: 100,
+ });
+
+ const passwordInput = screen.getByLabelText('password', {
+ selector: 'input',
+ });
+
+ await userEvent.type(passwordInput, 'ExamplePassword', {
+ delay: 100,
+ });
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const submitButton = screen.getByRole('button');
+ await userEvent.click(submitButton);
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
new file mode 100644
index 000000000000..11a55bbc244f
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
@@ -0,0 +1,24 @@
+```js
+// MyComponent.stories.js
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Disable a11y addon',
+ component: MyComponent,
+};
+
+const Template = () => ({ Component: MyComponent });
+
+export const NonA11yStory = Template.bind({});
+NonA11yStory.parameters = {
+ a11y: {
+ // This option disables all a11y checks on this story
+ disable: true,
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
new file mode 100644
index 000000000000..e5020c45ed4d
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
@@ -0,0 +1,24 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = () => ({ Component: MyComponent });
+
+
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
new file mode 100644
index 000000000000..92b58d82a4f2
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
@@ -0,0 +1,39 @@
+```js
+// MyComponent.stories.js
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Configure a11y addon',
+ component: MyComponent,
+};
+
+const Template = () => ({ Component: MyComponent });
+
+export const ExampleStory = Template.bind({});
+ExampleStory.parameters = {
+ a11y: {
+ element: '#root',
+ config: {
+ rules: [
+ {
+ // The autocomplete rule will not run based on the CSS selector provided
+ id: 'autocomplete-valid',
+ selector: '*:not([autocomplete="nope"])',
+ },
+ {
+ // Setting the enabled option to false will disable checks for this particular rule on all stories.
+ id: 'image-alt',
+ enabled: false,
+ },
+ ],
+ },
+ options: {},
+ manual: true,
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
new file mode 100644
index 000000000000..8fb7b459a044
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
@@ -0,0 +1,39 @@
+```md
+
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = () => ({ Component: MyComponent });
+
+
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx b/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx
index 0d8898c9f827..c4a8ef2c9ec6 100644
--- a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx
+++ b/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx
@@ -8,7 +8,7 @@
MarginDecorator]
};
diff --git a/docs/snippets/svelte/your-component.js.mdx b/docs/snippets/svelte/your-component.js.mdx
index 0d6b745b9b6b..89578545f2cb 100644
--- a/docs/snippets/svelte/your-component.js.mdx
+++ b/docs/snippets/svelte/your-component.js.mdx
@@ -5,17 +5,21 @@ import YourComponent from './YourComponent.svelte';
//👇This default export determines where your story goes in the story list
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'YourComponent',
component: YourComponent,
};
+//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
props: args,
});
export const FirstStory = Template.bind({});
-
-FirstStory.args = {
- /* The args you need here will depend on your component */
+FirstStory.args= {
+ //👇 The args you need here will depend on your component
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/your-component.mdx.mdx b/docs/snippets/svelte/your-component.mdx.mdx
index 88d9ec51e466..a0d8259cefd1 100644
--- a/docs/snippets/svelte/your-component.mdx.mdx
+++ b/docs/snippets/svelte/your-component.mdx.mdx
@@ -6,6 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import YourComponent from './YourComponent.svelte';
+
diff --git a/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx b/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx
new file mode 100644
index 000000000000..bb64b8201590
--- /dev/null
+++ b/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx
@@ -0,0 +1,23 @@
+```js
+// MyComponent.test.js
+
+import { render } from '@testing-library/vue';
+
+import { composeStories } from '@storybook/testing-vue';
+
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+import * as MyComponentStories from './MyComponent.stories';
+
+const { Accessible } = composeStories(MyComponentStories);
+
+expect.extend(toHaveNoViolations);
+
+test('Example accessiblity test', async () => {
+ const { container } = render(Accessible());
+
+ const AxeResults = await axe(container);
+
+ expect(AxeResults).toHaveNoViolations();
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx b/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
index 50ad3324eb03..eec81eaa5f4e 100644
--- a/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
+++ b/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
@@ -38,4 +38,4 @@
},
});
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/app-story-with-mock.3.js.mdx b/docs/snippets/vue/app-story-with-mock.3.js.mdx
deleted file mode 100644
index 07a9afcad2df..000000000000
--- a/docs/snippets/vue/app-story-with-mock.3.js.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-```js
-// App.stories.js
-
-import App from './App.vue';
-
-export default {
- title: 'App',
- component: App
-};
-
-const Template = (args) => ({
- components: { App },
- setup() {
- return { args };
- }
- template: '
+
+ `,
});
export const MockedSuccess = PageTemplate.bind({});
@@ -92,4 +98,4 @@ MockedError.parameters = {
}),
],
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
index c4ee4e0b44fb..eaf1c5396b89 100644
--- a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
@@ -3,11 +3,15 @@
import { rest } from 'msw';
-import DocumentScreen from './DocumentScreen.vue';
+import DocumentScreen from './YourPage.vue';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'DocumentScreen',
component: DocumentScreen,
- title: 'Mock Rest request with Storybook and MSW',
};
//👇The mocked data that will be used in the story
@@ -59,12 +63,9 @@ const TestData = {
],
};
-const PageTemplate = (args) => ({
+const PageTemplate = () => ({
components: { DocumentScreen },
- setup() {
- return { args };
- },
- template: '
-
- `,
+
+
`,
});
+
ManyItems.args = {
- Selected: Selected.args.itemProperty,
- Unselected: Unselected.args.itemProperty,
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.3.js.mdx b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
index 847d309650e4..f4eb4c0f3836 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
@@ -7,21 +7,31 @@ import ListItem from './ListItem.vue';
//👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+};
+
+
export const ManyItems = (args) => ({
components: { List, ListItem },
setup() {
- return { args };
+ return { ...args };
},
template: `
-
-
- `,
+
+
`,
});
-ManyItems.args = {
- Selected: Selected.args.itemProperty,
- Unselected: Unselected.args.itemProperty,
+
+ManyItems.args={
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.2.js.mdx b/docs/snippets/vue/list-story-starter.2.js.mdx
index a7973b15bfd7..52914eb835c2 100644
--- a/docs/snippets/vue/list-story-starter.2.js.mdx
+++ b/docs/snippets/vue/list-story-starter.2.js.mdx
@@ -4,8 +4,12 @@
import List from './ListComponent.vue';
export default {
- component: List,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'List',
+ component: List,
};
// Always an empty list, not super interesting
diff --git a/docs/snippets/vue/list-story-starter.3.js.mdx b/docs/snippets/vue/list-story-starter.3.js.mdx
index 6b653ceef575..c986f99ff11b 100644
--- a/docs/snippets/vue/list-story-starter.3.js.mdx
+++ b/docs/snippets/vue/list-story-starter.3.js.mdx
@@ -4,8 +4,12 @@
import List from './ListComponent.vue';
export default {
- component: List,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'List',
+ component: List,
};
// Always an empty list, not super interesting
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
index 1d1ef284a93a..6cbc57b20b4a 100644
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ b/docs/snippets/vue/list-story-template.2.js.mdx
@@ -7,16 +7,25 @@ import ListItem from './ListItem.vue';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+};
+
const ListTemplate = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List, ListItem },
template: `
-
-
- `,
+ `,
});
export const Empty = ListTemplate.bind({});
diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx
index 079d46eb7213..76587aabeca3 100644
--- a/docs/snippets/vue/list-story-template.3.js.mdx
+++ b/docs/snippets/vue/list-story-template.3.js.mdx
@@ -7,6 +7,15 @@ import ListItem from './ListItem.vue';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+};
+
const ListTemplate = (args) => ({
components: { List, ListItem },
setup() {
@@ -18,7 +27,7 @@ const ListTemplate = (args) => ({
',
+ template: `
+
+
+ `,
});
OneItem.args = {
...Unchecked.args,
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
index 286191d7b742..5b7da6194f00 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -7,13 +7,26 @@ import ListItem from './ListItem.vue';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+};
+
export const OneItem = (args) => ({
components: { List, ListItem },
setup() {
//👇 The args will now be passed down to the template
return { args };
},
- template: '
',
+ template: `
+
+
+ `,
});
OneItem.args = {
...Unchecked.args,
diff --git a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
index 9883686fd5e9..46b574b44665 100644
--- a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
@@ -5,9 +5,13 @@ import List from './List.vue';
import ListItem from './ListItem.vue';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
component: List,
subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
- title: 'List',
};
export const Empty = (args, { argTypes }) => ({
diff --git a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
index c629fa2f0efa..0ffa0b326f6e 100644
--- a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
@@ -5,9 +5,13 @@ import List from './List.vue';
import ListItem from './ListItem.vue';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
component: List,
subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
- title: 'List',
};
export const Empty = (args) => ({
diff --git a/docs/snippets/vue/loader-story.3.js.mdx b/docs/snippets/vue/loader-story.3.js.mdx
index fd8c09308512..b99ff7360963 100644
--- a/docs/snippets/vue/loader-story.3.js.mdx
+++ b/docs/snippets/vue/loader-story.3.js.mdx
@@ -6,8 +6,12 @@ import TodoItem from './TodoItem.vue';
import fetch from 'node-fetch';
export default {
- component: TodoItem,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Examples/Loader',
+ component: TodoItem,
};
export const Primary = (args, { loaded: { todo } }) => {
diff --git a/docs/snippets/vue/loader-story.mdx.mdx b/docs/snippets/vue/loader-story.mdx.mdx
index 8d3e8e8cf9c8..493be08e80c6 100644
--- a/docs/snippets/vue/loader-story.mdx.mdx
+++ b/docs/snippets/vue/loader-story.mdx.mdx
@@ -17,8 +17,7 @@ import fetch from 'node-fetch';
await fetch("https://jsonplaceholder.typicode.com/todos/1")
).json(),
}),
- ]}
->
+ ]}>
{(args, { loaded: { todo } }) => ({
components: { TodoItem },
setup() {
diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
new file mode 100644
index 000000000000..c8f3984153c0
--- /dev/null
+++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
@@ -0,0 +1,40 @@
+```js
+// LoginForm.stories.js
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import LoginForm from './LoginForm.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Form',
+ component: LoginForm,
+};
+
+export const Template = (args, { argTypes }) => ({
+ components: { LoginForm },
+ props: Object.keys(argTypes),
+ template: `
-
\ No newline at end of file
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
new file mode 100644
index 000000000000..511ad5034d8b
--- /dev/null
+++ b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'QueryMethods',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ components: { MyComponent },
+ template: ' {
+ // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+ }}>
+ {Template.bind({})}
+
+
+ {
+ // The play function interacts with the component and looks for the text
+ await screen.findByText('example string');
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-composition.js.mdx b/docs/snippets/vue/my-component-play-function-composition.js.mdx
new file mode 100644
index 000000000000..3f98c21f192c
--- /dev/null
+++ b/docs/snippets/vue/my-component-play-function-composition.js.mdx
@@ -0,0 +1,39 @@
+```js
+// MyComponent.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ components: { MyComponent },
+ template: ' {
+ const Input = screen.getByLabelText('Username', {
+ selector: 'input',
+ });
+
+ await userEvent.type(Input, 'WrongInput', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+ await userEvent.click(Submit);
+
+ await waitFor(async () => {
+ await userEvent.hover(screen.getByTestId('error'));
+ });
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
new file mode 100644
index 000000000000..af3918404fc9
--- /dev/null
+++ b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
@@ -0,0 +1,31 @@
+```js
+// MyComponent.stories.js
+
+import { getByRole, userEvent, within } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithCanvasElement',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ components: { MyComponent },
+ template: ' {
+ // Assigns canvas to the component root element
+ const canvas = within(canvasElement);
+
+ // Starts querying from the component's root element
+ await userEvent.type(canvas.getByTestId('example-element'), 'something');
+ await userEvent.click(canvas.getByRole('another-element'));
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
new file mode 100644
index 000000000000..c51f1e86af46
--- /dev/null
+++ b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js
+
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ClickExamples',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ components: { MyComponent },
+ template: ' {
+ // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(screen.getByRole('button'));
+ }}>
+ {Template.bind({})}
+
+
+ {
+ // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await fireEvent.click(screen.getByTestId('data-testid'));
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
new file mode 100644
index 000000000000..f055e9028968
--- /dev/null
+++ b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
@@ -0,0 +1,36 @@
+```js
+// MyComponent.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithDelay',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ components: { MyComponent },
+ template: ' {
+ const exampleElement= screen.getByLabelText('example-element');
+
+ // The delay option set the ammount of milliseconds between characters being typed
+ await userEvent.type(exampleElement, 'random string', {
+ delay: 100,
+ });
+
+ const AnotherExampleElement= screen.getByLabelText('another-example-element');
+ await userEvent.type(AnotherExampleElement, 'another random string', {
+ delay: 100,
+ });
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
new file mode 100644
index 000000000000..a72f05e4fed6
--- /dev/null
+++ b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
@@ -0,0 +1,40 @@
+```js
+// MyComponent.stories.js
+
+import { userEvent, screen } from '@storybook/testing-library';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'WithSelectEvent',
+ component: MyComponent,
+
+};
+
+// Custom function to emulate a pause
+function sleep(ms) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const Template = (args) => ({
+ components: { MyComponent },
+ template: ' {
+ const select = screen.getByRole('listbox');
+
+ await userEvent.selectOptions(select, ['One Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Another Item']);
+ await sleep(2000);
+
+ await userEvent.selectOptions(select, ['Yet another item']);
+
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
index d25b44cc3dc8..0f0d9b9ac2d5 100644
--- a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
@@ -4,6 +4,10 @@
import MyComponent from './MyComponent.vue';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Path/To/MyComponent',
component: MyComponent,
};
@@ -15,6 +19,6 @@ export const Basic = () => ({
export const WithProp = () => ({
components: { MyComponent },
- template: '
{() => {
return {
- template: ``,
+ template: `
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
index 555575034acf..c40b18ea44b5 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
@@ -1,6 +1,17 @@
```js
// MyComponent.stories.js
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+};
+
const getCaptionForLocale = (locale) => {
switch (locale) {
case 'es':
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
index b874d71189a2..6f6f74945f65 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx
@@ -1,7 +1,11 @@
```md
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
+
+import MyComponent from './MyComponent.vue';
+
+
export const getCaptionForLocale = (locale) => {
switch(locale) {
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
new file mode 100644
index 000000000000..4627965fe1ac
--- /dev/null
+++ b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
@@ -0,0 +1,39 @@
+```js
+// MyComponent.stories.js
+
+import MyComponent from './MyComponent.vue';
+
+import someData from './data.json';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+ includeStories: ['SimpleStory', 'ComplexStory'],
+ excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
+};
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+
+const Template = (args, { argTypes }) => ({
+ components: { MyComponent },
+ props: Object.keys(argTypes),
+ template: `
-
+
+
+
`,
});
@@ -24,4 +30,4 @@ export const CustomFooter = Template.bind({});
CustomFooter.args = {
footer: 'Built with Storybook',
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
index 907336fd3d2a..1f4e86e63fef 100644
--- a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx
@@ -5,18 +5,16 @@ import { Meta, Story } from '@storybook/addon-docs';
import Page from './Page.vue';
-
+
export const Template = (args, { argTypes }) => ({
- props: Object.keys(argTypes),
components: { Page },
+ props: Object.keys(argTypes),
template: `
- `,
+
+ `,
});
-
- `,
+
+
+
+
+ `,
});
({
diff --git a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
index 12a967bb63fe..bd47190804e4 100644
--- a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
@@ -9,8 +9,12 @@ import * as DocumentHeaderStories from './DocumentHeader.stories';
import * as DocumentListStories from './DocumentList.stories';
export default {
- component: DocumentScreen,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'DocumentScreen',
+ component: DocumentScreen,
};
const Template = (args) => ({
diff --git a/docs/snippets/vue/page-story.2.js.mdx b/docs/snippets/vue/page-story.2.js.mdx
index a24e3196dc6d..59f260eed46e 100644
--- a/docs/snippets/vue/page-story.2.js.mdx
+++ b/docs/snippets/vue/page-story.2.js.mdx
@@ -3,13 +3,19 @@
import Page from './Page.vue';
+//👇 Imports all Header stories
import * as HeaderStories from './Header.stories';
export default {
- component: Page,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Page',
+ component: Page,
};
+
const Template = (args, { argTypes }) => ({
components: { Page },
props: Object.keys(argTypes),
diff --git a/docs/snippets/vue/page-story.3.js.mdx b/docs/snippets/vue/page-story.3.js.mdx
index 2cf9f48ace0a..30b6cb0cb5b8 100644
--- a/docs/snippets/vue/page-story.3.js.mdx
+++ b/docs/snippets/vue/page-story.3.js.mdx
@@ -3,11 +3,16 @@
import Page from './Page.vue';
+//👇 Imports all Header stories
import * as HeaderStories from './Header.stories';
export default {
- component: Page,
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Page',
+ component: Page,
};
const Template = (args) => ({
@@ -22,4 +27,4 @@ export const LoggedIn = Template.bind({});
LoggedIn.args = {
...HeaderStories.LoggedIn.args,
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/register-component-with-play-function.js.mdx b/docs/snippets/vue/register-component-with-play-function.js.mdx
new file mode 100644
index 000000000000..c898c389ff0a
--- /dev/null
+++ b/docs/snippets/vue/register-component-with-play-function.js.mdx
@@ -0,0 +1,44 @@
+```js
+// RegistrationForm.stories.js
+
+import { screen, userEvent } from '@storybook/testing-library';
+
+import RegistrationForm from './RegistrationForm.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'RegistrationForm',
+ component: RegistrationForm,
+};
+
+const Template = (args) => ({
+ components: { RegistrationForm },
+ template: ' {
+ const emailInput = screen.getByLabelText('email', {
+ selector: 'input',
+ });
+
+ await userEvent.type(emailInput, 'example-email@email.com', {
+ delay: 100,
+ });
+
+ const passwordInput = screen.getByLabelText('password', {
+ selector: 'input',
+ });
+
+ await userEvent.type(passwordInput, 'ExamplePassword', {
+ delay: 100,
+ });
+
+ // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ const Submit = screen.getByRole('button');
+ await userEvent.click(Submit);
+ }}>
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
new file mode 100644
index 000000000000..7be7ee2c227c
--- /dev/null
+++ b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
@@ -0,0 +1,27 @@
+```js
+// MyComponent.stories.js
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Disable a11y addon',
+ component: MyComponent,
+};
+
+const Template = () => ({
+ components: { MyComponent },
+ template: '
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
new file mode 100644
index 000000000000..9e9addbb4ac7
--- /dev/null
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
@@ -0,0 +1,42 @@
+```js
+// MyComponent.stories.js
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Configure a11y addon',
+ component: MyComponent,
+};
+
+const Template = () => ({
+ components: { MyComponent },
+ template: '
+ {Template.bind({})}
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx
new file mode 100644
index 000000000000..db27c60dbbbc
--- /dev/null
+++ b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx
@@ -0,0 +1,21 @@
+```js
+// .storybook/preview.js
+
+import Vue from 'vue';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+library.add(fasPlusSquare);
+
+//👇 Storybook Vue app being extended and registering the component
+Vue.component('font-awesome-icon', FontAwesomeIcon);
+
+export const decorators = [
+ (story) => ({
+ components: { story },
+ template: 'Hello World `;
+
Primary.decorators = [(story) => html`${story()}`]
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
index 8e75c08d689c..9c5daceab5fd 100644
--- a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
@@ -4,6 +4,6 @@
import './demo-button';
export default {
- title: 'Components/Button',
+ title: 'Button',
};
```
diff --git a/docs/snippets/web-components/button-story-rename-story.js.mdx b/docs/snippets/web-components/button-story-rename-story.js.mdx
index a1dc44f5d7ae..bf448006efa3 100644
--- a/docs/snippets/web-components/button-story-rename-story.js.mdx
+++ b/docs/snippets/web-components/button-story-rename-story.js.mdx
@@ -5,7 +5,11 @@ import { html } from 'lit-html';
import './demo-button';
+export default {
+ title: 'Button',
+};
+
export const Primary = () => html`your-custom-directory to the one you're using.
-
-
-When you run `npm test storybook.test.js`, your snapshots will be placed in the proper directory.
-
-Storyshots has many other options for advanced use cases such as this one. You can read more about them in the [addon’s documentation](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core).
-
-### Configure the framework
-
-By default the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will detect which framework currently being used by your project. If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework that you're currently working with. For example if you were working with a Vue 3 project:
-
-
-
-` doc block.
-If you come up with an elegant and flexible implementation for the `prepareForInline` function for your framework, let us know. We'd love to make it the default configuration to make inline stories more accessible for a larger variety of frameworks!
+If you come up with an elegant and flexible implementation for the `prepareForInline` function for your framework, let us know. We'd love to make it the default configuration to make inline stories more accessible for a larger variety of frameworks!
\ No newline at end of file
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 95076f651a0a..522d01702e8b 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -2,15 +2,15 @@
title: 'Args'
---
-A story is a component with a set of arguments that define how the component is to be rendered. “Args” are Storybook’s mechanism for defining those arguments in a single JavaScript object. Args can be used to dynamically change props, slots, styles, inputs, etc. This allows Storybook and its addons to live edit components. You _do not_ need to change your underlying component code to use args.
+A story is a component with a set of arguments that define how the component should render. “Args” are Storybook’s mechanism for defining those arguments in a single JavaScript object. Args can be used to dynamically change props, slots, styles, inputs, etc. It allows Storybook and its addons to live edit components. You _do not_ need to modify your underlying component code to use args.
-When an arg’s value is changed, the component re-renders, allowing you to interact with components in Storybook’s UI via addons that affect args.
+When an arg’s value changes, the component re-renders, allowing you to interact with components in Storybook’s UI via addons that affect args.
Learn how and why to write stories in [the introduction](./introduction.md#using-args). For details on how args work, read on.
## Args object
-The args object can be defined at the story and component level (see below). It is a JSON serializable object, composed of string keys with matching valid value types that can be passed into a component for your framework.
+The `args` object can be defined at the [story](#story-args) and [component level](#component-args). It is a JSON serializable object composed of string keys with matching valid value types that can be passed into a component for your framework.
## Story args
@@ -54,7 +54,7 @@ In the above example, we use the [object spread](https://developer.mozilla.org/e
## Component args
-You can also define args at the component level; such args will apply to all stories of the component unless they are overwritten. To do so, use the `args` key of the `default` CSF export:
+You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` key on the `default` CSF export:
@@ -78,7 +78,7 @@ You can also define args at the component level; such args will apply to all sto
## Args composition
-You can separate the arguments to a story to compose in other stories. Here’s how args can be used in multiple stories for the same component.
+You can separate the arguments to a story to compose in other stories. Here's how you can combine args for multiple stories of the same component.
@@ -92,11 +92,11 @@ You can separate the arguments to a story to compose in other stories. Here’s
-Note that if you are doing the above often, you may want to consider using [component-level args](#component-args).
+💡Note: If you find yourself re-using the same args for most of a component's stories, you should consider using [component-level args](#component-args).
-Args are useful when writing stories for composite components that are assembled from other components. Composite components often pass their arguments unchanged to their child components, and similarly their stories can be compositions of their child components stories. With args, you can directly compose the arguments:
+Args are useful when writing stories for composite components that are assembled from other components. Composite components often pass their arguments unchanged to their child components, and similarly, their stories can be compositions of their child components stories. With args, you can directly compose the arguments:
@@ -115,7 +115,7 @@ Args are useful when writing stories for composite components that are assembled
## Args can modify any aspect of your component
-Args are used in story templates to configure the component appearance just as you would in an application. Here’s an example of how a `footer` arg can be used to populate a child component.
+You can use args in your stories to configure the component's appearance, similar to what you would do in an application. For example, here's how you could use a `footer` arg to populate a child component:
@@ -138,45 +138,45 @@ Args are used in story templates to configure the component appearance just as y
## Setting args through the URL
-Initial args for the currently active story can be overruled by setting the `args` query parameter on the URL. Typically, you would use the Controls addon to handle this automatically, but you can also manually tweak the URL if desired. An example of Storybook URL query params could look like this:
+You can also override the set of initial args for the active story by adding an `args` query parameter to the URL. Typically you would use the [Controls addon](../essentials/controls.md) to handle this. For example, here's how you could set a `size` and `style` arg in the Storybook's URL:
```
?path=/story/avatar--default&args=style:rounded;size:100
```
-In order to protect against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, keys and values of args specified through the URL are limited to alphanumeric characters, spaces, underscores and dashes. Any args that don't abide these restrictions will be ignored and stripped, but can still be used through code and manipulated through the Controls addon.
+As a safeguard against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, the arg's keys and values provided in the URL are limited to alphanumeric characters, spaces, underscores, and dashes. Any other types will be ignored and removed from the URL, but you can still use them with the Controls addon and [within your story](#mapping-to-complex-arg-values).
-The `args` param is always a set of `key:value` pairs delimited with a semicolon `;`. Values will be coerced (cast) to their respective `argTypes` (which may have been automatically inferred). Objects and arrays are supported. Special values `null` and `undefined` can be set by prefixing with a bang `!`. For example, `args=obj.key:val;arr[0]:one;arr[1]:two;nil:!null` will be interpreted as:
+The `args` param is always a set of `key: value` pairs delimited with a semicolon `;`. Values will be coerced (cast) to their respective `argTypes` (which may have been automatically inferred). Objects and arrays are supported. Special values `null` and `undefined` can be set by prefixing with a bang `!`. For example, `args=obj.key:val;arr[0]:one;arr[1]:two;nil:!null` will be interpreted as:
-```js
-{
- obj: { key: 'val' },
- arr: ['one', 'two'],
- nil: null
-}
-```
+
+
+Using args in addons
@@ -198,7 +198,7 @@ If you are [writing an addon](../addons/writing-addons.md) that wants to read or
parameters.passArgsFirst
-In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the “context” which contains things like the story parameters etc.
+In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the “context”, which includes story parameters, globals, argTypes, and other information.
In Storybook 5 and before we passed the context as the first argument. If you’d like to revert to that functionality set the `parameters.passArgsFirst` parameter in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
@@ -213,8 +213,6 @@ In Storybook 5 and before we passed the context as the first argument. If you’
-
-Note that `args` is still available as a key on the context.
-
+ 💡 Note that `args` is still available as a key in the context.
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 193c8abcbec8..26c3b2203931 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -2,7 +2,7 @@
title: 'Decorators'
---
-A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators to augment your stories with extra rendering or gather details about how your story is rendered.
+A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators to augment your stories with extra rendering or gather details about how your story renders.
When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
@@ -38,7 +38,9 @@ Some components require a “harness” to render in a useful way. For instance,
## “Context” for mocking
-Some libraries require components higher up in the component hierarchy to render correctly. For example, in Styled Components, a `ThemeProvider` is necessary if your components use themes. Add a single global decorator that adds this context to all stories in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
+Framework-specific libraries (e.g., [Styled Components](https://styled-components.com/), [Fortawesome](https://github.com/FortAwesome/vue-fontawesome) for Vue) may require additional configuration to render correctly in Storybook.
+
+For example, if you're working with Styled Components and your components use a theme, add a single global decorator to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to provide it. Or with Vue, extend Storybook's application and register your library:
@@ -46,18 +48,24 @@ Some libraries require components higher up in the component hierarchy to render
paths={[
'react/storybook-preview-with-styled-components-decorator.js.mdx',
'react/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
+ 'vue/storybook-preview-with-library-decorator.2-library.js.mdx',
+ 'vue/storybook-preview-with-library-decorator.3-library.js.mdx',
+ 'vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx',
+ 'vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx',
+ 'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
+ 'vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx',
]}
/>
-In the example above, the theme is hardcoded to a mock value of `default`. Still, you may want to vary that value, either on a per-story basis (if it is data you are mocking that is relevant to the other args of the story) or in a user-controlled way (for instance, to provide a theme switcher).
+In the example above, the values provided are hardcoded. Still, you may want to vary them, either on a per-story basis (i.e., if the values you're providing are relevant to a specific story) or in a user-controlled way (e.g., provide a theme switcher or a different set of icons).
The second argument to a decorator function is the **story context** which in particular contains the keys:
- `args` - the story arguments. You can use some [`args`](./args.md) in your decorators and drop them in the story implementation itself.
- `argTypes`- Storybook's [argTypes](../api/argtypes.md) allow you to customize and fine-tune your stories [`args`](./args.md).
-- `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.md#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.md#global-types-toolbar-annotations) to allow you to change these values using Storybook’s UI.
+- `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.md#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.md#global-types-toolbar-annotations) to allow you to change these values using Storybook’s UI.
- `hooks` - Storybook's API hooks (e.g., useArgs).
- `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons.
- `viewMode`- Storybook's current active window (e.g., canvas, docs).
@@ -79,7 +87,9 @@ To define a decorator for a single story, use the `decorators` key on a named ex
-It is useful to ensure that the story remains a “pure” rendering of the component under test, and any extra HTML or components you need to add don’t pollute that. In particular the [Source](../writing-docs/doc-blocks.md#source) docblock works best when you do this.
+It is useful to ensure that the story remains a “pure” rendering of the component under test, and any extra HTML or components don't pollute that. In particular the [Source](../writing-docs/doc-blocks.md#source) docblock works best when you do this.
## Component decorators
@@ -142,8 +152,8 @@ We can also set a decorator for **all stories** via the `decorators` export of y
Like parameters, decorators can be defined globally, at the component level, and for a single story (as we’ve seen).
-All decorators, defined at all levels that apply to a story, will run whenever that story is rendered, in the order:
+All decorators relevant to a story will run in the following order once the story renders:
- Global decorators, in the order they are defined
- Component decorators, in the order they are defined
-- Story decorators, in the order they are defined.
\ No newline at end of file
+- Story decorators, in the order they are defined.
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 077f84cbc8a2..6002d76ba59c 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -8,7 +8,7 @@ Storybook uses the generic term arguments (args for short) when talking about Re
## Where to put stories
-A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, it won't be included in your production bundle.
+A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle.
```
Button.js | ts | jsx | tsx
@@ -63,13 +63,13 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
-💡 Note: Using framework specific elements such as [React Hooks](https://reactjs.org/docs/hooks-intro.html) alongside your stories is a perfectly valid approach, but should be used as an advanced use case. We recommend using [args](./args.md) as much as possible when writing your own stories.
+💡 Note: Using framework specific elements such as [React Hooks](https://reactjs.org/docs/hooks-intro.html) alongside your stories is a valid approach, but you should treat them as an advanced use case. We recommend using [args](./args.md) as much as possible when writing your own stories.
### Rename stories
-You can rename any particular story you need. For instance to give it a clearer name. Here's how you can change the name of the `Primary` story:
+You can rename any particular story you need. For instance, to give it a more accurate name. Here's how you can change the name of the `Primary` story:
@@ -90,7 +90,7 @@ Your story will now be shown in the sidebar with the given text.
## How to write stories
-A story is a function that describes how to render a component. You can have multiple stories per component. The simplest way to create stories is to render a component with different arguments multiple times.
+A story is a function that describes how to render a component. You can have multiple stories per component, and the simplest way to create stories is to render a component with different arguments multiple times.
@@ -112,11 +112,11 @@ A story is a function that describes how to render a component. You can have mul
-This is straightforward for components with few stories, but can be repetitive with many stories.
+It's straightforward for components with few stories but can be repetitive with many stories.
### Using args
-Refine this pattern by defining a master template for a component’s stories that allows you to pass in `args`. This reduces the unique code you’ll need to write and maintain for each story.
+Refine this pattern by introducing `args` for your component's stories. It reduces the boilerplate code you'll need to write and maintain for each story.
@@ -135,9 +135,13 @@ Refine this pattern by defining a master template for a component’s stories th
-The template is reused across stories. Template.bind({}) makes a copy of the function which reduces code duplication. Similarly,`...Primary.args` makes a copy of the data, reducing data duplication.
+
+💡 Note: Template.bind({}) is a standard JavaScript techique for making a copy of a function. We copy the Template so each exported story can set its own properties on it.
+
-What’s more, you can import args to reuse when writing stories for other components. This is useful when you’re building composite components. For example, if we make a `ButtonGroup` story, we might remix two stories from its child component `Button`.
+By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.
+
+What’s more, you can import `args` to reuse when writing stories for other components, and it's helpful when you’re building composite components. For example, if we make a `ButtonGroup` story, we might remix two stories from its child component `Button`.
@@ -155,9 +159,9 @@ What’s more, you can import args to reuse when writing stories for other compo
-When Button’s signature changes, you only need to change Button’s stories to reflect the new schema. ButtonGroup’s stories will automatically be updated. This pattern allows you to reuse your data definitions up and down your component hierarchy, making your stories more maintainable.
+When Button’s signature changes, you only need to change Button’s stories to reflect the new schema, and ButtonGroup’s stories will automatically be updated. This pattern allows you to reuse your data definitions across the component hierarchy, making your stories more maintainable.
-That’s not all! Each of the args from the story function are live editable using Storybook’s [controls](../essentials/controls.md) panel. This means your team can dynamically change components in Storybook to stress test and find edge cases.
+That’s not all! Each of the args from the story function are live editable using Storybook’s [controls](../essentials/controls.md) panel. It means your team can dynamically change components in Storybook to stress test and find edge cases.
-Addons can enhance args. For instance, [Actions](../essentials/actions.md) auto detects which args are callbacks and appends a logging function to them. That way interactions (like clicks) get logged in the actions panel.
+Addons can enhance args. For instance, [Actions](../essentials/actions.md) auto-detects which args are callbacks and appends a logging function to them. That way, interactions (like clicks) get logged in the actions panel.
+### Using the play function
+
+Storybook's `play` function and the [`@storybook/addon-interactions`](/addons/@storybook/addon-interactions/) are convenient helper methods to test component scenarios that otherwise require user intervention. They're small code snippets that execute once your story renders. For example, suppose you wanted to validate a form component, you could write the following story using the `play` function to check how the component responds when filling in the inputs with information:
+
+
+
+
`userEvent.clear(await within(canvasElement).getByRole('myinput'));` |
+| `click` | Clicks the element, calling a click() function
`userEvent.click(await within(canvasElement).getByText('mycheckbox'));` |
+| `dblClick` | Clicks the element twice
`userEvent.dblClick(await within(canvasElement).getByText('mycheckbox'));` |
+| `deselectOptions` | Removes the selection from a specific option of a select element
`userEvent.deselectOptions(await within(canvasElement).getByRole('listbox','1'));` |
+| `hover` | Hovers an element
`userEvent.hover(await within(canvasElement).getByTestId('example-test'));` |
+| `keyboard` | Simulates the keyboard events
`userEvent.keyboard(‘foo’);` |
+| `selectOptions` | Selects the specified option, or options of a select element
`userEvent.selectOptions(await within(canvasElement).getByRole('listbox'),['1','2']);` |
+| `type` | Writes text inside inputs, or textareas
`userEvent.type(await within(canvasElement).getByRole('my-input'),'Some text');` |
+| `unhover` | Unhovers out of element
`userEvent.unhover(await within(canvasElement).getByLabelText(/Example/i));` |
+
+### Debugging
+
+The [`@storybook/addon-interactions`](/addons/@storybook/addon-interactions/) addon includes a set of UI controls to allow you control over the test execution flow. At any time, you can pause, resume, rewind, and step through each interaction. Also, providing you with an easy-to-use debugger for errors.
+
+
+
+Open your `Interactions` panel and click on an individual step to jump to the exact state of the component when the interaction was triggered.
+
+
+
+### Permalinks for reproductions
+
+The `play` function is executed after the story is rendered. If there’s an error, it’ll be shown in the interaction addon panel to help with debugging.
+
+Since Storybook is a webapp, anyone with the URL can reproduce the error with the same detailed information without any additional environment configuration or tooling required.
+
+
+
+Streamline interaction testing further by automatically [publishing Storybook](../workflows/publish-storybook.md) in pull requests. That gives teams a universal reference point to test and debug stories.
+
+---
+
+#### What’s the difference between interaction tests and visual tests?
+
+Interaction tests can be expensive to maintain when applied wholesale to every component. We recommend combining them with other methods like visual testing for comprehensive coverage with less maintenance work.
+
+#### Learn about other UI tests
+
+- [Visual tests](./visual-testing.md) for appearance
+- [Accessibility tests](accessibility-testing.md) for accessibility
+- Interaction tests for user behavior simulation
+- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
diff --git a/docs/writing-tests/introduction.md b/docs/writing-tests/introduction.md
new file mode 100644
index 000000000000..4ad6cbe44978
--- /dev/null
+++ b/docs/writing-tests/introduction.md
@@ -0,0 +1,19 @@
+---
+title: 'How to test UIs with Storybook'
+---
+
+Storybook provides a clean-room environment for testing components in isolation. Stories make it easy to explore a component in all its variations, no matter how complex.
+
+That means stories are a pragmatic starting point for your UI testing strategy. You already write stories as a natural part of UI development, testing those stories is a low-effort way to prevent UI bugs over time.
+
+
+
+The simplest testing method is manual “spot checking”. You run Storybook locally, then eyeball every story to verify its appearance and behavior. [Publish](../workflows/publish-storybook.md) your Storybook online to share reproductions and get teammates involved.
+
+Storybook also comes with tools, test runners, and handy integrations with the larger JavaScript ecosystem to expand your UI test coverage. These docs detail how you can use Storybook for UI testing.
+
+- [**Visual tests**](./visual-testing.md) capture a screenshot of every story then compare it against baselines to detect appearance and integration issues
+- [**Accessibility tests**](./accessibility-testing.md) catch usability issues related to visual, hearing, mobility, cognitive, speech, or neurological disabilities
+- [**Interaction tests**](./interaction-testing.md) verify component functionality by simulating user behaviour, firing events, and ensuring that state is updated as expected
+- [**Snapshot tests**](./snapshot-testing.md) detect changes in the rendered markup to surface rendering errors or warnings
+- [**Import stories in other tests**](./importing-stories-in-tests.md) to QA even more UI characteristics
diff --git a/docs/writing-tests/jest-accessibility-testing-optimized.png b/docs/writing-tests/jest-accessibility-testing-optimized.png
new file mode 100644
index 000000000000..b8f3925cb5d6
Binary files /dev/null and b/docs/writing-tests/jest-accessibility-testing-optimized.png differ
diff --git a/docs/workflows/snapshot-test.png b/docs/writing-tests/snapshot-test.png
similarity index 100%
rename from docs/workflows/snapshot-test.png
rename to docs/writing-tests/snapshot-test.png
diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md
new file mode 100644
index 000000000000..2f9c9d000d6f
--- /dev/null
+++ b/docs/writing-tests/snapshot-testing.md
@@ -0,0 +1,117 @@
+---
+title: 'Snapshot tests'
+---
+
+Snapshot tests compare the rendered markup of every story against known baselines. It’s a way to identify markup changes that trigger rendering errors and warnings.
+
+Storybook is a helpful tool for snapshot testing because every story is essentially a test specification. Any time you write or update a story, you get a snapshot test for free.
+
+
+
+## Setup Storyshots
+
+[Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots/) is the official Storybook addon that enables snapshot testing, powered by [Jest](https://jestjs.io/docs/getting-started).
+
+Run the following command to install Storyshots:
+
+```shell
+# With npm
+npm install @storybook/addon-storyshots --save-dev
+
+# With yarn
+yarn add --dev @storybook/addon-storyshots
+```
+
+Add a test file to your environment with the following contents to configure Storyshots:
+
+
+
+` for your Storybook.
+
+Next, install the [chromatic](https://www.npmjs.com/package/chromatic) CLI package from npm:
+
+```shell
+# With npm
+npm install chromatic --save-dev
+
+# With yarn
+yarn add --dev chromatic
+```
+
+Run the following command after the package finishes installing:
+
+```shell
+npx chromatic --project-token
+```
+
+
+ Note: Don't forget to replace your-project-token with the one provided by Chromatic.
+
+
+```shell
+Build 1 published.
+
+View it online at https://www.chromatic.com/build?appId=...&number=1.
+```
+
+When Chromatic finishes, it should have successfully deployed your Storybook and established the baselines (i.e., starting point) for all your component's stories. Additionally, providing you with a link to the published Storybook that you can share with your team to gather feedback.
+
+
+
+## Catching UI changes
+
+Each time you run Chromatic, it will generate new snapshots and compare them against the existing baselines. That’s ideal for detecting UI changes and preventing potential UI regressions.
+
+For example, let's assume you're working on a component and you tweak the styling. When Chromatic is re-run, it will highlight the difference between the baseline and the updated component.
+
+
+
+If the changes are intentional, accept them as baselines. Otherwise, deny them to prevent UI regressions.
+
+Learn how to [integrate Chromatic UI Tests](https://www.chromatic.com/docs/) into your CI pipeline.
+
+---
+
+#### What’s the difference between visual tests and snapshot tests?
+
+Snapshot tests compare the rendered markup of every story against known baselines. This means the test compares blobs of HTML and not what the user actually sees. Which in turn, can lead to an increase in false positives as code changes don’t always yield visual changes in the component.
+
+#### Learn about other UI tests
+
+- Visual tests for appearance
+- [Accessibility tests](./accessibility-testing.md) for accessibility
+- [Interaction tests](./interaction-testing.md) for user behavior simulation
+- [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index fd67ab2ea4f5..4b3a747b073f 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-cli",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"license": "MIT",
"scripts": {
@@ -27,8 +27,8 @@
"@angular/platform-browser-dynamic": "^11.2.14",
"@ngrx/store": "^10.1.2",
"core-js": "^3.8.2",
- "node-sass": "^4.14.1",
"rxjs": "^6.6.3",
+ "sass": "^1.43.4",
"telejson": "^5.3.2",
"zone.js": "^0.11.3"
},
@@ -39,25 +39,26 @@
"@angular/compiler-cli": "^11.2.14",
"@angular/elements": "^11.2.14",
"@compodoc/compodoc": "^1.1.14",
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/addon-interactions": "6.4.0-rc.2",
- "@storybook/addon-jest": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/angular": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/addon-interactions": "6.4.0-rc.7",
+ "@storybook/addon-jest": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/angular": "6.4.0-rc.7",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/jest": "^0.0.2",
- "@storybook/source-loader": "6.4.0-rc.2",
+ "@storybook/source-loader": "6.4.0-rc.7",
"@storybook/testing-library": "^0.0.3",
"@types/core-js": "^2.5.4",
"@types/jest": "^26.0.16",
"@types/node": "^14.14.20",
+ "@types/sass": "^1",
"@types/webpack-env": "^1.16.0",
"@webcomponents/custom-elements": "^1.4.3",
"global": "^4.4.0",
diff --git a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts b/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts
index 4b2bbbbd8f54..15e6c8a92573 100644
--- a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts
+++ b/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts
@@ -1,27 +1,109 @@
-/* eslint-disable storybook/use-storybook-testing-library */
-// @TODO: use addon-interactions and remove the rule disable above
-import { Story, Meta } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
import { expect } from '@storybook/jest';
-import { within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { within, userEvent, waitFor } from '@storybook/testing-library';
-import { CounterComponent } from './counter/counter.component';
+import { HeroForm } from './hero-form/hero-form.component';
export default {
title: 'Addons/Interactions',
- component: CounterComponent,
-} as Meta;
+ component: HeroForm,
+ decorators: [
+ moduleMetadata({
+ imports: [CommonModule, FormsModule],
+ }),
+ ],
+} as Meta;
-const Template: Story = (args) => ({
+const Template: Story = (args) => ({
props: args,
});
-export const Default: Story = Template.bind({});
+export const Standard: Story = Template.bind({});
-Default.play = async ({ canvasElement }) => {
+export const Filled: Story = Template.bind({});
+Filled.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
- await userEvent.click(await canvas.findByText('Increment'));
+ const heroName = canvas.getByRole('textbox', {
+ name: /name/i,
+ });
+ await userEvent.type(heroName, 'Storm');
- const count = await canvas.findByTestId('count');
- await expect(count.textContent).toEqual('You clicked 1 times');
+ const alterEgo = canvas.getByRole('textbox', {
+ name: /alter ego/i,
+ });
+ await userEvent.type(alterEgo, 'Ororo Munroe');
+
+ const heroPower = canvas.getByRole('combobox', { name: /hero power/i });
+ await userEvent.selectOptions(heroPower, 'Weather Changer');
+};
+
+export const InvalidFields: Story = Template.bind({});
+InvalidFields.play = async (context) => {
+ await Filled.play(context);
+
+ const canvas = within(context.canvasElement);
+ await userEvent.clear(
+ canvas.getByRole('textbox', {
+ name: /name/i,
+ })
+ );
+ await userEvent.clear(
+ canvas.getByRole('textbox', {
+ name: /alter ego/i,
+ })
+ );
+
+ const heroPower = canvas.getByRole('combobox', { name: /hero power/i });
+ await userEvent.selectOptions(heroPower, '');
+};
+
+export const Submitted: Story = Template.bind({});
+Submitted.play = async (context) => {
+ await Filled.play(context);
+
+ const canvas = within(context.canvasElement);
+ await userEvent.click(canvas.getByText('Submit'));
+
+ await waitFor(async () => {
+ await expect(
+ canvas.getByRole('heading', {
+ name: /you submitted the following:/i,
+ })
+ ).not.toBeNull();
+ await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
+ await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
+ await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
+ });
+};
+
+export const SubmittedAndEditedAfter: Story = Template.bind({});
+SubmittedAndEditedAfter.play = async (context) => {
+ await Submitted.play(context);
+
+ const canvas = within(context.canvasElement);
+ await userEvent.click(canvas.getByText('Edit'));
+
+ const heroName = canvas.getByRole('textbox', {
+ name: /name/i,
+ });
+ await userEvent.clear(heroName);
+ await userEvent.type(heroName, 'Wakanda Queen');
+
+ await userEvent.click(canvas.getByText('Submit'));
+
+ await waitFor(async () => {
+ await expect(
+ canvas.getByRole('heading', {
+ name: /you submitted the following:/i,
+ })
+ ).not.toBeNull();
+ // new value
+ await expect(canvas.getByTestId('hero-name').textContent).toEqual('Wakanda Queen');
+
+ // previous values
+ await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
+ await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
+ });
};
diff --git a/examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts b/examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts
deleted file mode 100644
index a48e6133e05c..000000000000
--- a/examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-counter',
- template: `
-
- Angular - Counter
- You clicked {{ count }} times
-
-
-
- `,
-})
-export class CounterComponent {
- count = 0;
-
- increment() {
- this.count += 1;
- }
-
- decrement() {
- this.count -= 1;
- }
-}
diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css
new file mode 100644
index 000000000000..3dd3e324e01f
--- /dev/null
+++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css
@@ -0,0 +1,9 @@
+@import url('https://unpkg.com/bootstrap@4.4/dist/css/bootstrap.min.css');
+
+.ng-valid[required], .ng-valid.required {
+ border-left: 5px solid #42A948;
+}
+
+.ng-invalid:not(form) {
+ border-left: 5px solid #a94442;
+}
diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html
new file mode 100644
index 000000000000..83da1d2c1e2b
--- /dev/null
+++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html
@@ -0,0 +1,61 @@
+
+
+ Hero Form
+
+
+
+
+ You submitted the following:
+
+ Name
+ {{ model.name }}
+
+
+ Alter Ego
+ {{ model.alterEgo }}
+
+
+ Power
+ {{ model.power }}
+
+
+
+
+
diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.ts b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.ts
new file mode 100644
index 000000000000..6470db34d173
--- /dev/null
+++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.ts
@@ -0,0 +1,51 @@
+import { Component, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+class Hero {
+ // eslint-disable-next-line no-useless-constructor
+ constructor(
+ public id: number,
+ public name: string,
+ public power: string,
+ public alterEgo?: string
+ ) {}
+}
+
+@Component({
+ selector: 'hero-form',
+ templateUrl: './hero-form.component.html',
+ styleUrls: ['./hero-form.component.css'],
+})
+export class HeroForm {
+ /**
+ * This does not work on addon-controls as it is turned into a string
+ * @ignore
+ */
+ model = new Hero(0, '', '', '');
+
+ /**
+ * This does not work on addon-controls as it is turned into a string
+ * @ignore
+ */
+ powers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer'];
+
+ submitting = false;
+
+ submitted = false;
+
+ onSubmit() {
+ this.submitting = true;
+ setTimeout(() => {
+ this.submitted = true;
+ this.submitting = false;
+ }, 1000);
+ }
+}
+
+@NgModule({
+ declarations: [HeroForm],
+ exports: [HeroForm],
+ imports: [CommonModule, FormsModule],
+})
+export class HeroFormModule {}
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index a7af2f31f165..af342771f226 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -11,7 +11,7 @@
"test": "react-scripts test --env=jsdom"
},
"dependencies": {
- "@storybook/client-logger": "6.4.0-rc.2",
+ "@storybook/client-logger": "6.4.0-rc.7",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"react": "16.14.0",
@@ -21,19 +21,19 @@
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addon-jest": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/builder-webpack4": "6.4.0-rc.2",
+ "@storybook/addon-jest": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/builder-webpack4": "6.4.0-rc.7",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/react": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
"webpack": "4"
},
"storybook": {
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 1befaf5e7111..ceccad5b72b0 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-react15",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -19,14 +19,14 @@
"react-scripts": "3.4.4"
},
"devDependencies": {
- "@storybook/addon-actions": "6.4.0-rc.2",
+ "@storybook/addon-actions": "6.4.0-rc.7",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/builder-webpack4": "6.4.0-rc.2",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/builder-webpack4": "6.4.0-rc.7",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/react": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
"babel-core": "6",
"babel-runtime": "6",
"webpack": "4"
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
index 317e98042b55..02f66e5c780e 100644
--- a/examples/cra-ts-essentials/package.json
+++ b/examples/cra-ts-essentials/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-essentials",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -34,12 +34,12 @@
"typescript": "^3.9.7"
},
"devDependencies": {
- "@storybook/addon-essentials": "6.4.0-rc.2",
+ "@storybook/addon-essentials": "6.4.0-rc.7",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/builder-webpack4": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/builder-webpack4": "6.4.0-rc.7",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.4.0-rc.2",
+ "@storybook/react": "6.4.0-rc.7",
"webpack": "4"
},
"storybook": {
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index ed487a8589be..79758f6f04a5 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -34,15 +34,15 @@
"typescript": "^3.9.7"
},
"devDependencies": {
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/builder-webpack4": "6.4.0-rc.2",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/builder-webpack4": "6.4.0-rc.7",
"@storybook/preset-create-react-app": "^3.1.6",
- "@storybook/react": "6.4.0-rc.2",
+ "@storybook/react": "6.4.0-rc.7",
"@types/enzyme": "^3.10.8",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.9.1",
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index cdd8c00ccdd6..3a36cde66175 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "ember-example",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "ember build --output-path ember-output",
@@ -17,18 +17,18 @@
"devDependencies": {
"@babel/core": "^7.12.10",
"@ember/optional-features": "^2.0.0",
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addon-viewport": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/ember": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addon-viewport": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/ember": "6.4.0-rc.7",
"@storybook/ember-cli-storybook": "^0.2.1",
- "@storybook/source-loader": "6.4.0-rc.2",
+ "@storybook/source-loader": "6.4.0-rc.7",
"babel-loader": "^8.0.0",
"broccoli-asset-rev": "^3.0.0",
"cross-env": "^7.0.3",
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index be6a873cc961..169bcd837c76 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"description": "",
"keywords": [],
@@ -13,23 +13,23 @@
"storybook": "start-storybook -p 9006 --no-manager-cache"
},
"devDependencies": {
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/addon-jest": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/addon-jest": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
"@storybook/addon-postcss": "^2.0.0",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addon-viewport": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/client-api": "6.4.0-rc.2",
- "@storybook/core": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
- "@storybook/html": "6.4.0-rc.2",
- "@storybook/source-loader": "6.4.0-rc.2",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addon-viewport": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/client-api": "6.4.0-rc.7",
+ "@storybook/core": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
+ "@storybook/html": "6.4.0-rc.7",
+ "@storybook/source-loader": "6.4.0-rc.7",
"autoprefixer": "^10.0.1",
"eventemitter3": "^4.0.7",
"format-json": "^1.0.3",
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 57a1eadd5e85..4dbb5fc54044 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "official-storybook",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -14,31 +14,31 @@
"devDependencies": {
"@packtracker/webpack-plugin": "^2.3.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/addon-interactions": "6.4.0-rc.2",
- "@storybook/addon-jest": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storyshots-puppeteer": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addon-toolbars": "6.4.0-rc.2",
- "@storybook/addon-viewport": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/cli": "6.4.0-rc.2",
- "@storybook/components": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/addon-interactions": "6.4.0-rc.7",
+ "@storybook/addon-jest": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storyshots-puppeteer": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addon-toolbars": "6.4.0-rc.7",
+ "@storybook/addon-viewport": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/cli": "6.4.0-rc.7",
+ "@storybook/components": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/design-system": "^5.4.7",
"@storybook/jest": "^0.0.2",
- "@storybook/node-logger": "6.4.0-rc.2",
- "@storybook/react": "6.4.0-rc.2",
- "@storybook/router": "6.4.0-rc.2",
- "@storybook/source-loader": "6.4.0-rc.2",
+ "@storybook/node-logger": "6.4.0-rc.7",
+ "@storybook/react": "6.4.0-rc.7",
+ "@storybook/router": "6.4.0-rc.7",
+ "@storybook/source-loader": "6.4.0-rc.7",
"@storybook/testing-library": "^0.0.3",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/theming": "6.4.0-rc.7",
"@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9",
"chromatic": "^6.0.2",
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 2d6712357b1f..635909b1a3b8 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "preact-example",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,16 +15,16 @@
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-transform-runtime": "^7.12.10",
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addon-viewport": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/preact": "6.4.0-rc.2",
- "@storybook/source-loader": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addon-viewport": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/preact": "6.4.0-rc.7",
+ "@storybook/source-loader": "6.4.0-rc.7",
"@types/prop-types": "^15.7.3",
"@types/react": "^17",
"@types/react-dom": "^17",
diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json
index d46224e190de..7ab1228b0164 100644
--- a/examples/react-ts-webpack4/package.json
+++ b/examples/react-ts-webpack4/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/example-react-ts-webpack4",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -8,10 +8,10 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache"
},
"dependencies": {
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-essentials": "6.4.0-rc.2",
- "@storybook/builder-webpack4": "6.4.0-rc.2",
- "@storybook/react": "6.4.0-rc.2",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-essentials": "6.4.0-rc.7",
+ "@storybook/builder-webpack4": "6.4.0-rc.7",
+ "@storybook/react": "6.4.0-rc.7",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.10",
"prop-types": "15.7.2",
diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json
index 3f68b9a02123..d76bccad4512 100644
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/example-react-ts",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
@@ -18,13 +18,13 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
- "@storybook/addon-essentials": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/cli": "6.4.0-rc.2",
- "@storybook/components": "6.4.0-rc.2",
- "@storybook/react": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/addon-essentials": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/cli": "6.4.0-rc.7",
+ "@storybook/components": "6.4.0-rc.7",
+ "@storybook/react": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
"@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9",
"@types/babel__preset-env": "^7",
diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json
index ae16eb2f77bf..8f7c91d19914 100644
--- a/examples/server-kitchen-sink/package.json
+++ b/examples/server-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "server-kitchen-sink",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"description": "",
"keywords": [],
@@ -14,13 +14,13 @@
"storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
},
"devDependencies": {
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
- "@storybook/server": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
+ "@storybook/server": "6.4.0-rc.7",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"express": "~4.17.1",
diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json
index c8280c8ecb62..829083d11c6d 100644
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@@ -1,13 +1,13 @@
{
"name": "standalone-preview",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"storybook": "parcel ./storybook.html --port 1337"
},
"devDependencies": {
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/react": "6.4.0-rc.2",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/react": "6.4.0-rc.7",
"parcel": "^1.12.4",
"react": "16.14.0",
"react-dom": "16.14.0"
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 28f7a1a6040c..74c42381c026 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte-example",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -10,20 +10,20 @@
"global": "^4.4.0"
},
"devDependencies": {
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/addon-interactions": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addon-viewport": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/addon-interactions": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addon-viewport": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
"@storybook/jest": "^0.0.2",
- "@storybook/source-loader": "6.4.0-rc.2",
- "@storybook/svelte": "6.4.0-rc.2",
+ "@storybook/source-loader": "6.4.0-rc.7",
+ "@storybook/svelte": "6.4.0-rc.7",
"@storybook/testing-library": "^0.0.3",
"svelte-jester": "1.3.0",
"svelte-preprocess": "4.6.8"
diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json
index b52db1b90660..2e6488b591af 100644
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-3-cli-example",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "vue-cli-service build",
@@ -14,14 +14,14 @@
},
"devDependencies": {
"@babel/core": "^7.12.10",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-essentials": "6.4.0-rc.2",
- "@storybook/addon-interactions": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-essentials": "6.4.0-rc.7",
+ "@storybook/addon-interactions": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
"@storybook/jest": "^0.0.2",
"@storybook/testing-library": "^0.0.3",
- "@storybook/vue3": "6.4.0-rc.2",
+ "@storybook/vue3": "6.4.0-rc.7",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0",
diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json
index cd07f7570bac..f8e24fcd8b06 100644
--- a/examples/vue-cli/package.json
+++ b/examples/vue-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-cli-example",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "vue-cli-service build",
@@ -15,11 +15,11 @@
"vue-property-decorator": "^9.1.2"
},
"devDependencies": {
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-essentials": "6.4.0-rc.2",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-essentials": "6.4.0-rc.7",
"@storybook/preset-scss": "^1.0.3",
- "@storybook/source-loader": "6.4.0-rc.2",
- "@storybook/vue": "6.4.0-rc.2",
+ "@storybook/source-loader": "6.4.0-rc.7",
+ "@storybook/vue": "6.4.0-rc.7",
"@vue/cli-plugin-babel": "~4.3.1",
"@vue/cli-plugin-typescript": "~4.3.1",
"@vue/cli-service": "~4.3.1",
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 9c44287e0743..96132dd61ae8 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-example",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -14,21 +14,21 @@
},
"devDependencies": {
"@babel/core": "^7.12.10",
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/addon-interactions": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addon-viewport": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/addon-interactions": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addon-viewport": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
"@storybook/jest": "^0.0.2",
- "@storybook/source-loader": "6.4.0-rc.2",
+ "@storybook/source-loader": "6.4.0-rc.7",
"@storybook/testing-library": "^0.0.3",
- "@storybook/vue": "6.4.0-rc.2",
+ "@storybook/vue": "6.4.0-rc.7",
"@vue/babel-preset-jsx": "^1.2.4",
"babel-loader": "^8.0.0",
"cross-env": "^7.0.3",
diff --git a/examples/web-components-kitchen-sink/custom-elements.json b/examples/web-components-kitchen-sink/custom-elements.json
index aaba478e95e5..a9dc8357b10d 100644
--- a/examples/web-components-kitchen-sink/custom-elements.json
+++ b/examples/web-components-kitchen-sink/custom-elements.json
@@ -46,15 +46,17 @@
"text": "boolean"
},
"description": "Set button in primary mode",
- "privacy": "public"
+ "privacy": "public",
+ "attribute": "primary"
},
{
"kind": "field",
"name": "backgroundColor",
"type": {
- "text": "string"
+ "text": "string | undefined"
},
- "privacy": "public"
+ "privacy": "public",
+ "attribute": "background-color"
},
{
"kind": "field",
@@ -63,13 +65,19 @@
"text": "'small' | 'medium' | 'large'"
},
"default": "'medium'",
- "privacy": "public"
+ "privacy": "public",
+ "attribute": "size"
},
{
"kind": "field",
"name": "label",
+ "type": {
+ "text": "string"
+ },
"default": "''",
- "privacy": "public"
+ "privacy": "public",
+ "attribute": "label",
+ "reflects": true
},
{
"kind": "method",
@@ -92,14 +100,16 @@
"text": "string"
},
"description": "Label of the button",
- "name": "label"
+ "name": "label",
+ "fieldName": "label"
},
{
"type": {
"text": "string"
},
"description": "Size of the button, can be \"small\", \"medium\" or \"large\"; default is \"medium\".",
- "name": "size"
+ "name": "size",
+ "fieldName": "size"
},
{
"type": {
@@ -108,20 +118,12 @@
"description": "Color of the button's background",
"name": "backgroundColor"
},
- {
- "name": "label",
- "fieldName": "label"
- },
{
"name": "primary",
"fieldName": "primary"
},
{
- "name": "size",
- "fieldName": "size"
- },
- {
- "name": "backgroundColor",
+ "name": "background-color",
"fieldName": "backgroundColor"
}
],
@@ -166,9 +168,11 @@
"kind": "field",
"name": "user",
"type": {
- "text": "{}"
+ "text": "{} | undefined"
},
- "privacy": "public"
+ "privacy": "public",
+ "attribute": "user",
+ "reflects": true
},
{
"kind": "method",
@@ -223,9 +227,6 @@
"text": "Object"
},
"description": "User of the app",
- "name": "user"
- },
- {
"name": "user",
"fieldName": "user"
}
@@ -271,9 +272,11 @@
"kind": "field",
"name": "user",
"type": {
- "text": "{}"
+ "text": "{} | undefined"
},
- "privacy": "public"
+ "privacy": "public",
+ "attribute": "user",
+ "reflects": true
}
],
"attributes": [
@@ -282,9 +285,6 @@
"text": "Object"
},
"description": "User of the app",
- "name": "user"
- },
- {
"name": "user",
"fieldName": "user"
}
@@ -363,23 +363,36 @@
{
"kind": "field",
"name": "backSide",
- "privacy": "public",
+ "type": {
+ "text": "boolean"
+ },
"description": "Indicates that the back of the card is shown",
- "default": "false"
+ "default": "false",
+ "privacy": "public",
+ "attribute": "back-side",
+ "reflects": true
},
{
"kind": "field",
"name": "header",
- "privacy": "public",
+ "type": {
+ "text": "string"
+ },
"description": "Header message",
- "default": "'Your Message'"
+ "default": "'Your Message'",
+ "privacy": "public",
+ "attribute": "header"
},
{
"kind": "field",
"name": "rows",
- "privacy": "public",
+ "type": {
+ "text": "array"
+ },
"description": "Data rows",
- "default": "[]"
+ "default": "[]",
+ "privacy": "public",
+ "attribute": "rows"
}
],
"events": [
@@ -430,7 +443,8 @@
"declarations": [
{
"kind": "variable",
- "name": "demoWcCardStyle"
+ "name": "demoWcCardStyle",
+ "default": "css`\n :host {\n display: block;\n position: relative;\n width: 250px;\n height: 200px;\n border-radius: 10px;\n transform-style: preserve-3d;\n transition: all 0.8s ease;\n }\n\n .header {\n font-weight: bold;\n font-size: var(--demo-wc-card-header-font-size, 16px);\n text-align: center;\n }\n\n .content {\n padding: 20px 10px 0 10px;\n flex-grow: 1;\n }\n\n .footer {\n display: flex;\n }\n\n dl {\n margin: 0;\n text-align: left;\n }\n\n dd {\n margin-left: 15px;\n }\n\n button {\n border-radius: 15px;\n width: 30px;\n height: 30px;\n background: #fff;\n border: 1px solid #ccc;\n color: #000;\n font-size: 21px;\n line-height: 27px;\n font-weight: bold;\n cursor: pointer;\n margin: 5px;\n }\n\n .note {\n flex-grow: 1;\n color: #666;\n font-size: 16px;\n font-weight: bold;\n text-align: left;\n padding-top: 15px;\n }\n\n :host([back-side]) {\n transform: rotateY(180deg);\n }\n\n #front,\n #back {\n position: absolute;\n width: 250px;\n box-sizing: border-box;\n box-shadow: #ccc 3px 3px 2px 1px;\n padding: 10px;\n display: flex;\n flex-flow: column;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 10px;\n backface-visibility: hidden;\n overflow: hidden;\n }\n\n #front {\n background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);\n color: var(--demo-wc-card-front-color, #000);\n }\n\n #back {\n background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);\n color: var(--demo-wc-card-back-color, #fff);\n text-align: center;\n transform: rotateY(180deg) translate3d(0px, 0, 1px);\n }\n\n #back .note {\n color: #fff;\n }\n`"
}
],
"exports": [
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index aa727f7433b5..11eb76898cae 100644
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "web-components-kitchen-sink",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"private": true,
"description": "",
"keywords": [],
@@ -10,7 +10,7 @@
"scripts": {
"build-storybook": "build-storybook",
"storybook": "start-storybook -p 9006 --no-manager-cache",
- "generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\""
+ "generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\" --exclude \"./storybook-static\""
},
"resolutions": {
"@storybook/addon-a11y": "portal:../../addons/a11y",
@@ -57,10 +57,10 @@
"typescript": "4.2.4"
},
"dependencies": {
- "lit": "^2.0.0-rc.2"
+ "lit": "^2.0.2"
},
"devDependencies": {
- "@custom-elements-manifest/analyzer": "^0.3.11",
+ "@custom-elements-manifest/analyzer": "^0.5.7",
"@storybook/addon-a11y": "*",
"@storybook/addon-actions": "*",
"@storybook/addon-backgrounds": "*",
@@ -73,7 +73,7 @@
"@storybook/addon-viewport": "*",
"@storybook/web-components": "*",
"global": "^4.4.0",
- "jest": "^27.0.1",
+ "jest": "^27.3.1",
"typescript": "4.2.4"
},
"customElements": "custom-elements.json",
diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts
index 1596edbe27ff..f1e4d56cedc2 100644
--- a/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts
+++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts
@@ -13,7 +13,7 @@ export const NoDocs: Story = () => html`Click docs tab to see no docs error
NoDocs.parameters = { docs: { page: null } };
export const LargerThanPreview: Story = () =>
- html`HUGE`;
+ html`HUGE`;
export const MdxOverride: Story = () => html`Click docs tab to see MDX-overridden docs`;
MdxOverride.parameters = {
diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx b/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx
index 25b1df745979..906930d34547 100644
--- a/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx
+++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/addon-docs/blocks';
+import { Story } from '@storybook/addon-docs';
# Welcome!
diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock
index 6a5d0bab2b6a..13f9d3219930 100644
--- a/examples/web-components-kitchen-sink/yarn.lock
+++ b/examples/web-components-kitchen-sink/yarn.lock
@@ -1446,6 +1446,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.7.6":
+ version: 7.16.3
+ resolution: "@babel/runtime@npm:7.16.3"
+ dependencies:
+ regenerator-runtime: ^0.13.4
+ checksum: 37a7f334e8ad1383a78d39224ba9f95b94556189a0f1e93bc1b5729dc18d9eb5eb0ba3742073629cd4024fc101315fe8945931f80ba32518f651a4f0438ec4dc
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.12.7, @babel/template@npm:^7.14.5, @babel/template@npm:^7.3.3, @babel/template@npm:^7.7.0":
version: 7.14.5
resolution: "@babel/template@npm:7.14.5"
@@ -1510,22 +1519,22 @@ __metadata:
languageName: node
linkType: hard
-"@custom-elements-manifest/analyzer@npm:^0.3.11":
- version: 0.3.13
- resolution: "@custom-elements-manifest/analyzer@npm:0.3.13"
- dependencies:
- "@web/config-loader": ^0.1.3
- chokidar: ^3.5.2
- command-line-args: ^5.1.1
- comment-parser: ^1.1.5
- custom-elements-manifest: ^1.0.0
- debounce: ^1.2.1
- globby: ^11.0.1
- typescript: ^4.3.2
+"@custom-elements-manifest/analyzer@npm:^0.5.7":
+ version: 0.5.7
+ resolution: "@custom-elements-manifest/analyzer@npm:0.5.7"
+ dependencies:
+ "@web/config-loader": 0.1.3
+ chokidar: 3.5.2
+ command-line-args: 5.1.2
+ comment-parser: 1.2.4
+ custom-elements-manifest: 1.0.0
+ debounce: 1.2.1
+ globby: 11.0.4
+ typescript: ~4.3.2
bin:
cem: index.js
custom-elements-manifest: index.js
- checksum: 96c557b0e627522ec6b06934cd8a3317f0516b8d3eefaf9f25012ada72c1a260952ab37f5987608c158407a71c7df218196e2b136680ae0dcddccb2141f951e7
+ checksum: 48fc66cccd5f142a88404ffc211603c5b49c53f55072f8edc6ff05a511849923ed4b9691466591abdf21907c359cc4fce8d3058a5fa61425b8b97ccec4017f35
languageName: node
linkType: hard
@@ -1694,50 +1703,49 @@ __metadata:
languageName: node
linkType: hard
-"@jest/console@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/console@npm:27.0.6"
+"@jest/console@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/console@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
"@types/node": "*"
chalk: ^4.0.0
- jest-message-util: ^27.0.6
- jest-util: ^27.0.6
+ jest-message-util: ^27.3.1
+ jest-util: ^27.3.1
slash: ^3.0.0
- checksum: b0fd8e9d1faf1080b5ad8176147c7632c810a5b144a4b3a92ef1cdcda86779268c740beff1566e74fa3d276cb60587c4d68f25181b3a64fed88143c2beaf6bf7
+ checksum: 941145b3c52a641bb0a8fc0f1e3b7599e3f32ff393df8e5235b245b1cbcadacca47d8fd79385fe22af3f8ec1a9a5e9ba66407b3a35a49477d591a0de9568e262
languageName: node
linkType: hard
-"@jest/core@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/core@npm:27.0.6"
+"@jest/core@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/core@npm:27.3.1"
dependencies:
- "@jest/console": ^27.0.6
- "@jest/reporters": ^27.0.6
- "@jest/test-result": ^27.0.6
- "@jest/transform": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/console": ^27.3.1
+ "@jest/reporters": ^27.3.1
+ "@jest/test-result": ^27.3.1
+ "@jest/transform": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
ansi-escapes: ^4.2.1
chalk: ^4.0.0
emittery: ^0.8.1
exit: ^0.1.2
graceful-fs: ^4.2.4
- jest-changed-files: ^27.0.6
- jest-config: ^27.0.6
- jest-haste-map: ^27.0.6
- jest-message-util: ^27.0.6
+ jest-changed-files: ^27.3.0
+ jest-config: ^27.3.1
+ jest-haste-map: ^27.3.1
+ jest-message-util: ^27.3.1
jest-regex-util: ^27.0.6
- jest-resolve: ^27.0.6
- jest-resolve-dependencies: ^27.0.6
- jest-runner: ^27.0.6
- jest-runtime: ^27.0.6
- jest-snapshot: ^27.0.6
- jest-util: ^27.0.6
- jest-validate: ^27.0.6
- jest-watcher: ^27.0.6
+ jest-resolve: ^27.3.1
+ jest-resolve-dependencies: ^27.3.1
+ jest-runner: ^27.3.1
+ jest-runtime: ^27.3.1
+ jest-snapshot: ^27.3.1
+ jest-util: ^27.3.1
+ jest-validate: ^27.3.1
+ jest-watcher: ^27.3.1
micromatch: ^4.0.4
- p-each-series: ^2.1.0
rimraf: ^3.0.0
slash: ^3.0.0
strip-ansi: ^6.0.0
@@ -1746,56 +1754,57 @@ __metadata:
peerDependenciesMeta:
node-notifier:
optional: true
- checksum: e9167d0d3b9bd3c3ee0908f6f32ad8175ed4abdbb27c9c2a1175e6ad839efa1d521099e0d4a46a955f1fcc5903fc7acd9444c3066e1ac9704d1ba9397b70cf5d
+ checksum: 12116ba5925d50a717ebab5fd70a7712749440c10379d7e6d2f3b775ea24f0552db0bbd7432f924d357a27cc365ec90574c715fe705632d5d9f387ac0b210962
languageName: node
linkType: hard
-"@jest/environment@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/environment@npm:27.0.6"
+"@jest/environment@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/environment@npm:27.3.1"
dependencies:
- "@jest/fake-timers": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/fake-timers": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
- jest-mock: ^27.0.6
- checksum: 61ae0d128d3e45fd8578aefcb78c6fb152f59fd67d424604bae85afb8aded030c9f2ecf809f8cb6f2143b2ade3cb62086c12d4c9f9022ffc2272cd6804fe973d
+ jest-mock: ^27.3.0
+ checksum: 3d0773c1a118c1ec325aeb8df0d750b0e47d5a9a2d8dbefd7cd4afd7b645660c9ac4678be4cc1bac16f287473bfffbfce99b15b1801ce0c0781aab378adee1d3
languageName: node
linkType: hard
-"@jest/fake-timers@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/fake-timers@npm:27.0.6"
+"@jest/fake-timers@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/fake-timers@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
- "@sinonjs/fake-timers": ^7.0.2
+ "@jest/types": ^27.2.5
+ "@sinonjs/fake-timers": ^8.0.1
"@types/node": "*"
- jest-message-util: ^27.0.6
- jest-mock: ^27.0.6
- jest-util: ^27.0.6
- checksum: 8641807432cf10f242ce26b6f2cf5d54d0252af68db613ebbba2d3431d9e37d1788b7a87219febff10acf38d340140b957a5ed6f0b624e57238bbc2d759dc03c
+ jest-message-util: ^27.3.1
+ jest-mock: ^27.3.0
+ jest-util: ^27.3.1
+ checksum: d982565483d79d24a26146509a063a2547e30665f8287e33d09a120e5d30c3251b23f899b8a9708ae4817ccc18e8c0ec7342fae10699a3b3f154f5ae95afb27c
languageName: node
linkType: hard
-"@jest/globals@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/globals@npm:27.0.6"
+"@jest/globals@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/globals@npm:27.3.1"
dependencies:
- "@jest/environment": ^27.0.6
- "@jest/types": ^27.0.6
- expect: ^27.0.6
- checksum: f7d50d9bc7908e2609e8d9714662479997cad4ccb3b75ad9100c8cca7e5cc85d5c2f21ad0ccdf50c926d79917c4fc0178a7ad992020adb50c82337c8b1469c79
+ "@jest/environment": ^27.3.1
+ "@jest/types": ^27.2.5
+ expect: ^27.3.1
+ checksum: 2fecfe6e9380f0433346a8a8df74e86b55e113addfd0b3c4ab1e589e24cdb9dbb590e11b48c7b13428163c854d88cd09ed18b8c28dba2a6db09c97b6b302c2a7
languageName: node
linkType: hard
-"@jest/reporters@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/reporters@npm:27.0.6"
+"@jest/reporters@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/reporters@npm:27.3.1"
dependencies:
"@bcoe/v8-coverage": ^0.2.3
- "@jest/console": ^27.0.6
- "@jest/test-result": ^27.0.6
- "@jest/transform": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/console": ^27.3.1
+ "@jest/test-result": ^27.3.1
+ "@jest/transform": ^27.3.1
+ "@jest/types": ^27.2.5
+ "@types/node": "*"
chalk: ^4.0.0
collect-v8-coverage: ^1.0.0
exit: ^0.1.2
@@ -1806,21 +1815,21 @@ __metadata:
istanbul-lib-report: ^3.0.0
istanbul-lib-source-maps: ^4.0.0
istanbul-reports: ^3.0.2
- jest-haste-map: ^27.0.6
- jest-resolve: ^27.0.6
- jest-util: ^27.0.6
- jest-worker: ^27.0.6
+ jest-haste-map: ^27.3.1
+ jest-resolve: ^27.3.1
+ jest-util: ^27.3.1
+ jest-worker: ^27.3.1
slash: ^3.0.0
source-map: ^0.6.0
string-length: ^4.0.1
terminal-link: ^2.0.0
- v8-to-istanbul: ^8.0.0
+ v8-to-istanbul: ^8.1.0
peerDependencies:
node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
peerDependenciesMeta:
node-notifier:
optional: true
- checksum: 6f94746cc5c9a2e5c061706d376da49808e066afbe0c459e07f665640b273f01177b4a1933264b7bb2a4b91aafe3976287b69d2f0be62e871cec76685a699394
+ checksum: 91c013c9ccab60b9a42a68f502b2631428e697c4a5cbbba7e9be108887425e338b2fe3c92b41c22f7903b35fa8bb18b89a7d3be2beae757cafc004881eb339c7
languageName: node
linkType: hard
@@ -1835,27 +1844,27 @@ __metadata:
languageName: node
linkType: hard
-"@jest/test-result@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/test-result@npm:27.0.6"
+"@jest/test-result@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/test-result@npm:27.3.1"
dependencies:
- "@jest/console": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/console": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/istanbul-lib-coverage": ^2.0.0
collect-v8-coverage: ^1.0.0
- checksum: a5bc94d230ee12238236a877f0db68d3eeb24d259e62299a8e1da414c04c93e94025e1fe18a9a574af17050117a31ccc30621b291257498f5ed7add317b634e9
+ checksum: 777b6d6e79819f15d7f66826da01bebd2fae70c8d39bb0345cfc1b7fb8d5eba551fd93362f071b30f0534a9d0b79dad47b5e909a7435a7eacb8f7f1dcf1cc5c4
languageName: node
linkType: hard
-"@jest/test-sequencer@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/test-sequencer@npm:27.0.6"
+"@jest/test-sequencer@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/test-sequencer@npm:27.3.1"
dependencies:
- "@jest/test-result": ^27.0.6
+ "@jest/test-result": ^27.3.1
graceful-fs: ^4.2.4
- jest-haste-map: ^27.0.6
- jest-runtime: ^27.0.6
- checksum: b480d3d5bab7bc6cdc8314374fe7e9a502ceeeb7f1c847f299dd3436590de2089d90d846fe57a9223481e4e43930c1b97a720c811ad3ab6a19f75ad4a11460f0
+ jest-haste-map: ^27.3.1
+ jest-runtime: ^27.3.1
+ checksum: 49ae76912890bd1e500ff0191172feed55bf4a915869a830a95549156162fbc22efbad896eee9cc490eb7dfde1c579b87acb1e48363468d56b5c0e445a0d431b
languageName: node
linkType: hard
@@ -1882,26 +1891,26 @@ __metadata:
languageName: node
linkType: hard
-"@jest/transform@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/transform@npm:27.0.6"
+"@jest/transform@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "@jest/transform@npm:27.3.1"
dependencies:
"@babel/core": ^7.1.0
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
babel-plugin-istanbul: ^6.0.0
chalk: ^4.0.0
convert-source-map: ^1.4.0
fast-json-stable-stringify: ^2.0.0
graceful-fs: ^4.2.4
- jest-haste-map: ^27.0.6
+ jest-haste-map: ^27.3.1
jest-regex-util: ^27.0.6
- jest-util: ^27.0.6
+ jest-util: ^27.3.1
micromatch: ^4.0.4
pirates: ^4.0.1
slash: ^3.0.0
source-map: ^0.6.1
write-file-atomic: ^3.0.0
- checksum: 45b7e9a84262a3f4152cdf0f5a20f6af4550c8ff4ee8f372d7d63ff26451c8ac994a458e333664919a4937a37db2e937bcb8bfb38e6e7847b35cf062d8ea840e
+ checksum: d0d5f9feec2c6d0bf59e947d5f38a84b2cd2da67e842661b58d754fb83b3a054050fbc85b44a516c9572b5fc5a0333cfa630dc1cb084384309bcc31b65fcb774
languageName: node
linkType: hard
@@ -1918,23 +1927,23 @@ __metadata:
languageName: node
linkType: hard
-"@jest/types@npm:^27.0.6":
- version: 27.0.6
- resolution: "@jest/types@npm:27.0.6"
+"@jest/types@npm:^27.2.5":
+ version: 27.2.5
+ resolution: "@jest/types@npm:27.2.5"
dependencies:
"@types/istanbul-lib-coverage": ^2.0.0
"@types/istanbul-reports": ^3.0.0
"@types/node": "*"
"@types/yargs": ^16.0.0
chalk: ^4.0.0
- checksum: a73e6399087b6a13e713713238b862bf42219617b85116da00639305f86511ca4688aafe891e86e74350bc8d2424d42f6066416378f771e94e3f41e5ae818a18
+ checksum: 81004021d4b3958b48ca723fff9deb8dd585643bcbaa3e3bbd8c6934a78f1fe8ed05ecd98c1577ca01043e674d299ceead41f3cb6cd38a6d5a1e36d4033e18f3
languageName: node
linkType: hard
-"@lit/reactive-element@npm:^1.0.0-rc.2":
- version: 1.0.0-rc.2
- resolution: "@lit/reactive-element@npm:1.0.0-rc.2"
- checksum: b04c5550c9eb8f45f6012bed1ee009da18a94c26869e9e96b63793005f63527846a22db43208cba4c5105eca787cf3b91a95cc1b53a50240808e2e76f61d66b4
+"@lit/reactive-element@npm:^1.0.0":
+ version: 1.0.2
+ resolution: "@lit/reactive-element@npm:1.0.2"
+ checksum: 531eafe6a62908674735a52602fd7a7c6692e86d15d9dc9979185209ee7d323d456b8faa445a9d19c241309f43d7325660f99e6ae569c6cf7a7662aa1fbf2145
languageName: node
linkType: hard
@@ -2053,21 +2062,6 @@ __metadata:
languageName: node
linkType: hard
-"@reach/router@npm:^1.3.4":
- version: 1.3.4
- resolution: "@reach/router@npm:1.3.4"
- dependencies:
- create-react-context: 0.3.0
- invariant: ^2.2.3
- prop-types: ^15.6.1
- react-lifecycles-compat: ^3.0.4
- peerDependencies:
- react: 15.x || 16.x || 16.4.0-alpha.0911da3
- react-dom: 15.x || 16.x || 16.4.0-alpha.0911da3
- checksum: 083fcb658ae5cd0de2b7ebe56bbb8c1b4aa6ec035038d41916afcdd2f31ffd7ccdd6848f7ee8e53d562c31fc4c1b1953fd7007eb9d57daf65779f344ca5a5373
- languageName: node
- linkType: hard
-
"@sinonjs/commons@npm:^1.7.0":
version: 1.8.3
resolution: "@sinonjs/commons@npm:1.8.3"
@@ -2077,12 +2071,12 @@ __metadata:
languageName: node
linkType: hard
-"@sinonjs/fake-timers@npm:^7.0.2":
- version: 7.1.2
- resolution: "@sinonjs/fake-timers@npm:7.1.2"
+"@sinonjs/fake-timers@npm:^8.0.1":
+ version: 8.1.0
+ resolution: "@sinonjs/fake-timers@npm:8.1.0"
dependencies:
"@sinonjs/commons": ^1.7.0
- checksum: c94de47ff2eceb2a7009c970f932509e81e474b555ea994343aea4c87aed26844ba298a70d585c0769e63fe379ebae6aaad61d37b3bca71f740a8d3d49f1bc27
+ checksum: d6b795f9ddaf044daf184c151555ca557ccd23636f2ee3d2f76a9d128329f81fc1aac412f6f67239ab92cb9390aad9955b71df93cf4bd442c68b1f341e381ab6
languageName: node
linkType: hard
@@ -2090,14 +2084,14 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/channels": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/theming": 6.4.0-rc.5
axe-core: ^4.2.0
core-js: ^3.8.2
global: ^4.4.0
@@ -2121,12 +2115,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/theming": 6.4.0-rc.5
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
global: ^4.4.0
@@ -2135,6 +2129,7 @@ __metadata:
prop-types: ^15.7.2
react-inspector: ^5.1.0
regenerator-runtime: ^0.13.7
+ telejson: ^5.3.2
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
uuid-browser: ^3.1.0
@@ -2153,13 +2148,13 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/theming": 6.4.0-rc.5
core-js: ^3.8.2
global: ^4.4.0
memoizerific: ^1.11.3
@@ -2181,15 +2176,15 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core-common": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core-common": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/node-logger": 6.4.0-beta.14
- "@storybook/store": 6.4.0-beta.14
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/node-logger": 6.4.0-rc.5
+ "@storybook/store": 6.4.0-rc.5
+ "@storybook/theming": 6.4.0-rc.5
core-js: ^3.8.2
lodash: ^4.17.20
ts-dedent: ^2.0.0
@@ -2217,22 +2212,21 @@ __metadata:
"@mdx-js/loader": ^1.6.22
"@mdx-js/mdx": ^1.6.22
"@mdx-js/react": ^1.6.22
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/builder-webpack4": 6.4.0-beta.14
- "@storybook/client-api": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/builder-webpack4": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/csf-tools": 6.4.0-beta.14
- "@storybook/node-logger": 6.4.0-beta.14
- "@storybook/postinstall": 6.4.0-beta.14
- "@storybook/preview-web": 6.4.0-beta.14
- "@storybook/source-loader": 6.4.0-beta.14
- "@storybook/store": 6.4.0-beta.14
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/csf-tools": 6.4.0-rc.5
+ "@storybook/node-logger": 6.4.0-rc.5
+ "@storybook/postinstall": 6.4.0-rc.5
+ "@storybook/preview-web": 6.4.0-rc.5
+ "@storybook/source-loader": 6.4.0-rc.5
+ "@storybook/store": 6.4.0-rc.5
+ "@storybook/theming": 6.4.0-rc.5
acorn: ^7.4.1
acorn-jsx: ^5.3.1
acorn-walk: ^7.2.0
@@ -2256,14 +2250,14 @@ __metadata:
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
peerDependencies:
- "@storybook/angular": 6.4.0-beta.14
- "@storybook/html": 6.4.0-beta.14
- "@storybook/react": 6.4.0-beta.14
- "@storybook/vue": 6.4.0-beta.14
- "@storybook/vue3": 6.4.0-beta.14
- "@storybook/web-components": 6.4.0-beta.14
- lit: ^2.0.0-rc.1
- lit-html: ^1.4.1 || ^2.0.0-rc.3
+ "@storybook/angular": 6.4.0-rc.5
+ "@storybook/html": 6.4.0-rc.5
+ "@storybook/react": 6.4.0-rc.5
+ "@storybook/vue": 6.4.0-rc.5
+ "@storybook/vue3": 6.4.0-rc.5
+ "@storybook/web-components": 6.4.0-rc.5
+ lit: ^2.0.0
+ lit-html: ^1.4.1 || ^2.0.0
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
svelte: ^3.31.2
@@ -2332,11 +2326,11 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/router": 6.4.0-beta.14
+ "@storybook/router": 6.4.0-rc.5
"@types/qs": ^6.9.5
core-js: ^3.8.2
global: ^4.4.0
@@ -2360,16 +2354,16 @@ __metadata:
resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@jest/transform": ^26.6.2
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/client-api": 6.4.0-beta.14
- "@storybook/core": 6.4.0-beta.14
- "@storybook/core-client": 6.4.0-beta.14
- "@storybook/core-common": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/babel-plugin-require-context-hook": 1.0.1
+ "@storybook/client-api": 6.4.0-rc.5
+ "@storybook/core": 6.4.0-rc.5
+ "@storybook/core-client": 6.4.0-rc.5
+ "@storybook/core-common": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
"@types/glob": ^7.1.3
"@types/jest": ^26.0.16
"@types/jest-specific-snapshot": ^0.5.3
- babel-plugin-require-context-hook: ^1.0.0
core-js: ^3.8.2
glob: ^7.1.6
global: ^4.4.0
@@ -2435,13 +2429,13 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/router": 6.4.0-beta.14
- "@storybook/source-loader": 6.4.0-beta.14
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/router": 6.4.0-rc.5
+ "@storybook/source-loader": 6.4.0-rc.5
+ "@storybook/theming": 6.4.0-rc.5
core-js: ^3.8.2
estraverse: ^5.2.0
loader-utils: ^2.0.0
@@ -2464,12 +2458,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
+ "@storybook/theming": 6.4.0-rc.5
core-js: ^3.8.2
global: ^4.4.0
memoizerific: ^1.11.3
@@ -2490,13 +2484,13 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/api": 6.4.0-beta.14
- "@storybook/channels": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/router": 6.4.0-beta.14
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/router": 6.4.0-rc.5
+ "@storybook/theming": 6.4.0-rc.5
"@types/webpack-env": ^1.16.0
core-js: ^3.8.2
global: ^4.4.0
@@ -2511,21 +2505,18 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@reach/router": ^1.3.4
- "@storybook/channels": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/router": 6.4.0-beta.14
+ "@storybook/router": 6.4.0-rc.5
"@storybook/semver": ^7.3.2
- "@storybook/theming": 6.4.0-beta.14
- "@types/reach__router": ^1.3.7
+ "@storybook/theming": 6.4.0-rc.5
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
global: ^4.4.0
lodash: ^4.17.20
memoizerific: ^1.11.3
- qs: ^6.10.0
regenerator-runtime: ^0.13.7
store2: ^2.12.0
telejson: ^5.3.2
@@ -2537,6 +2528,13 @@ __metadata:
languageName: node
linkType: soft
+"@storybook/babel-plugin-require-context-hook@npm:1.0.1":
+ version: 1.0.1
+ resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1"
+ checksum: 3baca2838cd0a9901fb8019736e61de45b82f9f52afb279c3df73cd8d0fe42b0f0742e21556e7ebce71838afccdb95324153e425a337e617975812fe461eefc0
+ languageName: node
+ linkType: hard
+
"@storybook/builder-webpack4@portal:../../lib/builder-webpack4::locator=web-components-kitchen-sink%40workspace%3A.":
version: 0.0.0-use.local
resolution: "@storybook/builder-webpack4@portal:../../lib/builder-webpack4::locator=web-components-kitchen-sink%40workspace%3A."
@@ -2562,22 +2560,22 @@ __metadata:
"@babel/preset-env": ^7.12.11
"@babel/preset-react": ^7.12.10
"@babel/preset-typescript": ^7.12.7
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/channel-postmessage": 6.4.0-beta.14
- "@storybook/channels": 6.4.0-beta.14
- "@storybook/client-api": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core-common": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
- "@storybook/node-logger": 6.4.0-beta.14
- "@storybook/preview-web": 6.4.0-beta.14
- "@storybook/router": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/channel-postmessage": 6.4.0-rc.5
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-api": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core-common": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
+ "@storybook/node-logger": 6.4.0-rc.5
+ "@storybook/preview-web": 6.4.0-rc.5
+ "@storybook/router": 6.4.0-rc.5
"@storybook/semver": ^7.3.2
- "@storybook/store": 6.4.0-beta.14
- "@storybook/theming": 6.4.0-beta.14
- "@storybook/ui": 6.4.0-beta.14
+ "@storybook/store": 6.4.0-rc.5
+ "@storybook/theming": 6.4.0-rc.5
+ "@storybook/ui": 6.4.0-rc.5
"@types/node": ^14.0.10
"@types/webpack": ^4.41.26
autoprefixer: ^9.8.6
@@ -2624,9 +2622,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/channels": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
core-js: ^3.8.2
global: ^4.4.0
qs: ^6.10.0
@@ -2634,6 +2632,18 @@ __metadata:
languageName: node
linkType: soft
+"@storybook/channel-websocket@portal:../../lib/channel-websocket::locator=web-components-kitchen-sink%40workspace%3A.":
+ version: 0.0.0-use.local
+ resolution: "@storybook/channel-websocket@portal:../../lib/channel-websocket::locator=web-components-kitchen-sink%40workspace%3A."
+ dependencies:
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ core-js: ^3.8.2
+ global: ^4.4.0
+ telejson: ^5.3.2
+ languageName: node
+ linkType: soft
+
"@storybook/channels@portal:../../lib/channels::locator=web-components-kitchen-sink%40workspace%3A.":
version: 0.0.0-use.local
resolution: "@storybook/channels@portal:../../lib/channels::locator=web-components-kitchen-sink%40workspace%3A."
@@ -2648,13 +2658,13 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/channel-postmessage": 6.4.0-beta.14
- "@storybook/channels": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/channel-postmessage": 6.4.0-rc.5
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/store": 6.4.0-beta.14
+ "@storybook/store": 6.4.0-rc.5
"@types/qs": ^6.9.5
"@types/webpack-env": ^1.16.0
core-js: ^3.8.2
@@ -2665,6 +2675,7 @@ __metadata:
qs: ^6.10.0
regenerator-runtime: ^0.13.7
store2: ^2.12.0
+ synchronous-promise: ^2.0.15
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
peerDependencies:
@@ -2687,9 +2698,9 @@ __metadata:
resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@popperjs/core": ^2.6.0
- "@storybook/client-logger": 6.4.0-beta.14
+ "@storybook/client-logger": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/theming": 6.4.0-rc.5
"@types/color-convert": ^2.0.0
"@types/overlayscrollbars": ^1.12.0
"@types/react-syntax-highlighter": 11.0.5
@@ -2720,15 +2731,16 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/channel-postmessage": 6.4.0-beta.14
- "@storybook/client-api": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/channel-postmessage": 6.4.0-rc.5
+ "@storybook/channel-websocket": 6.4.0-rc.5
+ "@storybook/client-api": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/preview-web": 6.4.0-beta.14
- "@storybook/store": 6.4.0-beta.14
- "@storybook/ui": 6.4.0-beta.14
+ "@storybook/preview-web": 6.4.0-rc.5
+ "@storybook/store": 6.4.0-rc.5
+ "@storybook/ui": 6.4.0-rc.5
airbnb-js-shims: ^2.2.1
ansi-to-html: ^0.6.11
core-js: ^3.8.2
@@ -2774,9 +2786,8 @@ __metadata:
"@babel/preset-react": ^7.12.10
"@babel/preset-typescript": ^7.12.7
"@babel/register": ^7.12.1
- "@storybook/node-logger": 6.4.0-beta.14
+ "@storybook/node-logger": 6.4.0-rc.5
"@storybook/semver": ^7.3.2
- "@types/micromatch": ^4.0.1
"@types/node": ^14.0.10
"@types/pretty-hrtime": ^1.0.0
babel-loader: ^8.0.0
@@ -2794,11 +2805,12 @@ __metadata:
interpret: ^2.2.0
json5: ^2.1.3
lazy-universal-dotenv: ^3.0.1
- micromatch: ^4.0.2
+ picomatch: ^2.3.0
pkg-dir: ^5.0.0
pretty-hrtime: ^1.0.3
resolve-from: ^5.0.0
slash: ^3.0.0
+ telejson: ^5.3.2
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
webpack: 4
@@ -2824,15 +2836,16 @@ __metadata:
resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@discoveryjs/json-ext": ^0.5.3
- "@storybook/builder-webpack4": 6.4.0-beta.14
- "@storybook/core-client": 6.4.0-beta.14
- "@storybook/core-common": 6.4.0-beta.14
+ "@storybook/builder-webpack4": 6.4.0-rc.5
+ "@storybook/core-client": 6.4.0-rc.5
+ "@storybook/core-common": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/csf-tools": 6.4.0-beta.14
- "@storybook/manager-webpack4": 6.4.0-beta.14
- "@storybook/node-logger": 6.4.0-beta.14
+ "@storybook/csf-tools": 6.4.0-rc.5
+ "@storybook/manager-webpack4": 6.4.0-rc.5
+ "@storybook/node-logger": 6.4.0-rc.5
"@storybook/semver": ^7.3.2
- "@storybook/store": 6.4.0-beta.14
+ "@storybook/store": 6.4.0-rc.5
"@types/node": ^14.0.10
"@types/node-fetch": ^2.5.7
"@types/pretty-hrtime": ^1.0.0
@@ -2851,18 +2864,22 @@ __metadata:
fs-extra: ^9.0.1
globby: ^11.0.2
ip: ^1.1.5
+ lodash: ^4.17.20
node-fetch: ^2.6.1
pretty-hrtime: ^1.0.3
prompts: ^2.4.0
regenerator-runtime: ^0.13.7
serve-favicon: ^2.5.0
+ slash: ^3.0.0
+ telejson: ^5.3.3
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
watchpack: ^2.2.0
webpack: 4
+ ws: ^8.2.3
peerDependencies:
- "@storybook/builder-webpack5": 6.4.0-beta.14
- "@storybook/manager-webpack5": 6.4.0-beta.14
+ "@storybook/builder-webpack5": 6.4.0-rc.5
+ "@storybook/manager-webpack5": 6.4.0-rc.5
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
peerDependenciesMeta:
@@ -2879,10 +2896,10 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/core-client": 6.4.0-beta.14
- "@storybook/core-server": 6.4.0-beta.14
+ "@storybook/core-client": 6.4.0-rc.5
+ "@storybook/core-server": 6.4.0-rc.5
peerDependencies:
- "@storybook/builder-webpack5": 6.4.0-beta.14
+ "@storybook/builder-webpack5": 6.4.0-rc.5
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
webpack: "*"
@@ -2934,12 +2951,12 @@ __metadata:
"@babel/core": ^7.12.10
"@babel/plugin-transform-template-literals": ^7.12.1
"@babel/preset-react": ^7.12.10
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/core-client": 6.4.0-beta.14
- "@storybook/core-common": 6.4.0-beta.14
- "@storybook/node-logger": 6.4.0-beta.14
- "@storybook/theming": 6.4.0-beta.14
- "@storybook/ui": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/core-client": 6.4.0-rc.5
+ "@storybook/core-common": 6.4.0-rc.5
+ "@storybook/node-logger": 6.4.0-rc.5
+ "@storybook/theming": 6.4.0-rc.5
+ "@storybook/ui": 6.4.0-rc.5
"@types/node": ^14.0.10
"@types/webpack": ^4.41.26
babel-loader: ^8.0.0
@@ -3000,18 +3017,19 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/preview-web@portal:../../lib/preview-web::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/channel-postmessage": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/channel-postmessage": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/store": 6.4.0-beta.14
+ "@storybook/store": 6.4.0-rc.5
ansi-to-html: ^0.6.11
core-js: ^3.8.2
global: ^4.4.0
lodash: ^4.17.20
qs: ^6.10.0
regenerator-runtime: ^0.13.7
+ synchronous-promise: ^2.0.15
ts-dedent: ^2.0.0
unfetch: ^4.2.0
util-deprecate: ^1.0.2
@@ -3025,15 +3043,16 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@reach/router": ^1.3.4
- "@storybook/client-logger": 6.4.0-beta.14
- "@types/reach__router": ^1.3.7
+ "@storybook/client-logger": 6.4.0-rc.5
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
global: ^4.4.0
+ history: 5.0.0
lodash: ^4.17.20
memoizerific: ^1.11.3
qs: ^6.10.0
+ react-router: ^6.0.0
+ react-router-dom: ^6.0.0
ts-dedent: ^2.0.0
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -3057,8 +3076,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
core-js: ^3.8.2
estraverse: ^5.2.0
@@ -3077,9 +3096,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/store@portal:../../lib/store::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
@@ -3089,6 +3108,7 @@ __metadata:
regenerator-runtime: ^0.13.7
slash: ^3.0.0
stable: ^0.1.8
+ synchronous-promise: ^2.0.15
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
languageName: node
@@ -3101,7 +3121,7 @@ __metadata:
"@emotion/core": ^10.1.1
"@emotion/is-prop-valid": ^0.8.6
"@emotion/styled": ^10.0.27
- "@storybook/client-logger": 6.4.0-beta.14
+ "@storybook/client-logger": 6.4.0-rc.5
core-js: ^3.8.2
deep-object-diff: ^1.1.0
emotion-theming: ^10.0.27
@@ -3121,15 +3141,15 @@ __metadata:
resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@emotion/core": ^10.1.1
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/api": 6.4.0-beta.14
- "@storybook/channels": 6.4.0-beta.14
- "@storybook/client-logger": 6.4.0-beta.14
- "@storybook/components": 6.4.0-beta.14
- "@storybook/core-events": 6.4.0-beta.14
- "@storybook/router": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/api": 6.4.0-rc.5
+ "@storybook/channels": 6.4.0-rc.5
+ "@storybook/client-logger": 6.4.0-rc.5
+ "@storybook/components": 6.4.0-rc.5
+ "@storybook/core-events": 6.4.0-rc.5
+ "@storybook/router": 6.4.0-rc.5
"@storybook/semver": ^7.3.2
- "@storybook/theming": 6.4.0-beta.14
+ "@storybook/theming": 6.4.0-rc.5
copy-to-clipboard: ^3.3.1
core-js: ^3.8.2
core-js-pure: ^3.8.2
@@ -3161,13 +3181,13 @@ __metadata:
"@babel/plugin-syntax-dynamic-import": ^7.8.3
"@babel/plugin-syntax-import-meta": ^7.10.4
"@babel/preset-env": ^7.12.11
- "@storybook/addons": 6.4.0-beta.14
- "@storybook/client-api": 6.4.0-beta.14
- "@storybook/core": 6.4.0-beta.14
- "@storybook/core-common": 6.4.0-beta.14
+ "@storybook/addons": 6.4.0-rc.5
+ "@storybook/client-api": 6.4.0-rc.5
+ "@storybook/core": 6.4.0-rc.5
+ "@storybook/core-common": 6.4.0-rc.5
"@storybook/csf": 0.0.2--canary.87bc651.0
- "@storybook/preview-web": 6.4.0-beta.14
- "@storybook/store": 6.4.0-beta.14
+ "@storybook/preview-web": 6.4.0-rc.5
+ "@storybook/store": 6.4.0-rc.5
"@types/webpack-env": ^1.16.0
babel-plugin-bundled-import-meta: ^0.3.1
core-js: ^3.8.2
@@ -3178,7 +3198,7 @@ __metadata:
regenerator-runtime: ^0.13.7
ts-dedent: ^2.0.0
peerDependencies:
- lit-html: ^1.4.1 || ^2.0.0-rc.3
+ lit-html: ^1.4.1 || ^2.0.0
bin:
build-storybook: ./bin/build.js
start-storybook: ./bin/index.js
@@ -3234,13 +3254,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/braces@npm:*":
- version: 3.0.1
- resolution: "@types/braces@npm:3.0.1"
- checksum: 2052cf78c7378ceb692b823f743ac3a838b05f4c27f6eba3e5b6e298fd11d64322b1c7be1fa0eb53d99d9c6049202bf16a88ec1f40ebfd09e086b54eb69ff767
- languageName: node
- linkType: hard
-
"@types/color-convert@npm:^2.0.0":
version: 2.0.0
resolution: "@types/color-convert@npm:2.0.0"
@@ -3359,15 +3372,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/micromatch@npm:^4.0.1":
- version: 4.0.2
- resolution: "@types/micromatch@npm:4.0.2"
- dependencies:
- "@types/braces": "*"
- checksum: e557324460e658283778c77d0f8995ee95e371c4fd54474b3186e947486427cc4af66b841393304b65c09a7bb36710158260db7a7cf761384e1a9a728e82e6f4
- languageName: node
- linkType: hard
-
"@types/minimatch@npm:*":
version: 3.0.5
resolution: "@types/minimatch@npm:3.0.5"
@@ -3462,15 +3466,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/reach__router@npm:^1.3.7":
- version: 1.3.9
- resolution: "@types/reach__router@npm:1.3.9"
- dependencies:
- "@types/react": "*"
- checksum: 9145be1aca1f6bd34f99971381c8066a23e238452e39e76ec0549d0b240f6a39232d425f5c5425761e7e56562ae7f003e08a2291d724d503bdbc29686eb509d2
- languageName: node
- linkType: hard
-
"@types/react-syntax-highlighter@npm:11.0.5":
version: 11.0.5
resolution: "@types/react-syntax-highlighter@npm:11.0.5"
@@ -3519,10 +3514,10 @@ __metadata:
languageName: node
linkType: hard
-"@types/trusted-types@npm:^1.0.1":
- version: 1.0.6
- resolution: "@types/trusted-types@npm:1.0.6"
- checksum: 4bc61ac65b8e42d17c77a23f29cdf94e498acd2e23f4c00cf15c8281de94263ac313d46cbcd7cd1d03c066d497f9396845e3210ff0074f5f90f212cb3e8aac28
+"@types/trusted-types@npm:^2.0.2":
+ version: 2.0.2
+ resolution: "@types/trusted-types@npm:2.0.2"
+ checksum: 8c5253d7a297ba375b1dff7704013fb8d31c08c681d257db9e7e0624309cbb4a1e0c916bdd5a8c378992391126af0adb731720ba7642244a2f2c1ff42aba5bcf
languageName: node
linkType: hard
@@ -3599,7 +3594,7 @@ __metadata:
languageName: node
linkType: hard
-"@web/config-loader@npm:^0.1.3":
+"@web/config-loader@npm:0.1.3":
version: 0.1.3
resolution: "@web/config-loader@npm:0.1.3"
dependencies:
@@ -4168,13 +4163,20 @@ __metadata:
languageName: node
linkType: hard
-"array-back@npm:^3.0.1, array-back@npm:^3.1.0":
+"array-back@npm:^3.0.1":
version: 3.1.0
resolution: "array-back@npm:3.1.0"
checksum: bb1fe86aa8b39c21e73c68c7abf8b05ed939b8951a3b17527217f6a2a84e00e4cfa4fdec823081689c5e216709bf1f214a4f5feeee6726eaff83897fa1a7b8ee
languageName: node
linkType: hard
+"array-back@npm:^6.1.2":
+ version: 6.2.0
+ resolution: "array-back@npm:6.2.0"
+ checksum: e1a07e49fa667bbd964d3125440201ec6cc09b8e21f6462ad5d34931e93484b62dedb262ff24d636447ef1bd502f83cbbe48978c00b12d27d2c4a1d3ec35dc29
+ languageName: node
+ linkType: hard
+
"array-flatten@npm:1.1.1":
version: 1.1.1
resolution: "array-flatten@npm:1.1.1"
@@ -4351,21 +4353,21 @@ __metadata:
languageName: node
linkType: hard
-"babel-jest@npm:^27.0.6":
- version: 27.0.6
- resolution: "babel-jest@npm:27.0.6"
+"babel-jest@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "babel-jest@npm:27.3.1"
dependencies:
- "@jest/transform": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/transform": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/babel__core": ^7.1.14
babel-plugin-istanbul: ^6.0.0
- babel-preset-jest: ^27.0.6
+ babel-preset-jest: ^27.2.0
chalk: ^4.0.0
graceful-fs: ^4.2.4
slash: ^3.0.0
peerDependencies:
"@babel/core": ^7.8.0
- checksum: 8913af084be0e39d00b97e51e67d6bf16ad851e11c99008953447aacd78ae4d072622571f34219ab44b2e19c215dc6490c951fdf80b981a1a065bf8b36b50829
+ checksum: 1e969e614ba3ded6c74ada9fd14f69757992832128a31b7809eb9cce49263e844da8d4913d493523ea3e5902700a00b8641b2d69e1edb6a2347402a9c54873e4
languageName: node
linkType: hard
@@ -4457,15 +4459,15 @@ __metadata:
languageName: node
linkType: hard
-"babel-plugin-jest-hoist@npm:^27.0.6":
- version: 27.0.6
- resolution: "babel-plugin-jest-hoist@npm:27.0.6"
+"babel-plugin-jest-hoist@npm:^27.2.0":
+ version: 27.2.0
+ resolution: "babel-plugin-jest-hoist@npm:27.2.0"
dependencies:
"@babel/template": ^7.3.3
"@babel/types": ^7.3.3
"@types/babel__core": ^7.0.0
"@types/babel__traverse": ^7.0.6
- checksum: 24ddc1b5a41d64c3560ab8efc85c62b8dd50f960a38d7628dacbe3eb0f8b61c10a5d6f4e244658c91d7af00b7f067e2c7795c3809c5d8cc1b911fa4ebec6d1e9
+ checksum: 6aa5c7afc4589bb444a37b054fcd51a6eaf9181d17638b57c3c71322833e9176be4f5657407ee229ae6abedf2c404a305473e062296c2d01b4957363bcf116ef
languageName: node
linkType: hard
@@ -4528,13 +4530,6 @@ __metadata:
languageName: node
linkType: hard
-"babel-plugin-require-context-hook@npm:^1.0.0":
- version: 1.0.0
- resolution: "babel-plugin-require-context-hook@npm:1.0.0"
- checksum: 1abd58b832a0819daa39c39b6cafbd18ca7b1e13786ae5238f393c4e558d9c8642b04147334dc2b9990950098c300ba1362da4401124da6e6ac532234a72dd30
- languageName: node
- linkType: hard
-
"babel-plugin-syntax-jsx@npm:^6.18.0":
version: 6.18.0
resolution: "babel-plugin-syntax-jsx@npm:6.18.0"
@@ -4564,15 +4559,15 @@ __metadata:
languageName: node
linkType: hard
-"babel-preset-jest@npm:^27.0.6":
- version: 27.0.6
- resolution: "babel-preset-jest@npm:27.0.6"
+"babel-preset-jest@npm:^27.2.0":
+ version: 27.2.0
+ resolution: "babel-preset-jest@npm:27.2.0"
dependencies:
- babel-plugin-jest-hoist: ^27.0.6
+ babel-plugin-jest-hoist: ^27.2.0
babel-preset-current-node-syntax: ^1.0.0
peerDependencies:
"@babel/core": ^7.0.0
- checksum: b397ecb3897932679330e0b30db8ceef4e887e0a6a13ac8b18c91e5a5435b091514a0e2d14f62ec0c2b7d2d763967e607d279861c0c40a0f05889d003e0c3b84
+ checksum: 471c3170be7d176bc9d67b2ccf6b001a82fa808ccb069afceeb1cde58f1c0d695ba93d8ae4c6740e93be62f9d643f98918da7c0b4d3ed2d40afab69d88c6d26e
languageName: node
linkType: hard
@@ -5127,6 +5122,25 @@ __metadata:
languageName: node
linkType: hard
+"chokidar@npm:3.5.2, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2":
+ version: 3.5.2
+ resolution: "chokidar@npm:3.5.2"
+ dependencies:
+ anymatch: ~3.1.2
+ braces: ~3.0.2
+ fsevents: ~2.3.2
+ glob-parent: ~5.1.2
+ is-binary-path: ~2.1.0
+ is-glob: ~4.0.1
+ normalize-path: ~3.0.0
+ readdirp: ~3.6.0
+ dependenciesMeta:
+ fsevents:
+ optional: true
+ checksum: e7179a9dc4ce54c1ba660652319039b7ca0817a442dd05a45afcbdefcd4848b4276debfa9cf321798c2c567c6289da14dd48d9a1ee92056a7b526c554cffe129
+ languageName: node
+ linkType: hard
+
"chokidar@npm:^2.1.8":
version: 2.1.8
resolution: "chokidar@npm:2.1.8"
@@ -5150,25 +5164,6 @@ __metadata:
languageName: node
linkType: hard
-"chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2":
- version: 3.5.2
- resolution: "chokidar@npm:3.5.2"
- dependencies:
- anymatch: ~3.1.2
- braces: ~3.0.2
- fsevents: ~2.3.2
- glob-parent: ~5.1.2
- is-binary-path: ~2.1.0
- is-glob: ~4.0.1
- normalize-path: ~3.0.0
- readdirp: ~3.6.0
- dependenciesMeta:
- fsevents:
- optional: true
- checksum: e7179a9dc4ce54c1ba660652319039b7ca0817a442dd05a45afcbdefcd4848b4276debfa9cf321798c2c567c6289da14dd48d9a1ee92056a7b526c554cffe129
- languageName: node
- linkType: hard
-
"chownr@npm:^1.1.1":
version: 1.1.4
resolution: "chownr@npm:1.1.4"
@@ -5197,7 +5192,7 @@ __metadata:
languageName: node
linkType: hard
-"ci-info@npm:^3.1.1":
+"ci-info@npm:^3.2.0":
version: 3.2.0
resolution: "ci-info@npm:3.2.0"
checksum: 9479fb1d835c277b388f02b6f46f1a9355c8dbc07b33b896552949ed0d4708b317bf7221ef9a3c86e975549982f76d3b84b2c7c99a8b26220218c2f3a9b657d4
@@ -5408,15 +5403,15 @@ __metadata:
languageName: node
linkType: hard
-"command-line-args@npm:^5.1.1":
- version: 5.1.3
- resolution: "command-line-args@npm:5.1.3"
+"command-line-args@npm:5.1.2":
+ version: 5.1.2
+ resolution: "command-line-args@npm:5.1.2"
dependencies:
- array-back: ^3.1.0
+ array-back: ^6.1.2
find-replace: ^3.0.0
lodash.camelcase: ^4.3.0
typical: ^4.0.0
- checksum: 470f4e0188d9698085f76306c6739f203028b905588ed5f5e4585f521105f61502d35295a0b3126c8a4d9e1049993ed449ff6476ca181b35252a10e7fce9a929
+ checksum: e8dcb3152b106bd806c038dabb26f1fe0aced6d9ab06f02a80569c572124c1f55ef2686897823d787ab6c3cd1668b0314dd963457d07d063e67679fa3bd0d07d
languageName: node
linkType: hard
@@ -5441,10 +5436,10 @@ __metadata:
languageName: node
linkType: hard
-"comment-parser@npm:^1.1.5":
- version: 1.2.1
- resolution: "comment-parser@npm:1.2.1"
- checksum: aeb91f82e7b2eec22eb750dd878a4ce32eb6892027d467e12bb394d9fb3845f012111f2c9b920c0a0e7524e158d574d76b16856359177bf41ff3c88cdd239293
+"comment-parser@npm:1.2.4":
+ version: 1.2.4
+ resolution: "comment-parser@npm:1.2.4"
+ checksum: ff25ad318ead37621476cf7348dfab0991bc0f249fcc82deec99e9accf941f3dca764fb76ac5570950fbb3642bd9875cfaad9ec57661eec56bbc5c08e85e3dc9
languageName: node
linkType: hard
@@ -5725,19 +5720,6 @@ __metadata:
languageName: node
linkType: hard
-"create-react-context@npm:0.3.0":
- version: 0.3.0
- resolution: "create-react-context@npm:0.3.0"
- dependencies:
- gud: ^1.0.0
- warning: ^4.0.3
- peerDependencies:
- prop-types: ^15.0.0
- react: ^0.14.0 || ^15.0.0 || ^16.0.0
- checksum: 3f9dfde23da59e3f748b5f1b06c7ff8cbf48095cf2d62212427195860f1ee4b2b0b475280c19592f7fffb9fd100fd739af687281d7c5c93806d519bf66f6dd86
- languageName: node
- linkType: hard
-
"cross-spawn@npm:7.0.3, cross-spawn@npm:^7.0.3":
version: 7.0.3
resolution: "cross-spawn@npm:7.0.3"
@@ -5870,7 +5852,7 @@ __metadata:
languageName: node
linkType: hard
-"custom-elements-manifest@npm:^1.0.0":
+"custom-elements-manifest@npm:1.0.0":
version: 1.0.0
resolution: "custom-elements-manifest@npm:1.0.0"
checksum: 6e8e4dcc6ae4f846e92b6ec0ef5c8d155889dae6df7210cbf3e9c47387ffab83fce8fde96a1aaa9766304cb08afa17198da4ef8560745311bdf3ba280fc77b40
@@ -5895,7 +5877,7 @@ __metadata:
languageName: node
linkType: hard
-"debounce@npm:^1.2.1":
+"debounce@npm:1.2.1":
version: 1.2.1
resolution: "debounce@npm:1.2.1"
checksum: 6c9320aa0973fc42050814621a7a8a78146c1975799b5b3cc1becf1f77ba9a5aa583987884230da0842a03f385def452fad5d60db97c3d1c8b824e38a8edf500
@@ -6703,17 +6685,17 @@ __metadata:
languageName: node
linkType: hard
-"expect@npm:^27.0.6":
- version: 27.0.6
- resolution: "expect@npm:27.0.6"
+"expect@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "expect@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
ansi-styles: ^5.0.0
- jest-get-type: ^27.0.6
- jest-matcher-utils: ^27.0.6
- jest-message-util: ^27.0.6
+ jest-get-type: ^27.3.1
+ jest-matcher-utils: ^27.3.1
+ jest-message-util: ^27.3.1
jest-regex-util: ^27.0.6
- checksum: 6fb57916ab9ae4a449ac0fd1150e0211f6ff5991add2c5826ad046a07e5a147d2c164bc85d4f55ebb063bc4bc05584a5dc9f640f69427565643f6dd154f2a1d8
+ checksum: 8c10ff875b74c80b4896d5457fce45faa0cca044a6ec6910b51e2c08d29238cad0b013dc46379a34338bf42b05e3566ffae5fa2c10229aced695fae9995eab2e
languageName: node
linkType: hard
@@ -7454,7 +7436,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"globby@npm:^11.0.1, globby@npm:^11.0.2":
+"globby@npm:11.0.4, globby@npm:^11.0.2":
version: 11.0.4
resolution: "globby@npm:11.0.4"
dependencies:
@@ -7491,13 +7473,6 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"gud@npm:^1.0.0":
- version: 1.0.0
- resolution: "gud@npm:1.0.0"
- checksum: a4db6edc18e2c4e3a22dc9e639e40a4e5650d53dae9cf384a96d5380dfa17ddda376cf6b7797a5c30d140d2532e5a69d167bdb70c2c151dd673253bac6b027f3
- languageName: node
- linkType: hard
-
"gzip-size@npm:5.1.1":
version: 5.1.1
resolution: "gzip-size@npm:5.1.1"
@@ -7735,6 +7710,24 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
+"history@npm:5.0.0":
+ version: 5.0.0
+ resolution: "history@npm:5.0.0"
+ dependencies:
+ "@babel/runtime": ^7.7.6
+ checksum: 6e1a0880c1d67a9040117e5b426e71bc35642488485354d378cb635f194c2177979558b6fb537972840c6993d92c1ae971ab6c33bf77be1b1f135349ea65cde0
+ languageName: node
+ linkType: hard
+
+"history@npm:^5.1.0":
+ version: 5.1.0
+ resolution: "history@npm:5.1.0"
+ dependencies:
+ "@babel/runtime": ^7.7.6
+ checksum: f76cd11b905cd947e9db371d7bf6e6c403d52e081ae88953c1ba6208d741470fd8f85f22acfb0d9fb11ef7d8811e6fbd20d0a7b87f05263e2cc80393ba1be315
+ languageName: node
+ linkType: hard
+
"hmac-drbg@npm:^1.0.1":
version: 1.0.1
resolution: "hmac-drbg@npm:1.0.1"
@@ -8092,7 +8085,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"invariant@npm:^2.2.3, invariant@npm:^2.2.4":
+"invariant@npm:^2.2.4":
version: 2.2.4
resolution: "invariant@npm:2.2.4"
dependencies:
@@ -8239,17 +8232,6 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"is-ci@npm:^3.0.0":
- version: 3.0.0
- resolution: "is-ci@npm:3.0.0"
- dependencies:
- ci-info: ^3.1.1
- bin:
- is-ci: bin.js
- checksum: 151a9cc5907a61d0b6805692d24fb55db5741ed073371f445ba7d0efd8c0a752f6a78734ef45580025288e026e15bfcbc03fc575e20ae07de624a39188ed866f
- languageName: node
- linkType: hard
-
"is-core-module@npm:^2.2.0":
version: 2.5.0
resolution: "is-core-module@npm:2.5.0"
@@ -8715,60 +8697,60 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-changed-files@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-changed-files@npm:27.0.6"
+"jest-changed-files@npm:^27.3.0":
+ version: 27.3.0
+ resolution: "jest-changed-files@npm:27.3.0"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
execa: ^5.0.0
throat: ^6.0.1
- checksum: 30ce74e63210006725b08ec3fc0a83d683a0ebe27e9f56fb95e2b429825a7be6d3ef62bad0b1e33f481372579f89c1ecd6125061a731ae255cbaa6dc432c1a21
+ checksum: 57d0f7958f2d03d620a70cb63a988df5e6fdae462d56a6fa09114c8e56c6f146a8ec1401e27852d895ec5fd37c797c52bc643422b227efe1add00eff090b3486
languageName: node
linkType: hard
-"jest-circus@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-circus@npm:27.0.6"
+"jest-circus@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-circus@npm:27.3.1"
dependencies:
- "@jest/environment": ^27.0.6
- "@jest/test-result": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/environment": ^27.3.1
+ "@jest/test-result": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
chalk: ^4.0.0
co: ^4.6.0
dedent: ^0.7.0
- expect: ^27.0.6
+ expect: ^27.3.1
is-generator-fn: ^2.0.0
- jest-each: ^27.0.6
- jest-matcher-utils: ^27.0.6
- jest-message-util: ^27.0.6
- jest-runtime: ^27.0.6
- jest-snapshot: ^27.0.6
- jest-util: ^27.0.6
- pretty-format: ^27.0.6
+ jest-each: ^27.3.1
+ jest-matcher-utils: ^27.3.1
+ jest-message-util: ^27.3.1
+ jest-runtime: ^27.3.1
+ jest-snapshot: ^27.3.1
+ jest-util: ^27.3.1
+ pretty-format: ^27.3.1
slash: ^3.0.0
stack-utils: ^2.0.3
throat: ^6.0.1
- checksum: 644697a65324edb86fa2d4dff0f4d05fdd168a8bb04624178a58f51f8225d5b3ca67096ee2e35b4588f249d51cdd6ab7226172a6144764e2d416eabfb8c3f3fe
+ checksum: fed963f6c5b4104b1ff2d30f4d1dfba7a8d59ff0185815819f1e3fa62ffcd82ac96f0b878a5bd520976817542e60bac9266054bec249577d15f9f8e3e36446bf
languageName: node
linkType: hard
-"jest-cli@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-cli@npm:27.0.6"
+"jest-cli@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-cli@npm:27.3.1"
dependencies:
- "@jest/core": ^27.0.6
- "@jest/test-result": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/core": ^27.3.1
+ "@jest/test-result": ^27.3.1
+ "@jest/types": ^27.2.5
chalk: ^4.0.0
exit: ^0.1.2
graceful-fs: ^4.2.4
import-local: ^3.0.2
- jest-config: ^27.0.6
- jest-util: ^27.0.6
- jest-validate: ^27.0.6
+ jest-config: ^27.3.1
+ jest-util: ^27.3.1
+ jest-validate: ^27.3.1
prompts: ^2.0.1
- yargs: ^16.0.3
+ yargs: ^16.2.0
peerDependencies:
node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
peerDependenciesMeta:
@@ -8776,41 +8758,41 @@ fsevents@^1.2.7:
optional: true
bin:
jest: bin/jest.js
- checksum: a73b258d98c740a64fd9755a7aeb0b8ef6ae58076b7cc285cb17d36969aa99fbe8c76f3e1f11bfcbb88fd3388bd1abdf4b6cae08975104b202bbd481a3dc2696
+ checksum: df80909c21cb76c919b71c43d87b96108d15c23f379e6b735792a81ac391a234bc38c9f74fb271bb1544889304431c452f11f509520c2c0f8c58002e4bc728ca
languageName: node
linkType: hard
-"jest-config@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-config@npm:27.0.6"
+"jest-config@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-config@npm:27.3.1"
dependencies:
"@babel/core": ^7.1.0
- "@jest/test-sequencer": ^27.0.6
- "@jest/types": ^27.0.6
- babel-jest: ^27.0.6
+ "@jest/test-sequencer": ^27.3.1
+ "@jest/types": ^27.2.5
+ babel-jest: ^27.3.1
chalk: ^4.0.0
+ ci-info: ^3.2.0
deepmerge: ^4.2.2
glob: ^7.1.1
graceful-fs: ^4.2.4
- is-ci: ^3.0.0
- jest-circus: ^27.0.6
- jest-environment-jsdom: ^27.0.6
- jest-environment-node: ^27.0.6
- jest-get-type: ^27.0.6
- jest-jasmine2: ^27.0.6
+ jest-circus: ^27.3.1
+ jest-environment-jsdom: ^27.3.1
+ jest-environment-node: ^27.3.1
+ jest-get-type: ^27.3.1
+ jest-jasmine2: ^27.3.1
jest-regex-util: ^27.0.6
- jest-resolve: ^27.0.6
- jest-runner: ^27.0.6
- jest-util: ^27.0.6
- jest-validate: ^27.0.6
+ jest-resolve: ^27.3.1
+ jest-runner: ^27.3.1
+ jest-util: ^27.3.1
+ jest-validate: ^27.3.1
micromatch: ^4.0.4
- pretty-format: ^27.0.6
+ pretty-format: ^27.3.1
peerDependencies:
ts-node: ">=9.0.0"
peerDependenciesMeta:
ts-node:
optional: true
- checksum: 617381c2722d41d41c5f00ab23c8fa773a7cde2842446e7122aa9ee96ac9e5c927fa33bac7f6f2efb783cbed7987c420e52f3ce5bc0c767d9ed7d760ec0b9341
+ checksum: 9e8bfcc8616b2bb0368d32a617f6e4813957d6581c9e57ca6dbe209853c8c19616aff63090e3306f93ad2f1dfc1f3251ee59d2612e1d7ab9c6e8899dcd1bf144
languageName: node
linkType: hard
@@ -8826,15 +8808,15 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-diff@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-diff@npm:27.0.6"
+"jest-diff@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-diff@npm:27.3.1"
dependencies:
chalk: ^4.0.0
diff-sequences: ^27.0.6
- jest-get-type: ^27.0.6
- pretty-format: ^27.0.6
- checksum: 74b68faf26526ece33b82bfcf589f297f6fb174f38c7d5298477bd937aa63da97b58ddc47d986ab920f419bb812fc25430e77decf114781a00fdfc1826e94349
+ jest-get-type: ^27.3.1
+ pretty-format: ^27.3.1
+ checksum: 1b983aaa3de7fffd934f85b531ea2274cc618443a48fa35ef1da1a90475465cc5f7d902ab4f2a560caee8c448a56911e677b239f47810616952764f52fd04410
languageName: node
linkType: hard
@@ -8847,45 +8829,45 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-each@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-each@npm:27.0.6"
+"jest-each@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-each@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
chalk: ^4.0.0
- jest-get-type: ^27.0.6
- jest-util: ^27.0.6
- pretty-format: ^27.0.6
- checksum: 45dce49ae09bc9dc8435fafc470aece2d1636b58c98a1b3c58d067f664c0e34885dbc4381e0fe51db01f837293e994d665eeda10421ce96749c16fff538b35ee
+ jest-get-type: ^27.3.1
+ jest-util: ^27.3.1
+ pretty-format: ^27.3.1
+ checksum: 5496cc19d85f35459672f28fbfc03cdee1cfe1e5f1ac3efd903aac7f681eade75c21bab5fbd359720bad0c3b28d28d11b5442e091c2fdefb0a3695edc34d623e
languageName: node
linkType: hard
-"jest-environment-jsdom@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-environment-jsdom@npm:27.0.6"
+"jest-environment-jsdom@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-environment-jsdom@npm:27.3.1"
dependencies:
- "@jest/environment": ^27.0.6
- "@jest/fake-timers": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/environment": ^27.3.1
+ "@jest/fake-timers": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
- jest-mock: ^27.0.6
- jest-util: ^27.0.6
+ jest-mock: ^27.3.0
+ jest-util: ^27.3.1
jsdom: ^16.6.0
- checksum: 4b9978d8ac88ba4ffa8fa357326f49d8f57d2773c5772f0adda064381b0cb3688c03c93d3d3408d263ac0aa42bdbbf7a7ad64ccf3dbd7a4def34f0b5a1c69b23
+ checksum: 02d9e26bd0c2b39e52e1515acd680a11d8309dbf5203444c4871b28f6843ecc4bb9a867533fa96fe20868be99a64dc36725356835dfe75c81e9f100c6d21f4d2
languageName: node
linkType: hard
-"jest-environment-node@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-environment-node@npm:27.0.6"
+"jest-environment-node@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-environment-node@npm:27.3.1"
dependencies:
- "@jest/environment": ^27.0.6
- "@jest/fake-timers": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/environment": ^27.3.1
+ "@jest/fake-timers": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
- jest-mock: ^27.0.6
- jest-util: ^27.0.6
- checksum: 8d05f1a6041b982abd4a9839a4a80cc6de74c93d153ade9adf2eeb2fccd3a12a9b9c18078972bcdf497a15463735e86861154f428a2e4c39e763d9294a694843
+ jest-mock: ^27.3.0
+ jest-util: ^27.3.1
+ checksum: d3d0f8ecfe1ed8ad827e626df6a0a26308385148207f9a24ab51c50e51788c812d3ad940c7728f235752aa7c7da5facea5952c32873e4a2be546164bb66ef608
languageName: node
linkType: hard
@@ -8896,10 +8878,10 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-get-type@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-get-type@npm:27.0.6"
- checksum: 41cf3d3a1f684a7034e11c876b4a2b1a2f63fcba6e277a4fe111b4e2c9ec02b73d1917aa1edcb6a8681124e726590db97d053626025584005571f63df0173d5c
+"jest-get-type@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-get-type@npm:27.3.1"
+ checksum: 738e5062ffd979d817bfe6c14e64813f9541221c1c77033bae003a6fbb659535c646578d8aae6d303b6fb7c91101d12af08847756ff5bc7b018d238a4ff02bd1
languageName: node
linkType: hard
@@ -8928,11 +8910,11 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-haste-map@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-haste-map@npm:27.0.6"
+"jest-haste-map@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-haste-map@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
"@types/graceful-fs": ^4.1.2
"@types/node": "*"
anymatch: ^3.0.3
@@ -8941,50 +8923,50 @@ fsevents@^1.2.7:
graceful-fs: ^4.2.4
jest-regex-util: ^27.0.6
jest-serializer: ^27.0.6
- jest-util: ^27.0.6
- jest-worker: ^27.0.6
+ jest-util: ^27.3.1
+ jest-worker: ^27.3.1
micromatch: ^4.0.4
walker: ^1.0.7
dependenciesMeta:
fsevents:
optional: true
- checksum: 31feaf9e976c1c380da6f5d0c12dab0c78dd5da5d8278f4672e5899e4d248fd29f53428777877a6b4f1ec207582341148c6f59dc0eb1ab8a9c04025a2cfef6ca
+ checksum: 4a069faaa736d2b9a21ba3962e0da629807515c51defe930dc9fcbb614ba2c594aa0351887d063a6f59ce8b0a55dabab88d6bb8f69f00fd3b6d44216bd1c73c1
languageName: node
linkType: hard
-"jest-jasmine2@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-jasmine2@npm:27.0.6"
+"jest-jasmine2@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-jasmine2@npm:27.3.1"
dependencies:
"@babel/traverse": ^7.1.0
- "@jest/environment": ^27.0.6
+ "@jest/environment": ^27.3.1
"@jest/source-map": ^27.0.6
- "@jest/test-result": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/test-result": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
chalk: ^4.0.0
co: ^4.6.0
- expect: ^27.0.6
+ expect: ^27.3.1
is-generator-fn: ^2.0.0
- jest-each: ^27.0.6
- jest-matcher-utils: ^27.0.6
- jest-message-util: ^27.0.6
- jest-runtime: ^27.0.6
- jest-snapshot: ^27.0.6
- jest-util: ^27.0.6
- pretty-format: ^27.0.6
+ jest-each: ^27.3.1
+ jest-matcher-utils: ^27.3.1
+ jest-message-util: ^27.3.1
+ jest-runtime: ^27.3.1
+ jest-snapshot: ^27.3.1
+ jest-util: ^27.3.1
+ pretty-format: ^27.3.1
throat: ^6.0.1
- checksum: 847aeb8cee22037cbba06d9cca754215da1c44e4a128d3d7bba09152f0a00740065dfac331f190e2a3dc6a5a27d319a34b86702011b2ebb50d307c565ed58427
+ checksum: e147c97d7a733854b61b5788d117dcc21ca7c9a08ca0bf8c61b2ac178c515437bf629742e85252d32774a7bcc485335b8b7301b57f7a806de3abe207167d9f70
languageName: node
linkType: hard
-"jest-leak-detector@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-leak-detector@npm:27.0.6"
+"jest-leak-detector@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-leak-detector@npm:27.3.1"
dependencies:
- jest-get-type: ^27.0.6
- pretty-format: ^27.0.6
- checksum: 8d95997e5b21b23d79232b8ef0856675ffb87b8a6509e82a0457774365eb22d4fea35432519a094ca811cf65b45e6762e6d87ccae30ee09223d04aad4c203bc3
+ jest-get-type: ^27.3.1
+ pretty-format: ^27.3.1
+ checksum: aefa5b9cb39a94ef9dbade5d9ec5d1962e4947381af70123107a6b286467810d7d459190a2a541ee19935f3f75338b111b4278a1880948a858df6369d7c36d1a
languageName: node
linkType: hard
@@ -9000,15 +8982,15 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-matcher-utils@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-matcher-utils@npm:27.0.6"
+"jest-matcher-utils@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-matcher-utils@npm:27.3.1"
dependencies:
chalk: ^4.0.0
- jest-diff: ^27.0.6
- jest-get-type: ^27.0.6
- pretty-format: ^27.0.6
- checksum: 1315ec25add6e083f56b10dbb423786bd876eafedd6d1bf8aa93a654d82152403f751b817a94a333e4c6d848630ea2fab762147aa078d0d4bc9be18bb0d54c5a
+ jest-diff: ^27.3.1
+ jest-get-type: ^27.3.1
+ pretty-format: ^27.3.1
+ checksum: adb3ac4e3138dda764dfffb0d0b898911b7e53377ee79d4b6b52ba31b81e4f5680dac5e3307251d7dcc0b386f57de2f148f7451b43abaea38ca05c309f001824
languageName: node
linkType: hard
@@ -9029,30 +9011,30 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-message-util@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-message-util@npm:27.0.6"
+"jest-message-util@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-message-util@npm:27.3.1"
dependencies:
"@babel/code-frame": ^7.12.13
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
"@types/stack-utils": ^2.0.0
chalk: ^4.0.0
graceful-fs: ^4.2.4
micromatch: ^4.0.4
- pretty-format: ^27.0.6
+ pretty-format: ^27.3.1
slash: ^3.0.0
stack-utils: ^2.0.3
- checksum: fdff72399e5fe11f998d9620549325218cb5d0a7aa4e8d2a8c3df988f400dd01eda4c525bd13cd2284024363ec7f05c201332fb0409cb75597e820760243d365
+ checksum: 4be29d567aa0678b37dcf9b5440655dad2d10ba920c006e71491e8844c2d3414e7ddb4455483ef74c02d38da8bca27dbe079d96e8098d773ba04055be8c76a29
languageName: node
linkType: hard
-"jest-mock@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-mock@npm:27.0.6"
+"jest-mock@npm:^27.3.0":
+ version: 27.3.0
+ resolution: "jest-mock@npm:27.3.0"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
"@types/node": "*"
- checksum: a49165d2b61bad11a648bdbdaea9fe8baf8eb498e1248ff8edcc77fc12a96aff3edd25030aea8bf326fa04e87be3643be5c845ee6dae1c49a710c64ddd21cd87
+ checksum: 90033366823d6c7ad847dae1fec5d1bc5a103c83342ca5867fe9b69fefefbcb12d08fe718202e92cafd72bd091558ecd663b4c261e2e85b6c9244c3fc6951f35
languageName: node
linkType: hard
@@ -9082,14 +9064,14 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-resolve-dependencies@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-resolve-dependencies@npm:27.0.6"
+"jest-resolve-dependencies@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-resolve-dependencies@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
jest-regex-util: ^27.0.6
- jest-snapshot: ^27.0.6
- checksum: 2b9ee28dd1ebbe8b45ecfa1685c28d4a757a4a883d8d4fb64a74790c81b94aecd68f20b39ff9feb3160753ca2a4b2b1abc58684e40fa2b737b6a77234cda8777
+ jest-snapshot: ^27.3.1
+ checksum: 0eb1ec7b9524d7997b7223edc55bc9cff887d99de4a1d77f083e2970670d4c8c76dd9dddf471cfc1c6435c39b30dbcc270045b4d4213ec4b905885c86df2e56c
languageName: node
linkType: hard
@@ -9109,84 +9091,85 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-resolve@npm:27.0.6, jest-resolve@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-resolve@npm:27.0.6"
+"jest-resolve@npm:27.3.1, jest-resolve@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-resolve@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
chalk: ^4.0.0
- escalade: ^3.1.1
graceful-fs: ^4.2.4
+ jest-haste-map: ^27.3.1
jest-pnp-resolver: ^1.2.2
- jest-util: ^27.0.6
- jest-validate: ^27.0.6
+ jest-util: ^27.3.1
+ jest-validate: ^27.3.1
resolve: ^1.20.0
+ resolve.exports: ^1.1.0
slash: ^3.0.0
- checksum: aa54bc1cab0d20cb6197a8d577e1dd8635caf19b7083580e72d3e1fd2788599176adf010d3421ed49fad11efa239031b9b954f7d455c944c055246956a0e8b91
+ checksum: 7be60416e82c66edd5cb636177193e222f8aa3fe9f948f80877f06d6fcef07f55e35e636c6a4fa020dd91f84deab84b80e36adb3f9e6bdcd7a153010ebc0c2ec
languageName: node
linkType: hard
-"jest-runner@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-runner@npm:27.0.6"
+"jest-runner@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-runner@npm:27.3.1"
dependencies:
- "@jest/console": ^27.0.6
- "@jest/environment": ^27.0.6
- "@jest/test-result": ^27.0.6
- "@jest/transform": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/console": ^27.3.1
+ "@jest/environment": ^27.3.1
+ "@jest/test-result": ^27.3.1
+ "@jest/transform": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
chalk: ^4.0.0
emittery: ^0.8.1
exit: ^0.1.2
graceful-fs: ^4.2.4
jest-docblock: ^27.0.6
- jest-environment-jsdom: ^27.0.6
- jest-environment-node: ^27.0.6
- jest-haste-map: ^27.0.6
- jest-leak-detector: ^27.0.6
- jest-message-util: ^27.0.6
- jest-resolve: ^27.0.6
- jest-runtime: ^27.0.6
- jest-util: ^27.0.6
- jest-worker: ^27.0.6
+ jest-environment-jsdom: ^27.3.1
+ jest-environment-node: ^27.3.1
+ jest-haste-map: ^27.3.1
+ jest-leak-detector: ^27.3.1
+ jest-message-util: ^27.3.1
+ jest-resolve: ^27.3.1
+ jest-runtime: ^27.3.1
+ jest-util: ^27.3.1
+ jest-worker: ^27.3.1
source-map-support: ^0.5.6
throat: ^6.0.1
- checksum: f65ebbafeb971765e103ea9c75e89379ad57686a58f22d306c2316d53be3e65511b849ad4ca8574cfd23edd35e80ff9bdef45380c1a85f5135503917725e4230
+ checksum: 7283279c8b77b28503e92fddc262b62b4aab6d39076bdb95317bedb257bd8907cca6f61984a28481191e02ebece8868b2d2685b6921a67d2c9528e0d916ef8af
languageName: node
linkType: hard
-"jest-runtime@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-runtime@npm:27.0.6"
+"jest-runtime@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-runtime@npm:27.3.1"
dependencies:
- "@jest/console": ^27.0.6
- "@jest/environment": ^27.0.6
- "@jest/fake-timers": ^27.0.6
- "@jest/globals": ^27.0.6
+ "@jest/console": ^27.3.1
+ "@jest/environment": ^27.3.1
+ "@jest/globals": ^27.3.1
"@jest/source-map": ^27.0.6
- "@jest/test-result": ^27.0.6
- "@jest/transform": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/test-result": ^27.3.1
+ "@jest/transform": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/yargs": ^16.0.0
chalk: ^4.0.0
cjs-module-lexer: ^1.0.0
collect-v8-coverage: ^1.0.0
+ execa: ^5.0.0
exit: ^0.1.2
glob: ^7.1.3
graceful-fs: ^4.2.4
- jest-haste-map: ^27.0.6
- jest-message-util: ^27.0.6
- jest-mock: ^27.0.6
+ jest-haste-map: ^27.3.1
+ jest-message-util: ^27.3.1
+ jest-mock: ^27.3.0
jest-regex-util: ^27.0.6
- jest-resolve: ^27.0.6
- jest-snapshot: ^27.0.6
- jest-util: ^27.0.6
- jest-validate: ^27.0.6
+ jest-resolve: ^27.3.1
+ jest-snapshot: ^27.3.1
+ jest-util: ^27.3.1
+ jest-validate: ^27.3.1
slash: ^3.0.0
strip-bom: ^4.0.0
- yargs: ^16.0.3
- checksum: b980801e96e259ef0ca2f461ec8f341957e8f3efcc531741fb5bfc6a0b6887754102a9400154291d81946541d90a861fb7b69d32fcba0528eebb1c0fe404c6b5
+ yargs: ^16.2.0
+ checksum: 0c21196d03af87574a198fe48753101f92e8cf2f82e4a311781ea0441a2e46697cc584e5b38d1979b7012f5bb359b419c93ce8e1655c1f39aa9db8032cd77caa
languageName: node
linkType: hard
@@ -9234,9 +9217,9 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-snapshot@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-snapshot@npm:27.0.6"
+"jest-snapshot@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-snapshot@npm:27.3.1"
dependencies:
"@babel/core": ^7.7.2
"@babel/generator": ^7.7.2
@@ -9244,25 +9227,25 @@ fsevents@^1.2.7:
"@babel/plugin-syntax-typescript": ^7.7.2
"@babel/traverse": ^7.7.2
"@babel/types": ^7.0.0
- "@jest/transform": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/transform": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/babel__traverse": ^7.0.4
"@types/prettier": ^2.1.5
babel-preset-current-node-syntax: ^1.0.0
chalk: ^4.0.0
- expect: ^27.0.6
+ expect: ^27.3.1
graceful-fs: ^4.2.4
- jest-diff: ^27.0.6
- jest-get-type: ^27.0.6
- jest-haste-map: ^27.0.6
- jest-matcher-utils: ^27.0.6
- jest-message-util: ^27.0.6
- jest-resolve: ^27.0.6
- jest-util: ^27.0.6
+ jest-diff: ^27.3.1
+ jest-get-type: ^27.3.1
+ jest-haste-map: ^27.3.1
+ jest-matcher-utils: ^27.3.1
+ jest-message-util: ^27.3.1
+ jest-resolve: ^27.3.1
+ jest-util: ^27.3.1
natural-compare: ^1.4.0
- pretty-format: ^27.0.6
+ pretty-format: ^27.3.1
semver: ^7.3.2
- checksum: b045f941437745fab1d8ccce2a053cfe39e81e1d63d1c815f62043281d53fe5043d5edcbfdebd16fa9c38de89b7e1ac5cf25d8fa592afecf921810e955dc877b
+ checksum: d570be8529742b6fe6c5b53706cfe01b58ee2e1c9a77fd5b42e6d51026f0c026477579ab0cb5c6f8060de984e9522f7bb07a84cf8ad160c9c15e3095de1d523f
languageName: node
linkType: hard
@@ -9291,46 +9274,46 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-util@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-util@npm:27.0.6"
+"jest-util@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-util@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
"@types/node": "*"
chalk: ^4.0.0
+ ci-info: ^3.2.0
graceful-fs: ^4.2.4
- is-ci: ^3.0.0
picomatch: ^2.2.3
- checksum: 97f39f9b6394ba32719401f6b7cc2ef2fb35df209d8e0ba86ceedcb14aa3b96e11d9791f52900e1a313ec9da080077b0fa77c62e3a4a2bcea6495f96e53be2f8
+ checksum: 28570a064c5fd7369f870dec1d6b5bb38691028151535ae24a1ab3dc077db368a33566aad3080dd183c81ef6423d7077b3e9641d0c93c8082bc9c8f1c9a6cf78
languageName: node
linkType: hard
-"jest-validate@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-validate@npm:27.0.6"
+"jest-validate@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-validate@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
+ "@jest/types": ^27.2.5
camelcase: ^6.2.0
chalk: ^4.0.0
- jest-get-type: ^27.0.6
+ jest-get-type: ^27.3.1
leven: ^3.1.0
- pretty-format: ^27.0.6
- checksum: ebf4035420fe33eddc3178da2f2b7a86490c45bc5077c89978e642f9aefa1f5d8f7c8a63902c6af4b8a20b35247531d2a0e9757fe40043f5ee04bf15a13aa278
+ pretty-format: ^27.3.1
+ checksum: 8d5eb0f4de2330f768d4b4d54ac38459e0ed81a55a3a01add81db80581d16b1b7636b61948b3172e720b02f4c31c025f306e03f44e5264dd45c17e3742f48d2f
languageName: node
linkType: hard
-"jest-watcher@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-watcher@npm:27.0.6"
+"jest-watcher@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-watcher@npm:27.3.1"
dependencies:
- "@jest/test-result": ^27.0.6
- "@jest/types": ^27.0.6
+ "@jest/test-result": ^27.3.1
+ "@jest/types": ^27.2.5
"@types/node": "*"
ansi-escapes: ^4.2.1
chalk: ^4.0.0
- jest-util: ^27.0.6
+ jest-util: ^27.3.1
string-length: ^4.0.1
- checksum: 7a7870abc9e8752f32253d2c0e843569077118a7314ae353ecb262708a6b8fb784f76b8dd684ae9a6088a36bf3c5586e4652ce0e39e92c577e63d4039ba6d3f1
+ checksum: cdcb73f9788809d1a8d2fee8c4b4c504aa8ec876c590b5fb3b9bf53ee30d19b971b9fc75ca9ea35bd5b26e7323e1adf4d4f79ef44b3e955f28a2401846bd507c
languageName: node
linkType: hard
@@ -9345,24 +9328,24 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"jest-worker@npm:^27.0.6":
- version: 27.0.6
- resolution: "jest-worker@npm:27.0.6"
+"jest-worker@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest-worker@npm:27.3.1"
dependencies:
"@types/node": "*"
merge-stream: ^2.0.0
supports-color: ^8.0.0
- checksum: 2a153623432d607310ab41075c0ee3d23c454e0536a62ea656e6a75a63050999050bae0ef7bc45a4cbed9889b72d32184ec43afa2f934be71e7993326e632f61
+ checksum: 919e26271d027ce5576bc1491e18527f37245e5530406bd145c595a34761ba4a2727b4b78aea1e0177b8db9afbb56c71024b0ac6cd013db4df8b1fa139b90cb9
languageName: node
linkType: hard
-"jest@npm:^27.0.1":
- version: 27.0.6
- resolution: "jest@npm:27.0.6"
+"jest@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "jest@npm:27.3.1"
dependencies:
- "@jest/core": ^27.0.6
+ "@jest/core": ^27.3.1
import-local: ^3.0.2
- jest-cli: ^27.0.6
+ jest-cli: ^27.3.1
peerDependencies:
node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
peerDependenciesMeta:
@@ -9370,7 +9353,7 @@ fsevents@^1.2.7:
optional: true
bin:
jest: bin/jest.js
- checksum: d1a82558cc5fc8332fb05f19516465f597dd6759dda41d744a84b23dc596537eeeebe8e18af522e695729a96029502e1ebd1dcd826bbda1b845be795d5476636
+ checksum: 408fbe3e1bc523d6e5fe6cf337c3a738b6a30cd4e02012292f34b49dde4cfe3c5715aa4b73116387784a6b40b4b54b16df2d1b3b42588cc57ffaff8ec58f697b
languageName: node
linkType: hard
@@ -9628,33 +9611,33 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"lit-element@npm:^3.0.0-rc.2":
- version: 3.0.0-rc.2
- resolution: "lit-element@npm:3.0.0-rc.2"
+"lit-element@npm:^3.0.0":
+ version: 3.0.2
+ resolution: "lit-element@npm:3.0.2"
dependencies:
- "@lit/reactive-element": ^1.0.0-rc.2
- lit-html: ^2.0.0-rc.3
- checksum: 1493246171b64123602558e4adce4e6231cfd484312ab5bb51803079592332070b932f49f0531951a5af4cd5f111cd91066936a99aa059397e61c0b081aa6059
+ "@lit/reactive-element": ^1.0.0
+ lit-html: ^2.0.0
+ checksum: 1d43eea17fb3b2ae9da03e5bc5767e2c93efad03d62aec80c121f22db96a63a1a536fa13b9c585252a00053ff6ae9b2c13b0bd5804f06814506d40a3d141443c
languageName: node
linkType: hard
-"lit-html@npm:^2.0.0-rc.3":
- version: 2.0.0-rc.3
- resolution: "lit-html@npm:2.0.0-rc.3"
+"lit-html@npm:^2.0.0":
+ version: 2.0.2
+ resolution: "lit-html@npm:2.0.2"
dependencies:
- "@types/trusted-types": ^1.0.1
- checksum: 26120f0bfdd65c2f32fb15ea4e554cdf2072289fae5d1f6820b6110a42da069c6062ec19ff26734f4fff3be77cd3c61a1d0146cd9c257c64b199cb52eebc756f
+ "@types/trusted-types": ^2.0.2
+ checksum: 3a199fdc8a2a914cae0f4bcb61582d15ca671a84e34db387651d4009be9c41951c8d29381a8d858c2037efb4fce6f4eccf51d4da545d9dd419651b0b42b1b88b
languageName: node
linkType: hard
-"lit@npm:^2.0.0-rc.2":
- version: 2.0.0-rc.2
- resolution: "lit@npm:2.0.0-rc.2"
+"lit@npm:^2.0.2":
+ version: 2.0.2
+ resolution: "lit@npm:2.0.2"
dependencies:
- "@lit/reactive-element": ^1.0.0-rc.2
- lit-element: ^3.0.0-rc.2
- lit-html: ^2.0.0-rc.3
- checksum: efb6c6e200c971c82875fcb277ef27850d01d4b2f4bb7254f319e5c0569bf64486923d883873890b42c38e3a0696cd2e398852fe379fe3ac87c74ddd6c34a874
+ "@lit/reactive-element": ^1.0.0
+ lit-element: ^3.0.0
+ lit-html: ^2.0.0
+ checksum: f47404b026cbbf6e5cb50b78c272226dc2d44e66e3252d2c914b7463a203503bb65712d02aaa17bf592f4c308d570684a0cab18e93cf4478e0294f61e2223b50
languageName: node
linkType: hard
@@ -10763,13 +10746,6 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"p-each-series@npm:^2.1.0":
- version: 2.2.0
- resolution: "p-each-series@npm:2.2.0"
- checksum: 32a7cce1312bf70f99079db2ff070fc3ee2ed6efe0fa0444616fa38f79730ad09b461d009127d25254c4c865c40b6664e2c656b1a7b2c4781756d9173c974269
- languageName: node
- linkType: hard
-
"p-event@npm:^4.1.0":
version: 4.2.0
resolution: "p-event@npm:4.2.0"
@@ -11080,7 +11056,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0":
version: 2.3.0
resolution: "picomatch@npm:2.3.0"
checksum: a65bde78212368e16afb82429a0ea033d20a836270446acb53ec6e31d939bccf1213f788bc49361f7aff47b67c1fb74d898f99964f67f26ca07a3cd815ddbcbb
@@ -11314,15 +11290,15 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"pretty-format@npm:^27.0.6":
- version: 27.0.6
- resolution: "pretty-format@npm:27.0.6"
+"pretty-format@npm:^27.3.1":
+ version: 27.3.1
+ resolution: "pretty-format@npm:27.3.1"
dependencies:
- "@jest/types": ^27.0.6
- ansi-regex: ^5.0.0
+ "@jest/types": ^27.2.5
+ ansi-regex: ^5.0.1
ansi-styles: ^5.0.0
react-is: ^17.0.1
- checksum: 022d970d59e8b0004f4cc8bb75d5a65b2a976deb73ffa89643d9bbe0eeeef3c789493207da8d8c24a2ea055400914ce5300f8f7b824e2cf8b59d7e6be45d9b1f
+ checksum: b255146debac1212b26ef718f26b6433e22b2e3fe5f141bd038fbf73a94494c1fd8141359a98cd2d94ad7256a7440a340ac1ac2b3f81aadfeccc6fcbfbd883d4
languageName: node
linkType: hard
@@ -11423,7 +11399,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"prop-types@npm:^15.0.0, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
version: 15.7.2
resolution: "prop-types@npm:15.7.2"
dependencies:
@@ -11771,13 +11747,6 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"react-lifecycles-compat@npm:^3.0.4":
- version: 3.0.4
- resolution: "react-lifecycles-compat@npm:3.0.4"
- checksum: 1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27
- languageName: node
- linkType: hard
-
"react-popper-tooltip@npm:^3.1.1":
version: 3.1.1
resolution: "react-popper-tooltip@npm:3.1.1"
@@ -11805,6 +11774,30 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
+"react-router-dom@npm:^6.0.0":
+ version: 6.0.2
+ resolution: "react-router-dom@npm:6.0.2"
+ dependencies:
+ history: ^5.1.0
+ react-router: 6.0.2
+ peerDependencies:
+ react: ">=16.8"
+ react-dom: ">=16.8"
+ checksum: f34d30742631813ff5a9bff2dc20adc0ae3932c956cf5b1ecaeeb5287f41c4dcb612e2eb2a98244ee5cc6f6c6827ebc91c771ebb3beb7eca103c5e4b8d251f24
+ languageName: node
+ linkType: hard
+
+"react-router@npm:6.0.2, react-router@npm:^6.0.0":
+ version: 6.0.2
+ resolution: "react-router@npm:6.0.2"
+ dependencies:
+ history: ^5.1.0
+ peerDependencies:
+ react: ">=16.8"
+ checksum: 60f9b079c03b6d213740cda937ba7265c2b6ce31d3e9cd9155fa64fb5b62fa5b15cfa9a487fb272809d935e4238697833d5910bb9aaed89b948c0071e3e5c399
+ languageName: node
+ linkType: hard
+
"react-shallow-renderer@npm:^16.13.1":
version: 16.14.1
resolution: "react-shallow-renderer@npm:16.14.1"
@@ -12216,6 +12209,13 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
+"resolve.exports@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "resolve.exports@npm:1.1.0"
+ checksum: 7e21c22ad129b934d5cc0b6aefd07f377a92e0b9699f49ac33eac1736a85e3aeb9270c85aac47f7070b5975739623ed007aac318d6bc5f036504b2b7a407fd31
+ languageName: node
+ linkType: hard
+
"resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2":
version: 1.20.0
resolution: "resolve@npm:1.20.0"
@@ -13260,6 +13260,13 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
+"synchronous-promise@npm:^2.0.15":
+ version: 2.0.15
+ resolution: "synchronous-promise@npm:2.0.15"
+ checksum: 967778e7570dc496d7630a89db3bada38876574797c9b272ee50f6ecd7afcebf450268b4bb48a84274d213ab9fd4865dbcc6edeb279f9ecaddf189d5446cbe43
+ languageName: node
+ linkType: hard
+
"tapable@npm:^1.0.0, tapable@npm:^1.1.3":
version: 1.1.3
resolution: "tapable@npm:1.1.3"
@@ -13281,7 +13288,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"telejson@npm:^5.3.2":
+"telejson@npm:^5.3.2, telejson@npm:^5.3.3":
version: 5.3.3
resolution: "telejson@npm:5.3.3"
dependencies:
@@ -14052,14 +14059,14 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"v8-to-istanbul@npm:^8.0.0":
- version: 8.0.0
- resolution: "v8-to-istanbul@npm:8.0.0"
+"v8-to-istanbul@npm:^8.1.0":
+ version: 8.1.0
+ resolution: "v8-to-istanbul@npm:8.1.0"
dependencies:
"@types/istanbul-lib-coverage": ^2.0.1
convert-source-map: ^1.6.0
source-map: ^0.7.3
- checksum: 4d84ab3f49c778702442f8385609951871758441ea929f20285550e1ba16ea980e9a197cc6877b9d92443a57a2535d9e3cafed6700ed6366b53f59e9ee760146
+ checksum: 4db98cc1ab0634e183353fb404e2dd9dec2dd3075372d4423c0acebff78d927b59dbb58ab729ab36c7d5168610b2aa5b3c885be8221b44ab937be1dbf2078c4b
languageName: node
linkType: hard
@@ -14143,7 +14150,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"warning@npm:^4.0.2, warning@npm:^4.0.3":
+"warning@npm:^4.0.2":
version: 4.0.3
resolution: "warning@npm:4.0.3"
dependencies:
@@ -14192,7 +14199,7 @@ fsevents@^1.2.7:
version: 0.0.0-use.local
resolution: "web-components-kitchen-sink@workspace:."
dependencies:
- "@custom-elements-manifest/analyzer": ^0.3.11
+ "@custom-elements-manifest/analyzer": ^0.5.7
"@storybook/addon-a11y": "*"
"@storybook/addon-actions": "*"
"@storybook/addon-backgrounds": "*"
@@ -14205,8 +14212,8 @@ fsevents@^1.2.7:
"@storybook/addon-viewport": "*"
"@storybook/web-components": "*"
global: ^4.4.0
- jest: ^27.0.1
- lit: ^2.0.0-rc.2
+ jest: ^27.3.1
+ lit: ^2.0.2
typescript: 4.2.4
languageName: unknown
linkType: soft
@@ -14483,6 +14490,21 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
+"ws@npm:^8.2.3":
+ version: 8.2.3
+ resolution: "ws@npm:8.2.3"
+ peerDependencies:
+ bufferutil: ^4.0.1
+ utf-8-validate: ^5.0.2
+ peerDependenciesMeta:
+ bufferutil:
+ optional: true
+ utf-8-validate:
+ optional: true
+ checksum: 5ef0f81cc5b8776fb5dd5504c83b4f49be5aa610f9319ff774158bba7db495127e69763d73085288223061e7a5d104d022e2e264346b36b046322f50057e7945
+ languageName: node
+ linkType: hard
+
"xml-name-validator@npm:^3.0.0":
version: 3.0.0
resolution: "xml-name-validator@npm:3.0.0"
@@ -14546,7 +14568,7 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
-"yargs@npm:^16.0.3":
+"yargs@npm:^16.2.0":
version: 16.2.0
resolution: "yargs@npm:16.2.0"
dependencies:
diff --git a/lerna.json b/lerna.json
index 867621b73d18..0205212600ad 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
"npmClient": "yarn",
"useWorkspaces": true,
"registry": "https://registry.npmjs.org",
- "version": "6.4.0-rc.2"
+ "version": "6.4.0-rc.7"
}
diff --git a/lib/addons/package.json b/lib/addons/package.json
index ec63596ebd06..df6ffe4a6b04 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addons",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook addons store",
"keywords": [
"storybook"
@@ -40,13 +40,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/api": "6.4.0-rc.2",
- "@storybook/channels": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/api": "6.4.0-rc.7",
+ "@storybook/channels": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/router": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/router": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -59,6 +59,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/public_api.js"
}
diff --git a/lib/api/package.json b/lib/api/package.json
index 5202bf815b76..af1b838bbc35 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/api",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Core Storybook API & Context",
"keywords": [
"storybook"
@@ -38,13 +38,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/channels": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/router": "6.4.0-rc.2",
+ "@storybook/router": "6.4.0-rc.7",
"@storybook/semver": "^7.3.2",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/theming": "6.4.0-rc.7",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
"global": "^4.4.0",
@@ -71,6 +71,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index 9a8e89a245ac..1856a2e67ef5 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '6.4.0-rc.2';
+export const version = '6.4.0-rc.7';
diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json
index b5b51c7e13f1..b61739eae046 100644
--- a/lib/builder-webpack4/package.json
+++ b/lib/builder-webpack4/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-webpack4",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -61,22 +61,22 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/api": "6.4.0-rc.2",
- "@storybook/channel-postmessage": "6.4.0-rc.2",
- "@storybook/channels": "6.4.0-rc.2",
- "@storybook/client-api": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/components": "6.4.0-rc.2",
- "@storybook/core-common": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
- "@storybook/preview-web": "6.4.0-rc.2",
- "@storybook/router": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/api": "6.4.0-rc.7",
+ "@storybook/channel-postmessage": "6.4.0-rc.7",
+ "@storybook/channels": "6.4.0-rc.7",
+ "@storybook/client-api": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/components": "6.4.0-rc.7",
+ "@storybook/core-common": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
+ "@storybook/preview-web": "6.4.0-rc.7",
+ "@storybook/router": "6.4.0-rc.7",
"@storybook/semver": "^7.3.2",
- "@storybook/store": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
- "@storybook/ui": "6.4.0-rc.2",
+ "@storybook/store": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
+ "@storybook/ui": "6.4.0-rc.7",
"@types/node": "^14.0.10",
"@types/webpack": "^4.41.26",
"autoprefixer": "^9.8.6",
@@ -131,6 +131,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json
index 0a0c7870dbce..5c54dad9109e 100644
--- a/lib/builder-webpack5/package.json
+++ b/lib/builder-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-webpack5",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -60,21 +60,21 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/api": "6.4.0-rc.2",
- "@storybook/channel-postmessage": "6.4.0-rc.2",
- "@storybook/channels": "6.4.0-rc.2",
- "@storybook/client-api": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/components": "6.4.0-rc.2",
- "@storybook/core-common": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
- "@storybook/preview-web": "6.4.0-rc.2",
- "@storybook/router": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/api": "6.4.0-rc.7",
+ "@storybook/channel-postmessage": "6.4.0-rc.7",
+ "@storybook/channels": "6.4.0-rc.7",
+ "@storybook/client-api": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/components": "6.4.0-rc.7",
+ "@storybook/core-common": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
+ "@storybook/preview-web": "6.4.0-rc.7",
+ "@storybook/router": "6.4.0-rc.7",
"@storybook/semver": "^7.3.2",
- "@storybook/store": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/store": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
"@types/node": "^14.0.10",
"babel-loader": "^8.0.0",
"babel-plugin-macros": "^3.0.1",
@@ -117,6 +117,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index c146b7925f39..e46e8f484b56 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -1,5 +1,11 @@
import path from 'path';
-import { Configuration, DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack';
+import {
+ Configuration,
+ DefinePlugin,
+ HotModuleReplacementPlugin,
+ ProgressPlugin,
+ ProvidePlugin,
+} from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
@@ -208,6 +214,7 @@ export default async (options: Options & Record): Promise = {
if (!dryRun) {
logger.info(`✅ Adding Storybook to extends list`);
const extendsConfig = eslint.getFieldValue(['extends']) || [];
- const existingConfigValue =
- Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig];
+ const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig];
eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']);
await writeConfig(eslint);
diff --git a/lib/cli/src/versions.json b/lib/cli/src/versions.json
index efc2b883ace3..3d69227a30c7 100644
--- a/lib/cli/src/versions.json
+++ b/lib/cli/src/versions.json
@@ -1,59 +1,59 @@
{
- "@storybook/addon-a11y": "6.4.0-rc.2",
- "@storybook/addon-actions": "6.4.0-rc.2",
- "@storybook/addon-backgrounds": "6.4.0-rc.2",
- "@storybook/addon-controls": "6.4.0-rc.2",
- "@storybook/addon-docs": "6.4.0-rc.2",
- "@storybook/addon-essentials": "6.4.0-rc.2",
- "@storybook/addon-interactions": "6.4.0-rc.2",
- "@storybook/addon-jest": "6.4.0-rc.2",
- "@storybook/addon-links": "6.4.0-rc.2",
- "@storybook/addon-storyshots": "6.4.0-rc.2",
- "@storybook/addon-storyshots-puppeteer": "6.4.0-rc.2",
- "@storybook/addon-storysource": "6.4.0-rc.2",
- "@storybook/addon-toolbars": "6.4.0-rc.2",
- "@storybook/addon-viewport": "6.4.0-rc.2",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/angular": "6.4.0-rc.2",
- "@storybook/api": "6.4.0-rc.2",
- "@storybook/aurelia": "6.4.0-rc.2",
- "@storybook/builder-webpack4": "6.4.0-rc.2",
- "@storybook/builder-webpack5": "6.4.0-rc.2",
- "@storybook/channel-postmessage": "6.4.0-rc.2",
- "@storybook/channel-websocket": "6.4.0-rc.2",
- "@storybook/channels": "6.4.0-rc.2",
- "@storybook/cli": "6.4.0-rc.2",
- "@storybook/client-api": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/codemod": "6.4.0-rc.2",
- "@storybook/components": "6.4.0-rc.2",
- "@storybook/core": "6.4.0-rc.2",
- "@storybook/core-client": "6.4.0-rc.2",
- "@storybook/core-common": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
- "@storybook/core-server": "6.4.0-rc.2",
- "@storybook/csf-tools": "6.4.0-rc.2",
- "@storybook/ember": "6.4.0-rc.2",
- "@storybook/html": "6.4.0-rc.2",
- "@storybook/instrumenter": "6.4.0-rc.2",
- "@storybook/manager-webpack4": "6.4.0-rc.2",
- "@storybook/manager-webpack5": "6.4.0-rc.2",
- "@storybook/marionette": "6.4.0-rc.2",
- "@storybook/marko": "6.4.0-rc.2",
- "@storybook/mithril": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
- "@storybook/postinstall": "6.4.0-rc.2",
- "@storybook/preact": "6.4.0-rc.2",
- "@storybook/rax": "6.4.0-rc.2",
- "@storybook/react": "6.4.0-rc.2",
- "@storybook/riot": "6.4.0-rc.2",
- "@storybook/router": "6.4.0-rc.2",
- "@storybook/server": "6.4.0-rc.2",
- "@storybook/source-loader": "6.4.0-rc.2",
- "@storybook/svelte": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
- "@storybook/ui": "6.4.0-rc.2",
- "@storybook/vue": "6.4.0-rc.2",
- "@storybook/vue3": "6.4.0-rc.2",
- "@storybook/web-components": "6.4.0-rc.2"
+ "@storybook/addon-a11y": "6.4.0-rc.7",
+ "@storybook/addon-actions": "6.4.0-rc.7",
+ "@storybook/addon-backgrounds": "6.4.0-rc.7",
+ "@storybook/addon-controls": "6.4.0-rc.7",
+ "@storybook/addon-docs": "6.4.0-rc.7",
+ "@storybook/addon-essentials": "6.4.0-rc.7",
+ "@storybook/addon-interactions": "6.4.0-rc.7",
+ "@storybook/addon-jest": "6.4.0-rc.7",
+ "@storybook/addon-links": "6.4.0-rc.7",
+ "@storybook/addon-storyshots": "6.4.0-rc.7",
+ "@storybook/addon-storyshots-puppeteer": "6.4.0-rc.7",
+ "@storybook/addon-storysource": "6.4.0-rc.7",
+ "@storybook/addon-toolbars": "6.4.0-rc.7",
+ "@storybook/addon-viewport": "6.4.0-rc.7",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/angular": "6.4.0-rc.7",
+ "@storybook/api": "6.4.0-rc.7",
+ "@storybook/aurelia": "6.4.0-rc.7",
+ "@storybook/builder-webpack4": "6.4.0-rc.7",
+ "@storybook/builder-webpack5": "6.4.0-rc.7",
+ "@storybook/channel-postmessage": "6.4.0-rc.7",
+ "@storybook/channel-websocket": "6.4.0-rc.7",
+ "@storybook/channels": "6.4.0-rc.7",
+ "@storybook/cli": "6.4.0-rc.7",
+ "@storybook/client-api": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/codemod": "6.4.0-rc.7",
+ "@storybook/components": "6.4.0-rc.7",
+ "@storybook/core": "6.4.0-rc.7",
+ "@storybook/core-client": "6.4.0-rc.7",
+ "@storybook/core-common": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
+ "@storybook/core-server": "6.4.0-rc.7",
+ "@storybook/csf-tools": "6.4.0-rc.7",
+ "@storybook/ember": "6.4.0-rc.7",
+ "@storybook/html": "6.4.0-rc.7",
+ "@storybook/instrumenter": "6.4.0-rc.7",
+ "@storybook/manager-webpack4": "6.4.0-rc.7",
+ "@storybook/manager-webpack5": "6.4.0-rc.7",
+ "@storybook/marionette": "6.4.0-rc.7",
+ "@storybook/marko": "6.4.0-rc.7",
+ "@storybook/mithril": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
+ "@storybook/postinstall": "6.4.0-rc.7",
+ "@storybook/preact": "6.4.0-rc.7",
+ "@storybook/rax": "6.4.0-rc.7",
+ "@storybook/react": "6.4.0-rc.7",
+ "@storybook/riot": "6.4.0-rc.7",
+ "@storybook/router": "6.4.0-rc.7",
+ "@storybook/server": "6.4.0-rc.7",
+ "@storybook/source-loader": "6.4.0-rc.7",
+ "@storybook/svelte": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
+ "@storybook/ui": "6.4.0-rc.7",
+ "@storybook/vue": "6.4.0-rc.7",
+ "@storybook/vue3": "6.4.0-rc.7",
+ "@storybook/web-components": "6.4.0-rc.7"
}
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index fb6257cd55aa..33fef2952dd7 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-api",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook Client API",
"keywords": [
"storybook"
@@ -40,13 +40,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/channel-postmessage": "6.4.0-rc.2",
- "@storybook/channels": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/channel-postmessage": "6.4.0-rc.7",
+ "@storybook/channels": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/store": "6.4.0-rc.2",
+ "@storybook/store": "6.4.0-rc.7",
"@types/qs": "^6.9.5",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
@@ -68,6 +68,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/client-api/src/StoryStoreFacade.ts b/lib/client-api/src/StoryStoreFacade.ts
index 1b51c68bda08..2a27797acb98 100644
--- a/lib/client-api/src/StoryStoreFacade.ts
+++ b/lib/client-api/src/StoryStoreFacade.ts
@@ -101,7 +101,7 @@ export class StoryStoreFacade {
> ${err.message}
- Are you using a V7-style sort function in V6 compatibilty mode?
+ Are you using a V7-style sort function in V6 compatibility mode?
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
`);
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index e46e8aa1b18c..a47b9364d5c9 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "",
"keywords": [
"storybook"
@@ -46,6 +46,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 1aea97c3e9b4..845f3524a743 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
@@ -44,8 +44,8 @@
"@babel/types": "^7.12.11",
"@mdx-js/mdx": "^1.6.22",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/csf-tools": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
+ "@storybook/csf-tools": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
"core-js": "^3.8.2",
"cross-spawn": "^7.0.3",
"globby": "^11.0.2",
@@ -62,6 +62,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/components/package.json b/lib/components/package.json
index 60e2d64605af..e764caa938e0 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -41,9 +41,9 @@
},
"dependencies": {
"@popperjs/core": "^2.6.0",
- "@storybook/client-logger": "6.4.0-rc.2",
+ "@storybook/client-logger": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/theming": "6.4.0-rc.7",
"@types/color-convert": "^2.0.0",
"@types/overlayscrollbars": "^1.12.0",
"@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/components/src/bar/button.tsx b/lib/components/src/bar/button.tsx
index a24b53f6bcd7..7282ec7a0a92 100644
--- a/lib/components/src/bar/button.tsx
+++ b/lib/components/src/bar/button.tsx
@@ -133,7 +133,9 @@ const IconPlaceholder = styled.div(({ theme }) => ({
}));
const IconButtonSkeletonWrapper = styled.div(() => ({
- padding: 5,
+ marginTop: 6,
+ padding: 7,
+ height: 28,
}));
export const IconButtonSkeleton = () => (
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
index 39f7cab987ef..d6ffb2b42d3d 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
@@ -23,8 +23,6 @@ const Template = (args) => = (props) => {
- // const isLoading = 'isLoading' in props;
- const { row, updateArgs, compact, expandable, initialExpandedArgs } =
- 'row' in props ? props : argRowLoadingData;
+ const { row, updateArgs, compact, expandable, initialExpandedArgs } = props;
const { name, description } = row;
const table = (row.table || {}) as TableAnnotation;
const type = table.type || row.type;
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
index dc9bff0a1a11..0f0fb41b9011 100644
--- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
@@ -29,6 +29,7 @@ const Template = (args) => = {
Number(!!b.type?.required) - Number(!!a.type?.required) || a.name.localeCompare(b.name),
none: undefined,
};
-export interface ArgsTableData {
- rows: ArgTypes;
- args?: Args;
+
+export interface ArgsTableOptionProps {
updateArgs?: (args: Args) => void;
resetArgs?: (argNames?: string[]) => void;
compact?: boolean;
@@ -251,23 +267,39 @@ export interface ArgsTableData {
isLoading?: boolean;
sort?: SortType;
}
+export interface ArgsTableDataProps {
+ rows: ArgTypes;
+ args?: Args;
+}
export interface ArgsTableErrorProps {
error: ArgsTableError;
}
-interface ArgTableLoading {
+export interface ArgsTableLoadingProps {
isLoading: true;
}
-export const argTableLoadingData: ArgsTableData = {
+const rowLoadingData = (key: string) => ({
+ key,
+ name: 'propertyName',
+ description: 'This is a short description',
+ control: { type: 'text' },
+ table: {
+ type: { summary: 'summary' },
+ defaultValue: { summary: 'defaultValue' },
+ },
+});
+
+export const argsTableLoadingData: ArgsTableDataProps = {
rows: {
- row1: argRowLoadingData.row,
- row2: argRowLoadingData.row,
- row3: argRowLoadingData.row,
+ row1: rowLoadingData('row1'),
+ row2: rowLoadingData('row2'),
+ row3: rowLoadingData('row3'),
},
};
-export type ArgsTableProps = ArgsTableData | ArgsTableErrorProps | ArgTableLoading;
+export type ArgsTableProps = ArgsTableOptionProps &
+ (ArgsTableDataProps | ArgsTableErrorProps | ArgsTableLoadingProps);
type Rows = ArgType[];
type Subsection = Rows;
@@ -338,130 +370,6 @@ const groupRows = (rows: ArgType, sort: SortType) => {
return sorted;
};
-const SkeletonHeader = styled.div(({ theme }) => ({
- alignContent: 'stretch',
- display: 'flex',
- gap: 16,
- marginTop: 25,
- padding: '10px 20px',
-
- div: {
- animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
- background: theme.appBorderColor,
- flexShrink: 0,
- height: 20,
-
- '&:first-child, &:nth-child(4)': {
- width: '20%',
- },
-
- '&:nth-child(2)': {
- width: '30%',
- },
-
- '&:nth-child(3)': {
- flexGrow: 1,
- },
-
- '&:last-child': {
- width: 30,
- },
-
- '@media ( max-width: 500px )': {
- '&:nth-child( n + 4 )': {
- display: 'none',
- },
- },
- },
-}));
-
-const SkeletonBody = styled.div(({ theme }) => ({
- background: theme.background.content,
- boxShadow:
- theme.base === 'light'
- ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
- ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
- : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
- ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
- borderRadius: theme.appBorderRadius,
-
- '> div': {
- alignContent: 'stretch',
- borderTopColor:
- theme.base === 'light'
- ? darken(0.1, theme.background.content)
- : lighten(0.05, theme.background.content),
- borderTopStyle: 'solid',
- borderTopWidth: 1,
- display: 'flex',
- gap: 16,
- padding: 20,
-
- '&:first-child': {
- borderTop: 0,
- },
- },
-
- '> div div': {
- animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
- background: theme.appBorderColor,
- flexShrink: 0,
- height: 20,
-
- '&:first-child': {
- width: '20%',
- },
-
- '&:nth-child(2)': {
- width: '30%',
- },
-
- '&:nth-child(3)': {
- flexGrow: 1,
- },
-
- '&:last-child': {
- width: 'calc(20% + 47px)',
-
- '@media ( max-width: 500px )': {
- display: 'none',
- },
- },
- },
-}));
-
-const Skeleton = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
/**
* Display the props for a component as a props table. Each row is a collection of
* ArgDefs, usually derived from docgen info for the component.
@@ -478,21 +386,16 @@ export const ArgsTable: FC = (props) => {
);
}
- const isLoading = 'isLoading' in props;
const {
- rows,
- args,
updateArgs,
resetArgs,
compact,
inAddonPanel,
initialExpandedArgs,
sort = 'none',
- } = 'rows' in props ? props : argTableLoadingData;
-
- if (isLoading) {
- return = (props) => {
return (
-
+
- Name
- {compact || Description }
- {compact || Default }
- {updateArgs && (
+
+ Name
+
+ {compact ? null : (
+
+ Description
+
+ )}
+ {compact ? null : (
+
+ Default
+
+ )}
+ {updateArgs ? (
Control{' '}
- {resetArgs && (
+ {!isLoading && resetArgs && (
resetArgs()} title="Reset controls">
)}
- )}
- {null}
+ ) : null}
diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx
index 3b55d6ea3fe4..efbd4030a1b9 100644
--- a/lib/components/src/blocks/DocsPage.stories.tsx
+++ b/lib/components/src/blocks/DocsPage.stories.tsx
@@ -42,7 +42,7 @@ export const Loading = () => (
= ({
+ isLoading,
isColumn,
columns,
children,
@@ -254,6 +256,7 @@ export const Preview: FunctionComponent = ({
>
{withToolbar && (
setScale(scale * z)}
resetZoom={() => setScale(1)}
@@ -285,8 +288,15 @@ export const Preview: FunctionComponent = ({
);
};
+const StyledPreview = styled(Preview)(() => ({
+ '.docs-story': {
+ paddingTop: 32,
+ paddingBottom: 40,
+ },
+}));
+
export const PreviewSkeleton = () => (
-
+
+
);
diff --git a/lib/components/src/blocks/Toolbar.tsx b/lib/components/src/blocks/Toolbar.tsx
index b3e9909b24f7..63b99e94a0be 100644
--- a/lib/components/src/blocks/Toolbar.tsx
+++ b/lib/components/src/blocks/Toolbar.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
import { FlexBar } from '../bar/bar';
import { Icons } from '../icon/icon';
-import { IconButton } from '../bar/button';
+import { IconButton, IconButtonSkeleton } from '../bar/button';
interface ZoomProps {
zoom: (val: number) => void;
@@ -19,7 +19,11 @@ interface BarProps {
border?: boolean;
}
-export type ToolbarProps = BarProps & ZoomProps & EjectProps;
+interface LoadingProps {
+ isLoading?: boolean;
+}
+
+export type ToolbarProps = BarProps & ZoomProps & EjectProps & LoadingProps;
const Zoom: FunctionComponent = ({ zoom, resetZoom }) => (
<>
@@ -76,6 +80,7 @@ const Bar = styled(FlexBar)({
});
export const Toolbar: FunctionComponent = ({
+ isLoading,
storyId,
baseUrl,
zoom,
@@ -84,8 +89,14 @@ export const Toolbar: FunctionComponent = ({
}) => (
-
+
+ {storyId && (isLoading ?
- {storyId &&
);
diff --git a/lib/core-client/package.json b/lib/core-client/package.json
index 66522306fd5c..d862f79dfe48 100644
--- a/lib/core-client/package.json
+++ b/lib/core-client/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-client",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -40,16 +40,16 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/channel-postmessage": "6.4.0-rc.2",
- "@storybook/channel-websocket": "6.4.0-rc.2",
- "@storybook/client-api": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/channel-postmessage": "6.4.0-rc.7",
+ "@storybook/channel-websocket": "6.4.0-rc.7",
+ "@storybook/client-api": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/preview-web": "6.4.0-rc.2",
- "@storybook/store": "6.4.0-rc.2",
- "@storybook/ui": "6.4.0-rc.2",
+ "@storybook/preview-web": "6.4.0-rc.7",
+ "@storybook/store": "6.4.0-rc.7",
+ "@storybook/ui": "6.4.0-rc.7",
"airbnb-js-shims": "^2.2.1",
"ansi-to-html": "^0.6.11",
"core-js": "^3.8.2",
@@ -74,6 +74,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-common/package.json b/lib/core-common/package.json
index ce93c5d68244..c8907d46730f 100644
--- a/lib/core-common/package.json
+++ b/lib/core-common/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-common",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -61,7 +61,7 @@
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.1",
- "@storybook/node-logger": "6.4.0-rc.2",
+ "@storybook/node-logger": "6.4.0-rc.7",
"@storybook/semver": "^7.3.2",
"@types/node": "^14.0.10",
"@types/pretty-hrtime": "^1.0.0",
@@ -110,6 +110,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-common/src/templates/base-preview-body.html b/lib/core-common/src/templates/base-preview-body.html
index 43970c2a9d7f..c5aa7330ee7b 100644
--- a/lib/core-common/src/templates/base-preview-body.html
+++ b/lib/core-common/src/templates/base-preview-body.html
@@ -71,7 +71,6 @@
.previewBlock_header {
align-items: center;
- background: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
display: flex;
gap: 14px;
@@ -93,89 +92,105 @@
.previewBlock_body {
-webkit-animation: glow 1.5s ease-in-out infinite;
animation: glow 1.5s ease-in-out infinite;
- height: 110px;
+ height: 182px;
position: relative;
}
- .argsTable {
- margin: 0 auto;
+ .argstableBlock {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 13px;
+ line-height: 20px;
+ margin: 25px auto 40px;
max-width: 600px;
+ text-align: left;
+ width: 100%;
}
-
- .argsTable_header {
- align-content: stretch;
- display: flex;
- gap: 16px;
- margin-top: 25px;
- padding: 10px 20px;
- }
- .argsTable_header div {
- -webkit-animation: glow 1.5s ease-in-out infinite;
- animation: glow 1.5s ease-in-out infinite;
- background: #e6e6e6;
- flex-shrink: 0;
- height: 20px;
+ .argstableBlock th:first-of-type,
+ .argstableBlock td:first-of-type {
+ padding-left: 20px;
}
- .argsTable_header div:first-child,
- .argsTable_header div:nth-child(4) {
- width: 20%;
+ .argstableBlock th:nth-of-type(2),
+ .argstableBlock td:nth-of-type(2) {
+ width: 35%;
}
- .argsTable_header div:nth-child(2) {
- width: 30%;
+ .argstableBlock th:nth-of-type(3),
+ .argstableBlock td:nth-of-type(3) {
+ width: 15%;
}
- .argsTable_header div:nth-child(3) {
- flex-grow: 1;
+ .argstableBlock th:laste-of-type,
+ .argstableBlock td:laste-of-type {
+ width: 25%;
+ padding-right: 20px;
}
- .argsTable_header div:last-child {
- width: 30px;
+ .argstableBlock th span,
+ .argstableBlock td span {
+ -webkit-animation: glow 1.5s ease-in-out infinite;
+ animation: glow 1.5s ease-in-out infinite;
+ background-color: rgba(0, 0, 0, 0.1);
+ border-radius: 0;
+ box-shadow: none;
+ color: transparent;
}
- @media (max-width: 500px) {
- .argsTable_header div:nth-child(n + 4) {
- display: none;
- }
+ .argstableBlock th {
+ padding: 10px 15px;
}
- .argsTable_body {
- background: #ffffff;
+ .argstableBlock-body {
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
}
-
- .argsTable_row {
- align-content: stretch;
- border-top-color: #e6e6e6;
- border-top-style: solid;
- border-top-width: 1px;
- display: flex;
- gap: 16px;
- padding: 20px;
+ .argstableBlock-body tr {
+ background: transparent;
+ overflow: hidden;
}
- .argsTable_row:first-child {
- border-top: 0;
+ .argstableBlock-body tr:not(:first-child) {
+ border-top: 1px solid #e6e6e6;
}
- .argsTable_row div {
- -webkit-animation: glow 1.5s ease-in-out infinite;
- animation: glow 1.5s ease-in-out infinite;
- background: rgba(0, 0, 0, 0.1);
- flex-shrink: 0;
- height: 20px;
+ .argstableBlock-body tr:first-child td:first-child {
+ border-top-left-radius: 4px;
}
- .argsTable_row div:first-child {
- width: 20%;
+ .argstableBlock-body tr:first-child td:last-child {
+ border-top-right-radius: 4px;
}
- .argsTable_row div:nth-child(2) {
- width: 30%;
+ .argstableBlock-body tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
}
- .argsTable_row div:nth-child(3) {
- flex-grow: 1;
+ .argstableBlock-body tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
}
- .argsTable_row div:last-child {
- width: calc(20% + 47px);
+ .argstableBlock-body td {
+ background: #fff;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ vertical-align: top;
}
- @media (max-width: 500px) {
- .argsTable_row div:last-child {
- display: none;
- }
+ .argstableBlock-body td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+ .argstableBlock-body button {
+ -webkit-animation: glow 1.5s ease-in-out infinite;
+ animation: glow 1.5s ease-in-out infinite;
+ background-color: rgba(0, 0, 0, 0.1);
+ border: 0;
+ border-radius: 0;
+ box-shadow: none;
+ color: transparent;
+ display: inline;
+ font-size: 12px;
+ line-height: 1;
+ padding: 10px 16px;
+ }
+
+ .argstableBlock-summary {
+ margin-top: 4px;
+ }
+
+ .argstableBlock-code {
+ margin-right: 4px;
+ margin-bottom: 4px;
+ padding: 2px 5px;
}
@@ -195,35 +210,57 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/lib/core-common/src/utils/__tests__/normalize-stories.test.ts b/lib/core-common/src/utils/__tests__/normalize-stories.test.ts
index af04fe014c0c..420e0a89ef39 100644
--- a/lib/core-common/src/utils/__tests__/normalize-stories.test.ts
+++ b/lib/core-common/src/utils/__tests__/normalize-stories.test.ts
@@ -23,11 +23,26 @@ expect.extend({
},
});
-jest.mock('fs', () => ({
- lstatSync: (path: string) => ({
- isDirectory: () => !path.match(/\.[a-z]+$/),
- }),
-}));
+jest.mock('fs', () => {
+ const mockStat = (
+ path: string,
+ options: Record,
+ cb: (error?: Error, stats?: Record) => void
+ ) => {
+ cb(undefined, {
+ isDirectory: () => !path.match(/\.[a-z]+$/),
+ });
+ };
+
+ return {
+ access: (path: string, mode: number, cb: (err?: Error) => void): void => undefined,
+ lstatSync: (path: string) => ({
+ isDirectory: () => !path.match(/\.[a-z]+$/),
+ }),
+ stat: mockStat,
+ lstat: mockStat,
+ };
+});
describe('normalizeStoriesEntry', () => {
const options = {
@@ -54,6 +69,25 @@ describe('normalizeStoriesEntry', () => {
]);
});
+ it('story in config dir', () => {
+ const specifier = normalizeStoriesEntry('./file.stories.mdx', options);
+ expect(specifier).toMatchInlineSnapshot(`
+ {
+ "titlePrefix": "",
+ "directory": "./.storybook",
+ "files": "file.stories.mdx",
+ "importPathMatcher": {}
+ }
+ `);
+
+ expect(specifier.importPathMatcher).toMatchPaths(['./.storybook/file.stories.mdx']);
+ expect(specifier.importPathMatcher).not.toMatchPaths([
+ '.storybook/file.stories.mdx',
+ './file.stories.mdx',
+ '../file.stories.mdx',
+ ]);
+ });
+
it('non-recursive files glob', () => {
const specifier = normalizeStoriesEntry('../*/*.stories.mdx', options);
expect(specifier).toMatchInlineSnapshot(`
diff --git a/lib/core-common/src/utils/__tests__/paths.test.ts b/lib/core-common/src/utils/__tests__/paths.test.ts
new file mode 100644
index 000000000000..b1422aee080f
--- /dev/null
+++ b/lib/core-common/src/utils/__tests__/paths.test.ts
@@ -0,0 +1,56 @@
+import path from 'path';
+import { normalizeStoryPath } from '../paths';
+
+describe('paths - normalizeStoryPath()', () => {
+ it('returns a path starting with "./" unchanged', () => {
+ const filename = `./src/Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(filename);
+ });
+
+ it('returns a path starting with "../" unchanged', () => {
+ const filename = `../src/Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(filename);
+ });
+
+ it('adds "./" to a normalized relative path', () => {
+ const filename = `src/Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(`./${filename}`);
+ });
+
+ it('adds "./" to a hidden folder', () => {
+ const filename = `.storybook/Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(`./${filename}`);
+ });
+
+ it('adds "./" to a hidden file', () => {
+ const filename = `.Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(`./${filename}`);
+ });
+
+ describe('windows paths', () => {
+ it('returns a path starting with ".\\" unchanged', () => {
+ const filename = `.\\src\\Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(filename);
+ });
+
+ it('returns a path starting with "..\\" unchanged', () => {
+ const filename = `..\\src\\Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(filename);
+ });
+
+ it('adds ".{path.sep}" to a normalized relative path', () => {
+ const filename = `src\\Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(`.${path.sep}${filename}`);
+ });
+
+ it('adds ".{path.sep}" to a hidden folder', () => {
+ const filename = `.storybook\\Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(`.${path.sep}${filename}`);
+ });
+
+ it('adds ".{path.sep}" to a hidden file', () => {
+ const filename = `.Comp.story.js`;
+ expect(normalizeStoryPath(filename)).toEqual(`.${path.sep}${filename}`);
+ });
+ });
+});
diff --git a/lib/core-common/src/utils/__tests__/to-importFn.test.ts b/lib/core-common/src/utils/__tests__/to-importFn.test.ts
index d65bc7ea6e76..6d8e32ee9ae6 100644
--- a/lib/core-common/src/utils/__tests__/to-importFn.test.ts
+++ b/lib/core-common/src/utils/__tests__/to-importFn.test.ts
@@ -5,47 +5,50 @@ const testCases: [string, string[], string[]][] = [
[
'**/*.stories.tsx',
[
- '/Users/user/code/Icon.stories.tsx',
- '/Users/user/code/src/Icon.stories.tsx',
+ '/Users/user/code/.storybook/Icon.stories.tsx',
+ '/Users/user/code/.storybook/stories/Icon.stories.tsx',
+ '/Users/user/code/.storybook/stories/components/Icon.stories.tsx',
+ ],
+ [
+ '/Users/user/code/.storybook/stories.tsx',
+ '/Users/user/code/.storybook/Icon.stories.ts',
+ '/Users/user/code/.storybook/Icon.stories.js',
+ '/Users/user/code/.storybook/src/components/stories.tsx',
+ '/Users/user/code/.storybook/src/components/Icon.stories/stories.tsx',
+ '/Users/user/code/.storybook/src/components/Icon.stories.ts',
+ '/Users/user/code/.storybook/src/components/Icon.stories.js',
'/Users/user/code/src/components/Icon.stories.tsx',
],
- [
- '/Users/user/code/stories.tsx',
- '/Users/user/code/Icon.stories.ts',
- '/Users/user/code/Icon.stories.js',
- '/Users/user/code/src/components/stories.tsx',
- '/Users/user/code/src/components/Icon.stories/stories.tsx',
- '/Users/user/code/src/components/Icon.stories.ts',
- '/Users/user/code/src/components/Icon.stories.js',
- ],
],
[
'./**/*.stories.tsx',
[
- '/Users/user/code/Icon.stories.tsx',
- '/Users/user/code/src/Icon.stories.tsx',
- '/Users/user/code/src/components/Icon.stories.tsx',
- '/Users/user/code/src/components/Icon.stories/Icon.stories.tsx',
+ '/Users/user/code/.storybook/Icon.stories.tsx',
+ '/Users/user/code/.storybook/stories/Icon.stories.tsx',
+ '/Users/user/code/.storybook/stories/components/Icon.stories.tsx',
],
[
- '/Users/user/code/stories.tsx',
- '/Users/user/code/Icon.stories.ts',
- '/Users/user/code/Icon.stories.js',
- '/Users/user/code/src/components/stories.tsx',
- '/Users/user/code/src/components/Icon.stories/stories.tsx',
- '/Users/user/code/src/components/Icon.stories.ts',
- '/Users/user/code/src/components/Icon.stories.js',
+ '/Users/user/code/.storybook/stories.tsx',
+ '/Users/user/code/.storybook/Icon.stories.ts',
+ '/Users/user/code/.storybook/Icon.stories.js',
+ '/Users/user/code/.storybook/src/components/stories.tsx',
+ '/Users/user/code/.storybook/src/components/Icon.stories/stories.tsx',
+ '/Users/user/code/.storybook/src/components/Icon.stories.ts',
+ '/Users/user/code/.storybook/src/components/Icon.stories.js',
+ '/Users/user/code/src/components/Icon.stories.tsx',
],
],
[
'../**/*.stories.tsx',
[
+ '/Users/user/code/.storybook/Icon.stories.tsx',
'/Users/user/code/Icon.stories.tsx',
'/Users/user/code/src/Icon.stories.tsx',
'/Users/user/code/src/components/Icon.stories.tsx',
'/Users/user/code/src/components/Icon.stories/Icon.stories.tsx',
],
[
+ '/Users/user/code/.storybook/stories.tsx',
'/Users/user/code/stories.tsx',
'/Users/user/code/Icon.stories.ts',
'/Users/user/code/Icon.stories.js',
@@ -56,7 +59,7 @@ const testCases: [string, string[], string[]][] = [
],
],
[
- 'src',
+ '../src',
[],
[
'/Users/user/code/Icon.stories.tsx',
@@ -73,7 +76,7 @@ const testCases: [string, string[], string[]][] = [
],
],
[
- 'src/*',
+ '../src/*',
['/Users/user/code/src/Icon.stories.tsx'],
[
'/Users/user/code/Icon.stories.tsx',
@@ -89,21 +92,21 @@ const testCases: [string, string[], string[]][] = [
],
],
[
- './src/**/*.stories.tsx',
+ './stories/**/*.stories.tsx',
[
- '/Users/user/code/src/Icon.stories.tsx',
- '/Users/user/code/src/components/Icon.stories.tsx',
- '/Users/user/code/src/components/Icon.stories/Icon.stories.tsx',
+ '/Users/user/code/.storybook/stories/Icon.stories.tsx',
+ '/Users/user/code/.storybook/stories/components/Icon.stories.tsx',
+ '/Users/user/code/.storybook/stories/components/Icon.stories/Icon.stories.tsx',
],
[
'/Users/user/code/Icon.stories.tsx',
'/Users/user/code/stories.tsx',
'/Users/user/code/Icon.stories.ts',
'/Users/user/code/Icon.stories.js',
- '/Users/user/code/src/components/stories.tsx',
- '/Users/user/code/src/components/Icon.stories/stories.tsx',
- '/Users/user/code/src/components/Icon.stories.ts',
- '/Users/user/code/src/components/Icon.stories.js',
+ '/Users/user/code/stories/components/stories.tsx',
+ '/Users/user/code/stories/components/Icon.stories/stories.tsx',
+ '/Users/user/code/stories/components/Icon.stories.ts',
+ '/Users/user/code/stories/components/Icon.stories.js',
],
],
[
@@ -114,6 +117,13 @@ const testCases: [string, string[], string[]][] = [
'/Users/user/code/src/components/Icon.stories/Icon.stories.tsx',
],
[
+ '/Users/user/code/.storybook/Icon.stories.tsx',
+ // Although it would make sense for these three files to fail to match the `importFn()`,
+ // because we are limited to matching on the RHS of the path (from 'src' onwards, basically)
+ // we cannot avoid matching things inside the config dir in such situations.
+ // '/Users/user/code/.storybook/src/Icon.stories.tsx',
+ // '/Users/user/code/.storybook/src/components/Icon.stories.tsx',
+ // '/Users/user/code/.storybook/src/components/Icon.stories/Icon.stories.tsx',
'/Users/user/code/Icon.stories.tsx',
'/Users/user/code/stories.tsx',
'/Users/user/code/Icon.stories.ts',
@@ -160,12 +170,33 @@ const testCases: [string, string[], string[]][] = [
'/Users/user/code/src/components/Icon.stories.js',
],
],
+ [
+ './Introduction.stories.tsx',
+ ['/Users/user/code/.storybook/Introduction.stories.tsx'],
+ [
+ '/Users/user/code/Introduction.stories.tsx',
+ '/Users/user/code/src/Introduction.stories.tsx',
+ '/Users/user/code/src/Introduction.tsx',
+ ],
+ ],
+ [
+ 'Introduction.stories.tsx',
+ ['/Users/user/code/.storybook/Introduction.stories.tsx'],
+ [
+ '/Users/user/code/Introduction.stories.tsx',
+ '/Users/user/code/src/Introduction.stories.tsx',
+ '/Users/user/code/src/Introduction.tsx',
+ ],
+ ],
];
describe('toImportFn - webpackIncludeRegexp', () => {
it.each(testCases)('matches only suitable paths - %s', (glob, validPaths, invalidPaths) => {
const regex = webpackIncludeRegexp(
- normalizeStoriesEntry(glob, { configDir: '/path', workingDir: '/path' })
+ normalizeStoriesEntry(glob, {
+ configDir: '/Users/user/code/.storybook',
+ workingDir: '/Users/user/code/',
+ })
);
const isNotMatchedForValidPaths = validPaths.filter(
diff --git a/lib/core-common/src/utils/envs.ts b/lib/core-common/src/utils/envs.ts
index f4fb20cb076b..c5287b68de79 100644
--- a/lib/core-common/src/utils/envs.ts
+++ b/lib/core-common/src/utils/envs.ts
@@ -61,6 +61,6 @@ export const stringifyProcessEnvs = (raw: Record): Record {
const directoryFromConfig = path.resolve(configDir, directory);
- let directoryFromWorking = path.relative(workingDir, directoryFromConfig);
+ const directoryFromWorking = path.relative(workingDir, directoryFromConfig);
// relative('/foo', '/foo/src') => 'src'
// but we want `./src` to match importPaths
- if (!directoryFromWorking.startsWith('.')) {
- directoryFromWorking = `.${path.sep}${directoryFromWorking}`;
- }
- return directoryFromWorking;
+ return normalizeStoryPath(directoryFromWorking);
};
export const normalizeStoriesEntry = (
diff --git a/lib/core-common/src/utils/paths.ts b/lib/core-common/src/utils/paths.ts
index baf20a655f95..e32978c5d936 100644
--- a/lib/core-common/src/utils/paths.ts
+++ b/lib/core-common/src/utils/paths.ts
@@ -28,3 +28,13 @@ export const nodePathsToArray = (nodePath: string) =>
.split(process.platform === 'win32' ? ';' : ':')
.filter(Boolean)
.map((p) => path.resolve('./', p));
+
+const relativePattern = /^\.{1,2}[/\\]/;
+/**
+ * Ensures that a path starts with `./` or `../`
+ */
+export function normalizeStoryPath(filename: string) {
+ if (relativePattern.test(filename)) return filename;
+
+ return `.${path.sep}${filename}`;
+}
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 5e3a8703260d..0043a1a20608 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
@@ -45,6 +45,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
index e3e75f3f9014..06b74e778891 100644
--- a/lib/core-server/package.json
+++ b/lib/core-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-server",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -41,16 +41,16 @@
},
"dependencies": {
"@discoveryjs/json-ext": "^0.5.3",
- "@storybook/builder-webpack4": "6.4.0-rc.2",
- "@storybook/core-client": "6.4.0-rc.2",
- "@storybook/core-common": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/builder-webpack4": "6.4.0-rc.7",
+ "@storybook/core-client": "6.4.0-rc.7",
+ "@storybook/core-common": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/csf-tools": "6.4.0-rc.2",
- "@storybook/manager-webpack4": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
+ "@storybook/csf-tools": "6.4.0-rc.7",
+ "@storybook/manager-webpack4": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
"@storybook/semver": "^7.3.2",
- "@storybook/store": "6.4.0-rc.2",
+ "@storybook/store": "6.4.0-rc.7",
"@types/node": "^14.0.10",
"@types/node-fetch": "^2.5.7",
"@types/pretty-hrtime": "^1.0.0",
@@ -84,7 +84,7 @@
"ws": "^8.2.3"
},
"devDependencies": {
- "@storybook/builder-webpack5": "6.4.0-rc.2",
+ "@storybook/builder-webpack5": "6.4.0-rc.7",
"@types/compression": "^1.7.0",
"@types/ip": "^1.1.0",
"@types/serve-favicon": "^2.5.2",
@@ -92,8 +92,8 @@
"jest-specific-snapshot": "^4.0.0"
},
"peerDependencies": {
- "@storybook/builder-webpack5": "6.4.0-rc.2",
- "@storybook/manager-webpack5": "6.4.0-rc.2",
+ "@storybook/builder-webpack5": "6.4.0-rc.7",
+ "@storybook/manager-webpack5": "6.4.0-rc.7",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
@@ -111,6 +111,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts
index 5e5d0d063b4f..5b03cb6be84d 100644
--- a/lib/core-server/src/build-static.ts
+++ b/lib/core-server/src/build-static.ts
@@ -101,6 +101,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
await extractStoriesJson(path.join(options.outputDir, 'stories.json'), stories, {
...directories,
storiesV2Compatibility: !features?.breakingChangesV7 && !features?.storyStoreV7,
+ storyStoreV7: features?.storyStoreV7,
});
}
diff --git a/lib/core-server/src/cli/utils.ts b/lib/core-server/src/cli/utils.ts
index 30e5f13f94d3..741cabcc12c9 100644
--- a/lib/core-server/src/cli/utils.ts
+++ b/lib/core-server/src/cli/utils.ts
@@ -36,7 +36,7 @@ const warnStaticDirDeprecated = warnDeprecatedFlag(
`
--static-dir CLI flag is deprecated, see:
- https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-static-dir-flag
+ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
`
);
diff --git a/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index a44a41dd91ce..35a9616887c1 100644
--- a/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -15,6 +15,7 @@ const options = {
configDir: path.join(__dirname, '__mockdata__'),
workingDir: path.join(__dirname, '__mockdata__'),
storiesV2Compatibility: false,
+ storyStoreV7: true,
};
describe('StoryIndexGenerator', () => {
diff --git a/lib/core-server/src/utils/StoryIndexGenerator.ts b/lib/core-server/src/utils/StoryIndexGenerator.ts
index b76d599c7053..d2df6f28b3f7 100644
--- a/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -11,24 +11,11 @@ import {
V2CompatIndexEntry,
StoryId,
} from '@storybook/store';
-import { NormalizedStoriesSpecifier } from '@storybook/core-common';
+import { NormalizedStoriesSpecifier, normalizeStoryPath } from '@storybook/core-common';
import { logger } from '@storybook/node-logger';
import { readCsfOrMdx, getStorySortParameter } from '@storybook/csf-tools';
import { ComponentTitle } from '@storybook/csf';
-function sortExtractedStories(
- stories: StoryIndex['stories'],
- storySortParameter: any,
- fileNameOrder: string[]
-) {
- const sortableStories = Object.values(stories);
- sortStoriesV7(sortableStories, storySortParameter, fileNameOrder);
- return sortableStories.reduce((acc, item) => {
- acc[item.id] = item;
- return acc;
- }, {} as StoryIndex['stories']);
-}
-
type SpecifierStoriesCache = Record;
export class StoryIndexGenerator {
@@ -47,6 +34,7 @@ export class StoryIndexGenerator {
workingDir: Path;
configDir: Path;
storiesV2Compatibility: boolean;
+ storyStoreV7: boolean;
}
) {
this.storyIndexEntries = new Map();
@@ -102,7 +90,7 @@ export class StoryIndexGenerator {
const fileStories = {} as StoryIndex['stories'];
const entry = this.storyIndexEntries.get(specifier);
try {
- const importPath = slash(relativePath[0] === '.' ? relativePath : `./${relativePath}`);
+ const importPath = slash(normalizeStoryPath(relativePath));
const defaultTitle = autoTitleFromSpecifier(importPath, specifier);
const csf = (await readCsfOrMdx(absolutePath, { defaultTitle })).parse();
csf.stories.forEach(({ id, name }) => {
@@ -132,8 +120,20 @@ export class StoryIndexGenerator {
Object.assign(stories, subStories);
});
- const storySortParameter = await this.getStorySortParameter();
- return sortExtractedStories(stories, storySortParameter, this.storyFileNames());
+ const sortableStories = Object.values(stories);
+
+ // Skip sorting if we're in v6 mode because we don't have
+ // all the info we need here
+ if (this.options.storyStoreV7) {
+ const storySortParameter = await this.getStorySortParameter();
+ const fileNameOrder = this.storyFileNames();
+ sortStoriesV7(sortableStories, storySortParameter, fileNameOrder);
+ }
+
+ return sortableStories.reduce((acc, item) => {
+ acc[item.id] = item;
+ return acc;
+ }, {} as StoryIndex['stories']);
}
async getIndex() {
diff --git a/lib/core-server/src/utils/stories-json.ts b/lib/core-server/src/utils/stories-json.ts
index 2fbee370400d..611add9f4770 100644
--- a/lib/core-server/src/utils/stories-json.ts
+++ b/lib/core-server/src/utils/stories-json.ts
@@ -18,7 +18,12 @@ export const DEBOUNCE = 100;
export async function extractStoriesJson(
outputFile: string,
normalizedStories: NormalizedStoriesSpecifier[],
- options: { configDir: string; workingDir: string; storiesV2Compatibility: boolean }
+ options: {
+ configDir: string;
+ workingDir: string;
+ storiesV2Compatibility: boolean;
+ storyStoreV7: boolean;
+ }
) {
const generator = new StoryIndexGenerator(normalizedStories, options);
await generator.initialize();
@@ -42,6 +47,7 @@ export async function useStoriesJson(
configDir: options.configDir,
workingDir,
storiesV2Compatibility: !features?.breakingChangesV7 && !features?.storyStoreV7,
+ storyStoreV7: features?.storyStoreV7,
});
// Wait until someone actually requests `stories.json` before we start generating/watching.
diff --git a/lib/core/package.json b/lib/core/package.json
index 7b21ea7ab5cb..cd74c59c2b7b 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -40,11 +40,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core-client": "6.4.0-rc.2",
- "@storybook/core-server": "6.4.0-rc.2"
+ "@storybook/core-client": "6.4.0-rc.7",
+ "@storybook/core-server": "6.4.0-rc.7"
},
"peerDependencies": {
- "@storybook/builder-webpack5": "6.4.0-rc.2",
+ "@storybook/builder-webpack5": "6.4.0-rc.7",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"webpack": "*"
@@ -60,6 +60,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/csf-tools/package.json b/lib/csf-tools/package.json
index 321dd6924bb0..bb7e41554b4c 100644
--- a/lib/csf-tools/package.json
+++ b/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-tools",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "",
"keywords": [
"storybook"
@@ -65,6 +65,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/csf-tools/src/CsfFile.test.ts b/lib/csf-tools/src/CsfFile.test.ts
index e93f2311811c..393cfe157a53 100644
--- a/lib/csf-tools/src/CsfFile.test.ts
+++ b/lib/csf-tools/src/CsfFile.test.ts
@@ -147,6 +147,27 @@ describe('CsfFile', () => {
`);
});
+ it('custom component id', () => {
+ expect(
+ parse(
+ dedent`
+ export default { title: 'foo/bar', id: 'custom-id' };
+ export const A = () => {};
+ export const B = () => {};
+ `
+ )
+ ).toMatchInlineSnapshot(`
+ meta:
+ title: foo/bar
+ id: custom-id
+ stories:
+ - id: custom-id--a
+ name: A
+ - id: custom-id--b
+ name: B
+ `);
+ });
+
it('typescript', () => {
expect(
parse(
diff --git a/lib/csf-tools/src/CsfFile.ts b/lib/csf-tools/src/CsfFile.ts
index b908947438ae..1c7b326b5999 100644
--- a/lib/csf-tools/src/CsfFile.ts
+++ b/lib/csf-tools/src/CsfFile.ts
@@ -9,6 +9,7 @@ import { babelParse } from './babelParse';
const logger = console;
interface Meta {
+ id?: string;
title?: string;
component?: string;
includeStories?: string[] | RegExp;
@@ -188,6 +189,12 @@ export class CsfFile {
} else if (p.key.name === 'component') {
const { code } = generate(p.value, {});
meta.component = code;
+ } else if (p.key.name === 'id') {
+ if (t.isStringLiteral(p.value)) {
+ meta.id = p.value.value;
+ } else {
+ throw new Error(`Unexpected component id: ${p.value}`);
+ }
}
}
});
@@ -353,7 +360,7 @@ export class CsfFile {
self._meta.title = self._meta.title || this._defaultTitle;
self._stories = entries.reduce((acc, [key, story]) => {
if (isExportStory(key, self._meta)) {
- const id = toId(self._meta.title, storyNameFromExport(key));
+ const id = toId(self._meta.id || self._meta.title, storyNameFromExport(key));
const parameters: Record = { ...story.parameters, __id: id };
if (entries.length === 1 && key === '__page') {
parameters.docsOnly = true;
diff --git a/lib/instrumenter/package.json b/lib/instrumenter/package.json
index 4b5b9c0cff40..942eb14633ce 100644
--- a/lib/instrumenter/package.json
+++ b/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/instrumenter",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "",
"keywords": [
"storybook"
@@ -40,14 +40,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"global": "^4.4.0"
},
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/manager-webpack4/package.json b/lib/manager-webpack4/package.json
index edd896981900..2bc5cf6fddc9 100644
--- a/lib/manager-webpack4/package.json
+++ b/lib/manager-webpack4/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager-webpack4",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -45,12 +45,12 @@
"@babel/core": "^7.12.10",
"@babel/plugin-transform-template-literals": "^7.12.1",
"@babel/preset-react": "^7.12.10",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/core-client": "6.4.0-rc.2",
- "@storybook/core-common": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
- "@storybook/ui": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/core-client": "6.4.0-rc.7",
+ "@storybook/core-common": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
+ "@storybook/ui": "6.4.0-rc.7",
"@types/node": "^14.0.10",
"@types/webpack": "^4.41.26",
"babel-loader": "^8.0.0",
@@ -97,6 +97,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/manager-webpack5/package.json b/lib/manager-webpack5/package.json
index 0e546478eecf..fec551fee5df 100644
--- a/lib/manager-webpack5/package.json
+++ b/lib/manager-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager-webpack5",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -45,12 +45,12 @@
"@babel/core": "^7.12.10",
"@babel/plugin-transform-template-literals": "^7.12.1",
"@babel/preset-react": "^7.12.10",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/core-client": "6.4.0-rc.2",
- "@storybook/core-common": "6.4.0-rc.2",
- "@storybook/node-logger": "6.4.0-rc.2",
- "@storybook/theming": "6.4.0-rc.2",
- "@storybook/ui": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/core-client": "6.4.0-rc.7",
+ "@storybook/core-common": "6.4.0-rc.7",
+ "@storybook/node-logger": "6.4.0-rc.7",
+ "@storybook/theming": "6.4.0-rc.7",
+ "@storybook/ui": "6.4.0-rc.7",
"@types/node": "^14.0.10",
"babel-loader": "^8.0.0",
"case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -93,6 +93,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 3f192c307ce2..2a2c23520f80 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "",
"keywords": [
"storybook"
@@ -52,6 +52,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
index 2780585a0768..6107df5b3fa3 100644
--- a/lib/postinstall/package.json
+++ b/lib/postinstall/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/postinstall",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Storybook addons postinstall utilities",
"keywords": [
"api",
@@ -51,6 +51,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/preview-web/package.json b/lib/preview-web/package.json
index 6d4e50e2705f..ab394a2efacb 100644
--- a/lib/preview-web/package.json
+++ b/lib/preview-web/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview-web",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "",
"keywords": [
"storybook"
@@ -40,12 +40,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/channel-postmessage": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/channel-postmessage": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
- "@storybook/store": "6.4.0-rc.2",
+ "@storybook/store": "6.4.0-rc.7",
"ansi-to-html": "^0.6.11",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -64,6 +64,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/router/package.json b/lib/router/package.json
index 7c15edca9c1a..867b8503b07b 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Core Storybook Router",
"keywords": [
"storybook"
@@ -40,7 +40,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/client-logger": "6.4.0-rc.2",
+ "@storybook/client-logger": "6.4.0-rc.7",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
"global": "^4.4.0",
@@ -48,8 +48,8 @@
"lodash": "^4.17.20",
"memoizerific": "^1.11.3",
"qs": "^6.10.0",
- "react-router": "^6.0.0-beta.8",
- "react-router-dom": "^6.0.0-beta.8",
+ "react-router": "^6.0.0",
+ "react-router-dom": "^6.0.0",
"ts-dedent": "^2.0.0"
},
"peerDependencies": {
@@ -59,6 +59,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index 7a918b9be8a1..9766457a2562 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/source-loader",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Source loader",
"keywords": [
"lib",
@@ -41,8 +41,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"core-js": "^3.8.2",
"estraverse": "^5.2.0",
@@ -59,6 +59,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/store/package.json b/lib/store/package.json
index 340d3c09b4cf..170e7bef3a27 100644
--- a/lib/store/package.json
+++ b/lib/store/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/store",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "",
"keywords": [
"storybook"
@@ -40,9 +40,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
@@ -56,9 +56,13 @@
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2"
},
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ },
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/store/src/autoTitle.test.ts b/lib/store/src/autoTitle.test.ts
index 072245c1e3f0..7122e6151009 100644
--- a/lib/store/src/autoTitle.test.ts
+++ b/lib/store/src/autoTitle.test.ts
@@ -12,6 +12,10 @@ const options = {
configDir: '/path',
workingDir: '/path',
};
+const winOptions = {
+ configDir: '\\path',
+ workingDir: '\\path',
+};
describe('autoTitle', () => {
it('no match', () => {
@@ -58,7 +62,7 @@ describe('autoTitle', () => {
expect(
auto(
'./path/to_my/file.stories.js',
- normalizeStoriesEntry({ directory: '.\\path' }, options)
+ normalizeStoriesEntry({ directory: '.\\path' }, winOptions)
)
).toMatchInlineSnapshot(`To My/File`);
});
@@ -102,7 +106,7 @@ describe('autoTitle', () => {
expect(
auto(
'./path/to_my/file.stories.js',
- normalizeStoriesEntry({ directory: '.\\path\\' }, options)
+ normalizeStoriesEntry({ directory: '.\\path\\' }, winOptions)
)
).toMatchInlineSnapshot(`To My/File`);
});
diff --git a/lib/store/src/inferArgTypes.ts b/lib/store/src/inferArgTypes.ts
index 7a6bc2d0cc5e..008f49c5892a 100644
--- a/lib/store/src/inferArgTypes.ts
+++ b/lib/store/src/inferArgTypes.ts
@@ -21,7 +21,9 @@ const inferType = (value: any, name: string, visited: Set): SBType => {
logger.warn(dedent`
We've detected a cycle in arg '${name}'. Args should be JSON-serializable.
- More info: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args
+ Consider using the mapping feature or fully custom args:
+ - Mapping: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
+ - Custom args: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args
`);
return { name: 'other', value: 'cyclic object' };
}
diff --git a/lib/store/src/sortStories.ts b/lib/store/src/sortStories.ts
index 33ae9d22af2f..040e7222eec8 100644
--- a/lib/store/src/sortStories.ts
+++ b/lib/store/src/sortStories.ts
@@ -4,7 +4,7 @@ import { Comparator, StorySortParameter, StorySortParameterV7 } from '@storybook
import { storySort } from './storySort';
import { Story, StoryIndexEntry, Path, Parameters } from './types';
-export const sortStoriesV7 = (
+const sortStoriesCommon = (
stories: StoryIndexEntry[],
storySortParameter: StorySortParameterV7,
fileNameOrder: Path[]
@@ -16,19 +16,7 @@ export const sortStoriesV7 = (
} else {
sortFn = storySort(storySortParameter);
}
- try {
- stable.inplace(stories, sortFn);
- } catch (err) {
- throw new Error(dedent`
- Error sorting stories with sort parameter ${storySortParameter}:
-
- > ${err.message}
-
- Are you using a V6-style sort function in V7 mode?
-
- More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
- `);
- }
+ stable.inplace(stories, sortFn);
} else {
stable.inplace(
stories,
@@ -38,6 +26,26 @@ export const sortStoriesV7 = (
return stories;
};
+export const sortStoriesV7 = (
+ stories: StoryIndexEntry[],
+ storySortParameter: StorySortParameterV7,
+ fileNameOrder: Path[]
+) => {
+ try {
+ return sortStoriesCommon(stories, storySortParameter, fileNameOrder);
+ } catch (err) {
+ throw new Error(dedent`
+ Error sorting stories with sort parameter ${storySortParameter}:
+
+ > ${err.message}
+
+ Are you using a V6-style sort function in V7 mode?
+
+ More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
+ `);
+ }
+};
+
const toIndexEntry = (story: any): StoryIndexEntry => {
const { id, title, name, parameters } = story;
return { id, title, name, importPath: parameters.fileName };
@@ -54,5 +62,5 @@ export const sortStoriesV6 = (
}
const storiesV7 = stories.map((s) => toIndexEntry(s[1]));
- return sortStoriesV7(storiesV7, storySortParameter as StorySortParameterV7, fileNameOrder);
+ return sortStoriesCommon(storiesV7, storySortParameter as StorySortParameterV7, fileNameOrder);
};
diff --git a/lib/theming/package.json b/lib/theming/package.json
index 509634548802..c0a919910f52 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -43,7 +43,7 @@
"@emotion/core": "^10.1.1",
"@emotion/is-prop-valid": "^0.8.6",
"@emotion/styled": "^10.0.27",
- "@storybook/client-logger": "6.4.0-rc.2",
+ "@storybook/client-logger": "6.4.0-rc.7",
"core-js": "^3.8.2",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.27",
@@ -60,6 +60,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 24a62f136b2c..ffecd90c746c 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ui",
- "version": "6.4.0-rc.2",
+ "version": "6.4.0-rc.7",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -41,15 +41,15 @@
},
"dependencies": {
"@emotion/core": "^10.1.1",
- "@storybook/addons": "6.4.0-rc.2",
- "@storybook/api": "6.4.0-rc.2",
- "@storybook/channels": "6.4.0-rc.2",
- "@storybook/client-logger": "6.4.0-rc.2",
- "@storybook/components": "6.4.0-rc.2",
- "@storybook/core-events": "6.4.0-rc.2",
- "@storybook/router": "6.4.0-rc.2",
+ "@storybook/addons": "6.4.0-rc.7",
+ "@storybook/api": "6.4.0-rc.7",
+ "@storybook/channels": "6.4.0-rc.7",
+ "@storybook/client-logger": "6.4.0-rc.7",
+ "@storybook/components": "6.4.0-rc.7",
+ "@storybook/core-events": "6.4.0-rc.7",
+ "@storybook/router": "6.4.0-rc.7",
"@storybook/semver": "^7.3.2",
- "@storybook/theming": "6.4.0-rc.2",
+ "@storybook/theming": "6.4.0-rc.7",
"copy-to-clipboard": "^3.3.1",
"core-js": "^3.8.2",
"core-js-pure": "^3.8.2",
@@ -86,6 +86,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "16be10b522569b4b55c684e1556b91b300009bf4",
+ "gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
"sbmodern": "dist/modern/index.js"
}
diff --git a/lib/ui/src/components/preview/iframe.stories.tsx b/lib/ui/src/components/preview/iframe.stories.tsx
index 738f288748a7..5175821e6c2c 100644
--- a/lib/ui/src/components/preview/iframe.stories.tsx
+++ b/lib/ui/src/components/preview/iframe.stories.tsx
@@ -41,7 +41,7 @@ export const MissingStory = () => (
/>
);
-export const preparingStory = () => (
+export const PreparingStory = () => (