1 | <h1>Storybook Storysource Addon</h1>
|
2 |
|
3 | This addon is used to show stories source in the addon panel.
|
4 |
|
5 | [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
6 |
|
7 | ![Storysource Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/addons/storysource/docs/demo.gif)
|
8 |
|
9 | - [Getting Started](#getting-started)
|
10 | - [Install using preset](#install-using-preset)
|
11 | - [Theming](#theming)
|
12 | - [Displaying full source](#displaying-full-source)
|
13 |
|
14 | ## Getting Started
|
15 |
|
16 | First, install the addon
|
17 |
|
18 | ```sh
|
19 | yarn add @storybook/addon-storysource --dev
|
20 | ```
|
21 |
|
22 | You can add configuration for this addon by using a preset or by using the addon config with webpack
|
23 |
|
24 | ### Install using preset
|
25 |
|
26 | Add the following to your `.storybook/main.js` exports:
|
27 |
|
28 | ```js
|
29 | module.exports = {
|
30 | addons: ['@storybook/addon-storysource'],
|
31 | };
|
32 | ```
|
33 |
|
34 | You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.:
|
35 |
|
36 | ```js
|
37 | module.exports = {
|
38 | addons: [
|
39 | {
|
40 | name: '@storybook/addon-storysource',
|
41 | options: {
|
42 | rule: {
|
43 | // test: [/\.stories\.jsx?$/], This is default
|
44 | include: [path.resolve(__dirname, '../src')], // You can specify directories
|
45 | },
|
46 | loaderOptions: {
|
47 | prettierConfig: { printWidth: 80, singleQuote: false },
|
48 | },
|
49 | },
|
50 | },
|
51 | ],
|
52 | };
|
53 | ```
|
54 |
|
55 | To customize the `source-loader`, pass `loaderOptions`. Valid configurations are documented in the [`source-loader` README](https://github.com/storybookjs/storybook/tree/main/lib/source-loader/README.md#options).
|
56 |
|
57 | ## Theming
|
58 |
|
59 | 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.
|
60 |
|
61 | ![Storysource Light/Dark Themes](https://raw.githubusercontent.com/storybookjs/storybook/next/addons/storysource/docs/theming-light-dark.png)
|
62 |
|
63 | ## Displaying full source
|
64 |
|
65 | Storybook 6.0 introduced an unintentional change to `source-loader`, in which only the source of the selected story is shown in the addon. To restore the old behavior, pass the`injectStoryParameters: false` option.
|
66 |
|
67 | If you're using `addon-docs`:
|
68 |
|
69 | ```js
|
70 | module.exports = {
|
71 | addons: [
|
72 | {
|
73 | name: '@storybook/addon-docs',
|
74 | options: {
|
75 | sourceLoaderOptions: {
|
76 | injectStoryParameters: false,
|
77 | },
|
78 | },
|
79 | },
|
80 | ],
|
81 | };
|
82 | ```
|
83 |
|
84 | If not:
|
85 |
|
86 | ```js
|
87 | module.exports = {
|
88 | addons: [
|
89 | {
|
90 | name: '@storybook/addon-storysource',
|
91 | options: {
|
92 | loaderOptions: {
|
93 | injectStoryParameters: false,
|
94 | },
|
95 | },
|
96 | },
|
97 | ],
|
98 | };
|
99 | ```
|
100 |
|
101 | This bug will be resolved in a future version of the addon.
|