mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 18:41:06 +08:00
Merge branch 'next' into pr/16663
This commit is contained in:
Michael Shilman
commit
e09b04925d
@ -6,7 +6,7 @@ const withTests = {
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
'babel-plugin-require-context-hook',
|
||||
'@storybook/babel-plugin-require-context-hook',
|
||||
'babel-plugin-dynamic-import-node',
|
||||
'@babel/plugin-transform-runtime',
|
||||
],
|
||||
|
||||
@ -195,7 +195,7 @@ jobs:
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
@ -221,7 +221,8 @@ jobs:
|
||||
name: Run E2E tests
|
||||
# Do not test CRA here because it's done in PnP part
|
||||
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
|
||||
command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
|
||||
# TODO: Add `angular` as soon as Storybook is compatible with Angular 13
|
||||
command: yarn test:e2e-framework vue3 angular12 angular11 web_components_typescript web_components_lit2
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
@ -353,17 +354,6 @@ jobs:
|
||||
command: |
|
||||
cd examples/cra-react15
|
||||
yarn storybook --smoke-test --quiet
|
||||
frontpage:
|
||||
executor: sb_node_12_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install --immutable
|
||||
- run:
|
||||
name: Trigger build
|
||||
command: ./scripts/build-frontpage.js
|
||||
lint:
|
||||
executor:
|
||||
class: small
|
||||
@ -446,6 +436,3 @@ workflows:
|
||||
- cra-bench:
|
||||
requires:
|
||||
- publish
|
||||
deploy:
|
||||
jobs:
|
||||
- frontpage
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@storybook/eslint-config-storybook'],
|
||||
extends: ['@storybook/eslint-config-storybook', 'plugin:storybook/recommended'],
|
||||
rules: {
|
||||
'@typescript-eslint/ban-ts-comment': 'warn',
|
||||
},
|
||||
|
||||
99
.github/workflows/handle-release-branches.yml
vendored
Normal file
99
.github/workflows/handle-release-branches.yml
vendored
Normal file
@ -0,0 +1,99 @@
|
||||
name: Handle Release Branches
|
||||
|
||||
on:
|
||||
push:
|
||||
|
||||
jobs:
|
||||
branch-checks:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- id: get-branch
|
||||
run: |
|
||||
BRANCH=($(echo ${{ github.ref }} | sed -E 's/refs\/heads\///'))
|
||||
echo "branch=$BRANCH" >> $GITHUB_ENV
|
||||
outputs:
|
||||
branch: ${{ env.branch }}
|
||||
is-latest-branch: ${{ env.branch == 'main' }}
|
||||
is-next-branch: ${{ env.branch == 'next' }}
|
||||
is-release-branch: ${{ startsWith(env.branch, 'release-') }}
|
||||
is-actionable-branch: ${{ env.branch == 'main' || env.branch == 'next' || startsWith(env.branch, 'release-') }}
|
||||
|
||||
handle-latest:
|
||||
needs: branch-checks
|
||||
if: ${{ needs.branch-checks.outputs.is-latest-branch == 'true' }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- run: curl -X POST "https://api.netlify.com/build_hooks/${{ secrets.FRONTPAGE_HOOK }}"
|
||||
|
||||
get-next-release-branch:
|
||||
needs: branch-checks
|
||||
if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' || needs.branch-checks.outputs.is-release-branch == 'true' }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
ref: next
|
||||
path: next
|
||||
|
||||
- id: next-version
|
||||
uses: notiz-dev/github-action-json-property@release
|
||||
with:
|
||||
path: ${{ github.workspace }}/next/docs/versions/next.json
|
||||
prop_path: version
|
||||
|
||||
- run: |
|
||||
NEXT_RELEASE_BRANCH=($(echo ${{ steps.next-version.outputs.prop }} | sed -E 's/([0-9]+)\.([0-9]+).*/release-\1-\2/'))
|
||||
echo "next-release-branch=$NEXT_RELEASE_BRANCH" >> $GITHUB_ENV
|
||||
outputs:
|
||||
branch: ${{ env.next-release-branch }}
|
||||
|
||||
create-next-release-branch:
|
||||
needs: [branch-checks, get-next-release-branch]
|
||||
if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- run: |
|
||||
set +e
|
||||
REMOTE_BRANCH=$(git branch -r | grep origin/${{ needs.get-next-release-branch.outputs.branch }})
|
||||
if [[ ! -z $REMOTE_BRANCH ]]; then git push origin --delete ${{ needs.get-next-release-branch.outputs.branch }}; fi
|
||||
echo 'Pushing branch ${{ needs.get-next-release-branch.outputs.branch }}...'
|
||||
git push -f origin ${{ needs.branch-checks.outputs.branch }}:${{ needs.get-next-release-branch.outputs.branch }}
|
||||
outputs:
|
||||
branch: ${{ needs.get-next-release-branch.outputs.branch }}
|
||||
|
||||
next-release-branch-check:
|
||||
if: ${{ always() }}
|
||||
needs: [branch-checks, get-next-release-branch]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- run: |
|
||||
IS_NEXT_RELEASE_BRANCH=${{ needs.branch-checks.outputs.branch == needs.get-next-release-branch.outputs.branch }}
|
||||
echo "is-next-release-branch=$IS_NEXT_RELEASE_BRANCH" >> $GITHUB_ENV
|
||||
|
||||
- if: ${{ env.is-next-release-branch == 'true' }}
|
||||
run: echo "relevant-base-branch=next" >> $GITHUB_ENV
|
||||
|
||||
- if: ${{ env.is-next-release-branch == 'true' }}
|
||||
run: |
|
||||
echo 'WARNING: Do not push directly to the `${{ needs.branch-checks.outputs.branch }}` branch. This branch is created and force-pushed over after pushing to the `${{ env.relevant-base-branch }}` branch and the changes you just pushed will be lost.'
|
||||
exit 1
|
||||
outputs:
|
||||
check: ${{ env.is-next-release-branch }}
|
||||
|
||||
request-create-frontpage-branch:
|
||||
if: ${{ always() }}
|
||||
needs: [branch-checks, next-release-branch-check, create-next-release-branch]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- if: ${{ needs.branch-checks.outputs.is-actionable-branch == 'true' && needs.branch-checks.outputs.is-latest-branch == 'false' && needs.next-release-branch-check.outputs.check == 'false' }}
|
||||
run: |
|
||||
curl -X POST https://api.github.com/repos/storybookjs/frontpage/dispatches \
|
||||
-H 'Accept: application/vnd.github.v3+json' \
|
||||
-u ${{ secrets.FRONTPAGE_ACCESS_TOKEN }} \
|
||||
--data '{"event_type": "request-create-frontpage-branch", "client_payload": { "branch": "${{ needs.create-next-release-branch.outputs.branch || needs.branch-checks.outputs.branch }}" }}'
|
||||
23
.github/workflows/linear-export.yml
vendored
Normal file
23
.github/workflows/linear-export.yml
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
name: Export to linear
|
||||
|
||||
on:
|
||||
issues:
|
||||
types: [labeled]
|
||||
pull_request:
|
||||
types: [labeled]
|
||||
|
||||
jobs:
|
||||
trigger:
|
||||
if: github.event.label.name == 'linear'
|
||||
name: Export to linear
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Install dependencies
|
||||
run: yarn install
|
||||
- name: Export to linear
|
||||
run: >
|
||||
yarn linear-export ${{ github.event.issue.number }}
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.LINEAR_GH_TOKEN }}
|
||||
LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
|
||||
30
.teamcity/settings.kts
vendored
30
.teamcity/settings.kts
vendored
@ -45,7 +45,6 @@ project {
|
||||
buildType(Build)
|
||||
buildType(E2E)
|
||||
buildType(SmokeTests)
|
||||
buildType(Frontpage)
|
||||
buildType(Test)
|
||||
buildType(Coverage)
|
||||
|
||||
@ -56,7 +55,6 @@ project {
|
||||
RelativeId("Build"),
|
||||
RelativeId("E2E"),
|
||||
RelativeId("SmokeTests"),
|
||||
RelativeId("Frontpage"),
|
||||
RelativeId("Test"),
|
||||
RelativeId("Coverage")
|
||||
)
|
||||
@ -403,34 +401,6 @@ object SmokeTests : BuildType({
|
||||
}
|
||||
})
|
||||
|
||||
object Frontpage : BuildType({
|
||||
name = "Frontpage"
|
||||
type = Type.DEPLOYMENT
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install --immutable
|
||||
yarn bootstrap --install
|
||||
node ./scripts/build-frontpage.js
|
||||
""".trimIndent()
|
||||
dockerImage = "node:12"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
|
||||
triggers {
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:.teamcity/**"
|
||||
branchFilter = "+:main"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
object Test : BuildType({
|
||||
name = "Test"
|
||||
|
||||
|
||||
60
CHANGELOG.md
60
CHANGELOG.md
@ -1,16 +1,70 @@
|
||||
## 6.4.0-rc.1 (November 13, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
* Angular: Add getWebpackConfig for angular 12.2.x & 13.x.x ([#16644](https://github.com/storybookjs/storybook/pull/16644))
|
||||
|
||||
## 6.4.0-rc.0 (November 12, 2021)
|
||||
|
||||
Storybook 6.4 is in RC!! 🎉🎉🎉
|
||||
|
||||
Hundreds of improvements and fixes, including:
|
||||
|
||||
- ▶️ **Interactive stories** to simulate user behavior and tools to debug it
|
||||
- ⚡️ **On-demand architecture** for smaller builds and faster load times
|
||||
- ⛸ **Streamlined tooling and documentation** for easier upgrades
|
||||
- 💯 **Hundreds more fixes** and quality of life improvements
|
||||
|
||||
Track the release in the Github: [Storybook 6.4 Release 🛠](https://github.com/storybookjs/storybook/issues/15355)
|
||||
|
||||
## 6.4.0-beta.33 (November 12, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Remove `nopreview` and show redbox for any story error ([#16669](https://github.com/storybookjs/storybook/pull/16669))
|
||||
- CLI: Run automigrate at the end of `sb init` ([#16671](https://github.com/storybookjs/storybook/pull/16671))
|
||||
- UI: Docs loading state (WIP) ([#16666](https://github.com/storybookjs/storybook/pull/16666))
|
||||
|
||||
### Bugs
|
||||
|
||||
- Addon-actions: Omit sending window object thru the channel ([#16514](https://github.com/storybookjs/storybook/pull/16514))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Fix CI checks ([#16535](https://github.com/storybookjs/storybook/pull/16535))
|
||||
- Build: Add eslint-plugin-storybook to the repo ([#16662](https://github.com/storybookjs/storybook/pull/16662))
|
||||
|
||||
## 6.4.0-beta.32 (November 12, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add eslint-plugin-storybook to automigrate ([#16550](https://github.com/storybookjs/storybook/pull/16550))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Ensure manager caching respects globals ([#16653](https://github.com/storybookjs/storybook/pull/16653))
|
||||
- Core: Move the websocket channel to a specific path ([#16665](https://github.com/storybookjs/storybook/pull/16665))
|
||||
- Storyshots: Fix autotitle ([#16568](https://github.com/storybookjs/storybook/pull/16568))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Interactions: Use Icon button and add disabled state to IconButton ([#16601](https://github.com/storybookjs/storybook/pull/16601))
|
||||
- Add handle-release-branches-workflow ([#16580](https://github.com/storybookjs/storybook/pull/16580))
|
||||
- Addon-interactions: add waitForElementToBeRemoved example ([#16434](https://github.com/storybookjs/storybook/pull/16434))
|
||||
|
||||
## 6.4.0-beta.31 (November 10, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
* Core: Add feature flag to stop storybook from aliasing emotion ([#16613](https://github.com/storybookjs/storybook/pull/16613))
|
||||
- Core: Add feature flag to stop storybook from aliasing emotion ([#16613](https://github.com/storybookjs/storybook/pull/16613))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix `staticDirs` and `-s` conflict check ([#16649](https://github.com/storybookjs/storybook/pull/16649))
|
||||
- Core: Fix `staticDirs` and `-s` conflict check ([#16649](https://github.com/storybookjs/storybook/pull/16649))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Build: Add node-gyp for M1 macs ([#16645](https://github.com/storybookjs/storybook/pull/16645))
|
||||
- Build: Add node-gyp for M1 macs ([#16645](https://github.com/storybookjs/storybook/pull/16645))
|
||||
|
||||
## 6.4.0-beta.30 (November 8, 2021)
|
||||
|
||||
|
||||
35
MIGRATION.md
35
MIGRATION.md
@ -12,6 +12,8 @@
|
||||
- [Using the v7 store](#using-the-v7-store)
|
||||
- [V7-style story sort](#v7-style-story-sort)
|
||||
- [V7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
|
||||
- [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store)
|
||||
- [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
|
||||
- [Babel mode v7](#babel-mode-v7)
|
||||
- [Loader behavior with args changes](#loader-behavior-with-args-changes)
|
||||
- [Angular component parameter removed](#angular-component-parameter-removed)
|
||||
@ -341,7 +343,7 @@ module.exports = {
|
||||
|
||||
NOTE: `features.storyStoreV7` implies `features.buildStoriesJson` and has the same limitations.
|
||||
|
||||
#### V7-style story sort
|
||||
#### v7-style story sort
|
||||
|
||||
If you've written a custom `storySort` function, you'll need to rewrite it for V7.
|
||||
|
||||
@ -377,13 +379,42 @@ function storySort(a, b) {
|
||||
},
|
||||
```
|
||||
|
||||
#### V7 Store API changes for addon authors
|
||||
#### v7 Store API changes for addon authors
|
||||
|
||||
The Story Store in v7 mode is async, so synchronous story loading APIs no longer work. In particular:
|
||||
|
||||
- `store.fromId()` has been replaced by `store.loadStory()`, which is async (i.e. returns a `Promise` you will need to await).
|
||||
- `store.raw()/store.extract()` and friends that list all stories require a prior call to `store.cacheAllCSFFiles()` (which is async). This will load all stories, and isn't generally a good idea in an addon, as it will force the whole store to load.
|
||||
|
||||
#### Storyshots compatibility in the v7 store
|
||||
|
||||
Storyshots is not currently compatible with the v7 store. However, you can use the following workaround to opt-out of the v7 store when running storyshots; in your `main.js`:
|
||||
|
||||
```js
|
||||
features: {
|
||||
storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom');
|
||||
}
|
||||
```
|
||||
|
||||
There are some caveats with the above approach:
|
||||
|
||||
- The code path in the v6 store is different to the v7 store and your mileage may vary in identical behavior. Buyer beware.
|
||||
- The story sort API [changed between the stores](#v7-style-story-sort). If you are using a custom story sort function, you will need to ensure it works in both contexts (perhaps using the check `global.navigator.userAgent.match('jsdom')`).
|
||||
|
||||
### Emotion11 quasi-compatibility
|
||||
|
||||
Now that the web is moving to Emotion 11 for styling, popular libraries like MUI5 and ChakraUI are breaking with Storybook 6.3 which only supports emotion@10.
|
||||
|
||||
Unfortunately we're unable to upgrade Storybook to Emotion 11 without a semver major release, and we're not ready for that. So, as a workaround, we've created a feature flag which opts-out of the previous behavior of pinning the Emotion version to v10. To enable this workaround, add the following to your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports {
|
||||
emotionAlias: false,
|
||||
}
|
||||
```
|
||||
|
||||
Setting this should unlock theming for emotion11-based libraries in Storybook 6.4.
|
||||
|
||||
### Babel mode v7
|
||||
|
||||
SB6.4 introduces an opt-in feature flag, `features.babelModeV7`, that reworks the way Babel is configured in Storybook to make it more consistent with the Babel is configured in your app. This breaking change will become the default in SB 7.0, but we encourage you to migrate today.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/channels": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/channels": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -79,7 +79,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -4,6 +4,40 @@ import { EVENT_ID } from '../constants';
|
||||
import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
|
||||
import { config } from './configureActions';
|
||||
|
||||
type SyntheticEvent = any; // import('react').SyntheticEvent;
|
||||
const findProto = (obj: unknown, callback: (proto: any) => boolean): Function | null => {
|
||||
const proto = Object.getPrototypeOf(obj);
|
||||
if (!proto || callback(proto)) return proto;
|
||||
return findProto(proto, callback);
|
||||
};
|
||||
const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>
|
||||
Boolean(
|
||||
typeof e === 'object' &&
|
||||
e &&
|
||||
findProto(e, (proto) => /^Synthetic(?:Base)?Event$/.test(proto.constructor.name)) &&
|
||||
typeof (e as SyntheticEvent).persist === 'function'
|
||||
);
|
||||
const serializeArg = <T>(a: T) => {
|
||||
if (isReactSyntheticEvent(a)) {
|
||||
const e: SyntheticEvent = Object.create(
|
||||
a.constructor.prototype,
|
||||
Object.getOwnPropertyDescriptors(a)
|
||||
);
|
||||
e.persist();
|
||||
const viewDescriptor = Object.getOwnPropertyDescriptor(e, 'view');
|
||||
// dont send the entire window object over.
|
||||
const view: unknown = viewDescriptor?.value;
|
||||
if (typeof view === 'object' && view?.constructor.name === 'Window') {
|
||||
Object.defineProperty(e, 'view', {
|
||||
...viewDescriptor,
|
||||
value: Object.create(view.constructor.prototype),
|
||||
});
|
||||
}
|
||||
return e;
|
||||
}
|
||||
return a;
|
||||
};
|
||||
|
||||
export function action(name: string, options: ActionOptions = {}): HandlerFunction {
|
||||
const actionOptions = {
|
||||
...config,
|
||||
@ -14,7 +48,8 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
|
||||
const channel = addons.getChannel();
|
||||
const id = uuidv4();
|
||||
const minDepth = 5; // anything less is really just storybook internals
|
||||
const normalizedArgs = args.length > 1 ? args : args[0];
|
||||
const serializedArgs = args.map(serializeArg);
|
||||
const normalizedArgs = args.length > 1 ? serializedArgs : serializedArgs[0];
|
||||
|
||||
const actionDisplayToEmit: ActionDisplay = {
|
||||
id,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.20",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -73,7 +73,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -63,21 +63,21 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/builder-webpack4": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/builder-webpack4": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/csf-tools": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/postinstall": "6.4.0-beta.31",
|
||||
"@storybook/preview-web": "6.4.0-beta.31",
|
||||
"@storybook/source-loader": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/csf-tools": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/postinstall": "6.4.0-rc.1",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -106,11 +106,11 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.4.0-beta.31",
|
||||
"@storybook/html": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/vue": "6.4.0-beta.31",
|
||||
"@storybook/web-components": "6.4.0-beta.31",
|
||||
"@storybook/angular": "6.4.0-rc.1",
|
||||
"@storybook/html": "6.4.0-rc.1",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/web-components": "6.4.0-rc.1",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -140,12 +140,12 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.4.0-beta.31",
|
||||
"@storybook/html": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/vue": "6.4.0-beta.31",
|
||||
"@storybook/vue3": "6.4.0-beta.31",
|
||||
"@storybook/web-components": "6.4.0-beta.31",
|
||||
"@storybook/angular": "6.4.0-rc.1",
|
||||
"@storybook/html": "6.4.0-rc.1",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/vue3": "6.4.0-rc.1",
|
||||
"@storybook/web-components": "6.4.0-rc.1",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -202,7 +202,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -162,9 +162,7 @@ export const StoryTable: FC<
|
||||
const story = useStory(storyId, context);
|
||||
// eslint-disable-next-line prefer-const
|
||||
let [args, updateArgs, resetArgs] = useArgs(storyId, context);
|
||||
if (!story) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
if (!story) return <PureArgsTable isLoading />;
|
||||
|
||||
const argTypes = filterArgTypes(story.argTypes, include, exclude);
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
resetComponents,
|
||||
Preview as PurePreview,
|
||||
PreviewProps as PurePreviewProps,
|
||||
PreviewSkeleton,
|
||||
} from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { SourceContext, SourceContextProps } from './SourceContainer';
|
||||
@ -71,7 +72,9 @@ export const Canvas: FC<CanvasProps> = (props) => {
|
||||
const { isLoading, previewProps } = getPreviewProps(props, docsContext, sourceContext);
|
||||
const { children } = props;
|
||||
|
||||
return isLoading ? null : (
|
||||
if (isLoading) return <PreviewSkeleton />;
|
||||
|
||||
return (
|
||||
<MDXProvider components={resetComponents}>
|
||||
<PurePreview {...previewProps}>{children}</PurePreview>
|
||||
</MDXProvider>
|
||||
|
||||
@ -6,10 +6,11 @@ import React, {
|
||||
useContext,
|
||||
useRef,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import global from 'global';
|
||||
import { resetComponents, Story as PureStory } from '@storybook/components';
|
||||
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';
|
||||
@ -113,13 +114,14 @@ export const getStoryProps = <TFramework extends AnyFramework>(
|
||||
const Story: FunctionComponent<StoryProps> = (props) => {
|
||||
const context = useContext(DocsContext);
|
||||
const channel = addons.getChannel();
|
||||
const ref = useRef();
|
||||
const storyRef = useRef();
|
||||
const storyId = getStoryId(props, context);
|
||||
const story = useStory(storyId, context);
|
||||
const [showLoader, setShowLoader] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
let cleanup: () => void;
|
||||
if (story && ref.current) {
|
||||
if (story && storyRef.current) {
|
||||
const { componentId, id, title, name } = story;
|
||||
const renderContext = {
|
||||
componentId,
|
||||
@ -136,14 +138,15 @@ const Story: FunctionComponent<StoryProps> = (props) => {
|
||||
cleanup = context.renderStoryToElement({
|
||||
story,
|
||||
renderContext,
|
||||
element: ref.current as HTMLElement,
|
||||
element: storyRef.current as HTMLElement,
|
||||
});
|
||||
setShowLoader(false);
|
||||
}
|
||||
return () => cleanup && cleanup();
|
||||
}, [story]);
|
||||
|
||||
if (!story) {
|
||||
return <div>Loading...</div>;
|
||||
return <StorySkeleton />;
|
||||
}
|
||||
|
||||
// If we are rendering a old-style inline Story via `PureStory` below, we want to emit
|
||||
@ -158,7 +161,7 @@ const Story: FunctionComponent<StoryProps> = (props) => {
|
||||
|
||||
if (global?.FEATURES?.modernInlineRender) {
|
||||
// We do this so React doesn't complain when we replace the span in a secondary render
|
||||
const htmlContents = `<span data-is-loading-indicator="true">loading story...</span>`;
|
||||
const htmlContents = `<span></span>`;
|
||||
|
||||
// FIXME: height/style/etc. lifted from PureStory
|
||||
const { height } = storyProps;
|
||||
@ -168,8 +171,9 @@ const Story: FunctionComponent<StoryProps> = (props) => {
|
||||
{height ? (
|
||||
<style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
|
||||
) : null}
|
||||
{showLoader && <StorySkeleton />}
|
||||
<div
|
||||
ref={ref}
|
||||
ref={storyRef}
|
||||
data-name={story.name}
|
||||
dangerouslySetInnerHTML={{ __html: htmlContents }}
|
||||
/>
|
||||
|
||||
@ -16,7 +16,12 @@ export function useStories<TFramework extends AnyFramework = AnyFramework>(
|
||||
storyIds: StoryId[],
|
||||
context: DocsContextProps<TFramework>
|
||||
): (Story<TFramework> | void)[] {
|
||||
const [storiesById, setStories] = useState({} as Record<StoryId, Story<TFramework>>);
|
||||
const initialStoriesById = context.componentStories().reduce((acc, story) => {
|
||||
acc[story.id] = story;
|
||||
return acc;
|
||||
}, {} as Record<StoryId, Story<TFramework>>);
|
||||
|
||||
const [storiesById, setStories] = useState(initialStoriesById as typeof initialStoriesById);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,31 +39,31 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.4.0-beta.31",
|
||||
"@storybook/addon-controls": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/addon-measure": "6.4.0-beta.31",
|
||||
"@storybook/addon-outline": "6.4.0-beta.31",
|
||||
"@storybook/addon-toolbars": "6.4.0-beta.31",
|
||||
"@storybook/addon-viewport": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.1",
|
||||
"@storybook/addon-controls": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-measure": "6.4.0-rc.1",
|
||||
"@storybook/addon-outline": "6.4.0-rc.1",
|
||||
"@storybook/addon-toolbars": "6.4.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.4.0-beta.31",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.4.0-beta.31",
|
||||
"@storybook/web-components": "6.4.0-beta.31",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/web-components": "6.4.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -93,6 +93,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -41,14 +41,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/instrumenter": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/instrumenter": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.0.5",
|
||||
@ -74,7 +74,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
import { Story as CSF2Story, Meta, ComponentStoryObj } from '@storybook/react';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
|
||||
import {
|
||||
within,
|
||||
waitFor,
|
||||
fireEvent,
|
||||
userEvent,
|
||||
waitForElementToBeRemoved,
|
||||
} from '@storybook/testing-library';
|
||||
import React from 'react';
|
||||
|
||||
import { AccountForm } from './AccountForm';
|
||||
@ -25,6 +31,7 @@ export const Demo: CSF2Story = (args) => (
|
||||
Click
|
||||
</button>
|
||||
);
|
||||
|
||||
Demo.play = async ({ args, canvasElement }) => {
|
||||
await userEvent.click(within(canvasElement).getByRole('button'));
|
||||
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
|
||||
@ -42,6 +49,50 @@ WaitFor.play = async ({ args, canvasElement }) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const WaitForElementToBeRemoved: CSF2Story = () => {
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => setIsLoading(false), 1500);
|
||||
}, []);
|
||||
|
||||
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
|
||||
};
|
||||
WaitForElementToBeRemoved.play = async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
|
||||
const button = await canvas.findByText('Loaded!');
|
||||
await expect(button).not.toBeNull();
|
||||
};
|
||||
|
||||
export const WithLoaders: CSF2Story = (args, { loaded: { todo } }) => {
|
||||
return (
|
||||
<button type="button" onClick={args.onSubmit(todo.title)}>
|
||||
Todo: {todo.title}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
WithLoaders.loaders = [
|
||||
async () => {
|
||||
// long fake timeout
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
return {
|
||||
todo: {
|
||||
userId: 1,
|
||||
id: 1,
|
||||
title: 'delectus aut autem',
|
||||
completed: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
];
|
||||
WithLoaders.play = async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const todoItem = await canvas.findByText('Todo: delectus aut autem');
|
||||
await userEvent.click(todoItem);
|
||||
await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
|
||||
};
|
||||
|
||||
export const Standard: CSF3Story = {
|
||||
args: { passwordVerification: false },
|
||||
};
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Button, Icons, Separator, P, TooltipNote, WithTooltip, Bar } from '@storybook/components';
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
Icons,
|
||||
Separator,
|
||||
P,
|
||||
TooltipNote,
|
||||
WithTooltip,
|
||||
Bar,
|
||||
} from '@storybook/components';
|
||||
import { Call, CallStates } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
@ -46,14 +55,9 @@ const Note = styled(TooltipNote)(({ theme }) => ({
|
||||
fontFamily: theme.typography.fonts.base,
|
||||
}));
|
||||
|
||||
export const StyledIconButton = styled(StyledButton)(({ theme }) => ({
|
||||
export const StyledIconButton = styled(IconButton)(({ theme }) => ({
|
||||
color: theme.color.mediumdark,
|
||||
margin: '0 3px',
|
||||
'&:not(:disabled)': {
|
||||
'&:hover,&:focus-visible': {
|
||||
background: theme.background.hoverable,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledSeparator = styled(Separator)({
|
||||
@ -133,7 +137,7 @@ export const Subnav: React.FC<SubnavProps> = ({
|
||||
trigger={hasPrevious ? 'hover' : 'none'}
|
||||
tooltip={<Note note="Go to start" />}
|
||||
>
|
||||
<RewindButton containsIcon onClick={onStart} disabled={isDisabled || !hasPrevious}>
|
||||
<RewindButton onClick={onStart} disabled={isDisabled || !hasPrevious}>
|
||||
<Icons icon="rewind" />
|
||||
</RewindButton>
|
||||
</WithTooltip>
|
||||
@ -144,11 +148,7 @@ export const Subnav: React.FC<SubnavProps> = ({
|
||||
trigger={hasPrevious ? 'hover' : 'none'}
|
||||
tooltip={<Note note="Go back" />}
|
||||
>
|
||||
<StyledIconButton
|
||||
containsIcon
|
||||
onClick={onPrevious}
|
||||
disabled={isDisabled || !hasPrevious}
|
||||
>
|
||||
<StyledIconButton onClick={onPrevious} disabled={isDisabled || !hasPrevious}>
|
||||
<Icons icon="playback" />
|
||||
</StyledIconButton>
|
||||
</WithTooltip>
|
||||
@ -159,7 +159,7 @@ export const Subnav: React.FC<SubnavProps> = ({
|
||||
trigger={hasNext ? 'hover' : 'none'}
|
||||
tooltip={<Note note="Go forward" />}
|
||||
>
|
||||
<StyledIconButton containsIcon onClick={onNext} disabled={isDisabled || !hasNext}>
|
||||
<StyledIconButton onClick={onNext} disabled={isDisabled || !hasNext}>
|
||||
<Icons icon="playnext" />
|
||||
</StyledIconButton>
|
||||
</WithTooltip>
|
||||
@ -170,7 +170,7 @@ export const Subnav: React.FC<SubnavProps> = ({
|
||||
hasChrome={false}
|
||||
tooltip={<Note note="Go to end" />}
|
||||
>
|
||||
<StyledIconButton containsIcon onClick={onEnd} disabled={isDisabled || !hasNext}>
|
||||
<StyledIconButton onClick={onEnd} disabled={isDisabled || !hasNext}>
|
||||
<Icons icon="fastforward" />
|
||||
</StyledIconButton>
|
||||
</WithTooltip>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/router": "6.4.0-beta.31",
|
||||
"@storybook/router": "6.4.0-rc.1",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,11 +44,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
@ -71,7 +71,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,16 +45,16 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/client-api": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-client": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-client": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
"babel-plugin-require-context-hook": "^1.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"glob": "^7.1.6",
|
||||
"global": "^4.4.0",
|
||||
@ -69,11 +69,11 @@
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/angular": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/vue": "6.4.0-beta.31",
|
||||
"@storybook/vue3": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/angular": "6.4.0-rc.1",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/vue3": "6.4.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -151,7 +151,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { toRequireContext, StoriesEntry, normalizeStoriesEntry } from '@storybook/core-common';
|
||||
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
|
||||
import {
|
||||
toRequireContext,
|
||||
StoriesEntry,
|
||||
normalizeStoriesEntry,
|
||||
NormalizedStoriesSpecifier,
|
||||
} from '@storybook/core-common';
|
||||
import registerRequireContextHook from '@storybook/babel-plugin-require-context-hook/register';
|
||||
import global from 'global';
|
||||
import { AnyFramework, ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/csf';
|
||||
|
||||
@ -19,8 +24,10 @@ const isFile = (file: string): boolean => {
|
||||
};
|
||||
|
||||
interface Output {
|
||||
features?: Record<string, boolean>;
|
||||
preview?: string;
|
||||
stories?: string[];
|
||||
stories?: NormalizedStoriesSpecifier[];
|
||||
requireContexts?: string[];
|
||||
}
|
||||
|
||||
const supportedExtensions = ['ts', 'tsx', 'js', 'jsx'];
|
||||
@ -50,15 +57,20 @@ function getConfigPathParts(input: string): Output {
|
||||
output.preview = preview;
|
||||
}
|
||||
if (main) {
|
||||
const { stories = [] } = jest.requireActual(main);
|
||||
const { stories = [], features = {} } = jest.requireActual(main);
|
||||
|
||||
output.features = features;
|
||||
|
||||
const workingDir = process.cwd();
|
||||
output.stories = stories.map((entry: StoriesEntry) => {
|
||||
const workingDir = process.cwd();
|
||||
const specifier = normalizeStoriesEntry(entry, {
|
||||
configDir,
|
||||
workingDir,
|
||||
});
|
||||
|
||||
return specifier;
|
||||
});
|
||||
output.requireContexts = output.stories.map((specifier) => {
|
||||
const { path: basePath, recursive, match } = toRequireContext(specifier);
|
||||
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
@ -84,7 +96,15 @@ function configure<TFramework extends AnyFramework>(
|
||||
return;
|
||||
}
|
||||
|
||||
const { preview, stories } = getConfigPathParts(configPath);
|
||||
const { preview, features = {}, stories = [], requireContexts = [] } = getConfigPathParts(
|
||||
configPath
|
||||
);
|
||||
|
||||
global.FEATURES = features;
|
||||
global.STORIES = stories.map((specifier) => ({
|
||||
...specifier,
|
||||
importPathMatcher: specifier.importPathMatcher.source,
|
||||
}));
|
||||
|
||||
if (preview) {
|
||||
// This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template
|
||||
@ -117,8 +137,8 @@ function configure<TFramework extends AnyFramework>(
|
||||
}
|
||||
}
|
||||
|
||||
if (stories && stories.length) {
|
||||
storybook.configure(stories, false, false);
|
||||
if (requireContexts && requireContexts.length) {
|
||||
storybook.configure(requireContexts, false, false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,4 +3,4 @@ declare module 'jest-preset-angular/*';
|
||||
declare module 'preact-render-to-string/jsx';
|
||||
declare module 'react-test-renderer*';
|
||||
declare module 'rax-test-renderer*';
|
||||
declare module 'babel-plugin-require-context-hook/register';
|
||||
declare module '@storybook/babel-plugin-require-context-hook/register';
|
||||
|
||||
@ -53,12 +53,6 @@ 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]}
|
||||
|
||||
@ -45,12 +45,6 @@ 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]}
|
||||
|
||||
@ -45,12 +45,6 @@ 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]}
|
||||
|
||||
@ -45,12 +45,6 @@ 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]}
|
||||
|
||||
@ -30,5 +30,5 @@ export default {
|
||||
includeStories: ['withTimeout'],
|
||||
};
|
||||
|
||||
export const withTimeout = () => <AsyncTestComponent />;
|
||||
withTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`;
|
||||
export const WithTimeout = () => <AsyncTestComponent />;
|
||||
WithTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`;
|
||||
|
||||
@ -11,9 +11,9 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
|
||||
export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
|
||||
|
||||
export const withSomeEmoji = () => (
|
||||
export const WithSomeEmoji = () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
@ -21,4 +21,4 @@ export const withSomeEmoji = () => (
|
||||
</Button>
|
||||
);
|
||||
|
||||
withSomeEmoji.storyName = 'with some emoji';
|
||||
WithSomeEmoji.storyName = 'with some emoji';
|
||||
|
||||
@ -11,6 +11,6 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
|
||||
export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
|
||||
|
||||
toStorybook.storyName = 'to Storybook';
|
||||
ToStorybook.storyName = 'to Storybook';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,7 +42,7 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.4.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.4.0-rc.1",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267"
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/router": "6.4.0-beta.31",
|
||||
"@storybook/source-loader": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/router": "6.4.0-rc.1",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,10 +45,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -67,7 +67,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,17 +45,19 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@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",
|
||||
"postcss": "^7.0.36",
|
||||
@ -131,5 +133,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267"
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4"
|
||||
}
|
||||
|
||||
@ -74,12 +74,12 @@ describe('Build Storybook Builder', () => {
|
||||
expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
|
||||
expect(buildStandaloneMock).toHaveBeenCalledWith({
|
||||
angularBrowserTarget: 'angular-cli:build-2',
|
||||
angularBuilderContext: expect.any(Object),
|
||||
configDir: '.storybook',
|
||||
docsMode: false,
|
||||
loglevel: undefined,
|
||||
quiet: false,
|
||||
outputDir: 'storybook-static',
|
||||
staticDir: [],
|
||||
mode: 'static',
|
||||
compodoc: false,
|
||||
compodocArgs: ['-e', 'json'],
|
||||
@ -101,12 +101,12 @@ describe('Build Storybook Builder', () => {
|
||||
expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
|
||||
expect(buildStandaloneMock).toHaveBeenCalledWith({
|
||||
angularBrowserTarget: null,
|
||||
angularBuilderContext: expect.any(Object),
|
||||
configDir: '.storybook',
|
||||
docsMode: false,
|
||||
loglevel: undefined,
|
||||
quiet: false,
|
||||
outputDir: 'storybook-static',
|
||||
staticDir: [],
|
||||
mode: 'static',
|
||||
compodoc: false,
|
||||
compodocArgs: ['-e', 'json'],
|
||||
@ -155,12 +155,12 @@ describe('Build Storybook Builder', () => {
|
||||
]);
|
||||
expect(buildStandaloneMock).toHaveBeenCalledWith({
|
||||
angularBrowserTarget: 'angular-cli:build-2',
|
||||
angularBuilderContext: expect.any(Object),
|
||||
configDir: '.storybook',
|
||||
docsMode: false,
|
||||
loglevel: undefined,
|
||||
quiet: false,
|
||||
outputDir: 'storybook-static',
|
||||
staticDir: [],
|
||||
mode: 'static',
|
||||
compodoc: true,
|
||||
compodocArgs: ['-e', 'json'],
|
||||
|
||||
@ -24,7 +24,7 @@ export type StorybookBuilderOptions = JsonObject & {
|
||||
} & Pick<
|
||||
// makes sure the option exists
|
||||
CLIOptions,
|
||||
'staticDir' | 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs'
|
||||
'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs'
|
||||
>;
|
||||
|
||||
export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
|
||||
@ -48,11 +48,13 @@ function commandBuilder(
|
||||
map(({ tsConfig }) => {
|
||||
const { browserTarget, ...otherOptions } = options;
|
||||
|
||||
return {
|
||||
const standaloneOptions: StandaloneOptions = {
|
||||
...otherOptions,
|
||||
angularBrowserTarget: browserTarget,
|
||||
angularBuilderContext: context,
|
||||
tsConfig,
|
||||
};
|
||||
return standaloneOptions;
|
||||
}),
|
||||
switchMap((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })),
|
||||
map(() => {
|
||||
|
||||
@ -14,13 +14,6 @@
|
||||
"type": "string",
|
||||
"description": "The full path for the TypeScript configuration file, relative to the current workspace."
|
||||
},
|
||||
"staticDir": {
|
||||
"type": "array",
|
||||
"description": "Directory where to load static files from, array of strings.",
|
||||
"items": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"outputDir": {
|
||||
"type": "string",
|
||||
"description": "Directory where to store built files.",
|
||||
|
||||
@ -75,6 +75,7 @@ describe('Start Storybook Builder', () => {
|
||||
expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
|
||||
expect(buildStandaloneMock).toHaveBeenCalledWith({
|
||||
angularBrowserTarget: 'angular-cli:build-2',
|
||||
angularBuilderContext: expect.any(Object),
|
||||
ci: false,
|
||||
configDir: '.storybook',
|
||||
docsMode: false,
|
||||
@ -86,7 +87,6 @@ describe('Start Storybook Builder', () => {
|
||||
sslCa: undefined,
|
||||
sslCert: undefined,
|
||||
sslKey: undefined,
|
||||
staticDir: [],
|
||||
compodoc: false,
|
||||
compodocArgs: ['-e', 'json'],
|
||||
tsConfig: 'src/tsconfig.app.json',
|
||||
@ -108,6 +108,7 @@ describe('Start Storybook Builder', () => {
|
||||
expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
|
||||
expect(buildStandaloneMock).toHaveBeenCalledWith({
|
||||
angularBrowserTarget: null,
|
||||
angularBuilderContext: expect.any(Object),
|
||||
ci: false,
|
||||
configDir: '.storybook',
|
||||
docsMode: false,
|
||||
@ -119,7 +120,6 @@ describe('Start Storybook Builder', () => {
|
||||
sslCa: undefined,
|
||||
sslCert: undefined,
|
||||
sslKey: undefined,
|
||||
staticDir: [],
|
||||
compodoc: false,
|
||||
compodocArgs: ['-e', 'json'],
|
||||
tsConfig: 'path/to/tsConfig.json',
|
||||
@ -167,6 +167,7 @@ describe('Start Storybook Builder', () => {
|
||||
]);
|
||||
expect(buildStandaloneMock).toHaveBeenCalledWith({
|
||||
angularBrowserTarget: 'angular-cli:build-2',
|
||||
angularBuilderContext: expect.any(Object),
|
||||
ci: false,
|
||||
configDir: '.storybook',
|
||||
docsMode: false,
|
||||
@ -178,7 +179,6 @@ describe('Start Storybook Builder', () => {
|
||||
sslCa: undefined,
|
||||
sslCert: undefined,
|
||||
sslKey: undefined,
|
||||
staticDir: [],
|
||||
compodoc: true,
|
||||
compodocArgs: ['-e', 'json'],
|
||||
tsConfig: 'src/tsconfig.app.json',
|
||||
|
||||
@ -26,7 +26,6 @@ export type StorybookBuilderOptions = JsonObject & {
|
||||
CLIOptions,
|
||||
| 'port'
|
||||
| 'host'
|
||||
| 'staticDir'
|
||||
| 'configDir'
|
||||
| 'https'
|
||||
| 'sslCa'
|
||||
@ -59,11 +58,14 @@ function commandBuilder(
|
||||
map(({ tsConfig }) => {
|
||||
const { browserTarget, ...otherOptions } = options;
|
||||
|
||||
return {
|
||||
const standaloneOptions: StandaloneOptions = {
|
||||
...otherOptions,
|
||||
angularBrowserTarget: browserTarget,
|
||||
angularBuilderContext: context,
|
||||
tsConfig,
|
||||
};
|
||||
|
||||
return standaloneOptions;
|
||||
}),
|
||||
switchMap((standaloneOptions) => runInstance(standaloneOptions)),
|
||||
map(() => {
|
||||
@ -88,7 +90,6 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
|
||||
tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function runInstance(options: StandaloneOptions) {
|
||||
return new Observable<void>((observer) => {
|
||||
// This Observable intentionally never complete, leaving the process running ;)
|
||||
|
||||
@ -24,13 +24,6 @@
|
||||
"description": "Host to listen on.",
|
||||
"default": "localhost"
|
||||
},
|
||||
"staticDir": {
|
||||
"type": "array",
|
||||
"description": "Directory where to load static files from, array of strings.",
|
||||
"items": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"configDir": {
|
||||
"type": "string",
|
||||
"description": "Directory where to load Storybook configurations from.",
|
||||
@ -87,13 +80,5 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"additionalProperties": false,
|
||||
"oneOf": [
|
||||
{
|
||||
"required": ["browserTarget"]
|
||||
},
|
||||
{
|
||||
"required": ["tsConfig"]
|
||||
}
|
||||
]
|
||||
"additionalProperties": false
|
||||
}
|
||||
|
||||
7
app/angular/src/server/angular-cli-webpack-12.2.x.d.ts
vendored
Normal file
7
app/angular/src/server/angular-cli-webpack-12.2.x.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import { JsonObject } from '@angular-devkit/core';
|
||||
import { BuilderContext } from '@angular-devkit/architect';
|
||||
|
||||
export declare function getWebpackConfig(
|
||||
baseConfig: any,
|
||||
options: { builderOptions: JsonObject; builderContext: BuilderContext }
|
||||
): any;
|
||||
78
app/angular/src/server/angular-cli-webpack-12.2.x.js
Normal file
78
app/angular/src/server/angular-cli-webpack-12.2.x.js
Normal file
@ -0,0 +1,78 @@
|
||||
// Private angular devkit stuff
|
||||
const {
|
||||
generateI18nBrowserWebpackConfigFromContext,
|
||||
} = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
|
||||
const {
|
||||
getCommonConfig,
|
||||
getStylesConfig,
|
||||
getTypeScriptConfig,
|
||||
} = require('@angular-devkit/build-angular/src/webpack/configs');
|
||||
|
||||
const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
|
||||
|
||||
/**
|
||||
* Extract webpack config from angular-cli 12.2.x
|
||||
* ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
|
||||
* FIXME: Try another way with TypeScript on future storybook version (7 maybe 🤞)
|
||||
*
|
||||
* @param {*} baseConfig Previous webpack config from storybook
|
||||
* @param {*} options { builderOptions, builderContext }
|
||||
*/
|
||||
exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
|
||||
/**
|
||||
* Get angular-cli Webpack config
|
||||
*/
|
||||
const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext(
|
||||
{
|
||||
// Default options
|
||||
index: 'noop-index',
|
||||
main: 'noop-main',
|
||||
outputPath: 'noop-out',
|
||||
|
||||
// Options provided by user
|
||||
...builderOptions,
|
||||
|
||||
// Fixed options
|
||||
optimization: false,
|
||||
namedChunks: false,
|
||||
progress: false,
|
||||
buildOptimizer: false,
|
||||
aot: false,
|
||||
},
|
||||
builderContext,
|
||||
(wco) => [getCommonConfig(wco), getStylesConfig(wco), getTypeScriptConfig(wco)]
|
||||
);
|
||||
|
||||
/**
|
||||
* Merge baseConfig Webpack with angular-cli Webpack
|
||||
*/
|
||||
const entry = [
|
||||
...baseConfig.entry,
|
||||
...(cliConfig.entry.styles ?? []),
|
||||
...(cliConfig.entry.polyfills ?? []),
|
||||
];
|
||||
|
||||
// Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
|
||||
// because @angular-devkit/build-angular created rules have include/exclude for global style files.
|
||||
const rulesExcludingStyles = filterOutStylingRules(baseConfig);
|
||||
const module = {
|
||||
...baseConfig.module,
|
||||
rules: [...cliConfig.module.rules, ...rulesExcludingStyles],
|
||||
};
|
||||
|
||||
const plugins = [...(cliConfig.plugins ?? []), ...baseConfig.plugins];
|
||||
|
||||
const resolve = {
|
||||
...baseConfig.resolve,
|
||||
modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),
|
||||
};
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
entry,
|
||||
module,
|
||||
plugins,
|
||||
resolve,
|
||||
resolveLoader: cliConfig.resolveLoader,
|
||||
};
|
||||
};
|
||||
7
app/angular/src/server/angular-cli-webpack-13.x.x.d.ts
vendored
Normal file
7
app/angular/src/server/angular-cli-webpack-13.x.x.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import { JsonObject } from '@angular-devkit/core';
|
||||
import { BuilderContext } from '@angular-devkit/architect';
|
||||
|
||||
export declare function getWebpackConfig(
|
||||
baseConfig: any,
|
||||
options: { builderOptions: JsonObject; builderContext: BuilderContext }
|
||||
): any;
|
||||
78
app/angular/src/server/angular-cli-webpack-13.x.x.js
Normal file
78
app/angular/src/server/angular-cli-webpack-13.x.x.js
Normal file
@ -0,0 +1,78 @@
|
||||
// Private angular devkit stuff
|
||||
const {
|
||||
generateI18nBrowserWebpackConfigFromContext,
|
||||
} = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
|
||||
const {
|
||||
getCommonConfig,
|
||||
getStylesConfig,
|
||||
getTypescriptWorkerPlugin,
|
||||
} = require('@angular-devkit/build-angular/src/webpack/configs');
|
||||
|
||||
const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
|
||||
|
||||
/**
|
||||
* Extract webpack config from angular-cli 13.x.x
|
||||
* ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
|
||||
* FIXME: Try another way with TypeScript on future storybook version (7 maybe 🤞)
|
||||
*
|
||||
* @param {*} baseConfig Previous webpack config from storybook
|
||||
* @param {*} options { builderOptions, builderContext }
|
||||
*/
|
||||
exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
|
||||
/**
|
||||
* Get angular-cli Webpack config
|
||||
*/
|
||||
const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext(
|
||||
{
|
||||
// Default options
|
||||
index: 'noop-index',
|
||||
main: 'noop-main',
|
||||
outputPath: 'noop-out',
|
||||
|
||||
// Options provided by user
|
||||
...builderOptions,
|
||||
|
||||
// Fixed options
|
||||
optimization: false,
|
||||
namedChunks: false,
|
||||
progress: false,
|
||||
buildOptimizer: false,
|
||||
aot: false,
|
||||
},
|
||||
builderContext,
|
||||
(wco) => [getCommonConfig(wco), getStylesConfig(wco), getTypescriptWorkerPlugin(wco)]
|
||||
);
|
||||
|
||||
/**
|
||||
* Merge baseConfig Webpack with angular-cli Webpack
|
||||
*/
|
||||
const entry = [
|
||||
...baseConfig.entry,
|
||||
...(cliConfig.entry.styles ?? []),
|
||||
...(cliConfig.entry.polyfills ?? []),
|
||||
];
|
||||
|
||||
// Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
|
||||
// because @angular-devkit/build-angular created rules have include/exclude for global style files.
|
||||
const rulesExcludingStyles = filterOutStylingRules(baseConfig);
|
||||
const module = {
|
||||
...baseConfig.module,
|
||||
rules: [...cliConfig.module.rules, ...rulesExcludingStyles],
|
||||
};
|
||||
|
||||
const plugins = [...(cliConfig.plugins ?? []), ...baseConfig.plugins];
|
||||
|
||||
const resolve = {
|
||||
...baseConfig.resolve,
|
||||
modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),
|
||||
};
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
entry,
|
||||
module,
|
||||
plugins,
|
||||
resolve,
|
||||
resolveLoader: cliConfig.resolveLoader,
|
||||
};
|
||||
};
|
||||
145
app/angular/src/server/angular-cli-webpack-older.ts
Normal file
145
app/angular/src/server/angular-cli-webpack-older.ts
Normal file
@ -0,0 +1,145 @@
|
||||
import webpack from 'webpack';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
||||
import { targetFromTargetString, Target } from '@angular-devkit/architect';
|
||||
|
||||
import { workspaces } from '@angular-devkit/core';
|
||||
import {
|
||||
findAngularProjectTarget,
|
||||
getDefaultProjectName,
|
||||
readAngularWorkspaceConfig,
|
||||
} from './angular-read-workspace';
|
||||
import {
|
||||
AngularCliWebpackConfig,
|
||||
extractAngularCliWebpackConfig,
|
||||
} from './angular-devkit-build-webpack';
|
||||
import { filterOutStylingRules } from './utils/filter-out-styling-rules';
|
||||
import { PresetOptions } from './options';
|
||||
|
||||
/**
|
||||
* Old way currently support version lower than 12.2.x
|
||||
*/
|
||||
export async function getWebpackConfig(baseConfig: webpack.Configuration, options: PresetOptions) {
|
||||
const dirToSearch = process.cwd();
|
||||
|
||||
// Read angular workspace
|
||||
let workspaceConfig;
|
||||
try {
|
||||
workspaceConfig = await readAngularWorkspaceConfig(dirToSearch);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"`
|
||||
);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
// Find angular project target
|
||||
let project: workspaces.ProjectDefinition;
|
||||
let target: workspaces.TargetDefinition;
|
||||
let confName: string;
|
||||
try {
|
||||
// Default behavior when `angularBrowserTarget` are not explicitly defined to null
|
||||
if (options.angularBrowserTarget !== null) {
|
||||
const browserTarget = options.angularBrowserTarget
|
||||
? targetFromTargetString(options.angularBrowserTarget)
|
||||
: ({
|
||||
configuration: undefined,
|
||||
project: getDefaultProjectName(workspaceConfig),
|
||||
target: 'build',
|
||||
} as Target);
|
||||
|
||||
const fondProject = findAngularProjectTarget(
|
||||
workspaceConfig,
|
||||
browserTarget.project,
|
||||
browserTarget.target
|
||||
);
|
||||
project = fondProject.project;
|
||||
target = fondProject.target;
|
||||
confName = browserTarget.configuration;
|
||||
|
||||
logger.info(
|
||||
`=> Using angular project "${browserTarget.project}:${browserTarget.target}${
|
||||
confName ? `:${confName}` : ''
|
||||
}" for configuring Storybook`
|
||||
);
|
||||
}
|
||||
// Start storybook when only tsConfig is provided.
|
||||
if (options.angularBrowserTarget === null && options.tsConfig) {
|
||||
logger.info(`=> Using default angular project with "tsConfig:${options.tsConfig}"`);
|
||||
|
||||
project = { root: '', extensions: {}, targets: undefined };
|
||||
target = { builder: '', options: { tsConfig: options.tsConfig } };
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(`=> Could not find angular project: ${error.message}`);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
// Use angular-cli to get some webpack config
|
||||
let angularCliWebpackConfig: AngularCliWebpackConfig;
|
||||
try {
|
||||
angularCliWebpackConfig = await extractAngularCliWebpackConfig(
|
||||
dirToSearch,
|
||||
project,
|
||||
target,
|
||||
confName
|
||||
);
|
||||
logger.info(`=> Using angular-cli webpack config`);
|
||||
} catch (error) {
|
||||
logger.error(`=> Could not get angular cli webpack config`);
|
||||
throw error;
|
||||
}
|
||||
|
||||
return mergeAngularCliWebpackConfig(angularCliWebpackConfig, baseConfig);
|
||||
}
|
||||
|
||||
function mergeAngularCliWebpackConfig(
|
||||
{ cliCommonWebpackConfig, cliStyleWebpackConfig, tsConfigPath }: AngularCliWebpackConfig,
|
||||
baseConfig: webpack.Configuration
|
||||
) {
|
||||
// Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
|
||||
// because @angular-devkit/build-angular created rules have include/exclude for global style files.
|
||||
const rulesExcludingStyles = filterOutStylingRules(baseConfig);
|
||||
|
||||
// styleWebpackConfig.entry adds global style files to the webpack context
|
||||
const entry = [
|
||||
...(baseConfig.entry as string[]),
|
||||
...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []),
|
||||
];
|
||||
|
||||
const module = {
|
||||
...baseConfig.module,
|
||||
rules: [...cliStyleWebpackConfig.module.rules, ...rulesExcludingStyles],
|
||||
};
|
||||
|
||||
// We use cliCommonConfig plugins to serve static assets files.
|
||||
const plugins = [
|
||||
...cliStyleWebpackConfig.plugins,
|
||||
...cliCommonWebpackConfig.plugins,
|
||||
...baseConfig.plugins,
|
||||
];
|
||||
|
||||
const resolve = {
|
||||
...baseConfig.resolve,
|
||||
modules: Array.from(
|
||||
new Set([...baseConfig.resolve.modules, ...cliCommonWebpackConfig.resolve.modules])
|
||||
),
|
||||
plugins: [
|
||||
new TsconfigPathsPlugin({
|
||||
configFile: tsConfigPath,
|
||||
mainFields: ['browser', 'module', 'main'],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
entry,
|
||||
module,
|
||||
plugins,
|
||||
resolve,
|
||||
resolveLoader: cliCommonWebpackConfig.resolveLoader,
|
||||
};
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
/* eslint-disable jest/no-interpolation-in-snapshots */
|
||||
import { Configuration } from 'webpack';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { Options, webpackFinal } from './framework-preset-angular-cli';
|
||||
import { webpackFinal } from './framework-preset-angular-cli';
|
||||
import { PresetOptions } from './options';
|
||||
|
||||
const testPath = __dirname;
|
||||
|
||||
@ -24,10 +25,10 @@ function initMockWorkspace(name: string) {
|
||||
}
|
||||
|
||||
describe('framework-preset-angular-cli', () => {
|
||||
let options: Options;
|
||||
let options: PresetOptions;
|
||||
|
||||
beforeEach(() => {
|
||||
options = {} as Options;
|
||||
options = {} as PresetOptions;
|
||||
});
|
||||
|
||||
describe('without angular.json', () => {
|
||||
@ -42,7 +43,9 @@ describe('framework-preset-angular-cli', () => {
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.error).toHaveBeenCalledWith(
|
||||
`=> Could not find angular workspace config (angular.json) on this path "${workspaceRoot}"`
|
||||
);
|
||||
@ -60,7 +63,9 @@ describe('framework-preset-angular-cli', () => {
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.error).toHaveBeenCalledWith(
|
||||
'=> Could not find angular project: No angular projects found'
|
||||
);
|
||||
@ -81,7 +86,9 @@ describe('framework-preset-angular-cli', () => {
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.error).toHaveBeenCalledWith(
|
||||
'=> Could not find angular project: No angular projects found'
|
||||
);
|
||||
@ -102,7 +109,9 @@ describe('framework-preset-angular-cli', () => {
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.error).toHaveBeenCalledWith(
|
||||
'=> Could not find angular project: "missing-project" project is not found in angular.json'
|
||||
);
|
||||
@ -123,7 +132,9 @@ describe('framework-preset-angular-cli', () => {
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.error).toHaveBeenCalledWith(
|
||||
'=> Could not find angular project: "build" target is not found in "foo-project" project'
|
||||
);
|
||||
@ -155,7 +166,10 @@ describe('framework-preset-angular-cli', () => {
|
||||
await webpackFinal(baseWebpackConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledTimes(3);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
'=> Using angular project "foo-project:build" for configuring Storybook'
|
||||
@ -585,7 +599,10 @@ describe('framework-preset-angular-cli', () => {
|
||||
await webpackFinal(baseWebpackConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledTimes(3);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
'=> Using angular project "foo-project:build" for configuring Storybook'
|
||||
@ -597,14 +614,17 @@ describe('framework-preset-angular-cli', () => {
|
||||
describe('with angularBrowserTarget option', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('with-angularBrowserTarget');
|
||||
options = { angularBrowserTarget: 'target-project:target-build' } as Options;
|
||||
options = { angularBrowserTarget: 'target-project:target-build' } as PresetOptions;
|
||||
});
|
||||
it('should log', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
await webpackFinal(baseWebpackConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledTimes(3);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
'=> Using angular project "target-project:target-build" for configuring Storybook'
|
||||
@ -619,7 +639,9 @@ describe('framework-preset-angular-cli', () => {
|
||||
});
|
||||
describe('when angular.json have the target without "configurations" section', () => {
|
||||
beforeEach(() => {
|
||||
options = { angularBrowserTarget: 'no-confs-project:target-build:target-conf' } as Options;
|
||||
options = {
|
||||
angularBrowserTarget: 'no-confs-project:target-build:target-conf',
|
||||
} as PresetOptions;
|
||||
});
|
||||
it('throws error', async () => {
|
||||
await expect(() => webpackFinal(newWebpackConfiguration(), options)).rejects.toThrowError(
|
||||
@ -632,7 +654,7 @@ describe('framework-preset-angular-cli', () => {
|
||||
beforeEach(() => {
|
||||
options = {
|
||||
angularBrowserTarget: 'no-target-conf-project:target-build:target-conf',
|
||||
} as Options;
|
||||
} as PresetOptions;
|
||||
});
|
||||
it('throws error', async () => {
|
||||
await expect(() => webpackFinal(newWebpackConfiguration(), options)).rejects.toThrowError(
|
||||
@ -643,14 +665,19 @@ describe('framework-preset-angular-cli', () => {
|
||||
});
|
||||
describe('when angular.json have the target with required configuration', () => {
|
||||
beforeEach(() => {
|
||||
options = { angularBrowserTarget: 'target-project:target-build:target-conf' } as Options;
|
||||
options = {
|
||||
angularBrowserTarget: 'target-project:target-build:target-conf',
|
||||
} as PresetOptions;
|
||||
});
|
||||
it('should log', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
await webpackFinal(baseWebpackConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledTimes(3);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
'=> Using angular project "target-project:target-build:target-conf" for configuring Storybook'
|
||||
@ -684,14 +711,17 @@ describe('framework-preset-angular-cli', () => {
|
||||
options = {
|
||||
tsConfig: 'projects/pattern-lib/tsconfig.lib.json',
|
||||
angularBrowserTarget: null,
|
||||
} as Options;
|
||||
} as PresetOptions;
|
||||
});
|
||||
it('should log', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
await webpackFinal(baseWebpackConfig, options);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledTimes(3);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
'=> Loading angular-cli config for angular lower than 12.2.0'
|
||||
);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
'=> Using default angular project with "tsConfig:projects/pattern-lib/tsconfig.lib.json"'
|
||||
|
||||
@ -1,154 +1,128 @@
|
||||
import webpack from 'webpack';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
||||
import { targetFromTargetString, Target } from '@angular-devkit/architect';
|
||||
import { targetFromTargetString, BuilderContext } from '@angular-devkit/architect';
|
||||
import { sync as findUpSync } from 'find-up';
|
||||
import semver from '@storybook/semver';
|
||||
|
||||
import { Options as CoreOptions } from '@storybook/core-common';
|
||||
import { workspaces } from '@angular-devkit/core';
|
||||
import {
|
||||
findAngularProjectTarget,
|
||||
getDefaultProjectName,
|
||||
readAngularWorkspaceConfig,
|
||||
} from './angular-read-workspace';
|
||||
import {
|
||||
AngularCliWebpackConfig,
|
||||
extractAngularCliWebpackConfig,
|
||||
} from './angular-devkit-build-webpack';
|
||||
import { logging, JsonObject } from '@angular-devkit/core';
|
||||
import { moduleIsAvailable } from './utils/module-is-available';
|
||||
import { filterOutStylingRules } from './utils/filter-out-styling-rules';
|
||||
|
||||
export type Options = CoreOptions & {
|
||||
angularBrowserTarget?: string;
|
||||
tsConfig?: string;
|
||||
};
|
||||
|
||||
export async function webpackFinal(baseConfig: webpack.Configuration, options: Options) {
|
||||
const dirToSearch = process.cwd();
|
||||
import { getWebpackConfig as getWebpackConfig12_2_x } from './angular-cli-webpack-12.2.x';
|
||||
import { getWebpackConfig as getWebpackConfig13_x_x } from './angular-cli-webpack-13.x.x';
|
||||
import { getWebpackConfig as getWebpackConfigOlder } from './angular-cli-webpack-older';
|
||||
import { PresetOptions } from './options';
|
||||
|
||||
export async function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions) {
|
||||
if (!moduleIsAvailable('@angular-devkit/build-angular')) {
|
||||
logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
|
||||
return baseConfig;
|
||||
}
|
||||
logger.info('=> Loading angular-cli config');
|
||||
|
||||
// Read angular workspace
|
||||
let workspaceConfig;
|
||||
try {
|
||||
workspaceConfig = await readAngularWorkspaceConfig(dirToSearch);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"`
|
||||
);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return baseConfig;
|
||||
}
|
||||
const packageJson = await import(findUpSync('package.json', { cwd: options.configDir }));
|
||||
const angularCliVersion = semver.coerce(packageJson.devDependencies['@angular/cli'])?.version;
|
||||
|
||||
// Find angular project target
|
||||
let project: workspaces.ProjectDefinition;
|
||||
let target: workspaces.TargetDefinition;
|
||||
let confName: string;
|
||||
try {
|
||||
// Default behavior when `angularBrowserTarget` are not explicitly defined to null
|
||||
if (options.angularBrowserTarget !== null) {
|
||||
const browserTarget = options.angularBrowserTarget
|
||||
? targetFromTargetString(options.angularBrowserTarget)
|
||||
: ({
|
||||
configuration: undefined,
|
||||
project: getDefaultProjectName(workspaceConfig),
|
||||
target: 'build',
|
||||
} as Target);
|
||||
/**
|
||||
* Ordered array to use the specific getWebpackConfig according to some condition like angular-cli version
|
||||
*/
|
||||
const webpackGetterByVersions: {
|
||||
info: string;
|
||||
condition: boolean;
|
||||
getWebpackConfig(
|
||||
baseConfig: webpack.Configuration,
|
||||
options: PresetOptions
|
||||
): Promise<webpack.Configuration> | webpack.Configuration;
|
||||
}[] = [
|
||||
{
|
||||
info: '=> Loading angular-cli config for angular >= 13.0.0',
|
||||
condition: semver.satisfies(angularCliVersion, '>=13.0.0'),
|
||||
getWebpackConfig: async (_baseConfig, _options) => {
|
||||
const builderContext = getBuilderContext(_options);
|
||||
const builderOptions = await getBuilderOptions(_options, builderContext);
|
||||
|
||||
const fondProject = findAngularProjectTarget(
|
||||
workspaceConfig,
|
||||
browserTarget.project,
|
||||
return getWebpackConfig13_x_x(_baseConfig, {
|
||||
builderOptions,
|
||||
builderContext,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
info: '=> Loading angular-cli config for angular 12.2.x',
|
||||
condition: semver.satisfies(angularCliVersion, '12.2.x') && options.angularBuilderContext,
|
||||
getWebpackConfig: async (_baseConfig, _options) => {
|
||||
const builderContext = getBuilderContext(_options);
|
||||
const builderOptions = await getBuilderOptions(_options, builderContext);
|
||||
|
||||
return getWebpackConfig12_2_x(_baseConfig, {
|
||||
builderOptions,
|
||||
builderContext,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
info: '=> Loading angular-cli config for angular lower than 12.2.0',
|
||||
condition: true,
|
||||
getWebpackConfig: getWebpackConfigOlder,
|
||||
},
|
||||
];
|
||||
|
||||
const webpackGetter = webpackGetterByVersions.find((wg) => wg.condition);
|
||||
|
||||
logger.info(webpackGetter.info);
|
||||
return Promise.resolve(webpackGetter.getWebpackConfig(baseConfig, options));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Builder Context
|
||||
* If storybook is not start by angular builder create dumb BuilderContext
|
||||
*/
|
||||
function getBuilderContext(options: PresetOptions): BuilderContext {
|
||||
return (
|
||||
options.angularBuilderContext ??
|
||||
(({
|
||||
target: { project: 'noop-project', builder: '', options: {} },
|
||||
workspaceRoot: process.cwd(),
|
||||
getProjectMetadata: () => ({}),
|
||||
getTargetOptions: () => ({}),
|
||||
logger: new logging.Logger('Storybook'),
|
||||
} as unknown) as BuilderContext)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get builder options
|
||||
* Merge target options from browser target and from storybook options
|
||||
*/
|
||||
async function getBuilderOptions(
|
||||
options: PresetOptions,
|
||||
builderContext: BuilderContext
|
||||
): Promise<JsonObject> {
|
||||
/**
|
||||
* Get Browser Target options
|
||||
*/
|
||||
let browserTargetOptions: JsonObject = {};
|
||||
if (options.angularBrowserTarget) {
|
||||
const browserTarget = targetFromTargetString(options.angularBrowserTarget);
|
||||
|
||||
logger.info(
|
||||
`=> Using angular browser target options from "${browserTarget.project}:${
|
||||
browserTarget.target
|
||||
);
|
||||
project = fondProject.project;
|
||||
target = fondProject.target;
|
||||
confName = browserTarget.configuration;
|
||||
|
||||
logger.info(
|
||||
`=> Using angular project "${browserTarget.project}:${browserTarget.target}${
|
||||
confName ? `:${confName}` : ''
|
||||
}" for configuring Storybook`
|
||||
);
|
||||
}
|
||||
// Start storybook when only tsConfig is provided.
|
||||
if (options.angularBrowserTarget === null && options.tsConfig) {
|
||||
logger.info(`=> Using default angular project with "tsConfig:${options.tsConfig}"`);
|
||||
|
||||
project = { root: '', extensions: {}, targets: undefined };
|
||||
target = { builder: '', options: { tsConfig: options.tsConfig } };
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(`=> Could not find angular project: ${error.message}`);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
// Use angular-cli to get some webpack config
|
||||
let angularCliWebpackConfig: AngularCliWebpackConfig;
|
||||
try {
|
||||
angularCliWebpackConfig = await extractAngularCliWebpackConfig(
|
||||
dirToSearch,
|
||||
project,
|
||||
target,
|
||||
confName
|
||||
}${browserTarget.configuration ? `:${browserTarget.configuration}` : ''}"`
|
||||
);
|
||||
logger.info(`=> Using angular-cli webpack config`);
|
||||
} catch (error) {
|
||||
logger.error(`=> Could not get angular cli webpack config`);
|
||||
throw error;
|
||||
browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
|
||||
}
|
||||
|
||||
return mergeAngularCliWebpackConfig(angularCliWebpackConfig, baseConfig);
|
||||
}
|
||||
|
||||
function mergeAngularCliWebpackConfig(
|
||||
{ cliCommonWebpackConfig, cliStyleWebpackConfig, tsConfigPath }: AngularCliWebpackConfig,
|
||||
baseConfig: webpack.Configuration
|
||||
) {
|
||||
// Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
|
||||
// because @angular-devkit/build-angular created rules have include/exclude for global style files.
|
||||
const rulesExcludingStyles = filterOutStylingRules(baseConfig);
|
||||
|
||||
// styleWebpackConfig.entry adds global style files to the webpack context
|
||||
const entry = [
|
||||
...(baseConfig.entry as string[]),
|
||||
...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []),
|
||||
];
|
||||
|
||||
const module = {
|
||||
...baseConfig.module,
|
||||
rules: [...cliStyleWebpackConfig.module.rules, ...rulesExcludingStyles],
|
||||
};
|
||||
|
||||
// We use cliCommonConfig plugins to serve static assets files.
|
||||
const plugins = [
|
||||
...cliStyleWebpackConfig.plugins,
|
||||
...cliCommonWebpackConfig.plugins,
|
||||
...baseConfig.plugins,
|
||||
];
|
||||
|
||||
const resolve = {
|
||||
...baseConfig.resolve,
|
||||
modules: Array.from(
|
||||
new Set([...baseConfig.resolve.modules, ...cliCommonWebpackConfig.resolve.modules])
|
||||
),
|
||||
plugins: [
|
||||
new TsconfigPathsPlugin({
|
||||
configFile: tsConfigPath,
|
||||
mainFields: ['browser', 'module', 'main'],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
entry,
|
||||
module,
|
||||
plugins,
|
||||
resolve,
|
||||
resolveLoader: cliCommonWebpackConfig.resolveLoader,
|
||||
};
|
||||
/**
|
||||
* Merge target options from browser target options and from storybook options
|
||||
*/
|
||||
const builderOptions = {
|
||||
...browserTargetOptions,
|
||||
...options.angularBuilderOptions,
|
||||
tsConfig:
|
||||
options.tsConfig ??
|
||||
options.angularBuilderOptions?.tsConfig ??
|
||||
browserTargetOptions.tsConfig ??
|
||||
findUpSync('tsconfig.json', { cwd: options.configDir }),
|
||||
};
|
||||
logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
|
||||
|
||||
return builderOptions;
|
||||
}
|
||||
|
||||
@ -1,7 +1,25 @@
|
||||
import { Configuration } from 'webpack';
|
||||
import { process as ngccProcess } from '@angular/compiler-cli/ngcc';
|
||||
import * as path from 'path';
|
||||
import { Options } from './framework-preset-angular-cli';
|
||||
|
||||
import { PresetOptions } from './options';
|
||||
|
||||
/**
|
||||
* Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
|
||||
* This uses a dynamic import to load a module which may be ESM.
|
||||
* CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
|
||||
* will currently, unconditionally downlevel dynamic import into a require call.
|
||||
* require calls cannot load ESM code and will result in a runtime error. To workaround
|
||||
* this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
|
||||
* Once TypeScript provides support for keeping the dynamic import this workaround can
|
||||
* be dropped.
|
||||
*
|
||||
* @param modulePath The path of the module to load.
|
||||
* @returns A Promise that resolves to the dynamically imported module.
|
||||
*/
|
||||
function loadEsmModule<T>(modulePath: string): Promise<T> {
|
||||
// eslint-disable-next-line no-new-func
|
||||
return new Function('modulePath', `return import(modulePath);`)(modulePath) as Promise<T>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Run ngcc for converting modules to ivy format before starting storybook
|
||||
@ -9,8 +27,17 @@ import { Options } from './framework-preset-angular-cli';
|
||||
*
|
||||
* Information about Ivy can be found here https://angular.io/guide/ivy
|
||||
*/
|
||||
export const runNgcc = () => {
|
||||
ngccProcess({
|
||||
export const runNgcc = async () => {
|
||||
let ngcc: typeof import('@angular/compiler-cli/ngcc');
|
||||
try {
|
||||
ngcc = await import('@angular/compiler-cli/ngcc');
|
||||
} catch (error) {
|
||||
ngcc = await loadEsmModule<typeof import('@angular/compiler-cli/ngcc')>(
|
||||
'@angular/compiler-cli/ngcc'
|
||||
);
|
||||
}
|
||||
|
||||
ngcc.process({
|
||||
// should be async: true but does not work due to
|
||||
// https://github.com/storybookjs/storybook/pull/11157/files#r615413803
|
||||
async: false,
|
||||
@ -20,7 +47,7 @@ export const runNgcc = () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const webpack = async (webpackConfig: Configuration, options: Options) => {
|
||||
export const webpack = async (webpackConfig: Configuration, options: PresetOptions) => {
|
||||
const angularOptions = await options.presets.apply(
|
||||
'angularOptions',
|
||||
{} as {
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
import { sync } from 'read-pkg-up';
|
||||
import { LoadOptions } from '@storybook/core-common';
|
||||
import { LoadOptions, Options as CoreOptions } from '@storybook/core-common';
|
||||
|
||||
import { BuilderContext } from '@angular-devkit/architect';
|
||||
import { JsonObject } from '@angular-devkit/core';
|
||||
|
||||
export type PresetOptions = CoreOptions & {
|
||||
/* Allow to get the options of a targeted "browser builder" */
|
||||
angularBrowserTarget?: string | null;
|
||||
/* Defined set of options. These will take over priority from angularBrowserTarget options */
|
||||
angularBuilderOptions?: JsonObject | null;
|
||||
/* Angular context from builder */
|
||||
angularBuilderContext?: BuilderContext | null;
|
||||
tsConfig?: string;
|
||||
};
|
||||
|
||||
export default {
|
||||
packageJson: sync({ cwd: __dirname }).packageJson,
|
||||
|
||||
1
app/angular/src/typings.d.ts
vendored
1
app/angular/src/typings.d.ts
vendored
@ -1,4 +1,5 @@
|
||||
declare module 'global';
|
||||
declare module '@storybook/semver';
|
||||
|
||||
// will be provided by the webpack define plugin
|
||||
declare var NODE_ENV: string | undefined;
|
||||
|
||||
4
app/angular/standalone.d.ts
vendored
4
app/angular/standalone.d.ts
vendored
@ -1,4 +1,6 @@
|
||||
import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
|
||||
import { BuilderContext } from '@angular-devkit/architect';
|
||||
import { JsonObject } from '@angular-devkit/core';
|
||||
|
||||
export type StandaloneOptions = Partial<
|
||||
CLIOptions &
|
||||
@ -6,6 +8,8 @@ export type StandaloneOptions = Partial<
|
||||
BuilderOptions & {
|
||||
mode?: 'static' | 'dev';
|
||||
angularBrowserTarget?: string | null;
|
||||
angularBuilderOptions?: JsonObject;
|
||||
angularBuilderContext?: BuilderContext | null;
|
||||
tsConfig?: string;
|
||||
}
|
||||
>;
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
"outDir": "dist",
|
||||
"types": ["webpack-env", "node"],
|
||||
"rootDir": "./src",
|
||||
"resolveJsonModule": true
|
||||
"resolveJsonModule": true,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["src/**/*", "src/**/*.json"]
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
|
||||
"bugs": {
|
||||
@ -43,9 +43,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^2.1.4",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -66,6 +66,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/client-api": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/preview-web": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -71,6 +71,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,11 +46,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -74,6 +74,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1 +1 @@
|
||||
module.exports = require('./dist/cjs/server/framework-preset-babel-preact');
|
||||
module.exports = require('./dist/cjs/server/framework-preset-preact');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -49,14 +49,14 @@
|
||||
"@babel/preset-flow": "^7.12.1",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"babel-plugin-named-asset-import": "^0.3.1",
|
||||
@ -73,7 +73,7 @@
|
||||
"webpack": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.4.0-beta.31",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@types/node": "^14.14.20",
|
||||
"@types/prompts": "^2.0.9"
|
||||
},
|
||||
@ -96,6 +96,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/api": "6.4.0-beta.31",
|
||||
"@storybook/client-api": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/preview-web": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -75,6 +75,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -75,6 +75,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -83,6 +83,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,6 +81,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -50,13 +50,13 @@
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/client-api": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-common": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/preview-web": "6.4.0-beta.31",
|
||||
"@storybook/store": "6.4.0-beta.31",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
"core-js": "^3.8.2",
|
||||
@ -79,6 +79,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "17ef07b50965ad82f3c6a5f7442211bb8f140267",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -16,21 +16,23 @@ describe('addon-docs', () => {
|
||||
});
|
||||
|
||||
skipOn('vue3', () => {
|
||||
it('should provide source snippet', () => {
|
||||
cy.getDocsElement()
|
||||
.find('.docblock-code-toggle')
|
||||
.first()
|
||||
.should('contain.text', 'Show code')
|
||||
// use force click so cypress does not automatically scroll, making the source block visible on this step
|
||||
.click({ force: true });
|
||||
skipOn('html', () => {
|
||||
it('should provide source snippet', () => {
|
||||
cy.getDocsElement()
|
||||
.find('.docblock-code-toggle')
|
||||
.first()
|
||||
.should('contain.text', 'Show code')
|
||||
// use force click so cypress does not automatically scroll, making the source block visible on this step
|
||||
.click({ force: true });
|
||||
|
||||
cy.getDocsElement()
|
||||
.find('pre.prismjs')
|
||||
.first()
|
||||
.should(($div) => {
|
||||
const text = $div.text();
|
||||
expect(text).not.match(/^\(args\) => /);
|
||||
});
|
||||
cy.getDocsElement()
|
||||
.find('pre.prismjs')
|
||||
.first()
|
||||
.should(($div) => {
|
||||
const text = $div.text();
|
||||
expect(text).not.match(/^\(args\) => /);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":"6.4.0-beta.31","info":{"plain":"### Features\n\n* Core: Add feature flag to stop storybook from aliasing emotion ([#16613](https://github.com/storybookjs/storybook/pull/16613))\n\n### Bug Fixes\n\n* Core: Fix `staticDirs` and `-s` conflict check ([#16649](https://github.com/storybookjs/storybook/pull/16649))\n\n### Maintenance\n\n* Build: Add node-gyp for M1 macs ([#16645](https://github.com/storybookjs/storybook/pull/16645))"}}
|
||||
{"version":"6.4.0-rc.1","info":{"plain":"### Features\n\n* Angular: Add getWebpackConfig for angular 12.2.x & 13.x.x ([#16644](https://github.com/storybookjs/storybook/pull/16644))"}}
|
||||
@ -1,4 +1,4 @@
|
||||
import 'jest-preset-angular';
|
||||
import './globalMocks';
|
||||
|
||||
require('babel-plugin-require-context-hook/register')();
|
||||
require('@storybook/babel-plugin-require-context-hook/register')();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -39,20 +39,21 @@
|
||||
"@angular/compiler-cli": "^11.2.14",
|
||||
"@angular/elements": "^11.2.14",
|
||||
"@compodoc/compodoc": "^1.1.14",
|
||||
"@storybook/addon-a11y": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.4.0-beta.31",
|
||||
"@storybook/addon-controls": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/addon-interactions": "6.4.0-beta.31",
|
||||
"@storybook/addon-jest": "6.4.0-beta.31",
|
||||
"@storybook/addon-links": "6.4.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.4.0-beta.31",
|
||||
"@storybook/addon-storysource": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/angular": "6.4.0-beta.31",
|
||||
"@storybook/addon-a11y": "6.4.0-rc.1",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.1",
|
||||
"@storybook/addon-controls": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-interactions": "6.4.0-rc.1",
|
||||
"@storybook/addon-jest": "6.4.0-rc.1",
|
||||
"@storybook/addon-links": "6.4.0-rc.1",
|
||||
"@storybook/addon-storyshots": "6.4.0-rc.1",
|
||||
"@storybook/addon-storysource": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/angular": "6.4.0-rc.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/jest": "^0.0.2",
|
||||
"@storybook/source-loader": "6.4.0-beta.31",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"@storybook/testing-library": "^0.0.3",
|
||||
"@types/core-js": "^2.5.4",
|
||||
"@types/jest": "^26.0.16",
|
||||
@ -60,7 +61,6 @@
|
||||
"@types/sass": "^1",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"@webcomponents/custom-elements": "^1.4.3",
|
||||
"babel-plugin-require-context-hook": "^1.0.0",
|
||||
"global": "^4.4.0",
|
||||
"jasmine-core": "~3.6.0",
|
||||
"jasmine-spec-reporter": "~5.0.2",
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
/* eslint-disable storybook/use-storybook-testing-library */
|
||||
// @TODO: use addon-interactions and remove the rule disable above
|
||||
import { Story, Meta } from '@storybook/angular';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { within, userEvent } from '@storybook/testing-library';
|
||||
import { within } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
import { CounterComponent } from './counter/counter.component';
|
||||
|
||||
|
||||
@ -19,8 +19,6 @@ export const Simple: Story = () => ({
|
||||
},
|
||||
});
|
||||
|
||||
Simple.storyName = 'Simple';
|
||||
|
||||
export const WithArgsStory: Story = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
@ -20,5 +20,3 @@ export default {
|
||||
} as Meta;
|
||||
|
||||
export const WithPreserveWhitespaces: Story = (_args) => ({});
|
||||
|
||||
WithPreserveWhitespaces.storyName = 'With Preserve Whitespaces';
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* eslint-disable storybook/await-interactions */
|
||||
/* eslint-disable storybook/use-storybook-testing-library */
|
||||
// @TODO: use addon-interactions and remove the rule disable above
|
||||
import { screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { InputComponent } from './sb-input.component';
|
||||
@ -26,7 +29,7 @@ export const WithTemplate = {
|
||||
template: '<h1>Heading</h1><sb-input></sb-input>',
|
||||
}),
|
||||
play: async () => {
|
||||
const input = await screen.getByAltText('sb-input');
|
||||
await userEvent.type(input, `Typing from CSF3`);
|
||||
const input = screen.getByAltText('sb-input');
|
||||
userEvent.type(input, `Typing from CSF3`);
|
||||
},
|
||||
};
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
title: 'Welcome/ To Angular',
|
||||
} as Meta;
|
||||
|
||||
export const toAngular: Story = () => ({
|
||||
export const ToAngular: Story = () => ({
|
||||
component: AppComponent,
|
||||
props: {
|
||||
showApp: linkTo('Button'),
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
title: 'Welcome/ To Storybook',
|
||||
} as Meta;
|
||||
|
||||
export const toStorybook: Story = () => ({
|
||||
export const ToStorybook: Story = () => ({
|
||||
component: Welcome,
|
||||
props: {
|
||||
showApp: linkTo('Button'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -11,7 +11,7 @@
|
||||
"test": "react-scripts test --env=jsdom"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "6.4.0-beta.31",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.14.0",
|
||||
@ -21,19 +21,19 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@storybook/addon-a11y": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/addon-a11y": "6.4.0-rc.1",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-jest": "6.4.0-beta.31",
|
||||
"@storybook/addon-links": "6.4.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/builder-webpack4": "6.4.0-beta.31",
|
||||
"@storybook/addon-jest": "6.4.0-rc.1",
|
||||
"@storybook/addon-links": "6.4.0-rc.1",
|
||||
"@storybook/addon-storyshots": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/builder-webpack4": "6.4.0-rc.1",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
// FIXME: @igor-dv
|
||||
|
||||
// import React from 'react';
|
||||
// import { storiesOf } from '@storybook/react';
|
||||
// import { ReactComponent as Logo } from '../logo.svg';
|
||||
//
|
||||
// storiesOf('CRA', module).add('Svgr', () => <Logo />);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-react15",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -19,14 +19,14 @@
|
||||
"react-scripts": "3.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-links": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/builder-webpack4": "6.4.0-beta.31",
|
||||
"@storybook/addon-links": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/builder-webpack4": "6.4.0-rc.1",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"babel-core": "6",
|
||||
"babel-runtime": "6",
|
||||
"webpack": "4"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-essentials",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,12 +34,12 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "6.4.0-beta.31",
|
||||
"@storybook/addon-essentials": "6.4.0-rc.1",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/builder-webpack4": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/builder-webpack4": "6.4.0-rc.1",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -7,6 +7,6 @@ export default {
|
||||
component: Welcome,
|
||||
};
|
||||
|
||||
export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
|
||||
export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
|
||||
|
||||
toStorybook.storyName = 'to Storybook';
|
||||
ToStorybook.storyName = 'to Storybook';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-kitchen-sink",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,15 +34,15 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/addon-a11y": "6.4.0-rc.1",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-links": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/builder-webpack4": "6.4.0-beta.31",
|
||||
"@storybook/addon-links": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/builder-webpack4": "6.4.0-rc.1",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ember-example",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "ember build --output-path ember-output",
|
||||
@ -17,18 +17,18 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@ember/optional-features": "^2.0.0",
|
||||
"@storybook/addon-a11y": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.4.0-beta.31",
|
||||
"@storybook/addon-controls": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/addon-links": "6.4.0-beta.31",
|
||||
"@storybook/addon-storysource": "6.4.0-beta.31",
|
||||
"@storybook/addon-viewport": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/ember": "6.4.0-beta.31",
|
||||
"@storybook/addon-a11y": "6.4.0-rc.1",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.1",
|
||||
"@storybook/addon-controls": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-links": "6.4.0-rc.1",
|
||||
"@storybook/addon-storysource": "6.4.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/ember": "6.4.0-rc.1",
|
||||
"@storybook/ember-cli-storybook": "^0.2.1",
|
||||
"@storybook/source-loader": "6.4.0-beta.31",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
@ -4,7 +4,7 @@ export default {
|
||||
title: 'EmberOptions/Polyfills',
|
||||
};
|
||||
|
||||
export const namedBlockExample = () => {
|
||||
export const NamedBlockExample = () => {
|
||||
return {
|
||||
template: hbs`
|
||||
<NamedBlock
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html-kitchen-sink",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -13,23 +13,23 @@
|
||||
"storybook": "start-storybook -p 9006 --no-manager-cache"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.4.0-beta.31",
|
||||
"@storybook/addon-controls": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/addon-jest": "6.4.0-beta.31",
|
||||
"@storybook/addon-links": "6.4.0-beta.31",
|
||||
"@storybook/addon-a11y": "6.4.0-rc.1",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.1",
|
||||
"@storybook/addon-controls": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-jest": "6.4.0-rc.1",
|
||||
"@storybook/addon-links": "6.4.0-rc.1",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-storyshots": "6.4.0-beta.31",
|
||||
"@storybook/addon-storysource": "6.4.0-beta.31",
|
||||
"@storybook/addon-viewport": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/client-api": "6.4.0-beta.31",
|
||||
"@storybook/core": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/html": "6.4.0-beta.31",
|
||||
"@storybook/source-loader": "6.4.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.4.0-rc.1",
|
||||
"@storybook/addon-storysource": "6.4.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/html": "6.4.0-rc.1",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"format-json": "^1.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "6.4.0-beta.31",
|
||||
"version": "6.4.0-rc.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -14,31 +14,31 @@
|
||||
"devDependencies": {
|
||||
"@packtracker/webpack-plugin": "^2.3.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@storybook/addon-a11y": "6.4.0-beta.31",
|
||||
"@storybook/addon-actions": "6.4.0-beta.31",
|
||||
"@storybook/addon-backgrounds": "6.4.0-beta.31",
|
||||
"@storybook/addon-controls": "6.4.0-beta.31",
|
||||
"@storybook/addon-docs": "6.4.0-beta.31",
|
||||
"@storybook/addon-interactions": "6.4.0-beta.31",
|
||||
"@storybook/addon-jest": "6.4.0-beta.31",
|
||||
"@storybook/addon-links": "6.4.0-beta.31",
|
||||
"@storybook/addon-storyshots": "6.4.0-beta.31",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.4.0-beta.31",
|
||||
"@storybook/addon-storysource": "6.4.0-beta.31",
|
||||
"@storybook/addon-toolbars": "6.4.0-beta.31",
|
||||
"@storybook/addon-viewport": "6.4.0-beta.31",
|
||||
"@storybook/addons": "6.4.0-beta.31",
|
||||
"@storybook/cli": "6.4.0-beta.31",
|
||||
"@storybook/components": "6.4.0-beta.31",
|
||||
"@storybook/core-events": "6.4.0-beta.31",
|
||||
"@storybook/addon-a11y": "6.4.0-rc.1",
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.1",
|
||||
"@storybook/addon-controls": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-interactions": "6.4.0-rc.1",
|
||||
"@storybook/addon-jest": "6.4.0-rc.1",
|
||||
"@storybook/addon-links": "6.4.0-rc.1",
|
||||
"@storybook/addon-storyshots": "6.4.0-rc.1",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.4.0-rc.1",
|
||||
"@storybook/addon-storysource": "6.4.0-rc.1",
|
||||
"@storybook/addon-toolbars": "6.4.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/cli": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/design-system": "^5.4.7",
|
||||
"@storybook/jest": "^0.0.2",
|
||||
"@storybook/node-logger": "6.4.0-beta.31",
|
||||
"@storybook/react": "6.4.0-beta.31",
|
||||
"@storybook/router": "6.4.0-beta.31",
|
||||
"@storybook/source-loader": "6.4.0-beta.31",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/router": "6.4.0-rc.1",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"@storybook/testing-library": "^0.0.3",
|
||||
"@storybook/theming": "6.4.0-beta.31",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/user-event": "^13.1.9",
|
||||
"chromatic": "^6.0.2",
|
||||
|
||||
@ -22,9 +22,9 @@ export const InvalidContrast = () => (
|
||||
);
|
||||
InvalidContrast.storyName = 'Invalid contrast';
|
||||
|
||||
export const delayedRender = () => (
|
||||
export const DelayedRenderStory = () => (
|
||||
<DelayedRender>
|
||||
<BaseButton label="This button has a delayed render of 1s" />
|
||||
</DelayedRender>
|
||||
);
|
||||
delayedRender.storyName = 'delayed render';
|
||||
DelayedRenderStory.storyName = 'delayed render';
|
||||
|
||||
@ -17,7 +17,6 @@ export const WithoutLabel = () => (
|
||||
<Form.Input />
|
||||
</Form.Field>
|
||||
);
|
||||
WithoutLabel.storyName = 'Without Label';
|
||||
|
||||
export const WithLabel = () => (
|
||||
<Form.Field label={text}>
|
||||
|
||||
@ -77,8 +77,6 @@ export const CircularPayload = () => {
|
||||
return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
|
||||
};
|
||||
|
||||
CircularPayload.storyName = 'Circular Payload';
|
||||
|
||||
export const ReservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
|
||||
|
||||
ReservedKeywordAsName.storyName = 'Reserved keyword as name';
|
||||
@ -186,7 +184,6 @@ export const LimitActionOutput = () => {
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
LimitActionOutput.storyName = 'Limit Action Output';
|
||||
|
||||
export const SkippedViaDisableTrue = () => (
|
||||
<Button onClick={action('hello-world')}>Hello World</Button>
|
||||
|
||||
@ -23,11 +23,11 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const defDocsPage = () => <div>Default docs page</div>;
|
||||
export const DefDocsPage = () => <div>Default docs page</div>;
|
||||
|
||||
export const smallDocsPage = () => <div>Just primary story, </div>;
|
||||
export const SmallDocsPage = () => <div>Just primary story, </div>;
|
||||
|
||||
smallDocsPage.parameters = {
|
||||
SmallDocsPage.parameters = {
|
||||
docs: {
|
||||
page: () => (
|
||||
<>
|
||||
@ -38,9 +38,9 @@ smallDocsPage.parameters = {
|
||||
},
|
||||
};
|
||||
|
||||
export const checkBoxProps = () => <div>Primary props displayed with a check box </div>;
|
||||
export const CheckBoxProps = () => <div>Primary props displayed with a check box </div>;
|
||||
|
||||
checkBoxProps.parameters = {
|
||||
CheckBoxProps.parameters = {
|
||||
docs: {
|
||||
page: () => {
|
||||
const [showProps, setShowProps] = React.useState(false);
|
||||
@ -61,9 +61,9 @@ checkBoxProps.parameters = {
|
||||
},
|
||||
};
|
||||
|
||||
export const customLabels = () => <div>Display custom title, Subtitle, Description</div>;
|
||||
export const CustomLabels = () => <div>Display custom title, Subtitle, Description</div>;
|
||||
|
||||
customLabels.parameters = {
|
||||
CustomLabels.parameters = {
|
||||
docs: {
|
||||
page: () => (
|
||||
<>
|
||||
@ -78,15 +78,15 @@ customLabels.parameters = {
|
||||
},
|
||||
};
|
||||
|
||||
export const customStoriesFilter = () => <div>Displays ALL stories (not excluding first one)</div>;
|
||||
export const CustomStoriesFilter = () => <div>Displays ALL stories (not excluding first one)</div>;
|
||||
|
||||
customStoriesFilter.parameters = {
|
||||
CustomStoriesFilter.parameters = {
|
||||
docs: {
|
||||
page: () => <Stories includePrimary />,
|
||||
},
|
||||
};
|
||||
|
||||
export const multipleComponents = () => (
|
||||
export const MultipleComponents = () => (
|
||||
<ButtonGroup>
|
||||
<DocgenButton label="one" />
|
||||
<DocgenButton label="two" />
|
||||
@ -94,9 +94,9 @@ export const multipleComponents = () => (
|
||||
</ButtonGroup>
|
||||
);
|
||||
|
||||
multipleComponents.storyName = 'Many Components';
|
||||
MultipleComponents.storyName = 'Many Components';
|
||||
|
||||
multipleComponents.parameters = {
|
||||
MultipleComponents.parameters = {
|
||||
component: ButtonGroup,
|
||||
subcomponents: {
|
||||
SubGroup,
|
||||
@ -116,14 +116,14 @@ multipleComponents.parameters = {
|
||||
},
|
||||
};
|
||||
|
||||
export const componentsProps = () => <div>Display multiple prop tables in tabs</div>;
|
||||
export const ComponentsProps = () => <div>Display multiple prop tables in tabs</div>;
|
||||
|
||||
componentsProps.subcomponents = {
|
||||
ComponentsProps.subcomponents = {
|
||||
'Docgen Button': DocgenButton,
|
||||
'Base Button': BaseButton,
|
||||
};
|
||||
|
||||
componentsProps.parameters = {
|
||||
ComponentsProps.parameters = {
|
||||
docs: {
|
||||
page: () => (
|
||||
<>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable storybook/default-exports */
|
||||
import React from 'react';
|
||||
import { Button } from '@storybook/react/demo';
|
||||
|
||||
|
||||
@ -6,4 +6,4 @@ export default {
|
||||
title: 'Addons/Docs/dynamic title',
|
||||
};
|
||||
|
||||
export const basic = () => 'Story with title that is evaluated in runtime';
|
||||
export const Basic = () => 'Story with title that is evaluated in runtime';
|
||||
|
||||
@ -10,5 +10,5 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const displaysCorrectly = () => <MemoButton label="Hello memo World" />;
|
||||
displaysCorrectly.storyName = 'Displays components with memo correctly';
|
||||
export const DisplaysCorrectly = () => <MemoButton label="Hello memo World" />;
|
||||
DisplaysCorrectly.storyName = 'Displays components with memo correctly';
|
||||
|
||||
@ -9,17 +9,17 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const code = () => 'StoryType "CODE" story which has source transformed';
|
||||
code.parameters = {
|
||||
export const Code = () => 'StoryType "CODE" story which has source transformed';
|
||||
Code.parameters = {
|
||||
docs: { source: { type: 'code' } },
|
||||
};
|
||||
|
||||
export const dynamic = () => 'StoryType "DYNAMIC" story which has source transformed';
|
||||
dynamic.parameters = {
|
||||
export const Dynamic = () => 'StoryType "DYNAMIC" story which has source transformed';
|
||||
Dynamic.parameters = {
|
||||
docs: { source: { type: 'dynamic' } },
|
||||
};
|
||||
|
||||
export const auto = () => 'StoryType "AUTO" story which has source transformed';
|
||||
dynamic.parameters = {
|
||||
export const Auto = () => 'StoryType "AUTO" story which has source transformed';
|
||||
Dynamic.parameters = {
|
||||
docs: { source: { type: 'auto' } },
|
||||
};
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
/* eslint-disable storybook/use-storybook-expect */
|
||||
/* eslint-disable storybook/await-interactions */
|
||||
import React, { useState } from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
const Block = styled.div({
|
||||
const BlockDiv = styled.div({
|
||||
display: 'inline-block',
|
||||
height: 400,
|
||||
width: 400,
|
||||
@ -12,18 +14,22 @@ export default {
|
||||
title: 'Addons/Storyshots',
|
||||
};
|
||||
|
||||
export const block = () => {
|
||||
export const Block = () => {
|
||||
const [hover, setHover] = useState(false);
|
||||
|
||||
return (
|
||||
<Block data-test-block onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
|
||||
<BlockDiv
|
||||
data-test-block
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
>
|
||||
{hover && 'I am hovered'}
|
||||
</Block>
|
||||
</BlockDiv>
|
||||
);
|
||||
};
|
||||
block.storyName = 'Block story';
|
||||
Block.storyName = 'Block story';
|
||||
|
||||
block.parameters = {
|
||||
Block.parameters = {
|
||||
async puppeteerTest(page) {
|
||||
const element = await page.$('[data-test-block]');
|
||||
await element.hover();
|
||||
|
||||
@ -17,15 +17,15 @@ Exception.parameters = {
|
||||
chromatic: { disable: true },
|
||||
};
|
||||
|
||||
export const badComponent = () => (
|
||||
export const BadComponentStory = () => (
|
||||
<Fragment>
|
||||
<div>Hello world</div>
|
||||
<BadComponent />
|
||||
</Fragment>
|
||||
);
|
||||
badComponent.storyName = 'story errors - invariant error';
|
||||
BadComponentStory.storyName = 'story errors - invariant error';
|
||||
|
||||
badComponent.parameters = {
|
||||
BadComponentStory.parameters = {
|
||||
storyshots: { disable: true },
|
||||
chromatic: { disable: true },
|
||||
};
|
||||
|
||||
@ -7,5 +7,5 @@ export default {
|
||||
|
||||
const Template = () => 'Story';
|
||||
|
||||
export const prefixAndName = Template.bind({});
|
||||
export const prefix = Template.bind({});
|
||||
export const PrefixAndName = Template.bind({});
|
||||
export const Prefix = Template.bind({});
|
||||
|
||||
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