mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 06:41:17 +08:00
Merge branch 'next' into feat/addons-actions-tsup
# Conflicts: # code/addons/actions/package.json
This commit is contained in:
Norbert de Langen
commit
c9d0d67478
@ -195,13 +195,13 @@ jobs:
|
||||
name: running local registry
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
yarn local-registry --port 6001 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
yarn wait-on http://localhost:6001
|
||||
- run:
|
||||
name: Run E2E (extended) tests
|
||||
command: |
|
||||
@ -225,13 +225,13 @@ jobs:
|
||||
name: Running local registry
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
yarn local-registry --port 6001 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
yarn wait-on http://localhost:6001
|
||||
- run:
|
||||
name: Run E2E (core) tests
|
||||
# Do not test CRA here because it's done in PnP part
|
||||
@ -265,11 +265,11 @@ jobs:
|
||||
# at: .
|
||||
# - run:
|
||||
# name: Running local registry
|
||||
# command: yarn local-registry --port 6000 --open
|
||||
# command: yarn local-registry --port 6001 --open
|
||||
# background: true
|
||||
# - run:
|
||||
# name: Wait for registry
|
||||
# command: yarn wait-on http://localhost:6000
|
||||
# command: yarn wait-on http://localhost:6001
|
||||
# - run:
|
||||
# name: Run smoke tests
|
||||
# command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
|
||||
@ -293,13 +293,13 @@ jobs:
|
||||
name: Running local registry
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
yarn local-registry --port 6001 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
yarn wait-on http://localhost:6001
|
||||
- run:
|
||||
name: set up cra repro, skip tests
|
||||
command: |
|
||||
@ -324,13 +324,13 @@ jobs:
|
||||
name: Running local registry
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
yarn local-registry --port 6001 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
yarn wait-on http://localhost:6001
|
||||
- run:
|
||||
name: run e2e tests cra
|
||||
command: |
|
||||
@ -457,6 +457,114 @@ jobs:
|
||||
cd code
|
||||
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:
|
||||
test:
|
||||
jobs:
|
||||
@ -500,3 +608,23 @@ workflows:
|
||||
- cra-bench:
|
||||
requires:
|
||||
- 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
7
.github/workflows/generate-repros-next.yml
vendored
@ -3,6 +3,11 @@ name: Generate and push repros to the next branch
|
||||
on:
|
||||
schedule:
|
||||
- cron: '2 2 */1 * *'
|
||||
workflow_dispatch:
|
||||
# To remove when the branch will be merged
|
||||
push:
|
||||
branches:
|
||||
- shilman/add-angular-repro-template
|
||||
|
||||
jobs:
|
||||
generate:
|
||||
@ -21,7 +26,7 @@ jobs:
|
||||
run: yarn bootstrap --prep
|
||||
working-directory: ./code
|
||||
- name: Generate repros
|
||||
run: yarn next-repro
|
||||
run: yarn generate-repros-next --local-registry
|
||||
working-directory: ./code
|
||||
- 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
|
||||
|
||||
3
.github/workflows/generate-repros.yml
vendored
3
.github/workflows/generate-repros.yml
vendored
@ -15,6 +15,9 @@ jobs:
|
||||
env:
|
||||
YARN_ENABLE_IMMUTABLE_INSTALLS: false
|
||||
steps:
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
- uses: actions/checkout@v2
|
||||
- name: Setup git user
|
||||
run: |
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -9,6 +9,7 @@ dist
|
||||
junit.xml
|
||||
/repros
|
||||
/sandbox
|
||||
/built-sandboxes
|
||||
.verdaccio-cache
|
||||
|
||||
# Yarn stuff
|
||||
|
||||
72
CHANGELOG.md
72
CHANGELOG.md
@ -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)
|
||||
|
||||
#### Features
|
||||
|
||||
@ -7,10 +7,10 @@
|
||||
|
||||
# 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:
|
||||
- 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`
|
||||
- Check the result in the `repros` directory
|
||||
|
||||
|
||||
254
MIGRATION.md
254
MIGRATION.md
@ -3,6 +3,9 @@
|
||||
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
|
||||
- [Alpha release notes](#alpha-release-notes)
|
||||
- [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)
|
||||
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
|
||||
- [Webpack4 support discontinued](#webpack4-support-discontinued)
|
||||
@ -13,7 +16,14 @@
|
||||
- [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default)
|
||||
- [Babel mode v7 by default](#babel-mode-v7-by-default)
|
||||
- [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)
|
||||
- [Vue 3 upgrade](#vue-3-upgrade)
|
||||
- [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
|
||||
|
||||
#### 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
|
||||
|
||||
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.
|
||||
|
||||
#### 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
|
||||
|
||||
### Vue 3 upgrade
|
||||
@ -515,7 +742,8 @@ import startCase from 'lodash/startCase';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
|
||||
renderLabel: ({ name, type }) =>
|
||||
type === 'story' ? name : startCase(name),
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -942,7 +1170,11 @@ After:
|
||||
```js
|
||||
// .storybook/main.js
|
||||
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:
|
||||
|
||||
```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:
|
||||
|
||||
```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:
|
||||
@ -2286,7 +2522,9 @@ For example, here's how to sort by story ID using `storySort`:
|
||||
addParameters({
|
||||
options: {
|
||||
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": {
|
||||
"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"]
|
||||
}
|
||||
}
|
||||
|
||||
50
README.md
50
README.md
@ -93,46 +93,46 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| Renderer | Demo | |
|
||||
|----------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| [React](code/renderers/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](code/renderers/react) |
|
||||
| [Vue](code/renderers/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](code/renderers/vue) |
|
||||
| [Angular](code/frameworks/angular/) | [](https://storybookjs.netlify.com/angular-cli/) | [](code/frameworks/angular/) |
|
||||
| [Web components](code/renderers/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](code/renderers/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [HTML](code/renderers/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](code/renderers/html) |
|
||||
| [Ember](code/frameworks/ember/) | [](https://storybookjs.netlify.com/ember-cli/) | [](code/frameworks/ember/) |
|
||||
| [Svelte](code/renderers/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](code/renderers/svelte) |
|
||||
| [Preact](code/renderers/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](code/renderers/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
- [CLI](lib/cli) - Streamlined installation for a variety of app types
|
||||
- [examples](examples) - Code examples to illustrate different Storybook use cases
|
||||
- [CLI](code/lib/cli) - Streamlined installation for a variety of app types
|
||||
- [examples](code/examples) - Code examples to illustrate different Storybook use cases
|
||||
|
||||
### Addons
|
||||
|
||||
| Addons | |
|
||||
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
|
||||
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
|
||||
| [a11y](code/addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](code/addons/actions/) | Log actions as users interact with components 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 |
|
||||
| [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 |
|
||||
| [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 |
|
||||
| [jest](addons/jest/) | View the results of components' unit tests in Storybook |
|
||||
| [links](addons/links/) | Create links between stories |
|
||||
| [jest](code/addons/jest/) | View the results of components' unit tests in Storybook |
|
||||
| [links](code/addons/links/) | Create links between stories |
|
||||
| [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params |
|
||||
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook |
|
||||
| [storysource](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 |
|
||||
| [outline](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 |
|
||||
| [storyshots](code/addons/storyshots/) | Snapshot testing for components in Storybook |
|
||||
| [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
| [outline](code/addons/outline/) | Visuallly debug the CSS layout and alignment 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)
|
||||
|
||||
@ -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.
|
||||
|
||||
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
|
||||
|
||||
|
||||
@ -95,5 +95,11 @@ module.exports = {
|
||||
'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
6
code/.gitignore
vendored
@ -36,6 +36,12 @@ examples/angular-cli/addon-jest.testresults.json
|
||||
junit.xml
|
||||
.next
|
||||
|
||||
/test-results/
|
||||
/playwright-results/
|
||||
/playwright-report/
|
||||
/playwright/.cache/
|
||||
|
||||
|
||||
# Yarn stuff
|
||||
/**/.yarn/*
|
||||
!/**/.yarn/releases
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -62,15 +62,15 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/channels": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/channels": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@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",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -105,7 +105,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -75,7 +75,7 @@ export const Item = (props: ItemProps) => {
|
||||
<Wrapper>
|
||||
<HeaderBar onClick={() => onToggle(!open)} role="button">
|
||||
<Icon
|
||||
icon="chevrondown"
|
||||
icon="arrowdown"
|
||||
color="#9DA5AB"
|
||||
style={{
|
||||
transform: `rotate(${open ? 0 : -90}deg)`,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -58,13 +58,13 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@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",
|
||||
"dequal": "^2.0.2",
|
||||
"global": "^4.4.0",
|
||||
@ -103,7 +103,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -62,13 +62,13 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@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",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -100,7 +100,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -210,4 +210,4 @@ export const Template = (args) => <Button {...args} />
|
||||
</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).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -57,16 +57,16 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/blocks": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-common": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/blocks": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.18",
|
||||
"@storybook/store": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@storybook/store": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -93,7 +93,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -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%" />
|
||||
</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
|
||||
|
||||
@ -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%" />
|
||||
</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
|
||||
|
||||
@ -83,7 +83,7 @@ Storybook Docs supports all view layers that Storybook supports except for React
|
||||
|
||||
**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
|
||||
|
||||
@ -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:
|
||||
|
||||
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
|
||||
|
||||
- [React](https://github.com/storybookjs/storybook/tree/next/addons/docs/react) (covered here)
|
||||
- [Vue](https://github.com/storybookjs/storybook/tree/next/addons/docs/vue)
|
||||
- [Angular](https://github.com/storybookjs/storybook/tree/next/addons/docs/angular)
|
||||
- [Ember](https://github.com/storybookjs/storybook/tree/next/addons/docs/ember)
|
||||
- [Web Components](https://github.com/storybookjs/storybook/tree/next/addons/docs/web-components)
|
||||
- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/addons/docs/common)
|
||||
- [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
|
||||
- [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
|
||||
- [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
|
||||
- [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
|
||||
- [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/code/addons/docs/common)
|
||||
|
||||
## Preset options
|
||||
|
||||
@ -229,12 +229,12 @@ addParameters({
|
||||
|
||||
## 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
|
||||
|
||||
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)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
|
||||
@ -55,7 +55,7 @@ import { Badge } from './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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@ export const WithControls = (args) => <MyComponent {...args} />;
|
||||
<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
|
||||
|
||||
@ -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' }`
|
||||
> - `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:
|
||||
|
||||
| Field | Description |
|
||||
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `name` | The name of the property |
|
||||
| `type.required` | Whether or not the property is required |
|
||||
| `description` | A markdown description for the property |
|
||||
| `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.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) |
|
||||
| `control` | See [`addon-controls` README](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#configuration) |
|
||||
| Field | Description |
|
||||
| ---------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| `name` | The name of the property |
|
||||
| `type.required` | Whether or not the property is required |
|
||||
| `description` | A markdown description for the property |
|
||||
| `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.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) |
|
||||
| `control` | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) |
|
||||
|
||||
### Custom ArgTypes in MDX
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ If you want to intersperse longform documentation in your Storybook, for example
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -53,22 +53,22 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/blocks": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-common": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/blocks": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.18",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.18",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.23",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.23",
|
||||
"@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.18",
|
||||
"@storybook/postinstall": "7.0.0-alpha.18",
|
||||
"@storybook/preview-web": "7.0.0-alpha.18",
|
||||
"@storybook/source-loader": "7.0.0-alpha.18",
|
||||
"@storybook/store": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@storybook/postinstall": "7.0.0-alpha.23",
|
||||
"@storybook/preview-web": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@storybook/store": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"babel-loader": "^8.2.5",
|
||||
"core-js": "^3.8.2",
|
||||
"dequal": "^2.0.2",
|
||||
@ -104,7 +104,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
@ -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)
|
||||
- [Viewport](https://github.com/storybookjs/storybook/tree/next/code/addons/viewport)
|
||||
- [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
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,25 +33,25 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-measure": "7.0.0-alpha.18",
|
||||
"@storybook/addon-outline": "7.0.0-alpha.18",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.18",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/core-common": "7.0.0-alpha.18",
|
||||
"@storybook/node-logger": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-measure": "7.0.0-alpha.23",
|
||||
"@storybook/addon-outline": "7.0.0-alpha.23",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "7.0.0-alpha.18",
|
||||
"@storybook/vue": "7.0.0-alpha.23",
|
||||
"@types/jest": "^26.0.16",
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
@ -99,5 +99,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53"
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -37,8 +37,8 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
@ -49,7 +49,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -36,15 +36,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-common": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/instrumenter": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/instrumenter": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -7,19 +7,22 @@ describe('Panel', () => {
|
||||
{
|
||||
callId: 'story--id [4] findByText',
|
||||
status: CallStates.DONE,
|
||||
ancestors: [],
|
||||
},
|
||||
{
|
||||
callId: 'story--id [5] click',
|
||||
status: CallStates.DONE,
|
||||
ancestors: [],
|
||||
},
|
||||
{
|
||||
callId: 'story--id [6] waitFor',
|
||||
status: CallStates.DONE,
|
||||
ancestors: [],
|
||||
},
|
||||
{
|
||||
callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
status: CallStates.DONE,
|
||||
ancestors: ['story--id [6] waitFor'],
|
||||
},
|
||||
];
|
||||
const calls = new Map<Call['id'], Call>(
|
||||
@ -27,6 +30,7 @@ describe('Panel', () => {
|
||||
{
|
||||
id: 'story--id [0] action',
|
||||
storyId: 'story--id',
|
||||
ancestors: [],
|
||||
cursor: 0,
|
||||
path: [],
|
||||
method: 'action',
|
||||
@ -37,6 +41,7 @@ describe('Panel', () => {
|
||||
{
|
||||
id: 'story--id [1] action',
|
||||
storyId: 'story--id',
|
||||
ancestors: [],
|
||||
cursor: 1,
|
||||
path: [],
|
||||
method: 'action',
|
||||
@ -47,6 +52,7 @@ describe('Panel', () => {
|
||||
{
|
||||
id: 'story--id [2] action',
|
||||
storyId: 'story--id',
|
||||
ancestors: [],
|
||||
cursor: 2,
|
||||
path: [],
|
||||
method: 'action',
|
||||
@ -57,6 +63,7 @@ describe('Panel', () => {
|
||||
{
|
||||
id: 'story--id [3] within',
|
||||
storyId: 'story--id',
|
||||
ancestors: [],
|
||||
cursor: 3,
|
||||
path: [],
|
||||
method: 'within',
|
||||
@ -67,6 +74,7 @@ describe('Panel', () => {
|
||||
{
|
||||
id: 'story--id [4] findByText',
|
||||
storyId: 'story--id',
|
||||
ancestors: [],
|
||||
cursor: 4,
|
||||
path: [{ __callId__: 'story--id [3] within' }],
|
||||
method: 'findByText',
|
||||
@ -77,6 +85,7 @@ describe('Panel', () => {
|
||||
{
|
||||
id: 'story--id [5] click',
|
||||
storyId: 'story--id',
|
||||
ancestors: [],
|
||||
cursor: 5,
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
@ -86,8 +95,8 @@ describe('Panel', () => {
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [0] expect',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
ancestors: ['story--id [6] waitFor'],
|
||||
cursor: 0,
|
||||
path: [],
|
||||
method: 'expect',
|
||||
@ -97,8 +106,8 @@ describe('Panel', () => {
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [1] stringMatching',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
ancestors: ['story--id [6] waitFor'],
|
||||
cursor: 1,
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
@ -108,8 +117,8 @@ describe('Panel', () => {
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
ancestors: ['story--id [6] waitFor'],
|
||||
cursor: 2,
|
||||
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
@ -120,6 +129,7 @@ describe('Panel', () => {
|
||||
{
|
||||
id: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
ancestors: [],
|
||||
cursor: 6,
|
||||
path: [],
|
||||
method: 'waitFor',
|
||||
@ -138,6 +148,7 @@ describe('Panel', () => {
|
||||
...calls.get('story--id [4] findByText'),
|
||||
status: CallStates.DONE,
|
||||
childCallIds: undefined,
|
||||
isHidden: false,
|
||||
isCollapsed: false,
|
||||
toggleCollapsed: expect.any(Function),
|
||||
},
|
||||
@ -145,6 +156,7 @@ describe('Panel', () => {
|
||||
...calls.get('story--id [5] click'),
|
||||
status: CallStates.DONE,
|
||||
childCallIds: undefined,
|
||||
isHidden: false,
|
||||
isCollapsed: false,
|
||||
toggleCollapsed: expect.any(Function),
|
||||
},
|
||||
@ -152,6 +164,7 @@ describe('Panel', () => {
|
||||
...calls.get('story--id [6] waitFor'),
|
||||
status: CallStates.DONE,
|
||||
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
|
||||
isHidden: false,
|
||||
isCollapsed: false,
|
||||
toggleCollapsed: expect.any(Function),
|
||||
},
|
||||
@ -159,13 +172,14 @@ describe('Panel', () => {
|
||||
...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
|
||||
status: CallStates.DONE,
|
||||
childCallIds: undefined,
|
||||
isHidden: false,
|
||||
isCollapsed: false,
|
||||
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']);
|
||||
|
||||
expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([
|
||||
@ -173,16 +187,25 @@ describe('Panel', () => {
|
||||
...calls.get('story--id [4] findByText'),
|
||||
childCallIds: undefined,
|
||||
isCollapsed: false,
|
||||
isHidden: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
...calls.get('story--id [5] click'),
|
||||
childCallIds: undefined,
|
||||
isCollapsed: false,
|
||||
isHidden: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
...calls.get('story--id [6] waitFor'),
|
||||
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
|
||||
isCollapsed: true,
|
||||
isHidden: false,
|
||||
}),
|
||||
expect.objectContaining({
|
||||
...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
|
||||
childCallIds: undefined,
|
||||
isCollapsed: false,
|
||||
isHidden: true,
|
||||
}),
|
||||
]);
|
||||
});
|
||||
|
||||
@ -16,6 +16,7 @@ import { TabIcon, TabStatus } from './components/TabStatus';
|
||||
interface Interaction extends Call {
|
||||
status: Call['status'];
|
||||
childCallIds: Call['id'][];
|
||||
isHidden: boolean;
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
}
|
||||
@ -43,16 +44,18 @@ export const getInteractions = ({
|
||||
const callsById = new Map<Call['id'], Call>();
|
||||
const childCallMap = new Map<Call['id'], Call['id'][]>();
|
||||
return log
|
||||
.filter(({ callId, parentId }) => {
|
||||
if (!parentId) return true;
|
||||
childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
|
||||
return !collapsed.has(parentId);
|
||||
.map<Call & { isHidden: boolean }>(({ callId, ancestors, status }) => {
|
||||
let isHidden = false;
|
||||
ancestors.forEach((ancestor) => {
|
||||
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) => {
|
||||
const status =
|
||||
call.status === CallStates.ERROR &&
|
||||
callsById.get(call.parentId)?.status === CallStates.ACTIVE
|
||||
callsById.get(call.ancestors.slice(-1)[0])?.status === CallStates.ACTIVE
|
||||
? CallStates.ACTIVE
|
||||
: 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 [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 setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
|
||||
|
||||
@ -110,6 +114,7 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
|
||||
setInteractions(
|
||||
getInteractions({ log: payload.logItems, calls: calls.current, collapsed, setCollapsed })
|
||||
);
|
||||
log.current = payload.logItems;
|
||||
},
|
||||
[STORY_RENDER_PHASE_CHANGED]: (event) => {
|
||||
setStoryId(event.storyId);
|
||||
@ -124,7 +129,6 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
|
||||
setErrored(true);
|
||||
},
|
||||
[PLAY_FUNCTION_THREW_EXCEPTION]: (e) => {
|
||||
console.log('PLAY_FUNCTION_THREW_EXCEPTION');
|
||||
if (e?.message !== IGNORED_EXCEPTION.message) setCaughtException(e);
|
||||
else setCaughtException(undefined);
|
||||
},
|
||||
@ -132,9 +136,15 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
|
||||
[collapsed]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
setInteractions(
|
||||
getInteractions({ log: log.current, calls: calls.current, collapsed, setCollapsed })
|
||||
);
|
||||
}, [collapsed]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isPlaying || isRerunAnimating) return;
|
||||
setInteractionsCount(interactions.length);
|
||||
setInteractionsCount(interactions.filter(({ method }) => method !== 'step').length);
|
||||
}, [interactions, isPlaying, isRerunAnimating]);
|
||||
|
||||
const controls = React.useMemo(
|
||||
|
||||
@ -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>
|
||||
@ -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'));
|
||||
},
|
||||
};
|
||||
@ -45,7 +45,7 @@ export const Done: Story = {
|
||||
|
||||
export const WithParent: Story = {
|
||||
args: {
|
||||
call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' },
|
||||
call: { ...getCalls(CallStates.DONE).slice(-1)[0], ancestors: ['parent-id'] },
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ const RowContainer = styled('div', {
|
||||
? transparentize(0.93, theme.color.negative)
|
||||
: theme.background.warning,
|
||||
}),
|
||||
paddingLeft: call.parentId ? 20 : 0,
|
||||
paddingLeft: call.ancestors.length * 20,
|
||||
}),
|
||||
({ theme, call, pausedAt }) =>
|
||||
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',
|
||||
'&:hover': disabled ? {} : { background: theme.background.hoverable },
|
||||
'&:hover': isInteractive ? {} : { background: theme.background.hoverable },
|
||||
}));
|
||||
|
||||
const RowLabel = styled('button', {
|
||||
@ -130,6 +130,7 @@ export const Interaction = ({
|
||||
controls,
|
||||
controlStates,
|
||||
childCallIds,
|
||||
isHidden,
|
||||
isCollapsed,
|
||||
toggleCollapsed,
|
||||
pausedAt,
|
||||
@ -139,18 +140,23 @@ export const Interaction = ({
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
childCallIds?: Call['id'][];
|
||||
isHidden: boolean;
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
pausedAt?: Call['id'];
|
||||
}) => {
|
||||
const [isHovered, setIsHovered] = React.useState(false);
|
||||
const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors.length;
|
||||
|
||||
if (isHidden) return null;
|
||||
|
||||
return (
|
||||
<RowContainer call={call} pausedAt={pausedAt}>
|
||||
<RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}>
|
||||
<RowHeader isInteractive={isInteractive}>
|
||||
<RowLabel
|
||||
call={call}
|
||||
onClick={() => controls.goto(call.id)}
|
||||
disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
|
||||
disabled={isInteractive}
|
||||
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
|
||||
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
|
||||
>
|
||||
@ -163,11 +169,7 @@ export const Interaction = ({
|
||||
{childCallIds?.length > 0 && (
|
||||
<WithTooltip
|
||||
hasChrome={false}
|
||||
tooltip={
|
||||
<Note
|
||||
note={`${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`}
|
||||
/>
|
||||
}
|
||||
tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
|
||||
>
|
||||
<StyledIconButton containsIcon onClick={toggleCollapsed}>
|
||||
<Icons icon="listunordered" />
|
||||
|
||||
@ -122,7 +122,7 @@ export const Failed: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const WithDebuggingDisabled: Story = {
|
||||
export const NoDebugger: Story = {
|
||||
args: { controlStates: { ...SubnavStories.args.controlStates, debugger: false } },
|
||||
};
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@ interface InteractionsPanelProps {
|
||||
interactions: (Call & {
|
||||
status?: CallStates;
|
||||
childCallIds: Call['id'][];
|
||||
isHidden: boolean;
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
})[];
|
||||
@ -118,6 +119,7 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
childCallIds={call.childCallIds}
|
||||
isHidden={call.isHidden}
|
||||
isCollapsed={call.isCollapsed}
|
||||
toggleCollapsed={call.toggleCollapsed}
|
||||
pausedAt={pausedAt}
|
||||
|
||||
@ -68,7 +68,7 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
|
||||
<Wrapper>
|
||||
<HeaderBar onClick={() => onToggle(!open)} role="button">
|
||||
<Icon
|
||||
icon="chevrondown"
|
||||
icon="arrowdown"
|
||||
color={convert(themes.light).appBorderColor}
|
||||
style={{
|
||||
transform: `rotate(${open ? 0 : -90}deg)`,
|
||||
|
||||
@ -57,6 +57,7 @@ export const Args = () => (
|
||||
/>
|
||||
<Node value={{ __class__: { name: 'FooBar' } }} />
|
||||
<Node value={{ __function__: { name: 'goFaster' } }} />
|
||||
<Node value={{ __function__: { name: '' } }} />
|
||||
<Node value={{ __element__: { localName: 'hr' } }} />
|
||||
<Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
|
||||
<Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
|
||||
@ -99,6 +100,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 0,
|
||||
id: '1',
|
||||
ancestors: [],
|
||||
path: ['screen'],
|
||||
method: 'getByText',
|
||||
storyId: 'kind--story',
|
||||
@ -109,6 +111,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 1,
|
||||
id: '2',
|
||||
ancestors: [],
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
storyId: 'kind--story',
|
||||
@ -119,6 +122,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 2,
|
||||
id: '3',
|
||||
ancestors: [],
|
||||
path: [],
|
||||
method: 'expect',
|
||||
storyId: 'kind--story',
|
||||
@ -129,6 +133,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 3,
|
||||
id: '4',
|
||||
ancestors: [],
|
||||
path: [{ __callId__: '3' }, 'not'],
|
||||
method: 'toBe',
|
||||
storyId: 'kind--story',
|
||||
@ -139,6 +144,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 4,
|
||||
id: '5',
|
||||
ancestors: [],
|
||||
path: ['jest'],
|
||||
method: 'fn',
|
||||
storyId: 'kind--story',
|
||||
@ -149,6 +155,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 5,
|
||||
id: '6',
|
||||
ancestors: [],
|
||||
path: [],
|
||||
method: 'expect',
|
||||
storyId: 'kind--story',
|
||||
@ -159,6 +166,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 6,
|
||||
id: '7',
|
||||
ancestors: [],
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
storyId: 'kind--story',
|
||||
@ -169,6 +177,7 @@ const calls: Call[] = [
|
||||
{
|
||||
cursor: 7,
|
||||
id: '8',
|
||||
ancestors: [],
|
||||
path: [{ __callId__: '6' }, 'not'],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
storyId: 'kind--story',
|
||||
@ -182,6 +191,17 @@ const calls: Call[] = [
|
||||
interceptable: 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) => {
|
||||
@ -189,6 +209,7 @@ const callsById = calls.reduce((acc, call) => {
|
||||
return acc;
|
||||
}, 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 Nested = () => <MethodCall call={callsById.get('2')} callsById={callsById} />;
|
||||
export const Chained = () => <MethodCall call={callsById.get('4')} callsById={callsById} />;
|
||||
|
||||
@ -383,6 +383,22 @@ export const OtherNode = ({ value }: { value: any }) => {
|
||||
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 = ({
|
||||
call,
|
||||
callsById,
|
||||
@ -393,7 +409,9 @@ export const MethodCall = ({
|
||||
// Call might be undefined during initial render, can be safely ignored.
|
||||
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) => {
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
@ -416,6 +434,7 @@ export const MethodCall = ({
|
||||
: [node];
|
||||
});
|
||||
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<>
|
||||
<span style={{ color: colors.base }}>{path}</span>
|
||||
|
||||
@ -6,8 +6,10 @@ import { styled } from '@storybook/theming';
|
||||
import { transparentize } from 'polished';
|
||||
import localTheme from '../theme';
|
||||
|
||||
export interface StatusIconProps extends IconsProps {
|
||||
export interface StatusIconProps {
|
||||
status: Call['status'];
|
||||
useSymbol?: IconsProps['useSymbol'];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
|
||||
@ -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>
|
||||
@ -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'));
|
||||
});
|
||||
},
|
||||
};
|
||||
@ -490,7 +490,7 @@ const ErrorIcon = styled(Icons)(({ theme }) => ({
|
||||
opacity: 0.8,
|
||||
marginRight: 6,
|
||||
marginLeft: 2,
|
||||
marginTop: 1,
|
||||
marginTop: 4,
|
||||
}));
|
||||
|
||||
const ErrorTooltip = styled.div(({ theme }) => ({
|
||||
126
code/addons/interactions/src/examples/Examples.stories.tsx
Normal file
126
code/addons/interactions/src/examples/Examples.stories.tsx
Normal 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 }),
|
||||
])
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -3,9 +3,22 @@ import { CallStates, Call } from '@storybook/instrumenter';
|
||||
export const getCalls = (finalStatus: CallStates) => {
|
||||
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',
|
||||
cursor: 3,
|
||||
ancestors: ['story--id [3] step'],
|
||||
path: [],
|
||||
method: 'within',
|
||||
args: [{ __element__: { localName: 'div', id: 'root' } }],
|
||||
@ -14,10 +27,11 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [4] findByText',
|
||||
id: 'story--id [3] step [2] findByText',
|
||||
storyId: 'story--id',
|
||||
cursor: 4,
|
||||
path: [{ __callId__: 'story--id [3] within' }],
|
||||
ancestors: ['story--id [3] step'],
|
||||
path: [{ __callId__: 'story--id [3] step [1] within' }],
|
||||
method: 'findByText',
|
||||
args: ['Click'],
|
||||
interceptable: true,
|
||||
@ -25,9 +39,10 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [5] click',
|
||||
id: 'story--id [3] step [3] click',
|
||||
storyId: 'story--id',
|
||||
cursor: 5,
|
||||
ancestors: ['story--id [3] step'],
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
|
||||
@ -39,6 +54,7 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
id: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 6,
|
||||
ancestors: [],
|
||||
path: [],
|
||||
method: 'waitFor',
|
||||
args: [{ __function__: { name: '' } }],
|
||||
@ -48,9 +64,9 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [0] expect',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 1,
|
||||
ancestors: ['story--id [6] waitFor'],
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleSubmit' } }],
|
||||
@ -60,9 +76,9 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [1] stringMatching',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 2,
|
||||
ancestors: ['story--id [6] waitFor'],
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
|
||||
@ -72,9 +88,9 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 3,
|
||||
ancestors: ['story--id [6] waitFor'],
|
||||
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
|
||||
@ -86,6 +102,7 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
id: 'story--id [7] expect',
|
||||
storyId: 'story--id',
|
||||
cursor: 7,
|
||||
ancestors: [],
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleReset' } }],
|
||||
@ -97,6 +114,7 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
id: 'story--id [8] toHaveBeenCalled',
|
||||
storyId: 'story--id',
|
||||
cursor: 8,
|
||||
ancestors: [],
|
||||
path: [{ __callId__: 'story--id [7] expect' }, 'not'],
|
||||
method: 'toHaveBeenCalled',
|
||||
args: [],
|
||||
@ -121,9 +139,4 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
export const getInteractions = (finalStatus: CallStates) =>
|
||||
getCalls(finalStatus)
|
||||
.filter((call) => call.interceptable)
|
||||
.map((call, _, calls) => ({
|
||||
...call,
|
||||
childCallIds: calls.filter((c) => c.parentId === call.id).map((c) => c.id),
|
||||
isCollapsed: false,
|
||||
toggleCollapsed: () => {},
|
||||
}));
|
||||
.map((call) => ({ ...call, childCallIds: [], isCollapsed: false, toggleCollapsed: () => {} }));
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
import { addons } from '@storybook/addons';
|
||||
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 { ModuleMocker } from 'jest-mock';
|
||||
|
||||
@ -48,3 +54,8 @@ const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = ({ id, initialArgs })
|
||||
addSpies(id, initialArgs);
|
||||
|
||||
export const argsEnhancers = [addActionsFromArgTypes];
|
||||
|
||||
export const { step: runStep } = instrument(
|
||||
{ step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => play(context) },
|
||||
{ intercept: true }
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -59,12 +59,12 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -95,7 +95,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||
|
||||
@ -65,7 +65,7 @@ export function Result(props: ResultProps) {
|
||||
<HeaderBar onClick={onToggle} role="button" status={status}>
|
||||
{status === `failed` ? (
|
||||
<Icon
|
||||
icon="chevrondown"
|
||||
icon="arrowdown"
|
||||
color={convert(themes.light).color.mediumdark}
|
||||
style={{
|
||||
transform: `rotate(${isOpen ? 0 : -90}deg)`,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -63,11 +63,11 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@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",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
@ -99,7 +99,7 @@
|
||||
"./src/react/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -61,11 +61,11 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
@ -95,7 +95,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -64,11 +64,11 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -99,7 +99,7 @@
|
||||
"./src/preset/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -38,12 +38,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@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/client-api": "7.0.0-alpha.18",
|
||||
"@storybook/core-client": "7.0.0-alpha.18",
|
||||
"@storybook/core-common": "7.0.0-alpha.18",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.18",
|
||||
"@storybook/client-api": "7.0.0-alpha.23",
|
||||
"@storybook/core-client": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
@ -62,11 +62,11 @@
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/angular": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/vue": "7.0.0-alpha.18",
|
||||
"@storybook/vue3": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/angular": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/vue": "7.0.0-alpha.23",
|
||||
"@storybook/vue3": "7.0.0-alpha.23",
|
||||
"babel-loader": "^8.2.5",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -144,7 +144,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -15,6 +15,7 @@ export interface ClientApi<TFramework extends AnyFramework>
|
||||
setAddon: ClientApiClass<TFramework>['setAddon'];
|
||||
addArgsEnhancer: ClientApiClass<TFramework>['addArgsEnhancer'];
|
||||
addArgTypesEnhancer: ClientApiClass<TFramework>['addArgTypesEnhancer'];
|
||||
addStepRunner: ClientApiClass<TFramework>['addStepRunner'];
|
||||
raw: ClientApiClass<TFramework>['raw'];
|
||||
}
|
||||
|
||||
|
||||
@ -113,8 +113,15 @@ function configure<TFramework extends AnyFramework>(
|
||||
|
||||
if (preview) {
|
||||
// This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template
|
||||
const { parameters, decorators, globals, globalTypes, argsEnhancers, argTypesEnhancers } =
|
||||
jest.requireActual(preview);
|
||||
const {
|
||||
parameters,
|
||||
decorators,
|
||||
globals,
|
||||
globalTypes,
|
||||
argsEnhancers,
|
||||
argTypesEnhancers,
|
||||
runStep,
|
||||
} = jest.requireActual(preview);
|
||||
|
||||
if (decorators) {
|
||||
decorators.forEach((decorator: DecoratorFunction<TFramework>) =>
|
||||
@ -124,6 +131,9 @@ function configure<TFramework extends AnyFramework>(
|
||||
if (parameters || globals || globalTypes) {
|
||||
storybook.addParameters({ ...parameters, globals, globalTypes });
|
||||
}
|
||||
if (runStep) {
|
||||
storybook.addStepRunner(runStep);
|
||||
}
|
||||
if (argsEnhancers) {
|
||||
argsEnhancers.forEach((enhancer: ArgsEnhancer<TFramework>) =>
|
||||
storybook.addArgsEnhancer(enhancer as any)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,7 +35,7 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.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",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0"
|
||||
@ -45,7 +45,7 @@
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -56,5 +56,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53"
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,13 +35,13 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/router": "7.0.0-alpha.18",
|
||||
"@storybook/source-loader": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/router": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
@ -67,7 +67,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -57,11 +57,11 @@
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -89,7 +89,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
|
||||
@ -4,7 +4,7 @@ import { Icons, IconButton, IconsProps } from '@storybook/components';
|
||||
interface ToolbarMenuButtonProps {
|
||||
active: boolean;
|
||||
title: string;
|
||||
icon: IconsProps['icon'] | '';
|
||||
icon?: IconsProps['icon'];
|
||||
description: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ export const ToolbarMenuListItem = ({
|
||||
onClick,
|
||||
currentValue,
|
||||
}: ToolbarMenuListItemProps) => {
|
||||
const Icon = <Icons style={{ opacity: 1 }} icon={icon} />;
|
||||
const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
|
||||
const hasContent = left || right || title;
|
||||
|
||||
const Item: ListItem = {
|
||||
|
||||
@ -26,7 +26,7 @@ export interface NormalizedToolbarConfig {
|
||||
/** The label to show for this toolbar item */
|
||||
title?: string;
|
||||
/** 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 */
|
||||
preventDynamicIcon?: boolean;
|
||||
items: ToolbarItem[];
|
||||
|
||||
@ -1 +1 @@
|
||||
import './dist/esm/manager';
|
||||
import './dist/manager';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,9 +22,32 @@
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/cjs/preview.js",
|
||||
"module": "dist/esm/preview.js",
|
||||
"types": "dist/types/preview.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"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": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -33,15 +56,15 @@
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
"prepare": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -65,7 +88,15 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53",
|
||||
"bundler": {
|
||||
"entries": [
|
||||
"./src/index.ts",
|
||||
"./src/models/index.ts",
|
||||
"./src/manager.tsx",
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
3
code/addons/viewport/src/index.ts
Normal file
3
code/addons/viewport/src/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from './constants';
|
||||
export * from './defaults';
|
||||
export * from './shortcuts';
|
||||
26
code/e2e-tests/addon-actions.spec.ts
Normal file
26
code/e2e-tests/addon-actions.spec.ts
Normal 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
29
code/e2e-tests/addon-backgrounds.spec.ts
Normal 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
71
code/e2e-tests/addon-controls.spec.ts
Normal 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
40
code/e2e-tests/addon-docs.spec.ts
Normal 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
33
code/e2e-tests/addon-interactions.spec.ts
Normal 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
22
code/e2e-tests/addon-viewport.spec.ts
Normal 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
14
code/e2e-tests/example.spec.ts
Normal 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
64
code/e2e-tests/util.ts
Normal 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,25 +19,6 @@ const mainConfig: import('@storybook/angular').StorybookConfig = {
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
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'],
|
||||
features: {
|
||||
buildStoriesJson: false,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"workspaces": {
|
||||
@ -44,22 +44,22 @@
|
||||
"@angular/compiler-cli": "^13.3.6",
|
||||
"@angular/elements": "^13.3.6",
|
||||
"@compodoc/compodoc": "^1.1.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/angular": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/angular": "7.0.0-alpha.23",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@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",
|
||||
"@types/core-js": "^2.5.4",
|
||||
"@types/jest": "^26.0.16",
|
||||
@ -72,7 +72,7 @@
|
||||
"jest": "^26.6.3",
|
||||
"jest-preset-angular": "^8.3.2",
|
||||
"protractor": "~7.0.0",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"storybook-addon-angular-ivy": "^0.0.1",
|
||||
"ts-jest": "^26.4.4",
|
||||
"ts-node": "^10.4.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -11,7 +11,7 @@
|
||||
"test": "react-scripts test --env=jsdom"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.14.0",
|
||||
@ -21,21 +21,21 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/preset-create-react-app": "^4.1.0",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"webpack": "5"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -12,6 +12,7 @@ const mainConfig: StorybookConfig = {
|
||||
viewport: false,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-interactions',
|
||||
],
|
||||
logLevel: 'debug',
|
||||
// add monorepo root as a valid directory to import modules from
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-essentials",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -23,8 +23,8 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
@ -37,14 +37,15 @@
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/preset-create-react-app": "^4.1.0",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/testing-library": "^0.0.9",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"ts-node": "^10.4.0",
|
||||
"webpack": "5"
|
||||
},
|
||||
|
||||
@ -79,8 +79,10 @@ export const CSF3InputFieldFilled: CSF3Story = {
|
||||
render: () => {
|
||||
return <input data-testid="input" />;
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
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!');
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-kitchen-sink",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,23 +34,23 @@
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/preset-create-react-app": "^4.1.0",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.6",
|
||||
"react-moment-proptypes": "^1.7.0",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"ts-node": "^10.4.0",
|
||||
"webpack": "5"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-doc-blocks",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"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-react": "^7.12.10",
|
||||
"@babel/preset-typescript": "^7.12.7",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/cli": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/cli": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"@types/babel__preset-env": "^7",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"cross-env": "^7.0.3",
|
||||
"lodash": "^4.17.21",
|
||||
"sb": "7.0.0-alpha.18",
|
||||
"sb": "7.0.0-alpha.23",
|
||||
"typescript": "~4.6.3",
|
||||
"webpack": "5"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ember-example",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"--build-storybook": "yarn storybook-prebuild && storybook build",
|
||||
@ -17,19 +17,19 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@ember/optional-features": "^2.0.0",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/ember": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/ember": "7.0.0-alpha.23",
|
||||
"@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",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"browserify-zlib": "^0.2.0",
|
||||
@ -49,7 +49,7 @@
|
||||
"loader.js": "^4.7.0",
|
||||
"os-browserify": "^0.3.0",
|
||||
"shx": "^0.3.2",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"vm-browserify": "^1.1.2",
|
||||
"webpack": "5",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/external-docs",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.18",
|
||||
"@storybook/blocks": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.23",
|
||||
"@storybook/blocks": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/preview-web": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/preview-web": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"formik": "^2.2.9",
|
||||
"next": "^12.1.0",
|
||||
"nextra": "^1.1.0",
|
||||
@ -38,7 +38,7 @@
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-config-next": "12.0.8",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"typescript": "~4.6.3",
|
||||
"webpack": "5"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html-kitchen-sink",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -13,31 +13,31 @@
|
||||
"storybook": "storybook dev -p 9006 --no-manager-cache"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/client-api": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/html": "7.0.0-alpha.18",
|
||||
"@storybook/html-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/source-loader": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/client-api": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/html": "7.0.0-alpha.23",
|
||||
"@storybook/html-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"format-json": "^1.0.3",
|
||||
"global": "^4.4.0",
|
||||
"postcss": "^8.2.4",
|
||||
"postcss-color-rebeccapurple": "^6.0.0",
|
||||
"storybook": "7.0.0-alpha.18"
|
||||
"storybook": "7.0.0-alpha.23"
|
||||
},
|
||||
"storybook": {
|
||||
"chromatic": {
|
||||
|
||||
@ -8,10 +8,11 @@ import addHeadWarning from './head-warning';
|
||||
addHeadWarning('manager-head-not-loaded', 'Manager head not loaded');
|
||||
|
||||
const PrefixIcon = styled(Icons)(({ theme }) => ({
|
||||
marginRight: 8,
|
||||
marginRight: 5,
|
||||
fontSize: 'inherit',
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
height: 12,
|
||||
width: 12,
|
||||
paddingTop: 1,
|
||||
display: 'inline',
|
||||
alignSelf: 'center',
|
||||
}));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook build -c ./",
|
||||
@ -13,33 +13,33 @@
|
||||
"devDependencies": {
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.18",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/cli": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots-puppeteer": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/cli": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/design-system": "^5.4.7",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/node-logger": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/router": "7.0.0-alpha.18",
|
||||
"@storybook/source-loader": "7.0.0-alpha.18",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/router": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@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/user-event": "^13.1.9",
|
||||
"chromatic": "^6.0.2",
|
||||
@ -55,7 +55,7 @@
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "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",
|
||||
"uuid-browser": "^3.1.0",
|
||||
"webpack": "5"
|
||||
|
||||
@ -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 theme = useTheme();
|
||||
|
||||
@ -87,8 +106,9 @@ const ThemedSetRoot = () => {
|
||||
};
|
||||
|
||||
export const decorators = [
|
||||
(StoryFn, { globals, parameters }) => {
|
||||
const theme = globals.theme || parameters.theme || (isChromatic() ? 'stacked' : 'light');
|
||||
(StoryFn, { globals, parameters, playFunction }) => {
|
||||
const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light';
|
||||
const theme = globals.theme || parameters.theme || defaultTheme;
|
||||
|
||||
switch (theme) {
|
||||
case 'side-by-side': {
|
||||
@ -137,6 +157,12 @@ export const decorators = [
|
||||
<Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
|
||||
<Global styles={createReset} />
|
||||
<ThemedSetRoot />
|
||||
{!parameters.theme && isChromatic() && playFunction && (
|
||||
<PlayFnNotice>
|
||||
<span>Detected play function.</span>
|
||||
<span>Rendering in a single theme</span>
|
||||
</PlayFnNotice>
|
||||
)}
|
||||
<StoryFn />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@ -196,6 +196,12 @@ Fixed layout requires custom `height` since it can't be determined.
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### withSource="open"
|
||||
|
||||
<Canvas withSource="open">
|
||||
<h2>source open</h2>
|
||||
</Canvas>
|
||||
|
||||
## Docs Disable
|
||||
|
||||
<Story name="docs disable" parameters={{ docs: { disable: true } }}>
|
||||
|
||||
@ -9,4 +9,4 @@ export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
export const Basic = () => <Button>Click me</Button>;
|
||||
|
||||
@ -8,4 +8,4 @@ export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
export const Basic = () => <Button>Click me</Button>;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "preact-example",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -14,18 +14,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/preact": "7.0.0-alpha.18",
|
||||
"@storybook/preact-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/source-loader": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/preact": "7.0.0-alpha.23",
|
||||
"@storybook/preact-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react": "^17",
|
||||
"@types/react-dom": "^17",
|
||||
@ -38,7 +38,7 @@
|
||||
"raw-loader": "^4.0.2",
|
||||
"react": "^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",
|
||||
"webpack": "5",
|
||||
"webpack-dev-server": "^4.8.1"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-react-ts",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"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-react": "^7.12.10",
|
||||
"@babel/preset-typescript": "^7.12.7",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/cli": "7.0.0-alpha.18",
|
||||
"@storybook/components": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/theming": "7.0.0-alpha.18",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/cli": "7.0.0-alpha.23",
|
||||
"@storybook/components": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/theming": "7.0.0-alpha.23",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/react": "12.1.2",
|
||||
"@testing-library/user-event": "^13.1.9",
|
||||
@ -34,7 +34,7 @@
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"cross-env": "^7.0.3",
|
||||
"lodash": "^4.17.21",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"typescript": "~4.6.3",
|
||||
"webpack": "5"
|
||||
}
|
||||
|
||||
@ -46,12 +46,12 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
|
||||
|
||||
.emotion-0 svg {
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -81,8 +81,9 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
|
||||
|
||||
<button
|
||||
className="emotion-0"
|
||||
label="Click me"
|
||||
/>
|
||||
>
|
||||
Click me
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
|
||||
@ -131,12 +132,12 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
|
||||
|
||||
.emotion-0 svg {
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -166,8 +167,9 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
|
||||
|
||||
<button
|
||||
className="emotion-0"
|
||||
label="Click me"
|
||||
/>
|
||||
>
|
||||
Click me
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Demo/AccountForm Standard 1`] = `
|
||||
|
||||
@ -9,4 +9,4 @@ export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
export const Basic = () => <Button>Click me</Button>;
|
||||
|
||||
@ -8,4 +8,4 @@ export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
export const Basic = () => <Button>Click me</Button>;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "server-kitchen-sink",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -14,15 +14,15 @@
|
||||
"storybook": "SERVER_PORT=1137 storybook dev -p 9006 --quiet"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/node-logger": "7.0.0-alpha.18",
|
||||
"@storybook/server": "7.0.0-alpha.18",
|
||||
"@storybook/server-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@storybook/server": "7.0.0-alpha.23",
|
||||
"@storybook/server-webpack5": "7.0.0-alpha.23",
|
||||
"concurrently": "^5.3.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "~4.17.1",
|
||||
@ -30,6 +30,6 @@
|
||||
"nodemon": "^2.0.7",
|
||||
"pug": "^3.0.0",
|
||||
"safe-identifier": "^0.4.1",
|
||||
"storybook": "7.0.0-alpha.18"
|
||||
"storybook": "7.0.0-alpha.23"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
{
|
||||
"name": "standalone-preview",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"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-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/cli": "7.0.0-alpha.18",
|
||||
"@storybook/react": "7.0.0-alpha.18",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/cli": "7.0.0-alpha.23",
|
||||
"@storybook/react": "7.0.0-alpha.23",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.23",
|
||||
"cross-env": "^7.0.3",
|
||||
"parcel": "2.0.1",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
"storybook": "7.0.0-alpha.18"
|
||||
"storybook": "7.0.0-alpha.23"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "svelte-example",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "storybook build",
|
||||
@ -10,24 +10,24 @@
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/source-loader": "7.0.0-alpha.18",
|
||||
"@storybook/svelte": "7.0.0-alpha.18",
|
||||
"@storybook/svelte-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@storybook/svelte": "7.0.0-alpha.23",
|
||||
"@storybook/svelte-webpack5": "7.0.0-alpha.23",
|
||||
"@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-preprocess": "^4.10.6"
|
||||
},
|
||||
|
||||
@ -67,7 +67,7 @@ And `square`:
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-3-cli-example",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -14,21 +14,21 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.18",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"@storybook/vue3": "7.0.0-alpha.18",
|
||||
"@storybook/vue3-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/vue3": "7.0.0-alpha.23",
|
||||
"@storybook/vue3-webpack5": "7.0.0-alpha.23",
|
||||
"@vue/cli-plugin-babel": "^5.0.4",
|
||||
"@vue/cli-plugin-typescript": "^5.0.4",
|
||||
"@vue/cli-service": "^5.0.4",
|
||||
"@vue/compiler-sfc": "^3.2.36",
|
||||
"babel-loader": "^8.2.5",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"typescript": "~4.6.3",
|
||||
"vue-jest": "^5.0.0-alpha.8",
|
||||
"vue-loader": "^16.0.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-cli-example",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -15,16 +15,16 @@
|
||||
"vue-property-decorator": "^9.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.23",
|
||||
"@storybook/preset-scss": "^1.0.3",
|
||||
"@storybook/source-loader": "7.0.0-alpha.18",
|
||||
"@storybook/vue": "7.0.0-alpha.18",
|
||||
"@storybook/vue-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/source-loader": "7.0.0-alpha.23",
|
||||
"@storybook/vue": "7.0.0-alpha.23",
|
||||
"@storybook/vue-webpack5": "7.0.0-alpha.23",
|
||||
"@vue/cli-plugin-babel": "^5.0.4",
|
||||
"@vue/cli-plugin-typescript": "^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",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-example",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -14,29 +14,29 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.18",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.18",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.18",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.18",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.18",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.18",
|
||||
"@storybook/addon-links": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.18",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.18",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.23",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.23",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.23",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.23",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.23",
|
||||
"@storybook/addon-links": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.23",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.23",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@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/vue": "7.0.0-alpha.18",
|
||||
"@storybook/vue-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/vue": "7.0.0-alpha.23",
|
||||
"@storybook/vue-webpack5": "7.0.0-alpha.23",
|
||||
"@vue/babel-preset-jsx": "^1.2.4",
|
||||
"babel-loader": "^8.2.5",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"storybook": "7.0.0-alpha.18",
|
||||
"storybook": "7.0.0-alpha.23",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"vue-loader": "^15.9.6",
|
||||
"vue-style-loader": "^4.1.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web-components-kitchen-sink",
|
||||
"version": "7.0.0-alpha.18",
|
||||
"version": "7.0.0-alpha.23",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-angular-app
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"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.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -34,19 +34,19 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.18",
|
||||
"@storybook/api": "7.0.0-alpha.18",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.18",
|
||||
"@storybook/client-logger": "7.0.0-alpha.18",
|
||||
"@storybook/core-client": "7.0.0-alpha.18",
|
||||
"@storybook/core-common": "7.0.0-alpha.18",
|
||||
"@storybook/core-events": "7.0.0-alpha.18",
|
||||
"@storybook/core-server": "7.0.0-alpha.18",
|
||||
"@storybook/addons": "7.0.0-alpha.23",
|
||||
"@storybook/api": "7.0.0-alpha.23",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.23",
|
||||
"@storybook/client-logger": "7.0.0-alpha.23",
|
||||
"@storybook/core-client": "7.0.0-alpha.23",
|
||||
"@storybook/core-common": "7.0.0-alpha.23",
|
||||
"@storybook/core-events": "7.0.0-alpha.23",
|
||||
"@storybook/core-server": "7.0.0-alpha.23",
|
||||
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.18",
|
||||
"@storybook/node-logger": "7.0.0-alpha.18",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.23",
|
||||
"@storybook/node-logger": "7.0.0-alpha.23",
|
||||
"@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/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -128,5 +128,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"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
Loading…
x
Reference in New Issue
Block a user