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

Merge branch 'next' into monkey/next

Browse Source 
# Conflicts:
#	yarn.lock
This commit is contained in:
Norbert de Langen 2022-07-01 13:24:08 +02:00
commit 669c2650f3
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
253 changed files with 3696 additions and 2093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.circleci/config.yml
View File

@ -277,9 +277,9 @@ jobs:
- run:
name: run e2e tests cra
command: yarn test:e2e-framework --pnp cra
- run:
name: run e2e tests vue
command: yarn test:e2e-framework --pnp sfcVue
# - run:
# name: run e2e tests vue
# command: yarn test:e2e-framework --pnp sfcVue
- run:
name: prep artifacts
when: always

21
.github/workflows/markdown-link-check-config.json vendored
View File

@ -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]
}

31
MIGRATION.md
View File

@ -1,6 +1,7 @@
<h1>Migration</h1>
- [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)
@ -202,6 +203,10 @@
## 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.
@ -360,6 +365,7 @@ 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
@ -748,7 +754,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
@ -2881,3 +2909,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 -->

30
README.md
View File

@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c
<p align="center">
View README for:<br/>
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
</p>
## Table of contents
@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
### Supported Frameworks
| Framework | Demo | |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) |
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) |
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) |
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components) |
| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](https://github.com/storybookjs/react-native) |
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) |
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) |
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) |
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) |
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](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) | [![Native](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) |
| Framework | Demo | |
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| [React](app/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](app/react) |
| [Vue](app/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](app/vue) |
| [Angular](app/angular) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](app/angular) |
| [Web components](app/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](app/web-components) |
| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) |
| [HTML](app/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](app/html) |
| [Ember](app/ember) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](app/ember) |
| [Svelte](app/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](app/svelte) |
| [Preact](app/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](app/preact) |
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) |
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) |
### Sub Projects

5
RELEASES.md
View File

@ -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/) [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](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

6
SECURITY.md
View File

@ -2,9 +2,9 @@
## Supported Versions
| Version | Supported |
| ---------- | ------------------ |
| 6.3, 6.4 | :white_check_mark: |
| Version | Supported |
| --------------- | ------------------ |
| 6.3, 6.4, 6.5 | :white_check_mark: |
## Reporting a Vulnerability

6
addons/a11y/src/components/A11yContext.tsx
View File

@ -22,9 +22,9 @@ interface A11yContextStore {
}
const colorsByType = [
convert(themes.normal).color.negative, // VIOLATION,
convert(themes.normal).color.positive, // PASS,
convert(themes.normal).color.warning, // INCOMPLETION,
convert(themes.light).color.negative, // VIOLATION,
convert(themes.light).color.positive, // PASS,
convert(themes.light).color.warning, // INCOMPLETION,
];
export const A11yContext = React.createContext<A11yContextStore>({

4
addons/a11y/src/components/VisionSimulator.test.tsx
View File

@ -30,7 +30,7 @@ describe('Vision Simulator', () => {
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
});
it('should display tooltip on click', async () => {
it.skip('should display tooltip on click', async () => {
// given
render(<ThemedVisionSimulator />);
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
@ -45,7 +45,7 @@ describe('Vision Simulator', () => {
);
});
it('should set filter', async () => {
it.skip('should set filter', async () => {
// given
render(<ThemedVisionSimulator />);
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());

6
addons/docs/package.json
View File

@ -66,7 +66,7 @@
"@storybook/core-events": "6.5.0-rc.1",
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@storybook/docs-tools": "6.5.0-rc.1",
"@storybook/mdx1-csf": "canary",
"@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",
@ -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"
},

15
addons/interactions/README.md
View File

@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that
`@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function.
```js
import { Button } from './Button';
import { expect } from '@storybook/jest';
import { within, userEvent } from '@storybook/testing-library';
export default {
title: 'Button',
component: Button,
argTypes: {
onClick: { action: true },
},
};
export const Demo = {
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole('button'));
await expect(args.onClick).toHaveBeenCalled();
},
const Template = (args) => <Button {...args} />;
export const Demo = Template.bind({});
Demo.play = async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole('button'));
await expect(args.onClick).toHaveBeenCalled();
};
```

2
addons/interactions/package.json
View File

@ -59,7 +59,7 @@
},
"devDependencies": {
"@storybook/jest": "^0.0.5",
"@storybook/testing-library": "^0.0.7",
"@storybook/testing-library": "0.0.14-next.0",
"formik": "^2.2.9"
},
"peerDependencies": {

17
addons/interactions/src/Panel.stories.tsx
View File

@ -4,7 +4,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import { CallStates } from '@storybook/instrumenter';
import { styled } from '@storybook/theming';
import { getCall } from './mocks';
import { getCalls, getInteractions } from './mocks';
import { AddonPanelPure } from './Panel';
import SubnavStories from './components/Subnav/Subnav.stories';
@ -20,6 +20,8 @@ const StyledWrapper = styled.div(({ theme }) => ({
overflow: 'auto',
}));
const interactions = getInteractions(CallStates.DONE);
export default {
title: 'Addons/Interactions/Panel',
component: AddonPanelPure,
@ -34,10 +36,10 @@ export default {
layout: 'fullscreen',
},
args: {
calls: new Map(),
calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
controls: SubnavStories.args.controls,
controlStates: SubnavStories.args.controlStates,
interactions: [getCall(CallStates.DONE)],
interactions,
fileName: 'addon-interactions.stories.tsx',
hasException: false,
isPlaying: false,
@ -52,14 +54,14 @@ type Story = ComponentStoryObj<typeof AddonPanelPure>;
export const Passing: Story = {
args: {
interactions: [getCall(CallStates.DONE)],
interactions: getInteractions(CallStates.DONE),
},
};
export const Paused: Story = {
args: {
isPlaying: true,
interactions: [getCall(CallStates.WAITING)],
interactions: getInteractions(CallStates.WAITING),
controlStates: {
debugger: true,
start: false,
@ -68,20 +70,21 @@ export const Paused: Story = {
next: true,
end: true,
},
pausedAt: interactions[interactions.length - 1].id,
},
};
export const Playing: Story = {
args: {
isPlaying: true,
interactions: [getCall(CallStates.ACTIVE)],
interactions: getInteractions(CallStates.ACTIVE),
},
};
export const Failed: Story = {
args: {
hasException: true,
interactions: [getCall(CallStates.ERROR)],
interactions: getInteractions(CallStates.ERROR),
},
};

74
addons/interactions/src/Panel.tsx
View File

@ -28,10 +28,16 @@ interface InteractionsPanelProps {
active: boolean;
controls: Controls;
controlStates: ControlStates;
interactions: (Call & { status?: CallStates })[];
interactions: (Call & {
status?: CallStates;
childCallIds: Call['id'][];
isCollapsed: boolean;
toggleCollapsed: () => void;
})[];
fileName?: string;
hasException?: boolean;
isPlaying?: boolean;
pausedAt?: Call['id'];
calls: Map<string, any>;
endRef?: React.Ref<HTMLDivElement>;
onScrollToEnd?: () => void;
@ -66,6 +72,7 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
fileName,
hasException,
isPlaying,
pausedAt,
onScrollToEnd,
endRef,
isRerunAnimating,
@ -87,15 +94,21 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
setIsRerunAnimating={setIsRerunAnimating}
/>
)}
{interactions.map((call) => (
<Interaction
key={call.id}
call={call}
callsById={calls}
controls={controls}
controlStates={controlStates}
/>
))}
<div>
{interactions.map((call) => (
<Interaction
key={call.id}
call={call}
callsById={calls}
controls={controls}
controlStates={controlStates}
childCallIds={call.childCallIds}
isCollapsed={call.isCollapsed}
toggleCollapsed={call.toggleCollapsed}
pausedAt={pausedAt}
/>
))}
</div>
<div ref={endRef} />
{!isPlaying && interactions.length === 0 && (
<Placeholder>
@ -116,17 +129,17 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
export const Panel: React.FC<AddonPanelProps> = (props) => {
const [storyId, setStoryId] = React.useState<StoryId>();
const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
const [pausedAt, setPausedAt] = React.useState<Call['id']>();
const [isPlaying, setPlaying] = React.useState(false);
const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
const [log, setLog] = React.useState<LogItem[]>([]);
// Calls are tracked in a ref so we don't needlessly rerender.
const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
const [log, setLog] = React.useState<LogItem[]>([]);
const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status }));
const endRef = React.useRef();
React.useEffect(() => {
let observer: IntersectionObserver;
@ -146,10 +159,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
[EVENTS.SYNC]: (payload) => {
setControlStates(payload.controlStates);
setLog(payload.logItems);
setPausedAt(payload.pausedAt);
},
[STORY_RENDER_PHASE_CHANGED]: (event) => {
setStoryId(event.storyId);
setPlaying(event.newPhase === 'playing');
setPausedAt(undefined);
},
},
[]
@ -177,6 +192,38 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
const showStatus = log.length > 0 && !isPlaying;
const hasException = log.some((item) => item.status === CallStates.ERROR);
const interactions = React.useMemo(() => {
const callsById = new Map<Call['id'], Call>();
const childCallMap = new Map<Call['id'], Call['id'][]>();
return log
.filter(({ callId, parentId }) => {
if (!parentId) return true;
childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
return !collapsed.has(parentId);
})
.map(({ callId, status }) => ({ ...calls.current.get(callId), status } as Call))
.map((call) => {
const status =
call.status === CallStates.ERROR &&
callsById.get(call.parentId)?.status === CallStates.ACTIVE
? CallStates.ACTIVE
: call.status;
callsById.set(call.id, { ...call, status });
return {
...call,
status,
childCallIds: childCallMap.get(call.id),
isCollapsed: collapsed.has(call.id),
toggleCollapsed: () =>
setCollapsed((ids) => {
if (ids.has(call.id)) ids.delete(call.id);
else ids.add(call.id);
return new Set(ids);
}),
};
});
}, [log, collapsed]);
return (
<React.Fragment key="interactions">
<TabStatus>
@ -191,6 +238,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
fileName={fileName}
hasException={hasException}
isPlaying={isPlaying}
pausedAt={pausedAt}
endRef={endRef}
onScrollToEnd={scrollTarget && scrollToTarget}
isRerunAnimating={isRerunAnimating}

8
addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
View File

@ -35,6 +35,12 @@ export const Demo: CSF2Story = (args) => (
Demo.play = async ({ args, canvasElement }) => {
await userEvent.click(within(canvasElement).getByRole('button'));
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
await expect([{ name: 'John', age: 42 }]).toEqual(
expect.arrayContaining([
expect.objectContaining({ name: 'John' }),
expect.objectContaining({ age: 42 }),
])
);
};
export const FindBy: CSF2Story = (args) => {
@ -131,7 +137,7 @@ export const StandardEmailFailed: CSF3Story = {
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
await canvas.findByText('Please enter a correctly formatted email address');
expect(args.onSubmit).not.toHaveBeenCalled();
await expect(args.onSubmit).not.toHaveBeenCalled();
},
};

18
addons/interactions/src/components/Interaction/Interaction.stories.tsx
View File

@ -2,7 +2,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import { expect } from '@storybook/jest';
import { CallStates } from '@storybook/instrumenter';
import { userEvent, within } from '@storybook/testing-library';
import { getCall } from '../../mocks';
import { getCalls } from '../../mocks';
import { Interaction } from './Interaction';
import SubnavStories from '../Subnav/Subnav.stories';
@ -13,7 +13,7 @@ export default {
title: 'Addons/Interactions/Interaction',
component: Interaction,
args: {
callsById: new Map(),
callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
controls: SubnavStories.args.controls,
controlStates: SubnavStories.args.controlStates,
},
@ -21,25 +21,31 @@ export default {
export const Active: Story = {
args: {
call: getCall(CallStates.ACTIVE),
call: getCalls(CallStates.ACTIVE).slice(-1)[0],
},
};
export const Waiting: Story = {
args: {
call: getCall(CallStates.WAITING),
call: getCalls(CallStates.WAITING).slice(-1)[0],
},
};
export const Failed: Story = {
args: {
call: getCall(CallStates.ERROR),
call: getCalls(CallStates.ERROR).slice(-1)[0],
},
};
export const Done: Story = {
args: {
call: getCall(CallStates.DONE),
call: getCalls(CallStates.DONE).slice(-1)[0],
},
};
export const WithParent: Story = {
args: {
call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' },
},
};

160
addons/interactions/src/components/Interaction/Interaction.tsx
View File

@ -1,4 +1,5 @@
import * as React from 'react';
import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
import { styled, typography } from '@storybook/theming';
import { transparentize } from 'polished';
@ -15,23 +16,55 @@ const MethodCallWrapper = styled.div(() => ({
inlineSize: 'calc( 100% - 40px )',
}));
const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{
call: Call;
}>(({ theme, call }) => ({
display: 'flex',
flexDirection: 'column',
borderBottom: `1px solid ${theme.appBorderColor}`,
fontFamily: typography.fonts.base,
fontSize: 13,
...(call.status === CallStates.ERROR && {
backgroundColor:
theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
const RowContainer = styled('div', {
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
})<{ call: Call; pausedAt: Call['id'] }>(
({ theme, call }) => ({
position: 'relative',
display: 'flex',
flexDirection: 'column',
borderBottom: `1px solid ${theme.appBorderColor}`,
fontFamily: typography.fonts.base,
fontSize: 13,
...(call.status === CallStates.ERROR && {
backgroundColor:
theme.base === 'dark'
? transparentize(0.93, theme.color.negative)
: theme.background.warning,
}),
paddingLeft: call.parentId ? 20 : 0,
}),
({ theme, call, pausedAt }) =>
pausedAt === call.id && {
'&::before': {
content: '""',
position: 'absolute',
top: -5,
zIndex: 1,
borderTop: '4.5px solid transparent',
borderLeft: `7px solid ${theme.color.warning}`,
borderBottom: '4.5px solid transparent',
},
'&::after': {
content: '""',
position: 'absolute',
top: -1,
zIndex: 1,
width: '100%',
borderTop: `1.5px solid ${theme.color.warning}`,
},
}
);
const RowHeader = styled.div<{ disabled: boolean }>(({ theme, disabled }) => ({
display: 'flex',
'&:hover': disabled ? {} : { background: theme.background.hoverable },
}));
const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
>(({ theme, disabled, call }) => ({
flex: 1,
display: 'grid',
background: 'none',
border: 0,
@ -42,7 +75,6 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
padding: '8px 15px',
textAlign: 'start',
cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
'&:hover': disabled ? {} : { background: theme.background.hoverable },
'&:focus-visible': {
outline: 0,
boxShadow: `inset 3px 0 0 0 ${
@ -55,45 +87,101 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
},
}));
const RowMessage = styled('pre')({
margin: 0,
padding: '8px 10px 8px 30px',
const RowActions = styled.div(({ theme }) => ({
padding: 6,
}));
export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
color: theme.color.mediumdark,
margin: '0 3px',
}));
const Note = styled(TooltipNote)(({ theme }) => ({
fontFamily: theme.typography.fonts.base,
}));
const RowMessage = styled('div')(({ theme }) => ({
padding: '8px 10px 8px 36px',
fontSize: typography.size.s1,
});
pre: {
margin: 0,
padding: 0,
},
p: {
color: theme.color.dark,
},
}));
const Exception = ({ exception }: { exception: Call['exception'] }) => {
if (exception.message.startsWith('expect(')) {
return <MatcherResult {...exception} />;
}
const paragraphs = exception.message.split('\n\n');
const more = paragraphs.length > 1;
return (
<RowMessage>
<pre>{paragraphs[0]}</pre>
{more && <p>See the full stack trace in the browser console.</p>}
</RowMessage>
);
};
export const Interaction = ({
call,
callsById,
controls,
controlStates,
childCallIds,
isCollapsed,
toggleCollapsed,
pausedAt,
}: {
call: Call;
callsById: Map<Call['id'], Call>;
controls: Controls;
controlStates: ControlStates;
childCallIds?: Call['id'][];
isCollapsed: boolean;
toggleCollapsed: () => void;
pausedAt?: Call['id'];
}) => {
const [isHovered, setIsHovered] = React.useState(false);
return (
<RowContainer call={call}>
<RowLabel
call={call}
onClick={() => controls.goto(call.id)}
disabled={!controlStates.goto}
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
>
<StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
<MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
<MethodCall call={call} callsById={callsById} />
</MethodCallWrapper>
</RowLabel>
{call.status === CallStates.ERROR &&
call.exception &&
(call.exception.message.startsWith('expect(') ? (
<MatcherResult {...call.exception} />
) : (
<RowMessage>{call.exception.message}</RowMessage>
))}
<RowContainer call={call} pausedAt={pausedAt}>
<RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}>
<RowLabel
call={call}
onClick={() => controls.goto(call.id)}
disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
>
<StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
<MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
<MethodCall call={call} callsById={callsById} />
</MethodCallWrapper>
</RowLabel>
<RowActions>
{childCallIds?.length > 0 && (
<WithTooltip
hasChrome={false}
tooltip={
<Note
note={`${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`}
/>
}
>
<StyledIconButton containsIcon onClick={toggleCollapsed}>
<Icons icon="listunordered" />
</StyledIconButton>
</WithTooltip>
)}
</RowActions>
</RowHeader>
{call.status === CallStates.ERROR && call.exception?.callId === call.id && (
<Exception exception={call.exception} />
)}
</RowContainer>
);
};

18
addons/interactions/src/components/List.tsx
View File

@ -12,9 +12,9 @@ const ListWrapper = styled.ul({
const Wrapper = styled.div({
display: 'flex',
width: '100%',
borderBottom: `1px solid ${convert(themes.normal).appBorderColor}`,
borderBottom: `1px solid ${convert(themes.light).appBorderColor}`,
'&:hover': {
background: convert(themes.normal).background.hoverable,
background: convert(themes.light).background.hoverable,
},
});
@ -22,7 +22,7 @@ const Icon = styled(Icons)<IconsProps>({
height: 10,
width: 10,
minWidth: 10,
color: convert(themes.normal).color.mediumdark,
color: convert(themes.light).color.mediumdark,
marginRight: 10,
transition: 'transform 0.1s ease-in-out',
alignSelf: 'center',
@ -30,8 +30,8 @@ const Icon = styled(Icons)<IconsProps>({
});
const HeaderBar = styled.div({
padding: convert(themes.normal).layoutMargin,
paddingLeft: convert(themes.normal).layoutMargin - 3,
padding: convert(themes.light).layoutMargin,
paddingLeft: convert(themes.light).layoutMargin - 3,
background: 'none',
color: 'inherit',
textAlign: 'left',
@ -41,13 +41,13 @@ const HeaderBar = styled.div({
'&:focus': {
outline: '0 none',
borderLeft: `3px solid ${convert(themes.normal).color.secondary}`,
borderLeft: `3px solid ${convert(themes.light).color.secondary}`,
},
});
const Description = styled.div({
padding: convert(themes.normal).layoutMargin,
marginBottom: convert(themes.normal).layoutMargin,
padding: convert(themes.light).layoutMargin,
marginBottom: convert(themes.light).layoutMargin,
fontStyle: 'italic',
});
@ -69,7 +69,7 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
<HeaderBar onClick={() => onToggle(!open)} role="button">
<Icon
icon="chevrondown"
color={convert(themes.normal).appBorderColor}
color={convert(themes.light).appBorderColor}
style={{
transform: `rotate(${open ? 0 : -90}deg)`,
}}

2
addons/interactions/src/components/MatcherResult.tsx
View File

@ -50,7 +50,7 @@ export const MatcherResult = ({ message }: { message: string }) => {
<pre
style={{
margin: 0,
padding: '8px 10px 8px 30px',
padding: '8px 10px 8px 36px',
fontSize: typography.size.s1,
}}
>

70
addons/interactions/src/components/MethodCall.stories.tsx
View File

@ -27,7 +27,6 @@ export default {
},
};
class FooBar {}
export const Args = () => (
<div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
<Node value={null} />
@ -56,37 +55,49 @@ export const Args = () => (
}}
showObjectInspector
/>
<Node value={new FooBar()} />
<Node value={function goFaster() {}} />
<Node value={{ __class__: { name: 'FooBar' } }} />
<Node value={{ __function__: { name: 'goFaster' } }} />
<Node value={{ __element__: { localName: 'hr' } }} />
<Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
<Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
<Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
<Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
<Node value={new Date(Date.UTC(2012, 11, 20, 0, 0, 0))} />
<Node value={new Date(1600000000000)} />
<Node value={new Date(1600000000123)} />
<Node value={new EvalError()} />
<Node value={new SyntaxError("Can't do that")} />
<Node value={new TypeError("Cannot read property 'foo' of undefined")} />
<Node value={new ReferenceError('Invalid left-hand side in assignment')} />
<Node
value={
new Error(
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource."
)
}
value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
/>
<Node value={/hello/i} />
<Node value={new RegExp(`src(.*)\\.js$`)} />
{/* eslint-disable-next-line symbol-description */}
<Node value={Symbol()} />
<Node value={Symbol('Hello world')} />
<Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
<Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
<Node value={{ __error__: { name: 'EvalError', message: '' } }} />
<Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
<Node
value={{
__error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
}}
/>
<Node
value={{
__error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
}}
/>
<Node
value={{
__error__: {
name: 'Error',
message:
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
},
}}
/>
<Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
<Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
<Node value={{ __symbol__: { description: '' } }} />
<Node value={{ __symbol__: { description: 'Hello world' } }} />
</div>
);
const calls: Call[] = [
{
cursor: 0,
id: '1',
path: ['screen'],
method: 'getByText',
@ -96,6 +107,7 @@ const calls: Call[] = [
retain: false,
},
{
cursor: 1,
id: '2',
path: ['userEvent'],
method: 'click',
@ -105,6 +117,7 @@ const calls: Call[] = [
retain: false,
},
{
cursor: 2,
id: '3',
path: [],
method: 'expect',
@ -114,6 +127,7 @@ const calls: Call[] = [
retain: false,
},
{
cursor: 3,
id: '4',
path: [{ __callId__: '3' }, 'not'],
method: 'toBe',
@ -123,15 +137,17 @@ const calls: Call[] = [
retain: false,
},
{
cursor: 4,
id: '5',
path: ['jest'],
method: 'fn',
storyId: 'kind--story',
args: [function actionHandler() {}],
args: [{ __function__: { name: 'actionHandler' } }],
interceptable: false,
retain: false,
},
{
cursor: 5,
id: '6',
path: [],
method: 'expect',
@ -141,20 +157,28 @@ const calls: Call[] = [
retain: false,
},
{
cursor: 6,
id: '7',
path: ['expect'],
method: 'stringMatching',
storyId: 'kind--story',
args: [/hello/i],
args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
interceptable: false,
retain: false,
},
{
cursor: 7,
id: '8',
path: [{ __callId__: '6' }, 'not'],
method: 'toHaveBeenCalledWith',
storyId: 'kind--story',
args: [{ __callId__: '7' }, new Error("Cannot read property 'foo' of undefined")],
args: [
{ __callId__: '7' },
[
{ __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
{ __symbol__: { description: 'Hello world' } },
],
],
interceptable: false,
retain: false,
},

107
addons/interactions/src/components/MethodCall.tsx
View File

@ -111,32 +111,34 @@ export const Node = ({
return <NullNode {...props} />;
case value === undefined:
return <UndefinedNode {...props} />;
case Array.isArray(value):
return <ArrayNode {...props} value={value} callsById={callsById} />;
case typeof value === 'string':
return <StringNode value={value} {...props} />;
return <StringNode {...props} value={value} />;
case typeof value === 'number':
return <NumberNode value={value} {...props} />;
return <NumberNode {...props} value={value} />;
case typeof value === 'boolean':
return <BooleanNode value={value} {...props} />;
case typeof value === 'function':
return <FunctionNode value={value} {...props} />;
case value instanceof Array:
return <ArrayNode value={value} {...props} />;
case value instanceof Date:
return <DateNode value={value} {...props} />;
case value instanceof Error:
return <ErrorNode value={value} {...props} />;
case value instanceof RegExp:
return <RegExpNode value={value} {...props} />;
return <BooleanNode {...props} value={value} />;
/* eslint-disable no-underscore-dangle */
case Object.prototype.hasOwnProperty.call(value, '__date__'):
return <DateNode {...props} {...value.__date__} />;
case Object.prototype.hasOwnProperty.call(value, '__error__'):
return <ErrorNode {...props} {...value.__error__} />;
case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
return <RegExpNode {...props} {...value.__regexp__} />;
case Object.prototype.hasOwnProperty.call(value, '__function__'):
return <FunctionNode {...props} {...value.__function__} />;
case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
return <SymbolNode {...props} {...value.__symbol__} />;
case Object.prototype.hasOwnProperty.call(value, '__element__'):
// eslint-disable-next-line no-underscore-dangle
return <ElementNode value={value.__element__} {...props} />;
return <ElementNode {...props} {...value.__element__} />;
case Object.prototype.hasOwnProperty.call(value, '__class__'):
return <ClassNode {...props} {...value.__class__} />;
case Object.prototype.hasOwnProperty.call(value, '__callId__'):
// eslint-disable-next-line no-underscore-dangle
return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
case typeof value === 'object' &&
value.constructor?.name &&
value.constructor?.name !== 'Object':
return <ClassNode value={value} {...props} />;
/* eslint-enable no-underscore-dangle */
case Object.prototype.toString.call(value) === '[object Object]':
return <ObjectNode value={value} showInspector={showObjectInspector} {...props} />;
default:
@ -189,12 +191,22 @@ export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
);
};
export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: boolean }) => {
export const ArrayNode = ({
value,
nested = false,
callsById,
}: {
value: any[];
nested?: boolean;
callsById?: Map<Call['id'], Call>;
}) => {
const colors = useThemeColors();
if (nested) {
return <span style={{ color: colors.base }}>[…]</span>;
}
const nodes = value.slice(0, 3).map((v) => <Node key={v} value={v} nested />);
const nodes = value
.slice(0, 3)
.map((v) => <Node key={JSON.stringify(v)} value={v} nested callsById={callsById} />);
const nodelist = interleave(nodes, <span>, </span>);
if (value.length <= 3) {
return <span style={{ color: colors.base }}>[{nodelist}]</span>;
@ -263,18 +275,27 @@ export const ObjectNode = ({
);
};
export const ClassNode = ({ value }: { value: Record<string, any> }) => {
export const ClassNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
return <span style={{ color: colors.instance }}>{value.constructor.name}</span>;
return <span style={{ color: colors.instance }}>{name}</span>;
};
export const FunctionNode = ({ value }: { value: Function }) => {
export const FunctionNode = ({ name }: { name: string }) => {
const colors = useThemeColors();
return <span style={{ color: colors.function }}>{value.name || 'anonymous'}</span>;
return name ? (
<span style={{ color: colors.function }}>{name}</span>
) : (
<span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
);
};
export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
const { prefix, localName, id, classNames = [], innerText } = value;
export const ElementNode = ({
prefix,
localName,
id,
classNames = [],
innerText,
}: ElementRef['__element__']) => {
const name = prefix ? `${prefix}:${localName}` : localName;
const colors = useThemeColors();
return (
@ -309,8 +330,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
);
};
export const DateNode = ({ value }: { value: Date }) => {
const [date, time, ms] = value.toISOString().split(/[T.Z]/);
export const DateNode = ({ value }: { value: string }) => {
const [date, time, ms] = value.split(/[T.Z]/);
const colors = useThemeColors();
return (
<span style={{ whiteSpace: 'nowrap', color: colors.date }}>
@ -323,42 +344,36 @@ export const DateNode = ({ value }: { value: Date }) => {
);
};
export const ErrorNode = ({ value }: { value: Error }) => {
export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
const colors = useThemeColors();
return (
<span style={{ color: colors.error.name }}>
{value.name}
{value.message && ': '}
{value.message && (
<span
style={{ color: colors.error.message }}
title={value.message.length > 50 ? value.message : ''}
>
{ellipsize(value.message, 50)}
{name}
{message && ': '}
{message && (
<span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
{ellipsize(message, 50)}
</span>
)}
</span>
);
};
export const RegExpNode = ({ value }: { value: RegExp }) => {
export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
const colors = useThemeColors();
return (
<span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
/<span style={{ color: colors.regex.source }}>{value.source}</span>/{value.flags}
/<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
</span>
);
};
export const SymbolNode = ({ value }: { value: symbol }) => {
export const SymbolNode = ({ description }: { description: string }) => {
const colors = useThemeColors();
return (
<span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
Symbol(
{value.description && (
<span style={{ color: colors.meta }}>{JSON.stringify(value.description)}</span>
)}
)
{description && <span style={{ color: colors.meta }}>"{description}"</span>})
</span>
);
};

1
addons/interactions/src/components/Subnav/Subnav.stories.tsx
View File

@ -12,6 +12,7 @@ export default {
goto: action('goto'),
next: action('next'),
end: action('end'),
rerun: action('rerun'),
},
controlStates: {
debugger: true,

143
addons/interactions/src/mocks/index.ts
View File

@ -1,31 +1,122 @@
import { CallStates, Call } from '@storybook/instrumenter';
export const getCall = (status: CallStates): Call => {
const defaultData = {
id: 'addons-interactions-accountform--standard-email-filled [3] change',
cursor: 0,
path: ['fireEvent'],
method: 'change',
storyId: 'addons-interactions-accountform--standard-email-filled',
args: [
{
__callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
retain: false,
},
{
target: {
value: 'michael@chromatic.com',
},
},
],
interceptable: true,
retain: false,
status,
};
export const getCalls = (finalStatus: CallStates) => {
const calls: Call[] = [
{
id: 'story--id [3] within',
storyId: 'story--id',
cursor: 3,
path: [],
method: 'within',
args: [{ __element__: { localName: 'div', id: 'root' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [4] findByText',
storyId: 'story--id',
cursor: 4,
path: [{ __callId__: 'story--id [3] within' }],
method: 'findByText',
args: ['Click'],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [5] click',
storyId: 'story--id',
cursor: 5,
path: ['userEvent'],
method: 'click',
args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 6,
path: [],
method: 'waitFor',
args: [{ __function__: { name: '' } }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor [0] expect',
parentId: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 1,
path: [],
method: 'expect',
args: [{ __function__: { name: 'handleSubmit' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor [1] stringMatching',
parentId: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 2,
path: ['expect'],
method: 'stringMatching',
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
parentId: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 3,
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
method: 'toHaveBeenCalledWith',
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [7] expect',
storyId: 'story--id',
cursor: 7,
path: [],
method: 'expect',
args: [{ __function__: { name: 'handleReset' } }],
interceptable: false,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [8] toHaveBeenCalled',
storyId: 'story--id',
cursor: 8,
path: [{ __callId__: 'story--id [7] expect' }, 'not'],
method: 'toHaveBeenCalled',
args: [],
interceptable: true,
retain: false,
status: finalStatus,
},
];
const overrides = CallStates.ERROR
? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
: {};
if (finalStatus === CallStates.ERROR) {
calls[calls.length - 1].exception = {
name: 'Error',
stack: '',
message: 'Oops!',
callId: calls[calls.length - 1].id,
};
}
return { ...defaultData, ...overrides };
return calls;
};
export const getInteractions = (finalStatus: CallStates) =>
getCalls(finalStatus).filter((call) => call.interceptable);

10
addons/jest/src/components/Panel.tsx
View File

@ -99,13 +99,13 @@ const getColorByType = (type: string) => {
// using switch to allow for new types to be added
switch (type) {
case StatusTypes.PASSED_TYPE:
return convert(themes.normal).color.positive;
return convert(themes.light).color.positive;
case StatusTypes.FAILED_TYPE:
return convert(themes.normal).color.negative;
return convert(themes.light).color.negative;
case StatusTypes.PENDING_TYPE:
return convert(themes.normal).color.warning;
return convert(themes.light).color.warning;
case StatusTypes.TODO_TYPE:
return convert(themes.normal).color.purple;
return convert(themes.light).color.purple;
default:
return null;
}
@ -154,7 +154,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
</SuiteHead>
<TabsState
initial="failing-tests"
backgroundColor={convert(themes.normal).background.hoverable}
backgroundColor={convert(themes.light).background.hoverable}
>
<div
id="failing-tests"

2
addons/jest/src/components/Result.tsx
View File

@ -67,7 +67,7 @@ export function Result(props: ResultProps) {
<Icon
icon="chevrondown"
size={10}
color={convert(themes.normal).color.mediumdark}
color={convert(themes.light).color.mediumdark}
style={{
transform: `rotate(${isOpen ? 0 : -90}deg)`,
}}

14
addons/storyshots/storyshots-core/src/test-bodies.ts
View File

@ -1,15 +1,21 @@
import 'jest-specific-snapshot';
import { StoryshotsTestMethod, TestMethodOptions } from './api/StoryshotsOptions';
import {
StoryshotsTestMethod,
TestMethodOptions,
StoryshotsOptions,
} from './api/StoryshotsOptions';
const isFunction = (obj: any) => !!(obj && obj.constructor && obj.call && obj.apply);
const optionsOrCallOptions = (opts: any, story: any) => (isFunction(opts) ? opts(story) : opts);
type SnapshotsWithOptionsArgType = Pick<StoryshotsOptions, 'renderer' | 'serializer'> | Function;
type SnapshotsWithOptionsReturnType = (
options: Pick<TestMethodOptions, 'story' | 'context' | 'renderTree' | 'snapshotFileName'>
) => any;
export function snapshotWithOptions(
options: { renderer?: any; serializer?: any } | Function = {}
options: SnapshotsWithOptionsArgType = {}
): SnapshotsWithOptionsReturnType {
return ({ story, context, renderTree, snapshotFileName }) => {
const result = renderTree(story, context, optionsOrCallOptions(options, story));
@ -44,7 +50,9 @@ export function snapshotWithOptions(
};
}
export function multiSnapshotWithOptions(options = {}): StoryshotsTestMethod {
export function multiSnapshotWithOptions(
options: SnapshotsWithOptionsArgType = {}
): StoryshotsTestMethod {
return ({ story, context, renderTree, stories2snapsConverter }) => {
const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context);
return snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName });

5
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -50,11 +50,12 @@
},
"devDependencies": {
"@storybook/csf": "0.0.2--canary.4566f4d.1",
"@types/puppeteer": "^5.4.0"
"@types/puppeteer": "^5.4.0",
"puppeteer": "^2.0.0 || ^3.0.0"
},
"peerDependencies": {
"@storybook/addon-storyshots": "6.5.0-rc.1",
"puppeteer": "^2.0.0 || ^3.0.0"
"puppeteer": ">=2.0.0"
},
"peerDependenciesMeta": {
"puppeteer": {

22
addons/storyshots/storyshots-puppeteer/src/config.ts
View File

@ -1,11 +1,7 @@
import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
import {
Base64ScreenShotOptions,
Browser,
DirectNavigationOptions,
Page,
ElementHandle,
} from 'puppeteer';
import { ScreenshotOptions, Browser, Page, ElementHandle } from 'puppeteer';
type PuppeteerLifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
export interface Context {
kind: string;
@ -20,6 +16,16 @@ interface Options {
url: string;
}
interface Base64ScreenShotOptions extends ScreenshotOptions {
encoding: 'base64';
}
interface DirectNavigationOptions {
referer?: string;
timeout?: number;
waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[];
}
export interface CommonConfig {
storybookUrl: string;
chromeExecutablePath: string;
@ -40,7 +46,7 @@ export interface ImageSnapshotConfig extends CommonConfig {
getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
afterScreenshot: (options: { image: string; context: Context }) => Promise<void>;
afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise<void>;
}
export interface AxeConfig extends CommonConfig {

2
addons/storysource/package.json
View File

@ -52,7 +52,7 @@
"estraverse": "^5.2.0",
"loader-utils": "^2.0.0",
"prop-types": "^15.7.2",
"react-syntax-highlighter": "^15.4.5",
"react-syntax-highlighter": "^15.5.0",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {

12
app/angular/src/client/preview/angular-beta/StorybookModule.ts
View File

@ -7,7 +7,7 @@ import deprecate from 'util-deprecate';
import { ICollection, StoryFnAngularReturnType } from '../types';
import { storyPropsProvider } from './StorybookProvider';
import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
import { isDeclarable } from './utils/NgComponentAnalyzer';
import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer';
import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
@ -61,6 +61,7 @@ export const getStorybookModuleMetadata = (
props
);
const isStandalone = isStandaloneComponent(component);
// Look recursively (deep) if the component is not already declared by an import module
const requiresComponentDeclaration =
isDeclarable(component) &&
@ -68,7 +69,8 @@ export const getStorybookModuleMetadata = (
component,
moduleMetadata.declarations,
moduleMetadata.imports
);
) &&
!isStandalone;
return {
declarations: [
@ -76,7 +78,11 @@ export const getStorybookModuleMetadata = (
ComponentToInject,
...(moduleMetadata.declarations ?? []),
],
imports: [BrowserModule, ...(moduleMetadata.imports ?? [])],
imports: [
BrowserModule,
...(isStandalone ? [component] : []),
...(moduleMetadata.imports ?? []),
],
providers: [storyPropsProvider(storyProps$), ...(moduleMetadata.providers ?? [])],
entryComponents: [...(moduleMetadata.entryComponents ?? [])],
schemas: [...(moduleMetadata.schemas ?? [])],

41
app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts
View File

@ -19,6 +19,7 @@ import {
isComponent,
isDeclarable,
getComponentDecoratorMetadata,
isStandaloneComponent,
} from './NgComponentAnalyzer';
describe('getComponentInputsOutputs', () => {
@ -235,6 +236,46 @@ describe('isComponent', () => {
});
});
describe('isStandaloneComponent', () => {
it('should return true with a Component with "standalone: true"', () => {
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
// Angular deps are updated to v14.x.x.
@Component({ standalone: true } as any)
class FooComponent {}
expect(isStandaloneComponent(FooComponent)).toEqual(true);
});
it('should return false with a Component with "standalone: false"', () => {
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
// Angular deps are updated to v14.x.x.
@Component({ standalone: false } as any)
class FooComponent {}
expect(isStandaloneComponent(FooComponent)).toEqual(false);
});
it('should return false with a Component without the "standalone" property', () => {
@Component({})
class FooComponent {}
expect(isStandaloneComponent(FooComponent)).toEqual(false);
});
it('should return false with simple class', () => {
class FooPipe {}
expect(isStandaloneComponent(FooPipe)).toEqual(false);
});
it('should return false with Directive', () => {
@Directive()
class FooDirective {}
expect(isStandaloneComponent(FooDirective)).toEqual(false);
});
});
describe('getComponentDecoratorMetadata', () => {
it('should return Component with a Component', () => {
@Component({ selector: 'foo' })

12
app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts
View File

@ -108,6 +108,18 @@ export const isComponent = (component: any): component is Type<unknown> => {
return (decorators || []).some((d) => d instanceof Component);
};
export const isStandaloneComponent = (component: any): component is Type<unknown> => {
if (!component) {
return false;
}
const decorators = reflectionCapabilities.annotations(component);
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
// Angular deps are updated to v14.x.x.
return (decorators || []).some((d) => d instanceof Component && (d as any).standalone);
};
/**
* Returns all component decorator properties
* is used to get all `@Input` and `@Output` Decorator

29
app/react/src/client/docs/jsxDecorator.test.tsx
View File

@ -284,4 +284,33 @@ describe('jsxDecorator', () => {
'<div className="foo" />'
);
});
it('handles stories that trigger Suspense', async () => {
// if a story function uses a hook or other library that triggers suspense, it will throw a Promise until it is resolved
// and then it will return the story content after the promise is resolved
const storyFn = jest.fn();
storyFn
.mockImplementationOnce(() => {
throw Promise.resolve();
})
.mockImplementation(() => {
return <div>resolved args story</div>;
});
const jsx = '';
const context = makeContext('args', { __isArgsStory: true, jsx }, {});
expect(() => {
jsxDecorator(storyFn, context);
}).toThrow(Promise);
jsxDecorator(storyFn, context);
await new Promise((r) => setTimeout(r, 0));
expect(mockChannel.emit).toHaveBeenCalledTimes(2);
expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, 'jsx-test--args', '');
expect(mockChannel.emit).nthCalledWith(
2,
SNIPPET_RENDERED,
'jsx-test--args',
'<div>\n resolved args story\n</div>'
);
});
});

2
app/react/src/client/docs/jsxDecorator.tsx
View File

@ -177,7 +177,6 @@ export const jsxDecorator = (
) => {
const channel = addons.getChannel();
const skip = skipJsxRender(context);
const story = storyFn();
let jsx = '';
@ -185,6 +184,7 @@ export const jsxDecorator = (
if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
});
const story = storyFn();
// We only need to render JSX if the source block is actually going to
// consume it. Otherwise it's just slowing us down.
if (skip) {

2
app/react/src/client/preview/render.tsx
View File

@ -147,4 +147,6 @@ export async function renderToDOM(
}
await renderElement(element, domElement);
return () => unmountElement(domElement);
}

2
app/react/src/server/framework-preset-react-docs.test.ts
View File

@ -32,7 +32,7 @@ describe('framework-preset-react-docgen', () => {
presets: ['env', 'foo-preset'],
overrides: [
{
test: /\.(mjs|tsx?|jsx?)$/,
test: /\.(cjs|mjs|tsx?|jsx?)$/,
plugins: [
[
babelPluginReactDocgenPath,

3
app/react/src/server/framework-preset-react-docs.ts
View File

@ -19,8 +19,9 @@ export async function babel(config: TransformOptions, options: Options) {
return {
...config,
overrides: [
...(config?.overrides || []),
{
test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
plugins: [
[
require.resolve('babel-plugin-react-docgen'),

2
app/vue/src/client/preview/config.ts
View File

@ -1,4 +1,4 @@
export { render, renderToDOM } from './render';
export { decorateStory } from './decorateStory';
export { decorateStory as applyDecorators } from './decorateStory';
export const parameters = { framework: 'vue' };

2
app/vue3/src/client/preview/config.ts
View File

@ -1,4 +1,4 @@
export { render, renderToDOM } from './render';
export { decorateStory } from './decorateStory';
export { decorateStory as applyDecorators } from './decorateStory';
export const parameters = { framework: 'vue3' };

23
docs/addons/writing-addons.md
View File

@ -50,14 +50,23 @@ Once you've gone through the prompts, your `package.json` should look like:
### Build system
We'll need to add the necessary dependencies and make some adjustments. Run the following commands:
We'll need to add the necessary dependencies and make some adjustments. Run the following command to install the required dependencies:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-write-addon-install-dependencies.yarn.js.mdx',
'common/storybook-write-addon-install-dependencies.npm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Initialize a local Storybook instance to allow you to test your addon.
```shell
# Installs React and Babel CLI
yarn add react react-dom @babel/cli
# Adds Storybook:
npx sb init
npx storybook init
```
<div class="aside">
@ -246,4 +255,4 @@ To dive deeper, we recommend Storybook's [creating an addon](https://storybook.j
### Addon kit
To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.

2
docs/api/cli-options.md
View File

@ -5,7 +5,9 @@ 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.

4
docs/builders/overview.md
View File

@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b
## 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.
Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook 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>
npx storybook init --builder <webpack4 | webpack5 | vite>
```
## Manual setup

2
docs/builders/vite.md
View File

@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v
## 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.
If you ran `npx storybook 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.

38
docs/builders/webpack.md
View File

@ -40,16 +40,34 @@ You can import `.json` files and have them expanded to a JavaScript object:
<!-- 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:
If you want to know the exact details of the Webpack config, the best way is to run either of the following commands:
```shell
For development mode:
## Development mode
yarn start-storybook --debug-webpack
<!-- prettier-ignore-start -->
## Production mode
yarn build-storybook --debug-webpack
```
<CodeSnippets
paths={[
'common/storybook-debug-webpack-dev.yarn.js.mdx',
'common/storybook-debug-webpack-dev.npm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
For production mode:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-debug-webpack-prod.yarn.js.mdx',
'common/storybook-debug-webpack-prod.npm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
### Code splitting
@ -193,11 +211,11 @@ When working with TypeScript projects, the default Webpack configuration may fai
<!-- prettier-ignore-end -->
<div class="aside">
💡 Learn more about Storybook's <a href="./typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
💡 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
- Webpack builder for bundling with Webpack
- [Builder API](./builder-api.md) for building a Storybook builder

2
docs/configure/babel.md
View File

@ -81,7 +81,7 @@ For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md]
If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory:
```sh
npx sb@next babelrc
npx storybook@next babelrc
```
Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example:

38
docs/configure/css-troubleshooting/angular.mdx
View File

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

6
docs/configure/environment-variables.md
View File

@ -9,6 +9,12 @@ If you supply an environment variable prefixed with `STORYBOOK_`, it will be ava
STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
```
<div class="aside">
💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files.
</div>
Then we can access these environment variables anywhere inside our preview JavaScript code like below:
<!-- prettier-ignore-start -->

7
docs/configure/overview.md
View File

@ -28,7 +28,7 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
- `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
- `webpackFinal` - custom [webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config).
- `babel` - custom [babel configuration](./babel.md).
- `framework` - framework specific configurations to help the loading and building process.
@ -178,14 +178,15 @@ 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](https://storybook.js.org/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` | 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'` |
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
## Configure story rendering

2
docs/configure/story-rendering.md
View File

@ -2,7 +2,7 @@
title: 'Story rendering'
---
In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
## Adding to &#60;head&#62;

4
docs/configure/styling-and-css.md
View File

@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
### Importing CSS files
If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
<FeatureSnippets paths={['configure/css-troubleshooting/angular.mdx']} />
@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove
### Adding webfonts
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).

10
docs/configure/upgrading.md
View File

@ -11,7 +11,7 @@ The most common upgrade is Storybook itself. [Storybook releases](https://storyb
To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
```sh
npx sb upgrade
npx storybook upgrade
```
This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
@ -27,10 +27,10 @@ In addition to running the command, we also recommend checking the [MIGRATION.md
Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
```
npx sb@next automigrate
npx storybook@next automigrate
```
It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
## Prereleases
@ -39,11 +39,13 @@ In addition to the above, Storybook is under constant development, and we publis
To upgrade to the latest pre-release:
```sh
npx sb@next upgrade --prerelease
npx storybook@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.
<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>

28
docs/contribute/code.md
View File

@ -6,18 +6,21 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com
## Initial setup
First [fork](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook repository then clone and build your fork locally. Run the following commands:
Start by [forking](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook monorepo and cloning it locally.
```shell
git clone https://github.com/your-username/storybook.git
cd storybook
yarn
yarn bootstrap --core
```
Navigate to the `storybook` directory and install the required dependencies with the following commands:
```shell
yarn && yarn bootstrap --core
```
## Run tests & examples
Once you've completed the [initial setup](#run-tests-&-examples), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
Once you've completed the [initial setup](#initial-setup), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
Run the following command to execute the tests:
@ -28,8 +31,7 @@ yarn test
Once the tests finish, check if the examples are working with the following commands:
```shell
cd examples/cra-ts-essentials
yarn storybook
cd examples/cra-ts-essentials && yarn storybook
```
<div class="aside">
@ -106,7 +108,7 @@ Storybook's monorepo is set up to rely on end-to-end testing with [Cypress](http
Before submitting your contribution, run the test suite one last time with:
```sh
```shell
yarn test
```
@ -133,20 +135,20 @@ We encourage bug reports to include reproductions. In the same way that it's pos
To do so, run the following command in the root of the monorepo:
```sh
npx sb@next link https://github.com/your-username/your-project.git
```shell
npx storybook@next link https://github.com/your-username/your-project.git
```
This command creates a project `../storybook-repros/your-project`, and automatically links it to your local Storybook code. After connecting it, you should be able to run Storybook and develop as mentioned [above](#start-developing).
If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag:
```sh
npx sb@next link --local /path/to/local-repro-directory
```shell
npx storybook@next link --local /path/to/local-repro-directory
```
<div class="aside">
💡 The <code>sb link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>sb repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
💡 The <code>storybook link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>storybook repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
</div>
## Troubleshooting

2
docs/contribute/how-to-reproduce.md
View File

@ -21,7 +21,7 @@ Make sure you have:
First, open a terminal and run the following command:
```shell
npx sb@next repro
npx storybook@next repro
```
<div class="aside">

8
docs/contribute/new-snippets.md
View File

@ -89,11 +89,15 @@ Go through the rest of the documentation and repeat the process.
Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
Start by forking [frontpage repo](https://github.com/storybookjs/frontpage). Then, clone and install the dependencies with the following commands:
Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally.
```shell
git clone https://github.com/your-username/frontpage.git
cd frontpage
```
Navigate to the `frontpage` directory and install the required dependencies with the following command:
```shell
yarn
```

15
docs/essentials/interactions.md
View File

@ -18,13 +18,16 @@ The interactions are written using a Storybook-instrumented version of [Testing
Since Interactions is still experimental, it doesn't yet ship with Storybook by default. As such, you'll have to install it. You may also want to add our wrappers for Testing Library and Jest.
```shell
# With npm
npm install @storybook/addon-interactions @storybook/jest @storybook/testing-library --save-dev
<!-- prettier-ignore-start -->
# With yarn
yarn add --dev @storybook/addon-interactions @storybook/jest @storybook/testing-library
```
<CodeSnippets
paths={[
'common/storybook-addon-interactions-addon-full-install.yarn.js.mdx',
'common/storybook-addon-interactions-addon-full-install.npm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following:

31
docs/essentials/introduction.md
View File

@ -14,17 +14,20 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
### Installation
If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
If you ran `storybook init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
```shell
#With npm
npm install -D @storybook/addon-essentials
<!-- prettier-ignore-start -->
#With yarn
yarn add -D @storybook/addon-essentials
```
<CodeSnippets
paths={[
'common/storybook-addon-essentials-install.yarn.js.mdx',
'common/storybook-addon-essentials-install.npm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
@ -44,14 +47,16 @@ Essentials is "zero-config”. It comes with a recommended configuration out of
If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
```shell
#With npm
npm install -D @storybook/addon-actions
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-addon-actions-install.yarn.js.mdx',
'common/storybook-addon-actions-install.npm.js.mdx',
]}
/>
#With yarn
yarn add -D @storybook/addon-actions
```
<!-- prettier-ignore-end -->
<!-- prettier-ignore-start -->

147
docs/faq.md
View File

@ -145,72 +145,70 @@ With the release of version 6.0, we updated our documentation as well. That does
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
| 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/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](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 |
| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
| | 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/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 |
| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.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) |
| | 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/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) |
| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
| | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
| 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/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](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 |
| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
| | 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/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 |
| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.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) |
| | 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/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) |
| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
| | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
<div class="aside">
With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@ -285,7 +283,6 @@ See our documentation on how to customize the [Storyshots configuration](./writi
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:
@ -341,7 +338,6 @@ You'll need to update it to make it compatible with MDX 2.
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:
@ -356,7 +352,6 @@ 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:
@ -399,8 +394,6 @@ 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.
### How can my code detect if it is running in Storybook?
You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
@ -472,3 +465,15 @@ 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.
### How does Storybook handles enviroment variables?
Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).

10
docs/frameworks.js
View File

@ -117,27 +117,27 @@ module.exports = {
{
name: 'Source',
unsupported: [],
path: 'writing-docs/doc-blocks#source',
path: 'writing-docs/doc-block-source',
},
{
name: 'Dynamic source',
supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'],
path: 'writing-docs/doc-blocks#source',
path: 'writing-docs/doc-block-source',
},
{
name: 'Args Table',
supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
path: 'writing-docs/doc-blocks#argstable',
path: 'writing-docs/doc-block-argstable',
},
{
name: 'Description',
supported: ['react', 'vue', 'angular', 'ember', 'web-components'],
path: 'writing-docs/doc-blocks#description',
path: 'writing-docs/doc-block-description',
},
{
name: 'Inline stories',
supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
path: 'writing-docs/doc-blocks#inline-rendering',
path: 'writing-docs/docs-page#inline-stories-vs-iframe-stories',
},
],
},

2
docs/get-started/install.md
View File

@ -90,7 +90,9 @@ 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)

12
docs/get-started/installation-problems/angular.mdx
View File

@ -1,13 +1,19 @@
- Add the `--type angular` flag to the installation command to set up Storybook manually:
```shell
npx sb init --type angular
npx storybook init --type angular
```
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
```shell
npx sb@next automigrate
npx storybook@next automigrate
```
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.
@ -19,7 +25,7 @@
- If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
| Configuration element | Description |
|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `"browserTarget"` | Build target to be served using the following format. <br/> `"example-project:builder:config"` |
| `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace. <br/> `"tsConfig": "./tsconfig.json"`. |
| `"port"` | Port used by Storybook. <br/> `"port": 6006` |

8
docs/get-started/installation-problems/ember.mdx
View File

@ -1,7 +1,7 @@
- Add the `--type ember` flag to the installation command to set up Storybook manually:
```shell
npx sb init --type ember
npx storybook init --type ember
```
- During the install process, if you get the following warning message:
@ -14,4 +14,10 @@
Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@storybook/ember-cli-storybook) package to the latest version to fix it.
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions.

2
docs/get-started/installation-problems/html.mdx
View File

@ -1,7 +1,7 @@
- Add the `--type html` flag to the installation command to set up Storybook manually:
```shell
npx sb init --type html
npx storybook init --type html
```
- For other installation issues, check the [Html README](../../app/html/README.md) for additional instructions.

8
docs/get-started/installation-problems/preact.mdx
View File

@ -1,7 +1,13 @@
- Add the `--type preact` flag to the installation command to set up Storybook manually:
```shell
npx sb init --type preact
npx storybook init --type preact
```
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions.

10
docs/get-started/installation-problems/react.mdx
View File

@ -1,13 +1,19 @@
- Add the `--type react` flag to the installation command to set up Storybook manually:
```shell
npx sb init --type react
npx storybook init --type react
```
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
```shell
npx sb@next automigrate
npx storybook@next automigrate
```
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade) for more information on how to set up Webpack 5.

8
docs/get-started/installation-problems/svelte.mdx
View File

@ -1,7 +1,13 @@
- Add the `--type svelte` flag to the installation command to set up Storybook manually:
```shell
npx sb init --type svelte
npx storybook init --type svelte
```
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- For issues with Svelte Native Story Format, check the [Svelte Story Format addon repository](https://github.com/storybookjs/addon-svelte-csf) for instructions.

10
docs/get-started/installation-problems/vue.mdx
View File

@ -2,10 +2,16 @@
```shell
# For Vue 2 projects
npx sb init --type vue
npx storybook init --type vue
# For Vue 3 projects
npx sb init --type vue3
npx storybook init --type vue3
```
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
```shell
npx storybook init --use-npm
```
- For other installation issues, check the [Vue 2 README](../../app/vue/README.md), or the [Vue 3 README](../../app/vue3/README.md) for additional instructions.

2
docs/get-started/installation-problems/web-components.mdx
View File

@ -1,7 +1,7 @@
- Add the `--type web_components` flag to the installation command to set up Storybook manually:
```shell
npx sb init --type web_components
npx storybook init --type web_components
```
- For other installation issues, check the [Web Components README](../../app/web-components/README.md) for additional instructions.

2
docs/get-started/whats-a-story.md
View File

@ -93,6 +93,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
/>
</video>
Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../writing-tests/introduction.md) this for you.
Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/introduction.md) for you.
Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.

18
docs/sharing/publish-storybook.md
View File

@ -21,7 +21,8 @@ First, we'll need to build Storybook as a static web application. The functional
paths={[
'angular/custom-build-script-production.script-for-builder.js.mdx',
'angular/build-storybook-production-mode.with-builder.js.mdx',
'common/build-storybook-production-mode.js.mdx',
'common/build-storybook-production-mode.yarn.js.mdx',
'common/build-storybook-production-mode.npm.js.mdx',
]}
/>
@ -49,13 +50,16 @@ To get started, sign up with your GitHub, GitLab, Bitbucket, or email and genera
Next, install the [Chromatic CLI](https://www.npmjs.com/package/chromatic) package from npm:
```shell
# With npm
npm install --save-dev chromatic
<!-- prettier-ignore-start -->
# With yarn
yarn add --dev chromatic
```
<CodeSnippets
paths={[
'common/chromatic-install.yarn.js.mdx',
'common/chromatic-install.npm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Run the following command after the package finishes installing. Make sure that you replace `your-project-token` with your own project token.

6
docs/sharing/storybook-composition.md
View File

@ -74,12 +74,12 @@ You can also compose Storybooks based on the current development environment (e.
So far we've seen how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
```shell
npx sb extract
npx storybook extract
```
<div class="aside">
`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
`storybook extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
</div>
@ -100,7 +100,7 @@ Linking to a Storybook deployed using this approach will yield all the stories a
If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory you can use the following:
```shell
npx sb extract my-built-storybook-directory my-other-directory/stories.json
npx storybook extract my-built-storybook-directory my-other-directory/stories.json
```
When executed it will lookup a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information.

7
docs/snippets/common/build-storybook-production-mode.js.mdx
View File

@ -1,7 +0,0 @@
```shell
# With yarn
yarn build-storybook
# With npm
npm run build-storybook
```

3
docs/snippets/common/build-storybook-production-mode.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm run build-storybook
```

3
docs/snippets/common/build-storybook-production-mode.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn build-storybook
```

2
docs/snippets/common/button-story-project-args-theme.js.mdx
View File

@ -2,7 +2,7 @@
// preview.js
// All stories expect a theme arg
export const argTypes = { theme: { control: { options: ['light', 'dark'] } } };
export const argTypes = { theme: { control: 'select', options: ['light', 'dark'] } };
// The default value of the theme arg to all stories
export const args = { theme: 'light' };

3
docs/snippets/common/chromatic-install.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm install chromatic --save-dev
```

3
docs/snippets/common/chromatic-install.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn add --dev chromatic
```

2
docs/snippets/common/gizmo-story-controls-customization.js.mdx
View File

@ -52,7 +52,7 @@ export default {
meshColors: {
control: {
type: 'color',
presetsColors: ['#ff0000', '#00ff00', '#0000ff'],
presetColors: ['#ff0000', '#00ff00', '#0000ff'],
},
},
revisionDate: {

2
docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
View File

@ -60,7 +60,7 @@ import { Gizmo } from './Gizmo';
meshColors: {
control: {
type: 'color',
presetsColors: ['#ff0000', '#00ff00', '#0000ff'],
presetColors: ['#ff0000', '#00ff00', '#0000ff'],
},
},
revisionDate: {

12
docs/snippets/common/mdx-changelog-stories.mdx.mdx Normal file
View File

@ -0,0 +1,12 @@
```md
<!-- Changelog.stories.mdx -->
import { Meta } from "@storybook/addon-docs";
import Changelog from "../CHANGELOG.md";
<Meta title="Changelog" />
<Changelog />
```

3
docs/snippets/common/storybook-addon-actions-install.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm install @storybook/addon-actions --save-dev
```

3
docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn add --dev @storybook/addon-actions
```

3
docs/snippets/common/storybook-addon-essentials-install.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm install @storybook/addon-actions --save-dev
```

3
docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn add --dev @storybook/addon-essentials
```

3
docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm install @storybook/addon-storyshots --save-dev
```

3
docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn add --dev @storybook/addon-storyshots
```

3
docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm run storybook -- --debug-webpack
```

3
docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn storybook --debug-webpack
```

3
docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm run build-storybook -- --debug-webpack
```

3
docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn build-storybook --debug-webpack
```

22
docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx Normal file
View File

@ -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
},
},
],
};
```

6
docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
View File

@ -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
};
```

3
docs/snippets/common/storybook-msw-generate.msw.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npx msw init public/
```

3
docs/snippets/common/storybook-msw-install.npm.js.mdx Normal file
View 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
View File

@ -0,0 +1,3 @@
```shell
yarn add --dev msw msw-storybook-addon
```

25
docs/snippets/common/storybook-preview-register-msw-addon.js.mdx Normal file
View File

@ -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];
```

2
docs/snippets/common/storybook-test-runner-install.npm.js.mdx
View File

@ -1,3 +1,3 @@
```shell
npm install @storybook/test-runner jest --save-dev
npm install @storybook/test-runner jest@27 --save-dev
```

2
docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
View File

@ -1,3 +1,3 @@
```shell
yarn add --dev @storybook/test-runner jest
yarn add --dev @storybook/test-runner jest@27
```

2
docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
View File

@ -13,7 +13,7 @@ module.exports = {
// Merge custom configuration into the default config
return mergeConfig(config, {
// Use the same "resolve" configuration as your app
resolve: (await import('../vite.config.js')).default.resolve
resolve: (await import('../vite.config.js')).default.resolve,
// Add dependencies to pre-optimization
optimizeDeps: {
include: ['storybook-dark-mode'],

3
docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
npm install react react-dom @babel/cli
```

3
docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx Normal file
View File

@ -0,0 +1,3 @@
```shell
yarn add react react-dom @babel/cli
```

21
docs/snippets/html/button-story-component-decorator.js.mdx Normal file
View File

@ -0,0 +1,21 @@
```js
// Button.stories.js
import { createButton } from './Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
decorators: [(story) => {
const decorator = document.createElement('div');
decorator.style.margin = '3em';
decorator.appendChild(story());
return decorator;
}],
};
export const Primary = (args) => createButton(args);
```

Some files were not shown because too many files have changed in this diff Show More