mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 19:11:08 +08:00
Merge branch 'next' into 15079-puppeteer-update-dependencies
# Conflicts: # addons/storyshots/storyshots-puppeteer/package.json # yarn.lock
This commit is contained in:
Norbert de Langen
commit
71909a1f3b
@ -277,9 +277,9 @@ jobs:
|
||||
- run:
|
||||
name: run e2e tests cra
|
||||
command: yarn test:e2e-framework --pnp cra
|
||||
- run:
|
||||
name: run e2e tests vue
|
||||
command: yarn test:e2e-framework --pnp sfcVue
|
||||
# - run:
|
||||
# name: run e2e tests vue
|
||||
# command: yarn test:e2e-framework --pnp sfcVue
|
||||
- run:
|
||||
name: prep artifacts
|
||||
when: always
|
||||
|
||||
@ -14,6 +14,25 @@
|
||||
},
|
||||
{
|
||||
"pattern": "https://stackblitz.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://*.chromatic.com"
|
||||
},
|
||||
{
|
||||
"pattern": "https://www.chromatic.com/build?*"
|
||||
},
|
||||
{
|
||||
"pattern": "http://*.nodeca.com"
|
||||
},
|
||||
{
|
||||
"pattern": "http://definitelytyped.org/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://yoursite.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://my-specific-domain.com"
|
||||
}
|
||||
]
|
||||
],
|
||||
"aliveStatusCodes": [429, 200]
|
||||
}
|
||||
144
CHANGELOG.md
144
CHANGELOG.md
@ -1,3 +1,147 @@
|
||||
## 6.5.0-rc.1 (May 18, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Improve webpack version and add detection of nextjs ([#18220](https://github.com/storybookjs/storybook/pull/18220))
|
||||
- ArgsTable: Gracefully handle conditional args failures ([#18248](https://github.com/storybookjs/storybook/pull/18248))
|
||||
- Controls: Fix reset button broken for !undefined URL values ([#18231](https://github.com/storybookjs/storybook/pull/18231))
|
||||
- Vue3: Add support for TSX in single file components ([#18038](https://github.com/storybookjs/storybook/pull/18038))
|
||||
|
||||
## 6.5.0-rc.0 (May 17, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-a11y: Show % of users in toolbar menu ([#18003](https://github.com/storybookjs/storybook/pull/18003))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Web-components: Clean Lit Expression comments in story source ([#18108](https://github.com/storybookjs/storybook/pull/18108))
|
||||
- Vue: Map args correctly in CSF3 implicit render function ([#18209](https://github.com/storybookjs/storybook/pull/18209))
|
||||
- Vue3: Fix CSF3 implicit render function when storyStoreV7 is enabled ([#18208](https://github.com/storybookjs/storybook/pull/182)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Don't throw is Ctrl + C was pressed when selecting a package in the build command ([#18195](https://github.com/storybookjs/storybook/pull/18195))
|
||||
- Build: Cleanup noise from unit tests ([#18196](https://github.com/storybookjs/storybook/pull/18196))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Fixed PnP compatibility for bundled components package ([#18015](https://github.com/storybookjs/storybook/pull/18015))
|
||||
|
||||
## 6.5.0-beta.8 (May 11, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Composition: Fix metadata.json incorrectly overriding main.js refs versions ([#18185](https://github.com/storybookjs/storybook/pull/18185))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Examples: Set channelOptions to disallow function serialization ([#18071](https://github.com/storybookjs/storybook/pull/18071))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade to telejson 6 ([#18164](https://github.com/storybookjs/storybook/pull/18164))
|
||||
|
||||
## 6.5.0-beta.7 (May 9, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF3: Add title prefix support for stories with custom titles ([#17724](https://github.com/storybookjs/storybook/pull/17724))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Components: Fix race conditions in SyntaxHighlighter ([#18158](https://github.com/storybookjs/storybook/pull/18158))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- API: Deprecate isToolshown, rename to showToolbar ([#18131](https://github.com/storybookjs/storybook/pull/18131))
|
||||
|
||||
## 6.5.0-beta.6 (May 6, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix undefined args handling ([#18135](https://github.com/storybookjs/storybook/pull/18135))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Update Introduction.stories.mdx template to be MDX2-friendly ([#18141](https://github.com/storybookjs/storybook/pull/18141))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Remove jest from cli peerDependencies ([#18149](https://github.com/storybookjs/storybook/pull/18149))
|
||||
|
||||
## 6.5.0-beta.5 (May 4, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix anonymous ID generation ([#18133](https://github.com/storybookjs/storybook/pull/18133))
|
||||
|
||||
## 6.5.0-beta.4 (May 4, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Add a parent level toolbar exclusion key for tabs ([#18106](https://github.com/storybookjs/storybook/pull/18106))
|
||||
- Addon-a11y: Display a11y issues number in addon tab title ([#17983](https://github.com/storybookjs/storybook/pull/17983))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix Canvas block CURRENT_SELECTION handling ([#18130](https://github.com/storybookjs/storybook/pull/18130))
|
||||
- Telemetry: Add safecheck for crash reports ([#18129](https://github.com/storybookjs/storybook/pull/18129))
|
||||
- Addon-a11y: Fix a11y params > element use ([#17989](https://github.com/storybookjs/storybook/pull/17989))
|
||||
|
||||
## 6.5.0-beta.3 (May 4, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Externalize `react-syntax-highlighter` from components ([#18127](https://github.com/storybookjs/storybook/pull/18127))
|
||||
|
||||
## 6.5.0-beta.2 (May 2, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add optional telemetry and crash reporting ([#18046](https://github.com/storybookjs/storybook/pull/18046))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix URL deserialization for argTypes with mapping ([#18124](https://github.com/storybookjs/storybook/pull/18124))
|
||||
- Core: Fix telemetry project root detection ([#18125](https://github.com/storybookjs/storybook/pull/18125))
|
||||
- React: Fix version detection for older versions of `react-dom` ([#18105](https://github.com/storybookjs/storybook/pull/18105))
|
||||
- CLI: Add non-monorepo testing tools to exclude lists ([#18092](https://github.com/storybookjs/storybook/pull/18092))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Examples: Update example to restore 6.4 auto-title behavior in UI ([#18109](https://github.com/storybookjs/storybook/pull/18109))
|
||||
- CLI: Remove git.io URL ([#18070](https://github.com/storybookjs/storybook/pull/18070))
|
||||
- UI: Make panel position a persistent preference ([#18036](https://github.com/storybookjs/storybook/pull/18036))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- React: Fix jest-specific-snapshot dev dependency ([#18095](https://github.com/storybookjs/storybook/pull/18095))
|
||||
|
||||
## 6.5.0-beta.1 (April 28, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- Toolbars: Add dynamicTitle option ([#17789](https://github.com/storybookjs/storybook/pull/17789))
|
||||
- Angular: Add webpackStatsJson to angular-builder ([#18001](https://github.com/storybookjs/storybook/pull/18001))
|
||||
- CLI/Vue: add interactions to vue cli template ([#18021](https://github.com/storybookjs/storybook/pull/18021))
|
||||
- CLI/HTML: Add interactions to cli template ([#18014](https://github.com/storybookjs/storybook/pull/18014))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CSF: Re-apply TArgs to render type ([#18075](https://github.com/storybookjs/storybook/pull/18075))
|
||||
- CLI: await generators for proper install ([#18053](https://github.com/storybookjs/storybook/pull/18053))
|
||||
- Core: Fix story index for CSF default exports as TS vars ([#18054](https://github.com/storybookjs/storybook/pull/18054))
|
||||
- Core: Fix single-story hoisting regression for auto-title changes ([#18052](https://github.com/storybookjs/storybook/pull/18052))
|
||||
|
||||
## 6.5.0-beta.0 (April 24, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI/Vue3: add interactions to vue3 cli template ([#18031](https://github.com/storybookjs/storybook/pull/18031))
|
||||
- CLI/Svelte: add interactions to cli template ([#17993](https://github.com/storybookjs/storybook/pull/17993))
|
||||
- UI: Move the "Rerun interactions" button to Subnav ([#17647](https://github.com/storybookjs/storybook/pull/17647))
|
||||
|
||||
## 6.5.0-alpha.64 (April 18, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
@ -15,7 +15,7 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) |
|
||||
| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) |
|
||||
| babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-blocks.md#argstable)) |
|
||||
| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) |
|
||||
| BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. |
|
||||
| BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) |
|
||||
| build-storybook | Issue, bug, or pull request related to Storybook's production build |
|
||||
@ -24,7 +24,7 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| cli | Issue, bug, or pull request that affects the Storybook's CLI |
|
||||
| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) |
|
||||
| components | Issue, bug, or pull request related to Storybook's internal components |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/workflows/storybook-composition.md) |
|
||||
| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) |
|
||||
| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) |
|
||||
| core | Issue, bug, or pull request related to Storybook's Core |
|
||||
| cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
|
||||
|
||||
96
MIGRATION.md
96
MIGRATION.md
@ -1,7 +1,9 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
|
||||
- [Vue 3 upgrade](#vue-3-upgrade)
|
||||
- [React18 new root API](#react18-new-root-api)
|
||||
- [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
|
||||
- [Deprecated register.js](#deprecated-registerjs)
|
||||
- [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
|
||||
- [Vite builder renamed](#vite-builder-renamed)
|
||||
@ -10,6 +12,7 @@
|
||||
- [CSF3 auto-title improvements](#csf3-auto-title-improvements)
|
||||
- [Auto-title filename case](#auto-title-filename-case)
|
||||
- [Auto-title redundant filename](#auto-title-redundant-filename)
|
||||
- [Auto-title always prefixes](#auto-title-always-prefixes)
|
||||
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
|
||||
- [Automigrate](#automigrate)
|
||||
- [CRA5 upgrade](#cra5-upgrade)
|
||||
@ -200,6 +203,10 @@
|
||||
|
||||
## From version 6.4.x to 6.5.0
|
||||
|
||||
### Vue 3 upgrade
|
||||
|
||||
Storybook 6.5 supports Vue 3 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
|
||||
|
||||
### React18 new root API
|
||||
|
||||
React 18 introduces a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting in 6.5, Storybook for React will auto-detect your react version and use the new root API automatically if you're on React18.
|
||||
@ -212,6 +219,21 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
### Renamed isToolshown to showToolbar
|
||||
|
||||
Storybook's [manager API](docs/addons/addons-api.md) has deprecated the `isToolshown` option (to show/hide the toolbar) and renamed it to `showToolbar` for consistency with other similar UI options.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
// .storybook/manager.js
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
showToolbar: false,
|
||||
});
|
||||
```
|
||||
|
||||
### Deprecated register.js
|
||||
|
||||
In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
|
||||
@ -288,6 +310,19 @@ This might be considered a breaking change. However, we feel justified to releas
|
||||
1. We consider it a bug in the initial auto-title implementation
|
||||
2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it)
|
||||
|
||||
If you want to restore the old titles in the UI, you can customize your sidebar with the following code snippet in `.storybook/manager.js`:
|
||||
|
||||
```js
|
||||
import { addons } from '@storybook/addons';
|
||||
import startCase from 'lodash/startCase';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
#### Auto-title redundant filename
|
||||
|
||||
The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`.
|
||||
@ -301,6 +336,36 @@ Since CSF3 is experimental, we are introducing this technically breaking change
|
||||
export default { title: 'Atoms/Button/Button' };
|
||||
```
|
||||
|
||||
#### Auto-title always prefixes
|
||||
|
||||
When the user provides a `prefix` in their `main.js` `stories` field, it now prefixes all titles to matching stories, whereas in 6.4 and earlier it only prefixed auto-titles.
|
||||
|
||||
Consider the following example:
|
||||
|
||||
```js
|
||||
// main.js
|
||||
module.exports = {
|
||||
stories: [{ directory: '../src', titlePrefix: 'Custom' }]
|
||||
}
|
||||
|
||||
// ../src/NoTitle.stories.js
|
||||
export default { component: Foo };
|
||||
|
||||
// ../src/Title.stories.js
|
||||
export default { component: Bar, title: 'Bar' }
|
||||
```
|
||||
|
||||
In 6.4, the final titles would be:
|
||||
|
||||
- `NoTitle.stories.js` => `Custom/NoTitle`
|
||||
- `Title.stories.js` => `Bar`
|
||||
|
||||
In 6.5, the final titles would be:
|
||||
|
||||
- `NoTitle.stories.js` => `Custom/NoTitle`
|
||||
- `Title.stories.js` => `Custom/Bar`
|
||||
|
||||
<!-- markdown-link-check-disable -->
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Automigrate
|
||||
@ -314,7 +379,9 @@ For example, if you're in a webpack5 project but still use Storybook's default w
|
||||
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`).
|
||||
@ -324,7 +391,9 @@ The automigration suite also runs when you create a new project (`sb init`) or w
|
||||
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
|
||||
|
||||
```
|
||||
|
||||
Or you can do the following steps manually to force Storybook to use webpack 5 for building your project:
|
||||
@ -685,7 +754,29 @@ The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0
|
||||
|
||||
### Webpack 5
|
||||
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so, there are two ways:
|
||||
|
||||
1 - Upgrade command
|
||||
|
||||
If you're upgrading your Storybook version, run this command, which will both upgrade your dependencies but also detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb upgrade
|
||||
```
|
||||
|
||||
2 - Automigrate command
|
||||
|
||||
If you don't want to change your Storybook version but want Storybook to detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb automigrate
|
||||
```
|
||||
|
||||
3 - Manually
|
||||
|
||||
If either methods did not work or you just want to proceed manually, do the following steps:
|
||||
|
||||
Install the dependencies:
|
||||
|
||||
```shell
|
||||
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
|
||||
@ -2153,7 +2244,7 @@ Theming has been rewritten in v5. If you used theming in v4, please consult the
|
||||
|
||||
### Story hierarchy defaults
|
||||
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](https://github.com/storybookjs/deprecated-addons/blob/master/MIGRATION.md#options-addon-deprecated).
|
||||
|
||||
In Storybook 4.x the values defaulted to `null` for both of these options, so that there would be no hierarchy by default.
|
||||
|
||||
@ -2818,3 +2909,4 @@ If you **are** using these addons, it takes two steps to migrate:
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
```
|
||||
<!-- markdown-link-check-enable -->
|
||||
32
README.md
32
README.md
@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c
|
||||
|
||||
<p align="center">
|
||||
View README for:<br/>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
|
||||
</p>
|
||||
|
||||
## Table of contents
|
||||
@ -80,7 +80,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs
|
||||
|
||||
### Examples
|
||||
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/showcase>
|
||||
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
|
||||
|
||||
@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](app/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -81,12 +81,11 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
|
||||
these bugs get addressed.
|
||||
|
||||
For every non-PATCH release, we nominate a small number of bugs that must be
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 6.5 milestone](https://github.com/storybookjs/storybook/milestone/75).
|
||||
|
||||
Adding bugs to the milestone helps people looking for good ways to contribute,
|
||||
or to understand what is blocking the release so they can actually do something
|
||||
about it. Discussion about which bugs are critical happens in the `#maintenance`
|
||||
channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
about it. Discussion about which bugs are critical happens in the [`#maintenance` channel](https://discord.com/channels/486522875931656193/490070912448724992) in our Discord Server
|
||||
|
||||
If you're experiencing a bug, the best way to make sure that it gets attention
|
||||
is to upvote it by adding a "thumbs-up" reaction in Github. This way important
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
| Version | Supported |
|
||||
| ---------- | ------------------ |
|
||||
| 6.3, 6.4 | :white_check_mark: |
|
||||
| Version | Supported |
|
||||
| --------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@ function __setMockFiles(newMockFiles) {
|
||||
const readFile = async (filePath) => mockFiles[filePath];
|
||||
const readFileSync = (filePath = '') => mockFiles[filePath];
|
||||
const existsSync = (filePath) => !!mockFiles[filePath];
|
||||
const readJsonSync = (filePath = '') => JSON.parse(mockFiles[filePath]);
|
||||
const lstatSync = (filePath) => ({
|
||||
isFile: () => !!mockFiles[filePath],
|
||||
});
|
||||
@ -23,6 +24,7 @@ const lstatSync = (filePath) => ({
|
||||
fs.__setMockFiles = __setMockFiles;
|
||||
fs.readFile = readFile;
|
||||
fs.readFileSync = readFileSync;
|
||||
fs.readJsonSync = readJsonSync;
|
||||
fs.existsSync = existsSync;
|
||||
fs.lstatSync = lstatSync;
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ When Axe reports accessibility violations in stories, there are multiple ways to
|
||||
At the Story level, override rules using `parameters.a11y.config.rules`.
|
||||
|
||||
```js
|
||||
export const InputWithoutAutofill = () => <input type="text" autofill="nope" />;
|
||||
export const InputWithoutAutofill = () => <input type="text" autocomplete="nope" />;
|
||||
|
||||
InputWithoutAutofill.parameters = {
|
||||
a11y: {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/channels": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/channels": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -15,11 +15,6 @@ let active = false;
|
||||
// Holds latest story we requested a run
|
||||
let activeStoryId: string | undefined;
|
||||
|
||||
const getElement = () => {
|
||||
const storyRoot = document.getElementById('story-root');
|
||||
return storyRoot ? storyRoot.childNodes : document.getElementById('root');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle A11yContext events.
|
||||
* Because the event are sent without manual check, we split calls
|
||||
@ -41,13 +36,14 @@ const run = async (storyId: string) => {
|
||||
channel.emit(EVENTS.RUNNING);
|
||||
const axe = (await import('axe-core')).default;
|
||||
|
||||
const { element = getElement(), config, options = {} } = input;
|
||||
const { element = '#root', config, options = {} } = input;
|
||||
const htmlElement = document.querySelector(element);
|
||||
axe.reset();
|
||||
if (config) {
|
||||
axe.configure(config);
|
||||
}
|
||||
|
||||
const result = await axe.run(element, options);
|
||||
const result = await axe.run(htmlElement, options);
|
||||
// It's possible that we requested a new run on a different story.
|
||||
// Unfortunately, axe doesn't support a cancel method to abort current run.
|
||||
// We check if the story we run against is still the current one,
|
||||
|
||||
@ -63,6 +63,7 @@ describe('A11YPanel', () => {
|
||||
mockedApi.useStorybookState.mockReset();
|
||||
mockedApi.useAddonState.mockReset();
|
||||
|
||||
mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
|
||||
mockedApi.useChannel.mockReturnValue(jest.fn());
|
||||
mockedApi.useParameter.mockReturnValue({ manual: false });
|
||||
const state: Partial<api.State> = { storyId: 'jest' };
|
||||
|
||||
@ -53,11 +53,13 @@ describe('A11YPanel', () => {
|
||||
beforeEach(() => {
|
||||
mockedApi.useChannel.mockReset();
|
||||
mockedApi.useStorybookState.mockReset();
|
||||
mockedApi.useAddonState.mockReset();
|
||||
|
||||
mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
|
||||
mockedApi.useChannel.mockReturnValue(jest.fn());
|
||||
const state: Partial<api.State> = { storyId };
|
||||
const storyState: Partial<api.State> = { storyId };
|
||||
// Lazy to mock entire state
|
||||
mockedApi.useStorybookState.mockReturnValue(state as any);
|
||||
mockedApi.useStorybookState.mockReturnValue(storyState as any);
|
||||
});
|
||||
|
||||
it('should render children', () => {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { themes, convert } from '@storybook/theming';
|
||||
import { Result } from 'axe-core';
|
||||
import { useChannel, useStorybookState } from '@storybook/api';
|
||||
import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
|
||||
import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
|
||||
import { EVENTS } from '../constants';
|
||||
import { ADDON_ID, EVENTS } from '../constants';
|
||||
|
||||
interface Results {
|
||||
export interface Results {
|
||||
passes: Result[];
|
||||
violations: Result[];
|
||||
incomplete: Result[];
|
||||
@ -52,7 +52,7 @@ const defaultResult = {
|
||||
};
|
||||
|
||||
export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
|
||||
const [results, setResults] = React.useState<Results>(defaultResult);
|
||||
const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
|
||||
const [tab, setTab] = React.useState(0);
|
||||
const [highlighted, setHighlighted] = React.useState<string[]>([]);
|
||||
const { storyId } = useStorybookState();
|
||||
|
||||
69
addons/a11y/src/components/VisionSimulator.test.tsx
Normal file
69
addons/a11y/src/components/VisionSimulator.test.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import { VisionSimulator, baseList } from './VisionSimulator';
|
||||
|
||||
const getOptionByNameAndPercentage = (option: string, percentage: number) =>
|
||||
screen.getByText(
|
||||
(content, element) =>
|
||||
content !== '' &&
|
||||
element.textContent === option &&
|
||||
(percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
|
||||
);
|
||||
|
||||
function ThemedVisionSimulator() {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<VisionSimulator />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
describe('Vision Simulator', () => {
|
||||
it('should render tool button', async () => {
|
||||
// when
|
||||
render(<ThemedVisionSimulator />);
|
||||
|
||||
// then
|
||||
// waitFor because WithTooltip is a lazy component
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
});
|
||||
|
||||
it.skip('should display tooltip on click', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
|
||||
// when
|
||||
userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
|
||||
|
||||
// then
|
||||
await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
|
||||
baseList.forEach(({ name, percentage }) =>
|
||||
expect(getOptionByNameAndPercentage(name, percentage)).toBeInTheDocument()
|
||||
);
|
||||
});
|
||||
|
||||
it.skip('should set filter', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
|
||||
await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
|
||||
|
||||
// when
|
||||
fireEvent.click(screen.getByText('blurred vision'));
|
||||
|
||||
// then
|
||||
// eslint-disable-next-line no-undef
|
||||
const rule = Object.values(document.styleSheets)
|
||||
.filter(({ cssRules }) => cssRules)
|
||||
.map(({ cssRules }) => Object.values(cssRules))
|
||||
.flat()
|
||||
.find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
|
||||
|
||||
expect(rule).toBeDefined();
|
||||
expect(rule.style.filter).toBe('blur(2px)');
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { FunctionComponent, ReactNode, useState } from 'react';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import { Global, styled } from '@storybook/theming';
|
||||
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
|
||||
|
||||
@ -6,32 +6,37 @@ import { Filters } from './ColorFilters';
|
||||
|
||||
const iframeId = 'storybook-preview-iframe';
|
||||
|
||||
const baseList = [
|
||||
'blurred vision',
|
||||
'deuteranomaly',
|
||||
'deuteranopia',
|
||||
'protanomaly',
|
||||
'protanopia',
|
||||
'tritanomaly',
|
||||
'tritanopia',
|
||||
'achromatomaly',
|
||||
'achromatopsia',
|
||||
'grayscale',
|
||||
] as const;
|
||||
interface Option {
|
||||
name: string;
|
||||
percentage?: number;
|
||||
}
|
||||
|
||||
type Filter = typeof baseList[number] | null;
|
||||
export const baseList = [
|
||||
{ name: 'blurred vision', percentage: 22.9 },
|
||||
{ name: 'deuteranomaly', percentage: 2.7 },
|
||||
{ name: 'deuteranopia', percentage: 0.56 },
|
||||
{ name: 'protanomaly', percentage: 0.66 },
|
||||
{ name: 'protanopia', percentage: 0.59 },
|
||||
{ name: 'tritanomaly', percentage: 0.01 },
|
||||
{ name: 'tritanopia', percentage: 0.016 },
|
||||
{ name: 'achromatomaly', percentage: 0.00001 },
|
||||
{ name: 'achromatopsia', percentage: 0.0001 },
|
||||
{ name: 'grayscale' },
|
||||
] as Option[];
|
||||
|
||||
const getFilter = (filter: Filter) => {
|
||||
if (!filter) {
|
||||
type Filter = Option | null;
|
||||
|
||||
const getFilter = (filterName: string) => {
|
||||
if (!filterName) {
|
||||
return 'none';
|
||||
}
|
||||
if (filter === 'blurred vision') {
|
||||
if (filterName === 'blurred vision') {
|
||||
return 'blur(2px)';
|
||||
}
|
||||
if (filter === 'grayscale') {
|
||||
if (filterName === 'grayscale') {
|
||||
return 'grayscale(100%)';
|
||||
}
|
||||
return `url('#${filter}')`;
|
||||
return `url('#${filterName}')`;
|
||||
};
|
||||
|
||||
const Hidden = styled.div(() => ({
|
||||
@ -42,7 +47,7 @@ const Hidden = styled.div(() => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const ColorIcon = styled.span<{ filter: Filter }>(
|
||||
const ColorIcon = styled.span<{ filter: string }>(
|
||||
{
|
||||
background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
|
||||
borderRadius: '1rem',
|
||||
@ -66,6 +71,20 @@ export interface Link {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const Column = styled.span({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
const Title = styled.span({
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
|
||||
const Description = styled.span(({ theme }) => ({
|
||||
fontSize: 11,
|
||||
color: theme.textMutedColor,
|
||||
}));
|
||||
|
||||
const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
|
||||
...(active !== null
|
||||
? [
|
||||
@ -80,27 +99,34 @@ const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...baseList.map((i) => ({
|
||||
id: i,
|
||||
title: i.charAt(0).toUpperCase() + i.slice(1),
|
||||
onClick: () => {
|
||||
set(i);
|
||||
},
|
||||
right: <ColorIcon filter={i} />,
|
||||
active: active === i,
|
||||
})),
|
||||
...baseList.map((i) => {
|
||||
const description = i.percentage !== undefined ? `${i.percentage}% of users` : undefined;
|
||||
return {
|
||||
id: i.name,
|
||||
title: (
|
||||
<Column>
|
||||
<Title>{i.name}</Title>
|
||||
{description && <Description>{description}</Description>}
|
||||
</Column>
|
||||
),
|
||||
onClick: () => {
|
||||
set(i);
|
||||
},
|
||||
right: <ColorIcon filter={i.name} />,
|
||||
active: active === i,
|
||||
};
|
||||
}),
|
||||
];
|
||||
|
||||
export const VisionSimulator: FunctionComponent = () => {
|
||||
export const VisionSimulator = () => {
|
||||
const [filter, setFilter] = useState<Filter>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{filter && (
|
||||
<Global
|
||||
styles={{
|
||||
[`#${iframeId}`]: {
|
||||
filter: getFilter(filter),
|
||||
filter: getFilter(filter.name),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
55
addons/a11y/src/manager.test.tsx
Normal file
55
addons/a11y/src/manager.test.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import { addons } from '@storybook/addons';
|
||||
import * as api from '@storybook/api';
|
||||
import { PANEL_ID } from './constants';
|
||||
import './manager';
|
||||
|
||||
jest.mock('@storybook/api');
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedApi = api as unknown as jest.Mocked<api.API>;
|
||||
mockedApi.getAddonState = jest.fn();
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
const registrationImpl = mockedAddons.register.mock.calls[0][1];
|
||||
|
||||
describe('A11yManager', () => {
|
||||
it('should register the panels', () => {
|
||||
// when
|
||||
registrationImpl(mockedApi);
|
||||
|
||||
// then
|
||||
expect(mockedAddons.add.mock.calls).toHaveLength(2);
|
||||
expect(mockedAddons.add).toHaveBeenCalledWith(PANEL_ID, expect.anything());
|
||||
|
||||
const panel = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel');
|
||||
const tool = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'tool');
|
||||
expect(panel).toBeDefined();
|
||||
expect(tool).toBeDefined();
|
||||
});
|
||||
|
||||
it('should compute title with no issues', () => {
|
||||
// given
|
||||
mockedApi.getAddonState.mockImplementation(() => undefined);
|
||||
registrationImpl(api as unknown as api.API);
|
||||
const title = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel').title as Function;
|
||||
|
||||
// when / then
|
||||
expect(title()).toBe('Accessibility');
|
||||
});
|
||||
|
||||
it('should compute title with issues', () => {
|
||||
// given
|
||||
mockedApi.getAddonState.mockImplementation(() => ({ violations: [{}], incomplete: [{}, {}] }));
|
||||
registrationImpl(mockedApi);
|
||||
const title = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel').title as Function;
|
||||
|
||||
// when / then
|
||||
expect(title()).toBe('Accessibility (3)');
|
||||
});
|
||||
});
|
||||
@ -3,9 +3,9 @@ import { addons, types } from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
import { VisionSimulator } from './components/VisionSimulator';
|
||||
import { A11YPanel } from './components/A11YPanel';
|
||||
import { A11yContextProvider } from './components/A11yContext';
|
||||
import { A11yContextProvider, Results } from './components/A11yContext';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: '',
|
||||
type: types.TOOL,
|
||||
@ -14,7 +14,13 @@ addons.register(ADDON_ID, () => {
|
||||
});
|
||||
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'Accessibility',
|
||||
title() {
|
||||
const addonState: Results = api?.getAddonState(ADDON_ID);
|
||||
const violationsNb = addonState?.violations?.length || 0;
|
||||
const incompleteNb = addonState?.incomplete?.length || 0;
|
||||
const totalNb = violationsNb + incompleteNb;
|
||||
return totalNb !== 0 ? `Accessibility (${totalNb})` : 'Accessibility';
|
||||
},
|
||||
type: types.PANEL,
|
||||
render: ({ active = true, key }) => (
|
||||
<A11yContextProvider key={key} active={active}>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -56,7 +56,7 @@
|
||||
"prop-types": "^15.7.2",
|
||||
"react-inspector": "^5.1.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"telejson": "^5.3.3",
|
||||
"telejson": "^6.0.8",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid-browser": "^3.1.0"
|
||||
@ -80,7 +80,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -48,7 +48,7 @@ If you are somehow tied to knobs or prefer the knobs interface, we are happy to
|
||||
|
||||
### How do I migrate from addon-knobs?
|
||||
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/main/addons/knobs) you should consider migrating to Controls.
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/addon-knobs) you should consider migrating to Controls.
|
||||
|
||||
You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -73,7 +73,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/manager.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -9,7 +9,7 @@ You've read the [Storybook Docs README](../README.md). You're already familiar w
|
||||
|
||||
## Does Docs support framework X?
|
||||
|
||||
Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
|
||||
Docs does not currently support [React Native](https://github.com/storybookjs/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
|
||||
|
||||
## How does Docs interact with existing addons?
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -59,20 +59,20 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/mdx1-csf": "canary",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/postinstall": "6.5.0-alpha.64",
|
||||
"@storybook/preview-web": "6.5.0-alpha.64",
|
||||
"@storybook/source-loader": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/mdx1-csf": "^0.0.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/postinstall": "6.5.0-rc.1",
|
||||
"@storybook/preview-web": "6.5.0-rc.1",
|
||||
"@storybook/source-loader": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
@ -86,11 +86,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/mdx2-csf": "canary",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"@types/util-deprecate": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/mdx2-csf": "*",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
@ -108,7 +108,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -11,6 +11,7 @@ import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { SourceContext, SourceContextProps } from './SourceContainer';
|
||||
import { getSourceProps, SourceState } from './Source';
|
||||
import { useStories } from './useStory';
|
||||
import { CURRENT_SELECTION } from './types';
|
||||
|
||||
export { SourceState };
|
||||
|
||||
@ -53,7 +54,10 @@ const getPreviewProps = (
|
||||
);
|
||||
const sourceProps = getSourceProps({ ids: targetIds }, docsContext, sourceContext);
|
||||
if (!sourceState) sourceState = sourceProps.state;
|
||||
const stories = useStories(targetIds, docsContext);
|
||||
const storyIds = targetIds.map((targetId) =>
|
||||
targetId === CURRENT_SELECTION ? docsContext.id : targetId
|
||||
);
|
||||
const stories = useStories(storyIds, docsContext);
|
||||
isLoading = stories.some((s) => !s);
|
||||
|
||||
return {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,25 +39,25 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.5.0-alpha.64",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.64",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.64",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.64",
|
||||
"@storybook/addon-measure": "6.5.0-alpha.64",
|
||||
"@storybook/addon-outline": "6.5.0-alpha.64",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.64",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/addon-actions": "6.5.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.5.0-rc.1",
|
||||
"@storybook/addon-controls": "6.5.0-rc.1",
|
||||
"@storybook/addon-docs": "6.5.0-rc.1",
|
||||
"@storybook/addon-measure": "6.5.0-rc.1",
|
||||
"@storybook/addon-outline": "6.5.0-rc.1",
|
||||
"@storybook/addon-toolbars": "6.5.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.5.0-rc.1",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.5.0-alpha.64",
|
||||
"@storybook/vue": "6.5.0-rc.1",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
@ -120,6 +120,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -42,15 +42,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/instrumenter": "6.5.0-alpha.64",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/instrumenter": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
@ -59,7 +59,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"formik": "^2.2.9"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
|
||||
@ -4,7 +4,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { getCall } from './mocks';
|
||||
import { getCalls, getInteractions } from './mocks';
|
||||
import { AddonPanelPure } from './Panel';
|
||||
import SubnavStories from './components/Subnav/Subnav.stories';
|
||||
|
||||
@ -20,6 +20,8 @@ const StyledWrapper = styled.div(({ theme }) => ({
|
||||
overflow: 'auto',
|
||||
}));
|
||||
|
||||
const interactions = getInteractions(CallStates.DONE);
|
||||
|
||||
export default {
|
||||
title: 'Addons/Interactions/Panel',
|
||||
component: AddonPanelPure,
|
||||
@ -34,10 +36,10 @@ export default {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
calls: new Map(),
|
||||
calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
|
||||
controls: SubnavStories.args.controls,
|
||||
controlStates: SubnavStories.args.controlStates,
|
||||
interactions: [getCall(CallStates.DONE)],
|
||||
interactions,
|
||||
fileName: 'addon-interactions.stories.tsx',
|
||||
hasException: false,
|
||||
isPlaying: false,
|
||||
@ -52,14 +54,14 @@ type Story = ComponentStoryObj<typeof AddonPanelPure>;
|
||||
|
||||
export const Passing: Story = {
|
||||
args: {
|
||||
interactions: [getCall(CallStates.DONE)],
|
||||
interactions: getInteractions(CallStates.DONE),
|
||||
},
|
||||
};
|
||||
|
||||
export const Paused: Story = {
|
||||
args: {
|
||||
isPlaying: true,
|
||||
interactions: [getCall(CallStates.WAITING)],
|
||||
interactions: getInteractions(CallStates.WAITING),
|
||||
controlStates: {
|
||||
debugger: true,
|
||||
start: false,
|
||||
@ -68,20 +70,21 @@ export const Paused: Story = {
|
||||
next: true,
|
||||
end: true,
|
||||
},
|
||||
pausedAt: interactions[interactions.length - 1].id,
|
||||
},
|
||||
};
|
||||
|
||||
export const Playing: Story = {
|
||||
args: {
|
||||
isPlaying: true,
|
||||
interactions: [getCall(CallStates.ACTIVE)],
|
||||
interactions: getInteractions(CallStates.ACTIVE),
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
hasException: true,
|
||||
interactions: [getCall(CallStates.ERROR)],
|
||||
interactions: getInteractions(CallStates.ERROR),
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -28,10 +28,16 @@ interface InteractionsPanelProps {
|
||||
active: boolean;
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
interactions: (Call & { status?: CallStates })[];
|
||||
interactions: (Call & {
|
||||
status?: CallStates;
|
||||
childCallIds: Call['id'][];
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
})[];
|
||||
fileName?: string;
|
||||
hasException?: boolean;
|
||||
isPlaying?: boolean;
|
||||
pausedAt?: Call['id'];
|
||||
calls: Map<string, any>;
|
||||
endRef?: React.Ref<HTMLDivElement>;
|
||||
onScrollToEnd?: () => void;
|
||||
@ -66,6 +72,7 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
fileName,
|
||||
hasException,
|
||||
isPlaying,
|
||||
pausedAt,
|
||||
onScrollToEnd,
|
||||
endRef,
|
||||
isRerunAnimating,
|
||||
@ -87,15 +94,21 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
setIsRerunAnimating={setIsRerunAnimating}
|
||||
/>
|
||||
)}
|
||||
{interactions.map((call) => (
|
||||
<Interaction
|
||||
key={call.id}
|
||||
call={call}
|
||||
callsById={calls}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
/>
|
||||
))}
|
||||
<div>
|
||||
{interactions.map((call) => (
|
||||
<Interaction
|
||||
key={call.id}
|
||||
call={call}
|
||||
callsById={calls}
|
||||
controls={controls}
|
||||
controlStates={controlStates}
|
||||
childCallIds={call.childCallIds}
|
||||
isCollapsed={call.isCollapsed}
|
||||
toggleCollapsed={call.toggleCollapsed}
|
||||
pausedAt={pausedAt}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div ref={endRef} />
|
||||
{!isPlaying && interactions.length === 0 && (
|
||||
<Placeholder>
|
||||
@ -116,17 +129,17 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
|
||||
export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
const [storyId, setStoryId] = React.useState<StoryId>();
|
||||
const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
|
||||
const [pausedAt, setPausedAt] = React.useState<Call['id']>();
|
||||
const [isPlaying, setPlaying] = React.useState(false);
|
||||
const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
|
||||
const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
|
||||
const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
|
||||
const [log, setLog] = React.useState<LogItem[]>([]);
|
||||
|
||||
// Calls are tracked in a ref so we don't needlessly rerender.
|
||||
const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
|
||||
const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
|
||||
|
||||
const [log, setLog] = React.useState<LogItem[]>([]);
|
||||
const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status }));
|
||||
|
||||
const endRef = React.useRef();
|
||||
React.useEffect(() => {
|
||||
let observer: IntersectionObserver;
|
||||
@ -146,10 +159,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
[EVENTS.SYNC]: (payload) => {
|
||||
setControlStates(payload.controlStates);
|
||||
setLog(payload.logItems);
|
||||
setPausedAt(payload.pausedAt);
|
||||
},
|
||||
[STORY_RENDER_PHASE_CHANGED]: (event) => {
|
||||
setStoryId(event.storyId);
|
||||
setPlaying(event.newPhase === 'playing');
|
||||
setPausedAt(undefined);
|
||||
},
|
||||
},
|
||||
[]
|
||||
@ -177,6 +192,38 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
const showStatus = log.length > 0 && !isPlaying;
|
||||
const hasException = log.some((item) => item.status === CallStates.ERROR);
|
||||
|
||||
const interactions = React.useMemo(() => {
|
||||
const callsById = new Map<Call['id'], Call>();
|
||||
const childCallMap = new Map<Call['id'], Call['id'][]>();
|
||||
return log
|
||||
.filter(({ callId, parentId }) => {
|
||||
if (!parentId) return true;
|
||||
childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
|
||||
return !collapsed.has(parentId);
|
||||
})
|
||||
.map(({ callId, status }) => ({ ...calls.current.get(callId), status } as Call))
|
||||
.map((call) => {
|
||||
const status =
|
||||
call.status === CallStates.ERROR &&
|
||||
callsById.get(call.parentId)?.status === CallStates.ACTIVE
|
||||
? CallStates.ACTIVE
|
||||
: call.status;
|
||||
callsById.set(call.id, { ...call, status });
|
||||
return {
|
||||
...call,
|
||||
status,
|
||||
childCallIds: childCallMap.get(call.id),
|
||||
isCollapsed: collapsed.has(call.id),
|
||||
toggleCollapsed: () =>
|
||||
setCollapsed((ids) => {
|
||||
if (ids.has(call.id)) ids.delete(call.id);
|
||||
else ids.add(call.id);
|
||||
return new Set(ids);
|
||||
}),
|
||||
};
|
||||
});
|
||||
}, [log, collapsed]);
|
||||
|
||||
return (
|
||||
<React.Fragment key="interactions">
|
||||
<TabStatus>
|
||||
@ -191,6 +238,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
|
||||
fileName={fileName}
|
||||
hasException={hasException}
|
||||
isPlaying={isPlaying}
|
||||
pausedAt={pausedAt}
|
||||
endRef={endRef}
|
||||
onScrollToEnd={scrollTarget && scrollToTarget}
|
||||
isRerunAnimating={isRerunAnimating}
|
||||
|
||||
@ -35,6 +35,12 @@ export const Demo: CSF2Story = (args) => (
|
||||
Demo.play = async ({ args, canvasElement }) => {
|
||||
await userEvent.click(within(canvasElement).getByRole('button'));
|
||||
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
|
||||
await expect([{ name: 'John', age: 42 }]).toEqual(
|
||||
expect.arrayContaining([
|
||||
expect.objectContaining({ name: 'John' }),
|
||||
expect.objectContaining({ age: 42 }),
|
||||
])
|
||||
);
|
||||
};
|
||||
|
||||
export const FindBy: CSF2Story = (args) => {
|
||||
@ -131,7 +137,7 @@ export const StandardEmailFailed: CSF3Story = {
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
|
||||
await canvas.findByText('Please enter a correctly formatted email address');
|
||||
expect(args.onSubmit).not.toHaveBeenCalled();
|
||||
await expect(args.onSubmit).not.toHaveBeenCalled();
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { getCall } from '../../mocks';
|
||||
import { getCalls } from '../../mocks';
|
||||
|
||||
import { Interaction } from './Interaction';
|
||||
import SubnavStories from '../Subnav/Subnav.stories';
|
||||
@ -13,7 +13,7 @@ export default {
|
||||
title: 'Addons/Interactions/Interaction',
|
||||
component: Interaction,
|
||||
args: {
|
||||
callsById: new Map(),
|
||||
callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
|
||||
controls: SubnavStories.args.controls,
|
||||
controlStates: SubnavStories.args.controlStates,
|
||||
},
|
||||
@ -21,25 +21,31 @@ export default {
|
||||
|
||||
export const Active: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.ACTIVE),
|
||||
call: getCalls(CallStates.ACTIVE).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Waiting: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.WAITING),
|
||||
call: getCalls(CallStates.WAITING).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.ERROR),
|
||||
call: getCalls(CallStates.ERROR).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const Done: Story = {
|
||||
args: {
|
||||
call: getCall(CallStates.DONE),
|
||||
call: getCalls(CallStates.DONE).slice(-1)[0],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithParent: Story = {
|
||||
args: {
|
||||
call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' },
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
|
||||
import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
|
||||
import { styled, typography } from '@storybook/theming';
|
||||
import { transparentize } from 'polished';
|
||||
@ -15,23 +16,55 @@ const MethodCallWrapper = styled.div(() => ({
|
||||
inlineSize: 'calc( 100% - 40px )',
|
||||
}));
|
||||
|
||||
const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{
|
||||
call: Call;
|
||||
}>(({ theme, call }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderBottom: `1px solid ${theme.appBorderColor}`,
|
||||
fontFamily: typography.fonts.base,
|
||||
fontSize: 13,
|
||||
...(call.status === CallStates.ERROR && {
|
||||
backgroundColor:
|
||||
theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
|
||||
const RowContainer = styled('div', {
|
||||
shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
|
||||
})<{ call: Call; pausedAt: Call['id'] }>(
|
||||
({ theme, call }) => ({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderBottom: `1px solid ${theme.appBorderColor}`,
|
||||
fontFamily: typography.fonts.base,
|
||||
fontSize: 13,
|
||||
...(call.status === CallStates.ERROR && {
|
||||
backgroundColor:
|
||||
theme.base === 'dark'
|
||||
? transparentize(0.93, theme.color.negative)
|
||||
: theme.background.warning,
|
||||
}),
|
||||
paddingLeft: call.parentId ? 20 : 0,
|
||||
}),
|
||||
({ theme, call, pausedAt }) =>
|
||||
pausedAt === call.id && {
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: -5,
|
||||
zIndex: 1,
|
||||
borderTop: '4.5px solid transparent',
|
||||
borderLeft: `7px solid ${theme.color.warning}`,
|
||||
borderBottom: '4.5px solid transparent',
|
||||
},
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: -1,
|
||||
zIndex: 1,
|
||||
width: '100%',
|
||||
borderTop: `1.5px solid ${theme.color.warning}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const RowHeader = styled.div<{ disabled: boolean }>(({ theme, disabled }) => ({
|
||||
display: 'flex',
|
||||
'&:hover': disabled ? {} : { background: theme.background.hoverable },
|
||||
}));
|
||||
|
||||
const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
|
||||
>(({ theme, disabled, call }) => ({
|
||||
flex: 1,
|
||||
display: 'grid',
|
||||
background: 'none',
|
||||
border: 0,
|
||||
@ -42,7 +75,6 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
|
||||
padding: '8px 15px',
|
||||
textAlign: 'start',
|
||||
cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
|
||||
'&:hover': disabled ? {} : { background: theme.background.hoverable },
|
||||
'&:focus-visible': {
|
||||
outline: 0,
|
||||
boxShadow: `inset 3px 0 0 0 ${
|
||||
@ -55,45 +87,101 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
|
||||
},
|
||||
}));
|
||||
|
||||
const RowMessage = styled('pre')({
|
||||
margin: 0,
|
||||
padding: '8px 10px 8px 30px',
|
||||
const RowActions = styled.div(({ theme }) => ({
|
||||
padding: 6,
|
||||
}));
|
||||
|
||||
export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
|
||||
color: theme.color.mediumdark,
|
||||
margin: '0 3px',
|
||||
}));
|
||||
|
||||
const Note = styled(TooltipNote)(({ theme }) => ({
|
||||
fontFamily: theme.typography.fonts.base,
|
||||
}));
|
||||
|
||||
const RowMessage = styled('div')(({ theme }) => ({
|
||||
padding: '8px 10px 8px 36px',
|
||||
fontSize: typography.size.s1,
|
||||
});
|
||||
pre: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
},
|
||||
p: {
|
||||
color: theme.color.dark,
|
||||
},
|
||||
}));
|
||||
|
||||
const Exception = ({ exception }: { exception: Call['exception'] }) => {
|
||||
if (exception.message.startsWith('expect(')) {
|
||||
return <MatcherResult {...exception} />;
|
||||
}
|
||||
const paragraphs = exception.message.split('\n\n');
|
||||
const more = paragraphs.length > 1;
|
||||
return (
|
||||
<RowMessage>
|
||||
<pre>{paragraphs[0]}</pre>
|
||||
{more && <p>See the full stack trace in the browser console.</p>}
|
||||
</RowMessage>
|
||||
);
|
||||
};
|
||||
|
||||
export const Interaction = ({
|
||||
call,
|
||||
callsById,
|
||||
controls,
|
||||
controlStates,
|
||||
childCallIds,
|
||||
isCollapsed,
|
||||
toggleCollapsed,
|
||||
pausedAt,
|
||||
}: {
|
||||
call: Call;
|
||||
callsById: Map<Call['id'], Call>;
|
||||
controls: Controls;
|
||||
controlStates: ControlStates;
|
||||
childCallIds?: Call['id'][];
|
||||
isCollapsed: boolean;
|
||||
toggleCollapsed: () => void;
|
||||
pausedAt?: Call['id'];
|
||||
}) => {
|
||||
const [isHovered, setIsHovered] = React.useState(false);
|
||||
return (
|
||||
<RowContainer call={call}>
|
||||
<RowLabel
|
||||
call={call}
|
||||
onClick={() => controls.goto(call.id)}
|
||||
disabled={!controlStates.goto}
|
||||
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
|
||||
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
|
||||
>
|
||||
<StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
|
||||
<MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
|
||||
<MethodCall call={call} callsById={callsById} />
|
||||
</MethodCallWrapper>
|
||||
</RowLabel>
|
||||
{call.status === CallStates.ERROR &&
|
||||
call.exception &&
|
||||
(call.exception.message.startsWith('expect(') ? (
|
||||
<MatcherResult {...call.exception} />
|
||||
) : (
|
||||
<RowMessage>{call.exception.message}</RowMessage>
|
||||
))}
|
||||
<RowContainer call={call} pausedAt={pausedAt}>
|
||||
<RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}>
|
||||
<RowLabel
|
||||
call={call}
|
||||
onClick={() => controls.goto(call.id)}
|
||||
disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
|
||||
onMouseEnter={() => controlStates.goto && setIsHovered(true)}
|
||||
onMouseLeave={() => controlStates.goto && setIsHovered(false)}
|
||||
>
|
||||
<StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
|
||||
<MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
|
||||
<MethodCall call={call} callsById={callsById} />
|
||||
</MethodCallWrapper>
|
||||
</RowLabel>
|
||||
<RowActions>
|
||||
{childCallIds?.length > 0 && (
|
||||
<WithTooltip
|
||||
hasChrome={false}
|
||||
tooltip={
|
||||
<Note
|
||||
note={`${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<StyledIconButton containsIcon onClick={toggleCollapsed}>
|
||||
<Icons icon="listunordered" />
|
||||
</StyledIconButton>
|
||||
</WithTooltip>
|
||||
)}
|
||||
</RowActions>
|
||||
</RowHeader>
|
||||
|
||||
{call.status === CallStates.ERROR && call.exception?.callId === call.id && (
|
||||
<Exception exception={call.exception} />
|
||||
)}
|
||||
</RowContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -50,7 +50,7 @@ export const MatcherResult = ({ message }: { message: string }) => {
|
||||
<pre
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: '8px 10px 8px 30px',
|
||||
padding: '8px 10px 8px 36px',
|
||||
fontSize: typography.size.s1,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -27,7 +27,6 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
class FooBar {}
|
||||
export const Args = () => (
|
||||
<div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
|
||||
<Node value={null} />
|
||||
@ -56,37 +55,49 @@ export const Args = () => (
|
||||
}}
|
||||
showObjectInspector
|
||||
/>
|
||||
<Node value={new FooBar()} />
|
||||
<Node value={function goFaster() {}} />
|
||||
<Node value={{ __class__: { name: 'FooBar' } }} />
|
||||
<Node value={{ __function__: { name: 'goFaster' } }} />
|
||||
<Node value={{ __element__: { localName: 'hr' } }} />
|
||||
<Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
|
||||
<Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
|
||||
<Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
|
||||
<Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
|
||||
<Node value={new Date(Date.UTC(2012, 11, 20, 0, 0, 0))} />
|
||||
<Node value={new Date(1600000000000)} />
|
||||
<Node value={new Date(1600000000123)} />
|
||||
<Node value={new EvalError()} />
|
||||
<Node value={new SyntaxError("Can't do that")} />
|
||||
<Node value={new TypeError("Cannot read property 'foo' of undefined")} />
|
||||
<Node value={new ReferenceError('Invalid left-hand side in assignment')} />
|
||||
<Node
|
||||
value={
|
||||
new Error(
|
||||
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource."
|
||||
)
|
||||
}
|
||||
value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
|
||||
/>
|
||||
<Node value={/hello/i} />
|
||||
<Node value={new RegExp(`src(.*)\\.js$`)} />
|
||||
{/* eslint-disable-next-line symbol-description */}
|
||||
<Node value={Symbol()} />
|
||||
<Node value={Symbol('Hello world')} />
|
||||
<Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
|
||||
<Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
|
||||
<Node value={{ __error__: { name: 'EvalError', message: '' } }} />
|
||||
<Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
|
||||
<Node
|
||||
value={{
|
||||
__error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
|
||||
}}
|
||||
/>
|
||||
<Node
|
||||
value={{
|
||||
__error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
|
||||
}}
|
||||
/>
|
||||
<Node
|
||||
value={{
|
||||
__error__: {
|
||||
name: 'Error',
|
||||
message:
|
||||
"XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
|
||||
<Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
|
||||
<Node value={{ __symbol__: { description: '' } }} />
|
||||
<Node value={{ __symbol__: { description: 'Hello world' } }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const calls: Call[] = [
|
||||
{
|
||||
cursor: 0,
|
||||
id: '1',
|
||||
path: ['screen'],
|
||||
method: 'getByText',
|
||||
@ -96,6 +107,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 1,
|
||||
id: '2',
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
@ -105,6 +117,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 2,
|
||||
id: '3',
|
||||
path: [],
|
||||
method: 'expect',
|
||||
@ -114,6 +127,7 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 3,
|
||||
id: '4',
|
||||
path: [{ __callId__: '3' }, 'not'],
|
||||
method: 'toBe',
|
||||
@ -123,15 +137,17 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 4,
|
||||
id: '5',
|
||||
path: ['jest'],
|
||||
method: 'fn',
|
||||
storyId: 'kind--story',
|
||||
args: [function actionHandler() {}],
|
||||
args: [{ __function__: { name: 'actionHandler' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 5,
|
||||
id: '6',
|
||||
path: [],
|
||||
method: 'expect',
|
||||
@ -141,20 +157,28 @@ const calls: Call[] = [
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 6,
|
||||
id: '7',
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
storyId: 'kind--story',
|
||||
args: [/hello/i],
|
||||
args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
cursor: 7,
|
||||
id: '8',
|
||||
path: [{ __callId__: '6' }, 'not'],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
storyId: 'kind--story',
|
||||
args: [{ __callId__: '7' }, new Error("Cannot read property 'foo' of undefined")],
|
||||
args: [
|
||||
{ __callId__: '7' },
|
||||
[
|
||||
{ __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
|
||||
{ __symbol__: { description: 'Hello world' } },
|
||||
],
|
||||
],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
},
|
||||
|
||||
@ -111,32 +111,34 @@ export const Node = ({
|
||||
return <NullNode {...props} />;
|
||||
case value === undefined:
|
||||
return <UndefinedNode {...props} />;
|
||||
case Array.isArray(value):
|
||||
return <ArrayNode {...props} value={value} callsById={callsById} />;
|
||||
case typeof value === 'string':
|
||||
return <StringNode value={value} {...props} />;
|
||||
return <StringNode {...props} value={value} />;
|
||||
case typeof value === 'number':
|
||||
return <NumberNode value={value} {...props} />;
|
||||
return <NumberNode {...props} value={value} />;
|
||||
case typeof value === 'boolean':
|
||||
return <BooleanNode value={value} {...props} />;
|
||||
case typeof value === 'function':
|
||||
return <FunctionNode value={value} {...props} />;
|
||||
case value instanceof Array:
|
||||
return <ArrayNode value={value} {...props} />;
|
||||
case value instanceof Date:
|
||||
return <DateNode value={value} {...props} />;
|
||||
case value instanceof Error:
|
||||
return <ErrorNode value={value} {...props} />;
|
||||
case value instanceof RegExp:
|
||||
return <RegExpNode value={value} {...props} />;
|
||||
return <BooleanNode {...props} value={value} />;
|
||||
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
case Object.prototype.hasOwnProperty.call(value, '__date__'):
|
||||
return <DateNode {...props} {...value.__date__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__error__'):
|
||||
return <ErrorNode {...props} {...value.__error__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
|
||||
return <RegExpNode {...props} {...value.__regexp__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__function__'):
|
||||
return <FunctionNode {...props} {...value.__function__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
|
||||
return <SymbolNode {...props} {...value.__symbol__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__element__'):
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return <ElementNode value={value.__element__} {...props} />;
|
||||
return <ElementNode {...props} {...value.__element__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__class__'):
|
||||
return <ClassNode {...props} {...value.__class__} />;
|
||||
case Object.prototype.hasOwnProperty.call(value, '__callId__'):
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
|
||||
case typeof value === 'object' &&
|
||||
value.constructor?.name &&
|
||||
value.constructor?.name !== 'Object':
|
||||
return <ClassNode value={value} {...props} />;
|
||||
/* eslint-enable no-underscore-dangle */
|
||||
|
||||
case Object.prototype.toString.call(value) === '[object Object]':
|
||||
return <ObjectNode value={value} showInspector={showObjectInspector} {...props} />;
|
||||
default:
|
||||
@ -189,12 +191,22 @@ export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: boolean }) => {
|
||||
export const ArrayNode = ({
|
||||
value,
|
||||
nested = false,
|
||||
callsById,
|
||||
}: {
|
||||
value: any[];
|
||||
nested?: boolean;
|
||||
callsById?: Map<Call['id'], Call>;
|
||||
}) => {
|
||||
const colors = useThemeColors();
|
||||
if (nested) {
|
||||
return <span style={{ color: colors.base }}>[…]</span>;
|
||||
}
|
||||
const nodes = value.slice(0, 3).map((v) => <Node key={v} value={v} nested />);
|
||||
const nodes = value
|
||||
.slice(0, 3)
|
||||
.map((v) => <Node key={JSON.stringify(v)} value={v} nested callsById={callsById} />);
|
||||
const nodelist = interleave(nodes, <span>, </span>);
|
||||
if (value.length <= 3) {
|
||||
return <span style={{ color: colors.base }}>[{nodelist}]</span>;
|
||||
@ -263,18 +275,27 @@ export const ObjectNode = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const ClassNode = ({ value }: { value: Record<string, any> }) => {
|
||||
export const ClassNode = ({ name }: { name: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return <span style={{ color: colors.instance }}>{value.constructor.name}</span>;
|
||||
return <span style={{ color: colors.instance }}>{name}</span>;
|
||||
};
|
||||
|
||||
export const FunctionNode = ({ value }: { value: Function }) => {
|
||||
export const FunctionNode = ({ name }: { name: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return <span style={{ color: colors.function }}>{value.name || 'anonymous'}</span>;
|
||||
return name ? (
|
||||
<span style={{ color: colors.function }}>{name}</span>
|
||||
) : (
|
||||
<span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
|
||||
const { prefix, localName, id, classNames = [], innerText } = value;
|
||||
export const ElementNode = ({
|
||||
prefix,
|
||||
localName,
|
||||
id,
|
||||
classNames = [],
|
||||
innerText,
|
||||
}: ElementRef['__element__']) => {
|
||||
const name = prefix ? `${prefix}:${localName}` : localName;
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
@ -309,8 +330,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
|
||||
);
|
||||
};
|
||||
|
||||
export const DateNode = ({ value }: { value: Date }) => {
|
||||
const [date, time, ms] = value.toISOString().split(/[T.Z]/);
|
||||
export const DateNode = ({ value }: { value: string }) => {
|
||||
const [date, time, ms] = value.split(/[T.Z]/);
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.date }}>
|
||||
@ -323,42 +344,36 @@ export const DateNode = ({ value }: { value: Date }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const ErrorNode = ({ value }: { value: Error }) => {
|
||||
export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ color: colors.error.name }}>
|
||||
{value.name}
|
||||
{value.message && ': '}
|
||||
{value.message && (
|
||||
<span
|
||||
style={{ color: colors.error.message }}
|
||||
title={value.message.length > 50 ? value.message : ''}
|
||||
>
|
||||
{ellipsize(value.message, 50)}
|
||||
{name}
|
||||
{message && ': '}
|
||||
{message && (
|
||||
<span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
|
||||
{ellipsize(message, 50)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegExpNode = ({ value }: { value: RegExp }) => {
|
||||
export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
|
||||
/<span style={{ color: colors.regex.source }}>{value.source}</span>/{value.flags}
|
||||
/<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const SymbolNode = ({ value }: { value: symbol }) => {
|
||||
export const SymbolNode = ({ description }: { description: string }) => {
|
||||
const colors = useThemeColors();
|
||||
return (
|
||||
<span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
|
||||
Symbol(
|
||||
{value.description && (
|
||||
<span style={{ color: colors.meta }}>{JSON.stringify(value.description)}</span>
|
||||
)}
|
||||
)
|
||||
{description && <span style={{ color: colors.meta }}>"{description}"</span>})
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@ -12,6 +12,7 @@ export default {
|
||||
goto: action('goto'),
|
||||
next: action('next'),
|
||||
end: action('end'),
|
||||
rerun: action('rerun'),
|
||||
},
|
||||
controlStates: {
|
||||
debugger: true,
|
||||
|
||||
@ -1,31 +1,122 @@
|
||||
import { CallStates, Call } from '@storybook/instrumenter';
|
||||
|
||||
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',
|
||||
args: [
|
||||
{
|
||||
__callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
|
||||
retain: false,
|
||||
},
|
||||
{
|
||||
target: {
|
||||
value: 'michael@chromatic.com',
|
||||
},
|
||||
},
|
||||
],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status,
|
||||
};
|
||||
export const getCalls = (finalStatus: CallStates) => {
|
||||
const calls: Call[] = [
|
||||
{
|
||||
id: 'story--id [3] within',
|
||||
storyId: 'story--id',
|
||||
cursor: 3,
|
||||
path: [],
|
||||
method: 'within',
|
||||
args: [{ __element__: { localName: 'div', id: 'root' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [4] findByText',
|
||||
storyId: 'story--id',
|
||||
cursor: 4,
|
||||
path: [{ __callId__: 'story--id [3] within' }],
|
||||
method: 'findByText',
|
||||
args: ['Click'],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [5] click',
|
||||
storyId: 'story--id',
|
||||
cursor: 5,
|
||||
path: ['userEvent'],
|
||||
method: 'click',
|
||||
args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 6,
|
||||
path: [],
|
||||
method: 'waitFor',
|
||||
args: [{ __function__: { name: '' } }],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [0] expect',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 1,
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleSubmit' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [1] stringMatching',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 2,
|
||||
path: ['expect'],
|
||||
method: 'stringMatching',
|
||||
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
|
||||
parentId: 'story--id [6] waitFor',
|
||||
storyId: 'story--id',
|
||||
cursor: 3,
|
||||
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
|
||||
method: 'toHaveBeenCalledWith',
|
||||
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [7] expect',
|
||||
storyId: 'story--id',
|
||||
cursor: 7,
|
||||
path: [],
|
||||
method: 'expect',
|
||||
args: [{ __function__: { name: 'handleReset' } }],
|
||||
interceptable: false,
|
||||
retain: false,
|
||||
status: CallStates.DONE,
|
||||
},
|
||||
{
|
||||
id: 'story--id [8] toHaveBeenCalled',
|
||||
storyId: 'story--id',
|
||||
cursor: 8,
|
||||
path: [{ __callId__: 'story--id [7] expect' }, 'not'],
|
||||
method: 'toHaveBeenCalled',
|
||||
args: [],
|
||||
interceptable: true,
|
||||
retain: false,
|
||||
status: finalStatus,
|
||||
},
|
||||
];
|
||||
|
||||
const overrides = CallStates.ERROR
|
||||
? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
|
||||
: {};
|
||||
if (finalStatus === CallStates.ERROR) {
|
||||
calls[calls.length - 1].exception = {
|
||||
name: 'Error',
|
||||
stack: '',
|
||||
message: 'Oops!',
|
||||
callId: calls[calls.length - 1].id,
|
||||
};
|
||||
}
|
||||
|
||||
return { ...defaultData, ...overrides };
|
||||
return calls;
|
||||
};
|
||||
|
||||
export const getInteractions = (finalStatus: CallStates) =>
|
||||
getCalls(finalStatus).filter((call) => call.interceptable);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,12 +47,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/router": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/router": "6.5.0-rc.1",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,12 +44,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
@ -71,7 +71,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -47,12 +47,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -66,7 +66,7 @@ If you still need to configure jest you can use the resources mentioned below:
|
||||
|
||||
**NOTE**: if you are using Storybook 5.3's `main.js` to list story files, this is no longer needed.
|
||||
|
||||
Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://storybook.js.org/docs/react/writing-stories/loading-stories).
|
||||
Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/basics/writing-stories/index.md#loading-stories).
|
||||
|
||||
1. If you're using the `storiesOf` API, you can integrate it this way:
|
||||
|
||||
@ -470,7 +470,7 @@ Whenever you change your data requirements by adding (and rendering) or (acciden
|
||||
|
||||
## Using a custom directory
|
||||
|
||||
Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/workflows/snapshot-testing).
|
||||
Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/writing-tests/snapshot-testing).
|
||||
|
||||
## Options
|
||||
|
||||
@ -654,7 +654,7 @@ This option needs to be set if either:
|
||||
|
||||
### `serializer` (deprecated)
|
||||
|
||||
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](`snapshotSerializers`) which should be used instead.
|
||||
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](#snapshotserializers) which should be used instead.
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-client": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/client-api": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-client": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -70,11 +70,11 @@
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.64",
|
||||
"@storybook/angular": "6.5.0-alpha.64",
|
||||
"@storybook/react": "6.5.0-alpha.64",
|
||||
"@storybook/vue": "6.5.0-alpha.64",
|
||||
"@storybook/vue3": "6.5.0-alpha.64",
|
||||
"@storybook/addon-docs": "6.5.0-rc.1",
|
||||
"@storybook/angular": "6.5.0-rc.1",
|
||||
"@storybook/react": "6.5.0-rc.1",
|
||||
"@storybook/vue": "6.5.0-rc.1",
|
||||
"@storybook/vue3": "6.5.0-rc.1",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -151,7 +151,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -8,13 +8,13 @@ Add the following modules into your app.
|
||||
npm install @storybook/addon-storyshots-puppeteer puppeteer --save-dev
|
||||
```
|
||||
|
||||
⚠️ As of Storybook 5.3 `puppeteer` is no more included in addon dependencies and must be added to your project directly.
|
||||
⚠️ As of Storybook 5.3 `puppeteer` is no longer included in the addon dependencies and must be added to your project directly.
|
||||
|
||||
## Configure Storyshots for Puppeteer tests
|
||||
|
||||
⚠️ **React-native** is **not supported** by this test function.
|
||||
|
||||
When willing to run Puppeteer tests for your stories, you have two options:
|
||||
When running Puppeteer tests for your stories, you have two options:
|
||||
|
||||
- Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`)
|
||||
- Have a static build of the storybook (for instance, using `npm run build-storybook`)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,19 +41,20 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@types/puppeteer": "^5.4.0",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.64",
|
||||
"@storybook/addon-storyshots": "6.5.0-rc.1",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +65,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5"
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,18 +41,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/router": "6.5.0-alpha.64",
|
||||
"@storybook/source-loader": "6.5.0-alpha.64",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/router": "6.5.0-rc.1",
|
||||
"@storybook/source-loader": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.4.5",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -74,7 +74,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -68,7 +68,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/manager.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -3,7 +3,7 @@ import { useGlobals } from '@storybook/api';
|
||||
import { WithTooltip, TooltipLinkList } from '@storybook/components';
|
||||
import { ToolbarMenuButton } from './ToolbarMenuButton';
|
||||
import { withKeyboardCycle, WithKeyboardCycleProps } from '../hoc/withKeyboardCycle';
|
||||
import { getSelectedIcon } from '../utils/get-selected-icon';
|
||||
import { getSelectedIcon, getSelectedTitle } from '../utils/get-selected';
|
||||
import { ToolbarMenuProps } from '../types';
|
||||
import { ToolbarMenuListItem } from './ToolbarMenuListItem';
|
||||
|
||||
@ -22,7 +22,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
toolbar: { icon: _icon, items, title: _title, showName, preventDynamicIcon },
|
||||
toolbar: { icon: _icon, items, title: _title, showName, preventDynamicIcon, dynamicTitle },
|
||||
}) => {
|
||||
const [globals, updateGlobals] = useGlobals();
|
||||
|
||||
@ -40,6 +40,10 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
|
||||
title = name;
|
||||
}
|
||||
|
||||
if (dynamicTitle) {
|
||||
title = getSelectedTitle({ currentValue, items }) || title;
|
||||
}
|
||||
|
||||
const handleItemClick = useCallback(
|
||||
(value: string) => {
|
||||
updateGlobals({ [id]: value });
|
||||
|
||||
@ -33,6 +33,8 @@ export interface NormalizedToolbarConfig {
|
||||
shortcuts?: ToolbarShortcuts;
|
||||
/** @deprecated "name" no longer dual purposes as title - use "title" if a title is wanted */
|
||||
showName?: boolean;
|
||||
/** Change title based on selected value */
|
||||
dynamicTitle?: boolean;
|
||||
}
|
||||
|
||||
export type NormalizedToolbarArgType = ArgType & {
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import { ToolbarItem } from '../types';
|
||||
|
||||
interface GetSelectedIconProps {
|
||||
currentValue: string | null;
|
||||
items: ToolbarItem[];
|
||||
}
|
||||
|
||||
export const getSelectedIcon = ({ currentValue, items }: GetSelectedIconProps) => {
|
||||
const selectedItem = currentValue != null && items.find((item) => item.value === currentValue);
|
||||
const selectedIcon = selectedItem && selectedItem.icon;
|
||||
|
||||
return selectedIcon;
|
||||
};
|
||||
21
addons/toolbars/src/utils/get-selected.ts
Normal file
21
addons/toolbars/src/utils/get-selected.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { ToolbarItem } from '../types';
|
||||
|
||||
interface GetSelectedItemProps {
|
||||
currentValue: string | null;
|
||||
items: ToolbarItem[];
|
||||
}
|
||||
|
||||
export const getSelectedItem = ({ currentValue, items }: GetSelectedItemProps) => {
|
||||
const selectedItem = currentValue != null && items.find((item) => item.value === currentValue);
|
||||
return selectedItem;
|
||||
};
|
||||
|
||||
export const getSelectedIcon = ({ currentValue, items }: GetSelectedItemProps) => {
|
||||
const selectedItem = getSelectedItem({ currentValue, items });
|
||||
return selectedItem?.icon;
|
||||
};
|
||||
|
||||
export const getSelectedTitle = ({ currentValue, items }: GetSelectedItemProps) => {
|
||||
const selectedItem = getSelectedItem({ currentValue, items });
|
||||
return selectedItem?.title;
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/components": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/theming": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/components": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/theming": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -19,5 +19,5 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/angular/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/angular/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/angular/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,17 +45,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/core-events": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -75,7 +75,7 @@
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"sass-loader": "^10.1.0",
|
||||
"telejson": "^5.3.3",
|
||||
"telejson": "^6.0.8",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"ts-loader": "^8.0.14",
|
||||
"tsconfig-paths-webpack-plugin": "^3.3.0",
|
||||
@ -137,5 +137,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5"
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import 'jest-preset-angular';
|
||||
import 'jest-preset-angular/setup-jest';
|
||||
|
||||
global.EventSource = class {} as any;
|
||||
|
||||
@ -84,6 +84,7 @@ describe('Build Storybook Builder', () => {
|
||||
outputDir: 'storybook-static',
|
||||
mode: 'static',
|
||||
tsConfig: './storybook/tsconfig.ts',
|
||||
webpackStatsJson: false,
|
||||
});
|
||||
});
|
||||
|
||||
@ -109,11 +110,39 @@ describe('Build Storybook Builder', () => {
|
||||
outputDir: 'storybook-static',
|
||||
mode: 'static',
|
||||
tsConfig: 'path/to/tsConfig.json',
|
||||
webpackStatsJson: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('should build storybook with webpack stats.json', async () => {
|
||||
const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
|
||||
tsConfig: 'path/to/tsConfig.json',
|
||||
compodoc: false,
|
||||
webpackStatsJson: true,
|
||||
});
|
||||
|
||||
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: {},
|
||||
configDir: '.storybook',
|
||||
loglevel: undefined,
|
||||
quiet: false,
|
||||
outputDir: 'storybook-static',
|
||||
mode: 'static',
|
||||
tsConfig: 'path/to/tsConfig.json',
|
||||
webpackStatsJson: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('should throw error', async () => {
|
||||
buildStandaloneMock.mockRejectedValue(new Error());
|
||||
buildStandaloneMock.mockRejectedValue(true);
|
||||
|
||||
const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
|
||||
browserTarget: 'angular-cli:build-2',
|
||||
@ -162,6 +191,7 @@ describe('Build Storybook Builder', () => {
|
||||
outputDir: 'storybook-static',
|
||||
mode: 'static',
|
||||
tsConfig: './storybook/tsconfig.ts',
|
||||
webpackStatsJson: false,
|
||||
});
|
||||
});
|
||||
|
||||
@ -188,6 +218,7 @@ describe('Build Storybook Builder', () => {
|
||||
outputDir: 'storybook-static',
|
||||
mode: 'static',
|
||||
tsConfig: 'path/to/tsConfig.json',
|
||||
webpackStatsJson: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -31,7 +31,7 @@ export type StorybookBuilderOptions = JsonObject & {
|
||||
} & Pick<
|
||||
// makes sure the option exists
|
||||
CLIOptions,
|
||||
'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs'
|
||||
'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs' | 'webpackStatsJson'
|
||||
>;
|
||||
|
||||
export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
|
||||
@ -62,6 +62,7 @@ function commandBuilder(
|
||||
loglevel,
|
||||
outputDir,
|
||||
quiet,
|
||||
webpackStatsJson,
|
||||
} = options;
|
||||
|
||||
const standaloneOptions: StandaloneOptions = {
|
||||
@ -77,6 +78,7 @@ function commandBuilder(
|
||||
...(styles ? { styles } : {}),
|
||||
},
|
||||
tsConfig,
|
||||
webpackStatsJson,
|
||||
};
|
||||
return standaloneOptions;
|
||||
}),
|
||||
|
||||
@ -52,6 +52,11 @@
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"webpackStatsJson": {
|
||||
"type": "boolean",
|
||||
"description": "Write Webpack Stats JSON to disk",
|
||||
"default": false
|
||||
},
|
||||
"styles": {
|
||||
"type": "array",
|
||||
"description": "Global styles to be included in the build.",
|
||||
|
||||
@ -124,7 +124,7 @@ describe('Start Storybook Builder', () => {
|
||||
});
|
||||
|
||||
it('should throw error', async () => {
|
||||
buildStandaloneMock.mockRejectedValue(new Error());
|
||||
buildStandaloneMock.mockRejectedValue(true);
|
||||
|
||||
const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
|
||||
browserTarget: 'angular-cli:build-2',
|
||||
|
||||
@ -21,11 +21,11 @@ export const buildStandaloneErrorHandler = (error: any): any => {
|
||||
logger.line();
|
||||
return error.close
|
||||
? dedent`
|
||||
FATAL broken build!, will close the process,
|
||||
Fix the error below and restart storybook.
|
||||
`
|
||||
FATAL broken build!, will close the process,
|
||||
Fix the error below and restart storybook.
|
||||
`
|
||||
: dedent`
|
||||
Broken build, fix the error above.
|
||||
You may need to refresh the browser.
|
||||
`;
|
||||
Broken build, fix the error above.
|
||||
You may need to refresh the browser.
|
||||
`;
|
||||
};
|
||||
|
||||
@ -22,6 +22,7 @@ describe('RendererFactory', () => {
|
||||
rootTargetDOMNode = global.document.getElementById('root');
|
||||
rootDocstargetDOMNode = global.document.getElementById('root-docs');
|
||||
(platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting);
|
||||
jest.spyOn(console, 'log').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
||||
@ -7,7 +7,7 @@ import deprecate from 'util-deprecate';
|
||||
import { ICollection, StoryFnAngularReturnType } from '../types';
|
||||
import { storyPropsProvider } from './StorybookProvider';
|
||||
import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
|
||||
import { isDeclarable } from './utils/NgComponentAnalyzer';
|
||||
import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer';
|
||||
import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
|
||||
import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
|
||||
|
||||
@ -61,6 +61,7 @@ export const getStorybookModuleMetadata = (
|
||||
props
|
||||
);
|
||||
|
||||
const isStandalone = isStandaloneComponent(component);
|
||||
// Look recursively (deep) if the component is not already declared by an import module
|
||||
const requiresComponentDeclaration =
|
||||
isDeclarable(component) &&
|
||||
@ -68,7 +69,8 @@ export const getStorybookModuleMetadata = (
|
||||
component,
|
||||
moduleMetadata.declarations,
|
||||
moduleMetadata.imports
|
||||
);
|
||||
) &&
|
||||
!isStandalone;
|
||||
|
||||
return {
|
||||
declarations: [
|
||||
@ -76,7 +78,11 @@ export const getStorybookModuleMetadata = (
|
||||
ComponentToInject,
|
||||
...(moduleMetadata.declarations ?? []),
|
||||
],
|
||||
imports: [BrowserModule, ...(moduleMetadata.imports ?? [])],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
...(isStandalone ? [component] : []),
|
||||
...(moduleMetadata.imports ?? []),
|
||||
],
|
||||
providers: [storyPropsProvider(storyProps$), ...(moduleMetadata.providers ?? [])],
|
||||
entryComponents: [...(moduleMetadata.entryComponents ?? [])],
|
||||
schemas: [...(moduleMetadata.schemas ?? [])],
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
isComponent,
|
||||
isDeclarable,
|
||||
getComponentDecoratorMetadata,
|
||||
isStandaloneComponent,
|
||||
} from './NgComponentAnalyzer';
|
||||
|
||||
describe('getComponentInputsOutputs', () => {
|
||||
@ -235,6 +236,46 @@ describe('isComponent', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('isStandaloneComponent', () => {
|
||||
it('should return true with a Component with "standalone: true"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Component({ standalone: true } as any)
|
||||
class FooComponent {}
|
||||
|
||||
expect(isStandaloneComponent(FooComponent)).toEqual(true);
|
||||
});
|
||||
|
||||
it('should return false with a Component with "standalone: false"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Component({ standalone: false } as any)
|
||||
class FooComponent {}
|
||||
|
||||
expect(isStandaloneComponent(FooComponent)).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false with a Component without the "standalone" property', () => {
|
||||
@Component({})
|
||||
class FooComponent {}
|
||||
|
||||
expect(isStandaloneComponent(FooComponent)).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false with simple class', () => {
|
||||
class FooPipe {}
|
||||
|
||||
expect(isStandaloneComponent(FooPipe)).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return false with Directive', () => {
|
||||
@Directive()
|
||||
class FooDirective {}
|
||||
|
||||
expect(isStandaloneComponent(FooDirective)).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getComponentDecoratorMetadata', () => {
|
||||
it('should return Component with a Component', () => {
|
||||
@Component({ selector: 'foo' })
|
||||
|
||||
@ -108,6 +108,18 @@ export const isComponent = (component: any): component is Type<unknown> => {
|
||||
return (decorators || []).some((d) => d instanceof Component);
|
||||
};
|
||||
|
||||
export const isStandaloneComponent = (component: any): component is Type<unknown> => {
|
||||
if (!component) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const decorators = reflectionCapabilities.annotations(component);
|
||||
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
return (decorators || []).some((d) => d instanceof Component && (d as any).standalone);
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all component decorator properties
|
||||
* is used to get all `@Input` and `@Output` Decorator
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2015",
|
||||
"declaration": true,
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2015",
|
||||
"declaration": true,
|
||||
|
||||
@ -19,8 +19,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/ember/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/ember/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/ember/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
## Docs
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
|
||||
"bugs": {
|
||||
@ -42,10 +42,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -66,6 +66,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -21,5 +21,5 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/html/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/html/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/html/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/preview-web": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/preview-web": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -19,8 +19,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/preact/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/preact/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/preact/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
## Docs
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,11 +46,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -19,8 +19,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/react/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/react/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
Here are some featured storybooks that you can reference to see how Storybook works:
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -49,16 +49,16 @@
|
||||
"@babel/preset-flow": "^7.12.1",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/estree": "^0.0.51",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
@ -84,11 +84,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"jest-specific-snapshot": "^4.0.0",
|
||||
"webpack": "4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.11.5",
|
||||
"jest-specific-snapshot": "^4.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"require-from-string": "^2.0.2"
|
||||
@ -119,6 +119,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -284,4 +284,33 @@ describe('jsxDecorator', () => {
|
||||
'<div className="foo" />'
|
||||
);
|
||||
});
|
||||
|
||||
it('handles stories that trigger Suspense', async () => {
|
||||
// if a story function uses a hook or other library that triggers suspense, it will throw a Promise until it is resolved
|
||||
// and then it will return the story content after the promise is resolved
|
||||
const storyFn = jest.fn();
|
||||
storyFn
|
||||
.mockImplementationOnce(() => {
|
||||
throw Promise.resolve();
|
||||
})
|
||||
.mockImplementation(() => {
|
||||
return <div>resolved args story</div>;
|
||||
});
|
||||
const jsx = '';
|
||||
const context = makeContext('args', { __isArgsStory: true, jsx }, {});
|
||||
expect(() => {
|
||||
jsxDecorator(storyFn, context);
|
||||
}).toThrow(Promise);
|
||||
jsxDecorator(storyFn, context);
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
expect(mockChannel.emit).toHaveBeenCalledTimes(2);
|
||||
expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, 'jsx-test--args', '');
|
||||
expect(mockChannel.emit).nthCalledWith(
|
||||
2,
|
||||
SNIPPET_RENDERED,
|
||||
'jsx-test--args',
|
||||
'<div>\n resolved args story\n</div>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -177,7 +177,6 @@ export const jsxDecorator = (
|
||||
) => {
|
||||
const channel = addons.getChannel();
|
||||
const skip = skipJsxRender(context);
|
||||
const story = storyFn();
|
||||
|
||||
let jsx = '';
|
||||
|
||||
@ -185,6 +184,7 @@ export const jsxDecorator = (
|
||||
if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
|
||||
});
|
||||
|
||||
const story = storyFn();
|
||||
// We only need to render JSX if the source block is actually going to
|
||||
// consume it. Otherwise it's just slowing us down.
|
||||
if (skip) {
|
||||
|
||||
@ -148,7 +148,7 @@ describe('parse', () => {
|
||||
});
|
||||
|
||||
it('support array', () => {
|
||||
const result = parse("['bottom-left', 'botton-center', 'bottom-right']");
|
||||
const result = parse("['bottom-left', 'bottom-center', 'bottom-right']");
|
||||
const inferredType = result.inferredType as InspectionArray;
|
||||
|
||||
expect(inferredType.type).toBe(InspectionType.ARRAY);
|
||||
|
||||
@ -48,7 +48,7 @@ const renderElement = async (node: ReactElement, el: Element) => {
|
||||
};
|
||||
|
||||
const canUseNewReactRootApi =
|
||||
reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0');
|
||||
reactDomVersion && (reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0'));
|
||||
|
||||
const shouldUseNewRootApi = FRAMEWORK_OPTIONS?.legacyRootApi !== true;
|
||||
|
||||
@ -147,4 +147,6 @@ export async function renderToDOM(
|
||||
}
|
||||
|
||||
await renderElement(element, domElement);
|
||||
|
||||
return () => unmountElement(domElement);
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ describe('framework-preset-react-docgen', () => {
|
||||
presets: ['env', 'foo-preset'],
|
||||
overrides: [
|
||||
{
|
||||
test: /\.(mjs|tsx?|jsx?)$/,
|
||||
test: /\.(cjs|mjs|tsx?|jsx?)$/,
|
||||
plugins: [
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
|
||||
@ -19,8 +19,9 @@ export async function babel(config: TransformOptions, options: Options) {
|
||||
return {
|
||||
...config,
|
||||
overrides: [
|
||||
...(config?.overrides || []),
|
||||
{
|
||||
test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
|
||||
test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
|
||||
plugins: [
|
||||
[
|
||||
require.resolve('babel-plugin-react-docgen'),
|
||||
|
||||
@ -230,7 +230,7 @@ Just like CSF stories we can define `argTypes` to specify the controls used in t
|
||||
|
||||
## Addon compatibility
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) and a great API to customize as you wish. As some addons assume the story is rendered in JS, they may not work with `@storybook/server` (yet!).
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. As some addons assume the story is rendered in JS, they may not work with `@storybook/server` (yet!).
|
||||
|
||||
Many addons that act on the manager side (such as `backgrounds` and `viewport`) will work out of the box with `@storybook/server` -- you can configure them with parameters written on the server as usual.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/api": "6.5.0-alpha.64",
|
||||
"@storybook/client-api": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/preview-web": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/api": "6.5.0-rc.1",
|
||||
"@storybook/client-api": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/preview-web": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -19,8 +19,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/svelte/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/svelte/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/svelte/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
## TODOs
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,14 +46,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/node-logger": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -83,6 +83,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -23,8 +23,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/vue/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
## Vue Notes
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -86,6 +86,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export { renderToDOM } from './render';
|
||||
export { decorateStory } from './decorateStory';
|
||||
export { render, renderToDOM } from './render';
|
||||
export { decorateStory as applyDecorators } from './decorateStory';
|
||||
|
||||
export const parameters = { framework: 'vue' };
|
||||
|
||||
@ -22,7 +22,7 @@ const root = new Vue({
|
||||
});
|
||||
|
||||
export const render: ArgsStoryFn<VueFramework> = (props, context) => {
|
||||
const { id, component: Component } = context;
|
||||
const { id, component: Component, argTypes } = context;
|
||||
const component = Component as VueFramework['component'] & {
|
||||
__docgenInfo?: { displayName: string };
|
||||
props: Record<string, any>;
|
||||
@ -49,7 +49,7 @@ export const render: ArgsStoryFn<VueFramework> = (props, context) => {
|
||||
}
|
||||
|
||||
return {
|
||||
props: component.props,
|
||||
props: Object.keys(argTypes),
|
||||
components: { [componentName]: component },
|
||||
template: `<${componentName} v-bind="$props" />`,
|
||||
};
|
||||
|
||||
@ -19,8 +19,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue3/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/vue3/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
## Extending the Vue application
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -83,6 +83,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export { renderToDOM } from './render';
|
||||
export { decorateStory } from './decorateStory';
|
||||
export { render, renderToDOM } from './render';
|
||||
export { decorateStory as applyDecorators } from './decorateStory';
|
||||
|
||||
export const parameters = { framework: 'vue3' };
|
||||
|
||||
@ -24,7 +24,7 @@ export function webpack(config: Configuration): Configuration {
|
||||
options: {},
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
test: /\.ts$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('ts-loader'),
|
||||
@ -35,6 +35,19 @@ export function webpack(config: Configuration): Configuration {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.tsx$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('ts-loader'),
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
// Note this is different from the `appendTsSuffixTo` above!
|
||||
appendTsxSuffixTo: [/\.vue$/],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -21,8 +21,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/docs/web-components/configure/storybook-addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/web-components/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/web-components/sharing/publish-storybook) of your storybook and deploy it anywhere you want.
|
||||
|
||||
# Hot Module Reloading (HMR)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.5.0-alpha.64",
|
||||
"version": "6.5.0-rc.1",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -50,15 +50,15 @@
|
||||
"@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.5.0-alpha.64",
|
||||
"@storybook/client-api": "6.5.0-alpha.64",
|
||||
"@storybook/client-logger": "6.5.0-alpha.64",
|
||||
"@storybook/core": "6.5.0-alpha.64",
|
||||
"@storybook/core-common": "6.5.0-alpha.64",
|
||||
"@storybook/csf": "0.0.2--canary.7c6c115.0",
|
||||
"@storybook/docs-tools": "6.5.0-alpha.64",
|
||||
"@storybook/preview-web": "6.5.0-alpha.64",
|
||||
"@storybook/store": "6.5.0-alpha.64",
|
||||
"@storybook/addons": "6.5.0-rc.1",
|
||||
"@storybook/client-api": "6.5.0-rc.1",
|
||||
"@storybook/client-logger": "6.5.0-rc.1",
|
||||
"@storybook/core": "6.5.0-rc.1",
|
||||
"@storybook/core-common": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/preview-web": "6.5.0-rc.1",
|
||||
"@storybook/store": "6.5.0-rc.1",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
@ -82,6 +82,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5",
|
||||
"gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { html } from 'lit-html';
|
||||
import { styleMap } from 'lit-html/directives/style-map';
|
||||
import { addons, useEffect } from '@storybook/addons';
|
||||
import type { StoryContext } from '@storybook/addons';
|
||||
import { SNIPPET_RENDERED } from '@storybook/docs-tools';
|
||||
import type { StoryContext, WebComponentsFramework } from '..';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
const mockedUseEffect = useEffect as jest.Mocked<typeof useEffect>;
|
||||
const mockedUseEffect = useEffect as jest.Mock;
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
print: (val: any) => val,
|
||||
@ -16,16 +16,22 @@ expect.addSnapshotSerializer({
|
||||
|
||||
const tick = () => new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
|
||||
id: `lit-test--${name}`,
|
||||
kind: 'js-text',
|
||||
name,
|
||||
parameters,
|
||||
args,
|
||||
argTypes: {},
|
||||
globals: {},
|
||||
...extra,
|
||||
});
|
||||
const makeContext = (
|
||||
name: string,
|
||||
parameters: any,
|
||||
args: any,
|
||||
extra?: Partial<StoryContext<WebComponentsFramework>>
|
||||
) =>
|
||||
({
|
||||
id: `lit-test--${name}`,
|
||||
kind: 'js-text',
|
||||
name,
|
||||
parameters,
|
||||
args,
|
||||
argTypes: {},
|
||||
globals: {},
|
||||
...extra,
|
||||
} as StoryContext<WebComponentsFramework>);
|
||||
|
||||
describe('sourceDecorator', () => {
|
||||
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
|
||||
@ -106,4 +112,23 @@ describe('sourceDecorator', () => {
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(transformSource).toHaveBeenCalledWith('<div>args story</div>', context);
|
||||
});
|
||||
|
||||
it('should clean lit expression comments', async () => {
|
||||
const storyFn = (args: any) => html`<div>${args.slot}</div>`;
|
||||
const context = makeContext(
|
||||
'args',
|
||||
{ __isArgsStory: true },
|
||||
{ slot: 'some content' },
|
||||
{ originalStoryFn: storyFn }
|
||||
);
|
||||
// bind args to storyFn, as it's done in Storybook
|
||||
const boundStoryFn = storyFn.bind(null, context.args);
|
||||
sourceDecorator(boundStoryFn, context);
|
||||
await tick();
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'lit-test--args',
|
||||
'<div>some content</div>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -6,6 +6,9 @@ import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
|
||||
|
||||
import type { WebComponentsFramework } from '..';
|
||||
|
||||
// Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
|
||||
const LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
|
||||
|
||||
function skipSourceRender(context: StoryContext<WebComponentsFramework>) {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
@ -44,7 +47,10 @@ export function sourceDecorator(
|
||||
if (!skipSourceRender(context)) {
|
||||
const container = window.document.createElement('div');
|
||||
render(story, container);
|
||||
source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
|
||||
source = applyTransformSource(
|
||||
container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''),
|
||||
context
|
||||
);
|
||||
}
|
||||
|
||||
return story;
|
||||
|
||||
@ -39,7 +39,19 @@ describe('addon-interactions', () => {
|
||||
it('should have interactions', test);
|
||||
});
|
||||
|
||||
onlyOn('html', () => {
|
||||
it('should have interactions', test);
|
||||
});
|
||||
|
||||
onlyOn('svelte', () => {
|
||||
it('should have interactions', test);
|
||||
});
|
||||
|
||||
onlyOn('vue3', () => {
|
||||
it('should have interactions', test);
|
||||
});
|
||||
|
||||
onlyOn('vue', () => {
|
||||
it('should have interactions', test);
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Add to the addon catalog'
|
||||
---
|
||||
|
||||
Storybook addons are listed in the [catalog](/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`.
|
||||
Storybook addons are listed in the [catalog](https://storybook.js.org/addons/) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`.
|
||||
|
||||
Add your addon to the catalog by publishing a npm package that follows these requirements:
|
||||
|
||||
|
||||
@ -362,7 +362,7 @@ The following table details how to use the API values:
|
||||
| **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` |
|
||||
| **showToolbar** | 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` |
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user