From 9cb8bc2c69edb18234dc5bb74be860e65719c9bc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jan 2020 10:26:42 +0100 Subject: [PATCH 1/6] ADD page about tri-config intro --- docs/gatsby-config.js | 1 + .../pages/configurations/overview/index.md | 42 +++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 docs/src/pages/configurations/overview/index.md diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index eb5ac5630a33..1cd31b7c1040 100644 --- a/docs/gatsby-config.js +++ b/docs/gatsby-config.js @@ -28,6 +28,7 @@ module.exports = { '/guides/guide-svelte/', ], configurations: [ + '/configurations/overview/', '/configurations/options-parameter/', '/configurations/default-config/', '/configurations/custom-webpack-config/', diff --git a/docs/src/pages/configurations/overview/index.md b/docs/src/pages/configurations/overview/index.md new file mode 100644 index 000000000000..dff7e46ba10f --- /dev/null +++ b/docs/src/pages/configurations/overview/index.md @@ -0,0 +1,42 @@ + +--- +id: 'overview' +title: 'Configuration overview' +--- + +For CLI options see: [here](/docs/cli-options). + +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + +## main configuration + +Storybook has a few files it uses for configuration, and they are grouped together into a directory (default: `.storybook`). + +The most import file is the `main.js` file. This is where general config is declared. + +Here's an minimal example of a that file: + +```js +module.exports = { + stories: ['../src/components/**/*.stories.js'], + addons: [ + '@storybook/addon-essentials', + ], +}; +``` + +The addons field can refer to traditional [addons](docs/addons/introduction), but it can also include [presets](/docs/presets/introduction/) extending the config further. + +## manager & preview + +Storybook works by being split into 2 applications, which communicate with each other over a postmessage channel; called the "manager" and "preview". + +The preview application is essentially just your stories with a framework agnostic 'router'. Making it so when the manager application tells it so, it renders the correct story. + +The manager application renders the UI of [addons](docs/addons/introduction), the navigator and [toolbar](/docs/basics/toolbar-guide/). + +There are 2 extra config files, for doing some special runtime configs for each of those 2 applications. + +In `preview.js` you can add global [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters): + +In `manager.js` you can add [UI options](/docs/configurations/options-parameter/#global-options). \ No newline at end of file From 95ae4160c10fecc1ddcdc11940abfb69dfbbef8a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jan 2020 10:40:19 +0100 Subject: [PATCH 2/6] ADD api --- .../pages/configurations/overview/index.md | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/configurations/overview/index.md b/docs/src/pages/configurations/overview/index.md index dff7e46ba10f..84f68cbdd23f 100644 --- a/docs/src/pages/configurations/overview/index.md +++ b/docs/src/pages/configurations/overview/index.md @@ -39,4 +39,24 @@ There are 2 extra config files, for doing some special runtime configs for each In `preview.js` you can add global [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters): -In `manager.js` you can add [UI options](/docs/configurations/options-parameter/#global-options). \ No newline at end of file +In `manager.js` you can add [UI options](/docs/configurations/options-parameter/#global-options). + +## entire main.js config + +The `main.js` file is actually a preset! so if you know how to configure storybook, you know how to write a preset, and vice-versa! +So the API of `main.js` is equal to [that of presets](/docs/presets/writing-presets/#presets-api). + +Here's an overview of the important configuration properties in `main.js`: + +```js +module.exports = { + // and array of glob patterns + stories: ['../src/components/**/*.stories.js'], + + // an array of addons & presets + addons: ['@storybook/addon-essentials'], + + // customize the webpack config for the preview application + webpackFinal: async (config) => { return config }, +}; +``` \ No newline at end of file From 0707b4231cc1f80cc51e0ae3d0824afc35d314b2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jan 2020 10:47:31 +0100 Subject: [PATCH 3/6] ADD migration guide ref to docs-pages that are not a starter-guide --- addons/docs/README.md | 2 ++ addons/docs/angular/README.md | 2 ++ addons/docs/ember/README.md | 2 ++ addons/docs/react/README.md | 2 ++ addons/docs/vue/README.md | 2 ++ docs/src/pages/addons/using-addons/index.md | 2 ++ docs/src/pages/addons/writing-addons/index.md | 2 ++ docs/src/pages/basics/writing-stories/index.md | 2 ++ docs/src/pages/configurations/custom-webpack-config/index.md | 2 ++ docs/src/pages/configurations/typescript-config/index.md | 2 ++ docs/src/pages/presets/introduction/index.md | 2 ++ docs/src/pages/presets/writing-presets/index.md | 2 ++ 12 files changed, 24 insertions(+) diff --git a/addons/docs/README.md b/addons/docs/README.md index cc275e787d58..2dd83ec9f783 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -4,6 +4,8 @@ # Storybook Docs +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. **DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages. diff --git a/addons/docs/angular/README.md b/addons/docs/angular/README.md index 0d9f819c6d2a..c682e4a3c95b 100644 --- a/addons/docs/angular/README.md +++ b/addons/docs/angular/README.md @@ -4,6 +4,8 @@ # Storybook Docs for Angular +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Angular supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Angular specifics, read on! diff --git a/addons/docs/ember/README.md b/addons/docs/ember/README.md index eed0df6bbd2e..c4a167fdf894 100644 --- a/addons/docs/ember/README.md +++ b/addons/docs/ember/README.md @@ -1,5 +1,7 @@ # Storybook Docs for Ember +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Ember specifics, read on! diff --git a/addons/docs/react/README.md b/addons/docs/react/README.md index 7b476cb0d090..b70b93aff654 100644 --- a/addons/docs/react/README.md +++ b/addons/docs/react/README.md @@ -4,6 +4,8 @@ # Storybook Docs for React +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the React specifics, read on! diff --git a/addons/docs/vue/README.md b/addons/docs/vue/README.md index 2d5dc1ce0fe7..86dc7427aadd 100644 --- a/addons/docs/vue/README.md +++ b/addons/docs/vue/README.md @@ -4,6 +4,8 @@ # Storybook Docs for Vue +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Vue supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Vue specifics, read on! diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md index 1118517e21ef..b70cedb5ba89 100644 --- a/docs/src/pages/addons/using-addons/index.md +++ b/docs/src/pages/addons/using-addons/index.md @@ -3,6 +3,8 @@ id: 'using-addons' title: 'Using Addons' --- +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions) and [links](https://github.com/storybookjs/storybook/tree/master/addons/links). But you can use any third party addons distributed via NPM. Here's how to do it. diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md index 88c4a7f62256..6315e350a314 100644 --- a/docs/src/pages/addons/writing-addons/index.md +++ b/docs/src/pages/addons/writing-addons/index.md @@ -3,6 +3,8 @@ id: 'writing-addons' title: 'Writing Addons' --- +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + This is a complete guide on how to create addons for Storybook. ## Storybook Basics diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md index 5d4b62c64f7c..0718707b33c6 100644 --- a/docs/src/pages/basics/writing-stories/index.md +++ b/docs/src/pages/basics/writing-stories/index.md @@ -3,6 +3,8 @@ id: 'writing-stories' title: 'Writing Stories' --- +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + A Storybook is a collection of stories. Each story represents a single visual state of a component. > Technically, a story is a function that returns something that can be rendered to screen. diff --git a/docs/src/pages/configurations/custom-webpack-config/index.md b/docs/src/pages/configurations/custom-webpack-config/index.md index 2568c3f1cb04..c41a1f734e62 100644 --- a/docs/src/pages/configurations/custom-webpack-config/index.md +++ b/docs/src/pages/configurations/custom-webpack-config/index.md @@ -3,6 +3,8 @@ id: 'custom-webpack-config' title: 'Custom Webpack Config' --- +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + You can customize Storybook's webpack setup by providing a `webpack` field in `main.js` file. The value should be an async function that receives a webpack config and eventually returns a webpack config. diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index 4a24f52b07e6..8244b58c92c0 100644 --- a/docs/src/pages/configurations/typescript-config/index.md +++ b/docs/src/pages/configurations/typescript-config/index.md @@ -3,6 +3,8 @@ id: 'typescript-config' title: 'TypeScript Config' --- +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + This is a central reference for using Storybook with TypeScript. ## Typescript configuration presets diff --git a/docs/src/pages/presets/introduction/index.md b/docs/src/pages/presets/introduction/index.md index ac0a638cecd2..f32f1514ad8f 100644 --- a/docs/src/pages/presets/introduction/index.md +++ b/docs/src/pages/presets/introduction/index.md @@ -3,6 +3,8 @@ id: 'introduction' title: 'Intro to Presets' --- +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook **presets** are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases. For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../../configurations/typescript-config/) with individual [babel](../../configurations/custom-babel-config/) and [webpack](../../configurations/custom-webpack-config/) configs, you can use the `@storybook/preset-typescript` package, which does the heavy lifting for you. diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md index 964fd7a68d82..a3ee46da2dc1 100644 --- a/docs/src/pages/presets/writing-presets/index.md +++ b/docs/src/pages/presets/writing-presets/index.md @@ -3,6 +3,8 @@ id: 'writing-presets' title: 'Writing Presets' --- +> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + [Storybook presets](../introduction/) are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases in Storybook, such as typescript or MDX support. This doc covers the [presets API](#presets-api) and how to use the presets mechanism for [advanced configuration](#advanced-configuration). From 10a30f28ecc1e9c2213973dab07abaaaf1dcb606 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 23 Jan 2020 21:36:07 +0100 Subject: [PATCH 4/6] FIX spelling mistakes --- addons/docs/README.md | 2 +- addons/docs/angular/README.md | 2 +- addons/docs/ember/README.md | 2 +- addons/docs/react/README.md | 2 +- addons/docs/vue/README.md | 2 +- docs/src/pages/addons/using-addons/index.md | 2 +- docs/src/pages/addons/writing-addons/index.md | 2 +- .../src/pages/basics/writing-stories/index.md | 2 +- .../custom-webpack-config/index.md | 2 +- .../pages/configurations/overview/index.md | 29 +++++++++++++++---- .../configurations/typescript-config/index.md | 2 +- docs/src/pages/presets/introduction/index.md | 2 +- .../pages/presets/writing-presets/index.md | 2 +- 13 files changed, 36 insertions(+), 17 deletions(-) diff --git a/addons/docs/README.md b/addons/docs/README.md index 5af282d46f04..6ffea0d168de 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -4,7 +4,7 @@ # Storybook Docs -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. Storybook Docs transforms your Storybook stories into world-class component documentation. diff --git a/addons/docs/angular/README.md b/addons/docs/angular/README.md index c682e4a3c95b..5783d26dfcaa 100644 --- a/addons/docs/angular/README.md +++ b/addons/docs/angular/README.md @@ -4,7 +4,7 @@ # Storybook Docs for Angular -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Angular supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. diff --git a/addons/docs/ember/README.md b/addons/docs/ember/README.md index c4a167fdf894..cd5392408e11 100644 --- a/addons/docs/ember/README.md +++ b/addons/docs/ember/README.md @@ -1,6 +1,6 @@ # Storybook Docs for Ember -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. diff --git a/addons/docs/react/README.md b/addons/docs/react/README.md index b70b93aff654..55d74e526abf 100644 --- a/addons/docs/react/README.md +++ b/addons/docs/react/README.md @@ -4,7 +4,7 @@ # Storybook Docs for React -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. diff --git a/addons/docs/vue/README.md b/addons/docs/vue/README.md index 86dc7427aadd..0f32ae341df9 100644 --- a/addons/docs/vue/README.md +++ b/addons/docs/vue/README.md @@ -4,7 +4,7 @@ # Storybook Docs for Vue -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Vue supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md index b70cedb5ba89..8868fbdeb00b 100644 --- a/docs/src/pages/addons/using-addons/index.md +++ b/docs/src/pages/addons/using-addons/index.md @@ -3,7 +3,7 @@ id: 'using-addons' title: 'Using Addons' --- -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions) and [links](https://github.com/storybookjs/storybook/tree/master/addons/links). But you can use any third party addons distributed via NPM. diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md index 6315e350a314..85c4fedc0c71 100644 --- a/docs/src/pages/addons/writing-addons/index.md +++ b/docs/src/pages/addons/writing-addons/index.md @@ -3,7 +3,7 @@ id: 'writing-addons' title: 'Writing Addons' --- -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. This is a complete guide on how to create addons for Storybook. diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md index 0718707b33c6..f1387f7dd4df 100644 --- a/docs/src/pages/basics/writing-stories/index.md +++ b/docs/src/pages/basics/writing-stories/index.md @@ -3,7 +3,7 @@ id: 'writing-stories' title: 'Writing Stories' --- -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. A Storybook is a collection of stories. Each story represents a single visual state of a component. diff --git a/docs/src/pages/configurations/custom-webpack-config/index.md b/docs/src/pages/configurations/custom-webpack-config/index.md index c41a1f734e62..e1f61d272aba 100644 --- a/docs/src/pages/configurations/custom-webpack-config/index.md +++ b/docs/src/pages/configurations/custom-webpack-config/index.md @@ -3,7 +3,7 @@ id: 'custom-webpack-config' title: 'Custom Webpack Config' --- -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. You can customize Storybook's webpack setup by providing a `webpack` field in `main.js` file. The value should be an async function that receives a webpack config and eventually returns a webpack config. diff --git a/docs/src/pages/configurations/overview/index.md b/docs/src/pages/configurations/overview/index.md index 84f68cbdd23f..d30de7d38362 100644 --- a/docs/src/pages/configurations/overview/index.md +++ b/docs/src/pages/configurations/overview/index.md @@ -6,7 +6,7 @@ title: 'Configuration overview' For CLI options see: [here](/docs/cli-options). -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. ## main configuration @@ -39,8 +39,26 @@ There are 2 extra config files, for doing some special runtime configs for each In `preview.js` you can add global [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters): +```js +// preview.js +import { addDecorator } from '@storybook/svelte'; +import { withA11y } from '@storybook/addon-a11y'; + +addDecorator(withA11y); +``` + In `manager.js` you can add [UI options](/docs/configurations/options-parameter/#global-options). +```js +// manager.js +import { themes } from '@storybook/theming/create'; +import { addons } from '@storybook/addons'; + +addons.setConfig({ + theme: themes.dark, +}); +``` + ## entire main.js config The `main.js` file is actually a preset! so if you know how to configure storybook, you know how to write a preset, and vice-versa! @@ -55,8 +73,9 @@ module.exports = { // an array of addons & presets addons: ['@storybook/addon-essentials'], - - // customize the webpack config for the preview application - webpackFinal: async (config) => { return config }, }; -``` \ No newline at end of file +``` + +## webpack + +For how to customize webpack, [view the customize webpack section](/docs/configurations/custom-webpack-config/) \ No newline at end of file diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index 8244b58c92c0..3218204d355d 100644 --- a/docs/src/pages/configurations/typescript-config/index.md +++ b/docs/src/pages/configurations/typescript-config/index.md @@ -3,7 +3,7 @@ id: 'typescript-config' title: 'TypeScript Config' --- -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. This is a central reference for using Storybook with TypeScript. diff --git a/docs/src/pages/presets/introduction/index.md b/docs/src/pages/presets/introduction/index.md index f32f1514ad8f..32a791974905 100644 --- a/docs/src/pages/presets/introduction/index.md +++ b/docs/src/pages/presets/introduction/index.md @@ -3,7 +3,7 @@ id: 'introduction' title: 'Intro to Presets' --- -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. Storybook **presets** are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases. diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md index a3ee46da2dc1..fe934ee5b702 100644 --- a/docs/src/pages/presets/writing-presets/index.md +++ b/docs/src/pages/presets/writing-presets/index.md @@ -3,7 +3,7 @@ id: 'writing-presets' title: 'Writing Presets' --- -> migration guide: This page document the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. [Storybook presets](../introduction/) are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases in Storybook, such as typescript or MDX support. From 332ff1a60bfbbdc77809cda7c1987d6949cf37c3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 25 Jan 2020 12:16:23 +0100 Subject: [PATCH 5/6] IMPROVE the section about presets-api addons --- .../pages/presets/writing-presets/index.md | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md index fe934ee5b702..10b903e82d17 100644 --- a/docs/src/pages/presets/writing-presets/index.md +++ b/docs/src/pages/presets/writing-presets/index.md @@ -101,6 +101,31 @@ module.exports = { }; ``` +### Addons + +For users, the name `managerEntries` might be a bit too technical, so instead both users and preset-authors can simply use the property: `addons`: + +```js +module.exports = { + addons: ['@storybook/addon-storysource/register'], +}; +``` + +The array of values can support both references to other presets and addons that should be included into the manager. + +This was decided so users didn't have to learn more concepts and the minor differences. Storybook will detect whether the module references a preset or an managerEntry and will do the appropriate thing. + +Here's what it looks when combining presets and managerEntries in the addons property: + +```js +module.exports = { + addons: [ + '@storybook/addon-storysource/register', // a managerEntry + '@storybook/addon-docs/preset', // a preset + ], +}; +``` + ### Entries Entries are the place to register entry points for the preview. For example it could be used to make a basic configure-storybook preset that loads all the `*.stories.js` files into SB, instead of forcing people to copy-paste the same thing everywhere. @@ -130,7 +155,6 @@ module.exports = { babel: async (config, options) => { return config; }, - addons: [], }; ``` @@ -142,7 +166,7 @@ Change your `main.js` file to: const path = require('path'); module.exports = { - presets: [path.resolve('./.storybook/my-preset')], + addons: [path.resolve('./.storybook/my-preset')], }; ``` @@ -164,7 +188,6 @@ module.exports = { babel: async (config, options) => { return config; }, - addons: [], }; ``` From 2c150aef49d7966ec1c47e07d2c5a14bc6854d4b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 27 Jan 2020 12:23:20 +0100 Subject: [PATCH 6/6] Update docs/src/pages/presets/writing-presets/index.md Co-Authored-By: Tom Coleman --- docs/src/pages/presets/writing-presets/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md index 10b903e82d17..2005391c667a 100644 --- a/docs/src/pages/presets/writing-presets/index.md +++ b/docs/src/pages/presets/writing-presets/index.md @@ -113,7 +113,9 @@ module.exports = { The array of values can support both references to other presets and addons that should be included into the manager. -This was decided so users didn't have to learn more concepts and the minor differences. Storybook will detect whether the module references a preset or an managerEntry and will do the appropriate thing. +Storybook will automatically detect whether a reference to an addon is a preset or a manager entry by checking if the package contains a `./preset.js` or `./register.js` (manager entry), falling back to preset if it is unsure. + +If this heuristic is incorrect for an addon you are using, you can explicitly opt in to an entry being an a manager entry using the `managerEntries` key. Here's what it looks when combining presets and managerEntries in the addons property: