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

Merge remote-tracking branch 'origin/next' into optional-webpack

Browse Source 
# Conflicts:
#	code/addons/docs/package.json
This commit is contained in:
Ian VanSchooten 2022-10-16 20:17:20 -04:00
commit 9b3956038b
965 changed files with 8320 additions and 30854 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
.circleci/config.yml
View File

@ -10,7 +10,7 @@ executors:
default: 'medium'
working_directory: /tmp/storybook
docker:
- image: cimg/node:14.19
- image: cimg/node:16.17.1
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
@ -23,7 +23,7 @@ executors:
default: 'medium'
working_directory: /tmp/storybook
docker:
- image: cimg/node:14.19-browsers
- image: cimg/node:16.17.1-browsers
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
@ -36,7 +36,7 @@ executors:
default: 'medium'
working_directory: /tmp/storybook
docker:
- image: mcr.microsoft.com/playwright:v1.26.0-focal
- image: mcr.microsoft.com/playwright:v1.27.0-focal
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
@ -75,6 +75,22 @@ commands:
fi
jobs:
check:
executor:
class: xlarge
name: sb_node_14_classic
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- restore_cache:
name: Restore Yarn cache
keys:
- build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
- run:
name: Compile
command: |
yarn task --task check --start-from=auto --no-link --debug
git diff --exit-code
build:
executor:
class: xlarge
@ -85,26 +101,15 @@ jobs:
- restore_cache:
name: Restore Yarn cache
keys:
- build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
- build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
- run:
name: Install dependencies
name: Compile
command: |
cd code
yarn install --immutable
- run:
name: Install script dependencies
command: |
cd scripts
yarn install --immutable
- run:
name: Bootstrap
command: |
cd code
yarn bootstrap --build
yarn task --task compile --start-from=auto --no-link --debug
git diff --exit-code
- save_cache:
name: Save Yarn cache
key: build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
paths:
- ~/.yarn/berry/cache
- persist_to_workspace:
@ -117,6 +122,7 @@ jobs:
- code/addons
- code/frameworks
- code/lib
- code/ui
- code/renderers
- code/presets
chromatic:
@ -136,7 +142,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 12
parallelism: 5
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -218,16 +224,16 @@ jobs:
name: set up cra repro, skip tests
command: |
cd code
node ./lib/cli/bin/index.js repro -t cra --e2e ../cra-bench
node ./lib/cli/bin/index.js repro -t cra --e2e ../../cra-bench
- run:
name: Run @storybook/bench on repro
command: |
cd ./cra-bench
cd ../cra-bench
npx -p @storybook/bench@1.0.0--canary.12.7cccdee.0 sb-bench 'echo noop' --label cra
- run:
name: prep artifacts
when: always
command: tar cvzf /tmp/sb-bench.tar.gz ./cra-bench
command: tar cvzf /tmp/sb-bench.tar.gz ../cra-bench
- store_artifacts:
path: /tmp/sb-bench.tar.gz
destination: sb-bench.tar.gz
@ -316,7 +322,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 13
parallelism: 18
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -324,19 +330,18 @@ jobs:
at: .
- run:
name: Creating Sandboxes
command: yarn task --task create --template $(yarn get-template ci create) --force --no-before --junit
working_directory: code
command: yarn task --task sandbox --template $(yarn get-template ci create) --no-link --start-from=never --junit
- persist_to_workspace:
root: .
paths:
- sandbox
- store_test_results:
path: code/test-results
path: test-results
smoke-test-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 13
parallelism: 11
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -344,15 +349,14 @@ jobs:
at: .
- run:
name: Smoke Testing Sandboxes
command: yarn task --task smoke-test --template $(yarn get-template ci smoke-test) --force --no-before --junit
working_directory: code
command: yarn task --task smoke-test --template $(yarn get-template ci smoke-test) --no-link --start-from=never --junit
- store_test_results:
path: code/test-results
path: test-results
build-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 13
parallelism: 18
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -360,10 +364,9 @@ jobs:
at: .
- run:
name: Building Sandboxes
command: yarn task --task build --template $(yarn get-template ci build) --force --no-before --junit
working_directory: code
command: yarn task --task build --template $(yarn get-template ci build) --no-link --start-from=never --junit
- store_test_results:
path: code/test-results
path: test-results
- persist_to_workspace:
root: .
paths:
@ -372,7 +375,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 13
parallelism: 16
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -380,15 +383,14 @@ jobs:
at: .
- run:
name: Running Test Runner
command: yarn task --task test-runner --template $(yarn get-template ci test-runner) --force --no-before --junit
working_directory: code
command: yarn task --task test-runner --template $(yarn get-template ci test-runner) --no-link --start-from=never --junit
- store_test_results:
path: code/test-results
path: test-results
chromatic-sandboxes:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 13
parallelism: 18
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -396,15 +398,14 @@ jobs:
at: .
- run:
name: Running Chromatic
command: yarn task --task chromatic --template $(yarn get-template ci chromatic) --force --no-before --junit
working_directory: code
command: yarn task --task chromatic --template $(yarn get-template ci chromatic) --no-link --start-from=never --junit
- store_test_results:
path: code/test-results
path: test-results
e2e-sandboxes:
executor:
class: medium+
name: sb_playwright
parallelism: 13
parallelism: 18
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@ -412,10 +413,9 @@ jobs:
at: .
- run:
name: Running E2E Tests
command: yarn task --task e2e-tests --template $(yarn get-template ci e2e-tests) --force --no-before --junit
working_directory: code
command: yarn task --task e2e-tests --template $(yarn get-template ci e2e-tests) --no-link --start-from=never --junit
- store_test_results:
path: code/test-results
path: test-results
- store_artifacts: # this is where playwright puts more complex stuff
path: code/playwright-results/
destination: playwright
@ -427,6 +427,9 @@ workflows:
- lint:
requires:
- build
- check:
requires:
- build
- examples:
requires:
- build
@ -456,9 +459,9 @@ workflows:
- create-sandboxes:
requires:
- publish
- smoke-test-sandboxes:
requires:
- create-sandboxes
# - smoke-test-sandboxes: # disabled for now
# requires:
# - create-sandboxes
- build-sandboxes:
requires:
- create-sandboxes

25
.github/autolabeler.yml vendored
View File

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

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

@ -10,7 +10,7 @@ jobs:
steps:
- uses: actions/setup-node@v2
with:
node-version: '14'
node-version: '16'
- uses: actions/checkout@master
- name: Danger JS
uses: danger/danger-js@10.9.0

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

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

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

@ -17,7 +17,7 @@ jobs:
steps:
- uses: actions/setup-node@v2
with:
node-version: 14
node-version: 16
- uses: actions/checkout@v2
- name: Setup git user
run: |

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

@ -15,7 +15,7 @@ jobs:
fail-fast: false
matrix:
os: [ubuntu-latest]
node_version: [14, 16]
node_version: [16]
include:
- os: macos-latest
node_version: 16
@ -29,12 +29,7 @@ jobs:
with:
node-version: ${{ matrix.node_version }}
cache: yarn
- name: install, bootstrap
run: |
cd code
yarn install --immutable
yarn bootstrap --core
- name: install and compile
run: yarn task --task compile --start-from=auto
- name: test
run: |
cd code
yarn test --runInBand --ci
run: yarn test --runInBand --ci

2
.gitignore vendored
View File

@ -18,4 +18,4 @@ junit.xml
!/**/.yarn/sdks
!/**/.yarn/versions
/**/.pnp.*
/yarn.lock
!/node_modules

51
.vscode/launch.json vendored
View File

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

3
.vscode/settings.json vendored
View File

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

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

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

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

File diff suppressed because one or more lines are too long

4
.yarnrc.yml Normal file
View File

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

86
CHANGELOG.md
View File

@ -1,3 +1,89 @@
## 7.0.0-alpha.38 (October 15, 2022)
#### Bug Fixes
- Vite: Fix bail not being defined for vite builder [#19405](https://github.com/storybooks/storybook/pull/19405)
#### Maintenance
- Breaking: Remove onBeforeRender [#19489](https://github.com/storybooks/storybook/pull/19489)
- Breaking: Upgrade to use node 16 everywhere [#19458](https://github.com/storybooks/storybook/pull/19458)
- Breaking: Remove the old showRoots config option [#19440](https://github.com/storybooks/storybook/pull/19440)
- CLI: Make the button component accept a label prop, (not children) [#19461](https://github.com/storybooks/storybook/pull/19461)
- Remove `angular-cli` example [#19202](https://github.com/storybooks/storybook/pull/19202)
- Breakimg: Remove the html entrypoint of lib/components [#19487](https://github.com/storybooks/storybook/pull/19487)
- Vite: Add partial SvelteKit support [#19338](https://github.com/storybooks/storybook/pull/19338)
#### Build
- Angular: Add angular 14 sandbox template [#19181](https://github.com/storybooks/storybook/pull/19181)
- Storybook for Storybook - step 1: `ui/manager` [#19465](https://github.com/storybooks/storybook/pull/19465)
- Don't pass the full path to repro generators [#19480](https://github.com/storybooks/storybook/pull/19480)
- Bundle lib/channel-postmessage with ts-up [#19388](https://github.com/storybooks/storybook/pull/19388)
- Disable smoke test [#19475](https://github.com/storybooks/storybook/pull/19475)
- Remove angular example from monorepo [#19467](https://github.com/storybooks/storybook/pull/19467)
- Add angular 13 repro template [#19428](https://github.com/storybooks/storybook/pull/19428)
- Add a TypeScript check task and configure ci to run it [#19471](https://github.com/storybooks/storybook/pull/19471)
- Add Preact/Webpack templates and update renderer/preset (2) [#19451](https://github.com/storybooks/storybook/pull/19451)
- Disable another smoke test [#19466](https://github.com/storybooks/storybook/pull/19466)
#### Dependency Upgrades
- Ipgrade chromatic [#19468](https://github.com/storybooks/storybook/pull/19468)
## 7.0.0-alpha.37 (October 13, 2022)
#### Features
- React: Sound arg types for CSF3 [#19238](https://github.com/storybooks/storybook/pull/19238)
- Vite: Add web-components/lit framework support [#19164](https://github.com/storybooks/storybook/pull/19164)
- UI: Update colors for 7.0 [#19023](https://github.com/storybooks/storybook/pull/19023)
#### Bug Fixes
- Server: Ensure consistent route handling by always starting `managerBuilder` before `previewBuilder` [#19406](https://github.com/storybooks/storybook/pull/19406)
- UI: Fix addon URL escaping in manager [#19375](https://github.com/storybooks/storybook/pull/19375)
- CLI: remove `npx` usage from storybook scripts [#19366](https://github.com/storybooks/storybook/pull/19366)
- Webpack5: Fix lazy compilation/fscache builderOptions when base config is disabled [#19387](https://github.com/storybooks/storybook/pull/19387)
#### Maintenance
- Breaking: remove the deprecated Preview component [#19445](https://github.com/storybooks/storybook/pull/19445)
- Breaking: remove deprecated channel apis [#19443](https://github.com/storybooks/storybook/pull/19443)
- Breaking: remove framework angulars storymodule story-component handling [#19442](https://github.com/storybooks/storybook/pull/19442)
- Breaking: remove deprecated glob fixing [#19438](https://github.com/storybooks/storybook/pull/19438)
- Refactor bootstrap+sandbox into "task" framework [#19275](https://github.com/storybooks/storybook/pull/19275)
- CI: Fix test-runner build step [#19255](https://github.com/storybooks/storybook/pull/19255)
- Angular: Drop support for angular < 13 [#19368](https://github.com/storybooks/storybook/pull/19368)
- Build: Add installScripts step in bootstrap command [#19270](https://github.com/storybooks/storybook/pull/19270)
- Vite: Move default cache dir to node_modules/.cache [#19384](https://github.com/storybooks/storybook/pull/19384)
#### Build
- Addon-docs: Refactor MDX examples to sandboxes [#19301](https://github.com/storybooks/storybook/pull/19301)
- Undo accidental push of tom/sb-557-typescript-2 [#19450](https://github.com/storybooks/storybook/pull/19450)
- Ensure we kill all controllers before exiting [#19449](https://github.com/storybooks/storybook/pull/19449)
- Examples: Remove official-storybook [#19343](https://github.com/storybooks/storybook/pull/19343)
- Build: Improve template stories [#19402](https://github.com/storybooks/storybook/pull/19402)
- Vue: Delete vue-cli/vue-kitchen-sink examples [#19429](https://github.com/storybooks/storybook/pull/19429)
- React: Remove react-ts example [#19424](https://github.com/storybooks/storybook/pull/19424)
- Web-components: Port template stories and delete web-components-kitchen-sink [#19430](https://github.com/storybooks/storybook/pull/19430)
- remove html-kitchen-sink example [#19360](https://github.com/storybooks/storybook/pull/19360)
- add template for html-webpack5 [#19377](https://github.com/storybooks/storybook/pull/19377)
- use a single version of yarn [#19417](https://github.com/storybooks/storybook/pull/19417)
- fix build command for netlify [#19418](https://github.com/storybooks/storybook/pull/19418)
- Re-enable `svelte-vite/default-ts` template [#19369](https://github.com/storybooks/storybook/pull/19369)
- Only persist the (single) built sandbox [#19372](https://github.com/storybooks/storybook/pull/19372)
#### Dependency Upgrades
- Replace @storybook/semver with semver [#19292](https://github.com/storybooks/storybook/pull/19292)
- Upgrade playwright [#19416](https://github.com/storybooks/storybook/pull/19416)
## 7.0.0-alpha.36 (October 13, 2022)
Bad publish
## 7.0.0-alpha.35 (October 5, 2022)
#### Features

33
CONTRIBUTING.md
View File

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

11
MIGRATION.md
View File

@ -19,6 +19,7 @@
- [Babel mode v7 by default](#babel-mode-v7-by-default)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [Icons API changed](#icons-api-changed)
@ -527,6 +528,10 @@ When using a [Vite-based framework](#framework-field-mandatory), Storybook will
Some settings will be overridden by storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
If you were using `viteFinal` in 6.5 to simply merge in your project's standard vite config, you can now remove it.
#### Vite cache moved to node_modules/.cache/.vite-storybook
Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
#### Removed docs.getContainer and getPage parameters
It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
@ -563,12 +568,6 @@ for Angular 12 and below.
In order to use Storybook 7.0, you need to upgrade to at least Angular 13.
#### Vue2 DOM structure changed
In 6.x, `@storybook/vue` would replace the "root" element (formerly `#root`, now `#storybook-root`) with a new node that contains the rendered children. This was problematic because it broke the `play` function, which often starts with `within(canvasElement)` and the old `canvasElement` would get replaced out from under the play function.
In 7.0, `@storybook/vue` now leaves `#storybook-root` alone, and creates a new "dummy node" called `#storybook-vue-root` beneath it. This will break DOM snapshots moving from 6.5 to 7.0, but shouldn't have any other negative effects.
### Docs Changes
The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.

40
README.md
View File

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

3
bootstrap.sh
View File

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

8
code/.eslintrc.js
View File

@ -26,13 +26,19 @@ module.exports = {
files: [
'**/lib/theming/**/*',
'**/lib/router/**/*',
'**/lib/ui/**/*',
'**/ui/manager/**/*',
'**/lib/components/**/*',
],
rules: {
'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
},
},
{
files: ['**/ui/*', '**/ui/.storybook/*'],
rules: {
'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }],
},
},
{
files: [
'**/__tests__/**',

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

7
code/.yarnrc.yml
View File

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

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -62,15 +62,15 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addon-highlight": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/channels": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addon-highlight": "7.0.0-alpha.38",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/channels": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/theming": "7.0.0-alpha.38",
"axe-core": "^4.2.0",
"global": "^4.4.0",
"lodash": "^4.17.21",
@ -104,7 +104,7 @@
"./src/preview.tsx"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Accessibility",
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

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

@ -106,7 +106,7 @@ export const A11YPanel: React.FC = () => {
'Rerun tests'
) : (
<>
<Icon inline icon="check" /> Tests completed
<Icon icon="check" /> Tests completed
</>
),
onClick: handleManual,
@ -162,8 +162,7 @@ export const A11YPanel: React.FC = () => {
)}
{status === 'running' && (
<Centered>
<RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
...
<RotatingIcon icon="sync" /> Please wait while the accessibility scan is running ...
</Centered>
)}
{(status === 'ready' || status === 'ran') && (

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

@ -4,11 +4,13 @@ import userEvent from '@testing-library/user-event';
import { ThemeProvider, themes, convert } from '@storybook/theming';
import { VisionSimulator, baseList } from './VisionSimulator';
const getOptionByNameAndPercentage = (option: string, percentage: number) =>
const getOptionByNameAndPercentage = (option: string, percentage?: number) =>
screen.getByText(
(content, element) =>
content !== '' &&
// @ts-expect-error (TODO)
element.textContent === option &&
// @ts-expect-error (TODO)
(percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
);
@ -60,9 +62,11 @@ describe('Vision Simulator', () => {
.filter(({ cssRules }) => cssRules)
.map(({ cssRules }) => Object.values(cssRules))
.flat()
// @ts-expect-error (TODO)
.find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
expect(rule).toBeDefined();
// @ts-expect-error (TODO)
expect(rule.style.filter).toBe('blur(2px)');
});
});

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@ -58,13 +58,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/theming": "7.0.0-alpha.38",
"dequal": "^2.0.2",
"global": "^4.4.0",
"lodash": "^4.17.21",
@ -102,7 +102,7 @@
"./src/preview.ts"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Actions",
"unsupportedFrameworks": [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
code/addons/docs/docs/docspage.md
View File

@ -145,7 +145,7 @@ export default {
};
```
You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js).
You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance.
## Story file names

34
code/addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
@ -53,22 +53,22 @@
"@babel/preset-env": "^7.12.11",
"@jest/transform": "^26.6.2",
"@mdx-js/react": "^1.6.22",
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/blocks": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-common": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/csf-tools": "7.0.0-alpha.35",
"@storybook/docs-tools": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/blocks": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-common": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/csf-tools": "7.0.0-alpha.38",
"@storybook/docs-tools": "7.0.0-alpha.38",
"@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
"@storybook/node-logger": "7.0.0-alpha.35",
"@storybook/postinstall": "7.0.0-alpha.35",
"@storybook/preview-web": "7.0.0-alpha.35",
"@storybook/source-loader": "7.0.0-alpha.35",
"@storybook/store": "7.0.0-alpha.35",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/node-logger": "7.0.0-alpha.38",
"@storybook/postinstall": "7.0.0-alpha.38",
"@storybook/preview-web": "7.0.0-alpha.38",
"@storybook/source-loader": "7.0.0-alpha.38",
"@storybook/store": "7.0.0-alpha.38",
"@storybook/theming": "7.0.0-alpha.38",
"dequal": "^2.0.2",
"global": "^4.4.0",
"lodash": "^4.17.21",
@ -107,7 +107,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Docs",
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

11
code/addons/docs/src/preset.ts
View File

@ -17,11 +17,20 @@ type BabelParams = {
};
function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: BabelParams) {
const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
const filteredBabelPlugins = babelPlugins.filter((p: any) => {
const name = Array.isArray(p) ? p[0] : p;
if (typeof name === 'string') {
return !name.includes('plugin-transform-react-jsx');
}
return true;
});
const jsxPlugin = [
require.resolve('@babel/plugin-transform-react-jsx'),
{ pragma: 'React.createElement', pragmaFrag: 'React.Fragment' },
];
const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
const plugins = configureJSX ? [...filteredBabelPlugins, jsxPlugin] : babelPlugins;
return {
// don't use the root babelrc by default (users can override this in mdxBabelOptions)
babelrc: false,

1
code/addons/docs/src/typings.d.ts vendored
View File

@ -4,7 +4,6 @@ declare module '@egoist/vue-to-react';
declare module 'remark-slug';
declare module 'remark-external-links';
declare module 'babel-plugin-react-docgen';
declare module 'styled-components';
declare module 'acorn-jsx';
declare module 'vue/dist/vue';

2
code/examples/react-ts/src/docs2/MetaOf.mdx → code/addons/docs/template/stories/docs2/MetaOf.mdx vendored
View File

@ -1,5 +1,5 @@
import { Meta, Story, Stories } from '@storybook/addon-docs';
import * as ButtonStories from '../button.stories';
import * as ButtonStories from './button.stories.ts';
<Meta of={ButtonStories} />

0
code/examples/react-ts/src/docs2/NoTitle.mdx → code/addons/docs/template/stories/docs2/NoTitle.mdx vendored
View File

2
code/examples/react-ts/src/docs2/Title.mdx → code/addons/docs/template/stories/docs2/Title.mdx vendored
View File

@ -1,6 +1,6 @@
import { Meta } from '@storybook/addon-docs';
<Meta title="Docs2/Yabbadabbadooo" />
<Meta title="addons/docs/docs2/Yabbadabbadooo" />
# Docs with title

21
code/addons/docs/template/stories/docs2/button.stories.ts vendored Normal file
View File

@ -0,0 +1,21 @@
import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: { onClick: () => console.log('clicked!') },
parameters: {
chromatic: { disable: true },
},
};
export const Basic = {
args: { label: 'Basic' },
};
export const One = {
args: { label: 'One' },
};
export const Two = {
args: { label: 'Two' },
};

8
code/addons/docs/template/stories/docspage/basic.stories.ts vendored
View File

@ -2,19 +2,19 @@ import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: { children: 'Click Me!' },
args: { label: 'Click Me!' },
parameters: { chromatic: { disable: true } },
};
export const Basic = {
args: { children: 'Basic' },
args: { label: 'Basic' },
};
export const Disabled = {
args: { children: 'Disabled in DocsPage' },
args: { label: 'Disabled in DocsPage' },
parameters: { docs: { disable: true } },
};
export const Another = {
args: { children: 'Another' },
args: { label: 'Another' },
};

2
code/addons/docs/template/stories/docspage/description.stories.ts vendored
View File

@ -6,7 +6,7 @@ export default {
subcomponents: {
Pre: globalThis.Components.Pre,
},
args: { children: 'Click Me!' },
args: { label: 'Click Me!' },
parameters: {
docs: {
description: {

2
code/addons/docs/template/stories/docspage/extract-description.stories.ts vendored
View File

@ -2,7 +2,7 @@ import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: { children: 'Click Me!' },
args: { label: 'Click Me!' },
parameters: {
docs: {
// FIXME: this is typically provided by the renderer preset to extract

12
code/addons/docs/template/stories/docspage/iframe.stories.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: { label: 'Rendered in iframe' },
parameters: {
chromatic: { disable: true },
docs: { iframeHeight: 120, inlineStories: true },
},
};
export const Basic = {};

2
code/addons/docs/template/stories/docspage/override.stories.ts vendored
View File

@ -15,7 +15,7 @@ const Override = () => 'overridden';
export default {
component: globalThis.Components.Button,
args: { children: 'Click Me!' },
args: { label: 'Click Me!' },
parameters: {
chromatic: { disable: true },
docs: { page: Override },

2
code/addons/docs/template/stories/docspage/source.stories.ts vendored
View File

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

24
code/addons/docs/template/stories/stories-mdx/basic.stories.mdx vendored Normal file
View File

@ -0,0 +1,24 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import globalThis from 'global';
<Meta title="addons/docs/stories-mdx/basic" component={globalThis.Components.Button} />
# MDX Stories
This file demonstrates defining stories inside MDX.
<Canvas>
<Story
name="Primary"
args={{ label: 'Primary' }}
/>
</Canvas>
<ArgsTable story="^" />
<Canvas>
<Story
name="Secondary"
args={{ label: 'Secondary' }}
/>
</Canvas>

20
code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.js vendored Normal file
View File

@ -0,0 +1,20 @@
/* eslint-disable storybook/default-exports */
// NOTE: commented out default since these stories are re-exported
// in the primary file './csf-docs-with-mdx-docs.stories.mdx'
//
// export default {
// title: 'Addons/Docs/csf-with-mdx-docs',
// component: Button,
// };
export const Primary = {
args: { label: 'Primary' },
};
export const Secondary = {
args: { label: 'Secondary' },
};
export const ImplicitName = {
args: { label: 'Implicit Name' },
};

29
code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx vendored Normal file
View File

@ -0,0 +1,29 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import globalThis from 'global';
import * as Csf from './csf-in-mdx.stories.js';
<Meta title="addons/docs/stories-mdx/csf-in-mdx" component={globalThis.Components.Button} />
# Legacy CSF in MDX Stories
This file demonstrates legacy reuse of CSF stories inside MDX. This mechanism has been
overhauled and improved in 7.0, and the legacy mode is now deprecated and will be
removed in 8.0.
<Canvas>
<Story name="Primary" story={Csf.Primary} />
</Canvas>
<ArgsTable story="^" />
<Canvas>
<Story name="Secondary" story={Csf.Secondary} />
</Canvas>
## Duplicate stories
Reference story by ID to show it multiple times in a page.
<Canvas>
<Story id="addons-docs-stories-mdx-csf-in-mdx--primary" />
</Canvas>

28
code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx vendored Normal file
View File

@ -0,0 +1,28 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import globalThis from 'global';
<Meta
title="addons/docs/stories-mdx/play functions"
component={globalThis.Components.Button}
// FIXME: this is currently broken in the MDX compiler
play={() => console.log('component play')}
/>
# MDX Play function Stories
This file demonstrates defining stories inside MDX.
<Canvas>
<Story
name="Component Play"
args={{ label: 'Component Play' }}
/>
</Canvas>
<Canvas>
<Story
name="Story Play"
args={{ label: 'Story Play' }}
play={() => console.log('story play')}
/>
</Canvas>

32
code/addons/essentials/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@ -41,24 +41,24 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addon-actions": "7.0.0-alpha.35",
"@storybook/addon-backgrounds": "7.0.0-alpha.35",
"@storybook/addon-controls": "7.0.0-alpha.35",
"@storybook/addon-docs": "7.0.0-alpha.35",
"@storybook/addon-highlight": "7.0.0-alpha.35",
"@storybook/addon-measure": "7.0.0-alpha.35",
"@storybook/addon-outline": "7.0.0-alpha.35",
"@storybook/addon-toolbars": "7.0.0-alpha.35",
"@storybook/addon-viewport": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/core-common": "7.0.0-alpha.35",
"@storybook/node-logger": "7.0.0-alpha.35",
"@storybook/addon-actions": "7.0.0-alpha.38",
"@storybook/addon-backgrounds": "7.0.0-alpha.38",
"@storybook/addon-controls": "7.0.0-alpha.38",
"@storybook/addon-docs": "7.0.0-alpha.38",
"@storybook/addon-highlight": "7.0.0-alpha.38",
"@storybook/addon-measure": "7.0.0-alpha.38",
"@storybook/addon-outline": "7.0.0-alpha.38",
"@storybook/addon-toolbars": "7.0.0-alpha.38",
"@storybook/addon-viewport": "7.0.0-alpha.38",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/core-common": "7.0.0-alpha.38",
"@storybook/node-logger": "7.0.0-alpha.38",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/vue": "7.0.0-alpha.35",
"@storybook/vue": "7.0.0-alpha.38",
"@types/jest": "^26.0.16",
"typescript": "~4.6.3"
},
@ -112,5 +112,5 @@
],
"platform": "node"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1"
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431"
}

8
code/addons/highlight/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
@ -37,8 +37,8 @@
"prep": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"global": "^4.4.0"
},
"devDependencies": {
@ -48,7 +48,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Highlight",

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

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
@ -59,15 +59,15 @@
},
"dependencies": {
"@devtools-ds/object-inspector": "^1.1.2",
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-common": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/instrumenter": "7.0.0-alpha.35",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-common": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/instrumenter": "7.0.0-alpha.38",
"@storybook/theming": "7.0.0-alpha.38",
"global": "^4.4.0",
"jest-mock": "^27.0.6",
"polished": "^4.2.2",
@ -76,7 +76,7 @@
"devDependencies": {
"@storybook/jest": "^0.0.10",
"@storybook/testing-library": "0.0.14-next.0",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/node": "^16.0.0",
"formik": "^2.2.9",
"typescript": "~4.6.3"
},
@ -104,7 +104,7 @@
],
"platform": "node"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Interactions",
"unsupportedFrameworks": [

10
code/addons/interactions/src/components/InteractionsPanel.stories.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable jest/no-standalone-expect */
import React from 'react';
import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import type { StoryObj, Meta } from '@storybook/react';
import { CallStates } from '@storybook/instrumenter';
import { styled } from '@storybook/theming';
import { userEvent, within, waitFor } from '@storybook/testing-library';
@ -25,7 +25,7 @@ const StyledWrapper = styled.div(({ theme }) => ({
const interactions = getInteractions(CallStates.DONE);
export default {
const meta = {
title: 'Addons/Interactions/InteractionsPanel',
component: InteractionsPanel,
decorators: [
@ -52,9 +52,11 @@ export default {
// prop for the AddonPanel used as wrapper of Panel
active: true,
},
} as ComponentMeta<typeof InteractionsPanel>;
} as Meta<typeof InteractionsPanel>;
type Story = ComponentStoryObj<typeof InteractionsPanel>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Passing: Story = {
args: {

8
code/addons/interactions/src/mocks/index.ts
View File

@ -139,4 +139,10 @@ export const getCalls = (finalStatus: CallStates) => {
export const getInteractions = (finalStatus: CallStates) =>
getCalls(finalStatus)
.filter((call) => call.interceptable)
.map((call) => ({ ...call, childCallIds: [], isCollapsed: false, toggleCollapsed: () => {} }));
.map((call) => ({
...call,
childCallIds: [],
isCollapsed: false,
isHidden: false,
toggleCollapsed: () => {},
}));

8
code/addons/interactions/template/stories/basics.stories.ts
View File

@ -47,7 +47,7 @@ export const Callback = {
export const SyncWaitFor = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Setup', Callback.play);
await step('Submit form', Callback.play);
await waitFor(() => canvas.getByText('Completed!!'));
},
};
@ -55,7 +55,7 @@ export const SyncWaitFor = {
export const AsyncWaitFor = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Setup', Callback.play);
await step('Submit form', Callback.play);
await waitFor(async () => canvas.getByText('Completed!!'));
},
};
@ -63,7 +63,7 @@ export const AsyncWaitFor = {
export const WaitForElementToBeRemoved = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Setup', SyncWaitFor.play);
await step('SyncWaitFor play fn', SyncWaitFor.play);
await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
timeout: 2000,
});
@ -73,7 +73,7 @@ export const WaitForElementToBeRemoved = {
export const WithLoaders = {
loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
play: async ({ step }) => {
await step('Setup', Callback.play);
await step('Submit form', Callback.play);
},
};

2
code/addons/jest/README.md
View File

@ -246,8 +246,6 @@ Default.parameters = {
};
```
##### Example [here](https://github.com/storybookjs/storybook/tree/main/examples/angular-cli)
## Available options
- **options.results**: OBJECT jest output results. _mandatory_

16
code/addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -59,12 +59,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/theming": "7.0.0-alpha.38",
"global": "^4.4.0",
"react-sizeme": "^3.0.1",
"upath": "^1.2.0"
@ -94,7 +94,7 @@
],
"platform": "browser"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Jest",
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

14
code/addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"addon",
@ -63,11 +63,11 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/router": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/router": "7.0.0-alpha.38",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"ts-dedent": "^2.0.0"
@ -98,7 +98,7 @@
"./src/react/index.ts"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Links",
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

6
code/addons/links/template/stories/decorator.stories.ts
View File

@ -13,7 +13,7 @@ export const Basic = {
args: {
content: `
<div>
<a class="link" href="#" data-sb-story="basic">go to basic</a>
<a class="link" href="#" data-sb-story="other">go to other</a>
</div>
`,
},
@ -22,7 +22,7 @@ export const Other = {
args: {
content: `
<div>
<a class="link" href="#" data-sb-story="basic">to to basic</a>
<a class="link" href="#" data-sb-story="third">go to third</a>
</div>
`,
},
@ -31,7 +31,7 @@ export const Third = {
args: {
content: `
<div>
<a class="link" href="#" data-sb-story="other">go to other</a>
<a class="link" href="#" data-sb-story="basic">go to basic</a>
</div>
`,
},

2
code/addons/links/template/stories/linkto.stories.ts
View File

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

16
code/addons/measure/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
@ -61,12 +61,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"global": "^4.4.0"
},
"devDependencies": {
@ -94,7 +94,7 @@
"./src/preview.tsx"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Measure",
"unsupportedFrameworks": [

16
code/addons/outline/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
@ -64,12 +64,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"global": "^4.4.0",
"ts-dedent": "^2.0.0"
},
@ -98,7 +98,7 @@
"./src/preset/preview.tsx"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Outline",
"unsupportedFrameworks": [

26
code/addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Take a code snapshot of every story automatically with Jest",
"keywords": [
"addon",
@ -38,13 +38,13 @@
},
"dependencies": {
"@jest/transform": "^26.6.2",
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/client-api": "7.0.0-alpha.35",
"@storybook/core-client": "7.0.0-alpha.35",
"@storybook/core-common": "7.0.0-alpha.35",
"@storybook/core-webpack": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/client-api": "7.0.0-alpha.38",
"@storybook/core-client": "7.0.0-alpha.38",
"@storybook/core-common": "7.0.0-alpha.38",
"@storybook/core-webpack": "7.0.0-alpha.38",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@types/glob": "^7.1.3",
"@types/jest": "^26.0.16",
"@types/jest-specific-snapshot": "^0.5.3",
@ -62,11 +62,11 @@
"@angular/core": "^13.3.6",
"@angular/platform-browser-dynamic": "^13.3.6",
"@emotion/jest": "^11.8.0",
"@storybook/addon-docs": "7.0.0-alpha.35",
"@storybook/angular": "7.0.0-alpha.35",
"@storybook/react": "7.0.0-alpha.35",
"@storybook/vue": "7.0.0-alpha.35",
"@storybook/vue3": "7.0.0-alpha.35",
"@storybook/addon-docs": "7.0.0-alpha.38",
"@storybook/angular": "7.0.0-alpha.38",
"@storybook/react": "7.0.0-alpha.38",
"@storybook/vue": "7.0.0-alpha.38",
"@storybook/vue3": "7.0.0-alpha.38",
"babel-loader": "^8.2.5",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
@ -144,7 +144,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",

5
code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts
View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import Vue from 'vue';
// this is defined in @storybook/vue but not exported,
@ -7,13 +8,15 @@ const VALUES = 'STORYBOOK_VALUES';
function getRenderedTree(story: any) {
const component = story.render();
// @ts-ignore FIXME storyshots type error
const vm = new Vue({
// @ts-ignore FIXME storyshots type error
render(h) {
return h(component);
},
});
// @ts-expect-error (Converted from ts-ignore)
// @ts-ignore FIXME storyshots type error
vm[VALUES] = story.initialArgs;
return vm.$mount().$el;

6
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -53,6 +53,12 @@ exports[`Storyshots Another Button with text 1`] = `
</Button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<AsyncTestComponent>
<h1 />
</AsyncTestComponent>
`;
exports[`Storyshots Button With Text 1`] = `
<Button
onClick={[Function]}

6
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
View File

@ -45,6 +45,12 @@ exports[`Storyshots Another Button with text 1`] = `
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}

6
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
View File

@ -45,6 +45,12 @@ exports[`Storyshots Another Button with text 1`] = `
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}

6
code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
View File

@ -45,6 +45,12 @@ exports[`Storyshots Another Button with text 1`] = `
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}

2
code/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
View File

@ -27,7 +27,7 @@ class AsyncTestComponent extends React.Component {
export default {
title: 'Async',
includeStories: ['withTimeout'],
includeStories: ['WithTimeout'],
};
export const WithTimeout = () => <AsyncTestComponent />;

1
code/addons/storyshots/storyshots-puppeteer/README.md
View File

@ -199,7 +199,6 @@ Those can be customized with `setupTimeout` and `testTimeout` parameters.
### Integrate Puppeteer storyshots with regular app
You may want to use another Jest project to run your Puppeteer storyshots as they require more resources: Chrome and Storybook built/served.
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/main/examples/official-storybook) example.
### Integrate Puppeteer storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)

10
code/addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@ -34,8 +34,8 @@
},
"dependencies": {
"@axe-core/puppeteer": "^4.2.0",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/node-logger": "7.0.0-alpha.35",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/node-logger": "7.0.0-alpha.38",
"@types/jest-image-snapshot": "^4.1.3",
"jest-image-snapshot": "^4.3.0"
},
@ -44,7 +44,7 @@
"puppeteer": "^2.0.0 || ^3.0.0"
},
"peerDependencies": {
"@storybook/addon-storyshots": "7.0.0-alpha.35",
"@storybook/addon-storyshots": "7.0.0-alpha.38",
"puppeteer": ">=2.0.0"
},
"peerDependenciesMeta": {
@ -55,5 +55,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1"
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431"
}

18
code/addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
@ -35,13 +35,13 @@
"prep": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/router": "7.0.0-alpha.35",
"@storybook/source-loader": "7.0.0-alpha.35",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/router": "7.0.0-alpha.38",
"@storybook/source-loader": "7.0.0-alpha.38",
"@storybook/theming": "7.0.0-alpha.38",
"estraverse": "^5.2.0",
"prop-types": "^15.7.2",
"react-syntax-highlighter": "^15.5.0"
@ -66,7 +66,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Storysource",
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

14
code/addons/toolbars/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
@ -57,11 +57,11 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/theming": "7.0.0-alpha.35"
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/theming": "7.0.0-alpha.38"
},
"devDependencies": {
"typescript": "~4.6.3"
@ -88,7 +88,7 @@
],
"platform": "browser"
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Toolbars",
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",

16
code/addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "7.0.0-alpha.35",
"version": "7.0.0-alpha.38",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
@ -59,12 +59,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.35",
"@storybook/api": "7.0.0-alpha.35",
"@storybook/client-logger": "7.0.0-alpha.35",
"@storybook/components": "7.0.0-alpha.35",
"@storybook/core-events": "7.0.0-alpha.35",
"@storybook/theming": "7.0.0-alpha.35",
"@storybook/addons": "7.0.0-alpha.38",
"@storybook/api": "7.0.0-alpha.38",
"@storybook/client-logger": "7.0.0-alpha.38",
"@storybook/components": "7.0.0-alpha.38",
"@storybook/core-events": "7.0.0-alpha.38",
"@storybook/theming": "7.0.0-alpha.38",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"prop-types": "^15.7.2"
@ -95,7 +95,7 @@
"./src/preview.ts"
]
},
"gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1",
"gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
"storybook": {
"displayName": "Viewport",
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",

3
code/addons/viewport/template/stories/parameters.stories.ts
View File

@ -4,7 +4,7 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
label: 'Click Me!',
},
parameters: {
viewport: {
@ -29,6 +29,7 @@ export const Selected = {
export const Custom = {
parameters: {
viewport: {
defaultViewport: 'phone',
viewports: {
phone: {
name: 'Phone Width',

8
code/e2e-tests/addon-interactions.spec.ts
View File

@ -1,8 +1,10 @@
/* eslint-disable jest/no-disabled-tests */
import { test, expect } from '@playwright/test';
import process from 'process';
import { SbPage } from './util';
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
test.describe('addon-interactions', () => {
test.beforeEach(async ({ page }) => {
@ -12,6 +14,12 @@ test.describe('addon-interactions', () => {
// FIXME: skip xxx
test('should have interactions', async ({ page }) => {
// templateName is e.g. 'Vue-CLI (Default JS)'
test.skip(
/^(lit)/i.test(templateName),
`Skipping ${templateName}, which does not support addon-interactions`
);
const sbPage = new SbPage(page);
await sbPage.navigateToStory('example-page', 'logged-in');

2
code/examples/README.md
View File

@ -4,7 +4,6 @@ Live examples of these:
### Next release
- [React Official](https://next--storybookjs.netlify.com/official-storybook/)
- [Vue](https://next--storybookjs.netlify.com/vue-kitchen-sink/)
- [Angular](https://next--storybookjs.netlify.com/angular-cli/)
- [HTML](https://next--storybookjs.netlify.com/html-kitchen-sink/)
@ -14,7 +13,6 @@ Live examples of these:
### Current release
- [React Official](https://storybookjs.netlify.com/official-storybook/)
- [Vue](https://storybookjs.netlify.com/vue-kitchen-sink/)
- [Angular](https://storybookjs.netlify.com/angular-cli/)
- [HTML](https://storybookjs.netlify.com/html-kitchen-sink/)

13
code/examples/angular-cli/.editorconfig
View File

@ -1,13 +0,0 @@
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false

1
code/examples/angular-cli/.env
View File

@ -1 +0,0 @@
STORYBOOK_EXAMPLE_APP=true

1
code/examples/angular-cli/.eslintignore
View File

@ -1 +0,0 @@
addon-jest.testresults.json

15
code/examples/angular-cli/.eslintrc.js
View File

@ -1,15 +0,0 @@
const ignore = 0;
module.exports = {
overrides: [
{
files: ['./src/stories/addon-jest.stories.ts'],
rules: {
'import/no-useless-path-segments': ignore,
},
settings: {
'import/core-modules': ['../../addon-jest.testresults.json'],
},
},
],
};

43
code/examples/angular-cli/.gitignore vendored
View File

@ -1,43 +0,0 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
documentation.json
# System files
.DS_Store
Thumbs.db

41
code/examples/angular-cli/.storybook/main.ts
View File

@ -1,41 +0,0 @@
const mainConfig: import('@storybook/angular').StorybookConfig = {
stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
logLevel: 'debug',
addons: [
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-storysource',
'@storybook/addon-actions',
'@storybook/addon-viewport',
'@storybook/addon-interactions',
'@storybook/addon-links',
'@storybook/addon-jest',
'@storybook/addon-backgrounds',
'@storybook/addon-a11y',
'@storybook/addon-toolbars',
'@storybook/addon-highlight',
],
core: {
channelOptions: { allowFunction: false, maxDepth: 10 },
disableTelemetry: true,
},
staticDirs: [
'../src/assets',
// reproduction of https://github.com/storybookjs/storybook/issues/16732
{ from: '../src/assets/a', to: 'assets' },
{ from: '../src/assets/b', to: 'assets/b' },
],
features: {
buildStoriesJson: false,
breakingChangesV7: false,
storyStoreV7: false,
},
framework: {
name: '@storybook/angular',
options: {
enableIvy: true,
enableNgcc: true,
},
},
};
module.exports = mainConfig;

55
code/examples/angular-cli/.storybook/preview.ts
View File

@ -1,55 +0,0 @@
/* eslint-disable import/extensions, import/no-unresolved */
import { setCompodocJson } from '@storybook/addon-docs/angular';
import addCssWarning from '../src/cssWarning';
import docJson from '../documentation.json';
// remove ButtonComponent to test #12009
const filtered = !docJson?.components
? docJson
: {
...docJson,
components: docJson.components.filter((c) => c.name !== 'ButtonComponent'),
};
setCompodocJson(filtered);
addCssWarning();
export const parameters = {
docs: {
inlineStories: true,
},
options: {
storySort: {
order: ['Welcome', 'Core ', 'Addons ', 'Basics '],
},
},
};
export const globalTypes = {
theme: {
name: 'Theme',
description: 'Global theme for components',
defaultValue: 'light',
toolbar: {
icon: 'paintbrush',
items: [
{ value: 'light', title: 'Light theme' },
{ value: 'dark', title: 'Dark theme' },
],
},
},
locale: {
name: 'Locale',
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: [
{ value: 'en', right: '🇺🇸', title: 'English' },
{ value: 'es', right: '🇪🇸', title: 'Español' },
{ value: 'zh', right: '🇨🇳', title: '中文' },
{ value: 'kr', right: '🇰🇷', title: '한국어' },
],
},
},
};

8
code/examples/angular-cli/.storybook/tsconfig.json
View File

@ -1,8 +0,0 @@
{
"extends": "../tsconfig.app.json",
"exclude": ["../src/karma.ts", "../src/**/*.spec.ts"],
"include": ["../src/**/*", "preview.ts"],
"compilerOptions": {
"types": ["@testing-library/jest-dom"]
}
}

27
code/examples/angular-cli/README.md
View File

@ -1,27 +0,0 @@
# AngularCli
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Jest](https://facebook.github.io/jest/).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

134
code/examples/angular-cli/angular.json
View File

@ -1,134 +0,0 @@
{
/* angular.json can have comments */
// angular.json can have comments
"$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-cli": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-cli",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css", "src/styles.scss"],
"stylePreprocessorOptions": {
"includePaths": ["src/commons"]
},
"scripts": [],
"aot": false,
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-cli:build"
},
"configurations": {
"production": {
"browserTarget": "angular-cli:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-cli:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/karma.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": ["styles.css"],
"scripts": [],
"assets": ["src/favicon.ico", "src/assets"]
}
},
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"browserTarget": "angular-cli:build",
"port": 4400
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"browserTarget": "angular-cli:build"
}
}
}
},
"angular-cli-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "angular-cli:serve"
}
}
}
},
"without-browser-target": {
"root": "",
"projectType": "library",
"architect": {
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"tsConfig": "tsconfig.app.json"
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"tsConfig": "tsconfig.app.json"
}
}
}
}
},
"defaultProject": "angular-cli"
}

13
code/examples/angular-cli/angularshots.test.js
View File

@ -1,13 +0,0 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
jest.mock('./addon-jest.testresults.json', () => ({}), { virtual: true });
jest.mock('./documentation.json', () => ({}), { virtual: true });
jest.mock('./environments/environment', () => ({}), { virtual: true });
initStoryshots({
framework: 'angular',
integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
configPath: path.join(__dirname, '.storybook'),
test: multiSnapshotWithOptions(),
});

16
code/examples/angular-cli/e2e/app.e2e-spec.ts
View File

@ -1,16 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies */
import { AppPage } from './app.po';
import 'jasmine';
describe('ng5test App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText() as any).toEqual('Welcome to app!');
});
});

11
code/examples/angular-cli/e2e/app.po.ts
View File

@ -1,11 +0,0 @@
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('storybook-app-root h1')).getText();
}
}

10
code/examples/angular-cli/e2e/tsconfig.e2e.json
View File

@ -1,10 +0,0 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": ["jasmine", "jasminewd2", "node"]
}
}

19
code/examples/angular-cli/jest-config/globalMocks.ts
View File

@ -1,19 +0,0 @@
/* eslint-disable no-return-assign */
const mock = () => {
let storage = {};
return {
getItem: (key) => (key in storage ? storage[key] : null),
setItem: (key, value) => (storage[key] = value || ''),
removeItem: (key) => delete storage[key],
clear: () => (storage = {}),
};
};
Object.defineProperty(window, 'localStorage', {
value: mock(),
});
Object.defineProperty(window, 'sessionStorage', {
value: mock(),
});
Object.defineProperty(window, 'getComputedStyle', {
value: () => ['-webkit-appearance'],
});

4
code/examples/angular-cli/jest-config/setup.ts
View File

@ -1,4 +0,0 @@
import 'jest-preset-angular/setup-jest';
import './globalMocks';
require('@storybook/babel-plugin-require-context-hook/register')();

7
code/examples/angular-cli/jest.addon-config.js
View File

@ -1,7 +0,0 @@
/* eslint-disable import/extensions */
const base = require('./jest.config.js');
module.exports = {
...base,
testPathIgnorePatterns: ['/node_modules/', '/storybook-static/', 'angularshots.test.js', 'dist'],
};

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