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

Merge branch 'next' into feat/addons-actions-tsup

Browse Source 
# Conflicts:
#	code/addons/actions/package.json
This commit is contained in:
Norbert de Langen 2022-08-23 15:34:56 +02:00
commit c9d0d67478
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
291 changed files with 7283 additions and 3193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
.circleci/config.yml
View File

@ -195,13 +195,13 @@ jobs:
name: running local registry name: running local registry
command: | command: |
cd code cd code
yarn local-registry --port 6000 --open yarn local-registry --port 6001 --open
background: true background: true
- run: - run:
name: Wait for registry name: Wait for registry
command: | command: |
cd code cd code
yarn wait-on http://localhost:6000 yarn wait-on http://localhost:6001
- run: - run:
name: Run E2E (extended) tests name: Run E2E (extended) tests
command: | command: |
@ -225,13 +225,13 @@ jobs:
name: Running local registry name: Running local registry
command: | command: |
cd code cd code
yarn local-registry --port 6000 --open yarn local-registry --port 6001 --open
background: true background: true
- run: - run:
name: Wait for registry name: Wait for registry
command: | command: |
cd code cd code
yarn wait-on http://localhost:6000 yarn wait-on http://localhost:6001
- run: - run:
name: Run E2E (core) tests name: Run E2E (core) tests
# Do not test CRA here because it's done in PnP part # Do not test CRA here because it's done in PnP part
@ -265,11 +265,11 @@ jobs:
# at: . # at: .
# - run: # - run:
# name: Running local registry # name: Running local registry
# command: yarn local-registry --port 6000 --open # command: yarn local-registry --port 6001 --open
# background: true # background: true
# - run: # - run:
# name: Wait for registry # name: Wait for registry
# command: yarn wait-on http://localhost:6000 # command: yarn wait-on http://localhost:6001
# - run: # - run:
# name: Run smoke tests # name: Run smoke tests
# command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode # command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
@ -293,13 +293,13 @@ jobs:
name: Running local registry name: Running local registry
command: | command: |
cd code cd code
yarn local-registry --port 6000 --open yarn local-registry --port 6001 --open
background: true background: true
- run: - run:
name: Wait for registry name: Wait for registry
command: | command: |
cd code cd code
yarn wait-on http://localhost:6000 yarn wait-on http://localhost:6001
- run: - run:
name: set up cra repro, skip tests name: set up cra repro, skip tests
command: | command: |
@ -324,13 +324,13 @@ jobs:
name: Running local registry name: Running local registry
command: | command: |
cd code cd code
yarn local-registry --port 6000 --open yarn local-registry --port 6001 --open
background: true background: true
- run: - run:
name: Wait for registry name: Wait for registry
command: | command: |
cd code cd code
yarn wait-on http://localhost:6000 yarn wait-on http://localhost:6001
- run: - run:
name: run e2e tests cra name: run e2e tests cra
command: | command: |
@ -457,6 +457,114 @@ jobs:
cd code cd code
yarn coverage yarn coverage
## new workflow
create-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 2
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Creating Sandboxes
command: yarn task --task create --template $(yarn get-template ci) --force --no-before --junit
working_directory: code
- persist_to_workspace:
root: .
paths:
- sandbox
- store_test_results:
path: code/test-results
smoke-test-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 2
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Smoke Testing Sandboxes
command: yarn task --task smoke-test --template $(yarn get-template ci) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
build-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 2
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Building Sandboxes
command: yarn task --task build --template $(yarn get-template ci) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
- persist_to_workspace:
root: .
paths:
- sandbox
test-runner-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 2
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running Test Runner
command: yarn task --task test-runner --template $(yarn get-template ci) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
chromatic-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 2
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running Chromatic
command: yarn task --task chromatic --template $(yarn get-template ci) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
e2e-sandboxes:
docker:
- image: mcr.microsoft.com/playwright:v1.24.0-focal
parallelism: 2
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running E2E Tests
command: yarn task --task e2e-tests --template $(yarn get-template ci) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
- store_artifacts: # this is where playwright puts more complex stuff
path: code/playwright-results/
destination: playwright
workflows: workflows:
test: test:
jobs: jobs:
@ -500,3 +608,23 @@ workflows:
- cra-bench: - cra-bench:
requires: requires:
- publish - publish
## new workflow
- create-sandboxes:
requires:
- publish
- smoke-test-sandboxes:
requires:
- create-sandboxes
- build-sandboxes:
requires:
- create-sandboxes
- test-runner-sandboxes:
requires:
- build-sandboxes
- chromatic-sandboxes:
requires:
- build-sandboxes
- e2e-sandboxes:
requires:
- build-sandboxes

7
.github/workflows/generate-repros-next.yml vendored
View File

@ -3,6 +3,11 @@ name: Generate and push repros to the next branch
on: on:
schedule: schedule:
- cron: '2 2 */1 * *' - cron: '2 2 */1 * *'
workflow_dispatch:
# To remove when the branch will be merged
push:
branches:
- shilman/add-angular-repro-template
jobs: jobs:
generate: generate:
@ -21,7 +26,7 @@ jobs:
run: yarn bootstrap --prep run: yarn bootstrap --prep
working-directory: ./code working-directory: ./code
- name: Generate repros - name: Generate repros
run: yarn next-repro run: yarn generate-repros-next --local-registry
working-directory: ./code working-directory: ./code
- name: Publish repros to GitHub - name: Publish repros to GitHub
run: yarn publish-repros --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates-temp.git --push run: yarn publish-repros --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates-temp.git --push

3
.github/workflows/generate-repros.yml vendored
View File

@ -15,6 +15,9 @@ jobs:
env: env:
YARN_ENABLE_IMMUTABLE_INSTALLS: false YARN_ENABLE_IMMUTABLE_INSTALLS: false
steps: steps:
- uses: actions/setup-node@v2
with:
node-version: 14
- uses: actions/checkout@v2 - uses: actions/checkout@v2
- name: Setup git user - name: Setup git user
run: | run: |

1
.gitignore vendored
View File

@ -9,6 +9,7 @@ dist
junit.xml junit.xml
/repros /repros
/sandbox /sandbox
/built-sandboxes
.verdaccio-cache .verdaccio-cache
# Yarn stuff # Yarn stuff

72
CHANGELOG.md
View File

@ -1,3 +1,75 @@
## 7.0.0-alpha.23 (August 18, 2022)
#### Features
- UI: Polish canvas and sidebar for 7.0 [#18894](https://github.com/storybooks/storybook/pull/18894)
#### Maintenance
- Sandbox: Add ability to run from local repro [#18950](https://github.com/storybooks/storybook/pull/18950)
- Repros: Add ability to generate repros using local registry [#18948](https://github.com/storybooks/storybook/pull/18948)
- CLI: Move write/read package json into JsPackageManager [#18942](https://github.com/storybooks/storybook/pull/18942)
## 7.0.0-alpha.22 (August 18, 2022)
Failed publish to npm
## 7.0.0-alpha.21 (August 17, 2022)
#### Maintenance
- UI: Update every icon for v7 design [#18809](https://github.com/storybooks/storybook/pull/18809)
## 7.0.0-alpha.20 (August 16, 2022)
#### Features
- CLI: Automigration for new frameworks [#18919](https://github.com/storybooks/storybook/pull/18919)
#### Bug Fixes
- UI: Fix the order of addons appearing in prebuilt manager [#18918](https://github.com/storybooks/storybook/pull/18918)
#### Maintenance
- Exit sandbox gracefully on cancel [#18936](https://github.com/storybooks/storybook/pull/18936)
- Disable telemetry in monorepo and CI [#18935](https://github.com/storybooks/storybook/pull/18935)
- Convert cypress e2e tests to playwright [#18932](https://github.com/storybooks/storybook/pull/18932)
- CI: Refactor to use tasks [#18922](https://github.com/storybooks/storybook/pull/18922)
- Angular: Add renderer components / stories [#18934](https://github.com/storybooks/storybook/pull/18934)
- Examples: Add angular repro template and refactor [#18931](https://github.com/storybooks/storybook/pull/18931)
## 7.0.0-alpha.19 (August 12, 2022)
#### Features
- CLI: add "storybook scripts 7.0" automigrate command [#18769](https://github.com/storybooks/storybook/pull/18769)
- Interactions: Run conditionally based on query param [#18706](https://github.com/storybooks/storybook/pull/18706)
#### Bug Fixes
- API: Return defaultValue in useParameter if story is not prepared [#18887](https://github.com/storybooks/storybook/pull/18887)
- Store: always call composeConfigs in setProjectAnnotations [#18916](https://github.com/storybooks/storybook/pull/18916)
- CLI: install the same version as the user in sb-scripts automigration [#18917](https://github.com/storybooks/storybook/pull/18917)
- Theming: Add `create` export for lib/theming [#18906](https://github.com/storybooks/storybook/pull/18906)
- Telemetry: Improve addon extraction logic [#18868](https://github.com/storybooks/storybook/pull/18868)
- UI: Add image support to builder-manager [#18857](https://github.com/storybooks/storybook/pull/18857)
- ArgTypes: Fix check for undefined before [#18710](https://github.com/storybooks/storybook/pull/18710)
#### Maintenance
- Build: use ts-up to build addon-toolbars [#18847](https://github.com/storybooks/storybook/pull/18847)
- Build: Use ts-up to build channels [#18882](https://github.com/storybooks/storybook/pull/18882)
- Build: Use ts-up to build addon-links [#18908](https://github.com/storybooks/storybook/pull/18908)
- CLI: Fix remove dependencies logic [#18905](https://github.com/storybooks/storybook/pull/18905)
- CLI: Add uninstall deps to jsPackageManager [#18900](https://github.com/storybooks/storybook/pull/18900)
- Examples: Improve sandbox command error handling and debugging [#18869](https://github.com/storybooks/storybook/pull/18869)
- Examples: Change to self-hosted placeholder images [#18878](https://github.com/storybooks/storybook/pull/18878)
- CLI: add --no-init to repro-next command [#18866](https://github.com/storybooks/storybook/pull/18866)
- Build: Got verdaccio working, borrowing heavily from the old repro command [#18844](https://github.com/storybooks/storybook/pull/18844)
- Core-server: Move webpack to be a devDependency [#18856](https://github.com/storybooks/storybook/pull/18856)
## 7.0.0-alpha.18 (August 2, 2022) ## 7.0.0-alpha.18 (August 2, 2022)
#### Features #### Features

4
CONTRIBUTING.md
View File

@ -7,10 +7,10 @@
# Generating reproductions # Generating reproductions
The monorepo has a script that generates Storybook reproductions based on configurations set in the `scripts/next-repro-generators/repro-config.yml` file. This makes it possible to quickly bootstrap examples with and without Storybook, for given configurations (e.g. CRA, Angular, Vue, etc.) The monorepo has a script that generates Storybook reproductions based on configurations set in the `code/lib/cli/src/repro-templates.ts` file. This makes it possible to quickly bootstrap examples with and without Storybook, for given configurations (e.g. CRA, Angular, Vue, etc.)
To do so: To do so:
- Check the `scripts/next-repro-generators/repro-config.yml` if you want to see what will be generated - Check the `code/lib/cli/src/repro-templates.ts` if you want to see what will be generated
- Run `./generate-repros.sh` - Run `./generate-repros.sh`
- Check the result in the `repros` directory - Check the result in the `repros` directory

254
MIGRATION.md
View File

@ -3,6 +3,9 @@
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [Alpha release notes](#alpha-release-notes) - [Alpha release notes](#alpha-release-notes)
- [Breaking changes](#breaking-changes) - [Breaking changes](#breaking-changes)
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
- [Modern browser support](#modern-browser-support)
- [No more configuration for manager](#no-more-configuration-for-manager)
- [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed) - [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
- [Webpack4 support discontinued](#webpack4-support-discontinued) - [Webpack4 support discontinued](#webpack4-support-discontinued)
@ -13,7 +16,14 @@
- [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default) - [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default)
- [Babel mode v7 by default](#babel-mode-v7-by-default) - [Babel mode v7 by default](#babel-mode-v7-by-default)
- [7.0 feature flags removed](#70-feature-flags-removed) - [7.0 feature flags removed](#70-feature-flags-removed)
- [Removed docs.getContainer and getPage parameters](#removed-docs-getcontainer-and-getpage-parameters) - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
- [Icons API changed](#icons-api-changed)
- [Docs Changes](#docs-changes)
- [Standalone docs files](#standalone-docs-files)
- [Referencing stories in docs files](#referencing-stories-in-docs-files)
- [Docs Page](#docs-page)
- [Configuring the Docs Container](#configuring-the-docs-container)
- [External Docs](#external-docs)
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650) - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
- [Vue 3 upgrade](#vue-3-upgrade) - [Vue 3 upgrade](#vue-3-upgrade)
- [React18 new root API](#react18-new-root-api) - [React18 new root API](#react18-new-root-api)
@ -225,6 +235,70 @@ In the meantime, these migration notes are the best available documentation on t
### Breaking changes ### Breaking changes
#### No more default export from `@storybook/addons`
The default export from `@storybook/addons` has been removed. Please use the named exports instead:
```js
import { addons } from '@storybook/addons';
```
The named export has been available since 6.0 or earlier, so your updated code will be backwards-compatible with older versions of Storybook.
#### Modern browser support
Starting in storybook 7.0, storybook will no longer support IE11, amongst other legacy browser versions.
We now transpile our code with a target of `chrome >= 100` and node code is transpiled with a target of `node >= 14`.
This means code-features such as (but not limited to) `async/await`, arrow-functions, `const`,`let`, etc will exists in the code at runtime, and thus the runtime environment must support it.
Not just the runtime needs to support it, but some legacy loaders for webpack or other transpilation tools might need to be updated as well. For example certain versions of webpack 4 had parsers that could not parse the new syntax (e.g. optional chaining).
Some addons or libraries might depended on this legacy browser support, and thus might break. You might get an error like:
```
regeneratorRuntime is not defined
```
To fix these errors, the addon will have to be re-released with a newer browser-target for transpilation. This often looks something like this (but it's dependent on the build system the addon uses):
```js
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
shippedProposals: true,
useBuiltIns: 'usage',
corejs: '3',
modules: false,
targets: { chrome: '100' },
},
],
],
};
```
Here's an example PR to one of the storybook addons: https://github.com/storybookjs/addon-coverage/pull/3 doing just that.
#### No more configuration for manager
The storybook manager is no longer built with webpack. Now it's built with esbuild.
Therefore, it's no longer possible to configure the manager. Esbuild comes preconfigured to handle importing CSS, and images.
If you're currently loading files other than CSS or images into the manager, you'll need to make changes so the files get converted to JS before publishing your addon.
This means the preset value `managerWebpack` is no longer respected, and should be removed from presets and `main.js` files.
Addons that run in the manager can depend on `react` and `@storybook/*` packages directly. They do not need to be peerDependencies.
But very importantly, the build system ensures there will only be 1 version of these packages at runtime. The version will come from the `@storybook/ui` package, and not from the addon.
For this reason it's recommended to have these dependencies as `devDependencies` in your addon's `package.json`.
The full list of packages that Storybook's manager bundler makes available for addons is here: https://github.com/storybookjs/storybook/blob/next/code/lib/ui/src/globals/types.ts
Addons in the manager will no longer be bundled together anymore, which means that if 1 fails, it doesn't break the whole manager.
Each addon is imported into the manager as an ESM module that's bundled separately.
#### start-storybook / build-storybook binaries removed #### start-storybook / build-storybook binaries removed
SB6.x framework packages shipped binaries called `start-storybook` and `build-storybook`. SB6.x framework packages shipped binaries called `start-storybook` and `build-storybook`.
@ -398,6 +472,159 @@ In 7.0 we've removed the following feature flags:
It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly. It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
#### Icons API changed
For addon authors who use the `Icons` component, its API has been udpated in Storybook 7.
```diff
export interface IconsProps extends ComponentProps<typeof Svg> {
- icon?: IconKey;
- symbol?: IconKey;
+ icon: IconType;
+ useSymbol?: boolean;
}
```
Full change here: https://github.com/storybookjs/storybook/pull/18809
### Docs Changes
The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.
These changes are encapsulated in the following:
#### Standalone docs files
In Storybook 6.x, to create a standalone docs MDX file, you'd have to create a `.stories.mdx` file, and describe its location with the `Meta` doc block:
```mdx
import { Meta } from '@storybook/addon-docs';
<Meta title="Introduction" />
```
In 7.0, things are a little simpler -- you should call the file `.mdx` (drop the `.stories`). This will mean behind the scenes there is no story attached to this entry. You may also drop the `title` and use autotitle (and leave the `Meta` component out entirely).
Additionally, you can attach a standalone docs entry to a component, using the new `of={}` syntax on the `Meta` component:
```mdx
import { Meta } from '@storybook/blocks';
import * as ComponentStories from './some-component.stories';
<Meta of={ComponentStories} />
```
You can create as many docs entries as you like for a given component. Note that if you attach a docs entry to a component it will replace the automatically generated entry from `DocsPage` (See below).
By default docs entries are listed first for the component. You can sort them using story sorting.
#### Referencing stories in docs files
To reference a story in a MDX file, you should reference it with `of`:
```mdx
import { Meta, Story } from '@storybook/blocks';
import * as ComponentStories from './some-component.stories';
<Meta of={ComponentStories} />
<Story of={ComponentStories.standard} />
```
You can also reference a story from a different component:
```mdx
import { Meta, Story } from '@storybook/blocks';
import * as ComponentStories from './some-component.stories';
import * as SecondComponentStories from './second-component.stories';
<Meta of={ComponentStories} />
<Story of={SecondComponentStories.standard} meta={SecondComponentStories} />
```
#### Docs Page
In 7.0, rather than rendering each story in "docs view mode", Docs Page operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
You can configure Docs Page in `main.js`:
```js
module.exports = {
docs: {
docsPage: true, // set to false to disable docs page entirely
defaultTitle: 'Docs', // set to change the title of generated docs entries
},
};
```
You can change the default template in the same way as in 6.x, using the `docs.page` parameter.
#### Configuring the Docs Container
As in 6.x, you can override the docs container to configure docs further. This the container that each docs entry is rendered inside:
```js
// in preview.js
export const parameters = {
docs: {
container: // your container
}
}
```
You likely want to use the `DocsContainer` component exported by `@storybook/blocks` and consider the following examples:
**Overriding theme**:
To override the theme, you can continue to use the `docs.theme` parameter.
**Overriding MDX components**
If you want to override the MDX components supplied to your docs page, use the `MDXProvider` from `@mdx-js/react`:
```js
import { MDXProvider } from '@mdx-js/react';
import { DocsContainer } from '@storybook/blocks';
import * as DesignSystem from 'your-design-system';
export const MyDocsContainer = (props) => (
<MDXProvider
components={{
h1: DesignSystem.H1,
h2: DesignSystem.H2,
}}
>
<DocsContainer {...props} />
</MDXProvider>
);
```
#### External Docs
Storybook 7.0 can be used in the above way in externally created projects (i.e. custom docs sites). Your `.mdx` files defined as above should be portable to other contexts. You simply need to render them in an `ExternalDocs` component:
```js
// In your project somewhere:
import { ExternalDocs } from '@storybook/blocks';
// Import all the preview entries from addons that need to operate in your external docs,
// at a minimum likely your project's and your renderer's.
import * as reactAnnotations from '@storybook/react/preview';
import * as previewAnnotations from '../.storybook/preview';
export default function App({ Component, pageProps }) {
return (
<ExternalDocs
projectAnnotationsList={[reactAnnotations, previewAnnotations]}
>
<Component {...pageProps} />
</ExternalDocs>
);
}
```
## From version 6.4.x to 6.5.0 ## From version 6.4.x to 6.5.0
### Vue 3 upgrade ### Vue 3 upgrade
@ -515,7 +742,8 @@ import startCase from 'lodash/startCase';
addons.setConfig({ addons.setConfig({
sidebar: { sidebar: {
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)), renderLabel: ({ name, type }) =>
type === 'story' ? name : startCase(name),
}, },
}); });
``` ```
@ -942,7 +1170,11 @@ After:
```js ```js
// .storybook/main.js // .storybook/main.js
module.exports = { module.exports = {
staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }], staticDirs: [
'../public',
'../static',
{ from: '../foo/assets', to: '/assets' },
],
}; };
``` ```
@ -1490,13 +1722,17 @@ This breaking change only affects you if your stories actually use the context,
Consider the following story that uses the context: Consider the following story that uses the context:
```js ```js
export const Dummy = ({ parameters }) => <div>{JSON.stringify(parameters)}</div>; export const Dummy = ({ parameters }) => (
<div>{JSON.stringify(parameters)}</div>
);
``` ```
Here's an updated story for 6.0 that ignores the args object: Here's an updated story for 6.0 that ignores the args object:
```js ```js
export const Dummy = (_args, { parameters }) => <div>{JSON.stringify(parameters)}</div>; export const Dummy = (_args, { parameters }) => (
<div>{JSON.stringify(parameters)}</div>
);
``` ```
Alternatively, if you want to opt out of the new behavior, you can add the following to your `.storybook/preview.js` config: Alternatively, if you want to opt out of the new behavior, you can add the following to your `.storybook/preview.js` config:
@ -2286,7 +2522,9 @@ For example, here's how to sort by story ID using `storySort`:
addParameters({ addParameters({
options: { options: {
storySort: (a, b) => storySort: (a, b) =>
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), a[1].kind === b[1].kind
? 0
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
}, },
}); });
``` ```
@ -2332,7 +2570,9 @@ Storybook 5.1 relies on `core-js@^3.0.0` and therefore causes a conflict with An
{ {
"compilerOptions": { "compilerOptions": {
"paths": { "paths": {
"core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"], "core-js/es7/reflect": [
"node_modules/core-js/proposals/reflect-metadata"
],
"core-js/es6/*": ["node_modules/core-js/es"] "core-js/es6/*": ["node_modules/core-js/es"]
} }
} }

50
README.md
View File

@ -93,46 +93,46 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
### Supported Frameworks ### Supported Frameworks
| Framework | Demo | | | Renderer | 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) | | [React](code/renderers/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)](code/renderers/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) | | [Vue](code/renderers/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)](code/renderers/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) | | [Angular](code/frameworks/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)](code/frameworks/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) | | [Web components](code/renderers/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)](code/renderers/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) | | [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) | | [HTML](code/renderers/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)](code/renderers/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) | | [Ember](code/frameworks/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)](code/frameworks/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) | | [Svelte](code/renderers/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)](code/renderers/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) | | [Preact](code/renderers/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)](code/renderers/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) | | [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) | | [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 ### Sub Projects
- [CLI](lib/cli) - Streamlined installation for a variety of app types - [CLI](code/lib/cli) - Streamlined installation for a variety of app types
- [examples](examples) - Code examples to illustrate different Storybook use cases - [examples](code/examples) - Code examples to illustrate different Storybook use cases
### Addons ### Addons
| Addons | | | Addons | |
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook | | [a11y](code/addons/a11y/) | Test components for user accessibility in Storybook |
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI | | [actions](code/addons/actions/) | Log actions as users interact with components in the Storybook UI |
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI | | [backgrounds](code/addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
| [cssresources](https://github.com/storybookjs/addon-cssresources) | Dynamically add/remove css resources to the component iframe | | [cssresources](https://github.com/storybookjs/addon-cssresources) | Dynamically add/remove css resources to the component iframe |
| [design assets](https://github.com/storybookjs/addon-design-assets) | View images, videos, weblinks alongside your story | | [design assets](https://github.com/storybookjs/addon-design-assets) | View images, videos, weblinks alongside your story |
| [docs](addons/docs/) | Add high quality documentation to your components | | [docs](code/addons/docs/) | Add high quality documentation to your components |
| [events](https://github.com/storybookjs/addon-events) | Interactively fire events to components that respond to EventEmitter | | [events](https://github.com/storybookjs/addon-events) | Interactively fire events to components that respond to EventEmitter |
| [google-analytics](https://github.com/storybookjs/addon-google-analytics) | Reports google analytics on stories | | [google-analytics](https://github.com/storybookjs/addon-google-analytics) | Reports google analytics on stories |
| [graphql](https://github.com/storybookjs/addon-graphql) | Query a GraphQL server within Storybook stories | | [graphql](https://github.com/storybookjs/addon-graphql) | Query a GraphQL server within Storybook stories |
| [jest](addons/jest/) | View the results of components' unit tests in Storybook | | [jest](code/addons/jest/) | View the results of components' unit tests in Storybook |
| [links](addons/links/) | Create links between stories | | [links](code/addons/links/) | Create links between stories |
| [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params | | [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params |
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook | | [storyshots](code/addons/storyshots/) | Snapshot testing for components in Storybook |
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI | | [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI |
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook | | [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
| [outline](addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI | | [outline](code/addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI |
| [measure](addons/measure/) | Visually inspect the layout and box model within the Storybook UI | | [measure](code/addons/measure/) | Visually inspect the layout and box model within the Storybook UI |
See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support) See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
@ -148,9 +148,9 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr
In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools. In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
If you're using info/notes, we highly recommend you to migrate to [docs](addons/docs/) instead, and [here is a guide](addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you. If you're using info/notes, we highly recommend you to migrate to [docs](code/addons/docs/) instead, and [here is a guide](code/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you.
If you're using contexts, we highly recommend you to migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you. If you're using contexts, we highly recommend you to migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you.
## Badges & Presentation materials ## Badges & Presentation materials

6
code/.eslintrc.js
View File

@ -95,5 +95,11 @@ module.exports = {
'react/no-unknown-property': 'off', // Need to deactivate otherwise eslint replaces some unknown properties with React ones 'react/no-unknown-property': 'off', // Need to deactivate otherwise eslint replaces some unknown properties with React ones
}, },
}, },
{
files: ['**/e2e-tests/**/*'],
rules: {
'jest/no-test-callback': 'off', // These aren't jest tests
},
},
], ],
}; };

6
code/.gitignore vendored
View File

@ -36,6 +36,12 @@ examples/angular-cli/addon-jest.testresults.json
junit.xml junit.xml
.next .next
/test-results/
/playwright-results/
/playwright-report/
/playwright/.cache/
# Yarn stuff # Yarn stuff
/**/.yarn/* /**/.yarn/*
!/**/.yarn/releases !/**/.yarn/releases

20
code/addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-a11y", "name": "@storybook/addon-a11y",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Test component compliance with web accessibility standards", "description": "Test component compliance with web accessibility standards",
"keywords": [ "keywords": [
"a11y", "a11y",
@ -62,15 +62,15 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/channels": "7.0.0-alpha.18", "@storybook/channels": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"axe-core": "^4.2.0", "axe-core": "^4.2.0",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0", "global": "^4.4.0",
@ -105,7 +105,7 @@
"./src/preview.tsx" "./src/preview.tsx"
] ]
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Accessibility", "displayName": "Accessibility",
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

2
code/addons/a11y/src/components/Report/Item.tsx
View File

@ -75,7 +75,7 @@ export const Item = (props: ItemProps) => {
<Wrapper> <Wrapper>
<HeaderBar onClick={() => onToggle(!open)} role="button"> <HeaderBar onClick={() => onToggle(!open)} role="button">
<Icon <Icon
icon="chevrondown" icon="arrowdown"
color="#9DA5AB" color="#9DA5AB"
style={{ style={{
transform: `rotate(${open ? 0 : -90}deg)`, transform: `rotate(${open ? 0 : -90}deg)`,

16
code/addons/actions/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-actions", "name": "@storybook/addon-actions",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Get UI feedback when an action is performed on an interactive element", "description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [ "keywords": [
"storybook", "storybook",
@ -58,13 +58,13 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"dequal": "^2.0.2", "dequal": "^2.0.2",
"global": "^4.4.0", "global": "^4.4.0",
@ -103,7 +103,7 @@
"./src/preview.ts" "./src/preview.ts"
] ]
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Actions", "displayName": "Actions",
"unsupportedFrameworks": [ "unsupportedFrameworks": [

16
code/addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-backgrounds", "name": "@storybook/addon-backgrounds",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Switch backgrounds to view components in different settings", "description": "Switch backgrounds to view components in different settings",
"keywords": [ "keywords": [
"addon", "addon",
@ -62,13 +62,13 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0", "global": "^4.4.0",
"memoizerific": "^1.11.3", "memoizerific": "^1.11.3",
@ -100,7 +100,7 @@
"./src/preview.tsx" "./src/preview.tsx"
] ]
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Backgrounds", "displayName": "Backgrounds",
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

2
code/addons/controls/README.md
View File

@ -210,4 +210,4 @@ export const Template = (args) => <Button {...args} />
</Story> </Story>
``` ```
For more info, see a full [Controls example in MDX for Vue](https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx). For more info, see a full [Controls example in MDX for Vue](https://raw.githubusercontent.com/storybookjs/storybook/next/code/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx).

22
code/addons/controls/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-controls", "name": "@storybook/addon-controls",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Interact with component inputs dynamically in the Storybook UI", "description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [ "keywords": [
"addon", "addon",
@ -57,16 +57,16 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/blocks": "7.0.0-alpha.18", "@storybook/blocks": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-common": "7.0.0-alpha.18", "@storybook/core-common": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/node-logger": "7.0.0-alpha.18", "@storybook/node-logger": "7.0.0-alpha.23",
"@storybook/store": "7.0.0-alpha.18", "@storybook/store": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"ts-dedent": "^2.0.0" "ts-dedent": "^2.0.0"
@ -93,7 +93,7 @@
], ],
"platform": "browser" "platform": "browser"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Controls", "displayName": "Controls",
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

24
code/addons/docs/README.md
View File

@ -37,7 +37,7 @@ Click on the `Docs` tab to see it:
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" /> <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
</center> </center>
For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md). For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/docspage.md).
## MDX ## MDX
@ -73,7 +73,7 @@ And here's how that's rendered in Storybook:
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" /> <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
</center> </center>
For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md). For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
## Framework support ## Framework support
@ -83,7 +83,7 @@ Storybook Docs supports all view layers that Storybook supports except for React
**Note:** `#` = WIP support **Note:** `#` = WIP support
Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/multiframework.md) Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/multiframework.md)
## Installation ## Installation
@ -108,7 +108,7 @@ module.exports = {
}; };
``` ```
If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/README.md), you will need to If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots/storyshots-core/README.md), you will need to
configure Jest to transform MDX stories into something Storyshots can understand: configure Jest to transform MDX stories into something Storyshots can understand:
Add the following to your Jest configuration: Add the following to your Jest configuration:
@ -124,12 +124,12 @@ Add the following to your Jest configuration:
### Be sure to check framework specific installation needs ### Be sure to check framework specific installation needs
- [React](https://github.com/storybookjs/storybook/tree/next/addons/docs/react) (covered here) - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
- [Vue](https://github.com/storybookjs/storybook/tree/next/addons/docs/vue) - [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
- [Angular](https://github.com/storybookjs/storybook/tree/next/addons/docs/angular) - [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
- [Ember](https://github.com/storybookjs/storybook/tree/next/addons/docs/ember) - [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
- [Web Components](https://github.com/storybookjs/storybook/tree/next/addons/docs/web-components) - [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components)
- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/addons/docs/common) - [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/common)
## Preset options ## Preset options
@ -229,12 +229,12 @@ addParameters({
## TypeScript configuration ## TypeScript configuration
As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md). As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
## More resources ## More resources
Want to learn more? Here are some more articles on Storybook Docs: Want to learn more? Here are some more articles on Storybook Docs:
- References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md) - References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md)
- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
- Example: [Storybook Design System](https://github.com/storybookjs/design-system) - Example: [Storybook Design System](https://github.com/storybookjs/design-system)

4
code/addons/docs/docs/docspage.md
View File

@ -55,7 +55,7 @@ import { Badge } from './Badge';
storiesOf('Path/to/Badge', module).addParameters({ component: Badge }); storiesOf('Path/to/Badge', module).addParameters({ component: Badge });
``` ```
If you're coming from the `storiesOf` format, there's [a codemod that adds it for you](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#add-component-parameters). If you're coming from the `storiesOf` format, there's [a codemod that adds it for you](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md#add-component-parameters).
## Subcomponents parameter ## Subcomponents parameter
@ -145,7 +145,7 @@ export default {
}; };
``` ```
You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js). You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js).
## Story file names ## Story file names

24
code/addons/docs/docs/props-tables.md
View File

@ -83,7 +83,7 @@ export const WithControls = (args) => <MyComponent {...args} />;
<ArgsTable story="Controls" /> <ArgsTable story="Controls" />
``` ```
For a very detailed walkthrough of how to write stories that use controls, see the [addon-controls README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories). For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/react/essentials/controls).
## Customization ## Customization
@ -187,20 +187,20 @@ This would render a row with a modified description, a type display with a dropd
> - `type: 'number'` is shorthand for `type: { name: 'number' }` > - `type: 'number'` is shorthand for `type: { name: 'number' }`
> - `control: 'radio'` is shorthand for `control: { type: 'radio' }` > - `control: 'radio'` is shorthand for `control: { type: 'radio' }`
Controls customization has an entire section in the [`addon-controls` README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#configuration). Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/react/essentials/controls#configuration).
Here are the possible customizations for the rest of the prop table: Here are the possible customizations for the rest of the prop table:
| Field | Description | | Field | Description |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | ---------------------------- | ---------------------------------------------------------------------------------------------------- |
| `name` | The name of the property | | `name` | The name of the property |
| `type.required` | Whether or not the property is required | | `type.required` | Whether or not the property is required |
| `description` | A markdown description for the property | | `description` | A markdown description for the property |
| `table.type.summary` | A short version of the type | | `table.type.summary` | A short version of the type |
| `table.type.detail` | A longer version of the type (if it's a complex type) | | `table.type.detail` | A longer version of the type (if it's a complex type) |
| `table.defaultValue.summary` | A short version of the default value | | `table.defaultValue.summary` | A short version of the default value |
| `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) | | `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) |
| `control` | See [`addon-controls` README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#configuration) | | `control` | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) |
### Custom ArgTypes in MDX ### Custom ArgTypes in MDX

2
code/addons/docs/docs/recipes.md
View File

@ -32,7 +32,7 @@ If you want to intersperse longform documentation in your Storybook, for example
## Mixed CSF / MDX Stories ## Mixed CSF / MDX Stories
Can't decide between CSF and MDX? In transition? Or have you found that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) can help. Can't decide between CSF and MDX? In transition? Or have you found that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md) can help.
The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles. The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles.

32
code/addons/docs/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-docs", "name": "@storybook/addon-docs",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Document component usage and properties in Markdown", "description": "Document component usage and properties in Markdown",
"keywords": [ "keywords": [
"addon", "addon",
@ -53,22 +53,22 @@
"@babel/preset-env": "^7.12.11", "@babel/preset-env": "^7.12.11",
"@jest/transform": "^26.6.2", "@jest/transform": "^26.6.2",
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^1.6.22",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/blocks": "7.0.0-alpha.18", "@storybook/blocks": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-common": "7.0.0-alpha.18", "@storybook/core-common": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/csf-tools": "7.0.0-alpha.18", "@storybook/csf-tools": "7.0.0-alpha.23",
"@storybook/docs-tools": "7.0.0-alpha.18", "@storybook/docs-tools": "7.0.0-alpha.23",
"@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0", "@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
"@storybook/node-logger": "7.0.0-alpha.18", "@storybook/node-logger": "7.0.0-alpha.23",
"@storybook/postinstall": "7.0.0-alpha.18", "@storybook/postinstall": "7.0.0-alpha.23",
"@storybook/preview-web": "7.0.0-alpha.18", "@storybook/preview-web": "7.0.0-alpha.23",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@storybook/store": "7.0.0-alpha.18", "@storybook/store": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"dequal": "^2.0.2", "dequal": "^2.0.2",
@ -104,7 +104,7 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Docs", "displayName": "Docs",
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

2
code/addons/essentials/README.md
View File

@ -14,6 +14,8 @@ Storybook essentials includes the following addons. Addons can be disabled and r
- [Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs) - [Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs)
- [Viewport](https://github.com/storybookjs/storybook/tree/next/code/addons/viewport) - [Viewport](https://github.com/storybookjs/storybook/tree/next/code/addons/viewport)
- [Toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) - [Toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars)
- [Measure](https://github.com/storybookjs/storybook/tree/next/code/addons/measure)
- [Outline](https://github.com/storybookjs/storybook/tree/next/code/addons/outline)
## Installation ## Installation

32
code/addons/essentials/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-essentials", "name": "@storybook/addon-essentials",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Curated addons to bring out the best of Storybook", "description": "Curated addons to bring out the best of Storybook",
"keywords": [ "keywords": [
"addon", "addon",
@ -33,25 +33,25 @@
"prepare": "node ../../../scripts/prepare.js" "prepare": "node ../../../scripts/prepare.js"
}, },
"dependencies": { "dependencies": {
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-measure": "7.0.0-alpha.18", "@storybook/addon-measure": "7.0.0-alpha.23",
"@storybook/addon-outline": "7.0.0-alpha.18", "@storybook/addon-outline": "7.0.0-alpha.23",
"@storybook/addon-toolbars": "7.0.0-alpha.18", "@storybook/addon-toolbars": "7.0.0-alpha.23",
"@storybook/addon-viewport": "7.0.0-alpha.18", "@storybook/addon-viewport": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/core-common": "7.0.0-alpha.18", "@storybook/core-common": "7.0.0-alpha.23",
"@storybook/node-logger": "7.0.0-alpha.18", "@storybook/node-logger": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"ts-dedent": "^2.0.0" "ts-dedent": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@storybook/vue": "7.0.0-alpha.18", "@storybook/vue": "7.0.0-alpha.23",
"@types/jest": "^26.0.16", "@types/jest": "^26.0.16",
"typescript": "~4.6.3" "typescript": "~4.6.3"
}, },
@ -99,5 +99,5 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53" "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a"
} }

8
code/addons/highlight/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-highlight", "name": "@storybook/addon-highlight",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Highlight DOM nodes within your stories", "description": "Highlight DOM nodes within your stories",
"keywords": [ "keywords": [
"storybook-addons", "storybook-addons",
@ -37,8 +37,8 @@
"prepare": "node ../../../scripts/prepare.js" "prepare": "node ../../../scripts/prepare.js"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0" "global": "^4.4.0"
}, },
@ -49,7 +49,7 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"sbmodern": "dist/modern/index.js", "sbmodern": "dist/modern/index.js",
"storybook": { "storybook": {
"displayName": "Highlight", "displayName": "Highlight",

20
code/addons/interactions/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-interactions", "name": "@storybook/addon-interactions",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Automate, test and debug user interactions", "description": "Automate, test and debug user interactions",
"keywords": [ "keywords": [
"storybook-addons", "storybook-addons",
@ -36,15 +36,15 @@
}, },
"dependencies": { "dependencies": {
"@devtools-ds/object-inspector": "^1.1.2", "@devtools-ds/object-inspector": "^1.1.2",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-common": "7.0.0-alpha.18", "@storybook/core-common": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/instrumenter": "7.0.0-alpha.18", "@storybook/instrumenter": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0", "global": "^4.4.0",
"jest-mock": "^27.0.6", "jest-mock": "^27.0.6",
@ -72,7 +72,7 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Interactions", "displayName": "Interactions",
"unsupportedFrameworks": [ "unsupportedFrameworks": [

33
code/addons/interactions/src/Panel.test.ts
View File

@ -7,19 +7,22 @@ describe('Panel', () => {
{ {
callId: 'story--id [4] findByText', callId: 'story--id [4] findByText',
status: CallStates.DONE, status: CallStates.DONE,
ancestors: [],
}, },
{ {
callId: 'story--id [5] click', callId: 'story--id [5] click',
status: CallStates.DONE, status: CallStates.DONE,
ancestors: [],
}, },
{ {
callId: 'story--id [6] waitFor', callId: 'story--id [6] waitFor',
status: CallStates.DONE, status: CallStates.DONE,
ancestors: [],
}, },
{ {
callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith', callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
parentId: 'story--id [6] waitFor',
status: CallStates.DONE, status: CallStates.DONE,
ancestors: ['story--id [6] waitFor'],
}, },
]; ];
const calls = new Map<Call['id'], Call>( const calls = new Map<Call['id'], Call>(
@ -27,6 +30,7 @@ describe('Panel', () => {
{ {
id: 'story--id [0] action', id: 'story--id [0] action',
storyId: 'story--id', storyId: 'story--id',
ancestors: [],
cursor: 0, cursor: 0,
path: [], path: [],
method: 'action', method: 'action',
@ -37,6 +41,7 @@ describe('Panel', () => {
{ {
id: 'story--id [1] action', id: 'story--id [1] action',
storyId: 'story--id', storyId: 'story--id',
ancestors: [],
cursor: 1, cursor: 1,
path: [], path: [],
method: 'action', method: 'action',
@ -47,6 +52,7 @@ describe('Panel', () => {
{ {
id: 'story--id [2] action', id: 'story--id [2] action',
storyId: 'story--id', storyId: 'story--id',
ancestors: [],
cursor: 2, cursor: 2,
path: [], path: [],
method: 'action', method: 'action',
@ -57,6 +63,7 @@ describe('Panel', () => {
{ {
id: 'story--id [3] within', id: 'story--id [3] within',
storyId: 'story--id', storyId: 'story--id',
ancestors: [],
cursor: 3, cursor: 3,
path: [], path: [],
method: 'within', method: 'within',
@ -67,6 +74,7 @@ describe('Panel', () => {
{ {
id: 'story--id [4] findByText', id: 'story--id [4] findByText',
storyId: 'story--id', storyId: 'story--id',
ancestors: [],
cursor: 4, cursor: 4,
path: [{ __callId__: 'story--id [3] within' }], path: [{ __callId__: 'story--id [3] within' }],
method: 'findByText', method: 'findByText',
@ -77,6 +85,7 @@ describe('Panel', () => {
{ {
id: 'story--id [5] click', id: 'story--id [5] click',
storyId: 'story--id', storyId: 'story--id',
ancestors: [],
cursor: 5, cursor: 5,
path: ['userEvent'], path: ['userEvent'],
method: 'click', method: 'click',
@ -86,8 +95,8 @@ describe('Panel', () => {
}, },
{ {
id: 'story--id [6] waitFor [0] expect', id: 'story--id [6] waitFor [0] expect',
parentId: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
ancestors: ['story--id [6] waitFor'],
cursor: 0, cursor: 0,
path: [], path: [],
method: 'expect', method: 'expect',
@ -97,8 +106,8 @@ describe('Panel', () => {
}, },
{ {
id: 'story--id [6] waitFor [1] stringMatching', id: 'story--id [6] waitFor [1] stringMatching',
parentId: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
ancestors: ['story--id [6] waitFor'],
cursor: 1, cursor: 1,
path: ['expect'], path: ['expect'],
method: 'stringMatching', method: 'stringMatching',
@ -108,8 +117,8 @@ describe('Panel', () => {
}, },
{ {
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith', id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
parentId: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
ancestors: ['story--id [6] waitFor'],
cursor: 2, cursor: 2,
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }], path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
method: 'toHaveBeenCalledWith', method: 'toHaveBeenCalledWith',
@ -120,6 +129,7 @@ describe('Panel', () => {
{ {
id: 'story--id [6] waitFor', id: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
ancestors: [],
cursor: 6, cursor: 6,
path: [], path: [],
method: 'waitFor', method: 'waitFor',
@ -138,6 +148,7 @@ describe('Panel', () => {
...calls.get('story--id [4] findByText'), ...calls.get('story--id [4] findByText'),
status: CallStates.DONE, status: CallStates.DONE,
childCallIds: undefined, childCallIds: undefined,
isHidden: false,
isCollapsed: false, isCollapsed: false,
toggleCollapsed: expect.any(Function), toggleCollapsed: expect.any(Function),
}, },
@ -145,6 +156,7 @@ describe('Panel', () => {
...calls.get('story--id [5] click'), ...calls.get('story--id [5] click'),
status: CallStates.DONE, status: CallStates.DONE,
childCallIds: undefined, childCallIds: undefined,
isHidden: false,
isCollapsed: false, isCollapsed: false,
toggleCollapsed: expect.any(Function), toggleCollapsed: expect.any(Function),
}, },
@ -152,6 +164,7 @@ describe('Panel', () => {
...calls.get('story--id [6] waitFor'), ...calls.get('story--id [6] waitFor'),
status: CallStates.DONE, status: CallStates.DONE,
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'], childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
isHidden: false,
isCollapsed: false, isCollapsed: false,
toggleCollapsed: expect.any(Function), toggleCollapsed: expect.any(Function),
}, },
@ -159,13 +172,14 @@ describe('Panel', () => {
...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'), ...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
status: CallStates.DONE, status: CallStates.DONE,
childCallIds: undefined, childCallIds: undefined,
isHidden: false,
isCollapsed: false, isCollapsed: false,
toggleCollapsed: expect.any(Function), toggleCollapsed: expect.any(Function),
}, },
]); ]);
}); });
it('omits calls for which the parent is collapsed', () => { it('hides calls for which the parent is collapsed', () => {
const withCollapsed = new Set<Call['id']>(['story--id [6] waitFor']); const withCollapsed = new Set<Call['id']>(['story--id [6] waitFor']);
expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([ expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([
@ -173,16 +187,25 @@ describe('Panel', () => {
...calls.get('story--id [4] findByText'), ...calls.get('story--id [4] findByText'),
childCallIds: undefined, childCallIds: undefined,
isCollapsed: false, isCollapsed: false,
isHidden: false,
}), }),
expect.objectContaining({ expect.objectContaining({
...calls.get('story--id [5] click'), ...calls.get('story--id [5] click'),
childCallIds: undefined, childCallIds: undefined,
isCollapsed: false, isCollapsed: false,
isHidden: false,
}), }),
expect.objectContaining({ expect.objectContaining({
...calls.get('story--id [6] waitFor'), ...calls.get('story--id [6] waitFor'),
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'], childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
isCollapsed: true, isCollapsed: true,
isHidden: false,
}),
expect.objectContaining({
...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
childCallIds: undefined,
isCollapsed: false,
isHidden: true,
}), }),
]); ]);
}); });

28
code/addons/interactions/src/Panel.tsx
View File

@ -16,6 +16,7 @@ import { TabIcon, TabStatus } from './components/TabStatus';
interface Interaction extends Call { interface Interaction extends Call {
status: Call['status']; status: Call['status'];
childCallIds: Call['id'][]; childCallIds: Call['id'][];
isHidden: boolean;
isCollapsed: boolean; isCollapsed: boolean;
toggleCollapsed: () => void; toggleCollapsed: () => void;
} }
@ -43,16 +44,18 @@ export const getInteractions = ({
const callsById = new Map<Call['id'], Call>(); const callsById = new Map<Call['id'], Call>();
const childCallMap = new Map<Call['id'], Call['id'][]>(); const childCallMap = new Map<Call['id'], Call['id'][]>();
return log return log
.filter(({ callId, parentId }) => { .map<Call & { isHidden: boolean }>(({ callId, ancestors, status }) => {
if (!parentId) return true; let isHidden = false;
childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId)); ancestors.forEach((ancestor) => {
return !collapsed.has(parentId); if (collapsed.has(ancestor)) isHidden = true;
childCallMap.set(ancestor, (childCallMap.get(ancestor) || []).concat(callId));
});
return { ...calls.get(callId), status, isHidden };
}) })
.map(({ callId, status }) => ({ ...calls.get(callId), status } as Call))
.map<Interaction>((call) => { .map<Interaction>((call) => {
const status = const status =
call.status === CallStates.ERROR && call.status === CallStates.ERROR &&
callsById.get(call.parentId)?.status === CallStates.ACTIVE callsById.get(call.ancestors.slice(-1)[0])?.status === CallStates.ACTIVE
? CallStates.ACTIVE ? CallStates.ACTIVE
: call.status; : call.status;
callsById.set(call.id, { ...call, status }); callsById.set(call.id, { ...call, status });
@ -84,7 +87,8 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
const [interactions, setInteractions] = React.useState<Interaction[]>([]); const [interactions, setInteractions] = React.useState<Interaction[]>([]);
const [interactionsCount, setInteractionsCount] = React.useState<number>(); const [interactionsCount, setInteractionsCount] = React.useState<number>();
// Calls are tracked in a ref so we don't needlessly rerender. // Log and calls are tracked in a ref so we don't needlessly rerender.
const log = React.useRef<LogItem[]>([]);
const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map()); const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call); const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
@ -110,6 +114,7 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
setInteractions( setInteractions(
getInteractions({ log: payload.logItems, calls: calls.current, collapsed, setCollapsed }) getInteractions({ log: payload.logItems, calls: calls.current, collapsed, setCollapsed })
); );
log.current = payload.logItems;
}, },
[STORY_RENDER_PHASE_CHANGED]: (event) => { [STORY_RENDER_PHASE_CHANGED]: (event) => {
setStoryId(event.storyId); setStoryId(event.storyId);
@ -124,7 +129,6 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
setErrored(true); setErrored(true);
}, },
[PLAY_FUNCTION_THREW_EXCEPTION]: (e) => { [PLAY_FUNCTION_THREW_EXCEPTION]: (e) => {
console.log('PLAY_FUNCTION_THREW_EXCEPTION');
if (e?.message !== IGNORED_EXCEPTION.message) setCaughtException(e); if (e?.message !== IGNORED_EXCEPTION.message) setCaughtException(e);
else setCaughtException(undefined); else setCaughtException(undefined);
}, },
@ -132,9 +136,15 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
[collapsed] [collapsed]
); );
React.useEffect(() => {
setInteractions(
getInteractions({ log: log.current, calls: calls.current, collapsed, setCollapsed })
);
}, [collapsed]);
React.useEffect(() => { React.useEffect(() => {
if (isPlaying || isRerunAnimating) return; if (isPlaying || isRerunAnimating) return;
setInteractionsCount(interactions.length); setInteractionsCount(interactions.filter(({ method }) => method !== 'step').length);
}, [interactions, isPlaying, isRerunAnimating]); }, [interactions, isPlaying, isRerunAnimating]);
const controls = React.useMemo( const controls = React.useMemo(

33
code/addons/interactions/src/components/AccountForm/addon-interactions.stories.mdx
View File

@ -1,33 +0,0 @@
import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { expect } from '@storybook/jest';
import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
import { AccountForm } from './AccountForm';
<Meta
title="Addons/Interactions/Mdx"
component={AccountForm}
parameters={{ layout: 'centered', theme: 'light' }}
argTypes={{
onSubmit: { action: true },
}}
/>
## AccountForm
<Canvas>
<Story
name="StandardEmailFilled"
args={{
passwordVerification: false,
}}
play={async (context) => {
const { args, canvasElement } = context
const canvas = within(canvasElement)
await userEvent.type(canvas.getByTestId('email'), 'username@email.com')
await userEvent.type(canvas.getByTestId('password1'), 'thepassword')
await userEvent.click(canvas.getByRole('button', { name: /create account/i }))
expect(args.onSubmit).not.toHaveBeenCalled()
}}/>
</Canvas>

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

@ -1,225 +0,0 @@
import { Story as CSF2Story, Meta, ComponentStoryObj } from '@storybook/react';
import { expect } from '@storybook/jest';
import {
within,
waitFor,
fireEvent,
userEvent,
waitForElementToBeRemoved,
} from '@storybook/testing-library';
import React from 'react';
import { AccountForm } from './AccountForm';
export default {
title: 'Addons/Interactions/AccountForm',
component: AccountForm,
parameters: {
layout: 'centered',
theme: 'light',
options: { selectedPanel: 'storybook/interactions/panel' },
},
argTypes: {
onSubmit: { action: true },
},
} as Meta;
type CSF3Story = ComponentStoryObj<typeof AccountForm>;
export const Demo: CSF2Story = (args) => (
<button type="button" onClick={() => args.onSubmit('clicked')}>
Click
</button>
);
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 Exception = Demo.bind({});
Exception.play = () => Demo.play(undefined as any); // deepscan-disable-line
Exception.parameters = { chromatic: { disableSnapshot: true } };
export const FindBy: CSF2Story = (args) => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => setIsLoading(false), 500);
}, []);
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
};
FindBy.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByRole('button');
await expect(true).toBe(true);
};
export const WaitFor: CSF2Story = (args) => (
<button type="button" onClick={() => setTimeout(() => args.onSubmit('clicked'), 100)}>
Click
</button>
);
WaitFor.play = async ({ args, canvasElement }) => {
await userEvent.click(await within(canvasElement).findByText('Click'));
await waitFor(async () => {
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
await expect(true).toBe(true);
});
};
export const WaitForElementToBeRemoved: CSF2Story = () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => setIsLoading(false), 1500);
}, []);
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
};
WaitForElementToBeRemoved.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
const button = await canvas.findByText('Loaded!');
await expect(button).toBeInTheDocument();
};
export const WithLoaders: CSF2Story = (args, { loaded: { todo } }) => {
return (
<button type="button" onClick={args.onSubmit(todo.title)}>
Todo: {todo.title}
</button>
);
};
WithLoaders.loaders = [
async () => {
// long fake timeout
await new Promise((resolve) => setTimeout(resolve, 2000));
return {
todo: {
userId: 1,
id: 1,
title: 'delectus aut autem',
completed: false,
},
};
},
];
WithLoaders.play = async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
const todoItem = await canvas.findByText('Todo: delectus aut autem');
await userEvent.click(todoItem);
await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
};
export const Standard: CSF3Story = {
args: { passwordVerification: false },
};
export const StandardEmailFilled: CSF3Story = {
...Standard,
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await fireEvent.change(canvas.getByTestId('email'), {
target: {
value: 'michael@chromatic.com',
},
});
},
};
export const StandardEmailFailed: CSF3Story = {
...Standard,
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
await userEvent.type(canvas.getByTestId('password1'), 'supersecret');
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
await canvas.findByText('Please enter a correctly formatted email address');
await expect(args.onSubmit).not.toHaveBeenCalled();
},
};
export const StandardEmailSuccess: CSF3Story = {
...Standard,
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
await userEvent.click(canvas.getByTestId('submit'));
await waitFor(async () => {
await expect(args.onSubmit).toHaveBeenCalledTimes(1);
await expect(args.onSubmit).toHaveBeenCalledWith({
email: 'michael@chromatic.com',
password: 'testpasswordthatwontfail',
});
});
},
};
export const StandardPasswordFailed: CSF3Story = {
...Standard,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await userEvent.type(canvas.getByTestId('password1'), 'asdf');
await userEvent.click(canvas.getByTestId('submit'));
},
};
export const StandardFailHover: CSF3Story = {
...StandardPasswordFailed,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardPasswordFailed.play(context);
await waitFor(async () => {
await userEvent.hover(canvas.getByTestId('password-error-info'));
});
},
};
export const Verification: CSF3Story = {
args: { passwordVerification: true },
argTypes: { onSubmit: { action: 'clicked' } },
};
export const VerificationPassword: CSF3Story = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
await userEvent.click(canvas.getByTestId('submit'));
},
};
export const VerificationPasswordMismatch: CSF3Story = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
await userEvent.click(canvas.getByTestId('submit'));
},
};
export const VerificationSuccess: CSF3Story = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password1'), 'helloyou', { delay: 50 });
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password2'), 'helloyou', { delay: 50 });
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.click(canvas.getByTestId('submit'));
},
};

2
code/addons/interactions/src/components/Interaction.stories.tsx
View File

@ -45,7 +45,7 @@ export const Done: Story = {
export const WithParent: Story = { export const WithParent: Story = {
args: { args: {
call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' }, call: { ...getCalls(CallStates.DONE).slice(-1)[0], ancestors: ['parent-id'] },
}, },
}; };

22
code/addons/interactions/src/components/Interaction.tsx
View File

@ -32,7 +32,7 @@ const RowContainer = styled('div', {
? transparentize(0.93, theme.color.negative) ? transparentize(0.93, theme.color.negative)
: theme.background.warning, : theme.background.warning,
}), }),
paddingLeft: call.parentId ? 20 : 0, paddingLeft: call.ancestors.length * 20,
}), }),
({ theme, call, pausedAt }) => ({ theme, call, pausedAt }) =>
pausedAt === call.id && { pausedAt === call.id && {
@ -56,9 +56,9 @@ const RowContainer = styled('div', {
} }
); );
const RowHeader = styled.div<{ disabled: boolean }>(({ theme, disabled }) => ({ const RowHeader = styled.div<{ isInteractive: boolean }>(({ theme, isInteractive }) => ({
display: 'flex', display: 'flex',
'&:hover': disabled ? {} : { background: theme.background.hoverable }, '&:hover': isInteractive ? {} : { background: theme.background.hoverable },
})); }));
const RowLabel = styled('button', { const RowLabel = styled('button', {
@ -130,6 +130,7 @@ export const Interaction = ({
controls, controls,
controlStates, controlStates,
childCallIds, childCallIds,
isHidden,
isCollapsed, isCollapsed,
toggleCollapsed, toggleCollapsed,
pausedAt, pausedAt,
@ -139,18 +140,23 @@ export const Interaction = ({
controls: Controls; controls: Controls;
controlStates: ControlStates; controlStates: ControlStates;
childCallIds?: Call['id'][]; childCallIds?: Call['id'][];
isHidden: boolean;
isCollapsed: boolean; isCollapsed: boolean;
toggleCollapsed: () => void; toggleCollapsed: () => void;
pausedAt?: Call['id']; pausedAt?: Call['id'];
}) => { }) => {
const [isHovered, setIsHovered] = React.useState(false); const [isHovered, setIsHovered] = React.useState(false);
const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors.length;
if (isHidden) return null;
return ( return (
<RowContainer call={call} pausedAt={pausedAt}> <RowContainer call={call} pausedAt={pausedAt}>
<RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}> <RowHeader isInteractive={isInteractive}>
<RowLabel <RowLabel
call={call} call={call}
onClick={() => controls.goto(call.id)} onClick={() => controls.goto(call.id)}
disabled={!controlStates.goto || !call.interceptable || !!call.parentId} disabled={isInteractive}
onMouseEnter={() => controlStates.goto && setIsHovered(true)} onMouseEnter={() => controlStates.goto && setIsHovered(true)}
onMouseLeave={() => controlStates.goto && setIsHovered(false)} onMouseLeave={() => controlStates.goto && setIsHovered(false)}
> >
@ -163,11 +169,7 @@ export const Interaction = ({
{childCallIds?.length > 0 && ( {childCallIds?.length > 0 && (
<WithTooltip <WithTooltip
hasChrome={false} hasChrome={false}
tooltip={ tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
<Note
note={`${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`}
/>
}
> >
<StyledIconButton containsIcon onClick={toggleCollapsed}> <StyledIconButton containsIcon onClick={toggleCollapsed}>
<Icons icon="listunordered" /> <Icons icon="listunordered" />

2
code/addons/interactions/src/components/InteractionsPanel.stories.tsx
View File

@ -122,7 +122,7 @@ export const Failed: Story = {
}, },
}; };
export const WithDebuggingDisabled: Story = { export const NoDebugger: Story = {
args: { controlStates: { ...SubnavStories.args.controlStates, debugger: false } }, args: { controlStates: { ...SubnavStories.args.controlStates, debugger: false } },
}; };

2
code/addons/interactions/src/components/InteractionsPanel.tsx
View File

@ -23,6 +23,7 @@ interface InteractionsPanelProps {
interactions: (Call & { interactions: (Call & {
status?: CallStates; status?: CallStates;
childCallIds: Call['id'][]; childCallIds: Call['id'][];
isHidden: boolean;
isCollapsed: boolean; isCollapsed: boolean;
toggleCollapsed: () => void; toggleCollapsed: () => void;
})[]; })[];
@ -118,6 +119,7 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
controls={controls} controls={controls}
controlStates={controlStates} controlStates={controlStates}
childCallIds={call.childCallIds} childCallIds={call.childCallIds}
isHidden={call.isHidden}
isCollapsed={call.isCollapsed} isCollapsed={call.isCollapsed}
toggleCollapsed={call.toggleCollapsed} toggleCollapsed={call.toggleCollapsed}
pausedAt={pausedAt} pausedAt={pausedAt}

2
code/addons/interactions/src/components/List.tsx
View File

@ -68,7 +68,7 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
<Wrapper> <Wrapper>
<HeaderBar onClick={() => onToggle(!open)} role="button"> <HeaderBar onClick={() => onToggle(!open)} role="button">
<Icon <Icon
icon="chevrondown" icon="arrowdown"
color={convert(themes.light).appBorderColor} color={convert(themes.light).appBorderColor}
style={{ style={{
transform: `rotate(${open ? 0 : -90}deg)`, transform: `rotate(${open ? 0 : -90}deg)`,

21
code/addons/interactions/src/components/MethodCall.stories.tsx
View File

@ -57,6 +57,7 @@ export const Args = () => (
/> />
<Node value={{ __class__: { name: 'FooBar' } }} /> <Node value={{ __class__: { name: 'FooBar' } }} />
<Node value={{ __function__: { name: 'goFaster' } }} /> <Node value={{ __function__: { name: 'goFaster' } }} />
<Node value={{ __function__: { name: '' } }} />
<Node value={{ __element__: { localName: 'hr' } }} /> <Node value={{ __element__: { localName: 'hr' } }} />
<Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} /> <Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
<Node value={{ __element__: { localName: 'div', id: 'foo' } }} /> <Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
@ -99,6 +100,7 @@ const calls: Call[] = [
{ {
cursor: 0, cursor: 0,
id: '1', id: '1',
ancestors: [],
path: ['screen'], path: ['screen'],
method: 'getByText', method: 'getByText',
storyId: 'kind--story', storyId: 'kind--story',
@ -109,6 +111,7 @@ const calls: Call[] = [
{ {
cursor: 1, cursor: 1,
id: '2', id: '2',
ancestors: [],
path: ['userEvent'], path: ['userEvent'],
method: 'click', method: 'click',
storyId: 'kind--story', storyId: 'kind--story',
@ -119,6 +122,7 @@ const calls: Call[] = [
{ {
cursor: 2, cursor: 2,
id: '3', id: '3',
ancestors: [],
path: [], path: [],
method: 'expect', method: 'expect',
storyId: 'kind--story', storyId: 'kind--story',
@ -129,6 +133,7 @@ const calls: Call[] = [
{ {
cursor: 3, cursor: 3,
id: '4', id: '4',
ancestors: [],
path: [{ __callId__: '3' }, 'not'], path: [{ __callId__: '3' }, 'not'],
method: 'toBe', method: 'toBe',
storyId: 'kind--story', storyId: 'kind--story',
@ -139,6 +144,7 @@ const calls: Call[] = [
{ {
cursor: 4, cursor: 4,
id: '5', id: '5',
ancestors: [],
path: ['jest'], path: ['jest'],
method: 'fn', method: 'fn',
storyId: 'kind--story', storyId: 'kind--story',
@ -149,6 +155,7 @@ const calls: Call[] = [
{ {
cursor: 5, cursor: 5,
id: '6', id: '6',
ancestors: [],
path: [], path: [],
method: 'expect', method: 'expect',
storyId: 'kind--story', storyId: 'kind--story',
@ -159,6 +166,7 @@ const calls: Call[] = [
{ {
cursor: 6, cursor: 6,
id: '7', id: '7',
ancestors: [],
path: ['expect'], path: ['expect'],
method: 'stringMatching', method: 'stringMatching',
storyId: 'kind--story', storyId: 'kind--story',
@ -169,6 +177,7 @@ const calls: Call[] = [
{ {
cursor: 7, cursor: 7,
id: '8', id: '8',
ancestors: [],
path: [{ __callId__: '6' }, 'not'], path: [{ __callId__: '6' }, 'not'],
method: 'toHaveBeenCalledWith', method: 'toHaveBeenCalledWith',
storyId: 'kind--story', storyId: 'kind--story',
@ -182,6 +191,17 @@ const calls: Call[] = [
interceptable: false, interceptable: false,
retain: false, retain: false,
}, },
{
cursor: 8,
id: '9',
ancestors: [],
path: [],
method: 'step',
storyId: 'kind--story',
args: ['Custom step label', { __function__: { name: '' } }],
interceptable: true,
retain: false,
},
]; ];
const callsById = calls.reduce((acc, call) => { const callsById = calls.reduce((acc, call) => {
@ -189,6 +209,7 @@ const callsById = calls.reduce((acc, call) => {
return acc; return acc;
}, new Map<Call['id'], Call>()); }, new Map<Call['id'], Call>());
export const Step = () => <MethodCall call={callsById.get('9')} callsById={callsById} />;
export const Simple = () => <MethodCall call={callsById.get('1')} callsById={callsById} />; export const Simple = () => <MethodCall call={callsById.get('1')} callsById={callsById} />;
export const Nested = () => <MethodCall call={callsById.get('2')} callsById={callsById} />; export const Nested = () => <MethodCall call={callsById.get('2')} callsById={callsById} />;
export const Chained = () => <MethodCall call={callsById.get('4')} callsById={callsById} />; export const Chained = () => <MethodCall call={callsById.get('4')} callsById={callsById} />;

21
code/addons/interactions/src/components/MethodCall.tsx
View File

@ -383,6 +383,22 @@ export const OtherNode = ({ value }: { value: any }) => {
return <span style={{ color: colors.meta }}>{stringify(value)}</span>; return <span style={{ color: colors.meta }}>{stringify(value)}</span>;
}; };
export const StepNode = ({ label }: { label: string }) => {
const colors = useThemeColors();
const { typography } = useTheme();
return (
<span
style={{
color: colors.base,
fontFamily: typography.fonts.base,
fontSize: typography.size.s2 - 1,
}}
>
{label}
</span>
);
};
export const MethodCall = ({ export const MethodCall = ({
call, call,
callsById, callsById,
@ -393,7 +409,9 @@ export const MethodCall = ({
// Call might be undefined during initial render, can be safely ignored. // Call might be undefined during initial render, can be safely ignored.
if (!call) return null; if (!call) return null;
const colors = useThemeColors(); if (call.method === 'step' && call.path.length === 0) {
return <StepNode label={call.args[0]} />;
}
const path = call.path.flatMap((elem, index) => { const path = call.path.flatMap((elem, index) => {
// eslint-disable-next-line no-underscore-dangle // eslint-disable-next-line no-underscore-dangle
@ -416,6 +434,7 @@ export const MethodCall = ({
: [node]; : [node];
}); });
const colors = useThemeColors();
return ( return (
<> <>
<span style={{ color: colors.base }}>{path}</span> <span style={{ color: colors.base }}>{path}</span>

4
code/addons/interactions/src/components/StatusIcon.tsx
View File

@ -6,8 +6,10 @@ import { styled } from '@storybook/theming';
import { transparentize } from 'polished'; import { transparentize } from 'polished';
import localTheme from '../theme'; import localTheme from '../theme';
export interface StatusIconProps extends IconsProps { export interface StatusIconProps {
status: Call['status']; status: Call['status'];
useSymbol?: IconsProps['useSymbol'];
className?: string;
} }
const { const {

31
code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.mdx Normal file
View File

@ -0,0 +1,31 @@
import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { expect } from '@storybook/jest';
import { within, waitFor, fireEvent, userEvent, screen } from '@storybook/testing-library';
import { AccountForm } from './AccountFormInteractions';
<Meta
title="Addons/Interactions/Examples/AccountForm MDX"
component={AccountForm}
parameters={{ layout: 'centered', theme: 'light' }}
argTypes={{
onSubmit: { action: true },
}}
/>
## AccountForm
<Canvas>
<Story
name="StandardEmailFilled"
args={{
passwordVerification: false,
}}
play={async ({ args }) => {
await userEvent.type(screen.getByTestId('email'), 'username@email.com');
await userEvent.type(screen.getByTestId('password1'), 'thepassword');
await userEvent.click(screen.getByRole('button', { name: /create account/i }));
await expect(args.onSubmit).not.toHaveBeenCalled();
}}
/>
</Canvas>

162
code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx Normal file
View File

@ -0,0 +1,162 @@
/* eslint-disable jest/no-standalone-expect */
import { Meta, ComponentStoryObj } from '@storybook/react';
import { expect } from '@storybook/jest';
import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
import { AccountForm } from './AccountFormInteractions';
export default {
title: 'Addons/Interactions/Examples/AccountForm',
component: AccountForm,
parameters: {
layout: 'centered',
theme: 'light',
options: { selectedPanel: 'storybook/interactions/panel' },
},
argTypes: {
onSubmit: { action: true },
},
} as Meta;
type CSF3Story = ComponentStoryObj<typeof AccountForm>;
export const Standard: CSF3Story = {
args: { passwordVerification: false },
};
export const StandardEmailFilled = {
...Standard,
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter email', async () => {
await fireEvent.change(canvas.getByTestId('email'), {
target: { value: 'michael@chromatic.com' },
});
});
},
};
export const StandardEmailFailed = {
...Standard,
play: async ({ args, canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter email and password', async () => {
await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
await userEvent.type(canvas.getByTestId('password1'), 'supersecret');
});
await step('Submit form', async () => {
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
});
await canvas.findByText('Please enter a correctly formatted email address');
await expect(args.onSubmit).not.toHaveBeenCalled();
},
};
export const StandardEmailSuccess = {
...Standard,
play: async ({ args, canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter email and password', async () => {
await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
});
await step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
await waitFor(async () => {
await expect(args.onSubmit).toHaveBeenCalledTimes(1);
await expect(args.onSubmit).toHaveBeenCalledWith({
email: 'michael@chromatic.com',
password: 'testpasswordthatwontfail',
});
});
},
};
export const StandardPasswordFailed = {
...Standard,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter password', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdf');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
},
};
export const StandardFailHover = {
...StandardPasswordFailed,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardPasswordFailed.play(context);
await waitFor(async () => {
await userEvent.hover(canvas.getByTestId('password-error-info'));
});
},
};
export const Verification = {
args: { passwordVerification: true },
argTypes: { onSubmit: { action: 'clicked' } },
};
export const VerificationPassword = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter password', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
},
};
export const VerificationPasswordMismatch = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter passwords', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
},
};
export const VerificationSuccess = {
...Verification,
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter passwords', async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password1'), 'helloyou', { delay: 50 });
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password2'), 'helloyou', { delay: 50 });
});
await context.step('Submit form', async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.click(canvas.getByTestId('submit'));
});
},
};

2
code/addons/interactions/src/components/AccountForm/AccountForm.tsx → code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.tsx
View File

@ -490,7 +490,7 @@ const ErrorIcon = styled(Icons)(({ theme }) => ({
opacity: 0.8, opacity: 0.8,
marginRight: 6, marginRight: 6,
marginLeft: 2, marginLeft: 2,
marginTop: 1, marginTop: 4,
})); }));
const ErrorTooltip = styled.div(({ theme }) => ({ const ErrorTooltip = styled.div(({ theme }) => ({

126
code/addons/interactions/src/examples/Examples.stories.tsx Normal file
View File

@ -0,0 +1,126 @@
/* eslint-disable jest/no-standalone-expect */
import { Story, Meta } from '@storybook/react';
import { expect } from '@storybook/jest';
import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
import React from 'react';
export default {
title: 'Addons/Interactions/Examples',
parameters: {
layout: 'centered',
theme: 'light',
options: { selectedPanel: 'storybook/interactions/panel' },
},
argTypes: {
onSubmit: { action: true },
},
} as Meta;
export const Assertions: Story = ({ onSubmit }) => (
<button type="button" onClick={() => onSubmit('clicked')}>
Click
</button>
);
Assertions.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: Story = () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => setIsLoading(false), 500);
}, []);
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
};
FindBy.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByRole('button');
await expect(true).toBe(true);
};
export const WaitFor: Story = ({ onSubmit }) => (
<button type="button" onClick={() => setTimeout(() => onSubmit('clicked'), 100)}>
Click
</button>
);
WaitFor.play = async ({ args, canvasElement }) => {
await userEvent.click(await within(canvasElement).findByText('Click'));
await waitFor(async () => {
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
await expect(true).toBe(true);
});
};
export const WaitForElementToBeRemoved: Story = () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => setIsLoading(false), 1500);
}, []);
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
};
WaitForElementToBeRemoved.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
const button = await canvas.findByText('Loaded!');
await expect(button).not.toBeNull();
};
export const WithLoaders: Story = ({ onSubmit }, { loaded: { todo } }) => {
return (
<button type="button" onClick={onSubmit(todo.title)}>
Todo: {todo.title}
</button>
);
};
WithLoaders.loaders = [
async () => {
// long fake timeout
await new Promise((resolve) => setTimeout(resolve, 2000));
return {
todo: {
userId: 1,
id: 1,
title: 'delectus aut autem',
completed: false,
},
};
},
];
WithLoaders.play = async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
const todoItem = await canvas.findByText('Todo: delectus aut autem');
await userEvent.click(todoItem);
await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
};
export const WithSteps: Story = ({ onSubmit }) => (
<button type="button" onClick={() => onSubmit('clicked')}>
Click
</button>
);
WithSteps.play = async ({ args, canvasElement, step }) => {
await step('Click button', async () => {
await userEvent.click(within(canvasElement).getByRole('button'));
await step('Verify submit', async () => {
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
});
await step('Verify result', async () => {
await expect([{ name: 'John', age: 42 }]).toEqual(
expect.arrayContaining([
expect.objectContaining({ name: 'John' }),
expect.objectContaining({ age: 42 }),
])
);
});
});
};

39
code/addons/interactions/src/mocks/index.ts
View File

@ -3,9 +3,22 @@ import { CallStates, Call } from '@storybook/instrumenter';
export const getCalls = (finalStatus: CallStates) => { export const getCalls = (finalStatus: CallStates) => {
const calls: Call[] = [ const calls: Call[] = [
{ {
id: 'story--id [3] within', id: 'story--id [3] step',
storyId: 'story--id',
cursor: 1,
ancestors: [],
path: [],
method: 'step',
args: ['Click button', { __function__: { name: '' } }],
interceptable: true,
retain: false,
status: CallStates.DONE,
},
{
id: 'story--id [3] step [1] within',
storyId: 'story--id', storyId: 'story--id',
cursor: 3, cursor: 3,
ancestors: ['story--id [3] step'],
path: [], path: [],
method: 'within', method: 'within',
args: [{ __element__: { localName: 'div', id: 'root' } }], args: [{ __element__: { localName: 'div', id: 'root' } }],
@ -14,10 +27,11 @@ export const getCalls = (finalStatus: CallStates) => {
status: CallStates.DONE, status: CallStates.DONE,
}, },
{ {
id: 'story--id [4] findByText', id: 'story--id [3] step [2] findByText',
storyId: 'story--id', storyId: 'story--id',
cursor: 4, cursor: 4,
path: [{ __callId__: 'story--id [3] within' }], ancestors: ['story--id [3] step'],
path: [{ __callId__: 'story--id [3] step [1] within' }],
method: 'findByText', method: 'findByText',
args: ['Click'], args: ['Click'],
interceptable: true, interceptable: true,
@ -25,9 +39,10 @@ export const getCalls = (finalStatus: CallStates) => {
status: CallStates.DONE, status: CallStates.DONE,
}, },
{ {
id: 'story--id [5] click', id: 'story--id [3] step [3] click',
storyId: 'story--id', storyId: 'story--id',
cursor: 5, cursor: 5,
ancestors: ['story--id [3] step'],
path: ['userEvent'], path: ['userEvent'],
method: 'click', method: 'click',
args: [{ __element__: { localName: 'button', innerText: 'Click' } }], args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
@ -39,6 +54,7 @@ export const getCalls = (finalStatus: CallStates) => {
id: 'story--id [6] waitFor', id: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
cursor: 6, cursor: 6,
ancestors: [],
path: [], path: [],
method: 'waitFor', method: 'waitFor',
args: [{ __function__: { name: '' } }], args: [{ __function__: { name: '' } }],
@ -48,9 +64,9 @@ export const getCalls = (finalStatus: CallStates) => {
}, },
{ {
id: 'story--id [6] waitFor [0] expect', id: 'story--id [6] waitFor [0] expect',
parentId: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
cursor: 1, cursor: 1,
ancestors: ['story--id [6] waitFor'],
path: [], path: [],
method: 'expect', method: 'expect',
args: [{ __function__: { name: 'handleSubmit' } }], args: [{ __function__: { name: 'handleSubmit' } }],
@ -60,9 +76,9 @@ export const getCalls = (finalStatus: CallStates) => {
}, },
{ {
id: 'story--id [6] waitFor [1] stringMatching', id: 'story--id [6] waitFor [1] stringMatching',
parentId: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
cursor: 2, cursor: 2,
ancestors: ['story--id [6] waitFor'],
path: ['expect'], path: ['expect'],
method: 'stringMatching', method: 'stringMatching',
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }], args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
@ -72,9 +88,9 @@ export const getCalls = (finalStatus: CallStates) => {
}, },
{ {
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith', id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
parentId: 'story--id [6] waitFor',
storyId: 'story--id', storyId: 'story--id',
cursor: 3, cursor: 3,
ancestors: ['story--id [6] waitFor'],
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }], path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
method: 'toHaveBeenCalledWith', method: 'toHaveBeenCalledWith',
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }], args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
@ -86,6 +102,7 @@ export const getCalls = (finalStatus: CallStates) => {
id: 'story--id [7] expect', id: 'story--id [7] expect',
storyId: 'story--id', storyId: 'story--id',
cursor: 7, cursor: 7,
ancestors: [],
path: [], path: [],
method: 'expect', method: 'expect',
args: [{ __function__: { name: 'handleReset' } }], args: [{ __function__: { name: 'handleReset' } }],
@ -97,6 +114,7 @@ export const getCalls = (finalStatus: CallStates) => {
id: 'story--id [8] toHaveBeenCalled', id: 'story--id [8] toHaveBeenCalled',
storyId: 'story--id', storyId: 'story--id',
cursor: 8, cursor: 8,
ancestors: [],
path: [{ __callId__: 'story--id [7] expect' }, 'not'], path: [{ __callId__: 'story--id [7] expect' }, 'not'],
method: 'toHaveBeenCalled', method: 'toHaveBeenCalled',
args: [], args: [],
@ -121,9 +139,4 @@ export const getCalls = (finalStatus: CallStates) => {
export const getInteractions = (finalStatus: CallStates) => export const getInteractions = (finalStatus: CallStates) =>
getCalls(finalStatus) getCalls(finalStatus)
.filter((call) => call.interceptable) .filter((call) => call.interceptable)
.map((call, _, calls) => ({ .map((call) => ({ ...call, childCallIds: [], isCollapsed: false, toggleCollapsed: () => {} }));
...call,
childCallIds: calls.filter((c) => c.parentId === call.id).map((c) => c.id),
isCollapsed: false,
toggleCollapsed: () => {},
}));

13
code/addons/interactions/src/preset/preview.ts
View File

@ -1,6 +1,12 @@
import { addons } from '@storybook/addons'; import { addons } from '@storybook/addons';
import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
import type { AnyFramework, ArgsEnhancer } from '@storybook/csf'; import type {
AnyFramework,
ArgsEnhancer,
PlayFunction,
PlayFunctionContext,
StepLabel,
} from '@storybook/csf';
import { instrument } from '@storybook/instrumenter'; import { instrument } from '@storybook/instrumenter';
import { ModuleMocker } from 'jest-mock'; import { ModuleMocker } from 'jest-mock';
@ -48,3 +54,8 @@ const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = ({ id, initialArgs })
addSpies(id, initialArgs); addSpies(id, initialArgs);
export const argsEnhancers = [addActionsFromArgTypes]; export const argsEnhancers = [addActionsFromArgTypes];
export const { step: runStep } = instrument(
{ step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => play(context) },
{ intercept: true }
);

16
code/addons/jest/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-jest", "name": "@storybook/addon-jest",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "React storybook addon that show component jest report", "description": "React storybook addon that show component jest report",
"keywords": [ "keywords": [
"addon", "addon",
@ -59,12 +59,12 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0", "global": "^4.4.0",
"react-sizeme": "^3.0.1", "react-sizeme": "^3.0.1",
@ -95,7 +95,7 @@
], ],
"platform": "browser" "platform": "browser"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Jest", "displayName": "Jest",
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

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

@ -65,7 +65,7 @@ export function Result(props: ResultProps) {
<HeaderBar onClick={onToggle} role="button" status={status}> <HeaderBar onClick={onToggle} role="button" status={status}>
{status === `failed` ? ( {status === `failed` ? (
<Icon <Icon
icon="chevrondown" icon="arrowdown"
color={convert(themes.light).color.mediumdark} color={convert(themes.light).color.mediumdark}
style={{ style={{
transform: `rotate(${isOpen ? 0 : -90}deg)`, transform: `rotate(${isOpen ? 0 : -90}deg)`,

12
code/addons/links/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-links", "name": "@storybook/addon-links",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Link stories together to build demos and prototypes with your UI components", "description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [ "keywords": [
"addon", "addon",
@ -63,11 +63,11 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/router": "7.0.0-alpha.18", "@storybook/router": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0", "global": "^4.4.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
@ -99,7 +99,7 @@
"./src/react/index.ts" "./src/react/index.ts"
] ]
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Links", "displayName": "Links",
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

14
code/addons/measure/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-measure", "name": "@storybook/addon-measure",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Inspect layouts by visualizing the box model", "description": "Inspect layouts by visualizing the box model",
"keywords": [ "keywords": [
"storybook-addons", "storybook-addons",
@ -61,11 +61,11 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0" "global": "^4.4.0"
@ -95,7 +95,7 @@
"./src/preview.tsx" "./src/preview.tsx"
] ]
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Measure", "displayName": "Measure",
"unsupportedFrameworks": [ "unsupportedFrameworks": [

14
code/addons/outline/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-outline", "name": "@storybook/addon-outline",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Outline all elements with CSS to help with layout placement and alignment", "description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [ "keywords": [
"storybook-addons", "storybook-addons",
@ -64,11 +64,11 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0", "global": "^4.4.0",
@ -99,7 +99,7 @@
"./src/preset/preview.tsx" "./src/preset/preview.tsx"
] ]
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Outline", "displayName": "Outline",
"unsupportedFrameworks": [ "unsupportedFrameworks": [

24
code/addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-storyshots", "name": "@storybook/addon-storyshots",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Take a code snapshot of every story automatically with Jest", "description": "Take a code snapshot of every story automatically with Jest",
"keywords": [ "keywords": [
"addon", "addon",
@ -38,12 +38,12 @@
}, },
"dependencies": { "dependencies": {
"@jest/transform": "^26.6.2", "@jest/transform": "^26.6.2",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/client-api": "7.0.0-alpha.18", "@storybook/client-api": "7.0.0-alpha.23",
"@storybook/core-client": "7.0.0-alpha.18", "@storybook/core-client": "7.0.0-alpha.23",
"@storybook/core-common": "7.0.0-alpha.18", "@storybook/core-common": "7.0.0-alpha.23",
"@storybook/core-webpack": "7.0.0-alpha.18", "@storybook/core-webpack": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@types/glob": "^7.1.3", "@types/glob": "^7.1.3",
"@types/jest": "^26.0.16", "@types/jest": "^26.0.16",
@ -62,11 +62,11 @@
"@angular/core": "^13.3.6", "@angular/core": "^13.3.6",
"@angular/platform-browser-dynamic": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6",
"@emotion/jest": "^11.8.0", "@emotion/jest": "^11.8.0",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/angular": "7.0.0-alpha.18", "@storybook/angular": "7.0.0-alpha.23",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/vue": "7.0.0-alpha.18", "@storybook/vue": "7.0.0-alpha.23",
"@storybook/vue3": "7.0.0-alpha.18", "@storybook/vue3": "7.0.0-alpha.23",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1", "enzyme-to-json": "^3.6.1",
@ -144,7 +144,7 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Storyshots", "displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",

1
code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
View File

@ -15,6 +15,7 @@ export interface ClientApi<TFramework extends AnyFramework>
setAddon: ClientApiClass<TFramework>['setAddon']; setAddon: ClientApiClass<TFramework>['setAddon'];
addArgsEnhancer: ClientApiClass<TFramework>['addArgsEnhancer']; addArgsEnhancer: ClientApiClass<TFramework>['addArgsEnhancer'];
addArgTypesEnhancer: ClientApiClass<TFramework>['addArgTypesEnhancer']; addArgTypesEnhancer: ClientApiClass<TFramework>['addArgTypesEnhancer'];
addStepRunner: ClientApiClass<TFramework>['addStepRunner'];
raw: ClientApiClass<TFramework>['raw']; raw: ClientApiClass<TFramework>['raw'];
} }

14
code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
View File

@ -113,8 +113,15 @@ function configure<TFramework extends AnyFramework>(
if (preview) { if (preview) {
// This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template // This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template
const { parameters, decorators, globals, globalTypes, argsEnhancers, argTypesEnhancers } = const {
jest.requireActual(preview); parameters,
decorators,
globals,
globalTypes,
argsEnhancers,
argTypesEnhancers,
runStep,
} = jest.requireActual(preview);
if (decorators) { if (decorators) {
decorators.forEach((decorator: DecoratorFunction<TFramework>) => decorators.forEach((decorator: DecoratorFunction<TFramework>) =>
@ -124,6 +131,9 @@ function configure<TFramework extends AnyFramework>(
if (parameters || globals || globalTypes) { if (parameters || globals || globalTypes) {
storybook.addParameters({ ...parameters, globals, globalTypes }); storybook.addParameters({ ...parameters, globals, globalTypes });
} }
if (runStep) {
storybook.addStepRunner(runStep);
}
if (argsEnhancers) { if (argsEnhancers) {
argsEnhancers.forEach((enhancer: ArgsEnhancer<TFramework>) => argsEnhancers.forEach((enhancer: ArgsEnhancer<TFramework>) =>
storybook.addArgsEnhancer(enhancer as any) storybook.addArgsEnhancer(enhancer as any)

8
code/addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-storyshots-puppeteer", "name": "@storybook/addon-storyshots-puppeteer",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Image snapshots addition to StoryShots based on puppeteer", "description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [ "keywords": [
"addon", "addon",
@ -35,7 +35,7 @@
"dependencies": { "dependencies": {
"@axe-core/puppeteer": "^4.2.0", "@axe-core/puppeteer": "^4.2.0",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/node-logger": "7.0.0-alpha.18", "@storybook/node-logger": "7.0.0-alpha.23",
"@types/jest-image-snapshot": "^4.1.3", "@types/jest-image-snapshot": "^4.1.3",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"jest-image-snapshot": "^4.3.0" "jest-image-snapshot": "^4.3.0"
@ -45,7 +45,7 @@
"puppeteer": "^2.0.0 || ^3.0.0" "puppeteer": "^2.0.0 || ^3.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"puppeteer": ">=2.0.0" "puppeteer": ">=2.0.0"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
@ -56,5 +56,5 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53" "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a"
} }

18
code/addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-storysource", "name": "@storybook/addon-storysource",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "View a story’s source code to see how it works and paste into your app", "description": "View a story’s source code to see how it works and paste into your app",
"keywords": [ "keywords": [
"addon", "addon",
@ -35,13 +35,13 @@
"prepare": "node ../../../scripts/prepare.js" "prepare": "node ../../../scripts/prepare.js"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/router": "7.0.0-alpha.18", "@storybook/router": "7.0.0-alpha.23",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"estraverse": "^5.2.0", "estraverse": "^5.2.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
@ -67,7 +67,7 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Storysource", "displayName": "Storysource",
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png", "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

14
code/addons/toolbars/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-toolbars", "name": "@storybook/addon-toolbars",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Create your own toolbar items that control story rendering", "description": "Create your own toolbar items that control story rendering",
"keywords": [ "keywords": [
"addon", "addon",
@ -57,11 +57,11 @@
"prepare": "../../../scripts/prepare/bundle.ts" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2" "core-js": "^3.8.2"
}, },
"devDependencies": { "devDependencies": {
@ -89,7 +89,7 @@
], ],
"platform": "browser" "platform": "browser"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Toolbars", "displayName": "Toolbars",
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",

2
code/addons/toolbars/src/components/ToolbarMenuButton.tsx
View File

@ -4,7 +4,7 @@ import { Icons, IconButton, IconsProps } from '@storybook/components';
interface ToolbarMenuButtonProps { interface ToolbarMenuButtonProps {
active: boolean; active: boolean;
title: string; title: string;
icon: IconsProps['icon'] | ''; icon?: IconsProps['icon'];
description: string; description: string;
onClick?: () => void; onClick?: () => void;
} }

2
code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
View File

@ -26,7 +26,7 @@ export const ToolbarMenuListItem = ({
onClick, onClick,
currentValue, currentValue,
}: ToolbarMenuListItemProps) => { }: ToolbarMenuListItemProps) => {
const Icon = <Icons style={{ opacity: 1 }} icon={icon} />; const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
const hasContent = left || right || title; const hasContent = left || right || title;
const Item: ListItem = { const Item: ListItem = {

2
code/addons/toolbars/src/types.ts
View File

@ -26,7 +26,7 @@ export interface NormalizedToolbarConfig {
/** The label to show for this toolbar item */ /** The label to show for this toolbar item */
title?: string; title?: string;
/** Choose an icon to show for this toolbar item */ /** Choose an icon to show for this toolbar item */
icon?: IconsProps['icon']; icon: IconsProps['icon'];
/** Set to true to prevent default update of icon to match any present selected items icon */ /** Set to true to prevent default update of icon to match any present selected items icon */
preventDynamicIcon?: boolean; preventDynamicIcon?: boolean;
items: ToolbarItem[]; items: ToolbarItem[];

2
code/addons/viewport/manager.js
View File

@ -1 +1 @@
import './dist/esm/manager'; import './dist/manager';

55
code/addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-viewport", "name": "@storybook/addon-viewport",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [ "keywords": [
"addon", "addon",
@ -22,9 +22,32 @@
"url": "https://opencollective.com/storybook" "url": "https://opencollective.com/storybook"
}, },
"license": "MIT", "license": "MIT",
"main": "dist/cjs/preview.js", "exports": {
"module": "dist/esm/preview.js", ".": {
"types": "dist/types/preview.d.ts", "require": "./dist/index.js",
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts"
},
"./manager": {
"require": "./dist/manager.js",
"import": "./dist/manager.mjs",
"types": "./dist/manager.d.ts"
},
"./preview": {
"require": "./dist/preview.ts",
"import": "./dist/preview.mjs",
"types": "./dist/preview.d.ts"
},
"./register.js": {
"require": "./dist/manager.js",
"import": "./dist/manager.mjs",
"types": "./dist/manager.d.ts"
},
"./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"files": [ "files": [
"dist/**/*", "dist/**/*",
"README.md", "README.md",
@ -33,15 +56,15 @@
], ],
"scripts": { "scripts": {
"check": "tsc --noEmit", "check": "tsc --noEmit",
"prepare": "node ../../../scripts/prepare.js" "prepare": "../../../scripts/prepare/bundle.ts"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"global": "^4.4.0", "global": "^4.4.0",
"memoizerific": "^1.11.3", "memoizerific": "^1.11.3",
@ -65,7 +88,15 @@
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53", "bundler": {
"entries": [
"./src/index.ts",
"./src/models/index.ts",
"./src/manager.tsx",
"./src/preview.ts"
]
},
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
"storybook": { "storybook": {
"displayName": "Viewport", "displayName": "Viewport",
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png", "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",

3
code/addons/viewport/src/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './constants';
export * from './defaults';
export * from './shortcuts';

26
code/e2e-tests/addon-actions.spec.ts Normal file
View File

@ -0,0 +1,26 @@
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
test.describe('addon-actions', () => {
test.beforeEach(async ({ page }) => {
await page.goto(storybookUrl);
});
test('should trigger an action', async ({ page }) => {
const sbPage = new SbPage(page);
await sbPage.navigateToStory('example-button', 'primary');
const root = sbPage.previewRoot();
const button = root.locator('button', { hasText: 'Button' });
await button.click();
await sbPage.viewAddonPanel('Actions');
const logItem = await page.locator('#storybook-panel-root #panel-tab-content', {
hasText: 'onClick',
});
await expect(logItem).toBeVisible();
});
});

29
code/e2e-tests/addon-backgrounds.spec.ts Normal file
View File

@ -0,0 +1,29 @@
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
test.describe('addon-backgrounds', () => {
test.beforeEach(async ({ page }) => {
await page.goto(storybookUrl);
});
test('should have a dark background', async ({ page }) => {
const sbPage = new SbPage(page);
await sbPage.navigateToStory('example-button', 'primary');
await sbPage.selectToolbar('[title="Change the background of the preview"]', '#dark');
await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-color', 'rgb(51, 51, 51)');
});
test('should apply a grid', async ({ page }) => {
const sbPage = new SbPage(page);
await sbPage.navigateToStory('example-button', 'primary');
await sbPage.selectToolbar('[title="Apply a grid to the preview"]');
await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-image', /linear-gradient/);
});
});

71
code/e2e-tests/addon-controls.spec.ts Normal file
View File

@ -0,0 +1,71 @@
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
test.describe('addon-controls', () => {
test('should change component when changing controls', async ({ page }) => {
await page.goto(storybookUrl);
const sbPage = new SbPage(page);
await sbPage.navigateToStory('example-button', 'primary');
await sbPage.viewAddonPanel('Controls');
// Text input: Label
await expect(sbPage.previewRoot().locator('button')).toContainText('Button');
const label = sbPage.panelContent().locator('textarea[name=label]');
await label.fill('Hello world');
await expect(sbPage.previewRoot().locator('button')).toContainText('Hello world');
// Args in URL
await page.waitForTimeout(300);
const url = await page.url();
await expect(url).toContain('args=label:Hello+world');
// Boolean toggle: Primary/secondary
await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
'background-color',
'rgb(30, 167, 253)'
);
const toggle = sbPage.panelContent().locator('input[name=primary]');
await toggle.click();
await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
'background-color',
'rgba(0, 0, 0, 0)'
);
// Color picker: Background color
const color = sbPage.panelContent().locator('input[placeholder="Choose color..."]');
await color.fill('red');
await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
'background-color',
'rgb(255, 0, 0)'
);
// TODO: enable this once the controls for size are aligned in all CLI templates.
// Radio buttons: Size
// cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
// cy.get('label[for="size-large"]').click();
// cy.getStoryElement().find('button').should('have.css', 'font-size', '16px');
// Reset controls: assert that the component is back to original state
const reset = sbPage.panelContent().locator('button[title="Reset controls"]');
await reset.click();
const button = sbPage.previewRoot().locator('button');
await expect(button).toHaveCSS('font-size', '14px');
await expect(button).toHaveCSS('background-color', 'rgb(30, 167, 253)');
await expect(button).toContainText('Button');
});
test('should apply controls automatically when passed via url', async ({ page }) => {
await page.goto(`${storybookUrl}?path=/story/example-button--primary&args=label:Hello+world`);
const sbPage = new SbPage(page);
await expect(sbPage.previewRoot().locator('button')).toContainText('Hello world');
await sbPage.viewAddonPanel('Controls');
const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue();
await expect(label).toEqual('Hello world');
});
});

40
code/e2e-tests/addon-docs.spec.ts Normal file
View File

@ -0,0 +1,40 @@
/* eslint-disable jest/no-disabled-tests */
/* eslint-disable no-await-in-loop */
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
test.describe('addon-docs', () => {
test.beforeEach(async ({ page }) => {
await page.goto(storybookUrl);
});
test('should provide source snippet', async ({ page }) => {
test.skip(
/^vue3/.test(templateName),
`Skipping ${templateName}, which does not support dynamic source snippets`
);
const sbPage = new SbPage(page);
await sbPage.navigateToStory('example-button', 'docs');
const root = sbPage.previewRoot();
const toggles = root.locator('.docblock-code-toggle');
const toggleCount = await toggles.count();
for (let i = 0; i < toggleCount; i += 1) {
const toggle = await toggles.nth(i);
await toggle.click({ force: true });
}
const codes = root.locator('pre.prismjs');
const codeCount = await codes.count();
for (let i = 0; i < codeCount; i += 1) {
const code = await codes.nth(i);
const text = await code.innerText();
await expect(text).not.toMatch(/^\(args\) => /);
}
});
});

33
code/e2e-tests/addon-interactions.spec.ts Normal file
View File

@ -0,0 +1,33 @@
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
test.describe('addon-interactions', () => {
test.beforeEach(async ({ page }) => {
await page.goto(storybookUrl);
});
// FIXME: skip xxx
test('should have interactions', async ({ page }) => {
const sbPage = new SbPage(page);
await sbPage.navigateToStory('example-page', 'logged-in');
await sbPage.viewAddonPanel('Interactions');
const welcome = await sbPage.previewRoot().locator('.welcome');
await expect(welcome).toContainText('Welcome, Jane Doe!');
const interactionsTab = await page.locator('#tabbutton-interactions');
await expect(interactionsTab).toContainText(/(1)/);
await expect(interactionsTab).toBeVisible();
const panel = sbPage.panelContent();
await expect(panel).toContainText(/userEvent.click/);
await expect(panel).toBeVisible();
const done = await panel.locator('[data-testid=icon-done]');
await expect(done).toBeVisible();
});
});

22
code/e2e-tests/addon-viewport.spec.ts Normal file
View File

@ -0,0 +1,22 @@
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
test.describe('addon-viewport', () => {
test.beforeEach(async ({ page }) => {
await page.goto(storybookUrl);
});
test('should have viewport button in the toolbar', async ({ page }) => {
const sbPage = new SbPage(page);
// Click on viewport button and select small mobile
await sbPage.navigateToStory('example-button', 'primary');
await sbPage.selectToolbar('[title="Change the size of the preview"]', '#mobile1');
// Check that Button story is still displayed
await expect(sbPage.previewRoot()).toContainText('Button');
});
});

14
code/e2e-tests/example.spec.ts Normal file
View File

@ -0,0 +1,14 @@
import { test, expect } from '@playwright/test';
import process from 'process';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
test('Basic story test', async ({ page }) => {
await page.goto(storybookUrl);
const preview = page.frameLocator('#storybook-preview-iframe');
const root = preview.locator('#root:visible, #docs-root:visible');
// Specific check for introduction story
await expect(root).toContainText('Welcome');
});

64
code/e2e-tests/util.ts Normal file
View File

@ -0,0 +1,64 @@
/* eslint-disable jest/no-standalone-expect */
import { expect, Page } from '@playwright/test';
export class SbPage {
readonly page: Page;
constructor(page: Page) {
this.page = page;
}
async navigateToStory(title: string, name: string) {
const titleId = title.replace(/ /g, '-').toLowerCase();
const storyId = name.replace(/ /g, '-').toLowerCase();
const titleLink = this.page.locator(`#${titleId}`);
if ((await titleLink.getAttribute('aria-expanded')) === 'false') {
await titleLink.click();
}
const storyLinkId = `#${titleId}--${storyId}`;
await this.page.waitForSelector(storyLinkId);
const storyLink = this.page.locator(storyLinkId);
await storyLink.click({ force: true });
// assert url changes
const viewMode = name === 'docs' ? 'docs' : 'story';
const url = this.page.url();
await expect(url).toContain(`path=/${viewMode}/${titleId}--${storyId}`);
const selected = await storyLink.getAttribute('data-selected');
await expect(selected).toBe('true');
}
previewIframe() {
return this.page.frameLocator('#storybook-preview-iframe');
}
previewRoot() {
const preview = this.previewIframe();
return preview.locator('#root:visible, #docs-root:visible');
}
panelContent() {
return this.page.locator('#storybook-panel-root #panel-tab-content');
}
async viewAddonPanel(name: string) {
const tabs = await this.page.locator('[role=tablist] button[role=tab]');
const tab = tabs.locator(`text=/^${name}/`);
await tab.click();
}
async selectToolbar(toolbarSelector: string, itemSelector?: string) {
await this.page.locator(toolbarSelector).click();
if (itemSelector) {
await this.page.locator(itemSelector).click();
}
}
getCanvasBodyElement() {
return this.previewIframe().locator('body');
}
}

19
code/examples/angular-cli/.storybook/main.ts
View File

@ -19,25 +19,6 @@ const mainConfig: import('@storybook/angular').StorybookConfig = {
channelOptions: { allowFunction: false, maxDepth: 10 }, channelOptions: { allowFunction: false, maxDepth: 10 },
disableTelemetry: true, disableTelemetry: true,
}, },
// These are just here to test composition. They could be added to any storybook example project
refs: {
react: {
title: 'ReactTS',
url: 'http://localhost:9011',
},
first: {
title: 'Composition test one',
url: 'https://storybookjs.netlify.app/cra-ts-essentials',
},
second: {
title: 'Composition test two',
url: 'https://storybookjs.netlify.app/cra-ts-essentials',
},
third: {
title: 'Composition test three',
url: 'https://storybookjs.netlify.app/cra-ts-essentials',
},
},
staticDirs: ['../src/assets'], staticDirs: ['../src/assets'],
features: { features: {
buildStoriesJson: false, buildStoriesJson: false,

32
code/examples/angular-cli/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "angular-cli", "name": "angular-cli",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"license": "MIT", "license": "MIT",
"workspaces": { "workspaces": {
@ -44,22 +44,22 @@
"@angular/compiler-cli": "^13.3.6", "@angular/compiler-cli": "^13.3.6",
"@angular/elements": "^13.3.6", "@angular/elements": "^13.3.6",
"@compodoc/compodoc": "^1.1.18", "@compodoc/compodoc": "^1.1.18",
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-interactions": "7.0.0-alpha.18", "@storybook/addon-interactions": "7.0.0-alpha.23",
"@storybook/addon-jest": "7.0.0-alpha.18", "@storybook/addon-jest": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/angular": "7.0.0-alpha.18", "@storybook/angular": "7.0.0-alpha.23",
"@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/jest": "^0.0.10", "@storybook/jest": "^0.0.10",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@storybook/testing-library": "0.0.14-next.0", "@storybook/testing-library": "0.0.14-next.0",
"@types/core-js": "^2.5.4", "@types/core-js": "^2.5.4",
"@types/jest": "^26.0.16", "@types/jest": "^26.0.16",
@ -72,7 +72,7 @@
"jest": "^26.6.3", "jest": "^26.6.3",
"jest-preset-angular": "^8.3.2", "jest-preset-angular": "^8.3.2",
"protractor": "~7.0.0", "protractor": "~7.0.0",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"storybook-addon-angular-ivy": "^0.0.1", "storybook-addon-angular-ivy": "^0.0.1",
"ts-jest": "^26.4.4", "ts-jest": "^26.4.4",
"ts-node": "^10.4.0", "ts-node": "^10.4.0",

32
code/examples/cra-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cra-kitchen-sink", "name": "cra-kitchen-sink",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "react-scripts build", "build": "react-scripts build",
@ -11,7 +11,7 @@
"test": "react-scripts test --env=jsdom" "test": "react-scripts test --env=jsdom"
}, },
"dependencies": { "dependencies": {
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"global": "^4.4.0", "global": "^4.4.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "16.14.0", "react": "16.14.0",
@ -21,21 +21,21 @@
}, },
"devDependencies": { "devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-jest": "7.0.0-alpha.18", "@storybook/addon-jest": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/builder-webpack5": "7.0.0-alpha.18", "@storybook/builder-webpack5": "7.0.0-alpha.23",
"@storybook/preset-create-react-app": "^4.1.0", "@storybook/preset-create-react-app": "^4.1.0",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"webpack": "5" "webpack": "5"
}, },
"storybook": { "storybook": {

1
code/examples/cra-ts-essentials/.storybook/main.ts
View File

@ -12,6 +12,7 @@ const mainConfig: StorybookConfig = {
viewport: false, viewport: false,
}, },
}, },
'@storybook/addon-interactions',
], ],
logLevel: 'debug', logLevel: 'debug',
// add monorepo root as a valid directory to import modules from // add monorepo root as a valid directory to import modules from

19
code/examples/cra-ts-essentials/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cra-ts-essentials", "name": "cra-ts-essentials",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "react-scripts build", "build": "react-scripts build",
@ -23,8 +23,8 @@
] ]
}, },
"dependencies": { "dependencies": {
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"@types/jest": "^26.0.16", "@types/jest": "^26.0.16",
"@types/node": "^14.14.20 || ^16.0.0", "@types/node": "^14.14.20 || ^16.0.0",
"@types/react": "^16.14.23", "@types/react": "^16.14.23",
@ -37,14 +37,15 @@
"typescript": "~4.6.3" "typescript": "~4.6.3"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-essentials": "7.0.0-alpha.18", "@storybook/addon-essentials": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addon-interactions": "7.0.0-alpha.23",
"@storybook/builder-webpack5": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/builder-webpack5": "7.0.0-alpha.23",
"@storybook/preset-create-react-app": "^4.1.0", "@storybook/preset-create-react-app": "^4.1.0",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"@storybook/testing-library": "^0.0.9", "@storybook/testing-library": "^0.0.9",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"ts-node": "^10.4.0", "ts-node": "^10.4.0",
"webpack": "5" "webpack": "5"
}, },

6
code/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx
View File

@ -79,8 +79,10 @@ export const CSF3InputFieldFilled: CSF3Story = {
render: () => { render: () => {
return <input data-testid="input" />; return <input data-testid="input" />;
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('input'), 'Hello world!'); await step('Step label', async () => {
await userEvent.type(canvas.getByTestId('input'), 'Hello world!');
});
}, },
}; };

22
code/examples/cra-ts-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cra-ts-kitchen-sink", "name": "cra-ts-kitchen-sink",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "react-scripts build", "build": "react-scripts build",
@ -34,23 +34,23 @@
"typescript": "~4.6.3" "typescript": "~4.6.3"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/builder-webpack5": "7.0.0-alpha.18", "@storybook/builder-webpack5": "7.0.0-alpha.23",
"@storybook/preset-create-react-app": "^4.1.0", "@storybook/preset-create-react-app": "^4.1.0",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"@types/enzyme": "^3.10.8", "@types/enzyme": "^3.10.8",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.9.1", "enzyme-adapter-react-16": "^1.9.1",
"enzyme-to-json": "^3.6.1", "enzyme-to-json": "^3.6.1",
"fork-ts-checker-webpack-plugin": "^7.2.6", "fork-ts-checker-webpack-plugin": "^7.2.6",
"react-moment-proptypes": "^1.7.0", "react-moment-proptypes": "^1.7.0",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"ts-node": "^10.4.0", "ts-node": "^10.4.0",
"webpack": "5" "webpack": "5"
}, },

20
code/examples/doc-blocks/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/example-doc-blocks", "name": "@storybook/example-doc-blocks",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build", "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
@ -15,20 +15,20 @@
"@babel/preset-env": "^7.12.11", "@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10", "@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7", "@babel/preset-typescript": "^7.12.7",
"@storybook/addon-essentials": "7.0.0-alpha.18", "@storybook/addon-essentials": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/cli": "7.0.0-alpha.18", "@storybook/cli": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"@types/babel__preset-env": "^7", "@types/babel__preset-env": "^7",
"@types/react": "^16.14.23", "@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^16.9.14",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"sb": "7.0.0-alpha.18", "sb": "7.0.0-alpha.23",
"typescript": "~4.6.3", "typescript": "~4.6.3",
"webpack": "5" "webpack": "5"
}, },

28
code/examples/ember-cli/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ember-example", "name": "ember-example",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"--build-storybook": "yarn storybook-prebuild && storybook build", "--build-storybook": "yarn storybook-prebuild && storybook build",
@ -17,19 +17,19 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@ember/optional-features": "^2.0.0", "@ember/optional-features": "^2.0.0",
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addon-viewport": "7.0.0-alpha.18", "@storybook/addon-viewport": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/ember": "7.0.0-alpha.18", "@storybook/ember": "7.0.0-alpha.23",
"@storybook/ember-cli-storybook": "^0.2.1", "@storybook/ember-cli-storybook": "^0.2.1",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"broccoli-asset-rev": "^3.0.0", "broccoli-asset-rev": "^3.0.0",
"browserify-zlib": "^0.2.0", "browserify-zlib": "^0.2.0",
@ -49,7 +49,7 @@
"loader.js": "^4.7.0", "loader.js": "^4.7.0",
"os-browserify": "^0.3.0", "os-browserify": "^0.3.0",
"shx": "^0.3.2", "shx": "^0.3.2",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"stream-browserify": "^3.0.0", "stream-browserify": "^3.0.0",
"vm-browserify": "^1.1.2", "vm-browserify": "^1.1.2",
"webpack": "5", "webpack": "5",

20
code/examples/external-docs/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/external-docs", "name": "@storybook/external-docs",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "next build", "build": "next build",
@ -11,15 +11,15 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 --no-manager-cache -c .storybook" "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 --no-manager-cache -c .storybook"
}, },
"dependencies": { "dependencies": {
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-essentials": "7.0.0-alpha.18", "@storybook/addon-essentials": "7.0.0-alpha.23",
"@storybook/blocks": "7.0.0-alpha.18", "@storybook/blocks": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/preview-web": "7.0.0-alpha.18", "@storybook/preview-web": "7.0.0-alpha.23",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"formik": "^2.2.9", "formik": "^2.2.9",
"next": "^12.1.0", "next": "^12.1.0",
"nextra": "^1.1.0", "nextra": "^1.1.0",
@ -38,7 +38,7 @@
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "8.7.0", "eslint": "8.7.0",
"eslint-config-next": "12.0.8", "eslint-config-next": "12.0.8",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"typescript": "~4.6.3", "typescript": "~4.6.3",
"webpack": "5" "webpack": "5"
} }

38
code/examples/html-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "html-kitchen-sink", "name": "html-kitchen-sink",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"description": "", "description": "",
"keywords": [], "keywords": [],
@ -13,31 +13,31 @@
"storybook": "storybook dev -p 9006 --no-manager-cache" "storybook": "storybook dev -p 9006 --no-manager-cache"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-jest": "7.0.0-alpha.18", "@storybook/addon-jest": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-postcss": "^2.0.0", "@storybook/addon-postcss": "^2.0.0",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addon-viewport": "7.0.0-alpha.18", "@storybook/addon-viewport": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/client-api": "7.0.0-alpha.18", "@storybook/client-api": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/html": "7.0.0-alpha.18", "@storybook/html": "7.0.0-alpha.23",
"@storybook/html-webpack5": "7.0.0-alpha.18", "@storybook/html-webpack5": "7.0.0-alpha.23",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.0.1",
"eventemitter3": "^4.0.7", "eventemitter3": "^4.0.7",
"format-json": "^1.0.3", "format-json": "^1.0.3",
"global": "^4.4.0", "global": "^4.4.0",
"postcss": "^8.2.4", "postcss": "^8.2.4",
"postcss-color-rebeccapurple": "^6.0.0", "postcss-color-rebeccapurple": "^6.0.0",
"storybook": "7.0.0-alpha.18" "storybook": "7.0.0-alpha.23"
}, },
"storybook": { "storybook": {
"chromatic": { "chromatic": {

7
code/examples/official-storybook/manager.js
View File

@ -8,10 +8,11 @@ import addHeadWarning from './head-warning';
addHeadWarning('manager-head-not-loaded', 'Manager head not loaded'); addHeadWarning('manager-head-not-loaded', 'Manager head not loaded');
const PrefixIcon = styled(Icons)(({ theme }) => ({ const PrefixIcon = styled(Icons)(({ theme }) => ({
marginRight: 8, marginRight: 5,
fontSize: 'inherit', fontSize: 'inherit',
height: '1em', height: 12,
width: '1em', width: 12,
paddingTop: 1,
display: 'inline', display: 'inline',
alignSelf: 'center', alignSelf: 'center',
})); }));

52
code/examples/official-storybook/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "official-storybook", "name": "official-storybook",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build -c ./", "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build -c ./",
@ -13,33 +13,33 @@
"devDependencies": { "devDependencies": {
"@emotion/jest": "^11.8.0", "@emotion/jest": "^11.8.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-interactions": "7.0.0-alpha.18", "@storybook/addon-interactions": "7.0.0-alpha.23",
"@storybook/addon-jest": "7.0.0-alpha.18", "@storybook/addon-jest": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.18", "@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addon-toolbars": "7.0.0-alpha.18", "@storybook/addon-toolbars": "7.0.0-alpha.23",
"@storybook/addon-viewport": "7.0.0-alpha.18", "@storybook/addon-viewport": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/cli": "7.0.0-alpha.18", "@storybook/cli": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/design-system": "^5.4.7", "@storybook/design-system": "^5.4.7",
"@storybook/jest": "^0.0.10", "@storybook/jest": "^0.0.10",
"@storybook/node-logger": "7.0.0-alpha.18", "@storybook/node-logger": "7.0.0-alpha.23",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"@storybook/router": "7.0.0-alpha.18", "@storybook/router": "7.0.0-alpha.23",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@storybook/testing-library": "0.0.14-next.0", "@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"@testing-library/dom": "^7.31.2", "@testing-library/dom": "^7.31.2",
"@testing-library/user-event": "^13.1.9", "@testing-library/user-event": "^13.1.9",
"chromatic": "^6.0.2", "chromatic": "^6.0.2",
@ -55,7 +55,7 @@
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "16.14.0", "react": "16.14.0",
"react-dom": "16.14.0", "react-dom": "16.14.0",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"terser-webpack-plugin": "^5.3.1", "terser-webpack-plugin": "^5.3.1",
"uuid-browser": "^3.1.0", "uuid-browser": "^3.1.0",
"webpack": "5" "webpack": "5"

30
code/examples/official-storybook/preview.js
View File

@ -72,6 +72,25 @@ const ThemeStack = styled.div(
}) })
); );
const PlayFnNotice = styled.div(
{
position: 'absolute',
bottom: '1rem',
right: '1rem',
border: '1px solid #ccc',
borderRadius: '5px',
padding: '1rem',
fontSize: '12px',
'> *': {
display: 'block',
},
},
({ theme }) => ({
background: theme.background.app,
color: theme.color.defaultText,
})
);
const ThemedSetRoot = () => { const ThemedSetRoot = () => {
const theme = useTheme(); const theme = useTheme();
@ -87,8 +106,9 @@ const ThemedSetRoot = () => {
}; };
export const decorators = [ export const decorators = [
(StoryFn, { globals, parameters }) => { (StoryFn, { globals, parameters, playFunction }) => {
const theme = globals.theme || parameters.theme || (isChromatic() ? 'stacked' : 'light'); const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light';
const theme = globals.theme || parameters.theme || defaultTheme;
switch (theme) { switch (theme) {
case 'side-by-side': { case 'side-by-side': {
@ -137,6 +157,12 @@ export const decorators = [
<Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} /> <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
<Global styles={createReset} /> <Global styles={createReset} />
<ThemedSetRoot /> <ThemedSetRoot />
{!parameters.theme && isChromatic() && playFunction && (
<PlayFnNotice>
<span>Detected play function.</span>
<span>Rendering in a single theme</span>
</PlayFnNotice>
)}
<StoryFn /> <StoryFn />
</ThemeProvider> </ThemeProvider>
); );

6
code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx
View File

@ -196,6 +196,12 @@ Fixed layout requires custom `height` since it can't be determined.
</Story> </Story>
</Canvas> </Canvas>
### withSource="open"
<Canvas withSource="open">
<h2>source open</h2>
</Canvas>
## Docs Disable ## Docs Disable
<Story name="docs disable" parameters={{ docs: { disable: true } }}> <Story name="docs disable" parameters={{ docs: { disable: true } }}>

2
code/examples/official-storybook/stories/title/AutoTitle.stories.js
View File

@ -9,4 +9,4 @@ export default {
component: Button, component: Button,
}; };
export const Basic = () => <Button label="Click me" />; export const Basic = () => <Button>Click me</Button>;

2
code/examples/official-storybook/stories/title/CustomTitle.stories.js
View File

@ -8,4 +8,4 @@ export default {
component: Button, component: Button,
}; };
export const Basic = () => <Button label="Click me" />; export const Basic = () => <Button>Click me</Button>;

28
code/examples/preact-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "preact-example", "name": "preact-example",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@ -14,18 +14,18 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addon-viewport": "7.0.0-alpha.18", "@storybook/addon-viewport": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/preact": "7.0.0-alpha.18", "@storybook/preact": "7.0.0-alpha.23",
"@storybook/preact-webpack5": "7.0.0-alpha.18", "@storybook/preact-webpack5": "7.0.0-alpha.23",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@types/prop-types": "^15.7.3", "@types/prop-types": "^15.7.3",
"@types/react": "^17", "@types/react": "^17",
"@types/react-dom": "^17", "@types/react-dom": "^17",
@ -38,7 +38,7 @@
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"svg-url-loader": "^7.1.1", "svg-url-loader": "^7.1.1",
"webpack": "5", "webpack": "5",
"webpack-dev-server": "^4.8.1" "webpack-dev-server": "^4.8.1"

22
code/examples/react-ts/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/example-react-ts", "name": "@storybook/example-react-ts",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build", "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build",
@ -17,15 +17,15 @@
"@babel/preset-env": "^7.12.11", "@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10", "@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7", "@babel/preset-typescript": "^7.12.7",
"@storybook/addon-essentials": "7.0.0-alpha.18", "@storybook/addon-essentials": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/cli": "7.0.0-alpha.18", "@storybook/cli": "7.0.0-alpha.23",
"@storybook/components": "7.0.0-alpha.18", "@storybook/components": "7.0.0-alpha.23",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"@storybook/theming": "7.0.0-alpha.18", "@storybook/theming": "7.0.0-alpha.23",
"@testing-library/dom": "^7.31.2", "@testing-library/dom": "^7.31.2",
"@testing-library/react": "12.1.2", "@testing-library/react": "12.1.2",
"@testing-library/user-event": "^13.1.9", "@testing-library/user-event": "^13.1.9",
@ -34,7 +34,7 @@
"@types/react-dom": "^16.9.14", "@types/react-dom": "^16.9.14",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"typescript": "~4.6.3", "typescript": "~4.6.3",
"webpack": "5" "webpack": "5"
} }

26
code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
View File

@ -46,12 +46,12 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
.emotion-0 svg { .emotion-0 svg {
display: inline-block; display: inline-block;
height: 14px; height: 12px;
width: 14px; width: 12px;
vertical-align: top; vertical-align: top;
margin-right: 4px; margin-right: 4px;
margin-top: -1px; margin-top: 0;
margin-bottom: -1px; margin-bottom: 0;
pointer-events: none; pointer-events: none;
} }
@ -81,8 +81,9 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
<button <button
className="emotion-0" className="emotion-0"
label="Click me" >
/> Click me
</button>
`; `;
exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = ` exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
@ -131,12 +132,12 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
.emotion-0 svg { .emotion-0 svg {
display: inline-block; display: inline-block;
height: 14px; height: 12px;
width: 14px; width: 12px;
vertical-align: top; vertical-align: top;
margin-right: 4px; margin-right: 4px;
margin-top: -1px; margin-top: 0;
margin-bottom: -1px; margin-bottom: 0;
pointer-events: none; pointer-events: none;
} }
@ -166,8 +167,9 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
<button <button
className="emotion-0" className="emotion-0"
label="Click me" >
/> Click me
</button>
`; `;
exports[`Storyshots Demo/AccountForm Standard 1`] = ` exports[`Storyshots Demo/AccountForm Standard 1`] = `

2
code/examples/react-ts/src/title/AutoTitle.stories.js
View File

@ -9,4 +9,4 @@ export default {
component: Button, component: Button,
}; };
export const Basic = () => <Button label="Click me" />; export const Basic = () => <Button>Click me</Button>;

2
code/examples/react-ts/src/title/CustomTitle.stories.js
View File

@ -8,4 +8,4 @@ export default {
component: Button, component: Button,
}; };
export const Basic = () => <Button label="Click me" />; export const Basic = () => <Button>Click me</Button>;

22
code/examples/server-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "server-kitchen-sink", "name": "server-kitchen-sink",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"description": "", "description": "",
"keywords": [], "keywords": [],
@ -14,15 +14,15 @@
"storybook": "SERVER_PORT=1137 storybook dev -p 9006 --quiet" "storybook": "SERVER_PORT=1137 storybook dev -p 9006 --quiet"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/node-logger": "7.0.0-alpha.18", "@storybook/node-logger": "7.0.0-alpha.23",
"@storybook/server": "7.0.0-alpha.18", "@storybook/server": "7.0.0-alpha.23",
"@storybook/server-webpack5": "7.0.0-alpha.18", "@storybook/server-webpack5": "7.0.0-alpha.23",
"concurrently": "^5.3.0", "concurrently": "^5.3.0",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "~4.17.1", "express": "~4.17.1",
@ -30,6 +30,6 @@
"nodemon": "^2.0.7", "nodemon": "^2.0.7",
"pug": "^3.0.0", "pug": "^3.0.0",
"safe-identifier": "^0.4.1", "safe-identifier": "^0.4.1",
"storybook": "7.0.0-alpha.18" "storybook": "7.0.0-alpha.23"
} }
} }

12
code/examples/standalone-preview/package.json
View File

@ -1,20 +1,20 @@
{ {
"name": "standalone-preview", "name": "standalone-preview",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html", "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
"storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337" "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/cli": "7.0.0-alpha.18", "@storybook/cli": "7.0.0-alpha.23",
"@storybook/react": "7.0.0-alpha.18", "@storybook/react": "7.0.0-alpha.23",
"@storybook/react-webpack5": "7.0.0-alpha.18", "@storybook/react-webpack5": "7.0.0-alpha.23",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"parcel": "2.0.1", "parcel": "2.0.1",
"react": "16.14.0", "react": "16.14.0",
"react-dom": "16.14.0", "react-dom": "16.14.0",
"storybook": "7.0.0-alpha.18" "storybook": "7.0.0-alpha.23"
} }
} }

34
code/examples/svelte-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "svelte-example", "name": "svelte-example",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build-storybook": "storybook build", "build-storybook": "storybook build",
@ -10,24 +10,24 @@
"global": "^4.4.0" "global": "^4.4.0"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-interactions": "7.0.0-alpha.18", "@storybook/addon-interactions": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addon-viewport": "7.0.0-alpha.18", "@storybook/addon-viewport": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/jest": "^0.0.10", "@storybook/jest": "^0.0.10",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@storybook/svelte": "7.0.0-alpha.18", "@storybook/svelte": "7.0.0-alpha.23",
"@storybook/svelte-webpack5": "7.0.0-alpha.18", "@storybook/svelte-webpack5": "7.0.0-alpha.23",
"@storybook/testing-library": "0.0.14-next.0", "@storybook/testing-library": "0.0.14-next.0",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"svelte-jester": "^2.3.2", "svelte-jester": "^2.3.2",
"svelte-preprocess": "^4.10.6" "svelte-preprocess": "^4.10.6"
}, },

2
code/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx
View File

@ -67,7 +67,7 @@ And `square`:
## More info ## More info
For more info, check out the [Storybook Docs README](https://github.com/storybookjs/storybook/tree/next/addons/docs). For more info, check out the [Storybook Docs README](https://github.com/storybookjs/storybook/tree/next/code/addons/docs).
We want your feedback to help make this more useful. We want your feedback to help make this more useful.

18
code/examples/vue-3-cli/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-3-cli-example", "name": "vue-3-cli-example",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "vue-cli-service build", "build": "vue-cli-service build",
@ -14,21 +14,21 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-essentials": "7.0.0-alpha.18", "@storybook/addon-essentials": "7.0.0-alpha.23",
"@storybook/addon-interactions": "7.0.0-alpha.18", "@storybook/addon-interactions": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/jest": "^0.0.10", "@storybook/jest": "^0.0.10",
"@storybook/testing-library": "0.0.14-next.0", "@storybook/testing-library": "0.0.14-next.0",
"@storybook/vue3": "7.0.0-alpha.18", "@storybook/vue3": "7.0.0-alpha.23",
"@storybook/vue3-webpack5": "7.0.0-alpha.18", "@storybook/vue3-webpack5": "7.0.0-alpha.23",
"@vue/cli-plugin-babel": "^5.0.4", "@vue/cli-plugin-babel": "^5.0.4",
"@vue/cli-plugin-typescript": "^5.0.4", "@vue/cli-plugin-typescript": "^5.0.4",
"@vue/cli-service": "^5.0.4", "@vue/cli-service": "^5.0.4",
"@vue/compiler-sfc": "^3.2.36", "@vue/compiler-sfc": "^3.2.36",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"typescript": "~4.6.3", "typescript": "~4.6.3",
"vue-jest": "^5.0.0-alpha.8", "vue-jest": "^5.0.0-alpha.8",
"vue-loader": "^16.0.0" "vue-loader": "^16.0.0"

14
code/examples/vue-cli/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-cli-example", "name": "vue-cli-example",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "vue-cli-service build", "build": "vue-cli-service build",
@ -15,16 +15,16 @@
"vue-property-decorator": "^9.1.2" "vue-property-decorator": "^9.1.2"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-essentials": "7.0.0-alpha.18", "@storybook/addon-essentials": "7.0.0-alpha.23",
"@storybook/preset-scss": "^1.0.3", "@storybook/preset-scss": "^1.0.3",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@storybook/vue": "7.0.0-alpha.18", "@storybook/vue": "7.0.0-alpha.23",
"@storybook/vue-webpack5": "7.0.0-alpha.18", "@storybook/vue-webpack5": "7.0.0-alpha.23",
"@vue/cli-plugin-babel": "^5.0.4", "@vue/cli-plugin-babel": "^5.0.4",
"@vue/cli-plugin-typescript": "^5.0.4", "@vue/cli-plugin-typescript": "^5.0.4",
"@vue/cli-service": "^5.0.4", "@vue/cli-service": "^5.0.4",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"typescript": "~4.6.3", "typescript": "~4.6.3",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
} }

34
code/examples/vue-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-example", "name": "vue-example",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@ -14,29 +14,29 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@storybook/addon-a11y": "7.0.0-alpha.18", "@storybook/addon-a11y": "7.0.0-alpha.23",
"@storybook/addon-actions": "7.0.0-alpha.18", "@storybook/addon-actions": "7.0.0-alpha.23",
"@storybook/addon-backgrounds": "7.0.0-alpha.18", "@storybook/addon-backgrounds": "7.0.0-alpha.23",
"@storybook/addon-controls": "7.0.0-alpha.18", "@storybook/addon-controls": "7.0.0-alpha.23",
"@storybook/addon-docs": "7.0.0-alpha.18", "@storybook/addon-docs": "7.0.0-alpha.23",
"@storybook/addon-highlight": "7.0.0-alpha.18", "@storybook/addon-highlight": "7.0.0-alpha.23",
"@storybook/addon-interactions": "7.0.0-alpha.18", "@storybook/addon-interactions": "7.0.0-alpha.23",
"@storybook/addon-links": "7.0.0-alpha.18", "@storybook/addon-links": "7.0.0-alpha.23",
"@storybook/addon-storyshots": "7.0.0-alpha.18", "@storybook/addon-storyshots": "7.0.0-alpha.23",
"@storybook/addon-storysource": "7.0.0-alpha.18", "@storybook/addon-storysource": "7.0.0-alpha.23",
"@storybook/addon-viewport": "7.0.0-alpha.18", "@storybook/addon-viewport": "7.0.0-alpha.23",
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/jest": "^0.0.10", "@storybook/jest": "^0.0.10",
"@storybook/source-loader": "7.0.0-alpha.18", "@storybook/source-loader": "7.0.0-alpha.23",
"@storybook/testing-library": "0.0.14-next.0", "@storybook/testing-library": "0.0.14-next.0",
"@storybook/vue": "7.0.0-alpha.18", "@storybook/vue": "7.0.0-alpha.23",
"@storybook/vue-webpack5": "7.0.0-alpha.18", "@storybook/vue-webpack5": "7.0.0-alpha.23",
"@vue/babel-preset-jsx": "^1.2.4", "@vue/babel-preset-jsx": "^1.2.4",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"storybook": "7.0.0-alpha.18", "storybook": "7.0.0-alpha.23",
"svg-url-loader": "^7.1.1", "svg-url-loader": "^7.1.1",
"vue-loader": "^15.9.6", "vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3", "vue-style-loader": "^4.1.3",

2
code/examples/web-components-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "web-components-kitchen-sink", "name": "web-components-kitchen-sink",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"private": true, "private": true,
"description": "", "description": "",
"keywords": [], "keywords": [],

2
code/frameworks/angular/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh ```sh
cd my-angular-app cd my-angular-app
npx sb init npx storybook init
``` ```
For more information visit: [storybook.js.org](https://storybook.js.org) For more information visit: [storybook.js.org](https://storybook.js.org)

26
code/frameworks/angular/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/angular", "name": "@storybook/angular",
"version": "7.0.0-alpha.18", "version": "7.0.0-alpha.23",
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
"keywords": [ "keywords": [
"storybook", "storybook",
@ -34,19 +34,19 @@
"prepare": "node ../../../scripts/prepare.js" "prepare": "node ../../../scripts/prepare.js"
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "7.0.0-alpha.18", "@storybook/addons": "7.0.0-alpha.23",
"@storybook/api": "7.0.0-alpha.18", "@storybook/api": "7.0.0-alpha.23",
"@storybook/builder-webpack5": "7.0.0-alpha.18", "@storybook/builder-webpack5": "7.0.0-alpha.23",
"@storybook/client-logger": "7.0.0-alpha.18", "@storybook/client-logger": "7.0.0-alpha.23",
"@storybook/core-client": "7.0.0-alpha.18", "@storybook/core-client": "7.0.0-alpha.23",
"@storybook/core-common": "7.0.0-alpha.18", "@storybook/core-common": "7.0.0-alpha.23",
"@storybook/core-events": "7.0.0-alpha.18", "@storybook/core-events": "7.0.0-alpha.23",
"@storybook/core-server": "7.0.0-alpha.18", "@storybook/core-server": "7.0.0-alpha.23",
"@storybook/csf": "0.0.2--canary.0899bb7.0", "@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/docs-tools": "7.0.0-alpha.18", "@storybook/docs-tools": "7.0.0-alpha.23",
"@storybook/node-logger": "7.0.0-alpha.18", "@storybook/node-logger": "7.0.0-alpha.23",
"@storybook/semver": "^7.3.2", "@storybook/semver": "^7.3.2",
"@storybook/store": "7.0.0-alpha.18", "@storybook/store": "7.0.0-alpha.23",
"@types/node": "^14.14.20 || ^16.0.0", "@types/node": "^14.14.20 || ^16.0.0",
"@types/react": "^16.14.23", "@types/react": "^16.14.23",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^16.9.14",
@ -128,5 +128,5 @@
"access": "public" "access": "public"
}, },
"builders": "dist/types/builders/builders.json", "builders": "dist/types/builders/builders.json",
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53" "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a"
} }

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