mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
minor updates to the Essentials introduction
This commit is contained in:
jonniebigodes
parent
64f4093348
commit
ffc2cb4dfc
@ -14,7 +14,7 @@ A major strength of Storybook are [addons](/addons/) that extend Storybook’s U
|
||||
|
||||
### 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:
|
||||
|
||||
@ -26,21 +26,67 @@ npm install -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
|
||||
// .storybook/main.js
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-register-individual-actions-addon.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Configuration
|
||||
|
||||
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.
|
||||
|
||||
@ -64,4 +110,4 @@ For example, if you wanted to disable the [backgrounds addon](./backgrounds.md),
|
||||
|
||||
💡 You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`, `measure`, `outline`.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,7 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
@ -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',
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -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'],
|
||||
};
|
||||
```
|
||||
Loading…
x
Reference in New Issue
Block a user