GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 06:41:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'future/base' into future/tsup-libs-1

Browse Source 
# Conflicts:
#	docs/snippets/html/button-story-with-args.ts.mdx
This commit is contained in:
Norbert de Langen 2022-06-29 09:51:27 +02:00
commit 8731c24bce
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
109 changed files with 1582 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/a11y/package.json
View File

@ -38,6 +38,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addons": "7.0.0-alpha.6",
"@storybook/api": "7.0.0-alpha.6",
"@storybook/channels": "7.0.0-alpha.6",

3
addons/a11y/src/components/A11yContext.test.tsx
View File

@ -3,6 +3,7 @@ import { AxeResults } from 'axe-core';
import { render, act } from '@testing-library/react';
import * as api from '@storybook/api';
import { STORY_CHANGED } from '@storybook/core-events';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { A11yContextProvider, useA11yContext } from './A11yContext';
import { EVENTS } from '../constants';
@ -97,7 +98,7 @@ describe('A11YPanel', () => {
const { rerender } = render(<A11yContextProvider active />);
rerender(<A11yContextProvider active={false} />);
expect(emit).toHaveBeenLastCalledWith(
EVENTS.HIGHLIGHT,
HIGHLIGHT,
expect.objectContaining({
color: expect.any(String),
elements: [],

5
addons/a11y/src/components/A11yContext.tsx
View File

@ -3,6 +3,7 @@ import { themes, convert } from '@storybook/theming';
import { Result } from 'axe-core';
import { useChannel, useAddonState, useStorybookApi } from '@storybook/api';
import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { ADDON_ID, EVENTS } from '../constants';
export interface Results {
@ -77,7 +78,7 @@ export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active
const handleReset = React.useCallback(() => {
setTab(0);
setResults(defaultResult);
// Highlights is cleared by a11yHighlights.ts
// Highlights is cleared by addon-highlight
}, []);
const emit = useChannel({
@ -86,7 +87,7 @@ export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active
});
React.useEffect(() => {
emit(EVENTS.HIGHLIGHT, { elements: highlighted, color: colorsByType[tab] });
emit(HIGHLIGHT, { elements: highlighted, color: colorsByType[tab] });
}, [highlighted, tab]);
React.useEffect(() => {

4
addons/a11y/src/constants.ts
View File

@ -1,12 +1,10 @@
export const ADDON_ID = 'storybook/a11y';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const PARAM_KEY = `a11y`;
export const HIGHLIGHT_STYLE_ID = 'a11yHighlight';
const RESULT = `${ADDON_ID}/result`;
const REQUEST = `${ADDON_ID}/request`;
const RUNNING = `${ADDON_ID}/running`;
const ERROR = `${ADDON_ID}/error`;
const MANUAL = `${ADDON_ID}/manual`;
const HIGHLIGHT = `${ADDON_ID}/highlight`;
export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL, HIGHLIGHT };
export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL };

11
addons/a11y/src/highlight.ts
View File

@ -1,11 +0,0 @@
export const highlightStyle = (color: string) => `
outline: 2px dashed ${color};
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
`;
export const highlightObject = (color: string) => ({
outline: `2px dashed ${color}`,
outlineOffset: 2,
boxShadow: '0 0 0 6px rgba(255,255,255,0.6),',
});

1
addons/a11y/src/index.ts
View File

@ -3,7 +3,6 @@ import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
export { PARAM_KEY } from './constants';
export * from './highlight';
export * from './params';
if (module && module.hot && module.hot.decline) {

1
addons/a11y/src/preview.tsx
View File

@ -1,2 +1 @@
import './a11yRunner';
import './a11yHighlight';

1
addons/essentials/package.json
View File

@ -36,6 +36,7 @@
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-measure": "7.0.0-alpha.6",
"@storybook/addon-outline": "7.0.0-alpha.6",
"@storybook/addon-toolbars": "7.0.0-alpha.6",

12
addons/essentials/src/index.ts
View File

@ -37,7 +37,17 @@ export function addons(options: PresetOptions) {
const main = requireMain(options.configDir);
return (
['docs', 'controls', 'actions', 'backgrounds', 'viewport', 'toolbars', 'measure', 'outline']
[
'docs',
'controls',
'actions',
'backgrounds',
'viewport',
'toolbars',
'measure',
'outline',
'highlight',
]
.filter((key) => (options as any)[key] !== false)
.map((key) => `@storybook/addon-${key}`)
.filter((addon) => !checkInstalled(addon, main))

64
addons/highlight/README.md Normal file
View File

@ -0,0 +1,64 @@
# Storybook Addon Highlight
Storybook addon allows for highlighting specific DOM nodes within your story.
Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
![](https://user-images.githubusercontent.com/42671/160146801-179eaa79-fff8-4bff-b17c-9262fdc94918.png)
## Usage
This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
```sh
npm i -D @storybook/addon-highlight
```
Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js`:
```js
module.exports = {
addons: ['@storybook/addon-highlight'],
};
```
### Apply or clear highlights
Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
```js
import React, { useEffect } from 'react';
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } form './MyComponent';
export default { component: MyComponent };
export const MyStory = () => {
const emit = useChannel({});
useEffect(() => {
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
});
}, []);
return <MyComponent />;
};
```
Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
```js
emit(RESET_HIGHLIGHT);
```
### Customize style
```js
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
color: 'red',
style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
});
```

59
addons/highlight/package.json Normal file
View File

@ -0,0 +1,59 @@
{
"name": "@storybook/addon-highlight",
"version": "7.0.0-alpha.6",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
"essentials",
"style",
"appearance"
],
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/highlight",
"bugs": {
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybookjs/storybook.git",
"directory": "addons/highlight"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
"author": "winkerVSbecks",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts",
"files": [
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.6",
"@storybook/core-events": "7.0.0-alpha.6",
"core-js": "^3.8.2",
"global": "^4.4.0"
},
"devDependencies": {
"@types/webpack-env": "^1.16.0"
},
"publishConfig": {
"access": "public"
},
"gitHead": "6cf4571e5a1200613de94aa066fe93f75aec6ad1",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Highlight",
"unsupportedFrameworks": [
"react-native"
],
"icon": "https://user-images.githubusercontent.com/42671/162045505-9d06fe2e-8fcb-4c41-9486-e0553bce10cc.png"
}
}

1
addons/highlight/preview.js Normal file
View File

@ -0,0 +1 @@
export * from './dist/esm/highlight';

5
addons/highlight/src/constants.ts Normal file
View File

@ -0,0 +1,5 @@
export const ADDON_ID = 'storybook/highlight';
export const HIGHLIGHT_STYLE_ID = 'storybookHighlight';
export const HIGHLIGHT = `${ADDON_ID}/add`;
export const RESET_HIGHLIGHT = `${ADDON_ID}/reset`;

25
addons/a11y/src/a11yHighlight.ts → addons/highlight/src/highlight.ts
View File

@ -1,12 +1,25 @@
/* eslint-env browser */
import global from 'global';
import { addons } from '@storybook/addons';
import { STORY_CHANGED } from '@storybook/core-events';
import { EVENTS, HIGHLIGHT_STYLE_ID } from './constants';
import { highlightStyle } from './highlight';
import { HIGHLIGHT, RESET_HIGHLIGHT, HIGHLIGHT_STYLE_ID } from './constants';
const { document } = global;
type OutlineStyle = 'dotted' | 'dashed' | 'solid' | 'double';
export const highlightStyle = (color = '#FF4785', style: OutlineStyle = 'dashed') => `
outline: 2px ${style} ${color};
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
`;
export const highlightObject = (color: string) => ({
outline: `2px dashed ${color}`,
outlineOffset: 2,
boxShadow: '0 0 0 6px rgba(255,255,255,0.6)',
});
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
@ -15,6 +28,7 @@ interface HighlightInfo {
/** html selector of the element */
elements: string[];
color: string;
style: OutlineStyle;
}
const channel = addons.getChannel();
@ -32,7 +46,7 @@ const highlight = (infos: HighlightInfo) => {
.map(
(target) =>
`${target}{
${highlightStyle(infos.color)}
${highlightStyle(infos.color, infos.style)}
}`
)
.join(' ');
@ -48,4 +62,5 @@ const resetHighlight = () => {
};
channel.on(STORY_CHANGED, resetHighlight);
channel.on(EVENTS.HIGHLIGHT, highlight);
channel.on(RESET_HIGHLIGHT, resetHighlight);
channel.on(HIGHLIGHT, highlight);

8
addons/highlight/src/index.ts Normal file
View File

@ -0,0 +1,8 @@
export { HIGHLIGHT, RESET_HIGHLIGHT } from './constants';
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
// make it work with --isolatedModules
export default {};

1
addons/highlight/src/typings.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'global';

20
addons/highlight/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": [
"webpack-env"
]
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/*.test.*",
"src/**/tests/**/*",
"src/**/__tests__/**/*",
"src/**/*.stories.*",
"src/**/*.mockdata.*",
"src/**/__testfixtures__/**"
]
}

2
addons/interactions/package.json
View File

@ -52,7 +52,7 @@
},
"devDependencies": {
"@storybook/jest": "^0.0.5",
"@storybook/testing-library": "^0.0.12",
"@storybook/testing-library": "0.0.14-next.0",
"formik": "^2.2.9"
},
"peerDependencies": {

4
docs/configure/overview.md
View File

@ -28,7 +28,7 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
- `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
- `webpackFinal` - custom [webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config).
- `babel` - custom [babel configuration](./babel.md).
- `framework` - framework specific configurations to help the loading and building process.
@ -185,7 +185,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
| `features` | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }` |
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
## Configure story rendering

2
docs/configure/story-rendering.md
View File

@ -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 &#60;head&#62;

4
docs/configure/styling-and-css.md
View File

@ -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.
<FeatureSnippets paths={['configure/css-troubleshooting/angular.mdx']} />
@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove
### Adding webfonts
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).

50
docs/essentials/highlight.md Normal file
View File

@ -0,0 +1,50 @@
---
title: 'Highlight'
---
Storybook's [Highlight](https://storybook.js.org/addons/@storybook/addon-highlight/) addon allows you to highlight specific DOM nodes within your story. You can use it to call attention to particular parts of the story.
![](highlight.png)
This addon can be used to enhance other addons. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
## Apply or clear highlights
Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'react/component-story-highlight-addon.js.mdx',
'angular/component-story-highlight-addon.ts.mdx',
'vue/component-story-highlight-addon.js.mdx',
'web-components/component-story-highlight-addon.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/addon-highlight-reset.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
## Customize style
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/addon-highlight-customize.js.mdx',
]}
/>
<!-- prettier-ignore-end -->

BIN
docs/essentials/highlight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 768 KiB

5
docs/essentials/introduction.md
View File

@ -11,6 +11,7 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
- [Backgrounds](./backgrounds.md)
- [Toolbars & globals](./toolbars-and-globals.md)
- [Measure & outline](./measure-and-outline.md)
- [Highlight](./highlight.md)
### Installation
@ -113,6 +114,6 @@ For example, if you wanted to disable the [backgrounds addon](./backgrounds.md),
<div class="aside">
💡 You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`, `measure`, `outline`.
💡 You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`, `measure`, `outline`, `highlight`.
</div>
</div>

138
docs/faq.md
View File

@ -154,72 +154,70 @@ With the release of version 6.0, we updated our documentation as well. That does
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
|------------------|-------------------------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented |
| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
| | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
| ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented |
| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
| | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
<div class="aside">
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 <code>storiesOf</code> 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.
@ -294,7 +292,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 <strong>not</strong> apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> 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:
@ -350,7 +347,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:
@ -365,7 +361,6 @@ import * as stories from './Button.stories.jsx';
<Story name="Basic" story={stories.Basic} />
```
### 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:
@ -408,8 +403,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`.
@ -486,11 +479,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)).
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)).

10
docs/frameworks.js
View File

@ -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',
},
],
},

7
docs/get-started/installation-problems/angular.mdx
View File

@ -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

7
docs/get-started/installation-problems/ember.mdx
View File

@ -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

7
docs/get-started/installation-problems/preact.mdx
View File

@ -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

7
docs/get-started/installation-problems/react.mdx
View File

@ -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

7
docs/get-started/installation-problems/svelte.mdx
View File

@ -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

7
docs/get-started/installation-problems/vue.mdx
View File

@ -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

2
docs/get-started/whats-a-story.md
View File

@ -93,6 +93,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
/>
</video>
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.

30
docs/snippets/angular/component-story-highlight-addon.ts.mdx Normal file
View File

@ -0,0 +1,30 @@
```js
// Card.stories.ts
import { componentWrapperDecorator, Meta, Story } from '@storybook/angular';
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { Card } form './card.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Card',
component: Card
} as Meta;
export const Default: Story = (args) => ({
template: '<app-card></app-card>',
});
Default.decorators = [
componentWrapperDecorator((story) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
});
return story;
}),
];
```

9
docs/snippets/common/addon-highlight-customize.js.mdx Normal file
View File

@ -0,0 +1,9 @@
```js
// MyComponent.stories.js
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
color: 'red',
style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
});
```

5
docs/snippets/common/addon-highlight-reset.js.mdx Normal file
View File

@ -0,0 +1,5 @@
```js
// MyComponent.stories.js
emit(RESET_HIGHLIGHT);
```

21
docs/snippets/html/button-story-component-decorator.js.mdx Normal file
View File

@ -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);
```

23
docs/snippets/html/button-story-component-decorator.ts.mdx Normal file
View File

@ -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<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
```

13
docs/snippets/html/button-story-default-exports.js.mdx Normal file
View File

@ -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',
};
```

15
docs/snippets/html/button-story-default-exports.ts.mdx Normal file
View File

@ -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<ButtonArgs>;
```

16
docs/snippets/html/button-story-rename-story.js.mdx Normal file
View File

@ -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';
```

18
docs/snippets/html/button-story-rename-story.ts.mdx Normal file
View File

@ -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<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
Primary.storyName = 'I am the primary';
```

26
docs/snippets/html/button-story-using-args.js.mdx Normal file
View File

@ -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: '📚📕📈🤓' };
```

27
docs/snippets/html/button-story-using-args.ts.mdx Normal file
View File

@ -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<ButtonArgs>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn<ButtonArgs> = (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: '📚📕📈🤓' };
```

2
docs/snippets/html/button-story-with-args.js.mdx
View File

@ -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

11
docs/snippets/html/button-story-with-args.ts.mdx
View File

@ -1,16 +1,23 @@
```ts
// Button.stories.ts
import type { 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<ButtonArgs>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn = (args): HTMLButtonElement => {
const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => {
const btn = document.createElement('button');
btn.innerText = args.label;

25
docs/snippets/html/button-story-with-blue-args.js.mdx Normal file
View File

@ -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);
```

27
docs/snippets/html/button-story-with-blue-args.ts.mdx Normal file
View File

@ -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<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
```

16
docs/snippets/html/button-story-with-emojis.js.mdx Normal file
View File

@ -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: "📚📕📈🤓"});
```

17
docs/snippets/html/button-story-with-emojis.ts.mdx Normal file
View File

@ -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<ButtonArgs>;
export const Primary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "Button"});
export const Secondary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
export const Tertiary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
```

2
docs/snippets/html/button-story.js.mdx
View File

@ -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

2
docs/snippets/html/button-story.ts.mdx
View File

@ -1,4 +1,6 @@
```ts
// Button.stories.ts
import { Meta, StoryFn } from '@storybook/html';
export default {

27
docs/snippets/html/list-story-expanded.js.mdx Normal file
View File

@ -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;
};
```

29
docs/snippets/html/list-story-expanded.ts.mdx Normal file
View File

@ -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<ListArgs>;
export const Empty: StoryFn<ListArgs> = (args) => createList(args);
export const OneItem: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem());
return list;
};
export const ManyItems: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem());
list.appendChild(createListItem());
list.appendChild(createListItem());
return list;
};
```

22
docs/snippets/html/list-story-reuse-data.js.mdx Normal file
View File

@ -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;
};
```

32
docs/snippets/html/list-story-reuse-data.ts.mdx Normal file
View File

@ -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<ListArgs>;
export const Empty: StoryFn<ListArgs> = (args) => createList(args);
export const OneItem: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem());
return list;
};
export const ManyItems: StoryFn<ListArgs> = (args) => {
const list = createList(args);
list.appendChild(createListItem(Selected.args));
list.appendChild(createListItem(Unselected.args));
list.appendChild(createListItem(Unselected.args));
return list;
};
```

12
docs/snippets/html/list-story-starter.js.mdx Normal file
View File

@ -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);
```

14
docs/snippets/html/list-story-starter.ts.mdx Normal file
View File

@ -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<ListArgs>;
// Always an empty list, not super interesting
const Template: StoryFn<ListArgs> = (args) => createList(args);
```

27
docs/snippets/react/component-story-highlight-addon.js.mdx Normal file
View File

@ -0,0 +1,27 @@
```js
// Card.stories.js|jsx
import React, { useEffect } from 'react';
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { Card } form './Card';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Card',
component: Card
};
export const Default = () => <Card />;
Default.decorators = [
(storyFn) => {
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
});
return storyFn();
},
];
```

32
docs/snippets/vue/component-story-highlight-addon.js.mdx Normal file
View File

@ -0,0 +1,32 @@
```js
// Card.stories.js
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { Card } form './Card.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Card',
component: Card
};
export const Default: Story = (args) => ({
template: '<Card />',
});
Default.decorators = [
(story) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
});
return {
components: { story },
template: '<story />',
};
},
];
```

25
docs/snippets/web-components/component-story-highlight-addon.js.mdx Normal file
View File

@ -0,0 +1,25 @@
```js
// card-component.stories.js
import { html } from 'lit-html';
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import './card-component';
export default {
title: 'Card',
};
export const Default: Story = (args) => ({
template: html`<sb-card></sb-card>`,
});
Default.decorators = [
(story) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.title', '.subtitle'],
});
return story();
},
];
```

2
docs/writing-stories/args.md
View File

@ -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',
]}
/>

20
docs/writing-stories/introduction.md
View File

@ -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',
]}
/>

4
docs/writing-tests/interaction-testing.md
View File

@ -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
- [Import stories in other tests](./importing-stories-in-tests.md) for other tools

1
docs/writing-tests/test-runner.md
View File

@ -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',
]}
/>

1
examples/angular-cli/.storybook/main.ts
View File

@ -13,6 +13,7 @@ const mainConfig: import('@storybook/angular').StorybookConfig = {
'@storybook/addon-backgrounds',
'@storybook/addon-a11y',
'@storybook/addon-toolbars',
'@storybook/addon-highlight',
],
core: {
channelOptions: { allowFunction: false, maxDepth: 10 },

3
examples/angular-cli/package.json
View File

@ -49,6 +49,7 @@
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-interactions": "7.0.0-alpha.6",
"@storybook/addon-jest": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
@ -59,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",

1
examples/cra-kitchen-sink/.storybook/main.ts
View File

@ -18,6 +18,7 @@ const mainConfig: StorybookConfig = {
'@storybook/addon-backgrounds',
'@storybook/addon-a11y',
'@storybook/addon-jest',
'@storybook/addon-highlight',
],
// add monorepo root as a valid directory to import modules from
webpackFinal: (config) => {

1
examples/cra-kitchen-sink/package.json
View File

@ -25,6 +25,7 @@
"@storybook/addon-actions": "7.0.0-alpha.6",
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-jest": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-storyshots": "7.0.0-alpha.6",

1
examples/cra-ts-kitchen-sink/.storybook/main.ts
View File

@ -11,6 +11,7 @@ const mainConfig: StorybookConfig = {
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-a11y',
'@storybook/addon-highlight',
'./localAddon/manager.tsx',
'./localAddon/preset.ts',
],

1
examples/cra-ts-kitchen-sink/package.json
View File

@ -37,6 +37,7 @@
"@storybook/addon-a11y": "7.0.0-alpha.6",
"@storybook/addon-actions": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addons": "7.0.0-alpha.6",
"@storybook/builder-webpack5": "7.0.0-alpha.6",

1
examples/ember-cli/.storybook/main.js
View File

@ -17,6 +17,7 @@ module.exports = {
'@storybook/addon-links',
'@storybook/addon-viewport',
'@storybook/addon-backgrounds',
'@storybook/addon-highlight',
],
webpackFinal: async (config) => {
config.module.rules.push({

1
examples/ember-cli/package.json
View File

@ -22,6 +22,7 @@
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-storysource": "7.0.0-alpha.6",
"@storybook/addon-viewport": "7.0.0-alpha.6",

1
examples/html-kitchen-sink/.storybook/main.ts
View File

@ -22,6 +22,7 @@ const mainConfig: StorybookConfig = {
},
'@storybook/addon-storysource',
'@storybook/addon-viewport',
'@storybook/addon-highlight',
],
core: {
channelOptions: { allowFunction: false, maxDepth: 10 },

1
examples/html-kitchen-sink/package.json
View File

@ -18,6 +18,7 @@
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-jest": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-postcss": "^2.0.0",

32
examples/official-storybook/components/page/Button.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import PropTypes from 'prop-types';
import './button.css';
/**
* Primary UI component for user interaction
*/
export const Button = ({ primary, size, label, ...props }) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
{...props}
>
{label}
</button>
);
};
Button.propTypes = {
primary: PropTypes.bool,
size: PropTypes.oneOf(['small', 'medium', 'large']),
label: PropTypes.string.isRequired,
onClick: PropTypes.func,
};
Button.defaultProps = {
primary: false,
size: 'medium',
onClick: undefined,
};

52
examples/official-storybook/components/page/Header.js Normal file
View File

@ -0,0 +1,52 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from './Button';
import './header.css';
export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
<header>
<div className="wrapper">
<div>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
fill="#FFF"
/>
<path
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
fill="#555AB9"
/>
<path
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
fill="#91BAF8"
/>
</g>
</svg>
<h1 className="title">Acme</h1>
</div>
<div>
{user ? (
<Button size="small" onClick={onLogout} label="Log out" />
) : (
<>
<Button size="small" onClick={onLogin} label="Log in" />
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
</>
)}
</div>
</div>
</header>
);
Header.propTypes = {
user: PropTypes.shape({}),
onLogin: PropTypes.func.isRequired,
onLogout: PropTypes.func.isRequired,
onCreateAccount: PropTypes.func.isRequired,
};
Header.defaultProps = {
user: null,
};

74
examples/official-storybook/components/page/Page.js Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Header } from './Header';
import './page.css';
export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
<article>
<Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
<section>
<h2 className="page-title">Pages in Storybook</h2>
<p>
We recommend building UIs with a{' '}
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
<strong>component-driven</strong>
</a>{' '}
process starting with atomic components and ending with pages.
</p>
<p>
Render pages with mock data. This makes it easy to build and review page states without
needing to navigate to them in your app. Here are some handy patterns for managing page data
in Storybook:
</p>
<ul>
<li>
Use a higher-level connected component. Storybook helps you compose such data from the
"args" of child component stories
</li>
<li>
Assemble data in the page component from your services. You can mock these services out
using Storybook.
</li>
</ul>
<p>
Get a guided tutorial on component-driven development at{' '}
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
Storybook tutorials
</a>
. Read more in the{' '}
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
docs
</a>
.
</p>
<div className="tip-wrapper">
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
id="a"
fill="#999"
/>
</g>
</svg>
Viewports addon in the toolbar
</div>
</section>
</article>
);
Page.propTypes = {
user: PropTypes.shape({}),
onLogin: PropTypes.func,
onLogout: PropTypes.func,
onCreateAccount: PropTypes.func,
};
Page.defaultProps = {
user: null,
onLogin: () => {},
onLogout: () => {},
onCreateAccount: () => {},
};

30
examples/official-storybook/components/page/button.css Normal file
View File

@ -0,0 +1,30 @@
.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
}
.storybook-button--primary {
color: white;
background-color: #1ea7fd;
}
.storybook-button--secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.storybook-button--small {
font-size: 12px;
padding: 10px 16px;
}
.storybook-button--medium {
font-size: 14px;
padding: 11px 20px;
}
.storybook-button--large {
font-size: 16px;
padding: 12px 24px;
}

26
examples/official-storybook/components/page/header.css Normal file
View File

@ -0,0 +1,26 @@
.wrapper {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
svg {
display: inline-block;
vertical-align: top;
}
.title {
font-weight: 900;
font-size: 20px;
line-height: 1;
margin: 6px 0 6px 10px;
display: inline-block;
vertical-align: top;
}
button + button {
margin-left: 10px;
}

73
examples/official-storybook/components/page/page.css Normal file
View File

@ -0,0 +1,73 @@
article {
background-color: #fff;
}
section {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
padding: 48px 20px;
margin: 0 auto;
max-width: 600px;
color: #333;
}
.page-title {
font-weight: 900;
font-size: 32px;
line-height: 1;
margin: 0 0 4px;
display: inline-block;
vertical-align: top;
}
p {
margin: 1em 0;
}
a {
text-decoration: none;
color: #1ea7fd;
}
ul {
padding-left: 30px;
margin: 1em 0;
}
li {
margin-bottom: 8px;
}
.tip {
display: inline-block;
border-radius: 1em;
font-size: 11px;
line-height: 12px;
font-weight: 700;
background: #e7fdd8;
color: #66bf3c;
padding: 4px 12px;
margin-right: 10px;
vertical-align: top;
}
.tip-wrapper {
font-size: 13px;
line-height: 20px;
margin-top: 40px;
margin-bottom: 40px;
}
.tip-wrapper svg {
display: inline-block;
height: 12px;
width: 12px;
margin-right: 4px;
vertical-align: top;
margin-top: 3px;
}
.tip-wrapper svg path {
fill: #1ea7fd;
}

3
examples/official-storybook/package.json
View File

@ -18,6 +18,7 @@
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-interactions": "7.0.0-alpha.6",
"@storybook/addon-jest": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
@ -37,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",

50
examples/official-storybook/stories/addon-a11y/highlight.stories.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { highlightObject } from '@storybook/addon-a11y';
import { themes, convert, styled } from '@storybook/theming';
import React, { useEffect } from 'react';
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { themes, convert } from '@storybook/theming';
import Button from '../../components/addon-a11y/Button';
@ -15,10 +16,41 @@ export default {
decorators: [(storyFn) => <div style={{ padding: 10 }}>{storyFn()}</div>],
};
const PassesHighlight = styled.div(highlightObject(convert(themes.normal).color.positive));
const IncompleteHighlight = styled.div(highlightObject(convert(themes.normal).color.warning));
const ViolationsHighlight = styled.div(highlightObject(convert(themes.normal).color.negative));
export const Passes = () => {
const emit = useChannel({});
export const Passes = () => <PassesHighlight>{text}</PassesHighlight>;
export const Incomplete = () => <IncompleteHighlight>{text}</IncompleteHighlight>;
export const Violations = () => <ViolationsHighlight>{text}</ViolationsHighlight>;
useEffect(() => {
emit(HIGHLIGHT, {
elements: ['p'],
color: convert(themes.normal).color.positive,
});
}, []);
return <p>{text}</p>;
};
export const Incomplete = () => {
const emit = useChannel({});
useEffect(() => {
emit(HIGHLIGHT, {
elements: ['p'],
color: convert(themes.normal).color.warning,
});
}, []);
return <p>{text}</p>;
};
export const Violations = () => {
const emit = useChannel({});
useEffect(() => {
emit(HIGHLIGHT, {
elements: ['p'],
color: convert(themes.normal).color.negative,
});
}, []);
return <p>{text}</p>;
};

104
examples/official-storybook/stories/addon-highlight.stories.js Normal file
View File

@ -0,0 +1,104 @@
import React from 'react';
import { useChannel } from '@storybook/addons';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { Page } from '../components/page/Page';
export default {
title: 'Addons/Highlight',
component: Page,
};
const Template = () => <Page />;
export const OneSelector = Template.bind({});
OneSelector.decorators = [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.page-title'],
});
return storyFn();
},
];
export const MultipleSelectors = Template.bind({});
MultipleSelectors.decorators = [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['a', 'button'],
});
return storyFn();
},
];
export const CustomColor = Template.bind({});
CustomColor.decorators = [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.tip-wrapper'],
color: '#6c1d5c',
style: 'solid',
});
return storyFn();
},
];
export const OutlineStyle = Template.bind({});
OutlineStyle.decorators = [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.page-title'],
color: '#6c1d5c',
style: 'double',
});
return storyFn();
},
];
export const MultipleEvents = Template.bind({});
MultipleEvents.decorators = [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['.tip-wrapper'],
color: '#6c1d5c',
style: 'solid',
});
emit(HIGHLIGHT, {
elements: ['ul'],
color: '#6c1d5c',
style: 'dotted',
});
return storyFn();
},
];
export const Reset = Template.bind({});
Reset.decorators = [
(storyFn) => {
const emit = useChannel({});
emit(HIGHLIGHT, {
elements: ['ul'],
color: '#6c1d5c',
style: 'dotted',
});
emit(RESET_HIGHLIGHT);
return storyFn();
},
];

1
examples/preact-kitchen-sink/.storybook/main.ts
View File

@ -13,6 +13,7 @@ const mainConfig: StorybookConfig = {
'@storybook/addon-viewport',
'@storybook/addon-backgrounds',
'@storybook/addon-a11y',
'@storybook/addon-highlight',
],
webpackFinal: (config) => {
const rules = config.module?.rules || [];

1
examples/preact-kitchen-sink/package.json
View File

@ -18,6 +18,7 @@
"@storybook/addon-a11y": "7.0.0-alpha.6",
"@storybook/addon-actions": "7.0.0-alpha.6",
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-storyshots": "7.0.0-alpha.6",
"@storybook/addon-storysource": "7.0.0-alpha.6",

1
examples/server-kitchen-sink/.storybook/main.ts
View File

@ -10,6 +10,7 @@ const mainConfig: StorybookConfig = {
'@storybook/addon-backgrounds',
'@storybook/addon-links',
'@storybook/addon-controls',
'@storybook/addon-highlight',
],
core: {
disableTelemetry: true,

1
examples/server-kitchen-sink/package.json
View File

@ -18,6 +18,7 @@
"@storybook/addon-actions": "7.0.0-alpha.6",
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/node-logger": "7.0.0-alpha.6",
"@storybook/server": "7.0.0-alpha.6",

1
examples/svelte-kitchen-sink/.storybook/main.ts
View File

@ -19,6 +19,7 @@ const mainConfig: import('@storybook/svelte-webpack5').StorybookConfig = {
'@storybook/addon-backgrounds',
'@storybook/addon-viewport',
'@storybook/addon-a11y',
'@storybook/addon-highlight',
],
webpackFinal: async (config) => {
const rules = config.module?.rules || [];

3
examples/svelte-kitchen-sink/package.json
View File

@ -15,6 +15,7 @@
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-interactions": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-storyshots": "7.0.0-alpha.6",
@ -25,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"

2
examples/vue-3-cli/package.json
View File

@ -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",

1
examples/vue-kitchen-sink/.storybook/main.ts
View File

@ -13,6 +13,7 @@ const mainConfig: StorybookConfig = {
'@storybook/addon-viewport',
'@storybook/addon-backgrounds',
'@storybook/addon-a11y',
'@storybook/addon-highlight',
],
core: {
channelOptions: { allowFunction: false, maxDepth: 10 },

3
examples/vue-kitchen-sink/package.json
View File

@ -19,6 +19,7 @@
"@storybook/addon-backgrounds": "7.0.0-alpha.6",
"@storybook/addon-controls": "7.0.0-alpha.6",
"@storybook/addon-docs": "7.0.0-alpha.6",
"@storybook/addon-highlight": "7.0.0-alpha.6",
"@storybook/addon-interactions": "7.0.0-alpha.6",
"@storybook/addon-links": "7.0.0-alpha.6",
"@storybook/addon-storyshots": "7.0.0-alpha.6",
@ -27,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",

1
examples/web-components-kitchen-sink/.storybook/main.js
View File

@ -12,6 +12,7 @@ module.exports = {
'@storybook/addon-storysource',
'@storybook/addon-viewport',
'@storybook/addon-toolbars',
'@storybook/addon-highlight',
],
core: {
channelOptions: { allowFunction: false, maxDepth: 10 },

3
examples/web-components-kitchen-sink/package.json
View File

@ -19,6 +19,7 @@
"@storybook/addon-backgrounds": "link:../../addons/backgrounds",
"@storybook/addon-controls": "link:../../addons/controls",
"@storybook/addon-docs": "link:../../addons/docs",
"@storybook/addon-highlight": "link:../../addons/highlight",
"@storybook/addon-interactions": "link:../../addons/interactions",
"@storybook/addon-links": "link:../../addons/links",
"@storybook/addon-storyshots": "link:../../addons/storyshots/storyshots-core",
@ -55,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",

2
lib/cli/src/automigrate/fixes/index.ts
View File

@ -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,
];

11
lib/cli/src/js-package-manager/NPMProxy.ts
View File

@ -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() {

4
lib/core-common/templates/base-preview-head.html
View File

@ -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;
}

1
lib/core-server/package.json
View File

@ -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",

5
lib/core-server/src/build-static.ts
View File

@ -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) {

Some files were not shown because too many files have changed in this diff Show More