mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 19:11:08 +08:00
Merge branch 'next' into trevorburnham/fix-story-group-viewmode
This commit is contained in:
Norbert de Langen
commit
a4e517155c
10
.babelrc.js
10
.babelrc.js
@ -24,6 +24,7 @@ module.exports = {
|
||||
ignore: [
|
||||
'./lib/codemod/src/transforms/__testfixtures__',
|
||||
'./lib/postinstall/src/__testfixtures__',
|
||||
'**/typings.d.ts',
|
||||
],
|
||||
presets: [
|
||||
[
|
||||
@ -49,11 +50,12 @@ module.exports = {
|
||||
],
|
||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||
['@babel/plugin-proposal-private-methods', { loose: true }],
|
||||
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
'@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,
|
||||
@ -85,9 +87,10 @@ module.exports = {
|
||||
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
['@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: {
|
||||
@ -122,12 +125,13 @@ module.exports = {
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
'emotion',
|
||||
'@emotion',
|
||||
'babel-plugin-macros',
|
||||
'@babel/plugin-transform-arrow-functions',
|
||||
'@babel/plugin-transform-shorthand-properties',
|
||||
'@babel/plugin-transform-block-scoping',
|
||||
'@babel/plugin-transform-destructuring',
|
||||
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
|
||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
version: 2.1
|
||||
|
||||
executors:
|
||||
sb_node_12_classic:
|
||||
sb_node_14_classic:
|
||||
parameters:
|
||||
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:
|
||||
- image: circleci/node:12
|
||||
- image: circleci/node:14
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
sb_node_12_browsers:
|
||||
sb_node_14_browsers:
|
||||
parameters:
|
||||
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:
|
||||
- image: circleci/node:12-browsers
|
||||
- image: circleci/node:14-browsers
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
@ -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:
|
||||
@ -79,23 +79,23 @@ jobs:
|
||||
build:
|
||||
executor:
|
||||
class: xlarge
|
||||
name: sb_node_12_classic
|
||||
name: sb_node_14_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
|
||||
- build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
|
||||
- run:
|
||||
name: Install dependencies
|
||||
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-v1--{{ checksum "yarn.lock" }}
|
||||
key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.yarn/berry/cache
|
||||
- persist_to_workspace:
|
||||
@ -107,7 +107,7 @@ jobs:
|
||||
- app
|
||||
- lib
|
||||
chromatic:
|
||||
executor: sb_node_12_browsers
|
||||
executor: sb_node_14_browsers
|
||||
parallelism: 4
|
||||
steps:
|
||||
# Keep using default checkout because Chromatic needs some git history to work properly
|
||||
@ -118,25 +118,11 @@ jobs:
|
||||
name: examples
|
||||
command: |
|
||||
yarn run-chromatics
|
||||
packtracker:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node_12_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
|
||||
name: sb_node_12_browsers
|
||||
parallelism: 4
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 17
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -153,7 +139,7 @@ jobs:
|
||||
publish:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node_12_classic
|
||||
name: sb_node_14_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -194,13 +180,39 @@ jobs:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra
|
||||
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:
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
e2e-tests-core:
|
||||
executor:
|
||||
class: large
|
||||
name: sb_cypress_8_node_14
|
||||
parallelism: 8
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
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 react_legacy_root_api vite_react
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
e2e-tests-sb-docs:
|
||||
executor:
|
||||
class: large
|
||||
name: sb_cypress_8_node_14
|
||||
@ -218,15 +230,9 @@ jobs:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E 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
|
||||
# TODO: Add `angular` as soon as Storybook is compatible with Angular 13
|
||||
command: yarn test:e2e-framework vue3 angular12 angular11 web_components_typescript web_components_lit2
|
||||
name: Run smoke tests
|
||||
command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
cra-bench:
|
||||
executor:
|
||||
class: medium
|
||||
@ -250,7 +256,7 @@ jobs:
|
||||
cd ..
|
||||
npx create-react-app cra-bench
|
||||
cd cra-bench
|
||||
npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern"
|
||||
npx @storybook/bench@latest 'npx sb init' --label cra --extra-flags "--modern"
|
||||
e2e-tests-pnp:
|
||||
executor:
|
||||
class: medium
|
||||
@ -269,11 +275,21 @@ jobs:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework --pnp sfcVue cra
|
||||
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: prep artifacts
|
||||
when: always
|
||||
command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook-e2e-testing-out.zip
|
||||
destination: e2e
|
||||
e2e-tests-examples:
|
||||
executor:
|
||||
class: small
|
||||
@ -299,7 +315,7 @@ jobs:
|
||||
smoke-tests:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node_12_browsers
|
||||
name: sb_node_14_browsers
|
||||
environment:
|
||||
# Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
|
||||
# because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
|
||||
@ -357,7 +373,7 @@ jobs:
|
||||
lint:
|
||||
executor:
|
||||
class: small
|
||||
name: sb_node_12_classic
|
||||
name: sb_node_14_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -367,7 +383,7 @@ jobs:
|
||||
name: Lint
|
||||
command: yarn lint
|
||||
unit-tests:
|
||||
executor: sb_node_12_browsers
|
||||
executor: sb_node_14_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -376,6 +392,8 @@ jobs:
|
||||
- run:
|
||||
name: Test
|
||||
command: yarn test --coverage --runInBand --ci
|
||||
- store_test_results:
|
||||
path: junit.xml
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
@ -383,7 +401,7 @@ jobs:
|
||||
coverage:
|
||||
executor:
|
||||
class: small
|
||||
name: sb_node_12_browsers
|
||||
name: sb_node_14_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -409,9 +427,6 @@ workflows:
|
||||
- smoke-tests:
|
||||
requires:
|
||||
- build
|
||||
- packtracker:
|
||||
requires:
|
||||
- build
|
||||
- unit-tests:
|
||||
requires:
|
||||
- build
|
||||
@ -430,6 +445,9 @@ workflows:
|
||||
- e2e-tests-core:
|
||||
requires:
|
||||
- publish
|
||||
- e2e-tests-sb-docs:
|
||||
requires:
|
||||
- publish
|
||||
- e2e-tests-pnp:
|
||||
requires:
|
||||
- publish
|
||||
|
||||
@ -11,7 +11,6 @@ lib/manager-webpack4/prebuilt
|
||||
lib/manager-webpack5/prebuilt
|
||||
lib/core-server/prebuilt
|
||||
lib/codemod/src/transforms/__testfixtures__
|
||||
lib/components/src/controls/react-editable-json-tree
|
||||
scripts/storage
|
||||
scripts/repros-generator
|
||||
*.bundle.js
|
||||
|
||||
33
.eslintrc.js
33
.eslintrc.js
@ -3,8 +3,31 @@ module.exports = {
|
||||
extends: ['@storybook/eslint-config-storybook', 'plugin:storybook/recommended'],
|
||||
rules: {
|
||||
'@typescript-eslint/ban-ts-comment': 'warn',
|
||||
'jest/no-standalone-expect': [
|
||||
'error',
|
||||
{ additionalTestBlockFunctions: ['it.skipWindows', 'it.onWindows'] },
|
||||
],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
// this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
|
||||
files: ['**/addons/docs/**/*'],
|
||||
rules: {
|
||||
'import/no-extraneous-dependencies': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
// this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
|
||||
files: [
|
||||
'**/lib/theming/**/*',
|
||||
'**/lib/router/**/*',
|
||||
'**/lib/ui/**/*',
|
||||
'**/lib/components/**/*',
|
||||
],
|
||||
rules: {
|
||||
'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/**',
|
||||
@ -42,6 +65,16 @@ module.exports = {
|
||||
'react/prop-types': 'off', // we should use types
|
||||
'react/forbid-prop-types': 'off', // we should use types
|
||||
'no-dupe-class-members': 'off', // this is called overloads in typescript
|
||||
'react/no-unused-prop-types': 'off', // we should use types
|
||||
'react/default-props-match-prop-types': 'off', // we should use types
|
||||
'import/no-named-as-default': 'warn',
|
||||
'import/no-named-as-default-member': 'warn',
|
||||
'react/destructuring-assignment': 'warn',
|
||||
|
||||
// This warns about importing interfaces and types in a normal import, it's arguably better to import with the `type` prefix separate from the runtime imports,
|
||||
// I leave this as a warning right now because we haven't really decided yet, and the codebase is riddled with errors if I set to 'error'.
|
||||
// It IS set to 'error' for JS files.
|
||||
'import/named': 'warn',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -12,7 +12,7 @@ If your answer is yes to any of these, please make sure to include it in your PR
|
||||
|
||||
<!--
|
||||
|
||||
Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
|
||||
Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute
|
||||
|
||||
Maintainers: Please tag your pull request with at least one of the following:
|
||||
`["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`
|
||||
|
||||
1
.github/stale.yml
vendored
1
.github/stale.yml
vendored
@ -4,6 +4,7 @@ daysUntilStale: 21
|
||||
daysUntilClose: 30
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- linear
|
||||
- todo
|
||||
- ready
|
||||
- 'in progress'
|
||||
|
||||
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:
|
||||
|
||||
2
.github/workflows/linear-export.yml
vendored
2
.github/workflows/linear-export.yml
vendored
@ -23,5 +23,5 @@ jobs:
|
||||
linearIssuePrefix: SB
|
||||
linearLabel: Storybook
|
||||
linearPRLabel: PR
|
||||
linearTeam: CH
|
||||
linearTeam: SB
|
||||
linearApiKey: ${{ secrets.LINEAR_API_KEY }}
|
||||
|
||||
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]
|
||||
}
|
||||
27
.github/workflows/tests-unit.yml
vendored
27
.github/workflows/tests-unit.yml
vendored
@ -1,16 +1,33 @@
|
||||
name: Unit tests
|
||||
|
||||
on: [push]
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- next
|
||||
pull_request:
|
||||
types: [opened, reopened, labeled, synchronize]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Core Unit Tests
|
||||
runs-on: ubuntu-latest
|
||||
name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }}
|
||||
if: github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'ci:matrix')
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
os: [ubuntu-latest]
|
||||
node_version: [12, 14, 16]
|
||||
include:
|
||||
- os: macos-latest
|
||||
node_version: 16
|
||||
- os: windows-latest
|
||||
node_version: 16
|
||||
runs-on: ${{ matrix.os }}
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
- name: Set node version to ${{ matrix.node_version }}
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "12.x"
|
||||
node-version: ${{ matrix.node_version }}
|
||||
cache: yarn
|
||||
- name: install, bootstrap
|
||||
run: |
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -8,6 +8,7 @@ dist
|
||||
.tern-port
|
||||
*.DS_Store
|
||||
.cache
|
||||
.parcel-cache
|
||||
coverage/
|
||||
*.lerna_backup
|
||||
build
|
||||
@ -34,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/*
|
||||
@ -41,4 +43,4 @@ examples/angular-cli/addon-jest.testresults.json
|
||||
!/**/.yarn/plugins
|
||||
!/**/.yarn/sdks
|
||||
!/**/.yarn/versions
|
||||
/**/.pnp.*
|
||||
/**/.pnp.*
|
||||
|
||||
9
.gitpod.yml
Normal file
9
.gitpod.yml
Normal file
@ -0,0 +1,9 @@
|
||||
# This configuration file was automatically generated by Gitpod.
|
||||
# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
|
||||
# and commit this file to your remote git repository to share the goodness with others.
|
||||
|
||||
tasks:
|
||||
- init: yarn
|
||||
command: yarn bootstrap --core
|
||||
|
||||
|
||||
363
.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
generated
vendored
Normal file
363
.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
768
.yarn/releases/yarn-3.1.1.cjs
generated
vendored
Executable file
768
.yarn/releases/yarn-3.1.1.cjs
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
631
.yarn/releases/yarn-sources.cjs
generated
vendored
631
.yarn/releases/yarn-sources.cjs
generated
vendored
File diff suppressed because one or more lines are too long
@ -9,8 +9,10 @@ npmRegistryServer: "https://registry.yarnpkg.com"
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
|
||||
spec: "@yarnpkg/plugin-typescript"
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
spec: "@yarnpkg/plugin-interactive-tools"
|
||||
|
||||
unsafeHttpWhitelist:
|
||||
- localhost
|
||||
|
||||
yarnPath: .yarn/releases/yarn-sources.cjs
|
||||
yarnPath: .yarn/releases/yarn-3.1.1.cjs
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
## Addon / Framework Support Table
|
||||
|
||||
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Web Components](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
|
||||
| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :------------------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
|
||||
| [a11y](addons/a11y) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [actions](addons/actions) | + | +\* | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [cssresources](addons/cssresources) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [design assets](addons/design-assets) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [docs](addons/docs) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [events](addons/events) | + | | + | + | + | + | + | + | | | + | + | + |
|
||||
| [google-analytics](addons/google-analytics) | + | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [graphql](addons/graphql) | + | | | | | | | | | | | | |
|
||||
| [jest](addons/jest) | + | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [knobs](addons/knobs) | + | +\* | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [links](addons/links) | + | + | + | + | + | + | + | | + | + | + | + | + |
|
||||
| [options](addons/options) | + | + | + | + | + | + | + | | + | + | + | + | + |
|
||||
| [query params](addons/queryparams) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [storyshots](addons/storyshots) | + | + | + | + | | + | + | | + | + | | + | + |
|
||||
| [storysource](addons/storysource) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [viewport](addons/viewport) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
|
||||
## Deprecated Addons
|
||||
|
||||
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
|
||||
| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | + | | | | | | | | | | | |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | + | +\* | + | + | + | + | | + | + | + | + | + |
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
1022
CHANGELOG.md
1022
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -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/))|
|
||||
|
||||
284
MIGRATION.md
284
MIGRATION.md
@ -1,5 +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)
|
||||
@ -17,7 +30,10 @@
|
||||
- [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
|
||||
- [Babel mode v7](#babel-mode-v7)
|
||||
- [Loader behavior with args changes](#loader-behavior-with-args-changes)
|
||||
- [Angular component parameter removed](#angular-component-parameter-removed)
|
||||
- [6.4 Angular changes](#64-angular-changes)
|
||||
- [SB Angular builder](#sb-angular-builder)
|
||||
- [Angular13](#angular13)
|
||||
- [Angular component parameter removed](#angular-component-parameter-removed)
|
||||
- [6.4 deprecations](#64-deprecations)
|
||||
- [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag)
|
||||
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
|
||||
@ -185,6 +201,171 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## 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`).
|
||||
|
||||
This change should not require any specific migrations on your part if you are using the docs addon as described in the documentation. However, if you are using `react-docgen` or `react-docgen-typescript` information in some custom way outside of `addon-docs`, you should be aware of this change.
|
||||
|
||||
In SB6.4, `@storybook/react` added `react-docgen` to its babel settings and `react-docgen-typescript` to its webpack settings. In SB6.5, this only happens if you are using `addon-docs` or `addon-controls`, either directly or indirectly through `addon-essentials`. If you're not using either of those addons, but require that information for some other addon, please configure that manually in your `.storybook/main.js` configuration. You can see the docs configuration here: https://github.com/storybookjs/storybook/blob/next/app/react/src/server/framework-preset-react-docs.ts
|
||||
|
||||
### Opt-in MDX2 support
|
||||
|
||||
SB6.5 adds experimental opt-in support for MDXv2. To install:
|
||||
|
||||
```sh
|
||||
yarn add @storybook/mdx2-csf -D
|
||||
```
|
||||
|
||||
Then add the `previewMdx2` feature flag to your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
features: {
|
||||
previewMdx2: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### CSF3 auto-title improvements
|
||||
|
||||
SB 6.4 introduced experimental "auto-title", in which a story's location in the sidebar (aka `title`) can be automatically inferred from its location on disk. For example, the file `atoms/Button.stories.js` might result in the title `Atoms/Button`.
|
||||
|
||||
We've made two improvements to Auto-title based on user feedback:
|
||||
|
||||
- Auto-title preserves filename case
|
||||
- Auto-title removes redundant filenames from the path
|
||||
|
||||
#### Auto-title filename case
|
||||
|
||||
SB 6.4's implementation of auto-title ran `startCase` on each path component. For example, the file `atoms/MyButton` would be transformed to `Atoms/My Button`.
|
||||
|
||||
We've changed this in SB 6.5 to preserve the filename case, so that instead it the same file would result in the title `atoms/MyButton`. The rationale is that this gives more control to users about what their auto-title will be.
|
||||
|
||||
This might be considered a breaking change. However, we feel justified to release this in 6.5 because:
|
||||
|
||||
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`.
|
||||
|
||||
To address this problem, 6.5 introduces a new heuristic to removes the filename if it matches the directory name or `index`. So `atoms/Button/Button.stories.js` and `atoms/Button/index.stories.js` would both result in the title `Atoms/Button` (or `atoms/Button` if `autoTitleFilenameCase` is set, see above).
|
||||
|
||||
Since CSF3 is experimental, we are introducing this technically breaking change in a minor release. If you desire the old structure, you can manually specify the title in file. For example:
|
||||
|
||||
```js
|
||||
// atoms/Button/Button.stories.js
|
||||
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
|
||||
@ -198,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`).
|
||||
@ -208,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:
|
||||
@ -267,7 +452,7 @@ export default {
|
||||
title: 'Components/Atoms/Button',
|
||||
};
|
||||
|
||||
// ✅ undefined 6.3 KO / 7.0 OK
|
||||
// ✅ undefined 6.3 OK / 7.0 OK
|
||||
export default {
|
||||
component: Button,
|
||||
};
|
||||
@ -470,7 +655,60 @@ This will create a `.babelrc.json` file. This file includes a bunch of babel plu
|
||||
|
||||
In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders do not re-run. Instead the previous value of the loader is passed to the story, irrespective of the new args.
|
||||
|
||||
### Angular component parameter removed
|
||||
### 6.4 Angular changes
|
||||
|
||||
#### SB Angular builder
|
||||
|
||||
Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. The full builder documentation will be shown in the [main documentation page](https://storybook.js.org/docs/angular) soon, but for now you can check out an example here:
|
||||
|
||||
- `start-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/start-storybook/schema.json)
|
||||
- `build-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/build-storybook/schema.json)
|
||||
|
||||
#### Angular13
|
||||
|
||||
Angular 13 introduces breaking changes that require updating your Storybook configuration if you are migrating from a previous version of Angular.
|
||||
|
||||
Most notably, the documented way of including global styles is no longer supported by Angular13. Previously you could write the following in your `.storybook/preview.js` config:
|
||||
|
||||
```
|
||||
import '!style-loader!css-loader!sass-loader!./styles.scss';
|
||||
```
|
||||
|
||||
If you use Angular 13 and above, you should use the builder configuration instead:
|
||||
|
||||
```json
|
||||
"my-default-project": {
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"styles": ["src/styles.css", "src/styles.scss"],
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
If you need storybook-specific styles separate from your app, you can configure the styles in the [SB Angular builder](#sb-angular-builder), which completely overrides your project's styles:
|
||||
|
||||
```json
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"browserTarget": "my-default-project:build",
|
||||
"styles": [".storybook/custom-styles.scss"],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Then, once you've set this up, you should run Storybook through the builder:
|
||||
|
||||
```sh
|
||||
ng run my-default-project:storybook
|
||||
ng run my-default-project:build-storybook
|
||||
```
|
||||
|
||||
#### Angular component parameter removed
|
||||
|
||||
In SB6.3 and earlier, the `default.component` metadata was implemented as a parameter, meaning that stories could set `parameters.component` to override the default export. This was an internal implementation that was never documented, but it was mistakenly used in some Angular examples.
|
||||
|
||||
@ -516,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
|
||||
@ -534,6 +794,8 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
> NOTE: If you're using `@storybook/preset-create-react-app` make sure to update it to version 4.0.0 as well.
|
||||
|
||||
#### Fixing hoisting issues
|
||||
|
||||
##### Webpack 5 manager build
|
||||
@ -558,6 +820,17 @@ yarn add webpack@5 --dev
|
||||
npm install webpack@5 --save-dev
|
||||
```
|
||||
|
||||
Alternatively or additionally you might need to add a resolution to your package.json to ensure that a consistent webpack version is provided across all of storybook packages. Replacing the {app} with the app (react, vue, etc.) that you're using:
|
||||
|
||||
```js
|
||||
// package.json
|
||||
...
|
||||
resolutions: {
|
||||
"@storybook/{app}/webpack": "^5"
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### Angular 12 upgrade
|
||||
|
||||
Storybook 6.3 supports Angular 12 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).
|
||||
@ -1971,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.
|
||||
|
||||
@ -2636,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 -->
|
||||
36
README.md
36
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,23 +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) |
|
||||
| [Mithril](https://github.com/storybookjs/mithril) | [v6.4.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](https://github.com/storybookjs/marko) | [v6.4.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [Riot](https://github.com/storybookjs/riot) | [v6.4.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Rax](https://github.com/storybookjs/rax) | [v6.4.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [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`.
|
||||
|
||||
13
SECURITY.md
13
SECURITY.md
@ -2,17 +2,12 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
| Version | Supported |
|
||||
| ------- | ------------------ |
|
||||
| 6.x | :white_check_mark: |
|
||||
| 5.3.x | :white_check_mark: |
|
||||
| Version | Supported |
|
||||
| --------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
We rely on NPM's security advisory process for reporting vulnerabilities.
|
||||
|
||||
You can submit a vulnerability in a Storybook package at: https://www.npmjs.com/advisories/report
|
||||
|
||||
You can also reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs
|
||||
To report a vulnerability, you can reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs
|
||||
|
||||
When we fix a security issue, we will post a security advisory on Github/NPM, describe the change in the [release notes](https://github.com/storybookjs/storybook/releases), and also announce notify the community on [our Discord](https://discord.gg/storybook).
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
This Storybook addon can be helpful to make your UI components more accessible.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
@ -22,6 +22,8 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
And here's a sample story file to test the addon:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
|
||||
@ -45,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.1",
|
||||
"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.1",
|
||||
"@storybook/api": "6.5.0-alpha.1",
|
||||
"@storybook/channels": "6.5.0-alpha.1",
|
||||
"@storybook/client-logger": "6.5.0-alpha.1",
|
||||
"@storybook/components": "6.5.0-alpha.1",
|
||||
"@storybook/core-events": "6.5.0-alpha.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.5.0-alpha.1",
|
||||
"@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": "fbf6e247a099ec45c30f8594f255a088847b7957",
|
||||
"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' };
|
||||
@ -129,11 +130,14 @@ describe('A11YPanel', () => {
|
||||
const { getByText } = render(<ThemedA11YPanel />);
|
||||
const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
|
||||
act(() => useChannelArgs[EVENTS.RESULT](axeResult));
|
||||
await waitFor(() => {
|
||||
expect(getByText(/Tests completed/)).toBeTruthy();
|
||||
expect(getByText(/Violations/)).toBeTruthy();
|
||||
expect(getByText(/Passes/)).toBeTruthy();
|
||||
expect(getByText(/Incomplete/)).toBeTruthy();
|
||||
});
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(getByText(/Tests completed/)).toBeTruthy();
|
||||
expect(getByText(/Violations/)).toBeTruthy();
|
||||
expect(getByText(/Passes/)).toBeTruthy();
|
||||
expect(getByText(/Incomplete/)).toBeTruthy();
|
||||
},
|
||||
{ timeout: 2000 }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -94,9 +94,10 @@ export const A11YPanel: React.FC = () => {
|
||||
emit(EVENTS.MANUAL, storyId);
|
||||
}, [storyId]);
|
||||
|
||||
const manualActionItems = useMemo(() => [{ title: 'Run test', onClick: handleManual }], [
|
||||
handleManual,
|
||||
]);
|
||||
const manualActionItems = useMemo(
|
||||
() => [{ title: 'Run test', onClick: handleManual }],
|
||||
[handleManual]
|
||||
);
|
||||
const readyActionItems = useMemo(
|
||||
() => [
|
||||
{
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -10,8 +10,8 @@ const List = styled.div({
|
||||
paddingBottom: 4,
|
||||
paddingRight: 4,
|
||||
paddingTop: 4,
|
||||
fontWeight: '400',
|
||||
} as any);
|
||||
fontWeight: 400,
|
||||
});
|
||||
|
||||
const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
|
||||
const maxWidthBeforeBreak = 407;
|
||||
|
||||
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),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { AnyFramework, DecoratorFunction } from '@storybook/csf';
|
||||
import type { AnyFramework, DecoratorFunction } from '@storybook/csf';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
|
||||
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';
|
||||
@ -2,7 +2,10 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env", "jest"],
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest"
|
||||
],
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
@ -10,7 +13,9 @@
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
@ -19,4 +24,4 @@
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
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.1",
|
||||
"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.1",
|
||||
"@storybook/api": "6.5.0-alpha.1",
|
||||
"@storybook/components": "6.5.0-alpha.1",
|
||||
"@storybook/core-events": "6.5.0-alpha.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.5.0-alpha.1",
|
||||
"@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.2",
|
||||
"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": "fbf6e247a099ec45c30f8594f255a088847b7957",
|
||||
"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'
|
||||
);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { styled, withTheme, Theme } from '@storybook/theming';
|
||||
import { styled, withTheme } from '@storybook/theming';
|
||||
import type { Theme } from '@storybook/theming';
|
||||
|
||||
import Inspector from 'react-inspector';
|
||||
import { ActionBar, ScrollArea } from '@storybook/components';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { StoryContext } from '@storybook/addons';
|
||||
import type { StoryContext } from '@storybook/addons';
|
||||
import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
|
||||
|
||||
describe('actions parameter enhancers', () => {
|
||||
@ -7,11 +7,11 @@ describe('actions parameter enhancers', () => {
|
||||
const argTypes = { onClick: {}, onFocus: {}, somethingElse: {} };
|
||||
|
||||
it('should add actions that match a pattern', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
const args = inferActionsFromArgTypesRegex({
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
} as unknown as StoryContext);
|
||||
expect(args).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
onFocus: expect.any(Function),
|
||||
@ -19,41 +19,50 @@ describe('actions parameter enhancers', () => {
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
const args = inferActionsFromArgTypesRegex({
|
||||
initialArgs: { onClick: 'pre-existing value' },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
} as unknown as StoryContext);
|
||||
expect(args).toEqual({ onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if null', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
const args = inferActionsFromArgTypesRegex({
|
||||
initialArgs: { onClick: null },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
} as unknown as StoryContext);
|
||||
expect(args).toEqual({ onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should override pre-existing args, if undefined', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
initialArgs: { onClick: undefined },
|
||||
const args = inferActionsFromArgTypesRegex({
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
} as unknown as StoryContext);
|
||||
expect(args).toEqual({ onClick: expect.any(Function), onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if set undefined on purpose', () => {
|
||||
const args = inferActionsFromArgTypesRegex({
|
||||
initialArgs: { onClick: undefined },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown as StoryContext);
|
||||
expect(args).toEqual({ onClick: undefined, onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
const args = inferActionsFromArgTypesRegex({
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters: {
|
||||
...parameters,
|
||||
actions: { ...parameters.actions, disable: true },
|
||||
},
|
||||
} as unknown) as StoryContext);
|
||||
} as unknown as StoryContext);
|
||||
expect(args).toEqual({});
|
||||
});
|
||||
});
|
||||
@ -65,11 +74,11 @@ describe('actions parameter enhancers', () => {
|
||||
};
|
||||
it('should add actions based on action.args', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
addActionsFromArgTypes({
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
} as unknown as StoryContext)
|
||||
).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
onBlur: expect.any(Function),
|
||||
@ -78,41 +87,51 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should NOT override pre-existing args', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
addActionsFromArgTypes({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
initialArgs: { onClick: 'pre-existing value' },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
} as unknown as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if null', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
addActionsFromArgTypes({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
initialArgs: { onClick: null },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
} as unknown as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
|
||||
it('should override pre-existing args, if undefined', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
addActionsFromArgTypes({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
initialArgs: {},
|
||||
parameters: {},
|
||||
} as unknown as StoryContext)
|
||||
).toEqual({ onClick: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if set undefined on purpose', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
initialArgs: { onClick: undefined },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({ onClick: expect.any(Function) });
|
||||
} as unknown as StoryContext)
|
||||
).toEqual({ onClick: undefined });
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
addActionsFromArgTypes({
|
||||
initialArgs: {},
|
||||
argTypes,
|
||||
parameters: { actions: { disable: true } },
|
||||
} as unknown) as StoryContext)
|
||||
} as unknown as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Args } from '@storybook/addons';
|
||||
import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
|
||||
import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/csf';
|
||||
import { action } from '../index';
|
||||
|
||||
// interface ActionsParameter {
|
||||
@ -7,6 +6,9 @@ import { action } from '../index';
|
||||
// argTypesRegex?: RegExp;
|
||||
// }
|
||||
|
||||
const isInInitialArgs = (name: string, initialArgs: Args) =>
|
||||
typeof initialArgs[name] === 'undefined' && !(name in initialArgs);
|
||||
|
||||
/**
|
||||
* Automatically add action args for argTypes whose name
|
||||
* matches a regex, such as `^on.*` for react-style `onClick` etc.
|
||||
@ -28,7 +30,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (contex
|
||||
);
|
||||
|
||||
return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
|
||||
if (typeof initialArgs[name] === 'undefined') {
|
||||
if (isInInitialArgs(name, initialArgs)) {
|
||||
acc[name] = action(name);
|
||||
}
|
||||
return acc;
|
||||
@ -51,7 +53,7 @@ export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
|
||||
const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
|
||||
|
||||
return argTypesWithAction.reduce((acc, [name, argType]) => {
|
||||
if (typeof initialArgs[name] === 'undefined') {
|
||||
if (isInInitialArgs(name, initialArgs)) {
|
||||
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
|
||||
}
|
||||
return acc;
|
||||
|
||||
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', {
|
||||
|
||||
@ -2,9 +2,14 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env", "jest"]
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest"
|
||||
]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
@ -13,4 +18,4 @@
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
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.1",
|
||||
"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.1",
|
||||
"@storybook/api": "6.5.0-alpha.1",
|
||||
"@storybook/client-logger": "6.5.0-alpha.1",
|
||||
"@storybook/components": "6.5.0-alpha.1",
|
||||
"@storybook/core-events": "6.5.0-alpha.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.5.0-alpha.1",
|
||||
"@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": "fbf6e247a099ec45c30f8594f255a088847b7957",
|
||||
"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,5 +1,5 @@
|
||||
import { useMemo, useEffect } from '@storybook/addons';
|
||||
import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
import {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import dedent from 'ts-dedent';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { useMemo, useEffect } from '@storybook/addons';
|
||||
import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
|
||||
|
||||
import { clearStyles, addGridStyle } from '../helpers';
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
|
||||
@ -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: {
|
||||
@ -2,7 +2,9 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
@ -15,4 +17,4 @@
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -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.1",
|
||||
"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.1",
|
||||
"@storybook/api": "6.5.0-alpha.1",
|
||||
"@storybook/client-logger": "6.5.0-alpha.1",
|
||||
"@storybook/components": "6.5.0-alpha.1",
|
||||
"@storybook/core-common": "6.5.0-alpha.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.1",
|
||||
"@storybook/store": "6.5.0-alpha.1",
|
||||
"@storybook/theming": "6.5.0-alpha.1",
|
||||
"@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": "fbf6e247a099ec45c30f8594f255a088847b7957",
|
||||
"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,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { checkAddonOrder } from '@storybook/core-common';
|
||||
import { checkAddonOrder, serverRequire } from '@storybook/core-common';
|
||||
import path from 'path';
|
||||
|
||||
export const checkDocsLoaded = (configDir: string) => {
|
||||
@ -14,6 +14,6 @@ export const checkDocsLoaded = (configDir: string) => {
|
||||
configFile: path.isAbsolute(configDir)
|
||||
? path.join(configDir, 'main')
|
||||
: path.join(process.cwd(), configDir, 'main'),
|
||||
getConfig: (configFile) => import(configFile),
|
||||
getConfig: (configFile) => serverRequire(configFile),
|
||||
});
|
||||
};
|
||||
|
||||
@ -2,9 +2,15 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env", "jest", "node"]
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
@ -13,4 +19,4 @@
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -77,19 +77,10 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
|
||||
|
||||
## Framework support
|
||||
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
| | React | Vue | Angular | Ember | Web Components | Marko | HTML | Svelte | Preact | Riot | Mithril | Marko |
|
||||
| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :---: | :--: | :----: | :----: | :--: | :-----: | :---: |
|
||||
| MDX stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Props table | + | + | + | + | + | WIP | | | | | | |
|
||||
| Props controls | + | + | + | | | WIP | | | | | | |
|
||||
| Description | + | + | + | + | + | WIP | | | | | | |
|
||||
| Inline stories | + | + | + | | + | WIP | + | | | | | |
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
|
||||
@ -210,12 +210,6 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
|
||||
|
||||
Storybook Docs renders all Angular stories inside IFrames by default. But it is possible to use an inline rendering:
|
||||
|
||||
To get this, you'll first need to install Angular elements:
|
||||
|
||||
```sh
|
||||
yarn add -D @angular/elements @webcomponents/custom-elements
|
||||
```
|
||||
|
||||
Then update `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
|
||||
2
addons/docs/angular/index.d.ts
vendored
2
addons/docs/angular/index.d.ts
vendored
@ -1 +1 @@
|
||||
export * from '../dist/ts3.9/frameworks/angular/index.d';
|
||||
export declare const setCompodocJson: (compodocJson: any) => void;
|
||||
|
||||
8
addons/docs/angular/index.js
vendored
8
addons/docs/angular/index.js
vendored
@ -1 +1,7 @@
|
||||
module.exports = require('../dist/esm/frameworks/angular/index');
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
/* global window */
|
||||
|
||||
export const setCompodocJson = (compodocJson) => {
|
||||
// @ts-ignore
|
||||
window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
|
||||
};
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
function managerEntries(entry = [], options) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
function config(entry = [], options = {}) {
|
||||
const { framework } = options;
|
||||
const docsConfig = [require.resolve('./dist/esm/frameworks/common/config')];
|
||||
try {
|
||||
docsConfig.push(require.resolve(`./dist/esm/frameworks/${framework}/config`));
|
||||
} catch (err) {
|
||||
// there is no custom config for the user's framework, do nothing
|
||||
}
|
||||
return [...docsConfig, ...entry];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
managerEntries,
|
||||
config,
|
||||
};
|
||||
@ -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?
|
||||
|
||||
|
||||
@ -106,7 +106,7 @@ The input is the story function and the story context (id, parameters, args, etc
|
||||
|
||||
## Dynamic source rendering
|
||||
|
||||
With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
|
||||
With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
|
||||
|
||||
This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.
|
||||
|
||||
@ -151,7 +151,7 @@ import { jsxDecorator } from './jsxDecorator';
|
||||
export const decorators = [jsxDecorator];
|
||||
```
|
||||
|
||||
This configures the `jsxDecorator` to be run on every story.
|
||||
This configures the `jsxDecorator` to be run on every story.
|
||||
|
||||
<div class="aside">
|
||||
To learn more and see how it's implemented in context, check out <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/jsxDecorator.tsx">the code</a> .
|
||||
|
||||
@ -1 +1,6 @@
|
||||
module.exports = require('../dist/esm/frameworks/ember');
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
/* global window */
|
||||
|
||||
export const setJSONDoc = (jsondoc) => {
|
||||
window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
|
||||
};
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
const path = require('path');
|
||||
const mdx = require('@mdx-js/mdx');
|
||||
const { ScriptTransformer } = require('@jest/transform');
|
||||
const { dedent } = require('ts-dedent');
|
||||
|
||||
const { createCompiler } = require('@storybook/csf-tools/mdx');
|
||||
|
||||
const compilers = [createCompiler({})];
|
||||
const { compileSync } = require('@storybook/mdx1-csf');
|
||||
|
||||
module.exports = {
|
||||
process(src, filename, config, { instrument }) {
|
||||
@ -13,7 +10,7 @@ module.exports = {
|
||||
/* @jsx mdx */
|
||||
import React from 'react'
|
||||
import { mdx } from '@mdx-js/react'
|
||||
${mdx.sync(src, { compilers, filepath: filename })}
|
||||
${compileSync(src, { filepath: filename })}
|
||||
`;
|
||||
|
||||
const extension = path.extname(filename);
|
||||
|
||||
1
addons/docs/manager.js
Normal file
1
addons/docs/manager.js
Normal file
@ -0,0 +1 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1 +1 @@
|
||||
module.exports = require('@storybook/csf-tools/mdx').createCompiler;
|
||||
module.exports = require('@storybook/mdx1-csf').createCompiler;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.5.0-alpha.1",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -40,6 +40,7 @@
|
||||
"common/**/*",
|
||||
"ember/**/*",
|
||||
"html/**/*",
|
||||
"svelte/**/*",
|
||||
"postinstall/**/*",
|
||||
"react/**/*",
|
||||
"vue/**/*",
|
||||
@ -54,47 +55,29 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/generator": "^7.12.11",
|
||||
"@babel/parser": "^7.12.11",
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.5.0-alpha.1",
|
||||
"@storybook/api": "6.5.0-alpha.1",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.1",
|
||||
"@storybook/client-logger": "6.5.0-alpha.1",
|
||||
"@storybook/components": "6.5.0-alpha.1",
|
||||
"@storybook/core": "6.5.0-alpha.1",
|
||||
"@storybook/core-events": "6.5.0-alpha.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/csf-tools": "6.5.0-alpha.1",
|
||||
"@storybook/node-logger": "6.5.0-alpha.1",
|
||||
"@storybook/postinstall": "6.5.0-alpha.1",
|
||||
"@storybook/preview-web": "6.5.0-alpha.1",
|
||||
"@storybook/source-loader": "6.5.0-alpha.1",
|
||||
"@storybook/store": "6.5.0-alpha.1",
|
||||
"@storybook/theming": "6.5.0-alpha.1",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
"@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",
|
||||
"doctrine": "^3.0.0",
|
||||
"escodegen": "^2.0.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
"html-tags": "^3.1.0",
|
||||
"js-string-escape": "^1.0.1",
|
||||
"loader-utils": "^2.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"nanoid": "^3.1.23",
|
||||
"p-limit": "^3.1.0",
|
||||
"prettier": "^2.2.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-element-to-jsx-string": "^14.3.4",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"remark-external-links": "^8.0.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
@ -102,82 +85,17 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.14",
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.5.0-alpha.1",
|
||||
"@storybook/html": "6.5.0-alpha.1",
|
||||
"@storybook/react": "6.5.0-alpha.1",
|
||||
"@storybook/vue": "6.5.0-alpha.1",
|
||||
"@storybook/web-components": "6.5.0-alpha.1",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
"@types/estree": "^0.0.44",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/loader-utils": "^2.0.0",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/tmp": "^0.2.0",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"babel-plugin-react-docgen": "^4.2.1",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^26.6.3",
|
||||
"jest-specific-snapshot": "^4.0.0",
|
||||
"lit-element": "^3.0.2",
|
||||
"lit-html": "^2.0.2",
|
||||
"require-from-string": "^2.0.2",
|
||||
"rxjs": "^6.6.3",
|
||||
"styled-components": "^5.2.1",
|
||||
"terser-webpack-plugin": "^5.0.3",
|
||||
"tmp": "^0.2.1",
|
||||
"tslib": "^2.1.0",
|
||||
"vue": "^2.6.10",
|
||||
"web-component-analyzer": "^1.1.6",
|
||||
"webpack": "4",
|
||||
"zone.js": "^0.11.3"
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"@types/util-deprecate": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.5.0-alpha.1",
|
||||
"@storybook/html": "6.5.0-alpha.1",
|
||||
"@storybook/react": "6.5.0-alpha.1",
|
||||
"@storybook/vue": "6.5.0-alpha.1",
|
||||
"@storybook/vue3": "6.5.0-alpha.1",
|
||||
"@storybook/web-components": "6.5.0-alpha.1",
|
||||
"lit": "^2.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0",
|
||||
"svelte": "^3.31.2",
|
||||
"sveltedoc-parser": "^4.1.0",
|
||||
"vue": "^2.6.10 || ^3.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/angular": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/html": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/vue": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/vue3": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/web-components": {
|
||||
"optional": true
|
||||
},
|
||||
"lit": {
|
||||
"optional": true
|
||||
},
|
||||
"lit-html": {
|
||||
"@storybook/mdx2-csf": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
@ -185,24 +103,12 @@
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"svelte": {
|
||||
"optional": true
|
||||
},
|
||||
"sveltedoc-parser": {
|
||||
"optional": true
|
||||
},
|
||||
"vue": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "fbf6e247a099ec45c30f8594f255a088847b7957",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -1,16 +1 @@
|
||||
const getFrameworkPresets = (framework) => {
|
||||
try {
|
||||
return [require.resolve(`./dist/cjs/frameworks/${framework}/preset`)];
|
||||
} catch (err) {
|
||||
// there is no custom config for the user's framework, do nothing
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = (storybookOptions, presetOptions) => {
|
||||
return [
|
||||
{ name: require.resolve('./common-preset'), options: presetOptions },
|
||||
{ name: require.resolve('./dist/cjs/frameworks/common/preset'), options: presetOptions },
|
||||
...getFrameworkPresets(storybookOptions.framework),
|
||||
];
|
||||
};
|
||||
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 +1,6 @@
|
||||
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'
|
||||
);
|
||||
|
||||
@ -7,15 +7,15 @@ import {
|
||||
SortType,
|
||||
TabbedArgsTable,
|
||||
} from '@storybook/components';
|
||||
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';
|
||||
import { getComponentName } from './utils';
|
||||
import { ArgTypesExtractor } from '../lib/docgen/types';
|
||||
import { lookupStoryId } from './Story';
|
||||
import { useStory } from './useStory';
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { FunctionComponent, useContext } from 'react';
|
||||
import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
|
||||
import { str } from '@storybook/docs-tools';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { Component, CURRENT_SELECTION } from './types';
|
||||
import { str } from '../lib/docgen';
|
||||
|
||||
export enum DescriptionType {
|
||||
INFO = 'info',
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Context, createContext } from 'react';
|
||||
import { window as globalWindow } from 'global';
|
||||
|
||||
import { DocsContextProps } from '@storybook/preview-web';
|
||||
import { AnyFramework } from '@storybook/csf';
|
||||
import type { DocsContextProps } from '@storybook/preview-web';
|
||||
import type { AnyFramework } from '@storybook/csf';
|
||||
|
||||
export type { DocsContextProps };
|
||||
|
||||
@ -12,9 +12,11 @@ export type { DocsContextProps };
|
||||
// the React component tree.
|
||||
// This was specifically a problem with the Vite builder.
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
if (globalWindow.__DOCS_CONTEXT__ === undefined) {
|
||||
if (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) {
|
||||
globalWindow.__DOCS_CONTEXT__ = createContext({});
|
||||
globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
|
||||
}
|
||||
|
||||
export const DocsContext: Context<DocsContextProps<AnyFramework>> = globalWindow.__DOCS_CONTEXT__;
|
||||
export const DocsContext: Context<DocsContextProps<AnyFramework>> = globalWindow
|
||||
? globalWindow.__DOCS_CONTEXT__
|
||||
: createContext({});
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
import React, { FC, useContext } from 'react';
|
||||
import {
|
||||
Source as PureSource,
|
||||
SourceError,
|
||||
SourceProps as PureSourceProps,
|
||||
} from '@storybook/components';
|
||||
import { StoryId } from '@storybook/api';
|
||||
import { Story } from '@storybook/store';
|
||||
import React, { ComponentProps, FC, useContext } from 'react';
|
||||
import { Source as PureSource, SourceError } from '@storybook/components';
|
||||
import type { StoryId } from '@storybook/api';
|
||||
import type { Story } from '@storybook/store';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { SourceContext, SourceContextProps } from './SourceContainer';
|
||||
import { SourceContext, SourceContextProps, SourceItem } from './SourceContainer';
|
||||
import { CURRENT_SELECTION } from './types';
|
||||
import { SourceType } from '../shared';
|
||||
|
||||
@ -24,6 +20,7 @@ export enum SourceState {
|
||||
interface CommonProps {
|
||||
language?: string;
|
||||
dark?: boolean;
|
||||
format?: PureSourceProps['format'];
|
||||
code?: string;
|
||||
}
|
||||
|
||||
@ -50,11 +47,11 @@ const getSourceState = (stories: Story[]) => {
|
||||
return states[0];
|
||||
};
|
||||
|
||||
const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): string => {
|
||||
const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): SourceItem => {
|
||||
const { sources } = sourceContext;
|
||||
// source rendering is async so source is unavailable at the start of the render cycle,
|
||||
// so we fail gracefully here without warning
|
||||
return sources?.[storyId] || '';
|
||||
return sources?.[storyId] || { code: '', format: false };
|
||||
};
|
||||
|
||||
const getSnippet = (snippet: string, story?: Story<any>): string => {
|
||||
@ -89,6 +86,7 @@ const getSnippet = (snippet: string, story?: Story<any>): string => {
|
||||
};
|
||||
|
||||
type SourceStateProps = { state: SourceState };
|
||||
type PureSourceProps = ComponentProps<typeof PureSource>;
|
||||
|
||||
export const getSourceProps = (
|
||||
props: SourceProps,
|
||||
@ -103,6 +101,7 @@ export const getSourceProps = (
|
||||
const multiProps = props as MultiSourceProps;
|
||||
|
||||
let source = codeProps.code; // prefer user-specified code
|
||||
let { format } = codeProps; // prefer user-specified code
|
||||
|
||||
const targetIds = multiProps.ids || [singleProps.id || currentId];
|
||||
const storyIds = targetIds.map((targetId) =>
|
||||
@ -115,9 +114,12 @@ export const getSourceProps = (
|
||||
}
|
||||
|
||||
if (!source) {
|
||||
// just take the format from the first story, given how they're all concatinated together...
|
||||
// TODO: we should consider sending an event with all the sources separately, instead of concatenating them here
|
||||
({ format } = getStorySource(storyIds[0], sourceContext));
|
||||
source = storyIds
|
||||
.map((storyId, idx) => {
|
||||
const storySource = getStorySource(storyId, sourceContext);
|
||||
const { code: storySource } = getStorySource(storyId, sourceContext);
|
||||
const storyObj = stories[idx] as Story;
|
||||
return getSnippet(storySource, storyObj);
|
||||
})
|
||||
@ -134,6 +136,7 @@ export const getSourceProps = (
|
||||
? {
|
||||
code: source,
|
||||
state,
|
||||
format,
|
||||
language: props.language || docsLanguage || 'jsx',
|
||||
dark: props.dark || false,
|
||||
}
|
||||
@ -145,7 +148,7 @@ export const getSourceProps = (
|
||||
* or the source for a story if `storyId` is provided, or
|
||||
* the source for the current story if nothing is provided.
|
||||
*/
|
||||
export const Source: FC<SourceProps> = (props) => {
|
||||
export const Source: FC<PureSourceProps> = (props) => {
|
||||
const sourceContext = useContext(SourceContext);
|
||||
const docsContext = useContext(DocsContext);
|
||||
const sourceProps = getSourceProps(props, docsContext, sourceContext);
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import React, { FC, Context, createContext, useEffect, useState } from 'react';
|
||||
import deepEqual from 'fast-deep-equal';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { StoryId } from '@storybook/api';
|
||||
import type { SyntaxHighlighterFormatTypes } from '@storybook/components';
|
||||
import type { StoryId } from '@storybook/api';
|
||||
import { SNIPPET_RENDERED } from '../shared';
|
||||
|
||||
export type SourceItem = string;
|
||||
export interface SourceItem {
|
||||
code: string;
|
||||
format: SyntaxHighlighterFormatTypes;
|
||||
}
|
||||
export type StorySources = Record<StoryId, SourceItem>;
|
||||
|
||||
export interface SourceContextProps {
|
||||
@ -19,23 +23,33 @@ export const SourceContainer: FC<{}> = ({ children }) => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
useEffect(() => {
|
||||
const handleSnippetRendered = (id: StoryId, newItem: SourceItem) => {
|
||||
if (newItem !== sources[id]) {
|
||||
setSources((current) => {
|
||||
const newSources = { ...current, [id]: newItem };
|
||||
|
||||
if (!deepEqual(current, newSources)) {
|
||||
return newSources;
|
||||
}
|
||||
return current;
|
||||
});
|
||||
const handleSnippetRendered = (
|
||||
id: StoryId,
|
||||
newSource: string,
|
||||
format: SyntaxHighlighterFormatTypes = false
|
||||
) => {
|
||||
// optimization: if the source is the same, ignore the incoming event
|
||||
if (sources[id] && sources[id].code === newSource) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSources((current) => {
|
||||
const newSources = {
|
||||
...current,
|
||||
[id]: { code: newSource, format },
|
||||
};
|
||||
|
||||
if (!deepEqual(current, newSources)) {
|
||||
return newSources;
|
||||
}
|
||||
return current;
|
||||
});
|
||||
};
|
||||
|
||||
channel.on(SNIPPET_RENDERED, handleSnippetRendered);
|
||||
|
||||
return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return <SourceContext.Provider value={{ sources }}>{children}</SourceContext.Provider>;
|
||||
};
|
||||
|
||||
@ -13,6 +13,7 @@ export const Stories: FunctionComponent<StoriesProps> = ({ title, includePrimary
|
||||
const { componentStories } = useContext(DocsContext);
|
||||
|
||||
let stories: DocsStoryProps[] = componentStories();
|
||||
stories = stories.filter((story) => !story.parameters?.docs?.disable);
|
||||
if (!includePrimary) stories = stories.slice(1);
|
||||
|
||||
if (!stories || stories.length === 0) {
|
||||
|
||||
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