-
- 
+ 
+ 
View README for:
-
-
+
{paragraphs[0]}
+ {more && See the full stack trace in the browser console.
} +
diff --git a/addons/interactions/src/components/MethodCall.stories.tsx b/addons/interactions/src/components/MethodCall.stories.tsx
index feda43c8ff5c..b65001b4e1cb 100644
--- a/addons/interactions/src/components/MethodCall.stories.tsx
+++ b/addons/interactions/src/components/MethodCall.stories.tsx
@@ -27,7 +27,6 @@ export default {
},
};
-class FooBar {}
export const Args = () => (
;
+}) => {
const colors = useThemeColors();
if (nested) {
return […];
}
- const nodes = value.slice(0, 3).map((v) => }) => {
+export const ClassNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
- return {value.constructor.name};
+ return {name};
};
-export const FunctionNode = ({ value }: { value: Function }) => {
+export const FunctionNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
- return {value.name || 'anonymous'};
+ return name ? (
+ {name}
+ ) : (
+ anonymous
+ );
};
-export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
- const { prefix, localName, id, classNames = [], innerText } = value;
+export const ElementNode = ({
+ prefix,
+ localName,
+ id,
+ classNames = [],
+ innerText,
+}: ElementRef['__element__']) => {
const name = prefix ? `${prefix}:${localName}` : localName;
const colors = useThemeColors();
return (
@@ -309,8 +330,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
);
};
-export const DateNode = ({ value }: { value: Date }) => {
- const [date, time, ms] = value.toISOString().split(/[T.Z]/);
+export const DateNode = ({ value }: { value: string }) => {
+ const [date, time, ms] = value.split(/[T.Z]/);
const colors = useThemeColors();
return (
@@ -323,42 +344,36 @@ export const DateNode = ({ value }: { value: Date }) => {
);
};
-export const ErrorNode = ({ value }: { value: Error }) => {
+export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
const colors = useThemeColors();
return (
- {value.name}
- {value.message && ': '}
- {value.message && (
- 50 ? value.message : ''}
- >
- {ellipsize(value.message, 50)}
+ {name}
+ {message && ': '}
+ {message && (
+ 50 ? message : ''}>
+ {ellipsize(message, 50)}
)}
);
};
-export const RegExpNode = ({ value }: { value: RegExp }) => {
+export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
const colors = useThemeColors();
return (
- /{value.source}/{value.flags}
+ /{source}/{flags}
);
};
-export const SymbolNode = ({ value }: { value: symbol }) => {
+export const SymbolNode = ({ description }: { description: string }) => {
const colors = useThemeColors();
return (
Symbol(
- {value.description && (
- {JSON.stringify(value.description)}
- )}
- )
+ {description && "{description}"})
);
};
diff --git a/addons/interactions/src/components/Subnav/Subnav.stories.tsx b/addons/interactions/src/components/Subnav/Subnav.stories.tsx
index 9605bc53252c..40e365d03fb9 100644
--- a/addons/interactions/src/components/Subnav/Subnav.stories.tsx
+++ b/addons/interactions/src/components/Subnav/Subnav.stories.tsx
@@ -12,6 +12,7 @@ export default {
goto: action('goto'),
next: action('next'),
end: action('end'),
+ rerun: action('rerun'),
},
controlStates: {
debugger: true,
diff --git a/addons/interactions/src/mocks/index.ts b/addons/interactions/src/mocks/index.ts
index 7952b6ecf896..e55fe4d88b8f 100644
--- a/addons/interactions/src/mocks/index.ts
+++ b/addons/interactions/src/mocks/index.ts
@@ -1,31 +1,122 @@
import { CallStates, Call } from '@storybook/instrumenter';
-export const getCall = (status: CallStates): Call => {
- const defaultData = {
- id: 'addons-interactions-accountform--standard-email-filled [3] change',
- cursor: 0,
- path: ['fireEvent'],
- method: 'change',
- storyId: 'addons-interactions-accountform--standard-email-filled',
- args: [
- {
- __callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
- retain: false,
- },
- {
- target: {
- value: 'michael@chromatic.com',
- },
- },
- ],
- interceptable: true,
- retain: false,
- status,
- };
+export const getCalls = (finalStatus: CallStates) => {
+ const calls: Call[] = [
+ {
+ id: 'story--id [3] within',
+ storyId: 'story--id',
+ cursor: 3,
+ path: [],
+ method: 'within',
+ args: [{ __element__: { localName: 'div', id: 'root' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [4] findByText',
+ storyId: 'story--id',
+ cursor: 4,
+ path: [{ __callId__: 'story--id [3] within' }],
+ method: 'findByText',
+ args: ['Click'],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [5] click',
+ storyId: 'story--id',
+ cursor: 5,
+ path: ['userEvent'],
+ method: 'click',
+ args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 6,
+ path: [],
+ method: 'waitFor',
+ args: [{ __function__: { name: '' } }],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor [0] expect',
+ parentId: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 1,
+ path: [],
+ method: 'expect',
+ args: [{ __function__: { name: 'handleSubmit' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor [1] stringMatching',
+ parentId: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 2,
+ path: ['expect'],
+ method: 'stringMatching',
+ args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+ parentId: 'story--id [6] waitFor',
+ storyId: 'story--id',
+ cursor: 3,
+ path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
+ method: 'toHaveBeenCalledWith',
+ args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
+ interceptable: true,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [7] expect',
+ storyId: 'story--id',
+ cursor: 7,
+ path: [],
+ method: 'expect',
+ args: [{ __function__: { name: 'handleReset' } }],
+ interceptable: false,
+ retain: false,
+ status: CallStates.DONE,
+ },
+ {
+ id: 'story--id [8] toHaveBeenCalled',
+ storyId: 'story--id',
+ cursor: 8,
+ path: [{ __callId__: 'story--id [7] expect' }, 'not'],
+ method: 'toHaveBeenCalled',
+ args: [],
+ interceptable: true,
+ retain: false,
+ status: finalStatus,
+ },
+ ];
- const overrides = CallStates.ERROR
- ? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
- : {};
+ if (finalStatus === CallStates.ERROR) {
+ calls[calls.length - 1].exception = {
+ name: 'Error',
+ stack: '',
+ message: 'Oops!',
+ callId: calls[calls.length - 1].id,
+ };
+ }
- return { ...defaultData, ...overrides };
+ return calls;
};
+
+export const getInteractions = (finalStatus: CallStates) =>
+ getCalls(finalStatus).filter((call) => call.interceptable);
diff --git a/app/angular/src/client/preview/angular-beta/StorybookModule.ts b/app/angular/src/client/preview/angular-beta/StorybookModule.ts
index 68c443375a83..275b490c18bc 100644
--- a/app/angular/src/client/preview/angular-beta/StorybookModule.ts
+++ b/app/angular/src/client/preview/angular-beta/StorybookModule.ts
@@ -7,7 +7,7 @@ import deprecate from 'util-deprecate';
import { ICollection, StoryFnAngularReturnType } from '../types';
import { storyPropsProvider } from './StorybookProvider';
import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
-import { isDeclarable } from './utils/NgComponentAnalyzer';
+import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer';
import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
@@ -61,6 +61,7 @@ export const getStorybookModuleMetadata = (
props
);
+ const isStandalone = isStandaloneComponent(component);
// Look recursively (deep) if the component is not already declared by an import module
const requiresComponentDeclaration =
isDeclarable(component) &&
@@ -68,7 +69,8 @@ export const getStorybookModuleMetadata = (
component,
moduleMetadata.declarations,
moduleMetadata.imports
- );
+ ) &&
+ !isStandalone;
return {
declarations: [
@@ -76,7 +78,11 @@ export const getStorybookModuleMetadata = (
ComponentToInject,
...(moduleMetadata.declarations ?? []),
],
- imports: [BrowserModule, ...(moduleMetadata.imports ?? [])],
+ imports: [
+ BrowserModule,
+ ...(isStandalone ? [component] : []),
+ ...(moduleMetadata.imports ?? []),
+ ],
providers: [storyPropsProvider(storyProps$), ...(moduleMetadata.providers ?? [])],
entryComponents: [...(moduleMetadata.entryComponents ?? [])],
schemas: [...(moduleMetadata.schemas ?? [])],
diff --git a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
index 03eba18a7236..faa7cdce09ff 100644
--- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
+++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
@@ -19,6 +19,7 @@ import {
isComponent,
isDeclarable,
getComponentDecoratorMetadata,
+ isStandaloneComponent,
} from './NgComponentAnalyzer';
describe('getComponentInputsOutputs', () => {
@@ -235,6 +236,46 @@ describe('isComponent', () => {
});
});
+describe('isStandaloneComponent', () => {
+ it('should return true with a Component with "standalone: true"', () => {
+ // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+ // Angular deps are updated to v14.x.x.
+ @Component({ standalone: true } as any)
+ class FooComponent {}
+
+ expect(isStandaloneComponent(FooComponent)).toEqual(true);
+ });
+
+ it('should return false with a Component with "standalone: false"', () => {
+ // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+ // Angular deps are updated to v14.x.x.
+ @Component({ standalone: false } as any)
+ class FooComponent {}
+
+ expect(isStandaloneComponent(FooComponent)).toEqual(false);
+ });
+
+ it('should return false with a Component without the "standalone" property', () => {
+ @Component({})
+ class FooComponent {}
+
+ expect(isStandaloneComponent(FooComponent)).toEqual(false);
+ });
+
+ it('should return false with simple class', () => {
+ class FooPipe {}
+
+ expect(isStandaloneComponent(FooPipe)).toEqual(false);
+ });
+
+ it('should return false with Directive', () => {
+ @Directive()
+ class FooDirective {}
+
+ expect(isStandaloneComponent(FooDirective)).toEqual(false);
+ });
+});
+
describe('getComponentDecoratorMetadata', () => {
it('should return Component with a Component', () => {
@Component({ selector: 'foo' })
diff --git a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
index ae88972dfe26..36bd036631e3 100644
--- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
+++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
@@ -108,6 +108,18 @@ export const isComponent = (component: any): component is Type => {
return (decorators || []).some((d) => d instanceof Component);
};
+export const isStandaloneComponent = (component: any): component is Type => {
+ if (!component) {
+ return false;
+ }
+
+ const decorators = reflectionCapabilities.annotations(component);
+
+ // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+ // Angular deps are updated to v14.x.x.
+ return (decorators || []).some((d) => d instanceof Component && (d as any).standalone);
+};
+
/**
* Returns all component decorator properties
* is used to get all `@Input` and `@Output` Decorator
diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx
index 94db184a3b6b..e2f305158a58 100644
--- a/app/react/src/client/preview/render.tsx
+++ b/app/react/src/client/preview/render.tsx
@@ -147,4 +147,6 @@ export async function renderToDOM(
}
await renderElement(element, domElement);
+
+ return () => unmountElement(domElement);
}
diff --git a/app/vue/src/client/preview/config.ts b/app/vue/src/client/preview/config.ts
index 036f51eba182..759c77b9abeb 100644
--- a/app/vue/src/client/preview/config.ts
+++ b/app/vue/src/client/preview/config.ts
@@ -1,4 +1,4 @@
export { render, renderToDOM } from './render';
-export { decorateStory } from './decorateStory';
+export { decorateStory as applyDecorators } from './decorateStory';
export const parameters = { framework: 'vue' };
diff --git a/app/vue3/src/client/preview/config.ts b/app/vue3/src/client/preview/config.ts
index 69f6b3b8683e..589efca6a13f 100644
--- a/app/vue3/src/client/preview/config.ts
+++ b/app/vue3/src/client/preview/config.ts
@@ -1,4 +1,4 @@
export { render, renderToDOM } from './render';
-export { decorateStory } from './decorateStory';
+export { decorateStory as applyDecorators } from './decorateStory';
export const parameters = { framework: 'vue3' };
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index 7b3079ad94a0..071ac289e240 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -50,13 +50,22 @@ Once you've gone through the prompts, your `package.json` should look like:
### Build system
-We'll need to add the necessary dependencies and make some adjustments. Run the following commands:
+We'll need to add the necessary dependencies and make some adjustments. Run the following command to install the required dependencies:
-```shell
-# Installs React and Babel CLI
-yarn add react react-dom @babel/cli
+
-# Adds Storybook:
+
`staticDirs:['../public']` |
-| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` |
+| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` |
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` |
| `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` |
| `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` |
| `features` | Enables Storybook's additional features.
See table below for a list of available features `features: { storyStoreV7: true }` |
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` |
-| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` |
+| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` |
+| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
## Configure story rendering
diff --git a/docs/configure/story-rendering.md b/docs/configure/story-rendering.md
index 360dde244f14..f930fe1e3765 100644
--- a/docs/configure/story-rendering.md
+++ b/docs/configure/story-rendering.md
@@ -2,7 +2,7 @@
title: 'Story rendering'
---
-In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
+In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
## Adding to <head>
diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index 2253874499fb..a6c01a6589bf 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
### Importing CSS files
-If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
+If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
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';
;
+
+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/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index a088dfda54fe..be960adff652 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -18,7 +18,6 @@ export default {
*/
title: 'DocumentScreen',
component: DocumentScreen,
- title: 'DocumentScreen',
} as ComponentMeta;
@@ -30,4 +29,4 @@ Simple.args = {
document: DocumentHeader.Simple.args.document,
subdocuments: DocumentList.Simple.args.documents,
};
-```
\ No newline at end of file
+```
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/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 9ebd55d0e8e5..9bced0a9b45c 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -2,7 +2,7 @@
title: 'Building pages with Storybook'
---
-Storybook helps you build any component, from small “atomic” components to composed pages. But as you move up the component hierarchy toward the level of pages, you end up dealing with more complexity.
+Storybook helps you build any component, from small “atomic” components to composed pages. But as you move up the component hierarchy toward the page level, you deal with more complexity.
There are many ways to build pages in Storybook. Here are common patterns and solutions.
@@ -47,7 +47,7 @@ When you are building screens in this way, it is typical that the inputs of a co
-In such cases it is natural to use [args composition](./args.md#args-composition) to build the stories for the page based on the stories of the sub-components:
+In such cases, it is natural to use [args composition](./args.md#args-composition) to build the stories for the page based on the stories of the sub-components:
@@ -72,13 +72,57 @@ If you need to render a connected component in Storybook, you can mock the netwo
### Mocking providers
-If you are using a provider that supplies data via the context, you can wrap your story in a decorator that provides a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial, we mock a Redux provider with mock data.
+Suppose you are using a provider that supplies data via the context. In that case, you can wrap your story in a decorator that provides a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial, we mock a Redux provider with mock data.
### Mocking API Services
-Connected applications such as Twitter, Instagram, amongst others, are everywhere, consuming data either from REST or GraphQL endpoints. If you're working in an application that relies on either of these data providers, you can add Mock Service Worker (MSW) via [Storybook's MSW addon](https://storybook.js.org/addons/msw-storybook-addon) to mock data alongside your app and stories.
+Connected applications such as Twitter, Instagram, amongst others, are everywhere, consuming data from REST or GraphQL endpoints. Suppose you're working in an application that relies on either of these data providers. In that case, you can add Mock Service Worker (MSW) via [Storybook's MSW addon](https://storybook.js.org/addons/msw-storybook-addon) to mock data alongside your app and stories.
-[Mock Service Worker](https://mswjs.io/) is an API mocking library. It relies on service workers to capture network requests and provides mocked data in response. The MSW addon adds this functionality into Storybook, allowing you to mock API requests in your stories.
+[Mock Service Worker](https://mswjs.io/) is an API mocking library. It relies on service workers to capture network requests and provides mocked data in response. The MSW addon adds this functionality into Storybook, allowing you to mock API requests in your stories. Below is an overview of how to set up and use the addon.
+
+Run the following commands to install MSW, the addon, and generate a mock service worker.
+
+
+
+