Skip to content

Commit

Permalink
docs: fix typos in addons
Browse files Browse the repository at this point in the history
  • Loading branch information
paulaxisabel committed Oct 14, 2022
1 parent 6429309 commit 8cafaab
Show file tree
Hide file tree
Showing 6 changed files with 18 additions and 18 deletions.
8 changes: 4 additions & 4 deletions docs/addons/addon-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
title: 'Types of addons'
---

Each Storybook addon is classified into two general categories, UI-based or Presets. Each type of addons features are documented here. Use this as a reference when creating your addon.
Each Storybook addon is classified into two general categories, UI-based or Presets. Each type of addons feature is documented here. Use this as a reference when creating your addon.

## UI-based addons

UI-based addons allow you to customize Storybook's UI with the following elements.

### Panels

Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example the official [@storybook/actions](../essentials/actions.md) and [@storybook/a11y](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y) use this pattern.
Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example, the official [@storybook/actions](../essentials/actions.md) and [@storybook/a11y](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y) use this pattern.

![Storybook panel](./storybook-panel.png)

Expand All @@ -28,7 +28,7 @@ Use this boilerplate code to add a new `Panel` to Storybook's UI:

### Toolbars

Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example the official [@storybook/backgrounds](../essentials/backgrounds.md) and the [@storybook/addon-outline/](../essentials/measure-and-outline.md#outline-addon) use this pattern.
Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example, the official [@storybook/backgrounds](../essentials/backgrounds.md) and the [@storybook/addon-outline/](../essentials/measure-and-outline.md#outline-addon) use this pattern.

![Storybook toolbar addon](./storybook-toolbar.png)

Expand Down Expand Up @@ -69,7 +69,7 @@ Use this boilerplate code to add a new `Tab` to Storybook's UI:
<!-- prettier-ignore-end -->

<div class="aside">
Learn how to write your own addon that include these UI elements <a href="./writing-addons">here</a>.
Learn how to write your own addon that includes these UI elements <a href="./writing-addons">here</a>.
</div>

## Preset addons
Expand Down
6 changes: 3 additions & 3 deletions docs/addons/configure-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
title: 'Configure and communicate with an addon'
---

The addon API is designed for customization. It offers addon authors different ways to configure and communicate with their users' Storybook. Let's look at what these are and their suggested uses cases.
The addon API is designed for customization. It offers addon authors different ways to configure and communicate with their users' Storybook. Let's look at what these are and their suggested use cases.

## Preset

Presets offload the burden of configuration from user to the addon. Preset options are global and are accessible from NodeJS. They're ideal for pre-configuring Webpack loaders, Babel plugins, and other library or framework-specific configurations.
Presets offload the burden of configuration from the user to the addon. Preset options are global and are accessible from NodeJS. They're ideal for pre-configuring Webpack loaders, Babel plugins, and other library or framework-specific configurations.

For example, many libraries require that the app be wrapped by a `Provider` which _provides_ data to components down the tree. Presets can describe behavior like adding wrappers automatically, without users having to do any manual configuration. If a user installs an addon that has Presets, the addon can instruct Storybook to wrap all stories in `Provider`. This allows folks to start using your library with Storybook, with just 1 line of config!

Expand All @@ -16,7 +16,7 @@ The mechanism for wrapping each story is referred to as a Storybook [decorator](

## Parameters

Parameters are available in the browser and are great for configuring addon behaviour globally, at the component level, or at the story level.
Parameters are available in the browser and are great for configuring addon behavior globally, at the component level, or at the story level.

For example, the [Pseudo States addon](https://storybook.js.org/addons/storybook-addon-pseudo-states) uses parameters to enable the various pseudo-states. Users can provide global defaults and then override them at the story level.

Expand Down
6 changes: 3 additions & 3 deletions docs/addons/install-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Now when you run Storybook the accessibility testing addon will be enabled.

### Using preset addons

Storybook preset addons are grouped collections of specific `babel`,`webpack` and `addons` configurations for distinct use cases. Each one with it's own set of instructions. Preset addons have a three-step installation process: install, register and optionally configuration.
Storybook preset addons are grouped collections of specific `babel`, `webpack` and `addons` configurations for distinct use cases. Each one with its own set of instructions. Preset addons have a three-step installation process: install, register and optionally configuration.

For example, to use SCSS styling, run the following command to install the addon and the required dependencies:

Expand Down Expand Up @@ -67,7 +67,7 @@ Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-ren

<!-- prettier-ignore-end -->

Now when you run Storybook it will configure itself to use SCSS styling. No further configuration needed.
Now when you run Storybook it will configure itself to use SCSS styling. No further configuration is needed.

#### Optional configuration

Expand All @@ -89,7 +89,7 @@ Consider the following example:
<!-- prettier-ignore-end -->

<div class="aside">
Preset addons may also have addon-specific configuration. Read their respective READMEs.
Preset addons may also have addon-specific configurations. Read their respective READMEs.
</div>

Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined.
6 changes: 3 additions & 3 deletions docs/addons/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: 'Introduction to addons'
---

Addons extend Storybook with features and integrations that are not built into the core. Most Storybook features are implemented as addons. For instance: [documentation](../writing-docs/introduction.md), [accessibility testing](https://github.com/storybookjs/storybook/tree/master/addons/a11y), [interactive controls](../essentials/controls.md), among others.
The [addon API](./addons-api.md) makes it easy for you to configure and customize Storybook in new ways. There are countless addons made by the community that unlock time-saving workflows.
The [addon API](./addons-api.md) makes it easy for you to configure and customize Storybook in new ways. There are countless addons made by the community that unlocks time-saving workflows.

Browse our [addon catalog](https://storybook.js.org/addons) to install an existing addon or as inspiration for your own addon.

Expand All @@ -22,11 +22,11 @@ The **Preview** area is an `iframe` where your stories are rendered.

![Storybook detailed window](./manager-preview.jpg)

Because both elements run in their own separate `iframes`, they use a communication channel to keep in sync. For example when you select a story in the Manager an event is dispatched across the channel notifying the Preview to render the story.
Because both elements run in their own separate `iframes`, they use a communication channel to keep in sync. For example, when you select a story in the Manager an event is dispatched across the channel notifying the Preview to render the story.

## Anatomy of an addon

Storybook addons allow you to extend what's already possible with Storybook, everything from the [user interface](./addon-types.md) to the [API](./addons-api.md). Each one classified into two broader categories.
Storybook addons allow you to extend what's already possible with Storybook, everything from the [user interface](./addon-types.md) to the [API](./addons-api.md). Each one is classified into two broader categories.

### UI-based addons

Expand Down
4 changes: 2 additions & 2 deletions docs/addons/writing-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ One of Storybook's main features is its robust addon ecosystem. Use addons to en

## What we're building

For this example, we're going to build a bare-bones addon which:
For this example, we're going to build a bare-bones addon that:

- Adds a new panel in Storybook.
- Retrieves a custom parameter from the stories.
Expand Down Expand Up @@ -254,4 +254,4 @@ To dive deeper, we recommend Storybook's [creating an addon](https://storybook.j

### Addon kit

To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), and use it to bootstrap your next addon.
6 changes: 3 additions & 3 deletions docs/addons/writing-presets.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ This doc covers the [presets API](#presets-api) and how to use the presets mecha

## Presets API

A preset is a set of hooks that is called by Storybook on initialization and can override configurations for `babel`, `webpack`, `addons`, and `entries`.
A preset is a set of hooks that are called by Storybook on initialization and can override configurations for `babel`, `webpack`, `addons`, and `entries`.

Each configuration has a similar signature, accepting a base configuration object and options, as in this Webpack example:

Expand Down Expand Up @@ -153,7 +153,7 @@ The array of values can support both references to other presets and addons that

Storybook will automatically detect whether a reference to an addon is a preset or a manager entry by checking if the package contains a `./preset.js` or `./register.js` (manager entry), falling back to preset if it is unsure.

If this heuristic is incorrect for an addon you are using, you can explicitly opt in to an entry being an a manager entry using the `managerEntries` key.
If this heuristic is incorrect for an addon you are using, you can explicitly opt-in to an entry being a manager entry using the `managerEntries` key.

Here's what it looks when combining presets and manager entries in the `addons` property:

Expand All @@ -169,7 +169,7 @@ Here's what it looks when combining presets and manager entries in the `addons`

### Entries

Entries are the place to register entry points for the preview. For example it could be used to make a basic configure-storybook preset that loads all the `*.stories.js` files into SB, instead of forcing people to copy-paste the same thing everywhere.
Entries are the place to register entry points for the preview. For example, it could be used to make a basic configure-storybook preset that loads all the `*.stories.js` files into SB, instead of forcing people to copy-paste the same thing everywhere.

## Advanced Configuration

Expand Down

0 comments on commit 8cafaab

Please sign in to comment.