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

Merge branch 'sri-ram-contribution' of https://github.com/sriram-km/storybook into sri-ram-contribution

Browse Source
This commit is contained in:
Sri Ram 2022-11-02 12:41:34 +05:30
commit 4abe68c315
2307 changed files with 146246 additions and 53174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

380
.circleci/config.yml
View File

@ -1,29 +1,29 @@
version: 2.1
executors:
sb_node_14_classic:
sb_node_16_classic:
parameters:
class:
description: The Resource class
type: enum
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
default: 'medium'
default: 'small'
working_directory: /tmp/storybook
docker:
- image: cimg/node:14.19
- image: cimg/node:16.17.1
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
sb_node_14_browsers:
sb_node_16_browsers:
parameters:
class:
description: The Resource class
type: enum
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
default: 'medium'
default: 'small'
working_directory: /tmp/storybook
docker:
- image: cimg/node:14.19-browsers
- image: cimg/node:16.17.1-browsers
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
@ -33,10 +33,10 @@ executors:
description: The Resource class
type: enum
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
default: 'medium'
default: 'small'
working_directory: /tmp/storybook
docker:
- image: mcr.microsoft.com/playwright:v1.26.0-focal
- image: mcr.microsoft.com/playwright:v1.27.0-focal
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
@ -77,34 +77,23 @@ commands:
jobs:
build:
executor:
class: xlarge
name: sb_node_14_classic
class: large
name: sb_node_16_classic
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- restore_cache:
name: Restore Yarn cache
keys:
- build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
- build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
- run:
name: Install dependencies
name: Compile
command: |
cd code
yarn install --immutable
- run:
name: Install script dependencies
command: |
cd scripts
yarn install --immutable
- run:
name: Bootstrap
command: |
cd code
yarn bootstrap --build
yarn task --task compile --start-from=auto --no-link --debug
git diff --exit-code
- save_cache:
name: Save Yarn cache
key: build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
paths:
- ~/.yarn/berry/cache
- persist_to_workspace:
@ -117,44 +106,13 @@ jobs:
- code/addons
- code/frameworks
- code/lib
- code/ui
- code/renderers
- code/presets
chromatic:
executor: sb_node_14_browsers
parallelism: 15
steps:
# Keep using default checkout because Chromatic needs some git history to work properly
- checkout
- attach_workspace:
at: .
- run:
name: chromatic
command: |
cd code
yarn run-chromatics
examples:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 12
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: examples
command: |
cd code
yarn build-storybooks --all
- persist_to_workspace:
root: .
paths:
- code/built-storybooks
publish:
executor:
class: medium
name: sb_node_14_classic
class: small
name: sb_node_16_classic
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -169,33 +127,9 @@ jobs:
root: .
paths:
- .verdaccio-cache
# NOTE: this currently tests each story in docs mode, which doesn't make sense any more as stories
# can no longer run in docs mode. Instead we should probably change the test runner to test each
# docs entry if you run it in `VIEW_MODE=docs`
# e2e-tests-sb-docs:
# 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 6001 --open
# background: true
# - run:
# name: Wait for registry
# command: yarn wait-on http://localhost:6001
# - run:
# name: Run smoke tests
# command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
# no_output_timeout: 5m
cra-bench:
executor:
class: medium+
class: medium
name: sb_playwright
working_directory: /tmp/storybook
steps:
@ -218,42 +152,65 @@ jobs:
name: set up cra repro, skip tests
command: |
cd code
node ./lib/cli/bin/index.js repro -t cra --e2e ../cra-bench
node ./lib/cli/bin/index.js repro-next cra/default-js --output ../../cra-bench
- run:
name: Run @storybook/bench on repro
command: |
cd ./cra-bench
npx -p @storybook/bench@1.0.0--canary.12.7cccdee.0 sb-bench 'echo noop' --label cra
cd ../cra-bench
rm -rf node_modules
mkdir node_modules
npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label cra
- run:
name: prep artifacts
when: always
command: tar cvzf /tmp/sb-bench.tar.gz ./cra-bench
command: tar cvzf /tmp/sb-bench.tar.gz ../cra-bench
- store_artifacts:
path: /tmp/sb-bench.tar.gz
destination: sb-bench.tar.gz
smoke-tests:
react-vite-bench:
executor:
class: medium+
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
DISABLE_ESLINT_PLUGIN: 'true'
parallelism: 16
class: medium
name: sb_playwright
working_directory: /tmp/storybook
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: smoke tests
name: Running local registry
command: |
cd code
yarn smoketest-storybooks --all
yarn local-registry --port 6001 --open
background: true
- run:
name: Wait for registry
command: |
cd code
yarn wait-on http://localhost:6001
- run:
name: set up react-vite repro, skip tests
command: |
cd code
node ./lib/cli/bin/index.js repro-next react-vite/default-ts --output ../../react-vite-bench
- run:
name: Run @storybook/bench on repro
command: |
cd ../react-vite-bench
rm -rf node_modules
mkdir node_modules
npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label react-vite
- run:
name: prep artifacts
when: always
command: tar cvzf /tmp/sb-bench.tar.gz ../react-vite-bench
- store_artifacts:
path: /tmp/sb-bench.tar.gz
destination: sb-bench.tar.gz
lint:
executor:
class: medium
name: sb_node_14_classic
name: sb_node_16_classic
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -264,8 +221,22 @@ jobs:
command: |
cd code
yarn lint
check:
executor:
class: xlarge
name: sb_node_16_classic
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Check
command: |
yarn task --task check --start-from=auto --no-link --debug
git diff --exit-code
script-unit-tests:
executor: sb_node_14_browsers
executor: sb_node_16_browsers
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -279,7 +250,9 @@ jobs:
- store_test_results:
path: scripts/junit.xml
unit-tests:
executor: sb_node_14_browsers
executor:
class: medium+
name: sb_node_16_browsers
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -299,7 +272,7 @@ jobs:
coverage:
executor:
class: small
name: sb_node_14_browsers
name: sb_node_16_browsers
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -310,85 +283,10 @@ jobs:
command: |
cd code
yarn coverage
## new workflow
create-sandboxes:
chromatic-internal-storybooks:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 12
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Creating Sandboxes
command: yarn task --task create --template $(yarn get-template ci create) --force --no-before --junit
working_directory: code
- persist_to_workspace:
root: .
paths:
- sandbox
- store_test_results:
path: code/test-results
smoke-test-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 12
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Smoke Testing Sandboxes
command: yarn task --task smoke-test --template $(yarn get-template ci smoke-test) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
build-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 12
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Building Sandboxes
command: yarn task --task build --template $(yarn get-template ci build) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
- persist_to_workspace:
root: .
paths:
- sandbox/*/storybook-static
test-runner-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 12
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running Test Runner
command: yarn task --task test-runner --template $(yarn get-template ci test-runner) --force --no-before --junit
working_directory: code
- store_test_results:
path: code/test-results
chromatic-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 12
class: medium
name: sb_node_16_browsers
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -396,15 +294,101 @@ jobs:
at: .
- run:
name: Running Chromatic
command: yarn task --task chromatic --template $(yarn get-template ci chromatic) --force --no-before --junit
working_directory: code
command: |
cd code
yarn storybook:ui:chromatic
yarn storybook:blocks:chromatic
- store_test_results:
path: code/test-results
e2e-sandboxes:
path: test-results
## new workflow
create-sandboxes:
executor:
class: medium
name: sb_node_16_browsers
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Creating Sandboxes
command: yarn task --task sandbox --template $(yarn get-template ci create) --no-link --start-from=never --junit
- persist_to_workspace:
root: .
paths:
- sandbox
- store_test_results:
path: test-results
smoke-test-sandboxes:
executor:
class: medium
name: sb_node_16_browsers
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Smoke Testing Sandboxes
command: yarn task --task smoke-test --template $(yarn get-template ci smoke-test) --no-link --start-from=never --junit
- store_test_results:
path: test-results
build-sandboxes:
executor:
class: medium+
name: sb_node_16_browsers
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Building Sandboxes
command: yarn task --task build --template $(yarn get-template ci build) --no-link --start-from=never --junit
- store_test_results:
path: test-results
- persist_to_workspace:
root: .
paths:
- sandbox/*/storybook-static
test-runner-sandboxes:
executor:
class: medium
name: sb_playwright
parallelism: 12
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running Test Runner
command: yarn task --task test-runner --template $(yarn get-template ci test-runner) --no-link --start-from=never --junit
- store_test_results:
path: test-results
chromatic-sandboxes:
executor:
class: medium
name: sb_node_16_browsers
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running Chromatic
command: yarn task --task chromatic --template $(yarn get-template ci chromatic) --no-link --start-from=never --junit
- store_test_results:
path: test-results
e2e-sandboxes:
executor:
class: medium
name: sb_playwright
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -412,10 +396,9 @@ jobs:
at: .
- run:
name: Running E2E Tests
command: yarn task --task e2e-tests --template $(yarn get-template ci e2e-tests) --force --no-before --junit
working_directory: code
command: yarn task --task e2e-tests --template $(yarn get-template ci e2e-tests) --no-link --start-from=never --junit
- store_test_results:
path: code/test-results
path: test-results
- store_artifacts: # this is where playwright puts more complex stuff
path: code/playwright-results/
destination: playwright
@ -427,10 +410,7 @@ workflows:
- lint:
requires:
- build
- examples:
requires:
- build
- smoke-tests:
- check:
requires:
- build
- unit-tests:
@ -439,26 +419,28 @@ workflows:
- script-unit-tests:
requires:
- build
- chromatic-internal-storybooks:
requires:
- build
- coverage:
requires:
- unit-tests
- chromatic:
requires:
- examples
- publish:
requires:
- build
- cra-bench:
requires:
- publish
- react-vite-bench:
requires:
- publish
## new workflow
- create-sandboxes:
requires:
- publish
- smoke-test-sandboxes:
requires:
- create-sandboxes
# - smoke-test-sandboxes: # disabled for now
# requires:
# - create-sandboxes
- build-sandboxes:
requires:
- create-sandboxes

18
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@ -1,18 +0,0 @@
---
name: Bug report 🐞
about: Something is broken and you have a reliable reproduction? Let us know here. For questions, please use "Question" below.
labels: needs triage, bug
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Please create a reproduction by running `npx sb@next repro` and following the instructions. Read our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce) to learn more about creating reproductions.
Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.
**System**
Please paste the results of `npx sb@next info` here.
**Additional context**
Add any other context about the problem here.

40
.github/ISSUE_TEMPLATE/bug_report.yml vendored Normal file
View File

@ -0,0 +1,40 @@
name: Bug report 🐞
description: >-
Something is broken and you have a reliable reproduction? Let us know here.
For questions, please use "Question" below.
title: '[Bug]: '
labels:
- needs triage
- bug
body:
- type: textarea
id: description
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is
validations:
required: true
- type: textarea
id: reproduce
attributes:
label: To Reproduce
description: >-
Please create a reproduction by running `npx sb@next repro` and
following the instructions. Read our
[documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce)
to learn more about creating reproductions.
placeholder: >-
Paste your repository and deployed reproduction here. We prioritize
issues with reproductions over those without.
render: shell
- type: textarea
id: system
attributes:
label: System
description: Please paste the results of `npx sb@next info` here.
render: shell
- type: textarea
id: context
attributes:
label: Additional context
description: Add any other context about the problem here.

20
.github/ISSUE_TEMPLATE/feature_request.md vendored
View File

@ -1,20 +0,0 @@
---
name: Feature request 💡
about: Suggest an idea for this project
labels: needs triage, feature request
---
**Is your feature request related to a problem? Please describe**
A clear and concise description of the problem. E.g. I'm always frustrated when [...]
**Describe the solution you'd like**
What would you like to see added to Storybook to solve problem?
**Describe alternatives you've considered**
Any alternative solutions or features you've considered.
**Are you able to assist to bring the feature to reality?**
no | yes, I can...
**Additional context**
Add any other context or screenshots about the feature request here.

40
.github/ISSUE_TEMPLATE/feature_request.yml vendored Normal file
View File

@ -0,0 +1,40 @@
name: Feature request 💡
description: Suggest an idea for this project
title: '[Feature Request]:'
labels:
- needs triage
- feature request
body:
- type: textarea
id: problem
attributes:
label: Is your feature request related to a problem? Please describe
description: >-
A clear and concise description of the problem. E.g. I'm always
frustrated when [...]
- type: textarea
id: describe
attributes:
label: Describe the solution you'd like
description: What would you like to see added to Storybook to solve problem?
validations:
required: true
- type: textarea
id: alternatives
attributes:
label: Describe alternatives you've considered
description: Any alternative solutions or features you've considered.
- type: dropdown
id: help
attributes:
label: Are you able to assist to bring the feature to reality?
options:
- 'no'
- yes, I can
validations:
required: true
- type: textarea
id: context
attributes:
label: Additional context
description: Add any other context or screenshots about the feature request here.

25
.github/autolabeler.yml vendored
View File

@ -1,25 +0,0 @@
'addon: a11y': ['addons/a11y/**']
'addon: actions': ['addons/actions/**']
'addon: backgrounds': ['addons/backgrounds/**']
'addon: events ': ['addons/events/**']
'addon: graphql ': ['addons/graphql/**']
'addon: info': ['addons/info/**']
'addon: jest': ['addons/jest/**']
'addon: knobs': ['addons/knobs/**']
'addon: links': ['addons/links/**']
'addon: notes': ['addons/notes/**']
'addon: options': ['addons/options/**']
'addon: storyshots': ['addons/storyshots/**']
'addon: viewport': ['addons/viewport/**']
'app: angular': ['app/angular/**']
'app: preact': ['app/preact/**']
'app: rax': ['app/rax/**']
'app: react': ['app/react/**']
'app: vue': ['app/vue/**']
'app: svelte': ['app/svelte/**']
'app: mithril': ['app/mithril/**']
'babel / webpack': ['webpack', 'babel']
'cli': ['lib/cli/**']
'compatibility with other tools': []
'documentation': ['docs', '*.md']
'ui': ['lib/ui']

2
.github/workflows/cron-weekly.yml vendored
View File

@ -8,7 +8,7 @@ jobs:
check-links:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: gaurav-nelson/github-action-markdown-link-check@v1
# checks all markdown files from important folders including all subfolders
with:

6
.github/workflows/danger-js.yml vendored
View File

@ -8,10 +8,10 @@ jobs:
name: Danger JS
runs-on: ubuntu-latest
steps:
- uses: actions/setup-node@v2
- uses: actions/setup-node@v3
with:
node-version: '14'
- uses: actions/checkout@master
node-version: '16'
- uses: actions/checkout@v3
- name: Danger JS
uses: danger/danger-js@10.9.0
env:

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

@ -8,8 +8,6 @@ on:
push:
branches:
- vite-frameworks-xyz
- norbert/sb-524-webpack5react18ts
- norbert/sb-525-webpack5react17js
jobs:
generate:
@ -17,19 +15,18 @@ jobs:
env:
YARN_ENABLE_IMMUTABLE_INSTALLS: false
steps:
- uses: actions/setup-node@v2
- uses: actions/setup-node@v3
with:
node-version: 14
- uses: actions/checkout@v2
node-version: 16
- uses: actions/checkout@v3
- name: Setup git user
run: |
git config --global user.name "Storybook Bot"
git config --global user.email "bot@storybook.js.org"
- name: Install dependencies
run: node ./scripts/check-dependencies.js
- name: Bootstrap Storybook libraries
run: yarn bootstrap --prep
working-directory: ./code
- name: Compile Storybook libraries
run: yarn task --task publish --start-from=auto --no-link
- name: Generate repros
run: yarn generate-repros-next --local-registry
working-directory: ./code

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

@ -15,10 +15,10 @@ jobs:
env:
YARN_ENABLE_IMMUTABLE_INSTALLS: false
steps:
- uses: actions/setup-node@v2
- uses: actions/setup-node@v3
with:
node-version: 14
- uses: actions/checkout@v2
node-version: 16
- uses: actions/checkout@v3
- name: Setup git user
run: |
git config --global user.name "Storybook Bot"

6
.github/workflows/handle-release-branches.yml vendored
View File

@ -23,7 +23,7 @@ jobs:
if: ${{ needs.branch-checks.outputs.is-latest-branch == 'true' }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- run: curl -X POST "https://api.netlify.com/build_hooks/${{ secrets.FRONTPAGE_HOOK }}"
@ -32,7 +32,7 @@ jobs:
if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' || needs.branch-checks.outputs.is-release-branch == 'true' }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
with:
ref: next
path: next
@ -54,7 +54,7 @@ jobs:
if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
with:
fetch-depth: 0

17
.github/workflows/tests-unit.yml vendored
View File

@ -15,7 +15,7 @@ jobs:
fail-fast: false
matrix:
os: [ubuntu-latest]
node_version: [14, 16]
node_version: [16]
include:
- os: macos-latest
node_version: 16
@ -23,18 +23,13 @@ jobs:
node_version: 16
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Set node version to ${{ matrix.node_version }}
uses: actions/setup-node@v2
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node_version }}
cache: yarn
- name: install, bootstrap
run: |
cd code
yarn install --immutable
yarn bootstrap --core
- name: install and compile
run: yarn task --task compile --start-from=auto
- name: test
run: |
cd code
yarn test --runInBand --ci
run: yarn test --runInBand --ci

6
.gitignore vendored
View File

@ -18,4 +18,8 @@ junit.xml
!/**/.yarn/sdks
!/**/.yarn/versions
/**/.pnp.*
/yarn.lock
!/node_modules
# test-storybooks
test-storybooks/ember-cli/ember-output
test-storybooks/angular-cli/addon-jest.testresults.json

51
.vscode/launch.json vendored
View File

@ -3,36 +3,23 @@
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "official-storybook",
"runtimeExecutable": "npm",
"cwd": "${workspaceFolder}/code/examples/official-storybook",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}, {
"type": "node",
"request": "launch",
"name": "cli html",
"cwd": "${workspaceFolder}/code/lib/cli/stories",
"runtimeArgs": [
"--inspect-brk",
"${workspaceFolder}/code/lib/cli/bin/index.js",
"init",
"--type",
"html"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}
"configurations": [
{
"type": "node",
"request": "launch",
"name": "cli html",
"cwd": "${workspaceFolder}/code/lib/cli/stories",
"runtimeArgs": [
"--inspect-brk",
"${workspaceFolder}/code/lib/cli/bin/index.js",
"init",
"--type",
"html"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}
]
}
}

3
.vscode/settings.json vendored
View File

@ -1,3 +1,4 @@
{
"deepscan.enable": true
"deepscan.enable": true,
"typescript.tsdk": "./code/node_modules/typescript/lib"
}

0
code/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs → .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs generated vendored
View File

0
code/.yarn/plugins/@yarnpkg/plugin-typescript.cjs → .yarn/plugins/@yarnpkg/plugin-typescript.cjs generated vendored
View File

801
.yarn/releases/yarn-3.2.4.cjs generated vendored Executable file
View File

File diff suppressed because one or more lines are too long

5
.yarnrc.yml Normal file
View File

@ -0,0 +1,5 @@
installStatePath: ./.yarn/root-install-state.gz
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-3.2.4.cjs

313
CHANGELOG.md
View File

@ -1,3 +1,316 @@
## 7.0.0-alpha.47 (November 1, 2022)
#### Features
- CSF-tools: Turn story comments into docs descriptions [#19684](https://github.com/storybooks/storybook/pull/19684)
- CLI: Migrate CLI templates to CSF3 [#19665](https://github.com/storybooks/storybook/pull/19665)
- Vite: Set default `base` for subfolder deployments [#19383](https://github.com/storybooks/storybook/pull/19383)
#### Bug Fixes
- Disable keyboard shortcuts during (docs) play functions and add tests [#19668](https://github.com/storybooks/storybook/pull/19668)
#### Maintenance
- Addon-docs: Replace source-loader with csf-plugin [#19680](https://github.com/storybooks/storybook/pull/19680)
- CLI: Move all templates out of cli into renderers [#19664](https://github.com/storybooks/storybook/pull/19664)
- Addon-docs: Remove mdx-compiler-plugin [#19681](https://github.com/storybooks/storybook/pull/19681)
## 7.0.0-alpha.46 (October 28, 2022)
#### Features
- Addon-docs: Don't show docspage unless the user opts in [#19627](https://github.com/storybooks/storybook/pull/19627)
- Core: Allow setting tags in storiesOf via parameters. [#19642](https://github.com/storybooks/storybook/pull/19642)
#### Bug Fixes
- Addon-docs: Fix React Profiler in source snippets [#19004](https://github.com/storybooks/storybook/pull/19004)
#### Maintenance
- Telemetry: Measure version update check [#19660](https://github.com/storybooks/storybook/pull/19660)
- Build: Bundle lib/preview-web with ts-up [#19655](https://github.com/storybooks/storybook/pull/19655)
- CSF-tools: Make ESM node compatible [#19661](https://github.com/storybooks/storybook/pull/19661)
- Telemetry: Measure docs usage [#19648](https://github.com/storybooks/storybook/pull/19648)
- Go back to `csf@next` [#19657](https://github.com/storybooks/storybook/pull/19657)
#### Build
- Build: Reduce parallelism in check task [#19662](https://github.com/storybooks/storybook/pull/19662)
## 7.0.0-alpha.45 (October 28, 2022)
#### Bug Fixes
- Svelte: Fix regression causing all stories to error [#19653](https://github.com/storybooks/storybook/pull/19653)
- CSF: Fix `StoryObj<typeof Cmp>` to work the same as old ComponentStoryObj [#19651](https://github.com/storybooks/storybook/pull/19651)
#### Maintenance
- Core: Misc dead code removal [#19654](https://github.com/storybooks/storybook/pull/19654)
- Addon-actions: Move decorator to its own entrypoint [#19650](https://github.com/storybooks/storybook/pull/19650)
#### Build
- Build: Reduce resource classes [#19652](https://github.com/storybooks/storybook/pull/19652)
## 7.0.0-alpha.44 (October 27, 2022)
#### Features
- Add tags to story and index [#19625](https://github.com/storybooks/storybook/pull/19625)
- CSF tools: Add tags support [#19626](https://github.com/storybooks/storybook/pull/19626)
- Vue2: Improve CSF3 types [#19603](https://github.com/storybooks/storybook/pull/19603)
- Vue3: Improve CSF3 types [#19602](https://github.com/storybooks/storybook/pull/19602)
#### Bug Fixes
- Core: Fix v6 store when no explicit renderer [#19624](https://github.com/storybooks/storybook/pull/19624)
- CLI/React native: Fix addons template to import register instead of manager [#19620](https://github.com/storybooks/storybook/pull/19620)
#### Maintenance
- Build-storybook: Only copy .mjs files for manager build [#19647](https://github.com/storybooks/storybook/pull/19647)
- Rename storybook/ui to storybook/manager [#19635](https://github.com/storybooks/storybook/pull/19635)
- Addons: Support SSR by not using global.window to store hooks context [#19631](https://github.com/storybooks/storybook/pull/19631)
- Breaking: Final few deprecations removal in a batch [#19553](https://github.com/storybooks/storybook/pull/19553)
- TypeScript: Misc types improvements [#19633](https://github.com/storybooks/storybook/pull/19633)
- TypeScript: Restructure storybook types [#19580](https://github.com/storybooks/storybook/pull/19580)
- TypeScript: cleanup types [#19621](https://github.com/storybooks/storybook/pull/19621)
#### Build
- Build: Reduce CI usage by 60% [#19644](https://github.com/storybooks/storybook/pull/19644)
- Remove `netlify.toml` [#19645](https://github.com/storybooks/storybook/pull/19645)
- Small fixes for `check` task [#19643](https://github.com/storybooks/storybook/pull/19643)
- Storybook for `@storybook/blocks` only [#19630](https://github.com/storybooks/storybook/pull/19630)
- Fix broken stories in UI Storybook [#19632](https://github.com/storybooks/storybook/pull/19632)
- Ugrade eslint [#19601](https://github.com/storybooks/storybook/pull/19601)
- Integrate standalone Storybook with Chromatic [#19619](https://github.com/storybooks/storybook/pull/19619)
## 7.0.0-alpha.43 (October 25, 2022)
#### Bug Fixes
- Core: Add `renderer` field to frameworks, and use to drive v6 store entrypoints [#19595](https://github.com/storybooks/storybook/pull/19595)
- Core: Add new SET_INDEX event [#19590](https://github.com/storybooks/storybook/pull/19590)
- CLI: Don't run MDX2 automigration on node_modules [#19611](https://github.com/storybooks/storybook/pull/19611)
- Core: Ensure preview annotations are resolved relative to the cwd [#19594](https://github.com/storybooks/storybook/pull/19594)
- Core: Fix addon URLs on Windows [#19589](https://github.com/storybooks/storybook/pull/19589)
#### Maintenance
- Vite: Tidy up mdx-plugin [#19563](https://github.com/storybooks/storybook/pull/19563)
- Web-components/Vite: remove unused dependencies [#19583](https://github.com/storybooks/storybook/pull/19583)
#### Build
- Remove DocBlocks example Storybook [#19616](https://github.com/storybooks/storybook/pull/19616)
- Move and include `@storybook/blocks` in standalone Storybook [#19615](https://github.com/storybooks/storybook/pull/19615)
- Move and include `@storybook/components` in standalone Storybook [#19598](https://github.com/storybooks/storybook/pull/19598)
- Move examples -> test-storybooks [#19599](https://github.com/storybooks/storybook/pull/19599)
- MDX iframe stories [#19586](https://github.com/storybooks/storybook/pull/19586)
#### Dependency Upgrades
- Upgrade mdx2-csf to next [#19600](https://github.com/storybooks/storybook/pull/19600)
## 7.0.0-alpha.42 (October 24, 2022)
#### Features
- Svelte: Improve CSF3 types [#19512](https://github.com/storybooks/storybook/pull/19512)
#### Maintenance
- Telemetry: Use a wrapper around all CLI commands to send boot and error events [#19566](https://github.com/storybooks/storybook/pull/19566)
#### Build
- Add ability to run tasks from code dir [#19588](https://github.com/storybooks/storybook/pull/19588)
- Make the reporter dynamic [#19587](https://github.com/storybooks/storybook/pull/19587)
- Add vite-react benchmark [#19558](https://github.com/storybooks/storybook/pull/19558)
#### Dependency Upgrades
- Fix test-runner version conflicts [#19581](https://github.com/storybooks/storybook/pull/19581)
## 7.0.0-alpha.41 (October 21, 2022)
#### Features
- Add `@storybook/nextjs` framework [#19382](https://github.com/storybooks/storybook/pull/19382)
- CLI: Enable `@storybook/nextjs` framework [#19478](https://github.com/storybooks/storybook/pull/19478)
- CLI: Automigrate from MDX1 to MDX2 [#19568](https://github.com/storybooks/storybook/pull/19568)
#### Maintenance
- Remove warning of removed feature in lib/client-api [#19544](https://github.com/storybooks/storybook/pull/19544)
- Remove vite-plugin-svelte-kit when detected [#19522](https://github.com/storybooks/storybook/pull/19522)
#### Build
- Delete Svelte example [#19549](https://github.com/storybooks/storybook/pull/19549)
- Fix circle test results [#19552](https://github.com/storybooks/storybook/pull/19552)
#### Dependency Upgrades
- Update the version of the "update-notifier" package [#19569](https://github.com/storybooks/storybook/pull/19569)
## 7.0.0-alpha.40 (October 20, 2022)
#### Breaking Changes
- Addon-docs: Upgrade to MDXv2 [#19495](https://github.com/storybooks/storybook/pull/19495)
#### Bug Fixes
- Addon-docs: Don't generate docs page entries for CSF files with no stories [#19529](https://github.com/storybooks/storybook/pull/19529)
#### Maintenance
- Remove deprecate features from preview-web [#19540](https://github.com/storybooks/storybook/pull/19540)
- Remove deprecated features in lib/api [#19539](https://github.com/storybooks/storybook/pull/19539)
- Remove default selection in docblocks [#19537](https://github.com/storybooks/storybook/pull/19537)
#### Build
- Remove .git folder when generating repros [#19535](https://github.com/storybooks/storybook/pull/19535)
- Some task runner tweaks + move test-runner into sandbox task. [#19505](https://github.com/storybooks/storybook/pull/19505)
- Build builder-webpack5 with ts-up [#19435](https://github.com/storybooks/storybook/pull/19435)
## 7.0.0-alpha.39 (October 19, 2022)
#### Breaking Changes
- Addons: Remove deprecations [#19524](https://github.com/storybooks/storybook/pull/19524)
#### Features
- Core: Throw an error if renderer is used as framework [#19452](https://github.com/storybooks/storybook/pull/19452)
- CLI: Add pnpm support [#19425](https://github.com/storybooks/storybook/pull/19425)
- CLI: support .json in eslint-plugin migration [#19511](https://github.com/storybooks/storybook/pull/19511)
#### Bug Fixes
- Vite/React: Align with webpack react docgen [#19399](https://github.com/storybooks/storybook/pull/19399)
- Core: Direct logs to stdout [#19434](https://github.com/storybooks/storybook/pull/19434)
- Telemetry: Send start/build events even when there is no generator [#19507](https://github.com/storybooks/storybook/pull/19507)
- Core: Fix inconsistent telemetry debug [#19509](https://github.com/storybooks/storybook/pull/19509)
#### Maintenance
- Addon-docs: Define children for DocsContainer [#19437](https://github.com/storybooks/storybook/pull/19437)
- Convert issue templates to forms [#19370](https://github.com/storybooks/storybook/pull/19370)
- Change once.warn to deprecate when that is the actual intent [#19521](https://github.com/storybooks/storybook/pull/19521)
- Cleanup framework angular dependencies [#19389](https://github.com/storybooks/storybook/pull/19389)
- Frameworks: Don't re-export renderer types from frameworks [#19510](https://github.com/storybooks/storybook/pull/19510)
- Core: Remove storyStore.getSelection [#19491](https://github.com/storybooks/storybook/pull/19491)
- CLI: rename "latest" to "v13" app name in angular v13 repro template [#19498](https://github.com/storybooks/storybook/pull/19498)
#### Build
- Improve misc build parts [#19520](https://github.com/storybooks/storybook/pull/19520)
- Build: Bundle addons/storysource with ts-up [#19482](https://github.com/storybooks/storybook/pull/19482)
- Build: Bundle lib/docs-tools & lib/instrumenter with ts-up [#19206](https://github.com/storybooks/storybook/pull/19206)
- Actions: update actions/setup-node to v3 [#19444](https://github.com/storybooks/storybook/pull/19444)
- Actions: update actions/checkout to v3 [#19441](https://github.com/storybooks/storybook/pull/19441)
- Build: Bundle lib/codemod with ts-up [#19398](https://github.com/storybooks/storybook/pull/19398)
- Build: Bundle addons/highlight with ts-up [#19483](https://github.com/storybooks/storybook/pull/19483)
- Enable preact templates and remove `preact-kitchen-sink` [#19454](https://github.com/storybooks/storybook/pull/19454)
#### Dependency Upgrades
- Addon-docs: Make babel-loader an optional peer dependency [#19385](https://github.com/storybooks/storybook/pull/19385)
- Add missing addons/docs dependency for fs-extra [#19493](https://github.com/storybooks/storybook/pull/19493)
## 7.0.0-alpha.38 (October 15, 2022)
#### Bug Fixes
- Vite: Fix bail not being defined for vite builder [#19405](https://github.com/storybooks/storybook/pull/19405)
#### Maintenance
- Breaking: Remove onBeforeRender [#19489](https://github.com/storybooks/storybook/pull/19489)
- Breaking: Upgrade to use node 16 everywhere [#19458](https://github.com/storybooks/storybook/pull/19458)
- Breaking: Remove the old showRoots config option [#19440](https://github.com/storybooks/storybook/pull/19440)
- CLI: Make the button component accept a label prop, (not children) [#19461](https://github.com/storybooks/storybook/pull/19461)
- Remove `angular-cli` example [#19202](https://github.com/storybooks/storybook/pull/19202)
- Breakimg: Remove the html entrypoint of lib/components [#19487](https://github.com/storybooks/storybook/pull/19487)
- Vite: Add partial SvelteKit support [#19338](https://github.com/storybooks/storybook/pull/19338)
#### Build
- Angular: Add angular 14 sandbox template [#19181](https://github.com/storybooks/storybook/pull/19181)
- Storybook for Storybook - step 1: `ui/manager` [#19465](https://github.com/storybooks/storybook/pull/19465)
- Don't pass the full path to repro generators [#19480](https://github.com/storybooks/storybook/pull/19480)
- Bundle lib/channel-postmessage with ts-up [#19388](https://github.com/storybooks/storybook/pull/19388)
- Disable smoke test [#19475](https://github.com/storybooks/storybook/pull/19475)
- Remove angular example from monorepo [#19467](https://github.com/storybooks/storybook/pull/19467)
- Add angular 13 repro template [#19428](https://github.com/storybooks/storybook/pull/19428)
- Add a TypeScript check task and configure ci to run it [#19471](https://github.com/storybooks/storybook/pull/19471)
- Add Preact/Webpack templates and update renderer/preset (2) [#19451](https://github.com/storybooks/storybook/pull/19451)
- Disable another smoke test [#19466](https://github.com/storybooks/storybook/pull/19466)
#### Dependency Upgrades
- Ipgrade chromatic [#19468](https://github.com/storybooks/storybook/pull/19468)
## 7.0.0-alpha.37 (October 13, 2022)
#### Features
- React: Sound arg types for CSF3 [#19238](https://github.com/storybooks/storybook/pull/19238)
- Vite: Add web-components/lit framework support [#19164](https://github.com/storybooks/storybook/pull/19164)
- UI: Update colors for 7.0 [#19023](https://github.com/storybooks/storybook/pull/19023)
#### Bug Fixes
- Server: Ensure consistent route handling by always starting `managerBuilder` before `previewBuilder` [#19406](https://github.com/storybooks/storybook/pull/19406)
- UI: Fix addon URL escaping in manager [#19375](https://github.com/storybooks/storybook/pull/19375)
- CLI: remove `npx` usage from storybook scripts [#19366](https://github.com/storybooks/storybook/pull/19366)
- Webpack5: Fix lazy compilation/fscache builderOptions when base config is disabled [#19387](https://github.com/storybooks/storybook/pull/19387)
#### Maintenance
- Breaking: remove the deprecated Preview component [#19445](https://github.com/storybooks/storybook/pull/19445)
- Breaking: remove deprecated channel apis [#19443](https://github.com/storybooks/storybook/pull/19443)
- Breaking: remove framework angulars storymodule story-component handling [#19442](https://github.com/storybooks/storybook/pull/19442)
- Breaking: remove deprecated glob fixing [#19438](https://github.com/storybooks/storybook/pull/19438)
- Refactor bootstrap+sandbox into "task" framework [#19275](https://github.com/storybooks/storybook/pull/19275)
- CI: Fix test-runner build step [#19255](https://github.com/storybooks/storybook/pull/19255)
- Angular: Drop support for angular < 13 [#19368](https://github.com/storybooks/storybook/pull/19368)
- Build: Add installScripts step in bootstrap command [#19270](https://github.com/storybooks/storybook/pull/19270)
- Vite: Move default cache dir to node_modules/.cache [#19384](https://github.com/storybooks/storybook/pull/19384)
#### Build
- Addon-docs: Refactor MDX examples to sandboxes [#19301](https://github.com/storybooks/storybook/pull/19301)
- Undo accidental push of tom/sb-557-typescript-2 [#19450](https://github.com/storybooks/storybook/pull/19450)
- Ensure we kill all controllers before exiting [#19449](https://github.com/storybooks/storybook/pull/19449)
- Examples: Remove official-storybook [#19343](https://github.com/storybooks/storybook/pull/19343)
- Build: Improve template stories [#19402](https://github.com/storybooks/storybook/pull/19402)
- Vue: Delete vue-cli/vue-kitchen-sink examples [#19429](https://github.com/storybooks/storybook/pull/19429)
- React: Remove react-ts example [#19424](https://github.com/storybooks/storybook/pull/19424)
- Web-components: Port template stories and delete web-components-kitchen-sink [#19430](https://github.com/storybooks/storybook/pull/19430)
- remove html-kitchen-sink example [#19360](https://github.com/storybooks/storybook/pull/19360)
- add template for html-webpack5 [#19377](https://github.com/storybooks/storybook/pull/19377)
- use a single version of yarn [#19417](https://github.com/storybooks/storybook/pull/19417)
- fix build command for netlify [#19418](https://github.com/storybooks/storybook/pull/19418)
- Re-enable `svelte-vite/default-ts` template [#19369](https://github.com/storybooks/storybook/pull/19369)
- Only persist the (single) built sandbox [#19372](https://github.com/storybooks/storybook/pull/19372)
#### Dependency Upgrades
- Replace @storybook/semver with semver [#19292](https://github.com/storybooks/storybook/pull/19292)
- Upgrade playwright [#19416](https://github.com/storybooks/storybook/pull/19416)
## 7.0.0-alpha.36 (October 13, 2022)
Bad publish
## 7.0.0-alpha.35 (October 5, 2022)
#### Features

136
CODE_OF_CONDUCT.md
View File

@ -1,54 +1,134 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, caste, color, religion, or sexual
identity and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
Examples of behavior that contributes to a positive environment for our
community include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the overall
community
Examples of unacceptable behavior by participants include:
Examples of unacceptable behavior include:
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
* The use of sexualized language or imagery, and sexual attention or advances of
any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email address,
without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
## Enforcement Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members:
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members for enforcement:
Norbert de Langen ~ @ndelangen - `ndelangen@me.com`
Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com`
Tom Coleman ~ @tmeasday - `tom@thesnail.org`
Michael Shilman ~ @shilman - `michael@lab80.co`
Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru`
- Norbert de Langen ~ @ndelangen - `ndelangen@me.com`
- Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com`
- Tom Coleman ~ @tmeasday - `tom@thesnail.org`
- Michael Shilman ~ @shilman - `michael@lab80.co`
- Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru`
The steering committee will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
The steering committee will review and investigate all complaints and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Enforcement Guidelines
Project maintainers or community leaders who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series of
actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or permanent
ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within the
community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.1, available at
[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
For answers to common questions about this code of conduct, see the FAQ at
[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
[https://www.contributor-covenant.org/translations][translations].
[homepage]: https://www.contributor-covenant.org
[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
[Mozilla CoC]: https://github.com/mozilla/diversity
[FAQ]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations

33
CONTRIBUTING.md
View File

@ -2,17 +2,34 @@
- Ensure you have node version 14 installed (suggestion: v14.18.1).
- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
- Run `./bootstrap.sh` to install the dependencies, and get the repo ready to be developed on.
- Run `yarn start` inside of the `code` directory to start the development server.
- Run `yarn start` directory to run a basic test Storybook "sandbox".
# Generating reproductions
The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc).
The monorepo has a script that generates Storybook reproductions based on configurations set in the `code/lib/cli/src/repro-templates.ts` file. This makes it possible to quickly bootstrap examples with and without Storybook, for given configurations (e.g. CRA, Angular, Vue, etc.)
To do so:
- Check the `code/lib/cli/src/repro-templates.ts` if you want to see what will be generated
- Run `./generate-repros.sh`
- Check the result in the `repros` directory
# Running against different sandbox templates
You can also pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run.
# Making code changes
If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:
1. In a second terminal run `yarn build --watch <package-1> <package-2>` in the `code/` directory. The package names is the bit after the `@storybook/` in the published package. For instance, to build the `@storybook/react @storybook/core-server @storybook/api @storybook/addon-docs` packages at the same time in watch mode:
```bash
cd code
yarn build --watch react core-server api addon-docs
```
2. If you are running the sandbox in "linked" mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages)
3. If you are running the sandbox in "unlinked" mode you'll need to re-run the sandbox from the `publish` step to see the changes:
```
yarn task --task dev --template <your template> --start-from=publish
```
# Contributing to Storybook

237
MIGRATION.md
View File

@ -2,8 +2,9 @@
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [Alpha release notes](#alpha-release-notes)
- [Breaking changes](#breaking-changes)
- [`Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`](#story-type-change-to-storyfn-and-the-new-story-type-now-refers-to-storyobj)
- [7.0 breaking changes](#70-breaking-changes)
- [removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
- [register.js removed](#registerjs-removed)
- [Change of root html IDs](#change-of-root-html-ids)
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
- [Modern browser support](#modern-browser-support)
@ -18,23 +19,33 @@
- [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default)
- [Babel mode v7 by default](#babel-mode-v7-by-default)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [Icons API changed](#icons-api-changed)
- ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
- [Dropped support for Angular 12 and below](#dropped-support-for-angular-12-and-below)
- [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
- [Addon-docs: Removed deprecated blocks.js entry](#addon-docs-removed-deprecated-blocksjs-entry)
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
- [Docs Changes](#docs-changes)
- [Standalone docs files](#standalone-docs-files)
- [Referencing stories in docs files](#referencing-stories-in-docs-files)
- [Docs Page](#docs-page)
- [Configuring the Docs Container](#configuring-the-docs-container)
- [External Docs](#external-docs)
- [MDX2 upgrade](#mdx2-upgrade)
- [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
- [7.0 Deprecations](#70-deprecations)
- [`Story` type deprecated](#story-type-deprecated)
- [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
- [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)
@ -43,6 +54,8 @@
- [Auto-title filename case](#auto-title-filename-case)
- [Auto-title redundant filename](#auto-title-redundant-filename)
- [Auto-title always prefixes](#auto-title-always-prefixes)
- [6.5 Deprecations](#65-deprecations)
- [Deprecated register.js](#deprecated-registerjs)
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
- [Automigrate](#automigrate)
- [CRA5 upgrade](#cra5-upgrade)
@ -239,47 +252,41 @@ Storybook 7.0 is in early alpha. During the alpha, we are making a large number
In the meantime, these migration notes are the best available documentation on things you should know upgrading to 7.0.
### Breaking changes
### 7.0 breaking changes
#### `Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`
#### removed auto injection of @storybook/addon-actions decorator
In 6.x you were able to do this:
The `withActions` decorator is no longer automatically added to stories. This is because it is really only used in the html renderer, for all other renderers it's redundant.
If you are using the html renderer and use the `handles` parameter, you'll need to manually add the `withActions` decorator:
```js
import type { Story } from '@storybook/react';
export const MyStory: Story = () => <div />;
```
But this will produce an error in 7.0 because `Story` is now a type that refers to the `StoryObj` type.
You must now use the new `StoryFn` type:
```js
import type { StoryFn } from '@storybook/react';
export const MyStory: StoryFn = () => <div />;
```
This change was done to improve the experience of writing CSF3 stories, which is the recommended way of writing stories in 7.0:
```js
import type { Story } from '@storybook/react';
import { Button, ButtonProps } from './Button';
```diff
import globalThis from 'global';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
component: Button,
component: globalThis.Components.Button,
args: {
label: 'Click Me!',
},
parameters: {
chromatic: { disable: true },
},
};
export const Primary: Story<ButtonProps> = {
variant: 'primary',
export const Basic = {
parameters: {
handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
},
+ decorators: [withActions],
};
```
If you want to be explicit, you can also import `StoryObj` instead of `Story`, they are the same type.
#### register.js removed
For Storybook for react users: We also changed `ComponentStory` to refer to `ComponentStoryObj` instead of `ComponentStoryFn`, so if you were using `ComponentStory` you should now import/use `ComponentStoryFn` instead.
In SB 6.x and earlier, addons exported a `register.js` entry point by convention, and users would import this in `.storybook/manager.js`. This was [deprecated in SB 6.5](#deprecated-registerjs)
You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
In 7.0, most of Storybook's addons now export a `manager.js` entry point, which is automatically registered in Storybook's manager when the addon is listed in `.storybook/main.js`'s `addons` field.
If your `.manager.js` config references `register.js` of any of the following addons, you can remove it: `a11y`, `actions`, `backgrounds`, `controls`, `interactions`, `jest`, `links`, `measure`, `outline`, `toolbars`, `viewport`.
#### Change of root html IDs
@ -353,7 +360,7 @@ Each addon is imported into the manager as an ESM module that's bundled separate
SB6.x framework packages shipped binaries called `start-storybook` and `build-storybook`.
In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `sb dev` and `sb build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues.
In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `storybook dev` and `storybook build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues.
A typical storybook project includes two scripts in your projects `package.json`:
@ -375,7 +382,7 @@ To convert this project to 7.0:
"build-storybook": "storybook build <some flags>"
},
"devDependencies": {
"storybook": "future"
"storybook": "next"
}
}
```
@ -413,7 +420,7 @@ If you are running into errors, you can upgrade your project to Webpack5 or you
To upgrade:
- If you're configuring webpack directly, see the Webpack5 [release announcement](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) and [migration guide](https://webpack.js.org/migrate/5).
- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to ugprade from V4 (Webpack4) to 5
- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to upgrade from V4 (Webpack4) to 5
During the 7.0 dev cycle we will be updating this section with useful resources as we run across them.
@ -439,9 +446,11 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
- `@storybook/svelte-webpack5`
- `@storybook/svelte-vite`
- `@storybook/vue-webpack5`
- `@storybook/vue-vite`
- `@storybook/vue3-webpack5`
- `@storybook/vue3-vite`
- `@storybook/web-components-webpack5`
- `@storybook/web-components-vite`
We will be expanding this list over the course of the 7.0 development cycle. More info on the rationale here: [Frameworks RFC](https://www.notion.so/chromatic-ui/Frameworks-RFC-89f8aafe3f0941ceb4c24683859ed65c).
@ -453,7 +462,7 @@ In 7.0, the `main.js` fields `reactOptions` and `angularOptions` have been renam
module.exports = {
framework: {
name: '@storybook/react-webpack5',
options: { fastRefresh: true };
options: { fastRefresh: true },
}
}
```
@ -521,19 +530,27 @@ In 7.0 we've removed the following feature flags:
| `emotionAlias` | This flag is no longer needed and should be deleted. |
| `breakingChangesV7` | This flag is no longer needed and should be deleted. |
#### CLI option `--use-npm` deprecated
With increased support for more package managers (pnpm), we have introduced the `--package-manager` CLI option. Please use `--package-manager=npm` to force NPM to be used to install dependencies when running Storybook CLI commands. Other valid options are `pnpm`, `yarn1`, and `yarn2` (`yarn2` is for versions 2 and higher).
#### Vite builder uses vite config automatically
When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0.
Some settings will be overridden by storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
If you were using `viteFinal` in 6.5 to simply merge in your project's standard vite config, you can now remove it.
#### Vite cache moved to node_modules/.cache/.vite-storybook
Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
#### Removed docs.getContainer and getPage parameters
It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
#### Removed STORYBOOK_REACT_CLASSES global
This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`.
This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`.
#### Icons API changed
@ -558,16 +575,22 @@ Additionally, the internal field `'previewEntries'` has been removed. If you nee
#### Dropped support for Angular 12 and below
Official [Angular 12 LTS support ends Nov 2022](https://angular.io/guide/releases#actively-supported-versions). With that, Storybook also drops its support
for Angular 12 and below.
Official [Angular 12 LTS support ends Nov 2022](https://angular.io/guide/releases#actively-supported-versions). With that, Storybook also drops its support
for Angular 12 and below.
In order to use Storybook 7.0, you need to upgrade to at least Angular 13.
#### Vue2 DOM structure changed
#### Addon-backgrounds: Removed deprecated grid parameter
In 6.x, `@storybook/vue` would replace the "root" element (formerly `#root`, now `#storybook-root`) with a new node that contains the rendered children. This was problematic because it broke the `play` function, which often starts with `within(canvasElement)` and the old `canvasElement` would get replaced out from under the play function.
Starting in 7.0 the `grid.cellSize` parameter should now be `backgrounds.grid.cellSize`. This was [deprecated in SB 6.1](#deprecated-grid-parameter).
In 7.0, `@storybook/vue` now leaves `#storybook-root` alone, and creates a new "dummy node" called `#storybook-vue-root` beneath it. This will break DOM snapshots moving from 6.5 to 7.0, but shouldn't have any other negative effects.
#### Addon-docs: Removed deprecated blocks.js entry
Removed `@storybook/addon-docs/blocks` entry. Import directly from `@storybook/addon-docs` instead. This was [deprecated in SB 6.3](#deprecated-scoped-blocks-imports).
#### Addon-a11y: Removed deprecated withA11y decorator
We removed the deprecated `withA11y` decorator. This was [deprecated in 6.0](#removed-witha11y-decorator)
### Docs Changes
@ -635,7 +658,7 @@ You can configure Docs Page in `main.js`:
module.exports = {
docs: {
docsPage: true, // set to false to disable docs page entirely
defaultTitle: 'Docs', // set to change the title of generated docs entries
defaultName: 'Docs', // set to change the name of generated docs entries
},
};
```
@ -705,6 +728,96 @@ export default function App({ Component, pageProps }) {
}
```
#### MDX2 upgrade
Storybook 7 Docs uses MDXv2 instead of MDXv1. This means an improved syntax, support for inline JS expression, and improved performance among [other benefits](https://mdxjs.com/blog/v2/).
If you use `.stories.mdx` files in your project, you may need to edit them since MDX2 contains [breaking changes](https://mdxjs.com/migrating/v2/#update-mdx-files).
We will update this section with specific pointers based on user feedback during the prerelease period and probably add an codemod to help streamline the upgrade before final 7.0 release.
As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing it with a more sophisticated version prior to release.
#### Dropped source loader / storiesOf static snippets
In SB 6.x, Storybook Docs used a webpack loader called `source-loader` to help display static code snippets. This was configurable using the `options.sourceLoaderOptions` field.
In SB 7.0, we've moved to a faster, simpler alternative called `csf-plugin` that **only supports CSF**. It is configurable using the `options.csfPluginOptions` field.
If you're using `storiesOf` and want to restore the previous behavior, you can add `source-loader` by hand to your webpack config using the following snippet in `main.js`:
```js
module.exports = {
webpackFinal: (config) => {
config.modules.rules.push({
test: /\.stories\.[tj]sx?$/,
use: [
{
loader: require.resolve('@storybook/source-loader'),
options: {} /* your sourceLoaderOptions here */
},
],
enforce: 'pre',
})
return config;
}
}
```
#### Dropped addon-docs manual configuration
Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.
### 7.0 Deprecations
#### `Story` type deprecated
In 6.x you were able to do this:
```ts
import type { Story } from '@storybook/react';
export const MyStory: Story = () => <div />;
```
But this will produce a deprecation warning in 7.0 because `Story` has been deprecated.
To fix the deprecation warning, use the `StoryFn` type:
```ts
import type { StoryFn } from '@storybook/react';
export const MyStory: StoryFn = () => <div />;
```
This change is part of our move to CSF3, which uses objects instead of functions to represent stories.
You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
#### `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated
The type of StoryObj and StoryFn have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter.
```ts
import type { Story } from '@storybook/react';
import { Button, ButtonProps } from './Button';
// This works in 7.0, making the ComponentX types redundant.
const meta: Meta<typeof Button> = { component: Button };
export const CSF3Story: StoryObj<typeof Button> = { args: { label: 'Label' } };
export const CSF2Story: StoryFn<typeof Button> = (args) => <Button {...args} />;
CSF2Story.args = { label: 'Label' };
// Passing props directly still works as well.
const meta: Meta<ButtonProps> = { component: Button };
export const CSF3Story: StoryObj<ButtonProps> = { args: { label: 'Label' } };
export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
CSF2Story.args = { label: 'Label' };
```
## From version 6.4.x to 6.5.0
### Vue 3 upgrade
@ -738,22 +851,6 @@ addons.setConfig({
});
```
### 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.
@ -774,7 +871,7 @@ SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet r
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
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/code/presets/react-webpack/src/framework-preset-react-docs.ts
### Opt-in MDX2 support
@ -871,6 +968,24 @@ In 6.5, the final titles would be:
<!-- markdown-link-check-disable -->
### 6.5 Deprecations
#### 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'] };
```
## From version 6.3.x to 6.4.0
### Automigrate

42
README.md
View File

@ -36,8 +36,9 @@
</a>
</p>
<p align="center">Storybook is a development environment for UI components.<br/>
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.<br/>Find out more at https://storybook.js.org.</p>
<p align="center">
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at https://storybook.js.org.
</p>
<center>
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/media/storybook-intro.gif" width="100%" />
@ -75,7 +76,7 @@ Documentation can be found on [Storybook's docs site](https://storybook.js.org/d
### Examples
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/showcase>
View [Component Encyclopedia](https://storybook.js.org/showcase) to see how leading teams use Storybook.
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.
@ -89,17 +90,18 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
| Renderer | Demo | |
|----------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) |
| [Vue](code/renderers/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue) |
| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) |
| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) |
| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) |
| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) |
| [Ember](code/frameworks/ember/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/) |
| [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) |
| [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) |
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) |
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) |
| ? | TODO, the link below will break | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) |
| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) |
| [Vue](code/renderers/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue) |
| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) |
| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) |
| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) |
| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) |
| [Ember](code/frameworks/ember/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/) |
| [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) |
| [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) |
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) |
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) |
### Sub Projects
@ -122,7 +124,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
| [jest](code/addons/jest/) | View the results of components' unit tests in Storybook |
| [links](code/addons/links/) | Create links between stories |
| [measure](code/addons/measure/) | Visually inspect the layout and box model within the Storybook UI |
| [outline](code/addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI |
| [outline](code/addons/outline/) | Visually debug the CSS layout and alignment within the Storybook UI |
| [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params |
| [storyshots](code/addons/storyshots/) | Snapshot testing for components in Storybook |
| [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI |
@ -163,7 +165,7 @@ If you're looking for material to use in your presentation about storybook, like
- Tweeting via [@storybookjs](https://twitter.com/storybookjs)
- Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs)
- Chatting on [Discord](https://discord.gg/storybook)
- Streaming saved on [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
- Videos and streams at [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
## Contributing
@ -182,9 +184,13 @@ Looking for a first issue to tackle?
Storybook is organized as a monorepo using [Lerna](https://lerna.js.org/). Useful scripts include:
#### `./bootstrap.sh`
#### `yarn start`
> Installs package dependencies and links packages together - using lerna
> Runs a sandbox template storybook with test stories
#### `yarn task`
> As above, but gives you options to customize the sandbox (e.g. selecting other frameworks)
#### `yarn lint`

3
bootstrap.sh
View File

@ -1,3 +0,0 @@
#!/usr/bin/env bash
./scripts/check-dependencies.js && cd ./code && yarn bootstrap $1

2
code/.eslintignore
View File

@ -6,13 +6,11 @@ node_modules
docs/public
storybook-static
built-storybooks
lib/cli/test
lib/codemod/src/transforms/__testfixtures__
scripts/storage
scripts/repros-generator
*.bundle.js
*.js.map
*.d.ts
examples/ember-cli/.storybook/preview-head.html
examples/official-storybook/tests/addon-jest.test.js
ember-output

55
code/.eslintrc.js
View File

@ -5,7 +5,24 @@ const scriptPath = path.join(__dirname, '..', 'scripts');
module.exports = {
root: true,
extends: [path.join(scriptPath, '.eslintrc.js')],
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
rules: {
'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
'react-hooks/rules-of-hooks': 'off',
'jest/no-done-callback': 'off',
},
overrides: [
{
// this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
files: ['**/frameworks/angular/template/**/*'],
rules: {
'@typescript-eslint/no-useless-constructor': 'off',
'@typescript-eslint/dot-notation': 'off',
},
},
{
// this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
files: ['**/addons/docs/**/*'],
@ -13,6 +30,27 @@ module.exports = {
'import/no-extraneous-dependencies': 'off',
},
},
{
files: [
'*.js',
'*.jsx',
'*.json',
'*.html',
'**/.storybook/*.ts',
'**/.storybook/*.tsx',
'setup-jest.ts',
],
parserOptions: {
project: null,
},
rules: {
// '@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/dot-notation': 'off',
'@typescript-eslint/no-implied-eval': 'off',
'@typescript-eslint/no-throw-literal': 'off',
'@typescript-eslint/return-await': 'off',
},
},
{
// this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
files: ['**/*.ts', '**/*.tsx'],
@ -26,13 +64,19 @@ module.exports = {
files: [
'**/lib/theming/**/*',
'**/lib/router/**/*',
'**/lib/ui/**/*',
'**/lib/components/**/*',
'**/ui/manager/**/*',
'**/ui/components/**/*',
],
rules: {
'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
},
},
{
files: ['**/ui/*', '**/ui/.storybook/*'],
rules: {
'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }],
},
},
{
files: [
'**/__tests__/**',
@ -106,5 +150,12 @@ module.exports = {
'no-undef': 'off', // ignore "window" undef errors
},
},
{
// Because those templates reference css files in other directory.
files: ['**/template/cli/**/*'],
rules: {
'import/no-unresolved': 'off',
},
},
],
};

2
code/.gitignore vendored
View File

@ -28,10 +28,8 @@ lib/**/dll
built-storybooks
cypress/videos
cypress/screenshots
examples/ember-cli/ember-output
.verdaccio-cache
tsconfig.tsbuildinfo
examples/angular-cli/addon-jest.testresults.json
junit.xml
.next

786
code/.yarn/releases/yarn-3.2.1.cjs generated vendored
View File

File diff suppressed because one or more lines are too long

783
code/.yarn/releases/yarn-3.2.3.cjs generated vendored Executable file
View File

File diff suppressed because one or more lines are too long

7
code/.yarnrc.yml
View File

@ -19,12 +19,13 @@ nodeLinker: node-modules
npmRegistryServer: 'https://registry.yarnpkg.com'
plugins:
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
- path: ../.yarn/plugins/@yarnpkg/plugin-typescript.cjs
spec: '@yarnpkg/plugin-typescript'
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
- path: ../.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: '@yarnpkg/plugin-interactive-tools'
unsafeHttpWhitelist:
- localhost
yarnPath: .yarn/releases/yarn-3.2.1.cjs
yarnPath: ../.yarn/releases/yarn-3.2.4.cjs
installStatePath: '../.yarn/code-install-state.gz'

2
code/__mocks__/fs-extra.js
View File

@ -5,7 +5,7 @@ const fs = jest.createMockFromModule('fs-extra');
// `fs` APIs are used.
let mockFiles = Object.create(null);
// eslint-disable-next-line no-underscore-dangle
// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
function __setMockFiles(newMockFiles) {
mockFiles = newMockFiles;
}

2
code/__mocks__/fs.js
View File

@ -5,7 +5,7 @@ const fs = jest.createMockFromModule('fs');
// `fs` APIs are used.
let mockFiles = Object.create(null);
// eslint-disable-next-line no-underscore-dangle
// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
function __setMockFiles(newMockFiles) {
mockFiles = newMockFiles;
}

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.47",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -62,21 +62,19 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addon-highlight": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/channels": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addon-highlight": "7.0.0-alpha.47",
"@storybook/addons": "7.0.0-alpha.47",
"@storybook/api": "7.0.0-alpha.47",
"@storybook/channels": "7.0.0-alpha.47",
"@storybook/client-logger": "7.0.0-alpha.47",
"@storybook/components": "7.0.0-alpha.47",
"@storybook/core-events": "7.0.0-alpha.47",
"@storybook/theming": "7.0.0-alpha.47",
"@storybook/types": "7.0.0-alpha.47",
"axe-core": "^4.2.0",
"global": "^4.4.0",
"lodash": "^4.17.21",
"react-sizeme": "^3.0.1",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2"
"react-sizeme": "^3.0.1"
},
"devDependencies": {
"@testing-library/react": "^11.2.2",
@ -104,7 +102,7 @@
"./src/preview.tsx"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "1c706a4a778831e012343c905f86225fa71491a7",
"storybook": {
"displayName": "Accessibility",
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

6
code/addons/a11y/register.js
View File

@ -1,6 +0,0 @@
import { once } from '@storybook/client-logger';
import './manager';
once.warn(
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
);

2
code/addons/a11y/src/a11yRunner.ts
View File

@ -1,7 +1,7 @@
import global from 'global';
import { addons } from '@storybook/addons';
import { EVENTS } from './constants';
import { A11yParameters } from './params';
import type { A11yParameters } from './params';
const { document, window: globalWindow } = global;

11
code/addons/a11y/src/components/A11YPanel.tsx
View File

@ -4,14 +4,16 @@ import { styled } from '@storybook/theming';
import { ActionBar, Icons, ScrollArea } from '@storybook/components';
import { AxeResults } from 'axe-core';
import type { AxeResults } from 'axe-core';
import { useChannel, useParameter, useStorybookState } from '@storybook/api';
import { Report } from './Report';
import { Tabs } from './Tabs';
import { useA11yContext } from './A11yContext';
import { EVENTS } from '../constants';
import { A11yParameters } from '../params';
import type { A11yParameters } from '../params';
export enum RuleType {
VIOLATION,
@ -106,7 +108,7 @@ export const A11YPanel: React.FC = () => {
'Rerun tests'
) : (
<>
<Icon inline icon="check" /> Tests completed
<Icon icon="check" /> Tests completed
</>
),
onClick: handleManual,
@ -162,8 +164,7 @@ export const A11YPanel: React.FC = () => {
)}
{status === 'running' && (
<Centered>
<RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
...
<RotatingIcon icon="sync" /> Please wait while the accessibility scan is running ...
</Centered>
)}
{(status === 'ready' || status === 'ran') && (

2
code/addons/a11y/src/components/A11yContext.test.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { AxeResults } from 'axe-core';
import type { AxeResults } from 'axe-core';
import { render, act } from '@testing-library/react';
import * as api from '@storybook/api';
import { STORY_CHANGED } from '@storybook/core-events';

2
code/addons/a11y/src/components/A11yContext.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { themes, convert } from '@storybook/theming';
import { Result } from 'axe-core';
import type { Result } from 'axe-core';
import { useChannel, useAddonState, useStorybookApi } from '@storybook/api';
import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
import { HIGHLIGHT } from '@storybook/addon-highlight';

8
code/addons/a11y/src/components/Report/Elements.tsx
View File

@ -1,10 +1,12 @@
import React, { FC } from 'react';
import type { FC } from 'react';
import React from 'react';
import { styled } from '@storybook/theming';
import { NodeResult } from 'axe-core';
import type { NodeResult } from 'axe-core';
import { Rules } from './Rules';
import { RuleType } from '../A11YPanel';
import type { RuleType } from '../A11YPanel';
import HighlightToggle from './HighlightToggle';
const Item = styled.li({

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

@ -1,6 +1,6 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { NodeResult } from 'axe-core';
import type { NodeResult } from 'axe-core';
import HighlightToggle from './HighlightToggle';
import { A11yContext } from '../A11yContext';

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

@ -1,7 +1,7 @@
import React from 'react';
import { styled } from '@storybook/theming';
import { NodeResult } from 'axe-core';
import type { NodeResult } from 'axe-core';
import { useA11yContext } from '../A11yContext';
interface ToggleProps {

5
code/addons/a11y/src/components/Report/Info.tsx
View File

@ -1,7 +1,8 @@
import React, { FC } from 'react';
import type { FC } from 'react';
import React from 'react';
import { styled } from '@storybook/theming';
import { Result } from 'axe-core';
import type { Result } from 'axe-core';
const Wrapper = styled.div({
padding: 12,

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

@ -3,11 +3,13 @@ import React, { Fragment, useState } from 'react';
import { styled } from '@storybook/theming';
import { Icons } from '@storybook/components';
import { Result } from 'axe-core';
import type { Result } from 'axe-core';
import { Info } from './Info';
import { Elements } from './Elements';
import { Tags } from './Tags';
import { RuleType } from '../A11YPanel';
import type { RuleType } from '../A11YPanel';
import HighlightToggle from './HighlightToggle';
const Wrapper = styled.div(({ theme }) => ({

5
code/addons/a11y/src/components/Report/Rules.tsx
View File

@ -1,7 +1,8 @@
import React, { FC } from 'react';
import type { FC } from 'react';
import React from 'react';
import { styled } from '@storybook/theming';
import { Badge } from '@storybook/components';
import { CheckResult } from 'axe-core';
import type { CheckResult } from 'axe-core';
import { SizeMe } from 'react-sizeme';
const List = styled.div({

5
code/addons/a11y/src/components/Report/Tags.tsx
View File

@ -1,7 +1,8 @@
import React, { FC } from 'react';
import type { FC } from 'react';
import React from 'react';
import { styled } from '@storybook/theming';
import { TagValue } from 'axe-core';
import type { TagValue } from 'axe-core';
const Wrapper = styled.div({
display: 'flex',

9
code/addons/a11y/src/components/Report/index.tsx
View File

@ -1,8 +1,11 @@
import React, { Fragment, FC } from 'react';
import type { FC } from 'react';
import React, { Fragment } from 'react';
import { Placeholder } from '@storybook/components';
import { Result } from 'axe-core';
import type { Result } from 'axe-core';
import { Item } from './Item';
import { RuleType } from '../A11YPanel';
import type { RuleType } from '../A11YPanel';
export interface ReportProps {
items: Result[];

5
code/addons/a11y/src/components/Tabs.tsx
View File

@ -1,10 +1,11 @@
import * as React from 'react';
import { styled } from '@storybook/theming';
import { NodeResult, Result } from 'axe-core';
import type { NodeResult, Result } from 'axe-core';
import { SizeMe } from 'react-sizeme';
import HighlightToggle from './Report/HighlightToggle';
import { RuleType } from './A11YPanel';
import type { RuleType } from './A11YPanel';
import { useA11yContext } from './A11yContext';
// TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality

6
code/addons/a11y/src/components/VisionSimulator.test.tsx
View File

@ -4,11 +4,13 @@ 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) =>
const getOptionByNameAndPercentage = (option: string, percentage?: number) =>
screen.getByText(
(content, element) =>
content !== '' &&
// @ts-expect-error (TODO)
element.textContent === option &&
// @ts-expect-error (TODO)
(percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
);
@ -60,9 +62,11 @@ describe('Vision Simulator', () => {
.filter(({ cssRules }) => cssRules)
.map(({ cssRules }) => Object.values(cssRules))
.flat()
// @ts-expect-error (TODO)
.find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
expect(rule).toBeDefined();
// @ts-expect-error (TODO)
expect(rule.style.filter).toBe('blur(2px)');
});
});

3
code/addons/a11y/src/components/VisionSimulator.tsx
View File

@ -1,4 +1,5 @@
import React, { ReactNode, useState } from 'react';
import type { ReactNode } from 'react';
import React, { useState } from 'react';
import { Global, styled } from '@storybook/theming';
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

19
code/addons/a11y/src/index.ts
View File

@ -1,27 +1,8 @@
/// <reference types="webpack-env" />
import type { AnyFramework, DecoratorFunction } from '@storybook/csf';
import deprecate from 'util-deprecate';
import { dedent } from 'ts-dedent';
export { PARAM_KEY } from './constants';
export * from './params';
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
export const withA11y: DecoratorFunction<AnyFramework> = deprecate(
(storyFn, storyContext) => {
return storyFn(storyContext);
},
dedent`
withA11y(options) is deprecated, please configure addon-a11y using the addParameter api:
addParameters({
a11y: options,
});
More at: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-witha11y-decorator
`
);

4
code/addons/a11y/src/manager.test.tsx
View File

@ -35,7 +35,7 @@ describe('A11yManager', () => {
registrationImpl(api as unknown as api.API);
const title = mockedAddons.add.mock.calls
.map(([_, def]) => def)
.find(({ type }) => type === 'panel').title as Function;
.find(({ type }) => type === 'panel')?.title as Function;
// when / then
expect(title()).toBe('Accessibility');
@ -47,7 +47,7 @@ describe('A11yManager', () => {
registrationImpl(mockedApi);
const title = mockedAddons.add.mock.calls
.map(([_, def]) => def)
.find(({ type }) => type === 'panel').title as Function;
.find(({ type }) => type === 'panel')?.title as Function;
// when / then
expect(title()).toBe('Accessibility (3)');

3
code/addons/a11y/src/manager.tsx
View File

@ -3,7 +3,8 @@ 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, Results } from './components/A11yContext';
import type { Results } from './components/A11yContext';
import { A11yContextProvider } from './components/A11yContext';
addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {

2
code/addons/a11y/src/params.ts
View File

@ -1,4 +1,4 @@
import { ElementContext, Spec, RunOptions } from 'axe-core';
import type { ElementContext, Spec, RunOptions } from 'axe-core';
export interface Setup {
element?: ElementContext;

4
code/addons/a11y/template/stories/parameters.stories.ts
View File

@ -29,7 +29,7 @@ export const Options = {
export const Config = {
args: {
contents:
content:
'<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
},
parameters: {
@ -45,7 +45,7 @@ export const Config = {
export const Targetted = {
args: {
contents: '<button class="custom-target">Click Me!</button>',
content: '<button class="custom-target">Click Me!</button>',
},
parameters: {
a11y: {

11
code/addons/a11y/tsconfig.json
View File

@ -1,15 +1,8 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"types": ["jest", "@testing-library/jest-dom"],
"strict": true
},
"include": ["src/**/*"],
"exclude": [
"src/**/*.test.*",
"src/**/tests/**/*",
"src/**/__tests__/**/*",
"src/**/*.stories.*",
"src/**/*.mockdata.*",
"src/**/__testfixtures__/**"
]
"include": ["src/**/*"]
}

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.47",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@ -27,6 +27,11 @@
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts"
},
"./decorator": {
"require": "./dist/decorator.js",
"import": "./dist/decorator.mjs",
"types": "./dist/decorator.d.ts"
},
"./manager": {
"require": "./dist/manager.js",
"import": "./dist/manager.mjs",
@ -58,13 +63,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.47",
"@storybook/api": "7.0.0-alpha.47",
"@storybook/client-logger": "7.0.0-alpha.47",
"@storybook/components": "7.0.0-alpha.47",
"@storybook/core-events": "7.0.0-alpha.47",
"@storybook/theming": "7.0.0-alpha.47",
"@storybook/types": "7.0.0-alpha.47",
"dequal": "^2.0.2",
"global": "^4.4.0",
"lodash": "^4.17.21",
@ -73,7 +78,6 @@
"react-inspector": "^6.0.0",
"telejson": "^6.0.8",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2",
"uuid-browser": "^3.1.0"
},
"devDependencies": {
@ -98,11 +102,12 @@
"bundler": {
"entries": [
"./src/index.ts",
"./src/decorator.ts",
"./src/manager.tsx",
"./src/preview.ts"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "1c706a4a778831e012343c905f86225fa71491a7",
"storybook": {
"displayName": "Actions",
"unsupportedFrameworks": [

6
code/addons/actions/register.js
View File

@ -1,6 +0,0 @@
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'
);

6
code/addons/actions/src/addArgs.ts
View File

@ -1,3 +1,7 @@
import type { ArgsEnhancer } from '@storybook/types';
import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
export const argsEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
export const argsEnhancers: ArgsEnhancer[] = [
addActionsFromArgTypes,
inferActionsFromArgTypesRegex,
];

2
code/addons/actions/src/addArgsHelpers.test.ts
View File

@ -1,4 +1,4 @@
import type { StoryContext } from '@storybook/addons';
import type { StoryContext } from '@storybook/types';
import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
describe('actions parameter enhancers', () => {

2
code/addons/actions/src/addArgsHelpers.ts
View File

@ -1,4 +1,4 @@
import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/csf';
import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/types';
import { action } from './runtime/action';
// interface ActionsParameter {

3
code/addons/actions/src/addDecorator.ts
View File

@ -1,3 +0,0 @@
import { withActions } from './runtime/withActions';
export const decorators = [withActions];

5
code/addons/actions/src/components/ActionLogger/index.tsx
View File

@ -1,4 +1,5 @@
import React, { FC, Fragment } from 'react';
import type { FC } from 'react';
import React, { Fragment } from 'react';
import { styled, withTheme } from '@storybook/theming';
import type { Theme } from '@storybook/theming';
@ -6,7 +7,7 @@ import { Inspector } from 'react-inspector';
import { ActionBar, ScrollArea } from '@storybook/components';
import { Action, InspectorContainer, Counter } from './style';
import { ActionDisplay } from '../../models';
import type { ActionDisplay } from '../../models';
const UnstyledWrapped: FC<{ className?: string }> = ({ children, className }) => (
<ScrollArea horizontal vertical className={className}>

8
code/addons/actions/src/containers/ActionLogger/index.tsx
View File

@ -6,7 +6,7 @@ import { STORY_CHANGED } from '@storybook/core-events';
import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
import { EVENT_ID } from '../..';
import { ActionDisplay } from '../../models';
import type { ActionDisplay } from '../../models';
interface ActionLoggerProps {
active: boolean;
@ -64,9 +64,11 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
const actions = [...prevState.actions];
const previous = actions.length && actions[0];
if (previous && safeDeepEqual(previous.data, action.data)) {
previous.count++; // eslint-disable-line
// eslint-disable-next-line no-plusplus
previous.count++;
} else {
action.count = 1; // eslint-disable-line
// eslint-disable-next-line no-param-reassign
action.count = 1;
actions.unshift(action);
}
return { actions: actions.slice(0, action.options.limit) };

65
code/addons/actions/src/decorator.ts Normal file
View File

@ -0,0 +1,65 @@
import global from 'global';
import { useEffect, makeDecorator } from '@storybook/addons';
import { actions } from './runtime/actions';
import { PARAM_KEY } from './constants';
const { document, Element } = global;
const delegateEventSplitter = /^(\S+)\s*(.*)$/;
const isIE = Element != null && !Element.prototype.matches;
const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';
const hasMatchInAncestry = (element: any, selector: any): boolean => {
if (element[matchesMethod](selector)) {
return true;
}
const parent = element.parentElement;
if (!parent) {
return false;
}
return hasMatchInAncestry(parent, selector);
};
const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) => {
const actionsObject = actionsFn(...handles);
return Object.entries(actionsObject).map(([key, action]) => {
// eslint-disable-next-line @typescript-eslint/naming-convention
const [_, eventName, selector] = key.match(delegateEventSplitter) || [];
return {
eventName,
handler: (e: { target: any }) => {
if (!selector || hasMatchInAncestry(e.target, selector)) {
action(e);
}
},
};
});
};
const applyEventHandlers = (actionsFn: any, ...handles: any[]) => {
const root = document && document.getElementById('storybook-root');
useEffect(() => {
if (root != null) {
const handlers = createHandlers(actionsFn, ...handles);
handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
return () =>
handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
}
return undefined;
}, [root, actionsFn, handles]);
};
export const withActions = makeDecorator({
name: 'withActions',
parameterName: PARAM_KEY,
skipIfNoParametersOrOptions: true,
wrapper: (getStory, context, { parameters }) => {
if (parameters?.handles) {
applyEventHandlers(actions, ...parameters.handles);
}
return getStory(context);
},
});

2
code/addons/actions/src/models/ActionDisplay.ts
View File

@ -1,4 +1,4 @@
import { ActionOptions } from './ActionOptions';
import type { ActionOptions } from './ActionOptions';
export interface ActionDisplay {
id: string;

4
code/addons/actions/src/models/ActionsFunction.ts
View File

@ -1,5 +1,5 @@
import { ActionOptions } from './ActionOptions';
import { ActionsMap } from './ActionsMap';
import type { ActionOptions } from './ActionOptions';
import type { ActionsMap } from './ActionsMap';
export interface ActionsFunction {
<T extends string>(handlerMap: Record<T, string>, options?: ActionOptions): ActionsMap<T>;

2
code/addons/actions/src/models/ActionsMap.ts
View File

@ -1,3 +1,3 @@
import { HandlerFunction } from './HandlerFunction';
import type { HandlerFunction } from './HandlerFunction';
export type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;

1
code/addons/actions/src/preview.ts
View File

@ -1,2 +1 @@
export * from './addDecorator';
export * from './addArgs';

2
code/addons/actions/src/runtime/action.ts
View File

@ -1,7 +1,7 @@
import uuidv4 from 'uuid-browser/v4';
import { addons } from '@storybook/addons';
import { EVENT_ID } from '../constants';
import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
import { config } from './configureActions';
type SyntheticEvent = any; // import('react').SyntheticEvent;

2
code/addons/actions/src/runtime/actions.ts
View File

@ -1,5 +1,5 @@
import { action } from './action';
import { ActionsFunction, ActionOptions, ActionsMap } from '../models';
import type { ActionsFunction, ActionOptions, ActionsMap } from '../models';
import { config } from './configureActions';
export const actions: ActionsFunction = (...args: any[]) => {

2
code/addons/actions/src/runtime/configureActions.ts
View File

@ -1,4 +1,4 @@
import { ActionOptions } from '../models';
import type { ActionOptions } from '../models';
export const config: ActionOptions = {
depth: 10,

37
code/addons/actions/src/runtime/decorateAction.ts
View File

@ -1,37 +0,0 @@
import deprecate from 'util-deprecate';
import { dedent } from 'ts-dedent';
import { DecoratorFunction } from '../models';
export const decorateAction = (_decorators: DecoratorFunction[]) => {
return deprecate(
() => {},
dedent`
decorateAction is no longer supported as of Storybook 6.0.
`
);
};
const deprecatedCallback = deprecate(() => {},
'decorate.* is no longer supported as of Storybook 6.0.');
export const decorate = (_decorators: DecoratorFunction[]) => {
return deprecate(
() => {
return {
action: deprecatedCallback,
actions: deprecatedCallback,
withActions: deprecatedCallback,
};
},
dedent`
decorate is deprecated, please configure addon-actions using the addParameter api:
addParameters({
actions: {
handles: options
},
});
`
);
};

2
code/addons/actions/src/runtime/index.ts
View File

@ -1,5 +1,3 @@
export * from './action';
export * from './actions';
export * from './configureActions';
export * from './decorateAction';
export * from './withActions';

87
code/addons/actions/src/runtime/withActions.ts
View File

@ -1,87 +0,0 @@
// Based on http://backbonejs.org/docs/backbone.html#section-164
import global from 'global';
import { useEffect, makeDecorator } from '@storybook/addons';
import deprecate from 'util-deprecate';
import { dedent } from 'ts-dedent';
import { actions } from './actions';
import { PARAM_KEY } from '../constants';
const { document, Element } = global;
const delegateEventSplitter = /^(\S+)\s*(.*)$/;
const isIE = Element != null && !Element.prototype.matches;
const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';
const hasMatchInAncestry = (element: any, selector: any): boolean => {
if (element[matchesMethod](selector)) {
return true;
}
const parent = element.parentElement;
if (!parent) {
return false;
}
return hasMatchInAncestry(parent, selector);
};
const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) => {
const actionsObject = actionsFn(...handles);
return Object.entries(actionsObject).map(([key, action]) => {
const [_, eventName, selector] = key.match(delegateEventSplitter) || [];
return {
eventName,
handler: (e: { target: any }) => {
if (!selector || hasMatchInAncestry(e.target, selector)) {
action(e);
}
},
};
});
};
const applyEventHandlers = deprecate(
(actionsFn: any, ...handles: any[]) => {
const root = document && document.getElementById('storybook-root');
useEffect(() => {
if (root != null) {
const handlers = createHandlers(actionsFn, ...handles);
handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
return () =>
handlers.forEach(({ eventName, handler }) =>
root.removeEventListener(eventName, handler)
);
}
return undefined;
}, [root, actionsFn, handles]);
},
dedent`
withActions(options) is deprecated, please configure addon-actions using the addParameter api:
addParameters({
actions: {
handles: options
},
});
`
);
const applyDeprecatedOptions = (actionsFn: any, options: any[]) => {
if (options) {
applyEventHandlers(actionsFn, options);
}
};
export const withActions = makeDecorator({
name: 'withActions',
parameterName: PARAM_KEY,
skipIfNoParametersOrOptions: true,
wrapper: (getStory, context, { parameters, options }) => {
applyDeprecatedOptions(actions, options as any[]);
if (parameters && parameters.handles) applyEventHandlers(actions, ...parameters.handles);
return getStory(context);
},
});

2
code/addons/actions/template/stories/argtype.stories.ts
View File

@ -3,7 +3,7 @@ import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
label: 'Click Me!',
},
argTypes: {
onClick: {},

2
code/addons/actions/template/stories/basics.stories.ts
View File

@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
label: 'Click Me!',
},
parameters: {
chromatic: { disable: true },

2
code/addons/actions/template/stories/configs.stories.ts
View File

@ -7,7 +7,7 @@ const configs = actions('actionA', 'actionB', 'actionC');
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
label: 'Click Me!',
},
parameters: {
chromatic: { disable: true },

4
code/addons/actions/template/stories/parameters.stories.ts
View File

@ -1,9 +1,10 @@
import globalThis from 'global';
import { withActions } from '@storybook/addon-actions/decorator';
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
label: 'Click Me!',
},
parameters: {
chromatic: { disable: true },
@ -14,4 +15,5 @@ export const Basic = {
parameters: {
handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
},
decorators: [withActions],
};

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.47",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@ -62,17 +62,16 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.47",
"@storybook/api": "7.0.0-alpha.47",
"@storybook/client-logger": "7.0.0-alpha.47",
"@storybook/components": "7.0.0-alpha.47",
"@storybook/core-events": "7.0.0-alpha.47",
"@storybook/theming": "7.0.0-alpha.47",
"@storybook/types": "7.0.0-alpha.47",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2"
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"typescript": "~4.6.3"
@ -99,7 +98,7 @@
"./src/preview.tsx"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "1c706a4a778831e012343c905f86225fa71491a7",
"storybook": {
"displayName": "Backgrounds",
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

6
code/addons/backgrounds/register.js
View File

@ -1,6 +0,0 @@
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'
);

12
code/addons/backgrounds/src/containers/BackgroundSelector.tsx
View File

@ -1,4 +1,5 @@
import React, { FC, Fragment, useCallback, useMemo, memo } from 'react';
import type { FC } from 'react';
import React, { Fragment, useCallback, useMemo, memo } from 'react';
import memoize from 'memoizerific';
import { useParameter, useGlobals } from '@storybook/api';
@ -7,7 +8,12 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
import { ColorIcon } from '../components/ColorIcon';
import { BackgroundSelectorItem, Background, BackgroundsParameter, GlobalState } from '../types';
import type {
BackgroundSelectorItem,
Background,
BackgroundsParameter,
GlobalState,
} from '../types';
import { getBackgroundColorByName } from '../helpers';
const createBackgroundSelectorItem = memoize(1000)(
@ -71,7 +77,7 @@ const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
values: [],
};
export const BackgroundSelector: FC = memo(() => {
export const BackgroundSelector: FC = memo(function BackgroundSelector() {
const backgroundsConfig = useParameter<BackgroundsParameter>(
BACKGROUNDS_PARAM_KEY,
DEFAULT_BACKGROUNDS_CONFIG

5
code/addons/backgrounds/src/containers/GridSelector.tsx
View File

@ -1,11 +1,12 @@
import React, { FC, memo } from 'react';
import type { FC } from 'react';
import React, { memo } from 'react';
import { useGlobals, useParameter } from '@storybook/api';
import { Icons, IconButton } from '@storybook/components';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
export const GridSelector: FC = memo(() => {
export const GridSelector: FC = memo(function GridSelector() {
const [globals, updateGlobals] = useGlobals();
const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {

2
code/addons/backgrounds/src/decorators/withBackground.ts
View File

@ -1,5 +1,5 @@
import { useMemo, useEffect } from '@storybook/addons';
import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
import {

32
code/addons/backgrounds/src/decorators/withGrid.ts
View File

@ -1,21 +1,9 @@
import { dedent } from 'ts-dedent';
import deprecate from 'util-deprecate';
import { useMemo, useEffect } from '@storybook/addons';
import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
import { clearStyles, addGridStyle } from '../helpers';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
const deprecatedCellSizeWarning = deprecate(
() => {},
dedent`
Backgrounds Addon: The cell size parameter has been changed.
- parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter
`
);
export const withGrid = (
StoryFn: StoryFunction<AnyFramework>,
context: StoryContext<AnyFramework>
@ -26,14 +14,6 @@ export const withGrid = (
const { cellAmount, cellSize, opacity } = gridParameters;
const isInDocs = context.viewMode === 'docs';
let gridSize: number;
if (parameters.grid?.cellSize) {
gridSize = parameters.grid.cellSize;
deprecatedCellSizeWarning();
} else {
gridSize = cellSize;
}
const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded';
// 16px offset in the grid to account for padded layout
const defaultOffset = isLayoutPadded ? 16 : 0;
@ -45,10 +25,10 @@ export const withGrid = (
context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
const backgroundSize = [
`${gridSize * cellAmount}px ${gridSize * cellAmount}px`,
`${gridSize * cellAmount}px ${gridSize * cellAmount}px`,
`${gridSize}px ${gridSize}px`,
`${gridSize}px ${gridSize}px`,
`${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
`${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
`${cellSize}px ${cellSize}px`,
`${cellSize}px ${cellSize}px`,
].join(', ');
return `
@ -64,7 +44,7 @@ export const withGrid = (
}) 1px, transparent 1px) !important;
}
`;
}, [gridSize]);
}, [cellSize]);
useEffect(() => {
const selectorId =

2
code/addons/backgrounds/src/helpers/index.ts
View File

@ -3,7 +3,7 @@ import { dedent } from 'ts-dedent';
import { logger } from '@storybook/client-logger';
import { Background } from '../types';
import type { Background } from '../types';
const { document, window } = global;

7
code/addons/backgrounds/src/preview.tsx
View File

@ -1,9 +1,10 @@
import { withBackground } from './decorators/withBackground';
import { withGrid } from './decorators/withGrid';
import { PARAM_KEY } from './constants';
export const decorators = [withGrid, withBackground];
export const parameters = {
backgrounds: {
[PARAM_KEY]: {
grid: {
cellSize: 20,
opacity: 0.5,
@ -15,3 +16,7 @@ export const parameters = {
],
},
};
export const globals = {
[PARAM_KEY]: null as any,
};

2
code/addons/backgrounds/src/types/index.ts
View File

@ -1,4 +1,4 @@
import { ReactElement } from 'react';
import type { ReactElement } from 'react';
export interface GlobalState {
name: string | undefined;

2
code/addons/backgrounds/template/stories/grid.stories.ts
View File

@ -3,7 +3,7 @@ import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
label: 'Click Me!',
},
parameters: {
backgrounds: {

2
code/addons/backgrounds/template/stories/parameters.stories.ts
View File

@ -12,7 +12,7 @@ const COLORS = [
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
label: 'Click Me!',
},
parameters: {
backgrounds: {

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

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

6
code/addons/controls/register.js
View File

@ -1,6 +0,0 @@
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'
);

19
code/addons/controls/src/ControlsPanel.tsx
View File

@ -1,19 +1,14 @@
import React, { FC } from 'react';
import {
ArgTypes,
useArgs,
useGlobals,
useArgTypes,
useParameter,
useStorybookState,
} from '@storybook/api';
import type { FC } from 'react';
import React from 'react';
import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
import {
PureArgsTable as ArgsTable,
NoControlsWarning,
PresetColor,
SortType,
type PresetColor,
type SortType,
} from '@storybook/blocks';
import type { API_ArgTypes } from '@storybook/types';
import { PARAM_KEY } from './constants';
interface ControlsParameters {
@ -43,7 +38,7 @@ export const ControlsPanel: FC = () => {
if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;
else acc[key] = { ...arg, control: { ...arg.control, presetColors } };
return acc;
}, {} as ArgTypes);
}, {} as API_ArgTypes);
return (
<>

2
code/addons/controls/src/manager.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { addons, types } from '@storybook/addons';
import { AddonPanel } from '@storybook/components';
import { API, useArgTypes } from '@storybook/api';
import { type API, useArgTypes } from '@storybook/api';
import { ControlsPanel } from './ControlsPanel';
import { ADDON_ID, PARAM_KEY } from './constants';

2
code/addons/controls/template/stories/basics.stories.ts
View File

@ -1,5 +1,5 @@
import globalThis from 'global';
import { PartialStoryFn, StoryContext } from '@storybook/csf';
import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: null,

2
code/addons/controls/template/stories/conditional.stories.ts
View File

@ -1,5 +1,5 @@
import globalThis from 'global';
import { PartialStoryFn, StoryContext } from '@storybook/csf';
import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: null,

2
code/addons/controls/template/stories/disable.stories.ts
View File

@ -1,5 +1,5 @@
import globalThis from 'global';
import { PartialStoryFn, StoryContext } from '@storybook/csf';
import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: null,

2
code/addons/controls/template/stories/filters.stories.ts
View File

@ -1,5 +1,5 @@
import globalThis from 'global';
import { PartialStoryFn, StoryContext } from '@storybook/csf';
import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: null,

2
code/addons/controls/template/stories/issues.stories.ts
View File

@ -1,5 +1,5 @@
import globalThis from 'global';
import { PartialStoryFn, StoryContext } from '@storybook/csf';
import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: null,

2
code/addons/controls/template/stories/matchers.stories.ts
View File

@ -1,5 +1,5 @@
import globalThis from 'global';
import { PartialStoryFn, StoryContext } from '@storybook/csf';
import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: null,

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