diff --git a/.circleci/config.yml b/.circleci/config.yml index c5222aac5d6a..4407913d14a5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -250,7 +250,7 @@ jobs: cd .. npx create-react-app cra-bench cd cra-bench - npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern" + npx @storybook/bench@latest 'npx sb init' --label cra --extra-flags "--modern" e2e-tests-pnp: executor: class: medium diff --git a/.eslintrc.js b/.eslintrc.js index 3dc077d3aad4..b38e16c9be69 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,6 +3,10 @@ module.exports = { extends: ['@storybook/eslint-config-storybook', 'plugin:storybook/recommended'], rules: { '@typescript-eslint/ban-ts-comment': 'warn', + 'jest/no-standalone-expect': [ + 'error', + { additionalTestBlockFunctions: ['it.skipWindows', 'it.onWindows'] }, + ], }, overrides: [ { diff --git a/.github/workflows/handle-release-branches.yml b/.github/workflows/handle-release-branches.yml index 95735ca4fb02..069b3390d2f6 100644 --- a/.github/workflows/handle-release-branches.yml +++ b/.github/workflows/handle-release-branches.yml @@ -40,7 +40,7 @@ jobs: - id: next-version uses: notiz-dev/github-action-json-property@release with: - path: ${{ github.workspace }}/next/docs/versions/next.json + path: ${{ github.workspace }}/next/package.json prop_path: version - run: | diff --git a/.github/workflows/linear-export.yml b/.github/workflows/linear-export.yml index f43331133aa0..1882d43d171b 100644 --- a/.github/workflows/linear-export.yml +++ b/.github/workflows/linear-export.yml @@ -12,12 +12,16 @@ jobs: 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 }} + # - uses: hmarr/debug-action@v2 + - name: Linear action + uses: shilman/linear-action@v1 + with: + ghIssueNumber: ${{ github.event.number || github.event.issue.number }} + ghRepoOwner: ${{ github.event.repository.owner.login }} + ghRepoName: ${{ github.event.repository.name }} + ghToken: ${{ secrets.LINEAR_GH_TOKEN }} + linearIssuePrefix: SB + linearLabel: Storybook + linearPRLabel: PR + linearTeam: CH + linearApiKey: ${{ secrets.LINEAR_API_KEY }} diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml index 43ea60fc73dd..822dc4569629 100644 --- a/.github/workflows/tests-unit.yml +++ b/.github/workflows/tests-unit.yml @@ -1,16 +1,33 @@ name: Unit tests -on: [push] +on: + push: + branches: + - next + pull_request: + types: [opened, reopened, labeled, synchronize] jobs: build: - name: Core Unit Tests - runs-on: ubuntu-latest + name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }} + if: ${{ github.event.label.name == 'ci:matrix' || github.event.type == 'push' }} + strategy: + fail-fast: false + matrix: + os: [ubuntu-latest] + node_version: [12, 14, 16] + include: + - os: macos-latest + node_version: 16 + - os: windows-latest + node_version: 16 + runs-on: ${{ matrix.os }} steps: - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - name: Set node version to ${{ matrix.node_version }} + uses: actions/setup-node@v2 with: - node-version: "12.x" + node-version: ${{ matrix.node_version }} cache: yarn - name: install, bootstrap run: | diff --git a/.gitignore b/.gitignore index b60280d358b5..423ff6ec3edc 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ dist .tern-port *.DS_Store .cache +.parcel-cache coverage/ *.lerna_backup build @@ -41,4 +42,4 @@ examples/angular-cli/addon-jest.testresults.json !/**/.yarn/plugins !/**/.yarn/sdks !/**/.yarn/versions -/**/.pnp.* \ No newline at end of file +/**/.pnp.* diff --git a/CHANGELOG.md b/CHANGELOG.md index 91a6118c0999..5697410d4d54 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,236 @@ +## 6.5.0-alpha.5 (December 23, 2021) + +### Dependency Upgrades + +- Update react-refresh@0.11.0 & react-refresh-webpack-plugin@0.5.3 same as cra5 ([#17056](https://github.com/storybookjs/storybook/pull/17056)) + +## 6.5.0-alpha.4 (December 18, 2021) + +### Bug Fixes + +- Angular: Fix for renamed method in angular 13.1 ([#17032](https://github.com/storybookjs/storybook/pull/17032)) +- Source-loader: Fix node.declaration edge case ([#17027](https://github.com/storybookjs/storybook/pull/17027)) +- Core: Fix debug output on webpack failures ([#16988](https://github.com/storybookjs/storybook/pull/16988)) + +### Maintenance + +- Build: Run unit tests on more node versions, mac, and windows ([#16744](https://github.com/storybookjs/storybook/pull/16744)) + +### Dependency Upgrades + +- Avoid referencing internal Emotion packages in built types ([#16905](https://github.com/storybookjs/storybook/pull/16905)) + +## 6.5.0-alpha.3 (December 9, 2021) + +### Bug Fixes + +- Core: Support custom PREVIEW URL for block story iframe ([#16773](https://github.com/storybookjs/storybook/pull/16773)) + +## 6.5.0-alpha.2 (December 9, 2021) + +### Bug Fixes + +- UI: Only push the view back to Story if the viewMode is settings ([#16943](https://github.com/storybookjs/storybook/pull/16943)) +- Core: Ensure we have a full story index before caching ([#16947](https://github.com/storybookjs/storybook/pull/16947)) +- Angular: Fix support for non-roman alphabets in story titles ([#16931](https://github.com/storybookjs/storybook/pull/16931)) +- Core: Be explicit about `viewMode` to fix Vue issue ([#16919](https://github.com/storybookjs/storybook/pull/16919)) +- Core: Remove unused and occluded types ([#16917](https://github.com/storybookjs/storybook/pull/16917)) +- CLI: Fix `sb repro` clobbering .vuerc ([#16897](https://github.com/storybookjs/storybook/pull/16897)) +- Core: Fix auto-title in webpack5 ([#16913](https://github.com/storybookjs/storybook/pull/16913)) +- Angular: Fix incorrect log ([#16885](https://github.com/storybookjs/storybook/pull/16885)) +- Angular: Fix tsConfig paths not resolving for Angular >=12.2 ([#16882](https://github.com/storybookjs/storybook/pull/16882)) +- Core: Add feature flag to disable legacy hierarchy separator warning ([#16915](https://github.com/storybookjs/storybook/pull/16915)) + +### Dependency Upgrades + +- Move @types/node to dependencies and accept v16 types ([#16904](https://github.com/storybookjs/storybook/pull/16904)) +- Bump lodash to 4.17.21 ([#16883](https://github.com/storybookjs/storybook/pull/16883)) + +## 6.4.9 (December 9, 2021) + +### Bug Fixes + +- Core: Ensure we have a full story index before caching ([#16947](https://github.com/storybookjs/storybook/pull/16947)) +- Angular: Fix support for non-roman alphabets in story titles ([#16931](https://github.com/storybookjs/storybook/pull/16931)) +- Core: Be explicit about `viewMode` to fix Vue issue ([#16919](https://github.com/storybookjs/storybook/pull/16919)) +- Core: Remove unused and occluded types ([#16917](https://github.com/storybookjs/storybook/pull/16917)) + +## 6.4.8 (December 6, 2021) + +### Bug Fixes + +- Core: Fix auto-title in webpack5 ([#16913](https://github.com/storybookjs/storybook/pull/16913)) +- CLI: Fix `sb repro` clobbering .vuerc ([#16897](https://github.com/storybookjs/storybook/pull/16897)) + +### Maintenance + +- Core: Add feature flag to disable legacy hierarchy separator warning ([#16915](https://github.com/storybookjs/storybook/pull/16915)) + +## 6.4.7 (December 3, 2021) + +### Bug Fixes + +- Angular: Fix incorrect log ([#16885](https://github.com/storybookjs/storybook/pull/16885)) + +## 6.4.6 (December 3, 2021) + +Npm publish failed. + +## 6.4.5 (December 3, 2021) + +### Bug Fixes + +- Angular: Fix tsConfig paths not resolving for Angular >=12.2 ([#16882](https://github.com/storybookjs/storybook/pull/16882)) +- Addon-docs: Fix transclusion crash on webpack rules without test field ([#16873](https://github.com/storybookjs/storybook/pull/16873)) + +### Dependency Upgrades + +- Bump lodash to 4.17.21 ([#16883](https://github.com/storybookjs/storybook/pull/16883)) + +## 6.5.0-alpha.1 (December 3, 2021) + +### Bug Fixes + +- CLI: Fix open storybook in default browser ([#16844](https://github.com/storybookjs/storybook/pull/16844)) +- Addon-docs: Fix transclusion crash on webpack rules without test field ([#16873](https://github.com/storybookjs/storybook/pull/16873)) + +### Maintenance + +- CLI: Improve `sb repro` directory prompt ([#16854](https://github.com/storybookjs/storybook/pull/16854)) + +## 6.4.4 (December 2, 2021) + +### Bug Fixes + +- CLI: Fix mainjsFramework automigrate ([#16866](https://github.com/storybookjs/storybook/pull/16866)) + +## 6.4.3 (December 1, 2021) + +### Bug Fixes + +- Don't render with `modernInline` if `inlineStories` is `false` ([#16853](https://github.com/storybookjs/storybook/pull/16853)) +- Preview: Don't hide the story while preparing ([#16850](https://github.com/storybookjs/storybook/pull/16850)) + +## 6.4.2 (December 1, 2021) + +### Bug Fixes + +- UI: Ensure all classes+animations for our loaders are prefixed ([#16815](https://github.com/storybookjs/storybook/pull/16815)) +- Angular: Add back-compat method to find options (styles) in angular.json ([#16832](https://github.com/storybookjs/storybook/pull/16832)) + +## 6.4.1 (November 30, 2021) + +### Bug Fixes + +- Core: Fix packageName check in build-dev ([#16823](https://github.com/storybookjs/storybook/pull/16823)) +- CSFFile: Fix function exports ([#16829](https://github.com/storybookjs/storybook/pull/16829)) + +### Maintenance + +- Fix `handle-release-branches` workflow ([#16801](https://github.com/storybookjs/storybook/pull/16801)) + +## 6.4.0 (November 27, 2021) + +Storybook 6.4 is here!! 🎉🎉🎉 + +SB6.4 adds interaction testing and performance re-architecture ahead of a huge 7.0 release. + +- ▶️ **Interactive stories** to simulate user behavior and tools to debug it +- ⚡️ **On-demand architecture** for smaller builds and faster load times +- ⛸ **Automigrate + versioned documentation** for easier upgrades +- 📋 **Linter** to enforce Storybook best practices +- 💯 **Hundreds more fixes** and quality of life improvements + +More info in the Github issue [Storybook 6.4 Release 🛠](https://github.com/storybookjs/storybook/issues/15355). Release announcement coming soon!!! + +## 6.4.0-rc.11 (November 26, 2021) + +### Bug Fixes + +- Core: Fix breaking change in process/browser ([#16795](https://github.com/storybookjs/storybook/pull/16795)) + +## 6.4.0-rc.10 (November 26, 2021) + +### Bug Fixes + +- Core: Allow args/argTypes/component to be set via parameters for storiesOf back-compat ([#16791](https://github.com/storybookjs/storybook/pull/16791)) +- Core: Sort the results of `globby` when constructing Story Index ([#16788](https://github.com/storybookjs/storybook/pull/16788)) +- Core: Don't log a console error when the story is missing ([#16783](https://github.com/storybookjs/storybook/pull/16783)) +- Addon-docs: Wait for the story component to render before emitting ([#16792](https://github.com/storybookjs/storybook/pull/16792)) +- Core: Ensure that `context.args` is always set ([#16790](https://github.com/storybookjs/storybook/pull/16790)) + +## 6.4.0-rc.9 (November 26, 2021) + +### Features + +- Angular: Add styles and stylePreprocessorOptions to angular builder ([#16675](https://github.com/storybookjs/storybook/pull/16675)) + +### Bug Fixes + +- Interactions: Unlock controls when play function is finished ([#16784](https://github.com/storybookjs/storybook/pull/16784)) + +### Maintenance + +- Misc: Cleanup typescript webpack types ([#16780](https://github.com/storybookjs/storybook/pull/16780)) + +## 6.4.0-rc.8 (November 25, 2021) + +### Bug Fixes + +- Interactions: Fix duplicate rows in waitFor ([#16465](https://github.com/storybookjs/storybook/pull/16465)) +- Core: Fix channel options so that they are merged in correct order ([#16764](https://github.com/storybookjs/storybook/pull/16764)) + +### Dependency Upgrades + +- Add missing peer dependencies ([#16551](https://github.com/storybookjs/storybook/pull/16551)) + +## 6.4.0-rc.7 (November 24, 2021) + +### Bug Fixes + +- Core: Add `./` to start of hidden file & folder paths ([#16723](https://github.com/storybookjs/storybook/pull/16723)) + +### Dependency Upgrades + +- Update peer dependencies for angular 13 support ([#16758](https://github.com/storybookjs/storybook/pull/16758)) + +## 6.4.0-rc.6 (November 22, 2021) + +### Bug Fixes + +- CSF: Fix component id handling ([#16746](https://github.com/storybookjs/storybook/pull/16746)) +- Addon-docs: Improved loading state ([#16709](https://github.com/storybookjs/storybook/pull/16709)) + +### Maintenance + +- WebComponents: Update Lit peerDep to use Lit 2 stable version ([#16670](https://github.com/storybookjs/storybook/pull/16670)) + +### Dependency Upgrades + +- Upgrade react-router to 6.0.0 ([#16742](https://github.com/storybookjs/storybook/pull/16742)) + +## 6.4.0-rc.5 (November 19, 2021) + +### Bug Fixes + +- Core: Restore `stringifyEnvs` utility used by Vite builder ([#16731](https://github.com/storybookjs/storybook/pull/16731)) + +## 6.4.0-rc.4 (November 19, 2021) + +### Bug Fixes + +- Core: Fix `process.env` stringification ([#16725](https://github.com/storybookjs/storybook/pull/16725)) +- Core: Fix build-storybook sort bug in v6-mode ([#16724](https://github.com/storybookjs/storybook/pull/16724)) +- Addon-docs/Angular: fix extractEnumValues undefined error ([#16524](https://github.com/storybookjs/storybook/pull/16524)) + +### Maintenance + +- Angular: update addon interactions example ([#16698](https://github.com/storybookjs/storybook/pull/16698)) + +### Dependency Upgrades + +- Upgrade from node-sass to sass in examples/angular-cli ([#16663](https://github.com/storybookjs/storybook/pull/16663)) + ## 6.4.0-rc.3 (November 16, 2021) ### Bug Fixes diff --git a/MIGRATION.md b/MIGRATION.md index e5cb03fb344a..039111dd1c7e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 6.3.x to 6.4.0](#from-version-63x-to-640) + - [Automigrate](#automigrate) - [CRA5 upgrade](#cra5-upgrade) - [CSF3 enabled](#csf3-enabled) - [Optional titles](#optional-titles) @@ -10,13 +11,16 @@ - [Behavioral differences](#behavioral-differences) - [Main.js framework field](#mainjs-framework-field) - [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) + - [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) + - [6.4 Angular changes](#64-angular-changes) + - [SB Angular builder](#sb-angular-builder) + - [Angular13](#angular13) + - [Angular component parameter removed](#angular-component-parameter-removed) - [6.4 deprecations](#64-deprecations) - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag) - [From version 6.2.x to 6.3.0](#from-version-62x-to-630) @@ -186,10 +190,25 @@ ## From version 6.3.x to 6.4.0 +### Automigrate + +Automigrate is a new 6.4 feature that provides zero-config upgrades to your dependencies, configurations, and story files. + +Each automigration analyzes your project, and if it's is applicable, propose a change alongside relevant documentation. If you accept the changes, the automigration will update your files accordingly. + +For example, if you're in a webpack5 project but still use Storybook's default webpack4 builder, the automigration can detect this and propose an upgrade. If you opt-in, it will install the webpack5 builder and update your `main.js` configuration automatically. + +You can run the existing suite of automigrations to see which ones apply to your project. This won't update any files unless you accept the changes: + +``` +npx sb@next automigrate +``` + +The automigration suite also runs when you create a new project (`sb init`) or when you update storybook (`sb upgrade`). + ### CRA5 upgrade -Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to -upgrade the configuration. You can do this automatically by running: +Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to upgrade the configuration. You can do this automatically by running: ``` npx sb@next automigrate @@ -198,9 +217,9 @@ npx sb@next automigrate Or you can do the following steps manually to force Storybook to use webpack 5 for building your project: ```shell -yarn add @storybook/builder-webpack5@next @storybook/manager-webpack5 --dev +yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev # Or -npm install @storybook/builder-webpack5@next @storybook/manager-webpack5 --save-dev +npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev ``` Then edit your `.storybook/main.js` config: @@ -251,7 +270,7 @@ export default { title: 'Components/Atoms/Button', }; -// ✅ undefined 6.3 KO / 7.0 OK +// ✅ undefined 6.3 OK / 7.0 OK export default { component: Button, }; @@ -391,9 +410,11 @@ The Story Store in v7 mode is async, so synchronous story loading APIs no longer 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'); -} +module.exports = { + features: { + storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'), + }, +}; ``` There are some caveats with the above approach: @@ -408,9 +429,11 @@ Now that the web is moving to Emotion 11 for styling, popular libraries like MUI 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, -} +module.exports = { + features: { + emotionAlias: false, + }, +}; ``` Setting this should unlock theming for emotion11-based libraries in Storybook 6.4. @@ -450,7 +473,53 @@ This will create a `.babelrc.json` file. This file includes a bunch of babel plu In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders do not re-run. Instead the previous value of the loader is passed to the story, irrespective of the new args. -### Angular component parameter removed +### 6.4 Angular changes + +#### SB Angular builder + +Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. The full builder documentation will be shown in the [main documentation page](https://storybook.js.org/docs/angular) soon, but for now you can check out an example here: + +- `start-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78 +- `build-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86 + +#### Angular13 + +Angular 13 introduces breaking changes that require updating your Storybook configuration if you are migrating from a previous version of Angular. + +Most notably, the documented way of including global styles is no longer supported by Angular13. Previously you could write the following in your `.storybook/preview.js` config: + +``` +import '!style-loader!css-loader!sass-loader!./styles.scss'; +``` + +If you use Angular 13 and above, you should use the builder configuration instead: + +```json + "my-default-project": { + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "styles": ["src/styles.css", "src/styles.scss"], + } + } + }, + }, +``` + +If you need storybook-specific styles separate from your app, you can configure the styles in the [SB Angular builder](#sb-angular-builder), which completely overrides your project's styles: + +```json + "storybook": { + "builder": "@storybook/angular:start-storybook", + "options": { + "browserTarget": "my-default-project:build", + "styles": [".storybook/custom-styles.scss"], + }, + } +``` + +#### Angular component parameter removed In SB6.3 and earlier, the `default.component` metadata was implemented as a parameter, meaning that stories could set `parameters.component` to override the default export. This was an internal implementation that was never documented, but it was mistakenly used in some Angular examples. diff --git a/README.md b/README.md index 4c03ebc91655..8165065d78d3 100644 --- a/README.md +++ b/README.md @@ -94,21 +94,21 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story | Framework | Demo | | | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -| [React](app/react) | [v6.3.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) | -| [Vue](app/vue) | [v6.3.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) | -| [Angular](app/angular) | [v6.3.x](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) | -| [Web components](app/web-components) | [v6.3.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components) | +| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) | +| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) | +| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) | +| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components) | | [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) | -| [HTML](app/html) | [v6.3.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) | -| [Ember](app/ember) | [v6.3.x](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) | -| [Svelte](app/svelte) | [v6.3.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) | -| [Preact](app/preact) | [v6.3.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) | -| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette) | -| [Mithril](https://github.com/storybookjs/mithril) | [v6.3.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril) | -| [Marko](https://github.com/storybookjs/marko) | [v6.3.x](https://storybookjs.netlify.com/marko-cli/) | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko) | -| [Riot](https://github.com/storybookjs/riot) | [v6.3.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot) | -| [Rax](https://github.com/storybookjs/rax) | [v6.3.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax) | -| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.3.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Rax](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) | +| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) | +| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) | +| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) | +| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) | +| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette) | +| [Mithril](https://github.com/storybookjs/mithril) | [v6.4.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril) | +| [Marko](https://github.com/storybookjs/marko) | [v6.4.x](https://storybookjs.netlify.com/marko-cli/) | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko) | +| [Riot](https://github.com/storybookjs/riot) | [v6.4.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot) | +| [Rax](https://github.com/storybookjs/rax) | [v6.4.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax) | +| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Rax](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) | ### Sub Projects @@ -141,13 +141,13 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr ### Deprecated Addons -| Addons | | -| -------------------------------------------------------------------------------- | ---------------------------------------------------------- | +| Addons | | +| ---------------------------------------------------------------------------------- | ---------------------------------------------------------- | | [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information | | [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes | -| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts | -| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code | -| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI | +| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts | +| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code | +| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI | In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools. diff --git a/addons/a11y/README.md b/addons/a11y/README.md index 15bbaa107841..6135d17dfc5d 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -22,6 +22,8 @@ module.exports = { }; ``` +And here's a sample story file to test the addon: + ```js import React from 'react'; diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 027bab1708fe..0626997926ce 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -45,18 +45,18 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/channels": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/theming": "6.5.0-alpha.5", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "react-sizeme": "^3.0.1", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", @@ -81,7 +81,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Accessibility", diff --git a/addons/a11y/src/components/A11YPanel.test.tsx b/addons/a11y/src/components/A11YPanel.test.tsx index b7e77b1e51a3..744e7e418b8b 100644 --- a/addons/a11y/src/components/A11YPanel.test.tsx +++ b/addons/a11y/src/components/A11YPanel.test.tsx @@ -129,11 +129,14 @@ describe('A11YPanel', () => { const { getByText } = render(); const useChannelArgs = mockedApi.useChannel.mock.calls[0][0]; act(() => useChannelArgs[EVENTS.RESULT](axeResult)); - await waitFor(() => { - expect(getByText(/Tests completed/)).toBeTruthy(); - expect(getByText(/Violations/)).toBeTruthy(); - expect(getByText(/Passes/)).toBeTruthy(); - expect(getByText(/Incomplete/)).toBeTruthy(); - }); + await waitFor( + () => { + expect(getByText(/Tests completed/)).toBeTruthy(); + expect(getByText(/Violations/)).toBeTruthy(); + expect(getByText(/Passes/)).toBeTruthy(); + expect(getByText(/Incomplete/)).toBeTruthy(); + }, + { timeout: 2000 } + ); }); }); diff --git a/addons/actions/package.json b/addons/actions/package.json index 3ae72f76f679..a48f58830302 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -41,21 +41,21 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "polished": "^4.0.5", "prop-types": "^15.7.2", "react-inspector": "^5.1.0", "regenerator-runtime": "^0.13.7", - "telejson": "^5.3.2", + "telejson": "^5.3.3", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", "uuid-browser": "^3.1.0" @@ -79,7 +79,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Actions", diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 673da43f62d3..b64d78e78f45 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -77,7 +77,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Backgrounds", diff --git a/addons/controls/package.json b/addons/controls/package.json index 518bd584ba21..acb6611f04b6 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -45,17 +45,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/store": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/store": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, "peerDependencies": { @@ -73,7 +73,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/register.js", "storybook": { "displayName": "Controls", diff --git a/addons/docs/docs/recipes.md b/addons/docs/docs/recipes.md index 12940168fff3..db5681bdf07f 100644 --- a/addons/docs/docs/recipes.md +++ b/addons/docs/docs/recipes.md @@ -63,7 +63,8 @@ basic.parameters = { ```md import { Meta, Story } from '@storybook/addon-docs'; -import \* as stories from './Button.stories.js'; +import * as stories from './Button.stories.js'; +import { Button } from './Button'; import { SomeComponent } from 'path/to/SomeComponent'; diff --git a/addons/docs/package.json b/addons/docs/package.json index 6a53d7356e64..a9d17b0be504 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/builder-webpack4": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/builder-webpack4": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/csf-tools": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/postinstall": "6.4.0-rc.3", - "@storybook/preview-web": "6.4.0-rc.3", - "@storybook/source-loader": "6.4.0-rc.3", - "@storybook/store": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/csf-tools": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/postinstall": "6.5.0-alpha.5", + "@storybook/preview-web": "6.5.0-alpha.5", + "@storybook/source-loader": "6.5.0-alpha.5", + "@storybook/store": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "acorn": "^8.5.0", "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", @@ -89,7 +89,7 @@ "html-tags": "^3.1.0", "js-string-escape": "^1.0.1", "loader-utils": "^2.0.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "nanoid": "^3.1.23", "p-limit": "^3.1.0", "prettier": "^2.2.1", @@ -104,13 +104,13 @@ "devDependencies": { "@angular/core": "^11.2.14", "@babel/core": "^7.12.10", - "@emotion/core": "^10.1.1", + "@emotion/core": "^10.3.1", "@emotion/styled": "^10.0.27", - "@storybook/angular": "6.4.0-rc.3", - "@storybook/html": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", - "@storybook/vue": "6.4.0-rc.3", - "@storybook/web-components": "6.4.0-rc.3", + "@storybook/angular": "6.5.0-alpha.5", + "@storybook/html": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/vue": "6.5.0-alpha.5", + "@storybook/web-components": "6.5.0-alpha.5", "@types/cross-spawn": "^6.0.2", "@types/doctrine": "^0.0.3", "@types/enzyme": "^3.10.8", @@ -126,8 +126,8 @@ "fs-extra": "^9.0.1", "jest": "^26.6.3", "jest-specific-snapshot": "^4.0.0", - "lit-element": "^3.0.0-rc.2", - "lit-html": "^2.0.0-rc.3", + "lit-element": "^3.0.2", + "lit-html": "^2.0.2", "require-from-string": "^2.0.2", "rxjs": "^6.6.3", "styled-components": "^5.2.1", @@ -140,14 +140,14 @@ "zone.js": "^0.11.3" }, "peerDependencies": { - "@storybook/angular": "6.4.0-rc.3", - "@storybook/html": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", - "@storybook/vue": "6.4.0-rc.3", - "@storybook/vue3": "6.4.0-rc.3", - "@storybook/web-components": "6.4.0-rc.3", - "lit": "^2.0.0-rc.1", - "lit-html": "^1.4.1 || ^2.0.0-rc.3", + "@storybook/angular": "6.5.0-alpha.5", + "@storybook/html": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/vue": "6.5.0-alpha.5", + "@storybook/vue3": "6.5.0-alpha.5", + "@storybook/web-components": "6.5.0-alpha.5", + "lit": "^2.0.0", + "lit-html": "^1.4.1 || ^2.0.0", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0", "svelte": "^3.31.2", @@ -202,7 +202,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Docs", diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx index 3820b6ea00bf..8efc0c5ecfd3 100644 --- a/addons/docs/src/blocks/ArgsTable.tsx +++ b/addons/docs/src/blocks/ArgsTable.tsx @@ -162,7 +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 ; + if (!story) return ; const argTypes = filterArgTypes(story.argTypes, include, exclude); diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index 65fdb19c1e72..879f8ec59b75 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -111,6 +111,14 @@ export const getStoryProps = ( }; }; +function makeGate(): [Promise, () => void] { + let open; + const gate = new Promise((r) => { + open = r; + }); + return [gate, open]; +} + const Story: FunctionComponent = (props) => { const context = useContext(DocsContext); const channel = addons.getChannel(); @@ -139,47 +147,63 @@ const Story: FunctionComponent = (props) => { story, renderContext, element: storyRef.current as HTMLElement, + viewMode: 'docs', }); setShowLoader(false); } return () => cleanup && cleanup(); }, [story]); + const [storyFnRan, onStoryFnRan] = makeGate(); + const [rendered, onRendered] = makeGate(); + useEffect(onRendered); + if (!story) { return ; } - // If we are rendering a old-style inline Story via `PureStory` below, we want to emit - // the `STORY_RENDERED` event when it renders. The modern mode below calls out to - // `Preview.renderStoryToDom()` which itself emits the event. - const storyProps = getStoryProps(props, story, context, () => - channel.emit(Events.STORY_RENDERED, storyId) - ); + const storyProps = getStoryProps(props, story, context, onStoryFnRan); if (!storyProps) { return null; } - if (global?.FEATURES?.modernInlineRender) { - // We do this so React doesn't complain when we replace the span in a secondary render - const htmlContents = ``; - - // FIXME: height/style/etc. lifted from PureStory - const { height } = storyProps; - return ( -
- - {height ? ( - - ) : null} - {showLoader && } -
- -
- ); + if (storyProps.inline) { + // If we are rendering a old-style inline Story via `PureStory` below, we want to emit + // the `STORY_RENDERED` event when it renders. The modern mode below calls out to + // `Preview.renderStoryToDom()` which itself emits the event. + if (!global?.FEATURES?.modernInlineRender) { + // We need to wait for two things before we can consider the story rendered: + // (a) React's `useEffect` hook needs to fire. This is needed for React stories, as + // decorators of the form `` will not actually execute `B` in the first + // call to the story function. + // (b) The story function needs to actually have been called. + // Certain frameworks (i.e.angular) don't actually render the component in the very first + // React render cycle, so we need to wait for the framework to actually do that + Promise.all([storyFnRan, rendered]).then(() => { + channel.emit(Events.STORY_RENDERED, storyId); + }); + } else { + // We do this so React doesn't complain when we replace the span in a secondary render + const htmlContents = ``; + + // FIXME: height/style/etc. lifted from PureStory + const { height } = storyProps; + return ( +
+ + {height ? ( + + ) : null} + {showLoader && } +
+ +
+ ); + } } return ( diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-posix.snapshot similarity index 100% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc.snapshot rename to addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-posix.snapshot diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-windows.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-windows.snapshot new file mode 100644 index 000000000000..87b561823850 --- /dev/null +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-windows.snapshot @@ -0,0 +1,1297 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`angular component properties doc-button 1`] = ` +Object { + "classes": Array [], + "components": Array [ + Object { + "accessors": Object { + "inputValue": Object { + "getSignature": Object { + "description": "

Getter for inputValue.

+", + "line": 115, + "name": "inputValue", + "rawdescription": "Getter for \`inputValue\`.", + "returnType": "", + "type": "", + }, + "name": "inputValue", + "setSignature": Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "type": "string", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

Setter for inputValue that is also an @Input.

+", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "tagName": Object { + "text": "param", + }, + "type": "string", + }, + ], + "line": 110, + "name": "inputValue", + "rawdescription": "Setter for \`inputValue\` that is also an \`@Input\`.", + "returnType": "void", + "type": "void", + }, + }, + "item": Object { + "name": "item", + "setSignature": Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "item", + "type": "T[]", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "item", + "tagName": Object { + "text": "param", + }, + "type": "T[]", + }, + ], + "line": 195, + "name": "item", + "returnType": "void", + "type": "void", + }, + }, + "value": Object { + "getSignature": Object { + "description": "

Get the private value.

+", + "line": 154, + "name": "value", + "rawdescription": "Get the private value.", + "returnType": "string | number", + "type": "", + }, + "name": "value", + "setSignature": Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "type": "string | number", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

Set the private value.

+", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "tagName": Object { + "text": "param", + }, + "type": "string | number", + }, + ], + "line": 149, + "name": "value", + "rawdescription": "Set the private value.", + "returnType": "void", + "type": "void", + }, + }, + }, + "assetsDirs": Array [], + "deprecated": false, + "deprecationMessage": "", + "description": "

This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.

+

It supports markdown, so you can embed formatted text, +like bold, italic, and inline code.

+
+

How you like dem apples?! It's never been easier to document all your components.

+
+", + "encapsulation": Array [], + "entryComponents": Array [], + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "hostBindings": Array [ + Object { + "defaultValue": "false", + "deprecated": false, + "deprecationMessage": "", + "line": 124, + "name": "class.focused", + "type": "boolean", + }, + ], + "hostListeners": Array [ + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "btn", + "type": "", + }, + ], + "argsDecorator": Array [ + "$event.target", + ], + "deprecated": false, + "deprecationMessage": "", + "line": 120, + "name": "click", + }, + ], + "id": "component-InputComponent-fd2eff3e4da750f1c06d4928670993b3", + "inputs": Array [], + "inputsClass": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "

Specify the accent-type of the button

+", + "line": 56, + "name": "accent", + "rawdescription": "Specify the accent-type of the button", + "type": "ButtonAccent", + }, + Object { + "defaultValue": "'secondary'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Appearance style of the button.

+", + "line": 52, + "name": "appearance", + "rawdescription": "Appearance style of the button.", + "type": "\\"primary\\" | \\"secondary\\"", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "

Setter for inputValue that is also an @Input.

+", + "line": 110, + "name": "inputValue", + "rawdescription": "Setter for \`inputValue\` that is also an \`@Input\`.", + "type": "string", + }, + Object { + "defaultValue": "false", + "deprecated": false, + "deprecationMessage": "", + "description": "

Sets the button to a disabled state.

+", + "line": 60, + "name": "isDisabled", + "rawdescription": "Sets the button to a disabled state.", + "type": "boolean", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "line": 195, + "name": "item", + "type": "[]", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "

The inner text of the button.

+", + "jsdoctags": Array [ + Object { + "comment": "", + "end": 1590, + "flags": 4227072, + "kind": 317, + "modifierFlagsCache": 0, + "pos": 1576, + "tagName": Object { + "end": 1585, + "escapedText": "required", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 1577, + "transformFlags": 0, + }, + "transformFlags": 0, + }, + ], + "line": 68, + "name": "label", + "rawdescription": "The inner text of the button.", + "type": "string", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "line": 192, + "name": "showKeyAlias", + "type": "", + }, + Object { + "defaultValue": "'medium'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Size of the button.

+", + "line": 72, + "name": "size", + "rawdescription": "Size of the button.", + "type": "ButtonSize", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "

Specifies some arbitrary object

+", + "line": 75, + "name": "someDataObject", + "rawdescription": "Specifies some arbitrary object", + "type": "ISomeInterface", + }, + Object { + "defaultValue": "false", + "deprecated": true, + "deprecationMessage": "", + "description": "

Some input you shouldn't use.

+", + "jsdoctags": Array [ + Object { + "comment": "", + "end": 1882, + "flags": 4227072, + "kind": 321, + "modifierFlagsCache": 0, + "pos": 1866, + "tagName": Object { + "end": 1877, + "escapedText": "deprecated", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 1867, + "transformFlags": 0, + }, + "transformFlags": 0, + }, + ], + "line": 83, + "name": "somethingYouShouldNotUse", + "rawdescription": "Some input you shouldn't use.", + "type": "boolean", + }, + ], + "methodsClass": Array [ + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "x", + "type": "number", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "y", + "type": "string | number", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

An internal calculation method which adds x and y together.

+", + "jsdoctags": Array [ + Object { + "comment": "

Some number you'd like to use.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 3678, + "escapedText": "x", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 3677, + "transformFlags": 0, + }, + "tagName": Object { + "end": 3676, + "escapedText": "param", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 3671, + "transformFlags": 0, + }, + "type": "number", + }, + Object { + "comment": "

Some other number or string you'd like to use, will have parseInt() applied before calculation.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 3724, + "escapedText": "y", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 3723, + "transformFlags": 0, + }, + "tagName": Object { + "end": 3722, + "escapedText": "param", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 3717, + "transformFlags": 0, + }, + "type": "string | number", + }, + ], + "line": 164, + "modifierKind": Array [ + 122, + ], + "name": "calc", + "optional": false, + "rawdescription": " + +An internal calculation method which adds \`x\` and \`y\` together. + +", + "returnType": "number", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "btn", + "type": "", + }, + ], + "decorators": Array [ + Object { + "name": "HostListener", + "stringifiedArguments": "'click', ['$event.target']", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "btn", + "tagName": Object { + "text": "param", + }, + "type": "", + }, + ], + "line": 120, + "name": "onClickListener", + "optional": false, + "returnType": "void", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "password", + "type": "string", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

A private method.

+", + "jsdoctags": Array [ + Object { + "comment": "

Some password.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 4263, + "escapedText": "password", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 4255, + "transformFlags": 0, + }, + "tagName": Object { + "end": 4254, + "escapedText": "param", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 4249, + "transformFlags": 0, + }, + "type": "string", + }, + ], + "line": 187, + "modifierKind": Array [ + 120, + ], + "name": "privateMethod", + "optional": false, + "rawdescription": " + +A private method. + +", + "returnType": "void", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "id", + "optional": true, + "type": "number", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

A protected method.

+", + "jsdoctags": Array [ + Object { + "comment": "

Some id.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 4113, + "escapedText": "id", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 4111, + "transformFlags": 0, + }, + "optional": true, + "tagName": Object { + "end": 4110, + "escapedText": "param", + "flags": 4227072, + "kind": 78, + "modifierFlagsCache": 0, + "pos": 4105, + "transformFlags": 0, + }, + "type": "number", + }, + ], + "line": 178, + "modifierKind": Array [ + 121, + ], + "name": "protectedMethod", + "optional": false, + "rawdescription": " + +A protected method. + +", + "returnType": "void", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "things", + "type": "ISomeInterface", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

A public method using an interface.

+", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "things", + "tagName": Object { + "text": "param", + }, + "type": "ISomeInterface", + }, + ], + "line": 169, + "modifierKind": Array [ + 122, + ], + "name": "publicMethod", + "optional": false, + "rawdescription": " +A public method using an interface.", + "returnType": "void", + "typeParameters": Array [], + }, + ], + "name": "InputComponent", + "outputs": Array [], + "outputsClass": Array [ + Object { + "defaultValue": "new EventEmitter()", + "deprecated": false, + "deprecationMessage": "", + "description": "

Handler to be called when the button is clicked by a user.

+

Will also block the emission of the event if isDisabled is true.

+", + "line": 91, + "name": "onClick", + "rawdescription": " + +Handler to be called when the button is clicked by a user. + +Will also block the emission of the event if \`isDisabled\` is true. +", + "type": "EventEmitter", + }, + ], + "propertiesClass": Array [ + Object { + "defaultValue": "'some value'", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 106, + "modifierKind": Array [ + 120, + ], + "name": "_inputValue", + "optional": false, + "type": "string", + }, + Object { + "defaultValue": "'Private hello'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Private value.

+", + "line": 146, + "modifierKind": Array [ + 120, + ], + "name": "_value", + "optional": false, + "rawdescription": " +Private value.", + "type": "string", + }, + Object { + "decorators": Array [ + Object { + "name": "ViewChild", + "stringifiedArguments": "'buttonRef', {static: false}", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 48, + "name": "buttonRef", + "optional": false, + "type": "ElementRef", + }, + Object { + "decorators": Array [ + Object { + "name": "HostBinding", + "stringifiedArguments": "'class.focused'", + }, + ], + "defaultValue": "false", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 124, + "name": "focus", + "optional": false, + "type": "", + }, + Object { + "defaultValue": "'Public hello'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Public value.

+", + "line": 143, + "modifierKind": Array [ + 122, + ], + "name": "internalProperty", + "optional": false, + "rawdescription": " +Public value.", + "type": "string", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 199, + "modifierKind": Array [ + 122, + ], + "name": "processedItem", + "optional": false, + "type": "T[]", + }, + ], + "providers": Array [], + "rawdescription": " + +This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular. + +It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text, +like **bold**, _italic_, and \`inline code\`. + +> How you like dem apples?! It's never been easier to document all your components. + +", + "selector": "doc-button", + "sourceCode": "import { + Component, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Input, + Output, + ViewChild, +} from '@angular/core'; + +export const exportedConstant = 'An exported constant'; + +export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge'; + +export enum ButtonAccent { + 'Normal' = 'Normal', + 'High' = 'High', +} + +export interface ISomeInterface { + one: string; + two: boolean; + three: any[]; +} + +/** + * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular. + * + * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text, + * like **bold**, _italic_, and \`inline code\`. + * + * > How you like dem apples?! It's never been easier to document all your components. + * + * @string Hello world + * @link [Example](http://example.com) + * @code \`ThingThing\` + * @html aaa + */ +@Component({ + selector: 'doc-button', + template: '', +}) +export class InputComponent { + @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef; + + /** Appearance style of the button. */ + @Input() + public appearance: 'primary' | 'secondary' = 'secondary'; + + /** Specify the accent-type of the button */ + @Input() + public accent: ButtonAccent; + + /** Sets the button to a disabled state. */ + @Input() + public isDisabled = false; + + /** + * The inner text of the button. + * + * @required + */ + @Input() + public label: string; + + /** Size of the button. */ + @Input() + public size?: ButtonSize = 'medium'; + + /** Specifies some arbitrary object */ + @Input() public someDataObject: ISomeInterface; + + /** + * Some input you shouldn't use. + * + * @deprecated + */ + @Input() + public somethingYouShouldNotUse = false; + + /** + * Handler to be called when the button is clicked by a user. + * + * Will also block the emission of the event if \`isDisabled\` is true. + */ + @Output() + public onClick = new EventEmitter(); + + /** + * This is an internal method that we don't want to document and have added the \`ignore\` annotation to. + * + * @ignore + */ + public handleClick(event: Event) { + event.stopPropagation(); + + if (!this.isDisabled) { + this.onClick.emit(event); + } + } + + private _inputValue = 'some value'; + + /** Setter for \`inputValue\` that is also an \`@Input\`. */ + @Input() + public set inputValue(value: string) { + this._inputValue = value; + } + + /** Getter for \`inputValue\`. */ + public get inputValue() { + return this._inputValue; + } + + @HostListener('click', ['$event.target']) + onClickListener(btn) { + console.log('button', btn); + } + + @HostBinding('class.focused') focus = false; + + /** + * Returns all the CSS classes for the button. + * + * @ignore + */ + public get classes(): string[] { + return [this.appearance, this.size] + .filter((_class) => !!_class) + .map((_class) => \`btn-\${_class}\`); + } + + /** + * @ignore + */ + public ignoredProperty = 'Ignore me'; + + /** Public value. */ + public internalProperty = 'Public hello'; + + /** Private value. */ + private _value = 'Private hello'; + + /** Set the private value. */ + public set value(value: string | number) { + this._value = \`\${value}\`; + } + + /** Get the private value. */ + public get value(): string | number { + return this._value; + } + + /** + * An internal calculation method which adds \`x\` and \`y\` together. + * + * @param x Some number you'd like to use. + * @param y Some other number or string you'd like to use, will have \`parseInt()\` applied before calculation. + */ + public calc(x: number, y: string | number): number { + return x + parseInt(\`\${y}\`, 10); + } + + /** A public method using an interface. */ + public publicMethod(things: ISomeInterface) { + console.log(things); + } + + /** + * A protected method. + * + * @param id Some \`id\`. + */ + protected protectedMethod(id?: number) { + console.log(id); + } + + /** + * A private method. + * + * @param password Some \`password\`. + */ + private privateMethod(password: string) { + console.log(password); + } + + @Input('showKeyAlias') + public showKey: keyof T; + + @Input() + public set item(item: T[]) { + this.processedItem = item; + } + + public processedItem: T[]; +} +", + "styleUrls": Array [], + "styleUrlsData": "", + "styles": Array [], + "stylesData": "", + "template": "", + "templateUrl": Array [], + "type": "component", + "viewProviders": Array [], + }, + ], + "coverage": Object { + "count": 21, + "files": Array [ + Object { + "coverageCount": "16/25", + "coveragePercent": 64, + "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "linktype": "component", + "name": "InputComponent", + "status": "good", + "type": "component", + }, + Object { + "coverageCount": "0/4", + "coveragePercent": 0, + "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "linktype": "interface", + "name": "ISomeInterface", + "status": "low", + "type": "interface", + }, + Object { + "coverageCount": "0/1", + "coveragePercent": 0, + "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "linksubtype": "variable", + "linktype": "miscellaneous", + "name": "exportedConstant", + "status": "low", + "type": "variable", + }, + ], + "status": "low", + }, + "directives": Array [], + "guards": Array [], + "injectables": Array [], + "interceptors": Array [], + "interfaces": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "id": "interface-ISomeInterface-fd2eff3e4da750f1c06d4928670993b3", + "indexSignatures": Array [], + "kind": 163, + "methods": Array [], + "name": "ISomeInterface", + "properties": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 25, + "name": "one", + "optional": false, + "type": "string", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 27, + "name": "three", + "optional": false, + "type": "any[]", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 26, + "name": "two", + "optional": false, + "type": "boolean", + }, + ], + "sourceCode": "import { + Component, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Input, + Output, + ViewChild, +} from '@angular/core'; + +export const exportedConstant = 'An exported constant'; + +export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge'; + +export enum ButtonAccent { + 'Normal' = 'Normal', + 'High' = 'High', +} + +export interface ISomeInterface { + one: string; + two: boolean; + three: any[]; +} + +/** + * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular. + * + * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text, + * like **bold**, _italic_, and \`inline code\`. + * + * > How you like dem apples?! It's never been easier to document all your components. + * + * @string Hello world + * @link [Example](http://example.com) + * @code \`ThingThing\` + * @html aaa + */ +@Component({ + selector: 'doc-button', + template: '', +}) +export class InputComponent { + @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef; + + /** Appearance style of the button. */ + @Input() + public appearance: 'primary' | 'secondary' = 'secondary'; + + /** Specify the accent-type of the button */ + @Input() + public accent: ButtonAccent; + + /** Sets the button to a disabled state. */ + @Input() + public isDisabled = false; + + /** + * The inner text of the button. + * + * @required + */ + @Input() + public label: string; + + /** Size of the button. */ + @Input() + public size?: ButtonSize = 'medium'; + + /** Specifies some arbitrary object */ + @Input() public someDataObject: ISomeInterface; + + /** + * Some input you shouldn't use. + * + * @deprecated + */ + @Input() + public somethingYouShouldNotUse = false; + + /** + * Handler to be called when the button is clicked by a user. + * + * Will also block the emission of the event if \`isDisabled\` is true. + */ + @Output() + public onClick = new EventEmitter(); + + /** + * This is an internal method that we don't want to document and have added the \`ignore\` annotation to. + * + * @ignore + */ + public handleClick(event: Event) { + event.stopPropagation(); + + if (!this.isDisabled) { + this.onClick.emit(event); + } + } + + private _inputValue = 'some value'; + + /** Setter for \`inputValue\` that is also an \`@Input\`. */ + @Input() + public set inputValue(value: string) { + this._inputValue = value; + } + + /** Getter for \`inputValue\`. */ + public get inputValue() { + return this._inputValue; + } + + @HostListener('click', ['$event.target']) + onClickListener(btn) { + console.log('button', btn); + } + + @HostBinding('class.focused') focus = false; + + /** + * Returns all the CSS classes for the button. + * + * @ignore + */ + public get classes(): string[] { + return [this.appearance, this.size] + .filter((_class) => !!_class) + .map((_class) => \`btn-\${_class}\`); + } + + /** + * @ignore + */ + public ignoredProperty = 'Ignore me'; + + /** Public value. */ + public internalProperty = 'Public hello'; + + /** Private value. */ + private _value = 'Private hello'; + + /** Set the private value. */ + public set value(value: string | number) { + this._value = \`\${value}\`; + } + + /** Get the private value. */ + public get value(): string | number { + return this._value; + } + + /** + * An internal calculation method which adds \`x\` and \`y\` together. + * + * @param x Some number you'd like to use. + * @param y Some other number or string you'd like to use, will have \`parseInt()\` applied before calculation. + */ + public calc(x: number, y: string | number): number { + return x + parseInt(\`\${y}\`, 10); + } + + /** A public method using an interface. */ + public publicMethod(things: ISomeInterface) { + console.log(things); + } + + /** + * A protected method. + * + * @param id Some \`id\`. + */ + protected protectedMethod(id?: number) { + console.log(id); + } + + /** + * A private method. + * + * @param password Some \`password\`. + */ + private privateMethod(password: string) { + console.log(password); + } + + @Input('showKeyAlias') + public showKey: keyof T; + + @Input() + public set item(item: T[]) { + this.processedItem = item; + } + + public processedItem: T[]; +} +", + "type": "interface", + }, + ], + "miscellaneous": Object { + "enumerations": Array [ + Object { + "childs": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "Normal", + "value": "Normal", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "High", + "value": "High", + }, + ], + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "name": "ButtonAccent", + "subtype": "enum", + }, + ], + "functions": Array [], + "groupedEnumerations": Object { + "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [ + Object { + "childs": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "Normal", + "value": "Normal", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "High", + "value": "High", + }, + ], + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "name": "ButtonAccent", + "subtype": "enum", + }, + ], + }, + "groupedFunctions": Object {}, + "groupedTypeAliases": Object { + "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [ + Object { + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "kind": 183, + "name": "ButtonSize", + "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"", + "subtype": "typealias", + }, + ], + }, + "groupedVariables": Object { + "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [ + Object { + "ctype": "miscellaneous", + "defaultValue": "'An exported constant'", + "deprecated": false, + "deprecationMessage": "", + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "name": "exportedConstant", + "subtype": "variable", + "type": "string", + }, + ], + }, + "typealiases": Array [ + Object { + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "kind": 183, + "name": "ButtonSize", + "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"", + "subtype": "typealias", + }, + ], + "variables": Array [ + Object { + "ctype": "miscellaneous", + "defaultValue": "'An exported constant'", + "deprecated": false, + "deprecationMessage": "", + "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "name": "exportedConstant", + "subtype": "variable", + "type": "string", + }, + ], + }, + "modules": Array [], + "pipes": Array [], + "routes": Array [], +} +`; diff --git a/addons/docs/src/frameworks/angular/angular-properties.test.ts b/addons/docs/src/frameworks/angular/angular-properties.test.ts index 28789a4edea4..47ce7b685495 100644 --- a/addons/docs/src/frameworks/angular/angular-properties.test.ts +++ b/addons/docs/src/frameworks/angular/angular-properties.test.ts @@ -6,6 +6,8 @@ import { sync as spawnSync } from 'cross-spawn'; import { findComponentByName, extractArgTypesFromData } from './compodoc'; +const { SNAPSHOT_OS } = global; + // File hierarchy: __testfixtures__ / some-test-case / input.* const inputRegExp = /^input\..*$/; @@ -42,7 +44,9 @@ describe('angular component properties', () => { // snapshot the output of compodoc const compodocOutput = runCompodoc(inputPath); const compodocJson = JSON.parse(compodocOutput); - expect(compodocJson).toMatchSpecificSnapshot(path.join(testDir, 'compodoc.snapshot')); + expect(compodocJson).toMatchSpecificSnapshot( + path.join(testDir, `compodoc-${SNAPSHOT_OS}.snapshot`) + ); // snapshot the output of addon-docs angular-properties const componentData = findComponentByName('InputComponent', compodocJson); diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index f56489da90fd..ec6d7037d0a9 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -120,7 +120,7 @@ const extractTypeFromValue = (defaultValue: any) => { const extractEnumValues = (compodocType: any) => { const compodocJson = getCompodocJson(); - const enumType = compodocJson?.miscellaneous.enumerations.find((x) => x.name === compodocType); + const enumType = compodocJson?.miscellaneous?.enumerations?.find((x) => x.name === compodocType); if (enumType?.childs.every((x) => x.value)) { return enumType.childs.map((x) => x.value); diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index 5575e875a1d4..3567b82c5dab 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -65,7 +65,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) { let rules = module.rules || []; if (transcludeMarkdown) { rules = [ - ...rules.filter((rule: any) => rule.test.toString() !== '/\\.md$/'), + ...rules.filter((rule: any) => rule.test?.toString() !== '/\\.md$/'), { test: /\.md$/, use: [ diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.ts index 9cf5b9bec7e4..67d68c12af67 100644 --- a/addons/docs/src/frameworks/web-components/sourceDecorator.ts +++ b/addons/docs/src/frameworks/web-components/sourceDecorator.ts @@ -32,7 +32,7 @@ function applyTransformSource( export function sourceDecorator( storyFn: PartialStoryFn, context: StoryContext -) { +): WebComponentsFramework['storyResult'] { const story = context?.parameters.docs?.source?.excludeDecorators ? (context.originalStoryFn as ArgsStoryFn)(context.args, context) : storyFn(); diff --git a/addons/essentials/package.json b/addons/essentials/package.json index cda785fd84ab..8d5240401240 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/addon-measure": "6.4.0-rc.3", - "@storybook/addon-outline": "6.4.0-rc.3", - "@storybook/addon-toolbars": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/addon-measure": "6.5.0-alpha.5", + "@storybook/addon-outline": "6.5.0-alpha.5", + "@storybook/addon-toolbars": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", "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-rc.3", + "@storybook/vue": "6.5.0-alpha.5", "@types/jest": "^26.0.16", "@types/webpack-env": "^1.16.0" }, "peerDependencies": { "@babel/core": "^7.9.6", - "@storybook/vue": "6.4.0-rc.3", - "@storybook/web-components": "6.4.0-rc.3", + "@storybook/vue": "6.5.0-alpha.5", + "@storybook/web-components": "6.5.0-alpha.5", "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": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/addons/interactions/package.json b/addons/interactions/package.json index 62d9ea42369d..0715dc951dd0 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -41,22 +41,22 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/instrumenter": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/instrumenter": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "global": "^4.4.0", "jest-mock": "^27.0.6", "polished": "^4.0.5", "ts-dedent": "^2.2.0" }, "devDependencies": { - "@storybook/jest": "^0.0.2", - "@storybook/testing-library": "^0.0.3", + "@storybook/jest": "^0.0.5", + "@storybook/testing-library": "^0.0.7", "formik": "^2.2.9" }, "peerDependencies": { @@ -74,7 +74,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Interactions", diff --git a/addons/interactions/src/Panel.stories.tsx b/addons/interactions/src/Panel.stories.tsx index 53a3bc7504ba..8e22606d4ecf 100644 --- a/addons/interactions/src/Panel.stories.tsx +++ b/addons/interactions/src/Panel.stories.tsx @@ -1,10 +1,12 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; import { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; import { getCall } from './mocks'; import { AddonPanelPure } from './Panel'; +import SubnavStories from './components/Subnav/Subnav.stories'; const StyledWrapper = styled.div(({ theme }) => ({ backgroundColor: theme.background.content, @@ -33,16 +35,14 @@ export default { }, args: { calls: new Map(), - endRef: null, + controls: SubnavStories.args.controls, + controlStates: SubnavStories.args.controlStates, + interactions: [getCall(CallStates.DONE)], fileName: 'addon-interactions.stories.tsx', hasException: false, - hasNext: false, - hasPrevious: true, - interactions: [getCall(CallStates.DONE)], - isDisabled: false, isPlaying: false, - showTabIcon: false, - isDebuggingEnabled: true, + onScrollToEnd: action('onScrollToEnd'), + endRef: null, // prop for the AddonPanel used as wrapper of Panel active: true, }, @@ -60,6 +60,14 @@ export const Paused: Story = { args: { isPlaying: true, interactions: [getCall(CallStates.WAITING)], + controlStates: { + debugger: true, + start: false, + back: false, + goto: true, + next: true, + end: true, + }, }, }; @@ -78,7 +86,7 @@ export const Failed: Story = { }; export const WithDebuggingDisabled: Story = { - args: { isDebuggingEnabled: false }, + args: { controlStates: { ...SubnavStories.args.controlStates, debugger: false } }, }; export const NoInteractions: Story = { diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx index 8b21f9050592..722715504e8f 100644 --- a/addons/interactions/src/Panel.tsx +++ b/addons/interactions/src/Panel.tsx @@ -1,17 +1,23 @@ import global from 'global'; import * as React from 'react'; import ReactDOM from 'react-dom'; -import { useChannel, useParameter, useStorybookState } from '@storybook/api'; +import { useChannel, useParameter, StoryId } from '@storybook/api'; import { STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; import { AddonPanel, Link, Placeholder } from '@storybook/components'; -import { EVENTS, Call, CallStates, LogItem } from '@storybook/instrumenter'; +import { EVENTS, Call, CallStates, ControlStates, LogItem } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; import { StatusIcon } from './components/StatusIcon/StatusIcon'; import { Subnav } from './components/Subnav/Subnav'; import { Interaction } from './components/Interaction/Interaction'; -const { FEATURES } = global; +export interface Controls { + start: (args: any) => void; + back: (args: any) => void; + goto: (args: any) => void; + next: (args: any) => void; + end: (args: any) => void; +} interface AddonPanelProps { active: boolean; @@ -19,26 +25,25 @@ interface AddonPanelProps { interface InteractionsPanelProps { active: boolean; - interactions: (Call & { state?: CallStates })[]; - isDisabled?: boolean; - hasPrevious?: boolean; - hasNext?: boolean; + controls: Controls; + controlStates: ControlStates; + interactions: (Call & { status?: CallStates })[]; fileName?: string; hasException?: boolean; isPlaying?: boolean; calls: Map; endRef?: React.Ref; - isDebuggingEnabled?: boolean; - onStart?: () => void; - onPrevious?: () => void; - onNext?: () => void; - onEnd?: () => void; onScrollToEnd?: () => void; - onInteractionClick?: (callId: string) => void; } -const pendingStates = [CallStates.ACTIVE, CallStates.WAITING]; -const completedStates = [CallStates.DONE, CallStates.ERROR]; +const INITIAL_CONTROL_STATES = { + debugger: false, + start: false, + back: false, + goto: false, + next: false, + end: false, +}; const TabIcon = styled(StatusIcon)({ marginLeft: 5, @@ -51,39 +56,27 @@ const TabStatus = ({ children }: { children: React.ReactChild }) => { export const AddonPanelPure: React.FC = React.memo( ({ + calls, + controls, + controlStates, interactions, - isDisabled, - hasPrevious, - hasNext, fileName, hasException, isPlaying, - onStart, - onPrevious, - onNext, - onEnd, onScrollToEnd, - calls, - onInteractionClick, endRef, - isDebuggingEnabled, ...panelProps }) => ( - {isDebuggingEnabled && interactions.length > 0 && ( + {controlStates.debugger && interactions.length > 0 && ( )} @@ -92,9 +85,8 @@ export const AddonPanelPure: React.FC = React.memo( key={call.id} call={call} callsById={calls} - isDebuggingEnabled={isDebuggingEnabled} - isDisabled={isDisabled} - onClick={() => onInteractionClick(call.id)} + controls={controls} + controlStates={controlStates} /> ))}
@@ -115,15 +107,17 @@ export const AddonPanelPure: React.FC = React.memo( ); export const Panel: React.FC = (props) => { - const [isLocked, setLock] = React.useState(false); - const [isPlaying, setPlaying] = React.useState(true); + const [storyId, setStoryId] = React.useState(); + const [controlStates, setControlStates] = React.useState(INITIAL_CONTROL_STATES); + const [isPlaying, setPlaying] = React.useState(false); const [scrollTarget, setScrollTarget] = React.useState(); - const calls = React.useRef>>(new Map()); - const setCall = ({ state, ...call }: Call) => calls.current.set(call.id, call); + // Calls are tracked in a ref so we don't needlessly rerender. + const calls = React.useRef>>(new Map()); + const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call); const [log, setLog] = React.useState([]); - const interactions = log.map(({ callId, state }) => ({ ...calls.current.get(callId), state })); + const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status })); const endRef = React.useRef(); React.useEffect(() => { @@ -135,41 +129,38 @@ export const Panel: React.FC = (props) => { return () => observer.disconnect(); }, []); - const emit = useChannel({ - [EVENTS.CALL]: setCall, - [EVENTS.SYNC]: setLog, - [EVENTS.LOCK]: setLock, - [STORY_RENDER_PHASE_CHANGED]: ({ newPhase }) => { - setLock(false); - setPlaying(newPhase === 'playing'); + const emit = useChannel( + { + [EVENTS.CALL]: setCall, + [EVENTS.SYNC]: (payload) => { + setControlStates(payload.controlStates); + setLog(payload.logItems); + }, + [STORY_RENDER_PHASE_CHANGED]: (event) => { + setStoryId(event.storyId); + setPlaying(event.newPhase === 'playing'); + }, }, - }); + [] + ); + + const controls = React.useMemo( + () => ({ + start: () => emit(EVENTS.START, { storyId }), + back: () => emit(EVENTS.BACK, { storyId }), + goto: (callId: string) => emit(EVENTS.GOTO, { storyId, callId }), + next: () => emit(EVENTS.NEXT, { storyId }), + end: () => emit(EVENTS.END, { storyId }), + }), + [storyId] + ); - const { storyId } = useStorybookState(); const storyFilePath = useParameter('fileName', ''); const [fileName] = storyFilePath.toString().split('/').slice(-1); const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' }); - const isDebuggingEnabled = FEATURES.interactionsDebugger === true; - const showStatus = log.length > 0 && !isPlaying; - const isDebugging = log.some((item) => pendingStates.includes(item.state)); - const hasPrevious = log.some((item) => completedStates.includes(item.state)); - const hasNext = log.some((item) => item.state === CallStates.WAITING); - const hasActive = log.some((item) => item.state === CallStates.ACTIVE); - const hasException = log.some((item) => item.state === CallStates.ERROR); - const isDisabled = isDebuggingEnabled - ? hasActive || isLocked || (isPlaying && !isDebugging) - : true; - - const onStart = React.useCallback(() => emit(EVENTS.START, { storyId }), [storyId]); - const onPrevious = React.useCallback(() => emit(EVENTS.BACK, { storyId }), [storyId]); - const onNext = React.useCallback(() => emit(EVENTS.NEXT, { storyId }), [storyId]); - const onEnd = React.useCallback(() => emit(EVENTS.END, { storyId }), [storyId]); - const onInteractionClick = React.useCallback( - (callId: string) => emit(EVENTS.GOTO, { storyId, callId }), - [storyId] - ); + const hasException = log.some((item) => item.status === CallStates.ERROR); return ( @@ -178,21 +169,14 @@ export const Panel: React.FC = (props) => { (hasException ? : ` (${interactions.length})`)} diff --git a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx index c1d32f82da9c..0ee5b32d843a 100644 --- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx +++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx @@ -37,6 +37,19 @@ Demo.play = async ({ args, canvasElement }) => { await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi)); }; +export const FindBy: CSF2Story = (args) => { + const [isLoading, setIsLoading] = React.useState(true); + React.useEffect(() => { + setTimeout(() => setIsLoading(false), 500); + }, []); + return isLoading ?
Loading...
: ; +}; +FindBy.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + await canvas.findByRole('button'); + await expect(true).toBe(true); +}; + export const WaitFor: CSF2Story = (args) => ( ; }; WaitForElementToBeRemoved.play = async ({ canvasElement }) => { diff --git a/addons/interactions/src/components/Interaction/Interaction.stories.tsx b/addons/interactions/src/components/Interaction/Interaction.stories.tsx index 751841e7c764..3fc5ab83b5ef 100644 --- a/addons/interactions/src/components/Interaction/Interaction.stories.tsx +++ b/addons/interactions/src/components/Interaction/Interaction.stories.tsx @@ -5,6 +5,7 @@ import { userEvent, within } from '@storybook/testing-library'; import { getCall } from '../../mocks'; import { Interaction } from './Interaction'; +import SubnavStories from '../Subnav/Subnav.stories'; type Story = ComponentStoryObj; @@ -13,8 +14,8 @@ export default { component: Interaction, args: { callsById: new Map(), - isDisabled: false, - isDebuggingEnabled: true, + controls: SubnavStories.args.controls, + controlStates: SubnavStories.args.controlStates, }, } as ComponentMeta; @@ -43,7 +44,7 @@ export const Done: Story = { }; export const Disabled: Story = { - args: { ...Done.args, isDisabled: true }, + args: { ...Done.args, controlStates: { ...SubnavStories.args.controlStates, goto: false } }, }; export const Hovered: Story = { diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx index f9a9dc366d38..d9d6bf27ddb1 100644 --- a/addons/interactions/src/components/Interaction/Interaction.tsx +++ b/addons/interactions/src/components/Interaction/Interaction.tsx @@ -1,15 +1,18 @@ import * as React from 'react'; -import { Call, CallStates } from '@storybook/instrumenter'; +import { Call, CallStates, ControlStates } from '@storybook/instrumenter'; import { styled, typography } from '@storybook/theming'; import { transparentize } from 'polished'; import { MatcherResult } from '../MatcherResult'; import { MethodCall } from '../MethodCall'; import { StatusIcon } from '../StatusIcon/StatusIcon'; +import { Controls } from '../../Panel'; const MethodCallWrapper = styled.div(() => ({ fontFamily: typography.fonts.mono, fontSize: typography.size.s1, + overflowWrap: 'break-word', + inlineSize: 'calc( 100% - 40px )', })); const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{ @@ -20,7 +23,7 @@ const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].incl borderBottom: `1px solid ${theme.appBorderColor}`, fontFamily: typography.fonts.base, fontSize: 13, - ...(call.state === CallStates.ERROR && { + ...(call.status === CallStates.ERROR && { backgroundColor: theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning, }), @@ -38,19 +41,17 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu margin: 0, padding: '8px 15px', textAlign: 'start', - cursor: disabled || call.state === CallStates.ERROR ? 'default' : 'pointer', - '&:hover': { - background: theme.background.hoverable, - }, + cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer', + '&:hover': disabled ? {} : { background: theme.background.hoverable }, '&:focus-visible': { outline: 0, boxShadow: `inset 3px 0 0 0 ${ - call.state === CallStates.ERROR ? theme.color.warning : theme.color.secondary + call.status === CallStates.ERROR ? theme.color.warning : theme.color.secondary }`, - background: call.state === CallStates.ERROR ? 'transparent' : theme.background.hoverable, + background: call.status === CallStates.ERROR ? 'transparent' : theme.background.hoverable, }, '& > div': { - opacity: call.state === CallStates.WAITING ? 0.5 : 1, + opacity: call.status === CallStates.WAITING ? 0.5 : 1, }, })); @@ -63,32 +64,30 @@ const RowMessage = styled('pre')({ export const Interaction = ({ call, callsById, - onClick, - isDisabled, - isDebuggingEnabled, + controls, + controlStates, }: { call: Call; callsById: Map; - onClick: React.MouseEventHandler; - isDisabled: boolean; - isDebuggingEnabled?: boolean; + controls: Controls; + controlStates: ControlStates; }) => { const [isHovered, setIsHovered] = React.useState(false); return ( isDebuggingEnabled && setIsHovered(true)} - onMouseLeave={() => isDebuggingEnabled && setIsHovered(false)} + onClick={() => controls.goto(call.id)} + disabled={!controlStates.goto} + onMouseEnter={() => controlStates.goto && setIsHovered(true)} + onMouseLeave={() => controlStates.goto && setIsHovered(false)} > - + - {call.state === CallStates.ERROR && + {call.status === CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? ( diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx index a535875c233c..4c28636166f3 100644 --- a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx @@ -3,7 +3,7 @@ import { Call, CallStates } from '@storybook/instrumenter'; import { styled, typography } from '@storybook/theming'; export interface StatusBadgeProps { - status: Call['state']; + status: Call['status']; } const StyledBadge = styled.div(({ theme, status }) => { diff --git a/addons/interactions/src/components/StatusIcon/StatusIcon.tsx b/addons/interactions/src/components/StatusIcon/StatusIcon.tsx index 9aed8af4df2d..d26d7bd493bc 100644 --- a/addons/interactions/src/components/StatusIcon/StatusIcon.tsx +++ b/addons/interactions/src/components/StatusIcon/StatusIcon.tsx @@ -7,7 +7,7 @@ import { transparentize } from 'polished'; import localTheme from '../../theme'; export interface StatusIconProps extends IconsProps { - status: Call['state']; + status: Call['status']; } const { diff --git a/addons/interactions/src/components/Subnav/Subnav.stories.tsx b/addons/interactions/src/components/Subnav/Subnav.stories.tsx index b9c6f6e81896..9605bc53252c 100644 --- a/addons/interactions/src/components/Subnav/Subnav.stories.tsx +++ b/addons/interactions/src/components/Subnav/Subnav.stories.tsx @@ -1,3 +1,4 @@ +import { action } from '@storybook/addon-actions'; import { CallStates } from '@storybook/instrumenter'; import { Subnav } from './Subnav'; @@ -5,11 +6,21 @@ export default { title: 'Addons/Interactions/Subnav', component: Subnav, args: { - onPrevious: () => {}, - onNext: () => {}, - onReplay: () => {}, - goToStart: () => {}, - goToEnd: () => {}, + controls: { + start: action('start'), + back: action('back'), + goto: action('goto'), + next: action('next'), + end: action('end'), + }, + controlStates: { + debugger: true, + start: true, + back: true, + goto: true, + next: false, + end: false, + }, storyFileName: 'Subnav.stories.tsx', hasNext: true, hasPrevious: true, @@ -34,18 +45,44 @@ export const Runs = { }, }; -export const AtTheBeginning = { - name: 'at the beginning', +export const AtStart = { args: { - status: CallStates.DONE, - hasPrevious: false, + status: CallStates.WAITING, + controlStates: { + debugger: true, + start: false, + back: false, + goto: true, + next: true, + end: true, + }, }, }; -export const AtTheEnd = { - name: 'at the end', +export const Midway = { args: { - status: CallStates.DONE, - hasNext: false, + status: CallStates.WAITING, + controlStates: { + debugger: true, + start: true, + back: true, + goto: true, + next: true, + end: true, + }, + }, +}; + +export const Locked = { + args: { + status: CallStates.ACTIVE, + controlStates: { + debugger: true, + start: false, + back: false, + goto: false, + next: false, + end: false, + }, }, }; diff --git a/addons/interactions/src/components/Subnav/Subnav.tsx b/addons/interactions/src/components/Subnav/Subnav.tsx index c4fe801ccf85..e35b133fbf69 100644 --- a/addons/interactions/src/components/Subnav/Subnav.tsx +++ b/addons/interactions/src/components/Subnav/Subnav.tsx @@ -9,34 +9,33 @@ import { WithTooltip, Bar, } from '@storybook/components'; -import { Call, CallStates } from '@storybook/instrumenter'; +import { Call, CallStates, ControlStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; import { StatusBadge } from '../StatusBadge/StatusBadge'; +import { Controls } from '../../Panel'; -const StyledSubnav = styled.nav(({ theme }) => ({ +const SubnavWrapper = styled.div(({ theme }) => ({ background: theme.background.app, borderBottom: `1px solid ${theme.appBorderColor}`, + position: 'sticky', + top: 0, + zIndex: 1, +})); + +const StyledSubnav = styled.nav(({ theme }) => ({ height: 40, display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingLeft: 15, - position: 'sticky', - top: 0, - zIndex: 1, })); export interface SubnavProps { - isDisabled: boolean; - hasPrevious: boolean; - hasNext: boolean; + controls: Controls; + controlStates: ControlStates; + status: Call['status']; storyFileName?: string; - status: Call['state']; - onStart: () => void; - onPrevious: () => void; - onNext: () => void; - onEnd: () => void; onScrollToEnd?: () => void; } @@ -55,7 +54,7 @@ const Note = styled(TooltipNote)(({ theme }) => ({ fontFamily: theme.typography.fonts.base, })); -export const StyledIconButton = styled(IconButton)(({ theme }) => ({ +export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({ color: theme.color.mediumdark, margin: '0 3px', })); @@ -68,6 +67,7 @@ const StyledLocation = styled(P)(({ theme }) => ({ color: theme.textMutedColor, justifyContent: 'flex-end', textAlign: 'right', + whiteSpace: 'nowrap', marginTop: 'auto', marginBottom: 1, paddingRight: 15, @@ -90,97 +90,59 @@ const JumpToEndButton = styled(StyledButton)({ lineHeight: '12px', }); -const withTooltipModifiers = [ - { - name: 'preventOverflow', - options: { - padding: 0, - }, - }, - { - name: 'offset', - options: { - offset: [0, -2], - }, - }, -]; - export const Subnav: React.FC = ({ - isDisabled, - hasNext, - hasPrevious, - storyFileName, + controls, + controlStates, status, - onStart, - onPrevious, - onNext, - onEnd, + storyFileName, onScrollToEnd, }) => { const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end'; return ( - - - - - - - {buttonText} - - - - - } - > - - - - - - } - > - - - - - - } - > - - - - - - } - > - - - - - - {storyFileName && ( + + + - {storyFileName} + + + + {buttonText} + + + + + }> + + + + + + }> + + + + + + }> + + + + + + }> + + + + - )} - - + {storyFileName && ( + + {storyFileName} + + )} + + + ); }; diff --git a/addons/interactions/src/mocks/index.ts b/addons/interactions/src/mocks/index.ts index 591fdd9cfbce..7952b6ecf896 100644 --- a/addons/interactions/src/mocks/index.ts +++ b/addons/interactions/src/mocks/index.ts @@ -1,8 +1,9 @@ import { CallStates, Call } from '@storybook/instrumenter'; -export const getCall = (state: CallStates): Call => { +export const getCall = (status: CallStates): Call => { const defaultData = { id: 'addons-interactions-accountform--standard-email-filled [3] change', + cursor: 0, path: ['fireEvent'], method: 'change', storyId: 'addons-interactions-accountform--standard-email-filled', @@ -19,11 +20,11 @@ export const getCall = (state: CallStates): Call => { ], interceptable: true, retain: false, - state, + status, }; const overrides = CallStates.ERROR - ? { exception: { callId: '', stack: '', message: "Things didn't work!" } } + ? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } } : {}; return { ...defaultData, ...overrides }; diff --git a/addons/interactions/tsconfig.json b/addons/interactions/tsconfig.json new file mode 100644 index 000000000000..d1ee4fc75941 --- /dev/null +++ b/addons/interactions/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env"] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*", + "src/**/tests/**/*", + "src/**/__tests__/**/*", + "src/**/*.stories.*", + "src/**/*.mockdata.*", + "src/**/__testfixtures__/**" + ] +} diff --git a/addons/jest/README.md b/addons/jest/README.md index 5a75fce42ca5..1f224a8d1b0d 100644 --- a/addons/jest/README.md +++ b/addons/jest/README.md @@ -46,7 +46,7 @@ You may want to add the result file to `.gitignore`, since it's a generated file But much like lockfiles and snapshots, checking-in generated files can have certain advantages as well. It's up to you. We recommend to **do** check in the test results file so starting Storybook from a clean git clone doesn't require running all tests first, -but this can mean you'll encounter merge conflicts on this file in the future (_re-generating this file is very similar to re-generating lockfiles and snapshots_). +but this can mean you'll encounter merge conflicts on this file in the future (_re-generating this file is very similar to re-generating lockfiles and snapshots_). ### Generating the test results @@ -101,17 +101,17 @@ You can also add multiple tests results within your story by including the `jest ```js // MyComponent.stories.js | MyComponent.stories.jsx -import MyComponent from './MyComponent'; +import MyComponent from './MyComponent'; -import results from '../.jest-test-results.json'; +import results from '../.jest-test-results.json'; -import { withTests } from '@storybook/addon-jest'; +import { withTests } from '@storybook/addon-jest'; -export default { - component: MyComponent, - title: 'MyComponent', +export default { + component: MyComponent, + title: 'MyComponent', decorators: [withTests({ results })], -}; +}; const Template = (args) => ; @@ -126,7 +126,7 @@ Default.parameters = { ### Global level -To avoid importing the results of the tests in each story, you can update +To avoid importing the results of the tests in each story, you can update your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: ```js @@ -140,7 +140,7 @@ export const decorators = [ withTests({ results, }), -]; +]; ``` Then in your story file: @@ -162,7 +162,7 @@ Default.args={ text: 'Jest results in Storybook', }; Default.parameters = { - jest: ['MyComponent.test.js'], + jest: 'MyComponent.test.js', }; ``` @@ -230,7 +230,7 @@ const Template: Story = (args: MyComponent) => ({ export const Default = Template.bind({}); Default.parameters = { - jest: ['MyComponent.component'], + jest: 'MyComponent.component', }; ``` diff --git a/addons/jest/package.json b/addons/jest/package.json index 189c78ec7079..5bb5d9d65942 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", "global": "^4.4.0", "react-sizeme": "^3.0.1", @@ -76,7 +76,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Jest", diff --git a/addons/links/package.json b/addons/links/package.json index 877918d6a6bf..731459d1936d 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/router": "6.4.0-rc.3", + "@storybook/router": "6.5.0-alpha.5", "@types/qs": "^6.9.5", "core-js": "^3.8.2", "global": "^4.4.0", @@ -72,7 +72,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Links", diff --git a/addons/measure/package.json b/addons/measure/package.json index 590aa586de44..68b12ab2847b 100644 --- a/addons/measure/package.json +++ b/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@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": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Measure", diff --git a/addons/outline/package.json b/addons/outline/package.json index be99bd7b808b..53c8a145039b 100644 --- a/addons/outline/package.json +++ b/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@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": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Outline", diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 2b9db0a80299..66516b590eb6 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -45,12 +45,12 @@ }, "dependencies": { "@jest/transform": "^26.6.2", - "@storybook/addons": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-client": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-client": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", @@ -69,11 +69,11 @@ "devDependencies": { "@angular/core": "^11.2.0", "@angular/platform-browser-dynamic": "^11.2.0", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/angular": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", - "@storybook/vue": "6.4.0-rc.3", - "@storybook/vue3": "6.4.0-rc.3", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/angular": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/vue": "6.5.0-alpha.5", + "@storybook/vue3": "6.5.0-alpha.5", "babel-loader": "^8.0.0", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", @@ -151,7 +151,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.test.ts b/addons/storyshots/storyshots-core/src/frameworks/configure.test.ts index 76c88463876a..509aa5a13b24 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/configure.test.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/configure.test.ts @@ -1,3 +1,4 @@ +import path from 'path'; import { getPreviewFile, getMainFile } from './configure'; // eslint-disable-next-line global-require, jest/no-mocks-import @@ -19,9 +20,9 @@ describe('preview files', () => { ${'config.js'} ${'config.jsx'} `('resolves a valid preview file from $filepath', ({ filepath }) => { - setupFiles({ [`test/${filepath}`]: 'true' }); + setupFiles({ [path.join('test', filepath)]: 'true' }); - expect(getPreviewFile('test/')).toEqual(`test/${filepath}`); + expect(getPreviewFile('test/')).toEqual(`test${path.sep}${filepath}`); }); it('returns false when none of the paths exist', () => { @@ -39,9 +40,9 @@ describe('main files', () => { ${'main.js'} ${'main.jsx'} `('resolves a valid main file path from $filepath', ({ filepath }) => { - setupFiles({ [`test/${filepath}`]: 'true' }); + setupFiles({ [path.join('test', filepath)]: 'true' }); - expect(getMainFile('test/')).toEqual(`test/${filepath}`); + expect(getMainFile('test/')).toEqual(`test${path.sep}${filepath}`); }); it('returns false when none of the paths exist', () => { diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index f34b63b4847f..ff257001ee2d 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", + "@storybook/node-logger": "6.5.0-alpha.5", "@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-rc.3", + "@storybook/addon-storyshots": "6.5.0-alpha.5", "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependenciesMeta": { @@ -64,5 +64,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b" + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963" } diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 49365819a83e..4f76fd3df939 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/router": "6.4.0-rc.3", - "@storybook/source-loader": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/router": "6.5.0-alpha.5", + "@storybook/source-loader": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", "estraverse": "^5.2.0", "loader-utils": "^2.0.0", @@ -75,7 +75,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Storysource", diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 8798cf8b9ab9..532dda703464 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7" }, @@ -67,7 +67,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/register.js", "storybook": { "displayName": "Toolbars", diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 197f37f74905..77c1cf88e5d2 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -69,7 +69,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/preview.js", "storybook": { "displayName": "Viewport", diff --git a/app/angular/package.json b/app/angular/package.json index 84bfcef76585..a2eb1cb9d504 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,15 +45,16 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.4.0-rc.3", + "@storybook/node-logger": "6.5.0-alpha.5", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.4.0-rc.3", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "autoprefixer": "^9.8.6", "core-js": "^3.8.2", @@ -69,7 +70,7 @@ "regenerator-runtime": "^0.13.7", "sass-loader": "^10.1.0", "strip-json-comments": "3.1.1", - "telejson": "^5.3.2", + "telejson": "^5.3.3", "ts-dedent": "^2.0.0", "ts-loader": "^8.0.14", "tsconfig-paths-webpack-plugin": "^3.3.0", @@ -99,7 +100,7 @@ }, "peerDependencies": { "@angular-devkit/architect": ">=0.8.9", - "@angular-devkit/build-angular": ">=0.8.9", + "@angular-devkit/build-angular": ">=0.8.9 || >= 12.0.0", "@angular-devkit/core": "^0.6.1 || >=7.0.0", "@angular/cli": ">=6.0.0", "@angular/common": ">=6.0.0", @@ -113,7 +114,7 @@ "@babel/core": "*", "@nrwl/workspace": ">=11.1.0", "@webcomponents/custom-elements": ">=1.4.3", - "rxjs": "^6.0.0", + "rxjs": "^6.0.0 || ^7.4.0", "typescript": "^3.4.0 || >=4.0.0", "zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0 || ^0.11.0" }, @@ -138,5 +139,5 @@ "access": "public" }, "builders": "dist/ts3.9/builders/builders.json", - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b" + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963" } diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts index c1c9b784daa1..3bd4ffc84c08 100644 --- a/app/angular/src/builders/build-storybook/index.spec.ts +++ b/app/angular/src/builders/build-storybook/index.spec.ts @@ -5,6 +5,7 @@ import * as path from 'path'; const buildStandaloneMock = jest.fn(); jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock); +jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' })); const cpSpawnMock = { spawn: jest.fn(), @@ -75,15 +76,13 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: {}, configDir: '.storybook', - docsMode: false, loglevel: undefined, quiet: false, outputDir: 'storybook-static', mode: 'static', - compodoc: false, - compodocArgs: ['-e', 'json'], - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', }); }); @@ -102,14 +101,12 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), + angularBuilderOptions: {}, configDir: '.storybook', - docsMode: false, loglevel: undefined, quiet: false, outputDir: 'storybook-static', mode: 'static', - compodoc: false, - compodocArgs: ['-e', 'json'], tsConfig: 'path/to/tsConfig.json', }); }); @@ -147,7 +144,7 @@ describe('Build Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [ '-p', - 'src/tsconfig.app.json', + './storybook/tsconfig.ts', '-d', '', '-e', @@ -156,15 +153,39 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: {}, configDir: '.storybook', - docsMode: false, loglevel: undefined, quiet: false, outputDir: 'storybook-static', mode: 'static', - compodoc: true, - compodocArgs: ['-e', 'json'], - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', + }); + }); + + it('should start storybook with styles options', async () => { + const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', { + tsConfig: 'path/to/tsConfig.json', + compodoc: false, + styles: ['style.scss'], + }); + + const output = await run.result; + + await run.stop(); + + expect(output.success).toBeTruthy(); + expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); + expect(buildStandaloneMock).toHaveBeenCalledWith({ + angularBrowserTarget: null, + angularBuilderContext: expect.any(Object), + angularBuilderOptions: { styles: ['style.scss'] }, + configDir: '.storybook', + loglevel: undefined, + quiet: false, + outputDir: 'storybook-static', + mode: 'static', + tsConfig: 'path/to/tsConfig.json', }); }); }); diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 64827de6e809..6108034e9a34 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -9,10 +9,15 @@ import { JsonObject } from '@angular-devkit/core'; import { from, Observable, of, throwError } from 'rxjs'; import { CLIOptions } from '@storybook/core-common'; import { catchError, map, mapTo, switchMap } from 'rxjs/operators'; +import { sync as findUpSync } from 'find-up'; // eslint-disable-next-line import/no-extraneous-dependencies import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone'; -import { BrowserBuilderOptions } from '@angular-devkit/build-angular'; +import { + BrowserBuilderOptions, + ExtraEntryPoint, + StylePreprocessorOptions, +} from '@angular-devkit/build-angular'; import { runCompodoc } from '../utils/run-compodoc'; import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler'; @@ -21,6 +26,8 @@ export type StorybookBuilderOptions = JsonObject & { tsConfig?: string; compodoc: boolean; compodocArgs: string[]; + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; } & Pick< // makes sure the option exists CLIOptions, @@ -46,12 +53,29 @@ function commandBuilder( return runCompodoc$.pipe(mapTo({ tsConfig })); }), map(({ tsConfig }) => { - const { browserTarget, ...otherOptions } = options; + const { + browserTarget, + stylePreprocessorOptions, + styles, + configDir, + docs, + loglevel, + outputDir, + quiet, + } = options; const standaloneOptions: StandaloneOptions = { - ...otherOptions, + configDir, + docs, + loglevel, + outputDir, + quiet, angularBrowserTarget: browserTarget, angularBuilderContext: context, + angularBuilderOptions: { + ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}), + ...(styles ? { styles } : {}), + }, tsConfig, }; return standaloneOptions; @@ -76,7 +100,10 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext) } return { - tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined, + tsConfig: + options.tsConfig ?? + findUpSync('tsconfig.json', { cwd: options.configDir }) ?? + browserOptions.tsConfig, }; } diff --git a/app/angular/src/builders/build-storybook/schema.json b/app/angular/src/builders/build-storybook/schema.json index a4e894863922..d20f55765ebf 100644 --- a/app/angular/src/builders/build-storybook/schema.json +++ b/app/angular/src/builders/build-storybook/schema.json @@ -51,15 +51,62 @@ "items": { "type": "string" } + }, + "styles": { + "type": "array", + "description": "Global styles to be included in the build.", + "items": { + "$ref": "#/definitions/extraEntryPoint" + }, + "default": "" + }, + "stylePreprocessorOptions": { + "description": "Options to pass to style preprocessors.", + "type": "object", + "properties": { + "includePaths": { + "description": "Paths to include. Paths will be resolved to workspace root.", + "type": "array", + "items": { + "type": "string" + }, + "default": [] + } + }, + "additionalProperties": false, + "default": "" } }, "additionalProperties": false, - "oneOf": [ - { - "required": ["browserTarget"] - }, - { - "required": ["tsConfig"] + "definitions": { + "extraEntryPoint": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include." + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The file to include." + } + ] } - ] + } } diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts index 57463172af23..2b4893eda268 100644 --- a/app/angular/src/builders/start-storybook/index.spec.ts +++ b/app/angular/src/builders/start-storybook/index.spec.ts @@ -5,6 +5,7 @@ import * as path from 'path'; const buildStandaloneMock = jest.fn(); jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock); +jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' })); const cpSpawnMock = { spawn: jest.fn(), @@ -76,9 +77,9 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: {}, ci: false, configDir: '.storybook', - docsMode: false, host: 'localhost', https: false, port: 4400, @@ -87,9 +88,7 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - compodoc: false, - compodocArgs: ['-e', 'json'], - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', }); }); @@ -109,9 +108,9 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), + angularBuilderOptions: {}, ci: false, configDir: '.storybook', - docsMode: false, host: 'localhost', https: false, port: 4400, @@ -120,8 +119,6 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - compodoc: false, - compodocArgs: ['-e', 'json'], tsConfig: 'path/to/tsConfig.json', }); }); @@ -159,7 +156,7 @@ describe('Start Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [ '-p', - 'src/tsconfig.app.json', + './storybook/tsconfig.ts', '-d', '', '-e', @@ -168,9 +165,9 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: {}, ci: false, configDir: '.storybook', - docsMode: false, host: 'localhost', https: false, port: 9009, @@ -179,9 +176,41 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - compodoc: true, - compodocArgs: ['-e', 'json'], - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', + }); + }); + + it('should start storybook with styles options', async () => { + const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', { + tsConfig: 'path/to/tsConfig.json', + port: 4400, + compodoc: false, + styles: ['src/styles.css'], + }); + + const output = await run.result; + + await run.stop(); + + expect(output.success).toBeTruthy(); + expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); + expect(buildStandaloneMock).toHaveBeenCalledWith({ + angularBrowserTarget: null, + angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + styles: ['src/styles.css'], + }, + ci: false, + configDir: '.storybook', + host: 'localhost', + https: false, + port: 4400, + quiet: false, + smokeTest: false, + sslCa: undefined, + sslCert: undefined, + sslKey: undefined, + tsConfig: 'path/to/tsConfig.json', }); }); }); diff --git a/app/angular/src/builders/start-storybook/index.ts b/app/angular/src/builders/start-storybook/index.ts index eade7127f29f..4f80db9866b2 100644 --- a/app/angular/src/builders/start-storybook/index.ts +++ b/app/angular/src/builders/start-storybook/index.ts @@ -6,10 +6,15 @@ import { Target, } from '@angular-devkit/architect'; import { JsonObject } from '@angular-devkit/core'; -import { BrowserBuilderOptions } from '@angular-devkit/build-angular'; +import { + BrowserBuilderOptions, + ExtraEntryPoint, + StylePreprocessorOptions, +} from '@angular-devkit/build-angular'; import { from, Observable, of } from 'rxjs'; import { CLIOptions } from '@storybook/core-common'; import { map, switchMap, mapTo } from 'rxjs/operators'; +import { sync as findUpSync } from 'find-up'; // eslint-disable-next-line import/no-extraneous-dependencies import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone'; @@ -21,6 +26,8 @@ export type StorybookBuilderOptions = JsonObject & { tsConfig?: string; compodoc: boolean; compodocArgs: string[]; + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; } & Pick< // makes sure the option exists CLIOptions, @@ -56,12 +63,41 @@ function commandBuilder( return runCompodoc$.pipe(mapTo({ tsConfig })); }), map(({ tsConfig }) => { - const { browserTarget, ...otherOptions } = options; + const { + browserTarget, + stylePreprocessorOptions, + styles, + ci, + configDir, + docs, + host, + https, + port, + quiet, + smokeTest, + sslCa, + sslCert, + sslKey, + } = options; const standaloneOptions: StandaloneOptions = { - ...otherOptions, + ci, + configDir, + docs, + host, + https, + port, + quiet, + smokeTest, + sslCa, + sslCert, + sslKey, angularBrowserTarget: browserTarget, angularBuilderContext: context, + angularBuilderOptions: { + ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}), + ...(styles ? { styles } : {}), + }, tsConfig, }; @@ -87,7 +123,10 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext) } return { - tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined, + tsConfig: + options.tsConfig ?? + findUpSync('tsconfig.json', { cwd: options.configDir }) ?? + browserOptions.tsConfig, }; } function runInstance(options: StandaloneOptions) { diff --git a/app/angular/src/builders/start-storybook/schema.json b/app/angular/src/builders/start-storybook/schema.json index 6c429fd26850..9911fe8e7bed 100644 --- a/app/angular/src/builders/start-storybook/schema.json +++ b/app/angular/src/builders/start-storybook/schema.json @@ -78,7 +78,62 @@ "items": { "type": "string" } + }, + "styles": { + "type": "array", + "description": "Global styles to be included in the build.", + "items": { + "$ref": "#/definitions/extraEntryPoint" + }, + "default": "" + }, + "stylePreprocessorOptions": { + "description": "Options to pass to style preprocessors.", + "type": "object", + "properties": { + "includePaths": { + "description": "Paths to include. Paths will be resolved to workspace root.", + "type": "array", + "items": { + "type": "string" + }, + "default": [] + } + }, + "additionalProperties": false, + "default": "" } }, - "additionalProperties": false + "additionalProperties": false, + "definitions": { + "extraEntryPoint": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include." + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The file to include." + } + ] + } + } } diff --git a/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts b/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts index d2d5108b2e86..5c9e7c4e7197 100644 --- a/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts +++ b/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts @@ -108,7 +108,7 @@ export abstract class AbstractRenderer { parameters: Parameters; targetDOMNode: HTMLElement; }) { - const targetSelector = `${this.storyId}`; + const targetSelector = `${this.generateTargetSelectorFromStoryId()}`; const newStoryProps$ = new BehaviorSubject(storyFnAngular.props); const moduleMetadata = getStorybookModuleMetadata( @@ -144,6 +144,26 @@ export abstract class AbstractRenderer { await this.afterFullRender(); } + /** + * Only ASCII alphanumerics can be used as HTML tag name. + * https://html.spec.whatwg.org/#elements-2 + * + * Therefore, stories break when non-ASCII alphanumerics are included in target selector. + * https://github.com/storybookjs/storybook/issues/15147 + * + * This method returns storyId when it doesn't contain any non-ASCII alphanumerics. + * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component" + * @protected + * @memberof AbstractRenderer + */ + protected generateTargetSelectorFromStoryId() { + const invalidHtmlTag = /[^A-Za-z0-9-]/g; + const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(this.storyId); + return storyIdIsInvalidHtmlTagName + ? `sb-${this.storyId.replace(invalidHtmlTag, '')}-component` + : this.storyId; + } + protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string) { // Adds DOM element that angular will use as bootstrap component // eslint-disable-next-line no-param-reassign diff --git a/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts b/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts index 237e9b2c9b92..d9976268d77d 100644 --- a/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts +++ b/app/angular/src/client/preview/angular-beta/RendererFactory.test.ts @@ -239,6 +239,49 @@ describe('RendererFactory', () => { expect(countDestroy).toEqual(1); }); + + describe('when story id contains non-Ascii characters', () => { + it('should render my-story for story template', async () => { + const render = await rendererFactory.getRendererInstance( + 'my-ストーリー', + rootTargetDOMNode + ); + await render.render({ + storyFnAngular: { + template: '🦊', + props: {}, + }, + forced: false, + parameters: {}, + targetDOMNode: rootTargetDOMNode, + }); + + expect(document.body.getElementsByTagName('sb-my--component')[0].innerHTML).toBe('🦊'); + }); + + it('should render my-story for story component', async () => { + @Component({ selector: 'foo', template: '🦊' }) + class FooComponent {} + + const render = await rendererFactory.getRendererInstance( + 'my-ストーリー', + rootTargetDOMNode + ); + await render.render({ + storyFnAngular: { + props: {}, + }, + forced: false, + parameters: {}, + component: FooComponent, + targetDOMNode: rootTargetDOMNode, + }); + + expect(document.body.getElementsByTagName('sb-my--component')[0].innerHTML).toBe( + '🦊' + ); + }); + }); }); describe('DocsRenderer', () => { diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json index ac7d21f9eb2c..f3dcfcd45586 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json b/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json index 3d3cb9cde581..358ec4f98f18 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json index 0bd10ad584f9..f55b743522a1 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { @@ -14,6 +15,7 @@ }, "no-confs-project": { "root": "", + "sourceRoot": "src", "architect": { "target-build": { "options": { @@ -25,6 +27,7 @@ }, "no-target-conf-project": { "root": "", + "sourceRoot": "src", "architect": { "target-build": { "options": { @@ -41,6 +44,7 @@ }, "target-project": { "root": "", + "sourceRoot": "src", "architect": { "target-build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json index 39f1562a36a7..9d9fc9b3ef36 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json index 39f1562a36a7..9d9fc9b3ef36 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json index 39f1562a36a7..9d9fc9b3ef36 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/angular-cli-webpack-12.2.x.js b/app/angular/src/server/angular-cli-webpack-12.2.x.js index 3f1d69e5863e..bb3f12011b8a 100644 --- a/app/angular/src/server/angular-cli-webpack-12.2.x.js +++ b/app/angular/src/server/angular-cli-webpack-12.2.x.js @@ -7,6 +7,7 @@ const { getStylesConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/webpack/configs'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const { filterOutStylingRules } = require('./utils/filter-out-styling-rules'); @@ -65,6 +66,12 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext } const resolve = { ...baseConfig.resolve, modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])), + plugins: [ + new TsconfigPathsPlugin({ + configFile: builderOptions.tsConfig, + mainFields: ['browser', 'module', 'main'], + }), + ], }; return { diff --git a/app/angular/src/server/angular-cli-webpack-13.x.x.js b/app/angular/src/server/angular-cli-webpack-13.x.x.js index 0455e07047f6..0b74d3af9889 100644 --- a/app/angular/src/server/angular-cli-webpack-13.x.x.js +++ b/app/angular/src/server/angular-cli-webpack-13.x.x.js @@ -5,8 +5,10 @@ const { const { getCommonConfig, getStylesConfig, + getDevServerConfig, getTypescriptWorkerPlugin, } = require('@angular-devkit/build-angular/src/webpack/configs'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const { filterOutStylingRules } = require('./utils/filter-out-styling-rules'); @@ -40,7 +42,11 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext } aot: false, }, builderContext, - (wco) => [getCommonConfig(wco), getStylesConfig(wco), getTypescriptWorkerPlugin(wco)] + (wco) => [ + getCommonConfig(wco), + getStylesConfig(wco), + getTypescriptWorkerPlugin ? getTypescriptWorkerPlugin(wco) : getDevServerConfig(wco), + ] ); /** @@ -65,6 +71,12 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext } const resolve = { ...baseConfig.resolve, modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])), + plugins: [ + new TsconfigPathsPlugin({ + configFile: builderOptions.tsConfig, + mainFields: ['browser', 'module', 'main'], + }), + ], }; return { diff --git a/app/angular/src/server/angular-devkit-build-webpack.ts b/app/angular/src/server/angular-devkit-build-webpack.ts index 6f2e26f05291..9d9ed78cbd0b 100644 --- a/app/angular/src/server/angular-devkit-build-webpack.ts +++ b/app/angular/src/server/angular-devkit-build-webpack.ts @@ -139,7 +139,7 @@ const buildWebpackConfigOptions = async ( // The dependency of `@angular-devkit/build-angular` to `@angular-devkit/core` is not exactly the same version as the one for storybook (node modules of node modules ^^) logger: (createConsoleLogger() as unknown) as WebpackConfigOptions['logger'], projectRoot: getSystemPath(projectRootNormalized), - sourceRoot: getSystemPath(sourceRootNormalized), + sourceRoot: sourceRootNormalized ? getSystemPath(sourceRootNormalized) : undefined, buildOptions, tsConfig, tsConfigPath, diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts index 8b2c1959d621..967d85a52099 100644 --- a/app/angular/src/server/framework-preset-angular-cli.test.ts +++ b/app/angular/src/server/framework-preset-angular-cli.test.ts @@ -1,6 +1,9 @@ /* eslint-disable jest/no-interpolation-in-snapshots */ +import path from 'path'; import { Configuration } from 'webpack'; import { logger } from '@storybook/node-logger'; +import { normalize, getSystemPath } from '@angular-devkit/core'; +import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; import { webpackFinal } from './framework-preset-angular-cli'; import { PresetOptions } from './options'; @@ -20,7 +23,7 @@ afterEach(() => { }); function initMockWorkspace(name: string) { - workspaceRoot = `${testPath}/__mocks-ng-workspace__/${name}`; + workspaceRoot = path.join(__dirname, '__mocks-ng-workspace__', name); cwdSpy.mockReturnValue(workspaceRoot); } @@ -189,7 +192,11 @@ describe('framework-preset-angular-cli', () => { ...baseWebpackConfig.resolve, modules: expect.arrayContaining(baseWebpackConfig.resolve.modules), // the base resolve.plugins are not kept 🤷‍♂️ - plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins), + plugins: expect.arrayContaining([ + expect.objectContaining({ + absoluteBaseUrl: expect.any(String), + } as TsconfigPathsPlugin), + ]), }, resolveLoader: expect.anything(), }); @@ -258,7 +265,7 @@ describe('framework-preset-angular-cli', () => { expect(webpackFinalConfig.resolve.modules).toEqual([ ...baseWebpackConfig.resolve.modules, - `${workspaceRoot}/src`, + getSystemPath(normalize(path.join(workspaceRoot, 'src'))).replace(/\\/g, '/'), ]); }); @@ -269,7 +276,9 @@ describe('framework-preset-angular-cli', () => { expect(webpackFinalConfig.resolve.plugins).toMatchInlineSnapshot(` Array [ TsconfigPathsPlugin { - "absoluteBaseUrl": "${workspaceRoot}/src/", + "absoluteBaseUrl": "${( + getSystemPath(normalize(path.join(workspaceRoot, 'src'))) + path.sep + ).replace(/\\/g, '\\\\')}", "baseUrl": "./", "extensions": Array [ ".ts", @@ -302,8 +311,8 @@ describe('framework-preset-angular-cli', () => { ...baseWebpackConfig, entry: [ ...(baseWebpackConfig.entry as any[]), - `${workspaceRoot}/src/styles.css`, - `${workspaceRoot}/src/styles.scss`, + path.join(workspaceRoot, 'src', 'styles.css'), + path.join(workspaceRoot, 'src', 'styles.scss'), ], module: { ...baseWebpackConfig.module, rules: expect.anything() }, plugins: expect.anything(), @@ -320,45 +329,48 @@ describe('framework-preset-angular-cli', () => { it('should set webpack "module.rules"', async () => { const baseWebpackConfig = newWebpackConfiguration(); const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options); - + const stylePaths = [ + path.join(workspaceRoot, 'src', 'styles.css'), + path.join(workspaceRoot, 'src', 'styles.scss'), + ]; expect(webpackFinalConfig.module.rules).toEqual([ { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.css$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.scss$|\.sass$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.less$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.styl$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.css$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.scss$|\.sass$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.less$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.styl$/, use: expect.anything(), }, @@ -393,8 +405,8 @@ describe('framework-preset-angular-cli', () => { ...baseWebpackConfig, entry: [ ...(baseWebpackConfig.entry as any[]), - `${workspaceRoot}/src/styles.css`, - `${workspaceRoot}/src/styles.scss`, + path.join(workspaceRoot, 'src', 'styles.css'), + path.join(workspaceRoot, 'src', 'styles.scss'), ], module: { ...baseWebpackConfig.module, rules: expect.anything() }, plugins: expect.anything(), @@ -411,45 +423,49 @@ describe('framework-preset-angular-cli', () => { it('should set webpack "module.rules"', async () => { const baseWebpackConfig = newWebpackConfiguration(); const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options); + const stylePaths = [ + path.join(workspaceRoot, 'src', 'styles.css'), + path.join(workspaceRoot, 'src', 'styles.scss'), + ]; expect(webpackFinalConfig.module.rules).toEqual([ { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.css$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.scss$|\.sass$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.less$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.styl$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.css$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.scss$|\.sass$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.less$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.styl$/, use: expect.anything(), }, @@ -471,8 +487,8 @@ describe('framework-preset-angular-cli', () => { ...baseWebpackConfig, entry: [ ...(baseWebpackConfig.entry as any[]), - `${workspaceRoot}/src/styles.css`, - `${workspaceRoot}/src/styles.scss`, + path.join(workspaceRoot, 'src', 'styles.css'), + path.join(workspaceRoot, 'src', 'styles.scss'), ], module: { ...baseWebpackConfig.module, rules: expect.anything() }, plugins: expect.anything(), @@ -480,7 +496,11 @@ describe('framework-preset-angular-cli', () => { ...baseWebpackConfig.resolve, modules: expect.arrayContaining(baseWebpackConfig.resolve.modules), // the base resolve.plugins are not kept 🤷‍♂️ - plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins), + plugins: expect.arrayContaining([ + expect.objectContaining({ + absoluteBaseUrl: expect.any(String), + } as TsconfigPathsPlugin), + ]), }, resolveLoader: expect.anything(), }); @@ -489,45 +509,49 @@ describe('framework-preset-angular-cli', () => { it('should set webpack "module.rules"', async () => { const baseWebpackConfig = newWebpackConfiguration(); const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options); + const stylePaths = [ + path.join(workspaceRoot, 'src', 'styles.css'), + path.join(workspaceRoot, 'src', 'styles.scss'), + ]; expect(webpackFinalConfig.module.rules).toEqual([ { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.css$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.scss$|\.sass$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.less$/, use: expect.anything(), }, { - exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + exclude: stylePaths, test: /\.styl$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.css$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.scss$|\.sass$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.less$/, use: expect.anything(), }, { - include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + include: stylePaths, test: /\.styl$/, use: expect.anything(), }, @@ -690,7 +714,10 @@ describe('framework-preset-angular-cli', () => { expect(webpackFinalConfig).toEqual({ ...baseWebpackConfig, - entry: [...(baseWebpackConfig.entry as any[]), `${workspaceRoot}/src/styles.css`], + entry: [ + ...(baseWebpackConfig.entry as any[]), + path.join(workspaceRoot, 'src', 'styles.css'), + ], module: { ...baseWebpackConfig.module, rules: expect.anything() }, plugins: expect.anything(), resolve: { diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index 6d907a8d9302..6f6b0601cf73 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -1,6 +1,6 @@ import webpack from 'webpack'; import { logger } from '@storybook/node-logger'; -import { targetFromTargetString, BuilderContext } from '@angular-devkit/architect'; +import { targetFromTargetString, BuilderContext, Target } from '@angular-devkit/architect'; import { sync as findUpSync } from 'find-up'; import semver from '@storybook/semver'; @@ -10,6 +10,11 @@ import { getWebpackConfig as getWebpackConfig12_2_x } from './angular-cli-webpac 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'; +import { + getDefaultProjectName, + findAngularProjectTarget, + readAngularWorkspaceConfig, +} from './angular-read-workspace'; export async function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions) { if (!moduleIsAvailable('@angular-devkit/build-angular')) { @@ -36,9 +41,10 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P getWebpackConfig: async (_baseConfig, _options) => { const builderContext = getBuilderContext(_options); const builderOptions = await getBuilderOptions(_options, builderContext); + const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options); return getWebpackConfig13_x_x(_baseConfig, { - builderOptions, + builderOptions: { ...builderOptions, ...legacyDefaultOptions }, builderContext, }); }, @@ -114,14 +120,65 @@ async function getBuilderOptions( */ const builderOptions = { ...browserTargetOptions, - ...options.angularBuilderOptions, + ...(options.angularBuilderOptions as JsonObject), tsConfig: options.tsConfig ?? - options.angularBuilderOptions?.tsConfig ?? - browserTargetOptions.tsConfig ?? - findUpSync('tsconfig.json', { cwd: options.configDir }), + findUpSync('tsconfig.json', { cwd: options.configDir }) ?? + browserTargetOptions.tsConfig, }; logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`); return builderOptions; } + +/** + * Get options from legacy way + * /!\ This is only for backward compatibility and would be removed on Storybook 7.0 + * only work for angular.json with [defaultProject].build or "storybook.build" config + */ +async function getLegacyDefaultBuildOptions(options: PresetOptions) { + if (options.angularBrowserTarget !== undefined) { + // Not use legacy way with builder (`angularBrowserTarget` is defined or null with builder and undefined without) + return {}; + } + + // TODO ~ legacy way to get default options + // TODO ~ Add deprecation warning and ex for builder use ? `); + 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 {}; + } + + // Find angular project target + try { + const browserTarget = { + configuration: undefined, + project: getDefaultProjectName(workspaceConfig), + target: 'build', + } as Target; + + const { target, project } = findAngularProjectTarget( + workspaceConfig, + browserTarget.project, + browserTarget.target + ); + + logger.info( + `=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook` + ); + return { ...target.options }; + } catch (error) { + logger.error(`=> Could not find angular project: ${error.message}`); + logger.info(`=> Fail to load angular-cli config. Using base config`); + return {}; + } +} diff --git a/app/angular/src/server/options.ts b/app/angular/src/server/options.ts index 061841dfb52a..252519968710 100644 --- a/app/angular/src/server/options.ts +++ b/app/angular/src/server/options.ts @@ -2,13 +2,16 @@ import { sync } from 'read-pkg-up'; import { LoadOptions, Options as CoreOptions } from '@storybook/core-common'; import { BuilderContext } from '@angular-devkit/architect'; -import { JsonObject } from '@angular-devkit/core'; +import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular'; 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; + angularBuilderOptions?: { + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; + }; /* Angular context from builder */ angularBuilderContext?: BuilderContext | null; tsConfig?: string; diff --git a/app/angular/src/server/utils/filter-out-styling-rules.ts b/app/angular/src/server/utils/filter-out-styling-rules.ts index 46591becee5d..26489cee2ffc 100644 --- a/app/angular/src/server/utils/filter-out-styling-rules.ts +++ b/app/angular/src/server/utils/filter-out-styling-rules.ts @@ -1,4 +1,4 @@ -import { Configuration, RuleSetRule } from 'webpack'; +import type { Configuration, RuleSetRule } from 'webpack'; const isStylingRule = (rule: RuleSetRule) => { const { test } = rule; diff --git a/app/angular/standalone.d.ts b/app/angular/standalone.d.ts index 481849593fce..0349246d5392 100644 --- a/app/angular/standalone.d.ts +++ b/app/angular/standalone.d.ts @@ -1,6 +1,7 @@ import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common'; import { BuilderContext } from '@angular-devkit/architect'; -import { JsonObject } from '@angular-devkit/core'; +import { JsonValue } from '@angular-devkit/core'; +import { JsonSchema } from '@angular-devkit/core/src/json/schema'; export type StandaloneOptions = Partial< CLIOptions & @@ -8,7 +9,10 @@ export type StandaloneOptions = Partial< BuilderOptions & { mode?: 'static' | 'dev'; angularBrowserTarget?: string | null; - angularBuilderOptions?: JsonObject; + angularBuilderOptions?: JsonObject & { + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; + }; angularBuilderContext?: BuilderContext | null; tsConfig?: string; } diff --git a/app/ember/package.json b/app/ember/package.json index 2579d4337dd5..bb757dc1afb0 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/core-common": "6.4.0-rc.3", - "@storybook/store": "6.4.0-rc.3", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", + "@storybook/store": "6.5.0-alpha.5", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -66,6 +66,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/html/package.json b/app/html/package.json index 55d5f3cf15fc..a78d69ece9bf 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,13 +45,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/preview-web": "6.4.0-rc.3", - "@storybook/store": "6.4.0-rc.3", + "@storybook/preview-web": "6.5.0-alpha.5", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -71,6 +72,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/preact/package.json b/app/preact/package.json index 0b50a620a7f5..d7ce8a41ffb5 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -46,11 +46,12 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.12.12", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.4.0-rc.3", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -74,6 +75,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/react/package.json b/app/react/package.json index ded3e8ec86a8..4721eda9c86e 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,33 +48,33 @@ "dependencies": { "@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-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.4.0-rc.3", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-named-asset-import": "^0.3.1", "babel-plugin-react-docgen": "^4.2.1", "core-js": "^3.8.2", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "prop-types": "^15.7.2", "react-dev-utils": "^11.0.4", - "react-refresh": "^0.10.0", + "react-refresh": "^0.11.0", "read-pkg-up": "^7.0.1", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", "webpack": "4" }, "devDependencies": { - "@storybook/client-api": "6.4.0-rc.3", - "@types/node": "^14.14.20", + "@storybook/client-api": "6.5.0-alpha.5", "@types/prompts": "^2.0.9" }, "peerDependencies": { @@ -96,6 +96,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/react/src/server/cra-config.test.ts b/app/react/src/server/cra-config.test.ts index c6b1a57c30ea..3f5c8c9d361a 100644 --- a/app/react/src/server/cra-config.test.ts +++ b/app/react/src/server/cra-config.test.ts @@ -1,4 +1,5 @@ import fs from 'fs'; +import path from 'path'; import { getReactScriptsPath } from './cra-config'; jest.mock('fs', () => ({ @@ -7,7 +8,7 @@ jest.mock('fs', () => ({ existsSync: jest.fn(() => true), })); -const SCRIPT_PATH = '.bin/react-scripts'; +const SCRIPT_PATH = path.join('.bin', 'react-scripts'); describe('cra-config', () => { describe('when used with the default react-scripts package', () => { @@ -19,7 +20,7 @@ describe('cra-config', () => { it('should locate the react-scripts package', () => { expect(getReactScriptsPath({ noCache: true })).toEqual( - '/test-project/node_modules/react-scripts' + path.join(path.sep, 'test-project', 'node_modules', 'react-scripts') ); }); }); @@ -33,7 +34,7 @@ describe('cra-config', () => { it('should locate the react-scripts package', () => { expect(getReactScriptsPath({ noCache: true })).toEqual( - '/test-project/node_modules/custom-react-scripts' + path.join(path.sep, 'test-project', 'node_modules', 'custom-react-scripts') ); }); }); @@ -65,7 +66,7 @@ exit $ret` it('should locate the react-scripts package', () => { expect(getReactScriptsPath({ noCache: true })).toEqual( - '/test-project/node_modules/custom-react-scripts' + path.join(path.sep, 'test-project', 'node_modules', 'custom-react-scripts') ); }); }); diff --git a/app/react/src/typings.d.ts b/app/react/src/typings.d.ts index 26c2a8b586bf..4ff88fa9018c 100644 --- a/app/react/src/typings.d.ts +++ b/app/react/src/typings.d.ts @@ -1,4 +1,2 @@ declare module '@storybook/semver'; declare module 'global'; -// todo check for correct types -declare module 'webpack/lib/RuleSet'; diff --git a/app/server/package.json b/app/server/package.json index a5ae3722c2e8..2a97e3baa4a8 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,15 +45,16 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/preview-web": "6.4.0-rc.3", - "@storybook/store": "6.4.0-rc.3", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/preview-web": "6.5.0-alpha.5", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -75,6 +76,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/svelte/package.json b/app/svelte/package.json index 1c0c46424e59..612fe2d4b053 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.4.0-rc.3", + "@storybook/store": "6.5.0-alpha.5", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -75,6 +75,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue/package.json b/app/vue/package.json index 2881ae96dc62..cda684e6e715 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,11 +45,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.4.0-rc.3", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -64,7 +65,6 @@ "webpack": "4" }, "devDependencies": { - "@types/node": "^14.14.20", "vue": "^2.6.12", "vue-loader": "^15.9.6", "vue-template-compiler": "^2.6.12" @@ -83,6 +83,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue/src/typings.d.ts b/app/vue/src/typings.d.ts index 87f498f04800..4f4eff6c31cd 100644 --- a/app/vue/src/typings.d.ts +++ b/app/vue/src/typings.d.ts @@ -1,5 +1,3 @@ declare module 'global'; -// todo check for correct types -declare module 'webpack/lib/RuleSet'; declare module 'vue-loader/lib/plugin'; \ No newline at end of file diff --git a/app/vue3/package.json b/app/vue3/package.json index 478ec792ac2d..51c6fcdef696 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,11 +45,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.4.0-rc.3", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -65,7 +66,6 @@ "webpack": "4" }, "devDependencies": { - "@types/node": "^14.14.20", "@vue/compiler-sfc": "^3.0.0", "vue": "^3.0.0" }, @@ -81,6 +81,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue3/src/typings.d.ts b/app/vue3/src/typings.d.ts index 64a098b25475..35a53756975e 100644 --- a/app/vue3/src/typings.d.ts +++ b/app/vue3/src/typings.d.ts @@ -1,6 +1,4 @@ declare module 'global'; -// todo check for correct types -declare module 'webpack/lib/RuleSet'; declare module 'vue-loader' { export const VueLoaderPlugin diff --git a/app/web-components/package.json b/app/web-components/package.json index 3f6724db313d..da808cc7d55a 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -50,13 +50,14 @@ "@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-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/preview-web": "6.4.0-rc.3", - "@storybook/store": "6.4.0-rc.3", + "@storybook/preview-web": "6.5.0-alpha.5", + "@storybook/store": "6.5.0-alpha.5", + "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "babel-plugin-bundled-import-meta": "^0.3.1", "core-js": "^3.8.2", @@ -68,10 +69,10 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "lit-html": "^2.0.0-rc.3" + "lit-html": "2.0.2" }, "peerDependencies": { - "lit-html": "^1.4.1 || ^2.0.0-rc.3" + "lit-html": "^1.4.1 || ^2.0.0" }, "engines": { "node": ">=10.13.0" @@ -79,6 +80,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/client/index.js" } diff --git a/docs/addons/addon-types.md b/docs/addons/addon-types.md index e7bf0a799010..2a5940bcdca2 100644 --- a/docs/addons/addon-types.md +++ b/docs/addons/addon-types.md @@ -47,7 +47,7 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:
-The icon element used in the example loads the icons from the @storybook/components package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use. +The icon element used in the example loads the icons from the @storybook/components package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md index cdb4db144ea7..5ba804d8ca8a 100644 --- a/docs/addons/addons-api.md +++ b/docs/addons/addons-api.md @@ -85,7 +85,7 @@ The options to `makeDecorator` are:
-💡 Note:If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called. +💡 If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called.
@@ -286,7 +286,7 @@ This method allows you to set query string parameters. You can use that as tempo
-💡 Note: If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it: +💡 If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it:
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index 573f0d1c49f4..7b3079ad94a0 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -187,6 +187,7 @@ When Storybook was initialized, it provided a small set of example stories. Chan + + -export function webpackFinal(config, { presets }) { - const version = await presets.apply('webpackVersion'); - const instance = (await presets.apply('webpackInstance'))?.default; + - logger.info(`=> Running in webpack ${version}: ${instance}`); - return config; -} -``` ### Manager entries @@ -110,30 +109,32 @@ This is equivalent to [registering the addon manually](../get-started/browse-sto ### Preview entries -The addon config `config` allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon. +The addon `config` function allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon. For example, the Backgrounds preset contains the following code: -```js -// preset.js -export function config(entry = []) { - return [...entry, require.resolve('./defaultParameters')]; -} -``` + + + + + + Which in turn invokes: -```js -// defaultParameters.js -export const parameters = { - backgrounds: { - values: [ - { name: 'light', value: '#F8F8F8' }, - { name: 'dark', value: '#333333' }, - ], - }, -}; -``` + + + + + This is equivalent to exporting the `backgrounds` parameter manually in `main.js`. diff --git a/docs/api/argtypes.md b/docs/api/argtypes.md index db77a4efd170..cbda5980d01b 100644 --- a/docs/api/argtypes.md +++ b/docs/api/argtypes.md @@ -4,15 +4,15 @@ title: 'ArgTypes'
-NOTE: This API is experimental and may change outside of the typical semver release cycle +This API is experimental and may change outside of the typical semver release cycle
-ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg you constrain the values that it can take and can also provide information about args that are not explicitly set (i.e. not required). +ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg, you constrain the values that it can take and provide information about args that are not explicitly set (i.e., not required). -You can also use argTypes to “annotate” args with information that is used by addons that make use of those args, for instance to instruct the controls addons to render a color choose for a string-valued arg. +You can also use argTypes to “annotate” args with information used by addons that make use of those args. For instance, to instruct the controls addon to render a color, you could choose a string-valued arg. -The most concrete realization of argTypes is the [Args Table](../writing-docs/doc-blocks.md#argstable) doc block. Each row in the table corresponds to a single argType, as well as the current value of that arg. +The most concrete realization of argTypes is the [Args Table](../writing-docs/doc-blocks.md#argstable) doc block. Each row in the table corresponds to a single argType and the current value of that arg. ![Storybook inferring automatically the argType](./argstable.png) @@ -34,7 +34,7 @@ To do so, Storybook uses various static analysis tools depending on your framewo - Ember - [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components) -The format of the generated argType will look something like: +The format of the generated argType will look something like this: @@ -46,11 +46,11 @@ The format of the generated argType will look something like: -In this ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how label gets rendered, and the control annotation provides extra information for the control for editing the property. +This ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how the label gets rendered, and the control annotation includes additional information for the control editing the property.
-`@storybook/addon-docs` provide shorthand for common tasks: +💡 The `@storybook/addon-docs` provide a shorthand for common tasks: - `type: 'number'` is shorthand for type: { name: 'number' } - `control: 'radio'` is shorthand for control: { type: 'radio' } @@ -59,7 +59,7 @@ In this ArgTypes data structure, name, type, defaultValue, and description are s #### Manual specification -If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above inferred argTypes and the following default export: +If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above-inferred argTypes and the following default export: @@ -71,7 +71,7 @@ If you want more control over the args table or any other aspect of using argTyp -These values--description, table.type, and controls.type--get merged over the defaults that are extracted by Storybook. The final merged values would be: +The `values.description`, `table.type`, and `controls.type` are merged into the defaults extracted by Storybook. The final merged values would be: @@ -86,9 +86,7 @@ These values--description, table.type, and controls.type--get merged over the de In particular, this would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
- -As it happens with other properties such as `args`, `argTypes` can be overridden in a single story. - +💡 As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis.
#### Using argTypes in addons @@ -103,4 +101,4 @@ If you want to access the argTypes of the current component inside an addon, you ]} /> - + \ No newline at end of file diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index 1011f5c4a1ea..9380c20d4e17 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -12,30 +12,36 @@ Pass these commands the following options to alter Storybook's behavior. Usage: start-storybook [options] ``` -| Options | Description | Example | -| ---------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- | -| --help | Output usage information | `start-storybook --help` | -| -V, --version | Output the version number | `start-storybook -V` | -| -p, --port [number] | Port to run Storybook | `start-storybook -p 9009` | -| -h, --host [string] | Host to run Storybook | `start-storybook -h my-host.com` | -| -s, --static-dir `` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `start-storybook -s public` | -| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `start-storybook -c .storybook` | -| --https | Serve Storybook over HTTPS. Note: You must provide your own certificate information. | `start-storybook --https` | -| --ssl-ca `` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) | `start-storybook --ssl-ca my-certificate` | -| --ssl-cert `` | Provide an SSL certificate. (Required with --https) | `start-storybook --ssl-cert my-ssl-certificate` | -| --ssl-key `` | Provide an SSL key. (Required with --https) | `start-storybook --ssl-key my-ssl-key` | -| --smoke-test | Exit after successful start | `start-storybook --smoke-test` | -| --ci | CI mode (skip interactive prompts, don't open browser) | `start-storybook --ci` | -| --no-open | Do not open Storybook automatically in the browser | `start-storybook --no-open` | -| --quiet | Suppress verbose build output | `start-storybook --quiet` | -| --no-dll | Do not use dll reference (no-op) | `start-storybook --no-dll` | -| --debug-webpack | Display final webpack configurations for debugging purposes | `start-storybook --debug-webpack` | -| `--webpack-stats-json ` | Write Webpack Stats JSON to disk | `start-storybook --webpack-stats-json /tmp/webpack-stats` | -| --docs | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) | `start-storybook --docs` | -| --no-manager-cache | Disables Storybook's manager caching mechanism. See note below. | `start-storybook --no-manager-cache` | +| Options | Description | +| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--help` | Output usage information
`start-storybook --help` | +| `-V`, `--version` | Output the version number
`start-storybook -V` | +| `-p`, `--port [number]` | Port to run Storybook
`start-storybook -p 9009` | +| `-h`, `--host [string]` | Host to run Storybook
`start-storybook -h my-host.com` | +| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`start-storybook -s public` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`start-storybook -c .storybook` | +| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information.
`start-storybook --https` | +| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`start-storybook --ssl-ca my-certificate` | +| `--ssl-cert` | Provide an SSL certificate. (Required with --https)
`start-storybook --ssl-cert my-ssl-certificate` | +| `--ssl-key` | Provide an SSL key. (Required with --https)
`start-storybook --ssl-key my-ssl-key` | +| `--smoke-test` | Exit after successful start
`start-storybook --smoke-test` | +| `--ci` | CI mode (skip interactive prompts, don't open browser)
`start-storybook --ci` | +| `--no-open` | Do not open Storybook automatically in the browser
`start-storybook --no-open` | +| `--quiet` | Suppress verbose build output
`start-storybook --quiet` | +| `--no-dll` | Do not use dll reference (no-op)
`start-storybook --no-dll` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`start-storybook --debug-webpack` | +| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`start-storybook --webpack-stats-json /tmp/webpack-stats` | +| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)
`start-storybook --docs` | +| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below.
`start-storybook --no-manager-cache` |
-💡 NOTE: The flag --no-manager-cache disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes. +💡 The flag --no-manager-cache disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes. +
+ +
+ +💡 Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information. +
## build-storybook @@ -44,20 +50,20 @@ Usage: start-storybook [options] Usage: build-storybook [options] ``` -| Options | Description | Example | -| ---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------- | -| -h, --help | Output usage information | `build-storybook --help` | -| -V, --version | Output the version number | `build-storybook -V` | -| -s, --static-dir `` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `build-storybook -s public` | -| -o, --output-dir [dir-name] | Directory where to store built files | `build-storybook -o /my-deployed-storybook` | -| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `build-storybook -c .storybook` | -| --loglevel [level] | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] | `build-storybook --loglevel warn` | -| --quiet | Suppress verbose build output | `build-storybook --quiet` | -| --no-dll | Do not use dll reference (no-op) | `build-storybook --no-dll` | -| --debug-webpack | Display final webpack configurations for debugging purposes | `build-storybook --debug-webpack` | -| `--webpack-stats-json ` | Write Webpack Stats JSON to disk | `build-storybook --webpack-stats-json /my-storybook/webpack-stats` | -| --docs | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs` | +| Options | Description | +| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`build-storybook --help` | +| `-V`, `--version` | Output the version number
`build-storybook -V` | +| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`build-storybook -s public` | +| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`build-storybook -o /my-deployed-storybook` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`build-storybook -c .storybook` | +| `--loglevel [level]` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]
`build-storybook --loglevel warn` | +| `--quiet` | Suppress verbose build output
`build-storybook --quiet` | +| `--no-dll` | Do not use dll reference (no-op)
`build-storybook --no-dll` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`build-storybook --debug-webpack` | +| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`build-storybook --webpack-stats-json /my-storybook/webpack-stats` | +| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)
`build-storybook --docs` |
-💡 NOTE: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, npm run build-storybook -- -o ./path/to/build. +💡 If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, npm run build-storybook -- -o ./path/to/build.
diff --git a/docs/api/csf.md b/docs/api/csf.md index b2d26ad635d6..af8b1d8041cb 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -6,7 +6,7 @@ Component Story Format (CSF) is the recommended way to [write stories](../writin
-If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/core/docs/storiesOf.md). +💡 If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/core/docs/storiesOf.md).
@@ -18,7 +18,7 @@ CSF is supported in all frameworks except React Native, where you should use the The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../writing-stories/naming-components-and-hierarchy.md#sorting-stories)), [decorators](../writing-stories/decorators.md), and [parameters](../writing-stories/parameters.md). -The `component` field is optional (but encouraged!), and is used by addons for automatic prop table generation and display of other component metadata. `title` should be unique, i.e. not re-used across files. +The `component` field is required and used by addons for automatic prop table generation and display of other component metadata. The `title` field is optional and should be unique (i.e., not re-used across files). @@ -34,16 +34,18 @@ For more examples, see [writing stories](../writing-stories/introduction.md). ## Named story exports -With CSF, every named export in the file represents a story function by default. +With CSF, every named export in the file represents a story object by default. @@ -59,11 +61,11 @@ The exported identifiers will be converted to "start case" using Lodash's [start | some_custom_NAME | Some Custom NAME | | someName1234 | Some Name 1 2 3 4 | -It's recommended to start export names with a capital letter. +We recommend that all export names to start with a capital letter. -Story functions can be annotated with a few different fields to define story-level [decorators](../writing-stories/decorators.md) and [parameters](../writing-stories/parameters.md), and also to define the `storyName` of the story. +Story objects can be annotated with a few different fields to define story-level [decorators](../writing-stories/decorators.md) and [parameters](../writing-stories/parameters.md), and also to define the `name` of the story. -The `storyName` is useful if you want to use names with special characters, names that correspond to restricted keywords in Javascript, or names that collide with other variables in the file. If it's not specified, the export name will be used instead. +Storybook's `name` configuration element is helpful in specific circumstances. Common use cases are names with special characters or Javascript restricted words. If not specified, Storybook defaults to the named export. @@ -86,10 +88,12 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def @@ -104,13 +108,13 @@ Now consider the same example, re-written with args: 'react/button-story-click-handler-args.js.mdx', 'vue/button-story-click-handler-args.2.js.mdx', 'vue/button-story-click-handler-args.3.js.mdx', + 'angular/button-story-click-handler-args.ts.mdx', ]} /> - -At first blush this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write: +At first blush, this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write: @@ -131,24 +135,46 @@ Or even more simply: -Not only are these versions shorter and easier to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically. +Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically. For more information on setting up [Docs](../writing-docs/introduction.md) and [Actions](../essentials/actions.md), see their respective documentation. -## Storybook export vs name handling +## Play function -Storybook handles named exports and `story.name` slightly differently. When should you use one vs. the other? +Storybook's `play` functions are small snippets of code executed when the story renders in the UI. They are convenient helper methods to help you test use cases that otherwise weren't possible or required user intervention. -The named export is always used to determine the story ID / URL. +A good use case for the `play` function is a form component. With previous Storybook versions, you'd write your set of stories and had to interact with the component to validate it. With Storybook's play functions, you could write the following story: -If you specify `story.name`, it will be used as the story display name in the UI. + + + + + + +When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction. + +## Storybook export vs. name handling + +Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other? + +Storybook will always use the named export to determine the story ID and URL. -If you don't specify `story.name`, the named export will be used to generate the display name. Storybook passes the named export through a `storyNameFromExport` function, which is implemented with `lodash.startCase`: +If you specify the `name` option, it will be used as the story display name in the UI. Otherwise, it defaults to the named export, processed through Storybook's `storyNameFromExport` and `lodash.startCase` functions. @@ -160,18 +186,18 @@ If you don't specify `story.name`, the named export will be used to generate the -When you want to change the name of your story, just rename the CSF export. This will change the name of the story and also change the story's ID and URL. +When you want to change the name of your story, rename the CSF export. It will change the name of the story and also change the story's ID and URL. -You should use the `story.name` option in the following cases: +It would be best if you used the `name` configuration element in the following cases: -1. You want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g. reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by `storyNameFromExport`. -2. You want to preserve the Story ID independently from changing how it's displayed. Having stable Story ID's is useful for integration with third party tools. +1. You want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g., reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by `storyNameFromExport`. +2. You want to preserve the Story ID independently from changing how it's displayed. Having stable Story IDs is helpful for integration with third-party tools. ## Non-story exports -In some cases, you may want to export a mixture of story and non-stories. For example, it can be useful to export data that's used in your stories. +In some cases, you may want to export a mixture of stories and non-stories (e.g., mocked data). -To make this possible, you can use optional `includeStories` and `excludeStories` configuration fields in the default export, which can be set to either an array of strings, or a regular expression. +You can use the optional configuration fields `includeStories` and `excludeStories` in the default export to make this possible. You can define them as an array of strings or regular expressions. Consider the following story file: @@ -180,16 +206,19 @@ Consider the following story file: -When Storybook loads this file, it will see all the exports, but it will ignore the data exports and only treat `SimpleStory` and `ComplexStory` as stories. +When this file renders in Storybook, it treats `ComplexStory` and `SimpleStory` as stories and ignores the `data` named exports. -For this specific example the equivalent result can be achieved in a few ways depending on what's convenient: +For this particular example, you could achieve the same result in different ways, depending on what's convenient: - `includeStories: /^[A-Z]/` - `includeStories: /.*Story$/` @@ -198,4 +227,4 @@ For this specific example the equivalent result can be achieved in a few ways de - `excludeStories: /.*Data$/` - `excludeStories: ['simpleData', 'complexData']` -If you follow the best practice of starting story exports with an uppercase letter (i.e. use UpperCamelCase), the first option is the recommended solution. +The first option is the recommended solution if you follow the best practice of starting story exports with an uppercase letter (i.e., use UpperCamelCase). \ No newline at end of file diff --git a/docs/api/frameworks-feature-support.md b/docs/api/frameworks-feature-support.md index 8b1ae823ed3d..94bab1ebf95c 100644 --- a/docs/api/frameworks-feature-support.md +++ b/docs/api/frameworks-feature-support.md @@ -16,4 +16,4 @@ Core frameworks have dedicated maintainers or contributors who are responsible f Community frameworks have fewer contributors which means they may not be as up to date as core frameworks. If you use one of these frameworks for your job, please consider contributing to its integration with Storybook. - + \ No newline at end of file diff --git a/docs/api/mdx.md b/docs/api/mdx.md index 61c2ca74dab8..4783ec5f12a3 100644 --- a/docs/api/mdx.md +++ b/docs/api/mdx.md @@ -20,27 +20,28 @@ Let's get started with an example that combines Markdown with a single story: -And here's how that's rendered in Storybook: +And here's how it renders in Storybook: ![Show a simple mdx example](./mdx-simple.png) -As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem. +As you can see, a lot is going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem. Let's break it down. ## MDX-Flavored CSF -[MDX](https://mdxjs.com/) is a standard file format that combines Markdown with JSX. This means you can use Markdown’s terse syntax (such as `# heading`) for your documentation, and freely embed JSX component blocks at any point in the file. +[MDX](https://mdxjs.com/) is a standard file format that combines Markdown with JSX. It means you can use Markdown’s terse syntax (such as `# heading`) for your documentation and freely embed JSX component blocks at any point in the file. -MDX-flavored [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) includes a collection of components called **"Doc Blocks"**, that allow Storybook to translate MDX files into storybook stories. MDX-defined stories are identical to regular Storybook stories, so they can be used with Storybook's entire ecosystem of addons and view layers. +MDX-flavored [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) includes a collection of components called **"Doc Blocks"**, that allow Storybook to translate MDX files into Storybook stories. MDX-defined stories are identical to regular Storybook stories, so they can be used with Storybook's entire ecosystem of addons and view layers. -For example, here's the story from `Checkbox` example above, rewritten in CSF: +For example, here's the story from the `Checkbox` example above, rewritten in CSF: -There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user, this means your existing Storybook knowledge should translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable. +There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user, this means your existing Storybook knowledge should translate between the three constructs. And technically, this means that the transformations that happen under the hood are predictable and straightforward. ## Writing stories @@ -101,7 +102,7 @@ To add [decorators](../writing-docs/mdx.md#decorators-and-parameters) and [param -In addition, global decorators work just like before, e.g. adding the following to your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering): +In addition, global decorators work just like before, e.g., adding the following to your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering): @@ -113,20 +114,38 @@ In addition, global decorators work just like before, e.g. adding the following +### Play function + +Storybook's `play` functions are small snippets of code that run after the story loads. They're helpful methods to help test scenarios that otherwise would require user intervention. For example, if you're working on a login component and want to interact with it and verify the component's workflow, you could write the following story: + + + + + + + ## Documentation-only MDX -Typically, when you use Storybook MDX, you define stories in the MDX and the documentation is automatically associated with those stories. But what if you want to write Markdown-style documentation and have it show up in your Storybook? +Typically, when you use the MDX format, you define your stories and are automatically generated by Storybook. But what if you want to write Markdown-style documentation and have it show up in your Storybook? -If you don't define stories in your MDX, you can write MDX documentation and associate it with an existing story, or embed that MDX as its own documentation node in your Storybook's navigation. +Suppose you don't define stories in your MDX. In that case, you can write MDX documentation and associate it with an existing story or embed that MDX as its documentation node in your Storybook's navigation. -If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](../writing-docs/mdx.md). +If you don't define a `Meta`, you can write Markdown and associate it with an existing story. See ["CSF Stories with MDX Docs"](../writing-docs/mdx.md). -To get a "documentation-only story", in your UI, define a `` as you normally would, but don't define any stories. It will show up in your UI as a documentation node: +To get a "documentation-only story" in your UI, define a `` as you usually would, but don't define any stories. It will show up in your UI as a documentation node: ![Show documentation](./mdx-documentation-only.png) ## MDX file names -Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `` and `` elements in the file. +Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. It tells Storybook to apply its special processing to the `` and `` elements in the file. -Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](https://github.com/storybookjs/storybook/tree/master/addons/docs#installation). +Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](https://github.com/storybookjs/storybook/tree/master/addons/docs#installation). \ No newline at end of file diff --git a/docs/api/new-frameworks.md b/docs/api/new-frameworks.md index 5164c1af24f1..940417731bf1 100644 --- a/docs/api/new-frameworks.md +++ b/docs/api/new-frameworks.md @@ -2,33 +2,33 @@ title: 'Frameworks' --- -Storybook is architected to support diverse web frameworks including React, Vue, Angular, Web Components, Svelte and over a dozen others. This guide helps you get started on adding new framework support for Storybook. +Storybook is architected to support diverse web frameworks, including React, Vue, Angular, Web Components, Svelte, and over a dozen others. This guide helps you get started on adding new framework support for Storybook. ## Scaffolding a new framework -The first thing to do is scaffold your framework support in its own repo. +The first thing to do is to scaffold your framework support in its own repo. We recommend adopting the same project structure as the Storybook monorepo. That structure contains the framework package (`app/`) and an example app (`examples/-kitchen-sink`) as well as other associated documentation and configuration as needed. -This may seem like a little more hierarchy than what’s necessary. But because the structure mirrors the way Storybook’s own monorepo is structured, you can reuse Storybook’s tooling and it also makes it easier to move the framework into the Storybook into the monorepo at a later point if that is desirable. +It may seem like a little more hierarchy than what’s necessary. But because the structure mirrors the way Storybook’s monorepo is structured, you can reuse Storybook’s tooling. It also makes it easier to move the framework into the Storybook monorepo later if that is desirable. -We recommend using `@storybook/html` as a starter framework since it’s the simplest one and doesn’t contain any framework-specific oddities. There is a boilerplate to get you started [here](https://github.com/CodeByAlex/storybook-framework-boilerplate). +We recommend using `@storybook/html` as a starter framework since it’s the simplest and contains no framework-specific peculiarities. There is a boilerplate to get you started [here](https://github.com/CodeByAlex/storybook-framework-boilerplate). ## Framework architecture Supporting a new framework in Storybook typically consists of two main aspects: -1. Configuring the server. In Storybook, the server is the node process that runs when you `start-storybook` or `build-storybook`. Configuring the server typically means configuring babel and webpack in framework-specific ways. +1. Configuring the server. In Storybook, the server is the node process that runs when you run `start-storybook` or `build-storybook`. Configuring the server typically means configuring babel and webpack in framework-specific ways. -2. Configuring the client. The client is the code that runs in the browser. Configuring the client means providing a framework-specific story rendering function. +2. Configuring the client. The client is the code that runs in the browser, and configuring it, means providing a framework-specific story rendering function. ## Configuring the server -Storybook has the concept of [presets](../addons/writing-presets.md#presets-api), which are typically babel/webpack configurations for file loading. If your framework has its own file format, e.g. “.vue,” you might need to transform these files into JS files at load time. If you expect every user of your framework to need this, you should add it to the framework. So far every framework added to Storybook has done this, because Storybook’s core configuration is very minimal. +Storybook has the concept of [presets](../addons/writing-presets.md), which are typically babel/webpack configurations for file loading. If your framework has its own file format (e.g., “.vue”), you might need to transform them into JavaScript files at load time. If you assume every user of your framework needs this, you should add it to the framework. So far, every framework added to Storybook has done it because Storybook’s core configuration is extremely minimal. ### Package structure -To add a framework preset, it’s useful to understand the package structure. Each framework typically exposes two executables in its `package.json`: +It's helpful to understand Storybook's package structure before adding a framework preset. Each framework typically exposes two executables in its `package.json`: ```json { @@ -53,8 +53,7 @@ For example, here’s the boilerplate to start the dev server in `start-storyboo - -Thus the meat of adding framework presets is filling in that options object. +Thus the essence of adding framework presets is just filling in that options object. ### Server options @@ -72,36 +71,33 @@ Let’s look at the `@storybook/vue`’s options definition: -The value of the `framework` option (in this case ‘vue’) is something that gets passed to addons and allows them to do special case things for your framework. +The value of the `framework` option (i.e., ‘vue’) is something that gets passed to addons and allows them to do specific tasks related to your framework. -The real meat of this file is the framework presets, and these are standard [Storybook presets](./addons.md#addon-presets) -- you can look at framework packages in the Storybook monorepo (e.g. [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/server/options.ts), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/server/options.ts), [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/server/options.ts)) to see examples of framework-specific customizations. +The essence of this file is the framework presets, and these are standard [Storybook presets](../addons/writing-presets.md) -- you can look at framework packages in the Storybook monorepo (e.g. [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/server/options.ts), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/server/options.ts), [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/server/options.ts)) to see examples of framework-specific customizations. -When developing your own framework that is not published by storybook, you can pass the path to the framework location with the `frameworkPath` key: +While developing your custom framework, not maintained by Storybook, you can specify the path to the location file with the `frameworkPath` key: -```ts -// my-framework/src/server/options.ts + -import { sync } from 'read-pkg-up'; + -export default { - packageJson: sync({ cwd: __dirname }).packageJson, - framework: 'my-framework', - frameworkPath: '@my-framework/storybook', - frameworkPresets: [require.resolve('./framework-preset-my-framework.js')], -}; -``` + -Passing a relative path to `frameworkPath` is also possible, just keep in mind that these are resolved from the storybook config directory (`.storybook` by default). +You can add a relative path to `frameworkPath`. Don't forget that they resolve from the Storybook configuration directory (i.e., `.storybook`) by default. Make sure the `frameworkPath` ends up at the `dist/client/index.js` file within your framework app. ## Configuring the client -To configure the client, you must provide a framework specific render function. Before diving into the details, it’s important to understand how user-written stories relate to what is finally rendered on the screen. +To configure the client, you must provide a framework-specific render function. Before diving into the details, it’s essential to understand how user-written stories relate to what renders on the screen. ### Renderable objects -Storybook stories are ES6 functions that return a “renderable object.” +Storybook stories are ES6 objects that return a “renderable object.” Consider the following React story: @@ -117,7 +113,7 @@ Consider the following React story: In this case, the renderable object is the React element, `
-You can also pass these environment variables when you are [building your Storybook](../workflows/publish-storybook.md) with `build-storybook`. +You can also pass these environment variables when you are [building your Storybook](../sharing/publish-storybook.md) with `build-storybook`. -Then they'll be hard coded to the static version of your Storybook. +Then they'll be hardcoded to the static version of your Storybook. ### Using environment variables to choose the browser -Storybook allows you to choose the browser you want to preview your stories. Either through an `.env` file entry or directly in your `storybook` script. +Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script. The table below lists the available options: | Browser | Example | -|----------|----------------------| +| -------- | -------------------- | | Safari | `BROWSER="safari"` | | Firefox | `BROWSER="firefox"` | | Chromium | `BROWSER="chromium"` |
-Note: By default Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly. +💡 By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md index 4d419ef78979..42d791c02226 100644 --- a/docs/configure/features-and-behavior.md +++ b/docs/configure/features-and-behavior.md @@ -16,42 +16,42 @@ To control the layout of Storybook’s UI you can use `addons.setConfig` in your The following table details how to use the API values: -| Name | Type | Description | Example Value | -| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:| -| **isFullscreen** | Boolean |Show story component as full screen |`false` | -| **showNav** | Boolean |Display panel that shows a list of stories |`true` | -| **showPanel** | Boolean |Display panel that shows addon configurations |`true` | -| **panelPosition** | String/Object |Where to show the addon panel |`bottom` or `right` | -| **enableShortcuts** | Boolean |Enable/disable shortcuts |`true` | -| **isToolshown** | Boolean |Show/hide tool bar |`true` | -| **theme** | Object |Storybook Theme, see next section |`undefined` | -| **selectedPanel** | String |Id to select an addon panel |`storybook/actions/panel` | -| **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` | -| **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` | -| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` | +| Name | Type | Description | Example Value | +| ------------------- | :-----------: | :------------------------------------------------: | :-----------------------------------: | +| **isFullscreen** | Boolean | Show story component as full screen | `false` | +| **showNav** | Boolean | Display panel that shows a list of stories | `true` | +| **showPanel** | Boolean | Display panel that shows addon configurations | `true` | +| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` | +| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` | +| **isToolshown** | Boolean | Show/hide tool bar | `true` | +| **theme** | Object | Storybook Theme, see next section | `undefined` | +| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` | +| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` | +| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` | +| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` | The following options are configurable under the `sidebar` namespace: -| Name | Type | Description | Example Value | -| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:| -| **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` | -| **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` | -| **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => {item.name}`| +| Name | Type | Description | Example Value | +| ------------------ | :------: | :-----------------------------------------------------------: | :----------------------------------------------: | +| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` | +| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` | +| **renderLabel** | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => {item.name}` | The following options are configurable under the `toolbar` namespace: -| Name | Type | Description | Example Value | -| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:| -| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` | +| Name | Type | Description | Example Value | +| ------ | :----: | :--------------------------------: | :-----------------: | +| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` | ## Configuring through URL parameters -Some features can be controlled through URL parameters: +You can use URL parameters to configure some of the available features: -| Config option | Query param | Supported values | -| ----------------------|:-------------:|:--------------------------:| -| **enableShortcuts** | `shortcuts` | `false` | -| **isFullscreen** | `full` | `true` | -| **showNav** | `nav` | `false` | -| **showPanel** | `panel` | `false`, `right`, `bottom` | -| **selectedPanel** | `addonPanel` | Any panel ID | +| Config option | Query param | Supported values | +| ------------------- | :----------: | :------------------------: | +| **enableShortcuts** | `shortcuts` | `false` | +| **isFullscreen** | `full` | `true` | +| **showNav** | `nav` | `false` | +| **showPanel** | `panel` | `false`, `right`, `bottom` | +| **selectedPanel** | `addonPanel` | Any panel ID | \ No newline at end of file diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index a680ed3a8a2a..779a8c7bb3f6 100644 --- a/docs/configure/images-and-assets.md +++ b/docs/configure/images-and-assets.md @@ -6,15 +6,16 @@ Components often rely on images, videos, fonts, and other assets to render as th ### Import assets into stories -You can import any media assets by importing (or requiring) them. This works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the file-loader to handle the required files. +You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://v4.webpack.js.org/loaders/) to handle the required files. -Afterwards you can use any asset in your stories: +Afterward, you can use any asset in your stories: -You can map your local static directories to a different path like this: + -```js -{ - ... - staticDirs: [{ from: './public', to: '/assets' }]; - ... -} -``` + -Here `./public` is your static directory. Now use it in a component or story like this. +Here `../public` is your static directory. Now use it in a component or story like this. + + + + + +Or even use a configuration object to define the directories: + + + + + + ### **[⚠️ Deprecated]** Serving static files via Storybook CLI @@ -105,13 +98,14 @@ Using `--static-dir` or `-s` option with Storybook CLI is deprecated. It is reco ### Reference assets from a CDN -Upload your files to an online CDN and reference them. In this example we’re using a placeholder image service. +Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service. -Note you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts. +Note that you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts.
## Configure your Storybook project -The main configuration file is `main.js`. This file controls the behavior of the Storybook server, and so you must restart Storybook’s process when you change it. It contains the following: +The main configuration file is `main.js`. This file controls the Storybook server's behavior, so you must restart Storybook’s process when you change it. It contains the following: @@ -24,7 +24,7 @@ The main configuration file is `main.js`. This file controls the behavior of the -The `main.js` configuration file is a [preset](../addons/addon-types.md) and as such has a powerful interface, but the key fields within it are: +The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are: - `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`. - `addons` - a list of the [addons](/addons) you are using. @@ -32,23 +32,23 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and as - `babel` - custom [babel configuration](./babel.md).
- Tip: Customize your default story by referencing it first in the `stories` array. + 💡 Tip: Customize your default story by referencing it first in the `stories` array.
## Configure story loading -By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.js`. The intention is you colocate a story file with the component it documents. +By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.*`. The intention is you colocate a story file with the component it documents. ``` • └── components - ├── Button.js - └── Button.stories.js + ├── Button.js + └── Button.stories.js ``` If you want to use a different naming convention, you can alter the glob, using the syntax supported by [picomatch](https://github.com/micromatch/picomatch#globbing-features). -For example if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write: +For example, if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write: @@ -60,20 +60,77 @@ For example if you wanted to pull both `.md` and `.js` files from the `my-projec -If you want to use a custom logic for loading stories which is not supported by a glob pattern, you can supply the final list of stories files: +### With a configuration object -```js -// .storybook/main.js +Additionally, you can also customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a `packages` directory, you could adjust your `stories` configuration field into the following: -function findStories() { - // your custom logic returns a list of files -} + -module.exports = { - stories: async (list) => [...list, ...findStories()], -}; -``` + + + + +
+💡 If you've enabled on-demand story loading, this option will not work. You must define the story's titles manually. +
+ +When Storybook starts, it will look for any file containing the `stories` extension inside the `packages/stories` directory and generate the titles for your stories. + +### With a directory + +You can also simplify your Storybook configuration and load the stories based on a directory. For example, if you want to load all the stories inside a `packages/MyStories`, you can adjust the configuration as such: + + + + + + + +### With a custom implementation + +You can also adjust your Storybook configuration and implement your own custom logic for loading your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve, in that case, you could adjust your configuration as follows: + + + + + + + +### On-demand story loading + +As your Storybook grows in size, it gets challenging to load all of your stories in a performant way, slowing down the loading times and yielding a large bundle. Starting with Storybook 6.4, you can optimize your story loading by enabling the `storyStoreV7` feature flag in your configuration as follows: + + + + + + + +Once you've restarted your Storybook, you'll see an almost immediate performance gain in your loading times and also a decrease in the generated bundle. + +#### Known limitations + +This feature is experimental, and it has some limitations on what you can and cannot do in your stories files. If you plan to use it, you'll need to take into consideration the following limitations: +- [CSF formats](../api/csf.md) from version 1 to version 3 are supported. The `storiesOf` construct is not. +- You must manually set the story's titles and names (e.g., `title: 'MyComponent`). +- Custom`storySort` functions are allowed based on a restricted API. ## Configure story rendering @@ -85,10 +142,10 @@ The `preview.js` file can be an ES module and export the following keys: - `parameters` - an object of global [parameters](../writing-stories/parameters.md#global-parameters) - `globalTypes` - definition of [globalTypes](../essentials/toolbars-and-globals.md#global-types-and-the-toolbar-annotation) -If you’re looking to change how your stories are ordered, read about [sorting stories](../writing-stories/naming-components-and-hierarchy.md#sorting-stories). +If you’re looking to change how to order your stories, read about [sorting stories](../writing-stories/naming-components-and-hierarchy.md#sorting-stories). ## Configure Storybook’s UI -To control the behaviour of Storybook’s UI (the **“manager”**), you can create a `.storybook/manager.js` file. +To control the behavior of Storybook’s UI (the **“manager”**), you can create a `.storybook/manager.js` file. -This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md). +This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md). \ No newline at end of file diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md index bcf9cb2d3161..774d47fabf7d 100644 --- a/docs/configure/sidebar-and-urls.md +++ b/docs/configure/sidebar-and-urls.md @@ -2,7 +2,7 @@ title: 'Sidebar & URLS' --- -Storybook’s sidebar lists all your stories grouped by component. When you have a lot of components you may wish to also group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes: +Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes: ![Storybook sidebar anatomy](./sidebar-anatomy.jpg) @@ -10,7 +10,7 @@ We recommend using a nesting scheme that mirrors the filesystem path of the comp ## Roots -By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups are displayed as folders: +By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups will show up as folders: ![Storybook sidebar story roots](./sidebar-roots.jpg) @@ -28,7 +28,7 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can ## Generating titles based on `__dirname` -As a CSF file is a JavaScript file, the exports (including the default export) can be generated dynamically. In particular you can use the `__dirname` variable to generate the title based on the path name (this example uses the paths.macro): +As a CSF file is a JavaScript file, all exports (including the default export) can be generated dynamically. In particular you can use the `__dirname` variable to create the title based on the path name (this example uses the paths.macro): @@ -40,9 +40,11 @@ As a CSF file is a JavaScript file, the exports (including the default export) c +If you need, you can also generate automatic titles for all your stories using a configuration object. See the [story loading](./overview.md#with-a-configuration-object) documentation to learn how you can use this feature. + ## Permalinking to stories -By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story and that URL can serve as a permalink (especially when you [publish](../workflows/publish-storybook.md) your Storybook). +By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../sharing/publish-storybook.md) your Storybook). Consider the following story: @@ -58,7 +60,7 @@ Consider the following story: Storybook's ID-generation logic will give this the `id` `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`. -It is possible to manually set the id of a story, which in particular is useful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that: +It is possible to manually set the id of a story, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that: @@ -70,4 +72,4 @@ It is possible to manually set the id of a story, which in particular is useful -Storybook will prioritize the `id` over the title for ID generation, if provided, and will prioritize the `story.name` over the export key for display. +Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display. \ No newline at end of file diff --git a/docs/configure/story-layout.md b/docs/configure/story-layout.md index 18636441f8fa..8cdb795498f3 100644 --- a/docs/configure/story-layout.md +++ b/docs/configure/story-layout.md @@ -54,4 +54,4 @@ Or even apply it to specific stories like so: ]} /> - + \ No newline at end of file diff --git a/docs/configure/story-rendering.md b/docs/configure/story-rendering.md index f982f42bf27f..b4b302810c6a 100644 --- a/docs/configure/story-rendering.md +++ b/docs/configure/story-rendering.md @@ -2,11 +2,11 @@ title: 'Story rendering' --- -In Storybook, your stories render in a special “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the HTML that is rendered to help your stories render correctly. +In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly. ## Adding to <head> -If you need to add extra elements to the `head` of the preview iframe, for instance to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview.md#configure-story-rendering) and add tags like this: +If you need to add extra elements to the `head` of the preview iframe, for instance, to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview.md#configure-story-rendering) and add tags like this: @@ -18,21 +18,19 @@ If you need to add extra elements to the `head` of the preview iframe, for insta -
-Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI. +Storybook will inject these tags into the _preview iframe_ where your components render, not the Storybook application UI.
-It's also possible to programmatically modify the preview head HTML using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates). - +It's also possible to modify the preview head HTML programmatically using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates). ## Adding to <body> -Sometimes, you may need to add different tags to the ``. This is useful for adding some custom content roots. +Sometimes, you may need to add different tags to the ``. Helpful for adding some custom content roots. -You can accomplish this by creating a file called `preview-body.html` inside your `.storybook` directory and add tags like this: +You can accomplish this by creating a file called `preview-body.html` inside your `.storybook` directory and adding tags like this: @@ -58,8 +56,8 @@ If using relative sizing in your project (like `rem` or `em`), you may update th
-Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI. +Storybook will inject these tags into the _preview iframe_ where your components render, not the Storybook application UI.
-Similarly to the preview head HTML, preview body HTML can also be updated programmtically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information. +Similarly to the preview head HTML, preview body HTML can also be updated programmtically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information. \ No newline at end of file diff --git a/docs/configure/storybook-addons.md b/docs/configure/storybook-addons.md index 1c56f9065d57..55b33eac648d 100644 --- a/docs/configure/storybook-addons.md +++ b/docs/configure/storybook-addons.md @@ -22,4 +22,4 @@ There are many, many Storybook addons, but they can be roughly categorized into - **Essential** addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations. - **Core** addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons). -- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/). +- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/). \ No newline at end of file diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md index 5f00aa2c9969..cd807345757c 100644 --- a/docs/configure/styling-and-css.md +++ b/docs/configure/styling-and-css.md @@ -2,18 +2,18 @@ title: 'Styling and CSS' --- -There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually it is best to try and replicate what your application does with styling in Storybook’s configuration. +There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration. ### CSS-in-JS -CSS-in-JS libraries are designed to use basic JavaScript. They often work in Storybook without any extra configuration. Some libraries expect components to be rendered in a specific rendering “context” (for example, to provide themes) and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it. +CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it. ### Importing CSS files -If your component files import their own CSS, Storybook’s webpack config will work unmodified with some exceptions: +If your component files import their CSS, Storybook’s webpack config will work unmodified with some exceptions: - If you are using a CSS precompiler, you may need to add a preset (such as the [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss), or add a loader to Storybook’s webpack config). -- In Angular, you'll need to take special care how you handle CSS: +- In Angular, you'll need to take special care of how you handle CSS: - Either [customize your webpack config](./webpack#extending-storybooks-webpack-config) - Or use syntax to use a inline loader: @@ -28,8 +28,8 @@ If your component files import their own CSS, Storybook’s webpack config will -To use your CSS in all stories, you simply import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering) +To use your CSS in all stories, you import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering) ### Adding webfonts -If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook). +If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook). \ No newline at end of file diff --git a/docs/configure/theming.md b/docs/configure/theming.md index 076b170cc0d2..e2928d0826cd 100644 --- a/docs/configure/theming.md +++ b/docs/configure/theming.md @@ -8,7 +8,7 @@ Storybook is theme-able using a lightweight theming API. It's possible to theme Storybook globally. -Storybook includes two themes that look good out of the box: "normal" (a light theme) and "dark" (a dark theme). Unless you've set your preferred color scheme as dark, Storybook will use the light theme as default. +Storybook includes two themes that look good out of the box: "light" and "dark". Unless you've set your preferred color scheme as dark, Storybook will use the light theme as default. Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package/@storybook/addons) and [`@storybook/theming`](https://www.npmjs.com/package/@storybook/theming) packages. @@ -82,9 +82,9 @@ Inside your `.storybook` directory, create a new file called `YourTheme.js` and Above, we're creating a new theme that will: -- Use Storybook's `light` theme as a baseline. -- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable). -- Add custom branding information. +- Use Storybook's `light` theme as a baseline. +- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable). +- Add custom branding information. Finally, we'll need to import the theme into Storybook. Create a new file called `manager.js` in your `.storybook` directory and add the following: @@ -116,8 +116,8 @@ Let's take a look at a more complex example. Copy the code below and paste it in Above, we're updating the theme with the following changes: -- A custom color palette (defined in the `app` and `color` variables). -- Custom fonts (defined in the `font` and `text` variables). +- A custom color palette (defined in the `app` and `color` variables). +- Custom fonts (defined in the `font` and `text` variables). With the new changes introduced, the custom theme should yield a similar result. @@ -131,7 +131,7 @@ The `@storybook/theming` package is built using TypeScript, which should help cr ## CSS escape hatches -The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all UI and Docs components are tagged with class names to make this possible. This is advanced usage: **use at your own risk**. +The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all UI and Docs components are tagged with class names to make this possible. **Use at your own risk** as this is an advanced feature. To style these elements, insert style tags into: @@ -146,7 +146,7 @@ To style these elements, insert style tags into: ## MDX component overrides -If you're using MDX for docs, there's one more level of "themability". MDX allows you to completely override the components that are rendered from Markdown using a components parameter. It's an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it. +If you're using MDX for docs, there's one more level of "themability". MDX allows you to completely override the rendered components from Markdown using a `components` parameter. It's an advanced usage that we don't officially support in Storybook, but it's a powerful construct if you need it. Here's how you might insert a custom code renderer for `code` blocks on the page, in [`.storybook/preview.js`](./overview.md#configure-story-rendering): diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md index 05e058060c6c..6534edce7e19 100644 --- a/docs/configure/typescript.md +++ b/docs/configure/typescript.md @@ -2,7 +2,7 @@ title: 'TypeScript' --- -Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed [unless you use the `paths` option in your TSConfig.](./webpack#typescript-module-resolution) +Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed. ### Default configuration @@ -18,7 +18,7 @@ Each framework uses the base configuration unless otherwise specified: To make it easier to configure Typescript handling, use the `typescript` field in your [`.storybook/main.js`](./overview.md#configure-story-rendering). -The following code snippets shows the fields for you to use with TypeScript: +The following code snippets show the fields for you to use with TypeScript: @@ -37,15 +37,13 @@ The following code snippets shows the fields for you to use with TypeScript: | **reactDocgen** | React | Which react docgen processor to run: `"react-docgen-typescript"`, `"react-docgen"`, `false` | string or false | | **reactDocgenTypescriptOptions** | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) | -See default values [here](https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/presets/common-preset.ts#L51) - ### Overriding the configuration to infer additional props -The configuration provided above will remove any props from any third party libraries. +The configuration provided above will remove any props from any third-party libraries. -If it's required you can adjust the configuration and include the extra props. +If required, you can adjust the configuration and include the extra props. -Adjust the configuration as shown below and any third party props will be displayed as soon as you restart your Storybook. +Adjust the configuration as demonstrated below. And the next time you restart your Storybook, the extra props will also be in the UI. @@ -57,8 +55,6 @@ Adjust the configuration as shown below and any third party props will be displa -Next time you restart your Storybook the extra props will also be in the UI. -
-If you run into an issue where the extra props aren't included, check how your component is being exported. If it's using a default export, change it to a named export and the extra props will be included as well. -
+If you run into an issue where any additional props don't show up, check your component's code. If you're using a default export, change it to a named export, and doing that will ensure that the additional props are included. +
\ No newline at end of file diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md index 2bbecc54ac18..4cc4322328e4 100644 --- a/docs/configure/upgrading.md +++ b/docs/configure/upgrading.md @@ -2,11 +2,11 @@ title: 'Upgrading Storybook' --- -The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a way of life, whether it's upgrading a framework, library, tooling, or all of the above! Storybook provides a few resources to help ease the pain of upgrading. +The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a way of life, whether upgrading a framework, library, tooling, or all of the above! Storybook provides a few resources to help ease the pain of upgrading. ## Upgrade script -The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bugfixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year. +The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year. To help ease the pain of keeping Storybook up-to-date, we provide a command-line script: @@ -14,23 +14,23 @@ To help ease the pain of keeping Storybook up-to-date, we provide a command-line npx sb upgrade ``` -This upgrades all of the Storybook packages in your project to the latest stable version, performs confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to automatically update your configuration. +This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
-In addition to running the command, we also recommend skimming [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), an exhaustive log of relevant changes and deprecations that might affect your upgrade. +In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
## Automigrate script -Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [webpack 4 to webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for: +Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for: ``` npx sb@next automigrate ``` -This runs a set of common configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. This gets run automatically as part of [`sb upgrade`](#upgrade-script), but it's also available on its own in case you don't want to upgrade Storybook. +It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook. ## Prereleases @@ -42,4 +42,4 @@ To upgrade to the latest pre-release: npx sb@next upgrade --prerelease ``` -If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install. +If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install. \ No newline at end of file diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md index af197f41a5b1..19657a0a79d2 100644 --- a/docs/configure/webpack.md +++ b/docs/configure/webpack.md @@ -2,7 +2,7 @@ title: 'Webpack' --- -Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other common use cases. +Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other everyday use cases. You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file. @@ -43,10 +43,11 @@ You can import `.json` files and have them expanded to a JavaScript object: If you want to know the exact details of the webpack config, the best way is to run either of the following: ```shell + +## Development mode yarn start-storybook --debug-webpack -``` -```shell +## Production mode yarn build-storybook --debug-webpack ``` @@ -56,7 +57,7 @@ To extend the above configuration, use the `webpackFinal` field of [`.storybook/ The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, and this will have information about where config came from, whether we're in production or development mode, etc. -For example, here's a `.storybook/main.js` to add [Sass](https://sass-lang.com/) support: +For example, if you wanted to add [Sass](https://sass-lang.com/) support, you can adjust your configuration as such: @@ -108,12 +109,28 @@ The following code snippet shows how you can replace the loaders from Storybook
-💡 Note: Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., /projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions. +💡 Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., /projectRoot/node_modules/@vue/cli-service/webpack.config.js) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
+### Bundle splitting + +Starting with Storybook 6.4, [bundle splitting](https://v4.webpack.js.org/guides/code-splitting/) is supported through a configuration flag. Update your Storybook configuration and add the `storyStoreV7` flag: + + + + + + + +When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./overview.md#on-demand-story-loading). + ### TypeScript Module Resolution -When working with TypeScript projects the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like: +When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like: @@ -127,4 +144,4 @@ When working with TypeScript projects the default Webpack configuration may fail
💡 Learn more about Storybook's built-in TypeScript support or see this issue for more information. -
+
\ No newline at end of file diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md index 35f873c11bc9..09bfafecc0d9 100644 --- a/docs/contribute/how-to-reproduce.md +++ b/docs/contribute/how-to-reproduce.md @@ -17,7 +17,7 @@ npx sb@next repro ```
-💡 Note: You can add the --template flag to include a custom template. +💡 You can add the --template flag to include a custom template.
Next, select the framework, for example, `react`: @@ -33,7 +33,7 @@ Finally, enter a location for your reproduction: ![Storybook reproduction location](./storybook-reproduction-generator-location-optimized.png)
-💡 Note: If you don't provide a full path for the reproduction it will be generated in the current directory. +💡 If you don't provide a full path for the reproduction it will be generated in the current directory.
If everything worked as it should, you should have a fully functional Storybook set up in your local environment. @@ -68,7 +68,7 @@ An excellent way to check your reproduction is to have it deployed online. We r ### Helpful resources when working with Chromatic -- [Publish Storybook](../workflows/publish-storybook.md) +- [Publish Storybook](../sharing/publish-storybook.md) - [Setup Chromatic](https://www.chromatic.com/docs/setup) - [Automate Chromatic with continuous integration](https://www.chromatic.com/docs/ci) diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md index 19970f08f33b..8f3aca9df89b 100644 --- a/docs/contribute/new-snippets.md +++ b/docs/contribute/new-snippets.md @@ -80,7 +80,7 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks, ```
-💡 Note: Code snippets are divided into various file extensions, if you're contributing a TypeScript file use .ts.mdx, or if you're adding MDX files use .mdx.mdx . +💡 Code snippets are divided into various file extensions, if you're contributing a TypeScript file use .ts.mdx, or if you're adding MDX files use .mdx.mdx .
Go through the rest of the documentation and repeat the process. @@ -110,7 +110,7 @@ yarn start:skip-addons ```
-💡 Note: During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification. +💡 During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown. diff --git a/docs/essentials/actions.md b/docs/essentials/actions.md index af0514f1a163..aeec1b2d1e50 100644 --- a/docs/essentials/actions.md +++ b/docs/essentials/actions.md @@ -17,7 +17,7 @@ Actions work via supplying special Storybook-generated “action” arguments (r ### Action argType annotation -You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your story should be an action. Usually it makes sense to do this at the component level (although it can be done per story): +You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your story should be an action. Usually, it makes sense to do this at the component level (although you can apply it per individual story): @@ -30,13 +30,25 @@ You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your -When Storybook sees this argType it will create an arg that is set to a special “action” callback. If your component calls this arg (based on user interaction) the event will show up in the action panel: +When Storybook sees this argType, it will create an arg set to a special “action” callback. If your component calls this arg (based on the user's interaction or through the `play` function), the event will show up in the action panel: ![Essential Actions addon usage](./addon-actions-screenshot.png) ### Automatically matching args -Another option is to use a parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)). +Another option is to use a global parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)). + + + + + + + +If you need more granular control over which `argTypes` are matched, you can adjust your stories and include the `argTypes` parameter. For example: @@ -51,7 +63,7 @@ Another option is to use a parameter to match all [argTypes](../api/argtypes.md)
-NOTE: If you're generating argTypes in using another addon (like [docs](../writing-docs/introduction.md), which is the common behavior) you'll need to make sure that the actions addon loads **AFTER** the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md). +💡 If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon AFTER the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
@@ -70,8 +82,8 @@ It is also possible to detect if your component is emitting the correct HTML eve -This will bind a standard HTML event handler to the outermost HTML element rendered by your component and trigger an action when the event is called for a given selector. The format is ` `. Selector is optional; it defaults to all elements. +This will bind a standard HTML event handler to the outermost HTML element rendered by your component and trigger an action when the event is called for a given selector. The format is ` `. The selector is optional; it defaults to all elements. ## Advanced / legacy usage -There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md). +There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md). \ No newline at end of file diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx index ab1b01981cfd..b3653588a1ce 100644 --- a/docs/essentials/auto-generated-controls/react.mdx +++ b/docs/essentials/auto-generated-controls/react.mdx @@ -1,7 +1,7 @@ To use auto-detected controls with React, you must fill in the `component` field in your story metadata: ```ts -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx import { Button } from './Button'; diff --git a/docs/essentials/backgrounds.md b/docs/essentials/backgrounds.md index e40687a77889..aeee50d61d64 100644 --- a/docs/essentials/backgrounds.md +++ b/docs/essentials/backgrounds.md @@ -2,7 +2,7 @@ title: 'Backgrounds' --- -The backgrounds toolbar item allows you to adjust the background that your story is rendered on via Storybook’s UI: +The backgrounds toolbar addon allows you to set the background color in which the story renders in the UI:
-💡 Note: Alternatively you can press the m key on your keyboard to toggle the addon. +💡 Alternatively you can press the m key on your keyboard to toggle the addon.
## Outline addon @@ -26,4 +26,4 @@ With Storybook's Outline addon, you can toggle the outlines associated with all + \ No newline at end of file diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md index 901a23a758ad..99f18673735d 100644 --- a/docs/essentials/toolbars-and-globals.md +++ b/docs/essentials/toolbars-and-globals.md @@ -2,11 +2,11 @@ title: 'Toolbars & globals' --- -Storybook ships with toolbar items to control the [viewport](./viewport.md) and [background](./backgrounds.md) the story renders in. You can also create your own toolbar items which control special “globals” which you can then read to create [decorators](../writing-stories/decorators.md) to control story rendering. +Storybook ships with toolbar addons to control the [viewport](./viewport.md) and [background](./backgrounds.md) the story renders in. You can also create your own toolbar items which control special “globals” which you can then read to create [decorators](../writing-stories/decorators.md) to control story rendering. ## Globals -Globals in Storybook represent “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators, which apply to all stories. +Globals in Storybook represents “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators, which apply to all stories. When the globals change, the story re-renders, and the decorators rerun with the new values. The easiest way to change globals is to create a toolbar item for them. @@ -26,11 +26,11 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you
-As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering). +💡 As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering).
-When you start your Storybook, you should see a new dropdown in your toolbar with options `light` and `dark`. +When you start your Storybook, you should see a new dropdown with the `light` and `dark` options in your toolbar. ## Create a decorator @@ -50,7 +50,7 @@ For example, suppose you are using `styled-components`. You can add a theme prov ## Advanced usage -So far we've managed to create and consume a global inside Storybook. +So far, we've managed to create and consume a global inside Storybook. Now let's take a look at a more complex example. Let's suppose we wanted to implement a new global called **locale** for internationalization, which shows a flag on the right side of the toolbar. @@ -68,12 +68,12 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
-The icon element used in the examples loads the icons from the @storybook/components package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use. +💡 The icon element used in the examples loads the icons from the @storybook/components package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
- The @storybook/addon-toolbars addon is required to use toolbars. The toolbars addon is included by default in @storybook/addon-essentials. +💡The @storybook/addon-toolbars addon is required to use toolbars. The toolbars addon is included by default in @storybook/addon-essentials.
By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu once you connect it to a decorator. @@ -116,7 +116,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
-In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwards compatibility, the story context is passed as the first argument: +💡 In Storybook 6.0, if you set the global option `passArgsFirst: false` for backward compatibility, the story context is passed as the first argument: @@ -136,9 +136,9 @@ In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwa ## Consuming globals from within an addon -If you're working on a Storybook addon and you need to retrieve globals, you can do so. The `@storybook/api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want. +If you're working on a Storybook addon and need to retrieve globals, you can do so. The `@storybook/api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want. -Using the ThemeProvider example above, you could expand it to display which current theme is being shown inside a panel like so: +Using the ThemeProvider example above, you could expand it to display which theme is active inside a panel as such: @@ -152,11 +152,11 @@ Using the ThemeProvider example above, you could expand it to display which curr ## Updating globals from within an addon -If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you want. +If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you need. -Also, you can use the `@storybook/addons` and `@storybook/core-events` packages together to trigger the refresh. +Also, you can use both `@storybook/addons` and `@storybook/core-events` packages together to trigger the refresh. -For example, if you were working on a [toolbar addon](../addons/addon-types.md#toolbars), and you want to refresh the UI and update the global once the user clicks on a button, like so: +For example, if you were working on a [toolbar addon](../addons/addon-types.md#toolbars), and you want to refresh the UI and update the global once the user clicks on a button: diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index 24adc95e0c0d..09b1e8cd856b 100644 --- a/docs/essentials/viewport.md +++ b/docs/essentials/viewport.md @@ -2,7 +2,7 @@ title: 'Viewport' --- -The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. This makes it easy to develop responsive UIs. +The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs. -The [“Docs”](../writing-docs/introduction.md) tab shows auto-generated documentation about components (inferred from the source code). Usage docs are helpful when sharing reusable components with your team. For example, in a design system or component library. +The [“Docs”](../writing-docs/introduction.md) tab shows auto-generated documentation about components (inferred from the source code). Usage docs are helpful when sharing reusable components with your team, for example, in a design system or component library.
`, }) -export default class DocumentScreen implements OnInit { +export class DocumentScreen implements OnInit { user: any = { id: 0, name: 'Some User' }; document: any = { id: 0, title: 'Some Title' }; @@ -45,4 +45,4 @@ export default class DocumentScreen implements OnInit { }); } } -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/document-screen-with-graphql.ts.mdx b/docs/snippets/angular/document-screen-with-graphql.ts.mdx index be521f486212..31b4711befd5 100644 --- a/docs/snippets/angular/document-screen-with-graphql.ts.mdx +++ b/docs/snippets/angular/document-screen-with-graphql.ts.mdx @@ -66,4 +66,4 @@ export class SampleGraphqlComponent implements OnInit { }); } } -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx index 16849250c632..13f45f9fcfe4 100644 --- a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx +++ b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx @@ -1,21 +1,28 @@ ```ts // YourPage.stories.ts +import { Meta, Story } from '@storybook/angular'; + import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { Story, Meta, moduleMetadata } from '@storybook/angular'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; import { graphql } from 'msw'; -import DocumentScreen from './YourPage.component'; -import DocumentList from './DocumentList.component'; -import DocumentHeader from './DocumentHeader.component'; -import PageLayout from './PageLayout.component'; +import { DocumentScreen } from './YourPage.component'; +import { DocumentList } from './DocumentList.component'; +import { DocumentHeader } from './DocumentHeader.component'; +import { PageLayout } from './PageLayout.component'; import { MockGraphQLModule } from './mock-graphql.module'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'DocumentScreen', component: DocumentScreen, decorators: [ moduleMetadata({ @@ -23,7 +30,6 @@ export default { imports: [CommonModule, HttpClientModule, MockGraphQLModule], }), ], - title: 'Mock GraphQL query with Storybook and MSW', } as Meta; //👇The mocked data that will be used in the story @@ -75,8 +81,8 @@ const TestData = { ], }; -const PageTemplate: Story = (args) => ({ - props: args, +const PageTemplate: Story = () => ({ + props: {}, }); export const MockedSuccess = PageTemplate.bind({}); @@ -103,4 +109,4 @@ MockedError.parameters = { }), ], }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx index 5ae41166c1b6..b322e273b2b2 100644 --- a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx +++ b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx @@ -1,19 +1,26 @@ ```ts // YourPage.stories.ts +import { Meta, Story } from '@storybook/angular'; + import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { Story, Meta, moduleMetadata } from '@storybook/angular'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; import { rest } from 'msw'; -import DocumentScreen from './YourPage.component'; -import DocumentList from './DocumentList.component'; -import DocumentHeader from './DocumentHeader.component'; -import PageLayout from './PageLayout.component'; +import { DocumentScreen } from './YourPage.component'; +import { DocumentList } from './DocumentList.component'; +import { DocumentHeader } from './DocumentHeader.component'; +import { PageLayout } from './PageLayout.component'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'DocumentScreen', component: DocumentScreen, decorators: [ moduleMetadata({ @@ -21,7 +28,6 @@ export default { imports: [CommonModule, HttpClientModule], }), ], - title: 'Mock Rest request with Storybook and MSW', } as Meta; //👇The mocked data that will be used in the story @@ -73,8 +79,8 @@ const TestData = { ], }; -const PageTemplate: Story = (args) => ({ - props: args, +const PageTemplate: Story = () => ({ + props: {}, }); export const MockedSuccess = PageTemplate.bind({}); @@ -94,4 +100,4 @@ MockedError.parameters = { }), ], }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/form-story-component-with-play-function.ts.mdx b/docs/snippets/angular/form-story-component-with-play-function.ts.mdx new file mode 100644 index 000000000000..415f907d2adc --- /dev/null +++ b/docs/snippets/angular/form-story-component-with-play-function.ts.mdx @@ -0,0 +1,24 @@ +```ts +// Form.stories.ts + +import { userEvent, within } from '@storybook/testing-library'; + +import { LoginForm } from './LoginForm.component'; + +export default { + component: LoginForm, +}; + +export const FilledForm = { + play: async ({ args, canvasElement }) => { + // Starts querying the component from it's root element + const canvas = within(canvasElement); + + await userEvent.type(canvas.getByTestId('email'), 'email'); + await userEvent.type(canvas.getByTestId('password'), 'password'); + + // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(canvas.getByRole('button')); + }, +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/list-story-expanded.ts.mdx b/docs/snippets/angular/list-story-expanded.ts.mdx index 5856847a1b6a..2a3d5e1c9f82 100644 --- a/docs/snippets/angular/list-story-expanded.ts.mdx +++ b/docs/snippets/angular/list-story-expanded.ts.mdx @@ -1,46 +1,49 @@ ```ts // List.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; -import { moduleMetadata } from '@storybook/angular'; import { CommonModule } from '@angular/common'; -import List from './list.component'; -import ListItem from './list-item.component'; +import { List } from './list.component'; +import { ListItem } from './list-item.component'; export default { - component: List, + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', + component: List, decorators: [ moduleMetadata({ - declarations: [List,ListItem], + declarations: [List, ListItem], imports: [CommonModule], }), ], } as Meta; // Always an empty list, not super interesting -export const Empty: Story = (args: List) => ({ +export const Empty: Story = (args) => ({ props: args, - template: ``, + template: ``, }); -export const OneItem: Story = (args) => ({ +export const OneItem: Story = (args) => ({ props: args, template: ` - `, + `, }); -export const ManyItems: Story = (args) => ({ +export const ManyItems: Story = (args) => ({ props: args, template: ` - `, + `, }); -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/list-story-reuse-data.ts.mdx b/docs/snippets/angular/list-story-reuse-data.ts.mdx index d39179ff0bac..e58dd12c2aa1 100644 --- a/docs/snippets/angular/list-story-reuse-data.ts.mdx +++ b/docs/snippets/angular/list-story-reuse-data.ts.mdx @@ -1,20 +1,44 @@ ```ts // List.stories.ts +import { Meta, moduleMetadata, Story } from '@storybook/angular'; + +import { CommonModule } from '@angular/common'; + +import { List } from './list.component'; +import { ListItem } from './list-item.component'; + //👇 We're importing the necessary stories from ListItem import { Selected, Unselected } from './ListItem.stories'; -export const ManyItems: Story = (args) => ({ +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'List', + component: List, + decorators: [ + moduleMetadata({ + declarations: [List, ListItem], + imports: [CommonModule], + }), + ], +} as Meta; + + +export const ManyItems: Story = (args) => ({ props: args, template: ` - - - - `, + + + + + `, }); ManyItems.args= { - Selected: Selected.args.itemProperty, - Unselected: Unselected.args.itemProperty, + Selected: Selected.args.isSelected, + Unselected: Unselected.args.isSelected, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/list-story-starter.ts.mdx b/docs/snippets/angular/list-story-starter.ts.mdx index ec53eccb4bdd..d325679ad9e3 100644 --- a/docs/snippets/angular/list-story-starter.ts.mdx +++ b/docs/snippets/angular/list-story-starter.ts.mdx @@ -1,17 +1,19 @@ ```ts // List.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; +import { Story, Meta, moduleMetadata } from '@storybook/angular'; -import { moduleMetadata } from '@storybook/angular'; import { CommonModule } from '@angular/common'; -import List from './list.component'; +import { List } from './list.component'; export default { - title: 'List', + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ component: List, - decorators: [ + decorators: [ moduleMetadata({ declarations: [List], imports: [CommonModule], @@ -20,8 +22,8 @@ export default { } as Meta; // Always an empty list, not super interesting -const Template: Story = (args) => ({ +const Template: Story = (args) => ({ props: args, template: ``, }); -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/list-story-template.ts.mdx b/docs/snippets/angular/list-story-template.ts.mdx index a2110ee33616..bac6ba8fdb19 100644 --- a/docs/snippets/angular/list-story-template.ts.mdx +++ b/docs/snippets/angular/list-story-template.ts.mdx @@ -1,31 +1,54 @@ ```ts // List.stories.ts -import { Story } from '@storybook/angular/types-6-0'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; -import ListComponent from './List.component'; -import ListItemComponent from './ListItem.component'; +import { CommonModule } from '@angular/common'; + +import { List } from './list.component'; +import { ListItem } from './list-item.component'; //👇 Imports a specific story from ListItem stories import { Unchecked } from './ListItem.stories'; -const ListTemplate: Story = (args) => ({ - moduleMetadata: { - declarations: [ListComponent, ListItemComponent], - }, +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'List', + component: List, + decorators: [ + moduleMetadata({ + declarations: [List, ListItem], + imports: [CommonModule], + }), + ], +} as Meta; + + +const ListTemplate: Story = (args) => ({ props: args, template: ` - -
- -
-
`, + +
+ +
+
+ `, }); -export const EmptyWithTemplate = ListTemplate.bind({}); -Empty.args = { items: [] }; - +export const Empty = ListTemplate.bind({}); +EmptyListTemplate.args = { + items: [], +}; -export const OneItemWithTemplate = ListTemplate.bind({}); -OneItemWithTemplate.args = { items: [Unchecked.args.item] }; +export const OneItem = ListTemplate.bind({}); +OneItem.args = { + items: [ + { + ...Unchecked.args, + }, + ], +}; ``` \ No newline at end of file diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx index 09795904fde9..017d94620c1c 100644 --- a/docs/snippets/angular/list-story-unchecked.ts.mdx +++ b/docs/snippets/angular/list-story-unchecked.ts.mdx @@ -1,27 +1,42 @@ ```ts // List.stories.ts -import { Story } from '@storybook/angular/types-6-0'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; -import ListComponent from './List.component'; -import ListItemComponent from './ListItem.component'; +import { CommonModule } from '@angular/common'; + +import { List } from './list.component'; +import { ListItem } from './list-item.component'; //👇 Imports a specific story from ListItem stories import { Unchecked } from './ListItem.stories'; -export const OneItem: Story = (args) => ({ - moduleMetadata: { - declarations: [ListComponent, ListItemComponent], - }, +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'List', + component: List, + decorators: [ + moduleMetadata({ + declarations: [List, ListItem], + imports: [CommonModule], + }), + ], +} as Meta; + + +export const OneItem: Story = (args) => ({ props: args, template: ` - - - - `, + + + + `, }); OneItem.args = { - ...Unchecked.args, + ...Unchecked.args, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx index 8bf4f645830c..459bf8791a68 100644 --- a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx +++ b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx @@ -2,24 +2,42 @@ // List.stories.ts import { Meta, moduleMetadata, Story } from '@storybook/angular'; -import { ListItemComponent } from './list-item.component'; -import { ListComponent } from './list.component'; + +import { CommonModule } from '@angular/common'; + +import { List } from './list.component'; +import { ListItem } from './list-item.component'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', - component: ListComponent, - subcomponents: { ListItemComponent }, //👈 Adds the ListItem component as a subcomponent + component: List, + subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent + decorators: [ + moduleMetadata({ + declarations: [List, ListItem], + imports: [CommonModule], + }), + ], } as Meta; -const Template: Story = (args) => ({ - props: args, - moduleMetadata: { - declarations: [ListComponent, ListItemComponent], +export const Empty: Story = () => ({ + props: { + args, }, }); -export const OneItem = Template.bind({}); -OneItem.args = { - items: [ListItemComponent], -}; -``` +export const OneItem: Story = () => ({ + props: { + args, + }, + template: ` + + + + `, +}); +``` \ No newline at end of file diff --git a/docs/snippets/angular/loader-story.mdx.mdx b/docs/snippets/angular/loader-story.mdx.mdx index e1f84461b134..b1ea6fa0b5bd 100644 --- a/docs/snippets/angular/loader-story.mdx.mdx +++ b/docs/snippets/angular/loader-story.mdx.mdx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; -import TodoItem from './TodoItem'; +import { TodoItem } from './TodoItem'; import fetch from 'node-fetch'; @@ -14,11 +14,10 @@ import fetch from 'node-fetch'; loaders={[ async () => ({ todo: await ( - await fetch("https://jsonplaceholder.typicode.com/todos/1") + await fetch('https://jsonplaceholder.typicode.com/todos/1') ).json(), }), - ]} -> + ]} > {(args, { loaded: { todo } }) => ({ props: { todo: todo, diff --git a/docs/snippets/angular/loader-story.ts.mdx b/docs/snippets/angular/loader-story.ts.mdx index 837cd804a9a5..a48f5f9e78f8 100644 --- a/docs/snippets/angular/loader-story.ts.mdx +++ b/docs/snippets/angular/loader-story.ts.mdx @@ -1,15 +1,20 @@ ```ts // TodoItem.stories.ts -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; import fetch from 'node-fetch'; import { CommonModule } from '@angular/common'; -import TodoItem from './TodoItem'; +import { TodoItem } from './TodoItem'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Examples/Loader', component: TodoItem, decorators: [ moduleMetadata({ @@ -17,7 +22,6 @@ export default { imports: [CommonModule], }), ], - title: 'Examples/Loader', } as Meta; export const Primary = (args, { loaded: { todo } }) => { diff --git a/docs/snippets/angular/login-form-with-play-function.mdx.mdx b/docs/snippets/angular/login-form-with-play-function.mdx.mdx new file mode 100644 index 000000000000..f4420917d418 --- /dev/null +++ b/docs/snippets/angular/login-form-with-play-function.mdx.mdx @@ -0,0 +1,38 @@ +```md + + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + +import { within, userEvent } from '@storybook/testing-library'; + +import { LoginForm } from './LoginForm.component'; + + + +export const Template = (args) => ({ props: args }); + + + + {Template.bind(())} + + + { + // Starts querying the component from it's root element + const canvas = within(canvasElement); + + await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', { + delay: 100, + }); + await userEvent.type(canvas.getByTestId('password'), 'a-random-password', { + delay: 100, + }); + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(canvas.getByRole('button')); + }}> + {Template.bind({})} + + + +``` \ No newline at end of file diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx new file mode 100644 index 000000000000..2124d9d4582c --- /dev/null +++ b/docs/snippets/angular/login-form-with-play-function.ts.mdx @@ -0,0 +1,40 @@ +```ts +// LoginForm.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { userEvent, within } from '@storybook/testing-library'; + +import { LoginForm } from './LoginForm.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Form', + component: LoginForm, +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const EmptyForm: Story = Template.bind({}); + +export const FilledForm: Story = Template.bind({}); +FilledForm.play = async ({ canvasElement }) => { + // Starts querying the component from it's root element + const canvas = within(canvasElement); + + await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', { + delay: 100, + }); + await userEvent.type(canvas.getByTestId('password'), 'a-random-password', { + delay: 100, + }); + + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(canvas.getByRole('button')); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx index 4db96cee2d55..8f34d74ce589 100644 --- a/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx +++ b/docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx @@ -1,7 +1,11 @@ ```md - + -import { Canvas, Story } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + +import { Badge } from './badge.component'; + + export const Template = (args) => ({ props: args }); @@ -14,7 +18,6 @@ export const Template = (args) => ({ props: args }); }}> {Template.bind({})} - ({ props: args }); }}> {Template.bind({})} - ({ props: args }); {Template.bind({})} -``` \ No newline at end of file +``` diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx new file mode 100644 index 000000000000..39d95c5bd919 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx @@ -0,0 +1,31 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + + + +export const Template = (args) => ({ props: args }); + + { + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(screen.getByRole('button', { name: / button label/i })); + }} > + {Template.bind({})} + + + { + // The play function interacts with the component and looks for the text + await screen.findByText('example string'); + }} > + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx new file mode 100644 index 000000000000..fae563d58d89 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx @@ -0,0 +1,35 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/addon-docs'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'QueryMethods', + component: MyComponent, + +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const ExampleWithRole: Story = Template.bind({}); +ExampleWithRole.play = async () => { + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(screen.getByRole('button', { name: / button label/i })); +}; + +export const ExampleWithText: Story = Template.bind({}); +ExampleWithText.play = async () => { + // The play function interacts with the component and looks for the text + await screen.findByText('example string'); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-composition.ts.mdx b/docs/snippets/angular/my-component-play-function-composition.ts.mdx new file mode 100644 index 000000000000..818de2f6f011 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-composition.ts.mdx @@ -0,0 +1,40 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', + component: MyComponent, +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const FirstStory: Story = Template.bind({}); +FirstStory.play = async () => { + userEvent.type(screen.getByTestId('an-element'), 'example-value'); +}; + +export const SecondStory: Story = Template.bind({}); +SecondStory.play = async () => { + await userEvent.type(screen.getByTestId('other-element'), 'another value'); +}; + +export const CombinedStories: Story = Template.bind({}); +CombinedStories.play = async () => { + // Runs the FirstStory and Second story play function before running this story's play function + await FirstStory.play(); + await SecondStory.play(); + await userEvent.type(screen.getByTestId('another-element'), 'random value'); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx new file mode 100644 index 000000000000..b0423221fde9 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx @@ -0,0 +1,36 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { screen, userEvent, waitFor } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + + + +export const Template = (args) => ({ props: args }); + + { + const Input = screen.getByLabelText('Username', { + selector: 'input', + }); + + await userEvent.type(Input, 'WrongInput', { + delay: 100, + }); + + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + + const Submit = screen.getByRole('button'); + await userEvent.click(Submit); + + await waitFor(async () => { + await userEvent.hover(screen.getByTestId('error')); + }); + }} > + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx new file mode 100644 index 000000000000..bb8cfebfc317 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx @@ -0,0 +1,42 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { screen, userEvent, waitFor } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'WithAsync', + component: MyComponent, + +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const ExampleAsyncStory: Story = Template.bind({}); +ExampleAsyncStory.play = async () => { + const Input = screen.getByLabelText('Username', { + selector: 'input', + }); + + await userEvent.type(Input, 'WrongInput', { + delay: 100, + }); + + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + const Submit = screen.getByRole('button'); + await userEvent.click(Submit); + + await waitFor(async () => { + await userEvent.hover(screen.getByTestId('error')); + }); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx new file mode 100644 index 000000000000..420cd8114f5d --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx @@ -0,0 +1,26 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { getByRole, userEvent, within } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + + + +export const Template = (args) => ({ props: args }); + + { + // Assigns canvas to the component root element + const canvas = within(canvasElement); + + // Starts querying from the component's root element + await userEvent.type(canvas.getByTestId('example-element'), 'something'); + await userEvent.click(canvas.getByRole('another-element')); + }} > + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx new file mode 100644 index 000000000000..1cfc409bb7cc --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx @@ -0,0 +1,32 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { getByRole, userEvent, within } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'WithCanvasElement', + component: MyComponent, +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const ExampleStory: Story = Template.bind({}); +ExampleStory.play = async ({ canvasElement }) => { + // Assigns canvas to the component root element + const canvas = within(canvasElement); + + // Starts querying from the component's root element + await userEvent.type(canvas.getByTestId('example-element'), 'something'); + await userEvent.click(canvas.getByRole('another-element')); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx new file mode 100644 index 000000000000..f14eb480c156 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx @@ -0,0 +1,31 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { fireEvent, screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + + + +export const Template = (args) => ({ props: args }); + + { + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(screen.getByRole('button')); + }}> + {Template.bind({})} + + + { + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await fireEvent.click(screen.getByTestId('data-testid')); + }}> + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx new file mode 100644 index 000000000000..87dc0d2f1c74 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx @@ -0,0 +1,34 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { fireEvent, screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'ClickExamples', + component: MyComponent, +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const ClickExample: Story = Template.bind({}); +ClickExample.play = async () => { + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(screen.getByRole('button')); +}; + +export const FireEventExample: Story = Template.bind({}); +FireEventExample.play = async () => { + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await fireEvent.click(screen.getByTestId('data-testid')); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx new file mode 100644 index 000000000000..20b6d5cc2a49 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx @@ -0,0 +1,31 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + + + +export const Template = (args) => ({ props: args }); + + { + const exampleElement= screen.getByLabelText('example-element'); + + // The delay option set the ammount of milliseconds between characters being typed + await userEvent.type(exampleElement, 'random string', { + delay: 100, + }); + + const AnotherExampleElement= screen.getByLabelText('another-example-element'); + await userEvent.type(AnotherExampleElement, 'another random string', { + delay: 100, + }); + }} > + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx new file mode 100644 index 000000000000..c0bdc9307061 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx @@ -0,0 +1,36 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'WithDelay', + component: MyComponent, +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const DelayedStory: Story = Template.bind({}); +DelayedStory.play = () => { + const exampleElement= screen.getByLabelText('example-element'); + // The delay option set the ammount of milliseconds between characters being typed + await userEvent.type(exampleElement, 'random string', { + delay: 100, + }); + + const AnotherExampleElement= screen.getByLabelText('another-example-element'); + await userEvent.type(AnotherExampleElement, 'another random string', { + delay: 100, + }); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx new file mode 100644 index 000000000000..4638665ad343 --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx @@ -0,0 +1,36 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + + + + + +export const sleep= (ms) => { + return new Promise((resolve) => setTimeout(resolve, ms)); +}; + +export const Template = (args) => ({ props: args }); + + { + const select = screen.getByRole('listbox'); + + await userEvent.selectOptions(select, ['One Item']); + await sleep(2000); + + await userEvent.selectOptions(select, ['Another Item']); + await sleep(2000); + + await userEvent.selectOptions(select, ['Yet another item']); + + }}> + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx new file mode 100644 index 000000000000..d88755a5cb1c --- /dev/null +++ b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx @@ -0,0 +1,40 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'WithSelectEvent', + component: MyComponent, +} as Meta; + +// Function to emulate pausing between interactions +function sleep(ms: number) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} + +const Template: Story = (args) => ({ + props: args, +}); + +export const ExampleChangeEvent: Story = Template.bind({}); +ExampleChangeEvent.play = async () => { + const select = screen.getByRole('listbox'); + + await userEvent.selectOptions(select, ['One Item']); + await sleep(2000); + + await userEvent.selectOptions(select, ['Another Item']); + await sleep(2000); + + await userEvent.selectOptions(select, ['Yet another item']); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx new file mode 100644 index 000000000000..4d212e54bec1 --- /dev/null +++ b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx @@ -0,0 +1,27 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Path/To/MyComponent', + component: MyComponent, +} as Meta; + + +export const Default: Story = () => ({ + props: {}, +}); + +export const WithProp: Story = () => ({ + props: { + prop: 'value', + }, +}); +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx index 2f7d761176f3..4e7ecefe55b3 100644 --- a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx +++ b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx @@ -5,15 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; +import { MyComponent } from './MyComponent.component'; + + component={MyComponent} /> {{ - template: '
', + template: '', }}
``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx index edb5c126d176..31b17240aaee 100644 --- a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx +++ b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx @@ -1,32 +1,32 @@ ```ts // MyComponent.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; +import { Meta, Story } from '@storybook/angular'; + import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; -import MyComponent from './MyComponent.component'; +import { MyComponent } from './MyComponent.component'; export default { - title: 'Stories', - component: MyComponent, + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', + component: MyComponent, parameters: { //👇 The viewports object from the Essentials addon viewport: { - /👇 The viewports you want to use + //👇 The viewports you want to use viewports: INITIAL_VIEWPORTS, //👇 Your own default viewport defaultViewport: 'iphone6', - } + }, }, } as Meta; -export const myStory: Story = () => ({ - template: '
' +export const MyStory: Story = () => ({ + template: '', }); -myStory.parameters = { - viewport: { - defaultViewport: 'iphonex' - } -}; ``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx index b874d71189a2..ffd8be4ad9e7 100644 --- a/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx @@ -1,7 +1,11 @@ ```md -import { Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs'; + +import { MyComponent } from './MyComponent.component'; + + export const getCaptionForLocale = (locale) => { switch(locale) { diff --git a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx index 505764d13be0..c0f5e90f1954 100644 --- a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx +++ b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx @@ -1,6 +1,19 @@ ```ts // MyComponent.stories.ts +import { Meta } from '@storybook/angular'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', + component: MyComponent, +} as Meta; + const getCaptionForLocale = (locale) => { switch (locale) { case 'es': diff --git a/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx new file mode 100644 index 000000000000..51b639ed1292 --- /dev/null +++ b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx @@ -0,0 +1,37 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { MyComponent } from './MyComponent.component'; + +import someData from './data.json'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', + component: MyComponent, + includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories + excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const simpleData = { foo: 1, bar: 'baz' }; +export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } }; + +export const SimpleStory = Template.bind({}); +SimpleStory.args = { + data: simpleData, +}; + +export const ComplexStory = Template.bind({}); +ComplexStory.args = { + data: complexData, +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-with-env-variables.mdx.mdx b/docs/snippets/angular/my-component-with-env-variables.mdx.mdx index 58dc4322011d..1ece7ecd9a8d 100644 --- a/docs/snippets/angular/my-component-with-env-variables.mdx.mdx +++ b/docs/snippets/angular/my-component-with-env-variables.mdx.mdx @@ -1,21 +1,20 @@ ```md -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import MyComponent from './my-component.component'; +import { MyComponent } from './my-component.component'; - + export const Template = (args) => ({ props: args }); {Template.bind({})} - ``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-with-env-variables.ts.mdx b/docs/snippets/angular/my-component-with-env-variables.ts.mdx index 2170728dafff..46a610aeab4f 100644 --- a/docs/snippets/angular/my-component-with-env-variables.ts.mdx +++ b/docs/snippets/angular/my-component-with-env-variables.ts.mdx @@ -1,21 +1,25 @@ ```ts // MyComponent.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; +import { Meta, Story } from '@storybook/angular'; -import MyComponent from './mycomponent.component'; +import { MyComponent } from './MyComponent.component'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', component: MyComponent, - title: 'A story using environment variables inside a .env file', } as Meta; -const Template: Story = (args) => ({ - props: args +const Template: Story = (args) => ({ + props: args, }); -export const Default = Template.bind({}); -Default.args = { +export const ExampleStory = Template.bind({}); +ExampleStory.args = { propertyA: process.env.STORYBOOK_DATA_KEY }; ``` \ No newline at end of file diff --git a/docs/snippets/angular/page-story-slots.mdx.mdx b/docs/snippets/angular/page-story-slots.mdx.mdx index c5f87d589668..333bc3bec80f 100644 --- a/docs/snippets/angular/page-story-slots.mdx.mdx +++ b/docs/snippets/angular/page-story-slots.mdx.mdx @@ -1,9 +1,9 @@ ```md - + import { Meta, Story } from '@storybook/addon-docs'; -import Page from './page.component.ts'; +import { Page } from './page.component'; @@ -11,7 +11,7 @@ export const Template = (args) => ({ props: args, template:` - ${args.footer} + ${args.footer} `, }); diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx index fff0622251a4..4a59a2b1b5f7 100644 --- a/docs/snippets/angular/page-story-slots.ts.mdx +++ b/docs/snippets/angular/page-story-slots.ts.mdx @@ -1,15 +1,21 @@ ```ts // Page.stories.ts -import { Meta, Story } from '@storybook/angular/types-6-0'; -import Page from './page.component'; +import { Meta, Story } from '@storybook/angular'; + +import { Page } from './page.component'; export default { - component: Page, + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Page', + component: Page, } as Meta; -const Template: Story = (args) => ({ + +const Template: Story = (args) => ({ props: args, template: ` @@ -21,5 +27,4 @@ export const CustomFooter = Template.bind({}); CustomFooter.args = { footer: 'Built with Storybook', }; - -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/page-story-with-args-composition.ts.mdx b/docs/snippets/angular/page-story-with-args-composition.ts.mdx index 4c40c631d25a..6b141cf0a9a7 100644 --- a/docs/snippets/angular/page-story-with-args-composition.ts.mdx +++ b/docs/snippets/angular/page-story-with-args-composition.ts.mdx @@ -1,15 +1,14 @@ ```ts // YourPage.stories.ts -import { moduleMetadata } from '@storybook/angular' -import { Story, Meta } from '@storybook/angular/types-6-0'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; import { CommonModule } from '@angular/common'; -import DocumentScreen from './YourPage.component'; -import DocumentList from './DocumentList.component'; -import DocumentHeader from './DocumentHeader.component'; -import PageLayout from './PageLayout.component'; +import { DocumentScreen } from './YourPage.component'; +import { DocumentList } from './DocumentList.component'; +import { DocumentHeader } from './DocumentHeader.component'; +import { PageLayout } from './PageLayout.component'; //👇 Imports the required stories import * as PageLayoutStories from './PageLayout.stories'; @@ -17,18 +16,22 @@ import * as DocumentHeaderStories from './DocumentHeader.stories'; import * as DocumentListStories from './DocumentList.stories'; export default { - component: DocumentScreen, + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'DocumentScreen', + component: DocumentScreen, decorators: [ moduleMetadata({ - // imports components to allow component composition with Storybook - declarations: [DocumentList, DocumentHeader,PageLayout], + declarations: [DocumentList, DocumentHeader, PageLayout], imports: [CommonModule], }), ], } as Meta; -const Template: Story = (args) => ({ + +const Template: Story = (args) => ({ props: args, }); diff --git a/docs/snippets/angular/page-story.ts.mdx b/docs/snippets/angular/page-story.ts.mdx index 4dd54b5648f1..b10dacff8340 100644 --- a/docs/snippets/angular/page-story.ts.mdx +++ b/docs/snippets/angular/page-story.ts.mdx @@ -1,18 +1,22 @@ ```ts // Page.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; +import { Meta, moduleMetadata, Story } from '@storybook/angular'; -import { moduleMetadata } from '@storybook/angular'; import { CommonModule } from '@angular/common'; -import Button from './button.component'; -import Header from './header.component'; -import Page from './page.component'; +import { Button } from './button.component'; +import { Header } from './header.component'; +import { Page } from './page.component'; +//👇 Imports all Header stories import * as HeaderStories from './Header.stories'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Page', component: Page, decorators: [ @@ -23,12 +27,13 @@ export default { ], } as Meta; -const Template: Story = (args) => ({ +const Template: Story = (args) => ({ props: args, }); -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - ...HeaderStories.LoggedIn.args, +export const LoggedIn = { + args: { + ...HeaderStories.LoggedIn.args, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/angular/register-component-with-play-function.mdx.mdx b/docs/snippets/angular/register-component-with-play-function.mdx.mdx new file mode 100644 index 000000000000..e157ee1d754f --- /dev/null +++ b/docs/snippets/angular/register-component-with-play-function.mdx.mdx @@ -0,0 +1,40 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { RegistrationForm } from './RegistrationForm.component'; + + + +export const Template = (args) => ({ props: args }); + + { + const emailInput = screen.getByLabelText('email', { + selector: 'input', + }); + + await userEvent.type(emailInput, 'example-email@email.com', { + delay: 100, + }); + + const passwordInput = screen.getByLabelText('password', { + selector: 'input', + }); + + await userEvent.type(passwordInput, 'ExamplePassword', { + delay: 100, + }); + + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + const Submit = screen.getByRole('button'); + + await userEvent.click(Submit); + }}> + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/register-component-with-play-function.ts.mdx b/docs/snippets/angular/register-component-with-play-function.ts.mdx new file mode 100644 index 000000000000..39f62fd79993 --- /dev/null +++ b/docs/snippets/angular/register-component-with-play-function.ts.mdx @@ -0,0 +1,45 @@ +```ts +// RegistrationForm.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { screen, userEvent } from '@storybook/testing-library'; + +import { RegistrationForm } from './RegistrationForm.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'RegistrationForm', + component: RegistrationForm, +} as Meta; + +const Template: Story = (args) => ({ + props: args, +}); + +export const FilledForm: Story = Template.bind({}); +FilledForm.play = async () => { + const emailInput = screen.getByLabelText('email', { + selector: 'input', + }); + + await userEvent.type(emailInput, 'example-email@email.com', { + delay: 100, + }); + + const passwordInput = screen.getByLabelText('password', { + selector: 'input', + }); + + await userEvent.type(passwordInput, 'ExamplePassword', { + delay: 100, + }); + // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + const Submit = screen.getByRole('button'); + + await userEvent.click(Submit); +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/simple-page-implementation.ts.mdx b/docs/snippets/angular/simple-page-implementation.ts.mdx index ff6b75176448..84bdbf7aa3b8 100644 --- a/docs/snippets/angular/simple-page-implementation.ts.mdx +++ b/docs/snippets/angular/simple-page-implementation.ts.mdx @@ -12,7 +12,7 @@ import { Component, Input } from '@angular/core'; `, }) -export default class DocumentScreen { +export class DocumentScreen { @Input() user: any = { id: 0, name: 'Some User' }; @@ -22,5 +22,4 @@ export default class DocumentScreen { @Input() subdocuments: any = []; } - ``` \ No newline at end of file diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx new file mode 100644 index 000000000000..3e1845ee0ffb --- /dev/null +++ b/docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx @@ -0,0 +1,24 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { MyComponent } from './MyComponent.component'; + + + +export const Template = () => ({}); + + + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx new file mode 100644 index 000000000000..7b3aec3f59d2 --- /dev/null +++ b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx @@ -0,0 +1,26 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Disable a11y addon', + component: MyComponent, +} as Meta; + +const Template: Story = () => ({}); + +export const NonA11yStory = Template.bind({}); +NonA11yStory.parameters = { + a11y: { + // This option disables all a11y checks on this story + disable: true, + }, +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx new file mode 100644 index 000000000000..4b39ad459c52 --- /dev/null +++ b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx @@ -0,0 +1,39 @@ +```md + + +import { Meta, Story } from '@storybook/addon-docs'; + +import { MyComponent } from './MyComponent.component'; + + + +export const Template = () => ({}); + + + {Template.bind({})} + +``` \ No newline at end of file diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx new file mode 100644 index 000000000000..9b434d8a6506 --- /dev/null +++ b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx @@ -0,0 +1,41 @@ +```ts +// MyComponent.stories.ts + +import { Meta, Story } from '@storybook/angular'; + +import { MyComponent } from './MyComponent.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Configure a11y addon', + component: MyComponent, +} as Meta; + +const Template: Story = () => ({}); + +export const ExampleStory = Template.bind({}); +ExampleStory.parameters = { + a11y: { + element: '#root', + config: { + rules: [ + { + // The autocomplete rule will not run based on the CSS selector provided + id: 'autocomplete-valid', + selector: '*:not([autocomplete="nope"])', + }, + { + // Setting the enabled option to false will disable checks for this particular rule on all stories. + id: 'image-alt', + enabled: false, + }, + ], + }, + options: {}, + manual: true, + }, +}; +``` \ No newline at end of file diff --git a/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx b/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx index fc26f240d84d..77513950c915 100644 --- a/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx +++ b/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx @@ -6,4 +6,4 @@ import { componentWrapperDecorator } from '@storybook/angular'; export const decorators = [ componentWrapperDecorator((story) => `
${story}
`), ]; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx b/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx index 9d0aa980ed2a..5b58038841fb 100644 --- a/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx +++ b/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx @@ -17,4 +17,4 @@ export const decorators = [ ({ globals }) => ({ theme: globals.theme }) ), ]; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx index d94776f7c643..51fccdf7d9fa 100644 --- a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx +++ b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx @@ -1,7 +1,11 @@ ```md -import { Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs'; + +import { Table } from './Table.component'; + + export const TableStory = (args) => ({ props: args, diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx index 7dfbb55d1738..17982a224f13 100644 --- a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx +++ b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx @@ -1,7 +1,20 @@ ```ts // Table.stories.ts -const TableStory: Story = (args) => ({ +import { Meta, Story } from '@storybook/angular', + +import { Table } from './Table.component'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Custom Table', + component: Table, +} as Meta; + +const TableStory: Story = (args) => ({ props: args, template: ` @@ -26,4 +39,4 @@ Numeric.args = { //👇 The remaining args get passed to the `Table` component size: 'large', }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/your-component-with-decorator.mdx.mdx b/docs/snippets/angular/your-component-with-decorator.mdx.mdx index b83c399446f7..b3a823be40b5 100644 --- a/docs/snippets/angular/your-component-with-decorator.mdx.mdx +++ b/docs/snippets/angular/your-component-with-decorator.mdx.mdx @@ -1,5 +1,5 @@ ```md - + import { Meta } from '@storybook/addon-docs'; diff --git a/docs/snippets/angular/your-component-with-decorator.ts.mdx b/docs/snippets/angular/your-component-with-decorator.ts.mdx index 8f29fd5f1bfb..927536968cb5 100644 --- a/docs/snippets/angular/your-component-with-decorator.ts.mdx +++ b/docs/snippets/angular/your-component-with-decorator.ts.mdx @@ -1,11 +1,17 @@ ```ts -// your-component.stories.ts +// YourComponent.stories.ts -import { Meta, componentWrapperDecorator } from '@storybook/angular'; +import { componentWrapperDecorator, Meta } from '@storybook/angular'; + +import { YourComponent } from './your.component'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'YourComponent', component: YourComponent, decorators: [componentWrapperDecorator((story) => `
${story}
`)], } as Meta; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/your-component.mdx.mdx b/docs/snippets/angular/your-component.mdx.mdx index d42291faac70..8c2bd62e6f2a 100644 --- a/docs/snippets/angular/your-component.mdx.mdx +++ b/docs/snippets/angular/your-component.mdx.mdx @@ -8,7 +8,7 @@ import { YourComponent } from './your.component'; - + export const Template = (args) => ({ props: args }); diff --git a/docs/snippets/angular/your-component.ts.mdx b/docs/snippets/angular/your-component.ts.mdx index cccec7f8fa00..e33f39347f74 100644 --- a/docs/snippets/angular/your-component.ts.mdx +++ b/docs/snippets/angular/your-component.ts.mdx @@ -3,21 +3,26 @@ import { Meta, Story } from '@storybook/angular'; + import { YourComponent } from './your.component'; //👇 This default export determines where your story goes in the story list export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'YourComponent', component: YourComponent, } as Meta; //👇 We create a “template” of how args map to rendering -const Template: Story = (args) => ({ - props: args, +const Template: Story = (args) => ({ + props:args, }); -export const YourStory = Template.bind({}); -YourStory.args = { - /* 👇 The args you need here will depend on your component */ +export const FirstStory = Template.bind({}); +FirstStory.args= { + //👇 The args you need here will depend on your component }; ``` \ No newline at end of file diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx index a86ae5b595c8..7c1ccf730efd 100644 --- a/docs/snippets/common/args-usage-with-addons.js.mdx +++ b/docs/snippets/common/args-usage-with-addons.js.mdx @@ -9,8 +9,8 @@ const [args, updateArgs, resetArgs] = useArgs(); updateArgs({ key: 'value' }); // To reset one (or more) args: -resetArgs(['key']); +resetArgs((argNames: ['key'])); // To reset all args resetArgs(); -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx index 7ffb54787e47..1a4d2a33ec0a 100644 --- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx +++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx @@ -1,43 +1,43 @@ ```js -// Badge.stories.js | Badge.stories.jsx | Badge.stories.ts | Badge.stories.tsx +// Badge.stories.js|jsx|ts|tsx + +import { Badge } from './Badge'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Badge', component: Badge, - title: 'CSF/Badge', argTypes: { status: { name: 'Badge Status', description: 'Available options available to the Badge', - options: [ - 'positive', - 'negative', - 'warning', - 'error', - 'neutral' - ], + options: ['positive', 'negative', 'warning', 'error', 'neutral'], table: { defaultValue: { - summary: 'positive' + summary: 'positive', }, type: { summary: 'Shows options to the Badge', - detail: 'Listing of available options' - } + detail: 'Listing of available options', + }, }, }, label: { name: 'Badge Content', description: 'Text shown by Badge', control: { - type: 'text' + type: 'text', }, table: { type: { summary: 'The label contents', - detail: 'Text displayed by the Badge' - } - } - } - } + detail: 'Text displayed by the Badge', + }, + }, + }, + }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx b/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx index 4d5168e1f5e3..6c787f97d614 100644 --- a/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx +++ b/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx @@ -1,7 +1,7 @@ ```md -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; import { Badge } from './Badge'; @@ -42,7 +42,7 @@ import { Badge } from './Badge'; } } }} -/> + component={Badge}/> ### Badge @@ -51,4 +51,4 @@ Let's define a story for our `Badge` component -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx index 27c2aa1d48f6..98111438fa22 100644 --- a/docs/snippets/common/button-group-story-subcomponents.js.mdx +++ b/docs/snippets/common/button-group-story-subcomponents.js.mdx @@ -1,10 +1,14 @@ ```js -// ButtonGroup.stories.js | ButtonGroup.stories.jsx +// ButtonGroup.stories.js|jsx -import { Button, ButtonGroup } from '../ButtonGroup'; +import { Button, ButtonGroup } from './ButtonGroup'; export default { - title: 'Path/to/ButtonGroup', + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'ButtonGroup', component: ButtonGroup, subcomponents: { Button }, }; diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx index d5657305d92a..1b5a6f33bc13 100644 --- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx +++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx @@ -1,12 +1,16 @@ ```ts -// ButtonGroup.stories.ts | ButtonGroup.stories.tsx +// ButtonGroup.stories.ts|tsx -import { Meta } from '@storybook/react/types-6-0'; +import { Meta } from '@storybook/react'; -import { Button, ButtonGroup } from '../ButtonGroup'; +import { Button, ButtonGroup } from './ButtonGroup'; export default { - title: 'Path/to/ButtonGroup', + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'ButtonGroup', component: ButtonGroup, subcomponents: { Button }, } as Meta; diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx index 653e01aef496..831cd407bcf0 100644 --- a/docs/snippets/common/button-story-action-event-handle.js.mdx +++ b/docs/snippets/common/button-story-action-event-handle.js.mdx @@ -1,8 +1,15 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx + +import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', + component: Button, parameters: { actions: { handles: ['mouseover', 'click .btn'], diff --git a/docs/snippets/common/button-story-action-event-handle.mdx.mdx b/docs/snippets/common/button-story-action-event-handle.mdx.mdx index 5ab875ee59df..a25945c9328c 100644 --- a/docs/snippets/common/button-story-action-event-handle.mdx.mdx +++ b/docs/snippets/common/button-story-action-event-handle.mdx.mdx @@ -3,11 +3,14 @@ import { Meta } from '@storybook/addon-docs'; +import { Button } from './Button'; + + }} + component={Button}/> ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx index cf247036634e..f082f781cb87 100644 --- a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx +++ b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx @@ -1,7 +1,13 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx + +import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, argTypes: { @@ -9,32 +15,32 @@ export default { backgroundColor: { control: 'color', table: { - category: 'Colors' - } + category: 'Colors', + }, }, primary: { table: { - category: 'Colors' - } + category: 'Colors', + }, }, // Assigns the argType to the Text category label: { table: { - category: 'Text' - } + category: 'Text', + }, }, // Assigns the argType to the Events category onClick: { table: { - category: 'Events' - } + category: 'Events', + }, }, // Assigns the argType to the Sizes category size: { table: { - category: 'Sizes' - } - } - } + category: 'Sizes', + }, + }, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx index 62e7cf67ebb9..216e23a47816 100644 --- a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx +++ b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx @@ -1,7 +1,13 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx + +import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, argTypes: { @@ -11,34 +17,34 @@ export default { table: { category: 'Colors', // Assigns the argTypes to a specific subcategory - subcategory: 'Button colors' - } + subcategory: 'Button colors', + }, }, primary: { table: { category: 'Colors', - subcategory: 'Button style' - } + subcategory: 'Button style', + }, }, label: { table: { category: 'Text', - subcategory: 'Button contents' - } + subcategory: 'Button contents', + }, }, // Assigns the argType to the Events category onClick: { table: { category: 'Events', - subcategory: 'Button Events' - } + subcategory: 'Button Events', + }, }, // Assigns the argType to the Sizes category size: { table: { - category: 'Sizes' - } - } - } + category: 'Sizes', + }, + }, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx index f36addd2d26d..4fd71c6e3a0a 100644 --- a/docs/snippets/common/button-story-controls-primary-variant.js.mdx +++ b/docs/snippets/common/button-story-controls-primary-variant.js.mdx @@ -1,8 +1,29 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx -const Primary = Template.bind({}); +import { Button } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, +}; + +const Template = (args) => ({ + //👇 Your template goes here +}); + +export const Primary = Template.bind({}); Primary.args = { - variant: 'primary', + variant: 'primary', +}; + +export const Primary = { + args: { + variant: 'primary', + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx index 87e4b0216333..bf07a883f857 100644 --- a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx +++ b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx @@ -1,7 +1,15 @@ ```md -import { Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs'; + +import { Button } from './Button'; + + + +export const Template = (args) => ({ + //👇 Your template goes here +}); + import { Meta } from '@storybook/addon-docs'; diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx index ec2b02425fd7..a7a5098295c9 100644 --- a/docs/snippets/common/button-story-default-export.js.mdx +++ b/docs/snippets/common/button-story-default-export.js.mdx @@ -1,7 +1,14 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx + +import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', + component: Button, }; ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx index 84656a63b51e..30655cd5be7b 100644 --- a/docs/snippets/common/button-story-disable-addon.js.mdx +++ b/docs/snippets/common/button-story-disable-addon.js.mdx @@ -1,8 +1,15 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx + +import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', + component: Button, parameters: { myAddon: { disable: true }, // Disables the addon }, diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx index 9acd2461f7ba..f6da64894f03 100644 --- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx +++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx @@ -1,18 +1,22 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, argTypes: { backgroundColor: { control: 'color' }, }, - parameters: { - docs: { - page: null - } + parameters: { + docs: { + page: null, + }, }, }; ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx index c4130f7d16f2..9fe963c74b40 100644 --- a/docs/snippets/common/button-story-docs-code-type.js.mdx +++ b/docs/snippets/common/button-story-docs-code-type.js.mdx @@ -1,7 +1,13 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx + +import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, argTypes: { @@ -11,9 +17,9 @@ export default { docs: { source: { type: 'code', - } - } - } + }, + }, + }, }; // Remainder story implementation diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx index 1cfd5c698d85..49b77125e0ee 100644 --- a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx +++ b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx @@ -1,20 +1,24 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx import { Button } from './Button'; -import ButtonDocumentationComponent from './CustomDocumentationComponent'; +import { CustomDocumentationComponent } from './CustomDocumentationComponent'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, argTypes: { backgroundColor: { control: 'color' }, }, - parameters: { - docs: { - page: ButtonDocumentationComponent, - } + parameters: { + docs: { + page: CustomDocumentationComponent, + }, }, }; ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx index f06e53ac85a4..ce8fad9d9645 100644 --- a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx +++ b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx @@ -1,12 +1,16 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx import { Button } from './Button'; -import CustomMDXDocumentation from './Custom-MDX-Documentation.mdx' +import CustomMDXDocumentation from './Custom-MDX-Documentation.mdx'; export default { - title: 'Example/Button', + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', component: Button, argTypes: { backgroundColor: { control: 'color' }, @@ -14,15 +18,31 @@ export default { parameters: { docs: { page: CustomMDXDocumentation, - } + }, }, }; -export const Primary = () => ; +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, +} as ComponentMeta; +export const Primary: ComponentStory = () => ; +``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx index 3d466dc47bdc..430d0187f520 100644 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ b/docs/snippets/react/button-story-with-args.js.mdx @@ -1,13 +1,17 @@ ```js -// Button.stories.js | Button.stories.jsx +// Button.stories.js|jsx import React from 'react'; import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', component: Button, - title: 'Components/Button', }; //👇 We create a “template” of how args map to rendering @@ -15,9 +19,8 @@ const Template = (args) => ; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story.mdx.mdx b/docs/snippets/react/button-story.mdx.mdx index 746ecccc37eb..64d5bf0c541f 100644 --- a/docs/snippets/react/button-story.mdx.mdx +++ b/docs/snippets/react/button-story.mdx.mdx @@ -1,11 +1,11 @@ ```md - + import { Meta, Story } from '@storybook/addon-docs'; import { Button } from './Button'; - + # Button diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx index d6026e9d2c0d..50a95e304e45 100644 --- a/docs/snippets/react/button-story.ts.mdx +++ b/docs/snippets/react/button-story.ts.mdx @@ -1,16 +1,20 @@ ```ts -// Button.stories.ts | Button.stories.tsx +// Button.stories.ts|tsx -import React from 'react' +import React from 'react'; -import { Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', component: Button, - title: 'Components/Button', -} as Meta; +} as ComponentMeta; -export const Primary: React.VFC<{}> = () => ; +export const Primary: ComponentStory = () => ; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx index 0a4f6ea112a2..a55ac3a4bc24 100644 --- a/docs/snippets/react/button-story.with-hooks.js.mdx +++ b/docs/snippets/react/button-story.with-hooks.js.mdx @@ -1,14 +1,23 @@ ```js -// Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx +// Button.stories.js|ts|jsx|tsx import React, { useState } from 'react'; import { Button } from './Button'; +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, +}; + /* -* Example Button story with React Hooks. -* See note below related to this example. -*/ + * Example Button story with React Hooks. + * See note below related to this example. + */ export const Primary = () => { // Sets the hooks for both the label and primary props const [value, setValue] = useState('Secondary'); diff --git a/docs/snippets/react/button-test.js.mdx b/docs/snippets/react/button-test.js.mdx deleted file mode 100644 index 40b8c93004e5..000000000000 --- a/docs/snippets/react/button-test.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.test.js - -import React from 'react'; - -import { render, screen } from '@testing-library/react'; - -import '@testing-library/jest-dom/extend-expect'; - -//👇 Imports a specific story for the test -import { Primary } from './Button.stories'; - -it('renders the button in the primary state', () => { - render(); - expect(screen.getByRole('button')).toHaveTextContent('Primary'); -}); -``` \ No newline at end of file diff --git a/docs/snippets/react/checkbox-story-csf.js.mdx b/docs/snippets/react/checkbox-story-csf.js.mdx index b2c02b8831b9..460b871a04bc 100644 --- a/docs/snippets/react/checkbox-story-csf.js.mdx +++ b/docs/snippets/react/checkbox-story-csf.js.mdx @@ -1,12 +1,16 @@ ```js -// Checkbox.stories.js | Checkbox.stories.jsx | // Checkbox.stories.ts | Checkbox.stories.tsx +// Checkbox.stories.js|jsx import React from 'react'; import { Checkbox } from './Checkbox'; export default { - title: 'MDX/Checkbox', + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Checkbox', component: Checkbox, }; diff --git a/docs/snippets/react/checkbox-story-csf.ts.mdx b/docs/snippets/react/checkbox-story-csf.ts.mdx new file mode 100644 index 000000000000..503a2f991320 --- /dev/null +++ b/docs/snippets/react/checkbox-story-csf.ts.mdx @@ -0,0 +1,26 @@ +```ts +// Checkbox.stories.ts|tsx + +import React from 'react'; + +import { ComponentMeta, ComponentStory } from '@storybook/react'; + +import { Checkbox } from './Checkbox'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Checkbox', + component: Checkbox, +} as ComponentMeta; + +export const allCheckboxes: ComponentStory = () => ( +
+ + + + +); +``` \ No newline at end of file diff --git a/docs/snippets/react/checkbox-story-starter-example.mdx.mdx b/docs/snippets/react/checkbox-story-starter-example.mdx.mdx index 08630bffdbe4..438833d3ba88 100644 --- a/docs/snippets/react/checkbox-story-starter-example.mdx.mdx +++ b/docs/snippets/react/checkbox-story-starter-example.mdx.mdx @@ -1,7 +1,7 @@ ```md - + -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Checkbox } from './Checkbox'; diff --git a/docs/snippets/react/checkbox-story.mdx.mdx b/docs/snippets/react/checkbox-story.mdx.mdx index 00e2ebf53491..2621dc968d12 100644 --- a/docs/snippets/react/checkbox-story.mdx.mdx +++ b/docs/snippets/react/checkbox-story.mdx.mdx @@ -1,45 +1,45 @@ ```md - + -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Checkbox } from './Checkbox'; +export const Template = (args) => ; + # Checkbox With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation. -export const Template = (args) => - - {Template.bind({})} - + }}> + {Template.bind({})} +
- {Template.bind({})} - - + }}> + {Template.bind({})} + + - {Template.bind({})} - + }}> + {Template.bind({})} + -``` +``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx index 417dd18f0e04..870ce8bdd85d 100644 --- a/docs/snippets/react/component-story-custom-args-complex.js.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx @@ -1,23 +1,22 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx +// YourComponent.stories.js|jsx import React from 'react'; import { YourComponent } from './your-component'; -//👇 Some function to demonstrate the behavior -const someFunction = (valuePropertyA, valuePropertyB) => { - // Makes some computations and returns something -}; - export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'YourComponent', component: YourComponent, - title: 'A complex case with a function', //👇 Creates specific argTypes with options argTypes: { propertyA: { options: ['Item One', 'Item Two', 'Item Three'], - control: { type: 'select' } // Automatically inferred when 'options' is defined + control: { type: 'select' }, // Automatically inferred when 'options' is defined }, propertyB: { options: ['Another Item One', 'Another Item Two', 'Another Item Three'], @@ -25,10 +24,21 @@ export default { }, }; +//👇 Some function to demonstrate the behavior +const someFunction = (valuePropertyA, valuePropertyB) => { + // Makes some computations and returns something +}; + const Template = ({ propertyA, propertyB, ...rest }) => { //👇 Assigns the function result to a variable const someFunctionResult = someFunction(propertyA, propertyB); return ; }; + +export const ExampleStory = Template.bind({}); +ExampleStory.args= { + propertyA: 'Item One', + propertyB: 'Another Item One', +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx index c3b88e491e54..fcb607b642a6 100644 --- a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx @@ -1,23 +1,20 @@ ```md - + -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { YourComponent } from './your-component'; - + - + export const someFunction = (valuePropertyA, valuePropertyB) => { - - - + // Makes some computations and returns something }; export const Template = ({propertyA,propertyB,...rest})=>{ - - + //👇 Assigns the function result to a variable const someFunctionResult = someFunction(propertyA, propertyB); return ; @@ -25,7 +22,7 @@ const someFunctionResult = someFunction(propertyA, propertyB); -``` +``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx index 29ed6aa2e9a8..be64e1f14af5 100644 --- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx @@ -1,11 +1,11 @@ ```ts -// YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.ts|tsx import React from 'react'; -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { YourComponent, YourComponentProps } from './your-component'; +import { YourComponent } from './your-component'; //👇 Some function to demonstrate the behavior const someFunction = (valuePropertyA, valuePropertyB) => { @@ -13,8 +13,11 @@ const someFunction = (valuePropertyA, valuePropertyB) => { }; export default { - component: YourComponent, - title: 'A complex case with a function', + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'YourComponent', //👇 Creates specific argTypes with options argTypes: { propertyA: { @@ -25,12 +28,18 @@ export default { options: ['Another Item One', 'Another Item Two', 'Another Item Three'], }, }, -} as Meta; +} as ComponentMeta; -const Template: Story = ({ propertyA, propertyB, ...rest }) => { +const Template: ComponentStory = ({ propertyA, propertyB, ...rest }) => { //👇 Assigns the result from the function to a variable const someFunctionResult = someFunction(propertyA, propertyB); return ; }; + +export const ExampleStory = Template.bind({}); +ExampleStory.args= { + propertyA: 'Item One', + propertyB: 'Another Item One', +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx index 6935eef55c92..327ceab03a2d 100644 --- a/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx +++ b/docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx @@ -1,13 +1,19 @@ ```md - + -import { Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs'; import { Button } from './Button'; + + export const Template = (args) =>
- {data.map(row => ({row.map(item => }))} +import React from 'react'; + +import { Table } from './Table'; +import { TD } from './TableDataCell'; +import { TR } from './TableRow'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Custom Table', + component: Table, +}; + +const TableStory = ({ data, ...args}) => ( +
{item}
+ {data.map((row) => ( + + {row.map((item) => ( + + ))} + + ))}
{item}
-) +); export const Numeric = TableStory.bind({}); - Numeric.args = { //👇 This arg is for the story component data: [[1, 2, 3], [4, 5, 6]], //👇 The remaining args get passed to the `Table` component size: 'large', -} +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx index c180808a93e9..f656ff9b88b6 100644 --- a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx +++ b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx @@ -1,9 +1,13 @@ ```md -import { Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs'; -import Table from './Table'; +import { Table } from './Table'; +import { TD } from './TableDataCell'; +import { TR } from './TableRow'; + + export const TableStory = ({ data, ...args }) => ( @@ -16,8 +20,7 @@ export const TableStory = ({ data, ...args }) => ( args={{ data: [[1, 2, 3], [4, 5, 6]], size: 'large', - }} -> + }}> {TableStory.bind({})} ``` \ No newline at end of file diff --git a/docs/snippets/react/your-component-with-decorator.js.mdx b/docs/snippets/react/your-component-with-decorator.js.mdx index ceaf12500515..9b2d3f20058b 100644 --- a/docs/snippets/react/your-component-with-decorator.js.mdx +++ b/docs/snippets/react/your-component-with-decorator.js.mdx @@ -1,14 +1,21 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx +// YourComponent.stories.js|jsx + +import { YourComponent } from './YourComponent'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'YourComponent', component: YourComponent, decorators: [ (Story) => (
- +
), ], -} +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx b/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx index 16b504e77f3c..f7cfb381d284 100644 --- a/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx +++ b/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx @@ -1,16 +1,18 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx +// YourComponent.stories.js|jsx + +import { YourComponent } from './YourComponent'; // Replacing the element with a Story function is also a good way of writing decorators. // Useful to prevent the full remount of the component's story. + export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'YourComponent', component: YourComponent, - decorators: [ - (Story) => ( -
- {Story()} -
- ), - ], -} + decorators: [(Story) =>
{Story()}
], +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx index 6fe8cd8489e4..9ba55b1da62c 100644 --- a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx +++ b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx @@ -1,11 +1,18 @@ ```ts -// YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.ts|tsx -import { Meta } from '@storybook/react'; +import { ComponentMeta } from '@storybook/react'; + +import { YourComponent } from './YourComponent'; // Replacing the element with a Story function is also a good way of writing decorators. // Useful to prevent the full remount of the component's story. export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'YourComponent', component: YourComponent, decorators: [ (Story) => ( @@ -14,5 +21,5 @@ export default { ), ], -} as Meta; +} as ComponentMeta; ``` \ No newline at end of file diff --git a/docs/snippets/react/your-component-with-decorator.ts.mdx b/docs/snippets/react/your-component-with-decorator.ts.mdx index c7cc9e780ae8..dc89e46e4c69 100644 --- a/docs/snippets/react/your-component-with-decorator.ts.mdx +++ b/docs/snippets/react/your-component-with-decorator.ts.mdx @@ -1,9 +1,16 @@ ```ts -// YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.ts|tsx -import { Meta } from '@storybook/react'; +import { ComponentMeta } from '@storybook/react'; + +import { YourComponent } from './YourComponent'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'YourComponent', component: YourComponent, decorators: [ (Story) => ( @@ -12,5 +19,5 @@ export default { ), ], -} as Meta; +} as ComponentMeta; ``` \ No newline at end of file diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx index 8c226cbd9a1c..10c286edc0fb 100644 --- a/docs/snippets/react/your-component.js.mdx +++ b/docs/snippets/react/your-component.js.mdx @@ -1,12 +1,14 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx - -import React from 'react'; +// YourComponent.stories.js|jsx import { YourComponent } from './YourComponent'; //👇 This default export determines where your story goes in the story list export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'YourComponent', component: YourComponent, }; @@ -14,9 +16,9 @@ export default { //👇 We create a “template” of how args map to rendering const Template = (args) => ; -export const FirstStory = Template.bind({}); - -FirstStory.args = { - /*👇 The args you need here will depend on your component */ +export const FirstStory = { + args: { + //👇 The args you need here will depend on your component + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx index a5dfee62eabd..cabd3abcb3e7 100644 --- a/docs/snippets/react/your-component.ts.mdx +++ b/docs/snippets/react/your-component.ts.mdx @@ -1,22 +1,27 @@ ```ts -// YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.ts|tsx -import React, { ComponentProps } from 'react'; +import React from 'react'; -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import { YourComponent } from './YourComponent'; //👇 This default export determines where your story goes in the story list export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'YourComponent', component: YourComponent, -} as Meta; +} as ComponentMeta; //👇 We create a “template” of how args map to rendering -const Template: Story> = (args) => ; +const Template: ComponentStory = (args) => ; export const FirstStory = Template.bind({}); + FirstStory.args = { /*👇 The args you need here will depend on your component */ }; diff --git a/docs/snippets/svelte/badge-story.mdx.mdx b/docs/snippets/svelte/badge-story.mdx.mdx index 987ebd1047f9..06a6c95b9386 100644 --- a/docs/snippets/svelte/badge-story.mdx.mdx +++ b/docs/snippets/svelte/badge-story.mdx.mdx @@ -1,9 +1,9 @@ ```md - + -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Badge } from './Badge.svelte'; +import Badge from './Badge.svelte'; @@ -16,20 +16,24 @@ export const Template = (args) => ({ Let's define a story for our `Badge` component: - + {Template.bind({})} We can drop it in a `Canvas` to get a code snippet: - + {Template.bind({})} @@ -39,23 +43,37 @@ gets rendered as a group but defines individual stories with unique URLs, which is great for review and testing. - + {Template.bind({})} - + {Template.bind({})} - + + {Template.bind({})} + + with icon) + )}}> {Template.bind({})} -``` \ No newline at end of file +``` diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx index 8d5237a31a1a..78ebad33838c 100644 --- a/docs/snippets/svelte/button-group-story.js.mdx +++ b/docs/snippets/svelte/button-group-story.js.mdx @@ -2,16 +2,23 @@ // ButtonGroup.stories.js import ButtonGroup from '../ButtonGroup.svelte'; + +//👇 Imports the Button stories import * as ButtonStories from './Button.stories'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'ButtonGroup', component: ButtonGroup, -} +}; const Template = (args) => ({ + Component: ButtonGroup, props: args, - }); +}); export const Pair = Template.bind({}); Pair.args = { diff --git a/docs/snippets/svelte/button-story-click-handler.js.mdx b/docs/snippets/svelte/button-story-click-handler.js.mdx index 17da89288614..822519e0f529 100644 --- a/docs/snippets/svelte/button-story-click-handler.js.mdx +++ b/docs/snippets/svelte/button-story-click-handler.js.mdx @@ -6,18 +6,21 @@ import Button from './Button.svelte'; import { action } from '@storybook/addon-actions'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, }; -export const Text = () =>({ - //👇 This is the same component as the one used in the default export and it's optional +export const Text = () => ({ Component: Button, props:{ label: 'Hello', }, - on:{ - onClick={action('clicked')} - } + on: { + click: action('clicked'), + }, }); ``` \ No newline at end of file diff --git a/docs/snippets/svelte/button-story-component-args-primary.js.mdx b/docs/snippets/svelte/button-story-component-args-primary.js.mdx index 6516efa57dac..cf7b5b6e0856 100644 --- a/docs/snippets/svelte/button-story-component-args-primary.js.mdx +++ b/docs/snippets/svelte/button-story-component-args-primary.js.mdx @@ -4,6 +4,10 @@ import Button from './Button.svelte'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, //👇 Creates specific argTypes diff --git a/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx b/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx index df63061c90d1..8dcda41aff7a 100644 --- a/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx +++ b/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx @@ -6,6 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs'; import Button from './Button.svelte'; + MarginDecorator], + decorators: [() => MarginDecorator], }; -// Your templates and stories here. -// Don't forget to use the component you're testing and not the MarginDecorator component +// Your stories here. +// Don't forget to use the component you're testing and not the MarginDecorator component ``` ```html
- +
diff --git a/docs/snippets/svelte/button-story-component-decorator.mdx.mdx b/docs/snippets/svelte/button-story-component-decorator.mdx.mdx index 189e18a0efba..843ae3a43f4c 100644 --- a/docs/snippets/svelte/button-story-component-decorator.mdx.mdx +++ b/docs/snippets/svelte/button-story-component-decorator.mdx.mdx @@ -6,7 +6,7 @@ import { Story, Meta } from '@storybook/addon-docs'; import Button from './Button.svelte'; import MarginDecorator from './MarginDecorator.svelte'; - MarginDecorator]}/> + MarginDecorator]}/> ``` \ No newline at end of file diff --git a/docs/snippets/svelte/button-story-component-decorator.native-format.mdx b/docs/snippets/svelte/button-story-component-decorator.native-format.mdx index e99dd262e907..b9a01f2c838c 100644 --- a/docs/snippets/svelte/button-story-component-decorator.native-format.mdx +++ b/docs/snippets/svelte/button-story-component-decorator.native-format.mdx @@ -10,7 +10,7 @@ diff --git a/docs/snippets/svelte/button-story-decorator.js.mdx b/docs/snippets/svelte/button-story-decorator.js.mdx index be72e9a1082d..41232c9df617 100644 --- a/docs/snippets/svelte/button-story-decorator.js.mdx +++ b/docs/snippets/svelte/button-story-decorator.js.mdx @@ -1,8 +1,22 @@ ```js // Button.stories.js +import Button from './Button.svelte'; import MarginDecorator from './MarginDecorator.svelte'; -export const Primary = … +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, +}; + +const Template = () => ({ + Component: Button, +}) + +export const Primary = Template.bind({}); Primary.decorators = [() => MarginDecorator] ``` \ No newline at end of file diff --git a/docs/snippets/svelte/button-story-decorator.mdx.mdx b/docs/snippets/svelte/button-story-decorator.mdx.mdx index e2cea692618a..101b6c3d6db8 100644 --- a/docs/snippets/svelte/button-story-decorator.mdx.mdx +++ b/docs/snippets/svelte/button-story-decorator.mdx.mdx @@ -1,13 +1,19 @@ ```md -import { Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs'; +import Button from './Button.svelte'; import MarginDecorator from './MarginDecorator.svelte'; + + +export const Template = () => ({ Component:Button }); + MarginDecorator]}> + {Template.bind({})} ``` \ No newline at end of file diff --git a/docs/snippets/svelte/button-story-default-docs-code.js.mdx b/docs/snippets/svelte/button-story-default-docs-code.js.mdx index 34ad96da9c3e..b2fec6cfe5f1 100644 --- a/docs/snippets/svelte/button-story-default-docs-code.js.mdx +++ b/docs/snippets/svelte/button-story-default-docs-code.js.mdx @@ -4,6 +4,10 @@ import Button from './Button.svelte'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, //👇 Creates specific argTypes @@ -31,7 +35,6 @@ export const ExampleStory = (args) => { }, }; }; - ExampleStory.args = { primary: true, size: 'small', diff --git a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx b/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx index 734b9c53c9b7..410d3fc6b0c1 100644 --- a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx +++ b/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx @@ -21,6 +21,7 @@ export const someFunction = (someValue) => { return `i am a ${someValue}`; }; + ({ Component: Button, props: { - primary: true, - label: 'Button', - }, + primary: true, + label: 'Button', + }, }); Primary.storyName = 'I am the primary'; diff --git a/docs/snippets/svelte/button-story-using-args.js.mdx b/docs/snippets/svelte/button-story-using-args.js.mdx index 0062e54848eb..8aa730112e10 100644 --- a/docs/snippets/svelte/button-story-using-args.js.mdx +++ b/docs/snippets/svelte/button-story-using-args.js.mdx @@ -1,6 +1,17 @@ ```js // Button.stories.js +import Button from './Button.svelte'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, +}; + //👇 We create a “template” of how args map to rendering const Template = (args) => ({ Component: Button, diff --git a/docs/snippets/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx index 54bc9576dea7..876b38d4aae5 100644 --- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx +++ b/docs/snippets/svelte/button-story-with-addon-example.js.mdx @@ -4,6 +4,10 @@ import Button from './Button.svelte'; export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', //👇 Creates specific parameters for the story parameters: { @@ -13,8 +17,7 @@ export default { }, }; -export const Basic = (args) => ({ +export const Basic = () => ({ Component: Button, - props: args, }); ``` \ No newline at end of file diff --git a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx b/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx index abd0f1d5f88e..2a8f80ceb074 100644 --- a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx +++ b/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx @@ -8,7 +8,7 @@ ({ Component: Button, props: args }); +// 👇 We create a “template” of how args map to rendering +const Template = (args)=>({ + component: Button, + props: args, +}); +//👇 Each story then reuses that template export const Primary = Template.bind({}); - Primary.args = { primary: true, label: 'Button', diff --git a/docs/snippets/svelte/button-story-with-args.mdx.mdx b/docs/snippets/svelte/button-story-with-args.mdx.mdx index 31a439535a29..cd26e64a3168 100644 --- a/docs/snippets/svelte/button-story-with-args.mdx.mdx +++ b/docs/snippets/svelte/button-story-with-args.mdx.mdx @@ -5,13 +5,16 @@ import { Meta, Story } from '@storybook/addon-docs'; import Button from './Button.svelte'; - + + + export const Template = (args) => ({ Component: Button, props: args, }); + + + + + -import { Meta, Story } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs'; import Button from './Button.svelte'; ({ Component: Button, diff --git a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx index 78b1dc8ec510..b9690ff2e4db 100644 --- a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx +++ b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx @@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs'; import Button from './Button.svelte'; - + diff --git a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx b/docs/snippets/svelte/button-story-with-emojis.native-format.mdx index d44721384085..f30d8290eab2 100644 --- a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx +++ b/docs/snippets/svelte/button-story-with-emojis.native-format.mdx @@ -5,7 +5,7 @@ import Button from './Button.svelte'; - + @@ -18,11 +18,11 @@ exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = ` exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = ` @@ -41,11 +41,11 @@ exports[`Storyshots Addons/Actions Story with template 1`] = ` exports[`Storyshots Addons/Actions Use action in method 1`] = ` diff --git a/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot b/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot index e55171ef005b..c1d2c442c63d 100644 --- a/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = ` @@ -18,11 +18,11 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = ` exports[`Storyshots Addons / Backgrounds With Component 1`] = ` @@ -33,11 +33,11 @@ exports[`Storyshots Addons / Backgrounds With Component 1`] = ` exports[`Storyshots Addons / Backgrounds With Template 1`] = ` diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot index 45917881b1ad..a110bdbeaf8f 100644 --- a/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = ` @@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = ` exports[`Storyshots Addons/Docs with text 1`] = ` diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot index ffcf6aebeccf..463ea6fc50da 100644 --- a/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = ` diff --git a/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot index 5c412922328e..386022a250fd 100644 --- a/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addons/Docs/Iframe Basic 1`] = ` diff --git a/examples/angular-cli/src/stories/addons/interactions/__snapshots__/addon-interactions.stories.storyshot b/examples/angular-cli/src/stories/addons/interactions/__snapshots__/addon-interactions.stories.storyshot new file mode 100644 index 000000000000..e4888a3560d2 --- /dev/null +++ b/examples/angular-cli/src/stories/addons/interactions/__snapshots__/addon-interactions.stories.storyshot @@ -0,0 +1,921 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addons/Interactions Filled 1`] = ` + + +
+
+

+ Hero Form +

+
+
+ + + +
+
+ + +
+
+ + + +
+ + +
+ +
+
+
+`; + +exports[`Storyshots Addons/Interactions Invalid Fields 1`] = ` + + +
+
+

+ Hero Form +

+
+
+ + + +
+
+ + +
+
+ + + +
+ + +
+ +
+
+
+`; + +exports[`Storyshots Addons/Interactions Standard 1`] = ` + + +
+
+

+ Hero Form +

+
+
+ + + +
+
+ + +
+
+ + + +
+ + +
+ +
+
+
+`; + +exports[`Storyshots Addons/Interactions Submitted 1`] = ` + + +
+
+

+ Hero Form +

+
+
+ + + +
+
+ + +
+
+ + + +
+ + +
+ +
+
+
+`; + +exports[`Storyshots Addons/Interactions Submitted And Edited After 1`] = ` + + +
+
+

+ Hero Form +

+
+
+ + + +
+
+ + +
+
+ + + +
+ + +
+ +
+
+
+`; diff --git a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts b/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts index 4b2bbbbd8f54..15e6c8a92573 100644 --- a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts +++ b/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts @@ -1,27 +1,109 @@ -/* eslint-disable storybook/use-storybook-testing-library */ -// @TODO: use addon-interactions and remove the rule disable above -import { Story, Meta } from '@storybook/angular'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { Story, Meta, moduleMetadata } from '@storybook/angular'; import { expect } from '@storybook/jest'; -import { within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { within, userEvent, waitFor } from '@storybook/testing-library'; -import { CounterComponent } from './counter/counter.component'; +import { HeroForm } from './hero-form/hero-form.component'; export default { title: 'Addons/Interactions', - component: CounterComponent, -} as Meta; + component: HeroForm, + decorators: [ + moduleMetadata({ + imports: [CommonModule, FormsModule], + }), + ], +} as Meta; -const Template: Story = (args) => ({ +const Template: Story = (args) => ({ props: args, }); -export const Default: Story = Template.bind({}); +export const Standard: Story = Template.bind({}); -Default.play = async ({ canvasElement }) => { +export const Filled: Story = Template.bind({}); +Filled.play = async ({ canvasElement }) => { const canvas = within(canvasElement); - await userEvent.click(await canvas.findByText('Increment')); + const heroName = canvas.getByRole('textbox', { + name: /name/i, + }); + await userEvent.type(heroName, 'Storm'); - const count = await canvas.findByTestId('count'); - await expect(count.textContent).toEqual('You clicked 1 times'); + const alterEgo = canvas.getByRole('textbox', { + name: /alter ego/i, + }); + await userEvent.type(alterEgo, 'Ororo Munroe'); + + const heroPower = canvas.getByRole('combobox', { name: /hero power/i }); + await userEvent.selectOptions(heroPower, 'Weather Changer'); +}; + +export const InvalidFields: Story = Template.bind({}); +InvalidFields.play = async (context) => { + await Filled.play(context); + + const canvas = within(context.canvasElement); + await userEvent.clear( + canvas.getByRole('textbox', { + name: /name/i, + }) + ); + await userEvent.clear( + canvas.getByRole('textbox', { + name: /alter ego/i, + }) + ); + + const heroPower = canvas.getByRole('combobox', { name: /hero power/i }); + await userEvent.selectOptions(heroPower, ''); +}; + +export const Submitted: Story = Template.bind({}); +Submitted.play = async (context) => { + await Filled.play(context); + + const canvas = within(context.canvasElement); + await userEvent.click(canvas.getByText('Submit')); + + await waitFor(async () => { + await expect( + canvas.getByRole('heading', { + name: /you submitted the following:/i, + }) + ).not.toBeNull(); + await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm'); + await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe'); + await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer'); + }); +}; + +export const SubmittedAndEditedAfter: Story = Template.bind({}); +SubmittedAndEditedAfter.play = async (context) => { + await Submitted.play(context); + + const canvas = within(context.canvasElement); + await userEvent.click(canvas.getByText('Edit')); + + const heroName = canvas.getByRole('textbox', { + name: /name/i, + }); + await userEvent.clear(heroName); + await userEvent.type(heroName, 'Wakanda Queen'); + + await userEvent.click(canvas.getByText('Submit')); + + await waitFor(async () => { + await expect( + canvas.getByRole('heading', { + name: /you submitted the following:/i, + }) + ).not.toBeNull(); + // new value + await expect(canvas.getByTestId('hero-name').textContent).toEqual('Wakanda Queen'); + + // previous values + await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe'); + await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer'); + }); }; diff --git a/examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts b/examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts deleted file mode 100644 index a48e6133e05c..000000000000 --- a/examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-counter', - template: ` -
-

Angular - Counter

-

You clicked {{ count }} times

- - -
- `, -}) -export class CounterComponent { - count = 0; - - increment() { - this.count += 1; - } - - decrement() { - this.count -= 1; - } -} diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css new file mode 100644 index 000000000000..3dd3e324e01f --- /dev/null +++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css @@ -0,0 +1,9 @@ +@import url('https://unpkg.com/bootstrap@4.4/dist/css/bootstrap.min.css'); + +.ng-valid[required], .ng-valid.required { + border-left: 5px solid #42A948; +} + +.ng-invalid:not(form) { + border-left: 5px solid #a94442; +} diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html new file mode 100644 index 000000000000..83da1d2c1e2b --- /dev/null +++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html @@ -0,0 +1,61 @@ +
+
+

Hero Form

+
+
+ + +
+ Name is required +
+
+ +
+ + +
+
+ + + +
+ Power is required +
+
+ + + +
+ +
+

You submitted the following:

+
+
Name
+
{{ model.name }}
+
+
+
Alter Ego
+
{{ model.alterEgo }}
+
+
+
Power
+
{{ model.power }}
+
+
+ +
+
diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.ts b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.ts new file mode 100644 index 000000000000..6470db34d173 --- /dev/null +++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.ts @@ -0,0 +1,51 @@ +import { Component, NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +class Hero { + // eslint-disable-next-line no-useless-constructor + constructor( + public id: number, + public name: string, + public power: string, + public alterEgo?: string + ) {} +} + +@Component({ + selector: 'hero-form', + templateUrl: './hero-form.component.html', + styleUrls: ['./hero-form.component.css'], +}) +export class HeroForm { + /** + * This does not work on addon-controls as it is turned into a string + * @ignore + */ + model = new Hero(0, '', '', ''); + + /** + * This does not work on addon-controls as it is turned into a string + * @ignore + */ + powers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer']; + + submitting = false; + + submitted = false; + + onSubmit() { + this.submitting = true; + setTimeout(() => { + this.submitted = true; + this.submitting = false; + }, 1000); + } +} + +@NgModule({ + declarations: [HeroForm], + exports: [HeroForm], + imports: [CommonModule, FormsModule], +}) +export class HeroFormModule {} diff --git a/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot index c390f20fc437..452762482e25 100644 --- a/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addons/Links button with link to another story 1`] = ` diff --git a/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot index 4409d0f68e49..56232c260dc2 100644 --- a/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot +++ b/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot @@ -3,13 +3,13 @@ exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = ` @@ -18,11 +18,11 @@ exports[`Storyshots Core / Parameters / Layout Centered 1`] = ` exports[`Storyshots Core / Parameters / Layout Default 1`] = ` @@ -36,12 +36,12 @@ exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = ` style="background-color: yellow;" > @@ -54,11 +54,11 @@ exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = ` exports[`Storyshots Core / Parameters / Layout None 1`] = ` @@ -69,11 +69,11 @@ exports[`Storyshots Core / Parameters / Layout None 1`] = ` exports[`Storyshots Core / Parameters / Layout Padded 1`] = ` diff --git a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot index 95e98085998a..bc21c8a94f3f 100644 --- a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot @@ -3,12 +3,12 @@ exports[`Storyshots Core / Story host styles With Args 1`] = ` @@ -19,12 +19,12 @@ exports[`Storyshots Core / Story host styles With Args 1`] = ` exports[`Storyshots Core / Story host styles With story template 1`] = ` diff --git a/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot index cfd33b230ee2..5e73e7aeeb32 100644 --- a/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot +++ b/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Legacy / Component in Story Basic 1`] = ` diff --git a/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot b/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot index 0a762f2b8cc1..3c20084a5313 100644 --- a/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot +++ b/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot @@ -3,20 +3,20 @@ exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = ` @@ -27,11 +27,11 @@ exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = ` exports[`Storyshots Legacy / Story with storiesOf() with text 1`] = ` diff --git a/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot index 380a4f509aaf..e41d8a1015b4 100644 --- a/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot +++ b/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = ` diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index 08fd05932abc..4fb386e8c222 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "react-scripts build", @@ -11,7 +11,7 @@ "test": "react-scripts test --env=jsdom" }, "dependencies": { - "@storybook/client-logger": "6.4.0-rc.3", + "@storybook/client-logger": "6.5.0-alpha.5", "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-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-jest": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/builder-webpack4": "6.4.0-rc.3", + "@storybook/addon-jest": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/builder-webpack4": "6.5.0-alpha.5", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "webpack": "4" }, "storybook": { diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json index 09d5b723ff48..2c9f6b97d30b 100644 --- a/examples/cra-react15/package.json +++ b/examples/cra-react15/package.json @@ -1,6 +1,6 @@ { "name": "cra-react15", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "react-scripts build", @@ -19,14 +19,14 @@ "react-scripts": "3.4.4" }, "devDependencies": { - "@storybook/addon-actions": "6.4.0-rc.3", + "@storybook/addon-actions": "6.5.0-alpha.5", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/builder-webpack4": "6.4.0-rc.3", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/builder-webpack4": "6.5.0-alpha.5", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "babel-core": "6", "babel-runtime": "6", "webpack": "4" diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json index 2a12c601aa23..8868f20518d3 100644 --- a/examples/cra-ts-essentials/package.json +++ b/examples/cra-ts-essentials/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-essentials", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "react-scripts build", @@ -24,7 +24,7 @@ }, "dependencies": { "@types/jest": "^26.0.16", - "@types/node": "14.14.20", + "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.2", "@types/react-dom": "16.9.10", "global": "^4.4.0", @@ -34,12 +34,12 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-essentials": "6.4.0-rc.3", + "@storybook/addon-essentials": "6.5.0-alpha.5", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/builder-webpack4": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/builder-webpack4": "6.5.0-alpha.5", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.4.0-rc.3", + "@storybook/react": "6.5.0-alpha.5", "webpack": "4" }, "storybook": { diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index 5b1994be719e..0fe4ec9e7ff8 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-kitchen-sink", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "react-scripts build", @@ -24,7 +24,7 @@ }, "dependencies": { "@types/jest": "25.2.3", - "@types/node": "14.14.20", + "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "16.14.2", "@types/react-dom": "16.9.10", "prop-types": "^15.7.2", @@ -34,15 +34,15 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-a11y": "6.4.0-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/builder-webpack4": "6.4.0-rc.3", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/builder-webpack4": "6.5.0-alpha.5", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.4.0-rc.3", + "@storybook/react": "6.5.0-alpha.5", "@types/enzyme": "^3.10.8", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.9.1", diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index 779f8b0a0853..79a4f84b7419 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/ember": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/ember": "6.5.0-alpha.5", "@storybook/ember-cli-storybook": "^0.2.1", - "@storybook/source-loader": "6.4.0-rc.3", + "@storybook/source-loader": "6.5.0-alpha.5", "babel-loader": "^8.0.0", "broccoli-asset-rev": "^3.0.0", "cross-env": "^7.0.3", diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index 2decc1ef2417..3d9553e6c34c 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "description": "", "keywords": [], @@ -13,23 +13,23 @@ "storybook": "start-storybook -p 9006 --no-manager-cache" }, "devDependencies": { - "@storybook/addon-a11y": "6.4.0-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/addon-jest": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/addon-jest": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", "@storybook/addon-postcss": "^2.0.0", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", - "@storybook/html": "6.4.0-rc.3", - "@storybook/source-loader": "6.4.0-rc.3", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", + "@storybook/html": "6.5.0-alpha.5", + "@storybook/source-loader": "6.5.0-alpha.5", "autoprefixer": "^10.0.1", "eventemitter3": "^4.0.7", "format-json": "^1.0.3", diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index d11c543297f1..1d6a5cd0069b 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "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-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/addon-interactions": "6.4.0-rc.3", - "@storybook/addon-jest": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addon-storyshots-puppeteer": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/addon-toolbars": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/cli": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/addon-interactions": "6.5.0-alpha.5", + "@storybook/addon-jest": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/addon-toolbars": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/cli": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/design-system": "^5.4.7", - "@storybook/jest": "^0.0.2", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", - "@storybook/router": "6.4.0-rc.3", - "@storybook/source-loader": "6.4.0-rc.3", - "@storybook/testing-library": "^0.0.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/jest": "^0.0.5", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/router": "6.5.0-alpha.5", + "@storybook/source-loader": "6.5.0-alpha.5", + "@storybook/testing-library": "^0.0.7", + "@storybook/theming": "6.5.0-alpha.5", "@testing-library/dom": "^7.31.2", "@testing-library/user-event": "^13.1.9", "chromatic": "^6.0.2", @@ -50,7 +50,7 @@ "format-json": "^1.0.3", "global": "^4.4.0", "jest-emotion": "^10.0.32", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "paths.macro": "^3.0.1", "prop-types": "^15.7.2", "react": "16.14.0", diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index f14ab2efae66..9aca6f598bf4 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "preact-example", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,16 +15,16 @@ "devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.12.10", - "@storybook/addon-a11y": "6.4.0-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/preact": "6.4.0-rc.3", - "@storybook/source-loader": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/preact": "6.5.0-alpha.5", + "@storybook/source-loader": "6.5.0-alpha.5", "@types/prop-types": "^15.7.3", "@types/react": "^17", "@types/react-dom": "^17", diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json index 0ead9f5bc743..7cd61079f12f 100644 --- a/examples/react-ts-webpack4/package.json +++ b/examples/react-ts-webpack4/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts-webpack4", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -8,10 +8,10 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache" }, "dependencies": { - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-essentials": "6.4.0-rc.3", - "@storybook/builder-webpack4": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-essentials": "6.5.0-alpha.5", + "@storybook/builder-webpack4": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "prop-types": "15.7.2", diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts index 76da86225ef6..865d5edbda32 100644 --- a/examples/react-ts/.storybook/main.ts +++ b/examples/react-ts/.storybook/main.ts @@ -31,6 +31,7 @@ const config: StorybookConfig = { storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'), buildStoriesJson: true, babelModeV7: true, + warnOnLegacyHierarchySeparator: false, }, framework: '@storybook/react', }; diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index c38f80b8ed8e..5947dd82666a 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook", @@ -18,13 +18,13 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addon-essentials": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/cli": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/addon-essentials": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/cli": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "@testing-library/dom": "^7.31.2", "@testing-library/user-event": "^13.1.9", "@types/babel__preset-env": "^7", diff --git a/examples/server-kitchen-sink/package.json b/examples/server-kitchen-sink/package.json index 0d3488e6a7f0..50b5acad221e 100644 --- a/examples/server-kitchen-sink/package.json +++ b/examples/server-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "server-kitchen-sink", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "description": "", "keywords": [], @@ -14,13 +14,13 @@ "storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet" }, "devDependencies": { - "@storybook/addon-a11y": "6.4.0-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/server": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/server": "6.5.0-alpha.5", "concurrently": "^5.3.0", "cors": "^2.8.5", "express": "~4.17.1", diff --git a/examples/standalone-preview/README.md b/examples/standalone-preview/README.md index 06c45a73689a..ef620a4d92bb 100644 --- a/examples/standalone-preview/README.md +++ b/examples/standalone-preview/README.md @@ -5,7 +5,7 @@ This project demonstrates a preview running in standalone mode using `parcel`. To run the standalone preview: ``` -yarn storybook +yarn storybook-preview ``` This starts a `parcel` dev server on port `1337`. @@ -13,10 +13,9 @@ This starts a `parcel` dev server on port `1337`. To view the stories in the storybook UI: ``` -cd ../official-storybook -npm storybook -- --preview-url=http://localhost:1337/iframe.html # or yarn +yarn storybook ``` -This runs the Storybook dev server, but instead of showing `official-storybook`'s stories, it attaches to the `parcel` dev server, lists its stories in the navigation, and shows its stories in the preview iframe. +This runs the Storybook dev server (Found in ../official-storybook), but instead of showing `official-storybook`'s stories, it attaches to the `parcel` dev server, lists its stories in the navigation, and shows its stories in the preview iframe. > NOTE: This can be run from any working storybook, not just `official-storybook`! diff --git a/examples/standalone-preview/addPreview.ts b/examples/standalone-preview/addPreview.ts new file mode 100644 index 000000000000..f65d8cf7243b --- /dev/null +++ b/examples/standalone-preview/addPreview.ts @@ -0,0 +1,3 @@ +export {}; + +global.PREVIEW_URL = process.env.PREVIEW_URL; diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json index 805cc523bbfb..05166571f3fe 100644 --- a/examples/standalone-preview/package.json +++ b/examples/standalone-preview/package.json @@ -1,14 +1,17 @@ { "name": "standalone-preview", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { - "storybook": "parcel ./storybook.html --port 1337" + "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337", + "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html" }, "devDependencies": { - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", - "parcel": "^1.12.4", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/cli": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", + "cross-env": "^7.0.3", + "parcel": "2.0.1", "react": "16.14.0", "react-dom": "16.14.0" } diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html index 834cd2e00ca0..ac1f9f1fe2cb 100644 --- a/examples/standalone-preview/storybook.html +++ b/examples/standalone-preview/storybook.html @@ -9,7 +9,7 @@
- +
diff --git a/examples/standalone-preview/storybook.ts b/examples/standalone-preview/storybook.ts index b218ec5b6f50..a588cf96ca02 100644 --- a/examples/standalone-preview/storybook.ts +++ b/examples/standalone-preview/storybook.ts @@ -1,3 +1,4 @@ +import './addPreview'; import { configure, addParameters } from '@storybook/react'; import { DocsPage, DocsContainer } from '@storybook/addon-docs'; diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index 9c6c40c1accf..96f6a7feb8f2 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "svelte-example", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build-storybook": "build-storybook", @@ -10,21 +10,21 @@ "global": "^4.4.0" }, "devDependencies": { - "@storybook/addon-a11y": "6.4.0-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/addon-interactions": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/jest": "^0.0.2", - "@storybook/source-loader": "6.4.0-rc.3", - "@storybook/svelte": "6.4.0-rc.3", - "@storybook/testing-library": "^0.0.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/addon-interactions": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/jest": "^0.0.5", + "@storybook/source-loader": "6.5.0-alpha.5", + "@storybook/svelte": "6.5.0-alpha.5", + "@storybook/testing-library": "^0.0.7", "svelte-jester": "1.3.0", "svelte-preprocess": "4.6.8" }, diff --git a/examples/svelte-kitchen-sink/src/stories/addon-interactions.stories_.js b/examples/svelte-kitchen-sink/src/stories/addon-interactions.stories_.js deleted file mode 100644 index 6e41acdbda6d..000000000000 --- a/examples/svelte-kitchen-sink/src/stories/addon-interactions.stories_.js +++ /dev/null @@ -1,23 +0,0 @@ -import { expect } from '@storybook/jest'; -import { within, userEvent } from '@storybook/testing-library'; - -import Counter from '../components/Counter.svelte'; - -export default { - title: 'Addon/Interactions', -}; - -const Template = (args) => ({ - Component: Counter, - props: args, -}); - -export const Default = Template.bind({}); - -Default.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - await userEvent.click(await canvas.findByText('Increment')); - - const count = await canvas.findByTestId('count'); - await expect(count.textContent).toEqual('You clicked 1 times'); -}; diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json index 60ed6e5931d3..071c1501fd13 100644 --- a/examples/vue-3-cli/package.json +++ b/examples/vue-3-cli/package.json @@ -1,6 +1,6 @@ { "name": "vue-3-cli-example", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "vue-cli-service build", @@ -14,14 +14,14 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-essentials": "6.4.0-rc.3", - "@storybook/addon-interactions": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/jest": "^0.0.2", - "@storybook/testing-library": "^0.0.3", - "@storybook/vue3": "6.4.0-rc.3", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-essentials": "6.5.0-alpha.5", + "@storybook/addon-interactions": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/jest": "^0.0.5", + "@storybook/testing-library": "^0.0.7", + "@storybook/vue3": "6.5.0-alpha.5", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json index 4d35d0df6ddc..6edd07daabfa 100644 --- a/examples/vue-cli/package.json +++ b/examples/vue-cli/package.json @@ -1,6 +1,6 @@ { "name": "vue-cli-example", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "vue-cli-service build", @@ -15,11 +15,11 @@ "vue-property-decorator": "^9.1.2" }, "devDependencies": { - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-essentials": "6.4.0-rc.3", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-essentials": "6.5.0-alpha.5", "@storybook/preset-scss": "^1.0.3", - "@storybook/source-loader": "6.4.0-rc.3", - "@storybook/vue": "6.4.0-rc.3", + "@storybook/source-loader": "6.5.0-alpha.5", + "@storybook/vue": "6.5.0-alpha.5", "@vue/cli-plugin-babel": "~4.3.1", "@vue/cli-plugin-typescript": "~4.3.1", "@vue/cli-service": "~4.3.1", diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index af0d5477c526..313a9851380a 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "vue-example", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -14,21 +14,21 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/addon-a11y": "6.4.0-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/addon-interactions": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/jest": "^0.0.2", - "@storybook/source-loader": "6.4.0-rc.3", - "@storybook/testing-library": "^0.0.3", - "@storybook/vue": "6.4.0-rc.3", + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/addon-interactions": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/jest": "^0.0.5", + "@storybook/source-loader": "6.5.0-alpha.5", + "@storybook/testing-library": "^0.0.7", + "@storybook/vue": "6.5.0-alpha.5", "@vue/babel-preset-jsx": "^1.2.4", "babel-loader": "^8.0.0", "cross-env": "^7.0.3", diff --git a/examples/vue-kitchen-sink/src/stories/addon-interactions.stories_.js b/examples/vue-kitchen-sink/src/stories/addon-interactions.stories_.js deleted file mode 100644 index 616b5141f723..000000000000 --- a/examples/vue-kitchen-sink/src/stories/addon-interactions.stories_.js +++ /dev/null @@ -1,28 +0,0 @@ -import { expect } from '@storybook/jest'; -import { within, userEvent } from '@storybook/testing-library'; - -import Counter from './Counter.vue'; - -export default { - title: 'Addon/Interactions', - component: Counter, -}; - -const Template = (args) => ({ - components: { Counter }, - setup() { - return { args }; - }, - template: '', -}); - -export const Default = Template.bind({}); - -Default.play = async ({ canvasElement }) => { - // TODO: 1 - coming from another story this works, refreshing the browser it fails - const canvas = within(canvasElement); - await userEvent.click(await canvas.findByText('Increment')); - - const count = await canvas.findByTestId('count'); - await expect(count.textContent).toEqual('You clicked 1 times'); -}; diff --git a/examples/web-components-kitchen-sink/custom-elements.json b/examples/web-components-kitchen-sink/custom-elements.json index aaba478e95e5..a9dc8357b10d 100644 --- a/examples/web-components-kitchen-sink/custom-elements.json +++ b/examples/web-components-kitchen-sink/custom-elements.json @@ -46,15 +46,17 @@ "text": "boolean" }, "description": "Set button in primary mode", - "privacy": "public" + "privacy": "public", + "attribute": "primary" }, { "kind": "field", "name": "backgroundColor", "type": { - "text": "string" + "text": "string | undefined" }, - "privacy": "public" + "privacy": "public", + "attribute": "background-color" }, { "kind": "field", @@ -63,13 +65,19 @@ "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", - "privacy": "public" + "privacy": "public", + "attribute": "size" }, { "kind": "field", "name": "label", + "type": { + "text": "string" + }, "default": "''", - "privacy": "public" + "privacy": "public", + "attribute": "label", + "reflects": true }, { "kind": "method", @@ -92,14 +100,16 @@ "text": "string" }, "description": "Label of the button", - "name": "label" + "name": "label", + "fieldName": "label" }, { "type": { "text": "string" }, "description": "Size of the button, can be \"small\", \"medium\" or \"large\"; default is \"medium\".", - "name": "size" + "name": "size", + "fieldName": "size" }, { "type": { @@ -108,20 +118,12 @@ "description": "Color of the button's background", "name": "backgroundColor" }, - { - "name": "label", - "fieldName": "label" - }, { "name": "primary", "fieldName": "primary" }, { - "name": "size", - "fieldName": "size" - }, - { - "name": "backgroundColor", + "name": "background-color", "fieldName": "backgroundColor" } ], @@ -166,9 +168,11 @@ "kind": "field", "name": "user", "type": { - "text": "{}" + "text": "{} | undefined" }, - "privacy": "public" + "privacy": "public", + "attribute": "user", + "reflects": true }, { "kind": "method", @@ -223,9 +227,6 @@ "text": "Object" }, "description": "User of the app", - "name": "user" - }, - { "name": "user", "fieldName": "user" } @@ -271,9 +272,11 @@ "kind": "field", "name": "user", "type": { - "text": "{}" + "text": "{} | undefined" }, - "privacy": "public" + "privacy": "public", + "attribute": "user", + "reflects": true } ], "attributes": [ @@ -282,9 +285,6 @@ "text": "Object" }, "description": "User of the app", - "name": "user" - }, - { "name": "user", "fieldName": "user" } @@ -363,23 +363,36 @@ { "kind": "field", "name": "backSide", - "privacy": "public", + "type": { + "text": "boolean" + }, "description": "Indicates that the back of the card is shown", - "default": "false" + "default": "false", + "privacy": "public", + "attribute": "back-side", + "reflects": true }, { "kind": "field", "name": "header", - "privacy": "public", + "type": { + "text": "string" + }, "description": "Header message", - "default": "'Your Message'" + "default": "'Your Message'", + "privacy": "public", + "attribute": "header" }, { "kind": "field", "name": "rows", - "privacy": "public", + "type": { + "text": "array" + }, "description": "Data rows", - "default": "[]" + "default": "[]", + "privacy": "public", + "attribute": "rows" } ], "events": [ @@ -430,7 +443,8 @@ "declarations": [ { "kind": "variable", - "name": "demoWcCardStyle" + "name": "demoWcCardStyle", + "default": "css`\n :host {\n display: block;\n position: relative;\n width: 250px;\n height: 200px;\n border-radius: 10px;\n transform-style: preserve-3d;\n transition: all 0.8s ease;\n }\n\n .header {\n font-weight: bold;\n font-size: var(--demo-wc-card-header-font-size, 16px);\n text-align: center;\n }\n\n .content {\n padding: 20px 10px 0 10px;\n flex-grow: 1;\n }\n\n .footer {\n display: flex;\n }\n\n dl {\n margin: 0;\n text-align: left;\n }\n\n dd {\n margin-left: 15px;\n }\n\n button {\n border-radius: 15px;\n width: 30px;\n height: 30px;\n background: #fff;\n border: 1px solid #ccc;\n color: #000;\n font-size: 21px;\n line-height: 27px;\n font-weight: bold;\n cursor: pointer;\n margin: 5px;\n }\n\n .note {\n flex-grow: 1;\n color: #666;\n font-size: 16px;\n font-weight: bold;\n text-align: left;\n padding-top: 15px;\n }\n\n :host([back-side]) {\n transform: rotateY(180deg);\n }\n\n #front,\n #back {\n position: absolute;\n width: 250px;\n box-sizing: border-box;\n box-shadow: #ccc 3px 3px 2px 1px;\n padding: 10px;\n display: flex;\n flex-flow: column;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 10px;\n backface-visibility: hidden;\n overflow: hidden;\n }\n\n #front {\n background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);\n color: var(--demo-wc-card-front-color, #000);\n }\n\n #back {\n background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);\n color: var(--demo-wc-card-back-color, #fff);\n text-align: center;\n transform: rotateY(180deg) translate3d(0px, 0, 1px);\n }\n\n #back .note {\n color: #fff;\n }\n`" } ], "exports": [ diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index c7e4ba4549ba..89511bc9ec52 100644 --- a/examples/web-components-kitchen-sink/package.json +++ b/examples/web-components-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "web-components-kitchen-sink", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "private": true, "description": "", "keywords": [], @@ -10,7 +10,7 @@ "scripts": { "build-storybook": "build-storybook", "storybook": "start-storybook -p 9006 --no-manager-cache", - "generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\"" + "generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\" --exclude \"./storybook-static\"" }, "resolutions": { "@storybook/addon-a11y": "portal:../../addons/a11y", @@ -40,7 +40,7 @@ "@storybook/core-events": "portal:../../lib/core-events", "@storybook/core-server": "portal:../../lib/core-server", "@storybook/csf-tools": "portal:../../lib/csf-tools", - "@storybook/jest": "^0.0.2", + "@storybook/jest": "^0.0.5", "@storybook/manager-webpack4": "portal:../../lib/manager-webpack4", "@storybook/node-logger": "portal:../../lib/node-logger", "@storybook/postinstall": "portal:../../lib/postinstall", @@ -48,7 +48,7 @@ "@storybook/router": "portal:../../lib/router", "@storybook/source-loader": "portal:../../lib/source-loader", "@storybook/store": "portal:../../lib/store", - "@storybook/testing-library": "^0.0.3", + "@storybook/testing-library": "^0.0.7", "@storybook/theming": "portal:../../lib/theming", "@storybook/ui": "portal:../../lib/ui", "@storybook/web-components": "portal:../../app/web-components", @@ -57,10 +57,10 @@ "typescript": "4.2.4" }, "dependencies": { - "lit": "^2.0.0-rc.2" + "lit": "^2.0.2" }, "devDependencies": { - "@custom-elements-manifest/analyzer": "^0.3.11", + "@custom-elements-manifest/analyzer": "^0.5.7", "@storybook/addon-a11y": "*", "@storybook/addon-actions": "*", "@storybook/addon-backgrounds": "*", @@ -73,7 +73,7 @@ "@storybook/addon-viewport": "*", "@storybook/web-components": "*", "global": "^4.4.0", - "jest": "^27.0.1", + "jest": "^27.3.1", "typescript": "4.2.4" }, "customElements": "custom-elements.json", diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts index 1596edbe27ff..f1e4d56cedc2 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/addon-docs.stories.ts @@ -13,7 +13,7 @@ export const NoDocs: Story = () => html`
Click docs tab to see no docs error NoDocs.parameters = { docs: { page: null } }; export const LargerThanPreview: Story = () => - html`
HUGE
`; + html`
HUGE
`; export const MdxOverride: Story = () => html`
Click docs tab to see MDX-overridden docs
`; MdxOverride.parameters = { diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx b/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx index 25b1df745979..906930d34547 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx +++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/notes/notes.mdx @@ -1,4 +1,4 @@ -import { Story } from '@storybook/addon-docs/blocks'; +import { Story } from '@storybook/addon-docs'; # Welcome! diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock index 6a5d0bab2b6a..13f9d3219930 100644 --- a/examples/web-components-kitchen-sink/yarn.lock +++ b/examples/web-components-kitchen-sink/yarn.lock @@ -1446,6 +1446,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.7.6": + version: 7.16.3 + resolution: "@babel/runtime@npm:7.16.3" + dependencies: + regenerator-runtime: ^0.13.4 + checksum: 37a7f334e8ad1383a78d39224ba9f95b94556189a0f1e93bc1b5729dc18d9eb5eb0ba3742073629cd4024fc101315fe8945931f80ba32518f651a4f0438ec4dc + languageName: node + linkType: hard + "@babel/template@npm:^7.12.7, @babel/template@npm:^7.14.5, @babel/template@npm:^7.3.3, @babel/template@npm:^7.7.0": version: 7.14.5 resolution: "@babel/template@npm:7.14.5" @@ -1510,22 +1519,22 @@ __metadata: languageName: node linkType: hard -"@custom-elements-manifest/analyzer@npm:^0.3.11": - version: 0.3.13 - resolution: "@custom-elements-manifest/analyzer@npm:0.3.13" - dependencies: - "@web/config-loader": ^0.1.3 - chokidar: ^3.5.2 - command-line-args: ^5.1.1 - comment-parser: ^1.1.5 - custom-elements-manifest: ^1.0.0 - debounce: ^1.2.1 - globby: ^11.0.1 - typescript: ^4.3.2 +"@custom-elements-manifest/analyzer@npm:^0.5.7": + version: 0.5.7 + resolution: "@custom-elements-manifest/analyzer@npm:0.5.7" + dependencies: + "@web/config-loader": 0.1.3 + chokidar: 3.5.2 + command-line-args: 5.1.2 + comment-parser: 1.2.4 + custom-elements-manifest: 1.0.0 + debounce: 1.2.1 + globby: 11.0.4 + typescript: ~4.3.2 bin: cem: index.js custom-elements-manifest: index.js - checksum: 96c557b0e627522ec6b06934cd8a3317f0516b8d3eefaf9f25012ada72c1a260952ab37f5987608c158407a71c7df218196e2b136680ae0dcddccb2141f951e7 + checksum: 48fc66cccd5f142a88404ffc211603c5b49c53f55072f8edc6ff05a511849923ed4b9691466591abdf21907c359cc4fce8d3058a5fa61425b8b97ccec4017f35 languageName: node linkType: hard @@ -1694,50 +1703,49 @@ __metadata: languageName: node linkType: hard -"@jest/console@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/console@npm:27.0.6" +"@jest/console@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/console@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 "@types/node": "*" chalk: ^4.0.0 - jest-message-util: ^27.0.6 - jest-util: ^27.0.6 + jest-message-util: ^27.3.1 + jest-util: ^27.3.1 slash: ^3.0.0 - checksum: b0fd8e9d1faf1080b5ad8176147c7632c810a5b144a4b3a92ef1cdcda86779268c740beff1566e74fa3d276cb60587c4d68f25181b3a64fed88143c2beaf6bf7 + checksum: 941145b3c52a641bb0a8fc0f1e3b7599e3f32ff393df8e5235b245b1cbcadacca47d8fd79385fe22af3f8ec1a9a5e9ba66407b3a35a49477d591a0de9568e262 languageName: node linkType: hard -"@jest/core@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/core@npm:27.0.6" +"@jest/core@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/core@npm:27.3.1" dependencies: - "@jest/console": ^27.0.6 - "@jest/reporters": ^27.0.6 - "@jest/test-result": ^27.0.6 - "@jest/transform": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/console": ^27.3.1 + "@jest/reporters": ^27.3.1 + "@jest/test-result": ^27.3.1 + "@jest/transform": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" ansi-escapes: ^4.2.1 chalk: ^4.0.0 emittery: ^0.8.1 exit: ^0.1.2 graceful-fs: ^4.2.4 - jest-changed-files: ^27.0.6 - jest-config: ^27.0.6 - jest-haste-map: ^27.0.6 - jest-message-util: ^27.0.6 + jest-changed-files: ^27.3.0 + jest-config: ^27.3.1 + jest-haste-map: ^27.3.1 + jest-message-util: ^27.3.1 jest-regex-util: ^27.0.6 - jest-resolve: ^27.0.6 - jest-resolve-dependencies: ^27.0.6 - jest-runner: ^27.0.6 - jest-runtime: ^27.0.6 - jest-snapshot: ^27.0.6 - jest-util: ^27.0.6 - jest-validate: ^27.0.6 - jest-watcher: ^27.0.6 + jest-resolve: ^27.3.1 + jest-resolve-dependencies: ^27.3.1 + jest-runner: ^27.3.1 + jest-runtime: ^27.3.1 + jest-snapshot: ^27.3.1 + jest-util: ^27.3.1 + jest-validate: ^27.3.1 + jest-watcher: ^27.3.1 micromatch: ^4.0.4 - p-each-series: ^2.1.0 rimraf: ^3.0.0 slash: ^3.0.0 strip-ansi: ^6.0.0 @@ -1746,56 +1754,57 @@ __metadata: peerDependenciesMeta: node-notifier: optional: true - checksum: e9167d0d3b9bd3c3ee0908f6f32ad8175ed4abdbb27c9c2a1175e6ad839efa1d521099e0d4a46a955f1fcc5903fc7acd9444c3066e1ac9704d1ba9397b70cf5d + checksum: 12116ba5925d50a717ebab5fd70a7712749440c10379d7e6d2f3b775ea24f0552db0bbd7432f924d357a27cc365ec90574c715fe705632d5d9f387ac0b210962 languageName: node linkType: hard -"@jest/environment@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/environment@npm:27.0.6" +"@jest/environment@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/environment@npm:27.3.1" dependencies: - "@jest/fake-timers": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/fake-timers": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" - jest-mock: ^27.0.6 - checksum: 61ae0d128d3e45fd8578aefcb78c6fb152f59fd67d424604bae85afb8aded030c9f2ecf809f8cb6f2143b2ade3cb62086c12d4c9f9022ffc2272cd6804fe973d + jest-mock: ^27.3.0 + checksum: 3d0773c1a118c1ec325aeb8df0d750b0e47d5a9a2d8dbefd7cd4afd7b645660c9ac4678be4cc1bac16f287473bfffbfce99b15b1801ce0c0781aab378adee1d3 languageName: node linkType: hard -"@jest/fake-timers@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/fake-timers@npm:27.0.6" +"@jest/fake-timers@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/fake-timers@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 - "@sinonjs/fake-timers": ^7.0.2 + "@jest/types": ^27.2.5 + "@sinonjs/fake-timers": ^8.0.1 "@types/node": "*" - jest-message-util: ^27.0.6 - jest-mock: ^27.0.6 - jest-util: ^27.0.6 - checksum: 8641807432cf10f242ce26b6f2cf5d54d0252af68db613ebbba2d3431d9e37d1788b7a87219febff10acf38d340140b957a5ed6f0b624e57238bbc2d759dc03c + jest-message-util: ^27.3.1 + jest-mock: ^27.3.0 + jest-util: ^27.3.1 + checksum: d982565483d79d24a26146509a063a2547e30665f8287e33d09a120e5d30c3251b23f899b8a9708ae4817ccc18e8c0ec7342fae10699a3b3f154f5ae95afb27c languageName: node linkType: hard -"@jest/globals@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/globals@npm:27.0.6" +"@jest/globals@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/globals@npm:27.3.1" dependencies: - "@jest/environment": ^27.0.6 - "@jest/types": ^27.0.6 - expect: ^27.0.6 - checksum: f7d50d9bc7908e2609e8d9714662479997cad4ccb3b75ad9100c8cca7e5cc85d5c2f21ad0ccdf50c926d79917c4fc0178a7ad992020adb50c82337c8b1469c79 + "@jest/environment": ^27.3.1 + "@jest/types": ^27.2.5 + expect: ^27.3.1 + checksum: 2fecfe6e9380f0433346a8a8df74e86b55e113addfd0b3c4ab1e589e24cdb9dbb590e11b48c7b13428163c854d88cd09ed18b8c28dba2a6db09c97b6b302c2a7 languageName: node linkType: hard -"@jest/reporters@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/reporters@npm:27.0.6" +"@jest/reporters@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/reporters@npm:27.3.1" dependencies: "@bcoe/v8-coverage": ^0.2.3 - "@jest/console": ^27.0.6 - "@jest/test-result": ^27.0.6 - "@jest/transform": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/console": ^27.3.1 + "@jest/test-result": ^27.3.1 + "@jest/transform": ^27.3.1 + "@jest/types": ^27.2.5 + "@types/node": "*" chalk: ^4.0.0 collect-v8-coverage: ^1.0.0 exit: ^0.1.2 @@ -1806,21 +1815,21 @@ __metadata: istanbul-lib-report: ^3.0.0 istanbul-lib-source-maps: ^4.0.0 istanbul-reports: ^3.0.2 - jest-haste-map: ^27.0.6 - jest-resolve: ^27.0.6 - jest-util: ^27.0.6 - jest-worker: ^27.0.6 + jest-haste-map: ^27.3.1 + jest-resolve: ^27.3.1 + jest-util: ^27.3.1 + jest-worker: ^27.3.1 slash: ^3.0.0 source-map: ^0.6.0 string-length: ^4.0.1 terminal-link: ^2.0.0 - v8-to-istanbul: ^8.0.0 + v8-to-istanbul: ^8.1.0 peerDependencies: node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 peerDependenciesMeta: node-notifier: optional: true - checksum: 6f94746cc5c9a2e5c061706d376da49808e066afbe0c459e07f665640b273f01177b4a1933264b7bb2a4b91aafe3976287b69d2f0be62e871cec76685a699394 + checksum: 91c013c9ccab60b9a42a68f502b2631428e697c4a5cbbba7e9be108887425e338b2fe3c92b41c22f7903b35fa8bb18b89a7d3be2beae757cafc004881eb339c7 languageName: node linkType: hard @@ -1835,27 +1844,27 @@ __metadata: languageName: node linkType: hard -"@jest/test-result@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/test-result@npm:27.0.6" +"@jest/test-result@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/test-result@npm:27.3.1" dependencies: - "@jest/console": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/console": ^27.3.1 + "@jest/types": ^27.2.5 "@types/istanbul-lib-coverage": ^2.0.0 collect-v8-coverage: ^1.0.0 - checksum: a5bc94d230ee12238236a877f0db68d3eeb24d259e62299a8e1da414c04c93e94025e1fe18a9a574af17050117a31ccc30621b291257498f5ed7add317b634e9 + checksum: 777b6d6e79819f15d7f66826da01bebd2fae70c8d39bb0345cfc1b7fb8d5eba551fd93362f071b30f0534a9d0b79dad47b5e909a7435a7eacb8f7f1dcf1cc5c4 languageName: node linkType: hard -"@jest/test-sequencer@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/test-sequencer@npm:27.0.6" +"@jest/test-sequencer@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/test-sequencer@npm:27.3.1" dependencies: - "@jest/test-result": ^27.0.6 + "@jest/test-result": ^27.3.1 graceful-fs: ^4.2.4 - jest-haste-map: ^27.0.6 - jest-runtime: ^27.0.6 - checksum: b480d3d5bab7bc6cdc8314374fe7e9a502ceeeb7f1c847f299dd3436590de2089d90d846fe57a9223481e4e43930c1b97a720c811ad3ab6a19f75ad4a11460f0 + jest-haste-map: ^27.3.1 + jest-runtime: ^27.3.1 + checksum: 49ae76912890bd1e500ff0191172feed55bf4a915869a830a95549156162fbc22efbad896eee9cc490eb7dfde1c579b87acb1e48363468d56b5c0e445a0d431b languageName: node linkType: hard @@ -1882,26 +1891,26 @@ __metadata: languageName: node linkType: hard -"@jest/transform@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/transform@npm:27.0.6" +"@jest/transform@npm:^27.3.1": + version: 27.3.1 + resolution: "@jest/transform@npm:27.3.1" dependencies: "@babel/core": ^7.1.0 - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 babel-plugin-istanbul: ^6.0.0 chalk: ^4.0.0 convert-source-map: ^1.4.0 fast-json-stable-stringify: ^2.0.0 graceful-fs: ^4.2.4 - jest-haste-map: ^27.0.6 + jest-haste-map: ^27.3.1 jest-regex-util: ^27.0.6 - jest-util: ^27.0.6 + jest-util: ^27.3.1 micromatch: ^4.0.4 pirates: ^4.0.1 slash: ^3.0.0 source-map: ^0.6.1 write-file-atomic: ^3.0.0 - checksum: 45b7e9a84262a3f4152cdf0f5a20f6af4550c8ff4ee8f372d7d63ff26451c8ac994a458e333664919a4937a37db2e937bcb8bfb38e6e7847b35cf062d8ea840e + checksum: d0d5f9feec2c6d0bf59e947d5f38a84b2cd2da67e842661b58d754fb83b3a054050fbc85b44a516c9572b5fc5a0333cfa630dc1cb084384309bcc31b65fcb774 languageName: node linkType: hard @@ -1918,23 +1927,23 @@ __metadata: languageName: node linkType: hard -"@jest/types@npm:^27.0.6": - version: 27.0.6 - resolution: "@jest/types@npm:27.0.6" +"@jest/types@npm:^27.2.5": + version: 27.2.5 + resolution: "@jest/types@npm:27.2.5" dependencies: "@types/istanbul-lib-coverage": ^2.0.0 "@types/istanbul-reports": ^3.0.0 "@types/node": "*" "@types/yargs": ^16.0.0 chalk: ^4.0.0 - checksum: a73e6399087b6a13e713713238b862bf42219617b85116da00639305f86511ca4688aafe891e86e74350bc8d2424d42f6066416378f771e94e3f41e5ae818a18 + checksum: 81004021d4b3958b48ca723fff9deb8dd585643bcbaa3e3bbd8c6934a78f1fe8ed05ecd98c1577ca01043e674d299ceead41f3cb6cd38a6d5a1e36d4033e18f3 languageName: node linkType: hard -"@lit/reactive-element@npm:^1.0.0-rc.2": - version: 1.0.0-rc.2 - resolution: "@lit/reactive-element@npm:1.0.0-rc.2" - checksum: b04c5550c9eb8f45f6012bed1ee009da18a94c26869e9e96b63793005f63527846a22db43208cba4c5105eca787cf3b91a95cc1b53a50240808e2e76f61d66b4 +"@lit/reactive-element@npm:^1.0.0": + version: 1.0.2 + resolution: "@lit/reactive-element@npm:1.0.2" + checksum: 531eafe6a62908674735a52602fd7a7c6692e86d15d9dc9979185209ee7d323d456b8faa445a9d19c241309f43d7325660f99e6ae569c6cf7a7662aa1fbf2145 languageName: node linkType: hard @@ -2053,21 +2062,6 @@ __metadata: languageName: node linkType: hard -"@reach/router@npm:^1.3.4": - version: 1.3.4 - resolution: "@reach/router@npm:1.3.4" - dependencies: - create-react-context: 0.3.0 - invariant: ^2.2.3 - prop-types: ^15.6.1 - react-lifecycles-compat: ^3.0.4 - peerDependencies: - react: 15.x || 16.x || 16.4.0-alpha.0911da3 - react-dom: 15.x || 16.x || 16.4.0-alpha.0911da3 - checksum: 083fcb658ae5cd0de2b7ebe56bbb8c1b4aa6ec035038d41916afcdd2f31ffd7ccdd6848f7ee8e53d562c31fc4c1b1953fd7007eb9d57daf65779f344ca5a5373 - languageName: node - linkType: hard - "@sinonjs/commons@npm:^1.7.0": version: 1.8.3 resolution: "@sinonjs/commons@npm:1.8.3" @@ -2077,12 +2071,12 @@ __metadata: languageName: node linkType: hard -"@sinonjs/fake-timers@npm:^7.0.2": - version: 7.1.2 - resolution: "@sinonjs/fake-timers@npm:7.1.2" +"@sinonjs/fake-timers@npm:^8.0.1": + version: 8.1.0 + resolution: "@sinonjs/fake-timers@npm:8.1.0" dependencies: "@sinonjs/commons": ^1.7.0 - checksum: c94de47ff2eceb2a7009c970f932509e81e474b555ea994343aea4c87aed26844ba298a70d585c0769e63fe379ebae6aaad61d37b3bca71f740a8d3d49f1bc27 + checksum: d6b795f9ddaf044daf184c151555ca557ccd23636f2ee3d2f76a9d128329f81fc1aac412f6f67239ab92cb9390aad9955b71df93cf4bd442c68b1f341e381ab6 languageName: node linkType: hard @@ -2090,14 +2084,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/channels": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/theming": 6.4.0-rc.5 axe-core: ^4.2.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2121,12 +2115,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/theming": 6.4.0-rc.5 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2135,6 +2129,7 @@ __metadata: prop-types: ^15.7.2 react-inspector: ^5.1.0 regenerator-runtime: ^0.13.7 + telejson: ^5.3.2 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 uuid-browser: ^3.1.0 @@ -2153,13 +2148,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/theming": 6.4.0-rc.5 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2181,15 +2176,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core-common": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core-common": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/node-logger": 6.4.0-beta.14 - "@storybook/store": 6.4.0-beta.14 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/node-logger": 6.4.0-rc.5 + "@storybook/store": 6.4.0-rc.5 + "@storybook/theming": 6.4.0-rc.5 core-js: ^3.8.2 lodash: ^4.17.20 ts-dedent: ^2.0.0 @@ -2217,22 +2212,21 @@ __metadata: "@mdx-js/loader": ^1.6.22 "@mdx-js/mdx": ^1.6.22 "@mdx-js/react": ^1.6.22 - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/builder-webpack4": 6.4.0-beta.14 - "@storybook/client-api": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/builder-webpack4": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/csf-tools": 6.4.0-beta.14 - "@storybook/node-logger": 6.4.0-beta.14 - "@storybook/postinstall": 6.4.0-beta.14 - "@storybook/preview-web": 6.4.0-beta.14 - "@storybook/source-loader": 6.4.0-beta.14 - "@storybook/store": 6.4.0-beta.14 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/csf-tools": 6.4.0-rc.5 + "@storybook/node-logger": 6.4.0-rc.5 + "@storybook/postinstall": 6.4.0-rc.5 + "@storybook/preview-web": 6.4.0-rc.5 + "@storybook/source-loader": 6.4.0-rc.5 + "@storybook/store": 6.4.0-rc.5 + "@storybook/theming": 6.4.0-rc.5 acorn: ^7.4.1 acorn-jsx: ^5.3.1 acorn-walk: ^7.2.0 @@ -2256,14 +2250,14 @@ __metadata: ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 peerDependencies: - "@storybook/angular": 6.4.0-beta.14 - "@storybook/html": 6.4.0-beta.14 - "@storybook/react": 6.4.0-beta.14 - "@storybook/vue": 6.4.0-beta.14 - "@storybook/vue3": 6.4.0-beta.14 - "@storybook/web-components": 6.4.0-beta.14 - lit: ^2.0.0-rc.1 - lit-html: ^1.4.1 || ^2.0.0-rc.3 + "@storybook/angular": 6.4.0-rc.5 + "@storybook/html": 6.4.0-rc.5 + "@storybook/react": 6.4.0-rc.5 + "@storybook/vue": 6.4.0-rc.5 + "@storybook/vue3": 6.4.0-rc.5 + "@storybook/web-components": 6.4.0-rc.5 + lit: ^2.0.0 + lit-html: ^1.4.1 || ^2.0.0 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 svelte: ^3.31.2 @@ -2332,11 +2326,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.4.0-beta.14 + "@storybook/router": 6.4.0-rc.5 "@types/qs": ^6.9.5 core-js: ^3.8.2 global: ^4.4.0 @@ -2360,16 +2354,16 @@ __metadata: resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@jest/transform": ^26.6.2 - "@storybook/addons": 6.4.0-beta.14 - "@storybook/client-api": 6.4.0-beta.14 - "@storybook/core": 6.4.0-beta.14 - "@storybook/core-client": 6.4.0-beta.14 - "@storybook/core-common": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/babel-plugin-require-context-hook": 1.0.1 + "@storybook/client-api": 6.4.0-rc.5 + "@storybook/core": 6.4.0-rc.5 + "@storybook/core-client": 6.4.0-rc.5 + "@storybook/core-common": 6.4.0-rc.5 "@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 @@ -2435,13 +2429,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/router": 6.4.0-beta.14 - "@storybook/source-loader": 6.4.0-beta.14 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/router": 6.4.0-rc.5 + "@storybook/source-loader": 6.4.0-rc.5 + "@storybook/theming": 6.4.0-rc.5 core-js: ^3.8.2 estraverse: ^5.2.0 loader-utils: ^2.0.0 @@ -2464,12 +2458,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 + "@storybook/theming": 6.4.0-rc.5 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2490,13 +2484,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/api": 6.4.0-beta.14 - "@storybook/channels": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/api": 6.4.0-rc.5 + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.4.0-beta.14 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/router": 6.4.0-rc.5 + "@storybook/theming": 6.4.0-rc.5 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2511,21 +2505,18 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@reach/router": ^1.3.4 - "@storybook/channels": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.4.0-beta.14 + "@storybook/router": 6.4.0-rc.5 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.4.0-beta.14 - "@types/reach__router": ^1.3.7 + "@storybook/theming": 6.4.0-rc.5 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 lodash: ^4.17.20 memoizerific: ^1.11.3 - qs: ^6.10.0 regenerator-runtime: ^0.13.7 store2: ^2.12.0 telejson: ^5.3.2 @@ -2537,6 +2528,13 @@ __metadata: languageName: node linkType: soft +"@storybook/babel-plugin-require-context-hook@npm:1.0.1": + version: 1.0.1 + resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" + checksum: 3baca2838cd0a9901fb8019736e61de45b82f9f52afb279c3df73cd8d0fe42b0f0742e21556e7ebce71838afccdb95324153e425a337e617975812fe461eefc0 + languageName: node + linkType: hard + "@storybook/builder-webpack4@portal:../../lib/builder-webpack4::locator=web-components-kitchen-sink%40workspace%3A.": version: 0.0.0-use.local resolution: "@storybook/builder-webpack4@portal:../../lib/builder-webpack4::locator=web-components-kitchen-sink%40workspace%3A." @@ -2562,22 +2560,22 @@ __metadata: "@babel/preset-env": ^7.12.11 "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/channel-postmessage": 6.4.0-beta.14 - "@storybook/channels": 6.4.0-beta.14 - "@storybook/client-api": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core-common": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 - "@storybook/node-logger": 6.4.0-beta.14 - "@storybook/preview-web": 6.4.0-beta.14 - "@storybook/router": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/channel-postmessage": 6.4.0-rc.5 + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-api": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core-common": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 + "@storybook/node-logger": 6.4.0-rc.5 + "@storybook/preview-web": 6.4.0-rc.5 + "@storybook/router": 6.4.0-rc.5 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.4.0-beta.14 - "@storybook/theming": 6.4.0-beta.14 - "@storybook/ui": 6.4.0-beta.14 + "@storybook/store": 6.4.0-rc.5 + "@storybook/theming": 6.4.0-rc.5 + "@storybook/ui": 6.4.0-rc.5 "@types/node": ^14.0.10 "@types/webpack": ^4.41.26 autoprefixer: ^9.8.6 @@ -2624,9 +2622,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 core-js: ^3.8.2 global: ^4.4.0 qs: ^6.10.0 @@ -2634,6 +2632,18 @@ __metadata: languageName: node linkType: soft +"@storybook/channel-websocket@portal:../../lib/channel-websocket::locator=web-components-kitchen-sink%40workspace%3A.": + version: 0.0.0-use.local + resolution: "@storybook/channel-websocket@portal:../../lib/channel-websocket::locator=web-components-kitchen-sink%40workspace%3A." + dependencies: + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + core-js: ^3.8.2 + global: ^4.4.0 + telejson: ^5.3.2 + languageName: node + linkType: soft + "@storybook/channels@portal:../../lib/channels::locator=web-components-kitchen-sink%40workspace%3A.": version: 0.0.0-use.local resolution: "@storybook/channels@portal:../../lib/channels::locator=web-components-kitchen-sink%40workspace%3A." @@ -2648,13 +2658,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/channel-postmessage": 6.4.0-beta.14 - "@storybook/channels": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/channel-postmessage": 6.4.0-rc.5 + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/store": 6.4.0-beta.14 + "@storybook/store": 6.4.0-rc.5 "@types/qs": ^6.9.5 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 @@ -2665,6 +2675,7 @@ __metadata: qs: ^6.10.0 regenerator-runtime: ^0.13.7 store2: ^2.12.0 + synchronous-promise: ^2.0.15 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 peerDependencies: @@ -2687,9 +2698,9 @@ __metadata: resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@popperjs/core": ^2.6.0 - "@storybook/client-logger": 6.4.0-beta.14 + "@storybook/client-logger": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/theming": 6.4.0-rc.5 "@types/color-convert": ^2.0.0 "@types/overlayscrollbars": ^1.12.0 "@types/react-syntax-highlighter": 11.0.5 @@ -2720,15 +2731,16 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/channel-postmessage": 6.4.0-beta.14 - "@storybook/client-api": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/channel-postmessage": 6.4.0-rc.5 + "@storybook/channel-websocket": 6.4.0-rc.5 + "@storybook/client-api": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/preview-web": 6.4.0-beta.14 - "@storybook/store": 6.4.0-beta.14 - "@storybook/ui": 6.4.0-beta.14 + "@storybook/preview-web": 6.4.0-rc.5 + "@storybook/store": 6.4.0-rc.5 + "@storybook/ui": 6.4.0-rc.5 airbnb-js-shims: ^2.2.1 ansi-to-html: ^0.6.11 core-js: ^3.8.2 @@ -2774,9 +2786,8 @@ __metadata: "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 "@babel/register": ^7.12.1 - "@storybook/node-logger": 6.4.0-beta.14 + "@storybook/node-logger": 6.4.0-rc.5 "@storybook/semver": ^7.3.2 - "@types/micromatch": ^4.0.1 "@types/node": ^14.0.10 "@types/pretty-hrtime": ^1.0.0 babel-loader: ^8.0.0 @@ -2794,11 +2805,12 @@ __metadata: interpret: ^2.2.0 json5: ^2.1.3 lazy-universal-dotenv: ^3.0.1 - micromatch: ^4.0.2 + picomatch: ^2.3.0 pkg-dir: ^5.0.0 pretty-hrtime: ^1.0.3 resolve-from: ^5.0.0 slash: ^3.0.0 + telejson: ^5.3.2 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 webpack: 4 @@ -2824,15 +2836,16 @@ __metadata: resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@discoveryjs/json-ext": ^0.5.3 - "@storybook/builder-webpack4": 6.4.0-beta.14 - "@storybook/core-client": 6.4.0-beta.14 - "@storybook/core-common": 6.4.0-beta.14 + "@storybook/builder-webpack4": 6.4.0-rc.5 + "@storybook/core-client": 6.4.0-rc.5 + "@storybook/core-common": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/csf-tools": 6.4.0-beta.14 - "@storybook/manager-webpack4": 6.4.0-beta.14 - "@storybook/node-logger": 6.4.0-beta.14 + "@storybook/csf-tools": 6.4.0-rc.5 + "@storybook/manager-webpack4": 6.4.0-rc.5 + "@storybook/node-logger": 6.4.0-rc.5 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.4.0-beta.14 + "@storybook/store": 6.4.0-rc.5 "@types/node": ^14.0.10 "@types/node-fetch": ^2.5.7 "@types/pretty-hrtime": ^1.0.0 @@ -2851,18 +2864,22 @@ __metadata: fs-extra: ^9.0.1 globby: ^11.0.2 ip: ^1.1.5 + lodash: ^4.17.20 node-fetch: ^2.6.1 pretty-hrtime: ^1.0.3 prompts: ^2.4.0 regenerator-runtime: ^0.13.7 serve-favicon: ^2.5.0 + slash: ^3.0.0 + telejson: ^5.3.3 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 watchpack: ^2.2.0 webpack: 4 + ws: ^8.2.3 peerDependencies: - "@storybook/builder-webpack5": 6.4.0-beta.14 - "@storybook/manager-webpack5": 6.4.0-beta.14 + "@storybook/builder-webpack5": 6.4.0-rc.5 + "@storybook/manager-webpack5": 6.4.0-rc.5 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 peerDependenciesMeta: @@ -2879,10 +2896,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/core-client": 6.4.0-beta.14 - "@storybook/core-server": 6.4.0-beta.14 + "@storybook/core-client": 6.4.0-rc.5 + "@storybook/core-server": 6.4.0-rc.5 peerDependencies: - "@storybook/builder-webpack5": 6.4.0-beta.14 + "@storybook/builder-webpack5": 6.4.0-rc.5 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 webpack: "*" @@ -2934,12 +2951,12 @@ __metadata: "@babel/core": ^7.12.10 "@babel/plugin-transform-template-literals": ^7.12.1 "@babel/preset-react": ^7.12.10 - "@storybook/addons": 6.4.0-beta.14 - "@storybook/core-client": 6.4.0-beta.14 - "@storybook/core-common": 6.4.0-beta.14 - "@storybook/node-logger": 6.4.0-beta.14 - "@storybook/theming": 6.4.0-beta.14 - "@storybook/ui": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/core-client": 6.4.0-rc.5 + "@storybook/core-common": 6.4.0-rc.5 + "@storybook/node-logger": 6.4.0-rc.5 + "@storybook/theming": 6.4.0-rc.5 + "@storybook/ui": 6.4.0-rc.5 "@types/node": ^14.0.10 "@types/webpack": ^4.41.26 babel-loader: ^8.0.0 @@ -3000,18 +3017,19 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preview-web@portal:../../lib/preview-web::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/channel-postmessage": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/channel-postmessage": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/store": 6.4.0-beta.14 + "@storybook/store": 6.4.0-rc.5 ansi-to-html: ^0.6.11 core-js: ^3.8.2 global: ^4.4.0 lodash: ^4.17.20 qs: ^6.10.0 regenerator-runtime: ^0.13.7 + synchronous-promise: ^2.0.15 ts-dedent: ^2.0.0 unfetch: ^4.2.0 util-deprecate: ^1.0.2 @@ -3025,15 +3043,16 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@reach/router": ^1.3.4 - "@storybook/client-logger": 6.4.0-beta.14 - "@types/reach__router": ^1.3.7 + "@storybook/client-logger": 6.4.0-rc.5 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 + history: 5.0.0 lodash: ^4.17.20 memoizerific: ^1.11.3 qs: ^6.10.0 + react-router: ^6.0.0 + react-router-dom: ^6.0.0 ts-dedent: ^2.0.0 peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -3057,8 +3076,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 core-js: ^3.8.2 estraverse: ^5.2.0 @@ -3077,9 +3096,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/store@portal:../../lib/store::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -3089,6 +3108,7 @@ __metadata: regenerator-runtime: ^0.13.7 slash: ^3.0.0 stable: ^0.1.8 + synchronous-promise: ^2.0.15 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 languageName: node @@ -3101,7 +3121,7 @@ __metadata: "@emotion/core": ^10.1.1 "@emotion/is-prop-valid": ^0.8.6 "@emotion/styled": ^10.0.27 - "@storybook/client-logger": 6.4.0-beta.14 + "@storybook/client-logger": 6.4.0-rc.5 core-js: ^3.8.2 deep-object-diff: ^1.1.0 emotion-theming: ^10.0.27 @@ -3121,15 +3141,15 @@ __metadata: resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@emotion/core": ^10.1.1 - "@storybook/addons": 6.4.0-beta.14 - "@storybook/api": 6.4.0-beta.14 - "@storybook/channels": 6.4.0-beta.14 - "@storybook/client-logger": 6.4.0-beta.14 - "@storybook/components": 6.4.0-beta.14 - "@storybook/core-events": 6.4.0-beta.14 - "@storybook/router": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/api": 6.4.0-rc.5 + "@storybook/channels": 6.4.0-rc.5 + "@storybook/client-logger": 6.4.0-rc.5 + "@storybook/components": 6.4.0-rc.5 + "@storybook/core-events": 6.4.0-rc.5 + "@storybook/router": 6.4.0-rc.5 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.4.0-beta.14 + "@storybook/theming": 6.4.0-rc.5 copy-to-clipboard: ^3.3.1 core-js: ^3.8.2 core-js-pure: ^3.8.2 @@ -3161,13 +3181,13 @@ __metadata: "@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.14 - "@storybook/client-api": 6.4.0-beta.14 - "@storybook/core": 6.4.0-beta.14 - "@storybook/core-common": 6.4.0-beta.14 + "@storybook/addons": 6.4.0-rc.5 + "@storybook/client-api": 6.4.0-rc.5 + "@storybook/core": 6.4.0-rc.5 + "@storybook/core-common": 6.4.0-rc.5 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/preview-web": 6.4.0-beta.14 - "@storybook/store": 6.4.0-beta.14 + "@storybook/preview-web": 6.4.0-rc.5 + "@storybook/store": 6.4.0-rc.5 "@types/webpack-env": ^1.16.0 babel-plugin-bundled-import-meta: ^0.3.1 core-js: ^3.8.2 @@ -3178,7 +3198,7 @@ __metadata: regenerator-runtime: ^0.13.7 ts-dedent: ^2.0.0 peerDependencies: - lit-html: ^1.4.1 || ^2.0.0-rc.3 + lit-html: ^1.4.1 || ^2.0.0 bin: build-storybook: ./bin/build.js start-storybook: ./bin/index.js @@ -3234,13 +3254,6 @@ __metadata: languageName: node linkType: hard -"@types/braces@npm:*": - version: 3.0.1 - resolution: "@types/braces@npm:3.0.1" - checksum: 2052cf78c7378ceb692b823f743ac3a838b05f4c27f6eba3e5b6e298fd11d64322b1c7be1fa0eb53d99d9c6049202bf16a88ec1f40ebfd09e086b54eb69ff767 - languageName: node - linkType: hard - "@types/color-convert@npm:^2.0.0": version: 2.0.0 resolution: "@types/color-convert@npm:2.0.0" @@ -3359,15 +3372,6 @@ __metadata: languageName: node linkType: hard -"@types/micromatch@npm:^4.0.1": - version: 4.0.2 - resolution: "@types/micromatch@npm:4.0.2" - dependencies: - "@types/braces": "*" - checksum: e557324460e658283778c77d0f8995ee95e371c4fd54474b3186e947486427cc4af66b841393304b65c09a7bb36710158260db7a7cf761384e1a9a728e82e6f4 - languageName: node - linkType: hard - "@types/minimatch@npm:*": version: 3.0.5 resolution: "@types/minimatch@npm:3.0.5" @@ -3462,15 +3466,6 @@ __metadata: languageName: node linkType: hard -"@types/reach__router@npm:^1.3.7": - version: 1.3.9 - resolution: "@types/reach__router@npm:1.3.9" - dependencies: - "@types/react": "*" - checksum: 9145be1aca1f6bd34f99971381c8066a23e238452e39e76ec0549d0b240f6a39232d425f5c5425761e7e56562ae7f003e08a2291d724d503bdbc29686eb509d2 - languageName: node - linkType: hard - "@types/react-syntax-highlighter@npm:11.0.5": version: 11.0.5 resolution: "@types/react-syntax-highlighter@npm:11.0.5" @@ -3519,10 +3514,10 @@ __metadata: languageName: node linkType: hard -"@types/trusted-types@npm:^1.0.1": - version: 1.0.6 - resolution: "@types/trusted-types@npm:1.0.6" - checksum: 4bc61ac65b8e42d17c77a23f29cdf94e498acd2e23f4c00cf15c8281de94263ac313d46cbcd7cd1d03c066d497f9396845e3210ff0074f5f90f212cb3e8aac28 +"@types/trusted-types@npm:^2.0.2": + version: 2.0.2 + resolution: "@types/trusted-types@npm:2.0.2" + checksum: 8c5253d7a297ba375b1dff7704013fb8d31c08c681d257db9e7e0624309cbb4a1e0c916bdd5a8c378992391126af0adb731720ba7642244a2f2c1ff42aba5bcf languageName: node linkType: hard @@ -3599,7 +3594,7 @@ __metadata: languageName: node linkType: hard -"@web/config-loader@npm:^0.1.3": +"@web/config-loader@npm:0.1.3": version: 0.1.3 resolution: "@web/config-loader@npm:0.1.3" dependencies: @@ -4168,13 +4163,20 @@ __metadata: languageName: node linkType: hard -"array-back@npm:^3.0.1, array-back@npm:^3.1.0": +"array-back@npm:^3.0.1": version: 3.1.0 resolution: "array-back@npm:3.1.0" checksum: bb1fe86aa8b39c21e73c68c7abf8b05ed939b8951a3b17527217f6a2a84e00e4cfa4fdec823081689c5e216709bf1f214a4f5feeee6726eaff83897fa1a7b8ee languageName: node linkType: hard +"array-back@npm:^6.1.2": + version: 6.2.0 + resolution: "array-back@npm:6.2.0" + checksum: e1a07e49fa667bbd964d3125440201ec6cc09b8e21f6462ad5d34931e93484b62dedb262ff24d636447ef1bd502f83cbbe48978c00b12d27d2c4a1d3ec35dc29 + languageName: node + linkType: hard + "array-flatten@npm:1.1.1": version: 1.1.1 resolution: "array-flatten@npm:1.1.1" @@ -4351,21 +4353,21 @@ __metadata: languageName: node linkType: hard -"babel-jest@npm:^27.0.6": - version: 27.0.6 - resolution: "babel-jest@npm:27.0.6" +"babel-jest@npm:^27.3.1": + version: 27.3.1 + resolution: "babel-jest@npm:27.3.1" dependencies: - "@jest/transform": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/transform": ^27.3.1 + "@jest/types": ^27.2.5 "@types/babel__core": ^7.1.14 babel-plugin-istanbul: ^6.0.0 - babel-preset-jest: ^27.0.6 + babel-preset-jest: ^27.2.0 chalk: ^4.0.0 graceful-fs: ^4.2.4 slash: ^3.0.0 peerDependencies: "@babel/core": ^7.8.0 - checksum: 8913af084be0e39d00b97e51e67d6bf16ad851e11c99008953447aacd78ae4d072622571f34219ab44b2e19c215dc6490c951fdf80b981a1a065bf8b36b50829 + checksum: 1e969e614ba3ded6c74ada9fd14f69757992832128a31b7809eb9cce49263e844da8d4913d493523ea3e5902700a00b8641b2d69e1edb6a2347402a9c54873e4 languageName: node linkType: hard @@ -4457,15 +4459,15 @@ __metadata: languageName: node linkType: hard -"babel-plugin-jest-hoist@npm:^27.0.6": - version: 27.0.6 - resolution: "babel-plugin-jest-hoist@npm:27.0.6" +"babel-plugin-jest-hoist@npm:^27.2.0": + version: 27.2.0 + resolution: "babel-plugin-jest-hoist@npm:27.2.0" dependencies: "@babel/template": ^7.3.3 "@babel/types": ^7.3.3 "@types/babel__core": ^7.0.0 "@types/babel__traverse": ^7.0.6 - checksum: 24ddc1b5a41d64c3560ab8efc85c62b8dd50f960a38d7628dacbe3eb0f8b61c10a5d6f4e244658c91d7af00b7f067e2c7795c3809c5d8cc1b911fa4ebec6d1e9 + checksum: 6aa5c7afc4589bb444a37b054fcd51a6eaf9181d17638b57c3c71322833e9176be4f5657407ee229ae6abedf2c404a305473e062296c2d01b4957363bcf116ef languageName: node linkType: hard @@ -4528,13 +4530,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-require-context-hook@npm:^1.0.0": - version: 1.0.0 - resolution: "babel-plugin-require-context-hook@npm:1.0.0" - checksum: 1abd58b832a0819daa39c39b6cafbd18ca7b1e13786ae5238f393c4e558d9c8642b04147334dc2b9990950098c300ba1362da4401124da6e6ac532234a72dd30 - languageName: node - linkType: hard - "babel-plugin-syntax-jsx@npm:^6.18.0": version: 6.18.0 resolution: "babel-plugin-syntax-jsx@npm:6.18.0" @@ -4564,15 +4559,15 @@ __metadata: languageName: node linkType: hard -"babel-preset-jest@npm:^27.0.6": - version: 27.0.6 - resolution: "babel-preset-jest@npm:27.0.6" +"babel-preset-jest@npm:^27.2.0": + version: 27.2.0 + resolution: "babel-preset-jest@npm:27.2.0" dependencies: - babel-plugin-jest-hoist: ^27.0.6 + babel-plugin-jest-hoist: ^27.2.0 babel-preset-current-node-syntax: ^1.0.0 peerDependencies: "@babel/core": ^7.0.0 - checksum: b397ecb3897932679330e0b30db8ceef4e887e0a6a13ac8b18c91e5a5435b091514a0e2d14f62ec0c2b7d2d763967e607d279861c0c40a0f05889d003e0c3b84 + checksum: 471c3170be7d176bc9d67b2ccf6b001a82fa808ccb069afceeb1cde58f1c0d695ba93d8ae4c6740e93be62f9d643f98918da7c0b4d3ed2d40afab69d88c6d26e languageName: node linkType: hard @@ -5127,6 +5122,25 @@ __metadata: languageName: node linkType: hard +"chokidar@npm:3.5.2, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2": + version: 3.5.2 + resolution: "chokidar@npm:3.5.2" + dependencies: + anymatch: ~3.1.2 + braces: ~3.0.2 + fsevents: ~2.3.2 + glob-parent: ~5.1.2 + is-binary-path: ~2.1.0 + is-glob: ~4.0.1 + normalize-path: ~3.0.0 + readdirp: ~3.6.0 + dependenciesMeta: + fsevents: + optional: true + checksum: e7179a9dc4ce54c1ba660652319039b7ca0817a442dd05a45afcbdefcd4848b4276debfa9cf321798c2c567c6289da14dd48d9a1ee92056a7b526c554cffe129 + languageName: node + linkType: hard + "chokidar@npm:^2.1.8": version: 2.1.8 resolution: "chokidar@npm:2.1.8" @@ -5150,25 +5164,6 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2": - version: 3.5.2 - resolution: "chokidar@npm:3.5.2" - dependencies: - anymatch: ~3.1.2 - braces: ~3.0.2 - fsevents: ~2.3.2 - glob-parent: ~5.1.2 - is-binary-path: ~2.1.0 - is-glob: ~4.0.1 - normalize-path: ~3.0.0 - readdirp: ~3.6.0 - dependenciesMeta: - fsevents: - optional: true - checksum: e7179a9dc4ce54c1ba660652319039b7ca0817a442dd05a45afcbdefcd4848b4276debfa9cf321798c2c567c6289da14dd48d9a1ee92056a7b526c554cffe129 - languageName: node - linkType: hard - "chownr@npm:^1.1.1": version: 1.1.4 resolution: "chownr@npm:1.1.4" @@ -5197,7 +5192,7 @@ __metadata: languageName: node linkType: hard -"ci-info@npm:^3.1.1": +"ci-info@npm:^3.2.0": version: 3.2.0 resolution: "ci-info@npm:3.2.0" checksum: 9479fb1d835c277b388f02b6f46f1a9355c8dbc07b33b896552949ed0d4708b317bf7221ef9a3c86e975549982f76d3b84b2c7c99a8b26220218c2f3a9b657d4 @@ -5408,15 +5403,15 @@ __metadata: languageName: node linkType: hard -"command-line-args@npm:^5.1.1": - version: 5.1.3 - resolution: "command-line-args@npm:5.1.3" +"command-line-args@npm:5.1.2": + version: 5.1.2 + resolution: "command-line-args@npm:5.1.2" dependencies: - array-back: ^3.1.0 + array-back: ^6.1.2 find-replace: ^3.0.0 lodash.camelcase: ^4.3.0 typical: ^4.0.0 - checksum: 470f4e0188d9698085f76306c6739f203028b905588ed5f5e4585f521105f61502d35295a0b3126c8a4d9e1049993ed449ff6476ca181b35252a10e7fce9a929 + checksum: e8dcb3152b106bd806c038dabb26f1fe0aced6d9ab06f02a80569c572124c1f55ef2686897823d787ab6c3cd1668b0314dd963457d07d063e67679fa3bd0d07d languageName: node linkType: hard @@ -5441,10 +5436,10 @@ __metadata: languageName: node linkType: hard -"comment-parser@npm:^1.1.5": - version: 1.2.1 - resolution: "comment-parser@npm:1.2.1" - checksum: aeb91f82e7b2eec22eb750dd878a4ce32eb6892027d467e12bb394d9fb3845f012111f2c9b920c0a0e7524e158d574d76b16856359177bf41ff3c88cdd239293 +"comment-parser@npm:1.2.4": + version: 1.2.4 + resolution: "comment-parser@npm:1.2.4" + checksum: ff25ad318ead37621476cf7348dfab0991bc0f249fcc82deec99e9accf941f3dca764fb76ac5570950fbb3642bd9875cfaad9ec57661eec56bbc5c08e85e3dc9 languageName: node linkType: hard @@ -5725,19 +5720,6 @@ __metadata: languageName: node linkType: hard -"create-react-context@npm:0.3.0": - version: 0.3.0 - resolution: "create-react-context@npm:0.3.0" - dependencies: - gud: ^1.0.0 - warning: ^4.0.3 - peerDependencies: - prop-types: ^15.0.0 - react: ^0.14.0 || ^15.0.0 || ^16.0.0 - checksum: 3f9dfde23da59e3f748b5f1b06c7ff8cbf48095cf2d62212427195860f1ee4b2b0b475280c19592f7fffb9fd100fd739af687281d7c5c93806d519bf66f6dd86 - languageName: node - linkType: hard - "cross-spawn@npm:7.0.3, cross-spawn@npm:^7.0.3": version: 7.0.3 resolution: "cross-spawn@npm:7.0.3" @@ -5870,7 +5852,7 @@ __metadata: languageName: node linkType: hard -"custom-elements-manifest@npm:^1.0.0": +"custom-elements-manifest@npm:1.0.0": version: 1.0.0 resolution: "custom-elements-manifest@npm:1.0.0" checksum: 6e8e4dcc6ae4f846e92b6ec0ef5c8d155889dae6df7210cbf3e9c47387ffab83fce8fde96a1aaa9766304cb08afa17198da4ef8560745311bdf3ba280fc77b40 @@ -5895,7 +5877,7 @@ __metadata: languageName: node linkType: hard -"debounce@npm:^1.2.1": +"debounce@npm:1.2.1": version: 1.2.1 resolution: "debounce@npm:1.2.1" checksum: 6c9320aa0973fc42050814621a7a8a78146c1975799b5b3cc1becf1f77ba9a5aa583987884230da0842a03f385def452fad5d60db97c3d1c8b824e38a8edf500 @@ -6703,17 +6685,17 @@ __metadata: languageName: node linkType: hard -"expect@npm:^27.0.6": - version: 27.0.6 - resolution: "expect@npm:27.0.6" +"expect@npm:^27.3.1": + version: 27.3.1 + resolution: "expect@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 ansi-styles: ^5.0.0 - jest-get-type: ^27.0.6 - jest-matcher-utils: ^27.0.6 - jest-message-util: ^27.0.6 + jest-get-type: ^27.3.1 + jest-matcher-utils: ^27.3.1 + jest-message-util: ^27.3.1 jest-regex-util: ^27.0.6 - checksum: 6fb57916ab9ae4a449ac0fd1150e0211f6ff5991add2c5826ad046a07e5a147d2c164bc85d4f55ebb063bc4bc05584a5dc9f640f69427565643f6dd154f2a1d8 + checksum: 8c10ff875b74c80b4896d5457fce45faa0cca044a6ec6910b51e2c08d29238cad0b013dc46379a34338bf42b05e3566ffae5fa2c10229aced695fae9995eab2e languageName: node linkType: hard @@ -7454,7 +7436,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"globby@npm:^11.0.1, globby@npm:^11.0.2": +"globby@npm:11.0.4, globby@npm:^11.0.2": version: 11.0.4 resolution: "globby@npm:11.0.4" dependencies: @@ -7491,13 +7473,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"gud@npm:^1.0.0": - version: 1.0.0 - resolution: "gud@npm:1.0.0" - checksum: a4db6edc18e2c4e3a22dc9e639e40a4e5650d53dae9cf384a96d5380dfa17ddda376cf6b7797a5c30d140d2532e5a69d167bdb70c2c151dd673253bac6b027f3 - languageName: node - linkType: hard - "gzip-size@npm:5.1.1": version: 5.1.1 resolution: "gzip-size@npm:5.1.1" @@ -7735,6 +7710,24 @@ fsevents@^1.2.7: languageName: node linkType: hard +"history@npm:5.0.0": + version: 5.0.0 + resolution: "history@npm:5.0.0" + dependencies: + "@babel/runtime": ^7.7.6 + checksum: 6e1a0880c1d67a9040117e5b426e71bc35642488485354d378cb635f194c2177979558b6fb537972840c6993d92c1ae971ab6c33bf77be1b1f135349ea65cde0 + languageName: node + linkType: hard + +"history@npm:^5.1.0": + version: 5.1.0 + resolution: "history@npm:5.1.0" + dependencies: + "@babel/runtime": ^7.7.6 + checksum: f76cd11b905cd947e9db371d7bf6e6c403d52e081ae88953c1ba6208d741470fd8f85f22acfb0d9fb11ef7d8811e6fbd20d0a7b87f05263e2cc80393ba1be315 + languageName: node + linkType: hard + "hmac-drbg@npm:^1.0.1": version: 1.0.1 resolution: "hmac-drbg@npm:1.0.1" @@ -8092,7 +8085,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"invariant@npm:^2.2.3, invariant@npm:^2.2.4": +"invariant@npm:^2.2.4": version: 2.2.4 resolution: "invariant@npm:2.2.4" dependencies: @@ -8239,17 +8232,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-ci@npm:^3.0.0": - version: 3.0.0 - resolution: "is-ci@npm:3.0.0" - dependencies: - ci-info: ^3.1.1 - bin: - is-ci: bin.js - checksum: 151a9cc5907a61d0b6805692d24fb55db5741ed073371f445ba7d0efd8c0a752f6a78734ef45580025288e026e15bfcbc03fc575e20ae07de624a39188ed866f - languageName: node - linkType: hard - "is-core-module@npm:^2.2.0": version: 2.5.0 resolution: "is-core-module@npm:2.5.0" @@ -8715,60 +8697,60 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-changed-files@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-changed-files@npm:27.0.6" +"jest-changed-files@npm:^27.3.0": + version: 27.3.0 + resolution: "jest-changed-files@npm:27.3.0" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 execa: ^5.0.0 throat: ^6.0.1 - checksum: 30ce74e63210006725b08ec3fc0a83d683a0ebe27e9f56fb95e2b429825a7be6d3ef62bad0b1e33f481372579f89c1ecd6125061a731ae255cbaa6dc432c1a21 + checksum: 57d0f7958f2d03d620a70cb63a988df5e6fdae462d56a6fa09114c8e56c6f146a8ec1401e27852d895ec5fd37c797c52bc643422b227efe1add00eff090b3486 languageName: node linkType: hard -"jest-circus@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-circus@npm:27.0.6" +"jest-circus@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-circus@npm:27.3.1" dependencies: - "@jest/environment": ^27.0.6 - "@jest/test-result": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/environment": ^27.3.1 + "@jest/test-result": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" chalk: ^4.0.0 co: ^4.6.0 dedent: ^0.7.0 - expect: ^27.0.6 + expect: ^27.3.1 is-generator-fn: ^2.0.0 - jest-each: ^27.0.6 - jest-matcher-utils: ^27.0.6 - jest-message-util: ^27.0.6 - jest-runtime: ^27.0.6 - jest-snapshot: ^27.0.6 - jest-util: ^27.0.6 - pretty-format: ^27.0.6 + jest-each: ^27.3.1 + jest-matcher-utils: ^27.3.1 + jest-message-util: ^27.3.1 + jest-runtime: ^27.3.1 + jest-snapshot: ^27.3.1 + jest-util: ^27.3.1 + pretty-format: ^27.3.1 slash: ^3.0.0 stack-utils: ^2.0.3 throat: ^6.0.1 - checksum: 644697a65324edb86fa2d4dff0f4d05fdd168a8bb04624178a58f51f8225d5b3ca67096ee2e35b4588f249d51cdd6ab7226172a6144764e2d416eabfb8c3f3fe + checksum: fed963f6c5b4104b1ff2d30f4d1dfba7a8d59ff0185815819f1e3fa62ffcd82ac96f0b878a5bd520976817542e60bac9266054bec249577d15f9f8e3e36446bf languageName: node linkType: hard -"jest-cli@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-cli@npm:27.0.6" +"jest-cli@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-cli@npm:27.3.1" dependencies: - "@jest/core": ^27.0.6 - "@jest/test-result": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/core": ^27.3.1 + "@jest/test-result": ^27.3.1 + "@jest/types": ^27.2.5 chalk: ^4.0.0 exit: ^0.1.2 graceful-fs: ^4.2.4 import-local: ^3.0.2 - jest-config: ^27.0.6 - jest-util: ^27.0.6 - jest-validate: ^27.0.6 + jest-config: ^27.3.1 + jest-util: ^27.3.1 + jest-validate: ^27.3.1 prompts: ^2.0.1 - yargs: ^16.0.3 + yargs: ^16.2.0 peerDependencies: node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 peerDependenciesMeta: @@ -8776,41 +8758,41 @@ fsevents@^1.2.7: optional: true bin: jest: bin/jest.js - checksum: a73b258d98c740a64fd9755a7aeb0b8ef6ae58076b7cc285cb17d36969aa99fbe8c76f3e1f11bfcbb88fd3388bd1abdf4b6cae08975104b202bbd481a3dc2696 + checksum: df80909c21cb76c919b71c43d87b96108d15c23f379e6b735792a81ac391a234bc38c9f74fb271bb1544889304431c452f11f509520c2c0f8c58002e4bc728ca languageName: node linkType: hard -"jest-config@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-config@npm:27.0.6" +"jest-config@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-config@npm:27.3.1" dependencies: "@babel/core": ^7.1.0 - "@jest/test-sequencer": ^27.0.6 - "@jest/types": ^27.0.6 - babel-jest: ^27.0.6 + "@jest/test-sequencer": ^27.3.1 + "@jest/types": ^27.2.5 + babel-jest: ^27.3.1 chalk: ^4.0.0 + ci-info: ^3.2.0 deepmerge: ^4.2.2 glob: ^7.1.1 graceful-fs: ^4.2.4 - is-ci: ^3.0.0 - jest-circus: ^27.0.6 - jest-environment-jsdom: ^27.0.6 - jest-environment-node: ^27.0.6 - jest-get-type: ^27.0.6 - jest-jasmine2: ^27.0.6 + jest-circus: ^27.3.1 + jest-environment-jsdom: ^27.3.1 + jest-environment-node: ^27.3.1 + jest-get-type: ^27.3.1 + jest-jasmine2: ^27.3.1 jest-regex-util: ^27.0.6 - jest-resolve: ^27.0.6 - jest-runner: ^27.0.6 - jest-util: ^27.0.6 - jest-validate: ^27.0.6 + jest-resolve: ^27.3.1 + jest-runner: ^27.3.1 + jest-util: ^27.3.1 + jest-validate: ^27.3.1 micromatch: ^4.0.4 - pretty-format: ^27.0.6 + pretty-format: ^27.3.1 peerDependencies: ts-node: ">=9.0.0" peerDependenciesMeta: ts-node: optional: true - checksum: 617381c2722d41d41c5f00ab23c8fa773a7cde2842446e7122aa9ee96ac9e5c927fa33bac7f6f2efb783cbed7987c420e52f3ce5bc0c767d9ed7d760ec0b9341 + checksum: 9e8bfcc8616b2bb0368d32a617f6e4813957d6581c9e57ca6dbe209853c8c19616aff63090e3306f93ad2f1dfc1f3251ee59d2612e1d7ab9c6e8899dcd1bf144 languageName: node linkType: hard @@ -8826,15 +8808,15 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-diff@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-diff@npm:27.0.6" +"jest-diff@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-diff@npm:27.3.1" dependencies: chalk: ^4.0.0 diff-sequences: ^27.0.6 - jest-get-type: ^27.0.6 - pretty-format: ^27.0.6 - checksum: 74b68faf26526ece33b82bfcf589f297f6fb174f38c7d5298477bd937aa63da97b58ddc47d986ab920f419bb812fc25430e77decf114781a00fdfc1826e94349 + jest-get-type: ^27.3.1 + pretty-format: ^27.3.1 + checksum: 1b983aaa3de7fffd934f85b531ea2274cc618443a48fa35ef1da1a90475465cc5f7d902ab4f2a560caee8c448a56911e677b239f47810616952764f52fd04410 languageName: node linkType: hard @@ -8847,45 +8829,45 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-each@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-each@npm:27.0.6" +"jest-each@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-each@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 chalk: ^4.0.0 - jest-get-type: ^27.0.6 - jest-util: ^27.0.6 - pretty-format: ^27.0.6 - checksum: 45dce49ae09bc9dc8435fafc470aece2d1636b58c98a1b3c58d067f664c0e34885dbc4381e0fe51db01f837293e994d665eeda10421ce96749c16fff538b35ee + jest-get-type: ^27.3.1 + jest-util: ^27.3.1 + pretty-format: ^27.3.1 + checksum: 5496cc19d85f35459672f28fbfc03cdee1cfe1e5f1ac3efd903aac7f681eade75c21bab5fbd359720bad0c3b28d28d11b5442e091c2fdefb0a3695edc34d623e languageName: node linkType: hard -"jest-environment-jsdom@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-environment-jsdom@npm:27.0.6" +"jest-environment-jsdom@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-environment-jsdom@npm:27.3.1" dependencies: - "@jest/environment": ^27.0.6 - "@jest/fake-timers": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/environment": ^27.3.1 + "@jest/fake-timers": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" - jest-mock: ^27.0.6 - jest-util: ^27.0.6 + jest-mock: ^27.3.0 + jest-util: ^27.3.1 jsdom: ^16.6.0 - checksum: 4b9978d8ac88ba4ffa8fa357326f49d8f57d2773c5772f0adda064381b0cb3688c03c93d3d3408d263ac0aa42bdbbf7a7ad64ccf3dbd7a4def34f0b5a1c69b23 + checksum: 02d9e26bd0c2b39e52e1515acd680a11d8309dbf5203444c4871b28f6843ecc4bb9a867533fa96fe20868be99a64dc36725356835dfe75c81e9f100c6d21f4d2 languageName: node linkType: hard -"jest-environment-node@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-environment-node@npm:27.0.6" +"jest-environment-node@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-environment-node@npm:27.3.1" dependencies: - "@jest/environment": ^27.0.6 - "@jest/fake-timers": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/environment": ^27.3.1 + "@jest/fake-timers": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" - jest-mock: ^27.0.6 - jest-util: ^27.0.6 - checksum: 8d05f1a6041b982abd4a9839a4a80cc6de74c93d153ade9adf2eeb2fccd3a12a9b9c18078972bcdf497a15463735e86861154f428a2e4c39e763d9294a694843 + jest-mock: ^27.3.0 + jest-util: ^27.3.1 + checksum: d3d0f8ecfe1ed8ad827e626df6a0a26308385148207f9a24ab51c50e51788c812d3ad940c7728f235752aa7c7da5facea5952c32873e4a2be546164bb66ef608 languageName: node linkType: hard @@ -8896,10 +8878,10 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-get-type@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-get-type@npm:27.0.6" - checksum: 41cf3d3a1f684a7034e11c876b4a2b1a2f63fcba6e277a4fe111b4e2c9ec02b73d1917aa1edcb6a8681124e726590db97d053626025584005571f63df0173d5c +"jest-get-type@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-get-type@npm:27.3.1" + checksum: 738e5062ffd979d817bfe6c14e64813f9541221c1c77033bae003a6fbb659535c646578d8aae6d303b6fb7c91101d12af08847756ff5bc7b018d238a4ff02bd1 languageName: node linkType: hard @@ -8928,11 +8910,11 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-haste-map@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-haste-map@npm:27.0.6" +"jest-haste-map@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-haste-map@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 "@types/graceful-fs": ^4.1.2 "@types/node": "*" anymatch: ^3.0.3 @@ -8941,50 +8923,50 @@ fsevents@^1.2.7: graceful-fs: ^4.2.4 jest-regex-util: ^27.0.6 jest-serializer: ^27.0.6 - jest-util: ^27.0.6 - jest-worker: ^27.0.6 + jest-util: ^27.3.1 + jest-worker: ^27.3.1 micromatch: ^4.0.4 walker: ^1.0.7 dependenciesMeta: fsevents: optional: true - checksum: 31feaf9e976c1c380da6f5d0c12dab0c78dd5da5d8278f4672e5899e4d248fd29f53428777877a6b4f1ec207582341148c6f59dc0eb1ab8a9c04025a2cfef6ca + checksum: 4a069faaa736d2b9a21ba3962e0da629807515c51defe930dc9fcbb614ba2c594aa0351887d063a6f59ce8b0a55dabab88d6bb8f69f00fd3b6d44216bd1c73c1 languageName: node linkType: hard -"jest-jasmine2@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-jasmine2@npm:27.0.6" +"jest-jasmine2@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-jasmine2@npm:27.3.1" dependencies: "@babel/traverse": ^7.1.0 - "@jest/environment": ^27.0.6 + "@jest/environment": ^27.3.1 "@jest/source-map": ^27.0.6 - "@jest/test-result": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/test-result": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" chalk: ^4.0.0 co: ^4.6.0 - expect: ^27.0.6 + expect: ^27.3.1 is-generator-fn: ^2.0.0 - jest-each: ^27.0.6 - jest-matcher-utils: ^27.0.6 - jest-message-util: ^27.0.6 - jest-runtime: ^27.0.6 - jest-snapshot: ^27.0.6 - jest-util: ^27.0.6 - pretty-format: ^27.0.6 + jest-each: ^27.3.1 + jest-matcher-utils: ^27.3.1 + jest-message-util: ^27.3.1 + jest-runtime: ^27.3.1 + jest-snapshot: ^27.3.1 + jest-util: ^27.3.1 + pretty-format: ^27.3.1 throat: ^6.0.1 - checksum: 847aeb8cee22037cbba06d9cca754215da1c44e4a128d3d7bba09152f0a00740065dfac331f190e2a3dc6a5a27d319a34b86702011b2ebb50d307c565ed58427 + checksum: e147c97d7a733854b61b5788d117dcc21ca7c9a08ca0bf8c61b2ac178c515437bf629742e85252d32774a7bcc485335b8b7301b57f7a806de3abe207167d9f70 languageName: node linkType: hard -"jest-leak-detector@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-leak-detector@npm:27.0.6" +"jest-leak-detector@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-leak-detector@npm:27.3.1" dependencies: - jest-get-type: ^27.0.6 - pretty-format: ^27.0.6 - checksum: 8d95997e5b21b23d79232b8ef0856675ffb87b8a6509e82a0457774365eb22d4fea35432519a094ca811cf65b45e6762e6d87ccae30ee09223d04aad4c203bc3 + jest-get-type: ^27.3.1 + pretty-format: ^27.3.1 + checksum: aefa5b9cb39a94ef9dbade5d9ec5d1962e4947381af70123107a6b286467810d7d459190a2a541ee19935f3f75338b111b4278a1880948a858df6369d7c36d1a languageName: node linkType: hard @@ -9000,15 +8982,15 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-matcher-utils@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-matcher-utils@npm:27.0.6" +"jest-matcher-utils@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-matcher-utils@npm:27.3.1" dependencies: chalk: ^4.0.0 - jest-diff: ^27.0.6 - jest-get-type: ^27.0.6 - pretty-format: ^27.0.6 - checksum: 1315ec25add6e083f56b10dbb423786bd876eafedd6d1bf8aa93a654d82152403f751b817a94a333e4c6d848630ea2fab762147aa078d0d4bc9be18bb0d54c5a + jest-diff: ^27.3.1 + jest-get-type: ^27.3.1 + pretty-format: ^27.3.1 + checksum: adb3ac4e3138dda764dfffb0d0b898911b7e53377ee79d4b6b52ba31b81e4f5680dac5e3307251d7dcc0b386f57de2f148f7451b43abaea38ca05c309f001824 languageName: node linkType: hard @@ -9029,30 +9011,30 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-message-util@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-message-util@npm:27.0.6" +"jest-message-util@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-message-util@npm:27.3.1" dependencies: "@babel/code-frame": ^7.12.13 - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 "@types/stack-utils": ^2.0.0 chalk: ^4.0.0 graceful-fs: ^4.2.4 micromatch: ^4.0.4 - pretty-format: ^27.0.6 + pretty-format: ^27.3.1 slash: ^3.0.0 stack-utils: ^2.0.3 - checksum: fdff72399e5fe11f998d9620549325218cb5d0a7aa4e8d2a8c3df988f400dd01eda4c525bd13cd2284024363ec7f05c201332fb0409cb75597e820760243d365 + checksum: 4be29d567aa0678b37dcf9b5440655dad2d10ba920c006e71491e8844c2d3414e7ddb4455483ef74c02d38da8bca27dbe079d96e8098d773ba04055be8c76a29 languageName: node linkType: hard -"jest-mock@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-mock@npm:27.0.6" +"jest-mock@npm:^27.3.0": + version: 27.3.0 + resolution: "jest-mock@npm:27.3.0" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 "@types/node": "*" - checksum: a49165d2b61bad11a648bdbdaea9fe8baf8eb498e1248ff8edcc77fc12a96aff3edd25030aea8bf326fa04e87be3643be5c845ee6dae1c49a710c64ddd21cd87 + checksum: 90033366823d6c7ad847dae1fec5d1bc5a103c83342ca5867fe9b69fefefbcb12d08fe718202e92cafd72bd091558ecd663b4c261e2e85b6c9244c3fc6951f35 languageName: node linkType: hard @@ -9082,14 +9064,14 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-resolve-dependencies@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-resolve-dependencies@npm:27.0.6" +"jest-resolve-dependencies@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-resolve-dependencies@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 jest-regex-util: ^27.0.6 - jest-snapshot: ^27.0.6 - checksum: 2b9ee28dd1ebbe8b45ecfa1685c28d4a757a4a883d8d4fb64a74790c81b94aecd68f20b39ff9feb3160753ca2a4b2b1abc58684e40fa2b737b6a77234cda8777 + jest-snapshot: ^27.3.1 + checksum: 0eb1ec7b9524d7997b7223edc55bc9cff887d99de4a1d77f083e2970670d4c8c76dd9dddf471cfc1c6435c39b30dbcc270045b4d4213ec4b905885c86df2e56c languageName: node linkType: hard @@ -9109,84 +9091,85 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-resolve@npm:27.0.6, jest-resolve@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-resolve@npm:27.0.6" +"jest-resolve@npm:27.3.1, jest-resolve@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-resolve@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 chalk: ^4.0.0 - escalade: ^3.1.1 graceful-fs: ^4.2.4 + jest-haste-map: ^27.3.1 jest-pnp-resolver: ^1.2.2 - jest-util: ^27.0.6 - jest-validate: ^27.0.6 + jest-util: ^27.3.1 + jest-validate: ^27.3.1 resolve: ^1.20.0 + resolve.exports: ^1.1.0 slash: ^3.0.0 - checksum: aa54bc1cab0d20cb6197a8d577e1dd8635caf19b7083580e72d3e1fd2788599176adf010d3421ed49fad11efa239031b9b954f7d455c944c055246956a0e8b91 + checksum: 7be60416e82c66edd5cb636177193e222f8aa3fe9f948f80877f06d6fcef07f55e35e636c6a4fa020dd91f84deab84b80e36adb3f9e6bdcd7a153010ebc0c2ec languageName: node linkType: hard -"jest-runner@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-runner@npm:27.0.6" +"jest-runner@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-runner@npm:27.3.1" dependencies: - "@jest/console": ^27.0.6 - "@jest/environment": ^27.0.6 - "@jest/test-result": ^27.0.6 - "@jest/transform": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/console": ^27.3.1 + "@jest/environment": ^27.3.1 + "@jest/test-result": ^27.3.1 + "@jest/transform": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" chalk: ^4.0.0 emittery: ^0.8.1 exit: ^0.1.2 graceful-fs: ^4.2.4 jest-docblock: ^27.0.6 - jest-environment-jsdom: ^27.0.6 - jest-environment-node: ^27.0.6 - jest-haste-map: ^27.0.6 - jest-leak-detector: ^27.0.6 - jest-message-util: ^27.0.6 - jest-resolve: ^27.0.6 - jest-runtime: ^27.0.6 - jest-util: ^27.0.6 - jest-worker: ^27.0.6 + jest-environment-jsdom: ^27.3.1 + jest-environment-node: ^27.3.1 + jest-haste-map: ^27.3.1 + jest-leak-detector: ^27.3.1 + jest-message-util: ^27.3.1 + jest-resolve: ^27.3.1 + jest-runtime: ^27.3.1 + jest-util: ^27.3.1 + jest-worker: ^27.3.1 source-map-support: ^0.5.6 throat: ^6.0.1 - checksum: f65ebbafeb971765e103ea9c75e89379ad57686a58f22d306c2316d53be3e65511b849ad4ca8574cfd23edd35e80ff9bdef45380c1a85f5135503917725e4230 + checksum: 7283279c8b77b28503e92fddc262b62b4aab6d39076bdb95317bedb257bd8907cca6f61984a28481191e02ebece8868b2d2685b6921a67d2c9528e0d916ef8af languageName: node linkType: hard -"jest-runtime@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-runtime@npm:27.0.6" +"jest-runtime@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-runtime@npm:27.3.1" dependencies: - "@jest/console": ^27.0.6 - "@jest/environment": ^27.0.6 - "@jest/fake-timers": ^27.0.6 - "@jest/globals": ^27.0.6 + "@jest/console": ^27.3.1 + "@jest/environment": ^27.3.1 + "@jest/globals": ^27.3.1 "@jest/source-map": ^27.0.6 - "@jest/test-result": ^27.0.6 - "@jest/transform": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/test-result": ^27.3.1 + "@jest/transform": ^27.3.1 + "@jest/types": ^27.2.5 "@types/yargs": ^16.0.0 chalk: ^4.0.0 cjs-module-lexer: ^1.0.0 collect-v8-coverage: ^1.0.0 + execa: ^5.0.0 exit: ^0.1.2 glob: ^7.1.3 graceful-fs: ^4.2.4 - jest-haste-map: ^27.0.6 - jest-message-util: ^27.0.6 - jest-mock: ^27.0.6 + jest-haste-map: ^27.3.1 + jest-message-util: ^27.3.1 + jest-mock: ^27.3.0 jest-regex-util: ^27.0.6 - jest-resolve: ^27.0.6 - jest-snapshot: ^27.0.6 - jest-util: ^27.0.6 - jest-validate: ^27.0.6 + jest-resolve: ^27.3.1 + jest-snapshot: ^27.3.1 + jest-util: ^27.3.1 + jest-validate: ^27.3.1 slash: ^3.0.0 strip-bom: ^4.0.0 - yargs: ^16.0.3 - checksum: b980801e96e259ef0ca2f461ec8f341957e8f3efcc531741fb5bfc6a0b6887754102a9400154291d81946541d90a861fb7b69d32fcba0528eebb1c0fe404c6b5 + yargs: ^16.2.0 + checksum: 0c21196d03af87574a198fe48753101f92e8cf2f82e4a311781ea0441a2e46697cc584e5b38d1979b7012f5bb359b419c93ce8e1655c1f39aa9db8032cd77caa languageName: node linkType: hard @@ -9234,9 +9217,9 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-snapshot@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-snapshot@npm:27.0.6" +"jest-snapshot@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-snapshot@npm:27.3.1" dependencies: "@babel/core": ^7.7.2 "@babel/generator": ^7.7.2 @@ -9244,25 +9227,25 @@ fsevents@^1.2.7: "@babel/plugin-syntax-typescript": ^7.7.2 "@babel/traverse": ^7.7.2 "@babel/types": ^7.0.0 - "@jest/transform": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/transform": ^27.3.1 + "@jest/types": ^27.2.5 "@types/babel__traverse": ^7.0.4 "@types/prettier": ^2.1.5 babel-preset-current-node-syntax: ^1.0.0 chalk: ^4.0.0 - expect: ^27.0.6 + expect: ^27.3.1 graceful-fs: ^4.2.4 - jest-diff: ^27.0.6 - jest-get-type: ^27.0.6 - jest-haste-map: ^27.0.6 - jest-matcher-utils: ^27.0.6 - jest-message-util: ^27.0.6 - jest-resolve: ^27.0.6 - jest-util: ^27.0.6 + jest-diff: ^27.3.1 + jest-get-type: ^27.3.1 + jest-haste-map: ^27.3.1 + jest-matcher-utils: ^27.3.1 + jest-message-util: ^27.3.1 + jest-resolve: ^27.3.1 + jest-util: ^27.3.1 natural-compare: ^1.4.0 - pretty-format: ^27.0.6 + pretty-format: ^27.3.1 semver: ^7.3.2 - checksum: b045f941437745fab1d8ccce2a053cfe39e81e1d63d1c815f62043281d53fe5043d5edcbfdebd16fa9c38de89b7e1ac5cf25d8fa592afecf921810e955dc877b + checksum: d570be8529742b6fe6c5b53706cfe01b58ee2e1c9a77fd5b42e6d51026f0c026477579ab0cb5c6f8060de984e9522f7bb07a84cf8ad160c9c15e3095de1d523f languageName: node linkType: hard @@ -9291,46 +9274,46 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-util@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-util@npm:27.0.6" +"jest-util@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-util@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 "@types/node": "*" chalk: ^4.0.0 + ci-info: ^3.2.0 graceful-fs: ^4.2.4 - is-ci: ^3.0.0 picomatch: ^2.2.3 - checksum: 97f39f9b6394ba32719401f6b7cc2ef2fb35df209d8e0ba86ceedcb14aa3b96e11d9791f52900e1a313ec9da080077b0fa77c62e3a4a2bcea6495f96e53be2f8 + checksum: 28570a064c5fd7369f870dec1d6b5bb38691028151535ae24a1ab3dc077db368a33566aad3080dd183c81ef6423d7077b3e9641d0c93c8082bc9c8f1c9a6cf78 languageName: node linkType: hard -"jest-validate@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-validate@npm:27.0.6" +"jest-validate@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-validate@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 + "@jest/types": ^27.2.5 camelcase: ^6.2.0 chalk: ^4.0.0 - jest-get-type: ^27.0.6 + jest-get-type: ^27.3.1 leven: ^3.1.0 - pretty-format: ^27.0.6 - checksum: ebf4035420fe33eddc3178da2f2b7a86490c45bc5077c89978e642f9aefa1f5d8f7c8a63902c6af4b8a20b35247531d2a0e9757fe40043f5ee04bf15a13aa278 + pretty-format: ^27.3.1 + checksum: 8d5eb0f4de2330f768d4b4d54ac38459e0ed81a55a3a01add81db80581d16b1b7636b61948b3172e720b02f4c31c025f306e03f44e5264dd45c17e3742f48d2f languageName: node linkType: hard -"jest-watcher@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-watcher@npm:27.0.6" +"jest-watcher@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-watcher@npm:27.3.1" dependencies: - "@jest/test-result": ^27.0.6 - "@jest/types": ^27.0.6 + "@jest/test-result": ^27.3.1 + "@jest/types": ^27.2.5 "@types/node": "*" ansi-escapes: ^4.2.1 chalk: ^4.0.0 - jest-util: ^27.0.6 + jest-util: ^27.3.1 string-length: ^4.0.1 - checksum: 7a7870abc9e8752f32253d2c0e843569077118a7314ae353ecb262708a6b8fb784f76b8dd684ae9a6088a36bf3c5586e4652ce0e39e92c577e63d4039ba6d3f1 + checksum: cdcb73f9788809d1a8d2fee8c4b4c504aa8ec876c590b5fb3b9bf53ee30d19b971b9fc75ca9ea35bd5b26e7323e1adf4d4f79ef44b3e955f28a2401846bd507c languageName: node linkType: hard @@ -9345,24 +9328,24 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-worker@npm:^27.0.6": - version: 27.0.6 - resolution: "jest-worker@npm:27.0.6" +"jest-worker@npm:^27.3.1": + version: 27.3.1 + resolution: "jest-worker@npm:27.3.1" dependencies: "@types/node": "*" merge-stream: ^2.0.0 supports-color: ^8.0.0 - checksum: 2a153623432d607310ab41075c0ee3d23c454e0536a62ea656e6a75a63050999050bae0ef7bc45a4cbed9889b72d32184ec43afa2f934be71e7993326e632f61 + checksum: 919e26271d027ce5576bc1491e18527f37245e5530406bd145c595a34761ba4a2727b4b78aea1e0177b8db9afbb56c71024b0ac6cd013db4df8b1fa139b90cb9 languageName: node linkType: hard -"jest@npm:^27.0.1": - version: 27.0.6 - resolution: "jest@npm:27.0.6" +"jest@npm:^27.3.1": + version: 27.3.1 + resolution: "jest@npm:27.3.1" dependencies: - "@jest/core": ^27.0.6 + "@jest/core": ^27.3.1 import-local: ^3.0.2 - jest-cli: ^27.0.6 + jest-cli: ^27.3.1 peerDependencies: node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 peerDependenciesMeta: @@ -9370,7 +9353,7 @@ fsevents@^1.2.7: optional: true bin: jest: bin/jest.js - checksum: d1a82558cc5fc8332fb05f19516465f597dd6759dda41d744a84b23dc596537eeeebe8e18af522e695729a96029502e1ebd1dcd826bbda1b845be795d5476636 + checksum: 408fbe3e1bc523d6e5fe6cf337c3a738b6a30cd4e02012292f34b49dde4cfe3c5715aa4b73116387784a6b40b4b54b16df2d1b3b42588cc57ffaff8ec58f697b languageName: node linkType: hard @@ -9628,33 +9611,33 @@ fsevents@^1.2.7: languageName: node linkType: hard -"lit-element@npm:^3.0.0-rc.2": - version: 3.0.0-rc.2 - resolution: "lit-element@npm:3.0.0-rc.2" +"lit-element@npm:^3.0.0": + version: 3.0.2 + resolution: "lit-element@npm:3.0.2" dependencies: - "@lit/reactive-element": ^1.0.0-rc.2 - lit-html: ^2.0.0-rc.3 - checksum: 1493246171b64123602558e4adce4e6231cfd484312ab5bb51803079592332070b932f49f0531951a5af4cd5f111cd91066936a99aa059397e61c0b081aa6059 + "@lit/reactive-element": ^1.0.0 + lit-html: ^2.0.0 + checksum: 1d43eea17fb3b2ae9da03e5bc5767e2c93efad03d62aec80c121f22db96a63a1a536fa13b9c585252a00053ff6ae9b2c13b0bd5804f06814506d40a3d141443c languageName: node linkType: hard -"lit-html@npm:^2.0.0-rc.3": - version: 2.0.0-rc.3 - resolution: "lit-html@npm:2.0.0-rc.3" +"lit-html@npm:^2.0.0": + version: 2.0.2 + resolution: "lit-html@npm:2.0.2" dependencies: - "@types/trusted-types": ^1.0.1 - checksum: 26120f0bfdd65c2f32fb15ea4e554cdf2072289fae5d1f6820b6110a42da069c6062ec19ff26734f4fff3be77cd3c61a1d0146cd9c257c64b199cb52eebc756f + "@types/trusted-types": ^2.0.2 + checksum: 3a199fdc8a2a914cae0f4bcb61582d15ca671a84e34db387651d4009be9c41951c8d29381a8d858c2037efb4fce6f4eccf51d4da545d9dd419651b0b42b1b88b languageName: node linkType: hard -"lit@npm:^2.0.0-rc.2": - version: 2.0.0-rc.2 - resolution: "lit@npm:2.0.0-rc.2" +"lit@npm:^2.0.2": + version: 2.0.2 + resolution: "lit@npm:2.0.2" dependencies: - "@lit/reactive-element": ^1.0.0-rc.2 - lit-element: ^3.0.0-rc.2 - lit-html: ^2.0.0-rc.3 - checksum: efb6c6e200c971c82875fcb277ef27850d01d4b2f4bb7254f319e5c0569bf64486923d883873890b42c38e3a0696cd2e398852fe379fe3ac87c74ddd6c34a874 + "@lit/reactive-element": ^1.0.0 + lit-element: ^3.0.0 + lit-html: ^2.0.0 + checksum: f47404b026cbbf6e5cb50b78c272226dc2d44e66e3252d2c914b7463a203503bb65712d02aaa17bf592f4c308d570684a0cab18e93cf4478e0294f61e2223b50 languageName: node linkType: hard @@ -10763,13 +10746,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"p-each-series@npm:^2.1.0": - version: 2.2.0 - resolution: "p-each-series@npm:2.2.0" - checksum: 32a7cce1312bf70f99079db2ff070fc3ee2ed6efe0fa0444616fa38f79730ad09b461d009127d25254c4c865c40b6664e2c656b1a7b2c4781756d9173c974269 - languageName: node - linkType: hard - "p-event@npm:^4.1.0": version: 4.2.0 resolution: "p-event@npm:4.2.0" @@ -11080,7 +11056,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0": version: 2.3.0 resolution: "picomatch@npm:2.3.0" checksum: a65bde78212368e16afb82429a0ea033d20a836270446acb53ec6e31d939bccf1213f788bc49361f7aff47b67c1fb74d898f99964f67f26ca07a3cd815ddbcbb @@ -11314,15 +11290,15 @@ fsevents@^1.2.7: languageName: node linkType: hard -"pretty-format@npm:^27.0.6": - version: 27.0.6 - resolution: "pretty-format@npm:27.0.6" +"pretty-format@npm:^27.3.1": + version: 27.3.1 + resolution: "pretty-format@npm:27.3.1" dependencies: - "@jest/types": ^27.0.6 - ansi-regex: ^5.0.0 + "@jest/types": ^27.2.5 + ansi-regex: ^5.0.1 ansi-styles: ^5.0.0 react-is: ^17.0.1 - checksum: 022d970d59e8b0004f4cc8bb75d5a65b2a976deb73ffa89643d9bbe0eeeef3c789493207da8d8c24a2ea055400914ce5300f8f7b824e2cf8b59d7e6be45d9b1f + checksum: b255146debac1212b26ef718f26b6433e22b2e3fe5f141bd038fbf73a94494c1fd8141359a98cd2d94ad7256a7440a340ac1ac2b3f81aadfeccc6fcbfbd883d4 languageName: node linkType: hard @@ -11423,7 +11399,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"prop-types@npm:^15.0.0, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2": +"prop-types@npm:^15.0.0, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2": version: 15.7.2 resolution: "prop-types@npm:15.7.2" dependencies: @@ -11771,13 +11747,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-lifecycles-compat@npm:^3.0.4": - version: 3.0.4 - resolution: "react-lifecycles-compat@npm:3.0.4" - checksum: 1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27 - languageName: node - linkType: hard - "react-popper-tooltip@npm:^3.1.1": version: 3.1.1 resolution: "react-popper-tooltip@npm:3.1.1" @@ -11805,6 +11774,30 @@ fsevents@^1.2.7: languageName: node linkType: hard +"react-router-dom@npm:^6.0.0": + version: 6.0.2 + resolution: "react-router-dom@npm:6.0.2" + dependencies: + history: ^5.1.0 + react-router: 6.0.2 + peerDependencies: + react: ">=16.8" + react-dom: ">=16.8" + checksum: f34d30742631813ff5a9bff2dc20adc0ae3932c956cf5b1ecaeeb5287f41c4dcb612e2eb2a98244ee5cc6f6c6827ebc91c771ebb3beb7eca103c5e4b8d251f24 + languageName: node + linkType: hard + +"react-router@npm:6.0.2, react-router@npm:^6.0.0": + version: 6.0.2 + resolution: "react-router@npm:6.0.2" + dependencies: + history: ^5.1.0 + peerDependencies: + react: ">=16.8" + checksum: 60f9b079c03b6d213740cda937ba7265c2b6ce31d3e9cd9155fa64fb5b62fa5b15cfa9a487fb272809d935e4238697833d5910bb9aaed89b948c0071e3e5c399 + languageName: node + linkType: hard + "react-shallow-renderer@npm:^16.13.1": version: 16.14.1 resolution: "react-shallow-renderer@npm:16.14.1" @@ -12216,6 +12209,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"resolve.exports@npm:^1.1.0": + version: 1.1.0 + resolution: "resolve.exports@npm:1.1.0" + checksum: 7e21c22ad129b934d5cc0b6aefd07f377a92e0b9699f49ac33eac1736a85e3aeb9270c85aac47f7070b5975739623ed007aac318d6bc5f036504b2b7a407fd31 + languageName: node + linkType: hard + "resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2": version: 1.20.0 resolution: "resolve@npm:1.20.0" @@ -13260,6 +13260,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"synchronous-promise@npm:^2.0.15": + version: 2.0.15 + resolution: "synchronous-promise@npm:2.0.15" + checksum: 967778e7570dc496d7630a89db3bada38876574797c9b272ee50f6ecd7afcebf450268b4bb48a84274d213ab9fd4865dbcc6edeb279f9ecaddf189d5446cbe43 + languageName: node + linkType: hard + "tapable@npm:^1.0.0, tapable@npm:^1.1.3": version: 1.1.3 resolution: "tapable@npm:1.1.3" @@ -13281,7 +13288,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"telejson@npm:^5.3.2": +"telejson@npm:^5.3.2, telejson@npm:^5.3.3": version: 5.3.3 resolution: "telejson@npm:5.3.3" dependencies: @@ -14052,14 +14059,14 @@ fsevents@^1.2.7: languageName: node linkType: hard -"v8-to-istanbul@npm:^8.0.0": - version: 8.0.0 - resolution: "v8-to-istanbul@npm:8.0.0" +"v8-to-istanbul@npm:^8.1.0": + version: 8.1.0 + resolution: "v8-to-istanbul@npm:8.1.0" dependencies: "@types/istanbul-lib-coverage": ^2.0.1 convert-source-map: ^1.6.0 source-map: ^0.7.3 - checksum: 4d84ab3f49c778702442f8385609951871758441ea929f20285550e1ba16ea980e9a197cc6877b9d92443a57a2535d9e3cafed6700ed6366b53f59e9ee760146 + checksum: 4db98cc1ab0634e183353fb404e2dd9dec2dd3075372d4423c0acebff78d927b59dbb58ab729ab36c7d5168610b2aa5b3c885be8221b44ab937be1dbf2078c4b languageName: node linkType: hard @@ -14143,7 +14150,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"warning@npm:^4.0.2, warning@npm:^4.0.3": +"warning@npm:^4.0.2": version: 4.0.3 resolution: "warning@npm:4.0.3" dependencies: @@ -14192,7 +14199,7 @@ fsevents@^1.2.7: version: 0.0.0-use.local resolution: "web-components-kitchen-sink@workspace:." dependencies: - "@custom-elements-manifest/analyzer": ^0.3.11 + "@custom-elements-manifest/analyzer": ^0.5.7 "@storybook/addon-a11y": "*" "@storybook/addon-actions": "*" "@storybook/addon-backgrounds": "*" @@ -14205,8 +14212,8 @@ fsevents@^1.2.7: "@storybook/addon-viewport": "*" "@storybook/web-components": "*" global: ^4.4.0 - jest: ^27.0.1 - lit: ^2.0.0-rc.2 + jest: ^27.3.1 + lit: ^2.0.2 typescript: 4.2.4 languageName: unknown linkType: soft @@ -14483,6 +14490,21 @@ fsevents@^1.2.7: languageName: node linkType: hard +"ws@npm:^8.2.3": + version: 8.2.3 + resolution: "ws@npm:8.2.3" + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ^5.0.2 + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + checksum: 5ef0f81cc5b8776fb5dd5504c83b4f49be5aa610f9319ff774158bba7db495127e69763d73085288223061e7a5d104d022e2e264346b36b046322f50057e7945 + languageName: node + linkType: hard + "xml-name-validator@npm:^3.0.0": version: 3.0.0 resolution: "xml-name-validator@npm:3.0.0" @@ -14546,7 +14568,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"yargs@npm:^16.0.3": +"yargs@npm:^16.2.0": version: 16.2.0 resolution: "yargs@npm:16.2.0" dependencies: diff --git a/jest.config.js b/jest.config.js index 2caf8ee5a90e..b0ddc913094d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,5 @@ +const os = require('os'); + module.exports = { cacheDirectory: '.cache/jest', clearMocks: true, @@ -81,6 +83,7 @@ module.exports = { globals: { DOCS_MODE: false, PREVIEW_URL: undefined, + SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix', }, snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'], coverageDirectory: 'coverage', diff --git a/lerna.json b/lerna.json index 57a143f400f9..35034d1d7235 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "6.4.0-rc.3" + "version": "6.5.0-alpha.5" } diff --git a/lib/addons/package.json b/lib/addons/package.json index 1c1f0211ac04..651404dd5ea9 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook addons store", "keywords": [ "storybook" @@ -40,13 +40,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/api": "6.4.0-rc.3", - "@storybook/channels": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/router": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/router": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -59,6 +59,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/public_api.js" } diff --git a/lib/api/package.json b/lib/api/package.json index 045b86c85fe2..a7df050e7321 100644 --- a/lib/api/package.json +++ b/lib/api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -38,21 +38,21 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/router": "6.4.0-rc.3", + "@storybook/router": "6.5.0-alpha.5", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/theming": "6.5.0-alpha.5", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "memoizerific": "^1.11.3", "regenerator-runtime": "^0.13.7", "store2": "^2.12.0", - "telejson": "^5.3.2", + "telejson": "^5.3.3", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2" }, @@ -71,6 +71,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts index 044b728ca04e..e93c974f6255 100644 --- a/lib/api/src/lib/stories.ts +++ b/lib/api/src/lib/stories.ts @@ -3,6 +3,7 @@ import deprecate from 'util-deprecate'; import dedent from 'ts-dedent'; import mapValues from 'lodash/mapValues'; import countBy from 'lodash/countBy'; +import global from 'global'; import { StoryId, ComponentTitle, @@ -19,6 +20,8 @@ import merge from './merge'; import { Provider } from '../modules/provider'; import { ViewMode } from '../modules/addons'; +const { FEATURES } = global; + export type { StoryId }; export interface Root { @@ -207,7 +210,7 @@ export const transformStoriesRawToStoriesHash = ( } const setShowRoots = typeof showRoots !== 'undefined'; - if (usesOldHierarchySeparator && !setShowRoots) { + if (usesOldHierarchySeparator && !setShowRoots && FEATURES?.warnOnLegacyHierarchySeparator) { warnChangedDefaultHierarchySeparators(); } diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 654aad148fe6..308c94884854 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -293,10 +293,9 @@ export const init: ModuleFn = ({ ? s.parameters.viewMode : viewModeFromState; - // In some cases, the viewMode could be something other than docs/story - // ('settings', for example) and therefore we should make sure we go back - // to the 'story' viewMode when navigating away from those pages. - if (!viewMode.match(/docs|story/)) { + // Some viewModes are not story-specific, and we should reset viewMode + // to 'story' if one of those is active when navigating to another story + if (['settings', 'about', 'release'].includes(viewMode)) { viewMode = 'story'; } diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 42b6b7983cd9..dea056ead89f 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '6.4.0-rc.3'; +export const version = '6.5.0-alpha.5'; diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json index 8f20f6827c87..0bda0a6791f3 100644 --- a/lib/builder-webpack4/package.json +++ b/lib/builder-webpack4/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack4", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -61,23 +61,23 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/channel-postmessage": "6.4.0-rc.3", - "@storybook/channels": "6.4.0-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/preview-web": "6.4.0-rc.3", - "@storybook/router": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/channel-postmessage": "6.5.0-alpha.5", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/preview-web": "6.5.0-alpha.5", + "@storybook/router": "6.5.0-alpha.5", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", - "@storybook/ui": "6.4.0-rc.3", - "@types/node": "^14.0.10", + "@storybook/store": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", + "@storybook/ui": "6.5.0-alpha.5", + "@types/node": "^14.0.10 || ^16.0.0", "@types/webpack": "^4.41.26", "autoprefixer": "^9.8.6", "babel-loader": "^8.0.0", @@ -131,6 +131,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index d20ddd08ad82..7b293a5b8e08 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -1,7 +1,7 @@ import path from 'path'; import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack'; // @ts-ignore -import { Configuration, RuleSetRule } from '@types/webpack'; +import type { Configuration, RuleSetRule } from '@types/webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin'; @@ -64,6 +64,7 @@ export default async (options: Options & Record): Promise): Promise ({ ...specifier, importPathMatcher: specifier.importPathMatcher.source, diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json index 55c85d2e28ab..004811c2b385 100644 --- a/lib/builder-webpack5/package.json +++ b/lib/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -60,22 +60,22 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/channel-postmessage": "6.4.0-rc.3", - "@storybook/channels": "6.4.0-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/preview-web": "6.4.0-rc.3", - "@storybook/router": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/channel-postmessage": "6.5.0-alpha.5", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/preview-web": "6.5.0-alpha.5", + "@storybook/router": "6.5.0-alpha.5", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", - "@types/node": "^14.0.10", + "@storybook/store": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", + "@types/node": "^14.0.10 || ^16.0.0", "babel-loader": "^8.0.0", "babel-plugin-macros": "^3.0.1", "babel-plugin-polyfill-corejs3": "^0.1.0", @@ -86,6 +86,7 @@ "glob": "^7.1.6", "glob-promise": "^3.4.0", "html-webpack-plugin": "^5.0.0", + "path-browserify": "^1.0.1", "react-dev-utils": "^11.0.4", "stable": "^0.1.8", "style-loader": "^2.0.0", @@ -117,6 +118,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index c146b7925f39..4f24c610c2fa 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -1,5 +1,11 @@ import path from 'path'; -import { Configuration, DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack'; +import { + Configuration, + DefinePlugin, + HotModuleReplacementPlugin, + ProgressPlugin, + ProvidePlugin, +} from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin'; @@ -59,6 +65,7 @@ export default async (options: Options & Record): Promise): Promise ({ ...specifier, importPathMatcher: specifier.importPathMatcher.source, @@ -208,6 +216,7 @@ export default async (options: Options & Record): Promise): Promise typeof v !== 'undefined') ); - const stringifyOptions = { ...(global.CHANNEL_OPTIONS || {}), ...c }; + const stringifyOptions = { + ...defaultEventOptions, + ...(global.CHANNEL_OPTIONS || {}), + ...eventOptions, + }; // backwards compat: convert depth to maxDepth if (options && Number.isInteger(options.depth)) { diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index e14b3acd2467..d066e9c40444 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "", "keywords": [ "storybook" @@ -40,15 +40,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", "core-js": "^3.8.2", "global": "^4.4.0", - "telejson": "^5.3.2" + "telejson": "^5.3.3" }, "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/channels/package.json b/lib/channels/package.json index bc5d7d8cfe7f..7ec0227f6467 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "", "keywords": [ "storybook" @@ -47,6 +47,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json index 502d7e9eb0b9..90fe03ffe5d8 100644 --- a/lib/cli-sb/package.json +++ b/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook CLI", "keywords": [ "storybook" @@ -24,10 +24,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.4.0-rc.3" + "@storybook/cli": "6.5.0-alpha.5" }, "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b" + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963" } diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json index d31a77278c27..069c3b3687e1 100644 --- a/lib/cli-storybook/package.json +++ b/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook CLI", "keywords": [ "storybook" @@ -27,10 +27,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "6.4.0-rc.3" + "@storybook/cli": "6.5.0-alpha.5" }, "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b" + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963" } diff --git a/lib/cli/package.json b/lib/cli/package.json index eb6ab5e01cf5..9fdcddf5c07f 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -48,10 +48,10 @@ "dependencies": { "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", - "@storybook/codemod": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", - "@storybook/csf-tools": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", + "@storybook/codemod": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", + "@storybook/csf-tools": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", "@storybook/semver": "^7.3.2", "boxen": "^5.1.2", "chalk": "^4.1.0", @@ -76,7 +76,7 @@ "update-notifier": "^5.0.1" }, "devDependencies": { - "@storybook/client-api": "6.4.0-rc.3", + "@storybook/client-api": "6.5.0-alpha.5", "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", "@types/puppeteer-core": "^2.1.0", @@ -92,5 +92,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b" + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963" } diff --git a/lib/cli/src/automigrate/fixes/angular12.test.ts b/lib/cli/src/automigrate/fixes/angular12.test.ts index 6a9626674934..c00b45184056 100644 --- a/lib/cli/src/automigrate/fixes/angular12.test.ts +++ b/lib/cli/src/automigrate/fixes/angular12.test.ts @@ -1,4 +1,5 @@ /* eslint-disable no-underscore-dangle */ +import path from 'path'; import { JsPackageManager } from '../../js-package-manager'; import { angular12 } from './angular12'; @@ -8,7 +9,7 @@ jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); const checkCra5 = async ({ packageJson, main }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ - '.storybook/main.js': `module.exports = ${JSON.stringify(main)};`, + [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, }); const packageManager = { retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }), diff --git a/lib/cli/src/automigrate/fixes/cra5.test.ts b/lib/cli/src/automigrate/fixes/cra5.test.ts index 15717948ff6a..72e42f9f6f65 100644 --- a/lib/cli/src/automigrate/fixes/cra5.test.ts +++ b/lib/cli/src/automigrate/fixes/cra5.test.ts @@ -1,4 +1,5 @@ /* eslint-disable no-underscore-dangle */ +import path from 'path'; import { JsPackageManager } from '../../js-package-manager'; import { cra5 } from './cra5'; @@ -8,7 +9,7 @@ jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); const checkCra5 = async ({ packageJson, main }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ - '.storybook/main.js': `module.exports = ${JSON.stringify(main)};`, + [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, }); const packageManager = { retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }), diff --git a/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts b/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts index d4f9940a6a0e..b87856375474 100644 --- a/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts +++ b/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts @@ -1,4 +1,5 @@ /* eslint-disable no-underscore-dangle */ +import path from 'path'; import dedent from 'ts-dedent'; import { JsPackageManager } from '../../js-package-manager'; import { eslintPlugin } from './eslint-plugin'; @@ -14,7 +15,9 @@ const checkEslint = async ({ }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ - '.storybook/main.js': !main ? null : `module.exports = ${JSON.stringify(main)};`, + [path.join('.storybook', 'main.js')]: !main + ? null + : `module.exports = ${JSON.stringify(main)};`, [`.eslintrc.${eslintExtension}`]: !hasEslint ? null : dedent(` diff --git a/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/lib/cli/src/automigrate/fixes/eslint-plugin.ts index 43b42836acd1..dd6e9351066b 100644 --- a/lib/cli/src/automigrate/fixes/eslint-plugin.ts +++ b/lib/cli/src/automigrate/fixes/eslint-plugin.ts @@ -96,8 +96,7 @@ export const eslintPlugin: Fix = { if (!dryRun) { logger.info(`✅ Adding Storybook to extends list`); const extendsConfig = eslint.getFieldValue(['extends']) || []; - const existingConfigValue = - Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig]; + const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig]; eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']); await writeConfig(eslint); diff --git a/lib/cli/src/automigrate/fixes/mainjsFramework.ts b/lib/cli/src/automigrate/fixes/mainjsFramework.ts index 637c0868cd65..e074a9cd5857 100644 --- a/lib/cli/src/automigrate/fixes/mainjsFramework.ts +++ b/lib/cli/src/automigrate/fixes/mainjsFramework.ts @@ -21,6 +21,11 @@ export const mainjsFramework: Fix = { const packageJson = packageManager.retrievePackageJson(); const { mainConfig, framework, version: storybookVersion } = getStorybookInfo(packageJson); + if (!mainConfig) { + logger.warn('Unable to find storybook main.js config, skipping'); + return null; + } + const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version; if (!storybookCoerced) { logger.warn(dedent` diff --git a/lib/cli/src/automigrate/fixes/webpack5.test.ts b/lib/cli/src/automigrate/fixes/webpack5.test.ts index 7d5f519cfe64..5406b2ed86f4 100644 --- a/lib/cli/src/automigrate/fixes/webpack5.test.ts +++ b/lib/cli/src/automigrate/fixes/webpack5.test.ts @@ -1,4 +1,5 @@ /* eslint-disable no-underscore-dangle */ +import path from 'path'; import { JsPackageManager } from '../../js-package-manager'; import { webpack5 } from './webpack5'; @@ -8,7 +9,7 @@ jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); const checkWebpack5 = async ({ packageJson, main }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ - '.storybook/main.js': `module.exports = ${JSON.stringify(main)};`, + [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, }); const packageManager = { retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }), diff --git a/lib/cli/src/repro-generators/configs.ts b/lib/cli/src/repro-generators/configs.ts index c3b2f6e79660..d9d1238e6973 100644 --- a/lib/cli/src/repro-generators/configs.ts +++ b/lib/cli/src/repro-generators/configs.ts @@ -151,7 +151,6 @@ export const vue: Parameters = { name: 'vue', version: 'latest', generator: [ - `echo '{"useTaobaoRegistry": false}' > ~/.vuerc`, // Force npm otherwise we have a mess between Yarn 1 and Yarn 2 `npx -p @vue/cli@{{version}} vue create {{appName}} --default --packageManager=npm --no-git --force`, ].join(' && '), @@ -163,7 +162,6 @@ export const vue3: Parameters = { version: 'next', // Vue CLI v4 utilizes webpack 4, and the 5-alpha uses webpack 5 so we force ^4 here generator: [ - `echo '{"useTaobaoRegistry": false}' > ~/.vuerc`, // Force npm otherwise we have a mess between Yarn 1 and Yarn 2 `npx -p @vue/cli@^4 vue create {{appName}} --preset=__default_vue_3__ --packageManager=npm --no-git --force`, ].join(' && '), diff --git a/lib/cli/src/repro.ts b/lib/cli/src/repro.ts index ca1f811425c4..1019e662b32f 100644 --- a/lib/cli/src/repro.ts +++ b/lib/cli/src/repro.ts @@ -118,11 +118,13 @@ export const repro = async ({ type: 'text', message: 'Enter the output directory', name: 'directory', + initial: selectedConfig.name, + validate: (directoryName) => + fs.existsSync(directoryName) + ? `${directoryName} already exists. Please choose another name.` + : true, }); selectedDirectory = directory; - if (fs.existsSync(selectedDirectory)) { - throw new Error(`🚨 Repro: ${selectedDirectory} already exists`); - } } try { diff --git a/lib/cli/src/versions.json b/lib/cli/src/versions.json index 1156c47942c0..dc7e50455c3a 100644 --- a/lib/cli/src/versions.json +++ b/lib/cli/src/versions.json @@ -1,59 +1,59 @@ { - "@storybook/addon-a11y": "6.4.0-rc.3", - "@storybook/addon-actions": "6.4.0-rc.3", - "@storybook/addon-backgrounds": "6.4.0-rc.3", - "@storybook/addon-controls": "6.4.0-rc.3", - "@storybook/addon-docs": "6.4.0-rc.3", - "@storybook/addon-essentials": "6.4.0-rc.3", - "@storybook/addon-interactions": "6.4.0-rc.3", - "@storybook/addon-jest": "6.4.0-rc.3", - "@storybook/addon-links": "6.4.0-rc.3", - "@storybook/addon-storyshots": "6.4.0-rc.3", - "@storybook/addon-storyshots-puppeteer": "6.4.0-rc.3", - "@storybook/addon-storysource": "6.4.0-rc.3", - "@storybook/addon-toolbars": "6.4.0-rc.3", - "@storybook/addon-viewport": "6.4.0-rc.3", - "@storybook/addons": "6.4.0-rc.3", - "@storybook/angular": "6.4.0-rc.3", - "@storybook/api": "6.4.0-rc.3", - "@storybook/aurelia": "6.4.0-rc.3", - "@storybook/builder-webpack4": "6.4.0-rc.3", - "@storybook/builder-webpack5": "6.4.0-rc.3", - "@storybook/channel-postmessage": "6.4.0-rc.3", - "@storybook/channel-websocket": "6.4.0-rc.3", - "@storybook/channels": "6.4.0-rc.3", - "@storybook/cli": "6.4.0-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/codemod": "6.4.0-rc.3", - "@storybook/components": "6.4.0-rc.3", - "@storybook/core": "6.4.0-rc.3", - "@storybook/core-client": "6.4.0-rc.3", - "@storybook/core-common": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", - "@storybook/core-server": "6.4.0-rc.3", - "@storybook/csf-tools": "6.4.0-rc.3", - "@storybook/ember": "6.4.0-rc.3", - "@storybook/html": "6.4.0-rc.3", - "@storybook/instrumenter": "6.4.0-rc.3", - "@storybook/manager-webpack4": "6.4.0-rc.3", - "@storybook/manager-webpack5": "6.4.0-rc.3", - "@storybook/marionette": "6.4.0-rc.3", - "@storybook/marko": "6.4.0-rc.3", - "@storybook/mithril": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", - "@storybook/postinstall": "6.4.0-rc.3", - "@storybook/preact": "6.4.0-rc.3", - "@storybook/rax": "6.4.0-rc.3", - "@storybook/react": "6.4.0-rc.3", - "@storybook/riot": "6.4.0-rc.3", - "@storybook/router": "6.4.0-rc.3", - "@storybook/server": "6.4.0-rc.3", - "@storybook/source-loader": "6.4.0-rc.3", - "@storybook/svelte": "6.4.0-rc.3", - "@storybook/theming": "6.4.0-rc.3", - "@storybook/ui": "6.4.0-rc.3", - "@storybook/vue": "6.4.0-rc.3", - "@storybook/vue3": "6.4.0-rc.3", - "@storybook/web-components": "6.4.0-rc.3" + "@storybook/addon-a11y": "6.5.0-alpha.5", + "@storybook/addon-actions": "6.5.0-alpha.5", + "@storybook/addon-backgrounds": "6.5.0-alpha.5", + "@storybook/addon-controls": "6.5.0-alpha.5", + "@storybook/addon-docs": "6.5.0-alpha.5", + "@storybook/addon-essentials": "6.5.0-alpha.5", + "@storybook/addon-interactions": "6.5.0-alpha.5", + "@storybook/addon-jest": "6.5.0-alpha.5", + "@storybook/addon-links": "6.5.0-alpha.5", + "@storybook/addon-storyshots": "6.5.0-alpha.5", + "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.5", + "@storybook/addon-storysource": "6.5.0-alpha.5", + "@storybook/addon-toolbars": "6.5.0-alpha.5", + "@storybook/addon-viewport": "6.5.0-alpha.5", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/angular": "6.5.0-alpha.5", + "@storybook/api": "6.5.0-alpha.5", + "@storybook/aurelia": "6.5.0-alpha.5", + "@storybook/builder-webpack4": "6.5.0-alpha.5", + "@storybook/builder-webpack5": "6.5.0-alpha.5", + "@storybook/channel-postmessage": "6.5.0-alpha.5", + "@storybook/channel-websocket": "6.5.0-alpha.5", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/cli": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/codemod": "6.5.0-alpha.5", + "@storybook/components": "6.5.0-alpha.5", + "@storybook/core": "6.5.0-alpha.5", + "@storybook/core-client": "6.5.0-alpha.5", + "@storybook/core-common": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", + "@storybook/core-server": "6.5.0-alpha.5", + "@storybook/csf-tools": "6.5.0-alpha.5", + "@storybook/ember": "6.5.0-alpha.5", + "@storybook/html": "6.5.0-alpha.5", + "@storybook/instrumenter": "6.5.0-alpha.5", + "@storybook/manager-webpack4": "6.5.0-alpha.5", + "@storybook/manager-webpack5": "6.5.0-alpha.5", + "@storybook/marionette": "6.5.0-alpha.5", + "@storybook/marko": "6.5.0-alpha.5", + "@storybook/mithril": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", + "@storybook/postinstall": "6.5.0-alpha.5", + "@storybook/preact": "6.5.0-alpha.5", + "@storybook/rax": "6.5.0-alpha.5", + "@storybook/react": "6.5.0-alpha.5", + "@storybook/riot": "6.5.0-alpha.5", + "@storybook/router": "6.5.0-alpha.5", + "@storybook/server": "6.5.0-alpha.5", + "@storybook/source-loader": "6.5.0-alpha.5", + "@storybook/svelte": "6.5.0-alpha.5", + "@storybook/theming": "6.5.0-alpha.5", + "@storybook/ui": "6.5.0-alpha.5", + "@storybook/vue": "6.5.0-alpha.5", + "@storybook/vue3": "6.5.0-alpha.5", + "@storybook/web-components": "6.5.0-alpha.5" } diff --git a/lib/client-api/package.json b/lib/client-api/package.json index 73783a052627..ae80bab0c4da 100644 --- a/lib/client-api/package.json +++ b/lib/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook Client API", "keywords": [ "storybook" @@ -40,19 +40,19 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/channel-postmessage": "6.4.0-rc.3", - "@storybook/channels": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/channel-postmessage": "6.5.0-alpha.5", + "@storybook/channels": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.4.0-rc.3", + "@storybook/store": "6.5.0-alpha.5", "@types/qs": "^6.9.5", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "memoizerific": "^1.11.3", "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", @@ -68,6 +68,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/client-api/src/ClientApi.ts b/lib/client-api/src/ClientApi.ts index 895e3a334312..964a1c7e68ef 100644 --- a/lib/client-api/src/ClientApi.ts +++ b/lib/client-api/src/ClientApi.ts @@ -316,7 +316,7 @@ export class ClientApi { ); } - const { decorators, loaders, ...storyParameters } = parameters; + const { decorators, loaders, component, args, argTypes, ...storyParameters } = parameters; // eslint-disable-next-line no-underscore-dangle const storyId = parameters.__id || toId(kind, storyName); @@ -328,6 +328,9 @@ export class ClientApi { parameters: { fileName, __id: storyId, ...storyParameters }, decorators, loaders, + args, + argTypes, + component, render: storyFn, }; counter += 1; @@ -358,12 +361,15 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m return api; }; - api.addParameters = (parameters: Parameters) => { + api.addParameters = ({ component, args, argTypes, ...parameters }: Parameters) => { if (hasAdded) throw new Error(`You cannot add parameters after the first story for a kind. Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`); meta.parameters = combineParameters(meta.parameters, parameters); + if (component) meta.component = component; + if (args) meta.args = { ...meta.args, ...args }; + if (argTypes) meta.argTypes = { ...meta.argTypes, ...argTypes }; return api; }; diff --git a/lib/client-api/src/StoryStoreFacade.ts b/lib/client-api/src/StoryStoreFacade.ts index 1b51c68bda08..2a27797acb98 100644 --- a/lib/client-api/src/StoryStoreFacade.ts +++ b/lib/client-api/src/StoryStoreFacade.ts @@ -101,7 +101,7 @@ export class StoryStoreFacade { > ${err.message} - Are you using a V7-style sort function in V6 compatibilty mode? + Are you using a V7-style sort function in V6 compatibility mode? More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort `); diff --git a/lib/client-api/src/index.ts b/lib/client-api/src/index.ts index ab73f6b88e51..6d1e77ef7370 100644 --- a/lib/client-api/src/index.ts +++ b/lib/client-api/src/index.ts @@ -12,8 +12,6 @@ export * from './types'; export * from './queryparams'; -// Typescript isn't happy that we are overwriting some types from store here -// @ts-ignore export * from '@storybook/store'; export { diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts index 708f9c710048..fa4350c92f82 100644 --- a/lib/client-api/src/types.ts +++ b/lib/client-api/src/types.ts @@ -14,7 +14,7 @@ import { StoryContext, } from '@storybook/addons'; import { AnyFramework, StoryIdentifier, ProjectAnnotations } from '@storybook/csf'; -import { StoryStore, HooksContext } from '@storybook/store'; +import { StoryStore, HooksContext, RenderContext } from '@storybook/store'; export type { SBType, @@ -44,7 +44,7 @@ export interface StoryMetadata { export type ArgTypesEnhancer = (context: StoryContext) => ArgTypes; export type ArgsEnhancer = (context: StoryContext) => Args; -export type StorySpecifier = StoryId | { name: StoryName; kind: StoryKind } | '*'; +type StorySpecifier = StoryId | { name: StoryName; kind: StoryKind } | '*'; export interface StoreSelectionSpecifier { storySpecifier: StorySpecifier; @@ -117,16 +117,4 @@ export interface GetStorybookKind { stories: GetStorybookStory[]; } -// This really belongs in lib/core, but that depends on lib/ui which (dev) depends on app/react -// which needs this type. So we put it here to avoid the circular dependency problem. -export type RenderContextWithoutStoryContext = StoreItem & { - forceRender: boolean; - - showMain: () => void; - showError: (error: { title: string; description: string }) => void; - showException: (err: Error) => void; -}; - -export type RenderContext = RenderContextWithoutStoryContext & { - storyContext: StoryContext; -}; +export type RenderContextWithoutStoryContext = Omit; diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json index 266671a3820e..9673c93c3aac 100644 --- a/lib/client-logger/package.json +++ b/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "", "keywords": [ "storybook" @@ -46,6 +46,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/codemod/package.json b/lib/codemod/package.json index d2e8b96ec634..38f972804160 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -44,13 +44,13 @@ "@babel/types": "^7.12.11", "@mdx-js/mdx": "^1.6.22", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/csf-tools": "6.4.0-rc.3", - "@storybook/node-logger": "6.4.0-rc.3", + "@storybook/csf-tools": "6.5.0-alpha.5", + "@storybook/node-logger": "6.5.0-alpha.5", "core-js": "^3.8.2", "cross-spawn": "^7.0.3", "globby": "^11.0.2", "jscodeshift": "^0.7.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "prettier": "^2.2.1", "recast": "^0.19.0", "regenerator-runtime": "^0.13.7" @@ -62,6 +62,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/codemod/src/transforms/csf-2-to-3.ts b/lib/codemod/src/transforms/csf-2-to-3.ts index 08f4f4e79389..8ca8fddbb20f 100644 --- a/lib/codemod/src/transforms/csf-2-to-3.ts +++ b/lib/codemod/src/transforms/csf-2-to-3.ts @@ -104,36 +104,41 @@ function transform({ source }: { source: string }, api: any, options: { parser?: return t.objectProperty(t.identifier(_rename(annotation)), val as t.Expression); }); - const { init, id } = decl; - // only replace arrow function expressions && template - // ignore no-arg stories without annotations - const template = getTemplateBindVariable(init); - if ((!t.isArrowFunctionExpression(init) && !template) || isSimpleCSFStory(init, annotations)) { - return; - } + if (t.isVariableDeclarator(decl)) { + const { init, id } = decl; + // only replace arrow function expressions && template + // ignore no-arg stories without annotations + const template = getTemplateBindVariable(init); + if ( + (!t.isArrowFunctionExpression(init) && !template) || + isSimpleCSFStory(init, annotations) + ) { + return; + } - // Remove the render function when we can hoist the template - // const Template = (args) => ; - // export const A = Template.bind({}); - let storyFn = template && csf._templates[template]; - if (!storyFn) storyFn = init; - - const keyId = t.identifier(key); - // @ts-ignore - const { typeAnnotation } = id; - if (typeAnnotation) { - keyId.typeAnnotation = typeAnnotation; - } + // Remove the render function when we can hoist the template + // const Template = (args) => ; + // export const A = Template.bind({}); + let storyFn = template && csf._templates[template]; + if (!storyFn) storyFn = init; + + const keyId = t.identifier(key); + // @ts-ignore + const { typeAnnotation } = id; + if (typeAnnotation) { + keyId.typeAnnotation = typeAnnotation; + } - const renderAnnotation = isReactGlobalRenderFn(csf, storyFn) - ? [] - : [t.objectProperty(t.identifier('render'), storyFn)]; + const renderAnnotation = isReactGlobalRenderFn(csf, storyFn) + ? [] + : [t.objectProperty(t.identifier('render'), storyFn)]; - objectExports[key] = t.exportNamedDeclaration( - t.variableDeclaration('const', [ - t.variableDeclarator(keyId, t.objectExpression([...renderAnnotation, ...annotations])), - ]) - ); + objectExports[key] = t.exportNamedDeclaration( + t.variableDeclaration('const', [ + t.variableDeclarator(keyId, t.objectExpression([...renderAnnotation, ...annotations])), + ]) + ); + } }); const updatedBody = csf._ast.program.body.reduce((acc, stmt) => { diff --git a/lib/components/package.json b/lib/components/package.json index 40af6e03450c..29b706710f1f 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -41,9 +41,9 @@ }, "dependencies": { "@popperjs/core": "^2.6.0", - "@storybook/client-logger": "6.4.0-rc.3", + "@storybook/client-logger": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/theming": "6.4.0-rc.3", + "@storybook/theming": "6.5.0-alpha.5", "@types/color-convert": "^2.0.0", "@types/overlayscrollbars": "^1.12.0", "@types/react-syntax-highlighter": "11.0.5", @@ -51,7 +51,7 @@ "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "markdown-to-jsx": "^7.1.3", "memoizerific": "^1.11.3", "overlayscrollbars": "^1.13.1", @@ -76,6 +76,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/components/src/bar/button.tsx b/lib/components/src/bar/button.tsx index a24b53f6bcd7..7282ec7a0a92 100644 --- a/lib/components/src/bar/button.tsx +++ b/lib/components/src/bar/button.tsx @@ -133,7 +133,9 @@ const IconPlaceholder = styled.div(({ theme }) => ({ })); const IconButtonSkeletonWrapper = styled.div(() => ({ - padding: 5, + marginTop: 6, + padding: 7, + height: 28, })); export const IconButtonSkeleton = () => ( diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx index 39f7cab987ef..d6ffb2b42d3d 100644 --- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx @@ -23,8 +23,6 @@ const Template = (args) => ; const baseArgs = { updateArgs: action('updateArgs'), }; -export const Loading = Template.bind({}); -Loading.args = { isLoading: true }; export const String = Template.bind({}); String.args = { diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx index 3087fe418efa..ab7c0800d357 100644 --- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgRow.tsx @@ -8,7 +8,7 @@ import { ArgValue } from './ArgValue'; import { ArgControl, ArgControlProps } from './ArgControl'; import { codeCommon } from '../../typography/shared'; -interface ArgRowData { +interface ArgRowProps { row: ArgType; arg: any; updateArgs?: (args: Args) => void; @@ -17,17 +17,6 @@ interface ArgRowData { initialExpandedArgs?: boolean; } -interface ArgRowLoading { - isLoading: true; -} - -export const argRowLoadingData: ArgRowData = { - row: { name: 'loading', description: 'loading' }, - arg: 0, -}; - -export type ArgRowProps = ArgRowData | ArgRowLoading; - const Name = styled.span({ fontWeight: 'bold' }); const Required = styled.span(({ theme }) => ({ @@ -84,9 +73,7 @@ const StyledTd = styled.td<{ expandable: boolean }>(({ theme, expandable }) => ( })); export const ArgRow: FC = (props) => { - // const isLoading = 'isLoading' in props; - const { row, updateArgs, compact, expandable, initialExpandedArgs } = - 'row' in props ? props : argRowLoadingData; + const { row, updateArgs, compact, expandable, initialExpandedArgs } = props; const { name, description } = row; const table = (row.table || {}) as TableAnnotation; const type = table.type || row.type; diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index dc9bff0a1a11..0f0fb41b9011 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -29,6 +29,7 @@ const Template = (args) => ; export const Loading = Template.bind({}); Loading.args = { isLoading: true }; + export const Normal = Template.bind({}); Normal.args = { rows: { diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx index cb1a63a3144b..abeeb84973c5 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx @@ -3,14 +3,18 @@ import pickBy from 'lodash/pickBy'; import { styled, ignoreSsrWarning } from '@storybook/theming'; import { opacify, transparentize, darken, lighten } from 'polished'; import { Icons } from '../../icon/icon'; -import { ArgRow, argRowLoadingData } from './ArgRow'; +import { ArgRow } from './ArgRow'; import { SectionRow } from './SectionRow'; import { ArgType, ArgTypes, Args } from './types'; import { EmptyBlock } from '../EmptyBlock'; import { Link } from '../../typography/link/link'; import { ResetWrapper } from '../../typography/DocumentFormatting'; -export const TableWrapper = styled.table<{ compact?: boolean; inAddonPanel?: boolean }>( +export const TableWrapper = styled.table<{ + compact?: boolean; + inAddonPanel?: boolean; + isLoading?: boolean; +}>( ({ theme, compact, inAddonPanel }) => ({ '&&': { // Resets for cascading/system styles @@ -183,7 +187,20 @@ export const TableWrapper = styled.table<{ compact?: boolean; inAddonPanel?: boo }, // End finicky table styling }, - }) + }), + ({ isLoading, theme }) => + isLoading + ? { + 'th span, td span, td button': { + display: 'inline', + backgroundColor: theme.appBorderColor, + animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, + color: 'transparent', + boxShadow: 'none', + borderRadius: 0, + }, + } + : {} ); const ResetButton = styled.button(({ theme }) => ({ @@ -240,9 +257,8 @@ const sortFns: Record = { Number(!!b.type?.required) - Number(!!a.type?.required) || a.name.localeCompare(b.name), none: undefined, }; -export interface ArgsTableData { - rows: ArgTypes; - args?: Args; + +export interface ArgsTableOptionProps { updateArgs?: (args: Args) => void; resetArgs?: (argNames?: string[]) => void; compact?: boolean; @@ -251,23 +267,39 @@ export interface ArgsTableData { isLoading?: boolean; sort?: SortType; } +export interface ArgsTableDataProps { + rows: ArgTypes; + args?: Args; +} export interface ArgsTableErrorProps { error: ArgsTableError; } -interface ArgTableLoading { +export interface ArgsTableLoadingProps { isLoading: true; } -export const argTableLoadingData: ArgsTableData = { +const rowLoadingData = (key: string) => ({ + key, + name: 'propertyName', + description: 'This is a short description', + control: { type: 'text' }, + table: { + type: { summary: 'summary' }, + defaultValue: { summary: 'defaultValue' }, + }, +}); + +export const argsTableLoadingData: ArgsTableDataProps = { rows: { - row1: argRowLoadingData.row, - row2: argRowLoadingData.row, - row3: argRowLoadingData.row, + row1: rowLoadingData('row1'), + row2: rowLoadingData('row2'), + row3: rowLoadingData('row3'), }, }; -export type ArgsTableProps = ArgsTableData | ArgsTableErrorProps | ArgTableLoading; +export type ArgsTableProps = ArgsTableOptionProps & + (ArgsTableDataProps | ArgsTableErrorProps | ArgsTableLoadingProps); type Rows = ArgType[]; type Subsection = Rows; @@ -338,130 +370,6 @@ const groupRows = (rows: ArgType, sort: SortType) => { return sorted; }; -const SkeletonHeader = styled.div(({ theme }) => ({ - alignContent: 'stretch', - display: 'flex', - gap: 16, - marginTop: 25, - padding: '10px 20px', - - div: { - animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, - background: theme.appBorderColor, - flexShrink: 0, - height: 20, - - '&:first-child, &:nth-child(4)': { - width: '20%', - }, - - '&:nth-child(2)': { - width: '30%', - }, - - '&:nth-child(3)': { - flexGrow: 1, - }, - - '&:last-child': { - width: 30, - }, - - '@media ( max-width: 500px )': { - '&:nth-child( n + 4 )': { - display: 'none', - }, - }, - }, -})); - -const SkeletonBody = styled.div(({ theme }) => ({ - background: theme.background.content, - boxShadow: - theme.base === 'light' - ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px, - ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px` - : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px, - ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`, - borderRadius: theme.appBorderRadius, - - '> div': { - alignContent: 'stretch', - borderTopColor: - theme.base === 'light' - ? darken(0.1, theme.background.content) - : lighten(0.05, theme.background.content), - borderTopStyle: 'solid', - borderTopWidth: 1, - display: 'flex', - gap: 16, - padding: 20, - - '&:first-child': { - borderTop: 0, - }, - }, - - '> div div': { - animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, - background: theme.appBorderColor, - flexShrink: 0, - height: 20, - - '&:first-child': { - width: '20%', - }, - - '&:nth-child(2)': { - width: '30%', - }, - - '&:nth-child(3)': { - flexGrow: 1, - }, - - '&:last-child': { - width: 'calc(20% + 47px)', - - '@media ( max-width: 500px )': { - display: 'none', - }, - }, - }, -})); - -const Skeleton = () => ( -
- -
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-); - /** * Display the props for a component as a props table. Each row is a collection of * ArgDefs, usually derived from docgen info for the component. @@ -478,21 +386,16 @@ export const ArgsTable: FC = (props) => { ); } - const isLoading = 'isLoading' in props; const { - rows, - args, updateArgs, resetArgs, compact, inAddonPanel, initialExpandedArgs, sort = 'none', - } = 'rows' in props ? props : argTableLoadingData; - - if (isLoading) { - return ; - } + } = props; + const isLoading = 'isLoading' in props; + const { rows, args } = 'rows' in props ? props : argsTableLoadingData; const groups = groupRows( pickBy(rows, (row) => !row?.table?.disable), @@ -523,25 +426,38 @@ export const ArgsTable: FC = (props) => { return ( - +
- - {compact || } - {compact || } - {updateArgs && ( + + {compact ? null : ( + + )} + {compact ? null : ( + + )} + {updateArgs ? ( - )} - {null} + ) : null} diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx index 3b55d6ea3fe4..efbd4030a1b9 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/components/src/blocks/DocsPage.stories.tsx @@ -42,7 +42,7 @@ export const Loading = () => ( - + ); diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx index 1ee62bc0956a..1d142a66f4f9 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/components/src/blocks/Preview.tsx @@ -20,6 +20,7 @@ import { Zoom } from '../Zoom/Zoom'; import { StorySkeleton } from '.'; export interface PreviewProps { + isLoading?: true; isColumn?: boolean; columns?: number; withSource?: SourceProps; @@ -191,6 +192,7 @@ const getLayout = (children: ReactElement[]): layout => { * as a drop-down. */ export const Preview: FunctionComponent = ({ + isLoading, isColumn, columns, children, @@ -254,6 +256,7 @@ export const Preview: FunctionComponent = ({ > {withToolbar && ( setScale(scale * z)} resetZoom={() => setScale(1)} @@ -285,8 +288,15 @@ export const Preview: FunctionComponent = ({ ); }; +const StyledPreview = styled(Preview)(() => ({ + '.docs-story': { + paddingTop: 32, + paddingBottom: 40, + }, +})); + export const PreviewSkeleton = () => ( - + - + ); diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx index e32962a6242b..c6fd99f157b2 100644 --- a/lib/components/src/blocks/Story.tsx +++ b/lib/components/src/blocks/Story.tsx @@ -1,3 +1,4 @@ +import global from 'global'; import React, { createElement, ElementType, FunctionComponent, Fragment } from 'react'; import type { Parameters } from '@storybook/api'; @@ -7,7 +8,8 @@ import { EmptyBlock } from './EmptyBlock'; import { ZoomContext } from './ZoomContext'; import { Loader } from '..'; -const BASE_URL = 'iframe.html'; +const { PREVIEW_URL } = global; +const BASE_URL = PREVIEW_URL || 'iframe.html'; export enum StoryError { NO_STORY = 'No component or story to display', diff --git a/lib/components/src/blocks/Toolbar.tsx b/lib/components/src/blocks/Toolbar.tsx index b3e9909b24f7..63b99e94a0be 100644 --- a/lib/components/src/blocks/Toolbar.tsx +++ b/lib/components/src/blocks/Toolbar.tsx @@ -3,7 +3,7 @@ import { styled } from '@storybook/theming'; import { FlexBar } from '../bar/bar'; import { Icons } from '../icon/icon'; -import { IconButton } from '../bar/button'; +import { IconButton, IconButtonSkeleton } from '../bar/button'; interface ZoomProps { zoom: (val: number) => void; @@ -19,7 +19,11 @@ interface BarProps { border?: boolean; } -export type ToolbarProps = BarProps & ZoomProps & EjectProps; +interface LoadingProps { + isLoading?: boolean; +} + +export type ToolbarProps = BarProps & ZoomProps & EjectProps & LoadingProps; const Zoom: FunctionComponent = ({ zoom, resetZoom }) => ( <> @@ -76,6 +80,7 @@ const Bar = styled(FlexBar)({ }); export const Toolbar: FunctionComponent = ({ + isLoading, storyId, baseUrl, zoom, @@ -84,8 +89,14 @@ export const Toolbar: FunctionComponent = ({ }) => ( - + {isLoading ? ( + [1, 2, 3].map((key) => ) + ) : ( + + )} + + + {storyId && (isLoading ? : )} - {storyId && } ); diff --git a/lib/core-client/package.json b/lib/core-client/package.json index 918c6856097e..a04b9053815c 100644 --- a/lib/core-client/package.json +++ b/lib/core-client/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-client", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -40,21 +40,21 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.4.0-rc.3", - "@storybook/channel-postmessage": "6.4.0-rc.3", - "@storybook/channel-websocket": "6.4.0-rc.3", - "@storybook/client-api": "6.4.0-rc.3", - "@storybook/client-logger": "6.4.0-rc.3", - "@storybook/core-events": "6.4.0-rc.3", + "@storybook/addons": "6.5.0-alpha.5", + "@storybook/channel-postmessage": "6.5.0-alpha.5", + "@storybook/channel-websocket": "6.5.0-alpha.5", + "@storybook/client-api": "6.5.0-alpha.5", + "@storybook/client-logger": "6.5.0-alpha.5", + "@storybook/core-events": "6.5.0-alpha.5", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/preview-web": "6.4.0-rc.3", - "@storybook/store": "6.4.0-rc.3", - "@storybook/ui": "6.4.0-rc.3", + "@storybook/preview-web": "6.5.0-alpha.5", + "@storybook/store": "6.5.0-alpha.5", + "@storybook/ui": "6.5.0-alpha.5", "airbnb-js-shims": "^2.2.1", "ansi-to-html": "^0.6.11", "core-js": "^3.8.2", "global": "^4.4.0", - "lodash": "^4.17.20", + "lodash": "^4.17.21", "qs": "^6.10.0", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", @@ -74,6 +74,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/core-client/src/preview/start.test.ts b/lib/core-client/src/preview/start.test.ts index b981edc21aff..1eeaf1461a10 100644 --- a/lib/core-client/src/preview/start.test.ts +++ b/lib/core-client/src/preview/start.test.ts @@ -322,6 +322,43 @@ describe('start', () => { ); }); + it('allows setting compomnent/args/argTypes via a parameter', async () => { + const render = jest.fn(({ storyFn }) => storyFn()); + + const { configure, clientApi } = start(render); + + const component = {}; + configure('test', () => { + clientApi + .storiesOf('Component A', { id: 'file1' } as NodeModule) + .addParameters({ + component, + args: { a: 'a' }, + argTypes: { a: { type: 'string' } }, + }) + .add('default', jest.fn(), { + args: { b: 'b' }, + argTypes: { b: { type: 'string' } }, + }); + }); + + await waitForRender(); + + expect(render).toHaveBeenCalledWith( + expect.objectContaining({ + storyContext: expect.objectContaining({ + component, + args: { a: 'a', b: 'b' }, + argTypes: { + a: { name: 'a', type: { name: 'string' } }, + b: { name: 'b', type: { name: 'string' } }, + }, + }), + }), + undefined + ); + }); + it('supports forceRerender()', async () => { const render = jest.fn(({ storyFn }) => storyFn()); diff --git a/lib/core-client/src/typings.d.ts b/lib/core-client/src/typings.d.ts index 4d6c70f7c703..5163adb9f9ed 100644 --- a/lib/core-client/src/typings.d.ts +++ b/lib/core-client/src/typings.d.ts @@ -6,6 +6,8 @@ declare module 'pnp-webpack-plugin'; declare module '@storybook/theming/paths'; declare module '@storybook/ui/paths'; declare module 'better-opn'; +declare module 'open'; +declare module 'x-default-browser'; declare module '@storybook/ui'; declare module 'file-system-cache' { diff --git a/lib/core-common/package.json b/lib/core-common/package.json index 34cdbe02f188..5794e223ee03 100644 --- a/lib/core-common/package.json +++ b/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "6.4.0-rc.3", + "version": "6.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -61,9 +61,9 @@ "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", "@babel/register": "^7.12.1", - "@storybook/node-logger": "6.4.0-rc.3", + "@storybook/node-logger": "6.5.0-alpha.5", "@storybook/semver": "^7.3.2", - "@types/node": "^14.0.10", + "@types/node": "^14.0.10 || ^16.0.0", "@types/pretty-hrtime": "^1.0.0", "babel-loader": "^8.0.0", "babel-plugin-macros": "^3.0.1", @@ -85,13 +85,13 @@ "pretty-hrtime": "^1.0.3", "resolve-from": "^5.0.0", "slash": "^3.0.0", - "telejson": "^5.3.2", + "telejson": "^5.3.3", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", "webpack": "4" }, "devDependencies": { - "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0", + "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", "@types/compression": "^1.7.0", "@types/interpret": "^1.1.1", "@types/mock-fs": "^4.13.0", @@ -110,6 +110,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "f23a6daa88a2f051e2a94d803431ab3b3d11e26b", + "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963", "sbmodern": "dist/modern/index.js" } diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index cca6cb28251b..2f11ecd179ae 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -1,5 +1,5 @@ import dedent from 'ts-dedent'; -import { join, resolve } from 'path'; +import { resolve } from 'path'; import { logger } from '@storybook/node-logger'; import resolveFrom from 'resolve-from'; import { @@ -79,7 +79,7 @@ export const resolveAddonName = (configDir: string, name: string) => { try { return { - name: resolveFrom(configDir, join(name, 'preset')), + name: resolveFrom(configDir, `${name}/preset`), type: 'presets', }; // eslint-disable-next-line no-empty @@ -87,7 +87,7 @@ export const resolveAddonName = (configDir: string, name: string) => { try { return { - name: resolveFrom(configDir, join(name, 'register')), + name: resolveFrom(configDir, `${name}/register`), type: 'managerEntries', }; // eslint-disable-next-line no-empty diff --git a/lib/core-common/src/templates/base-preview-body.html b/lib/core-common/src/templates/base-preview-body.html index 43970c2a9d7f..094286c31b41 100644 --- a/lib/core-common/src/templates/base-preview-body.html +++ b/lib/core-common/src/templates/base-preview-body.html @@ -1,229 +1,70 @@ - -
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
NameDescriptionDefault + Name + + Description + + Default + Control{' '} - {resetArgs && ( + {!isLoading && resetArgs && ( resetArgs()} title="Reset controls"> )}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/lib/core-common/src/templates/base-preview-head.html b/lib/core-common/src/templates/base-preview-head.html index def373e8608d..3a7bef117384 100644 --- a/lib/core-common/src/templates/base-preview-head.html +++ b/lib/core-common/src/templates/base-preview-head.html @@ -1,8 +1,6 @@