2020-08-12 15:37:25 +10:00

60 lines
1.6 KiB
Markdown

<h1>Storybook Storysource Addon</h1>
This addon is used to show stories source in the addon panel.
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
![Storysource Demo](./docs/demo.gif)
- [Getting Started](#getting-started)
- [Install using preset](#install-using-preset)
- [Theming](#theming)
## Getting Started
First, install the addon
```sh
yarn add @storybook/addon-storysource --dev
```
You can add configuration for this addon by using a preset or by using the addon config with webpack
### Install using preset
Add the following to your `.storybook/main.js` exports:
```js
module.exports = {
addons: ['@storybook/addon-storysource'],
};
```
You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.:
```js
module.exports = {
addons: [
{
name: '@storybook/addon-storysource',
options: {
rule: {
// test: [/\.stories\.jsx?$/], This is default
include: [path.resolve(__dirname, '../src')], // You can specify directories
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
],
};
```
To customize the `source-loader`, pass `loaderOoptions`. Valid configurations are documented in the [`source-loader` README](../../lib/source-loader/README.md#options).
## Theming
Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/react/configure/theming) for more information.
![Storysource Light/Dark Themes](./docs/theming-light-dark.png)