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

reworded section per feedback

Browse Source
This commit is contained in:
jonniebigodes 2020-07-29 21:55:16 +01:00
parent 667aabdf57
commit 17fb720504
4 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/configure/integration.md
View File

@ -145,7 +145,7 @@ The base Typescript configuration uses [`babel-loader`](https://webpack.js.org/l
Each framework uses the base configuration unless otherwise specified:
- Angular ignores the base and uses `ts-loader` and `ngx-template-loader`.
- Vue ignores the uses `ts-loader` and applies it to both `.tsx` and `.vue` files.
- Vue ignores the base and uses `ts-loader` and applies it to both `.tsx` and `.vue` files.
- React adds `react-docgen-typescript-plugin` to the base.
@ -185,7 +185,7 @@ There are many ways to include CSS in a web application, and correspondingly the
#### CSS-in-JS
CSS-in-JS libraries are designed to use basic JavaScript. They often work in Storybook without any extra configuration. Some libraries expect components to be rendered in a specific rendering “context” (such as to provide themes) and you may need to add a [global decorator](../writing-stories/decorators#global-decorators) to supply it.
CSS-in-JS libraries are designed to use basic JavaScript. They often work in Storybook without any extra configuration. Some libraries expect components to be rendered in a specific rendering “context” (for example, to provide themes) and you may need to add a [global decorator](../writing-stories/decorators#global-decorators) to supply it.
#### Importing CSS files

4
docs/configure/overview.md
View File

@ -29,7 +29,7 @@ The `main.js` configuration file is a [preset](../api/addons#addon-presets) and
### Configure story loading
By default Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js`. By default that matches all files in your project with extension `.stories.js` -- the intention is you would colocate those files with the component they document.
By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.js`. The intention is you colocate a story file with the component it documents.
```
•
@ -52,7 +52,7 @@ module.exports = {
### 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.
To control the way stories are rendered and add global [decorators](../writing-stories/decorators#global-decorators) and [parameters](..writing-stories/parameters#global-parameters), 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.
The `preview.js` file can be an ES module and export the following keys:

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

@ -7,7 +7,7 @@ In Storybook, your stories render in a special “preview” iframe (Canvas tab)
### 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:
If you need to add extra elements to the `head` of the preview iframe, 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:
```html
<!-- .storybook/preview-head.html -->
@ -19,12 +19,12 @@ If you need to add extra elements to the `head` of the preview, for instance to
<script>try{ Typekit.load(); } catch(e){ }</script>
```
> Storybook will inject these tags to the iframe where your components are rendered. So, these won’t be loaded into the main Storybook UI.
> Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI.
### 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.
Sometimes, you may need to add different tags to the `<body>`. This is useful for adding some custom content roots.
You can accomplish this by creating a file called `preview-body.html` inside your `.storybook` directory and add tags like this:
@ -43,7 +43,5 @@ If using relative sizing in your project (like `rem` or `em`), you may update th
</style>
```
> **Important**
>
> Storybook will inject these tags to the iframe where your components are rendered. So, these won’t be loaded into the main Storybook UI.
> Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI.

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

@ -41,13 +41,13 @@ The following table details how to use the API values:
### Theming
Storybook is theme-able!
Storybook is theme-able using a lightweight theming API.
#### Global theming
It's possible to theme Storybook globally.
We've created two basic themes that look good out of the box: "normal" (a light theme) and "dark" (a dark theme). Unless you've set your preferred color scheme as dark Storybook will use the light theme as default.
Storybook includes two themes that look good out of the box: "normal" (a light theme) and "dark" (a dark theme). Unless you've set your preferred color scheme as dark, Storybook will use the light theme as default.
Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package/@storybook/addons) and [`@storybook/theming`](https://www.npmjs.com/package/@storybook/theming) packages.
@ -164,7 +164,7 @@ addons.setConfig({
});
```
The `@storybook/theming` package is built using TypeScript, so this should help create a valid theme for typescript users. The types are part of the package itself.
The `@storybook/theming` package is built using TypeScript, so this should help create a valid theme for TypeScript users. The types are part of the package itself.
Many theme variables are optional, the `base` property is NOT. This is a perfectly valid theme:
@ -272,9 +272,9 @@ const Component = styled.div`
### Storybook addons
A key strength of Storybook is its extensibility. Storybook aims to be your tool of choice for developing components in the browser no matter what choice of UI framework your team has made. Another way that Storybook can fit your team’s development workflow is through addons that allow you to build better and more robust components.
A key strength of Storybook is its extensibility. Use addons to extend and customize Storybook to fit your team’s development workflow.
Addons have been a part of Storybook since the very beginning and are so integral to the way Storybook works that many of the features described in this documentation are implemented as addons! These addons are installed out of the box with [essentials](../essentials).
Addons are integral to the way Storybook works. Many of Storybook's core features are implemented as addons! These addons are installed out of the box with [essentials](../essentials).
#### Addon features
@ -282,7 +282,7 @@ Addons have been a part of Storybook since the very beginning and are so integra
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.
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.
![Storybook addons locations](./addon-locations.jpg)
@ -294,25 +294,26 @@ Finally, addons can affect the build setup of Storybook by injecting their own w
There are many, many Storybook addons, but they can be roughly categorized into three areas:
- Essential addons are core-team developed addons that are considered core to the out-of-the-box user experience of Storybook and thus ship by default with new Storybook installations.
- Core addons are the addons that are developed by the core team with efforts made to keep them in sync with the development of Storybook itself, and to make sure they are written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons).
- **Essential** addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations.
- **Core** addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons).
- Community addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
### Sidebar & URLs
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:
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:
![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”.
We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js` name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
#### Roots
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:
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:
![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):
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):
```js
// ./storybook/manager.js
@ -382,7 +383,7 @@ console.log(process.env.STORYBOOK_THEME);
console.log(process.env.STORYBOOK_DATA_KEY);
```
You can also access these variables in your custom head/body (see below) using the substitution `%STORYBOOK_X%`, for example: `%STORYBOOK_THEME%` will become `red`.
You can also access these variables in your custom `<head>`/`<body>` (see below) using the substitution `%STORYBOOK_X%`, for example: `%STORYBOOK_THEME%` will become `red`.
> If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`