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

Docs: Removed condescending language (#8404)

Browse Source 
Docs: Removed condescending language
This commit is contained in:
Michael Shilman 2019-10-14 11:50:29 +08:00 committed by GitHub
commit 0dc14c33df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 147 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CONTRIBUTING.md
View File

@ -175,7 +175,7 @@ So the way our script works is that it:
Our script leaves the local registry running, for **as long as you keep it running** you can install storybook packages from this local registry.
- Navigate to your own project and then change `package.json` so the storybook packages match the version of the one you just published.
- Then just do the normal install procedure using `yarn` or `npm`
- Then you can install using `yarn` or `npm`
- Start using your storybook as normally.
If you've made a change to storybook's codebase and would want this change to be reflected in your app:
@ -229,7 +229,7 @@ We use the following label scheme to categorize issues:
All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control.
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can see all of the issues for a particular area, and keep the total number of open issues under control.
For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs.
@ -299,7 +299,7 @@ Storybook is broken up into sub-projects that you can install as you need them.
#### Connecting Your App To Storybook
**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by simply linking each addon you want to use.
**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by linking each addon you want to use.
This applies for the kitchen sink apps as well as your own projects.
_Make sure `yarn dev` is running_

20
MIGRATION.md
View File

@ -77,7 +77,7 @@ Addon-storysource contains a loader, `@storybook/addon-storysource/loader`, whic
@storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead.
```
To upgrade to `@storybook/source-loader`, simply `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`.
To upgrade to `@storybook/source-loader`, run `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`.
### Default viewports
@ -139,7 +139,7 @@ Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared
In addition, both packages share more code with the rest of Storybook, which will reduce bugs and increase compatibility (e.g. with the latest versions of babel, etc.).
As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Simply upgrading the library should be enough.
As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Upgrading the library should be enough.
If you wish to run the optional web server, you will need to do the following migration:
@ -284,7 +284,7 @@ In 5.0, we now provide recommended defaults:
This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component.
If you wish to opt-out of this new behavior and restore the flat UI, simply set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:
If you wish to opt-out of this new behavior and restore the flat UI, set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:
```js
addParameters({
@ -655,7 +655,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you
If you are using `create-react-app` (aka CRA), you may need to do some manual steps to upgrade, depending on the setup.
- `create-react-app@1` may require manual migrations.
- If you're adding storybook for the first time, it should just work: `sb init` should add the correct dependencies.
- If you're adding storybook for the first time: `sb init` should add the correct dependencies.
- If you're upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section:
- Upgrade to Babel 7 if you are not dependent on Babel 6-specific features.
- Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features).
@ -674,7 +674,7 @@ yarn add @babel/core babel-loader --dev
yarn add babel-loader@7
```
Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works:
Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's one that works:
```json
{
@ -718,7 +718,7 @@ storiesOf('My component', module)
This example applies notes globally to all stories. You can apply it locally with `storiesOf(...).addDecorator(withNotes)`.
The story parameters correspond directly to the old withX arguments, so it's easy to migrate your code. See the parameters documentation for the packages that have been upgraded:
The story parameters correspond directly to the old withX arguments, so it's less demanding to migrate your code. See the parameters documentation for the packages that have been upgraded:
- [Notes](https://github.com/storybookjs/storybook/blob/master/addons/notes/README.md)
- [Jest](https://github.com/storybookjs/storybook/blob/master/addons/jest/README.md)
@ -748,11 +748,11 @@ This was done to support different major versions of babel.
### Base webpack config now contains vital plugins ([#1775](https://github.com/storybookjs/storybook/pull/1775))
This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement.
This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement.
### Refactored Knobs
Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is easy:
Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is only takes one line of code.
In the case of React or React-Native, import knobs like this:
@ -879,7 +879,7 @@ The new package names are:
| `@kadira/storybook-addon-graphql` | `@storybook/addon-graphql` |
| `@kadira/react-storybook-decorator-centered` | `@storybook/addon-centered` |
If your codebase is small, it's probably doable to just replace them by hand. (in your codebase and in `package.json`).
If your codebase is small, it's probably doable to replace them by hand (in your codebase and in `package.json`).
But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./lib/codemod) for you.
@ -893,7 +893,7 @@ You have to change your `package.json`, prune old and install new dependencies b
We used to ship 2 addons with every single installation of storybook: `actions` and `links`. But in practice not everyone is using them, so we decided to deprecate this and in the future, they will be completely removed. If you use `@storybook/react/addons` you will get a deprecation warning.
If you **are** using these addons, migrating is simple:
If you **are** using these addons, it takes two steps to migrate:
- add the addons you use to your `package.json`.
- update your code:

4
README.md
View File

@ -61,7 +61,7 @@ Storybook runs outside of your app. This allows you to develop UI components in
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/examples/>
Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.
Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile.
## Table of contents
@ -149,7 +149,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
| [links](addons/links/) | Create links between stories |
| [notes](addons/notes/) | Annotate Storybook stories with notes |
| [options](addons/options/) | Customize the Storybook UI in code |
| [storyshots](addons/storyshots/) | Easy snapshot testing for components in Storybook |
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook |
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |

2
RELEASES.md
View File

@ -93,7 +93,7 @@ is to upvote it by adding a "thumbs-up" reaction in Github. This way important
bugs quickly bubble to the top [with a
search](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc%20label%3Abug).
And of course, the best way to make sure a bug gets addressed quickly is to fix
The best way to make sure a bug gets addressed quickly is to fix
it yourself and issue a PR. If the fix is good, we'll try to release it quickly
in a patch release.

4
ROADMAP.md
View File

@ -24,7 +24,7 @@ Doing these will be backwards compatible.
### Responsive + multi-device viewports preview.
If you're smart about it you can already view the preview on multiple devices and windows. It's just an iframe after-all.
If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all.
But story selection and addon-settings are not synced.
We want to make this much much simpler and a core feature of storybook.
@ -41,7 +41,7 @@ We're interested in full customizability of our UI, though addons and options.
### Add a playground addon
Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app.
Storybook has, of course, a very tight connection with your editor, and it has a knobs addon.
Storybook has a very tight connection with your editor, and it has a knobs addon.
But we still see value in an addon that will allow the workflow of a playground.
### See multiple (or all) stories in 1 preview.

8
addons/contexts/README.md
View File

@ -6,7 +6,7 @@
## 💡 Why you need this?
Real world users expects your application being customizable, that is why often your components are **polymorphic**:
they simply need to adapt themselves under different contextual environments. Imagine your components can speak
they need to adapt themselves under different contextual environments. Imagine your components can speak
Chinese, English, or even French, and they change their skin tone under dark or light theme. Yeah, you want to make
sure a component looks great in all scenarios.
@ -25,7 +25,7 @@ once then apply it everywhere**.
1. Define a single global file for managing contextual environments (a.k.a. containers) for all of your stories
declaratively. No more repetitive setups or noisy wrapping, making your stories more focused and readable.
2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can easily slice into
2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can slice into
different environments (e.g. languages or themes ) to understand how your component is going to respond.
3. Library agnostic: no presumption on what kind of components you want to wrap around your stories. You can even
use it to bridge with your favorite routing, state-management solutions, or even your own
@ -65,7 +65,7 @@ import { contexts } from './configs/contexts'; // we will define the contextual
addDecorator(withContexts(contexts));
```
Alternatively, just like other addons, you can use this addon only for a given set of stories:
Alternatively, like other addons, you can use this addon only for a given set of stories:
```js
import { storiesOf } from '@storybook/[framework]';
@ -220,7 +220,7 @@ be shown at first in the toolbar menu in your Storybook.
## 📔 Notes
1. You can use this addon to inject any valid components, that is why `icon` and `params` can be just optional.
1. You can use this addon to inject any valid components, that is why `icon` and `params` can be optional.
2. As mentioned, extra contextual environment setups can be added at the story level. Please make sure they are
passed via the second argument as `{ contexts: [{ /* extra contexts */ }}`.
3. Additional `params` can be "appended" into an existing setup at the story level too (make sure it goes with the

2
addons/docs/README.md
View File

@ -6,7 +6,7 @@
Storybook Docs transforms your Storybook stories into world-class component documentation.
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into simple, easy-to-read pages.
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.

8
addons/docs/docs/docspage.md
View File

@ -114,7 +114,7 @@ For example, here's the source for `Badge`:
```js
/**
* Use `Badge` to highlight key info with a predefined status. Easy peasy!
* Use `Badge` to highlight key info with a predefined status.
*/
export const Badge = ({ status, children }) => { ... }
```
@ -239,9 +239,9 @@ The docs preset assumes this naming convention for its `source-loader` setup. If
## Inline stories vs. Iframe stories
Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but, of course, it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` is the easy part. It's just tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through a simple effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through an effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
```js
import React from 'react';
@ -259,7 +259,7 @@ addParameters({
});
```
With that simple function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
## More resources

2
addons/docs/docs/faq.md
View File

@ -40,7 +40,7 @@ Shows up in the dev tools as follows:
<img src="./media/faq-devtools.png" width="100%" />
</center>
This is just [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so it should be easy to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so there are ways to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
## More resources

6
addons/docs/docs/mdx.md
View File

@ -19,7 +19,7 @@
## Basic example
Let's get started with a simple example that combines markdown with a single story:
Let's get started with an example that combines markdown with a single story:
```md
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
@ -74,7 +74,7 @@ export const allCheckboxes = () => (
);
```
There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user this means your existing Storybook knowledge should easily translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user, this means your existing Storybook knowledge should translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
## Writing stories
@ -182,7 +182,7 @@ If you don't define stories in your MDX, you can write MDX documentation and ass
If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](recipes.md#csf-stories-with-mdx-docs).
To get a "documentation-only story", in your UI, simply define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
<center>
<img src="./media/mdx-documentation-only.png" width="100%" />

12
addons/docs/docs/recipes.md
View File

@ -25,7 +25,7 @@ If you want to intersperse longform documentation in your Storybook, for example
## Mixed CSF / MDX Stories
Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) make it easy.
Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) can help.
The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles.
@ -42,7 +42,7 @@ import { Button } from './Button';
export default {
title: 'Demo/Button',
component: Button,
includeStories: [], // or simply don't load this file at all
includeStories: [], // or don't load this file at all
};
export const basic = () => <Button>Basic</Button>;
@ -66,7 +66,7 @@ I can define a story with the function imported from CSF:
<Story name="basic">{stories.basic}</Story>
And of course I can also embed arbitrary markdown & JSX in this file.
And I can also embed arbitrary markdown & JSX in this file.
<SomeComponent prop1="val1" />
```
@ -94,7 +94,7 @@ I can embed a story (but not define one, since this file should not contain a `M
<Story id="some--id" />
And of course I can also embed arbitrary markdown & JSX in this file.
And I can also embed arbitrary markdown & JSX in this file.
<SomeComponent prop1="val1" />
```
@ -171,9 +171,9 @@ addParameters({
> ⚠️ The `--docs` flag is an experimental feature in Storybook 5.2. The behavior may change in 5.3 outside of the normal semver rules. Be forewarned!
The Storybook UI is a workshop for developing components in isolation. Storybook Docs is a showcase for documenting your components. During component/docs development, it’s useful to see both of these modes side by side. But when you export your static storybook, you might want to just export the docs to reduce clutter.
The Storybook UI is a workshop for developing components in isolation. Storybook Docs is a showcase for documenting your components. During component/docs development, it’s useful to see both of these modes side by side. But when you export your static storybook, you might want to export the docs to reduce clutter.
To address this, we’ve added a CLI flag to export just the docs. This flag is also available in dev mode:
To address this, we’ve added a CLI flag to only export the docs. This flag is also available in dev mode:
```sh
yarn build-storybook --docs

4
addons/docs/docs/theming.md
View File

@ -27,7 +27,7 @@ addParameters({
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all of the Docs components are tagged with class names to make this possible. This is advanced usage: use at your own risk.
The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, simply "inspect element" in your browser.
The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, use "inspect element" in your browser.
You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays:
@ -39,7 +39,7 @@ You can style these classes in `.storybook/preview-head.html`. For example, here
</style>
```
> NOTE: All of these elements also have the `sbdocs` class, which is simply an idiomatic way of increasing the CSS specificity so you don't have to use `!important`.
> NOTE: All of these elements also have the `sbdocs` class, which is an idiomatic way of increasing the CSS specificity so you don't have to use `!important`.
## MDX component overrides

4
addons/jest/README.md
View File

@ -38,7 +38,7 @@ You may want to add it the result file to `.gitignore`, since it's a generated f
But much like lockfiles and snapshots checking-in generated files can have certain advantages as well. It's up to you.
We recommend to **do** check in the test results file so starting storybook from an clean git clone doesn't require running all tests first,
but this can mean you'll experience merge conflicts on this file in the future. (_re-generating this file is super easy though, just like lockfiles and snapshots_)
but this can mean you'll experience merge conflicts on this file in the future. (_re-generating this file is very similar to re-generating lockfiles and snapshots_)
## Generating the test results
@ -96,7 +96,7 @@ storiesOf('MyComponent', module)
);
```
Or in order to avoid importing `.jest-test-results.json` in each story, simply add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on:
Or in order to avoid importing `.jest-test-results.json` in each story, add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on:
```js
import { addDecorator } from '@storybook/react'; // <- or your view layer

6
addons/notes/README.md
View File

@ -35,7 +35,7 @@ import { storiesOf } from '@storybook/react';
import Component from './Component';
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple example of addon notes',
notes: 'An example of addon notes',
});
```
@ -53,7 +53,7 @@ storiesOf('MyButton', module).add(
template: '<my-button>😀 😎 👍 💯</my-button>',
}),
{
notes: 'A very simple example of addon notes',
notes: 'An example of addon notes',
}
);
```
@ -74,7 +74,7 @@ storiesOf('Button', module).add(
}
}),
{
notes: 'A very simple example of addon notes',
notes: 'An example of addon notes',
}
);
```

2
addons/ondevice-notes/README.md
View File

@ -36,7 +36,7 @@ import { storiesOf } from '@storybook/react-native';
import Component from './Component';
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple component',
notes: 'A small component',
});
```

8
addons/storyshots/storyshots-core/README.md
View File

@ -17,7 +17,7 @@ yarn add @storybook/addon-storyshots --dev
```
## Configure your app for Jest
In many cases, for example Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`.
In many cases, for example Create React App, it's already configured for Jest. You need to create a filename with the extension `.test.js`.
If you still need to configure jest you can use the resources mentioned below:
@ -96,7 +96,7 @@ First, install it:
yarn add require-context.macro --dev
```
Now, inside of your Storybook config file, simply import the macro and run it in place of `require.context`, like so:
Now, inside of your Storybook config file, import the macro and run it in place of `require.context`, like so:
```javascript
import requireContext from 'require-context.macro';
@ -587,7 +587,7 @@ Like the default, but allows you to specify a set of options for the renderer, j
### `multiSnapshotWithOptions(options)`
Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, simply pass an empty object.
Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, you can pass an empty object.
If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
```js
// jest.config.js
@ -602,7 +602,7 @@ module.exports = {
#### integrityOptions
This option is useful when running test with `multiSnapshotWithOptions(options)` in order to track snapshots are matching the stories. (disabled by default).
The value is just a [settings](https://github.com/isaacs/node-glob#options) to a `glob` object, that searches for the snapshot files.
The value is a [settings](https://github.com/isaacs/node-glob#options) to a `glob` object, that searches for the snapshot files.
```js
initStoryshots({

2
addons/storyshots/storyshots-core/stories/storyshot.async.test.js
View File

@ -40,7 +40,7 @@ initStoryshots({
done();
}, TIMEOUT);
} else {
// If not async just mark the test as done
// If not async, mark the test as done
done();
}
},

4
addons/storyshots/storyshots-puppeteer/README.md
View File

@ -205,7 +205,7 @@ You can find a working example of this in the [official-storybook](https://githu
You have two options here, you can either:
- Simply add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
- Add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
- Create a custom test file using Jest outside of the CRA scope:
@ -227,7 +227,7 @@ You have two options here, you can either:
### Reminder
An image snapshot is simply a screenshot taken by a web browser (in our case, Chrome).
An image snapshot is a screenshot taken by a web browser (in our case, Chrome).
The browser opens a page (either using the static build of storybook or a running instance of Storybook)

2
addons/viewport/README.md
View File

@ -118,7 +118,7 @@ addParameters({
### Use Custom Set of Devices
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
```js
import { addParameters } from '@storybook/react';

4
app/react-native/docs/manual-setup.md
View File

@ -78,8 +78,8 @@ import StorybookUI from './storybook';
export default StorybookUI;
```
If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed
somewhere in your app. `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your
If you cannot replace your entry point, make sure that the component exported from `./storybook` is displayed
somewhere in your app. `StorybookUI` is a RN `View` component that can be embedded anywhere in your
RN application, e.g. on a tab or within an admin screen.
## Server support

4
app/react-native/readme.md
View File

@ -22,7 +22,7 @@ The next thing you need to do is make Storybook UI visible in your app.
### CRNA, React Native vanilla
The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
The easiest way to use Storybook is to replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
```js
export default from './storybook';
@ -41,7 +41,7 @@ module.exports = __DEV__ ? StorybookUI : App;
### React Native Navigation, other complex use cases
`StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
`StorybookUI` is a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
## Start Storybook server (optional)

2
app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
View File

@ -43,7 +43,7 @@ export default class AbsolutePositionedKeyboardAwareView extends PureComponent<P
keyboardDidShowHandler = (e: KeyboardEvent) => {
if (Platform.OS === 'android') {
const { previewWidth } = this.props;
// There is bug in RN android that keyboardDidShow event is called simply when you go from portrait to landscape.
// There is bug in RN android that keyboardDidShow event is called when you go from portrait to landscape.
// To make sure that this is keyboard event we check screen width
if (previewWidth === e.endCoordinates.width) {
this.keyboardOpen = true;

2
docs/src/new-components/basics/tooltip/Tooltip.stories.js
View File

@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import Tooltip from './Tooltip';
// Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
// Popper would position the tooltip absolutely. We need to make sure we are pos:rel
const mockPopperProps = { style: { position: 'relative', top: '20px', left: '20px' } };
const Content = styled.div`

4
docs/src/pages/addons/addon-gallery/index.md
View File

@ -70,7 +70,7 @@ You need to install these addons directly from NPM in order to use them.
With this addon, you can add docs in markdown format for each story.
It's very useful because most projects and components already have README.md files.
Now it is easy to add them into your Storybook.
Now you can add them into your Storybook.
### [Story-router](https://github.com/gvaldambrini/storybook-router)
@ -93,7 +93,7 @@ Break your stories down into smaller categories (chapters) and subcategories (se
### [Props Combinations](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations)
Given possible values for each prop, renders your component with all combinations of prop values.
Useful for finding edge cases or just seeing all component states at once.
Useful for finding edge cases or seeing all component states at once.
### [Material-UI](https://github.com/sm-react/storybook-addon-material-ui)

6
docs/src/pages/addons/api/index.md
View File

@ -60,11 +60,11 @@ The render function is called with `active` and `key`.
When the panel is in focus in the UI, the `active` will be true.
As you can see, you can set any React Component as the panel. Currently, it's just a text. But you can do anything you want. You should specify the panel title. It could be a plain text.
As you can see, you can set any React Component as the panel. Currently, it's one line of text. But you can do anything you want. You should specify the panel title. It could be a plain text.
## makeDecorator API
The `makeDecorator` API can be used to create decorators in the style of the official addons easily. Use it like so:
The `makeDecorator` API can be used to create decorators in the style of the official addons. Use it like so:
```jsx
import { makeDecorator } from '@storybook/addons';
@ -193,7 +193,7 @@ export const Panel = () => {
}
```
This hook gets you the current story's parameter super easy.
This hook gets you the current story's parameter.
If the parameter isn't set, the default value (second argument) is returned instead.

6
docs/src/pages/addons/using-addons/index.md
View File

@ -3,7 +3,7 @@ id: 'using-addons'
title: 'Using Addons'
---
Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions) and [links](https://github.com/storybookjs/storybook/tree/master/addons/links). But it's easy to use any third party addons distributed via NPM.
Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions) and [links](https://github.com/storybookjs/storybook/tree/master/addons/links). But you can use any third party addons distributed via NPM.
Here's how to do it.
@ -57,7 +57,7 @@ storiesOf('Button', module).add(
</span>
</Button>
),
{ notes: 'A very simple component' }
{ notes: 'A small component' }
);
```
@ -90,7 +90,7 @@ storiesOf('Button', module).add(
## Global Configuration
Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that.
Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that.
```js
import { configure, addParameters } from '@storybook/react';

12
docs/src/pages/addons/writing-addons/index.md
View File

@ -36,7 +36,7 @@ With this, you can write some pretty cool addons. Look at our [Addon gallery](ht
Let's write a simplistic addon for Storybook. We'll add some metadata to the story, which the addon can then use.
### Add simple metadata using parameters
### Add metadata using parameters
We write a story for our addon like this:
@ -131,7 +131,7 @@ Now we need to create two files, `register.js` and `index.js,`. `register.js` wi
Let's add the following content to the `index.js`. It will expose a decorator called `withFoo` which we use the `.addDecorator()` API to decorate all our stories.
The `@storybook/addons` package contains a `makeDecorator` function which we can easily use to create such a decorator:
The `@storybook/addons` package contains a `makeDecorator` function which we can use to create such a decorator:
```js
import React from 'react';
@ -145,7 +145,7 @@ export default makeDecorator({
wrapper: (getStory, context, { parameters }) => {
const channel = addons.getChannel();
// Our simple API above simply sets the notes parameter to a string,
// Our API above sets the notes parameter to a string,
// which we send to the channel
channel.emit('my/customEvent', parameters);
// we can also add subscriptions here using channel.on('eventName', callback);
@ -203,7 +203,7 @@ Using the hook, we'll listen for events and gain access to the `emit` function f
It also listens to another event, called onStory, in the storybook API, which fires when the user selects a story.
Multiple addons can be loaded, but only a single panel can be shown, the render function will receive an `active` prop, which is true if the addon is shown. It is up to you to decide if this mean your component must be unmounted, or just visually hidden. This allows you to keep state but unmount expensive renderings.
Multiple addons can be loaded, but only a single panel can be shown, the render function will receive an `active` prop, which is true if the addon is shown. It is up to you to decide if this mean your component must be unmounted, or visually hidden. This allows you to keep state but unmount expensive renderings.
The `AddonPanel` component will stop rendering of it's children if it's `active`-prop is false.
@ -221,7 +221,7 @@ export const Panel = () => {
}
```
This will store your addon's state into storybook core state, and so when your component gets unmounted & remounted, the state will just be restored.
This will store your addon's state into storybook core state, and so when your component gets unmounted & remounted, the state will be restored.
This is also a great way to sync state between multiple components of the same addon.
@ -295,7 +295,7 @@ You can learn more about the complete API [here](/addons/api).
## Packaging
You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybookjs/storybook/tree/master/addons/notes).
It's possible to package this addon into a NPM module. As an example, have a look at this [package](https://github.com/storybookjs/storybook/tree/master/addons/notes).
In addition to moving the above code to a NPM module, we've set `react` and `@storybook/addons` as peer dependencies.

4
docs/src/pages/basics/exporting-storybook/index.md
View File

@ -10,7 +10,7 @@ Demos of [React Native Web](http://necolas.github.io/react-native-web/storybook/
For that, Storybook comes with a tool to export your storybook into a static web app. Then you can deploy it to GitHub pages or any static hosting service.
Simply add the following NPM script:
Add the following NPM script:
```json
{
@ -35,7 +35,7 @@ npx http-server .out
Additionally, you can deploy Storybook directly into GitHub pages with our [storybook-deployer](https://github.com/storybookjs/storybook-deployer) tool.
Or, you can simply export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information.
Or, you can export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information.
## Deploying to ZEIT Now

2
docs/src/pages/basics/faq/index.md
View File

@ -22,7 +22,7 @@ Next automatically defines `React` for all of your files via a babel plugin. You
### How do I setup Storybook to share Webpack configuration with Next.js?
You can generally reuse webpack rules fairly easily by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/webpack.config.js` files. For example, [this gist](https://gist.github.com/metasean/cadd2becd60cc3b295bf49895a56f9b4) sets both next.js and storybook up with global stylesheets.
You can generally reuse webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/webpack.config.js` files. For example, [this gist](https://gist.github.com/metasean/cadd2becd60cc3b295bf49895a56f9b4) sets both next.js and storybook up with global stylesheets.
### Why is there no addons channel?

6
docs/src/pages/basics/writing-stories/index.md
View File

@ -9,7 +9,7 @@ A Storybook is a collection of stories. Each story represents a single visual st
## Basic story
Here is a simple example of stories for a `Button` component:
Here is an example of stories for a `Button` component:
```js
import React from 'react';
@ -209,9 +209,9 @@ special.story = {
};
```
Decorators are not just for story formatting, they are generally useful for any kind of context needed by a story.
Decorators are not only for story formatting, they are generally useful for any kind of context needed by a story.
- Theming libraries require a theme to be passed in through context. Rather than redefining this in every story, just add a decorator.
- Theming libraries require a theme to be passed in through context. Rather than redefining this in every story, add a decorator.
- Likewise, state management libraries like Redux provide a global data store through context.
- Finally, Storybook [addons](../../addons/introduction) heavily use decorators. For example, the Storybook's [Knobs addon](https://github.com/storybookjs/storybook/tree/next/addons/knobs) uses decorators to modify the input properties of the story based on a UI.

2
docs/src/pages/configurations/add-custom-body/index.md
View File

@ -5,7 +5,7 @@ title: 'Add Custom Body'
Sometimes, you may need to add different tags to the HTML body. This is useful for adding some custom content roots.
You can do this very easily. Simply create a file called `preview-body.html` inside the Storybook config directory and add tags like this:
You can accomplish this by creating a file called `preview-body.html` inside the Storybook config directory and add tags like this:
```html
<div id="custom-root"></div>

2
docs/src/pages/configurations/add-custom-head-tags/index.md
View File

@ -5,7 +5,7 @@ title: 'Add Custom Head Tags'
Sometimes, you may need to add different tags to the HTML head. This is useful for adding web fonts or some external scripts.
You can do this very easily. Simply create a file called `preview-head.html` inside the Storybook config directory and add tags like this:
You can accomplish this by creating a file called `preview-head.html` inside the Storybook config directory and add tags like this:
```html
<script src="https://use.typekit.net/xxxyyy.js"></script>

2
docs/src/pages/configurations/custom-babel-config/index.md
View File

@ -7,7 +7,7 @@ By default, Storybook loads your root `.babelrc` file and load those configurati
But sometimes some of those options may cause Storybook to throw errors.
In that case, you can provide a custom `.babelrc` just for Storybook.
For that, simply create a file called `.babelrc` file inside the Storybook config directory (by default, it's `.storybook`).
For that, create a file called `.babelrc` file inside the Storybook config directory (by default, it's `.storybook`).
Then Storybook will load the Babel configuration only from that file.

6
docs/src/pages/configurations/default-config/index.md
View File

@ -167,7 +167,7 @@ The webpack config [is configurable](/configurations/custom-webpack-config/), an
### CSS Support
You can simply import CSS files wherever you want, whether it's in the storybook config file, a UI component, or inside a story definition file.
You can import CSS files wherever you want, whether it's in the storybook config file, a UI component, or inside a story definition file.
Basically, you can import CSS like this:
@ -189,7 +189,7 @@ import './styles.css';
### Image and Static File Support
You can also import images and media files directly via JavaScript.
This helps you to write stories with media files easily. This is how to do it:
This helps you to write stories with media files. This is how to do it:
```js
import React from 'react';
@ -228,4 +228,4 @@ storiesOf('Component', module)
## NPM Modules
You can use any of the NPM modules installed on your project.
You can simply import and use them.
You can import and use them.

4
docs/src/pages/configurations/serving-static-files/index.md
View File

@ -9,7 +9,7 @@ Storybook provides two ways to do that.
## 1. Via Imports
You can import any media assets by simply importing (or requiring) them as shown below.
You can import any media assets by importing (or requiring) them as shown below.
```js
import React from 'react';
@ -71,7 +71,7 @@ storiesOf('<img />', module)
## 3. Via a CDN
Upload your files to an online CDN and just reference them.
Upload your files to an online CDN and reference them.
In this example we're using a placeholder image service.
```js

6
docs/src/pages/configurations/theming/index.md
View File

@ -3,15 +3,15 @@ id: 'theming'
title: 'Theming Storybook'
---
Storybook is theme-able! Just set a `theme` in the [options parameter](../options-parameter)!
Storybook is theme-able! Set a `theme` in the [options parameter](../options-parameter)!
## Global theming
It's really easy to theme Storybook globally.
It's possible to theme Storybook globally.
We've created two basic themes that look good 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.
As the simplest example, you can tell Storybook to use the "dark" theme by modifying `.storybook/config.js`:
As an example, you can tell Storybook to use the "dark" theme by modifying `.storybook/config.js`:
```js
import { addParameters } from '@storybook/react';

4
docs/src/pages/configurations/typescript-config/index.md
View File

@ -16,7 +16,7 @@ yarn add -D @storybook/addon-info react-docgen-typescript-loader # optional but
yarn add -D jest "@types/jest" ts-jest #testing
```
We have had the best experience using `awesome-typescript-loader`, but other tutorials may use `ts-loader`, just configure accordingly. You can even use `babel-loader` with a `ts-loader` configuration.
We have had the best experience using `awesome-typescript-loader`, but other tutorials may use `ts-loader`, so be sure to configure accordingly. You can even use `babel-loader` with a `ts-loader` configuration.
### Setting up TypeScript to work with Storybook
@ -75,7 +75,7 @@ The above example shows a working Webpack config with the [TSDocgen plugin](http
}
```
This is for the default configuration where `/stories` is a peer of `src`. If you have them all in just `src` you may wish to replace `"rootDirs": ["src", "stories"]` above with `"rootDir": "src",`.
This is for the default configuration where `/stories` is a peer of `src`. If you have them all in `src`, you may wish to replace `"rootDirs": ["src", "stories"]` above with `"rootDir": "src",`.
## Setting up TypeScript with babel-loader

2
docs/src/pages/formats/component-story-format/index.md
View File

@ -65,7 +65,7 @@ it('should format CSF exports with sensible defaults', () => {
});
```
When you want to change the name of your story, just rename the CSF export. This will change the name of the story and also change the Story's ID / URL.
When you want to change the name of your story, rename the CSF export. This will change the name of the story and also change the Story's ID / URL.
You should use the `story.name` option in the following cases:

8
docs/src/pages/guides/guide-ember/index.md
View File

@ -23,7 +23,7 @@ In this guide, we will set up Storybook for your Ember project.
## Add @storybook/ember
First of all, you need to add `@storybook/ember` to your project. To do that, simply run:
First of all, you need to add `@storybook/ember` to your project. To do that, run:
```sh
ember install @storybook/ember-cli-storybook
@ -57,9 +57,9 @@ Your environment will be preconfigured using `ember-cli-storybook`. This will ad
Storybook can be configured in several different ways.
That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory.
For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories.
For the basic Storybook configuration file, you don't need to do much, but tell Storybook where to find stories.
To do that, simply create a file at `.storybook/config.js` with the following content:
To do that, create a file at `.storybook/config.js` with the following content:
```js
import { configure } from '@storybook/ember';
@ -146,7 +146,7 @@ A story is either:
## Run your Storybook
Now everything is ready. Simply run your storybook with:
Now everything is ready. Run your storybook with:
```sh
npm run storybook

6
docs/src/pages/guides/guide-react-native/index.md
View File

@ -18,7 +18,7 @@ npx -p @storybook/cli sb init --type react_native
**1. Add `@storybook/react-native` to your project.**
To use React Native Storybook you need to have it as a dependency in your project. To do that, simply run:
To use React Native Storybook you need to have it as a dependency in your project. To do that, run:
```sh
npm i --save-dev @storybook/react-native
@ -78,7 +78,7 @@ The easiest solution is to replace your app entry with:
export default from './storybook';
```
If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed somewhere in your app. `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
If you cannot replace your entry point, make sure that the component exported from `./storybook` is displayed somewhere in your app. `StorybookUI` is a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
---
@ -171,7 +171,7 @@ Because on device addons are inside the app, they are also rerendered on every c
Storybook RN server, `@storybook/react-native-server` is a separate package that provides a standalone server that the Storybook ondevice client can connect to.
Running storybook server gives a few advantages over simply running on-device:
Running storybook server gives a few advantages over running on-device:
**Websockets connection.** By using websockets connection you can create your own tools that integrate with your storybook app and control it from outside of your app.

2
docs/src/pages/guides/guide-riot/index.md
View File

@ -88,7 +88,7 @@ Now create a `../src/index.stories.js` file, and write your first story like thi
import { tag, mount } from '@storybook/riot';
import SimpleTestRaw from './SimpleTest.txt'; //can be loaded as string if you prefer
import './AnotherTest.tag';
//if you need to import .tag files as text, just use the raw-loader instead of the riot-tag-loader
//if you need to import .tag files as text, use the raw-loader instead of the riot-tag-loader
export default { title: 'My Component' };

6
docs/src/pages/guides/guide-svelte/index.md
View File

@ -87,9 +87,9 @@ export const withEmoji = () => ({
```
Svelte storybooks don't support using templates in a story yet.
Instead, you can create a `.svelte` file to compose components together, or simply to access all normal Svelte functionality, like slots.
Instead, you can create a `.svelte` file to compose components together, or to access all normal Svelte functionality, like slots.
So you can create a story "view" file, essentially just a .svelte file to load your components into to test.
So you can create a story "view" file, which is essentially a .svelte file to load your components into to test.
```html
<!-- MyButtonView -->
@ -98,7 +98,7 @@ So you can create a story "view" file, essentially just a .svelte file to load y
</Button>
```
In this example, the `on:click` that is heard on the `MyButton` component is simply passed up to the containing component `MyButtonView` using the svelte shorthand.
In this example, the `on:click` that is heard on the `MyButton` component is passed up to the containing component `MyButtonView` using the svelte shorthand.
It's the equivalent to `on:click="fire('click', event)"`, but it's worth knowing about especially in this "component wrapper" scenario.
> If your component doesn't use slots, you don't need to do this, but if it does or some other svelte functionality that requires the component to exist in a svelte view, then this is how to do that.

4
docs/src/pages/presets/introduction/index.md
View File

@ -5,11 +5,11 @@ title: 'Intro to Presets'
Storybook **presets** are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases.
For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../../configurations/typescript-config/) with individual [babel](../../configurations/custom-babel-config/) and [webpack](../../configurations/custom-webpack-config/) configs, you can simply use the `@storybook/preset-typescript` package, which does the heavy lifting for you.
For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../../configurations/typescript-config/) with individual [babel](../../configurations/custom-babel-config/) and [webpack](../../configurations/custom-webpack-config/) configs, you can use the `@storybook/preset-typescript` package, which does the heavy lifting for you.
## Basic usage
Each preset has its own installation instructions, but the idea of presets is to simply install the preset and then load it.
Each preset has its own installation instructions, but the idea of presets is to install the preset and then load it.
For example, to get typescript support, first install the preset:

2
docs/src/pages/presets/writing-presets/index.md
View File

@ -81,7 +81,7 @@ export function webpackFinal(config, { configDir }) {
### Addons
The addon config `addons` allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to simply install the preset, and it will take care of everything.
The addon config `addons` allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to install the preset, and it will take care of everything.
For example, the Storysource preset contains the following code:

6
docs/src/pages/testing/automated-visual-testing/index.md
View File

@ -3,7 +3,7 @@ id: 'automated-visual-testing'
title: 'Automated Visual Testing'
---
Automated Visual Testing is a quality assurance process meant to automatically verify that a UI visually appears as intended. There are many alternative names for this process, such as Visual Regression Testing, Visual Validation Testing, Visual UI Testing, or just simply Visual Testing, but in all cases we're talking about confirming the thing your users will see—the actual pixels—without caring about how it's generated.
Automated Visual Testing is a quality assurance process meant to automatically verify that a UI visually appears as intended. There are many alternative names for this process, such as Visual Regression Testing, Visual Validation Testing, Visual UI Testing, or Visual Testing, but in all cases we're talking about confirming the thing your users will see—the actual pixels—without caring about how it's generated.
## Benefits
@ -13,14 +13,14 @@ Another potential benefit is with cross-browser testing. If you perform your vis
## Challenges
The biggest challenge with Automated Visual Testing is that humans and machines perceive pixels differently. Two screenshots of a UI could appear entirely identical to a human but 100% different to a simple 1:1, naive diffing algorithm.
The biggest challenge with Automated Visual Testing is that humans and machines perceive pixels differently. Two screenshots of a UI could appear entirely identical to a human but 100% different to a 1:1, naive diffing algorithm.
For example, changes in [anti-aliasing](https://en.wikipedia.org/wiki/Spatial_anti-aliasing) are common, even if human eyes don't notice them.
![Menu before and after differences](../static/image-diff-1.png)
![Close-up of menu before and after differences](../static/image-diff-2.png)
Even though we didn't change any CSS and the menus appear visually the same to our eyes, if we just compare their pixels 1:1 we find that lots of it has changed! This can happen between browser versions, underlying hardware changes on your cloud platform, and more.
Even though we didn't change any CSS and the menus appear visually the same to our eyes, if we compare their pixels 1:1 we find that lots of it has changed! This can happen between browser versions, underlying hardware changes on your cloud platform, and more.
Similar situations happen all the time, such as how images, drop shadows, etc are rendered.

4
docs/src/pages/testing/react-ui-testing/index.md
View File

@ -48,7 +48,7 @@ Let's again use the above login component as an example. It should do these thin
- When we click the submit button, it should give us the username and password.
- When we click the "Forgotten Account" link, it should redirect to a new page.
We have few ways to do this type of testing with React. The simple way is to use [Enzyme](https://github.com/airbnb/enzyme).
We have few ways to do this type of testing with React. One way is to use [Enzyme](https://github.com/airbnb/enzyme).
### 3. CSS/Style Testing
@ -71,7 +71,7 @@ But since we are building UI for humans, we must also manually test them to s
Another reason for manual testing is for the better user experience.
We should always try to test our UI with the naked eye.
For this, we can simply use our existing Storybook.
For this, we can use our existing Storybook.
This is something that we can't automate(yet) and takes time.
But it would be great if we could do this once in a while (especially with a major code changes).

5
docs/src/pages/testing/structural-testing/index.md
View File

@ -6,7 +6,7 @@ title: 'Structural Testing'
For React, [Jest's snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) is the best way to do Structural Testing.
It's painless to use and maintain.
We've integrated Jest's snapshot testing directly into Storybook using an addon called [StoryShots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots).
Now we can simply use existing stories as the input for snapshot testing.
Now we can use existing stories as the input for snapshot testing.
## What's Snapshot Testing?
@ -25,9 +25,8 @@ If things are not the same, we can do two things:
## Using StoryShots
[StoryShots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots) is our integration between Storybook and Jest Snapshot Testing.
It's pretty simple to use.
First, make sure you are inside a Storybook-enabled repo (make sure it has few stories).
To use StoryShots, first make sure you are inside a Storybook-enabled repo (make sure it has few stories).
Then, install StoryShots into your app with:
```sh

2
examples-native/crna-kitchen-sink/App.js
View File

@ -4,7 +4,7 @@ export { StorybookUIRoot as default };
// NOTE: The code below is what CRNA generates out of the box. We currently
// have no clever way of replacing this with Storybook's UI (Vanilla RN does!)
// so for now we just replace the code outright. Keeping this here for clarity.
// so for now we replace the code outright. Keeping this here for clarity.
//
// import React from 'react';
// import { StyleSheet, Text, View } from 'react-native';

2
examples/dev-kits/config.js
View File

@ -1,6 +1,6 @@
import { configure } from '@storybook/react';
// The simplest version of examples would just export this function for users to use
// The simplest version of examples would export this function for users to use
function importAll(context) {
context.keys().forEach(filename => context(filename));
}

2
examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js
View File

@ -4,7 +4,7 @@ import { Button } from '@storybook/react/demo';
export default {
title: 'Addons|Docs/csf-with-mdx-docs',
component: Button,
includeStories: [], // or simply don't load this file at all
includeStories: [], // or don't load this file at all
};
// eslint-disable-next-line react/prop-types

2
lib/api/src/store.ts
View File

@ -91,7 +91,7 @@ export default class Store {
// What did the patch actually return
let delta: Patch = {};
if (typeof inputPatch === 'function') {
// Pass the same function, but just set delta on the way
// Pass the same function, but set delta on the way
patch = (state: State) => {
const getDelta = inputPatch as InputFnPatch;
delta = getDelta(state);

2
lib/cli/README.md
View File

@ -4,7 +4,7 @@ Storybook CLI (_Command Line Interface_) is the easiest way to add [Storybook](h
![Screenshot](docs/getstorybook.png)
Just go to your project and run:
Go to your project and run:
```sh
cd my-app

2
lib/cli/test/fixtures/ember-cli/README.md vendored
View File

@ -1,7 +1,7 @@
# ember-fixture
This README outlines the details of collaborating on this Ember application.
A short introduction of this app could easily go here.
A short introduction of this app could go here.
## Prerequisites

22
lib/cli/test/fixtures/react_scripts/README.md vendored
View File

@ -311,7 +311,7 @@ Alternatively you may use `yarn`:
yarn add husky lint-staged prettier
```
- `husky` makes it easy to use githooks as if they are npm scripts.
- `husky` enables you to use githooks as if they are npm scripts.
- `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
- `prettier` is the JavaScript formatter we will run before commits.
@ -369,7 +369,7 @@ Alternatively you may use `yarn`:
yarn add react-router
```
This works for any library, not just `react-router`.
This works for any library, not only `react-router`.
## Importing a Component
@ -742,7 +742,7 @@ You can avoid this by reading the global variable explicitly from the `window` o
const $ = window.$;
```
This makes it obvious you are using a global variable intentionally rather than because of a typo.
This makes it more clear that you are using a global variable intentionally rather than because of a typo.
Alternatively, you can force the linter to ignore any line by adding `// eslint-disable-line` after it.
@ -1203,7 +1203,7 @@ Jest will look for test files with any of the following popular naming conventio
The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder.
We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
### Command Line Interface
@ -1243,7 +1243,7 @@ You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](http://facebook.git
There is a broad spectrum of component testing techniques. They range from a “smoke test” verifying that a component renders without throwing, to shallow rendering and testing some of the output, to full rendering and testing component lifecycle and state changes.
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating smoke tests for your components:
```js
import React from 'react';
@ -1347,7 +1347,7 @@ and then use them in your tests like you normally do.
> Note: this feature is available with `react-scripts@0.4.0` and higher.
If your app uses a browser API that you need to mock in your tests or if you just need a global setup before running your tests, add a `src/setupTests.js` to your project. It will be automatically executed before running your tests.
If your app uses a browser API that you need to mock in your tests or if you need a global setup before running your tests, add a `src/setupTests.js` to your project. It will be automatically executed before running your tests.
For example:
@ -1487,7 +1487,7 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest
## Developing Components in Isolation
Usually, in an app, you have a lot of UI components, and each of them has many different states.
For an example, a simple button component could have following states:
For an example, a button component could have following states:
- In a regular state, with a text label.
- In the disabled mode.
@ -1495,7 +1495,7 @@ For an example, a simple button component could have following states:
Usually, it’s hard to see these states without running a sample app or some examples.
Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybookjs/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**.
Create React App doesn’t include any tools for this by default, but you can add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybookjs/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**.
![Storybook for React Demo](http://i.imgur.com/7CIAWpB.gif)
@ -1611,7 +1611,7 @@ it may take up to 24 hours for the cache to be invalidated.
changes you've made locally.
4. If you _need_ to test your offline-first service worker locally, build
the application (using `npm run build`) and run a simple http server from your
the application (using `npm run build`) and run a http server from your
build directory. After running the build script, `create-react-app` will give
instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
instructions for using other methods. _Be sure to always use an
@ -1637,7 +1637,7 @@ it may take up to 24 hours for the cache to be invalidated.
this messages is currently left as an exercise to the developer, but as a
starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/registerServiceWorker.js), which
demonstrates which service worker lifecycle events to listen for to detect each
scenario, and which as a default, just logs appropriate messages to the
scenario, and which as a default, logs appropriate messages to the
JavaScript console.
7. By default, the generated service worker file will not intercept or cache any
@ -1828,7 +1828,7 @@ Then run the `firebase init` command from your project’s root. You need to cho
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
but for now we'll set up a default project.
? What Firebase project do you want to associate as default? Example app (example-app-fd690)

16
lib/cli/test/fixtures/update_package_organisations/README.md vendored
View File

@ -577,7 +577,7 @@ You can avoid this by reading the global variable explicitly from the `window` o
const $ = window.$;
```
This makes it obvious you are using a global variable intentionally rather than because of a typo.
This makes it more clear that you are using a global variable intentionally rather than because of a typo.
Alternatively, you can force the linter to ignore any line by adding `// eslint-disable-line` after it.
@ -849,7 +849,7 @@ Since Create React App doesn’t support server rendering, you might be wonderin
<meta property="og:description" content="__OG_DESCRIPTION__">
```
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
@ -901,7 +901,7 @@ Jest will look for test files with any of the following popular naming conventio
The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder.
We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
### Command Line Interface
@ -941,7 +941,7 @@ You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](http://facebook.git
There is a broad spectrum of component testing techniques. They range from a “smoke test” verifying that a component renders without throwing, to shallow rendering and testing some of the output, to full rendering and testing component lifecycle and state changes.
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating smoke tests for your components:
```js
import React from 'react';
@ -1159,7 +1159,7 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest
## Developing Components in Isolation
Usually, in an app, you have a lot of UI components, and each of them has many different states.
For an example, a simple button component could have following states:
For an example, a button component could have following states:
- With a text label.
- With an emoji.
@ -1167,7 +1167,7 @@ For an example, a simple button component could have following states:
Usually, it’s hard to see these states without running a sample app or some examples.
Create React App doesn’t include any tools for this by default, but you can easily add [React Storybook](https://github.com/kadirahq/react-storybook) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**.
Create React App doesn’t include any tools for this by default, but you can add [React Storybook](https://github.com/kadirahq/react-storybook) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**.
![React Storybook Demo](http://i.imgur.com/7CIAWpB.gif)
@ -1305,7 +1305,7 @@ Then run the `firebase init` command from your project’s root. You need to cho
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
but for now we'll set up a default project.
? What Firebase project do you want to associate as default? Example app (example-app-fd690)
@ -1511,7 +1511,7 @@ See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-t
### Surge
Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the _build_ folder and your custom domain, and you are done.
Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You need to specify the _build_ folder and your custom domain, and you are done.
```sh
email: email@domain.com

2
lib/client-api/src/client_api.ts
View File

@ -141,7 +141,7 @@ export default class ClientApi {
this._globalDecorators = [];
};
// what are the occasions that "m" is simply a boolean, vs an obj
// what are the occasions that "m" is a boolean vs an obj
storiesOf = <StoryFnReturnType = unknown>(
kind: string,
m: NodeModule

2
lib/client-api/src/story_store.ts
View File

@ -121,7 +121,7 @@ export default class StoryStore extends EventEmitter {
extract(options?: StoryOptions) {
const stories = Object.entries(this._data);
// determine if we should apply a sort to the stories or just use default import order
// determine if we should apply a sort to the stories or use default import order
if (Object.values(this._data).length > 0) {
const index = Object.keys(this._data).find(
key =>

2
lib/codemod/README.md
View File

@ -80,7 +80,7 @@ Replaces the Info addon's deprecated `addWithInfo` API with the standard `withIn
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/update-addon-info.js . --ignore-pattern "node_modules|dist"
```
Simple example:
Example:
```js
storiesOf('Button').addWithInfo('simple usage', 'This is the basic usage of the button.', () => (

2
lib/codemod/src/transforms/update-addon-info.js
View File

@ -37,7 +37,7 @@ export default function transformer(file, api) {
const getOptions = args => {
if (args[3] === undefined) {
if (args[2] === undefined) {
// when the optional description string is not supplied for addWithInfo, just use story name
// when the optional description string is not supplied for addWithInfo, use story name
return [args[0]];
}
return [args[1]];

2
lib/components/src/typography/DocumentFormattingSample.md
View File

@ -52,7 +52,7 @@ Unordered
- Ac tristique libero volutpat at
* Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Very easy!
- Hooray!
Ordered

2
lib/core/src/client/preview/start.js
View File

@ -433,7 +433,7 @@ export default function start(render, { decorateStory } = {}) {
/**
* Load a collection of stories. If it has a default export, assume that it is a module-style
* file and process its named exports as stories. If not, assume it's an old-style
* storiesof file and simply require it.
* storiesof file and require it.
*
* @param {*} loadable a require.context `req`, an array of `req`s, or a loader function that returns void or an array of exports
* @param {*} m - ES module object for hot-module-reloading (HMR)

4
lib/ui/README.md
View File

@ -1,7 +1,7 @@
# Storybook UI
Storybook UI the core UI of [storybook](https://storybook.js.org).
It's a React based UI which you can initialize with a simple function.
It's a React based UI which you can initialize with a function.
You can configure it by providing a provider API.
## Table of Contents
@ -135,7 +135,7 @@ It's a set of modules. You can see those modules at `src/modules` directory.
### Changing UI
If you like to change the appearance of the UI, you need to look at the `ui` module. Simply change components at the `components` directory for simple UI tweaks.
If you like to change the appearance of the UI, you need to look at the `ui` module. Change components at the `components` directory for UI tweaks.
You can also change containers(which are written with [react-komposer](https://github.com/kadirahq/react-komposer/)) to add more data from the redux state.