With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the
storiesOf format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@@ -285,7 +283,6 @@ See our documentation on how to customize the [Storyshots configuration](./writi
Currently there's an issue when using MDX stories with IE11. This issue does
not apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our
Contribution guidelines and submit a pull request.
-
### Why aren't my code blocks highlighted with Storybook MDX
Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
@@ -341,7 +338,6 @@ You'll need to update it to make it compatible with MDX 2.
See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information.
-
### Why can't I import my own stories into MDX 2?
This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
@@ -356,7 +352,6 @@ import * as stories from './Button.stories.jsx';
```
-
### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
@@ -399,8 +394,6 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t
No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
-
-
### How can my code detect if it is running in Storybook?
You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
@@ -477,11 +470,10 @@ export default {
There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
-
### How does Storybook handles enviroment variables?
Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
-Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
\ No newline at end of file
+Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
diff --git a/docs/frameworks.js b/docs/frameworks.js
index e634b6612c45..8d2e1156f7b8 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -117,27 +117,27 @@ module.exports = {
{
name: 'Source',
unsupported: [],
- path: 'writing-docs/doc-blocks#source',
+ path: 'writing-docs/doc-block-source',
},
{
name: 'Dynamic source',
supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'],
- path: 'writing-docs/doc-blocks#source',
+ path: 'writing-docs/doc-block-source',
},
{
name: 'Args Table',
supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
- path: 'writing-docs/doc-blocks#argstable',
+ path: 'writing-docs/doc-block-argstable',
},
{
name: 'Description',
supported: ['react', 'vue', 'angular', 'ember', 'web-components'],
- path: 'writing-docs/doc-blocks#description',
+ path: 'writing-docs/doc-block-description',
},
{
name: 'Inline stories',
supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
- path: 'writing-docs/doc-blocks#inline-rendering',
+ path: 'writing-docs/docs-page#inline-stories-vs-iframe-stories',
},
],
},
diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx
index 773e23f801ac..c0c463e548bf 100644
--- a/docs/get-started/installation-problems/angular.mdx
+++ b/docs/get-started/installation-problems/angular.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+ If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
+ ```
+
- Add the `--type angular` flag to the installation command to set up Storybook manually:
```shell
diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx
index 23856fe3d542..7a7698e3d84b 100644
--- a/docs/get-started/installation-problems/ember.mdx
+++ b/docs/get-started/installation-problems/ember.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+ If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
+ ```
+
- Add the `--type ember` flag to the installation command to set up Storybook manually:
```shell
diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx
index 3b1a2b94a1bd..593f0c13ef33 100644
--- a/docs/get-started/installation-problems/preact.mdx
+++ b/docs/get-started/installation-problems/preact.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+ If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
+ ```
+
- Add the `--type preact` flag to the installation command to set up Storybook manually:
```shell
diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx
index 36f517bcdaff..0acc6ef29f97 100644
--- a/docs/get-started/installation-problems/react.mdx
+++ b/docs/get-started/installation-problems/react.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+ If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
+ ```
+
- Add the `--type react` flag to the installation command to set up Storybook manually:
```shell
diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx
index 2b53693d98c8..68f248b11ec8 100644
--- a/docs/get-started/installation-problems/svelte.mdx
+++ b/docs/get-started/installation-problems/svelte.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+ If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
+ ```
+
- Add the `--type svelte` flag to the installation command to set up Storybook manually:
```shell
diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx
index 61ab98ead519..d0c276ff4970 100644
--- a/docs/get-started/installation-problems/vue.mdx
+++ b/docs/get-started/installation-problems/vue.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+ If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+ ```shell
+ npx storybook init --use-npm
+ ```
+
- Add the `--type vue` (for Vue 2), or `--type vue3` (for Vue 3) flag to the installation command to set up Storybook manually:
```shell
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 8425cc063cfc..c349c1768787 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -93,6 +93,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
/>
-Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../writing-tests/introduction.md) this for you.
+Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/introduction.md) for you.
Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.
diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx
new file mode 100644
index 000000000000..c87cb62adbb8
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.js.mdx
@@ -0,0 +1,21 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ decorators: [(story) => {
+ const decorator = document.createElement('div');
+ decorator.style.margin = '3em';
+ decorator.appendChild(story());
+ return decorator;
+ }],
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx
new file mode 100644
index 000000000000..d1a4efaa4258
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ decorators: [(story) => {
+ const decorator = document.createElement('div');
+ decorator.style.margin = '3em';
+ decorator.appendChild(story());
+ return decorator;
+ }],
+} as Meta
;
+
+export const Primary: StoryFn = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx
new file mode 100644
index 000000000000..c6bbe5bf64f1
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.js.mdx
@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+```
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx
new file mode 100644
index 000000000000..e294d98b1b40
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.ts.mdx
@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts
+
+import { Meta } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+```
diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx
new file mode 100644
index 000000000000..3f13f148ce43
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+
+export const Primary = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx
new file mode 100644
index 000000000000..0b37196b9a41
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+
+export const Primary: StoryFn = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx
new file mode 100644
index 000000000000..9df04fd6e394
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx
new file mode 100644
index 000000000000..759858bf1da4
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args): HTMLButtonElement => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index 60feb2014547..8d71b288cef9 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -1,4 +1,6 @@
```js
+// Button.stories.js
+
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index 3130fc260de7..9b75446177ee 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -1,16 +1,23 @@
```ts
+// Button.stories.ts
+
import { Meta, StoryFn } from '@storybook/html';
+type ButtonArgs = {
+ primary: boolean;
+ label: string;
+}
+
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
-} as Meta;
+} as Meta;
//👇 We create a “template” of how args map to rendering
-const Template: StoryFn = (args): HTMLButtonElement => {
+const Template: StoryFn = (args): HTMLButtonElement => {
const btn = document.createElement('button');
btn.innerText = args.label;
diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx
new file mode 100644
index 000000000000..5cb8981ad168
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.js.mdx
@@ -0,0 +1,25 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx
new file mode 100644
index 000000000000..906845b4f472
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+} as Meta;
+
+export const Primary: StoryFn = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx
new file mode 100644
index 000000000000..b6b9b43ec295
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+};
+export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx
new file mode 100644
index 000000000000..47a1f99f8ee1
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+} as Meta;
+export const Primary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx
index 743c489eff80..6268687c428b 100644
--- a/docs/snippets/html/button-story.js.mdx
+++ b/docs/snippets/html/button-story.js.mdx
@@ -1,4 +1,6 @@
```js
+// Button.stories.js
+
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx
index 104aa6ccbd19..62e72638171e 100644
--- a/docs/snippets/html/button-story.ts.mdx
+++ b/docs/snippets/html/button-story.ts.mdx
@@ -1,4 +1,6 @@
```ts
+// Button.stories.ts
+
import { Meta, StoryFn } from '@storybook/html';
export default {
diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx
new file mode 100644
index 000000000000..b9cbe7d627f1
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.js.mdx
@@ -0,0 +1,27 @@
+
+```js
+// List.stories.js
+
+import { createList } from './List';
+import { createListItem } from './ListItem';
+
+export default {
+ title: 'List',
+};
+
+export const Empty = (args) => createList(args);
+
+export const OneItem = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ return list;
+};
+
+export const ManyItems = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx
new file mode 100644
index 000000000000..81e14d1162a4
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.ts.mdx
@@ -0,0 +1,29 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from './List';
+import { createListItem } from './ListItem';
+
+export default {
+ title: 'List',
+} as Meta;
+
+export const Empty: StoryFn = (args) => createList(args);
+
+export const OneItem: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ return list;
+};
+
+export const ManyItems: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ list.appendChild(createListItem());
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
new file mode 100644
index 000000000000..a58833617912
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -0,0 +1,22 @@
+
+```js
+// List.stories.js
+
+import { createList } from './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ title: 'List',
+};
+
+export const ManyItems = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem(Selected.args));
+ list.appendChild(createListItem(Unselected.args));
+ list.appendChild(createListItem(Unselected.args));
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
new file mode 100644
index 000000000000..434bec00d690
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -0,0 +1,32 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ title: 'List',
+} as Meta;
+
+export const Empty: StoryFn = (args) => createList(args);
+
+export const OneItem: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem());
+ return list;
+};
+
+export const ManyItems: StoryFn = (args) => {
+ const list = createList(args);
+ list.appendChild(createListItem(Selected.args));
+ list.appendChild(createListItem(Unselected.args));
+ list.appendChild(createListItem(Unselected.args));
+ return list;
+};
+```
diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx
new file mode 100644
index 000000000000..8e4959b468d3
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.js.mdx
@@ -0,0 +1,12 @@
+```js
+// List.stories.js
+
+import { createList } from './List';
+
+export default {
+ title: 'List',
+};
+
+// Always an empty list, not super interesting
+const Template = (args) => createList(args);
+```
diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx
new file mode 100644
index 000000000000..e0706e6c0827
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from './List';
+
+export default {
+ title: 'List',
+} as Meta;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args) => createList(args);
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index b7b5ac95c273..6d10a8faab72 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -33,6 +33,8 @@ To define the args of a single story, use the `args` CSF story key:
'svelte/button-story-with-args.native-format.mdx',
'svelte/button-story-with-args.mdx.mdx',
'web-components/button-story-with-args.js.mdx',
+ 'html/button-story-with-args.ts.mdx',
+ 'html/button-story-with-args.js.mdx',
]}
/>
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 96ca9925fffa..15e4c456516b 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -37,6 +37,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
'angular/button-story-default-export-with-component.ts.mdx',
'svelte/button-story-default-export-with-component.js.mdx',
'web-components/button-story-default-export-with-component.js.mdx',
+ 'html/button-story-default-export.js.mdx',
+ 'html/button-story-default-export.ts.mdx',
]}
/>
@@ -59,6 +61,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
'svelte/button-story.js.mdx',
'svelte/button-story.native-format.mdx',
'web-components/button-story.js.mdx',
+ 'html/button-story.js.mdx',
+ 'html/button-story.ts.mdx',
]}
/>
@@ -99,6 +103,8 @@ You can rename any particular story you need. For instance, to give it a more ac
'angular/button-story-rename-story.ts.mdx',
'svelte/button-story-rename-story.js.mdx',
'web-components/button-story-rename-story.js.mdx',
+ 'html/button-story-rename-story.js.mdx',
+ 'html/button-story-rename-story.ts.mdx',
]}
/>
@@ -127,6 +133,8 @@ A story is a function that describes how to render a component. You can have mul
'svelte/button-story-with-emojis.native-format.mdx',
'svelte/button-story-with-emojis.mdx.mdx',
'web-components/button-story-with-emojis.js.mdx',
+ 'html/button-story-with-emojis.js.mdx',
+ 'html/button-story-with-emojis.ts.mdx',
]}
/>
@@ -152,6 +160,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
'svelte/button-story-using-args.js.mdx',
'svelte/button-story-using-args.native-format.mdx',
'web-components/button-story-using-args.js.mdx',
+ 'html/button-story-using-args.js.mdx',
+ 'html/button-story-using-args.ts.mdx',
]}
/>
@@ -254,6 +264,8 @@ For instance, suppose you wanted to test your Button component against a differe
'svelte/button-story-with-blue-args.native-format.mdx',
'svelte/button-story-with-blue-args.mdx.mdx',
'web-components/button-story-with-blue-args.js.mdx',
+ 'html/button-story-with-blue-args.js.mdx',
+ 'html/button-story-with-blue-args.ts.mdx',
]}
/>
@@ -286,6 +298,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
'svelte/button-story-component-decorator.native-format.mdx',
'svelte/button-story-component-decorator.mdx.mdx',
'web-components/button-story-component-decorator.js.mdx',
+ 'html/button-story-component-decorator.js.mdx',
+ 'html/button-story-component-decorator.ts.mdx',
]}
/>
@@ -310,6 +324,8 @@ When building design systems or component libraries, you may have two or more co
'vue/list-story-starter.ts-3.ts.mdx',
'svelte/list-story-starter.native-format.mdx',
'web-components/list-story-starter.js.mdx',
+ 'html/list-story-starter.js.mdx',
+ 'html/list-story-starter.ts.mdx',
]}
/>
@@ -330,6 +346,8 @@ In such cases, it makes sense to render a different function for each story:
'vue/list-story-expanded.ts-3.ts.mdx',
'svelte/list-story-expanded.native-format.mdx',
'web-components/list-story-expanded.js.mdx',
+ 'html/list-story-expanded.js.mdx',
+ 'html/list-story-expanded.ts.mdx',
]}
/>
@@ -349,6 +367,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
'vue/list-story-reuse-data.3.js.mdx',
'vue/list-story-reuse-data.ts-3.ts.mdx',
'web-components/list-story-reuse-data.js.mdx',
+ 'html/list-story-reuse-data.js.mdx',
+ 'html/list-story-reuse-data.ts.mdx',
]}
/>
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 1b86c56dfc01..d4d74ea0ca48 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -157,7 +157,7 @@ Interaction tests can be expensive to maintain when applied wholesale to every c
- [Test runner](./test-runner.md) to automate test execution
- [Visual tests](./visual-testing.md) for appearance
-- [Accessibility tests](accessibility-testing.md) for accessibility
+- [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
\ No newline at end of file
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 1940f87630c0..e72bd8205454 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -45,7 +45,6 @@ Start your Storybook with:
'angular/storybook-run-dev.with-builder.js.mdx',
'common/storybook-run-dev.yarn.js.mdx',
'common/storybook-run-dev.npm.js.mdx',
-
]}
/>
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 6c8ccb62dbb8..82335b770bda 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -60,7 +60,7 @@
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/jest": "^0.0.5",
"@storybook/source-loader": "7.0.0-alpha.6",
- "@storybook/testing-library": "^0.0.12",
+ "@storybook/testing-library": "0.0.14-next.0",
"@types/core-js": "^2.5.4",
"@types/jest": "^26.0.16",
"@types/node": "^14.14.20 || ^16.0.0",
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 858e6d1798ee..2c40fc72cbbf 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -38,7 +38,7 @@
"@storybook/react-webpack5": "7.0.0-alpha.6",
"@storybook/router": "7.0.0-alpha.6",
"@storybook/source-loader": "7.0.0-alpha.6",
- "@storybook/testing-library": "^0.0.12",
+ "@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "7.0.0-alpha.6",
"@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9",
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index bc64f338c4b9..7671a5bbaa47 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -26,7 +26,7 @@
"@storybook/source-loader": "7.0.0-alpha.6",
"@storybook/svelte": "7.0.0-alpha.6",
"@storybook/svelte-webpack5": "7.0.0-alpha.6",
- "@storybook/testing-library": "^0.0.7",
+ "@storybook/testing-library": "0.0.14-next.0",
"storybook": "7.0.0-alpha.6",
"svelte-jester": "^2.3.2",
"svelte-preprocess": "^4.10.6"
diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json
index 98cbc827408d..82aa937a3fb2 100644
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@@ -20,7 +20,7 @@
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-storyshots": "7.0.0-alpha.6",
"@storybook/jest": "^0.0.5",
- "@storybook/testing-library": "^0.0.12",
+ "@storybook/testing-library": "0.0.14-next.0",
"@storybook/vue3": "7.0.0-alpha.6",
"@storybook/vue3-webpack5": "7.0.0-alpha.6",
"@vue/cli-plugin-babel": "^5.0.4",
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 8db6ed4c18a8..125f4bd41407 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -28,7 +28,7 @@
"@storybook/addons": "7.0.0-alpha.6",
"@storybook/jest": "^0.0.5",
"@storybook/source-loader": "7.0.0-alpha.6",
- "@storybook/testing-library": "^0.0.12",
+ "@storybook/testing-library": "0.0.14-next.0",
"@storybook/vue": "7.0.0-alpha.6",
"@storybook/vue-webpack5": "7.0.0-alpha.6",
"@vue/babel-preset-jsx": "^1.2.4",
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index 19789c05374f..50a52d9d0845 100644
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@@ -56,7 +56,7 @@
"@storybook/source-loader": "link:../../lib/source-loader",
"@storybook/store": "link:../../lib/store",
"@storybook/telemetry": "link:../../lib/telemetry",
- "@storybook/testing-library": "^0.0.12 ",
+ "@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "link:../../lib/theming",
"@storybook/ui": "link:../../lib/ui",
"@storybook/web-components": "link:../../renderers/web-components",
diff --git a/lib/cli/src/automigrate/fixes/index.ts b/lib/cli/src/automigrate/fixes/index.ts
index 566162243ed3..7cc92a1bba40 100644
--- a/lib/cli/src/automigrate/fixes/index.ts
+++ b/lib/cli/src/automigrate/fixes/index.ts
@@ -5,6 +5,7 @@ import { vue3 } from './vue3';
import { mainjsFramework } from './mainjsFramework';
import { eslintPlugin } from './eslint-plugin';
import { builderVite } from './builder-vite';
+import { npm7 } from './npm7';
import { Fix } from '../types';
export * from '../types';
@@ -16,4 +17,5 @@ export const fixes: Fix[] = [
mainjsFramework,
eslintPlugin,
builderVite,
+ npm7,
];
diff --git a/lib/cli/src/js-package-manager/NPMProxy.ts b/lib/cli/src/js-package-manager/NPMProxy.ts
index a75d7d2b69fd..8f74cf57e446 100644
--- a/lib/cli/src/js-package-manager/NPMProxy.ts
+++ b/lib/cli/src/js-package-manager/NPMProxy.ts
@@ -23,10 +23,13 @@ export class NPMProxy extends JsPackageManager {
}
hasLegacyPeerDeps() {
- return (
- this.executeCommand('npm', ['config', 'get', 'legacy-peer-deps', '--location=project']) ===
- 'true'
- );
+ const result = this.executeCommand('npm', [
+ 'config',
+ 'get',
+ 'legacy-peer-deps',
+ '--location=project',
+ ]);
+ return result.trim() === 'true';
}
setLegacyPeerDeps() {
diff --git a/lib/core-common/templates/base-preview-head.html b/lib/core-common/templates/base-preview-head.html
index 39baba09b3fb..45c0c3032dac 100644
--- a/lib/core-common/templates/base-preview-head.html
+++ b/lib/core-common/templates/base-preview-head.html
@@ -237,8 +237,8 @@
.sb-argstableBlock td:nth-of-type(3) {
width: 15%;
}
- .sb-argstableBlock th:laste-of-type,
- .sb-argstableBlock td:laste-of-type {
+ .sb-argstableBlock th:last-of-type,
+ .sb-argstableBlock td:last-of-type {
width: 25%;
padding-right: 20px;
}
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
index 3afac00ae3d0..28ac6d190140 100644
--- a/lib/core-server/package.json
+++ b/lib/core-server/package.json
@@ -54,7 +54,6 @@
"commander": "^6.2.1",
"compression": "^1.7.4",
"core-js": "^3.8.2",
- "cpy": "^8.1.2",
"detect-port": "^1.3.0",
"express": "^4.17.1",
"fs-extra": "^9.0.1",
diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts
index 1ccd9abe05e6..d5e1221f8c78 100644
--- a/lib/core-server/src/build-static.ts
+++ b/lib/core-server/src/build-static.ts
@@ -1,5 +1,4 @@
import chalk from 'chalk';
-import cpy from 'cpy';
import fs from 'fs-extra';
import path, { join } from 'path';
import dedent from 'ts-dedent';
@@ -60,7 +59,7 @@ export async function buildStaticStandalone(
}
await fs.emptyDir(options.outputDir);
- await cpy(defaultFavIcon, options.outputDir);
+ await fs.copyFile(defaultFavIcon, path.join(options.outputDir, path.basename(defaultFavIcon)));
const { getPrebuiltDir } = await import('@storybook/manager-webpack5/prebuilt-manager');
@@ -191,7 +190,7 @@ export async function buildStaticStandalone(
const startTime = process.hrtime();
// When using the prebuilt manager, we straight up copy it into the outputDir instead of building it
const manager = prebuiltDir
- ? cpy('**', options.outputDir, { cwd: prebuiltDir, parents: true }).then(() => {})
+ ? fs.copy(prebuiltDir, options.outputDir, { dereference: true }).then(() => {})
: managerBuilder.build({ startTime, options: fullOptions });
if (options.ignorePreview) {
diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts
index 73d771493107..0fcd69b86077 100644
--- a/lib/core-server/src/core-presets.test.ts
+++ b/lib/core-server/src/core-presets.test.ts
@@ -77,7 +77,11 @@ jest.mock('@storybook/store', () => {
};
});
-jest.mock('cpy', () => () => Promise.resolve());
+jest.mock('fs-extra', () => ({
+ ...jest.requireActual('fs-extra'),
+ copyFile: jest.fn().mockResolvedValue(Promise.resolve()),
+ copy: jest.fn().mockResolvedValue(Promise.resolve()),
+}));
jest.mock('http', () => ({
...jest.requireActual('http'),
createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }),
diff --git a/lib/store/src/storySort.test.ts b/lib/store/src/storySort.test.ts
index 72ea64091f3b..1efe4a2b4117 100644
--- a/lib/store/src/storySort.test.ts
+++ b/lib/store/src/storySort.test.ts
@@ -130,4 +130,19 @@ describe('preview.storySort', () => {
expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
});
+
+ it('sorts according to the nested order array with parent wildcard', () => {
+ const sortFn = storySort({
+ order: ['*', ['*', 'b', 'a']],
+ includeNames: true,
+ });
+
+ expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0);
+ expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0);
+ expect(sortFn(fixture.a_c, fixture.a_a)).toBeLessThan(0);
+ expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
+ expect(sortFn(fixture.a_a, fixture.a_c)).toBeGreaterThan(0);
+ expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
+ expect(sortFn(fixture.a_a, fixture.a_a)).toBe(0);
+ });
});
diff --git a/lib/store/src/storySort.ts b/lib/store/src/storySort.ts
index b12b8daf4730..11ac5c0248f9 100644
--- a/lib/store/src/storySort.ts
+++ b/lib/store/src/storySort.ts
@@ -79,7 +79,8 @@ export const storySort =
}
// If a nested array is provided for a name, use it for ordering.
- const index = order.indexOf(nameA);
+ let index = order.indexOf(nameA);
+ if (index === -1) index = order.indexOf('*');
order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : [];
// We'll need to look at the next part of the name.
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index 4aac7b633cea..01ef68f225bd 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -189,7 +189,6 @@ const Node = React.memo(
data-ref-id={refId}
data-item-id={item.id}
data-nodetype="root"
- aria-expanded={isExpanded}
>
(
event.preventDefault();
setExpanded({ ids: [item.id], value: !isExpanded });
}}
+ aria-expanded={isExpanded}
>
{item.renderLabel?.(item) || item.name}
diff --git a/package.json b/package.json
index a4b8ad094f37..888557d391ea 100644
--- a/package.json
+++ b/package.json
@@ -208,7 +208,7 @@
"@storybook/svelte": "workspace:*",
"@storybook/svelte-webpack5": "workspace:*",
"@storybook/telemetry": "workspace:*",
- "@storybook/testing-library": "^0.0.12",
+ "@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "workspace:*",
"@storybook/ui": "workspace:*",
"@storybook/vue": "workspace:*",
diff --git a/yarn.lock b/yarn.lock
index 636264e47c20..b72110d58a8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7167,7 +7167,7 @@ __metadata:
"@storybook/csf": 0.0.2--canary.4566f4d.1
"@storybook/instrumenter": 7.0.0-alpha.6
"@storybook/jest": ^0.0.5
- "@storybook/testing-library": ^0.0.12
+ "@storybook/testing-library": 0.0.14-next.0
"@storybook/theming": 7.0.0-alpha.6
core-js: ^3.8.2
formik: ^2.2.9
@@ -7543,6 +7543,28 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/addons@npm:6.5.9":
+ version: 6.5.9
+ resolution: "@storybook/addons@npm:6.5.9"
+ dependencies:
+ "@storybook/api": 6.5.9
+ "@storybook/channels": 6.5.9
+ "@storybook/client-logger": 6.5.9
+ "@storybook/core-events": 6.5.9
+ "@storybook/csf": 0.0.2--canary.4566f4d.1
+ "@storybook/router": 6.5.9
+ "@storybook/theming": 6.5.9
+ "@types/webpack-env": ^1.16.0
+ core-js: ^3.8.2
+ global: ^4.4.0
+ regenerator-runtime: ^0.13.7
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: 3ee3e61abc7bff6b481374597cc6717936685222b187d173462483d77d9b284fe5650e9764f7232ae80678e4718440d712f182c01c16887d53c77a1abe262616
+ languageName: node
+ linkType: hard
+
"@storybook/angular@7.0.0-alpha.6, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
version: 0.0.0-use.local
resolution: "@storybook/angular@workspace:frameworks/angular"
@@ -7717,6 +7739,34 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/api@npm:6.5.9":
+ version: 6.5.9
+ resolution: "@storybook/api@npm:6.5.9"
+ dependencies:
+ "@storybook/channels": 6.5.9
+ "@storybook/client-logger": 6.5.9
+ "@storybook/core-events": 6.5.9
+ "@storybook/csf": 0.0.2--canary.4566f4d.1
+ "@storybook/router": 6.5.9
+ "@storybook/semver": ^7.3.2
+ "@storybook/theming": 6.5.9
+ core-js: ^3.8.2
+ fast-deep-equal: ^3.1.3
+ global: ^4.4.0
+ lodash: ^4.17.21
+ memoizerific: ^1.11.3
+ regenerator-runtime: ^0.13.7
+ store2: ^2.12.0
+ telejson: ^6.0.8
+ ts-dedent: ^2.0.0
+ util-deprecate: ^1.0.2
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: 6f3aaed66c27715740397ff80a01fda1e363e75165c90cb5f50e4effc00e91b2d1f58b506d2279e83a905f794988e9aaaa75d5b7380c192c954f8c6520368d67
+ languageName: node
+ linkType: hard
+
"@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"
@@ -7841,6 +7891,17 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/channels@npm:6.5.9":
+ version: 6.5.9
+ resolution: "@storybook/channels@npm:6.5.9"
+ dependencies:
+ core-js: ^3.8.2
+ ts-dedent: ^2.0.0
+ util-deprecate: ^1.0.2
+ checksum: 3011663b754fe9028076b2a27573c6ca2040eb227918c315b9e6ea4d23298b1ac305e26aa4e89c02c9120ddd475d0f49d42bcb287b84cb37953c5f99606c3ed1
+ languageName: node
+ linkType: hard
+
"@storybook/cli@7.0.0-alpha.6, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
version: 0.0.0-use.local
resolution: "@storybook/cli@workspace:lib/cli"
@@ -7918,7 +7979,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@storybook/client-logger@7.0.0-alpha.6, @storybook/client-logger@^6 || ^7 || ^7.0.0-0, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
+"@storybook/client-logger@7.0.0-alpha.6, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
version: 0.0.0-use.local
resolution: "@storybook/client-logger@workspace:lib/client-logger"
dependencies:
@@ -7947,6 +8008,16 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/client-logger@npm:6.5.9, @storybook/client-logger@npm:^6.4.0":
+ version: 6.5.9
+ resolution: "@storybook/client-logger@npm:6.5.9"
+ dependencies:
+ core-js: ^3.8.2
+ global: ^4.4.0
+ checksum: 764aacff6859c2cfe93f90498504e6628d8c7606490f1eec835639e21f177b10f0e93cad605dadf0ca6e08f6d5e62153597de6c80570ae65d76b4c71b6884e09
+ languageName: node
+ linkType: hard
+
"@storybook/codemod@7.0.0-alpha.6, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
version: 0.0.0-use.local
resolution: "@storybook/codemod@workspace:lib/codemod"
@@ -8129,6 +8200,15 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/core-events@npm:6.5.9":
+ version: 6.5.9
+ resolution: "@storybook/core-events@npm:6.5.9"
+ dependencies:
+ core-js: ^3.8.2
+ checksum: 5d9eb651ef528330bebe9048eec61d4e3af29fabcf3cc8d7572a94f199e2220dfa738c19d65a761de5ec377d7933316af5eb2bfd0dc8c4027cd7dd57951552bd
+ languageName: node
+ linkType: hard
+
"@storybook/core-server@7.0.0-alpha.6, @storybook/core-server@workspace:lib/core-server":
version: 0.0.0-use.local
resolution: "@storybook/core-server@workspace:lib/core-server"
@@ -8160,7 +8240,6 @@ __metadata:
commander: ^6.2.1
compression: ^1.7.4
core-js: ^3.8.2
- cpy: ^8.1.2
detect-port: ^1.3.0
express: ^4.17.1
fs-extra: ^9.0.1
@@ -8466,7 +8545,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@storybook/instrumenter@7.0.0-alpha.6, @storybook/instrumenter@^6 || ^7 || ^7.0.0-0, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
+"@storybook/instrumenter@7.0.0-alpha.6, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
version: 0.0.0-use.local
resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
dependencies:
@@ -8490,6 +8569,19 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/instrumenter@npm:^6.4.0":
+ version: 6.5.9
+ resolution: "@storybook/instrumenter@npm:6.5.9"
+ dependencies:
+ "@storybook/addons": 6.5.9
+ "@storybook/client-logger": 6.5.9
+ "@storybook/core-events": 6.5.9
+ core-js: ^3.8.2
+ global: ^4.4.0
+ checksum: df6e535759540c09cb0addd65250121a10767ea7f43d6452417208eb09f565250f52c4417c707c964b61da063ee06d15c7aa3baaa86a0a585768fc94cdb8f31d
+ languageName: node
+ linkType: hard
+
"@storybook/instrumenter@npm:^6.4.0 || >=6.5.0-0":
version: 6.5.7
resolution: "@storybook/instrumenter@npm:6.5.7"
@@ -9107,7 +9199,7 @@ __metadata:
"@storybook/svelte": "workspace:*"
"@storybook/svelte-webpack5": "workspace:*"
"@storybook/telemetry": "workspace:*"
- "@storybook/testing-library": ^0.0.12
+ "@storybook/testing-library": 0.0.14-next.0
"@storybook/theming": "workspace:*"
"@storybook/ui": "workspace:*"
"@storybook/vue": "workspace:*"
@@ -9331,6 +9423,22 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/router@npm:6.5.9":
+ version: 6.5.9
+ resolution: "@storybook/router@npm:6.5.9"
+ dependencies:
+ "@storybook/client-logger": 6.5.9
+ core-js: ^3.8.2
+ memoizerific: ^1.11.3
+ qs: ^6.10.0
+ regenerator-runtime: ^0.13.7
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: 765977adbcaa1d06958489bd1316056c35f712f04c603a3848ed04dea3155f65369a085759913ccf19ffda3de41d429f455fbc330c3bcf7b3fdc65e9a3ddd320
+ languageName: node
+ linkType: hard
+
"@storybook/semver@npm:^7.3.2":
version: 7.3.2
resolution: "@storybook/semver@npm:7.3.2"
@@ -9477,29 +9585,16 @@ __metadata:
languageName: unknown
linkType: soft
-"@storybook/testing-library@npm:^0.0.12":
- version: 0.0.12
- resolution: "@storybook/testing-library@npm:0.0.12"
+"@storybook/testing-library@npm:0.0.14-next.0":
+ version: 0.0.14-next.0
+ resolution: "@storybook/testing-library@npm:0.0.14-next.0"
dependencies:
- "@storybook/client-logger": ^6 || ^7 || ^7.0.0-0
- "@storybook/instrumenter": ^6 || ^7 || ^7.0.0-0
+ "@storybook/client-logger": ^6.4.0
+ "@storybook/instrumenter": ^6.4.0
"@testing-library/dom": ^8.3.0
"@testing-library/user-event": ^13.2.1
ts-dedent: ^2.2.0
- checksum: ea1ad2ded53bc109defd3d2b7d41348f8fa823d1e092b62bb6fcb87568358c3743eed72ce4d1e61b73f80097d408ff02a520c17f347589df244380043828892c
- languageName: node
- linkType: hard
-
-"@storybook/testing-library@npm:^0.0.7":
- version: 0.0.7
- resolution: "@storybook/testing-library@npm:0.0.7"
- dependencies:
- "@storybook/client-logger": 6.4.0-rc.5
- "@storybook/instrumenter": 6.4.0-rc.5
- "@testing-library/dom": ^8.3.0
- "@testing-library/user-event": ^13.2.1
- ts-dedent: ^2.2.0
- checksum: 6be4b2d418195417cd0a04e5a4f2b71a93364cb88780084714a0553c39e6b38943458511b25b101c830b332783afec98a40eefcdc663dca3f34e8f48609a4670
+ checksum: fd10ebddd305743f4388ad939b90fed155b6c3a755e96a73f72d38d9afe2546a22be0c9a5d83b8b6d91742dd7be5d2e7dfcbbd630b2fa97e4ef7dde00f0824b0
languageName: node
linkType: hard
@@ -9576,6 +9671,21 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/theming@npm:6.5.9":
+ version: 6.5.9
+ resolution: "@storybook/theming@npm:6.5.9"
+ dependencies:
+ "@storybook/client-logger": 6.5.9
+ core-js: ^3.8.2
+ memoizerific: ^1.11.3
+ regenerator-runtime: ^0.13.7
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: 28b2626ab2ef4396d3e8d0fad651bf13b323318028e7b01a99c9b999f368655d7aa78dd8154396753828746d934cfbaee1575c890307893d6a3cca9655c9a60e
+ languageName: node
+ linkType: hard
+
"@storybook/ui@7.0.0-alpha.6, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui":
version: 0.0.0-use.local
resolution: "@storybook/ui@workspace:lib/ui"
@@ -13019,7 +13129,7 @@ __metadata:
"@storybook/babel-plugin-require-context-hook": 1.0.1
"@storybook/jest": ^0.0.5
"@storybook/source-loader": 7.0.0-alpha.6
- "@storybook/testing-library": ^0.0.12
+ "@storybook/testing-library": 0.0.14-next.0
"@types/core-js": ^2.5.4
"@types/jest": ^26.0.16
"@types/node": ^14.14.20 || ^16.0.0
@@ -13585,13 +13695,6 @@ __metadata:
languageName: node
linkType: hard
-"arrify@npm:^2.0.1":
- version: 2.0.1
- resolution: "arrify@npm:2.0.1"
- checksum: 3fb30b5e7c37abea1907a60b28a554d2f0fc088757ca9bf5b684786e583fdf14360721eb12575c1ce6f995282eab936712d3c4389122682eafab0e0b57f78dbb
- languageName: node
- linkType: hard
-
"asap@npm:^2.0.0, asap@npm:~2.0.3, asap@npm:~2.0.6":
version: 2.0.6
resolution: "asap@npm:2.0.6"
@@ -17607,35 +17710,6 @@ __metadata:
languageName: node
linkType: hard
-"cp-file@npm:^7.0.0":
- version: 7.0.0
- resolution: "cp-file@npm:7.0.0"
- dependencies:
- graceful-fs: ^4.1.2
- make-dir: ^3.0.0
- nested-error-stacks: ^2.0.0
- p-event: ^4.1.0
- checksum: db3ef3e3e466742f392ae71edb9b2cdbb314e855d97630a65de57bc1097bacf6e844f6d9d44882b8678c0de26ba7e656c2c915960435970067823372e807eafa
- languageName: node
- linkType: hard
-
-"cpy@npm:^8.1.2":
- version: 8.1.2
- resolution: "cpy@npm:8.1.2"
- dependencies:
- arrify: ^2.0.1
- cp-file: ^7.0.0
- globby: ^9.2.0
- has-glob: ^1.0.0
- junk: ^3.1.0
- nested-error-stacks: ^2.1.0
- p-all: ^2.1.0
- p-filter: ^2.1.0
- p-map: ^3.0.0
- checksum: 84611fdd526a0582ae501a0fa1e1d55e16348c69110eb17be5fc0c087b7b2aa6caec014286b669e4f123750d01e0c4db77d32fdcdb9840c3df4d161a137a345a
- languageName: node
- linkType: hard
-
"cra-kitchen-sink@workspace:examples/cra-kitchen-sink":
version: 0.0.0-use.local
resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink"
@@ -24619,15 +24693,6 @@ __metadata:
languageName: node
linkType: hard
-"has-glob@npm:^1.0.0":
- version: 1.0.0
- resolution: "has-glob@npm:1.0.0"
- dependencies:
- is-glob: ^3.0.0
- checksum: 2546d20b7a667304d8b2e490c2d5a4e20e799a43eb6d97c0d47c0c737bbde082a73731001c791d445b904b3f408d584477df7d2d301183e13c4b3f0a3c81787b
- languageName: node
- linkType: hard
-
"has-property-descriptors@npm:^1.0.0":
version: 1.0.0
resolution: "has-property-descriptors@npm:1.0.0"
@@ -26572,7 +26637,7 @@ __metadata:
languageName: node
linkType: hard
-"is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
+"is-glob@npm:^3.1.0":
version: 3.1.0
resolution: "is-glob@npm:3.1.0"
dependencies:
@@ -29235,13 +29300,6 @@ __metadata:
languageName: node
linkType: hard
-"junk@npm:^3.1.0":
- version: 3.1.0
- resolution: "junk@npm:3.1.0"
- checksum: 820174b9fa9a3af09aeeeeb1022df2481a2b10752ce5f65ac63924a79cb9bba83ea7c288e8d5b448951109742da5ea69a230846f4bf3c17c5c6a1d0603b63db4
- languageName: node
- linkType: hard
-
"jwa@npm:^1.4.1":
version: 1.4.1
resolution: "jwa@npm:1.4.1"
@@ -32725,13 +32783,6 @@ __metadata:
languageName: node
linkType: hard
-"nested-error-stacks@npm:^2.0.0, nested-error-stacks@npm:^2.1.0":
- version: 2.1.1
- resolution: "nested-error-stacks@npm:2.1.1"
- checksum: feec00417e4778661cfbbe657e6add6ca9918dcc026cd697ac330b4a56a79e4882b36dde8abc138167566b1ce4c5baa17d2d4df727a96f8b96aebace1c3ffca7
- languageName: node
- linkType: hard
-
"next-themes@npm:^0.0.8":
version: 0.0.8
resolution: "next-themes@npm:0.0.8"
@@ -33777,7 +33828,7 @@ __metadata:
"@storybook/react-webpack5": 7.0.0-alpha.6
"@storybook/router": 7.0.0-alpha.6
"@storybook/source-loader": 7.0.0-alpha.6
- "@storybook/testing-library": ^0.0.12
+ "@storybook/testing-library": 0.0.14-next.0
"@storybook/theming": 7.0.0-alpha.6
"@testing-library/dom": ^7.31.2
"@testing-library/user-event": ^13.1.9
@@ -34032,15 +34083,6 @@ __metadata:
languageName: node
linkType: hard
-"p-all@npm:^2.1.0":
- version: 2.1.0
- resolution: "p-all@npm:2.1.0"
- dependencies:
- p-map: ^2.0.0
- checksum: 874eafa2e3f38b258f8beed34549befbc8a52a63818e0981b8beff03f592e1e1f47b8aab2483f844f2745815ffa010def58bf1edbc95614466c55411f02f3049
- languageName: node
- linkType: hard
-
"p-cancelable@npm:^0.4.0":
version: 0.4.1
resolution: "p-cancelable@npm:0.4.1"
@@ -34078,24 +34120,6 @@ __metadata:
languageName: node
linkType: hard
-"p-event@npm:^4.1.0":
- version: 4.2.0
- resolution: "p-event@npm:4.2.0"
- dependencies:
- p-timeout: ^3.1.0
- checksum: f1b6a2fb13d47f2a8afc00150da5ece0d28940ce3d8fa562873e091d3337d298e78fee9cb18b768598ff1d11df608b2ae23868309ff6405b864a2451ccd6d25a
- languageName: node
- linkType: hard
-
-"p-filter@npm:^2.1.0":
- version: 2.1.0
- resolution: "p-filter@npm:2.1.0"
- dependencies:
- p-map: ^2.0.0
- checksum: 5ac34b74b3b691c04212d5dd2319ed484f591c557a850a3ffc93a08cb38c4f5540be059c6b10a185773c479ca583a91ea00c7d6c9958c815e6b74d052f356645
- languageName: node
- linkType: hard
-
"p-finally@npm:^1.0.0":
version: 1.0.0
resolution: "p-finally@npm:1.0.0"
@@ -34189,22 +34213,13 @@ __metadata:
languageName: node
linkType: hard
-"p-map@npm:^2.0.0, p-map@npm:^2.1.0":
+"p-map@npm:^2.1.0":
version: 2.1.0
resolution: "p-map@npm:2.1.0"
checksum: 735dae87badd4737a2dd582b6d8f93e49a1b79eabbc9815a4d63a528d5e3523e978e127a21d784cccb637010e32103a40d2aaa3ab23ae60250b1a820ca752043
languageName: node
linkType: hard
-"p-map@npm:^3.0.0":
- version: 3.0.0
- resolution: "p-map@npm:3.0.0"
- dependencies:
- aggregate-error: ^3.0.0
- checksum: 297930737e52412ad9f5787c52774ad6496fad9a8be5f047e75fd0a3dc61930d8f7a9b2bbe1c4d1404e54324228a4f69721da2538208dadaa4ef4c81773c9f20
- languageName: node
- linkType: hard
-
"p-map@npm:^4.0.0":
version: 4.0.0
resolution: "p-map@npm:4.0.0"
@@ -34256,15 +34271,6 @@ __metadata:
languageName: node
linkType: hard
-"p-timeout@npm:^3.1.0":
- version: 3.2.0
- resolution: "p-timeout@npm:3.2.0"
- dependencies:
- p-finally: ^1.0.0
- checksum: 524b393711a6ba8e1d48137c5924749f29c93d70b671e6db761afa784726572ca06149c715632da8f70c090073afb2af1c05730303f915604fd38ee207b70a61
- languageName: node
- linkType: hard
-
"p-try@npm:^1.0.0":
version: 1.0.0
resolution: "p-try@npm:1.0.0"
@@ -41946,7 +41952,7 @@ __metadata:
"@storybook/source-loader": 7.0.0-alpha.6
"@storybook/svelte": 7.0.0-alpha.6
"@storybook/svelte-webpack5": 7.0.0-alpha.6
- "@storybook/testing-library": ^0.0.7
+ "@storybook/testing-library": 0.0.14-next.0
global: ^4.4.0
storybook: 7.0.0-alpha.6
svelte-jester: ^2.3.2
@@ -44792,7 +44798,7 @@ __metadata:
"@storybook/addon-links": 7.0.0-alpha.6
"@storybook/addon-storyshots": 7.0.0-alpha.6
"@storybook/jest": ^0.0.5
- "@storybook/testing-library": ^0.0.12
+ "@storybook/testing-library": 0.0.14-next.0
"@storybook/vue3": 7.0.0-alpha.6
"@storybook/vue3-webpack5": 7.0.0-alpha.6
"@vue/cli-plugin-babel": ^5.0.4
@@ -44894,7 +44900,7 @@ __metadata:
"@storybook/addons": 7.0.0-alpha.6
"@storybook/jest": ^0.0.5
"@storybook/source-loader": 7.0.0-alpha.6
- "@storybook/testing-library": ^0.0.12
+ "@storybook/testing-library": 0.0.14-next.0
"@storybook/vue": 7.0.0-alpha.6
"@storybook/vue-webpack5": 7.0.0-alpha.6
"@vue/babel-preset-jsx": ^1.2.4