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

Small adjustments to the documentation

Browse Source
This commit is contained in:
jonniebigodes 2021-03-02 19:25:48 +00:00
parent 4d50e9a8ee
commit c83e7fde01
4 changed files with 58 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/api/cli-options.md
View File

@ -30,6 +30,11 @@ Usage: start-storybook [options]
| --no-dll | Do not use dll reference (no-op) | `start-storybook --no-dll` |
| --debug-webpack | Display final webpack configurations for debugging purposes | `start-storybook --debug-webpack` |
| --docs | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) | `start-storybook --docs` |
| --no-manager-cache | Disables Storybook's manager caching mechanism. See note below. | `start-storybook --no-manager-cache` |
<div class="aside">
💡 <strong>NOTE</strong>: Use the <code>--no-manager-cache</code> flag with caution. As it disables the internal caching mechanism and can severely impact your Storybook's loading time.
</div>
## build-storybook
@ -60,3 +65,7 @@ Usage: build-storybook [options]
| --no-dll | Do not use dll reference (no-op) | `build-storybook --no-dll` |
| --debug-webpack | Display final webpack configurations for debugging purposes | `build-storybook --debug-webpack` |
| --docs | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs` |
<div class="aside">
💡 <strong>NOTE</strong>: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
</div>

33
docs/configure/images-and-assets.md
View File

@ -31,9 +31,19 @@ Configure a directory (or a list of directories) where your assets live when sta
```json
{
"scripts": {
"start-storybook": "start-storybook -s ./public -p 9001"
}
"scripts": {
"start-storybook": "start-storybook -s ./public -p 9001"
}
}
```
Or when building your Storybook with `build-storybook`:
```json
{
"scripts": {
"build-storybook": "build-storybook -s public"
}
}
```
@ -55,9 +65,18 @@ You can also pass a list of directories separated by commas without spaces inste
```json
{
"scripts": {
"start-storybook": "start-storybook -s ./public,./static -p 9001"
}
"scripts": {
"start-storybook": "start-storybook -s ./public,./static -p 9001"
}
}
```
The same can be applied when you're building your Storybook.
```json
{
"scripts": {
"build-storybook": "build-storybook -s ./public,./static -p 9001"
}
}
```
@ -85,4 +104,4 @@ In this case, you need to have all your images and media files with relative pat
If you load static content via importing, this is automatic and you do not have to do anything.
If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.
If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.

15
docs/configure/theming.md
View File

@ -98,9 +98,16 @@ Finally we'll need to import the theme into Storybook. Create a new file called
<!-- prettier-ignore-end -->
<div class="aside">
If the theme is not shown when Storybook starts, update your <code>storybook</code> scripts to include the <code>--no-manager-cache</code> flag.
</div>
Adjust your `storybook` script in your package.json and include the [`--no-manager-cache`](../api/cli-options.md#start-storybook) flag. For instance:
```json
{
"scripts":{
"storybook": "start-storybook -p 6006 --no-manager-cache",
},
}
```
Now your custom theme will replace Storybook's default theme and you'll see a similar set of changes in the UI.
@ -232,4 +239,4 @@ Or with template literals:
]}
/>
<!-- prettier-ignore-end -->
<!-- prettier-ignore-end -->

14
docs/workflows/publish-storybook.md
View File

@ -6,12 +6,22 @@ Storybook is more than a UI component development tool. Teams also publish Story
## Build Storybook as a static web application
First, we’ll need to build Storybook as a static web application using `build-storybook`, a command that’s installed by default.
First, we’ll need to build Storybook as a static web application using `build-storybook`, a command that’s installed by default. If you're using Yarn run the following command:
```shell
yarn build-storybook -o ./path/to/build
```
If you're using npm run the following command:
```shell
npm run build-storybook -- -o ./path/to/build
```
<div class="aside">
💡 <strong>Note</strong>: Be careful when running the <code>build-storybook</code> in with the <code>-o</code> flag as you might unknowingly overwrite essential files and folders. For instance <strong>avoid</strong> running <code>build-storybook -o ./</code> as this will replace the root project contents with the output of the command.
</div>
Storybook will create a static web application at the path you specify. This can be served by any web server. Try it out locally by running:
```shell
@ -67,4 +77,4 @@ Storybook allows you to browse components from any [Storybook published online](
Toggle between multiple versions of Storybook to see how components change between versions. This is useful for design system package authors who maintain many versions at once.
**Requires** a [CHP level 1](./package-composition.md#chp-level-1) server (such as [chromatic.com](https://www.chromatic.com/)),
**Requires** a [CHP level 1](./package-composition.md#chp-level-1) server (such as [chromatic.com](https://www.chromatic.com/)),