Skip to content

Commit

Permalink
Removed instances of just, easily
Browse files Browse the repository at this point in the history
  • Loading branch information
carolstran committed Oct 12, 2019
1 parent c426715 commit 7e37a12
Show file tree
Hide file tree
Showing 36 changed files with 58 additions and 58 deletions.
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.

Expand Down
6 changes: 3 additions & 3 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -748,7 +748,7 @@ 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

Expand Down Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion ROADMAP.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
6 changes: 3 additions & 3 deletions addons/contexts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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]';
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion addons/docs/docs/docspage.md
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ The docs preset assumes this naming convention for its `source-loader` setup. If

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).

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` is the easy part. It 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):

```js
import React from 'react';
Expand Down
2 changes: 1 addition & 1 deletion addons/docs/docs/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion addons/docs/docs/mdx.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions addons/docs/docs/recipes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion addons/jest/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions addons/storyshots/storyshots-core/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
},
Expand Down
2 changes: 1 addition & 1 deletion app/react-native/docs/manual-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ 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
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.

Expand Down
2 changes: 1 addition & 1 deletion docs/src/new-components/basics/tooltip/Tooltip.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/addons/addon-gallery/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/addons/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/addons/writing-addons/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/basics/faq/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?

Expand Down
Loading

0 comments on commit 7e37a12

Please sign in to comment.