mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 19:11:08 +08:00
Merge branch 'next' into feat/text-control-max-length
This commit is contained in:
Norbert de Langen
commit
fd265dbed9
@ -55,7 +55,7 @@ module.exports = {
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
|
||||
'babel-plugin-macros',
|
||||
['emotion', { sourceMap: true, autoLabel: true }],
|
||||
['@emotion', { sourceMap: true, autoLabel: 'always' }],
|
||||
],
|
||||
env: {
|
||||
test: withTests,
|
||||
@ -90,7 +90,7 @@ module.exports = {
|
||||
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
|
||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||
'babel-plugin-macros',
|
||||
['emotion', { sourceMap: true, autoLabel: true }],
|
||||
['@emotion', { sourceMap: true, autoLabel: 'always' }],
|
||||
'babel-plugin-add-react-displayname',
|
||||
],
|
||||
env: {
|
||||
@ -125,7 +125,7 @@ module.exports = {
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
'emotion',
|
||||
'@emotion',
|
||||
'babel-plugin-macros',
|
||||
'@babel/plugin-transform-arrow-functions',
|
||||
'@babel/plugin-transform-shorthand-properties',
|
||||
|
||||
@ -6,7 +6,7 @@ executors:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ['small', 'medium', 'large', 'xlarge']
|
||||
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
@ -19,7 +19,7 @@ executors:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ['small', 'medium', 'large', 'xlarge']
|
||||
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
@ -32,7 +32,7 @@ executors:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ['small', 'medium', 'large', 'xlarge']
|
||||
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
@ -92,7 +92,7 @@ jobs:
|
||||
command: yarn install --immutable
|
||||
- run:
|
||||
name: Bootstrap
|
||||
command: yarn bootstrap --core
|
||||
command: yarn bootstrap --build --manager
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
|
||||
@ -118,23 +118,9 @@ jobs:
|
||||
name: examples
|
||||
command: |
|
||||
yarn run-chromatics
|
||||
packtracker:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node_14_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Report webpack stats for manager of official storybook
|
||||
command: |
|
||||
cd examples/official-storybook
|
||||
yarn packtracker
|
||||
examples:
|
||||
executor:
|
||||
class: medium
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 17
|
||||
steps:
|
||||
@ -194,7 +180,7 @@ jobs:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
name: Run E2E (extended) tests
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
@ -204,7 +190,7 @@ jobs:
|
||||
executor:
|
||||
class: large
|
||||
name: sb_cypress_8_node_14
|
||||
parallelism: 2
|
||||
parallelism: 8
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -218,10 +204,10 @@ jobs:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
name: Run E2E (core) tests
|
||||
# Do not test CRA here because it's done in PnP part
|
||||
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
|
||||
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react
|
||||
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_legacy_root_api vite_react
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
@ -291,9 +277,9 @@ jobs:
|
||||
- run:
|
||||
name: run e2e tests cra
|
||||
command: yarn test:e2e-framework --pnp cra
|
||||
- run:
|
||||
name: run e2e tests vue
|
||||
command: yarn test:e2e-framework --pnp sfcVue
|
||||
# - run:
|
||||
# name: run e2e tests vue
|
||||
# command: yarn test:e2e-framework --pnp sfcVue
|
||||
- run:
|
||||
name: prep artifacts
|
||||
when: always
|
||||
@ -406,6 +392,8 @@ jobs:
|
||||
- run:
|
||||
name: Test
|
||||
command: yarn test --coverage --runInBand --ci
|
||||
- store_test_results:
|
||||
path: junit.xml
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
@ -439,9 +427,6 @@ workflows:
|
||||
- smoke-tests:
|
||||
requires:
|
||||
- build
|
||||
- packtracker:
|
||||
requires:
|
||||
- build
|
||||
- unit-tests:
|
||||
requires:
|
||||
- build
|
||||
|
||||
19
.github/workflows/cron-weekly.yml
vendored
Normal file
19
.github/workflows/cron-weekly.yml
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
name: Markdown Links Check
|
||||
# runs every monday at 9 am
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 9 * * 1"
|
||||
|
||||
jobs:
|
||||
check-links:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: gaurav-nelson/github-action-markdown-link-check@v1
|
||||
# checks all markdown files from important folders including all subfolders
|
||||
with:
|
||||
# only show errors that occur instead of successful links + errors
|
||||
use-quiet-mode: 'yes'
|
||||
# output full HTTP info for broken links
|
||||
use-verbose-mode: 'yes'
|
||||
config-file: '.github/workflows/markdown-link-check-config.json'
|
||||
5
.github/workflows/danger-js.yml
vendored
5
.github/workflows/danger-js.yml
vendored
@ -8,9 +8,12 @@ jobs:
|
||||
name: Danger JS
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '14'
|
||||
- uses: actions/checkout@master
|
||||
- name: Danger JS
|
||||
uses: danger/danger-js@main
|
||||
uses: danger/danger-js@10.9.0
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
|
||||
38
.github/workflows/markdown-link-check-config.json
vendored
Normal file
38
.github/workflows/markdown-link-check-config.json
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
{
|
||||
"replacementPatterns": [
|
||||
{
|
||||
"pattern": "^/",
|
||||
"replacement": "./"
|
||||
}
|
||||
],
|
||||
"ignorePatterns": [
|
||||
{
|
||||
"pattern": "localhost"
|
||||
},
|
||||
{
|
||||
"pattern": "https://github.com/storybookjs/storybook/pull/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://stackblitz.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://*.chromatic.com"
|
||||
},
|
||||
{
|
||||
"pattern": "https://www.chromatic.com/build?*"
|
||||
},
|
||||
{
|
||||
"pattern": "http://*.nodeca.com"
|
||||
},
|
||||
{
|
||||
"pattern": "http://definitelytyped.org/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://yoursite.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://my-specific-domain.com"
|
||||
}
|
||||
],
|
||||
"aliveStatusCodes": [429, 200]
|
||||
}
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -35,6 +35,7 @@ tsconfig.tsbuildinfo
|
||||
lib/manager-webpack4/prebuilt
|
||||
lib/manager-webpack5/prebuilt
|
||||
examples/angular-cli/addon-jest.testresults.json
|
||||
junit.xml
|
||||
|
||||
# Yarn stuff
|
||||
/**/.yarn/*
|
||||
|
||||
372
CHANGELOG.md
372
CHANGELOG.md
@ -1,3 +1,360 @@
|
||||
## 6.5.0-rc.1 (May 18, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Improve webpack version and add detection of nextjs ([#18220](https://github.com/storybookjs/storybook/pull/18220))
|
||||
- ArgsTable: Gracefully handle conditional args failures ([#18248](https://github.com/storybookjs/storybook/pull/18248))
|
||||
- Controls: Fix reset button broken for !undefined URL values ([#18231](https://github.com/storybookjs/storybook/pull/18231))
|
||||
- Vue3: Add support for TSX in single file components ([#18038](https://github.com/storybookjs/storybook/pull/18038))
|
||||
|
||||
## 6.5.0-rc.0 (May 17, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-a11y: Show % of users in toolbar menu ([#18003](https://github.com/storybookjs/storybook/pull/18003))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Web-components: Clean Lit Expression comments in story source ([#18108](https://github.com/storybookjs/storybook/pull/18108))
|
||||
- Vue: Map args correctly in CSF3 implicit render function ([#18209](https://github.com/storybookjs/storybook/pull/18209))
|
||||
- Vue3: Fix CSF3 implicit render function when storyStoreV7 is enabled ([#18208](https://github.com/storybookjs/storybook/pull/182)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Don't throw is Ctrl + C was pressed when selecting a package in the build command ([#18195](https://github.com/storybookjs/storybook/pull/18195))
|
||||
- Build: Cleanup noise from unit tests ([#18196](https://github.com/storybookjs/storybook/pull/18196))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Fixed PnP compatibility for bundled components package ([#18015](https://github.com/storybookjs/storybook/pull/18015))
|
||||
|
||||
## 6.5.0-beta.8 (May 11, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Composition: Fix metadata.json incorrectly overriding main.js refs versions ([#18185](https://github.com/storybookjs/storybook/pull/18185))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Examples: Set channelOptions to disallow function serialization ([#18071](https://github.com/storybookjs/storybook/pull/18071))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade to telejson 6 ([#18164](https://github.com/storybookjs/storybook/pull/18164))
|
||||
|
||||
## 6.5.0-beta.7 (May 9, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF3: Add title prefix support for stories with custom titles ([#17724](https://github.com/storybookjs/storybook/pull/17724))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Components: Fix race conditions in SyntaxHighlighter ([#18158](https://github.com/storybookjs/storybook/pull/18158))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- API: Deprecate isToolshown, rename to showToolbar ([#18131](https://github.com/storybookjs/storybook/pull/18131))
|
||||
|
||||
## 6.5.0-beta.6 (May 6, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix undefined args handling ([#18135](https://github.com/storybookjs/storybook/pull/18135))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Update Introduction.stories.mdx template to be MDX2-friendly ([#18141](https://github.com/storybookjs/storybook/pull/18141))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Remove jest from cli peerDependencies ([#18149](https://github.com/storybookjs/storybook/pull/18149))
|
||||
|
||||
## 6.5.0-beta.5 (May 4, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix anonymous ID generation ([#18133](https://github.com/storybookjs/storybook/pull/18133))
|
||||
|
||||
## 6.5.0-beta.4 (May 4, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Add a parent level toolbar exclusion key for tabs ([#18106](https://github.com/storybookjs/storybook/pull/18106))
|
||||
- Addon-a11y: Display a11y issues number in addon tab title ([#17983](https://github.com/storybookjs/storybook/pull/17983))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix Canvas block CURRENT_SELECTION handling ([#18130](https://github.com/storybookjs/storybook/pull/18130))
|
||||
- Telemetry: Add safecheck for crash reports ([#18129](https://github.com/storybookjs/storybook/pull/18129))
|
||||
- Addon-a11y: Fix a11y params > element use ([#17989](https://github.com/storybookjs/storybook/pull/17989))
|
||||
|
||||
## 6.5.0-beta.3 (May 4, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Externalize `react-syntax-highlighter` from components ([#18127](https://github.com/storybookjs/storybook/pull/18127))
|
||||
|
||||
## 6.5.0-beta.2 (May 2, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add optional telemetry and crash reporting ([#18046](https://github.com/storybookjs/storybook/pull/18046))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix URL deserialization for argTypes with mapping ([#18124](https://github.com/storybookjs/storybook/pull/18124))
|
||||
- Core: Fix telemetry project root detection ([#18125](https://github.com/storybookjs/storybook/pull/18125))
|
||||
- React: Fix version detection for older versions of `react-dom` ([#18105](https://github.com/storybookjs/storybook/pull/18105))
|
||||
- CLI: Add non-monorepo testing tools to exclude lists ([#18092](https://github.com/storybookjs/storybook/pull/18092))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Examples: Update example to restore 6.4 auto-title behavior in UI ([#18109](https://github.com/storybookjs/storybook/pull/18109))
|
||||
- CLI: Remove git.io URL ([#18070](https://github.com/storybookjs/storybook/pull/18070))
|
||||
- UI: Make panel position a persistent preference ([#18036](https://github.com/storybookjs/storybook/pull/18036))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- React: Fix jest-specific-snapshot dev dependency ([#18095](https://github.com/storybookjs/storybook/pull/18095))
|
||||
|
||||
## 6.5.0-beta.1 (April 28, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Toolbars: Add dynamicTitle option ([#17789](https://github.com/storybookjs/storybook/pull/17789))
|
||||
- Angular: Add webpackStatsJson to angular-builder ([#18001](https://github.com/storybookjs/storybook/pull/18001))
|
||||
- CLI/Vue: add interactions to vue cli template ([#18021](https://github.com/storybookjs/storybook/pull/18021))
|
||||
- CLI/HTML: Add interactions to cli template ([#18014](https://github.com/storybookjs/storybook/pull/18014))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CSF: Re-apply TArgs to render type ([#18075](https://github.com/storybookjs/storybook/pull/18075))
|
||||
- CLI: await generators for proper install ([#18053](https://github.com/storybookjs/storybook/pull/18053))
|
||||
- Core: Fix story index for CSF default exports as TS vars ([#18054](https://github.com/storybookjs/storybook/pull/18054))
|
||||
- Core: Fix single-story hoisting regression for auto-title changes ([#18052](https://github.com/storybookjs/storybook/pull/18052))
|
||||
|
||||
## 6.5.0-beta.0 (April 24, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI/Vue3: add interactions to vue3 cli template ([#18031](https://github.com/storybookjs/storybook/pull/18031))
|
||||
- CLI/Svelte: add interactions to cli template ([#17993](https://github.com/storybookjs/storybook/pull/17993))
|
||||
- UI: Move the "Rerun interactions" button to Subnav ([#17647](https://github.com/storybookjs/storybook/pull/17647))
|
||||
|
||||
## 6.5.0-alpha.64 (April 18, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI/Preact: add interactions to cli template ([#17984](https://github.com/storybookjs/storybook/pull/17984))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Interactions: Fix show length of object value on MethodCall ([#17649](https://github.com/storybookjs/storybook/pull/17649))
|
||||
- React: Fix React 18 react-dom/client dynamic import syntax ([#17987](https://github.com/storybookjs/storybook/pull/17987))
|
||||
- Svelte: Fix webpack5/babelModeV7 ([#17939](https://github.com/storybookjs/storybook/pull/17939))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Examples: Remove stories from deprecated `options`/`queryparams` addons ([#17977](https://github.com/storybookjs/storybook/pull/17977))
|
||||
- Chore: Format versions.ts file using repo config ([#17963](https://github.com/storybookjs/storybook/pull/17963))
|
||||
|
||||
## 6.5.0-alpha.63 (April 14, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Theming: Re-export correct bundled file ([#17956](https://github.com/storybookjs/storybook/pull/17956))
|
||||
- Core: Support react-dom/client dom hack on Windows machines ([#17946](https://github.com/storybookjs/storybook/pull/17946))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CI: set parallelism of nx to 2 ([#17878](https://github.com/storybookjs/storybook/pull/17878))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Run `prebundle` script without `browser: true` in Rollup config ([#17947](https://github.com/storybookjs/storybook/pull/17947))
|
||||
|
||||
## 6.4.22 (April 14, 2022)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Avoid framework imports from core/client ([#17875](https://github.com/storybookjs/storybook/pull/17875))
|
||||
|
||||
## 6.5.0-alpha.62 (April 13, 2022)
|
||||
|
||||
Test publish with npm 2FA enabled for addon-jest
|
||||
|
||||
## 6.5.0-alpha.61 (April 11, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Add URL parameters to SB to tweak visible UI ([#17891](https://github.com/storybookjs/storybook/pull/17891))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Followup changing CJS entrypoints to ESM ([#17927](https://github.com/storybookjs/storybook/pull/17927))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Export `createCache` from `@storybook/theming` ([#17929](https://github.com/storybookjs/storybook/pull/17929))
|
||||
|
||||
## 6.4.21 (April 9, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Do not use default for includePaths ([#17876](https://github.com/storybookjs/storybook/pull/17876))
|
||||
- Controls: Fix date control width in addons panel ([#17780](https://github.com/storybookjs/storybook/pull/17780))
|
||||
- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))
|
||||
- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909))
|
||||
|
||||
## 6.5.0-alpha.60 (April 9, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add story preloading to optimize lazy compilation ([#17903](https://github.com/storybookjs/storybook/pull/17903))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix pseudo class potential unsafe warning ([#17911](https://github.com/storybookjs/storybook/pull/17911))
|
||||
- Core: Fix user-supplied project-level `render` in v6 store ([#17885](https://github.com/storybookjs/storybook/pull/17885))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade polished to 4.2.2 ([#17913](https://github.com/storybookjs/storybook/pull/17913))
|
||||
- Bump min vue-loader dependency version ([#17912](https://github.com/storybookjs/storybook/pull/17912))
|
||||
|
||||
## 6.5.0-alpha.59 (April 7, 2022)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909))
|
||||
- Examples: Added an external-docs example to show the basic use case ([#17807](https://github.com/storybookjs/storybook/pull/17807))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Migration to Emotion 11 ([#17640](https://github.com/storybookjs/storybook/pull/17640))
|
||||
|
||||
## 6.5.0-alpha.58 (April 7, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add webpack4/5 auto-detection ([#17908](https://github.com/storybookjs/storybook/pull/17908))
|
||||
- React: Add support for react18's new root API ([#17215](https://github.com/storybookjs/storybook/pull/17215))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix canvas as initialActive for fullscreen mode in mobile ([#17906](https://github.com/storybookjs/storybook/pull/17906))
|
||||
- UI: Fix mobile fullscreen UI ([#17873](https://github.com/storybookjs/storybook/pull/17873))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Avoid framework imports from core/client ([#17875](https://github.com/storybookjs/storybook/pull/17875))
|
||||
- Webpack: Make manager and preview build processes cancelable ([#17809](https://github.com/storybookjs/storybook/pull/17809))
|
||||
- Build: Add vite-react to e2e tests ([#17871](https://github.com/storybookjs/storybook/pull/17871))
|
||||
- CLI: Upgrade vue3 template to use webpack5 builder ([#17896](https://github.com/storybookjs/storybook/pull/17896))
|
||||
- Build: Exclude @storybook/builder-vite from verdaccio ([#17897](https://github.com/storybookjs/storybook/pull/17897))
|
||||
|
||||
## 6.5.0-alpha.57 (April 6, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Svelte: Fix dynamic source snippets ([#17866](https://github.com/storybookjs/storybook/pull/17866))
|
||||
- Angular: Do not use default for includePaths ([#17876](https://github.com/storybookjs/storybook/pull/17876))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-docs: assume links starting with "https://" are external ([#17819](https://github.com/storybookjs/storybook/pull/17819))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Unify CSF version ([#17895](https://github.com/storybookjs/storybook/pull/17895))
|
||||
|
||||
## 6.5.0-alpha.56 (April 5, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Controls: Rework conditional controls with globals, queries ([#17883](https://github.com/storybookjs/storybook/pull/17883))
|
||||
- UI: Add Brand target config option ([#17814](https://github.com/storybookjs/storybook/pull/17814))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix date control width in addons panel ([#17780](https://github.com/storybookjs/storybook/pull/17780))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Update some references to use ESM rather than CJS ([#17868](https://github.com/storybookjs/storybook/pull/17868))
|
||||
- Build: Upgrade from deprecated circleci docker img ([#17832](https://github.com/storybookjs/storybook/pull/17832))
|
||||
- Build: Parallel e2e (this might be expensive) ([#17842](https://github.com/storybookjs/storybook/pull/17842))
|
||||
- Build: Add junit summary for CircleCI ([#17867](https://github.com/storybookjs/storybook/pull/17867))
|
||||
|
||||
## 6.5.0-alpha.55 (April 3, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Detect vite project, use vite builder automatically ([#17860](https://github.com/storybookjs/storybook/pull/17860))
|
||||
- CLI: Default new vite projects to storyStoreV7 ([#17859](https://github.com/storybookjs/storybook/pull/17859))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Restore preview-web composeConfigs export ([#17861](https://github.com/storybookjs/storybook/pull/17861))
|
||||
- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))
|
||||
|
||||
## 6.4.20 (April 1, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830))
|
||||
- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633))
|
||||
- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702))
|
||||
- UI: Fix composition support in safari ([#17679](https://github.com/storybookjs/storybook/pull/17679))
|
||||
- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669))
|
||||
- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829))
|
||||
|
||||
## 6.5.0-alpha.54 (April 1, 2022)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- React: Update react and react-dom peerDeps for React18 ([#17853](https://github.com/storybookjs/storybook/pull/17853))
|
||||
|
||||
## 6.5.0-alpha.53 (April 1, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add simplified manager.js/preview.js API for addons ([#17755](https://github.com/storybookjs/storybook/pull/17755))
|
||||
- Core/React: Add testing utilities ([#17282](https://github.com/storybookjs/storybook/pull/17282))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix dependencies for yarn pnp ([#17705](https://github.com/storybookjs/storybook/pull/17705))
|
||||
- Webpack: Expand version ranges of webpack in the apps ([#17834](https://github.com/storybookjs/storybook/pull/17834))
|
||||
- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Remove packtracker ([#17841](https://github.com/storybookjs/storybook/pull/17841))
|
||||
- Build: Swap order of e2e tests around ([#17840](https://github.com/storybookjs/storybook/pull/17840))
|
||||
- Build: Add weekly check for broken markdown links ([#17799](https://github.com/storybookjs/storybook/pull/17799))
|
||||
- Build: Switch to use medium+ ([#17837](https://github.com/storybookjs/storybook/pull/17837))
|
||||
|
||||
## 6.5.0-alpha.52 (March 31, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Add back CacheProvider from emotion to lib/theming ([#17820](https://github.com/storybookjs/storybook/pull/17820))
|
||||
- Core: Add a feature flag for enabling crossOriginIsolated ([#17815](https://github.com/storybookjs/storybook/pull/17815))
|
||||
- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633))
|
||||
- UI: Wait 100ms before showing spinner and fix story overlaying it ([#17753](https://github.com/storybookjs/storybook/pull/17753))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829))
|
||||
- Build: Add setup-node version for danger ([#17826](https://github.com/storybookjs/storybook/pull/17826))
|
||||
- Add contributing instructions to PULL_REQUEST_TEMPLATE ([#17713](https://github.com/storybookjs/storybook/pull/17713))
|
||||
|
||||
## 6.5.0-alpha.51 (March 25, 2022)
|
||||
|
||||
### Features
|
||||
@ -141,6 +498,21 @@
|
||||
- Build: Fix CRA repro generator and e2e test in PnP mode ([#17375](https://github.com/storybookjs/storybook/pull/17375))
|
||||
- UI: Add a custom title story for heading component ([#17487](https://github.com/storybookjs/storybook/pull/17487))
|
||||
|
||||
## 6.4.19 (February 12, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI/React: Add interactions to cli template ([#17345](https://github.com/storybookjs/storybook/pull/17345))
|
||||
- CLI/Angular: Add interactions to cli template ([#17437](https://github.com/storybookjs/storybook/pull/17437))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available ([#17447](https://github.com/storybookjs/storybook/pull/17447))
|
||||
- Core: Ensure we show an error when `configure()` throws ([#17435](https://github.com/storybookjs/storybook/pull/17435))
|
||||
- Core: Fix `useParameter` with nullish coalescing ([#17327](https://github.com/storybookjs/storybook/pull/17327))
|
||||
- Addon-links: Fix export statement in react.d.ts ([#17434](https://github.com/storybookjs/storybook/pull/17434))
|
||||
- Addon-docs: Fix typo in ArgsTable tooltip ([#17404](https://github.com/storybookjs/storybook/pull/17404))
|
||||
|
||||
## 6.5.0-alpha.39 (February 11, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
@ -15,7 +15,7 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) |
|
||||
| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) |
|
||||
| babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-blocks.md#argstable)) |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) |
|
||||
| BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. |
|
||||
| BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) |
|
||||
| build-storybook | Issue, bug, or pull request related to Storybook's production build |
|
||||
@ -24,7 +24,7 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| cli | Issue, bug, or pull request that affects the Storybook's CLI |
|
||||
| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) |
|
||||
| components | Issue, bug, or pull request related to Storybook's internal components |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/workflows/storybook-composition.md) |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) |
|
||||
| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) |
|
||||
| core | Issue, bug, or pull request related to Storybook's Core |
|
||||
| cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
|
||||
|
||||
142
MIGRATION.md
142
MIGRATION.md
@ -1,11 +1,18 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
|
||||
- [Vue 3 upgrade](#vue-3-upgrade)
|
||||
- [React18 new root API](#react18-new-root-api)
|
||||
- [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
|
||||
- [Deprecated register.js](#deprecated-registerjs)
|
||||
- [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
|
||||
- [Vite builder renamed](#vite-builder-renamed)
|
||||
- [Docs framework refactor for React](#docs-framework-refactor-for-react)
|
||||
- [Opt-in MDX2 support](#opt-in-mdx2-support)
|
||||
- [CSF3 auto-title improvements](#csf3-auto-title-improvements)
|
||||
- [Auto-title filename case](#auto-title-filename-case)
|
||||
- [Auto-title redundant filename](#auto-title-redundant-filename)
|
||||
- [Auto-title always prefixes](#auto-title-always-prefixes)
|
||||
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
|
||||
- [Automigrate](#automigrate)
|
||||
- [CRA5 upgrade](#cra5-upgrade)
|
||||
@ -196,6 +203,67 @@
|
||||
|
||||
## From version 6.4.x to 6.5.0
|
||||
|
||||
### Vue 3 upgrade
|
||||
|
||||
Storybook 6.5 supports Vue 3 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
|
||||
|
||||
### React18 new root API
|
||||
|
||||
React 18 introduces a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting in 6.5, Storybook for React will auto-detect your react version and use the new root API automatically if you're on React18.
|
||||
|
||||
If you wish to opt out of the new root API, set the `reactOptions.legacyRootApi` flag in your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
reactOptions: { legacyRootApi: true },
|
||||
};
|
||||
```
|
||||
|
||||
### Renamed isToolshown to showToolbar
|
||||
|
||||
Storybook's [manager API](docs/addons/addons-api.md) has deprecated the `isToolshown` option (to show/hide the toolbar) and renamed it to `showToolbar` for consistency with other similar UI options.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
// .storybook/manager.js
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
showToolbar: false,
|
||||
});
|
||||
```
|
||||
|
||||
### Deprecated register.js
|
||||
|
||||
In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
|
||||
|
||||
Before:
|
||||
|
||||
```js
|
||||
module.exports = { addons: ['my-addon/register.js'] };
|
||||
```
|
||||
|
||||
After:
|
||||
|
||||
```js
|
||||
module.exports = { addons: ['my-addon'] };
|
||||
```
|
||||
|
||||
### Dropped support for addon-actions addDecorators
|
||||
|
||||
Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release.
|
||||
|
||||
### Vite builder renamed
|
||||
|
||||
SB6.5 renames Storybook's [Vite builder](https://github.com/storybookjs/builder-vite) from `storybook-builder-vite` to `@storybook/builder-vite`. This move is part of a larger effort to improve Vite support in Storybook.
|
||||
|
||||
Storybook's `automigrate` command can migrate for you. To manually migrate:
|
||||
|
||||
1. Remove `storybook-builder-vite` from your `package.json` dependencies
|
||||
2. Install `@storybook/builder-vite`
|
||||
3. Update your `core.builder` setting in `.storybook/main.js` to `@storybook/builder-vite`.
|
||||
|
||||
### Docs framework refactor for React
|
||||
|
||||
SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet rendering) out of `@storybook/addon-docs` and into the specific framework packages to which they apply (e.g. `@storybook/react`).
|
||||
@ -242,6 +310,19 @@ This might be considered a breaking change. However, we feel justified to releas
|
||||
1. We consider it a bug in the initial auto-title implementation
|
||||
2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it)
|
||||
|
||||
If you want to restore the old titles in the UI, you can customize your sidebar with the following code snippet in `.storybook/manager.js`:
|
||||
|
||||
```js
|
||||
import { addons } from '@storybook/addons';
|
||||
import startCase from 'lodash/startCase';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
#### Auto-title redundant filename
|
||||
|
||||
The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`.
|
||||
@ -255,6 +336,36 @@ Since CSF3 is experimental, we are introducing this technically breaking change
|
||||
export default { title: 'Atoms/Button/Button' };
|
||||
```
|
||||
|
||||
#### Auto-title always prefixes
|
||||
|
||||
When the user provides a `prefix` in their `main.js` `stories` field, it now prefixes all titles to matching stories, whereas in 6.4 and earlier it only prefixed auto-titles.
|
||||
|
||||
Consider the following example:
|
||||
|
||||
```js
|
||||
// main.js
|
||||
module.exports = {
|
||||
stories: [{ directory: '../src', titlePrefix: 'Custom' }]
|
||||
}
|
||||
|
||||
// ../src/NoTitle.stories.js
|
||||
export default { component: Foo };
|
||||
|
||||
// ../src/Title.stories.js
|
||||
export default { component: Bar, title: 'Bar' }
|
||||
```
|
||||
|
||||
In 6.4, the final titles would be:
|
||||
|
||||
- `NoTitle.stories.js` => `Custom/NoTitle`
|
||||
- `Title.stories.js` => `Bar`
|
||||
|
||||
In 6.5, the final titles would be:
|
||||
|
||||
- `NoTitle.stories.js` => `Custom/NoTitle`
|
||||
- `Title.stories.js` => `Custom/Bar`
|
||||
|
||||
<!-- markdown-link-check-disable -->
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Automigrate
|
||||
@ -268,7 +379,9 @@ For example, if you're in a webpack5 project but still use Storybook's default w
|
||||
You can run the existing suite of automigrations to see which ones apply to your project. This won't update any files unless you accept the changes:
|
||||
|
||||
```
|
||||
|
||||
npx sb@next automigrate
|
||||
|
||||
```
|
||||
|
||||
The automigration suite also runs when you create a new project (`sb init`) or when you update storybook (`sb upgrade`).
|
||||
@ -278,7 +391,9 @@ The automigration suite also runs when you create a new project (`sb init`) or w
|
||||
Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to upgrade the configuration. You can do this automatically by running:
|
||||
|
||||
```
|
||||
|
||||
npx sb@next automigrate
|
||||
|
||||
```
|
||||
|
||||
Or you can do the following steps manually to force Storybook to use webpack 5 for building your project:
|
||||
@ -639,7 +754,29 @@ The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0
|
||||
|
||||
### Webpack 5
|
||||
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so, there are two ways:
|
||||
|
||||
1 - Upgrade command
|
||||
|
||||
If you're upgrading your Storybook version, run this command, which will both upgrade your dependencies but also detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb upgrade
|
||||
```
|
||||
|
||||
2 - Automigrate command
|
||||
|
||||
If you don't want to change your Storybook version but want Storybook to detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb automigrate
|
||||
```
|
||||
|
||||
3 - Manually
|
||||
|
||||
If either methods did not work or you just want to proceed manually, do the following steps:
|
||||
|
||||
Install the dependencies:
|
||||
|
||||
```shell
|
||||
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
|
||||
@ -2107,7 +2244,7 @@ Theming has been rewritten in v5. If you used theming in v4, please consult the
|
||||
|
||||
### Story hierarchy defaults
|
||||
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](https://github.com/storybookjs/deprecated-addons/blob/master/MIGRATION.md#options-addon-deprecated).
|
||||
|
||||
In Storybook 4.x the values defaulted to `null` for both of these options, so that there would be no hierarchy by default.
|
||||
|
||||
@ -2772,3 +2909,4 @@ If you **are** using these addons, it takes two steps to migrate:
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
```
|
||||
<!-- markdown-link-check-enable -->
|
||||
32
README.md
32
README.md
@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c
|
||||
|
||||
<p align="center">
|
||||
View README for:<br/>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
|
||||
</p>
|
||||
|
||||
## Table of contents
|
||||
@ -80,7 +80,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs
|
||||
|
||||
### Examples
|
||||
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/showcase>
|
||||
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
|
||||
|
||||
@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](app/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| 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) |
|
||||
| [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) |
|
||||
| [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
|
||||
|
||||
|
||||
@ -81,12 +81,11 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
|
||||
these bugs get addressed.
|
||||
|
||||
For every non-PATCH release, we nominate a small number of bugs that must be
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 6.5 milestone](https://github.com/storybookjs/storybook/milestone/75).
|
||||
|
||||
Adding bugs to the milestone helps people looking for good ways to contribute,
|
||||
or to understand what is blocking the release so they can actually do something
|
||||
about it. Discussion about which bugs are critical happens in the `#maintenance`
|
||||
channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
about it. Discussion about which bugs are critical happens in the [`#maintenance` channel](https://discord.com/channels/486522875931656193/490070912448724992) in our Discord Server
|
||||
|
||||
If you're experiencing a bug, the best way to make sure that it gets attention
|
||||
is to upvote it by adding a "thumbs-up" reaction in Github. This way important
|
||||
@ -114,5 +113,5 @@ in a patch release.
|
||||
#### How does my PR get merged?
|
||||
|
||||
- For PATCH PR's, any maintainer can review, test, approve, and merge it.
|
||||
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
|
||||
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, they should clear it with the other maintainers before merging it into the release branch.
|
||||
- Once a release date has been set and we cut off merging, we'll create a temporary branch to hold that release so that it doesn't block merging to `next`.
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
| Version | Supported |
|
||||
| ---------- | ------------------ |
|
||||
| 6.3, 6.4 | :white_check_mark: |
|
||||
| Version | Supported |
|
||||
| --------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@ function __setMockFiles(newMockFiles) {
|
||||
const readFile = async (filePath) => mockFiles[filePath];
|
||||
const readFileSync = (filePath = '') => mockFiles[filePath];
|
||||
const existsSync = (filePath) => !!mockFiles[filePath];
|
||||
const readJsonSync = (filePath = '') => JSON.parse(mockFiles[filePath]);
|
||||
const lstatSync = (filePath) => ({
|
||||
isFile: () => !!mockFiles[filePath],
|
||||
});
|
||||
@ -23,6 +24,7 @@ const lstatSync = (filePath) => ({
|
||||
fs.__setMockFiles = __setMockFiles;
|
||||
fs.readFile = readFile;
|
||||
fs.readFileSync = readFileSync;
|
||||
fs.readJsonSync = readJsonSync;
|
||||
fs.existsSync = existsSync;
|
||||
fs.lstatSync = lstatSync;
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ When Axe reports accessibility violations in stories, there are multiple ways to
|
||||
At the Story level, override rules using `parameters.a11y.config.rules`.
|
||||
|
||||
```js
|
||||
export const InputWithoutAutofill = () => <input type="text" autofill="nope" />;
|
||||
export const InputWithoutAutofill = () => <input type="text" autocomplete="nope" />;
|
||||
|
||||
InputWithoutAutofill.parameters = {
|
||||
a11y: {
|
||||
|
||||
1
addons/a11y/manager.js
Normal file
1
addons/a11y/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/channels": "6.5.0-alpha.51",
|
||||
"@storybook/client-logger": "6.5.0-alpha.51",
|
||||
"@storybook/components": "6.5.0-alpha.51",
|
||||
"@storybook/core-events": "6.5.0-alpha.51",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/theming": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/channels": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -67,8 +67,8 @@
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
function managerEntries(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
function config(entry = []) {
|
||||
return [
|
||||
...entry,
|
||||
require.resolve('./dist/esm/a11yRunner'),
|
||||
require.resolve('./dist/esm/a11yHighlight'),
|
||||
];
|
||||
}
|
||||
|
||||
module.exports = { managerEntries, config };
|
||||
1
addons/a11y/preview.js
Normal file
1
addons/a11y/preview.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/esm/preview';
|
||||
@ -1 +1,6 @@
|
||||
require('./dist/esm/register');
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
@ -15,11 +15,6 @@ let active = false;
|
||||
// Holds latest story we requested a run
|
||||
let activeStoryId: string | undefined;
|
||||
|
||||
const getElement = () => {
|
||||
const storyRoot = document.getElementById('story-root');
|
||||
return storyRoot ? storyRoot.childNodes : document.getElementById('root');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle A11yContext events.
|
||||
* Because the event are sent without manual check, we split calls
|
||||
@ -39,15 +34,16 @@ const run = async (storyId: string) => {
|
||||
if (!active) {
|
||||
active = true;
|
||||
channel.emit(EVENTS.RUNNING);
|
||||
const axe = await import('axe-core');
|
||||
const axe = (await import('axe-core')).default;
|
||||
|
||||
const { element = getElement(), config, options = {} } = input;
|
||||
const { element = '#root', config, options = {} } = input;
|
||||
const htmlElement = document.querySelector(element);
|
||||
axe.reset();
|
||||
if (config) {
|
||||
axe.configure(config);
|
||||
}
|
||||
|
||||
const result = await axe.run(element, options);
|
||||
const result = await axe.run(htmlElement, options);
|
||||
// It's possible that we requested a new run on a different story.
|
||||
// Unfortunately, axe doesn't support a cancel method to abort current run.
|
||||
// We check if the story we run against is still the current one,
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import { withA11y } from '.';
|
||||
|
||||
export const decorators = [withA11y];
|
||||
@ -63,6 +63,7 @@ describe('A11YPanel', () => {
|
||||
mockedApi.useStorybookState.mockReset();
|
||||
mockedApi.useAddonState.mockReset();
|
||||
|
||||
mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
|
||||
mockedApi.useChannel.mockReturnValue(jest.fn());
|
||||
mockedApi.useParameter.mockReturnValue({ manual: false });
|
||||
const state: Partial<api.State> = { storyId: 'jest' };
|
||||
|
||||
@ -53,11 +53,13 @@ describe('A11YPanel', () => {
|
||||
beforeEach(() => {
|
||||
mockedApi.useChannel.mockReset();
|
||||
mockedApi.useStorybookState.mockReset();
|
||||
mockedApi.useAddonState.mockReset();
|
||||
|
||||
mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
|
||||
mockedApi.useChannel.mockReturnValue(jest.fn());
|
||||
const state: Partial<api.State> = { storyId };
|
||||
const storyState: Partial<api.State> = { storyId };
|
||||
// Lazy to mock entire state
|
||||
mockedApi.useStorybookState.mockReturnValue(state as any);
|
||||
mockedApi.useStorybookState.mockReturnValue(storyState as any);
|
||||
});
|
||||
|
||||
it('should render children', () => {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { themes, convert } from '@storybook/theming';
|
||||
import { Result } from 'axe-core';
|
||||
import { useChannel, useStorybookState } from '@storybook/api';
|
||||
import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
|
||||
import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
|
||||
import { EVENTS } from '../constants';
|
||||
import { ADDON_ID, EVENTS } from '../constants';
|
||||
|
||||
interface Results {
|
||||
export interface Results {
|
||||
passes: Result[];
|
||||
violations: Result[];
|
||||
incomplete: Result[];
|
||||
@ -52,7 +52,7 @@ const defaultResult = {
|
||||
};
|
||||
|
||||
export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
|
||||
const [results, setResults] = React.useState<Results>(defaultResult);
|
||||
const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
|
||||
const [tab, setTab] = React.useState(0);
|
||||
const [highlighted, setHighlighted] = React.useState<string[]>([]);
|
||||
const { storyId } = useStorybookState();
|
||||
|
||||
69
addons/a11y/src/components/VisionSimulator.test.tsx
Normal file
69
addons/a11y/src/components/VisionSimulator.test.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import { VisionSimulator, baseList } from './VisionSimulator';
|
||||
|
||||
const getOptionByNameAndPercentage = (option: string, percentage: number) =>
|
||||
screen.getByText(
|
||||
(content, element) =>
|
||||
content !== '' &&
|
||||
element.textContent === option &&
|
||||
(percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
|
||||
);
|
||||
|
||||
function ThemedVisionSimulator() {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<VisionSimulator />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
describe('Vision Simulator', () => {
|
||||
it('should render tool button', async () => {
|
||||
// when
|
||||
render(<ThemedVisionSimulator />);
|
||||
|
||||
// then
|
||||
// waitFor because WithTooltip is a lazy component
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
});
|
||||
|
||||
it.skip('should display tooltip on click', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
|
||||
// when
|
||||
userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
|
||||
|
||||
// then
|
||||
await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
|
||||
baseList.forEach(({ name, percentage }) =>
|
||||
expect(getOptionByNameAndPercentage(name, percentage)).toBeInTheDocument()
|
||||
);
|
||||
});
|
||||
|
||||
it.skip('should set filter', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
|
||||
await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
|
||||
|
||||
// when
|
||||
fireEvent.click(screen.getByText('blurred vision'));
|
||||
|
||||
// then
|
||||
// eslint-disable-next-line no-undef
|
||||
const rule = Object.values(document.styleSheets)
|
||||
.filter(({ cssRules }) => cssRules)
|
||||
.map(({ cssRules }) => Object.values(cssRules))
|
||||
.flat()
|
||||
.find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
|
||||
|
||||
expect(rule).toBeDefined();
|
||||
expect(rule.style.filter).toBe('blur(2px)');
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent, ReactNode, useState } from 'react';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import { Global, styled } from '@storybook/theming';
|
||||
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
|
||||
|
||||
@ -6,32 +6,37 @@ import { Filters } from './ColorFilters';
|
||||
|
||||
const iframeId = 'storybook-preview-iframe';
|
||||
|
||||
const baseList = [
|
||||
'blurred vision',
|
||||
'deuteranomaly',
|
||||
'deuteranopia',
|
||||
'protanomaly',
|
||||
'protanopia',
|
||||
'tritanomaly',
|
||||
'tritanopia',
|
||||
'achromatomaly',
|
||||
'achromatopsia',
|
||||
'grayscale',
|
||||
] as const;
|
||||
interface Option {
|
||||
name: string;
|
||||
percentage?: number;
|
||||
}
|
||||
|
||||
type Filter = typeof baseList[number] | null;
|
||||
export const baseList = [
|
||||
{ name: 'blurred vision', percentage: 22.9 },
|
||||
{ name: 'deuteranomaly', percentage: 2.7 },
|
||||
{ name: 'deuteranopia', percentage: 0.56 },
|
||||
{ name: 'protanomaly', percentage: 0.66 },
|
||||
{ name: 'protanopia', percentage: 0.59 },
|
||||
{ name: 'tritanomaly', percentage: 0.01 },
|
||||
{ name: 'tritanopia', percentage: 0.016 },
|
||||
{ name: 'achromatomaly', percentage: 0.00001 },
|
||||
{ name: 'achromatopsia', percentage: 0.0001 },
|
||||
{ name: 'grayscale' },
|
||||
] as Option[];
|
||||
|
||||
const getFilter = (filter: Filter) => {
|
||||
if (!filter) {
|
||||
type Filter = Option | null;
|
||||
|
||||
const getFilter = (filterName: string) => {
|
||||
if (!filterName) {
|
||||
return 'none';
|
||||
}
|
||||
if (filter === 'blurred vision') {
|
||||
if (filterName === 'blurred vision') {
|
||||
return 'blur(2px)';
|
||||
}
|
||||
if (filter === 'grayscale') {
|
||||
if (filterName === 'grayscale') {
|
||||
return 'grayscale(100%)';
|
||||
}
|
||||
return `url('#${filter}')`;
|
||||
return `url('#${filterName}')`;
|
||||
};
|
||||
|
||||
const Hidden = styled.div(() => ({
|
||||
@ -42,7 +47,7 @@ const Hidden = styled.div(() => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const ColorIcon = styled.span<{ filter: Filter }>(
|
||||
const ColorIcon = styled.span<{ filter: string }>(
|
||||
{
|
||||
background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
|
||||
borderRadius: '1rem',
|
||||
@ -66,6 +71,20 @@ export interface Link {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const Column = styled.span({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
const Title = styled.span({
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
|
||||
const Description = styled.span(({ theme }) => ({
|
||||
fontSize: 11,
|
||||
color: theme.textMutedColor,
|
||||
}));
|
||||
|
||||
const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
|
||||
...(active !== null
|
||||
? [
|
||||
@ -80,27 +99,34 @@ const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...baseList.map((i) => ({
|
||||
id: i,
|
||||
title: i.charAt(0).toUpperCase() + i.slice(1),
|
||||
onClick: () => {
|
||||
set(i);
|
||||
},
|
||||
right: <ColorIcon filter={i} />,
|
||||
active: active === i,
|
||||
})),
|
||||
...baseList.map((i) => {
|
||||
const description = i.percentage !== undefined ? `${i.percentage}% of users` : undefined;
|
||||
return {
|
||||
id: i.name,
|
||||
title: (
|
||||
<Column>
|
||||
<Title>{i.name}</Title>
|
||||
{description && <Description>{description}</Description>}
|
||||
</Column>
|
||||
),
|
||||
onClick: () => {
|
||||
set(i);
|
||||
},
|
||||
right: <ColorIcon filter={i.name} />,
|
||||
active: active === i,
|
||||
};
|
||||
}),
|
||||
];
|
||||
|
||||
export const VisionSimulator: FunctionComponent = () => {
|
||||
export const VisionSimulator = () => {
|
||||
const [filter, setFilter] = useState<Filter>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{filter && (
|
||||
<Global
|
||||
styles={{
|
||||
[`#${iframeId}`]: {
|
||||
filter: getFilter(filter),
|
||||
filter: getFilter(filter.name),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
55
addons/a11y/src/manager.test.tsx
Normal file
55
addons/a11y/src/manager.test.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import { addons } from '@storybook/addons';
|
||||
import * as api from '@storybook/api';
|
||||
import { PANEL_ID } from './constants';
|
||||
import './manager';
|
||||
|
||||
jest.mock('@storybook/api');
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedApi = api as unknown as jest.Mocked<api.API>;
|
||||
mockedApi.getAddonState = jest.fn();
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
const registrationImpl = mockedAddons.register.mock.calls[0][1];
|
||||
|
||||
describe('A11yManager', () => {
|
||||
it('should register the panels', () => {
|
||||
// when
|
||||
registrationImpl(mockedApi);
|
||||
|
||||
// then
|
||||
expect(mockedAddons.add.mock.calls).toHaveLength(2);
|
||||
expect(mockedAddons.add).toHaveBeenCalledWith(PANEL_ID, expect.anything());
|
||||
|
||||
const panel = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel');
|
||||
const tool = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'tool');
|
||||
expect(panel).toBeDefined();
|
||||
expect(tool).toBeDefined();
|
||||
});
|
||||
|
||||
it('should compute title with no issues', () => {
|
||||
// given
|
||||
mockedApi.getAddonState.mockImplementation(() => undefined);
|
||||
registrationImpl(api as unknown as api.API);
|
||||
const title = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel').title as Function;
|
||||
|
||||
// when / then
|
||||
expect(title()).toBe('Accessibility');
|
||||
});
|
||||
|
||||
it('should compute title with issues', () => {
|
||||
// given
|
||||
mockedApi.getAddonState.mockImplementation(() => ({ violations: [{}], incomplete: [{}, {}] }));
|
||||
registrationImpl(mockedApi);
|
||||
const title = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel').title as Function;
|
||||
|
||||
// when / then
|
||||
expect(title()).toBe('Accessibility (3)');
|
||||
});
|
||||
});
|
||||
@ -3,9 +3,9 @@ import { addons, types } from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
import { VisionSimulator } from './components/VisionSimulator';
|
||||
import { A11YPanel } from './components/A11YPanel';
|
||||
import { A11yContextProvider } from './components/A11yContext';
|
||||
import { A11yContextProvider, Results } from './components/A11yContext';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: '',
|
||||
type: types.TOOL,
|
||||
@ -14,7 +14,13 @@ addons.register(ADDON_ID, () => {
|
||||
});
|
||||
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'Accessibility',
|
||||
title() {
|
||||
const addonState: Results = api?.getAddonState(ADDON_ID);
|
||||
const violationsNb = addonState?.violations?.length || 0;
|
||||
const incompleteNb = addonState?.incomplete?.length || 0;
|
||||
const totalNb = violationsNb + incompleteNb;
|
||||
return totalNb !== 0 ? `Accessibility (${totalNb})` : 'Accessibility';
|
||||
},
|
||||
type: types.PANEL,
|
||||
render: ({ active = true, key }) => (
|
||||
<A11yContextProvider key={key} active={active}>
|
||||
2
addons/a11y/src/preview.tsx
Normal file
2
addons/a11y/src/preview.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
import './a11yRunner';
|
||||
import './a11yHighlight';
|
||||
1
addons/actions/manager.js
Normal file
1
addons/actions/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,21 +41,22 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/components": "6.5.0-alpha.51",
|
||||
"@storybook/core-events": "6.5.0-alpha.51",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/theming": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
"polished": "^4.0.5",
|
||||
"polished": "^4.2.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-inspector": "^5.1.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"telejson": "^5.3.3",
|
||||
"telejson": "^6.0.8",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid-browser": "^3.1.0"
|
||||
@ -65,8 +66,8 @@
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
@ -79,7 +80,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
function managerEntries(entry, options) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
function config(entry = [], { addDecorator = true } = {}) {
|
||||
const actionConfig = [];
|
||||
if (addDecorator) {
|
||||
actionConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
|
||||
}
|
||||
return [...entry, ...actionConfig, require.resolve('./dist/esm/preset/addArgs')];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
managerEntries,
|
||||
config,
|
||||
};
|
||||
1
addons/actions/preview.js
Normal file
1
addons/actions/preview.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/esm/preset/preview';
|
||||
@ -1 +1,6 @@
|
||||
require('./dist/esm/register');
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
2
addons/actions/src/preset/preview.tsx
Normal file
2
addons/actions/src/preset/preview.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './addDecorator';
|
||||
export * from './addArgs';
|
||||
@ -25,7 +25,7 @@ const serializeArg = <T>(a: T) => {
|
||||
);
|
||||
e.persist();
|
||||
const viewDescriptor = Object.getOwnPropertyDescriptor(e, 'view');
|
||||
// dont send the entire window object over.
|
||||
// don't send the entire window object over.
|
||||
const view: unknown = viewDescriptor?.value;
|
||||
if (typeof view === 'object' && view?.constructor.name === 'Window') {
|
||||
Object.defineProperty(e, 'view', {
|
||||
|
||||
1
addons/backgrounds/manager.js
Normal file
1
addons/backgrounds/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/client-logger": "6.5.0-alpha.51",
|
||||
"@storybook/components": "6.5.0-alpha.51",
|
||||
"@storybook/core-events": "6.5.0-alpha.51",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/theming": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -63,8 +63,8 @@
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
function config(entry = []) {
|
||||
return [
|
||||
...entry,
|
||||
require.resolve('./dist/esm/preset/addDecorator'),
|
||||
require.resolve('./dist/esm/preset/addParameter'),
|
||||
];
|
||||
}
|
||||
|
||||
function managerEntries(entry = [], options) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
managerEntries,
|
||||
config,
|
||||
};
|
||||
1
addons/backgrounds/preview.js
Normal file
1
addons/backgrounds/preview.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/esm/preview';
|
||||
@ -1 +1,6 @@
|
||||
require('./dist/esm/register');
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
export * from './withBackground';
|
||||
export * from './withGrid';
|
||||
@ -1,3 +0,0 @@
|
||||
import { withGrid, withBackground } from '../decorators';
|
||||
|
||||
export const decorators = [withGrid, withBackground];
|
||||
@ -1,3 +1,7 @@
|
||||
import { withBackground } from './decorators/withBackground';
|
||||
import { withGrid } from './decorators/withGrid';
|
||||
|
||||
export const decorators = [withGrid, withBackground];
|
||||
export const parameters = {
|
||||
backgrounds: {
|
||||
grid: {
|
||||
@ -48,7 +48,7 @@ If you are somehow tied to knobs or prefer the knobs interface, we are happy to
|
||||
|
||||
### How do I migrate from addon-knobs?
|
||||
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/main/addons/knobs) you should consider migrating to Controls.
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/addon-knobs) you should consider migrating to Controls.
|
||||
|
||||
You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
|
||||
|
||||
|
||||
1
addons/controls/manager.js
Normal file
1
addons/controls/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,8 +25,8 @@
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/cjs/register.js",
|
||||
"module": "dist/esm/register.js",
|
||||
"main": "dist/cjs/manager.js",
|
||||
"module": "dist/esm/manager.js",
|
||||
"types": "dist/ts3.9/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
@ -45,22 +45,22 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/client-logger": "6.5.0-alpha.51",
|
||||
"@storybook/components": "6.5.0-alpha.51",
|
||||
"@storybook/core-common": "6.5.0-alpha.51",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.51",
|
||||
"@storybook/store": "6.5.0-alpha.51",
|
||||
"@storybook/theming": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
@ -73,8 +73,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/manager.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
function managerEntries(entry = [], options) {
|
||||
// eslint-disable-next-line global-require
|
||||
const { checkDocsLoaded } = require('./dist/cjs/preset/checkDocsLoaded');
|
||||
checkDocsLoaded(options.configDir);
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
module.exports = { managerEntries };
|
||||
@ -1 +1,6 @@
|
||||
import './dist/esm/register';
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import React, { FC } from 'react';
|
||||
import { ArgTypes, useArgs, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
|
||||
import {
|
||||
ArgTypes,
|
||||
useArgs,
|
||||
useGlobals,
|
||||
useArgTypes,
|
||||
useParameter,
|
||||
useStorybookState,
|
||||
} from '@storybook/api';
|
||||
import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components';
|
||||
|
||||
import { PARAM_KEY } from './constants';
|
||||
@ -13,6 +20,7 @@ interface ControlsParameters {
|
||||
|
||||
export const ControlsPanel: FC = () => {
|
||||
const [args, updateArgs, resetArgs] = useArgs();
|
||||
const [globals] = useGlobals();
|
||||
const rows = useArgTypes();
|
||||
const isArgsStory = useParameter<boolean>('__isArgsStory', false);
|
||||
const {
|
||||
@ -41,6 +49,7 @@ export const ControlsPanel: FC = () => {
|
||||
compact: !expanded && hasControls,
|
||||
rows: withPresetColors,
|
||||
args,
|
||||
globals,
|
||||
updateArgs,
|
||||
resetArgs,
|
||||
inAddonPanel: true,
|
||||
|
||||
@ -9,7 +9,7 @@ You've read the [Storybook Docs README](../README.md). You're already familiar w
|
||||
|
||||
## Does Docs support framework X?
|
||||
|
||||
Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
|
||||
Docs does not currently support [React Native](https://github.com/storybookjs/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
|
||||
|
||||
## How does Docs interact with existing addons?
|
||||
|
||||
|
||||
@ -53,8 +53,6 @@ export interface ArgType {
|
||||
name?: string;
|
||||
description?: string;
|
||||
defaultValue?: any;
|
||||
addIf?: string;
|
||||
removeIf?: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
|
||||
1
addons/docs/manager.js
Normal file
1
addons/docs/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -59,24 +59,26 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/components": "6.5.0-alpha.51",
|
||||
"@storybook/core-common": "6.5.0-alpha.51",
|
||||
"@storybook/core-events": "6.5.0-alpha.51",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.51",
|
||||
"@storybook/mdx1-csf": "canary",
|
||||
"@storybook/node-logger": "6.5.0-alpha.51",
|
||||
"@storybook/postinstall": "6.5.0-alpha.51",
|
||||
"@storybook/preview-web": "6.5.0-alpha.51",
|
||||
"@storybook/source-loader": "6.5.0-alpha.51",
|
||||
"@storybook/store": "6.5.0-alpha.51",
|
||||
"@storybook/theming": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/mdx1-csf": "^0.0.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/postinstall": "6.5.0-rc.1",
|
||||
"@storybook/preview-web": "6.5.0-rc.1",
|
||||
"@storybook/source-loader": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"remark-external-links": "^8.0.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
"ts-dedent": "^2.0.0",
|
||||
@ -84,24 +86,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/mdx2-csf": "canary",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"webpack": "4"
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"@types/util-deprecate": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/mdx2-csf": "*",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0",
|
||||
"webpack": "*"
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@storybook/builder-webpack4": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/builder-webpack5": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/mdx2-csf": {
|
||||
"optional": true
|
||||
},
|
||||
@ -110,15 +103,12 @@
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -1,16 +1 @@
|
||||
const { findDistEsm } = require('@storybook/core-common');
|
||||
const { webpack } = require('./dist/cjs/frameworks/common/preset');
|
||||
|
||||
function managerEntries(entry = [], options) {
|
||||
return [...entry, findDistEsm(__dirname, 'register')];
|
||||
}
|
||||
|
||||
function config(entry = [], options = {}) {
|
||||
return [findDistEsm(__dirname, 'frameworks/common/config'), ...entry];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
webpack,
|
||||
managerEntries,
|
||||
config,
|
||||
};
|
||||
module.exports = require('./dist/cjs/preset');
|
||||
|
||||
1
addons/docs/preview.js
Normal file
1
addons/docs/preview.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/esm/preview';
|
||||
@ -1,2 +1,6 @@
|
||||
/* eslint-disable import/extensions */
|
||||
require('./dist/esm/register.js');
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
@ -11,7 +11,7 @@ import { ArgTypesExtractor } from '@storybook/docs-tools';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { filterArgTypes, PropDescriptor } from '@storybook/store';
|
||||
import Events from '@storybook/core-events';
|
||||
import { StrictArgTypes, Args } from '@storybook/csf';
|
||||
import { StrictArgTypes, Args, Globals } from '@storybook/csf';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';
|
||||
@ -42,18 +42,20 @@ type StoryProps = BaseProps & {
|
||||
|
||||
type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps;
|
||||
|
||||
const getContext = (storyId: string, context: DocsContextProps) => {
|
||||
const story = context.storyById(storyId);
|
||||
if (!story) {
|
||||
throw new Error(`Unknown story: ${storyId}`);
|
||||
}
|
||||
return context.getStoryContext(story);
|
||||
};
|
||||
|
||||
const useArgs = (
|
||||
storyId: string,
|
||||
context: DocsContextProps
|
||||
): [Args, (args: Args) => void, (argNames?: string[]) => void] => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const story = context.storyById(storyId);
|
||||
if (!story) {
|
||||
throw new Error(`Unknown story: ${storyId}`);
|
||||
}
|
||||
|
||||
const storyContext = context.getStoryContext(story);
|
||||
const storyContext = getContext(storyId, context);
|
||||
|
||||
const [args, setArgs] = useState(storyContext.args);
|
||||
useEffect(() => {
|
||||
@ -76,6 +78,22 @@ const useArgs = (
|
||||
return [args, updateArgs, resetArgs];
|
||||
};
|
||||
|
||||
const useGlobals = (storyId: string, context: DocsContextProps): [Globals] => {
|
||||
const channel = addons.getChannel();
|
||||
const storyContext = getContext(storyId, context);
|
||||
const [globals, setGlobals] = useState(storyContext.globals);
|
||||
|
||||
useEffect(() => {
|
||||
const cb = (changed: { globals: Globals }) => {
|
||||
setGlobals(changed.globals);
|
||||
};
|
||||
channel.on(Events.GLOBALS_UPDATED, cb);
|
||||
return () => channel.off(Events.GLOBALS_UPDATED, cb);
|
||||
}, []);
|
||||
|
||||
return [globals];
|
||||
};
|
||||
|
||||
export const extractComponentArgTypes = (
|
||||
component: Component,
|
||||
{ id, storyById }: DocsContextProps,
|
||||
@ -162,13 +180,14 @@ export const StoryTable: FC<
|
||||
const story = useStory(storyId, context);
|
||||
// eslint-disable-next-line prefer-const
|
||||
let [args, updateArgs, resetArgs] = useArgs(storyId, context);
|
||||
const [globals] = useGlobals(storyId, context);
|
||||
if (!story) return <PureArgsTable isLoading updateArgs={updateArgs} resetArgs={resetArgs} />;
|
||||
|
||||
const argTypes = filterArgTypes(story.argTypes, include, exclude);
|
||||
|
||||
const mainLabel = getComponentName(component) || 'Story';
|
||||
|
||||
let tabs = { [mainLabel]: { rows: argTypes, args, updateArgs, resetArgs } } as Record<
|
||||
let tabs = { [mainLabel]: { rows: argTypes, args, globals, updateArgs, resetArgs } } as Record<
|
||||
string,
|
||||
PureArgsTableProps
|
||||
>;
|
||||
|
||||
@ -11,6 +11,7 @@ import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { SourceContext, SourceContextProps } from './SourceContainer';
|
||||
import { getSourceProps, SourceState } from './Source';
|
||||
import { useStories } from './useStory';
|
||||
import { CURRENT_SELECTION } from './types';
|
||||
|
||||
export { SourceState };
|
||||
|
||||
@ -53,7 +54,10 @@ const getPreviewProps = (
|
||||
);
|
||||
const sourceProps = getSourceProps({ ids: targetIds }, docsContext, sourceContext);
|
||||
if (!sourceState) sourceState = sourceProps.state;
|
||||
const stories = useStories(targetIds, docsContext);
|
||||
const storyIds = targetIds.map((targetId) =>
|
||||
targetId === CURRENT_SELECTION ? docsContext.id : targetId
|
||||
);
|
||||
const stories = useStories(storyIds, docsContext);
|
||||
isLoading = stories.some((s) => !s);
|
||||
|
||||
return {
|
||||
|
||||
@ -91,7 +91,7 @@ export const AnchorMdx: FC<AnchorMdxProps> = (props) => {
|
||||
}
|
||||
|
||||
// Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
|
||||
if (target !== '_blank') {
|
||||
if (target !== '_blank' && !href.startsWith('https://')) {
|
||||
return (
|
||||
<A
|
||||
href={href}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: false,
|
||||
getContainer: async () => (await import('../../blocks')).DocsContainer,
|
||||
getPage: async () => (await import('../../blocks')).DocsPage,
|
||||
iframeHeight: 100,
|
||||
},
|
||||
};
|
||||
@ -3,7 +3,7 @@ import remarkSlug from 'remark-slug';
|
||||
import remarkExternalLinks from 'remark-external-links';
|
||||
import global from 'global';
|
||||
|
||||
import type { BuilderConfig, Options } from '@storybook/core-common';
|
||||
import type { Options } from '@storybook/core-common';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
|
||||
// for frameworks that are not working with react, we need to configure
|
||||
@ -38,16 +38,7 @@ export async function webpack(
|
||||
typeof createCompiler
|
||||
>[0] */
|
||||
) {
|
||||
const { builder = 'webpack4' } = await options.presets.apply<{
|
||||
builder: BuilderConfig;
|
||||
}>('core', {} as any);
|
||||
|
||||
const builderName = typeof builder === 'string' ? builder : builder.name;
|
||||
const resolvedBabelLoader = require.resolve('babel-loader', {
|
||||
paths: builderName.match(/^webpack(4|5)$/)
|
||||
? [require.resolve(`@storybook/builder-${builderName}`)]
|
||||
: [builderName],
|
||||
});
|
||||
const resolvedBabelLoader = require.resolve('babel-loader');
|
||||
|
||||
const { module = {} } = webpackConfig;
|
||||
|
||||
6
addons/docs/src/preview.ts
Normal file
6
addons/docs/src/preview.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export const parameters = {
|
||||
docs: {
|
||||
getContainer: async () => (await import('./blocks')).DocsContainer,
|
||||
getPage: async () => (await import('./blocks')).DocsPage,
|
||||
},
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,25 +39,25 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.5.0-alpha.51",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.51",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.51",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.51",
|
||||
"@storybook/addon-measure": "6.5.0-alpha.51",
|
||||
"@storybook/addon-outline": "6.5.0-alpha.51",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.51",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/core-common": "6.5.0-alpha.51",
|
||||
"@storybook/node-logger": "6.5.0-alpha.51",
|
||||
"@storybook/addon-actions": "6.5.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.5.0-rc.1",
|
||||
"@storybook/addon-controls": "6.5.0-rc.1",
|
||||
"@storybook/addon-docs": "6.5.0-rc.1",
|
||||
"@storybook/addon-measure": "6.5.0-rc.1",
|
||||
"@storybook/addon-outline": "6.5.0-rc.1",
|
||||
"@storybook/addon-toolbars": "6.5.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.5.0-rc.1",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.5.0-alpha.51",
|
||||
"@storybook/vue": "6.5.0-rc.1",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
@ -120,6 +120,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import path, { join } from 'path';
|
||||
import path, { dirname, join } from 'path';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { serverRequire } from '@storybook/core-common';
|
||||
|
||||
@ -50,12 +50,7 @@ export function addons(options: PresetOptions = {}) {
|
||||
// as it's done in `lib/core/src/server/presets.js`.
|
||||
.map((addon) => {
|
||||
try {
|
||||
return require.resolve(join(addon, 'preset'));
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (err) {}
|
||||
|
||||
try {
|
||||
return require.resolve(join(addon, 'register'));
|
||||
return dirname(require.resolve(join(addon, 'package.json')));
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (err) {}
|
||||
|
||||
|
||||
1
addons/interactions/manager.js
Normal file
1
addons/interactions/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -21,8 +21,8 @@
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/cjs/register.js",
|
||||
"module": "dist/esm/register.js",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/ts3.9/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
@ -41,28 +41,30 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/components": "6.5.0-alpha.51",
|
||||
"@storybook/core-common": "6.5.0-alpha.51",
|
||||
"@storybook/core-events": "6.5.0-alpha.51",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/instrumenter": "6.5.0-alpha.51",
|
||||
"@storybook/theming": "6.5.0-alpha.51",
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/instrumenter": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.0.5",
|
||||
"polished": "^4.2.2",
|
||||
"ts-dedent": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"formik": "^2.2.9"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
@ -75,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
function config(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/preset/argsEnhancers')];
|
||||
}
|
||||
const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded');
|
||||
|
||||
function managerEntries(entry = [], options) {
|
||||
// eslint-disable-next-line global-require
|
||||
const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded');
|
||||
function previewAnnotations(entry = [], options) {
|
||||
checkActionsLoaded(options.configDir);
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
return entry;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
config,
|
||||
managerEntries,
|
||||
previewAnnotations,
|
||||
};
|
||||
|
||||
1
addons/interactions/preview.js
Normal file
1
addons/interactions/preview.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/esm/preset/preview';
|
||||
@ -1 +1,6 @@
|
||||
import './dist/esm/register';
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { getCall } from './mocks';
|
||||
import { getCalls, getInteractions } from './mocks';
|
||||
import { AddonPanelPure } from './Panel';
|
||||
import SubnavStories from './components/Subnav/Subnav.stories';
|
||||
|
||||
@ -20,6 +20,8 @@ const StyledWrapper = styled.div(({ theme }) => ({
|
||||
overflow: 'auto',
|
||||
}));
|
||||
|
||||
const interactions = getInteractions(CallStates.DONE);
|
||||
|
||||
export default {
|
||||
title: 'Addons/Interactions/Panel',
|
||||
component: AddonPanelPure,
|
||||
@ -34,10 +36,10 @@ export default {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
calls: new Map(),
|
||||
calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
|
||||
controls: SubnavStories.args.controls,
|
||||
controlStates: SubnavStories.args.controlStates,
|
||||
interactions: [getCall(CallStates.DONE)],
|
||||
interactions,
|
||||
fileName: 'addon-interactions.stories.tsx',
|
||||
hasException: false,
|
||||
isPlaying: false,
|
||||
@ -52,14 +54,14 @@ type Story = ComponentStoryObj<typeof AddonPanelPure>;
|
||||
|
||||
export const Passing: Story = {
|
||||
args: {
|
||||
interactions: [getCall(CallStates.DONE)],
|
||||
interactions: getInteractions(CallStates.DONE),
|
||||
},
|
||||
};
|
||||
|
||||
export const Paused: Story = {
|
||||
args: {
|
||||
isPlaying: true,
|
||||
interactions: [getCall(CallStates.WAITING)],
|
||||
interactions: getInteractions(CallStates.WAITING),
|
||||
controlStates: {
|
||||
debugger: true,
|
||||
start: false,
|
||||
@ -68,20 +70,21 @@ export const Paused: Story = {
|
||||
next: true,
|
||||
end: true,
|
||||
},
|
||||
pausedAt: interactions[interactions.length - 1].id,
|
||||
},
|
||||
};
|
||||
|
||||
export const Playing: Story = {
|
||||
args: {
|
||||
isPlaying: true,
|
||||
interactions: [getCall(CallStates.ACTIVE)],
|
||||
interactions: getInteractions(CallStates.ACTIVE),
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
hasException: true,
|
||||
interactions: [getCall(CallStates.ERROR)],
|
||||
interactions: getInteractions(CallStates.ERROR),
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import global from 'global';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { useChannel, useParameter, StoryId } from '@storybook/api';
|
||||
import { STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
|
||||
import { STORY_RENDER_PHASE_CHANGED, FORCE_REMOUNT } from '@storybook/core-events';
|
||||
import { AddonPanel, Link, Placeholder } from '@storybook/components';
|
||||
import { EVENTS, Call, CallStates, ControlStates, LogItem } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
@ -17,6 +17,7 @@ export interface Controls {
|
||||
goto: (args: any) => void;
|
||||
next: (args: any) => void;
|
||||
end: (args: any) => void;
|
||||
rerun: (args: any) => void;
|
||||
}
|
||||
|
||||
interface AddonPanelProps {
|
||||
@ -27,13 +28,21 @@ interface InteractionsPanelProps {
|
||||
active: boolean;
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
interactions: (Call & { status?: CallStates })[];
|
||||
interactions: (Call & {
|
||||
status?: CallStates;
|
||||
childCallIds: Call['id'][];
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
})[];
|
||||
fileName?: string;
|
||||
hasException?: boolean;
|
||||
isPlaying?: boolean;
|
||||
pausedAt?: Call['id'];
|
||||
calls: Map<string, any>;
|
||||
endRef?: React.Ref<HTMLDivElement>;
|
||||
onScrollToEnd?: () => void;
|
||||
isRerunAnimating: boolean;
|
||||
setIsRerunAnimating: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const INITIAL_CONTROL_STATES = {
|
||||
@ -63,8 +72,11 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
fileName,
|
||||
hasException,
|
||||
isPlaying,
|
||||
pausedAt,
|
||||
onScrollToEnd,
|
||||
endRef,
|
||||
isRerunAnimating,
|
||||
setIsRerunAnimating,
|
||||
...panelProps
|
||||
}) => (
|
||||
<AddonPanel {...panelProps}>
|
||||
@ -78,17 +90,25 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
}
|
||||
storyFileName={fileName}
|
||||
onScrollToEnd={onScrollToEnd}
|
||||
isRerunAnimating={isRerunAnimating}
|
||||
setIsRerunAnimating={setIsRerunAnimating}
|
||||
/>
|
||||
)}
|
||||
{interactions.map((call) => (
|
||||
<Interaction
|
||||
key={call.id}
|
||||
call={call}
|
||||
callsById={calls}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
/>
|
||||
))}
|
||||
<div>
|
||||
{interactions.map((call) => (
|
||||
<Interaction
|
||||
key={call.id}
|
||||
call={call}
|
||||
callsById={calls}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
childCallIds={call.childCallIds}
|
||||
isCollapsed={call.isCollapsed}
|
||||
toggleCollapsed={call.toggleCollapsed}
|
||||
pausedAt={pausedAt}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div ref={endRef} />
|
||||
{!isPlaying && interactions.length === 0 && (
|
||||
<Placeholder>
|
||||
@ -109,16 +129,17 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
const [storyId, setStoryId] = React.useState<StoryId>();
|
||||
const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
|
||||
const [pausedAt, setPausedAt] = React.useState<Call['id']>();
|
||||
const [isPlaying, setPlaying] = React.useState(false);
|
||||
const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
|
||||
const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
|
||||
const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
|
||||
const [log, setLog] = React.useState<LogItem[]>([]);
|
||||
|
||||
// Calls are tracked in a ref so we don't needlessly rerender.
|
||||
const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
|
||||
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
|
||||
|
||||
const [log, setLog] = React.useState<LogItem[]>([]);
|
||||
const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status }));
|
||||
|
||||
const endRef = React.useRef();
|
||||
React.useEffect(() => {
|
||||
let observer: IntersectionObserver;
|
||||
@ -138,10 +159,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
[EVENTS.SYNC]: (payload) => {
|
||||
setControlStates(payload.controlStates);
|
||||
setLog(payload.logItems);
|
||||
setPausedAt(payload.pausedAt);
|
||||
},
|
||||
[STORY_RENDER_PHASE_CHANGED]: (event) => {
|
||||
setStoryId(event.storyId);
|
||||
setPlaying(event.newPhase === 'playing');
|
||||
setPausedAt(undefined);
|
||||
},
|
||||
},
|
||||
[]
|
||||
@ -154,6 +177,10 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
goto: (callId: string) => emit(EVENTS.GOTO, { storyId, callId }),
|
||||
next: () => emit(EVENTS.NEXT, { storyId }),
|
||||
end: () => emit(EVENTS.END, { storyId }),
|
||||
rerun: () => {
|
||||
setIsRerunAnimating(true);
|
||||
emit(FORCE_REMOUNT, { storyId });
|
||||
},
|
||||
}),
|
||||
[storyId]
|
||||
);
|
||||
@ -165,6 +192,38 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
const showStatus = log.length > 0 && !isPlaying;
|
||||
const hasException = log.some((item) => item.status === CallStates.ERROR);
|
||||
|
||||
const interactions = React.useMemo(() => {
|
||||
const callsById = new Map<Call['id'], Call>();
|
||||
const childCallMap = new Map<Call['id'], Call['id'][]>();
|
||||
return log
|
||||
.filter(({ callId, parentId }) => {
|
||||
if (!parentId) return true;
|
||||
childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
|
||||
return !collapsed.has(parentId);
|
||||
})
|
||||
.map(({ callId, status }) => ({ ...calls.current.get(callId), status } as Call))
|
||||
.map((call) => {
|
||||
const status =
|
||||
call.status === CallStates.ERROR &&
|
||||
callsById.get(call.parentId)?.status === CallStates.ACTIVE
|
||||
? CallStates.ACTIVE
|
||||
: call.status;
|
||||
callsById.set(call.id, { ...call, status });
|
||||
return {
|
||||
...call,
|
||||
status,
|
||||
childCallIds: childCallMap.get(call.id),
|
||||
isCollapsed: collapsed.has(call.id),
|
||||
toggleCollapsed: () =>
|
||||
setCollapsed((ids) => {
|
||||
if (ids.has(call.id)) ids.delete(call.id);
|
||||
else ids.add(call.id);
|
||||
return new Set(ids);
|
||||
}),
|
||||
};
|
||||
});
|
||||
}, [log, collapsed]);
|
||||
|
||||
return (
|
||||
<React.Fragment key="interactions">
|
||||
<TabStatus>
|
||||
@ -179,8 +238,11 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
fileName={fileName}
|
||||
hasException={hasException}
|
||||
isPlaying={isPlaying}
|
||||
pausedAt={pausedAt}
|
||||
endRef={endRef}
|
||||
onScrollToEnd={scrollTarget && scrollToTarget}
|
||||
isRerunAnimating={isRerunAnimating}
|
||||
setIsRerunAnimating={setIsRerunAnimating}
|
||||
{...props}
|
||||
/>
|
||||
</React.Fragment>
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
import React, { ComponentProps, useState } from 'react';
|
||||
import { useChannel, useStorybookApi } from '@storybook/api';
|
||||
import { Icons, IconButton } from '@storybook/components';
|
||||
import { FORCE_REMOUNT } from '@storybook/core-events';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { TOOL_ID } from './constants';
|
||||
|
||||
interface AnimatedButtonProps {
|
||||
animating?: boolean;
|
||||
}
|
||||
|
||||
const StyledAnimatedIconButton = styled(IconButton)<
|
||||
AnimatedButtonProps & ComponentProps<typeof IconButton>
|
||||
>(({ theme, animating, disabled }) => ({
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
svg: {
|
||||
animation: animating && `${theme.animation.rotate360} 1000ms ease-out`,
|
||||
},
|
||||
}));
|
||||
|
||||
export const Tool = () => {
|
||||
const { id: storyId } = useStorybookApi().getCurrentStoryData() || {};
|
||||
const emit = useChannel({});
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
const animateAndReplay = () => {
|
||||
if (!storyId) return;
|
||||
setIsAnimating(true);
|
||||
emit(FORCE_REMOUNT, { storyId });
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledAnimatedIconButton
|
||||
key={TOOL_ID}
|
||||
title="Rerun interactions"
|
||||
onClick={animateAndReplay}
|
||||
onAnimationEnd={() => setIsAnimating(false)}
|
||||
animating={isAnimating}
|
||||
disabled={!storyId}
|
||||
>
|
||||
<Icons icon="sync" />
|
||||
</StyledAnimatedIconButton>
|
||||
);
|
||||
};
|
||||
@ -35,6 +35,12 @@ export const Demo: CSF2Story = (args) => (
|
||||
Demo.play = async ({ args, canvasElement }) => {
|
||||
await userEvent.click(within(canvasElement).getByRole('button'));
|
||||
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
|
||||
await expect([{ name: 'John', age: 42 }]).toEqual(
|
||||
expect.arrayContaining([
|
||||
expect.objectContaining({ name: 'John' }),
|
||||
expect.objectContaining({ age: 42 }),
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
export const FindBy: CSF2Story = (args) => {
|
||||
@ -131,7 +137,7 @@ export const StandardEmailFailed: CSF3Story = {
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await canvas.findByText('Please enter a correctly formatted email address');
|
||||
expect(args.onSubmit).not.toHaveBeenCalled();
|
||||
await expect(args.onSubmit).not.toHaveBeenCalled();
|
||||
},
|
||||
};
|
||||
|
||||
@ -179,7 +185,7 @@ export const Verification: CSF3Story = {
|
||||
argTypes: { onSubmit: { action: 'clicked' } },
|
||||
};
|
||||
|
||||
export const VerificationPasssword1: CSF3Story = {
|
||||
export const VerificationPassword: CSF3Story = {
|
||||
...Verification,
|
||||
play: async (context) => {
|
||||
const canvas = within(context.canvasElement);
|
||||
|
||||
@ -2,7 +2,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { getCall } from '../../mocks';
|
||||
import { getCalls } from '../../mocks';
|
||||
|
||||
import { Interaction } from './Interaction';
|
||||
import SubnavStories from '../Subnav/Subnav.stories';
|
||||
@ -13,7 +13,7 @@ export default {
|
||||
title: 'Addons/Interactions/Interaction',
|
||||
component: Interaction,
|
||||
args: {
|
||||
callsById: new Map(),
|
||||
callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
|
||||
controls: SubnavStories.args.controls,
|
||||
controlStates: SubnavStories.args.controlStates,
|
||||
},
|
||||
@ -21,25 +21,31 @@ export default {
|
||||
|
||||
export const Active: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.ACTIVE),
|
||||
call: getCalls(CallStates.ACTIVE).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Waiting: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.WAITING),
|
||||
call: getCalls(CallStates.WAITING).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.ERROR),
|
||||
call: getCalls(CallStates.ERROR).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Done: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.DONE),
|
||||
call: getCalls(CallStates.DONE).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithParent: Story = {
|
||||
args: {
|
||||
call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' },
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
|
||||
import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
|
||||
import { styled, typography } from '@storybook/theming';
|
||||
import { transparentize } from 'polished';
|
||||
@ -15,23 +16,55 @@ const MethodCallWrapper = styled.div(() => ({
|
||||
inlineSize: 'calc( 100% - 40px )',
|
||||
}));
|
||||
|
||||
const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{
|
||||
call: Call;
|
||||
}>(({ theme, call }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderBottom: `1px solid ${theme.appBorderColor}`,
|
||||
fontFamily: typography.fonts.base,
|
||||
fontSize: 13,
|
||||
...(call.status === CallStates.ERROR && {
|
||||
backgroundColor:
|
||||
theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
|
||||
const RowContainer = styled('div', {
|
||||
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
|
||||
})<{ call: Call; pausedAt: Call['id'] }>(
|
||||
({ theme, call }) => ({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderBottom: `1px solid ${theme.appBorderColor}`,
|
||||
fontFamily: typography.fonts.base,
|
||||
fontSize: 13,
|
||||
...(call.status === CallStates.ERROR && {
|
||||
backgroundColor:
|
||||
theme.base === 'dark'
|
||||
? transparentize(0.93, theme.color.negative)
|
||||
: theme.background.warning,
|
||||
}),
|
||||
paddingLeft: call.parentId ? 20 : 0,
|
||||
}),
|
||||
({ theme, call, pausedAt }) =>
|
||||
pausedAt === call.id && {
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: -5,
|
||||
zIndex: 1,
|
||||
borderTop: '4.5px solid transparent',
|
||||
borderLeft: `7px solid ${theme.color.warning}`,
|
||||
borderBottom: '4.5px solid transparent',
|
||||
},
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: -1,
|
||||
zIndex: 1,
|
||||
width: '100%',
|
||||
borderTop: `1.5px solid ${theme.color.warning}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const RowHeader = styled.div<{ disabled: boolean }>(({ theme, disabled }) => ({
|
||||
display: 'flex',
|
||||
'&:hover': disabled ? {} : { background: theme.background.hoverable },
|
||||
}));
|
||||
|
||||
const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
|
||||
>(({ theme, disabled, call }) => ({
|
||||
flex: 1,
|
||||
display: 'grid',
|
||||
background: 'none',
|
||||
border: 0,
|
||||
@ -42,7 +75,6 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
|
||||
padding: '8px 15px',
|
||||
textAlign: 'start',
|
||||
cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
|
||||
'&:hover': disabled ? {} : { background: theme.background.hoverable },
|
||||
'&:focus-visible': {
|
||||
outline: 0,
|
||||
boxShadow: `inset 3px 0 0 0 ${
|
||||
@ -55,45 +87,101 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
|
||||
},
|
||||
}));
|
||||
|
||||
const RowMessage = styled('pre')({
|
||||
margin: 0,
|
||||
padding: '8px 10px 8px 30px',
|
||||
const RowActions = styled.div(({ theme }) => ({
|
||||
padding: 6,
|
||||
}));
|
||||
|
||||
export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
|
||||
color: theme.color.mediumdark,
|
||||
margin: '0 3px',
|
||||
}));
|
||||
|
||||
const Note = styled(TooltipNote)(({ theme }) => ({
|
||||
fontFamily: theme.typography.fonts.base,
|
||||
}));
|
||||
|
||||
const RowMessage = styled('div')(({ theme }) => ({
|
||||
padding: '8px 10px 8px 36px',
|
||||
fontSize: typography.size.s1,
|
||||
});
|
||||
pre: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
},
|
||||
p: {
|
||||
color: theme.color.dark,
|
||||
},
|
||||
}));
|
||||
|
||||
const Exception = ({ exception }: { exception: Call['exception'] }) => {
|
||||
if (exception.message.startsWith('expect(')) {
|
||||
return <MatcherResult {...exception} />;
|
||||
}
|
||||
const paragraphs = exception.message.split('\n\n');
|
||||
const more = paragraphs.length > 1;
|
||||
return (
|
||||
<RowMessage>
|
||||
<pre>{paragraphs[0]}</pre>
|
||||
{more && <p>See the full stack trace in the browser console.</p>}
|
||||
</RowMessage>
|
||||
);
|
||||
};
|
||||
|
||||
export const Interaction = ({
|
||||
call,
|
||||
callsById,
|
||||
controls,
|
||||
controlStates,
|
||||
childCallIds,
|
||||
isCollapsed,
|
||||
toggleCollapsed,
|
||||
pausedAt,
|
||||
}: {
|
||||
call: Call;
|
||||
callsById: Map<Call['id'], Call>;
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
childCallIds?: Call['id'][];
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
pausedAt?: Call['id'];
|
||||
}) => {
|
||||
const [isHovered, setIsHovered] = React.useState(false);
|
||||
return (
|
||||
<RowContainer call={call}>
|
||||
<RowLabel
|
||||
call={call}
|
||||
onClick={() => controls.goto(call.id)}
|
||||
disabled={!controlStates.goto}
|
||||
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
|
||||
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
|
||||
>
|
||||
<StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
|
||||
<MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
|
||||
<MethodCall call={call} callsById={callsById} />
|
||||
</MethodCallWrapper>
|
||||
</RowLabel>
|
||||
{call.status === CallStates.ERROR &&
|
||||
call.exception &&
|
||||
(call.exception.message.startsWith('expect(') ? (
|
||||
<MatcherResult {...call.exception} />
|
||||
) : (
|
||||
<RowMessage>{call.exception.message}</RowMessage>
|
||||
))}
|
||||
<RowContainer call={call} pausedAt={pausedAt}>
|
||||
<RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}>
|
||||
<RowLabel
|
||||
call={call}
|
||||
onClick={() => controls.goto(call.id)}
|
||||
disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
|
||||
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
|
||||
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
|
||||
>
|
||||
<StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
|
||||
<MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
|
||||
<MethodCall call={call} callsById={callsById} />
|
||||
</MethodCallWrapper>
|
||||
</RowLabel>
|
||||
<RowActions>
|
||||
{childCallIds?.length > 0 && (
|
||||
<WithTooltip
|
||||
hasChrome={false}
|
||||
tooltip={
|
||||
<Note
|
||||
note={`${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<StyledIconButton containsIcon onClick={toggleCollapsed}>
|
||||
<Icons icon="listunordered" />
|
||||
</StyledIconButton>
|
||||
</WithTooltip>
|
||||
)}
|
||||
</RowActions>
|
||||
</RowHeader>
|
||||
|
||||
{call.status === CallStates.ERROR && call.exception?.callId === call.id && (
|
||||
<Exception exception={call.exception} />
|
||||
)}
|
||||
</RowContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -29,15 +29,17 @@ const StyledReceived = styled.span(({ theme }) => ({
|
||||
|
||||
export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) =>
|
||||
parsed ? (
|
||||
<Node value={value} style={{ color: '#D43900' }} />
|
||||
<Node showObjectInspector value={value} style={{ color: '#D43900' }} />
|
||||
) : (
|
||||
<StyledReceived>{value}</StyledReceived>
|
||||
);
|
||||
|
||||
export const Expected = ({ value, parsed }: { value: any; parsed?: boolean }) => {
|
||||
if (parsed) {
|
||||
if (typeof value === 'string' && value.startsWith('called with')) return <>{value}</>;
|
||||
return <Node value={value} style={{ color: '#16B242' }} />;
|
||||
if (typeof value === 'string' && value.startsWith('called with')) {
|
||||
return <>{value}</>;
|
||||
}
|
||||
return <Node showObjectInspector value={value} style={{ color: '#16B242' }} />;
|
||||
}
|
||||
return <StyledExpected>{value}</StyledExpected>;
|
||||
};
|
||||
@ -48,7 +50,7 @@ export const MatcherResult = ({ message }: { message: string }) => {
|
||||
<pre
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: '8px 10px 8px 30px',
|
||||
padding: '8px 10px 8px 36px',
|
||||
fontSize: typography.size.s1,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -27,7 +27,6 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
class FooBar {}
|
||||
export const Args = () => (
|
||||
<div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
|
||||
<Node value={null} />
|
||||
@ -42,38 +41,63 @@ export const Args = () => (
|
||||
<Node value={['foo', 1, { hello: 'world' }]} />
|
||||
<Node value={[...Array(23)].map((_, i) => i)} />
|
||||
<Node value={{ hello: 'world' }} />
|
||||
<Node value={{ hello: 'world', arr: [1, 2, 3], more: 1 }} />
|
||||
<Node value={new FooBar()} />
|
||||
<Node value={function goFaster() {}} />
|
||||
<Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} />
|
||||
<Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} showObjectInspector />
|
||||
<Node
|
||||
value={{
|
||||
hello: 'world',
|
||||
arr: [1, 2, 3],
|
||||
more: true,
|
||||
regex: /regex/,
|
||||
class: class DummyClass {},
|
||||
fn: () => 123,
|
||||
asyncFn: async () => 'hello',
|
||||
}}
|
||||
showObjectInspector
|
||||
/>
|
||||
<Node value={{ __class__: { name: 'FooBar' } }} />
|
||||
<Node value={{ __function__: { name: 'goFaster' } }} />
|
||||
<Node value={{ __element__: { localName: 'hr' } }} />
|
||||
<Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
|
||||
<Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
|
||||
<Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
|
||||
<Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
|
||||
<Node value={new Date(Date.UTC(2012, 11, 20, 0, 0, 0))} />
|
||||
<Node value={new Date(1600000000000)} />
|
||||
<Node value={new Date(1600000000123)} />
|
||||
<Node value={new EvalError()} />
|
||||
<Node value={new SyntaxError("Can't do that")} />
|
||||
<Node value={new TypeError("Cannot read property 'foo' of undefined")} />
|
||||
<Node value={new ReferenceError('Invalid left-hand side in assignment')} />
|
||||
<Node
|
||||
value={
|
||||
new Error(
|
||||
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource."
|
||||
)
|
||||
}
|
||||
value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
|
||||
/>
|
||||
<Node value={/hello/i} />
|
||||
<Node value={new RegExp(`src(.*)\\.js$`)} />
|
||||
{/* eslint-disable-next-line symbol-description */}
|
||||
<Node value={Symbol()} />
|
||||
<Node value={Symbol('Hello world')} />
|
||||
<Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
|
||||
<Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
|
||||
<Node value={{ __error__: { name: 'EvalError', message: '' } }} />
|
||||
<Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
|
||||
<Node
|
||||
value={{
|
||||
__error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
|
||||
}}
|
||||
/>
|
||||
<Node
|
||||
value={{
|
||||
__error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
|
||||
}}
|
||||
/>
|
||||
<Node
|
||||
value={{
|
||||
__error__: {
|
||||
name: 'Error',
|
||||
message:
|
||||
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
|
||||
<Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
|
||||
<Node value={{ __symbol__: { description: '' } }} />
|
||||
<Node value={{ __symbol__: { description: 'Hello world' } }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const calls: Call[] = [
|
||||
{
|
||||
cursor: 0,
|
||||
id: '1',
|
||||
path: ['screen'],
|
||||
method: 'getByText',
|
||||
@ -83,6 +107,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 1,
|
||||
id: '2',
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
@ -92,6 +117,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 2,
|
||||
id: '3',
|
||||
path: [],
|
||||
method: 'expect',
|
||||
@ -101,6 +127,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 3,
|
||||
id: '4',
|
||||
path: [{ __callId__: '3' }, 'not'],
|
||||
method: 'toBe',
|
||||
@ -110,15 +137,17 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 4,
|
||||
id: '5',
|
||||
path: ['jest'],
|
||||
method: 'fn',
|
||||
storyId: 'kind--story',
|
||||
args: [function actionHandler() {}],
|
||||
args: [{ __function__: { name: 'actionHandler' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 5,
|
||||
id: '6',
|
||||
path: [],
|
||||
method: 'expect',
|
||||
@ -128,20 +157,28 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 6,
|
||||
id: '7',
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
storyId: 'kind--story',
|
||||
args: [/hello/i],
|
||||
args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 7,
|
||||
id: '8',
|
||||
path: [{ __callId__: '6' }, 'not'],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
storyId: 'kind--story',
|
||||
args: [{ __callId__: '7' }, new Error("Cannot read property 'foo' of undefined")],
|
||||
args: [
|
||||
{ __callId__: '7' },
|
||||
[
|
||||
{ __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
|
||||
{ __symbol__: { description: 'Hello world' } },
|
||||
],
|
||||
],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { ObjectInspector } from '@devtools-ds/object-inspector';
|
||||
import { Call, CallRef, ElementRef } from '@storybook/instrumenter';
|
||||
import { useTheme } from '@storybook/theming';
|
||||
import React, { Fragment, ReactElement } from 'react';
|
||||
@ -91,11 +92,17 @@ const interleave = (nodes: ReactElement[], separator: ReactElement) =>
|
||||
export const Node = ({
|
||||
value,
|
||||
nested,
|
||||
showObjectInspector,
|
||||
callsById,
|
||||
...props
|
||||
}: {
|
||||
value: any;
|
||||
nested?: boolean;
|
||||
/**
|
||||
* Shows an object inspector instead of just printing the object.
|
||||
* Only available for Objects
|
||||
*/
|
||||
showObjectInspector?: boolean;
|
||||
callsById?: Map<Call['id'], Call>;
|
||||
[props: string]: any;
|
||||
}) => {
|
||||
@ -104,34 +111,36 @@ export const Node = ({
|
||||
return <NullNode {...props} />;
|
||||
case value === undefined:
|
||||
return <UndefinedNode {...props} />;
|
||||
case Array.isArray(value):
|
||||
return <ArrayNode {...props} value={value} callsById={callsById} />;
|
||||
case typeof value === 'string':
|
||||
return <StringNode value={value} {...props} />;
|
||||
return <StringNode {...props} value={value} />;
|
||||
case typeof value === 'number':
|
||||
return <NumberNode value={value} {...props} />;
|
||||
return <NumberNode {...props} value={value} />;
|
||||
case typeof value === 'boolean':
|
||||
return <BooleanNode value={value} {...props} />;
|
||||
case typeof value === 'function':
|
||||
return <FunctionNode value={value} {...props} />;
|
||||
case value instanceof Array:
|
||||
return <ArrayNode value={value} {...props} />;
|
||||
case value instanceof Date:
|
||||
return <DateNode value={value} {...props} />;
|
||||
case value instanceof Error:
|
||||
return <ErrorNode value={value} {...props} />;
|
||||
case value instanceof RegExp:
|
||||
return <RegExpNode value={value} {...props} />;
|
||||
return <BooleanNode {...props} value={value} />;
|
||||
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
case Object.prototype.hasOwnProperty.call(value, '__date__'):
|
||||
return <DateNode {...props} {...value.__date__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__error__'):
|
||||
return <ErrorNode {...props} {...value.__error__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
|
||||
return <RegExpNode {...props} {...value.__regexp__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__function__'):
|
||||
return <FunctionNode {...props} {...value.__function__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
|
||||
return <SymbolNode {...props} {...value.__symbol__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__element__'):
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return <ElementNode value={value.__element__} {...props} />;
|
||||
return <ElementNode {...props} {...value.__element__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__class__'):
|
||||
return <ClassNode {...props} {...value.__class__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__callId__'):
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
|
||||
case typeof value === 'object' &&
|
||||
value.constructor?.name &&
|
||||
value.constructor?.name !== 'Object':
|
||||
return <ClassNode value={value} {...props} />;
|
||||
/* eslint-enable no-underscore-dangle */
|
||||
|
||||
case Object.prototype.toString.call(value) === '[object Object]':
|
||||
return <ObjectNode value={value} {...props} />;
|
||||
return <ObjectNode value={value} showInspector={showObjectInspector} {...props} />;
|
||||
default:
|
||||
return <OtherNode value={value} {...props} />;
|
||||
}
|
||||
@ -182,12 +191,22 @@ export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: boolean }) => {
|
||||
export const ArrayNode = ({
|
||||
value,
|
||||
nested = false,
|
||||
callsById,
|
||||
}: {
|
||||
value: any[];
|
||||
nested?: boolean;
|
||||
callsById?: Map<Call['id'], Call>;
|
||||
}) => {
|
||||
const colors = useThemeColors();
|
||||
if (nested) {
|
||||
return <span style={{ color: colors.base }}>[…]</span>;
|
||||
}
|
||||
const nodes = value.slice(0, 3).map((v) => <Node key={v} value={v} nested />);
|
||||
const nodes = value
|
||||
.slice(0, 3)
|
||||
.map((v) => <Node key={JSON.stringify(v)} value={v} nested callsById={callsById} />);
|
||||
const nodelist = interleave(nodes, <span>, </span>);
|
||||
if (value.length <= 3) {
|
||||
return <span style={{ color: colors.base }}>[{nodelist}]</span>;
|
||||
@ -199,14 +218,37 @@ export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: bo
|
||||
);
|
||||
};
|
||||
|
||||
export const ObjectNode = ({ value, nested = false }: { value: object; nested?: boolean }) => {
|
||||
export const ObjectNode = ({
|
||||
showInspector,
|
||||
value,
|
||||
nested = false,
|
||||
}: {
|
||||
showInspector?: boolean;
|
||||
value: object;
|
||||
nested?: boolean;
|
||||
}) => {
|
||||
const isDarkMode = useTheme().base === 'dark';
|
||||
const colors = useThemeColors();
|
||||
|
||||
if (showInspector) {
|
||||
return (
|
||||
<>
|
||||
<ObjectInspector
|
||||
id="interactions-object-inspector"
|
||||
data={value}
|
||||
includePrototypes={false}
|
||||
colorScheme={isDarkMode ? 'dark' : 'light'}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (nested) {
|
||||
return <span style={{ color: colors.base }}>{'{…}'}</span>;
|
||||
}
|
||||
const nodelist = interleave(
|
||||
Object.entries(value)
|
||||
.slice(0, 1)
|
||||
.slice(0, 2)
|
||||
.map(([k, v]) => (
|
||||
<Fragment key={k}>
|
||||
<span style={{ color: colors.objectkey }}>{k}: </span>
|
||||
@ -233,18 +275,27 @@ export const ObjectNode = ({ value, nested = false }: { value: object; nested?:
|
||||
);
|
||||
};
|
||||
|
||||
export const ClassNode = ({ value }: { value: Record<string, any> }) => {
|
||||
export const ClassNode = ({ name }: { name: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return <span style={{ color: colors.instance }}>{value.constructor.name}</span>;
|
||||
return <span style={{ color: colors.instance }}>{name}</span>;
|
||||
};
|
||||
|
||||
export const FunctionNode = ({ value }: { value: Function }) => {
|
||||
export const FunctionNode = ({ name }: { name: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return <span style={{ color: colors.function }}>{value.name || 'anonymous'}</span>;
|
||||
return name ? (
|
||||
<span style={{ color: colors.function }}>{name}</span>
|
||||
) : (
|
||||
<span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
|
||||
const { prefix, localName, id, classNames = [], innerText } = value;
|
||||
export const ElementNode = ({
|
||||
prefix,
|
||||
localName,
|
||||
id,
|
||||
classNames = [],
|
||||
innerText,
|
||||
}: ElementRef['__element__']) => {
|
||||
const name = prefix ? `${prefix}:${localName}` : localName;
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
@ -279,8 +330,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
|
||||
);
|
||||
};
|
||||
|
||||
export const DateNode = ({ value }: { value: Date }) => {
|
||||
const [date, time, ms] = value.toISOString().split(/[T.Z]/);
|
||||
export const DateNode = ({ value }: { value: string }) => {
|
||||
const [date, time, ms] = value.split(/[T.Z]/);
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.date }}>
|
||||
@ -293,42 +344,36 @@ export const DateNode = ({ value }: { value: Date }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const ErrorNode = ({ value }: { value: Error }) => {
|
||||
export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ color: colors.error.name }}>
|
||||
{value.name}
|
||||
{value.message && ': '}
|
||||
{value.message && (
|
||||
<span
|
||||
style={{ color: colors.error.message }}
|
||||
title={value.message.length > 50 ? value.message : ''}
|
||||
>
|
||||
{ellipsize(value.message, 50)}
|
||||
{name}
|
||||
{message && ': '}
|
||||
{message && (
|
||||
<span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
|
||||
{ellipsize(message, 50)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegExpNode = ({ value }: { value: RegExp }) => {
|
||||
export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
|
||||
/<span style={{ color: colors.regex.source }}>{value.source}</span>/{value.flags}
|
||||
/<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const SymbolNode = ({ value }: { value: symbol }) => {
|
||||
export const SymbolNode = ({ description }: { description: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
|
||||
Symbol(
|
||||
{value.description && (
|
||||
<span style={{ color: colors.meta }}>{JSON.stringify(value.description)}</span>
|
||||
)}
|
||||
)
|
||||
{description && <span style={{ color: colors.meta }}>"{description}"</span>})
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@ -12,6 +12,7 @@ export default {
|
||||
goto: action('goto'),
|
||||
next: action('next'),
|
||||
end: action('end'),
|
||||
rerun: action('rerun'),
|
||||
},
|
||||
controlStates: {
|
||||
debugger: true,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { ComponentProps } from 'react';
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
@ -37,6 +37,8 @@ export interface SubnavProps {
|
||||
status: Call['status'];
|
||||
storyFileName?: string;
|
||||
onScrollToEnd?: () => void;
|
||||
isRerunAnimating: boolean;
|
||||
setIsRerunAnimating: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const StyledButton = styled(Button)(({ theme }) => ({
|
||||
@ -90,12 +92,27 @@ const JumpToEndButton = styled(StyledButton)({
|
||||
lineHeight: '12px',
|
||||
});
|
||||
|
||||
interface AnimatedButtonProps {
|
||||
animating?: boolean;
|
||||
}
|
||||
|
||||
const RerunButton = styled(StyledIconButton)<
|
||||
AnimatedButtonProps & ComponentProps<typeof StyledIconButton>
|
||||
>(({ theme, animating, disabled }) => ({
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
svg: {
|
||||
animation: animating && `${theme.animation.rotate360} 200ms ease-out`,
|
||||
},
|
||||
}));
|
||||
|
||||
export const Subnav: React.FC<SubnavProps> = ({
|
||||
controls,
|
||||
controlStates,
|
||||
status,
|
||||
storyFileName,
|
||||
onScrollToEnd,
|
||||
isRerunAnimating,
|
||||
setIsRerunAnimating,
|
||||
}) => {
|
||||
const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
|
||||
|
||||
@ -135,6 +152,19 @@ export const Subnav: React.FC<SubnavProps> = ({
|
||||
<Icons icon="fastforward" />
|
||||
</StyledIconButton>
|
||||
</WithTooltip>
|
||||
|
||||
<WithTooltip hasChrome={false} tooltip={<Note note="Rerun" />}>
|
||||
<RerunButton
|
||||
title="Rerun interactions"
|
||||
containsIcon
|
||||
onClick={controls.rerun}
|
||||
onAnimationEnd={() => setIsRerunAnimating(false)}
|
||||
animating={isRerunAnimating}
|
||||
disabled={isRerunAnimating}
|
||||
>
|
||||
<Icons icon="sync" />
|
||||
</RerunButton>
|
||||
</WithTooltip>
|
||||
</Group>
|
||||
{storyFileName && (
|
||||
<Group>
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
export const ADDON_ID = 'storybook/interactions';
|
||||
export const TOOL_ID = `${ADDON_ID}/tool`;
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, TOOL_ID, PANEL_ID } from './constants';
|
||||
import { Tool } from './Tool';
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
import { Panel } from './Panel';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(TOOL_ID, {
|
||||
type: types.TOOL,
|
||||
title: 'Restart',
|
||||
match: ({ viewMode }) => viewMode === 'story',
|
||||
render: Tool,
|
||||
});
|
||||
|
||||
addons.add(PANEL_ID, {
|
||||
type: types.PANEL,
|
||||
title: 'Interactions',
|
||||
@ -1,31 +1,122 @@
|
||||
import { CallStates, Call } from '@storybook/instrumenter';
|
||||
|
||||
export const getCall = (status: CallStates): Call => {
|
||||
const defaultData = {
|
||||
id: 'addons-interactions-accountform--standard-email-filled [3] change',
|
||||
cursor: 0,
|
||||
path: ['fireEvent'],
|
||||
method: 'change',
|
||||
storyId: 'addons-interactions-accountform--standard-email-filled',
|
||||
args: [
|
||||
{
|
||||
__callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
target: {
|
||||
value: 'michael@chromatic.com',
|
||||
},
|
||||
},
|
||||
],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status,
|
||||
};
|
||||
export const getCalls = (finalStatus: CallStates) => {
|
||||
const calls: Call[] = [
|
||||
{
|
||||
id: 'story--id [3] within',
|
||||
storyId: 'story--id',
|
||||
cursor: 3,
|
||||
path: [],
|
||||
method: 'within',
|
||||
args: [{ __element__: { localName: 'div', id: 'root' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [4] findByText',
|
||||
storyId: 'story--id',
|
||||
cursor: 4,
|
||||
path: [{ __callId__: 'story--id [3] within' }],
|
||||
method: 'findByText',
|
||||
args: ['Click'],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [5] click',
|
||||
storyId: 'story--id',
|
||||
cursor: 5,
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 6,
|
||||
path: [],
|
||||
method: 'waitFor',
|
||||
args: [{ __function__: { name: '' } }],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [0] expect',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 1,
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleSubmit' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [1] stringMatching',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 2,
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 3,
|
||||
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [7] expect',
|
||||
storyId: 'story--id',
|
||||
cursor: 7,
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleReset' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [8] toHaveBeenCalled',
|
||||
storyId: 'story--id',
|
||||
cursor: 8,
|
||||
path: [{ __callId__: 'story--id [7] expect' }, 'not'],
|
||||
method: 'toHaveBeenCalled',
|
||||
args: [],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: finalStatus,
|
||||
},
|
||||
];
|
||||
|
||||
const overrides = CallStates.ERROR
|
||||
? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
|
||||
: {};
|
||||
if (finalStatus === CallStates.ERROR) {
|
||||
calls[calls.length - 1].exception = {
|
||||
name: 'Error',
|
||||
stack: '',
|
||||
message: 'Oops!',
|
||||
callId: calls[calls.length - 1].id,
|
||||
};
|
||||
}
|
||||
|
||||
return { ...defaultData, ...overrides };
|
||||
return calls;
|
||||
};
|
||||
|
||||
export const getInteractions = (finalStatus: CallStates) =>
|
||||
getCalls(finalStatus).filter((call) => call.interceptable);
|
||||
|
||||
1
addons/jest/manager.js
Normal file
1
addons/jest/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/api": "6.5.0-alpha.51",
|
||||
"@storybook/components": "6.5.0-alpha.51",
|
||||
"@storybook/core-events": "6.5.0-alpha.51",
|
||||
"@storybook/theming": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -62,8 +63,8 @@
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
@ -76,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1 +1,6 @@
|
||||
require('./dist/esm/register');
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
@ -55,7 +55,8 @@ With that, you can link an event in a component to any story in the Storybook.
|
||||
You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string:
|
||||
|
||||
```js
|
||||
import { LinkTo, linkTo } from '@storybook/addon-links';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
import LinkTo from '@storybook/addon-links/react';
|
||||
|
||||
export default {
|
||||
title: 'Select',
|
||||
|
||||
1
addons/links/manager.js
Normal file
1
addons/links/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.5.0-alpha.51",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.51",
|
||||
"@storybook/client-logger": "6.5.0-alpha.51",
|
||||
"@storybook/core-events": "6.5.0-alpha.51",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/router": "6.5.0-alpha.51",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/router": "6.5.0-rc.1",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -58,8 +58,8 @@
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "cfcdc7fb74d3cf60eae8dd0b5a626d67ed180d42",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
function managerEntries(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
function config(entry = [], { addDecorator = true } = {}) {
|
||||
const linkConfig = [];
|
||||
if (addDecorator) {
|
||||
linkConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
|
||||
}
|
||||
return [...entry, ...linkConfig];
|
||||
}
|
||||
|
||||
module.exports = { managerEntries, config };
|
||||
1
addons/links/preview.js
Normal file
1
addons/links/preview.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './dist/esm/preview';
|
||||
4
addons/links/react.js
vendored
4
addons/links/react.js
vendored
@ -1 +1,3 @@
|
||||
module.exports = require('./dist/cjs/react');
|
||||
import LinkTo from './dist/esm/react';
|
||||
|
||||
export default LinkTo;
|
||||
|
||||
@ -1 +1,6 @@
|
||||
require('./dist/esm/register');
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
|
||||
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