mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 07:21:16 +08:00
Merge branch 'next' into pr/osdiab/14811
# Conflicts: # addons/graphql/package.json # addons/storyshots/storyshots-core/package.json # examples/riot-kitchen-sink/package.json # lib/core-server/package.json # yarn.lock
This commit is contained in:
Norbert de Langen
commit
84421c1b3f
12
.babelrc.js
12
.babelrc.js
@ -12,7 +12,13 @@ const withTests = {
|
||||
],
|
||||
};
|
||||
|
||||
const modules = process.env.BABEL_ESM === 'true' ? false : 'auto';
|
||||
// type BabelMode = 'cjs' | 'esm' | 'modern';
|
||||
|
||||
const modules = process.env.BABEL_MODE === 'cjs' ? 'auto' : false;
|
||||
|
||||
// FIXME: optional chaining introduced in chrome 80, not supported by wepback4
|
||||
// https://github.com/webpack/webpack/issues/10227#issuecomment-642734920
|
||||
const targets = process.env.BABEL_MODE === 'modern' ? { chrome: '79' } : 'defaults';
|
||||
|
||||
module.exports = {
|
||||
ignore: [
|
||||
@ -26,7 +32,7 @@ module.exports = {
|
||||
shippedProposals: true,
|
||||
useBuiltIns: 'usage',
|
||||
corejs: '3',
|
||||
targets: 'defaults',
|
||||
targets,
|
||||
modules,
|
||||
},
|
||||
],
|
||||
@ -70,7 +76,7 @@ module.exports = {
|
||||
useBuiltIns: 'usage',
|
||||
corejs: '3',
|
||||
modules,
|
||||
targets: 'defaults',
|
||||
targets,
|
||||
},
|
||||
],
|
||||
'@babel/preset-react',
|
||||
|
||||
@ -6,7 +6,7 @@ executors:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: [ 'small', 'medium', 'large', 'xlarge' ]
|
||||
enum: ['small', 'medium', 'large', 'xlarge']
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
@ -78,7 +78,7 @@ commands:
|
||||
jobs:
|
||||
build:
|
||||
executor:
|
||||
class: large
|
||||
class: xlarge
|
||||
name: sb_node_12_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
@ -104,7 +104,6 @@ jobs:
|
||||
- examples
|
||||
- node_modules
|
||||
- addons
|
||||
- dev-kits
|
||||
- app
|
||||
- lib
|
||||
chromatic:
|
||||
@ -177,12 +176,12 @@ jobs:
|
||||
condition:
|
||||
and:
|
||||
- not:
|
||||
equal: [ master, << pipeline.git.branch >> ]
|
||||
equal: [master, << pipeline.git.branch >>]
|
||||
- not:
|
||||
equal: [ next, << pipeline.git.branch >> ]
|
||||
equal: [next, << pipeline.git.branch >>]
|
||||
steps:
|
||||
- ensure-pr-is-labeled-with:
|
||||
label: "run e2e extended test suite"
|
||||
label: 'run e2e extended test suite'
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
@ -194,12 +193,10 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
command: yarn test:e2e-framework --clean --skip angular@latest --skip vue3@next --skip web_components_typescript@latest --skip cra@latest
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
@ -220,17 +217,16 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
# Do not test CRA nor Web Components here because it's done in PnP part
|
||||
command: yarn test:e2e-framework angular@latest vue3@next
|
||||
# Do not test CRA here because it's done in PnP part
|
||||
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
|
||||
command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
e2e-tests-cra-bench:
|
||||
cra-bench:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_cypress_6_node_12
|
||||
@ -247,15 +243,13 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: Run @storybook/bench on a CRA project
|
||||
command: yarn test:e2e-framework cra_bench
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
command: |
|
||||
cd ..
|
||||
npx create-react-app cra-bench
|
||||
cd cra-bench
|
||||
npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern"
|
||||
e2e-tests-pnp:
|
||||
executor:
|
||||
class: medium
|
||||
@ -273,12 +267,9 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework --use-yarn-2-pnp sfcVue@latest cra@latest web_components_typescript@latest
|
||||
command: yarn test:e2e-framework --pnp sfcVue cra
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
@ -347,33 +338,18 @@ jobs:
|
||||
command: |
|
||||
cd examples/ember-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run marko-cli (smoke test)
|
||||
command: |
|
||||
cd examples/marko-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run official-storybook (smoke test)
|
||||
command: |
|
||||
cd examples/official-storybook
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run mithril kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/mithril-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run riot kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/riot-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run preact kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/preact-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run cra reac15 (smoke test)
|
||||
name: Run cra react15 (smoke test)
|
||||
command: |
|
||||
cd examples/cra-react15
|
||||
yarn storybook --smoke-test --quiet
|
||||
@ -467,7 +443,7 @@ workflows:
|
||||
- e2e-tests-pnp:
|
||||
requires:
|
||||
- publish
|
||||
- e2e-tests-cra-bench:
|
||||
- cra-bench:
|
||||
requires:
|
||||
- publish
|
||||
deploy:
|
||||
|
||||
@ -7,6 +7,8 @@ docs/public
|
||||
storybook-static
|
||||
built-storybooks
|
||||
lib/cli/test
|
||||
lib/manager-webpack4/prebuilt
|
||||
lib/manager-webpack5/prebuilt
|
||||
lib/core-server/prebuilt
|
||||
lib/codemod/src/transforms/__testfixtures__
|
||||
lib/components/src/controls/react-editable-json-tree
|
||||
@ -20,7 +22,6 @@ examples/cra-ts-kitchen-sink/*.json
|
||||
examples/cra-ts-kitchen-sink/public/*
|
||||
examples/cra-ts-essentials/*.json
|
||||
examples/cra-ts-essentials/public/*
|
||||
examples/rax-kitchen-sink/src/document/*
|
||||
ember-output
|
||||
.yarn
|
||||
!.remarkrc.js
|
||||
|
||||
47
.github/CODEOWNERS
vendored
47
.github/CODEOWNERS
vendored
@ -1,47 +0,0 @@
|
||||
.circleci/ @ndelangen
|
||||
.github/ @danielduan
|
||||
|
||||
/addons/a11y/ @jbovenschen @codebyalex
|
||||
/addons/actions/ @rhalff
|
||||
/addons/backgrounds/ @ndelangen
|
||||
/addons/events/ @z4o4z @ndelangen
|
||||
/addons/graphql/ @mnmtanish
|
||||
/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael
|
||||
/addons/jest/ @renaudtertrais
|
||||
/addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx
|
||||
/addons/links/ @ndelangen
|
||||
/addons/notes/ @alexandrebodin
|
||||
/addons/options/ @UsulPro
|
||||
/addons/storyshots/ @igor-dv @thomasbertet
|
||||
/addons/storysource/ @igor-dv
|
||||
/addons/viewport/ @saponifi3d
|
||||
|
||||
/app/angular/ @alterx @igor-dv
|
||||
/app/react/ @xavcz @shilman @thomasbertet
|
||||
/app/vue/ @thomasbertet @kazupon
|
||||
/app/svelte/ @plumpNation
|
||||
|
||||
/docs/ @ndelangen @shilman
|
||||
|
||||
/examples/angular-cli/ @igor-dv @alterx
|
||||
/examples/cra-kitchen-sink/ @ndelangen @UsulPro
|
||||
/examples/cra-ts-kitchen-sink/ @mucsi96
|
||||
/examples/official-storybook/ @UsulPro
|
||||
/examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
|
||||
/examples/svelte-kitchen-sink/ @plumpNation
|
||||
|
||||
/examples-native/crna-kitchen-sink/ @Gongreg
|
||||
|
||||
/lib/addons/ @ndelangen @theinterned
|
||||
/lib/channel-postmessage/ @mnmtanish @ndelangen
|
||||
/lib/channel-websocket/ @mnmtanish @ndelangen
|
||||
/lib/channels/ @mnmtanish @ndelangen
|
||||
/lib/cli/ @ndelangen @shilman @stijnkoopal
|
||||
/lib/client-logger/ @dangreenisrael
|
||||
/lib/codemod/ @aaronmcadam @ndelangen
|
||||
/lib/components/ @ndelangen @tmeasday
|
||||
/lib/core/ @tmeasday @igor-dv @alterx
|
||||
/lib/node-logger/ @dangreenisrael
|
||||
/lib/ui/ @tmeasday @igor-dv @ndelangen
|
||||
|
||||
/scripts/ @ndelangen @igor-dv
|
||||
3
.github/ISSUE_TEMPLATE/bug_report.md
vendored
3
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@ -8,7 +8,8 @@ labels: needs triage, bug
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Link to a reproduction repo that demonstrates the bug, plus instructions on how to trigger it.
|
||||
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.
|
||||
|
||||
8
.github/ISSUE_TEMPLATE/config.yml
vendored
8
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -1,5 +1,11 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Storybook Discord
|
||||
- name: Documentation 📚
|
||||
url: https://storybook.js.org/docs/
|
||||
about: Check out the official docs for answers to common questions
|
||||
- name: Questions & discussions 🤔
|
||||
url: https://github.com/storybookjs/storybook/discussions
|
||||
about: Ask questions, request features & discuss RFCs
|
||||
- name: Community Discord 💬
|
||||
url: https://discord.gg/storybook
|
||||
about: Community discussions, interactive support, contributor help
|
||||
|
||||
6
.github/ISSUE_TEMPLATE/feature_request.md
vendored
6
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@ -5,13 +5,13 @@ labels: needs triage, feature request
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
A clear and concise description of the problem. E.g. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
What would you like to see added to Storybook to solve problem?
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features 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...
|
||||
|
||||
14
.github/ISSUE_TEMPLATE/question.md
vendored
14
.github/ISSUE_TEMPLATE/question.md
vendored
@ -1,14 +0,0 @@
|
||||
---
|
||||
name: Questions 🤔
|
||||
about: Documentation missing or you just need help? Let us know here.
|
||||
labels: needs triage, question / support
|
||||
---
|
||||
|
||||
**What's the problem?**
|
||||
Clear and concise statement of what's troubling you.
|
||||
|
||||
**Is there documentation on this?**
|
||||
If this is documented at https://storybook.js.org/docs/ but the documentation is incomplete or unclear, link to it here.
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
124
.github/renovate.json5
vendored
124
.github/renovate.json5
vendored
@ -1,113 +1,83 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": [
|
||||
"config:base",
|
||||
"group:allNonMajor"
|
||||
],
|
||||
"prHourlyLimit": 1,
|
||||
"prConcurrentLimit": 1,
|
||||
$schema: 'https://docs.renovatebot.com/renovate-schema.json',
|
||||
extends: ['config:base', 'group:allNonMajor'],
|
||||
prHourlyLimit: 1,
|
||||
prConcurrentLimit: 1,
|
||||
// Custom ignore paths to include our `examples/` directory
|
||||
"ignorePaths": [
|
||||
"**/node_modules/**",
|
||||
"**/bower_components/**",
|
||||
"**/vendor/**",
|
||||
"**/__tests__/**",
|
||||
"**/test/**",
|
||||
"**/tests/**",
|
||||
"**/__fixtures__/**"
|
||||
],
|
||||
"enabledManagers": [
|
||||
"npm"
|
||||
ignorePaths: [
|
||||
'**/node_modules/**',
|
||||
'**/bower_components/**',
|
||||
'**/vendor/**',
|
||||
'**/__tests__/**',
|
||||
'**/test/**',
|
||||
'**/tests/**',
|
||||
'**/__fixtures__/**',
|
||||
],
|
||||
enabledManagers: ['npm'],
|
||||
// Ignore release notes for non-breaking changes
|
||||
"fetchReleaseNotes": false,
|
||||
fetchReleaseNotes: false,
|
||||
// Always bump minor/patch to latest
|
||||
"rangeStrategy": "bump",
|
||||
"major": {
|
||||
rangeStrategy: 'bump',
|
||||
major: {
|
||||
// Replace ranges when there is a major
|
||||
"rangeStrategy": "replace",
|
||||
rangeStrategy: 'replace',
|
||||
// Get us the release notes for breaking changes
|
||||
"fetchReleaseNotes": true
|
||||
fetchReleaseNotes: true,
|
||||
},
|
||||
"packageRules": [
|
||||
packageRules: [
|
||||
// Leave peerDependencies and engines alone
|
||||
{
|
||||
"depTypeList": [
|
||||
"peerDependencies",
|
||||
"engines"
|
||||
],
|
||||
"enabled": false
|
||||
depTypeList: ['peerDependencies', 'engines'],
|
||||
enabled: false,
|
||||
},
|
||||
// Handle patch updates under 0.1.0 as potentially breaking
|
||||
// Workaround for https://github.com/renovatebot/renovate/issues/3588
|
||||
{
|
||||
"managers": [
|
||||
"npm"
|
||||
],
|
||||
"matchCurrentVersion": "<0.1.0",
|
||||
"rangeStrategy": "replace",
|
||||
"groupName": "maybe breaking patch updates",
|
||||
"groupSlug": "maybe-breaking-patch",
|
||||
managers: ['npm'],
|
||||
matchCurrentVersion: '<0.1.0',
|
||||
rangeStrategy: 'replace',
|
||||
groupName: 'maybe breaking patch updates',
|
||||
groupSlug: 'maybe-breaking-patch',
|
||||
// Get us the release notes for potentially breaking changes
|
||||
"fetchReleaseNotes": true
|
||||
fetchReleaseNotes: true,
|
||||
},
|
||||
// Handle minor updates under 1.0.0 as potentially breaking
|
||||
// Workaround for https://github.com/renovatebot/renovate/issues/3588
|
||||
{
|
||||
"managers": [
|
||||
"npm"
|
||||
],
|
||||
"matchCurrentVersion": "<1.0.0 >=0.1.0",
|
||||
"minor": {
|
||||
"rangeStrategy": "replace",
|
||||
"groupName": "maybe breaking minor updates",
|
||||
"groupSlug": "maybe-breaking-minor",
|
||||
managers: ['npm'],
|
||||
matchCurrentVersion: '<1.0.0 >=0.1.0',
|
||||
minor: {
|
||||
// FIXME: "rangeStrategy": "replace",
|
||||
groupName: 'maybe breaking minor updates',
|
||||
groupSlug: 'maybe-breaking-minor',
|
||||
// Get us the release notes for potentially breaking changes
|
||||
"fetchReleaseNotes": true
|
||||
}
|
||||
fetchReleaseNotes: true,
|
||||
},
|
||||
},
|
||||
// Group Storybook's linter configs together
|
||||
{
|
||||
"packageNames": [
|
||||
"@storybook/eslint-config-storybook",
|
||||
"@storybook/linter-config"
|
||||
],
|
||||
"groupName": "storybook linting"
|
||||
packageNames: ['@storybook/eslint-config-storybook', '@storybook/linter-config'],
|
||||
groupName: 'storybook linting',
|
||||
},
|
||||
// Group Puppeteer packages together
|
||||
{
|
||||
"packagePatterns": [
|
||||
"^puppeteer",
|
||||
"^@types/puppeteer"
|
||||
],
|
||||
"groupName": "puppeteer"
|
||||
packagePatterns: ['^puppeteer', '^@types/puppeteer'],
|
||||
groupName: 'puppeteer',
|
||||
},
|
||||
// Group Acorn packages together
|
||||
{
|
||||
"packagePatterns": [
|
||||
"^acorn"
|
||||
],
|
||||
"groupName": "acorn"
|
||||
packagePatterns: ['^acorn'],
|
||||
groupName: 'acorn',
|
||||
},
|
||||
// Group React packages together
|
||||
{
|
||||
"packageNames": [
|
||||
"react",
|
||||
"@types/react",
|
||||
"react-dom",
|
||||
"@types/react-dom"
|
||||
],
|
||||
"groupName": "react"
|
||||
}
|
||||
packageNames: ['react', '@types/react', 'react-dom', '@types/react-dom'],
|
||||
groupName: 'react',
|
||||
},
|
||||
],
|
||||
// Simplifies the PR body
|
||||
"prBodyTemplate": "{{{table}}}{{{notes}}}{{{changelogs}}}",
|
||||
"prBodyColumns": [
|
||||
"Package",
|
||||
"Change"
|
||||
],
|
||||
prBodyTemplate: '{{{table}}}{{{notes}}}{{{changelogs}}}',
|
||||
prBodyColumns: ['Package', 'Change'],
|
||||
// https://docs.renovatebot.com/merge-confidence/#enabling-and-disabling
|
||||
"ignorePresets": [
|
||||
"github>whitesource/merge-confidence:beta"
|
||||
]
|
||||
ignorePresets: ['github>whitesource/merge-confidence:beta'],
|
||||
}
|
||||
|
||||
15
.gitignore
vendored
15
.gitignore
vendored
@ -31,13 +31,14 @@ cypress/screenshots
|
||||
examples/ember-cli/ember-output
|
||||
.verdaccio-cache
|
||||
tsconfig.tsbuildinfo
|
||||
lib/core-server/prebuilt
|
||||
lib/manager-webpack4/prebuilt
|
||||
lib/manager-webpack5/prebuilt
|
||||
examples/angular-cli/addon-jest.testresults.json
|
||||
|
||||
# Yarn stuff
|
||||
/.yarn/*
|
||||
!/.yarn/releases
|
||||
!/.yarn/plugins
|
||||
!/.yarn/sdks
|
||||
!/.yarn/versions
|
||||
/.pnp.*
|
||||
/**/.yarn/*
|
||||
!/**/.yarn/releases
|
||||
!/**/.yarn/plugins
|
||||
!/**/.yarn/sdks
|
||||
!/**/.yarn/versions
|
||||
/**/.pnp.*
|
||||
9
.teamcity/settings.kts
vendored
9
.teamcity/settings.kts
vendored
@ -388,18 +388,9 @@ object SmokeTests : BuildType({
|
||||
cd ../ember-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../marko-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../official-storybook
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../mithril-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../riot-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../preact-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
|
||||
532
CHANGELOG.md
532
CHANGELOG.md
@ -1,3 +1,535 @@
|
||||
## 6.3.0-rc.8 (June 16, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Angular: Add built-in Ivy support instead of relying on addon ([#15229](https://github.com/storybookjs/storybook/pull/15229))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix MDX compiler export to match new location ([#15266](https://github.com/storybookjs/storybook/pull/15266))
|
||||
- Addon-viewport: Fix CSS for scale reset on firefox ([#15128](https://github.com/storybookjs/storybook/pull/15128))
|
||||
|
||||
## 6.3.0-rc.7 (June 15, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade react-docgen-typescript-plugin to RDT 2.0 ([#15247](https://github.com/storybookjs/storybook/pull/15247))
|
||||
|
||||
## 6.3.0-rc.6 (June 15, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Only call setup function on story navigation ([#15244](https://github.com/storybookjs/storybook/pull/15244))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Official-storybook: Add CSF3 setup function demo ([#15245](https://github.com/storybookjs/storybook/pull/15245))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Use @storybook/react-docgen-typescript-plugin canary with PR#45 ([#15243](https://github.com/storybookjs/storybook/pull/15243))
|
||||
|
||||
## 6.3.0-rc.5 (June 14, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Vue3: Update args without re-mounting component ([#15168](https://github.com/storybookjs/storybook/pull/15168))
|
||||
- Core: Preserve other query params when changing args/globals ([#15213](https://github.com/storybookjs/storybook/pull/15213))
|
||||
- UI: Fix range slider value label size changes causing jittering ([#15145](https://github.com/storybookjs/storybook/pull/15145))
|
||||
- Codemod: Fix dist/node_modules ignore heuristic ([#15222](https://github.com/storybookjs/storybook/pull/15222))
|
||||
- Core: Fix autoRefs check in manager-webpack ([#15197](https://github.com/storybookjs/storybook/pull/15197))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CSF3: Fix v1-style annotations in codemod ([#15230](https://github.com/storybookjs/storybook/pull/15230))
|
||||
- Core: CSF v3 preview ([#15217](https://github.com/storybookjs/storybook/pull/15217))
|
||||
|
||||
## 6.3.0-rc.4 (June 12, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Vue3: Add vue-loader as a dependency ([#15207](https://github.com/storybookjs/storybook/pull/15207))
|
||||
|
||||
## 6.3.0-rc.3 (June 11, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Disable sidebar and don't load refs when `singleStory=true` ([#15201](https://github.com/storybookjs/storybook/pull/15201))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Use docsMode to set docs options ([#15194](https://github.com/storybookjs/storybook/pull/15194))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-docs: Split out MDX compiler into standalone package ([#15205](https://github.com/storybookjs/storybook/pull/15205))
|
||||
|
||||
## 6.3.0-rc.2 (June 10, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add `shortcuts` URL param to disable keyboard shortcuts ([#15192](https://github.com/storybookjs/storybook/pull/15192))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Fix builder runaway process ([#15189](https://github.com/storybookjs/storybook/pull/15189))
|
||||
|
||||
## 6.3.0-rc.1 (June 10, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Use named import for @storybook/addons, fixes vite builder ([#15187](https://github.com/storybookjs/storybook/pull/15187))
|
||||
|
||||
## 6.3.0-rc.0 (June 9, 2021)
|
||||
|
||||
Storybook 6.3 is in RC!! 🎉🎉🎉
|
||||
|
||||
Hundreds of improvements and fixes, including:
|
||||
|
||||
- **Angular** - Angular12, Ivy, overhauled docs support.
|
||||
- **Web-components** - Lit2 support.
|
||||
- **Essentials** - New measure/outline addons for CSS debugging.
|
||||
- **Addon API** - Keyboard shortcuts for addons. Initial support in viewports, toolbars.
|
||||
- **Webpack 5** - Official support.
|
||||
- **Vite builder** - Community support.
|
||||
- **Modern ESM** - Modern package distribution.
|
||||
|
||||
Track the release in the Github: [Storybook 6.3 Release 🛠](https://github.com/storybookjs/storybook/issues/14397)
|
||||
|
||||
## 6.3.0-beta.18 (June 9, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Toolbars: Add customizable keyboard navigation shortcuts ([#15169](https://github.com/storybookjs/storybook/pull/15169))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Initialize color control on reset ([#15059](https://github.com/storybookjs/storybook/pull/15059))
|
||||
|
||||
## 6.3.0-beta.17 (June 8, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Measure: Update version to fix hooks issue ([#15167](https://github.com/storybookjs/storybook/pull/15167))
|
||||
|
||||
## 6.3.0-beta.16 (June 8, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Angular: Add compodoc to ng builder ([#15165](https://github.com/storybookjs/storybook/pull/15165))
|
||||
|
||||
## 6.3.0-beta.15 (June 7, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Clear root / docs-root when navigating from one tab to the other ([#15160](https://github.com/storybookjs/storybook/pull/15160))
|
||||
|
||||
## 6.3.0-beta.14 (June 6, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Controls: Style `undefined` range slider different to filled one ([#14973](https://github.com/storybookjs/storybook/pull/14973))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade to react-docgen-typescript-plugin 1.0.0 ([#15154](https://github.com/storybookjs/storybook/pull/15154))
|
||||
|
||||
## 6.3.0-beta.13 (June 6, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CsfFile: Index Meta/Story annotations ([#15152](https://github.com/storybookjs/storybook/pull/15152))
|
||||
- CLI: Update project template for web-components ([#15149](https://github.com/storybookjs/storybook/pull/15149))
|
||||
- Build: Fix WC example and e2e tests ([#15146](https://github.com/storybookjs/storybook/pull/15146))
|
||||
|
||||
## 6.3.0-beta.12 (June 5, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Essentials: Update measure/outline addons to support ESM and vite builder ([#15144](https://github.com/storybookjs/storybook/pull/15144))
|
||||
|
||||
## 6.3.0-beta.11 (June 4, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Fix Ivy rendering to use at most one render promise at a time ([#15139](https://github.com/storybookjs/storybook/pull/15139))
|
||||
- CSF tools: Refactor test cases ([#15142](https://github.com/storybookjs/storybook/pull/15142))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Web Components: Reintegrate `@storybook/lit` into `@storybook/web-components` ([#15042](https://github.com/storybookjs/storybook/pull/15042))
|
||||
|
||||
## 6.3.0-beta.10 (June 3, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add storybook-addon-angular-ivy to angular install ([#14653](https://github.com/storybookjs/storybook/pull/14653))
|
||||
- Angular: Ivy rendering for Canvas and Docs ([#15126](https://github.com/storybookjs/storybook/pull/15126))
|
||||
- Server: Add support for stories written in YAML ([#15049](https://github.com/storybookjs/storybook/pull/15049))
|
||||
|
||||
## 6.3.0-beta.9 (June 3, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Essentials: Add measure and outline addons ([#15107](https://github.com/storybookjs/storybook/pull/15107))
|
||||
|
||||
## 6.3.0-beta.8 (June 2, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add `core.disableWebpackDefaults` preset ([#15062](https://github.com/storybookjs/storybook/pull/15062))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix prebuilt manager usage on first run ([#15121](https://github.com/storybookjs/storybook/pull/15121))
|
||||
|
||||
## 6.3.0-beta.7 (June 2, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Angular: Add angular builder to start + build storybook ([#15061](https://github.com/storybookjs/storybook/pull/15061))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix react repro template deps ([#15118](https://github.com/storybookjs/storybook/pull/15118))
|
||||
|
||||
## 6.3.0-beta.6 (June 1, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add Server template generator ([#13979](https://github.com/storybookjs/storybook/pull/13979))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Disable `react_in_yarn_workspace` template for users, keep in e2e ([#15114](https://github.com/storybookjs/storybook/pull/15114))
|
||||
|
||||
## 6.3.0-beta.5 (May 30, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Vue2: Check types when `typescript.check` is true ([#15089](https://github.com/storybookjs/storybook/pull/15089))
|
||||
- Update markdown-to-jsx version to fix url links in comments ([#15083](https://github.com/storybookjs/storybook/pull/15083))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Add `SKIP_PREFLIGHT_CHECK` in CRA repro ([#15092](https://github.com/storybookjs/storybook/pull/15092))
|
||||
- Angular: Disable chromatic for story with dynamic time display ([#15074](https://github.com/storybookjs/storybook/pull/15074))
|
||||
|
||||
## 6.3.0-beta.4 (May 28, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix MDX source rendering ([#15071](https://github.com/storybookjs/storybook/pull/15071))
|
||||
- CLI: Add new packages to versions.json ([#15073](https://github.com/storybookjs/storybook/pull/15073))
|
||||
- Addon-docs: Fix per-story `docs.source` parameter ([#15070](https://github.com/storybookjs/storybook/pull/15070))
|
||||
|
||||
## 6.3.0-beta.3 (May 28, 2021)
|
||||
|
||||
Failed NPM publish
|
||||
|
||||
## 6.3.0-beta.2 (May 27, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add `globals` URL param and remove from sessionStorage ([#15056](https://github.com/storybookjs/storybook/pull/15056))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Set `loose: true` in babel/preset-env config ([#15055](https://github.com/storybookjs/storybook/pull/15055))
|
||||
|
||||
## 6.3.0-beta.1 (May 26, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix prebuilt manager ([#15050](https://github.com/storybookjs/storybook/pull/15050))
|
||||
- Core: Fix storySort `order` with whitespace in story paths ([#15038](https://github.com/storybookjs/storybook/pull/15038))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Do not try to named import from global ([#15043](https://github.com/storybookjs/storybook/pull/15043))
|
||||
- Remove storybook/lit from monorepo ([#15048](https://github.com/storybookjs/storybook/pull/15048))
|
||||
|
||||
## 6.3.0-beta.0 (May 26, 2021)
|
||||
|
||||
Storybook 6.3 is in beta!! 🎉🎉🎉
|
||||
|
||||
Hundreds of improvements and fixes, including:
|
||||
|
||||
- **Angular** - Overhauled Angular support.
|
||||
- **Web-components** - Lit2 support.
|
||||
- **Webpack 5** - Official support.
|
||||
- **Vite builder** - Community support.
|
||||
- **Modern ESM** - Modern package distribution.
|
||||
- **API** - Keyboard shortcuts for addons.
|
||||
|
||||
Track the release in the Github: [Storybook 6.3 Release 🛠](https://github.com/storybookjs/storybook/issues/14397)
|
||||
|
||||
## 6.3.0-alpha.45 (May 26, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add option to force-build iframe despite custom preview URL ([#15030](https://github.com/storybookjs/storybook/pull/15030))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix source block tree shaking ([#15035](https://github.com/storybookjs/storybook/pull/15035))
|
||||
- Addon-a11y: Highlight all elements correctly ([#14935](https://github.com/storybookjs/storybook/pull/14935))
|
||||
|
||||
## 6.3.0-alpha.44 (May 25, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Presets: Expand `webpackInstance` to include entire namespace ([#15016](https://github.com/storybookjs/storybook/pull/15016))
|
||||
- Angular: Add `angularBrowserTarget` option in server ([#14955](https://github.com/storybookjs/storybook/pull/14955))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Ignore manager cache on config file changes and Storybook upgrade ([#14993](https://github.com/storybookjs/storybook/pull/14993))
|
||||
|
||||
## 6.3.0-alpha.43 (May 25, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Web-components: Support lit 2 with back-compat ([#14898](https://github.com/storybookjs/storybook/pull/14898))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Use NormalizeOptimization from angular-cli ([#15022](https://github.com/storybookjs/storybook/pull/15022))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Fix selectors used in Cypress tests and E2E exit code ([#15021](https://github.com/storybookjs/storybook/pull/15021))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump react-docgen-typescript-plugin to 0.7.2-canary.375d65e.0 ([#15024](https://github.com/storybookjs/storybook/pull/15024))
|
||||
|
||||
## 6.3.0-alpha.42 (May 24, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Core: Fix manager builder dependencies for PnP ([#15019](https://github.com/storybookjs/storybook/pull/15019))
|
||||
|
||||
## 6.3.0-alpha.41 (May 24, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-docs: Exclude decorators in dynamic source snippets ([#14652](https://github.com/storybookjs/storybook/pull/14652))
|
||||
|
||||
## 6.3.0-alpha.40 (May 24, 2021)
|
||||
|
||||
Failed NPM publish
|
||||
|
||||
## 6.3.0-alpha.39 (May 23, 2021)
|
||||
|
||||
Fix stale dependencies appended to [#15001](https://github.com/storybookjs/storybook/pull/15001)
|
||||
|
||||
## 6.3.0-alpha.38 (May 23, 2021)
|
||||
|
||||
Minor manager webapck5 fixes appended to [#15001](https://github.com/storybookjs/storybook/pull/15001)
|
||||
|
||||
## 6.3.0-alpha.37 (May 23, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Support manager build with webpack5 ([#15001](https://github.com/storybookjs/storybook/pull/15001))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix opt-in stories.json generation ([#15003](https://github.com/storybookjs/storybook/pull/15003))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Maintenance: Build ESM in watch mode, revert modern ([#15015](https://github.com/storybookjs/storybook/pull/15015))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Storyshots-puppeteer: Remove the usage of GPL-licensed `@wordpress/jest-puppeteer-axe` package ([#15006](https://github.com/storybookjs/storybook/pull/15006))
|
||||
|
||||
## 6.3.0-alpha.36 (May 20, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add sb link --local option ([#14950](https://github.com/storybookjs/storybook/pull/14950))
|
||||
- Controls: Add automatic ids to all controls ([#14296](https://github.com/storybookjs/storybook/pull/14296))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Improve e2e script ([#14980](https://github.com/storybookjs/storybook/pull/14980))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- React: Upgrade to @storybook/react-docgen-typescript-plugin ([#14991](https://github.com/storybookjs/storybook/pull/14991))
|
||||
|
||||
## 6.3.0-alpha.35 (May 20, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Feature flag for builtin stories.json support ([#14992](https://github.com/storybookjs/storybook/pull/14992))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- React: Upgrade to @storybook/react-docgen-typescript-plugin ([#14991](https://github.com/storybookjs/storybook/pull/14991))
|
||||
|
||||
## 6.3.0-alpha.34 (May 19, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Single story option in iframe view ([#14875](https://github.com/storybookjs/storybook/pull/14875))
|
||||
- Lit: Add typings for @storybook/lit ([#14962](https://github.com/storybookjs/storybook/pull/14962))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump telejson to 5.3.2 to use the ESM version ([#14983](https://github.com/storybookjs/storybook/pull/14983))
|
||||
- CSF: Add undeclared dependency `regenerator-runtime` ([#14979](https://github.com/storybookjs/storybook/pull/14979))
|
||||
|
||||
## 6.3.0-alpha.33 (May 18, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix controls without options and add warning ([#14976](https://github.com/storybookjs/storybook/pull/14976))
|
||||
- Core: Add remaining sbmodern exports ([#14977](https://github.com/storybookjs/storybook/pull/14977))
|
||||
|
||||
## 6.3.0-alpha.32 (May 18, 2021)
|
||||
|
||||
Failed NPM publish
|
||||
|
||||
## 6.3.0-alpha.31 (May 18, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Angular: Pass bootstrapOptions to angular ([#14852](https://github.com/storybookjs/storybook/pull/14852))
|
||||
- Controls: Update all controls to have explicit handling for `undefined` ([#14899](https://github.com/storybookjs/storybook/pull/14899))
|
||||
- Core: Add args enhancers + use in addon-actions ([#14901](https://github.com/storybookjs/storybook/pull/14901))
|
||||
- Addon-docs: Remove all defaultValue eval-ing ([#14900](https://github.com/storybookjs/storybook/pull/14900))
|
||||
|
||||
## 6.3.0-alpha.30 (May 18, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Built-in static `stories.json` support ([#14945](https://github.com/storybookjs/storybook/pull/14945))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Add modern build target to apps aka frameworks ([#14967](https://github.com/storybookjs/storybook/pull/14967))
|
||||
- Build: Increase CI `build` step to XL ([#14970](https://github.com/storybookjs/storybook/pull/14970))
|
||||
|
||||
## 6.3.0-alpha.29 (May 17, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Provide option to hide default toolbar tools ([#14897](https://github.com/storybookjs/storybook/pull/14897))
|
||||
- Core: Support modern browser target ([#14954](https://github.com/storybookjs/storybook/pull/14954))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Remove updateGlobals warning message ([#14949](https://github.com/storybookjs/storybook/pull/14949))
|
||||
- Controls: Tighten color control inference heuristic and test ([#14684](https://github.com/storybookjs/storybook/pull/14684))
|
||||
|
||||
## 6.3.0-alpha.28 (May 15, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Keep Webpack 4 builder for Angular lower than 12 ([#14942](https://github.com/storybookjs/storybook/pull/14942))
|
||||
|
||||
## 6.3.0-alpha.27 (May 14, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add Angular 12 + docs inline rendering support ([#14928](https://github.com/storybookjs/storybook/pull/14928))
|
||||
|
||||
## 6.3.0-alpha.26 (May 14, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-controls: Fix duplicate color swatch id's in Color control ([#14925](https://github.com/storybookjs/storybook/pull/14925))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Add preamble instructions to `sb repro` ([#14924](https://github.com/storybookjs/storybook/pull/14924))
|
||||
- Webpack5: Always set `resolve.fallback.crypto` to `false` ([#14914](https://github.com/storybookjs/storybook/pull/14914))
|
||||
- Build: Add missing dependencies ([#14919](https://github.com/storybookjs/storybook/pull/14919))
|
||||
- Build: Put E2E tests back on track ([#14917](https://github.com/storybookjs/storybook/pull/14917))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Addon-storyshots: Make @storybook/react dependency optional ([#14891](https://github.com/storybookjs/storybook/pull/14891))
|
||||
|
||||
## 6.3.0-alpha.25 (May 13, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Builder-Webpack5: Use native features instead of plugins ([#14281](https://github.com/storybookjs/storybook/pull/14281))
|
||||
- CLI: Repro refinements per feedback ([#14888](https://github.com/storybookjs/storybook/pull/14888))
|
||||
|
||||
## 6.3.0-alpha.24 (May 11, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add repro/link commands for creating/running reproductions ([#14594](https://github.com/storybookjs/storybook/pull/14594))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Only show addons in mobile if docsOnly is false ([#14810](https://github.com/storybookjs/storybook/pull/14810))
|
||||
|
||||
## 6.3.0-alpha.23 (May 11, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix tab display when there is only one tab ([#14790](https://github.com/storybookjs/storybook/pull/14790))
|
||||
- Addon-actions: Display DOM Event/CustomEvent data ([#14879](https://github.com/storybookjs/storybook/pull/14879))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Build: Remove outdated `@types/cpy` dependency ([#14880](https://github.com/storybookjs/storybook/pull/14880))
|
||||
|
||||
## 6.3.0-alpha.22 (May 10, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Lit: Initial lit2 support ([#14600](https://github.com/storybookjs/storybook/pull/14600))
|
||||
- React: Add ComponentStory convenience type ([#14780](https://github.com/storybookjs/storybook/pull/14780))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Extract addon-knobs from monorepo ([#14874](https://github.com/storybookjs/storybook/pull/14874))
|
||||
- Extract addon-graphql from monorepo ([#14862](https://github.com/storybookjs/storybook/pull/14862))
|
||||
- Extract design-assets from monorepo ([#14854](https://github.com/storybookjs/storybook/pull/14854))
|
||||
- Fix renovate config ([#14868](https://github.com/storybookjs/storybook/pull/14868))
|
||||
- Extract addon-events from monorepo ([#14855](https://github.com/storybookjs/storybook/pull/14855))
|
||||
- Extract addon-cssresources from monorepo ([#14860](https://github.com/storybookjs/storybook/pull/14860))
|
||||
- Extract addon-queryparams from monorepo ([#14861](https://github.com/storybookjs/storybook/pull/14861))
|
||||
- CLI: Use arg-parser defaults ([#14857](https://github.com/storybookjs/storybook/pull/14857))
|
||||
- Build: Remove MDX to make chromatic/IE pass in CI ([#14863](https://github.com/storybookjs/storybook/pull/14863))
|
||||
|
||||
## 6.3.0-alpha.21 (May 7, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-docs: Fix doc blocks imports to import from ESM/CJS ([#14841](https://github.com/storybookjs/storybook/pull/14841))
|
||||
- Refactor aurelia into its own repo ([#14801](https://github.com/storybookjs/storybook/pull/14801))
|
||||
- Delete unmaintained dev-kits ([#14832](https://github.com/storybookjs/storybook/pull/14832))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Storyshots: Make `vue-jest` and `svelte` optional peer dependencies ([#14835](https://github.com/storybookjs/storybook/pull/14835))
|
||||
|
||||
## 6.3.0-alpha.20 (May 6, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Vue3: Fix components in decorators ([#14809](https://github.com/storybookjs/storybook/pull/14809))
|
||||
- Accessibility: Adds title to close button on settings page ([#14808](https://github.com/storybookjs/storybook/pull/14808))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Refactor marionette into its own repo ([#14802](https://github.com/storybookjs/storybook/pull/14802))
|
||||
- Refactor rax to its own repo ([#14799](https://github.com/storybookjs/storybook/pull/14799))
|
||||
- Refactor marko into its own repo ([#14803](https://github.com/storybookjs/storybook/pull/14803))
|
||||
- Refactor mithril into its own repo ([#14804](https://github.com/storybookjs/storybook/pull/14804))
|
||||
- Refactor riot to its own repo ([#14800](https://github.com/storybookjs/storybook/pull/14800))
|
||||
- UI: Styling updates ([#14820](https://github.com/storybookjs/storybook/pull/14820))
|
||||
|
||||
## 6.3.0-alpha.19 (May 3, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
449
CONTRIBUTING.md
449
CONTRIBUTING.md
@ -1,450 +1,5 @@
|
||||
<h1>Contributing to Storybook</h1>
|
||||
|
||||
- [Issues](#issues)
|
||||
- [Testing against `master`](#testing-against-master)
|
||||
- [1. Download the latest version of this project, and build it:](#1-download-the-latest-version-of-this-project-and-build-it)
|
||||
- [2a. Run unit tests](#2a-run-unit-tests)
|
||||
- [Core & Examples Tests](#core--examples-tests)
|
||||
- [2b. Run Linter](#2b-run-linter)
|
||||
- [2c. Run Cypress tests](#2c-run-cypress-tests)
|
||||
- [Reproductions](#reproductions)
|
||||
- [In the monorepo](#in-the-monorepo)
|
||||
- [Outside the monorepo](#outside-the-monorepo)
|
||||
- [Updating Tests](#updating-tests)
|
||||
- [Pull Requests (PRs)](#pull-requests-prs)
|
||||
- [Reviewing PRs](#reviewing-prs)
|
||||
- [Issue Triage](#issue-triage)
|
||||
- [Responding to issues](#responding-to-issues)
|
||||
- [Triaging issues](#triaging-issues)
|
||||
- [Closing issues](#closing-issues)
|
||||
- [Development Guide](#development-guide)
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [Initial Setup](#initial-setup)
|
||||
- [Bootstrapping everything](#bootstrapping-everything)
|
||||
- [Building specific packages](#building-specific-packages)
|
||||
- [Working with the kitchen sink apps](#working-with-the-kitchen-sink-apps)
|
||||
- [React and Vue](#react-and-vue)
|
||||
- [Working with your own app](#working-with-your-own-app)
|
||||
- [Linking Storybook](#linking-storybook)
|
||||
- [Connecting Your App To Storybook](#connecting-your-app-to-storybook)
|
||||
- [1. Setup storybook in your project](#1-setup-storybook-in-your-project)
|
||||
- [2. Link](#2-link)
|
||||
- [Verify your local version is working](#verify-your-local-version-is-working)
|
||||
- [Documentation](#documentation)
|
||||
- [Release Guide](#release-guide)
|
||||
- [Prerelease:](#prerelease)
|
||||
- [Full release:](#full-release)
|
||||
Please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/react/contribute/how-to-contribute).
|
||||
|
||||
Thanks for your interest in improving Storybook! We are a community-driven project and welcome contributions of all kinds: from discussion to documentation to bugfixes to feature improvements.
|
||||
|
||||
Please review this document to help to streamline the process and save everyone's precious time.
|
||||
|
||||
This repo uses yarn workspaces, so you should install `yarn` as the package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
|
||||
|
||||
## Issues
|
||||
|
||||
No software is bug-free. So, if you got an issue, follow these steps:
|
||||
|
||||
- Search the [issue list](https://github.com/storybookjs/storybook/issues) for current and old issues.
|
||||
- If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
|
||||
- If none of that is helping, create an issue with the following information:
|
||||
- Clear title (shorter is better).
|
||||
- Describe the issue in clear language.
|
||||
- Share error logs, screenshots and etc.
|
||||
- To speed up the issue fixing process, send us a sample repo with the issue you faced:
|
||||
|
||||
### Testing against `master`
|
||||
|
||||
To test your project against the current latest version of storybook, you can clone the repository and link it with `yarn`. Try following these steps:
|
||||
|
||||
#### 1. Download the latest version of this project, and build it:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn bootstrap
|
||||
```
|
||||
|
||||
> **_Note:_** On Windows, you may need to run `yarn` before `yarn bootstrap`!
|
||||
|
||||
The bootstrap command might ask which sections of the codebase you want to bootstrap. Unless you're doing something special you can keep the default.
|
||||
|
||||
You can also pick directly from CLI:
|
||||
|
||||
```sh
|
||||
yarn bootstrap --core
|
||||
```
|
||||
|
||||
#### 2a. Run unit tests
|
||||
|
||||
You can use one of the example projects in `examples/` to develop on.
|
||||
|
||||
This command will list all the suites and options for running tests.
|
||||
|
||||
```sh
|
||||
yarn test
|
||||
```
|
||||
|
||||
The options for running tests can be selected from the cli or be passed to `yarn test` with specific parameters. Available modes include `--watch`, `--coverage`, and `--runInBand`, which will respectively run tests in watch mode, output code coverage, and run selected test suites serially in the current process.
|
||||
|
||||
You can use the `--update` flag (or `jest -u`) to update snapshots or screenshots as needed.
|
||||
|
||||
> **_Note:_** On Windows, remember to make sure git config `core.autocrlf` is set to false, in order to not override EOL in snapshots ( `git config --global core.autocrlf false` to set it globally). It is also recommended to run tests from WSL2 to avoid errors with unix-style paths.
|
||||
|
||||
You can also pick suites from CLI. Suites available are listed below.
|
||||
|
||||
##### Core & Examples Tests
|
||||
|
||||
`yarn test`
|
||||
|
||||
This option executes tests from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
|
||||
Before the tests are run, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`
|
||||
|
||||
#### 2b. Run Linter
|
||||
|
||||
We use eslint as a linter for all code (including typescript code).
|
||||
|
||||
All you have to run is:
|
||||
|
||||
```sh
|
||||
yarn lint
|
||||
```
|
||||
|
||||
It can be immensely helpful to get feedback in your editor, if you're using VsCode, you should install the `eslint` plugin and configure it with these settings:
|
||||
|
||||
```json
|
||||
{
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"eslint.packageManager": "yarn",
|
||||
"eslint.options": {
|
||||
"cache": true,
|
||||
"cacheLocation": ".cache/eslint",
|
||||
"extensions": [".js", ".jsx", ".json", ".html", ".ts", ".tsx", ".mjs"]
|
||||
},
|
||||
"eslint.alwaysShowStatus": true
|
||||
}
|
||||
```
|
||||
|
||||
This should enable auto-fix for all source files, and give linting warnings and errors within your editor.
|
||||
|
||||
### 2c. Run Cypress tests
|
||||
|
||||
First make sure the repo is bootstrapped.
|
||||
|
||||
Then run `yarn build-storybooks`, this creates a static website from all examples.
|
||||
|
||||
Then run `yarn serve-storybooks`, this will run the static site on the port cypress expects.
|
||||
|
||||
Then run `yarn add cypress -W --optional`. When this has completed cypress should be installed on your system. If it is already on your system, this step can be skipped.
|
||||
|
||||
Then run `yarn cypress open` if you want to see the tests run in the UI, or `yarn cypress run` to run the tests headless.
|
||||
|
||||
### Reproductions
|
||||
|
||||
#### In the monorepo
|
||||
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
|
||||
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
|
||||
|
||||
```sh
|
||||
# Download and build this repository:
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn
|
||||
yarn bootstrap --core
|
||||
|
||||
# make changes to try and reproduce the problem, such as adding components + stories
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn storybook
|
||||
|
||||
# see if you can see the problem, if so, commit it:
|
||||
git checkout "branch-describing-issue"
|
||||
git add -A
|
||||
git commit -m "reproduction for issue #123"
|
||||
|
||||
# fork the storybook repo to your account, then add the resulting remote
|
||||
git remote add <your-username> https://github.com/<your-username>/storybook.git
|
||||
git push -u <your-username> next
|
||||
```
|
||||
|
||||
If you follow that process, you can then link to the GitHub repository in the issue. See <https://github.com/storybookjs/storybook/issues/708#issuecomment-290589886> for an example.
|
||||
|
||||
**_Note:_** If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however, you can still modify storybook's to mirror your app's version of the storybook. Alternatively, use `yarn eject` in the CRA app to get a modifiable webpack config.
|
||||
|
||||
#### Outside the monorepo
|
||||
|
||||
Sometimes your storybook is deeply ingrained in your own setup and it's hard to create a minimal viable reproduction somewhere else.
|
||||
|
||||
Inside the storybook repo we have a script that allows you to test the packages inside this repo in your own separate project.
|
||||
|
||||
You can use `npm link` on all packages, but npm linking is cumbersome and has subtle differences from what happens in a registry-based installation.
|
||||
So the way our script works is that it:
|
||||
|
||||
- sets up a npm registry running on your own local machine
|
||||
- changes your default registry to this local one
|
||||
- builds all packages in the storybook repo
|
||||
- publishes all packages as latest
|
||||
|
||||
Our script leaves the local registry running, for **as long as you keep it running** you can install storybook packages from this local registry.
|
||||
|
||||
- Navigate to your own project and then change `package.json` so the storybook packages match the version of the one you just published.
|
||||
- Then you can install using `yarn` or `npm`
|
||||
- Start using your storybook as normally.
|
||||
|
||||
If you've made a change to storybook's codebase and would want this change to be reflected in your app:
|
||||
|
||||
- Ensure the storybook packages are transpiled, by either having run `yarn dev` or `yarn bootstrap --core`.
|
||||
- Go to the terminal where the local registry is running and press `<Enter>`. This will kick off a new publish.
|
||||
- Run the install procedure again in your local repo, (you may need to clean out node_modules first).
|
||||
- Restart your storybook.
|
||||
|
||||
### Updating Tests
|
||||
|
||||
Before any contributions are submitted in a PR, make sure to add or update meaningful tests. A PR that has failing tests will be regarded as a “Work in Progress” and will not be merged until all tests pass.
|
||||
|
||||
When creating new unit test files, the tests should adhere to a particular folder structure and naming convention, as defined below.
|
||||
|
||||
```sh
|
||||
# Proper naming convention and structure for js tests files
|
||||
+-- parentFolder
|
||||
| +-- [filename].js
|
||||
| +-- [filename].test.js
|
||||
```
|
||||
|
||||
## Pull Requests (PRs)
|
||||
|
||||
We welcome all contributions. There are many ways you can help us. This is few of those ways:
|
||||
|
||||
Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if tests are failing. If you need any help, the best way is to [join the discord server and ask in the maintenance channel](https://discord.gg/storybook).
|
||||
|
||||
### Reviewing PRs
|
||||
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/master/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access then you can merge the PR after making those changes.
|
||||
|
||||
> **_Note:_** Although the latest stable version of storybook corresponds to the `master` branch, nearly all Storybook development happens in the `next` branch. If you submit a PR, branch off `next` and target your PR to `next`.
|
||||
|
||||
**As a PR reviewer**, you should read through the changes and comment on any potential problems. If you see something cool, a kind word never hurts either! Additionally, you should follow the testing instructions and manually test the changes. If the instructions are missing, unclear, or overly complex, feel free to request better instructions from the submitter. Unless the PR is tagged with the `do not merge` label, if you approve the review and there is no other required discussion or changes, you should also go ahead and merge the PR.
|
||||
|
||||
## Issue Triage
|
||||
|
||||
If you are looking for a way to help the project, triaging issues is a great place to start. Here's how you can help:
|
||||
|
||||
### Responding to issues
|
||||
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone who has a similar question. Also in the future if anyone has that same question they can easily find it by searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybookjs/storybook/blob/master/CONTRIBUTING.md#reproductions).
|
||||
|
||||
### Triaging issues
|
||||
|
||||
Once you've helped out on a few issues, if you'd like triage access you can help label issues and respond to reporters.
|
||||
|
||||
We use the following label scheme to categorize issues:
|
||||
|
||||
- **type** - `bug`, `feature`, `question / support`, `discussion`, `dependencies`, `maintenance`.
|
||||
- **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc.
|
||||
- **status** - `needs reproduction`, `needs PR`, `in progress`, etc.
|
||||
|
||||
All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
|
||||
|
||||
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can see all of the issues for a particular area, and keep the total number of open issues under control.
|
||||
|
||||
For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the GitHub docs.
|
||||
|
||||
If an issue is a `bug`, and it doesn't have a clear reproduction that you have personally confirmed, label it `needs reproduction` and ask the author to try and create a reproduction, or have a go yourself.
|
||||
|
||||
### Closing issues
|
||||
|
||||
- Duplicate issues should be closed with a link to the original.
|
||||
- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline,
|
||||
it is reasonable to wait 2 weeks before closing).
|
||||
- `bug`s should be labelled `merged` when merged, and be closed when the issue is fixed and released.
|
||||
- `feature`s, `maintenance`s, `greenkeeper`s should be labelled `merged` when merged,
|
||||
and closed when released or if the feature is deemed not appropriate.
|
||||
- `question / support`s should be closed when the question has been answered.
|
||||
If the questioner drops offline, a reasonable period to wait is two weeks.
|
||||
- `discussion`s should be closed at a maintainer's discretion.
|
||||
|
||||
## Development Guide
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Please have the **_latest_** stable versions of the following on your machine
|
||||
|
||||
- node
|
||||
- yarn
|
||||
|
||||
### Initial Setup
|
||||
|
||||
If you run into trouble here, make sure your node, npm, and **_yarn_** are on the latest versions (yarn at least v1.3.2).
|
||||
|
||||
1. `cd ~` (optional)
|
||||
2. `git clone https://github.com/storybookjs/storybook.git` _bonus_: use your own fork for this step
|
||||
3. `cd storybook`
|
||||
4. `yarn bootstrap --core`
|
||||
|
||||
> **_Note:_** On Windows, you may need to run `yarn` before `yarn bootstrap` (between steps 3 and 4).
|
||||
|
||||
This builds the entire project statically, but when you're updating Storybook code it's nice to see those changes show up in the example apps under `examples`. There are two ways to do this:
|
||||
|
||||
1. `yarn dev`
|
||||
2. OR `yarn build <package1> <package2> --watch`
|
||||
|
||||
The former watches ALL packages, which is extremely slow. The latter only watches a fixed list of packages, e.g. `yarn build add-docs components --watch` to build `@storybook/addon-docs` and `@storybook/components`. This is much more practical on slower machines or if you know ahead of time the packages you'll be updating.
|
||||
|
||||
#### Bootstrapping everything
|
||||
|
||||
_This method is slow_
|
||||
|
||||
1. `yarn bootstrap --all`
|
||||
2. Take a break 🍵
|
||||
3. `yarn test` (to verify everything worked)
|
||||
|
||||
#### Building specific packages
|
||||
|
||||
If you're working on one or several packages, for every change that you make, you have to rebuild those packages. To make the process easier, there is a CLI command for that:
|
||||
|
||||
- Run `yarn build` to bring you a list of packages to select from. There will be also an option to run in watch mode.
|
||||
- Run `yarn build <package-name>` to build that package specifically. \
|
||||
For the package name, use its short version. Example: for `@storybook/addon-docs`, run `yarn build addon-docs`.
|
||||
- Run `yarn build --all` to build everything.
|
||||
- Add `--watch` to run automatically in watch mode if you are either building a selection of packages by name or building all.
|
||||
Example: `yarn build core addon-docs --watch` or `yarn build --all --watch`.
|
||||
|
||||
### Working with the kitchen sink apps
|
||||
|
||||
Within the `examples` folder of the Storybook repo, you will find kitchen sink examples of storybook implementations for the various platforms that storybook supports.
|
||||
|
||||
Not only do these show many of the options and add-ons available, they are also automatically linked to all the development packages. We highly encourage you to use these to develop/test contributions on.
|
||||
|
||||
#### React and Vue
|
||||
|
||||
1. `cd examples/official-storybook`
|
||||
2. `yarn storybook`
|
||||
3. Verify that your local version works
|
||||
|
||||
### Working with your own app
|
||||
|
||||
#### Linking Storybook
|
||||
|
||||
Storybook is broken up into sub-projects that you can install as you need them. For this example, we will be working with `@storybook/react`.
|
||||
|
||||
**_Note:_** You need to `yarn link` from inside the subproject you are working on **_NOT_** the storybook root directory.
|
||||
|
||||
1. `cd app/react`
|
||||
2. `yarn link`
|
||||
|
||||
#### Connecting Your App To Storybook
|
||||
|
||||
**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by linking each addon you want to use.
|
||||
This applies for the kitchen sink apps as well as your own projects.
|
||||
|
||||
_Make sure `yarn dev` is running_
|
||||
|
||||
##### 1. Setup storybook in your project
|
||||
|
||||
First we are going to install storybook, then we are going to link `@storybook/react` into our project. This will replace `node_modules/@storybook/react` with a symlink to our local version of storybook.
|
||||
|
||||
1. `getstorybook`
|
||||
2. `yarn storybook`
|
||||
3. Verify that your local version works
|
||||
|
||||
##### 2. Link
|
||||
|
||||
**_Note:_** This process is the same for `@storybook/vue`, `@storybook/addon-foo`, etc
|
||||
|
||||
1. Go to your storybook _root_ directory
|
||||
2. `yarn dev`
|
||||
3. Wait until the output stops (changes you make will be transpiled into dist and logged here)
|
||||
4. Go to your storybook-sandbox-app directory
|
||||
5. `yarn link @storybook/react`
|
||||
6. `yarn storybook`
|
||||
|
||||
#### Verify your local version is working
|
||||
|
||||
You should now have a working storybook dev environment up and running.
|
||||
|
||||
Save and go to `http://localhost:9011` (or wherever storybook is running).
|
||||
|
||||
If you don't see the changes rerun `yarn storybook` again in your sandbox app.
|
||||
|
||||
### Documentation
|
||||
|
||||
The documentation for Storybook is served by the [frontpage](https://github.com/storybookjs/frontpage), but the docs files are in this repository.
|
||||
|
||||
To see changes in a development version of the docs, use the "linking" method documented [here](https://github.com/storybookjs/frontpage#docs-content).
|
||||
|
||||
## Release Guide
|
||||
|
||||
This section is for Storybook maintainers who will be creating releases. It assumes:
|
||||
|
||||
- yarn >= 1.3.2
|
||||
- you've yarn linked `pr-log` from <https://github.com/storybookjs/pr-log/pull/2>
|
||||
|
||||
The current manual release sequence is as follows:
|
||||
|
||||
- Generate a changelog and verify the release by hand
|
||||
- Push the changelog to master or the release branch
|
||||
- Clean, build and publish the release
|
||||
- Cut and paste the changelog to the [GitHub release page](https://github.com/storybookjs/storybook/releases), and mark it as a (pre-) release
|
||||
|
||||
**_Note:_** The very first time you publish a scoped package (`@storybook/x`) you need to make sure that its package.json contains the following
|
||||
|
||||
```js
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
```
|
||||
|
||||
This sequence applies to both releases and pre-releases, but differs slightly between the two.
|
||||
|
||||
**_Note:_ This is a work in progress. Don't try this unless you know what you're doing. We hope to automate this in CI, so this process is designed with that in mind.**
|
||||
|
||||
#### Prerelease:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/next.
|
||||
git checkout next
|
||||
git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
# generates a Next section
|
||||
yarn changelog:next x.y.z-alpha.a
|
||||
|
||||
# Edit the changelog/PRs as needed, then commit
|
||||
git commit -m "x.y.z-alpha.a changelog"
|
||||
|
||||
# clean build
|
||||
yarn bootstrap --reset --core
|
||||
|
||||
# publish and tag the release
|
||||
yarn run publish:next
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybookjs/storybook/releases
|
||||
```
|
||||
|
||||
#### Full release:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/master.
|
||||
git checkout master
|
||||
git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
# generates a vNext section
|
||||
yarn changelog x.y.z
|
||||
|
||||
# Edit the changelog/PRs as needed, then commit
|
||||
git commit -m "x.y.z changelog"
|
||||
|
||||
# clean build
|
||||
yarn bootstrap --reset --core
|
||||
|
||||
# publish and tag the release
|
||||
yarn run publish:latest
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybookjs/storybook/releases
|
||||
```
|
||||
During the transition, we're also preserving our [OLD, out of date contributing guide](./CONTRIBUTING.old.md) in parallel.
|
||||
|
||||
450
CONTRIBUTING.old.md
Normal file
450
CONTRIBUTING.old.md
Normal file
@ -0,0 +1,450 @@
|
||||
<h1>Contributing to Storybook</h1>
|
||||
|
||||
- [Issues](#issues)
|
||||
- [Testing against `master`](#testing-against-master)
|
||||
- [1. Download the latest version of this project, and build it:](#1-download-the-latest-version-of-this-project-and-build-it)
|
||||
- [2a. Run unit tests](#2a-run-unit-tests)
|
||||
- [Core & Examples Tests](#core--examples-tests)
|
||||
- [2b. Run Linter](#2b-run-linter)
|
||||
- [2c. Run Cypress tests](#2c-run-cypress-tests)
|
||||
- [Reproductions](#reproductions)
|
||||
- [In the monorepo](#in-the-monorepo)
|
||||
- [Outside the monorepo](#outside-the-monorepo)
|
||||
- [Updating Tests](#updating-tests)
|
||||
- [Pull Requests (PRs)](#pull-requests-prs)
|
||||
- [Reviewing PRs](#reviewing-prs)
|
||||
- [Issue Triage](#issue-triage)
|
||||
- [Responding to issues](#responding-to-issues)
|
||||
- [Triaging issues](#triaging-issues)
|
||||
- [Closing issues](#closing-issues)
|
||||
- [Development Guide](#development-guide)
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [Initial Setup](#initial-setup)
|
||||
- [Bootstrapping everything](#bootstrapping-everything)
|
||||
- [Building specific packages](#building-specific-packages)
|
||||
- [Working with the kitchen sink apps](#working-with-the-kitchen-sink-apps)
|
||||
- [React and Vue](#react-and-vue)
|
||||
- [Working with your own app](#working-with-your-own-app)
|
||||
- [Linking Storybook](#linking-storybook)
|
||||
- [Connecting Your App To Storybook](#connecting-your-app-to-storybook)
|
||||
- [1. Setup storybook in your project](#1-setup-storybook-in-your-project)
|
||||
- [2. Link](#2-link)
|
||||
- [Verify your local version is working](#verify-your-local-version-is-working)
|
||||
- [Documentation](#documentation)
|
||||
- [Release Guide](#release-guide)
|
||||
- [Prerelease:](#prerelease)
|
||||
- [Full release:](#full-release)
|
||||
|
||||
Thanks for your interest in improving Storybook! We are a community-driven project and welcome contributions of all kinds: from discussion to documentation to bugfixes to feature improvements.
|
||||
|
||||
Please review this document to help to streamline the process and save everyone's precious time.
|
||||
|
||||
This repo uses yarn workspaces, so you should install `yarn` as the package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
|
||||
|
||||
## Issues
|
||||
|
||||
No software is bug-free. So, if you got an issue, follow these steps:
|
||||
|
||||
- Search the [issue list](https://github.com/storybookjs/storybook/issues) for current and old issues.
|
||||
- If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
|
||||
- If none of that is helping, create an issue with the following information:
|
||||
- Clear title (shorter is better).
|
||||
- Describe the issue in clear language.
|
||||
- Share error logs, screenshots and etc.
|
||||
- To speed up the issue fixing process, send us a sample repo with the issue you faced:
|
||||
|
||||
### Testing against `master`
|
||||
|
||||
To test your project against the current latest version of storybook, you can clone the repository and link it with `yarn`. Try following these steps:
|
||||
|
||||
#### 1. Download the latest version of this project, and build it:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn bootstrap
|
||||
```
|
||||
|
||||
> **_Note:_** On Windows, you may need to run `yarn` before `yarn bootstrap`!
|
||||
|
||||
The bootstrap command might ask which sections of the codebase you want to bootstrap. Unless you're doing something special you can keep the default.
|
||||
|
||||
You can also pick directly from CLI:
|
||||
|
||||
```sh
|
||||
yarn bootstrap --core
|
||||
```
|
||||
|
||||
#### 2a. Run unit tests
|
||||
|
||||
You can use one of the example projects in `examples/` to develop on.
|
||||
|
||||
This command will list all the suites and options for running tests.
|
||||
|
||||
```sh
|
||||
yarn test
|
||||
```
|
||||
|
||||
The options for running tests can be selected from the cli or be passed to `yarn test` with specific parameters. Available modes include `--watch`, `--coverage`, and `--runInBand`, which will respectively run tests in watch mode, output code coverage, and run selected test suites serially in the current process.
|
||||
|
||||
You can use the `--update` flag (or `jest -u`) to update snapshots or screenshots as needed.
|
||||
|
||||
> **_Note:_** On Windows, remember to make sure git config `core.autocrlf` is set to false, in order to not override EOL in snapshots ( `git config --global core.autocrlf false` to set it globally). It is also recommended to run tests from WSL2 to avoid errors with unix-style paths.
|
||||
|
||||
You can also pick suites from CLI. Suites available are listed below.
|
||||
|
||||
##### Core & Examples Tests
|
||||
|
||||
`yarn test`
|
||||
|
||||
This option executes tests from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
|
||||
Before the tests are run, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`
|
||||
|
||||
#### 2b. Run Linter
|
||||
|
||||
We use eslint as a linter for all code (including typescript code).
|
||||
|
||||
All you have to run is:
|
||||
|
||||
```sh
|
||||
yarn lint
|
||||
```
|
||||
|
||||
It can be immensely helpful to get feedback in your editor, if you're using VsCode, you should install the `eslint` plugin and configure it with these settings:
|
||||
|
||||
```json
|
||||
{
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"eslint.packageManager": "yarn",
|
||||
"eslint.options": {
|
||||
"cache": true,
|
||||
"cacheLocation": ".cache/eslint",
|
||||
"extensions": [".js", ".jsx", ".json", ".html", ".ts", ".tsx", ".mjs"]
|
||||
},
|
||||
"eslint.alwaysShowStatus": true
|
||||
}
|
||||
```
|
||||
|
||||
This should enable auto-fix for all source files, and give linting warnings and errors within your editor.
|
||||
|
||||
### 2c. Run Cypress tests
|
||||
|
||||
First make sure the repo is bootstrapped.
|
||||
|
||||
Then run `yarn build-storybooks`, this creates a static website from all examples.
|
||||
|
||||
Then run `yarn serve-storybooks`, this will run the static site on the port cypress expects.
|
||||
|
||||
Then run `yarn add cypress -W --optional`. When this has completed cypress should be installed on your system. If it is already on your system, this step can be skipped.
|
||||
|
||||
Then run `yarn cypress open` if you want to see the tests run in the UI, or `yarn cypress run` to run the tests headless.
|
||||
|
||||
### Reproductions
|
||||
|
||||
#### In the monorepo
|
||||
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
|
||||
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
|
||||
|
||||
```sh
|
||||
# Download and build this repository:
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn
|
||||
yarn bootstrap --core
|
||||
|
||||
# make changes to try and reproduce the problem, such as adding components + stories
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn storybook
|
||||
|
||||
# see if you can see the problem, if so, commit it:
|
||||
git checkout "branch-describing-issue"
|
||||
git add -A
|
||||
git commit -m "reproduction for issue #123"
|
||||
|
||||
# fork the storybook repo to your account, then add the resulting remote
|
||||
git remote add <your-username> https://github.com/<your-username>/storybook.git
|
||||
git push -u <your-username> next
|
||||
```
|
||||
|
||||
If you follow that process, you can then link to the GitHub repository in the issue. See <https://github.com/storybookjs/storybook/issues/708#issuecomment-290589886> for an example.
|
||||
|
||||
**_Note:_** If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however, you can still modify storybook's to mirror your app's version of the storybook. Alternatively, use `yarn eject` in the CRA app to get a modifiable webpack config.
|
||||
|
||||
#### Outside the monorepo
|
||||
|
||||
Sometimes your storybook is deeply ingrained in your own setup and it's hard to create a minimal viable reproduction somewhere else.
|
||||
|
||||
Inside the storybook repo we have a script that allows you to test the packages inside this repo in your own separate project.
|
||||
|
||||
You can use `npm link` on all packages, but npm linking is cumbersome and has subtle differences from what happens in a registry-based installation.
|
||||
So the way our script works is that it:
|
||||
|
||||
- sets up a npm registry running on your own local machine
|
||||
- changes your default registry to this local one
|
||||
- builds all packages in the storybook repo
|
||||
- publishes all packages as latest
|
||||
|
||||
Our script leaves the local registry running, for **as long as you keep it running** you can install storybook packages from this local registry.
|
||||
|
||||
- Navigate to your own project and then change `package.json` so the storybook packages match the version of the one you just published.
|
||||
- Then you can install using `yarn` or `npm`
|
||||
- Start using your storybook as normally.
|
||||
|
||||
If you've made a change to storybook's codebase and would want this change to be reflected in your app:
|
||||
|
||||
- Ensure the storybook packages are transpiled, by either having run `yarn dev` or `yarn bootstrap --core`.
|
||||
- Go to the terminal where the local registry is running and press `<Enter>`. This will kick off a new publish.
|
||||
- Run the install procedure again in your local repo, (you may need to clean out node_modules first).
|
||||
- Restart your storybook.
|
||||
|
||||
### Updating Tests
|
||||
|
||||
Before any contributions are submitted in a PR, make sure to add or update meaningful tests. A PR that has failing tests will be regarded as a “Work in Progress” and will not be merged until all tests pass.
|
||||
|
||||
When creating new unit test files, the tests should adhere to a particular folder structure and naming convention, as defined below.
|
||||
|
||||
```sh
|
||||
# Proper naming convention and structure for js tests files
|
||||
+-- parentFolder
|
||||
| +-- [filename].js
|
||||
| +-- [filename].test.js
|
||||
```
|
||||
|
||||
## Pull Requests (PRs)
|
||||
|
||||
We welcome all contributions. There are many ways you can help us. This is few of those ways:
|
||||
|
||||
Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if tests are failing. If you need any help, the best way is to [join the discord server and ask in the maintenance channel](https://discord.gg/storybook).
|
||||
|
||||
### Reviewing PRs
|
||||
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/master/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access then you can merge the PR after making those changes.
|
||||
|
||||
> **_Note:_** Although the latest stable version of storybook corresponds to the `master` branch, nearly all Storybook development happens in the `next` branch. If you submit a PR, branch off `next` and target your PR to `next`.
|
||||
|
||||
**As a PR reviewer**, you should read through the changes and comment on any potential problems. If you see something cool, a kind word never hurts either! Additionally, you should follow the testing instructions and manually test the changes. If the instructions are missing, unclear, or overly complex, feel free to request better instructions from the submitter. Unless the PR is tagged with the `do not merge` label, if you approve the review and there is no other required discussion or changes, you should also go ahead and merge the PR.
|
||||
|
||||
## Issue Triage
|
||||
|
||||
If you are looking for a way to help the project, triaging issues is a great place to start. Here's how you can help:
|
||||
|
||||
### Responding to issues
|
||||
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone who has a similar question. Also in the future if anyone has that same question they can easily find it by searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybookjs/storybook/blob/master/CONTRIBUTING.md#reproductions).
|
||||
|
||||
### Triaging issues
|
||||
|
||||
Once you've helped out on a few issues, if you'd like triage access you can help label issues and respond to reporters.
|
||||
|
||||
We use the following label scheme to categorize issues:
|
||||
|
||||
- **type** - `bug`, `feature`, `question / support`, `discussion`, `dependencies`, `maintenance`.
|
||||
- **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc.
|
||||
- **status** - `needs reproduction`, `needs PR`, `in progress`, etc.
|
||||
|
||||
All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
|
||||
|
||||
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can see all of the issues for a particular area, and keep the total number of open issues under control.
|
||||
|
||||
For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the GitHub docs.
|
||||
|
||||
If an issue is a `bug`, and it doesn't have a clear reproduction that you have personally confirmed, label it `needs reproduction` and ask the author to try and create a reproduction, or have a go yourself.
|
||||
|
||||
### Closing issues
|
||||
|
||||
- Duplicate issues should be closed with a link to the original.
|
||||
- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline,
|
||||
it is reasonable to wait 2 weeks before closing).
|
||||
- `bug`s should be labelled `merged` when merged, and be closed when the issue is fixed and released.
|
||||
- `feature`s, `maintenance`s, `greenkeeper`s should be labelled `merged` when merged,
|
||||
and closed when released or if the feature is deemed not appropriate.
|
||||
- `question / support`s should be closed when the question has been answered.
|
||||
If the questioner drops offline, a reasonable period to wait is two weeks.
|
||||
- `discussion`s should be closed at a maintainer's discretion.
|
||||
|
||||
## Development Guide
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Please have the **_latest_** stable versions of the following on your machine
|
||||
|
||||
- node
|
||||
- yarn
|
||||
|
||||
### Initial Setup
|
||||
|
||||
If you run into trouble here, make sure your node, npm, and **_yarn_** are on the latest versions (yarn at least v1.3.2).
|
||||
|
||||
1. `cd ~` (optional)
|
||||
2. `git clone https://github.com/storybookjs/storybook.git` _bonus_: use your own fork for this step
|
||||
3. `cd storybook`
|
||||
4. `yarn bootstrap --core`
|
||||
|
||||
> **_Note:_** On Windows, you may need to run `yarn` before `yarn bootstrap` (between steps 3 and 4).
|
||||
|
||||
This builds the entire project statically, but when you're updating Storybook code it's nice to see those changes show up in the example apps under `examples`. There are two ways to do this:
|
||||
|
||||
1. `yarn dev`
|
||||
2. OR `yarn build <package1> <package2> --watch`
|
||||
|
||||
The former watches ALL packages, which is extremely slow. The latter only watches a fixed list of packages, e.g. `yarn build add-docs components --watch` to build `@storybook/addon-docs` and `@storybook/components`. This is much more practical on slower machines or if you know ahead of time the packages you'll be updating.
|
||||
|
||||
#### Bootstrapping everything
|
||||
|
||||
_This method is slow_
|
||||
|
||||
1. `yarn bootstrap --all`
|
||||
2. Take a break 🍵
|
||||
3. `yarn test` (to verify everything worked)
|
||||
|
||||
#### Building specific packages
|
||||
|
||||
If you're working on one or several packages, for every change that you make, you have to rebuild those packages. To make the process easier, there is a CLI command for that:
|
||||
|
||||
- Run `yarn build` to bring you a list of packages to select from. There will be also an option to run in watch mode.
|
||||
- Run `yarn build <package-name>` to build that package specifically. \
|
||||
For the package name, use its short version. Example: for `@storybook/addon-docs`, run `yarn build addon-docs`.
|
||||
- Run `yarn build --all` to build everything.
|
||||
- Add `--watch` to run automatically in watch mode if you are either building a selection of packages by name or building all.
|
||||
Example: `yarn build core addon-docs --watch` or `yarn build --all --watch`.
|
||||
|
||||
### Working with the kitchen sink apps
|
||||
|
||||
Within the `examples` folder of the Storybook repo, you will find kitchen sink examples of storybook implementations for the various platforms that storybook supports.
|
||||
|
||||
Not only do these show many of the options and add-ons available, they are also automatically linked to all the development packages. We highly encourage you to use these to develop/test contributions on.
|
||||
|
||||
#### React and Vue
|
||||
|
||||
1. `cd examples/official-storybook`
|
||||
2. `yarn storybook`
|
||||
3. Verify that your local version works
|
||||
|
||||
### Working with your own app
|
||||
|
||||
#### Linking Storybook
|
||||
|
||||
Storybook is broken up into sub-projects that you can install as you need them. For this example, we will be working with `@storybook/react`.
|
||||
|
||||
**_Note:_** You need to `yarn link` from inside the subproject you are working on **_NOT_** the storybook root directory.
|
||||
|
||||
1. `cd app/react`
|
||||
2. `yarn link`
|
||||
|
||||
#### Connecting Your App To Storybook
|
||||
|
||||
**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by linking each addon you want to use.
|
||||
This applies for the kitchen sink apps as well as your own projects.
|
||||
|
||||
_Make sure `yarn dev` is running_
|
||||
|
||||
##### 1. Setup storybook in your project
|
||||
|
||||
First we are going to install storybook, then we are going to link `@storybook/react` into our project. This will replace `node_modules/@storybook/react` with a symlink to our local version of storybook.
|
||||
|
||||
1. `getstorybook`
|
||||
2. `yarn storybook`
|
||||
3. Verify that your local version works
|
||||
|
||||
##### 2. Link
|
||||
|
||||
**_Note:_** This process is the same for `@storybook/vue`, `@storybook/addon-foo`, etc
|
||||
|
||||
1. Go to your storybook _root_ directory
|
||||
2. `yarn dev`
|
||||
3. Wait until the output stops (changes you make will be transpiled into dist and logged here)
|
||||
4. Go to your storybook-sandbox-app directory
|
||||
5. `yarn link @storybook/react`
|
||||
6. `yarn storybook`
|
||||
|
||||
#### Verify your local version is working
|
||||
|
||||
You should now have a working storybook dev environment up and running.
|
||||
|
||||
Save and go to `http://localhost:9011` (or wherever storybook is running).
|
||||
|
||||
If you don't see the changes rerun `yarn storybook` again in your sandbox app.
|
||||
|
||||
### Documentation
|
||||
|
||||
The documentation for Storybook is served by the [frontpage](https://github.com/storybookjs/frontpage), but the docs files are in this repository.
|
||||
|
||||
To see changes in a development version of the docs, use the "linking" method documented [here](https://github.com/storybookjs/frontpage#docs-content).
|
||||
|
||||
## Release Guide
|
||||
|
||||
This section is for Storybook maintainers who will be creating releases. It assumes:
|
||||
|
||||
- yarn >= 1.3.2
|
||||
- you've yarn linked `pr-log` from <https://github.com/storybookjs/pr-log/pull/2>
|
||||
|
||||
The current manual release sequence is as follows:
|
||||
|
||||
- Generate a changelog and verify the release by hand
|
||||
- Push the changelog to master or the release branch
|
||||
- Clean, build and publish the release
|
||||
- Cut and paste the changelog to the [GitHub release page](https://github.com/storybookjs/storybook/releases), and mark it as a (pre-) release
|
||||
|
||||
**_Note:_** The very first time you publish a scoped package (`@storybook/x`) you need to make sure that its package.json contains the following
|
||||
|
||||
```js
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
```
|
||||
|
||||
This sequence applies to both releases and pre-releases, but differs slightly between the two.
|
||||
|
||||
**_Note:_ This is a work in progress. Don't try this unless you know what you're doing. We hope to automate this in CI, so this process is designed with that in mind.**
|
||||
|
||||
#### Prerelease:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/next.
|
||||
git checkout next
|
||||
git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
# generates a Next section
|
||||
yarn changelog:next x.y.z-alpha.a
|
||||
|
||||
# Edit the changelog/PRs as needed, then commit
|
||||
git commit -m "x.y.z-alpha.a changelog"
|
||||
|
||||
# clean build
|
||||
yarn bootstrap --reset --core
|
||||
|
||||
# publish and tag the release
|
||||
yarn run publish:next
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybookjs/storybook/releases
|
||||
```
|
||||
|
||||
#### Full release:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/master.
|
||||
git checkout master
|
||||
git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
# generates a vNext section
|
||||
yarn changelog x.y.z
|
||||
|
||||
# Edit the changelog/PRs as needed, then commit
|
||||
git commit -m "x.y.z changelog"
|
||||
|
||||
# clean build
|
||||
yarn bootstrap --reset --core
|
||||
|
||||
# publish and tag the release
|
||||
yarn run publish:latest
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybookjs/storybook/releases
|
||||
```
|
||||
135
MIGRATION.md
135
MIGRATION.md
@ -1,11 +1,22 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
|
||||
- [Webpack 5 manager build](#webpack-5-manager-build)
|
||||
- [Angular 12 upgrade](#angular-12-upgrade)
|
||||
- [Lit support](#lit-support)
|
||||
- [6.3 deprecations](#63-deprecations)
|
||||
- [Deprecated addon-knobs](#deprecated-addon-knobs)
|
||||
- [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
|
||||
- [Deprecated `argType.defaultValue`](#deprecated-argtypedefaultvalue)
|
||||
- [Deprecated layout URL params](#deprecated-layout-url-params)
|
||||
- [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
|
||||
- [MDX pattern tweaked](#mdx-pattern-tweaked)
|
||||
- [6.2 Angular overhaul](#62-angular-overhaul)
|
||||
- [New Angular storyshots format](#new-angular-storyshots-format)
|
||||
- [Deprecated Angular story component](#deprecated-angular-story-component)
|
||||
- [New Angular renderer](#new-angular-renderer)
|
||||
- [Components without selectors](#components-without-selectors)
|
||||
- [Packages now available as ESModules](#packages-now-available-as-esmodules)
|
||||
- [6.2 Deprecations](#62-deprecations)
|
||||
- [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
|
||||
- [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins)
|
||||
@ -151,6 +162,109 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## From version 6.2.x to 6.3.0
|
||||
|
||||
### Webpack 5 manager build
|
||||
|
||||
Storybook 6.2 introduced **experimental** webpack5 support for building user components. Storybook 6.3 also supports building the manager UI in webpack 5 to avoid strange hoisting issues.
|
||||
|
||||
If you're upgrading from 6.2 and already using the experimental webpack5 feature, this might be a breaking change (hence the 'experimental' label) and you should try adding the manager builder:
|
||||
|
||||
```shell
|
||||
yarn add @storybook/manager-webpack5 --dev
|
||||
# Or
|
||||
npm install @storybook/manager-webpack5 --save-dev
|
||||
```
|
||||
|
||||
### Angular 12 upgrade
|
||||
|
||||
Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project:
|
||||
|
||||
```shell
|
||||
yarn add @storybook/builder-webpack5@next @storybook/manager-webpack5@next --dev
|
||||
# Or
|
||||
npm install @storybook/builder-webpack5@next @storybook/manager-webpack5@next --save-dev
|
||||
```
|
||||
|
||||
Then edit your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
core: {
|
||||
builder: 'webpack5',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Lit support
|
||||
|
||||
Storybook 6.3 introduces Lit 2 support in a non-breaking way to ease migration from `lit-html`/`lit-element` to `lit`.
|
||||
|
||||
To do so, it relies on helpers added in the latest minor versions of `lit-html`/`lit-element`. So when upgrading to Storybook 6.3, please ensure your project is using `lit-html` 1.4.x or `lit-element` 2.5.x.
|
||||
|
||||
According to the package manager you are using, it can be handled automatically when updating Storybook or can require to manually update the versions and regenerate the lockfile.
|
||||
|
||||
### 6.3 deprecations
|
||||
|
||||
#### Deprecated addon-knobs
|
||||
|
||||
We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
|
||||
|
||||
- [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
|
||||
- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
|
||||
|
||||
#### Deprecated scoped blocks imports
|
||||
|
||||
In 6.3, we changed doc block imports from `@storybook/addon-docs/blocks` to `@storybook/addon-docs`. This makes it possible for bundlers to automatically choose the ESM or CJS version of the library depending on the context.
|
||||
|
||||
To update your code, you should be able to global replace `@storybook/addon-docs/blocks` with `@storybook/addon-docs`. Example:
|
||||
|
||||
```js
|
||||
// before
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
|
||||
// after
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
```
|
||||
|
||||
#### Deprecated `argType.defaultValue`
|
||||
|
||||
Previously, unset `args` were set to the `argType.defaultValue` if set or inferred from the component's prop types (etc.). In 6.3 we no longer infer default values and instead set arg values to `undefined` when unset, allowing the framework to supply the default value.
|
||||
|
||||
If you were using `argType.defaultValue` to fix issues with the above inference, it should no longer be necessary, you can remove that code. If you were using it to set a default value for an arg, there is a simpler way; simply set a value for the arg at the component level:
|
||||
|
||||
```js
|
||||
export default {
|
||||
component: MyComponent,
|
||||
args: {
|
||||
argName: 'default-value',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
To manually configure the value that is shown in the ArgsTable doc block, you can configure the `table.defaultValue` setting:
|
||||
|
||||
```js
|
||||
export default {
|
||||
component: MyComponent,
|
||||
argTypes: {
|
||||
argName: {
|
||||
table: { defaultValue: { summary: 'SomeType<T>' } },
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Deprecated layout URL params
|
||||
|
||||
Several URL params to control the manager layout have been deprecated and will be removed in 7.0:
|
||||
|
||||
- `addons=0`: use `panel=false` instead
|
||||
- `panelRight=1`: use `panel=right` instead
|
||||
- `stories=0`: use `nav=false` instead
|
||||
|
||||
Additionally, support for legacy URLs using `selectedKind` and `selectedStory` will be removed in 7.0 . Use `path` instead.
|
||||
|
||||
## From version 6.1.x to 6.2.0
|
||||
|
||||
### MDX pattern tweaked
|
||||
@ -202,11 +316,24 @@ export const parameters = {
|
||||
|
||||
Please also file an issue if you need to opt out. We plan to remove the legacy renderer in 7.0.
|
||||
|
||||
#### Components without selectors
|
||||
|
||||
When the new Angular renderer is used, all Angular Story components must either have a selector, or be added to the `entryComponents` array of the story's `moduleMetadata`. If the component has any `Input`s or `Output`s to be controlled with `args`, a selector should be added.
|
||||
|
||||
### Packages now available as ESModules
|
||||
|
||||
Many Storybook packages are now available as ESModules in addition to CommonJS. If your jest tests stop working, this is likely why. One common culprit is doc blocks, which [is fixed in 6.3](#deprecated-scoped-blocks-imports). In 6.2, you can configure jest to transform the packages like so ([more info](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)):
|
||||
|
||||
```json
|
||||
// In your jest config
|
||||
transformIgnorePatterns: ['/node_modules/(?!@storybook)']
|
||||
```
|
||||
|
||||
### 6.2 Deprecations
|
||||
|
||||
#### Deprecated implicit PostCSS loader
|
||||
|
||||
Previously, `@storybook/core` would automatically add the `postcss-loader` to your preview. This caused issues for consumers when PostCSS upgraded to v8 and tools, like Autoprefixer and Tailwind, starting requiring the new version. Implictly adding `postcss-loader` will be removed in Storybook 7.0.
|
||||
Previously, `@storybook/core` would automatically add the `postcss-loader` to your preview. This caused issues for consumers when PostCSS upgraded to v8 and tools, like Autoprefixer and Tailwind, starting requiring the new version. Implicitly adding `postcss-loader` will be removed in Storybook 7.0.
|
||||
|
||||
Instead of continuing to include PostCSS inside the core library, it has been moved to [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss). This addon provides more fine-grained customization and will be upgraded more flexibly to track PostCSS upgrades.
|
||||
|
||||
@ -382,7 +509,7 @@ console.log(unboundStoryFn(context));
|
||||
|
||||
If you're not using loaders, `storyFn` will work as before. If you are, you'll need to use the new approach.
|
||||
|
||||
> NOTE: If you're using `@storybook/addon-docs`, this deprecation warning is triggered by the Docs tab in 6.1. It's safe to ignore and we will be providing a proper fix in 6.2. You can track the issue at https://github.com/storybookjs/storybook/issues/13074.
|
||||
> NOTE: If you're using `@storybook/addon-docs`, this deprecation warning is triggered by the Docs tab in 6.1. It's safe to ignore and we will be providing a proper fix in a future release. You can track the issue at https://github.com/storybookjs/storybook/issues/13074.
|
||||
|
||||
#### Deprecated onBeforeRender
|
||||
|
||||
@ -760,7 +887,7 @@ npx sb@next migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|js
|
||||
We also now default to showing "roots", which are non-expandable groupings in the sidebar for the top-level groups. If you'd like to disable this, set the `showRoots` option in `.storybook/manager.js`:
|
||||
|
||||
```js
|
||||
import addons from '@storybook/addons';
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
showRoots: false,
|
||||
@ -1047,7 +1174,7 @@ You should use `addon.setConfig` to set them:
|
||||
|
||||
```js
|
||||
// in .storybook/manager.js
|
||||
import addons from '@storybook/addons';
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
showRoots: false,
|
||||
|
||||
51
README.md
51
README.md
@ -82,7 +82,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs
|
||||
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
|
||||
|
||||
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 development for mobile.
|
||||
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.
|
||||
|
||||
### Community
|
||||
|
||||
@ -108,6 +108,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
| [Marko](app/marko) | [v6.2.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [Riot](app/riot) | [v6.2.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Rax](app/rax) | [v6.2.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.2.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
@ -116,35 +117,35 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Addons
|
||||
|
||||
| Addons | |
|
||||
| ------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
|
||||
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
|
||||
| [cssresources](addons/cssresources/) | Dynamically add/remove css resources to the component iframe |
|
||||
| [design assets](addons/design-assets/) | View images, videos, weblinks alongside your story |
|
||||
| [docs](addons/docs/) | Add high quality documentation to your components |
|
||||
| [events](addons/events/) | Interactively fire events to components that respond to EventEmitter |
|
||||
| [google-analytics](addons/google-analytics) | Reports google analytics on stories |
|
||||
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
|
||||
| [jest](addons/jest/) | View the results of components' unit tests in Storybook |
|
||||
| [knobs](addons/knobs/) | Interactively edit component prop data in the Storybook UI |
|
||||
| [links](addons/links/) | Create links between stories |
|
||||
| [query params](addons/queryparams/) | Mock query params |
|
||||
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook |
|
||||
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
| Addons | |
|
||||
|---------------------------------------------------------------------------|----------------------------------------------------------------------------|
|
||||
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
|
||||
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
|
||||
| [cssresources](https://github.com/storybookjs/addon-cssresources) | Dynamically add/remove css resources to the component iframe |
|
||||
| [design assets](https://github.com/storybookjs/addon-design-assets) | View images, videos, weblinks alongside your story |
|
||||
| [docs](addons/docs/) | Add high quality documentation to your components |
|
||||
| [events](https://github.com/storybookjs/addon-events) | Interactively fire events to components that respond to EventEmitter |
|
||||
| [google-analytics](https://github.com/storybookjs/addon-google-analytics) | Reports google analytics on stories |
|
||||
| [graphql](https://github.com/storybookjs/addon-graphql) | Query a GraphQL server within Storybook stories |
|
||||
| [jest](addons/jest/) | View the results of components' unit tests in Storybook |
|
||||
| [links](addons/links/) | Create links between stories |
|
||||
| [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params |
|
||||
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook |
|
||||
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
|
||||
See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
### Deprecated Addons
|
||||
|
||||
| Addons | |
|
||||
| ---------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
| Addons | |
|
||||
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------|
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI|
|
||||
|
||||
In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.3.0-alpha.19",
|
||||
"version": "6.3.0-rc.8",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.19",
|
||||
"@storybook/api": "6.3.0-alpha.19",
|
||||
"@storybook/channels": "6.3.0-alpha.19",
|
||||
"@storybook/client-api": "6.3.0-alpha.19",
|
||||
"@storybook/client-logger": "6.3.0-alpha.19",
|
||||
"@storybook/components": "6.3.0-alpha.19",
|
||||
"@storybook/core-events": "6.3.0-alpha.19",
|
||||
"@storybook/theming": "6.3.0-alpha.19",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/channels": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8ba485343b31df4e65fce2494a5f615d6d6c661d",
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
function managerEntries(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
@ -11,17 +10,4 @@ function config(entry = []) {
|
||||
];
|
||||
}
|
||||
|
||||
async function webpack(webpackConfig, options) {
|
||||
const core = await options.presets.apply('core');
|
||||
if ((core && core.builder) !== 'webpack5') {
|
||||
return webpackConfig;
|
||||
}
|
||||
if (!webpackConfig.resolve.fallback) {
|
||||
webpackConfig.resolve.fallback = {};
|
||||
}
|
||||
webpackConfig.resolve.fallback.crypto = false;
|
||||
|
||||
return webpackConfig;
|
||||
}
|
||||
|
||||
module.exports = { managerEntries, config, webpack };
|
||||
module.exports = { managerEntries, config };
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import { document } from 'global';
|
||||
import addons from '@storybook/addons';
|
||||
import global from 'global';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
import { EVENTS, HIGHLIGHT_STYLE_ID } from './constants';
|
||||
|
||||
import { highlightStyle } from './highlight';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -21,12 +23,15 @@ const highlight = (infos: HighlightInfo) => {
|
||||
const id = HIGHLIGHT_STYLE_ID;
|
||||
resetHighlight();
|
||||
|
||||
// Make sure there are no duplicated selectors
|
||||
const elements = Array.from(new Set(infos.elements));
|
||||
|
||||
const sheet = document.createElement('style');
|
||||
sheet.setAttribute('id', id);
|
||||
sheet.innerHTML = infos.elements
|
||||
sheet.innerHTML = elements
|
||||
.map(
|
||||
(target) =>
|
||||
`${target}{
|
||||
`${target}{
|
||||
${highlightStyle(infos.color)}
|
||||
}`
|
||||
)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { EVENTS } from './constants';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import { document, window as globalWindow } from 'global';
|
||||
import global from 'global';
|
||||
import axe from 'axe-core';
|
||||
import addons from '@storybook/addons';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { EVENTS } from './constants';
|
||||
import { A11yParameters } from './params';
|
||||
|
||||
const { document, window: globalWindow } = global;
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
@ -24,7 +24,10 @@ const HighlightToggleElement = styled.span({
|
||||
fontWeight: 'normal',
|
||||
alignSelf: 'center',
|
||||
paddingRight: 15,
|
||||
input: { margin: 0 },
|
||||
input: {
|
||||
margin: 0,
|
||||
display: 'block',
|
||||
},
|
||||
});
|
||||
|
||||
interface ElementProps {
|
||||
|
||||
@ -33,6 +33,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
|
||||
const HeaderBar = styled.div<{}>(({ theme }) => ({
|
||||
padding: theme.layoutMargin,
|
||||
paddingLeft: theme.layoutMargin - 3,
|
||||
lineHeight: '20px',
|
||||
background: 'none',
|
||||
color: 'inherit',
|
||||
textAlign: 'left',
|
||||
@ -51,7 +52,10 @@ const HighlightToggleElement = styled.span({
|
||||
float: 'right',
|
||||
marginRight: 15,
|
||||
alignSelf: 'center',
|
||||
input: { margin: 0 },
|
||||
input: {
|
||||
margin: 0,
|
||||
display: 'block',
|
||||
},
|
||||
});
|
||||
|
||||
interface ItemProps {
|
||||
|
||||
@ -18,30 +18,29 @@ const Container = styled.div({
|
||||
const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
marginBottom: 3,
|
||||
marginRight: 3,
|
||||
color: theme.color.dark,
|
||||
}));
|
||||
|
||||
const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
|
||||
const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth, theme }) => {
|
||||
const maxWidthBeforeBreak = 450;
|
||||
return {
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
|
||||
fontSize: 13,
|
||||
lineHeight: '20px',
|
||||
padding: elementWidth > maxWidthBeforeBreak ? '10px 15px 10px 0' : '10px 0px 10px 15px',
|
||||
height: '40px',
|
||||
border: 'none',
|
||||
marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
|
||||
float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
|
||||
display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
|
||||
borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',
|
||||
borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : `1px solid ${theme.appBorderColor}`,
|
||||
|
||||
input: {
|
||||
marginLeft: 10,
|
||||
marginRight: 0,
|
||||
marginTop: 0,
|
||||
marginTop: -1,
|
||||
marginBottom: 0,
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,7 +2,6 @@ export const highlightStyle = (color: string) => `
|
||||
outline: 2px dashed ${color};
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
|
||||
}
|
||||
`;
|
||||
|
||||
export const highlightObject = (color: string) => ({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.3.0-alpha.19",
|
||||
"version": "6.3.0-rc.8",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.19",
|
||||
"@storybook/api": "6.3.0-alpha.19",
|
||||
"@storybook/client-api": "6.3.0-alpha.19",
|
||||
"@storybook/components": "6.3.0-alpha.19",
|
||||
"@storybook/core-events": "6.3.0-alpha.19",
|
||||
"@storybook/theming": "6.3.0-alpha.19",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -78,7 +78,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8ba485343b31df4e65fce2494a5f615d6d6c661d",
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
|
||||
|
||||
export const argTypesEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
|
||||
export const argsEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
|
||||
|
||||
@ -1,76 +1,67 @@
|
||||
import { StoryContext } from '@storybook/addons';
|
||||
import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
|
||||
|
||||
const withDefaultValue = (argTypes) =>
|
||||
Object.keys(argTypes).filter((key) => !!argTypes[key].defaultValue);
|
||||
|
||||
describe('actions parameter enhancers', () => {
|
||||
describe('actions.argTypesRegex parameter', () => {
|
||||
const baseParameters = {
|
||||
argTypes: { onClick: {}, onFocus: {}, somethingElse: {} },
|
||||
actions: { argTypesRegex: '^on.*' },
|
||||
};
|
||||
const parameters = { actions: { argTypesRegex: '^on.*' } };
|
||||
const argTypes = { onClick: {}, onFocus: {}, somethingElse: {} };
|
||||
|
||||
it('should add actions that match a pattern', () => {
|
||||
const parameters = baseParameters;
|
||||
const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
|
||||
expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onFocus']);
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
onFocus: expect.any(Function),
|
||||
});
|
||||
});
|
||||
|
||||
it('should override pre-existing argTypes', () => {
|
||||
const parameters = {
|
||||
...baseParameters,
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
parameters,
|
||||
argTypes: {
|
||||
onClick: { defaultValue: 'pre-existing value' },
|
||||
},
|
||||
};
|
||||
const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
|
||||
expect(withDefaultValue(argTypes)).toEqual(['onClick']);
|
||||
expect(argTypes.onClick.defaultValue).not.toBeNull();
|
||||
expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value');
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
});
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
const parameters = {
|
||||
...baseParameters,
|
||||
actions: { ...baseParameters.actions, disable: true },
|
||||
};
|
||||
const result = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
|
||||
expect(result).toEqual(parameters.argTypes);
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
parameters: {
|
||||
...parameters,
|
||||
actions: { ...parameters.actions, disable: true },
|
||||
},
|
||||
argTypes,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('argTypes.action parameter', () => {
|
||||
const baseParameters = {
|
||||
argTypes: {
|
||||
onClick: { action: 'clicked!' },
|
||||
onBlur: { action: 'blurred!' },
|
||||
},
|
||||
const argTypes = {
|
||||
onClick: { action: 'clicked!' },
|
||||
onBlur: { action: 'blurred!' },
|
||||
};
|
||||
it('should add actions based on action.args', () => {
|
||||
const parameters = baseParameters;
|
||||
const argTypes = addActionsFromArgTypes({ parameters } as StoryContext);
|
||||
expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
|
||||
});
|
||||
|
||||
it('should override pre-existing args', () => {
|
||||
const parameters = {
|
||||
...baseParameters,
|
||||
argTypes: {
|
||||
onClick: { defaultValue: 'pre-existing value', action: 'onClick' },
|
||||
onBlur: { action: 'onBlur' },
|
||||
},
|
||||
};
|
||||
const argTypes = addActionsFromArgTypes({ parameters } as StoryContext);
|
||||
expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
|
||||
expect(argTypes.onClick.defaultValue).not.toBeNull();
|
||||
expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value');
|
||||
expect(
|
||||
addActionsFromArgTypes(({ argTypes, parameters: {} } as unknown) as StoryContext)
|
||||
).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
onBlur: expect.any(Function),
|
||||
});
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
const parameters = { ...baseParameters, actions: { disable: true } };
|
||||
const result = addActionsFromArgTypes({ parameters } as StoryContext);
|
||||
expect(result).toEqual(parameters.argTypes);
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes,
|
||||
parameters: { actions: { disable: true } },
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { ArgTypesEnhancer } from '@storybook/client-api';
|
||||
import { Args } from '@storybook/addons';
|
||||
import { ArgsEnhancer } from '@storybook/client-api';
|
||||
import { action } from '../index';
|
||||
|
||||
// interface ActionsParameter {
|
||||
@ -12,35 +12,42 @@ import { action } from '../index';
|
||||
* matches a regex, such as `^on.*` for react-style `onClick` etc.
|
||||
*/
|
||||
|
||||
export const inferActionsFromArgTypesRegex: ArgTypesEnhancer = (context) => {
|
||||
const { actions, argTypes } = context.parameters;
|
||||
export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
const {
|
||||
parameters: { actions },
|
||||
argTypes,
|
||||
} = context;
|
||||
if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
|
||||
return argTypes;
|
||||
return {};
|
||||
}
|
||||
|
||||
const argTypesRegex = new RegExp(actions.argTypesRegex);
|
||||
return mapValues(argTypes, (argType, name) => {
|
||||
if (!argTypesRegex.test(name)) {
|
||||
return argType;
|
||||
}
|
||||
return { ...argType, defaultValue: action(name) };
|
||||
});
|
||||
const argTypesMatchingRegex = Object.entries(argTypes).filter(
|
||||
([name]) => !!argTypesRegex.test(name)
|
||||
);
|
||||
|
||||
return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
|
||||
acc[name] = action(name);
|
||||
return acc;
|
||||
}, {} as Args);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add action args for list of strings.
|
||||
*/
|
||||
|
||||
export const addActionsFromArgTypes: ArgTypesEnhancer = (context) => {
|
||||
const { argTypes, actions } = context.parameters;
|
||||
export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
|
||||
const {
|
||||
argTypes,
|
||||
parameters: { actions },
|
||||
} = context;
|
||||
if (actions?.disable || !argTypes) {
|
||||
return argTypes;
|
||||
return {};
|
||||
}
|
||||
|
||||
return mapValues(argTypes, (argType, name) => {
|
||||
if (!argType.action) {
|
||||
return argType;
|
||||
}
|
||||
const message = typeof argType.action === 'string' ? argType.action : name;
|
||||
return { ...argType, defaultValue: action(message) };
|
||||
});
|
||||
const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
|
||||
|
||||
return argTypesWithAction.reduce((acc, [name, argType]) => {
|
||||
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
|
||||
return acc;
|
||||
}, {} as Args);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { action, configureActions } from '../..';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { actions } from '../..';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Based on http://backbonejs.org/docs/backbone.html#section-164
|
||||
import { document, Element } from 'global';
|
||||
import global from 'global';
|
||||
import { useEffect } from '@storybook/client-api';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
@ -9,6 +9,8 @@ import { actions } from './actions';
|
||||
|
||||
import { PARAM_KEY } from '../constants';
|
||||
|
||||
const { document, Element } = global;
|
||||
|
||||
const delegateEventSplitter = /^(\S+)\s*(.*)$/;
|
||||
|
||||
const isIE = Element != null && !Element.prototype.matches;
|
||||
|
||||
@ -8,7 +8,7 @@ addons.register(ADDON_ID, (api) => {
|
||||
addons.addPanel(PANEL_ID, {
|
||||
title() {
|
||||
const [actionsCount, setActionsCount] = useState(0);
|
||||
const onEvent = () => setActionsCount(previous => previous + 1);
|
||||
const onEvent = () => setActionsCount((previous) => previous + 1);
|
||||
const onChange = () => setActionsCount(0);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.3.0-alpha.19",
|
||||
"version": "6.3.0-rc.8",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.19",
|
||||
"@storybook/api": "6.3.0-alpha.19",
|
||||
"@storybook/client-logger": "6.3.0-alpha.19",
|
||||
"@storybook/components": "6.3.0-alpha.19",
|
||||
"@storybook/core-events": "6.3.0-alpha.19",
|
||||
"@storybook/theming": "6.3.0-alpha.19",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -76,7 +76,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8ba485343b31df4e65fce2494a5f615d6d6c661d",
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import { document } from 'global';
|
||||
import global from 'global';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
import { logger } from '@storybook/client-logger';
|
||||
|
||||
import { Background } from '../types';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
export const getBackgroundColorByName = (
|
||||
currentSelectedValue: string,
|
||||
backgrounds: Background[] = [],
|
||||
|
||||
@ -84,23 +84,38 @@ export const Reflow = () => {
|
||||
const label = text('Label', 'reflow');
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: count }, (_, i) => (
|
||||
<Button label={`button ${i}`} />
|
||||
{[...Array(count)].map((_, i) => (
|
||||
<Button key={i} label={`button ${i}`} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
|
||||
|
||||
```jsx
|
||||
export const Reflow = ({ count, label, ...args }) => (
|
||||
<>{Array.from({ length: count }, (_, i) => <Button label={`${label} ${i}` {...args}} />)}</>
|
||||
<>
|
||||
{[...Array(count)].map((_, i) => (
|
||||
<Button key={i} label={`${label} ${i}`} {...args} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
Reflow.args = { count: 3, label: 'reflow' };
|
||||
|
||||
Reflow.args = {
|
||||
count: 3,
|
||||
label: 'reflow'
|
||||
};
|
||||
|
||||
Reflow.argTypes = {
|
||||
count: { control: { type: 'range', min: 0, max: 20 } }
|
||||
count: {
|
||||
control: {
|
||||
type: 'range',
|
||||
min: 0,
|
||||
max: 20
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
@ -125,6 +140,7 @@ export default {
|
||||
};
|
||||
|
||||
export const Basic = (args) => <Button {...args} />;
|
||||
|
||||
Basic.args = {
|
||||
label: 'hello',
|
||||
borderWidth: 1,
|
||||
@ -182,7 +198,7 @@ Basic.args = { label: 'hello', background: '#ff0' };
|
||||
Here's the MDX equivalent:
|
||||
|
||||
```jsx
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta title="Button" component={Button} argTypes={{ background: { control: 'color' } }} />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.3.0-alpha.19",
|
||||
"version": "6.3.0-rc.8",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.19",
|
||||
"@storybook/api": "6.3.0-alpha.19",
|
||||
"@storybook/client-api": "6.3.0-alpha.19",
|
||||
"@storybook/components": "6.3.0-alpha.19",
|
||||
"@storybook/node-logger": "6.3.0-alpha.19",
|
||||
"@storybook/theming": "6.3.0-alpha.19",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/node-logger": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"core-js": "^3.8.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -69,7 +69,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8ba485343b31df4e65fce2494a5f615d6d6c661d",
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import addons, { types } from '@storybook/addons';
|
||||
import { addons, types } from '@storybook/addons';
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
import { API, useArgTypes } from '@storybook/api';
|
||||
import { ControlsPanel } from './ControlsPanel';
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
# Storybook Addon Cssresources
|
||||
|
||||
Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-cssresources
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Then create a file called `main.js` in your storybook config.
|
||||
|
||||
Add following content to it:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-cssresources'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon UI:
|
||||
|
||||
```js
|
||||
import { withCssResources } from '@storybook/addon-cssresources';
|
||||
|
||||
export default {
|
||||
title: 'CssResources',
|
||||
parameters: {
|
||||
cssresources: [
|
||||
{
|
||||
id: `bluetheme`,
|
||||
code: `<style>body { background-color: lightblue; }</style>`,
|
||||
picked: false,
|
||||
hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
|
||||
},
|
||||
],
|
||||
},
|
||||
decorators: [withCssResources],
|
||||
};
|
||||
|
||||
export const defaultView = () => <div />;
|
||||
```
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 MiB |
@ -1,81 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "6.3.0-alpha.19",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"cssresources",
|
||||
"react",
|
||||
"storybook",
|
||||
"style"
|
||||
],
|
||||
"homepage": "https://storybook.js.org",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/cssresources"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "nm123github",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/ts3.9/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"dist/ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.19",
|
||||
"@storybook/api": "6.3.0-alpha.19",
|
||||
"@storybook/components": "6.3.0-alpha.19",
|
||||
"@storybook/core-events": "6.3.0-alpha.19",
|
||||
"@storybook/theming": "6.3.0-alpha.19",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8ba485343b31df4e65fce2494a5f615d6d6c661d",
|
||||
"storybook": {
|
||||
"displayName": "CSS Resources",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
function managerEntries(entry = [], options) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
module.exports = { managerEntries };
|
||||
@ -1 +0,0 @@
|
||||
require('./dist/esm/register.js');
|
||||
@ -1,6 +0,0 @@
|
||||
export interface CssResource {
|
||||
id: string;
|
||||
code: string;
|
||||
picked: boolean;
|
||||
hideCode: boolean;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
export const ADDON_ID = 'storybook/cssresources';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = 'cssresources';
|
||||
|
||||
export const EVENTS = {
|
||||
SET: `${ADDON_ID}:set`,
|
||||
UNSET: `${ADDON_ID}:unset`,
|
||||
};
|
||||
@ -1,214 +0,0 @@
|
||||
import React from 'react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { STORY_RENDERED } from '@storybook/core-events';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import { API } from '@storybook/api';
|
||||
import { EVENTS, PARAM_KEY } from './constants';
|
||||
import { CssResourcePanel } from './css-resource-panel';
|
||||
|
||||
const defaultParameters = [
|
||||
{
|
||||
id: 'fake-css-id-1',
|
||||
code: 'fake-css-code-1',
|
||||
picked: true,
|
||||
},
|
||||
{
|
||||
id: 'fake-css-id-2',
|
||||
code: 'fake-css-code-2',
|
||||
picked: false,
|
||||
},
|
||||
];
|
||||
|
||||
const mockedApi = ({
|
||||
emit: jest.fn(),
|
||||
on: jest.fn(),
|
||||
off: jest.fn(),
|
||||
getCurrentParameter: jest.fn(() => defaultParameters),
|
||||
} as unknown) as API;
|
||||
|
||||
function ThemedCSSResourcePanel({ api }: { api: API }) {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<CssResourcePanel active api={api} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const renderWithData = (api: Partial<API> = {}) => {
|
||||
const apiAdd = jest.fn();
|
||||
render(
|
||||
<ThemedCSSResourcePanel
|
||||
api={{
|
||||
...mockedApi,
|
||||
on: apiAdd,
|
||||
...api,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
apiAdd.mock.calls[0][1]('fake-story-id');
|
||||
return {
|
||||
onStoryChange: apiAdd.mock.calls[0][1],
|
||||
};
|
||||
};
|
||||
|
||||
describe('CSSResourcePanel', () => {
|
||||
it('should mount', () => {
|
||||
const { container } = render(<ThemedCSSResourcePanel api={mockedApi} />);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should add STORY_RENDERED listener to the api', () => {
|
||||
const apiAdd = jest.fn();
|
||||
render(
|
||||
<CssResourcePanel
|
||||
active
|
||||
api={{
|
||||
...mockedApi,
|
||||
on: apiAdd,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
expect(apiAdd).toHaveBeenCalledWith(STORY_RENDERED, expect.any(Function));
|
||||
});
|
||||
|
||||
it('should remove STORY_RENDERED listener from the api', () => {
|
||||
const apiRemove = jest.fn();
|
||||
const { unmount } = render(
|
||||
<CssResourcePanel
|
||||
active
|
||||
api={{
|
||||
...mockedApi,
|
||||
off: apiRemove,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
unmount();
|
||||
expect(apiRemove).toHaveBeenCalledWith(STORY_RENDERED, expect.any(Function));
|
||||
});
|
||||
|
||||
it('should populate list with the default items', () => {
|
||||
const apiAdd = jest.fn();
|
||||
render(
|
||||
<ThemedCSSResourcePanel
|
||||
api={{
|
||||
...mockedApi,
|
||||
on: apiAdd,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
apiAdd.mock.calls[0][1]('fake-story-id');
|
||||
expect(screen.getByText(/fake-css-id-1/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/fake-css-id-2/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should pull default items from getCurrentParameter', () => {
|
||||
const getCurrentParameter = jest.fn();
|
||||
const apiAdd = jest.fn();
|
||||
render(
|
||||
<ThemedCSSResourcePanel
|
||||
api={{
|
||||
...mockedApi,
|
||||
on: apiAdd,
|
||||
getCurrentParameter: getCurrentParameter as any,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
apiAdd.mock.calls[0][1]('fake-story-id');
|
||||
expect(getCurrentParameter).toHaveBeenCalledWith(PARAM_KEY);
|
||||
});
|
||||
|
||||
// it('should maintain picked attribute for matching ids', () => {
|
||||
// const getCurrentParameter = jest.fn(() => [
|
||||
// {
|
||||
// ...defaultParameters[0],
|
||||
// picked: !defaultParameters[0].picked,
|
||||
// },
|
||||
// ]);
|
||||
// const { onStoryChange } = renderWithData({
|
||||
// getCurrentParameter: getCurrentParameter as any,
|
||||
// });
|
||||
// expect(
|
||||
// screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` })
|
||||
// ).not.toBeChecked();
|
||||
// getCurrentParameter.mockReturnValueOnce([
|
||||
// {
|
||||
// ...defaultParameters[0],
|
||||
// picked: defaultParameters[0].picked,
|
||||
// },
|
||||
// ]);
|
||||
// onStoryChange('fake-story-id');
|
||||
// expect(
|
||||
// screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` })
|
||||
// ).not.toBeChecked();
|
||||
// });
|
||||
|
||||
// it('should update the list with new picked items', () => {
|
||||
// renderWithData();
|
||||
// expect(screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` })).toBeChecked();
|
||||
// userEvent.click(screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` }));
|
||||
// expect(
|
||||
// screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` })
|
||||
// ).not.toBeChecked();
|
||||
// });
|
||||
|
||||
// it('should call emit method with updated list', () => {
|
||||
// const emit = jest.fn();
|
||||
// renderWithData({ emit });
|
||||
// userEvent.click(screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` }));
|
||||
// expect(emit).toHaveBeenLastCalledWith(EVENTS.SET, []);
|
||||
// });
|
||||
|
||||
it('should not render anything when not active', () => {
|
||||
const { container } = render(<CssResourcePanel api={mockedApi} active={false} />);
|
||||
expect(container.firstChild).toBeFalsy();
|
||||
});
|
||||
|
||||
// it('should render list items', () => {
|
||||
// renderWithData();
|
||||
|
||||
// defaultParameters.forEach((param) => {
|
||||
// expect(screen.getByText(new RegExp(param.id))).toBeInTheDocument();
|
||||
// const checkbox = screen.getByRole('checkbox', { name: `# ${param.id}` });
|
||||
// if (param.picked) {
|
||||
// expect(checkbox).toBeChecked();
|
||||
// } else {
|
||||
// expect(checkbox).not.toBeChecked();
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// it('should render code for items with the `hideCode` flag', () => {
|
||||
// const getCurrentParameter = jest.fn(() => [
|
||||
// {
|
||||
// id: 'local-fake-id-1',
|
||||
// code: 'local-fake-code-1',
|
||||
// picked: true,
|
||||
// hideCode: false,
|
||||
// },
|
||||
// ]);
|
||||
|
||||
// renderWithData({
|
||||
// getCurrentParameter: getCurrentParameter as any,
|
||||
// });
|
||||
|
||||
// expect(screen.queryByText('local-fake-code-1')).toBeInTheDocument();
|
||||
// });
|
||||
|
||||
it('should not render code for items /w the `hideCode` flag', () => {
|
||||
const getCurrentParameter = jest.fn(() => [
|
||||
{
|
||||
id: 'local-fake-id-1',
|
||||
code: 'local-fake-code-1',
|
||||
picked: true,
|
||||
hideCode: true,
|
||||
},
|
||||
]);
|
||||
|
||||
renderWithData({
|
||||
getCurrentParameter: getCurrentParameter as any,
|
||||
});
|
||||
|
||||
expect(screen.queryByText('local-fake-code-1')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -1,140 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { SyntaxHighlighter, Placeholder, Spaced, Icons } from '@storybook/components';
|
||||
import { STORY_RENDERED } from '@storybook/core-events';
|
||||
import { API } from '@storybook/api';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { EVENTS, PARAM_KEY } from './constants';
|
||||
import { CssResource } from './CssResource';
|
||||
|
||||
interface Props {
|
||||
active: boolean;
|
||||
api: API;
|
||||
}
|
||||
|
||||
interface State {
|
||||
currentStoryId: string;
|
||||
list: CssResource[];
|
||||
}
|
||||
|
||||
interface CssResourceLookup {
|
||||
[key: string]: CssResource;
|
||||
}
|
||||
|
||||
const maxLimitToUseSyntaxHighlighter = 100000;
|
||||
|
||||
const PlainCode = styled.pre({
|
||||
textAlign: 'left',
|
||||
fontWeight: 'normal',
|
||||
});
|
||||
|
||||
const Warning = styled.div({
|
||||
display: 'flex',
|
||||
padding: '10px',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
background: '#fff3cd',
|
||||
fontSize: 12,
|
||||
'& svg': {
|
||||
marginRight: 10,
|
||||
width: 24,
|
||||
height: 24,
|
||||
},
|
||||
});
|
||||
|
||||
export class CssResourcePanel extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentStoryId: '',
|
||||
list: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { api } = this.props;
|
||||
api.on(STORY_RENDERED, this.onStoryChange);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { api } = this.props;
|
||||
api.off(STORY_RENDERED, this.onStoryChange);
|
||||
}
|
||||
|
||||
onStoryChange = (id: string) => {
|
||||
const { list: currentList, currentStoryId } = this.state;
|
||||
const { api } = this.props;
|
||||
const list = api.getCurrentParameter<CssResource[]>(PARAM_KEY);
|
||||
|
||||
if (list && currentStoryId !== id) {
|
||||
const existingIds = currentList.reduce((lookup: CssResourceLookup, res) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
lookup[res.id] = res;
|
||||
return lookup;
|
||||
}, {}) as CssResourceLookup;
|
||||
const mergedList = list.map((res) => {
|
||||
const existingItem = existingIds[res.id];
|
||||
return existingItem
|
||||
? {
|
||||
...res,
|
||||
picked: existingItem.picked,
|
||||
}
|
||||
: res;
|
||||
});
|
||||
const picked = mergedList.filter((res) => res.picked);
|
||||
this.setState({ list: mergedList, currentStoryId: id }, () => this.emit(picked));
|
||||
}
|
||||
};
|
||||
|
||||
onChange = (event: any) => {
|
||||
const { list: oldList } = this.state;
|
||||
const list = oldList.map((i) => ({
|
||||
...i,
|
||||
picked: i.id === event.target.id ? event.target.checked : i.picked,
|
||||
}));
|
||||
this.setState({ list }, () => this.emit(list.filter((res: any) => res.picked)));
|
||||
};
|
||||
|
||||
emit(list: CssResource[]) {
|
||||
const { api } = this.props;
|
||||
api.emit(EVENTS.SET, list);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { list } = this.state;
|
||||
const { active } = this.props;
|
||||
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{list &&
|
||||
list.map(({ id, code, picked, hideCode = false }) => (
|
||||
<div key={id} style={{ padding: 10 }}>
|
||||
<label>
|
||||
<input type="checkbox" checked={picked} onChange={this.onChange} id={id} />
|
||||
<span>#{id}</span>
|
||||
</label>
|
||||
{code && !hideCode && code.length < maxLimitToUseSyntaxHighlighter && (
|
||||
<SyntaxHighlighter language="html">{code}</SyntaxHighlighter>
|
||||
)}
|
||||
{code && !hideCode && code.length >= maxLimitToUseSyntaxHighlighter && (
|
||||
<Placeholder>
|
||||
<Spaced row={1}>
|
||||
<PlainCode>{code.substring(0, maxLimitToUseSyntaxHighlighter)} ...</PlainCode>
|
||||
<Warning>
|
||||
<Icons icon="alert" />
|
||||
Rest of the content cannot be displayed
|
||||
</Warning>
|
||||
</Spaced>
|
||||
</Placeholder>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
import { document } from 'global';
|
||||
import { addons, makeDecorator } from '@storybook/addons';
|
||||
import { EVENTS, PARAM_KEY } from './constants';
|
||||
|
||||
const changeMediaAttribute = (element: HTMLElement, enabled: boolean) => {
|
||||
const current = element.getAttribute('media');
|
||||
if ((enabled && !current) || (!enabled && current === 'max-width: 1px')) {
|
||||
// don't do anything
|
||||
} else if (enabled && current === 'max-width: 1px') {
|
||||
// remove the attribute
|
||||
element.removeAttribute('media');
|
||||
} else if (enabled) {
|
||||
// add the disable attribute
|
||||
const value = current.replace(' and max-width: 1px', '');
|
||||
element.setAttribute('media', value);
|
||||
} else {
|
||||
// modify the existing attribute so it disables
|
||||
const value = current ? `${current} and max-width: 1px` : 'max-width: 1px';
|
||||
element.setAttribute('media', value);
|
||||
}
|
||||
};
|
||||
|
||||
const createElement = (id: string, code: string): HTMLDivElement => {
|
||||
const element: HTMLDivElement = document.createElement('div');
|
||||
element.setAttribute('id', `storybook-addon-resource_${id}`);
|
||||
element.innerHTML = code;
|
||||
return element;
|
||||
};
|
||||
|
||||
const getElement = (id: string, code: string) => {
|
||||
const found: Element = document.querySelector(`[id="storybook-addon-resource_${id}"]`);
|
||||
return { element: found || createElement(id, code), created: !found };
|
||||
};
|
||||
|
||||
const updateElement = (id: string, code: string, value: boolean) => {
|
||||
const { element, created } = getElement(id, code);
|
||||
|
||||
element.querySelectorAll('link').forEach((child) => changeMediaAttribute(child, value));
|
||||
element.querySelectorAll('style').forEach((child) => changeMediaAttribute(child, value));
|
||||
|
||||
if (created) {
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
};
|
||||
|
||||
const list: any[] = [];
|
||||
|
||||
const setResources = (resources: { code: string; id: string }[]) => {
|
||||
const added = resources.filter((i) => !list.find((r) => r.code === i.code));
|
||||
const removed = list.filter((i) => !resources.find((r) => r.code === i.code));
|
||||
|
||||
added.forEach((r) => list.push(r));
|
||||
|
||||
resources.forEach((r) => {
|
||||
const { id, code } = r;
|
||||
updateElement(id, code, true);
|
||||
});
|
||||
removed.forEach((r) => {
|
||||
const { id, code } = r;
|
||||
updateElement(id, code, false);
|
||||
});
|
||||
};
|
||||
|
||||
export const withCssResources = makeDecorator({
|
||||
name: 'withCssResources',
|
||||
parameterName: PARAM_KEY,
|
||||
skipIfNoParametersOrOptions: true,
|
||||
|
||||
wrapper: (getStory, context, { options, parameters }) => {
|
||||
const storyOptions = parameters || options;
|
||||
addons.getChannel().on(EVENTS.SET, setResources);
|
||||
|
||||
if (!Array.isArray(storyOptions) && !Array.isArray(storyOptions.cssresources)) {
|
||||
throw new Error('The `cssresources` parameter needs to be an Array');
|
||||
}
|
||||
|
||||
return getStory(context);
|
||||
},
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
import { CssResourcePanel } from './css-resource-panel';
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
// Need to cast as any as it's not matching Addon type, to investigate
|
||||
addons.add(PANEL_ID, {
|
||||
type: types.PANEL,
|
||||
title: 'CSS resources',
|
||||
render: ({ active }) => <CssResourcePanel key={PANEL_ID} api={api} active={active} />,
|
||||
paramKey: PARAM_KEY,
|
||||
});
|
||||
});
|
||||
2
addons/cssresources/src/typings.d.ts
vendored
2
addons/cssresources/src/typings.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
// TODO: following packages need definition files or a TS migration
|
||||
declare module 'global';
|
||||
@ -1,18 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env", "jest", "@testing-library/jest-dom"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
# Storybook addon for design assets
|
||||
|
||||
This addon for storybook allows you to link to image files, other files, and even url's for embedding in the storybook panel!
|
||||
|
||||
You can add as many assets to a single story as you want.
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-design-assets
|
||||
```
|
||||
|
||||
## Usage
|
||||
within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-design-assets']
|
||||
}
|
||||
```
|
||||
|
||||
within your stories:
|
||||
```js
|
||||
import React from 'react';
|
||||
|
||||
import imageUrl from './images/my-image.jpg';
|
||||
|
||||
export default {
|
||||
title: 'Design Assets',
|
||||
parameters: {
|
||||
assets: [
|
||||
imageUrl, // link to a file imported
|
||||
'https://via.placeholder.com/300/09f/fff.png', // link to an external image
|
||||
'https://www.example.com', // link to a webpage
|
||||
'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div>your story here</div>
|
||||
);
|
||||
@ -1,82 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "6.3.0-alpha.19",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"assets",
|
||||
"design",
|
||||
"files",
|
||||
"parameter",
|
||||
"storybook",
|
||||
"viewer"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/design-assets"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/ts3.9/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"dist/ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-alpha.19",
|
||||
"@storybook/api": "6.3.0-alpha.19",
|
||||
"@storybook/client-logger": "6.3.0-alpha.19",
|
||||
"@storybook/components": "6.3.0-alpha.19",
|
||||
"@storybook/core-events": "6.3.0-alpha.19",
|
||||
"@storybook/theming": "6.3.0-alpha.19",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"use-image": "^1.0.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8ba485343b31df4e65fce2494a5f615d6d6c661d",
|
||||
"storybook": {
|
||||
"displayName": "Design assets",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
function managerEntries(entry = [], options) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
module.exports = { managerEntries };
|
||||
@ -1 +0,0 @@
|
||||
require('./dist/esm/register');
|
||||
@ -1,3 +0,0 @@
|
||||
export const ADDON_ID = 'storybook/design-assets';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = `assets`;
|
||||
@ -1,78 +0,0 @@
|
||||
import React, { Fragment, useMemo, ReactElement } from 'react';
|
||||
|
||||
import { useParameter, useAddonState, useStorybookState } from '@storybook/api';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { ActionBar } from '@storybook/components';
|
||||
import { PARAM_KEY, ADDON_ID } from './constants';
|
||||
|
||||
interface AssetDescription {
|
||||
url: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
type Results = (string | AssetDescription)[];
|
||||
type Selected = number;
|
||||
|
||||
const Iframe = styled.iframe({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: '0 none',
|
||||
});
|
||||
const Img = styled.img({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: '0 none',
|
||||
objectFit: 'contain',
|
||||
});
|
||||
|
||||
const Asset = ({ url }: { url: string | undefined }): ReactElement => {
|
||||
if (!url) {
|
||||
return null;
|
||||
}
|
||||
if (url.match(/\.(png|apng|gif|jpeg|tiff|svg|webp)/)) {
|
||||
// do image viewer
|
||||
return <Img alt="" src={url} />;
|
||||
}
|
||||
if (url.match(/\.(mp4|ogv|webm)/)) {
|
||||
// do video viewer
|
||||
return <div>not implemented yet, sorry</div>;
|
||||
}
|
||||
|
||||
return <Iframe title={url} src={url} />;
|
||||
};
|
||||
|
||||
const getUrl = (input: AssetDescription | string): string => {
|
||||
return typeof input === 'string' ? input : input.url;
|
||||
};
|
||||
|
||||
export const Panel = () => {
|
||||
const results = useParameter<Results>(PARAM_KEY, []);
|
||||
const [selected, setSelected] = useAddonState<Selected>(ADDON_ID, 0);
|
||||
const { storyId } = useStorybookState();
|
||||
|
||||
return useMemo(() => {
|
||||
if (results.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (results.length && !results[selected]) {
|
||||
setSelected(0);
|
||||
return null;
|
||||
}
|
||||
const url = getUrl(results[selected]).replace('{id}', storyId);
|
||||
return (
|
||||
<Fragment>
|
||||
<Asset url={url} />
|
||||
{results.length > 1 ? (
|
||||
<ActionBar
|
||||
key="actionbar"
|
||||
actionItems={results.map((i, index) => ({
|
||||
title: typeof i === 'string' ? `asset #${index + 1}` : i.name,
|
||||
onClick: () => setSelected(index),
|
||||
}))}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
}, [results, selected, storyId]);
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { addons, types } from '@storybook/addons';
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
import { Panel } from './panel';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'Design Assets',
|
||||
type: types.PANEL,
|
||||
render: ({ active, key }) => (
|
||||
<AddonPanel active={active} key={key}>
|
||||
<Panel />
|
||||
</AddonPanel>
|
||||
),
|
||||
paramKey: PARAM_KEY,
|
||||
});
|
||||
});
|
||||
@ -46,7 +46,7 @@ For more information on how it works, see the [`DocsPage` reference](https://git
|
||||
Here's an example file:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
<Meta title="MDX/Checkbox" component={Checkbox} />
|
||||
@ -79,17 +79,17 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
|
||||
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:
|
||||
|
||||
| | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Riot | Mithril | Marko |
|
||||
| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :--: | :-----: | :---: |
|
||||
| MDX stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Props table | + | + | + | + | + | | | | | | |
|
||||
| Props controls | + | + | + | | | | | | | | |
|
||||
| Description | + | + | + | + | + | | | | | | |
|
||||
| Inline stories | + | + | + | | + | + | | | | | |
|
||||
| | React | Vue | Angular | Ember | Web Components | Marko | HTML | Svelte | Preact | Riot | Mithril | Marko |
|
||||
| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :---: | :--: | :----: | :----: | :--: | :-----: | :---: |
|
||||
| MDX stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Props table | + | + | + | + | + | WIP | | | | | | |
|
||||
| Props controls | + | + | + | | | WIP | | | | | | |
|
||||
| Description | + | + | + | + | + | WIP | | | | | | |
|
||||
| Inline stories | + | + | + | | + | WIP | + | | | | | |
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
@ -166,8 +166,9 @@ The `configureJSX` option is useful when you're writing your docs in MDX and you
|
||||
`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.
|
||||
|
||||
The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.
|
||||
|
||||
```mdx
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
import Changelog from '../CHANGELOG.md';
|
||||
|
||||
<Meta title="Changelog" />
|
||||
@ -226,7 +227,7 @@ You'll also need to set up the docs parameter in `.storybook/preview.js`. This i
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
|
||||
@ -113,7 +113,7 @@ module.exports = {
|
||||
Finally, you can create MDX files like this:
|
||||
|
||||
```md
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
<Meta title='App Component' component={AppComponent} />
|
||||
@ -139,7 +139,7 @@ Also, to use the `Props` doc block, you need to set up Compodoc, [as described a
|
||||
When you are using `template`, `moduleMetadata` and/or `addDecorators` with `storiesOf` then you can easily translate your story to MDX, too:
|
||||
|
||||
```md
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { CheckboxComponent, RadioButtonComponent } from './my-components';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
|
||||
|
||||
@ -1 +1,14 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
const warnBlocksImport = deprecate(
|
||||
() => {},
|
||||
dedent`
|
||||
Importing from '@storybook/addon-docs/blocks' is deprecated, import directly from '@storybook/addon-docs' instead:
|
||||
|
||||
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-scoped-blocks-imports
|
||||
`
|
||||
);
|
||||
warnBlocksImport();
|
||||
|
||||
export * from './dist/esm/blocks';
|
||||
|
||||
@ -51,7 +51,7 @@ module.exports = {
|
||||
Finally, you can create MDX files like this:
|
||||
|
||||
```md
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title='App Component' />
|
||||
|
||||
|
||||
@ -59,15 +59,15 @@ If you're coming from the `storiesOf` format, there's [a codemod that adds it fo
|
||||
|
||||
## Subcomponents parameter
|
||||
|
||||
Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `List` and `ListItem` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
|
||||
Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `Button` and `ButtonGroup` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
|
||||
|
||||
```js
|
||||
import { List, ListHeading, ListItem } from './List';
|
||||
import { Button, ButtonGroup } from '../ButtonGroup';
|
||||
|
||||
export default {
|
||||
title: 'Path/to/List',
|
||||
component: List,
|
||||
subcomponents: { ListHeading, ListItem },
|
||||
title: 'Path/to/ButtonGroup',
|
||||
component: ButtonGroup,
|
||||
subcomponents: { Button },
|
||||
};
|
||||
```
|
||||
|
||||
@ -79,7 +79,7 @@ If you want organize your documentation differently for groups of components, we
|
||||
|
||||
## Replacing DocsPage
|
||||
|
||||
What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
|
||||
What if you don't want a `DocsPage` for your Storybook, for a specific component, or even for a specific story?
|
||||
|
||||
You can replace DocsPage at any level by overriding the `docs.page` parameter:
|
||||
|
||||
@ -122,14 +122,7 @@ Here's an example of rebuilding `DocsPage` out of doc blocks:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import {
|
||||
Title,
|
||||
Subtitle,
|
||||
Description,
|
||||
Primary,
|
||||
ArgsTable,
|
||||
Stories,
|
||||
} from '@storybook/addon-docs/blocks';
|
||||
import { Title, Subtitle, Description, Primary, ArgsTable, Stories } from '@storybook/addon-docs';
|
||||
import { DocgenButton } from '../../components/DocgenButton';
|
||||
|
||||
export default {
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
Let's get started with an example that combines markdown with a single story:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
<Meta title="MDX/Checkbox" component={Checkbox} />
|
||||
@ -79,7 +79,7 @@ There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn dire
|
||||
Now let's look at a more realistic example to see a few more things we can do:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
|
||||
import { Badge } from './Badge';
|
||||
import { Icon } from './Icon';
|
||||
@ -136,7 +136,7 @@ And here's how that gets rendered in Storybook:
|
||||
Suppose you have an existing story and want to embed it into your docs. Here's how to show a story with ID `some--id` (check the browser URL in Storybook v5+ to see a story's ID):
|
||||
|
||||
```md
|
||||
import { Story } from "@storybook/addon-docs/blocks";
|
||||
import { Story } from "@storybook/addon-docs";
|
||||
|
||||
# Some header
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 71 KiB |
@ -32,7 +32,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
|
||||
|
||||
This appends `vue-docgen-loader` to the existing configuration, which at this point will also include modifications made by the common preset.
|
||||
|
||||
For props tables and descriptions, both of which are described in more detail below, it defines a file [config.tsx](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/config.tsx).
|
||||
For props tables and descriptions, both of which are described in more detail below, it defines a file [config.jsx](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/config.jsx).
|
||||
|
||||
## Arg tables
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ To use the props table in [MDX](./mdx.md), use the `ArgsTable` block:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.mdx
|
||||
import { ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { ArgsTable } from '@storybook/addon-docs';
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
# My Component!
|
||||
|
||||
@ -61,8 +61,8 @@ basic.parameters = {
|
||||
**Button.stories.mdx**
|
||||
|
||||
```md
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
import * as stories from './Button.stories.js';
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
import \* as stories from './Button.stories.js';
|
||||
import { SomeComponent } from 'path/to/SomeComponent';
|
||||
|
||||
<Meta title="Demo/Button" component={Button} />
|
||||
@ -91,7 +91,7 @@ We recommend [MDX Docs](#csf-stories-with-mdx-docs) as the most ergonomic way to
|
||||
**Button.mdx**
|
||||
|
||||
```md
|
||||
import { Story } from '@storybook/addon-docs/blocks';
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
import { SomeComponent } from 'somewhere';
|
||||
|
||||
# Button
|
||||
@ -289,7 +289,7 @@ When you're writing stories you can do this by adding a [decorator](https://stor
|
||||
The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page:
|
||||
|
||||
```js
|
||||
import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, DocsContainer } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="Addons/Docs/container-override"
|
||||
@ -312,7 +312,7 @@ Rest of your file...
|
||||
This is especially useful if you are using `styled-components` and need to wrap your JSX with a `ThemeProvider` to have access to your theme:
|
||||
|
||||
```js
|
||||
import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, DocsContainer } from '@storybook/addon-docs';
|
||||
import { ThemeProvider } from 'styled-components'
|
||||
import { theme } from '../path/to/theme'
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ module.exports = {
|
||||
Finally, you can create MDX files like this:
|
||||
|
||||
```md
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
<Meta title='App Component' component='AppComponent' />
|
||||
|
||||
@ -3,7 +3,7 @@ const mdx = require('@mdx-js/mdx');
|
||||
const { ScriptTransformer } = require('@jest/transform');
|
||||
const { dedent } = require('ts-dedent');
|
||||
|
||||
const createCompiler = require('./mdx-compiler-plugin');
|
||||
const { createCompiler } = require('@storybook/csf-tools/mdx');
|
||||
|
||||
const compilers = [createCompiler({})];
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
module.exports = require('./dist/cjs/mdx/mdx-compiler-plugin');
|
||||
module.exports = require('@storybook/csf-tools/mdx').createCompiler;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.3.0-alpha.19",
|
||||
"version": "6.3.0-rc.8",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -44,6 +44,7 @@
|
||||
"react/**/*",
|
||||
"vue/**/*",
|
||||
"web-components/**/*",
|
||||
"lit/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
@ -62,19 +63,20 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.3.0-alpha.19",
|
||||
"@storybook/api": "6.3.0-alpha.19",
|
||||
"@storybook/builder-webpack4": "6.3.0-alpha.19",
|
||||
"@storybook/client-api": "6.3.0-alpha.19",
|
||||
"@storybook/client-logger": "6.3.0-alpha.19",
|
||||
"@storybook/components": "6.3.0-alpha.19",
|
||||
"@storybook/core": "6.3.0-alpha.19",
|
||||
"@storybook/core-events": "6.3.0-alpha.19",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.3.0-alpha.19",
|
||||
"@storybook/postinstall": "6.3.0-alpha.19",
|
||||
"@storybook/source-loader": "6.3.0-alpha.19",
|
||||
"@storybook/theming": "6.3.0-alpha.19",
|
||||
"@storybook/csf-tools": "6.3.0-rc.8",
|
||||
"@storybook/node-logger": "6.3.0-rc.8",
|
||||
"@storybook/postinstall": "6.3.0-rc.8",
|
||||
"@storybook/source-loader": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -87,6 +89,7 @@
|
||||
"js-string-escape": "^1.0.1",
|
||||
"loader-utils": "^2.0.0",
|
||||
"lodash": "^4.17.20",
|
||||
"p-limit": "^3.1.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-element-to-jsx-string": "^14.3.2",
|
||||
@ -97,14 +100,14 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/core": "^11.2.14",
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.3.0-alpha.19",
|
||||
"@storybook/react": "6.3.0-alpha.19",
|
||||
"@storybook/vue": "6.3.0-alpha.19",
|
||||
"@storybook/web-components": "6.3.0-alpha.19",
|
||||
"@storybook/angular": "6.3.0-rc.8",
|
||||
"@storybook/react": "6.3.0-rc.8",
|
||||
"@storybook/vue": "6.3.0-rc.8",
|
||||
"@storybook/web-components": "6.3.0-rc.8",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -120,8 +123,8 @@
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^26.6.3",
|
||||
"jest-specific-snapshot": "^4.0.0",
|
||||
"lit-element": "^2.4.0",
|
||||
"lit-html": "^1.3.0",
|
||||
"lit-element": "^3.0.0-rc.2",
|
||||
"lit-html": "^2.0.0-rc.3",
|
||||
"require-from-string": "^2.0.2",
|
||||
"rxjs": "^6.6.3",
|
||||
"styled-components": "^5.2.1",
|
||||
@ -134,11 +137,12 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.3.0-alpha.19",
|
||||
"@storybook/vue": "6.3.0-alpha.19",
|
||||
"@storybook/vue3": "6.3.0-alpha.19",
|
||||
"@storybook/web-components": "6.3.0-alpha.19",
|
||||
"lit-html": "^1.0.0",
|
||||
"@storybook/angular": "6.3.0-beta.17",
|
||||
"@storybook/vue": "6.3.0-beta.17",
|
||||
"@storybook/vue3": "6.3.0-beta.17",
|
||||
"@storybook/web-components": "6.3.0-beta.17",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0",
|
||||
"svelte": "^3.31.2",
|
||||
@ -159,6 +163,9 @@
|
||||
"@storybook/web-components": {
|
||||
"optional": true
|
||||
},
|
||||
"lit": {
|
||||
"optional": true
|
||||
},
|
||||
"lit-html": {
|
||||
"optional": true
|
||||
},
|
||||
@ -184,7 +191,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8ba485343b31df4e65fce2494a5f615d6d6c661d",
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
@ -78,7 +78,7 @@ module.exports = {
|
||||
Finally, you can create MDX files like this:
|
||||
|
||||
```md
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta title='Button' component={Button} />
|
||||
|
||||
@ -8,13 +8,9 @@ import {
|
||||
} from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { SourceContext, SourceContextProps } from './SourceContainer';
|
||||
import { getSourceProps } from './Source';
|
||||
import { getSourceProps, SourceState } from './Source';
|
||||
|
||||
export enum SourceState {
|
||||
OPEN = 'open',
|
||||
CLOSED = 'closed',
|
||||
NONE = 'none',
|
||||
}
|
||||
export { SourceState };
|
||||
|
||||
type CanvasProps = PurePreviewProps & {
|
||||
withSource?: SourceState;
|
||||
@ -26,8 +22,8 @@ const getPreviewProps = (
|
||||
docsContext: DocsContextProps,
|
||||
sourceContext: SourceContextProps
|
||||
): PurePreviewProps => {
|
||||
const { mdxComponentMeta, mdxStoryNameToKey, parameters } = docsContext;
|
||||
const sourceState = withSource || parameters?.docs?.source?.state || SourceState.CLOSED;
|
||||
const { mdxComponentMeta, mdxStoryNameToKey } = docsContext;
|
||||
let sourceState = withSource;
|
||||
if (sourceState === SourceState.NONE) {
|
||||
return props;
|
||||
}
|
||||
@ -50,6 +46,8 @@ const getPreviewProps = (
|
||||
)
|
||||
);
|
||||
const sourceProps = getSourceProps({ ids: targetIds }, docsContext, sourceContext);
|
||||
if (!sourceState) sourceState = sourceProps.state;
|
||||
|
||||
return {
|
||||
...props, // pass through columns etc.
|
||||
withSource: sourceProps,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { FunctionComponent, useEffect } from 'react';
|
||||
import { document, window as globalWindow } from 'global';
|
||||
import global from 'global';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
@ -12,6 +12,8 @@ import { SourceContainer } from './SourceContainer';
|
||||
import { CodeOrSourceMdx, AnchorMdx, HeadersMdx } from './mdx';
|
||||
import { scrollToElement } from './utils';
|
||||
|
||||
const { document, window: globalWindow } = global;
|
||||
|
||||
export interface DocsContainerProps {
|
||||
context: DocsContextProps;
|
||||
}
|
||||
@ -27,7 +29,7 @@ const warnOptionsTheme = deprecate(
|
||||
() => {},
|
||||
dedent`
|
||||
Deprecated parameter: options.theme => docs.theme
|
||||
|
||||
|
||||
https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming
|
||||
`
|
||||
);
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import React, { FC, useContext } from 'react';
|
||||
import { document } from 'global';
|
||||
import global from 'global';
|
||||
import { Args, BaseAnnotations, BaseMeta } from '@storybook/addons';
|
||||
import { Anchor } from './Anchor';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { getDocsStories } from './utils';
|
||||
import { Component } from './types';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
type MetaProps = BaseMeta<Component> & BaseAnnotations<Args, any>;
|
||||
|
||||
function getFirstStoryId(docsContext: DocsContextProps): string {
|
||||
|
||||
@ -15,6 +15,12 @@ import { SourceType } from '../shared';
|
||||
|
||||
import { enhanceSource } from './enhanceSource';
|
||||
|
||||
export enum SourceState {
|
||||
OPEN = 'open',
|
||||
CLOSED = 'closed',
|
||||
NONE = 'none',
|
||||
}
|
||||
|
||||
interface CommonProps {
|
||||
language?: string;
|
||||
dark?: boolean;
|
||||
@ -50,6 +56,20 @@ const getStoryContext = (storyId: StoryId, docsContext: DocsContextProps): Story
|
||||
return storyContext;
|
||||
};
|
||||
|
||||
const getSourceState = (storyIds: string[], docsContext: DocsContextProps) => {
|
||||
const states = storyIds
|
||||
.map((storyId) => {
|
||||
const storyContext = getStoryContext(storyId, docsContext);
|
||||
if (!storyContext) return null;
|
||||
return storyContext.parameters.docs?.source?.state;
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
if (states.length === 0) return SourceState.CLOSED;
|
||||
// FIXME: handling multiple stories is a pain
|
||||
return states[0];
|
||||
};
|
||||
|
||||
const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): string => {
|
||||
const { sources } = sourceContext;
|
||||
// source rendering is async so source is unavailable at the start of the render cycle,
|
||||
@ -88,11 +108,13 @@ const getSnippet = (snippet: string, storyContext?: StoryContext): string => {
|
||||
return enhanced?.docs?.source?.code || '';
|
||||
};
|
||||
|
||||
type SourceStateProps = { state: SourceState };
|
||||
|
||||
export const getSourceProps = (
|
||||
props: SourceProps,
|
||||
docsContext: DocsContextProps,
|
||||
sourceContext: SourceContextProps
|
||||
): PureSourceProps => {
|
||||
): PureSourceProps & SourceStateProps => {
|
||||
const { id: currentId, parameters = {} } = docsContext;
|
||||
|
||||
const codeProps = props as CodeProps;
|
||||
@ -100,10 +122,12 @@ export const getSourceProps = (
|
||||
const multiProps = props as MultiSourceProps;
|
||||
|
||||
let source = codeProps.code; // prefer user-specified code
|
||||
|
||||
const targetId =
|
||||
singleProps.id === CURRENT_SELECTION || !singleProps.id ? currentId : singleProps.id;
|
||||
const targetIds = multiProps.ids || [targetId];
|
||||
|
||||
if (!source) {
|
||||
const targetId =
|
||||
singleProps.id === CURRENT_SELECTION || !singleProps.id ? currentId : singleProps.id;
|
||||
const targetIds = multiProps.ids || [targetId];
|
||||
source = targetIds
|
||||
.map((storyId) => {
|
||||
const storySource = getStorySource(storyId, sourceContext);
|
||||
@ -113,13 +137,20 @@ export const getSourceProps = (
|
||||
.join('\n\n');
|
||||
}
|
||||
|
||||
const state = getSourceState(targetIds, docsContext);
|
||||
|
||||
const { docs: docsParameters = {} } = parameters;
|
||||
const { source: sourceParameters = {} } = docsParameters;
|
||||
const { language: docsLanguage = null } = sourceParameters;
|
||||
|
||||
return source
|
||||
? { code: source, language: props.language || docsLanguage || 'jsx', dark: props.dark || false }
|
||||
: { error: SourceError.SOURCE_UNAVAILABLE };
|
||||
? {
|
||||
code: source,
|
||||
state,
|
||||
language: props.language || docsLanguage || 'jsx',
|
||||
dark: props.dark || false,
|
||||
}
|
||||
: { error: SourceError.SOURCE_UNAVAILABLE, state };
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -5,9 +5,11 @@ import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
interface TitleProps {
|
||||
children?: JSX.Element | string;
|
||||
}
|
||||
export const extractTitle = ({ kind, parameters }: DocsContextProps) => {
|
||||
const groups = kind.split('/');
|
||||
|
||||
const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
|
||||
|
||||
export const extractTitle = ({ kind }: DocsContextProps) => {
|
||||
const groups = kind.trim().split(STORY_KIND_PATH_SEPARATOR);
|
||||
return (groups && groups[groups.length - 1]) || kind;
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,54 @@
|
||||
import { combineParameters } from '@storybook/client-api';
|
||||
import { StoryContext, Parameters } from '@storybook/addons';
|
||||
import { extractSource, LocationsMap } from '@storybook/source-loader';
|
||||
|
||||
// ============================================================
|
||||
// START @storybook/source-loader/extract-source
|
||||
//
|
||||
// This code duplicated because tree-shaking isn't working.
|
||||
// It's not DRY, but source-loader is on the chopping block for
|
||||
// the next version of addon-docs, so it's not the worst sin.
|
||||
// ============================================================
|
||||
|
||||
interface SourceLoc {
|
||||
line: number;
|
||||
col: number;
|
||||
}
|
||||
|
||||
interface SourceBlock {
|
||||
startBody: SourceLoc;
|
||||
endBody: SourceLoc;
|
||||
startLoc: SourceLoc;
|
||||
endLoc: SourceLoc;
|
||||
}
|
||||
|
||||
interface LocationsMap {
|
||||
[key: string]: SourceBlock;
|
||||
}
|
||||
|
||||
/**
|
||||
* given a location, extract the text from the full source
|
||||
*/
|
||||
function extractSource(location: SourceBlock, lines: string[]): string | null {
|
||||
const { startBody: start, endBody: end } = location;
|
||||
if (start.line === end.line && lines[start.line - 1] !== undefined) {
|
||||
return lines[start.line - 1].substring(start.col, end.col);
|
||||
}
|
||||
// NOTE: storysource locations are 1-based not 0-based!
|
||||
const startLine = lines[start.line - 1];
|
||||
const endLine = lines[end.line - 1];
|
||||
if (startLine === undefined || endLine === undefined) {
|
||||
return null;
|
||||
}
|
||||
return [
|
||||
startLine.substring(start.col),
|
||||
...lines.slice(start.line, end.line - 1),
|
||||
endLine.substring(0, end.col),
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// END @storybook/source-loader/extract-source
|
||||
// ============================================================
|
||||
|
||||
interface StorySource {
|
||||
source: string;
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import React, { FC, SyntheticEvent } from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { NAVIGATE_URL } from '@storybook/core-events';
|
||||
import { Source, Code, components } from '@storybook/components';
|
||||
import { document } from 'global';
|
||||
import global from 'global';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
// Hacky utility for asserting identifiers in MDX Story elements
|
||||
export const assertIsFn = (val: any) => {
|
||||
if (typeof val !== 'function') {
|
||||
|
||||
@ -1,56 +1,31 @@
|
||||
import React from 'react';
|
||||
import { IStory, StoryContext } from '@storybook/angular';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import pLimit from 'p-limit';
|
||||
|
||||
const customElementsVersions: Record<string, number> = {};
|
||||
import { IStory, StoryContext } from '@storybook/angular';
|
||||
import { rendererFactory } from '@storybook/angular/renderer';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
|
||||
const limit = pLimit(1);
|
||||
|
||||
/**
|
||||
* Uses angular element to generate on-the-fly web components and reference it with `customElements`
|
||||
* then it is added into react
|
||||
* Uses the angular renderer to generate a story. Uses p-limit to run synchronously
|
||||
*/
|
||||
export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: StoryContext) => {
|
||||
// Upgrade story version in order that the next defined component has a unique key
|
||||
customElementsVersions[id] =
|
||||
customElementsVersions[id] !== undefined ? customElementsVersions[id] + 1 : 0;
|
||||
return React.createElement('div', {
|
||||
ref: async (node?: HTMLDivElement): Promise<void> => {
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const customElementsName = `${id}_${customElementsVersions[id]}`;
|
||||
|
||||
const Story = class Story extends React.Component {
|
||||
wrapperRef: React.RefObject<unknown>;
|
||||
|
||||
elementName: string;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.wrapperRef = React.createRef();
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const { ElementRendererService } = await import('@storybook/angular/element-renderer').catch(
|
||||
(error) => {
|
||||
logger.error(
|
||||
'Check the documentation to activate `inlineStories`. The `@angular/elements` & `@webcomponents/custom-elements` dependencies are required.'
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
);
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
customElements.define(
|
||||
customElementsName,
|
||||
await new ElementRendererService().renderAngularElement({
|
||||
storyFnAngular: storyFn(),
|
||||
return limit(async () => {
|
||||
const renderer = await rendererFactory.getRendererInstance(id, node);
|
||||
await renderer.render({
|
||||
forced: false,
|
||||
parameters,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return React.createElement(customElementsName, {
|
||||
ref: this.wrapperRef,
|
||||
storyFnAngular: storyFn(),
|
||||
targetDOMNode: node,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
return React.createElement(Story);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
import { Configuration, IgnorePlugin, Plugin } from 'webpack';
|
||||
|
||||
export function webpackFinal(webpackConfig: Configuration = {}): Configuration {
|
||||
return {
|
||||
...webpackConfig,
|
||||
plugins: [...webpackConfig.plugins, ...makeAngularElementRendererOptional()],
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Ignore `@storybook/angular/element-renderer` import if `@angular/elements` is not available
|
||||
*/
|
||||
function makeAngularElementRendererOptional(): Plugin[] {
|
||||
if (
|
||||
moduleIsAvailable('@angular/elements') &&
|
||||
moduleIsAvailable('@webcomponents/custom-elements')
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
return [new IgnorePlugin(/@storybook(\\|\/)angular(\\|\/)element-renderer/)];
|
||||
}
|
||||
|
||||
function moduleIsAvailable(moduleName: string): boolean {
|
||||
try {
|
||||
require.resolve(moduleName);
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@ import remarkSlug from 'remark-slug';
|
||||
import remarkExternalLinks from 'remark-external-links';
|
||||
|
||||
// @ts-ignore
|
||||
import createCompiler from '../../mdx/mdx-compiler-plugin';
|
||||
import { createCompiler } from '@storybook/csf-tools/mdx';
|
||||
|
||||
const resolvedBabelLoader = require.resolve('babel-loader', {
|
||||
paths: [require.resolve('@storybook/builder-webpack4')], // FIXME!!!
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 10017-ts-union 1`] = `
|
||||
Object {
|
||||
"icon": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": "specify icon=\\"search\\" or icon={IconComponent}",
|
||||
"name": "icon",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "union",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "union",
|
||||
"raw": "React.ReactNode | string",
|
||||
"required": true,
|
||||
"value": Array [
|
||||
Object {
|
||||
"name": "other",
|
||||
"raw": "React.ReactNode",
|
||||
"value": "ReactReactNode",
|
||||
},
|
||||
Object {
|
||||
"name": "string",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,26 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 10278-ts-multiple-components 1`] = `
|
||||
Object {
|
||||
"aProperty": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": "",
|
||||
"name": "aProperty",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "any",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "other",
|
||||
"required": true,
|
||||
"value": "any",
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,127 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8140-js-prop-types-oneof 1`] = `
|
||||
Object {
|
||||
"blank": Object {
|
||||
"control": Object {
|
||||
"type": "boolean",
|
||||
},
|
||||
"description": "No background or border if static alert",
|
||||
"name": "blank",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "bool",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
"icon": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "Allows icon override, accepts material icon name",
|
||||
"name": "icon",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
"message": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "",
|
||||
"name": "message",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": true,
|
||||
},
|
||||
},
|
||||
"mode": Object {
|
||||
"control": Object {
|
||||
"type": "radio",
|
||||
},
|
||||
"description": "",
|
||||
"name": "mode",
|
||||
"options": Array [
|
||||
"static",
|
||||
"timed",
|
||||
],
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'static'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'static' | 'timed'",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "enum",
|
||||
"required": false,
|
||||
"value": Array [
|
||||
"static",
|
||||
"timed",
|
||||
],
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"control": Object {
|
||||
"type": "radio",
|
||||
},
|
||||
"description": "",
|
||||
"name": "type",
|
||||
"options": Array [
|
||||
"success",
|
||||
"warning",
|
||||
"error",
|
||||
"primary",
|
||||
],
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'warning'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'success' | 'warning' | 'error' | 'primary'",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "enum",
|
||||
"required": false,
|
||||
"value": Array [
|
||||
"success",
|
||||
"warning",
|
||||
"error",
|
||||
"primary",
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,27 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8143-ts-imported-types 1`] = `
|
||||
Object {
|
||||
"bar": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": "",
|
||||
"name": "bar",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "Foo['bar']",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "other",
|
||||
"raw": "Foo['bar']",
|
||||
"required": true,
|
||||
"value": "Foo['bar']",
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,27 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8143-ts-react-fc-generics 1`] = `
|
||||
Object {
|
||||
"padding": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "padding",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'0'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8279-js-styled-docgen 1`] = `Object {}`;
|
||||
@ -0,0 +1,25 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8428-js-static-prop-types 1`] = `
|
||||
Object {
|
||||
"test": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "Please work...",
|
||||
"name": "test",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,25 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8663-js-styled-components 1`] = `
|
||||
Object {
|
||||
"bg": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "",
|
||||
"name": "bg",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,27 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8740-ts-multi-props 1`] = `
|
||||
Object {
|
||||
"size": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "size",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'a'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,48 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
|
||||
Object {
|
||||
"disabled": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "disabled",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
"variant": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": undefined,
|
||||
"name": "variant",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'small'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "unknown",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,89 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9023-js-hoc 1`] = `
|
||||
Object {
|
||||
"classes": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": "",
|
||||
"name": "classes",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "object",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "object",
|
||||
"required": true,
|
||||
},
|
||||
},
|
||||
"dismissible": Object {
|
||||
"control": Object {
|
||||
"type": "boolean",
|
||||
},
|
||||
"description": "",
|
||||
"name": "dismissible",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "bool",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
"icon": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": "",
|
||||
"name": "icon",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "elementType",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "other",
|
||||
"required": false,
|
||||
"value": "elementType",
|
||||
},
|
||||
},
|
||||
"variant": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "",
|
||||
"name": "variant",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'primary'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,39 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9399-js-proptypes-shape 1`] = `
|
||||
Object {
|
||||
"areas": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": "",
|
||||
"name": "areas",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": "[object]",
|
||||
"summary": "object[]",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "array",
|
||||
"required": true,
|
||||
"value": Object {
|
||||
"name": "object",
|
||||
"value": Object {
|
||||
"names": Object {
|
||||
"name": "array",
|
||||
"value": Object {
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
"position": Object {
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9465-ts-type-props 1`] = `
|
||||
Object {
|
||||
"disabled": Object {
|
||||
"control": Object {
|
||||
"type": "boolean",
|
||||
},
|
||||
"description": "",
|
||||
"name": "disabled",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,62 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9493-ts-display-name 1`] = `
|
||||
Object {
|
||||
"message": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "A message alerting about Empire activities.",
|
||||
"name": "message",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": true,
|
||||
},
|
||||
},
|
||||
"title": Object {
|
||||
"control": Object {
|
||||
"type": "object",
|
||||
},
|
||||
"description": "A title that brings attention to the alert.",
|
||||
"name": "title",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'Code Yellow'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "union",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "union",
|
||||
"raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
|
||||
"required": false,
|
||||
"value": Array [
|
||||
Object {
|
||||
"name": "other",
|
||||
"value": "literal",
|
||||
},
|
||||
Object {
|
||||
"name": "other",
|
||||
"value": "literal",
|
||||
},
|
||||
Object {
|
||||
"name": "other",
|
||||
"value": "literal",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9556-ts-react-default-exports 1`] = `
|
||||
Object {
|
||||
"isDisabled": Object {
|
||||
"control": Object {
|
||||
"type": "boolean",
|
||||
},
|
||||
"description": "",
|
||||
"name": "isDisabled",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "false",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9575-ts-camel-case 1`] = `
|
||||
Object {
|
||||
"color": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "",
|
||||
"name": "color",
|
||||
"table": Object {
|
||||
"defaultValue": Object {
|
||||
"detail": undefined,
|
||||
"summary": "'primary'",
|
||||
},
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": false,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,41 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react component properties 9586-js-react-memo 1`] = `
|
||||
Object {
|
||||
"label": Object {
|
||||
"control": Object {
|
||||
"type": "text",
|
||||
},
|
||||
"description": "",
|
||||
"name": "label",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": true,
|
||||
},
|
||||
},
|
||||
"onClick": Object {
|
||||
"description": "",
|
||||
"name": "onClick",
|
||||
"table": Object {
|
||||
"defaultValue": null,
|
||||
"jsDocTags": undefined,
|
||||
"type": Object {
|
||||
"detail": undefined,
|
||||
"summary": "func",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "function",
|
||||
"required": true,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user