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

rewording per feedback

Browse Source
This commit is contained in:
jonniebigodes 2020-07-27 22:09:07 +01:00
parent c39eee0748
commit 05bd3b4124
3 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/configure/integration.md
View File

@ -12,7 +12,7 @@ The value should be an async function that receives a webpack config and eventua
#### Default configuration
By default, Storybooks webpack configuration will allow you to:
By default, Storybook's webpack configuration will allow you to:
- Import Images and other static files
@ -170,16 +170,12 @@ module.exports = {
};
```
<div style="background-color:#F8FAFC">
TODO: vet SEE DOCS link
</div>
|Field |Framework |Description |Type |
|:-------------------------------|:------------:|:---------------------------------------------------------------------------------------:|:--------:|
|**check** |All |optionally run fork-ts-checker-webpack-plugin |boolean |
|**checkOptions** |All |Options to pass to fork-ts-checker-webpack-plugin if it's enabled |See docs |
|**reactDocgen** |React |which variant docgen processor to run `'react-docgen-typescript' |N/A |
|**reactDocgenTypescriptOptions**|React |Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. |See docs |
|**check** |All |optionally run fork-ts-checker-webpack-plugin |boolean |
|**checkOptions** |All |Options to pass to fork-ts-checker-webpack-plugin if it's enabled |[See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) |
|**reactDocgen** |React |which variant docgen processor to run `'react-docgen-typescript' |N/A |
|**reactDocgenTypescriptOptions**|React |Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. |[See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) |
@ -193,10 +189,6 @@ CSS-in-JS libraries are designed to use basic JavaScript. They often work in Sto
#### Importing CSS files
<div style="">
TODO: check note on sb-storybook-6_0_more_feedback.txt for this
</div>
If your component files import their own CSS, Storybook’s webpack config will work unmodified with some exceptions:
- If you are using a CSS precompiler, you may need to add a preset (such as the [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss), or add a loader to Storybook’s Webpack config).
@ -212,7 +204,7 @@ To use your CSS in all stories, you simply import it in [`.storybook/preview.js`
#### Adding webfonts
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](../api/cli-options).
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](#serving-static-files-via-storybook).
### Images and assets

2
docs/configure/overview.md
View File

@ -22,7 +22,7 @@ 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:
- `stories` - a glob that indicates the [location of your story files](locate-story-files), relative to `main.js`.
- `stories` - a glob 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).

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

@ -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:
@ -293,8 +293,8 @@ 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,
- Community addons are addons written by the massive Storybook community. They can be found on our website, GitHub, and npm.
- 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).
- 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
@ -304,7 +304,7 @@ Storybook’s sidebar lists all your stories grouped by component. When you have
TODO: add image mentioned in the SB 6.0 needs to be further vetted
</div>
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 tile it “Components/Modals/Alert”.
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”.
#### Roots