mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 06:31:18 +08:00
Merge branch 'future/add-renderers' into future/add-frameworks
This commit is contained in:
Michael Shilman
commit
be42b39b9f
@ -14,6 +14,25 @@
|
||||
},
|
||||
{
|
||||
"pattern": "https://stackblitz.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://*.chromatic.com"
|
||||
},
|
||||
{
|
||||
"pattern": "https://www.chromatic.com/build?*"
|
||||
},
|
||||
{
|
||||
"pattern": "http://*.nodeca.com"
|
||||
},
|
||||
{
|
||||
"pattern": "http://definitelytyped.org/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://yoursite.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://my-specific-domain.com"
|
||||
}
|
||||
]
|
||||
],
|
||||
"aliveStatusCodes": [429, 200]
|
||||
}
|
||||
78
CHANGELOG.md
78
CHANGELOG.md
@ -1,3 +1,81 @@
|
||||
## 6.5.0-rc.1 (May 18, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Improve webpack version and add detection of nextjs ([#18220](https://github.com/storybookjs/storybook/pull/18220))
|
||||
- ArgsTable: Gracefully handle conditional args failures ([#18248](https://github.com/storybookjs/storybook/pull/18248))
|
||||
- Controls: Fix reset button broken for !undefined URL values ([#18231](https://github.com/storybookjs/storybook/pull/18231))
|
||||
- Vue3: Add support for TSX in single file components ([#18038](https://github.com/storybookjs/storybook/pull/18038))
|
||||
|
||||
## 6.5.0-rc.0 (May 17, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-a11y: Show % of users in toolbar menu ([#18003](https://github.com/storybookjs/storybook/pull/18003))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Web-components: Clean Lit Expression comments in story source ([#18108](https://github.com/storybookjs/storybook/pull/18108))
|
||||
- Vue: Map args correctly in CSF3 implicit render function ([#18209](https://github.com/storybookjs/storybook/pull/18209))
|
||||
- Vue3: Fix CSF3 implicit render function when storyStoreV7 is enabled ([#18208](https://github.com/storybookjs/storybook/pull/182)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Don't throw is Ctrl + C was pressed when selecting a package in the build command ([#18195](https://github.com/storybookjs/storybook/pull/18195))
|
||||
- Build: Cleanup noise from unit tests ([#18196](https://github.com/storybookjs/storybook/pull/18196))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Fixed PnP compatibility for bundled components package ([#18015](https://github.com/storybookjs/storybook/pull/18015))
|
||||
|
||||
## 6.5.0-beta.8 (May 11, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Composition: Fix metadata.json incorrectly overriding main.js refs versions ([#18185](https://github.com/storybookjs/storybook/pull/18185))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Examples: Set channelOptions to disallow function serialization ([#18071](https://github.com/storybookjs/storybook/pull/18071))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade to telejson 6 ([#18164](https://github.com/storybookjs/storybook/pull/18164))
|
||||
|
||||
## 6.5.0-beta.7 (May 9, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF3: Add title prefix support for stories with custom titles ([#17724](https://github.com/storybookjs/storybook/pull/17724))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Components: Fix race conditions in SyntaxHighlighter ([#18158](https://github.com/storybookjs/storybook/pull/18158))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- API: Deprecate isToolshown, rename to showToolbar ([#18131](https://github.com/storybookjs/storybook/pull/18131))
|
||||
|
||||
## 6.5.0-beta.6 (May 6, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix undefined args handling ([#18135](https://github.com/storybookjs/storybook/pull/18135))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Update Introduction.stories.mdx template to be MDX2-friendly ([#18141](https://github.com/storybookjs/storybook/pull/18141))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Remove jest from cli peerDependencies ([#18149](https://github.com/storybookjs/storybook/pull/18149))
|
||||
|
||||
## 6.5.0-beta.5 (May 4, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix anonymous ID generation ([#18133](https://github.com/storybookjs/storybook/pull/18133))
|
||||
|
||||
## 6.5.0-beta.4 (May 4, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
@ -15,7 +15,7 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) |
|
||||
| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) |
|
||||
| babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-blocks.md#argstable)) |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) |
|
||||
| BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. |
|
||||
| BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) |
|
||||
| build-storybook | Issue, bug, or pull request related to Storybook's production build |
|
||||
@ -24,7 +24,7 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| cli | Issue, bug, or pull request that affects the Storybook's CLI |
|
||||
| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) |
|
||||
| components | Issue, bug, or pull request related to Storybook's internal components |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/workflows/storybook-composition.md) |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) |
|
||||
| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) |
|
||||
| core | Issue, bug, or pull request related to Storybook's Core |
|
||||
| cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
|
||||
|
||||
83
MIGRATION.md
83
MIGRATION.md
@ -5,7 +5,9 @@
|
||||
- [Framework field mandatory](#framework-field-mandatory)
|
||||
- [frameworkOptions renamed](#frameworkoptions-renamed)
|
||||
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
|
||||
- [Vue 3 upgrade](#vue-3-upgrade)
|
||||
- [React18 new root API](#react18-new-root-api)
|
||||
- [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
|
||||
- [Deprecated register.js](#deprecated-registerjs)
|
||||
- [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
|
||||
- [Vite builder renamed](#vite-builder-renamed)
|
||||
@ -14,6 +16,7 @@
|
||||
- [CSF3 auto-title improvements](#csf3-auto-title-improvements)
|
||||
- [Auto-title filename case](#auto-title-filename-case)
|
||||
- [Auto-title redundant filename](#auto-title-redundant-filename)
|
||||
- [Auto-title always prefixes](#auto-title-always-prefixes)
|
||||
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
|
||||
- [Automigrate](#automigrate)
|
||||
- [CRA5 upgrade](#cra5-upgrade)
|
||||
@ -225,6 +228,10 @@ module.exports = {
|
||||
|
||||
## From version 6.4.x to 6.5.0
|
||||
|
||||
### Vue 3 upgrade
|
||||
|
||||
Storybook 6.5 supports Vue 3 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
|
||||
|
||||
### React18 new root API
|
||||
|
||||
React 18 introduces a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting in 6.5, Storybook for React will auto-detect your react version and use the new root API automatically if you're on React18.
|
||||
@ -237,6 +244,21 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
### Renamed isToolshown to showToolbar
|
||||
|
||||
Storybook's [manager API](docs/addons/addons-api.md) has deprecated the `isToolshown` option (to show/hide the toolbar) and renamed it to `showToolbar` for consistency with other similar UI options.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
// .storybook/manager.js
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
showToolbar: false,
|
||||
});
|
||||
```
|
||||
|
||||
### Deprecated register.js
|
||||
|
||||
In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
|
||||
@ -339,6 +361,36 @@ Since CSF3 is experimental, we are introducing this technically breaking change
|
||||
export default { title: 'Atoms/Button/Button' };
|
||||
```
|
||||
|
||||
#### Auto-title always prefixes
|
||||
|
||||
When the user provides a `prefix` in their `main.js` `stories` field, it now prefixes all titles to matching stories, whereas in 6.4 and earlier it only prefixed auto-titles.
|
||||
|
||||
Consider the following example:
|
||||
|
||||
```js
|
||||
// main.js
|
||||
module.exports = {
|
||||
stories: [{ directory: '../src', titlePrefix: 'Custom' }]
|
||||
}
|
||||
|
||||
// ../src/NoTitle.stories.js
|
||||
export default { component: Foo };
|
||||
|
||||
// ../src/Title.stories.js
|
||||
export default { component: Bar, title: 'Bar' }
|
||||
```
|
||||
|
||||
In 6.4, the final titles would be:
|
||||
|
||||
- `NoTitle.stories.js` => `Custom/NoTitle`
|
||||
- `Title.stories.js` => `Bar`
|
||||
|
||||
In 6.5, the final titles would be:
|
||||
|
||||
- `NoTitle.stories.js` => `Custom/NoTitle`
|
||||
- `Title.stories.js` => `Custom/Bar`
|
||||
|
||||
<!-- markdown-link-check-disable -->
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Automigrate
|
||||
@ -352,7 +404,9 @@ For example, if you're in a webpack5 project but still use Storybook's default w
|
||||
You can run the existing suite of automigrations to see which ones apply to your project. This won't update any files unless you accept the changes:
|
||||
|
||||
```
|
||||
|
||||
npx sb@next automigrate
|
||||
|
||||
```
|
||||
|
||||
The automigration suite also runs when you create a new project (`sb init`) or when you update storybook (`sb upgrade`).
|
||||
@ -362,7 +416,9 @@ The automigration suite also runs when you create a new project (`sb init`) or w
|
||||
Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to upgrade the configuration. You can do this automatically by running:
|
||||
|
||||
```
|
||||
|
||||
npx sb@next automigrate
|
||||
|
||||
```
|
||||
|
||||
Or you can do the following steps manually to force Storybook to use webpack 5 for building your project:
|
||||
@ -723,7 +779,29 @@ The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0
|
||||
|
||||
### Webpack 5
|
||||
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so, there are two ways:
|
||||
|
||||
1 - Upgrade command
|
||||
|
||||
If you're upgrading your Storybook version, run this command, which will both upgrade your dependencies but also detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb upgrade
|
||||
```
|
||||
|
||||
2 - Automigrate command
|
||||
|
||||
If you don't want to change your Storybook version but want Storybook to detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb automigrate
|
||||
```
|
||||
|
||||
3 - Manually
|
||||
|
||||
If either methods did not work or you just want to proceed manually, do the following steps:
|
||||
|
||||
Install the dependencies:
|
||||
|
||||
```shell
|
||||
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
|
||||
@ -2191,7 +2269,7 @@ Theming has been rewritten in v5. If you used theming in v4, please consult the
|
||||
|
||||
### Story hierarchy defaults
|
||||
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](https://github.com/storybookjs/deprecated-addons/blob/master/MIGRATION.md#options-addon-deprecated).
|
||||
|
||||
In Storybook 4.x the values defaulted to `null` for both of these options, so that there would be no hierarchy by default.
|
||||
|
||||
@ -2856,3 +2934,4 @@ If you **are** using these addons, it takes two steps to migrate:
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
```
|
||||
<!-- markdown-link-check-enable -->
|
||||
@ -80,7 +80,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs
|
||||
|
||||
### Examples
|
||||
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/showcase>
|
||||
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) 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, Android, iOS, and Flutter development for mobile.
|
||||
|
||||
@ -98,12 +98,12 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](app/marionette) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
@ -81,12 +81,11 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
|
||||
these bugs get addressed.
|
||||
|
||||
For every non-PATCH release, we nominate a small number of bugs that must be
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 6.5 milestone](https://github.com/storybookjs/storybook/milestone/75).
|
||||
|
||||
Adding bugs to the milestone helps people looking for good ways to contribute,
|
||||
or to understand what is blocking the release so they can actually do something
|
||||
about it. Discussion about which bugs are critical happens in the `#maintenance`
|
||||
channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
about it. Discussion about which bugs are critical happens in the [`#maintenance` channel](https://discord.com/channels/486522875931656193/490070912448724992) in our Discord Server
|
||||
|
||||
If you're experiencing a bug, the best way to make sure that it gets attention
|
||||
is to upvote it by adding a "thumbs-up" reaction in Github. This way important
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/channels": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/channels": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -80,7 +80,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
69
addons/a11y/src/components/VisionSimulator.test.tsx
Normal file
69
addons/a11y/src/components/VisionSimulator.test.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import { VisionSimulator, baseList } from './VisionSimulator';
|
||||
|
||||
const getOptionByNameAndPercentage = (option: string, percentage: number) =>
|
||||
screen.getByText(
|
||||
(content, element) =>
|
||||
content !== '' &&
|
||||
element.textContent === option &&
|
||||
(percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
|
||||
);
|
||||
|
||||
function ThemedVisionSimulator() {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<VisionSimulator />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
describe('Vision Simulator', () => {
|
||||
it('should render tool button', async () => {
|
||||
// when
|
||||
render(<ThemedVisionSimulator />);
|
||||
|
||||
// then
|
||||
// waitFor because WithTooltip is a lazy component
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
});
|
||||
|
||||
it('should display tooltip on click', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
|
||||
// when
|
||||
userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
|
||||
|
||||
// then
|
||||
await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
|
||||
baseList.forEach(({ name, percentage }) =>
|
||||
expect(getOptionByNameAndPercentage(name, percentage)).toBeInTheDocument()
|
||||
);
|
||||
});
|
||||
|
||||
it('should set filter', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
|
||||
await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
|
||||
|
||||
// when
|
||||
fireEvent.click(screen.getByText('blurred vision'));
|
||||
|
||||
// then
|
||||
// eslint-disable-next-line no-undef
|
||||
const rule = Object.values(document.styleSheets)
|
||||
.filter(({ cssRules }) => cssRules)
|
||||
.map(({ cssRules }) => Object.values(cssRules))
|
||||
.flat()
|
||||
.find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
|
||||
|
||||
expect(rule).toBeDefined();
|
||||
expect(rule.style.filter).toBe('blur(2px)');
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent, ReactNode, useState } from 'react';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import { Global, styled } from '@storybook/theming';
|
||||
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
|
||||
|
||||
@ -6,32 +6,37 @@ import { Filters } from './ColorFilters';
|
||||
|
||||
const iframeId = 'storybook-preview-iframe';
|
||||
|
||||
const baseList = [
|
||||
'blurred vision',
|
||||
'deuteranomaly',
|
||||
'deuteranopia',
|
||||
'protanomaly',
|
||||
'protanopia',
|
||||
'tritanomaly',
|
||||
'tritanopia',
|
||||
'achromatomaly',
|
||||
'achromatopsia',
|
||||
'grayscale',
|
||||
] as const;
|
||||
interface Option {
|
||||
name: string;
|
||||
percentage?: number;
|
||||
}
|
||||
|
||||
type Filter = typeof baseList[number] | null;
|
||||
export const baseList = [
|
||||
{ name: 'blurred vision', percentage: 22.9 },
|
||||
{ name: 'deuteranomaly', percentage: 2.7 },
|
||||
{ name: 'deuteranopia', percentage: 0.56 },
|
||||
{ name: 'protanomaly', percentage: 0.66 },
|
||||
{ name: 'protanopia', percentage: 0.59 },
|
||||
{ name: 'tritanomaly', percentage: 0.01 },
|
||||
{ name: 'tritanopia', percentage: 0.016 },
|
||||
{ name: 'achromatomaly', percentage: 0.00001 },
|
||||
{ name: 'achromatopsia', percentage: 0.0001 },
|
||||
{ name: 'grayscale' },
|
||||
] as Option[];
|
||||
|
||||
const getFilter = (filter: Filter) => {
|
||||
if (!filter) {
|
||||
type Filter = Option | null;
|
||||
|
||||
const getFilter = (filterName: string) => {
|
||||
if (!filterName) {
|
||||
return 'none';
|
||||
}
|
||||
if (filter === 'blurred vision') {
|
||||
if (filterName === 'blurred vision') {
|
||||
return 'blur(2px)';
|
||||
}
|
||||
if (filter === 'grayscale') {
|
||||
if (filterName === 'grayscale') {
|
||||
return 'grayscale(100%)';
|
||||
}
|
||||
return `url('#${filter}')`;
|
||||
return `url('#${filterName}')`;
|
||||
};
|
||||
|
||||
const Hidden = styled.div(() => ({
|
||||
@ -42,7 +47,7 @@ const Hidden = styled.div(() => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const ColorIcon = styled.span<{ filter: Filter }>(
|
||||
const ColorIcon = styled.span<{ filter: string }>(
|
||||
{
|
||||
background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
|
||||
borderRadius: '1rem',
|
||||
@ -66,6 +71,20 @@ export interface Link {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const Column = styled.span({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
const Title = styled.span({
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
|
||||
const Description = styled.span(({ theme }) => ({
|
||||
fontSize: 11,
|
||||
color: theme.textMutedColor,
|
||||
}));
|
||||
|
||||
const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
|
||||
...(active !== null
|
||||
? [
|
||||
@ -80,27 +99,34 @@ const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...baseList.map((i) => ({
|
||||
id: i,
|
||||
title: i.charAt(0).toUpperCase() + i.slice(1),
|
||||
onClick: () => {
|
||||
set(i);
|
||||
},
|
||||
right: <ColorIcon filter={i} />,
|
||||
active: active === i,
|
||||
})),
|
||||
...baseList.map((i) => {
|
||||
const description = i.percentage !== undefined ? `${i.percentage}% of users` : undefined;
|
||||
return {
|
||||
id: i.name,
|
||||
title: (
|
||||
<Column>
|
||||
<Title>{i.name}</Title>
|
||||
{description && <Description>{description}</Description>}
|
||||
</Column>
|
||||
),
|
||||
onClick: () => {
|
||||
set(i);
|
||||
},
|
||||
right: <ColorIcon filter={i.name} />,
|
||||
active: active === i,
|
||||
};
|
||||
}),
|
||||
];
|
||||
|
||||
export const VisionSimulator: FunctionComponent = () => {
|
||||
export const VisionSimulator = () => {
|
||||
const [filter, setFilter] = useState<Filter>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{filter && (
|
||||
<Global
|
||||
styles={{
|
||||
[`#${iframeId}`]: {
|
||||
filter: getFilter(filter),
|
||||
filter: getFilter(filter.name),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -56,7 +56,7 @@
|
||||
"prop-types": "^15.7.2",
|
||||
"react-inspector": "^5.1.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"telejson": "^5.3.3",
|
||||
"telejson": "^6.0.8",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid-browser": "^3.1.0"
|
||||
@ -79,7 +79,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -74,7 +74,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/node-logger": "6.5.0-beta.4",
|
||||
"@storybook/store": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -73,7 +73,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/manager.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -59,20 +59,20 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-beta.4",
|
||||
"@storybook/mdx1-csf": "canary",
|
||||
"@storybook/node-logger": "6.5.0-beta.4",
|
||||
"@storybook/postinstall": "6.5.0-beta.4",
|
||||
"@storybook/preview-web": "6.5.0-beta.4",
|
||||
"@storybook/source-loader": "6.5.0-beta.4",
|
||||
"@storybook/store": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/mdx1-csf": "^0.0.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/postinstall": "6.5.0-rc.1",
|
||||
"@storybook/preview-web": "6.5.0-rc.1",
|
||||
"@storybook/source-loader": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
@ -86,11 +86,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/mdx2-csf": "canary",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"@types/util-deprecate": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/mdx2-csf": "*",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
@ -108,7 +108,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,25 +39,25 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.5.0-beta.4",
|
||||
"@storybook/addon-backgrounds": "6.5.0-beta.4",
|
||||
"@storybook/addon-controls": "6.5.0-beta.4",
|
||||
"@storybook/addon-docs": "6.5.0-beta.4",
|
||||
"@storybook/addon-measure": "6.5.0-beta.4",
|
||||
"@storybook/addon-outline": "6.5.0-beta.4",
|
||||
"@storybook/addon-toolbars": "6.5.0-beta.4",
|
||||
"@storybook/addon-viewport": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/node-logger": "6.5.0-beta.4",
|
||||
"@storybook/addon-actions": "6.5.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.5.0-rc.1",
|
||||
"@storybook/addon-controls": "6.5.0-rc.1",
|
||||
"@storybook/addon-docs": "6.5.0-rc.1",
|
||||
"@storybook/addon-measure": "6.5.0-rc.1",
|
||||
"@storybook/addon-outline": "6.5.0-rc.1",
|
||||
"@storybook/addon-toolbars": "6.5.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.5.0-rc.1",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.5.0-beta.4",
|
||||
"@storybook/vue": "6.5.0-rc.1",
|
||||
"@types/jest": "^26.0.16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -104,6 +104,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -42,15 +42,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/instrumenter": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/instrumenter": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,12 +47,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -74,7 +74,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/router": "6.5.0-beta.4",
|
||||
"@storybook/router": "6.5.0-rc.1",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,11 +44,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
@ -68,7 +68,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -73,7 +73,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -470,7 +470,7 @@ Whenever you change your data requirements by adding (and rendering) or (acciden
|
||||
|
||||
## Using a custom directory
|
||||
|
||||
Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/workflows/snapshot-testing).
|
||||
Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/writing-tests/snapshot-testing).
|
||||
|
||||
## Options
|
||||
|
||||
@ -654,7 +654,7 @@ This option needs to be set if either:
|
||||
|
||||
### `serializer` (deprecated)
|
||||
|
||||
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](`snapshotSerializers`) which should be used instead.
|
||||
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](#snapshotserializers) which should be used instead.
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,11 +45,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "6.5.0-beta.4",
|
||||
"@storybook/core-client": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/client-api": "6.5.0-rc.1",
|
||||
"@storybook/core-client": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
@ -69,11 +69,11 @@
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "6.5.0-beta.4",
|
||||
"@storybook/angular": "6.5.0-beta.4",
|
||||
"@storybook/react": "6.5.0-beta.4",
|
||||
"@storybook/vue": "6.5.0-beta.4",
|
||||
"@storybook/vue3": "6.5.0-beta.4",
|
||||
"@storybook/addon-docs": "6.5.0-rc.1",
|
||||
"@storybook/angular": "6.5.0-rc.1",
|
||||
"@storybook/react": "6.5.0-rc.1",
|
||||
"@storybook/vue": "6.5.0-rc.1",
|
||||
"@storybook/vue3": "6.5.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -150,7 +150,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,7 +42,7 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/node-logger": "6.5.0-beta.4",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.5.0-beta.4",
|
||||
"@storybook/addon-storyshots": "6.5.0-rc.1",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04"
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/router": "6.5.0-beta.4",
|
||||
"@storybook/source-loader": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/router": "6.5.0-rc.1",
|
||||
"@storybook/source-loader": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -74,7 +74,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -68,7 +68,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/manager.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/components": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/theming": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -39,18 +39,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-beta.4",
|
||||
"@storybook/api": "6.5.0-beta.4",
|
||||
"@storybook/client-logger": "6.5.0-beta.4",
|
||||
"@storybook/core-client": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-events": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core-client": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-beta.4",
|
||||
"@storybook/node-logger": "6.5.0-beta.4",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-beta.4",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -69,7 +69,7 @@
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"sass-loader": "^10.1.0",
|
||||
"telejson": "^5.3.3",
|
||||
"telejson": "^6.0.8",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"ts-loader": "^8.0.14",
|
||||
"tsconfig-paths-webpack-plugin": "^3.3.0",
|
||||
@ -131,5 +131,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04"
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import 'jest-preset-angular';
|
||||
import 'jest-preset-angular/setup-jest';
|
||||
|
||||
global.EventSource = class {} as any;
|
||||
|
||||
@ -142,7 +142,7 @@ describe('Build Storybook Builder', () => {
|
||||
});
|
||||
|
||||
it('should throw error', async () => {
|
||||
buildStandaloneMock.mockRejectedValue(new Error());
|
||||
buildStandaloneMock.mockRejectedValue(true);
|
||||
|
||||
const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
|
||||
browserTarget: 'angular-cli:build-2',
|
||||
|
||||
@ -124,7 +124,7 @@ describe('Start Storybook Builder', () => {
|
||||
});
|
||||
|
||||
it('should throw error', async () => {
|
||||
buildStandaloneMock.mockRejectedValue(new Error());
|
||||
buildStandaloneMock.mockRejectedValue(true);
|
||||
|
||||
const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
|
||||
browserTarget: 'angular-cli:build-2',
|
||||
|
||||
@ -22,6 +22,7 @@ describe('RendererFactory', () => {
|
||||
rootTargetDOMNode = global.document.getElementById('root');
|
||||
rootDocstargetDOMNode = global.document.getElementById('root-docs');
|
||||
(platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting);
|
||||
jest.spyOn(console, 'log').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2015",
|
||||
"declaration": true,
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2015",
|
||||
"declaration": true,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
|
||||
"bugs": {
|
||||
@ -36,11 +36,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-client": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/docs-tools": "6.5.0-beta.4",
|
||||
"@storybook/store": "6.5.0-beta.4",
|
||||
"@storybook/core-client": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -61,6 +61,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -39,10 +39,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-html-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-html": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-html-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-html": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -59,6 +59,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -39,10 +39,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-preact-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-preact": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-preact-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-preact": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"react": "16.14.0",
|
||||
@ -62,6 +62,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -40,10 +40,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-react-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-react": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-react-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-react": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
@ -70,6 +70,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -39,10 +39,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-server-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-server": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-server-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-server": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"react": "16.14.0",
|
||||
@ -55,6 +55,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -40,10 +40,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-svelte-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-svelte": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-svelte-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-svelte": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
@ -64,6 +64,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -39,10 +39,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-vue-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-vue": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-vue-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-vue": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"react": "16.14.0",
|
||||
@ -68,6 +68,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -39,10 +39,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-vue3-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-vue3": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-vue3-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-vue3": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"react": "16.14.0",
|
||||
@ -65,6 +65,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.5.0-beta.4",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -42,10 +42,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@storybook/core-common": "6.5.0-beta.4",
|
||||
"@storybook/core-server": "6.5.0-beta.4",
|
||||
"@storybook/preset-web-components-webpack": "6.5.0-beta.4",
|
||||
"@storybook/renderer-web-components": "6.5.0-beta.4",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-server": "6.5.0-rc.1",
|
||||
"@storybook/preset-web-components-webpack": "6.5.0-rc.1",
|
||||
"@storybook/renderer-web-components": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"react": "16.14.0",
|
||||
@ -64,6 +64,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -362,7 +362,7 @@ The following table details how to use the API values:
|
||||
| **showPanel** | Boolean | Display panel that shows addon configurations | `true` |
|
||||
| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` |
|
||||
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
|
||||
| **isToolshown** | Boolean | Show/hide tool bar | `true` |
|
||||
| **showToolbar** | Boolean | Show/hide tool bar | `true` |
|
||||
| **theme** | Object | Storybook Theme, see next section | `undefined` |
|
||||
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
|
||||
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Install addons
|
||||
---
|
||||
|
||||
Storybook has [hundreds of reusable addons](/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
|
||||
Storybook has [hundreds of reusable addons](https://storybook.js.org/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
|
||||
|
||||
### Using addons
|
||||
|
||||
|
||||
@ -5,7 +5,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.
|
||||
|
||||
Browse our [addon catalog](/addons) to install an existing addon or as inspiration for your own addon.
|
||||
Browse our [addon catalog](https://storybook.js.org/addons) to install an existing addon or as inspiration for your own addon.
|
||||
|
||||
## Storybook basics
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Write a preset addon'
|
||||
---
|
||||
|
||||
[Storybook preset addons](./addon-types.md#preset-addons) are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases in Storybook, such as typescript or MDX support.
|
||||
[Storybook preset addons](./addon-types.md#preset-addons) are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases in Storybook, such as TypeScript or MDX support.
|
||||
|
||||
This doc covers the [presets API](#presets-api) and how to use the presets mechanism for [advanced configuration](#advanced-configuration).
|
||||
|
||||
@ -10,7 +10,7 @@ This doc covers the [presets API](#presets-api) and how to use the presets mecha
|
||||
|
||||
A preset is a set of hooks that is 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:
|
||||
Each configuration has a similar signature, accepting a base configuration object and options, as in this Webpack example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -46,7 +46,7 @@ For example, Storybook's Mihtril support uses plugins internally and here's how
|
||||
|
||||
### Webpack
|
||||
|
||||
The webpack functions `webpack`, `webpackFinal`, and `managerWebpack` configure webpack.
|
||||
The Webpack functions `webpack`, `webpackFinal`, and `managerWebpack` configure Webpack.
|
||||
|
||||
All functions take a [webpack4 configuration object](https://webpack.js.org/configuration/).
|
||||
|
||||
@ -62,11 +62,11 @@ For example, here is how Storybook automatically adopts `create-react-app`'s con
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
- `webpack` is applied to the preview config after it has been initialized by storybook
|
||||
- `webpack` is applied to the preview config after it has been initialized by Storybook
|
||||
- `webpackFinal` is applied to the preview config after all user presets have been applied
|
||||
- `managerWebpack` is applied to the manager config
|
||||
|
||||
As of Storybook 6.3, Storybook can run with either `webpack4` or `webpack5` builder. If your addon needs to know which version of Webpack it's running inside, the version and the actual webpack instance itself are both available inside your preset:
|
||||
As of Storybook 6.3, Storybook can run with either `webpack4` or `webpack5` builder. If your addon needs to know which version of Webpack it's running inside, the version and the actual Webpack instance itself are both available inside your preset:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -81,7 +81,7 @@ As of Storybook 6.3, Storybook can run with either `webpack4` or `webpack5` buil
|
||||
|
||||
### Manager entries
|
||||
|
||||
The addon config `managerEntries` 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.
|
||||
The addon config `managerEntries` 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:
|
||||
|
||||
@ -176,9 +176,9 @@ Entries are the place to register entry points for the preview. For example it c
|
||||
|
||||
## Advanced Configuration
|
||||
|
||||
The presets API is also more powerful than the [standard configuration options](../configure/webpack.md#extending-storybooks-webpack-config) available in Storybook, so it's also possible to use presets for more advanced configuration without actually publishing a preset yourself.
|
||||
The presets API is also more powerful than the [standard configuration options](../builders/webpack.md#extending-storybooks-webpack-config) available in Storybook, so it's also possible to use presets for more advanced configuration without actually publishing a preset yourself.
|
||||
|
||||
For example, some users want to configure the webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard webpack configuration](../configure/webpack.md#default-configuration) (it used to be possible before SB4.1). However, you can achieve this with a private preset.
|
||||
For example, some users want to configure the Webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard Webpack configuration](../builders/webpack.md#default-configuration) (it used to be possible before SB4.1). However, you can achieve this with a private preset.
|
||||
|
||||
If it doesn't exist yet, create a file `.storybook/main.js`:
|
||||
|
||||
|
||||
@ -4,6 +4,12 @@ title: 'CLI options'
|
||||
|
||||
Storybook comes with two CLI utilities: `start-storybook` and `build-storybook`.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
|
||||
|
||||
</div>
|
||||
|
||||
Pass these commands the following options to alter Storybook's behavior.
|
||||
|
||||
## start-storybook
|
||||
|
||||
163
docs/builders/builder-api.md
Normal file
163
docs/builders/builder-api.md
Normal file
@ -0,0 +1,163 @@
|
||||
---
|
||||
title: 'Builder API'
|
||||
---
|
||||
|
||||
Storybook is architected to support multiple builders, including [Webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), and [ESBuild](https://esbuild.github.io/). The builder API is the set of interfaces you can use to add a new builder to Storybook.
|
||||
|
||||
|
||||
|
||||
## How do builders work?
|
||||
|
||||
In Storybook, a builder is responsible for compiling your components and stories into JS bundles that run in the browser. A builder also provides a development server for interactive development and a production mode for optimized bundles.
|
||||
|
||||
To opt into a builder, the user must add it as a dependency and then edit their configuration file (`.storybook/main.js`) to enable it. For example, with the Vite builder:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-install.yarn.js.mdx',
|
||||
'common/storybook-vite-builder-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-register.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Builder API
|
||||
|
||||
In Storybook, every builder must implement the following [API](https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/types.ts#L170-L189), exposing the following configuration options and entry points:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-builder-api-interface.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
In development mode, the `start` API call is responsible for initializing the development server to monitor the file system for changes (for example, components and stories) then execute a hot module reload in the browser.
|
||||
It also provides a **bail** function to allow the running process to end gracefully, either via user input or error.
|
||||
|
||||
In production, the `build` API call is responsible for generating a static Storybook build, storing it by default in the `storybook-static` directory if no additional configuration is provided. The generated output should contain everything the user needs to view its Storybook by opening either the `index.html` or `iframe.html` in a browser with no other processes running.
|
||||
|
||||
## Implementation
|
||||
|
||||
Under the hood, a builder is responsible for serving/building the preview `iframe`, which has its own set of requirements. To fully support Storybook, including the [Essential addons](../writing-stories/introduction.md) that ship with Storybook, it must consider the following.
|
||||
|
||||
### Import stories
|
||||
|
||||
The `stories` configuration field enables story loading in Storybook. It defines an array of file globs containing the physical location of the component's stories. The builder must be able to load those files and monitor them for changes and update the UI accordingly.
|
||||
|
||||
### Provide configuration options
|
||||
|
||||
By default, Storybook's configuration is handled in a dedicated file (`storybook/main.js|ts`), giving the user the option to customize it to suit its needs. The builder should also provide its own configuration support through additional fields or some other builder-appropriate mechanism. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-builder-api-configuration-options.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Handle preview.js exports
|
||||
|
||||
The [`preview.js`](../configure/overview.md#configure-story-rendering) configuration file allows users to control how the story renders in the UI. This is provided via the [decorators](../writing-stories/decorators.md) named export. When Storybook starts, it converts these named exports into internal API calls via virtual module entry, for example, `addDecorator()`. The builder must also provide a similar implementation. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-builder-api-preview-exports.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### MDX support
|
||||
|
||||
[Storybook's Docs](../writing-docs/introduction.md) includes the ability to author stories/documentation in MDX using a Webpack loader. The builder must also know how to interpret MDX and invoke Storybook's special extensions. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-builder-api-mdx.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Generate source code snippets
|
||||
|
||||
Storybook annotates components and stories with additional metadata related to their inputs to automatically generate interactive controls and documentation. Currently, this is provided via Webpack loaders/plugins. The builder must re-implement this to support those features.
|
||||
|
||||
### Generate a static build
|
||||
|
||||
One of Storybook's core features it's the ability to generate a static build that can be [published](../sharing/publish-storybook.md) to a web hosting service. The builder must also be able to provide a similar mechanism. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-builder-api-build-server.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Development server integration
|
||||
|
||||
By default, when Storybook starts in development mode, it relies on its internal development server. The builder needs to be able to integrate with it. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-builder-api-dev-server.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Shutdown the development server
|
||||
|
||||
The builder must provide a way to stop the development server once the process terminates; this can be via user input or error. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-builder-api-shutdown-server.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### HMR support
|
||||
|
||||
While running in development mode, the builder's development server must be able to reload the page once a change happens, either in a story, component, or helper function.
|
||||
|
||||
### More information
|
||||
|
||||
This area is under rapid development, so the documented is still in progress and subject to change. If you are interested in writing your builder, we encourage you to check [webpack](https://github.com/storybookjs/storybook/tree/next/lib/builder-webpack4), [Vite](https://github.com/storybookjs/builder-vite), and Modern Web's [dev-server-storybook](https://github.com/modernweb-dev/web/blob/master/packages/dev-server-storybook/src/serve/storybookPlugin.ts) source code. In addition, we have a wonderful contributor community on [Storybook Discord](https://discord.gg/storybook) if you have questions. Ping us in the [#contributing](https://discord.com/channels/486522875931656193/839297503446695956) channel.
|
||||
|
||||
#### Learn more about builders
|
||||
|
||||
- [Vite builder](./vite.md) for bundling with Vite
|
||||
- [Webpack builder](./webpack.md) for bundling with Webpack
|
||||
- Builder API for building a Storybook builder
|
||||
24
docs/builders/overview.md
Normal file
24
docs/builders/overview.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: 'Builders'
|
||||
---
|
||||
|
||||
Storybook, at its core, is powered by builders such as Webpack and Vite. These builders spin up a development environment, compile your code—Javascript, CSS, and MDX—into an executable bundle and update the browser in real-time.
|
||||
|
||||
|
||||
|
||||
## CLI basics
|
||||
|
||||
Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx sb init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
|
||||
|
||||
Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:
|
||||
|
||||
```shell
|
||||
npx sb init --builder <webpack4 | webpack5 | vite>
|
||||
```
|
||||
|
||||
## Manual setup
|
||||
|
||||
Storybook uses the Webpack 4 builder by default if you don't specify one. If you want to use a different builder in your application, these docs detail how you can set up Storybook's supported builders.
|
||||
|
||||
- [**Vite builder**](./vite.md) for bundling your stories with Vite with near-instant HMR.
|
||||
- [**Webpack**](./webpack.md) for bundling your stories with Webpack with improved performance
|
||||
BIN
docs/builders/storybook-builder-workflow.png
Normal file
BIN
docs/builders/storybook-builder-workflow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
docs/builders/storybook-builders.png
Normal file
BIN
docs/builders/storybook-builders.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
122
docs/builders/vite.md
Normal file
122
docs/builders/vite.md
Normal file
@ -0,0 +1,122 @@
|
||||
---
|
||||
title: 'Vite'
|
||||
---
|
||||
|
||||
Storybook Vite builder bundles your components and stories with [Vite](https://vitejs.dev/), a fast ESM bundler.
|
||||
|
||||
- For applications built with Vite: it allows reusing the existing configuration in Storybook.
|
||||
- For applications built with Webpack: it provides faster startup and refresh times, with the disadvantage that your component's execution environment differs from your application.
|
||||
|
||||
## Setup
|
||||
|
||||
If you ran `npx sb init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
|
||||
|
||||
Run the following command to install the builder.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-install.yarn.js.mdx',
|
||||
'common/storybook-vite-builder-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Update your Storybook configuration (in `.storybook/main.js|ts`) to include the builder.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-register.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Configuration
|
||||
|
||||
Out of the box, Storybook's Vite builder includes a set of configuration defaults for the supported frameworks. You can also fine-tune them or override them to match your existing configuration as, by default, the builder does not read your `vite.config.js` file. For example, if you need to set up aliasing, you can adjust your Storybook configuration file (`.storybook/main.js|ts`) and provide the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-aliasing.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The asynchronous function`viteFinal` receives a `config` object with the default builder configuration and returns the updated configuration with the defined alias.
|
||||
|
||||
You can also override the builder's configuration based on the environment. For instance, if you need to provide a custom configuration for development purposes and another for production, you can extend the default configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-config-env.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Svelte configuration
|
||||
|
||||
If you're working with Svelte's Vite plugin ([`vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte)), you can extend your existing configuration and include an additional `SvelteOptions` object to customize it. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-svelte-plugin.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### TypeScript
|
||||
|
||||
If you need, you can also configure Storybook's Vite builder using TypeScript. Rename your `.storybook/main.js` to `.storybook/main.ts` and adjust it as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-ts-configure.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Working directory not being detected
|
||||
|
||||
By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory
|
||||
If you need to override it, you can use the `viteFinal` function and adjust it.
|
||||
|
||||
### ArgTypes are not generated automatically
|
||||
|
||||
Currently, [automatic argType inference](../api/argtypes.md#automatic-argtype-inference) is only available for React and Vue3. With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-vite-builder-react-docgen.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Learn more about builders
|
||||
|
||||
- Vite builder for bundling with Vite
|
||||
- [Webpack builder](./webpack.md) for bundling with Webpack
|
||||
- [Builder API](./builder-api.md) for building a Storybook builder
|
||||
203
docs/builders/webpack.md
Normal file
203
docs/builders/webpack.md
Normal file
@ -0,0 +1,203 @@
|
||||
---
|
||||
title: 'Webpack'
|
||||
---
|
||||
|
||||
Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](https://storybook.js.org/addons/) are also available that extend the configuration for other everyday use cases.
|
||||
|
||||
You can customize Storybook's Webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](../configure/overview.md#configure-your-storybook-project) file.
|
||||
|
||||
The value should be an async function that receives a Webpack config and eventually returns a Webpack config.
|
||||
|
||||
### Default configuration
|
||||
|
||||
By default, Storybook's Webpack configuration will allow you to:
|
||||
|
||||
#### Import images and other static files
|
||||
|
||||
You can import images and other local files and have them built into the Storybook:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-story-import-static-asset.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Import JSON as JavaScript
|
||||
|
||||
You can import `.json` files and have them expanded to a JavaScript object:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-story-import-json.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you want to know the exact details of the Webpack config, the best way is to run either of the following:
|
||||
|
||||
```shell
|
||||
|
||||
## Development mode
|
||||
yarn start-storybook --debug-webpack
|
||||
|
||||
## Production mode
|
||||
yarn build-storybook --debug-webpack
|
||||
```
|
||||
|
||||
### Code splitting
|
||||
|
||||
Starting with Storybook 6.4, [code splitting](https://v4.webpack.js.org/guides/code-splitting/) is supported through a configuration flag. Update your Storybook configuration and add the `storyStoreV7` flag:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-on-demand-story-loading.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](../configure/overview.md#configure-your-storybook-project).
|
||||
|
||||
### Webpack 5
|
||||
|
||||
Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the required dependencies (i.e., `@storybook/builder-webpack5`, `@storybook/manager-webpack5`) and update your Storybook configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-webpack5.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Once you are using Webpack 5, you can further opt into some features to optimize your build:
|
||||
|
||||
#### Lazy Compilation
|
||||
|
||||
Storybook supports Webpack's experimental [lazy compilation](https://webpack.js.org/configuration/experiments/#experimentslazycompilation) feature, via the `lazyCompilation` builder flag:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-webpack5-lazyCompilation.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This feature applies in development mode, and will mean your Storybook will start up faster, at the cost of slightly slower browsing time when you change stories.
|
||||
|
||||
#### Filesystem Caching
|
||||
|
||||
Storybook supports Webpack's [filesystem caching](https://webpack.js.org/configuration/cache/#cachetype) feature, via the `fsCache` builder flag:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-webpack5-fsCache.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This feature will mean build output is cached between runs of Storybook, speeding up subsequent startup times.
|
||||
|
||||
### Extending Storybook’s Webpack config
|
||||
|
||||
To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](../configure/overview.md#configure-your-storybook-project).
|
||||
|
||||
The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, and this will have information about where config came from, whether we're in production or development mode, etc.
|
||||
|
||||
For example, if you wanted to add [Sass](https://sass-lang.com/) support, you can adjust your configuration as such:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-add-sass-config.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Storybook uses the config returned from the above function to render your components in Storybook's "preview" iframe. Note that Storybook has an entirely separate Webpack config for its UI (also referred to as the "manager"), so the customizations you make only apply to the rendering of your stories, i.e., you can completely replace `config.module.rules` if you want.
|
||||
|
||||
Nevertheless, edit `config` with care. Make sure to preserve the following config options:
|
||||
|
||||
- **entry**
|
||||
- **output**
|
||||
|
||||
Furthermore, `config` requires the `HtmlWebpackplugin` to generate the preview page, so rather than overwriting `config.plugins` you should probably append to it (or overwrite it with care), see [the following issue](https://github.com/storybookjs/storybook/issues/6020) for examples on how to handle this:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-simplified-config.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Finally, if your custom Webpack config uses a loader that does not explicitly include specific file extensions via the `test` property, in that case, it is necessary to `exclude` the `.ejs` file extension from that loader.
|
||||
|
||||
If you're using a non-standard Storybook config directory, you should put `main.js` there instead of `.storybook` and update the `include` path to ensure it resolves to your project root.
|
||||
|
||||
### Using your existing config
|
||||
|
||||
Suppose you have an existing Webpack config for your project and want to reuse this app's configuration. In that case, you can import your main Webpack config into Storybook's [`.storybook/main.js`](../configure/overview.md#configure-your-storybook-project) and merge both:
|
||||
|
||||
The following code snippet shows how you can replace the loaders from Storybook with the ones from your app's `webpack.config.js`:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-using-existing-config.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Projects initialized via generators (e.g, Vue CLI) may require that you import their own Webpack config file (i.e., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
|
||||
|
||||
</div>
|
||||
|
||||
### TypeScript Module Resolution
|
||||
|
||||
When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-ts-module-resolution.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
💡 Learn more about Storybook's <a href="../configure/typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
|
||||
</div>
|
||||
|
||||
#### Learn more about builders
|
||||
|
||||
- [Vite builder](./vite.md) for bundling with Vite
|
||||
- [Webpack builder](./webpack.md) for bundling with Webpack
|
||||
- [Builder API](./builder-api.md) for building a Storybook builder
|
||||
@ -42,7 +42,11 @@ Additionally, if you need Storybook specific styles that are separate from your
|
||||
```
|
||||
|
||||
### Nx with Angular 13
|
||||
If you're working with Storybook and [NX libraries](https://nx.dev/structure/library-types), you can extend your project's configuration (i.e., `project.json`) and provide the application's styles. For example:
|
||||
|
||||
If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types),
|
||||
you can extend your project's configuration (i.e., `project.json`) and provide the application's styles.
|
||||
|
||||
For earlier Nx versions (prior to `14.1.8`), your configuration would look like this:
|
||||
|
||||
```json
|
||||
"build-storybook": {
|
||||
@ -56,11 +60,35 @@ If you're working with Storybook and [NX libraries](https://nx.dev/structure/lib
|
||||
},
|
||||
"projectBuildConfig": "example-lib:build-storybook",
|
||||
"styles": ["apps/example-app/src/styles.scss"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Starting with version `14.1.8`, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` `options` configuration object. For example:
|
||||
|
||||
```json
|
||||
"storybook": {
|
||||
"executor": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"configDir": "apps/example-lib/.storybook",
|
||||
"browserTarget": "example-lib:build-storybook",
|
||||
},
|
||||
},
|
||||
"configurations": {
|
||||
"ci": {
|
||||
"quiet": true
|
||||
"build-storybook": {
|
||||
"executor": "@storybook/angular:build-storybook",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputDir": "dist/storybook/example-lib",
|
||||
"configDir": "apps/example-lib/.storybook",
|
||||
"browserTarget": "example-lib:build-storybook",
|
||||
"styles": [".storybook/custom-styles.scss"],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"libs/design-system/src/lib"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
When Nx runs, it will load Storybook's configuration and styling based on the `storybook`'s [`browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
|
||||
|
||||
@ -23,7 +23,7 @@ The following table details how to use the API values:
|
||||
| **showPanel** | Boolean | Display panel that shows addon configurations | `true` |
|
||||
| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` |
|
||||
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
|
||||
| **isToolshown** | Boolean | Show/hide tool bar | `true` |
|
||||
| **showToolbar** | Boolean | Show/hide tool bar | `true` |
|
||||
| **theme** | Object | Storybook Theme, see next section | `undefined` |
|
||||
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
|
||||
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
|
||||
|
||||
@ -45,11 +45,12 @@ Additionally, you can also provide additional feature flags to your Storybook co
|
||||
| Configuration element | Description |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `storyStoreV7` | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up. <br/> `features: { storyStoreV7: true }` |
|
||||
| `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on demand mode. <br/> `features: { buildStoriesJson: true }` |
|
||||
| `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on demand mode. <br/> `features: { buildStoriesJson: true }` |
|
||||
| `emotionAlias` | Provides backwards compatibility for Emotion. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility) for context.<br/> `features: { emotionAlias: false }` |
|
||||
| `babelModeV7` | Enables the new [Babel configuration](./babel.md#v7-mode) mode for Storybook. <br/> `features: { babelModeV7: true }` |
|
||||
| `postcss` | Disables the implicit PostCSS warning. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader) for context. <br/> `features: { postcss: false }` |
|
||||
| `modernInlineRender` | Enables Storybook's modern inline rendering mode. <br/> `features: { modernInlineRender: false }` |
|
||||
| `previewMdx2` | Enables experimental support for [MDX 2](../writing-docs/mdx.md#mdx-2).<br/>`features: { previewMdx2: true }` |
|
||||
|
||||
## Configure story loading
|
||||
|
||||
@ -177,13 +178,13 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
|
||||
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` |
|
||||
| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']` |
|
||||
| `addons` | Sets the list of [addons](/addons) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
|
||||
| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
|
||||
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
|
||||
| `framework` | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'` |
|
||||
| `core` | Sets Storybook's Webpack configuration <br/> `core:{ builder: 'webpack5'}` |
|
||||
| `features` | Enables Storybook's additional features <br/>. See table below for a list of available features `features: { storyStoreV7: true }` |
|
||||
| `core` | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }` |
|
||||
| `features` | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }` |
|
||||
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
|
||||
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
|
||||
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
|
||||
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
|
||||
|
||||
## Configure story rendering
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
title: 'Sidebar & URLS'
|
||||
---
|
||||
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file, and Storybook will group the stories into groups based on common prefixes:
|
||||
|
||||
|
||||
|
||||
We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js` name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
|
||||
We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js`, name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
|
||||
|
||||
## Roots
|
||||
|
||||
@ -26,49 +26,7 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Automatically generate titles
|
||||
|
||||
With CSF 3.0 files, you can choose to leave out a title and let it be inferred from the story's path on disk instead:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-auto-title.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This is controlled by the way your stories are configured:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-configuration.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Given this configuration, the stories file `../src/components/MyComponent.stories.tsx` will get the title `components/MyComponent`.
|
||||
|
||||
You can further customize the generated title by modifying the stories configuration.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-configuration-custom.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This configuration would match a custom file pattern, and add a custom prefix of Foo to each generated title.
|
||||
|
||||
## Permalinking to stories
|
||||
## Permalink to stories
|
||||
|
||||
By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../sharing/publish-storybook.md) your Storybook).
|
||||
|
||||
@ -86,7 +44,7 @@ Consider the following story:
|
||||
|
||||
Storybook's ID-generation logic will give this the `id` `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`.
|
||||
|
||||
It is possible to manually set the id of a story, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
|
||||
It is possible to manually set the story's id, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -98,4 +56,70 @@ It is possible to manually set the id of a story, which is helpful if you want t
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
|
||||
Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
|
||||
|
||||
## CSF 3.0 auto-titles
|
||||
|
||||
Storybook 6.4 introduced [CSF 3.0](https://storybook.js.org/blog/component-story-format-3-0/) as an experimental feature, allowing you to write stories more compactly. Suppose you're already using this format to write your stories. In that case, you can omit the `title` element from the default export and allow Storybook automatically infer it based on the file's physical location. For example, given the following configuration and story:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-configuration-src-dir.main-js.js.mdx',
|
||||
'common/component-story-auto-title.csf3-story.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When Storybook loads, the story can show up in the sidebar as `components/My Component`.
|
||||
|
||||
### Auto-title filename case
|
||||
|
||||
Starting with Storybook 6.5, story titles generated automatically no longer rely on Lodash's [startCase](https://lodash.com/docs/#startCase).
|
||||
Instead, the file name casing is preserved, allowing additional control over the story title. For example, `components/My Component` will be defined as `components/MyComponent`.
|
||||
|
||||
If you need, you can revert to the previous pattern by adding the following configuration:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-manager-render-label-stories.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Auto-title redundant filenames
|
||||
|
||||
In addition to improvements to the story file name casing, a new heuristic was introduced, removing redundant names in case the filename has the same name as the directory name, or if it's called `index.stories.js|ts`. For example, before `components/MyComponent/MyComponent.stories.js` was defined as `Components/MyComponent/MyComponent` in the sidebar. Now it will be defined as `Components/MyComponent`.
|
||||
|
||||
If you need to preserve the naming scheme, you can add the `title` element to the default export. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-csf-3-auto-title-redundant.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Auto-title prefixes
|
||||
|
||||
Additionally, if you customize your Storybook to load your stories based on a [configuration object](./overview.md#with-a-configuration-object), including a `titlePrefix`, Storybook automatically prefixes all titles to matching stories. For example, assuming you have the following configuration:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-auto-title-custom.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When Storybook generates the titles for all matching stories, they'll retain the `Custom` prefix.
|
||||
|
||||
@ -34,8 +34,10 @@ Specifically, we track the following information in our telemetry events:
|
||||
- Supported view layers (e.g., React, Vue, Angular, Svelte).
|
||||
- Builder (e.g., Webpack4, Webpack5, Vite).
|
||||
- Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
|
||||
- [Addons](/addons) (e.g., [Essentials](../essentials/introduction), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
|
||||
- [Addons](https://storybook.js.org/addons/) (e.g., [Essentials](../essentials/introduction.md), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
|
||||
- [Feature flags](./overview.md#feature-flags) (e.g., `buildStoriesJson`).
|
||||
- Package manager information (e.g., `npm`, `yarn`).
|
||||
- Monorepo information (e.g., [NX](https://nx.dev/), [Turborepo](https://turborepo.org/)).
|
||||
- Whether the command was invoked on CI or not.
|
||||
|
||||
Access to the raw data is highly controlled, limited to select members of Storybook's core team who maintain the telemetry. We cannot identify individual users from the dataset: it is anonymized and untraceable back to the user.
|
||||
@ -83,6 +85,11 @@ Will generate the following output:
|
||||
"packageName": "react-scripts",
|
||||
"version": "4.0.3"
|
||||
},
|
||||
"packageManager": {
|
||||
"name": "yarn",
|
||||
"version": "3.1.1",
|
||||
},
|
||||
"monorepo": "Nx",
|
||||
"features": {
|
||||
"buildStoriesJson": true
|
||||
},
|
||||
|
||||
@ -6,7 +6,7 @@ The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a
|
||||
|
||||
## Upgrade script
|
||||
|
||||
The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
|
||||
The most common upgrade is Storybook itself. [Storybook releases](https://storybook.js.org/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
|
||||
|
||||
To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
|
||||
|
||||
@ -18,7 +18,7 @@ This upgrades all of the Storybook packages in your project to the latest stable
|
||||
|
||||
<div class="aside">
|
||||
|
||||
In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
|
||||
In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
|
||||
|
||||
</div>
|
||||
|
||||
@ -42,4 +42,8 @@ To upgrade to the latest pre-release:
|
||||
npx sb@next upgrade --prerelease
|
||||
```
|
||||
|
||||
If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
|
||||
If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
|
||||
|
||||
<div class="aside">
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Essential addons'
|
||||
---
|
||||
|
||||
A major strength of Storybook are [addons](/addons/) that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.
|
||||
A major strength of Storybook are [addons](https://storybook.js.org/addons) that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.
|
||||
|
||||
- [Docs](../writing-docs/introduction.md)
|
||||
- [Controls](./controls.md)
|
||||
|
||||
119
docs/faq.md
119
docs/faq.md
@ -154,12 +154,12 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
|
||||
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
|
||||
| ---------------- | ----------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
|
||||
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
|
||||
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
|
||||
| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
|
||||
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
|
||||
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
|
||||
| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
|
||||
| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
|
||||
| | Parameters | [See current documentation](./writing-stories/parameters.md) | See versioned documentation here | Non existing feature or undocumented |
|
||||
| | Decorators | [See current documentation](./writing-stories/decorators.md) | See versioned documentation here | See versioned documentation here |
|
||||
| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented |
|
||||
| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
|
||||
| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
|
||||
| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
@ -188,8 +188,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
|
||||
| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
|
||||
| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
|
||||
| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
|
||||
| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/basics/writing-stories) |
|
||||
| | Integration/Webpack | [See current documentation](./configure/webpack.md) | See versioned documentation | See versioned documentation |
|
||||
| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
|
||||
| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
|
||||
| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
|
||||
| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
|
||||
@ -200,8 +199,12 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
|
||||
| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
|
||||
| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
|
||||
| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
|
||||
| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
|
||||
| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
|
||||
| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/addons/using-addons/) |
|
||||
| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
|
||||
| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
|
||||
| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
|
||||
| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
|
||||
@ -280,12 +283,84 @@ Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs
|
||||
|
||||
If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).
|
||||
|
||||
See our documentation on how to customize the [Storyshots configuration](./snapshot-testing.md).
|
||||
See our documentation on how to customize the [Storyshots configuration](./writing-tests/snapshot-testing.md).
|
||||
|
||||
### Why are my MDX stories not working in IE11?
|
||||
|
||||
Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
|
||||
|
||||
|
||||
### Why aren't my code blocks highlighted with Storybook MDX
|
||||
|
||||
Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-with-custom-syntax-highlight.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
💡 Check <code>react-syntax-highlighter</code>'s <a href="https://github.com/react-syntax-highlighter/react-syntax-highlighter">documentation</a> for a list of available languages.
|
||||
</div>
|
||||
|
||||
Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
|
||||
|
||||
### Why aren't my MDX 2 stories working in Storybook?
|
||||
|
||||
MDX 2 introduced some changes to how the code is rendered. For example, if you enabled it in your Storybook and you have the following code block:
|
||||
|
||||
```
|
||||
<style>{`
|
||||
.class1 {
|
||||
...
|
||||
}
|
||||
|
||||
.class2 {
|
||||
...
|
||||
}
|
||||
`}</style>
|
||||
|
||||
```
|
||||
|
||||
You'll need to update it to make it compatible with MDX 2.
|
||||
|
||||
```
|
||||
<style>
|
||||
{`
|
||||
.class1 {
|
||||
...
|
||||
}
|
||||
|
||||
.class2 {
|
||||
...
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
```
|
||||
|
||||
See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information.
|
||||
|
||||
|
||||
### Why can't I import my own stories into MDX 2?
|
||||
|
||||
This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
|
||||
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
|
||||
import * as stories from './Button.stories.jsx';
|
||||
|
||||
<Story name="Basic" story={stories.Basic} />
|
||||
```
|
||||
|
||||
|
||||
### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
|
||||
|
||||
If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
|
||||
@ -311,7 +386,7 @@ export default {
|
||||
plugins: [
|
||||
// Other plugins
|
||||
|
||||
// Configures the replace plugin to allow Grapqhl Queries to work properly
|
||||
// Configures the replace plugin to allow GraphQL Queries to work properly
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify('development'),
|
||||
}),
|
||||
@ -328,25 +403,7 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t
|
||||
|
||||
No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
|
||||
|
||||
### Why aren't my code blocks highlighted with Storybook MDX
|
||||
|
||||
Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-with-custom-syntax-highlight.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
💡 Check <code>react-syntax-highlighter</code>'s <a href="https://github.com/react-syntax-highlighter/react-syntax-highlighter">documentation</a> for a list of available languages.
|
||||
</div>
|
||||
|
||||
Applying this small change will enable you to add syntax highlight for SCSS or any other language available.
|
||||
|
||||
### How can my code detect if it is running in Storybook?
|
||||
|
||||
@ -382,7 +439,7 @@ Although valid, it introduces additional boilerplate code to the story definitio
|
||||
|
||||
## Why is Storybook's source loader returning undefined with curried functions?
|
||||
|
||||
This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases.
|
||||
This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce.md) so that it can be triaged and fixed in future releases.
|
||||
|
||||
## Why are my args no longer displaying the default values?
|
||||
|
||||
@ -419,3 +476,7 @@ export default {
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Why isn't Storybook's test runner working?
|
||||
|
||||
There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
|
||||
@ -21,7 +21,7 @@ title: 'Install Storybook'
|
||||
|
||||
<details>
|
||||
|
||||
<summary><code>sb init</code> is not made for empty projects</summary>
|
||||
<summary><code>storybook init</code> is not made for empty projects</summary>
|
||||
|
||||
Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework, including:
|
||||
|
||||
@ -89,8 +89,12 @@ Below are some of the most common installation issues and instructions on how to
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
|
||||
</div>
|
||||
|
||||
If all else fails, try asking for [help](https://storybook.js.org/support)
|
||||
|
||||
</details>
|
||||
|
||||
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
|
||||
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
- Update your `angular.json` file to include Storybook's custom builder:
|
||||
|
||||
@ -2,7 +2,7 @@ Use the Storybook CLI to install it with a couple of commands. Run this inside y
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
npx storybook init
|
||||
|
||||
# Add Ember storybook adapter
|
||||
ember install @storybook/ember-cli-storybook
|
||||
|
||||
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init --type html
|
||||
npx storybook init --type html
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
|
||||
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
|
||||
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
|
||||
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
|
||||
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
|
||||
@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
|
||||
@ -42,20 +42,20 @@ Storybook comes with a permissive [default configuration](../configure/overview.
|
||||
Your project may have additional requirements before components can be rendered in isolation. This warrants customizing configuration further. There are three broad categories of configuration you might need.
|
||||
|
||||
<details>
|
||||
<summary>Build configuration like webpack and Babel</summary>
|
||||
<summary>Build configuration like Webpack and Babel</summary>
|
||||
|
||||
If you see errors on the CLI when you run the `yarn storybook` command, you likely need to make changes to Storybook’s build configuration. Here are some things to try:
|
||||
|
||||
- [Presets](../addons/addon-types.md) bundle common configurations for various technologies into Storybook. In particular, presets exist for Create React App, SCSS and Ant Design.
|
||||
- Specify a custom [Babel configuration](../configure/babel.md#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
|
||||
- Adjust the [webpack configuration](../configure/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
|
||||
- Adjust the [Webpack configuration](../builders/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Runtime configuration</summary>
|
||||
|
||||
If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and webpack settings (see above) to ensure your component code works correctly.
|
||||
If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and Webpack settings (see above) to ensure your component code works correctly.
|
||||
|
||||
</details>
|
||||
|
||||
@ -104,7 +104,7 @@ If you are using CSS-in-JS, chances are your styles are working because they’r
|
||||
<details>
|
||||
<summary>@import CSS into components</summary>
|
||||
|
||||
Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its webpack configuration](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
|
||||
Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its Webpack configuration](../builders/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
@ -123,7 +123,7 @@ Click the "Design" tab in the addon panel to view the embedded Figma design.
|
||||
|
||||
## Zeplin
|
||||
|
||||
[Zeplin](https://zeplin.io/) is a design tool that generates styleguides from [Sketch](https://www.sketch.com/), [Figma](https://www.figma.com/), and [Adobe XD](https://www.adobe.com/en/products/xd.html).
|
||||
[Zeplin](https://zeplin.io/) is a design tool that generates styleguides from [Sketch](https://www.sketch.com/), [Figma](https://www.figma.com/), and [Adobe XD](https://www.adobe.com/products/xd.html).
|
||||
|
||||
Use the [Zeplin addon](https://storybook.js.org/addons/storybook-zeplin) to connect Storybook. The addon displays designs from Zeplin alongside the currently selected story. It includes convenient tooling to overlay the design image atop the live component.
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@ You can also compose Storybooks based on the current development environment (e.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Similar to the other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a config parameter containing Storybook’s configuration object. Check the [webpack documentation](../configure/webpack.md#extending-storybooks-webpack-config) to learn more about it.
|
||||
💡 Similar to the other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a config parameter containing Storybook’s configuration object. Check the [Webpack documentation](../builders/webpack.md#extending-storybooks-webpack-config) to learn more about it.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
```js
|
||||
// src/components/MyComponent.stories.js|jsx
|
||||
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
/**
|
||||
* Story written in CSF 3.0 with auto title generation
|
||||
* See https://storybook.js.org/docs/7.0/react/api/csf
|
||||
* to learn more about it.
|
||||
*/
|
||||
export default { component: MyComponent };
|
||||
|
||||
export const Default = {
|
||||
args: { message: 'Hello world!' },
|
||||
};
|
||||
```
|
||||
@ -1,4 +0,0 @@
|
||||
```js
|
||||
// CSF 3.0 - MyComponent.stories.js|jsx|ts|tsx
|
||||
export default { component: MyComponent }
|
||||
```
|
||||
@ -1,6 +0,0 @@
|
||||
```js
|
||||
// ./storybook/main.js
|
||||
module.exports = {
|
||||
stories: ['../src']
|
||||
};
|
||||
```
|
||||
12
docs/snippets/common/mdx-changelog-stories.mdx.mdx
Normal file
12
docs/snippets/common/mdx-changelog-stories.mdx.mdx
Normal file
@ -0,0 +1,12 @@
|
||||
```md
|
||||
|
||||
<!-- Changelog.stories.mdx -->
|
||||
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
import Changelog from "../CHANGELOG.md";
|
||||
|
||||
<Meta title="Changelog" />
|
||||
|
||||
<Changelog />
|
||||
```
|
||||
@ -0,0 +1,36 @@
|
||||
```ts
|
||||
// build.ts
|
||||
|
||||
import { build as viteBuild } from 'vite';
|
||||
import { stringifyProcessEnvs } from './envs';
|
||||
import { commonConfig } from './vite-config';
|
||||
|
||||
import type { EnvsRaw, ExtendedOptions } from './types';
|
||||
|
||||
export async function build(options: ExtendedOptions) {
|
||||
const { presets } = options;
|
||||
|
||||
const baseConfig = await commonConfig(options, 'build');
|
||||
const config = {
|
||||
...baseConfig,
|
||||
build: {
|
||||
outDir: options.outputDir,
|
||||
emptyOutDir: false,
|
||||
sourcemap: true,
|
||||
},
|
||||
};
|
||||
|
||||
const finalConfig = await presets.apply('viteFinal', config, options);
|
||||
|
||||
const envsRaw = await presets.apply<Promise<EnvsRaw>>('env');
|
||||
// Stringify env variables after getting `envPrefix` from the final config
|
||||
const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix);
|
||||
// Update `define`
|
||||
finalConfig.define = {
|
||||
...finalConfig.define,
|
||||
...envs,
|
||||
};
|
||||
|
||||
await viteBuild(finalConfig);
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,36 @@
|
||||
```ts
|
||||
// vite-server.ts
|
||||
|
||||
import { stringifyProcessEnvs } from './envs';
|
||||
import { getOptimizeDeps } from './optimizeDeps';
|
||||
import { commonConfig } from './vite-config';
|
||||
|
||||
import type { EnvsRaw, ExtendedOptions } from './types';
|
||||
|
||||
export async function createViteServer(options: ExtendedOptions, devServer: Server) {
|
||||
const { port, presets } = options;
|
||||
|
||||
// Defines the baseline config.
|
||||
const baseConfig = await commonConfig(options, 'development');
|
||||
const defaultConfig = {
|
||||
...baseConfig,
|
||||
server: {
|
||||
middlewareMode: true,
|
||||
hmr: {
|
||||
port,
|
||||
server: devServer,
|
||||
},
|
||||
fs: {
|
||||
strict: true,
|
||||
},
|
||||
},
|
||||
optimizeDeps: await getOptimizeDeps(baseConfig, options),
|
||||
};
|
||||
|
||||
const finalConfig = await presets.apply('viteFinal', defaultConfig, options);
|
||||
|
||||
const envsRaw = await presets.apply<Promise<EnvsRaw>>('env');
|
||||
|
||||
// Remainder implementation
|
||||
}
|
||||
```
|
||||
22
docs/snippets/common/storybook-builder-api-dev-server.ts.mdx
Normal file
22
docs/snippets/common/storybook-builder-api-dev-server.ts.mdx
Normal file
@ -0,0 +1,22 @@
|
||||
```ts
|
||||
// server.ts
|
||||
|
||||
import { createServer } from 'vite';
|
||||
|
||||
export async function createViteServer(options: ExtendedOptions, devServer: Server) {
|
||||
const { port } = options;
|
||||
// Remainder server configuration
|
||||
|
||||
// Creates the server.
|
||||
return createServer({
|
||||
// The server configuration goes here
|
||||
server: {
|
||||
middlewareMode: true,
|
||||
hmr: {
|
||||
port,
|
||||
server: devServer,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
```
|
||||
22
docs/snippets/common/storybook-builder-api-interface.ts.mdx
Normal file
22
docs/snippets/common/storybook-builder-api-interface.ts.mdx
Normal file
@ -0,0 +1,22 @@
|
||||
```ts
|
||||
export interface Builder<Config, Stats> {
|
||||
start: (args: {
|
||||
options: Options;
|
||||
startTime: ReturnType<typeof process.hrtime>;
|
||||
router: Router;
|
||||
server: Server;
|
||||
}) => Promise<void | {
|
||||
stats: Stats;
|
||||
totalTime: ReturnType<typeof process.hrtime>;
|
||||
bail: (e?: Error) => Promise<void>;
|
||||
}>;
|
||||
build: (arg: {
|
||||
options: Options;
|
||||
startTime: ReturnType<typeof process.hrtime>;
|
||||
}) => Promise<void | Stats>;
|
||||
bail: (e?: Error) => Promise<void>;
|
||||
getConfig: (options: Options) => Promise<Config>;
|
||||
corePresets?: string[];
|
||||
overridePresets?: string[];
|
||||
}
|
||||
```
|
||||
20
docs/snippets/common/storybook-builder-api-mdx.ts.mdx
Normal file
20
docs/snippets/common/storybook-builder-api-mdx.ts.mdx
Normal file
@ -0,0 +1,20 @@
|
||||
```ts
|
||||
// mdx-plugin.ts
|
||||
|
||||
import mdx from 'vite-plugin-mdx';
|
||||
|
||||
import { createCompiler } from '@storybook/csf-tools/mdx';
|
||||
|
||||
export function mdxPlugin() {
|
||||
return mdx((filename) => {
|
||||
const compilers = [];
|
||||
|
||||
if (filename.endsWith('stories.mdx') || filename.endsWith('story.mdx')) {
|
||||
compilers.push(createCompiler({}));
|
||||
}
|
||||
return {
|
||||
compilers,
|
||||
};
|
||||
});
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
```ts
|
||||
// codegen-iframe-script.ts
|
||||
|
||||
import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
|
||||
import { transformAbsPath } from './utils/transform-abs-path';
|
||||
import type { ExtendedOptions } from './types';
|
||||
|
||||
export async function generateIframeScriptCode(options: ExtendedOptions) {
|
||||
const { presets, frameworkPath, framework } = options;
|
||||
const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
|
||||
|
||||
const presetEntries = await presets.apply('config', [], options);
|
||||
const configEntries = [...presetEntries].filter(Boolean);
|
||||
|
||||
const absoluteFilesToImport = (files: string[], name: string) =>
|
||||
files
|
||||
.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformAbsPath(el)}'`)
|
||||
.join('\n');
|
||||
|
||||
const importArray = (name: string, length: number) =>
|
||||
new Array(length).fill(0).map((_, i) => `${name}_${i}`);
|
||||
|
||||
const code = `
|
||||
// Ensure that the client API is initialized by the framework before any other iframe code
|
||||
// is loaded. That way our client-apis can assume the existence of the API+store
|
||||
import { configure } from '${frameworkImportPath}';
|
||||
|
||||
import {
|
||||
addDecorator,
|
||||
addParameters,
|
||||
addArgTypesEnhancer,
|
||||
addArgsEnhancer,
|
||||
setGlobalRender
|
||||
} from '@storybook/client-api';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
${absoluteFilesToImport(configEntries, 'config')}
|
||||
import * as preview from '${virtualPreviewFile}';
|
||||
import { configStories } from '${virtualStoriesFile}';
|
||||
|
||||
const configs = [${importArray('config', configEntries.length)
|
||||
.concat('preview.default')
|
||||
.join(',')}].filter(Boolean)
|
||||
|
||||
configs.forEach(config => {
|
||||
Object.keys(config).forEach((key) => {
|
||||
const value = config[key];
|
||||
switch (key) {
|
||||
case 'args':
|
||||
case 'argTypes': {
|
||||
return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
|
||||
}
|
||||
case 'decorators': {
|
||||
return value.forEach((decorator) => addDecorator(decorator, false));
|
||||
}
|
||||
case 'parameters': {
|
||||
return addParameters({ ...value }, false);
|
||||
}
|
||||
case 'render': {
|
||||
return setGlobalRender(value)
|
||||
}
|
||||
case 'globals':
|
||||
case 'globalTypes': {
|
||||
const v = {};
|
||||
v[key] = value;
|
||||
return addParameters(v, false);
|
||||
}
|
||||
case 'decorateStory':
|
||||
case 'renderToDOM': {
|
||||
return null;
|
||||
}
|
||||
default: {
|
||||
// eslint-disable-next-line prefer-template
|
||||
return console.log(key + ' was not supported :( !');
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
configStories(configure);
|
||||
`.trim();
|
||||
return code;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,24 @@
|
||||
```ts
|
||||
// index.ts
|
||||
|
||||
import { createViteServer } from './vite-server';
|
||||
|
||||
export const start: ViteBuilder['start'] = async ({ options, server: devServer }) => {
|
||||
// Remainder implementation goes here
|
||||
|
||||
const server = await createViteServer(options as ExtendedOptions, devServer);
|
||||
async function bail(e?: Error): Promise<void> {
|
||||
try {
|
||||
return await server.close();
|
||||
} catch (err) {
|
||||
console.warn('unable to close the server');
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
|
||||
return {
|
||||
bail,
|
||||
totalTime: process.hrtime(startTime),
|
||||
};
|
||||
};
|
||||
```
|
||||
@ -9,7 +9,7 @@ addons.setConfig({
|
||||
showPanel: true,
|
||||
panelPosition: 'bottom',
|
||||
enableShortcuts: true,
|
||||
isToolshown: true,
|
||||
showToolbar: true,
|
||||
theme: undefined,
|
||||
selectedPanel: undefined,
|
||||
initialActive: 'sidebar',
|
||||
@ -18,11 +18,11 @@ addons.setConfig({
|
||||
collapsedRoots: ['other'],
|
||||
},
|
||||
toolbar: {
|
||||
title: { hidden: false, },
|
||||
zoom: { hidden: false, },
|
||||
eject: { hidden: false, },
|
||||
copy: { hidden: false, },
|
||||
fullscreen: { hidden: false, },
|
||||
title: { hidden: false },
|
||||
zoom: { hidden: false },
|
||||
eject: { hidden: false },
|
||||
copy: { hidden: false },
|
||||
fullscreen: { hidden: false },
|
||||
},
|
||||
});
|
||||
```
|
||||
```
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
```js
|
||||
// components/MyComponent/MyComponent.stories.js|jsx|ts|tsx
|
||||
|
||||
import { MyComponent } from './MyComponent.js'
|
||||
|
||||
export default {
|
||||
component: MyComponent,
|
||||
title: 'components/MyComponent/MyComponent',
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
something: 'Something else',
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
15
docs/snippets/common/storybook-main-auto-title-custom.js.mdx
Normal file
15
docs/snippets/common/storybook-main-auto-title-custom.js.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [{ directory: '../src', titlePrefix: 'Custom' }],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
],
|
||||
core: {
|
||||
builder: 'webpack5',
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,15 @@
|
||||
```js
|
||||
// ./storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: ['../src'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
],
|
||||
core: {
|
||||
builder: 'webpack5'
|
||||
},
|
||||
};
|
||||
```
|
||||
11
docs/snippets/common/storybook-main-enable-mdx2.js.mdx
Normal file
11
docs/snippets/common/storybook-main-enable-mdx2.js.mdx
Normal file
@ -0,0 +1,11 @@
|
||||
```js
|
||||
// .storybook/main.js|ts
|
||||
|
||||
module.exports = {
|
||||
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
||||
features: {
|
||||
previewMdx2: true, // 👈 MDX 2 enabled here
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,22 @@
|
||||
```js
|
||||
// .storybook/main.js|ts
|
||||
|
||||
module.exports = {
|
||||
stories: [
|
||||
//👇 Changes the load order of our stories. First loads the Changelog page
|
||||
'../src/Changelog.stories.mdx',
|
||||
'../stories/**/*.stories.mdx',
|
||||
'../stories/**/*.stories.@(js|jsx|ts|tsx)'
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
transcludeMarkdown: true, //👈 Set transcludeMarkdown to true
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -2,8 +2,8 @@
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: [],
|
||||
staticDirs: ['../public'],
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
||||
staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
```js
|
||||
// .storybook/manager.js
|
||||
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
import startCase from 'lodash/startCase';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
|
||||
},
|
||||
});
|
||||
```
|
||||
3
docs/snippets/common/storybook-mdx2-install.npm.js.mdx
Normal file
3
docs/snippets/common/storybook-mdx2-install.npm.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install @storybook/mdx2-csf --save-dev
|
||||
```
|
||||
3
docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
Normal file
3
docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev @storybook/mdx2-csf
|
||||
```
|
||||
3
docs/snippets/common/storybook-msw-generate.msw.js.mdx
Normal file
3
docs/snippets/common/storybook-msw-generate.msw.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npx msw init public/
|
||||
```
|
||||
3
docs/snippets/common/storybook-msw-install.npm.js.mdx
Normal file
3
docs/snippets/common/storybook-msw-install.npm.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install msw msw-storybook-addon --save-dev
|
||||
```
|
||||
3
docs/snippets/common/storybook-msw-install.yarn.js.mdx
Normal file
3
docs/snippets/common/storybook-msw-install.yarn.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev msw msw-storybook-addon
|
||||
```
|
||||
@ -0,0 +1,25 @@
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
import { initialize, mswDecorator } from 'msw-storybook-addon';
|
||||
|
||||
/*
|
||||
* Initializes MSW
|
||||
* See https://github.com/mswjs/msw-storybook-addon#configuring-msw
|
||||
* to learn how to customize it
|
||||
*/
|
||||
initialize();
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Provide the MSW addon decorator globally
|
||||
export const decorators = [mswDecorator];
|
||||
```
|
||||
@ -8,7 +8,7 @@ module.exports = {
|
||||
directory: '../packages/stories',
|
||||
// 👇 The titlePrefix field will generate automatic titles for your stories
|
||||
titlePrefix: 'MyComponents',
|
||||
// 👇 Storybook will load all files that contain the stories extensio
|
||||
// 👇 Storybook will load all files that contain the stories extension
|
||||
files: '*.stories.*',
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
```shell
|
||||
npm install @storybook/test-runner jest --save-dev
|
||||
npm install @storybook/test-runner jest@27 --save-dev
|
||||
```
|
||||
@ -1,3 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev @storybook/test-runner jest
|
||||
yarn add --dev @storybook/test-runner jest@27
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user