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

minor updates to the Essentials introduction

Browse Source
This commit is contained in:
jonniebigodes 2022-02-03 21:23:49 +00:00
parent 64f4093348
commit ffc2cb4dfc
4 changed files with 97 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
docs/essentials/introduction.md
View File

@ -14,7 +14,7 @@ A major strength of Storybook are [addons](/addons/) that extend Storybook’s U
### Installation ### Installation
If you ran `sb init` to include Storybook in your project, the Essentials addon (`@storybook/addon-essentials`) is already installed and configured for you. You can skip the rest of this section. If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal: If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
@ -26,21 +26,67 @@ npm install -D @storybook/addon-essentials
yarn add -D @storybook/addon-essentials yarn add -D @storybook/addon-essentials
``` ```
Update your Storybook configuration (in `.storybook/main.js`) to include the Essentials addon. Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
```js <!-- prettier-ignore-start -->
// .storybook/main.js
module.exports = { <CodeSnippets
addons: ['@storybook/addon-essentials'], paths={[
}; 'common/storybook-main-register-individual-actions-addon.js.mdx',
``` ]}
/>
<!-- prettier-ignore-end -->
### Configuration ### Configuration
Essentials is "zero-config”. It comes with a recommended configuration out of the box. Essentials is "zero-config”. It comes with a recommended configuration out of the box.
If you need to reconfigure any of the individual essential addons, install them manually by following its installation instructions and adjusting its configuration to suit your needs. If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
```shell
#With npm
npm install -D @storybook/addon-actions
#With yarn
yarn add -D @storybook/addon-actions
```
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-main-register-individual-actions-addon.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Below is an abridged configuration and table with all the available options for each addon.
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-main-full-individual-essentials-config.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
| Addon | Configuration element | Description |
| ------------------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `@storybook/addon-actions` | N/A | N/A |
| `@storybook/addon-viewport` | N/A | N/A |
| `@storybook/addon-docs` | `configureJSX` | Enables JSX support in MDX for projects that aren't configured to handle the format. <br/> `configureJSX: true` |
| | `babelOptions` | Provides additional Babel configurations for file transpilation. <br/> `babelOptions: { plugins: [], presets: []}` <br/> Extends `configureJSX`. |
| | `sourceLoaderOptions` | Provides additional configuration for Storybook's source loader. <br/> `sourceLoaderOptions: null` . <br/> Required for [`@storybook/addon-storysource`](https://storybook.js.org/addons/@storybook/addon-storysource). |
| | `transcludeMarkdown` | Enables Markdown file support into MDX and render them as components. <br/> `transcludeMarkdown: true` |
| `@storybook/addon-controls` | N/A | N/A |
| `@storybook/addon-backgrounds` | N/A | N/A |
| `@storybook/addon-toolbars` | N/A | N/A |
| `@storybook/addon-measure` | N/A | N/A |
When you start Storybook, your custom configuration will override the default. When you start Storybook, your custom configuration will override the default.

7
docs/snippets/common/storybook-main-default-essentials-register.js.mdx Normal file
View File

@ -0,0 +1,7 @@
```js
// .storybook/main.js
module.exports = {
addons: ['@storybook/addon-essentials'],
};
```

26
docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx Normal file
View File

@ -0,0 +1,26 @@
```js
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-actions',
'@storybook/addon-viewport',
{
name: '@storybook/addon-docs',
options: {
configureJSX: true,
babelOptions: {},
sourceLoaderOptions: null,
transcludeMarkdown: true,
},
},
'@storybook/addon-controls',
'@storybook/addon-backgrounds',
'@storybook/addon-toolbars',
'@storybook/addon-measure',
'@storybook/addon-outline',
],
};
```

8
docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx Normal file
View File

@ -0,0 +1,8 @@
```js
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-actions'],
};
```