mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-31 05:03:21 +08:00
Merge branch 'next' into fix/refs-with-authentication-hosted-on-chromatic
# Conflicts: # lib/manager-webpack4/src/manager-config.ts # lib/manager-webpack5/src/manager-config.ts
This commit is contained in:
Norbert de Langen
commit
40e0792dd9
@ -7,7 +7,7 @@ const flatten = require('lodash/flatten');
|
||||
const intersection = require('lodash/intersection');
|
||||
const isEmpty = require('lodash/isEmpty');
|
||||
|
||||
const pkg = require('../../package.json'); // eslint-disable-line import/newline-after-import
|
||||
const pkg = require('../../code/package.json'); // eslint-disable-line import/newline-after-import
|
||||
const prLogConfig = pkg['pr-log'];
|
||||
|
||||
const Versions = {
|
||||
|
||||
@ -10,7 +10,7 @@ executors:
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: circleci/node:14
|
||||
- image: cimg/node:14.19
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
@ -23,7 +23,7 @@ executors:
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: circleci/node:14-browsers
|
||||
- image: cimg/node:14.19-browsers
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
@ -45,6 +45,7 @@ executors:
|
||||
|
||||
orbs:
|
||||
git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3
|
||||
browser-tools: circleci/browser-tools@1.4.0
|
||||
|
||||
commands:
|
||||
ensure-pr-is-labeled-with:
|
||||
@ -86,43 +87,58 @@ jobs:
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
|
||||
- build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install --immutable
|
||||
command: |
|
||||
cd code
|
||||
yarn install --immutable
|
||||
- run:
|
||||
name: Install script dependencies
|
||||
command: |
|
||||
cd scripts
|
||||
yarn install --immutable
|
||||
- run:
|
||||
name: Bootstrap
|
||||
command: yarn bootstrap --build --manager
|
||||
command: |
|
||||
cd code
|
||||
yarn bootstrap --build
|
||||
git diff --exit-code
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
|
||||
key: build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
|
||||
paths:
|
||||
- ~/.yarn/berry/cache
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- examples
|
||||
- node_modules
|
||||
- addons
|
||||
- app
|
||||
- lib
|
||||
- code/node_modules
|
||||
- scripts/node_modules
|
||||
- code/examples
|
||||
- code/node_modules
|
||||
- code/addons
|
||||
- code/frameworks
|
||||
- code/lib
|
||||
- code/renderers
|
||||
- code/presets
|
||||
chromatic:
|
||||
executor: sb_node_14_browsers
|
||||
parallelism: 4
|
||||
parallelism: 15
|
||||
steps:
|
||||
# Keep using default checkout because Chromatic needs some git history to work properly
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: examples
|
||||
name: chromatic
|
||||
command: |
|
||||
cd code
|
||||
yarn run-chromatics
|
||||
examples:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 17
|
||||
parallelism: 15
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -131,11 +147,12 @@ jobs:
|
||||
- run:
|
||||
name: examples
|
||||
command: |
|
||||
cd code
|
||||
yarn build-storybooks --all
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- built-storybooks
|
||||
- code/built-storybooks
|
||||
publish:
|
||||
executor:
|
||||
class: medium
|
||||
@ -147,7 +164,9 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: running local registry
|
||||
command: yarn local-registry --publish
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --publish
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
@ -156,7 +175,7 @@ jobs:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_cypress_8_node_14
|
||||
parallelism: 4
|
||||
parallelism: 14
|
||||
steps:
|
||||
- when:
|
||||
condition:
|
||||
@ -174,14 +193,20 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E (extended) tests
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
|
||||
command: |
|
||||
cd code
|
||||
yarn test:e2e-framework --clean --all --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
@ -198,41 +223,57 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E (core) tests
|
||||
# Do not test CRA here because it's done in PnP part
|
||||
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
|
||||
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_legacy_root_api vite_react
|
||||
command: |
|
||||
cd code
|
||||
yarn test:e2e-framework vue3 angular130 angular13 angular12 web_components_typescript web_components_lit2 react react_legacy_root_api
|
||||
no_output_timeout: 5m
|
||||
- run:
|
||||
name: prep artifacts
|
||||
when: always
|
||||
command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
e2e-tests-sb-docs:
|
||||
executor:
|
||||
class: large
|
||||
name: sb_cypress_8_node_14
|
||||
parallelism: 2
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run smoke tests
|
||||
command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook-e2e-testing-out.zip
|
||||
destination: e2e
|
||||
# NOTE: this currently tests each story in docs mode, which doesn't make sense any more as stories
|
||||
# can no longer run in docs mode. Instead we should probably change the test runner to test each
|
||||
# docs entry if you run it in `VIEW_MODE=docs`
|
||||
# e2e-tests-sb-docs:
|
||||
# executor:
|
||||
# class: large
|
||||
# name: sb_cypress_8_node_14
|
||||
# parallelism: 2
|
||||
# steps:
|
||||
# - git-shallow-clone/checkout_advanced:
|
||||
# clone_options: '--depth 1 --verbose'
|
||||
# - attach_workspace:
|
||||
# at: .
|
||||
# - run:
|
||||
# name: Running local registry
|
||||
# command: yarn local-registry --port 6000 --open
|
||||
# background: true
|
||||
# - run:
|
||||
# name: Wait for registry
|
||||
# command: yarn wait-on http://localhost:6000
|
||||
# - run:
|
||||
# name: Run smoke tests
|
||||
# command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
|
||||
# no_output_timeout: 5m
|
||||
cra-bench:
|
||||
executor:
|
||||
class: medium
|
||||
@ -243,20 +284,32 @@ jobs:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: install playright
|
||||
command: |
|
||||
cd code
|
||||
npx playwright install
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run @storybook/bench on a CRA project
|
||||
command: |
|
||||
cd ..
|
||||
npx create-react-app cra-bench
|
||||
cd cra-bench
|
||||
npx @storybook/bench@latest 'npx sb init' --label cra --extra-flags "--modern"
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: set up cra repro, skip tests
|
||||
command: |
|
||||
cd code
|
||||
node ./lib/cli/bin/index.js repro -t cra --e2e ../cra-bench
|
||||
- run:
|
||||
name: Run @storybook/bench on repro
|
||||
command: |
|
||||
cd ./cra-bench
|
||||
npx @storybook/bench@1.0.0--canary.11.52d1ee7.1 'echo noop' --label cra
|
||||
e2e-tests-pnp:
|
||||
executor:
|
||||
class: medium
|
||||
@ -269,14 +322,20 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: run e2e tests cra
|
||||
command: yarn test:e2e-framework --pnp cra
|
||||
command: |
|
||||
cd code
|
||||
yarn test:e2e-framework --pnp cra
|
||||
# - run:
|
||||
# name: run e2e tests vue
|
||||
# command: yarn test:e2e-framework --pnp sfcVue
|
||||
@ -301,78 +360,45 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: running example
|
||||
command: yarn serve-storybooks
|
||||
command: |
|
||||
cd code
|
||||
yarn serve-storybooks
|
||||
background: true
|
||||
- run:
|
||||
name: await running examples
|
||||
command: yarn await-serve-storybooks
|
||||
command: |
|
||||
cd code
|
||||
yarn await-serve-storybooks
|
||||
- run:
|
||||
name: cypress run
|
||||
command: yarn test:e2e-examples
|
||||
command: |
|
||||
cd code
|
||||
yarn test:e2e-examples
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
smoke-tests:
|
||||
executor:
|
||||
class: medium
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
environment:
|
||||
# Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
|
||||
# because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
|
||||
DISABLE_ESLINT_PLUGIN: 'true'
|
||||
parallelism: 16
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Run react kitchen-sink (smoke test)
|
||||
name: smoke tests
|
||||
command: |
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run react typescript kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/cra-ts-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run vue kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/vue-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run svelte kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/svelte-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run angular-cli (smoke test)
|
||||
command: |
|
||||
cd examples/angular-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run ember-cli (smoke test)
|
||||
command: |
|
||||
cd examples/ember-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 preact kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/preact-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run cra react15 (smoke test)
|
||||
command: |
|
||||
cd examples/cra-react15
|
||||
yarn storybook --smoke-test --quiet
|
||||
cd code
|
||||
yarn smoketest-storybooks --all
|
||||
lint:
|
||||
executor:
|
||||
class: small
|
||||
class: medium
|
||||
name: sb_node_14_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
@ -381,7 +407,23 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Lint
|
||||
command: yarn lint
|
||||
command: |
|
||||
cd code
|
||||
yarn lint
|
||||
script-unit-tests:
|
||||
executor: sb_node_14_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Test
|
||||
command: |
|
||||
cd scripts
|
||||
yarn test --coverage --runInBand --ci
|
||||
- store_test_results:
|
||||
path: scripts/junit.xml
|
||||
unit-tests:
|
||||
executor: sb_node_14_browsers
|
||||
steps:
|
||||
@ -391,13 +433,15 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Test
|
||||
command: yarn test --coverage --runInBand --ci
|
||||
command: |
|
||||
cd code
|
||||
yarn test --coverage --runInBand --ci
|
||||
- store_test_results:
|
||||
path: junit.xml
|
||||
path: code/junit.xml
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- coverage
|
||||
- code/coverage
|
||||
coverage:
|
||||
executor:
|
||||
class: small
|
||||
@ -409,7 +453,9 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Upload coverage
|
||||
command: yarn coverage
|
||||
command: |
|
||||
cd code
|
||||
yarn coverage
|
||||
|
||||
workflows:
|
||||
test:
|
||||
@ -430,6 +476,9 @@ workflows:
|
||||
- unit-tests:
|
||||
requires:
|
||||
- build
|
||||
- script-unit-tests:
|
||||
requires:
|
||||
- build
|
||||
- coverage:
|
||||
requires:
|
||||
- unit-tests
|
||||
@ -445,9 +494,6 @@ workflows:
|
||||
- e2e-tests-core:
|
||||
requires:
|
||||
- publish
|
||||
- e2e-tests-sb-docs:
|
||||
requires:
|
||||
- publish
|
||||
- e2e-tests-pnp:
|
||||
requires:
|
||||
- publish
|
||||
|
||||
2
.gitattributes
vendored
2
.gitattributes
vendored
@ -1 +1 @@
|
||||
/.yarn/** linguist-generated
|
||||
/**/.yarn/** linguist-generated
|
||||
|
||||
48
.github/autolabeler.yml
vendored
48
.github/autolabeler.yml
vendored
@ -1,25 +1,25 @@
|
||||
'addon: a11y': ["addons/a11y/**"]
|
||||
'addon: actions': ["addons/actions/**"]
|
||||
'addon: backgrounds': ["addons/backgrounds/**"]
|
||||
'addon: events ': ["addons/events/**"]
|
||||
'addon: graphql ': ["addons/graphql/**"]
|
||||
'addon: info': ["addons/info/**"]
|
||||
'addon: jest': ["addons/jest/**"]
|
||||
'addon: knobs': ["addons/knobs/**"]
|
||||
'addon: links': ["addons/links/**"]
|
||||
'addon: notes': ["addons/notes/**"]
|
||||
'addon: options': ["addons/options/**"]
|
||||
'addon: storyshots': ["addons/storyshots/**"]
|
||||
'addon: viewport': ["addons/viewport/**"]
|
||||
'app: angular': ["app/angular/**"]
|
||||
'app: preact': ["app/preact/**"]
|
||||
'app: rax': ["app/rax/**"]
|
||||
'app: react': ["app/react/**"]
|
||||
'app: vue': ["app/vue/**"]
|
||||
'app: svelte': ["app/svelte/**"]
|
||||
'app: mithril': ["app/mithril/**"]
|
||||
'babel / webpack': ["webpack", "babel"]
|
||||
'cli': ["lib/cli/**"]
|
||||
'addon: a11y': ['addons/a11y/**']
|
||||
'addon: actions': ['addons/actions/**']
|
||||
'addon: backgrounds': ['addons/backgrounds/**']
|
||||
'addon: events ': ['addons/events/**']
|
||||
'addon: graphql ': ['addons/graphql/**']
|
||||
'addon: info': ['addons/info/**']
|
||||
'addon: jest': ['addons/jest/**']
|
||||
'addon: knobs': ['addons/knobs/**']
|
||||
'addon: links': ['addons/links/**']
|
||||
'addon: notes': ['addons/notes/**']
|
||||
'addon: options': ['addons/options/**']
|
||||
'addon: storyshots': ['addons/storyshots/**']
|
||||
'addon: viewport': ['addons/viewport/**']
|
||||
'app: angular': ['app/angular/**']
|
||||
'app: preact': ['app/preact/**']
|
||||
'app: rax': ['app/rax/**']
|
||||
'app: react': ['app/react/**']
|
||||
'app: vue': ['app/vue/**']
|
||||
'app: svelte': ['app/svelte/**']
|
||||
'app: mithril': ['app/mithril/**']
|
||||
'babel / webpack': ['webpack', 'babel']
|
||||
'cli': ['lib/cli/**']
|
||||
'compatibility with other tools': []
|
||||
'documentation': ["docs", "*.md"]
|
||||
'ui': ["lib/ui"]
|
||||
'documentation': ['docs', '*.md']
|
||||
'ui': ['lib/ui']
|
||||
|
||||
2
.github/workflows/cron-weekly.yml
vendored
2
.github/workflows/cron-weekly.yml
vendored
@ -2,7 +2,7 @@ name: Markdown Links Check
|
||||
# runs every monday at 9 am
|
||||
on:
|
||||
schedule:
|
||||
- cron: "0 9 * * 1"
|
||||
- cron: '0 9 * * 1'
|
||||
|
||||
jobs:
|
||||
check-links:
|
||||
|
||||
28
.github/workflows/generate-repros-next.yml
vendored
Normal file
28
.github/workflows/generate-repros-next.yml
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
name: Generate and push repros to the next branch
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: '2 2 */1 * *'
|
||||
|
||||
jobs:
|
||||
generate:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
YARN_ENABLE_IMMUTABLE_INSTALLS: false
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Setup git user
|
||||
run: |
|
||||
git config --global user.name "Storybook Bot"
|
||||
git config --global user.email "bot@storybook.js.org"
|
||||
- name: Install dependencies
|
||||
run: node ./scripts/check-dependencies.js
|
||||
- name: Bootstrap Storybook libraries
|
||||
run: yarn bootstrap --prep
|
||||
working-directory: ./code
|
||||
- name: Generate repros
|
||||
run: yarn next-repro
|
||||
working-directory: ./code
|
||||
- name: Publish repros to GitHub
|
||||
run: yarn publish-repros --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates-temp.git --push
|
||||
working-directory: ./code
|
||||
4
.github/workflows/generate-repros.yml
vendored
4
.github/workflows/generate-repros.yml
vendored
@ -4,7 +4,7 @@ on:
|
||||
schedule:
|
||||
- cron: '2 2 */1 * *'
|
||||
workflow_dispatch:
|
||||
# To remove when the branch will be merged
|
||||
# To remove when the branch will be merged
|
||||
push:
|
||||
branches:
|
||||
- generate-repros
|
||||
@ -20,6 +20,8 @@ jobs:
|
||||
run: |
|
||||
git config --global user.name "Storybook Bot"
|
||||
git config --global user.email "bot@storybook.js.org"
|
||||
- name: Change directory
|
||||
run: cd code
|
||||
- name: Install dependencies
|
||||
run: yarn install
|
||||
- name: Generate repros with Latest Storybook CLI
|
||||
|
||||
@ -35,4 +35,4 @@
|
||||
}
|
||||
],
|
||||
"aliveStatusCodes": [429, 200]
|
||||
}
|
||||
}
|
||||
|
||||
2
.github/workflows/tests-unit.yml
vendored
2
.github/workflows/tests-unit.yml
vendored
@ -31,8 +31,10 @@ jobs:
|
||||
cache: yarn
|
||||
- name: install, bootstrap
|
||||
run: |
|
||||
cd code
|
||||
yarn install --immutable
|
||||
yarn bootstrap --core
|
||||
- name: test
|
||||
run: |
|
||||
cd code
|
||||
yarn test --runInBand --ci
|
||||
|
||||
32
.gitignore
vendored
32
.gitignore
vendored
@ -3,39 +3,11 @@ node_modules
|
||||
.idea
|
||||
*.iml
|
||||
*.sw*
|
||||
npm-shrinkwrap.json
|
||||
dist
|
||||
.tern-port
|
||||
*.DS_Store
|
||||
.cache
|
||||
.parcel-cache
|
||||
coverage/
|
||||
*.lerna_backup
|
||||
build
|
||||
packages/examples/automated-*
|
||||
/**/LICENSE
|
||||
docs/public
|
||||
packs/*.tgz
|
||||
package-lock.json
|
||||
.nvmrc
|
||||
storybook-static
|
||||
integration/__image_snapshots__/__diff_output__
|
||||
.jest-test-results.json
|
||||
/examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
|
||||
lib/*.jar
|
||||
lib/**/dll
|
||||
/false
|
||||
/addons/docs/common/config-*
|
||||
built-storybooks
|
||||
cypress/videos
|
||||
cypress/screenshots
|
||||
examples/ember-cli/ember-output
|
||||
.verdaccio-cache
|
||||
tsconfig.tsbuildinfo
|
||||
lib/manager-webpack4/prebuilt
|
||||
lib/manager-webpack5/prebuilt
|
||||
examples/angular-cli/addon-jest.testresults.json
|
||||
junit.xml
|
||||
/repros
|
||||
|
||||
# Yarn stuff
|
||||
/**/.yarn/*
|
||||
@ -44,3 +16,5 @@ junit.xml
|
||||
!/**/.yarn/sdks
|
||||
!/**/.yarn/versions
|
||||
/**/.pnp.*
|
||||
/yarn.lock
|
||||
./examples/
|
||||
@ -5,5 +5,3 @@
|
||||
tasks:
|
||||
- init: yarn
|
||||
command: yarn bootstrap --core
|
||||
|
||||
|
||||
|
||||
31
.teamcity/patches/buildTypes/TestWorkflow.kts
vendored
31
.teamcity/patches/buildTypes/TestWorkflow.kts
vendored
@ -1,31 +0,0 @@
|
||||
package patches.buildTypes
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.VcsTrigger
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.vcs
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.ui.*
|
||||
|
||||
/*
|
||||
This patch script was generated by TeamCity on settings change in UI.
|
||||
To apply the patch, change the buildType with id = 'TestWorkflow'
|
||||
accordingly, and delete the patch script.
|
||||
*/
|
||||
changeBuildType(RelativeId("TestWorkflow")) {
|
||||
triggers {
|
||||
val trigger1 = find<VcsTrigger> {
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:.teamcity/**"
|
||||
branchFilter = """
|
||||
+:<default>
|
||||
+:next
|
||||
+:main
|
||||
+:pull/*
|
||||
""".trimIndent()
|
||||
}
|
||||
}
|
||||
trigger1.apply {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.DO_NOT_USE
|
||||
}
|
||||
}
|
||||
}
|
||||
107
.teamcity/pom.xml
vendored
107
.teamcity/pom.xml
vendored
@ -1,107 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<project>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
<name>Hosted_Root Config DSL Script</name>
|
||||
<groupId>Hosted_Root</groupId>
|
||||
<artifactId>Hosted_Root_dsl</artifactId>
|
||||
<version>1.0-SNAPSHOT</version>
|
||||
|
||||
<parent>
|
||||
<groupId>org.jetbrains.teamcity</groupId>
|
||||
<artifactId>configs-dsl-kotlin-parent</artifactId>
|
||||
<version>1.0-SNAPSHOT</version>
|
||||
</parent>
|
||||
|
||||
<repositories>
|
||||
<repository>
|
||||
<id>jetbrains-all</id>
|
||||
<url>https://download.jetbrains.com/teamcity-repository</url>
|
||||
<snapshots>
|
||||
<enabled>true</enabled>
|
||||
</snapshots>
|
||||
</repository>
|
||||
<repository>
|
||||
<id>teamcity-server</id>
|
||||
<url>https://storybook.beta.teamcity.com/app/dsl-plugins-repository</url>
|
||||
<snapshots>
|
||||
<enabled>true</enabled>
|
||||
</snapshots>
|
||||
</repository>
|
||||
</repositories>
|
||||
|
||||
<pluginRepositories>
|
||||
<pluginRepository>
|
||||
<id>JetBrains</id>
|
||||
<url>https://download.jetbrains.com/teamcity-repository</url>
|
||||
</pluginRepository>
|
||||
</pluginRepositories>
|
||||
|
||||
<build>
|
||||
<sourceDirectory>${basedir}</sourceDirectory>
|
||||
<plugins>
|
||||
<plugin>
|
||||
<artifactId>kotlin-maven-plugin</artifactId>
|
||||
<groupId>org.jetbrains.kotlin</groupId>
|
||||
<version>${kotlin.version}</version>
|
||||
|
||||
<configuration/>
|
||||
<executions>
|
||||
<execution>
|
||||
<id>compile</id>
|
||||
<phase>process-sources</phase>
|
||||
<goals>
|
||||
<goal>compile</goal>
|
||||
</goals>
|
||||
</execution>
|
||||
<execution>
|
||||
<id>test-compile</id>
|
||||
<phase>process-test-sources</phase>
|
||||
<goals>
|
||||
<goal>test-compile</goal>
|
||||
</goals>
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.jetbrains.teamcity</groupId>
|
||||
<artifactId>teamcity-configs-maven-plugin</artifactId>
|
||||
<version>${teamcity.dsl.version}</version>
|
||||
<configuration>
|
||||
<format>kotlin</format>
|
||||
<dstDir>target/generated-configs</dstDir>
|
||||
</configuration>
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
|
||||
<dependencies>
|
||||
<dependency>
|
||||
<groupId>org.jetbrains.teamcity</groupId>
|
||||
<artifactId>configs-dsl-kotlin</artifactId>
|
||||
<version>${teamcity.dsl.version}</version>
|
||||
<scope>compile</scope>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.jetbrains.teamcity</groupId>
|
||||
<artifactId>configs-dsl-kotlin-plugins</artifactId>
|
||||
<version>1.0-SNAPSHOT</version>
|
||||
<type>pom</type>
|
||||
<scope>compile</scope>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.jetbrains.kotlin</groupId>
|
||||
<artifactId>kotlin-stdlib-jdk8</artifactId>
|
||||
<version>${kotlin.version}</version>
|
||||
<scope>compile</scope>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.jetbrains.kotlin</groupId>
|
||||
<artifactId>kotlin-script-runtime</artifactId>
|
||||
<version>${kotlin.version}</version>
|
||||
<scope>compile</scope>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
<properties>
|
||||
<teamcity.dsl.version>2019.2.2-SNAPSHOT</teamcity.dsl.version>
|
||||
</properties>
|
||||
</project>
|
||||
496
.teamcity/settings.kts
vendored
496
.teamcity/settings.kts
vendored
@ -1,496 +0,0 @@
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.PullRequests
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.commitStatusPublisher
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.pullRequests
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.swabra
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.ScriptBuildStep
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.script
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.failureConditions.BuildFailureOnMetric
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.failureConditions.failOnMetricChange
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.projectFeatures.buildReportTab
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.projectFeatures.githubConnection
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.VcsTrigger
|
||||
import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.vcs
|
||||
|
||||
/*
|
||||
The settings script is an entry point for defining a TeamCity
|
||||
project hierarchy. The script should contain a single call to the
|
||||
project() function with a Project instance or an init function as
|
||||
an argument.
|
||||
|
||||
VcsRoots, BuildTypes, Templates, and subprojects can be
|
||||
registered inside the project using the vcsRoot(), buildType(),
|
||||
template(), and subProject() methods respectively.
|
||||
|
||||
To debug settings scripts in command-line, run the
|
||||
|
||||
mvnDebug org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate
|
||||
|
||||
command and attach your debugger to the port 8000.
|
||||
|
||||
To debug in IntelliJ Idea, open the 'Maven Projects' tool window (View
|
||||
-> Tool Windows -> Maven Projects), find the generate task node
|
||||
(Plugins -> teamcity-configs -> teamcity-configs:generate), the
|
||||
'Debug' option is available in the context menu for the task.
|
||||
*/
|
||||
|
||||
version = "2019.2"
|
||||
|
||||
project {
|
||||
template(Common)
|
||||
defaultTemplate = Common
|
||||
|
||||
buildType(TestWorkflow)
|
||||
|
||||
buildType(Build)
|
||||
buildType(E2E)
|
||||
buildType(SmokeTests)
|
||||
buildType(Test)
|
||||
buildType(Coverage)
|
||||
|
||||
subProject(ExamplesProject)
|
||||
|
||||
buildTypesOrderIds = arrayListOf(
|
||||
RelativeId("TestWorkflow"),
|
||||
RelativeId("Build"),
|
||||
RelativeId("E2E"),
|
||||
RelativeId("SmokeTests"),
|
||||
RelativeId("Test"),
|
||||
RelativeId("Coverage")
|
||||
)
|
||||
|
||||
|
||||
features {
|
||||
githubConnection {
|
||||
id = "PROJECT_EXT_6"
|
||||
displayName = "GitHub.com"
|
||||
clientId = "800d730c725f771d6d2a"
|
||||
clientSecret = "credentialsJSON:d1a5af15-1200-46c6-b0f1-f35bd466d909"
|
||||
}
|
||||
buildReportTab {
|
||||
id = "PROJECT_EXT_8"
|
||||
title = "Official"
|
||||
startPage = "built-storybooks.tar.gz!official-storybook/index.html"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
object Common: Template({
|
||||
name = "Common"
|
||||
|
||||
vcs {
|
||||
root(DslContext.settingsRoot)
|
||||
checkoutMode = CheckoutMode.ON_AGENT
|
||||
checkoutDir = "storybook/%teamcity.build.branch%"
|
||||
}
|
||||
|
||||
features {
|
||||
commitStatusPublisher {
|
||||
id = "Commit status publisher"
|
||||
publisher = github {
|
||||
githubUrl = "https://api.github.com"
|
||||
authType = personalToken {
|
||||
token = "credentialsJSON:5273320e-14be-4317-951e-a54c4dcca35d"
|
||||
}
|
||||
}
|
||||
param("github_oauth_user", "Hypnosphi")
|
||||
}
|
||||
swabra {
|
||||
id = "swabra"
|
||||
verbose = true
|
||||
paths = """
|
||||
-:.cache
|
||||
-:node_modules
|
||||
-:**/node_modules
|
||||
""".trimIndent()
|
||||
}
|
||||
pullRequests {
|
||||
id = "Pull requests"
|
||||
provider = github {
|
||||
authType = vcsRoot()
|
||||
filterAuthorRole = PullRequests.GitHubRoleFilter.EVERYBODY
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
object Build : BuildType({
|
||||
name = "Build"
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install --immutable
|
||||
yarn bootstrap --core
|
||||
""".trimIndent()
|
||||
dockerImage = "node:12"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
|
||||
artifactRules = """
|
||||
+:**/dist/** => dist.tar.gz
|
||||
+:**/dll/** => dist.tar.gz
|
||||
-:**/node_modules/** => dist.tar.gz
|
||||
""".trimIndent()
|
||||
})
|
||||
|
||||
object ExamplesProject : Project({
|
||||
name = "Examples"
|
||||
|
||||
template(ExamplesTemplate)
|
||||
|
||||
buildType(Examples1)
|
||||
buildType(Examples2)
|
||||
buildType(Examples3)
|
||||
buildType(Examples4)
|
||||
buildType(Examples5)
|
||||
buildType(AggregateExamples)
|
||||
})
|
||||
|
||||
object ExamplesTemplate : Template({
|
||||
name = "Examples Template"
|
||||
|
||||
dependencies {
|
||||
dependency(Build) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "dist.tar.gz!** => ."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install
|
||||
rm -rf built-storybooks
|
||||
mkdir -p built-storybooks
|
||||
|
||||
yarn build-storybooks --all
|
||||
""".trimIndent()
|
||||
dockerImage = "buildkite/puppeteer"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
|
||||
artifactRules = "built-storybooks => built-storybooks.tar.gz"
|
||||
|
||||
params {
|
||||
param("env.CIRCLE_NODE_TOTAL", "5")
|
||||
}
|
||||
})
|
||||
|
||||
object Examples1 : BuildType({
|
||||
name = "Examples 1"
|
||||
templates = listOf(ExamplesTemplate)
|
||||
|
||||
params {
|
||||
param("env.CIRCLE_NODE_INDEX", "0")
|
||||
}
|
||||
|
||||
disableSettings("Commit status publisher")
|
||||
})
|
||||
|
||||
object Examples2 : BuildType({
|
||||
name = "Examples 2"
|
||||
templates = listOf(ExamplesTemplate)
|
||||
|
||||
params {
|
||||
param("env.CIRCLE_NODE_INDEX", "1")
|
||||
}
|
||||
|
||||
disableSettings("Commit status publisher")
|
||||
})
|
||||
|
||||
object Examples3 : BuildType({
|
||||
name = "Examples 3"
|
||||
templates = listOf(ExamplesTemplate)
|
||||
|
||||
params {
|
||||
param("env.CIRCLE_NODE_INDEX", "2")
|
||||
}
|
||||
|
||||
disableSettings("Commit status publisher")
|
||||
})
|
||||
|
||||
object Examples4 : BuildType({
|
||||
name = "Examples 4"
|
||||
templates = listOf(ExamplesTemplate)
|
||||
|
||||
params {
|
||||
param("env.CIRCLE_NODE_INDEX", "3")
|
||||
}
|
||||
|
||||
disableSettings("Commit status publisher")
|
||||
})
|
||||
|
||||
object Examples5 : BuildType({
|
||||
name = "Examples 5"
|
||||
templates = listOf(ExamplesTemplate)
|
||||
|
||||
params {
|
||||
param("env.CIRCLE_NODE_INDEX", "4")
|
||||
}
|
||||
|
||||
disableSettings("Commit status publisher")
|
||||
})
|
||||
|
||||
object AggregateExamples : BuildType({
|
||||
name = "Aggregate Examples"
|
||||
|
||||
dependencies {
|
||||
dependency(Examples1) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
|
||||
}
|
||||
}
|
||||
dependency(Examples2) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
|
||||
}
|
||||
}
|
||||
dependency(Examples3) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
|
||||
}
|
||||
}
|
||||
dependency(Examples4) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
|
||||
}
|
||||
}
|
||||
dependency(Examples5) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
artifactRules = "built-storybooks => built-storybooks.tar.gz"
|
||||
})
|
||||
|
||||
object E2E : BuildType({
|
||||
name = "E2E"
|
||||
|
||||
dependencies {
|
||||
dependency(AggregateExamples) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install --immutable
|
||||
yarn cypress install
|
||||
yarn serve-storybooks &
|
||||
yarn await-serve-storybooks
|
||||
yarn cypress run --reporter teamcity || :
|
||||
yarn ts-node --transpile-only cypress/report-teamcity-metadata.ts || :
|
||||
""".trimIndent()
|
||||
dockerImage = "cypress/base:12.19.0"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
|
||||
artifactRules = """
|
||||
cypress/screenshots => screenshots.tar.gz
|
||||
cypress/videos => videos.tar.gz
|
||||
""".trimIndent()
|
||||
|
||||
failureConditions {
|
||||
failOnMetricChange {
|
||||
metric = BuildFailureOnMetric.MetricType.TEST_COUNT
|
||||
units = BuildFailureOnMetric.MetricUnit.DEFAULT_UNIT
|
||||
comparison = BuildFailureOnMetric.MetricComparison.LESS
|
||||
compareTo = value()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
object SmokeTests : BuildType({
|
||||
name = "Smoke Tests"
|
||||
|
||||
dependencies {
|
||||
dependency(Build) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "dist.tar.gz!** => ."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
params {
|
||||
// Disable ESLint when running smoke tests to improve perf and as of CRA 4.0.3, CRA kitchen sinks are throwing
|
||||
// because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
|
||||
param("env.DISABLE_ESLINT_PLUGIN", "true")
|
||||
}
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install --immutable
|
||||
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../cra-ts-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../vue-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../svelte-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../angular-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../ember-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../official-storybook
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../preact-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
|
||||
cd ../cra-react15
|
||||
yarn storybook --smoke-test --quiet
|
||||
""".trimIndent()
|
||||
dockerImage = "node:12"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
object Test : BuildType({
|
||||
name = "Test"
|
||||
|
||||
dependencies {
|
||||
dependency(Build) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "dist.tar.gz!** => ."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install
|
||||
|
||||
# TODO remove after merging
|
||||
mkdir temp-jest-teamcity
|
||||
cd temp-jest-teamcity
|
||||
yarn init -y
|
||||
touch yarn.lock
|
||||
yarn add -D jest-teamcity
|
||||
cd ..
|
||||
|
||||
yarn jest --coverage -w 2 --reporters=${'$'}PWD/temp-jest-teamcity/node_modules/jest-teamcity
|
||||
""".trimIndent()
|
||||
dockerImage = "node:12"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
|
||||
artifactRules = "coverage => coverage.tar.gz"
|
||||
})
|
||||
|
||||
object Coverage : BuildType({
|
||||
name = "Coverage"
|
||||
|
||||
dependencies {
|
||||
dependency(Test) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "coverage.tar.gz!** => coverage"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install
|
||||
yarn coverage
|
||||
""".trimIndent()
|
||||
dockerImage = "node:12"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
object TestWorkflow : BuildType({
|
||||
name = "Test Workflow"
|
||||
type = Type.COMPOSITE
|
||||
maxRunningBuilds = 2
|
||||
|
||||
dependencies {
|
||||
snapshot(E2E) {}
|
||||
snapshot(SmokeTests) {}
|
||||
snapshot(Coverage) {}
|
||||
}
|
||||
|
||||
triggers {
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:.teamcity/**"
|
||||
branchFilter = """
|
||||
+:<default>
|
||||
+:next
|
||||
+:main
|
||||
+:pull/*
|
||||
""".trimIndent()
|
||||
}
|
||||
}
|
||||
})
|
||||
8
.vscode/launch.json
vendored
8
.vscode/launch.json
vendored
@ -8,7 +8,7 @@
|
||||
"request": "launch",
|
||||
"name": "official-storybook",
|
||||
"runtimeExecutable": "npm",
|
||||
"cwd": "${workspaceFolder}/examples/official-storybook",
|
||||
"cwd": "${workspaceFolder}/code/examples/official-storybook",
|
||||
"runtimeArgs": [
|
||||
"run-script",
|
||||
"debug"
|
||||
@ -21,10 +21,10 @@
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "cli html",
|
||||
"cwd": "${workspaceFolder}/lib/cli/stories",
|
||||
"cwd": "${workspaceFolder}/code/lib/cli/stories",
|
||||
"runtimeArgs": [
|
||||
"--inspect-brk",
|
||||
"${workspaceFolder}/lib/cli/bin/index.js",
|
||||
"${workspaceFolder}/code/lib/cli/bin/index.js",
|
||||
"init",
|
||||
"--type",
|
||||
"html"
|
||||
@ -35,4 +35,4 @@
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,3 +1,3 @@
|
||||
{
|
||||
"deepscan.enable": true
|
||||
}
|
||||
}
|
||||
|
||||
768
.yarn/releases/yarn-3.1.1.cjs
generated
vendored
768
.yarn/releases/yarn-3.1.1.cjs
generated
vendored
File diff suppressed because one or more lines are too long
18
.yarnrc.yml
18
.yarnrc.yml
@ -1,18 +0,0 @@
|
||||
compressionLevel: 0
|
||||
|
||||
enableGlobalCache: true
|
||||
|
||||
nodeLinker: node-modules
|
||||
|
||||
npmRegistryServer: "https://registry.yarnpkg.com"
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
|
||||
spec: "@yarnpkg/plugin-typescript"
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
spec: "@yarnpkg/plugin-interactive-tools"
|
||||
|
||||
unsafeHttpWhitelist:
|
||||
- localhost
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.1.1.cjs
|
||||
6886
CHANGELOG.md
6886
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
6754
CHANGELOG.v6.md
Normal file
6754
CHANGELOG.v6.md
Normal file
File diff suppressed because it is too large
Load Diff
@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
- Using welcoming and inclusive language
|
||||
- Being respectful of differing viewpoints and experiences
|
||||
- Gracefully accepting constructive criticism
|
||||
- Focusing on what is best for the community
|
||||
- Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
- The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
- Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
<h1>Contributing to Storybook</h1>
|
||||
# Getting started
|
||||
|
||||
Please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/react/contribute/how-to-contribute).
|
||||
- Ensure you have node version 14 installed (suggestion: v14.18.1).
|
||||
- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
|
||||
- Run `./bootstrap.sh` to install the dependencies, and get the repo ready to be developed on.
|
||||
- Run `yarn start` inside of the `code` directory to start the development server.
|
||||
|
||||
During the transition, we're also preserving our [OLD, out of date contributing guide](./CONTRIBUTING.old.md) in parallel.
|
||||
# Generating reproductions
|
||||
|
||||
The monorepo has a script that generates Storybook reproductions based on configurations set in the `scripts/next-repro-generators/repro-config.yml` file. This makes it possible to quickly bootstrap examples with and without Storybook, for given configurations (e.g. CRA, Angular, Vue, etc.)
|
||||
|
||||
To do so:
|
||||
- Check the `scripts/next-repro-generators/repro-config.yml` if you want to see what will be generated
|
||||
- Run `./generate-repros.sh`
|
||||
- Check the result in the `repros` directory
|
||||
|
||||
# Contributing to Storybook
|
||||
|
||||
For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/react/contribute/how-to-contribute).
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
- [Verify your local version is working](#verify-your-local-version-is-working)
|
||||
- [Documentation](#documentation)
|
||||
- [Release Guide](#release-guide)
|
||||
- [Prerelease:](#prerelease)
|
||||
- [Full release:](#full-release)
|
||||
- [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.
|
||||
|
||||
|
||||
136
MAINTAINERS.md
136
MAINTAINERS.md
@ -7,71 +7,71 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
|
||||
# Labels
|
||||
|
||||
| label name | purpose |
|
||||
|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| accessibility | Issue, bug, or pull request related to accessibility |
|
||||
| addon:(name) | Issue, bug, or pull request related to Storybook addons (e.g., [Controls](/docs/essentials/controls.md)) |
|
||||
| app:(name) | Issue, bug, or pull request related to Storybook's supported frameworks (e.g., React) |
|
||||
| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) |
|
||||
| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) |
|
||||
| babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) |
|
||||
| BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. |
|
||||
| BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) |
|
||||
| build-storybook | Issue, bug, or pull request related to Storybook's production build |
|
||||
| cleanup | Minor cleanup style change that won't show up in release changelog |
|
||||
| bug | A bug within Storybook |
|
||||
| cli | Issue, bug, or pull request that affects the Storybook's CLI |
|
||||
| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) |
|
||||
| components | Issue, bug, or pull request related to Storybook's internal components |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) |
|
||||
| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) |
|
||||
| core | Issue, bug, or pull request related to Storybook's Core |
|
||||
| cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
|
||||
| CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md) |
|
||||
| decorators | Issue, bug, or pull related to Storybook's [Decorators](/docs/writing-stories/decorators.md) |
|
||||
| dependencies | Issue, bug, or pull request that related to upstream dependencies |
|
||||
| discussion | Issue currently being discussed between the maintainers and community |
|
||||
| do not merge | Pull request that will introduce regressions and will not be merged |
|
||||
| documentation | Issue, bug, or pull request that affects Storybook's documentation |
|
||||
| duplicate | Question or issue already asked in the repo's issues |
|
||||
| feature request | Request for a new feature to be included in Storybook |
|
||||
| flow | Issue, bug, or pull request related to Storybook and Flow |
|
||||
| Funded on Issuehunt | Storybook issue funded on [IssueHunt](https://issuehunt.io/) |
|
||||
| gatsby | Issue, bug, or pull request that affects Storybook and [Gatsby](https://www.gatsbyjs.com/) |
|
||||
| good first issue | Low impact Storybook issues that help new members get involved and start contributing |
|
||||
| has workaround | Issue or bug that has an alternative way to be solved with Storybook |
|
||||
| help wanted | Issue, or bug that requires additional help from the community |
|
||||
| ie11 | Issue, bug, or pull request related to Storybook and IE11 |
|
||||
| in progress | Issue or pull request that is currently being reviewed or worked on with the author |
|
||||
| inactive | Issue, or pull request that has gone stale and no active development has been done |
|
||||
| maintenance | Issue, or pull request related to Storybook's internal maintenance |
|
||||
| mdx | Issue, bug, or pull request related to MDX and Storybook |
|
||||
| medium | Issue or pull request that involves a significant amount of work within Storybook |
|
||||
| monorepos | Issue, bug, or pull request related to Storybook and monorepos (e.g., [lerna](https://lerna.js.org/) ) |
|
||||
| mui | Issue, bug, or pull request that affects Storybook and [Material-UI](https://material-ui.com/) |
|
||||
| multiframework | Issue, bug, or pull request that affects multiple supported frameworks (e.g., React, Vue) |
|
||||
| needs more info | Issue, or bug that requires additional context from the author |
|
||||
| needs reproduction | Issue, or bug that requires a reproduction to be looked at |
|
||||
| needs triage | Issue, bug, or pull request that requires further investigation from the maintainers |
|
||||
| nextjs | Issue, bug, or pull request related to Storybook's integration with [Next.js](https://nextjs.org/) |
|
||||
| nx | Issue, bug, or pull request related to Storybook's integration with [NX](https://nx.dev/) |
|
||||
| other | Storybook's miscellaneous issue or pull request |
|
||||
| P(n) | Bug or issue priority. Ranges from `0` (most urgent) to `N` (least urgent) |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the main branch |
|
||||
| performance issue | Issue, bug or pull request that affects Storybook's performance |
|
||||
| picked | Patch PRs cherry-picked to the main branch |
|
||||
| presets | Issue, bug, or pull requests that affect Storybook's presets |
|
||||
| question / support | General question about Storybook |
|
||||
| run e2e extended test suite | Pull request that affects Storybook's testing suite |
|
||||
| search | Issue, bug or pull request related to Storybook's search functionality |
|
||||
| security | Issue, bug, or pull request that addresses security with Storybook |
|
||||
| small | Issue or pull request that requires a small amount of work to be done |
|
||||
| source-loader | Issue, bug, or pull request related to code display within Storybook's stories |
|
||||
| theming | Issue, bug, or pull request related to Storybook customization (e.g., [theming](/docs/configure/theming.md)) |
|
||||
| todo | Issue or pull request currently being worked on |
|
||||
| typescript | Issue, bug, or pull request related to TypeScript |
|
||||
| ui | Issue, bug, or pull request related to Storybook's UI |
|
||||
| webpack5 | Issue, bug, or pull request related to Webpack 5 |
|
||||
| won't fix | Issue or pull request that won't be addressed by the maintainers (e.g., introduces a regression) |
|
||||
| yarn/npm | Issue or pull request related to node package managers |
|
||||
| label name | purpose |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| accessibility | Issue, bug, or pull request related to accessibility |
|
||||
| addon:(name) | Issue, bug, or pull request related to Storybook addons (e.g., [Controls](/docs/essentials/controls.md)) |
|
||||
| app:(name) | Issue, bug, or pull request related to Storybook's supported frameworks (e.g., React) |
|
||||
| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) |
|
||||
| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) |
|
||||
| babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) |
|
||||
| BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. |
|
||||
| BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) |
|
||||
| build-storybook | Issue, bug, or pull request related to Storybook's production build |
|
||||
| cleanup | Minor cleanup style change that won't show up in release changelog |
|
||||
| bug | A bug within Storybook |
|
||||
| cli | Issue, bug, or pull request that affects the Storybook's CLI |
|
||||
| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) |
|
||||
| components | Issue, bug, or pull request related to Storybook's internal components |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) |
|
||||
| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) |
|
||||
| core | Issue, bug, or pull request related to Storybook's Core |
|
||||
| cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/)) |
|
||||
| CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md) |
|
||||
| decorators | Issue, bug, or pull related to Storybook's [Decorators](/docs/writing-stories/decorators.md) |
|
||||
| dependencies | Issue, bug, or pull request that related to upstream dependencies |
|
||||
| discussion | Issue currently being discussed between the maintainers and community |
|
||||
| do not merge | Pull request that will introduce regressions and will not be merged |
|
||||
| documentation | Issue, bug, or pull request that affects Storybook's documentation |
|
||||
| duplicate | Question or issue already asked in the repo's issues |
|
||||
| feature request | Request for a new feature to be included in Storybook |
|
||||
| flow | Issue, bug, or pull request related to Storybook and Flow |
|
||||
| Funded on Issuehunt | Storybook issue funded on [IssueHunt](https://issuehunt.io/) |
|
||||
| gatsby | Issue, bug, or pull request that affects Storybook and [Gatsby](https://www.gatsbyjs.com/) |
|
||||
| good first issue | Low impact Storybook issues that help new members get involved and start contributing |
|
||||
| has workaround | Issue or bug that has an alternative way to be solved with Storybook |
|
||||
| help wanted | Issue, or bug that requires additional help from the community |
|
||||
| ie11 | Issue, bug, or pull request related to Storybook and IE11 |
|
||||
| in progress | Issue or pull request that is currently being reviewed or worked on with the author |
|
||||
| inactive | Issue, or pull request that has gone stale and no active development has been done |
|
||||
| maintenance | Issue, or pull request related to Storybook's internal maintenance |
|
||||
| mdx | Issue, bug, or pull request related to MDX and Storybook |
|
||||
| medium | Issue or pull request that involves a significant amount of work within Storybook |
|
||||
| monorepos | Issue, bug, or pull request related to Storybook and monorepos (e.g., [lerna](https://lerna.js.org/) ) |
|
||||
| mui | Issue, bug, or pull request that affects Storybook and [Material-UI](https://material-ui.com/) |
|
||||
| multiframework | Issue, bug, or pull request that affects multiple supported frameworks (e.g., React, Vue) |
|
||||
| needs more info | Issue, or bug that requires additional context from the author |
|
||||
| needs reproduction | Issue, or bug that requires a reproduction to be looked at |
|
||||
| needs triage | Issue, bug, or pull request that requires further investigation from the maintainers |
|
||||
| nextjs | Issue, bug, or pull request related to Storybook's integration with [Next.js](https://nextjs.org/) |
|
||||
| nx | Issue, bug, or pull request related to Storybook's integration with [NX](https://nx.dev/) |
|
||||
| other | Storybook's miscellaneous issue or pull request |
|
||||
| P(n) | Bug or issue priority. Ranges from `0` (most urgent) to `N` (least urgent) |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the main branch |
|
||||
| performance issue | Issue, bug or pull request that affects Storybook's performance |
|
||||
| picked | Patch PRs cherry-picked to the main branch |
|
||||
| presets | Issue, bug, or pull requests that affect Storybook's presets |
|
||||
| question / support | General question about Storybook |
|
||||
| run e2e extended test suite | Pull request that affects Storybook's testing suite |
|
||||
| search | Issue, bug or pull request related to Storybook's search functionality |
|
||||
| security | Issue, bug, or pull request that addresses security with Storybook |
|
||||
| small | Issue or pull request that requires a small amount of work to be done |
|
||||
| source-loader | Issue, bug, or pull request related to code display within Storybook's stories |
|
||||
| theming | Issue, bug, or pull request related to Storybook customization (e.g., [theming](/docs/configure/theming.md)) |
|
||||
| todo | Issue or pull request currently being worked on |
|
||||
| typescript | Issue, bug, or pull request related to TypeScript |
|
||||
| ui | Issue, bug, or pull request related to Storybook's UI |
|
||||
| webpack5 | Issue, bug, or pull request related to Webpack 5 |
|
||||
| won't fix | Issue or pull request that won't be addressed by the maintainers (e.g., introduces a regression) |
|
||||
| yarn/npm | Issue or pull request related to node package managers |
|
||||
|
||||
201
MIGRATION.md
201
MIGRATION.md
@ -1,5 +1,19 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
|
||||
- [Alpha release notes](#alpha-release-notes)
|
||||
- [Breaking changes](#breaking-changes)
|
||||
- [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
|
||||
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
|
||||
- [Webpack4 support discontinued](#webpack4-support-discontinued)
|
||||
- [Modern ESM / IE11 support discontinued](#modern-esm--ie11-support-discontinued)
|
||||
- [Framework field mandatory](#framework-field-mandatory)
|
||||
- [frameworkOptions renamed](#frameworkoptions-renamed)
|
||||
- [Framework standalone build moved](#framework-standalone-build-moved)
|
||||
- [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default)
|
||||
- [Babel mode v7 by default](#babel-mode-v7-by-default)
|
||||
- [7.0 feature flags removed](#70-feature-flags-removed)
|
||||
- [Removed docs.getContainer and getPage parameters](#removed-docs-getcontainer-and-getpage-parameters)
|
||||
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
|
||||
- [Vue 3 upgrade](#vue-3-upgrade)
|
||||
- [React18 new root API](#react18-new-root-api)
|
||||
@ -201,6 +215,189 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## From version 6.5.x to 7.0.0
|
||||
|
||||
### Alpha release notes
|
||||
|
||||
Storybook 7.0 is in early alpha. During the alpha, we are making a large number of breaking changes. We may also break the breaking changes based on what we learn during the development cycle. When 7.0 goes to beta, we will start stabilizing and adding various auto-migrations to help users upgrade more easily.
|
||||
|
||||
In the meantime, these migration notes are the best available documentation on things you should know upgrading to 7.0.
|
||||
|
||||
### Breaking changes
|
||||
|
||||
#### start-storybook / build-storybook binaries removed
|
||||
|
||||
SB6.x framework packages shipped binaries called `start-storybook` and `build-storybook`.
|
||||
|
||||
In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `sb dev` and `sb build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues.
|
||||
|
||||
A typical storybook project includes two scripts in your projects `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"storybook": "start-storybook <some flags>",
|
||||
"build-storybook": "build-storybook <some flags>"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
To convert this project to 7.0:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"storybook": "storybook dev <some flags>",
|
||||
"build-storybook": "storybook build <some flags>"
|
||||
},
|
||||
"devDependencies": {
|
||||
"storybook": "future"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The new CLI commands remove the following flags:
|
||||
|
||||
| flag | migration |
|
||||
| -------- | --------------------------------------------------------------------------------------------- |
|
||||
| --modern | No migration needed. [All ESM code is modern in SB7](#modern-esm--ie11-support-discontinued). |
|
||||
|
||||
#### storyStoreV7 enabled by default
|
||||
|
||||
SB6.4 introduced [Story Store V7](#story-store-v7), an optimization which allows code splitting for faster build and load times. This was an experimental, opt-in change and you can read more about it in [the migration notes below](#story-store-v7). TLDR: you can't use the legacy `storiesOf` API or dynamic titles in CSF.
|
||||
|
||||
Now in 7.0, Story Store V7 is the default. You can opt-out of it by setting the feature flag in `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
features: {
|
||||
storyStoreV7: false,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
During the 7.0 dev cycle we will be preparing recommendations and utilities to make it easier for `storiesOf` users to upgrade.
|
||||
|
||||
#### Webpack4 support discontinued
|
||||
|
||||
SB7.0 no longer supports Webpack4.
|
||||
|
||||
Depending on your project specifics, it might be possible to run your Storybook using the webpack5 builder without error.
|
||||
|
||||
If you are running into errors, you can upgrade your project to Webpack5 or you can try debugging those errors.
|
||||
|
||||
To upgrade:
|
||||
|
||||
- If you're configuring webpack directly, see the Webpack5 [release announcement](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) and [migration guide](https://webpack.js.org/migrate/5).
|
||||
- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to ugprade from V4 (Webpack4) to 5
|
||||
|
||||
During the 7.0 dev cycle we will be updating this section with useful resources as we run across them.
|
||||
|
||||
#### Modern ESM / IE11 support discontinued
|
||||
|
||||
SB7.0 compiles to modern ESM, meaning that IE11 is no longer supported. Over the course of the 7.0 dev cycle we will create recommendations for users who still require IE support.
|
||||
|
||||
#### Framework field mandatory
|
||||
|
||||
In 6.4 we introduced a new `main.js` field called [`framework`](#mainjs-framework-field). Starting in 7.0, this field is mandatory.
|
||||
The value of the `framework` field has also changed.
|
||||
|
||||
In 6.4, valid values included `@storybook/react`, `@storybook/vue`, etc.
|
||||
|
||||
In 7.0, frameworks also specify the builder to be used. For example, The current list of frameworks include:
|
||||
|
||||
- `@storybook/angular`
|
||||
- `@storybook/html-webpack5`
|
||||
- `@storybook/preact-webpack5`
|
||||
- `@storybook/react-webpack5`
|
||||
- `@storybook/server-webpack5`
|
||||
- `@storybook/svelte-webpack5`
|
||||
- `@storybook/vue-webpack5`
|
||||
- `@storybook/vue3-webpack5`
|
||||
- `@storybook/web-components-webpack5`
|
||||
|
||||
We will be expanding this list over the course of the 7.0 development cycle. More info on the rationale here: [Frameworks RFC](https://www.notion.so/chromatic-ui/Frameworks-RFC-89f8aafe3f0941ceb4c24683859ed65c).
|
||||
|
||||
#### frameworkOptions renamed
|
||||
|
||||
In 7.0, the `main.js` fields `reactOptions` and `angularOptions` have been renamed. They are now options on the `framework` field:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: { fastRefresh: true };
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Framework standalone build moved
|
||||
|
||||
In 7.0 the location of the standalone node API has moved to `@storybook/core-server`.
|
||||
|
||||
If you used the React standalone API, for example, you might have written:
|
||||
|
||||
```js
|
||||
const { buildStandalone } = require('@storybook/react/standalone');
|
||||
const options = {};
|
||||
buildStandalone(options).then(() => console.log('done'));
|
||||
```
|
||||
|
||||
In 7.0, you would now use:
|
||||
|
||||
```js
|
||||
const build = require('@storybook/core-server/standalone');
|
||||
const options = {};
|
||||
build(options).then(() => console.log('done'));
|
||||
```
|
||||
|
||||
#### Docs modern inline rendering by default
|
||||
|
||||
Storybook docs has a new rendering mode called "modern inline rendering" which unifies the way stories are rendered in Docs mode and in the canvas (aka story mode). It is still being stabilized in 7.0 dev cycle. If you run into trouble with inline rendering in docs, you can opt out of modern inline rendering in your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
features: {
|
||||
modernInlineRender: false,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Babel mode v7 by default
|
||||
|
||||
Storybook now uses your project babel configuration differently as [described below in Babel Mode v7](#babel-mode-v7). This is now the default. To opt-out:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
features: {
|
||||
babelModeV7: false,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### 7.0 feature flags removed
|
||||
|
||||
Storybook uses temporary feature flags to opt-in to future breaking changes or opt-in to legacy behaviors. For example:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
features: {
|
||||
emotionAlias: false,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
In 7.0 we've removed the following feature flags:
|
||||
|
||||
| flag | migration instructions |
|
||||
| ------------------- | ---------------------------------------------------- |
|
||||
| `emotionAlias` | This flag is no longer needed and should be deleted. |
|
||||
| `breakingChangesV7` | This flag is no longer needed and should be deleted. |
|
||||
|
||||
#### Removed docs.getContainer and getPage parameters
|
||||
|
||||
It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
|
||||
|
||||
## From version 6.4.x to 6.5.0
|
||||
|
||||
### Vue 3 upgrade
|
||||
@ -366,6 +563,7 @@ In 6.5, the final titles would be:
|
||||
- `Title.stories.js` => `Custom/Bar`
|
||||
|
||||
<!-- markdown-link-check-disable -->
|
||||
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Automigrate
|
||||
@ -2909,4 +3107,5 @@ If you **are** using these addons, it takes two steps to migrate:
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
```
|
||||
<!-- markdown-link-check-enable -->
|
||||
|
||||
<!-- markdown-link-check-enable -->
|
||||
|
||||
26
README.md
26
README.md
@ -93,19 +93,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
| Version | Supported |
|
||||
| --------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
| Version | Supported |
|
||||
| ------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
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) => ({
|
||||
outline: `2px dashed ${color}`,
|
||||
outlineOffset: 2,
|
||||
boxShadow: '0 0 0 6px rgba(255,255,255,0.6),',
|
||||
});
|
||||
@ -1,2 +0,0 @@
|
||||
import './a11yRunner';
|
||||
import './a11yHighlight';
|
||||
@ -1,27 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest"
|
||||
],
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,98 +0,0 @@
|
||||
import React, { FunctionComponent, useEffect } from 'react';
|
||||
import global from 'global';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
|
||||
import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components';
|
||||
import { AnyFramework } from '@storybook/csf';
|
||||
import { DocsContextProps, DocsContext } from './DocsContext';
|
||||
import { anchorBlockIdFromId } from './Anchor';
|
||||
import { storyBlockIdFromId } from './Story';
|
||||
import { SourceContainer } from './SourceContainer';
|
||||
import { CodeOrSourceMdx, AnchorMdx, HeadersMdx } from './mdx';
|
||||
import { scrollToElement } from './utils';
|
||||
|
||||
const { document, window: globalWindow } = global;
|
||||
|
||||
export interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {
|
||||
context: DocsContextProps<TFramework>;
|
||||
}
|
||||
|
||||
const defaultComponents = {
|
||||
...htmlComponents,
|
||||
code: CodeOrSourceMdx,
|
||||
a: AnchorMdx,
|
||||
...HeadersMdx,
|
||||
};
|
||||
|
||||
const warnOptionsTheme = deprecate(
|
||||
() => {},
|
||||
dedent`
|
||||
Deprecated parameter: options.theme => docs.theme
|
||||
|
||||
https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming
|
||||
`
|
||||
);
|
||||
|
||||
export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
|
||||
const { id: storyId, storyById } = context;
|
||||
const {
|
||||
parameters: { options = {}, docs = {} },
|
||||
} = storyById(storyId);
|
||||
let themeVars = docs.theme;
|
||||
if (!themeVars && options.theme) {
|
||||
warnOptionsTheme();
|
||||
themeVars = options.theme;
|
||||
}
|
||||
const theme = ensureTheme(themeVars);
|
||||
const allComponents = { ...defaultComponents, ...docs.components };
|
||||
|
||||
useEffect(() => {
|
||||
let url;
|
||||
try {
|
||||
url = new URL(globalWindow.parent.location);
|
||||
} catch (err) {
|
||||
return;
|
||||
}
|
||||
if (url.hash) {
|
||||
const element = document.getElementById(url.hash.substring(1));
|
||||
if (element) {
|
||||
// Introducing a delay to ensure scrolling works when it's a full refresh.
|
||||
setTimeout(() => {
|
||||
scrollToElement(element);
|
||||
}, 200);
|
||||
}
|
||||
} else {
|
||||
const element =
|
||||
document.getElementById(anchorBlockIdFromId(storyId)) ||
|
||||
document.getElementById(storyBlockIdFromId(storyId));
|
||||
if (element) {
|
||||
const allStories = element.parentElement.querySelectorAll('[id|="anchor-"]');
|
||||
let scrollTarget = element;
|
||||
if (allStories && allStories[0] === element) {
|
||||
// Include content above first story
|
||||
scrollTarget = document.getElementById('docs-root');
|
||||
}
|
||||
// Introducing a delay to ensure scrolling works when it's a full refresh.
|
||||
setTimeout(() => {
|
||||
scrollToElement(scrollTarget, 'start');
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}, [storyId]);
|
||||
|
||||
return (
|
||||
<DocsContext.Provider value={context}>
|
||||
<SourceContainer>
|
||||
<ThemeProvider theme={theme}>
|
||||
<MDXProvider components={allComponents}>
|
||||
<DocsWrapper className="sbdocs sbdocs-wrapper">
|
||||
<DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
|
||||
</DocsWrapper>
|
||||
</MDXProvider>
|
||||
</ThemeProvider>
|
||||
</SourceContainer>
|
||||
</DocsContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
import { extractTitle } from './Title';
|
||||
|
||||
describe('defaultTitleSlot', () => {
|
||||
it('splits on last /', () => {
|
||||
expect(extractTitle({ title: 'a/b/c' } as any)).toBe('c');
|
||||
expect(extractTitle({ title: 'a|b' } as any)).toBe('a|b');
|
||||
expect(extractTitle({ title: 'a/b/c.d' } as any)).toBe('c.d');
|
||||
});
|
||||
});
|
||||
@ -1,33 +0,0 @@
|
||||
import React, { FC, useContext } from 'react';
|
||||
import global from 'global';
|
||||
import { BaseAnnotations } from '@storybook/csf';
|
||||
import { Anchor } from './Anchor';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
type MetaProps = BaseAnnotations;
|
||||
|
||||
function getFirstStoryId(docsContext: DocsContextProps): string {
|
||||
const stories = docsContext.componentStories();
|
||||
|
||||
return stories.length > 0 ? stories[0].id : null;
|
||||
}
|
||||
|
||||
function renderAnchor() {
|
||||
const context = useContext(DocsContext);
|
||||
const anchorId = getFirstStoryId(context) || context.id;
|
||||
|
||||
return <Anchor storyId={anchorId} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* This component is used to declare component metadata in docs
|
||||
* and gets transformed into a default export underneath the hood.
|
||||
*/
|
||||
export const Meta: FC<MetaProps> = () => {
|
||||
const params = new URL(document.location).searchParams;
|
||||
const isDocs = params.get('viewMode') === 'docs';
|
||||
|
||||
return isDocs ? renderAnchor() : null;
|
||||
};
|
||||
@ -1,206 +0,0 @@
|
||||
import React, {
|
||||
FunctionComponent,
|
||||
ReactNode,
|
||||
ElementType,
|
||||
ComponentProps,
|
||||
useContext,
|
||||
useRef,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import global from 'global';
|
||||
import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
|
||||
import { StoryId, toId, storyNameFromExport, StoryAnnotations, AnyFramework } from '@storybook/csf';
|
||||
import { Story as StoryType } from '@storybook/store';
|
||||
import { addons } from '@storybook/addons';
|
||||
import Events from '@storybook/core-events';
|
||||
|
||||
import { CURRENT_SELECTION } from './types';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { useStory } from './useStory';
|
||||
|
||||
export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
|
||||
|
||||
type PureStoryProps = ComponentProps<typeof PureStory>;
|
||||
|
||||
type CommonProps = StoryAnnotations & {
|
||||
height?: string;
|
||||
inline?: boolean;
|
||||
};
|
||||
|
||||
type StoryDefProps = {
|
||||
name: string;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
type StoryRefProps = {
|
||||
id?: string;
|
||||
};
|
||||
|
||||
type StoryImportProps = {
|
||||
name: string;
|
||||
story: ElementType;
|
||||
};
|
||||
|
||||
export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
|
||||
|
||||
export const lookupStoryId = (
|
||||
storyName: string,
|
||||
{ mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps
|
||||
) =>
|
||||
toId(
|
||||
mdxComponentAnnotations.id || mdxComponentAnnotations.title,
|
||||
storyNameFromExport(mdxStoryNameToKey[storyName])
|
||||
);
|
||||
|
||||
export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryId => {
|
||||
const { id } = props as StoryRefProps;
|
||||
const { name } = props as StoryDefProps;
|
||||
const inputId = id === CURRENT_SELECTION ? context.id : id;
|
||||
return inputId || lookupStoryId(name, context);
|
||||
};
|
||||
|
||||
export const getStoryProps = <TFramework extends AnyFramework>(
|
||||
{ height, inline }: StoryProps,
|
||||
story: StoryType<TFramework>,
|
||||
context: DocsContextProps<TFramework>,
|
||||
onStoryFnCalled: () => void
|
||||
): PureStoryProps => {
|
||||
const { name: storyName, parameters } = story;
|
||||
const { docs = {} } = parameters;
|
||||
|
||||
if (docs.disable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// prefer block props, then story parameters defined by the framework-specific settings and optionally overridden by users
|
||||
const { inlineStories = false, iframeHeight = 100, prepareForInline } = docs;
|
||||
const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
|
||||
if (storyIsInline && !prepareForInline) {
|
||||
throw new Error(
|
||||
`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`
|
||||
);
|
||||
}
|
||||
|
||||
const boundStoryFn = () => {
|
||||
const storyResult = story.unboundStoryFn({
|
||||
...context.getStoryContext(story),
|
||||
loaded: {},
|
||||
abortSignal: undefined,
|
||||
canvasElement: undefined,
|
||||
});
|
||||
|
||||
// We need to wait until the bound story function has actually been called before we
|
||||
// consider the story rendered. Certain frameworks (i.e. angular) don't actually render
|
||||
// the component in the very first react render cycle, and so we can't just wait until the
|
||||
// `PureStory` component has been rendered to consider the underlying story "rendered".
|
||||
onStoryFnCalled();
|
||||
return storyResult;
|
||||
};
|
||||
|
||||
return {
|
||||
inline: storyIsInline,
|
||||
id: story.id,
|
||||
height: height || (storyIsInline ? undefined : iframeHeight),
|
||||
title: storyName,
|
||||
...(storyIsInline && {
|
||||
parameters,
|
||||
storyFn: () => prepareForInline(boundStoryFn, context.getStoryContext(story)),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
function makeGate(): [Promise<void>, () => void] {
|
||||
let open;
|
||||
const gate = new Promise<void>((r) => {
|
||||
open = r;
|
||||
});
|
||||
return [gate, open];
|
||||
}
|
||||
|
||||
const Story: FunctionComponent<StoryProps> = (props) => {
|
||||
const context = useContext(DocsContext);
|
||||
const channel = addons.getChannel();
|
||||
const storyRef = useRef();
|
||||
const storyId = getStoryId(props, context);
|
||||
const story = useStory(storyId, context);
|
||||
const [showLoader, setShowLoader] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
let cleanup: () => void;
|
||||
if (story && storyRef.current) {
|
||||
const element = storyRef.current as HTMLElement;
|
||||
cleanup = context.renderStoryToElement(story, element);
|
||||
setShowLoader(false);
|
||||
}
|
||||
return () => cleanup && cleanup();
|
||||
}, [story]);
|
||||
|
||||
const [storyFnRan, onStoryFnRan] = makeGate();
|
||||
const [rendered, onRendered] = makeGate();
|
||||
useEffect(onRendered);
|
||||
|
||||
if (!story) {
|
||||
return <StorySkeleton />;
|
||||
}
|
||||
|
||||
const storyProps = getStoryProps(props, story, context, onStoryFnRan);
|
||||
if (!storyProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (storyProps.inline) {
|
||||
// If we are rendering a old-style inline Story via `PureStory` below, we want to emit
|
||||
// the `STORY_RENDERED` event when it renders. The modern mode below calls out to
|
||||
// `Preview.renderStoryToDom()` which itself emits the event.
|
||||
if (!global?.FEATURES?.modernInlineRender) {
|
||||
// We need to wait for two things before we can consider the story rendered:
|
||||
// (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
|
||||
// decorators of the form `<A><B/></A>` will not actually execute `B` in the first
|
||||
// call to the story function.
|
||||
// (b) The story function needs to actually have been called.
|
||||
// Certain frameworks (i.e.angular) don't actually render the component in the very first
|
||||
// React render cycle, so we need to wait for the framework to actually do that
|
||||
Promise.all([storyFnRan, rendered]).then(() => {
|
||||
channel.emit(Events.STORY_RENDERED, storyId);
|
||||
});
|
||||
} else {
|
||||
// We do this so React doesn't complain when we replace the span in a secondary render
|
||||
const htmlContents = `<span></span>`;
|
||||
|
||||
// FIXME: height/style/etc. lifted from PureStory
|
||||
const { height } = storyProps;
|
||||
return (
|
||||
<div id={storyBlockIdFromId(story.id)}>
|
||||
<MDXProvider components={resetComponents}>
|
||||
{height ? (
|
||||
<style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
|
||||
) : null}
|
||||
{showLoader && <StorySkeleton />}
|
||||
<div
|
||||
ref={storyRef}
|
||||
data-name={story.name}
|
||||
dangerouslySetInnerHTML={{ __html: htmlContents }}
|
||||
/>
|
||||
</MDXProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={storyBlockIdFromId(story.id)}>
|
||||
<MDXProvider components={resetComponents}>
|
||||
<PureStory {...storyProps} />
|
||||
</MDXProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Story.defaultProps = {
|
||||
children: null,
|
||||
name: null,
|
||||
};
|
||||
|
||||
export { Story };
|
||||
@ -1,5 +0,0 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
export const Wrapper: FunctionComponent = ({ children }) => (
|
||||
<div style={{ fontFamily: 'sans-serif' }}>{children}</div>
|
||||
);
|
||||
@ -1 +0,0 @@
|
||||
export * from './blocks';
|
||||
@ -1,12 +0,0 @@
|
||||
import { addons, types } from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID } from './shared';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(PANEL_ID, {
|
||||
type: types.TAB,
|
||||
title: 'Docs',
|
||||
route: ({ storyId, refId }) => (refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`),
|
||||
match: ({ viewMode }) => viewMode === 'docs',
|
||||
render: () => null,
|
||||
});
|
||||
});
|
||||
@ -1,6 +0,0 @@
|
||||
export const parameters = {
|
||||
docs: {
|
||||
getContainer: async () => (await import('./blocks')).DocsContainer,
|
||||
getPage: async () => (await import('./blocks')).DocsPage,
|
||||
},
|
||||
};
|
||||
@ -1,22 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,250 +0,0 @@
|
||||
import global from 'global';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { useChannel, useParameter, StoryId } from '@storybook/api';
|
||||
import { STORY_RENDER_PHASE_CHANGED, FORCE_REMOUNT } from '@storybook/core-events';
|
||||
import { AddonPanel, Link, Placeholder } from '@storybook/components';
|
||||
import { EVENTS, Call, CallStates, ControlStates, LogItem } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { StatusIcon } from './components/StatusIcon/StatusIcon';
|
||||
import { Subnav } from './components/Subnav/Subnav';
|
||||
import { Interaction } from './components/Interaction/Interaction';
|
||||
|
||||
export interface Controls {
|
||||
start: (args: any) => void;
|
||||
back: (args: any) => void;
|
||||
goto: (args: any) => void;
|
||||
next: (args: any) => void;
|
||||
end: (args: any) => void;
|
||||
rerun: (args: any) => void;
|
||||
}
|
||||
|
||||
interface AddonPanelProps {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface InteractionsPanelProps {
|
||||
active: boolean;
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
interactions: (Call & {
|
||||
status?: CallStates;
|
||||
childCallIds: Call['id'][];
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
})[];
|
||||
fileName?: string;
|
||||
hasException?: boolean;
|
||||
isPlaying?: boolean;
|
||||
pausedAt?: Call['id'];
|
||||
calls: Map<string, any>;
|
||||
endRef?: React.Ref<HTMLDivElement>;
|
||||
onScrollToEnd?: () => void;
|
||||
isRerunAnimating: boolean;
|
||||
setIsRerunAnimating: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const INITIAL_CONTROL_STATES = {
|
||||
debugger: false,
|
||||
start: false,
|
||||
back: false,
|
||||
goto: false,
|
||||
next: false,
|
||||
end: false,
|
||||
};
|
||||
|
||||
const TabIcon = styled(StatusIcon)({
|
||||
marginLeft: 5,
|
||||
});
|
||||
|
||||
const TabStatus = ({ children }: { children: React.ReactChild }) => {
|
||||
const container = global.document.getElementById('tabbutton-interactions');
|
||||
return container && ReactDOM.createPortal(children, container);
|
||||
};
|
||||
|
||||
export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
({
|
||||
calls,
|
||||
controls,
|
||||
controlStates,
|
||||
interactions,
|
||||
fileName,
|
||||
hasException,
|
||||
isPlaying,
|
||||
pausedAt,
|
||||
onScrollToEnd,
|
||||
endRef,
|
||||
isRerunAnimating,
|
||||
setIsRerunAnimating,
|
||||
...panelProps
|
||||
}) => (
|
||||
<AddonPanel {...panelProps}>
|
||||
{controlStates.debugger && interactions.length > 0 && (
|
||||
<Subnav
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
status={
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
|
||||
}
|
||||
storyFileName={fileName}
|
||||
onScrollToEnd={onScrollToEnd}
|
||||
isRerunAnimating={isRerunAnimating}
|
||||
setIsRerunAnimating={setIsRerunAnimating}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
{interactions.map((call) => (
|
||||
<Interaction
|
||||
key={call.id}
|
||||
call={call}
|
||||
callsById={calls}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
childCallIds={call.childCallIds}
|
||||
isCollapsed={call.isCollapsed}
|
||||
toggleCollapsed={call.toggleCollapsed}
|
||||
pausedAt={pausedAt}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div ref={endRef} />
|
||||
{!isPlaying && interactions.length === 0 && (
|
||||
<Placeholder>
|
||||
No interactions found
|
||||
<Link
|
||||
href="https://github.com/storybookjs/storybook/blob/next/addons/interactions/README.md"
|
||||
target="_blank"
|
||||
withArrow
|
||||
>
|
||||
Learn how to add interactions to your story
|
||||
</Link>
|
||||
</Placeholder>
|
||||
)}
|
||||
</AddonPanel>
|
||||
)
|
||||
);
|
||||
|
||||
export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
const [storyId, setStoryId] = React.useState<StoryId>();
|
||||
const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
|
||||
const [pausedAt, setPausedAt] = React.useState<Call['id']>();
|
||||
const [isPlaying, setPlaying] = React.useState(false);
|
||||
const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
|
||||
const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
|
||||
const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
|
||||
const [log, setLog] = React.useState<LogItem[]>([]);
|
||||
|
||||
// Calls are tracked in a ref so we don't needlessly rerender.
|
||||
const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
|
||||
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
|
||||
|
||||
const endRef = React.useRef();
|
||||
React.useEffect(() => {
|
||||
let observer: IntersectionObserver;
|
||||
if (global.window.IntersectionObserver) {
|
||||
observer = new global.window.IntersectionObserver(
|
||||
([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target),
|
||||
{ root: global.window.document.querySelector('#panel-tab-content') }
|
||||
);
|
||||
if (endRef.current) observer.observe(endRef.current);
|
||||
}
|
||||
return () => observer?.disconnect();
|
||||
}, []);
|
||||
|
||||
const emit = useChannel(
|
||||
{
|
||||
[EVENTS.CALL]: setCall,
|
||||
[EVENTS.SYNC]: (payload) => {
|
||||
setControlStates(payload.controlStates);
|
||||
setLog(payload.logItems);
|
||||
setPausedAt(payload.pausedAt);
|
||||
},
|
||||
[STORY_RENDER_PHASE_CHANGED]: (event) => {
|
||||
setStoryId(event.storyId);
|
||||
setPlaying(event.newPhase === 'playing');
|
||||
setPausedAt(undefined);
|
||||
},
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const controls = React.useMemo(
|
||||
() => ({
|
||||
start: () => emit(EVENTS.START, { storyId }),
|
||||
back: () => emit(EVENTS.BACK, { storyId }),
|
||||
goto: (callId: string) => emit(EVENTS.GOTO, { storyId, callId }),
|
||||
next: () => emit(EVENTS.NEXT, { storyId }),
|
||||
end: () => emit(EVENTS.END, { storyId }),
|
||||
rerun: () => {
|
||||
setIsRerunAnimating(true);
|
||||
emit(FORCE_REMOUNT, { storyId });
|
||||
},
|
||||
}),
|
||||
[storyId]
|
||||
);
|
||||
|
||||
const storyFilePath = useParameter('fileName', '');
|
||||
const [fileName] = storyFilePath.toString().split('/').slice(-1);
|
||||
const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
||||
|
||||
const showStatus = log.length > 0 && !isPlaying;
|
||||
const hasException = log.some((item) => item.status === CallStates.ERROR);
|
||||
|
||||
const interactions = React.useMemo(() => {
|
||||
const callsById = new Map<Call['id'], Call>();
|
||||
const childCallMap = new Map<Call['id'], Call['id'][]>();
|
||||
return log
|
||||
.filter(({ callId, parentId }) => {
|
||||
if (!parentId) return true;
|
||||
childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
|
||||
return !collapsed.has(parentId);
|
||||
})
|
||||
.map(({ callId, status }) => ({ ...calls.current.get(callId), status } as Call))
|
||||
.map((call) => {
|
||||
const status =
|
||||
call.status === CallStates.ERROR &&
|
||||
callsById.get(call.parentId)?.status === CallStates.ACTIVE
|
||||
? CallStates.ACTIVE
|
||||
: call.status;
|
||||
callsById.set(call.id, { ...call, status });
|
||||
return {
|
||||
...call,
|
||||
status,
|
||||
childCallIds: childCallMap.get(call.id),
|
||||
isCollapsed: collapsed.has(call.id),
|
||||
toggleCollapsed: () =>
|
||||
setCollapsed((ids) => {
|
||||
if (ids.has(call.id)) ids.delete(call.id);
|
||||
else ids.add(call.id);
|
||||
return new Set(ids);
|
||||
}),
|
||||
};
|
||||
});
|
||||
}, [log, collapsed]);
|
||||
|
||||
return (
|
||||
<React.Fragment key="interactions">
|
||||
<TabStatus>
|
||||
{showStatus &&
|
||||
(hasException ? <TabIcon status={CallStates.ERROR} /> : ` (${interactions.length})`)}
|
||||
</TabStatus>
|
||||
<AddonPanelPure
|
||||
calls={calls.current}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
interactions={interactions}
|
||||
fileName={fileName}
|
||||
hasException={hasException}
|
||||
isPlaying={isPlaying}
|
||||
pausedAt={pausedAt}
|
||||
endRef={endRef}
|
||||
onScrollToEnd={scrollTarget && scrollToTarget}
|
||||
isRerunAnimating={isRerunAnimating}
|
||||
setIsRerunAnimating={setIsRerunAnimating}
|
||||
{...props}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/esm/preview';
|
||||
2
addons/links/react.d.ts
vendored
2
addons/links/react.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
export * from './dist/ts3.9/react';
|
||||
export { default } from './dist/ts3.9/react';
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"@testing-library/jest-dom"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1 +0,0 @@
|
||||
export * from './dist/esm/preview';
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import * as Vue from 'vue';
|
||||
import global from 'global';
|
||||
import dedent from 'ts-dedent';
|
||||
import { app, activeStoryComponent } from '@storybook/vue3';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
// This is cast as `any` to workaround type errors caused by Vue 2 types
|
||||
const { h } = Vue as any;
|
||||
|
||||
let vm: any;
|
||||
function getRenderedTree(story: any) {
|
||||
const component = story.render();
|
||||
|
||||
const vnode = h(component, story.args);
|
||||
|
||||
// Vue 3's Jest renderer throws if all of the required props aren't specified
|
||||
// So we try/catch and warn the user if they forgot to specify one in their args
|
||||
activeStoryComponent.value = vnode;
|
||||
if (!vm) {
|
||||
vm = app.mount(document.createElement('div'));
|
||||
}
|
||||
vm.$forceUpdate();
|
||||
return vm.$el;
|
||||
}
|
||||
|
||||
export default getRenderedTree;
|
||||
@ -1,515 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button With Text 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX to Storybook 1`] = `
|
||||
<Welcome
|
||||
showApp={[Function]}
|
||||
>
|
||||
<Main>
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Title>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/1-Button.stories.js
|
||||
</code>
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</Note>
|
||||
</article>
|
||||
</Main>
|
||||
</Welcome>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<Welcome
|
||||
showApp={[Function]}
|
||||
>
|
||||
<Main>
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Title>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/1-Button.stories.js
|
||||
</code>
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</Note>
|
||||
</article>
|
||||
</Main>
|
||||
</Welcome>
|
||||
`;
|
||||
@ -1,239 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button With Text 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX to Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
Welcome to storybook
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
src/stories
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/1-Button.stories.js
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
.storybook/webpack.config.js
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Note>
|
||||
</Main>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
Welcome to storybook
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
src/stories
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/1-Button.stories.js
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
.storybook/webpack.config.js
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Note>
|
||||
</Main>
|
||||
`;
|
||||
@ -1,239 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button With Text 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX to Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
Welcome to storybook
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
src/stories
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/1-Button.stories.js
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
.storybook/webpack.config.js
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Note>
|
||||
</Main>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
Welcome to storybook
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
src/stories
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/1-Button.stories.js
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
.storybook/webpack.config.js
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Note>
|
||||
</Main>
|
||||
`;
|
||||
@ -1,439 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button With Text 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": 3,
|
||||
"cursor": "pointer",
|
||||
"fontSize": 15,
|
||||
"margin": 10,
|
||||
"padding": "3px 10px",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX to Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/1-Button.stories.js
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/1-Button.stories.js
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
@ -1,175 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/1-Button.stories.js
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
@ -1,349 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Welcome MDX to Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/1-Button.stories.js
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/1-Button.stories.js
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
@ -1,18 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"node"
|
||||
],
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"jest"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
import './dist/esm/manager';
|
||||
@ -1,6 +0,0 @@
|
||||
import { once } from '@storybook/client-logger';
|
||||
import './manager';
|
||||
|
||||
once.warn(
|
||||
'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
|
||||
);
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
4
app/angular/bin/build.js
vendored
4
app/angular/bin/build.js
vendored
@ -1,4 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
require('../dist/ts3.9/server/build');
|
||||
3
app/angular/bin/index.js
vendored
3
app/angular/bin/index.js
vendored
@ -1,3 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
require('../dist/ts3.9/server');
|
||||
4
app/angular/demo.d.ts
vendored
4
app/angular/demo.d.ts
vendored
@ -1,4 +0,0 @@
|
||||
declare module '@storybook/angular/demo' {
|
||||
export const Button: any;
|
||||
export const Welcome: any;
|
||||
}
|
||||
5
app/angular/demo.js
vendored
5
app/angular/demo.js
vendored
@ -1,5 +0,0 @@
|
||||
/* eslint-disable global-require */
|
||||
module.exports = {
|
||||
Welcome: require('./dist/ts3.9/demo/welcome.component').default,
|
||||
Button: require('./dist/ts3.9/demo/button.component').default,
|
||||
};
|
||||
@ -1,141 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/angular",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/angular"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/ts3.9/client/index.js",
|
||||
"module": "dist/ts3.9/client/index.js",
|
||||
"types": "dist/ts3.9/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"dist/ts3.9/*": [
|
||||
"dist/ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
"storybook-server": "./bin/index.js"
|
||||
},
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
"find-up": "^5.0.0",
|
||||
"fork-ts-checker-webpack-plugin": "^4.1.6",
|
||||
"global": "^4.4.0",
|
||||
"nanoid": "^3.1.23",
|
||||
"p-limit": "^3.1.0",
|
||||
"postcss": "^7.0.36",
|
||||
"postcss-loader": "^4.2.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"sass-loader": "^10.1.0",
|
||||
"telejson": "^6.0.8",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"ts-loader": "^8.0.14",
|
||||
"tsconfig-paths-webpack-plugin": "^3.3.0",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"webpack": ">=4.0.0 <6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/architect": "~0.1102.0",
|
||||
"@angular-devkit/build-angular": "~0.1102.13",
|
||||
"@angular-devkit/core": "^11.2.13",
|
||||
"@angular/cli": "^11.2.14",
|
||||
"@angular/common": "^11.2.14",
|
||||
"@angular/compiler": "^11.2.14",
|
||||
"@angular/compiler-cli": "^11.2.14",
|
||||
"@angular/core": "^11.2.14",
|
||||
"@angular/forms": "^11.2.14",
|
||||
"@angular/platform-browser": "^11.2.14",
|
||||
"@angular/platform-browser-dynamic": "^11.2.14",
|
||||
"@nrwl/workspace": "^11.6.3",
|
||||
"@types/autoprefixer": "^9.7.2",
|
||||
"@types/tmp": "^0.2.3",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"jest": "^26.6.3",
|
||||
"jest-preset-angular": "^8.3.2",
|
||||
"jest-specific-snapshot": "^4.0.0",
|
||||
"tmp": "^0.2.1",
|
||||
"webpack": "4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/architect": ">=0.8.9",
|
||||
"@angular-devkit/build-angular": ">=0.8.9 || >= 12.0.0",
|
||||
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
|
||||
"@angular/cli": ">=6.0.0",
|
||||
"@angular/common": ">=6.0.0",
|
||||
"@angular/compiler": ">=6.0.0",
|
||||
"@angular/compiler-cli": ">=6.0.0",
|
||||
"@angular/core": ">=6.0.0",
|
||||
"@angular/forms": ">=6.0.0",
|
||||
"@angular/platform-browser": ">=6.0.0",
|
||||
"@angular/platform-browser-dynamic": ">=6.0.0",
|
||||
"@babel/core": "*",
|
||||
"@nrwl/workspace": ">=11.1.0",
|
||||
"rxjs": "^6.0.0 || ^7.4.0",
|
||||
"typescript": "^3.4.0 || >=4.0.0",
|
||||
"zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0 || ^0.11.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/cli": {
|
||||
"optional": true
|
||||
},
|
||||
"@nrwl/workspace": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
|
||||
}
|
||||
1
app/angular/preset.js
vendored
1
app/angular/preset.js
vendored
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/ts3.9/server/preset');
|
||||
1
app/angular/renderer.d.ts
vendored
1
app/angular/renderer.d.ts
vendored
@ -1 +0,0 @@
|
||||
export * from './dist/ts3.9/renderer.d';
|
||||
1
app/angular/renderer.js
vendored
1
app/angular/renderer.js
vendored
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/ts3.9/renderer');
|
||||
@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import pLimit from 'p-limit';
|
||||
import { nanoid } from 'nanoid';
|
||||
|
||||
import { PartialStoryFn } from '@storybook/csf';
|
||||
import { AngularFramework, StoryContext } from '..';
|
||||
import { rendererFactory } from '../../renderer';
|
||||
|
||||
const limit = pLimit(1);
|
||||
|
||||
/**
|
||||
* Uses the angular renderer to generate a story. Uses p-limit to run synchronously
|
||||
*/
|
||||
export const prepareForInline = (
|
||||
storyFn: PartialStoryFn<AngularFramework>,
|
||||
{ id, parameters, component }: StoryContext
|
||||
) => {
|
||||
const el = React.useRef();
|
||||
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
limit(async () => {
|
||||
const renderer = await rendererFactory.getRendererInstance(
|
||||
`${id}-${nanoid(10)}`.toLowerCase(),
|
||||
el.current
|
||||
);
|
||||
if (renderer) {
|
||||
await renderer.render({
|
||||
forced: false,
|
||||
component,
|
||||
parameters,
|
||||
storyFnAngular: storyFn(),
|
||||
targetDOMNode: el.current,
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
|
||||
return React.createElement('div', {
|
||||
ref: el,
|
||||
});
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
} from './preview';
|
||||
|
||||
export * from './preview/types-6-0';
|
||||
|
||||
export type { StoryFnAngularReturnType as IStory } from './preview/types';
|
||||
|
||||
export { moduleMetadata, componentWrapperDecorator } from './preview/decorators';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import global from 'global';
|
||||
|
||||
import './angular-polyfills';
|
||||
|
||||
const { window: globalWindow } = global;
|
||||
|
||||
globalWindow.STORYBOOK_ENV = 'angular';
|
||||
@ -1,13 +0,0 @@
|
||||
import type { Args } from '@storybook/csf';
|
||||
import type { StoryObj } from './types-6-0';
|
||||
|
||||
export type { StoryFn, StoryObj, Meta } from './types-6-0';
|
||||
|
||||
// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
|
||||
|
||||
/**
|
||||
* Story function that represents a CSFv3 component example.
|
||||
*
|
||||
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
||||
*/
|
||||
export type Story<TArgs = Args> = StoryObj<TArgs>;
|
||||
@ -1,4 +0,0 @@
|
||||
export { computesTemplateSourceFromComponent } from './client/preview/angular-beta/ComputesTemplateFromComponent';
|
||||
export { rendererFactory } from './client/preview/render';
|
||||
export { AbstractRenderer } from './client/preview/angular-beta/AbstractRenderer';
|
||||
export { getStorybookModuleMetadata } from './client/preview/angular-beta/StorybookModule';
|
||||
@ -1,19 +0,0 @@
|
||||
{
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
{
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import options from './options';
|
||||
|
||||
async function build() {
|
||||
try {
|
||||
await buildStatic(options);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
build();
|
||||
@ -1,4 +0,0 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
@ -1,13 +0,0 @@
|
||||
import type { StorybookConfig } from '@storybook/core-common';
|
||||
|
||||
export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [
|
||||
...entries,
|
||||
require.resolve('../client/preview/config'),
|
||||
];
|
||||
|
||||
export const addons: StorybookConfig['addons'] = [
|
||||
require.resolve('./framework-preset-angular'),
|
||||
require.resolve('./framework-preset-angular-cli'),
|
||||
require.resolve('./framework-preset-angular-ivy'),
|
||||
require.resolve('./framework-preset-angular-docs'),
|
||||
];
|
||||
@ -1,7 +0,0 @@
|
||||
import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
|
||||
|
||||
export interface StorybookConfig extends BaseConfig {
|
||||
angularOptions?: {
|
||||
enableIvy: boolean;
|
||||
};
|
||||
}
|
||||
8
app/angular/standalone.js
vendored
8
app/angular/standalone.js
vendored
@ -1,8 +0,0 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/ts3.9/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
1
app/angular/types-6-0.d.ts
vendored
1
app/angular/types-6-0.d.ts
vendored
@ -1 +0,0 @@
|
||||
export * from './dist/ts3.9/client/preview/types-6-0.d';
|
||||
1
app/angular/types-7-0.d.ts
vendored
1
app/angular/types-7-0.d.ts
vendored
@ -1 +0,0 @@
|
||||
export * from './dist/ts3.9/client/preview/types-7-0.d';
|
||||
@ -1,4 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
require('../dist/cjs/server/build');
|
||||
@ -1,3 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
require('../dist/cjs/server');
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/cjs/server/preset');
|
||||
@ -1,14 +0,0 @@
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export { renderToDOM } from './render';
|
||||
|
||||
export const parameters = { framework: 'ember' };
|
||||
@ -1,4 +0,0 @@
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import options from './options';
|
||||
|
||||
buildStatic(options);
|
||||
@ -1,4 +0,0 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
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