diff --git a/MIGRATION.md b/MIGRATION.md index 6b573ada5970..518b24dbbb64 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,8 @@ # Migration - [Migration](#migration) + - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x) + - [New addon presets](#new-addon-presets) - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x) - [To main.js configuration](#to-mainjs-configuration) - [Create React App preset](#create-react-app-preset) @@ -76,6 +78,53 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 5.3.x to 6.0.x + +### New addon presets + +In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions. + +This breaking change currently applies to: `addon-a11y`, `addon-knobs`. + +Consider the following `main.js` config for the accessibility addon, `addon-a11y`: + +```js +module.exports = { + stories: ['../**/*.stories.js'], + addons: ['@storybook/addon-a11y'], +}; +``` + +In earlier versions of Storybook, this would automatically call `@storybook/addon-a11y/register`, which adds the the a11y panel to the Storybook UI. As a user you would also add a decorator: + +```js +import { withA11Y } from '../index'; + +addDecorator(withA11Y); +``` + +Now in 6.0, `addon-a11y` comes with a preset, `@storybook/addon-a11y/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator. However, if you are upgrading + +If you wish to disable this new behavior, you can modify your `main.js` to force it to use the `register` logic rather than the `preset`: + +```js +module.exports = { + stories: ['../**/*.stories.js'], + addons: ['@storybook/addon-a11y/register'], +}; +``` + +If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters: + +```js +export const MyNonCheckedStory = () => ; +MyNonCheckedStory.story = { + parameters: { + a11y: { disable: true }, + }, +}; +``` + ## From version 5.2.x to 5.3.x ### To main.js configuration @@ -214,7 +263,7 @@ yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js" If you were using `|` and wish to keep the "root" behavior, use the `showRoots: true` option to re-enable roots: ```js -addParameters({ +addParameters({ options: { showRoots: true, }, @@ -226,13 +275,14 @@ NOTE: it is no longer possible to have some stories with roots and others withou ### Addon StoryShots Puppeteer uses external puppeteer To give you more control on the Chrome version used when running StoryShots Puppeteer, `puppeteer` is no more included in the addon dependencies. So you can now pick the version of `puppeteer` you want and set it in your project. - + If you want the latest version available just run: + ```sh yarn add puppeteer --dev OR npm install puppeteer --save-dev -``` +``` ## From version 5.1.x to 5.2.x diff --git a/addons/a11y/README.md b/addons/a11y/README.md index f4d086fb9f1d..d8260b195cff 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -18,8 +18,8 @@ Add this line to your `main.js` file (create this file inside your storybook con ```js module.exports = { - addons: ['@storybook/addon-a11y/register'] -} + addons: ['@storybook/addon-a11y/register'], +}; ``` import the `withA11y` decorator to check your stories for violations within your components. @@ -34,19 +34,23 @@ export default { decorators: [withA11y], }; -export const accessible = () => ( - -); +export const accessible = () => ; export const inaccessible = () => ( - + ); ``` +## Using the preset + +Add the decorator to all stories: + +```js +module.exports = { + addons: ['@storybook/addon-a11y'], +}; +``` + ## Parameters For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure). @@ -69,29 +73,23 @@ export default { config: {}, // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter) options: {}, - // optional flag to prevent the automatic check + // optional flag to prevent the automatic check manual: true, }, }, }; -export const accessible = () => ( - -); +export const accessible = () => ; export const inaccessible = () => ( - + ); ``` ## Roadmap -* Make UI accessible -* Show in story where violations are. -* Add more example tests -* Add tests -* Make CI integration possible +- Make UI accessible +- Show in story where violations are. +- Add more example tests +- Add tests +- Make CI integration possible diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 476698c26077..895219c5535b 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -34,6 +34,7 @@ "dependencies": { "@storybook/addons": "6.0.0-alpha.4", "@storybook/api": "6.0.0-alpha.4", + "@storybook/client-api": "6.0.0-alpha.4", "@storybook/client-logger": "6.0.0-alpha.4", "@storybook/components": "6.0.0-alpha.4", "@storybook/core-events": "6.0.0-alpha.4", diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js new file mode 100644 index 000000000000..a83f95279e7f --- /dev/null +++ b/addons/a11y/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset'); diff --git a/addons/a11y/src/preset/addDecorator.ts b/addons/a11y/src/preset/addDecorator.ts new file mode 100644 index 000000000000..e2269900a384 --- /dev/null +++ b/addons/a11y/src/preset/addDecorator.ts @@ -0,0 +1,4 @@ +import { addDecorator } from '@storybook/client-api'; +import { withA11Y } from '../index'; + +addDecorator(withA11Y); diff --git a/addons/a11y/src/preset/index.ts b/addons/a11y/src/preset/index.ts new file mode 100644 index 000000000000..2dac2590598f --- /dev/null +++ b/addons/a11y/src/preset/index.ts @@ -0,0 +1,15 @@ +type A11yOptions = { + addDecorator?: boolean; +}; + +export function managerEntries(entry: any[] = []) { + return [...entry, require.resolve('../register')]; +} + +export function config(entry: any[] = [], { addDecorator = true }: A11yOptions = {}) { + const a11yConfig = []; + if (addDecorator) { + a11yConfig.push(require.resolve('./addDecorator')); + } + return [...entry, ...a11yConfig]; +} diff --git a/app/server/package.json b/app/server/package.json index 9d6ea1d5f6a9..c5c7105c0da5 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -15,13 +15,6 @@ "directory": "app/html" }, "license": "MIT", - "files": [ - "bin/**/*", - "dist/**/*", - "README.md", - "*.js", - "*.d.ts" - ], "main": "dist/client/index.js", "types": "dist/client/index.d.ts", "bin": { @@ -29,6 +22,13 @@ "start-storybook": "./bin/index.js", "storybook-server": "./bin/index.js" }, + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], "scripts": { "prepare": "node ../../scripts/prepare.js" }, diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts index 4e526489c8ce..e2c77e9e4870 100644 --- a/examples/angular-cli/.storybook/preview.ts +++ b/examples/angular-cli/.storybook/preview.ts @@ -1,5 +1,4 @@ import { addParameters, addDecorator } from '@storybook/angular'; -import { withA11y } from '@storybook/addon-a11y'; import { setCompodocJson } from '@storybook/addon-docs/angular'; import addCssWarning from '../src/cssWarning'; @@ -9,7 +8,6 @@ import docJson from '../documentation.json'; setCompodocJson(docJson); -addDecorator(withA11y); addCssWarning(); addParameters({ diff --git a/examples/cra-kitchen-sink/.storybook/preview.js b/examples/cra-kitchen-sink/.storybook/preview.js index 6f9c8caefc7f..50a6b6acc28e 100644 --- a/examples/cra-kitchen-sink/.storybook/preview.js +++ b/examples/cra-kitchen-sink/.storybook/preview.js @@ -1,7 +1,5 @@ import { addParameters, addDecorator } from '@storybook/react'; -import { withA11y } from '@storybook/addon-a11y'; -addDecorator(withA11y); addParameters({ options: { storySort: (a, b) => diff --git a/examples/cra-ts-kitchen-sink/.storybook/preview.ts b/examples/cra-ts-kitchen-sink/.storybook/preview.ts index ec21c3337ee9..4ae2fd71cc3e 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/preview.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/preview.ts @@ -1,9 +1,7 @@ import { addParameters, addDecorator } from '@storybook/react'; -import { withA11y } from '@storybook/addon-a11y'; import { withKnobs } from '@storybook/addon-knobs'; addDecorator(withKnobs); -addDecorator(withA11y); addParameters({ options: { brandTitle: 'CRA TypeScript Kitchen Sink', diff --git a/examples/ember-cli/.storybook/preview.js b/examples/ember-cli/.storybook/preview.js index 0bf5e7f8dcfc..9bef60f26a28 100644 --- a/examples/ember-cli/.storybook/preview.js +++ b/examples/ember-cli/.storybook/preview.js @@ -1,11 +1,9 @@ import { addParameters, addDecorator } from '@storybook/ember'; import { setJSONDoc } from '@storybook/addon-docs/ember'; -import { withA11y } from '@storybook/addon-a11y'; // eslint-disable-next-line import/no-unresolved import docJson from '../ember-output/storybook-docgen/index.json'; setJSONDoc(docJson); -addDecorator(withA11y); addParameters({ options: { showRoots: true, diff --git a/examples/html-kitchen-sink/.storybook/preview.js b/examples/html-kitchen-sink/.storybook/preview.js index 60851dbe04b4..b5777595e16f 100644 --- a/examples/html-kitchen-sink/.storybook/preview.js +++ b/examples/html-kitchen-sink/.storybook/preview.js @@ -1,7 +1,4 @@ import { addParameters, addDecorator } from '@storybook/html'; -import { withA11y } from '@storybook/addon-a11y'; - -addDecorator(withA11y); addParameters({ a11y: { diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js index a811c0cee73f..2e28d26daf7b 100644 --- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js +++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js @@ -1,11 +1,9 @@ import { document, setTimeout } from 'global'; -import { withA11y } from '@storybook/addon-a11y'; const text = 'Testing the a11y addon'; export default { title: 'Addons/a11y', - decorators: [withA11y], parameters: { options: { selectedPanel: 'storybook/a11y/panel' }, }, diff --git a/examples/marko-cli/.storybook/preview.js b/examples/marko-cli/.storybook/preview.js deleted file mode 100644 index 673c37b1bf3c..000000000000 --- a/examples/marko-cli/.storybook/preview.js +++ /dev/null @@ -1,4 +0,0 @@ -import { addDecorator } from '@storybook/marko'; -import { withA11y } from '@storybook/addon-a11y'; - -addDecorator(withA11y); diff --git a/examples/mithril-kitchen-sink/.storybook/preview.js b/examples/mithril-kitchen-sink/.storybook/preview.js deleted file mode 100644 index aaa551ea87eb..000000000000 --- a/examples/mithril-kitchen-sink/.storybook/preview.js +++ /dev/null @@ -1,4 +0,0 @@ -import { addDecorator } from '@storybook/mithril'; -import { withA11y } from '@storybook/addon-a11y'; - -addDecorator(withA11y); diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js index 074c294f18c0..fe17792739dd 100644 --- a/examples/official-storybook/preview.js +++ b/examples/official-storybook/preview.js @@ -2,7 +2,6 @@ import React from 'react'; import { addDecorator, addParameters } from '@storybook/react'; import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming'; import { withCssResources } from '@storybook/addon-cssresources'; -import { withA11y } from '@storybook/addon-a11y'; import { DocsPage } from '@storybook/addon-docs/blocks'; import addHeadWarning from './head-warning'; @@ -25,7 +24,6 @@ addHeadWarning('preview-head-not-loaded', 'Preview head not loaded'); addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded'); addDecorator(withCssResources); -addDecorator(withA11y); addDecorator(storyFn => ( diff --git a/examples/preact-kitchen-sink/.storybook/preview.js b/examples/preact-kitchen-sink/.storybook/preview.js deleted file mode 100644 index 9f10bed13266..000000000000 --- a/examples/preact-kitchen-sink/.storybook/preview.js +++ /dev/null @@ -1,5 +0,0 @@ -/** @jsx h */ -import { addDecorator } from '@storybook/preact'; -import { withA11y } from '@storybook/addon-a11y'; - -addDecorator(withA11y); diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js index 30f8003dd711..162f5fe80183 100644 --- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js +++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js @@ -1,11 +1,9 @@ import { createElement } from 'rax'; -import { withA11Y } from '@storybook/addon-a11y'; import Text from 'rax-text'; import View from 'rax-view'; export default { title: 'Addon/addon-a11y', - decorators: [withA11Y], }; export const Basic = () => RAX TEXT NODE; diff --git a/examples/riot-kitchen-sink/.storybook/preview.js b/examples/riot-kitchen-sink/.storybook/preview.js deleted file mode 100644 index e74334d439c3..000000000000 --- a/examples/riot-kitchen-sink/.storybook/preview.js +++ /dev/null @@ -1,4 +0,0 @@ -import { addDecorator } from '@storybook/riot'; -import { withA11y } from '@storybook/addon-a11y'; - -addDecorator(withA11y); diff --git a/examples/svelte-kitchen-sink/.storybook/preview.js b/examples/svelte-kitchen-sink/.storybook/preview.js deleted file mode 100644 index 7f5d4bed2e58..000000000000 --- a/examples/svelte-kitchen-sink/.storybook/preview.js +++ /dev/null @@ -1,4 +0,0 @@ -import { addDecorator } from '@storybook/svelte'; -import { withA11y } from '@storybook/addon-a11y'; - -addDecorator(withA11y); diff --git a/examples/vue-kitchen-sink/.storybook/preview.js b/examples/vue-kitchen-sink/.storybook/preview.js index 6b56e714e63d..322b5cc5273f 100644 --- a/examples/vue-kitchen-sink/.storybook/preview.js +++ b/examples/vue-kitchen-sink/.storybook/preview.js @@ -1,11 +1,9 @@ import { addParameters, addDecorator } from '@storybook/vue'; import Vue from 'vue'; import Vuex from 'vuex'; -import { withA11y } from '@storybook/addon-a11y'; import MyButton from '../src/stories/Button.vue'; -addDecorator(withA11y); Vue.component('my-button', MyButton); Vue.use(Vuex); diff --git a/examples/web-components-kitchen-sink/.storybook/preview.js b/examples/web-components-kitchen-sink/.storybook/preview.js index 5fbd341a802c..39953f357907 100644 --- a/examples/web-components-kitchen-sink/.storybook/preview.js +++ b/examples/web-components-kitchen-sink/.storybook/preview.js @@ -6,14 +6,11 @@ import { addDecorator, setCustomElements, } from '@storybook/web-components'; -import { withA11y } from '@storybook/addon-a11y'; import customElements from '../custom-elements.json'; setCustomElements(customElements); -addDecorator(withA11y); - addParameters({ a11y: { config: {}, diff --git a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js index ebbacd65298f..0402fc89a7eb 100644 --- a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js +++ b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js @@ -1,12 +1,10 @@ import { document, setTimeout } from 'global'; -import { withA11y } from '@storybook/addon-a11y'; import { html } from 'lit-html'; const text = 'Testing the a11y addon'; export default { title: 'Addons/a11y', - decorators: [withA11y], parameters: { options: { selectedPanel: 'storybook/a11y/panel' }, },