GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-19 05:02:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

added assets and minor tweaks

Browse Source
This commit is contained in:
jonniebigodes 2020-07-28 21:48:15 +01:00
parent 6cca0fa4c1
commit 667aabdf57
6 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/configure/addon-locations.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

14
docs/configure/overview.md
View File

@ -20,9 +20,9 @@ module.exports = {
}
```
The `main.js` configuration file is a [preset](../presets/introduction) and as such has a powerful interface, but the key fields within it are:
The `main.js` configuration file is a [preset](../api/addons#addon-presets) and as such has a powerful interface, but the key fields within it are:
- `stories` - a glob that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
- `stories` - a array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
- `addons` - a list of the [addons](/addons) you are using.
- `webpackFinal` - custom [webpack configuration](./integration#extending-storybooks-webpack-config).
- `babel` - custom [babel configuration](./integration#babel).
@ -40,6 +40,16 @@ By default Storybook will load stories from your project based on a glob (patter
If you want to use a different naming convention, you can alter the glob, using the syntax supported by [micromatch](https://github.com/micromatch/micromatch#extended-globbing).
For example if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
```js
// .storybook/main.js
module.exports = {
stories: ['../my-project/src/components/*.@(js|md)'],
};
```
### Configure story rendering
To control the way stories are rendered and add global [decorators](../writing-stories/decorators#global-decorators) and [parameters](..writing-stories/parameters#global-parameters), you can create a `.storybook/preview.js` file. This is loaded in the Canvas tab, the “preview” iframe that renders your components in isolation. Use `preview.js` for global code (such as [CSS imports](../get-started/setup#render-component-styles) or JavaScript mocks) that applies to all stories.

BIN
docs/configure/sidebar-anatomy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/configure/sidebar-roots.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

4
docs/configure/story-rendering.md
View File

@ -5,7 +5,7 @@ title: 'Story rendering'
In Storybook, your stories render in a special “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./integration#default-configuration) config, but you also may want to directly control the HTML that is rendered to help your stories render correctly.
### Adding to <head>
### Adding to head html element
If you need to add extra elements to the `head` of the preview, for instance to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview#configure-story-rendering) and add tags like this:
@ -22,7 +22,7 @@ If you need to add extra elements to the `head` of the preview, for instance to
> Storybook will inject these tags to the iframe where your components are rendered. So, these won’t be loaded into the main Storybook UI.
### Adding to <body>
### Adding to body html element
Sometimes, you may need to add different tags to the HTML body. This is useful for adding some custom content roots.

16
docs/configure/user-interface.md
View File

@ -278,11 +278,13 @@ Addons have been a part of Storybook since the very beginning and are so integra
#### Addon features
<div>
todo:vet links here
</div>
The most obvious thing addons affect in Storybook is the UI of Storybook itself. Within the UI the [toolbar]() and [addons panel]() are the two chief places addons will appear.
<div style="background-color:#F8FAFC">
TODO: add image mentioned in the SB 6.0 needs to be further vetted
</div>
![Storybook addons locations](./addon-locations.jpg)
Addons can also hook into the rendering of your story in the preview pane via injecting their own [decorators](../writing-stories/decorators).
@ -300,9 +302,7 @@ There are many, many Storybook addons, but they can be roughly categorized into
Storybook’s sidebar lists all your stories grouped by component. When you have a lot of components you may wish to also group those components also. To do so, you can add the “/” separator to the “title” of your CSF file and Storybook will group the stories into groups based on common prefixes:
<div style="background-color:#F8FAFC">
TODO: add image mentioned in the SB 6.0 needs to be further vetted
</div>
![Storybook sidebar anatomy](./sidebar-anatomy.jpg)
Usually it is a good idea to use a nesting scheme that mirrors the filesystem path of the components. So if you have a file `components/modals/Alert.js` you might name the CSF file `components/modals/Alert.stories.js` and title it “Components/Modals/Alert”.
@ -310,9 +310,7 @@ Usually it is a good idea to use a nesting scheme that mirrors the filesystem pa
By default Storybook will treat your highest level of groups as “roots”--which are displayed in the UI as “sections” of the hierarchy. Lower level groups are displayed as expandable items in the hierarchy:
<div style="background-color:#F8FAFC">
TODO: add image mentioned in the SB 6.0 needs to be further vetted
</div>
![Storybook sidebar story roots](./sidebar-roots.jpg)
If you’d prefer all groups to be expandable, you can set the showRoots option to false in [`./storybook/manager.js`](./overview#configure-story-rendering):