mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 05:01:11 +08:00
Merge branch 'next' into tech/add-cypress
This commit is contained in:
Norbert de Langen
commit
fe82ad70fe
41
CHANGELOG.md
41
CHANGELOG.md
@ -1,3 +1,44 @@
|
||||
## 5.3.0-alpha.20 (October 15, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Support MDX source in Preview w/ no Story blocks ([#7966](https://github.com/storybookjs/storybook/pull/7966))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix react inline stories ([#8419](https://github.com/storybookjs/storybook/pull/8419))
|
||||
* React: Fix custom themes breaking welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
|
||||
|
||||
## 5.3.0-alpha.19 (October 15, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* React: Move Create React App support to external preset ([#8416](https://github.com/storybookjs/storybook/pull/8416))
|
||||
* CLI: MDX template support ([#8396](https://github.com/storybookjs/storybook/pull/8396))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
|
||||
* Addon-docs: Don't error in React when there's no `prepareForInline` ([#8415](https://github.com/storybookjs/storybook/pull/8415))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
|
||||
|
||||
## 5.3.0-alpha.18 (October 14, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411))
|
||||
* Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408))
|
||||
* Addon-docs: Fix typo in default config ([#8403](https://github.com/storybookjs/storybook/pull/8403))
|
||||
* Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269))
|
||||
* CLI: Update button.svelte template ([#8369](https://github.com/storybookjs/storybook/pull/8369))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Official-storybook: Add a story with duplicate decorators ([#8407](https://github.com/storybookjs/storybook/pull/8407))
|
||||
|
||||
## 5.3.0-alpha.17 (October 10, 2019)
|
||||
|
||||
### Maintenance
|
||||
|
||||
@ -175,7 +175,7 @@ So the way our script works is that it:
|
||||
Our script leaves the local registry running, for **as long as you keep it running** you can install storybook packages from this local registry.
|
||||
|
||||
- Navigate to your own project and then change `package.json` so the storybook packages match the version of the one you just published.
|
||||
- Then just do the normal install procedure using `yarn` or `npm`
|
||||
- Then you can install using `yarn` or `npm`
|
||||
- Start using your storybook as normally.
|
||||
|
||||
If you've made a change to storybook's codebase and would want this change to be reflected in your app:
|
||||
@ -229,7 +229,7 @@ We use the following label scheme to categorize issues:
|
||||
|
||||
All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
|
||||
|
||||
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control.
|
||||
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can see all of the issues for a particular area, and keep the total number of open issues under control.
|
||||
|
||||
For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs.
|
||||
|
||||
@ -299,7 +299,7 @@ Storybook is broken up into sub-projects that you can install as you need them.
|
||||
|
||||
#### Connecting Your App To Storybook
|
||||
|
||||
**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by simply linking each addon you want to use.
|
||||
**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by linking each addon you want to use.
|
||||
This applies for the kitchen sink apps as well as your own projects.
|
||||
|
||||
_Make sure `yarn dev` is running_
|
||||
|
||||
30
MIGRATION.md
30
MIGRATION.md
@ -1,6 +1,8 @@
|
||||
# Migration
|
||||
|
||||
- [Migration](#migration)
|
||||
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
|
||||
- [Create React App preset](#create-react-app-preset)
|
||||
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
|
||||
- [Source-loader](#source-loader)
|
||||
- [Default viewports](#default-viewports)
|
||||
@ -67,6 +69,14 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## From version 5.2.x to 5.3.x
|
||||
|
||||
### Create React App preset
|
||||
|
||||
You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0.
|
||||
|
||||
Simply install [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app) and it will be used automatically.
|
||||
|
||||
## From version 5.1.x to 5.2.x
|
||||
|
||||
### Source-loader
|
||||
@ -77,7 +87,7 @@ Addon-storysource contains a loader, `@storybook/addon-storysource/loader`, whic
|
||||
@storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead.
|
||||
```
|
||||
|
||||
To upgrade to `@storybook/source-loader`, simply `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`.
|
||||
To upgrade to `@storybook/source-loader`, run `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`.
|
||||
|
||||
### Default viewports
|
||||
|
||||
@ -139,7 +149,7 @@ Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared
|
||||
|
||||
In addition, both packages share more code with the rest of Storybook, which will reduce bugs and increase compatibility (e.g. with the latest versions of babel, etc.).
|
||||
|
||||
As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Simply upgrading the library should be enough.
|
||||
As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Upgrading the library should be enough.
|
||||
|
||||
If you wish to run the optional web server, you will need to do the following migration:
|
||||
|
||||
@ -284,7 +294,7 @@ In 5.0, we now provide recommended defaults:
|
||||
|
||||
This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component.
|
||||
|
||||
If you wish to opt-out of this new behavior and restore the flat UI, simply set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:
|
||||
If you wish to opt-out of this new behavior and restore the flat UI, set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:
|
||||
|
||||
```js
|
||||
addParameters({
|
||||
@ -655,7 +665,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you
|
||||
If you are using `create-react-app` (aka CRA), you may need to do some manual steps to upgrade, depending on the setup.
|
||||
|
||||
- `create-react-app@1` may require manual migrations.
|
||||
- If you're adding storybook for the first time, it should just work: `sb init` should add the correct dependencies.
|
||||
- If you're adding storybook for the first time: `sb init` should add the correct dependencies.
|
||||
- If you're upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section:
|
||||
- Upgrade to Babel 7 if you are not dependent on Babel 6-specific features.
|
||||
- Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features).
|
||||
@ -674,7 +684,7 @@ yarn add @babel/core babel-loader --dev
|
||||
yarn add babel-loader@7
|
||||
```
|
||||
|
||||
Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works:
|
||||
Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's one that works:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -718,7 +728,7 @@ storiesOf('My component', module)
|
||||
|
||||
This example applies notes globally to all stories. You can apply it locally with `storiesOf(...).addDecorator(withNotes)`.
|
||||
|
||||
The story parameters correspond directly to the old withX arguments, so it's easy to migrate your code. See the parameters documentation for the packages that have been upgraded:
|
||||
The story parameters correspond directly to the old withX arguments, so it's less demanding to migrate your code. See the parameters documentation for the packages that have been upgraded:
|
||||
|
||||
- [Notes](https://github.com/storybookjs/storybook/blob/master/addons/notes/README.md)
|
||||
- [Jest](https://github.com/storybookjs/storybook/blob/master/addons/jest/README.md)
|
||||
@ -748,11 +758,11 @@ This was done to support different major versions of babel.
|
||||
|
||||
### Base webpack config now contains vital plugins ([#1775](https://github.com/storybookjs/storybook/pull/1775))
|
||||
|
||||
This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement.
|
||||
This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement.
|
||||
|
||||
### Refactored Knobs
|
||||
|
||||
Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is easy:
|
||||
Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is only takes one line of code.
|
||||
|
||||
In the case of React or React-Native, import knobs like this:
|
||||
|
||||
@ -879,7 +889,7 @@ The new package names are:
|
||||
| `@kadira/storybook-addon-graphql` | `@storybook/addon-graphql` |
|
||||
| `@kadira/react-storybook-decorator-centered` | `@storybook/addon-centered` |
|
||||
|
||||
If your codebase is small, it's probably doable to just replace them by hand. (in your codebase and in `package.json`).
|
||||
If your codebase is small, it's probably doable to replace them by hand (in your codebase and in `package.json`).
|
||||
|
||||
But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./lib/codemod) for you.
|
||||
|
||||
@ -893,7 +903,7 @@ You have to change your `package.json`, prune old and install new dependencies b
|
||||
|
||||
We used to ship 2 addons with every single installation of storybook: `actions` and `links`. But in practice not everyone is using them, so we decided to deprecate this and in the future, they will be completely removed. If you use `@storybook/react/addons` you will get a deprecation warning.
|
||||
|
||||
If you **are** using these addons, migrating is simple:
|
||||
If you **are** using these addons, it takes two steps to migrate:
|
||||
|
||||
- add the addons you use to your `package.json`.
|
||||
- update your code:
|
||||
|
||||
@ -61,7 +61,7 @@ Storybook runs outside of your app. This allows you to develop UI components in
|
||||
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/examples/>
|
||||
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) 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 development for mobile.
|
||||
|
||||
## Table of contents
|
||||
|
||||
@ -149,7 +149,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
| [links](addons/links/) | Create links between stories |
|
||||
| [notes](addons/notes/) | Annotate Storybook stories with notes |
|
||||
| [options](addons/options/) | Customize the Storybook UI in code |
|
||||
| [storyshots](addons/storyshots/) | Easy snapshot testing for components in Storybook |
|
||||
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook |
|
||||
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
|
||||
|
||||
@ -93,7 +93,7 @@ is to upvote it by adding a "thumbs-up" reaction in Github. This way important
|
||||
bugs quickly bubble to the top [with a
|
||||
search](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc%20label%3Abug).
|
||||
|
||||
And of course, the best way to make sure a bug gets addressed quickly is to fix
|
||||
The best way to make sure a bug gets addressed quickly is to fix
|
||||
it yourself and issue a PR. If the fix is good, we'll try to release it quickly
|
||||
in a patch release.
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ Doing these will be backwards compatible.
|
||||
|
||||
### Responsive + multi-device viewports preview.
|
||||
|
||||
If you're smart about it you can already view the preview on multiple devices and windows. It's just an iframe after-all.
|
||||
If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all.
|
||||
But story selection and addon-settings are not synced.
|
||||
We want to make this much much simpler and a core feature of storybook.
|
||||
|
||||
@ -41,7 +41,7 @@ We're interested in full customizability of our UI, though addons and options.
|
||||
### Add a playground addon
|
||||
|
||||
Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app.
|
||||
Storybook has, of course, a very tight connection with your editor, and it has a knobs addon.
|
||||
Storybook has a very tight connection with your editor, and it has a knobs addon.
|
||||
But we still see value in an addon that will allow the workflow of a playground.
|
||||
|
||||
### See multiple (or all) stories in 1 preview.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,12 +33,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"axe-core": "^3.3.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { document } from 'global';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import React, { FunctionComponent, ReactNode, useState } from 'react';
|
||||
import memoize from 'memoizerific';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
@ -79,7 +79,7 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
|
||||
})),
|
||||
];
|
||||
|
||||
export const ColorBlindness: React.FC = () => {
|
||||
export const ColorBlindness: FunctionComponent = () => {
|
||||
const [active, setActiveState] = useState(null);
|
||||
|
||||
const setActive = (activeState: string | null): void => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { document } from 'global';
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, createRef } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { styled, themes, convert } from '@storybook/theming';
|
||||
import memoize from 'memoizerific';
|
||||
@ -100,7 +100,7 @@ class HighlightToggle extends Component<ToggleProps> {
|
||||
elementsToHighlight: [],
|
||||
};
|
||||
|
||||
private checkBoxRef = React.createRef<HTMLInputElement>();
|
||||
private checkBoxRef = createRef<HTMLInputElement>();
|
||||
|
||||
componentDidMount() {
|
||||
const { elementsToHighlight, highlightedElementsMap } = this.props;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-api": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-api": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import ActionLogger from './containers/ActionLogger';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,12 +32,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
## 💡 Why you need this?
|
||||
|
||||
Real world users expects your application being customizable, that is why often your components are **polymorphic**:
|
||||
they simply need to adapt themselves under different contextual environments. Imagine your components can speak
|
||||
they need to adapt themselves under different contextual environments. Imagine your components can speak
|
||||
Chinese, English, or even French, and they change their skin tone under dark or light theme. Yeah, you want to make
|
||||
sure a component looks great in all scenarios.
|
||||
|
||||
@ -25,7 +25,7 @@ once then apply it everywhere**.
|
||||
|
||||
1. Define a single global file for managing contextual environments (a.k.a. containers) for all of your stories
|
||||
declaratively. No more repetitive setups or noisy wrapping, making your stories more focused and readable.
|
||||
2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can easily slice into
|
||||
2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can slice into
|
||||
different environments (e.g. languages or themes ) to understand how your component is going to respond.
|
||||
3. Library agnostic: no presumption on what kind of components you want to wrap around your stories. You can even
|
||||
use it to bridge with your favorite routing, state-management solutions, or even your own
|
||||
@ -65,7 +65,7 @@ import { contexts } from './configs/contexts'; // we will define the contextual
|
||||
addDecorator(withContexts(contexts));
|
||||
```
|
||||
|
||||
Alternatively, just like other addons, you can use this addon only for a given set of stories:
|
||||
Alternatively, like other addons, you can use this addon only for a given set of stories:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/[framework]';
|
||||
@ -220,7 +220,7 @@ be shown at first in the toolbar menu in your Storybook.
|
||||
|
||||
## 📔 Notes
|
||||
|
||||
1. You can use this addon to inject any valid components, that is why `icon` and `params` can be just optional.
|
||||
1. You can use this addon to inject any valid components, that is why `icon` and `params` can be optional.
|
||||
2. As mentioned, extra contextual environment setups can be added at the story level. Please make sure they are
|
||||
passed via the second argument as `{ contexts: [{ /* extra contexts */ }}`.
|
||||
3. Additional `params` can be "appended" into an existing setup at the story level too (make sure it goes with the
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"preact",
|
||||
@ -27,10 +27,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { ComponentProps } from 'react';
|
||||
import React, { ComponentProps, memo } from 'react';
|
||||
import { Separator } from '@storybook/components';
|
||||
import { ToolBarControl } from './ToolBarControl';
|
||||
import { ContextNode, FCNoChildren, SelectionState } from '../../shared/types.d';
|
||||
@ -9,7 +9,7 @@ type ToolBar = FCNoChildren<{
|
||||
setSelected: ComponentProps<typeof ToolBarControl>['setSelected'];
|
||||
}>;
|
||||
|
||||
export const ToolBar: ToolBar = React.memo(({ nodes, state, setSelected }) =>
|
||||
export const ToolBar: ToolBar = memo(({ nodes, state, setSelected }) =>
|
||||
nodes.length ? (
|
||||
<>
|
||||
<Separator />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { ToolBarMenu } from './ToolBarMenu';
|
||||
import { OPT_OUT } from '../../shared/constants';
|
||||
import { ContextNode, FCNoChildren, Omit } from '../../shared/types.d';
|
||||
import { ContextNode, FCNoChildren } from '../../shared/types.d';
|
||||
|
||||
type ToolBarControl = FCNoChildren<
|
||||
Omit<
|
||||
@ -22,7 +22,7 @@ export const ToolBarControl: ToolBarControl = ({
|
||||
selected,
|
||||
setSelected,
|
||||
}) => {
|
||||
const [expanded, setExpanded] = React.useState(false);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const paramNames = params.map(({ name }) => name);
|
||||
const activeName =
|
||||
// validate the integrity of the selected name
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import { TooltipLinkList } from '@storybook/components';
|
||||
import { OPT_OUT } from '../../shared/constants';
|
||||
import { FCNoChildren } from '../../shared/types.d';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import { createElement, ReactElement } from 'react';
|
||||
import { createAddonDecorator, Render } from '../../index';
|
||||
import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
|
||||
|
||||
@ -6,9 +6,9 @@ import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
|
||||
* This is the framework specific bindings for React.
|
||||
* '@storybook/react' expects the returning object from a decorator to be a 'React Element' (vNode).
|
||||
*/
|
||||
export const renderReact: Render<React.ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
|
||||
export const renderReact: Render<ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
|
||||
const { getRendererFrom } = ContextsPreviewAPI();
|
||||
return getRendererFrom(React.createElement)(contextNodes, propsMap, getStoryVNode);
|
||||
return getRendererFrom(createElement)(contextNodes, propsMap, getStoryVNode);
|
||||
};
|
||||
|
||||
export const withContexts = createAddonDecorator(renderReact);
|
||||
|
||||
1
addons/contexts/src/shared/types.d.ts
vendored
1
addons/contexts/src/shared/types.d.ts
vendored
@ -6,7 +6,6 @@ export { API as ManagerAPI } from '@storybook/api';
|
||||
// helpers
|
||||
export declare type AnyFunctionReturns<T> = (...arg: any[]) => T;
|
||||
export declare type FCNoChildren<P> = FunctionComponent<{ children?: never } & P>;
|
||||
export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
||||
export declare type GenericProp = null | {
|
||||
readonly [key: string]: unknown;
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,10 +32,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import { addons, types } from '@storybook/addons';
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation.
|
||||
|
||||
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into simple, easy-to-read pages.
|
||||
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
|
||||
|
||||
**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
|
||||
|
||||
|
||||
@ -114,7 +114,7 @@ For example, here's the source for `Badge`:
|
||||
|
||||
```js
|
||||
/**
|
||||
* Use `Badge` to highlight key info with a predefined status. Easy peasy!
|
||||
* Use `Badge` to highlight key info with a predefined status.
|
||||
*/
|
||||
export const Badge = ({ status, children }) => { ... }
|
||||
```
|
||||
@ -239,9 +239,9 @@ The docs preset assumes this naming convention for its `source-loader` setup. If
|
||||
|
||||
## Inline stories vs. Iframe stories
|
||||
|
||||
Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but, of course, it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
|
||||
Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
|
||||
|
||||
That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` is the easy part. It's just tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through a simple effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
|
||||
That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through an effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
@ -259,7 +259,7 @@ addParameters({
|
||||
});
|
||||
```
|
||||
|
||||
With that simple function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
|
||||
With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
|
||||
|
||||
|
||||
## More resources
|
||||
|
||||
@ -40,7 +40,7 @@ Shows up in the dev tools as follows:
|
||||
<img src="./media/faq-devtools.png" width="100%" />
|
||||
</center>
|
||||
|
||||
This is just [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so it should be easy to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
|
||||
This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so there are ways to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
|
||||
|
||||
## More resources
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
## Basic example
|
||||
|
||||
Let's get started with a simple example that combines markdown with a single story:
|
||||
Let's get started with an example that combines markdown with a single story:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
@ -74,7 +74,7 @@ export const allCheckboxes = () => (
|
||||
);
|
||||
```
|
||||
|
||||
There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user this means your existing Storybook knowledge should easily translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
|
||||
There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user, this means your existing Storybook knowledge should translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
|
||||
|
||||
## Writing stories
|
||||
|
||||
@ -182,7 +182,7 @@ If you don't define stories in your MDX, you can write MDX documentation and ass
|
||||
|
||||
If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](recipes.md#csf-stories-with-mdx-docs).
|
||||
|
||||
To get a "documentation-only story", in your UI, simply define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
|
||||
To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
|
||||
|
||||
<center>
|
||||
<img src="./media/mdx-documentation-only.png" width="100%" />
|
||||
|
||||
@ -25,7 +25,7 @@ If you want to intersperse longform documentation in your Storybook, for example
|
||||
|
||||
## Mixed CSF / MDX Stories
|
||||
|
||||
Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) make it easy.
|
||||
Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) can help.
|
||||
|
||||
The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles.
|
||||
|
||||
@ -42,7 +42,7 @@ import { Button } from './Button';
|
||||
export default {
|
||||
title: 'Demo/Button',
|
||||
component: Button,
|
||||
includeStories: [], // or simply don't load this file at all
|
||||
includeStories: [], // or don't load this file at all
|
||||
};
|
||||
|
||||
export const basic = () => <Button>Basic</Button>;
|
||||
@ -66,7 +66,7 @@ I can define a story with the function imported from CSF:
|
||||
|
||||
<Story name="basic">{stories.basic}</Story>
|
||||
|
||||
And of course I can also embed arbitrary markdown & JSX in this file.
|
||||
And I can also embed arbitrary markdown & JSX in this file.
|
||||
|
||||
<SomeComponent prop1="val1" />
|
||||
```
|
||||
@ -94,7 +94,7 @@ I can embed a story (but not define one, since this file should not contain a `M
|
||||
|
||||
<Story id="some--id" />
|
||||
|
||||
And of course I can also embed arbitrary markdown & JSX in this file.
|
||||
And I can also embed arbitrary markdown & JSX in this file.
|
||||
|
||||
<SomeComponent prop1="val1" />
|
||||
```
|
||||
@ -171,9 +171,9 @@ addParameters({
|
||||
|
||||
> ⚠️ The `--docs` flag is an experimental feature in Storybook 5.2. The behavior may change in 5.3 outside of the normal semver rules. Be forewarned!
|
||||
|
||||
The Storybook UI is a workshop for developing components in isolation. Storybook Docs is a showcase for documenting your components. During component/docs development, it’s useful to see both of these modes side by side. But when you export your static storybook, you might want to just export the docs to reduce clutter.
|
||||
The Storybook UI is a workshop for developing components in isolation. Storybook Docs is a showcase for documenting your components. During component/docs development, it’s useful to see both of these modes side by side. But when you export your static storybook, you might want to export the docs to reduce clutter.
|
||||
|
||||
To address this, we’ve added a CLI flag to export just the docs. This flag is also available in dev mode:
|
||||
To address this, we’ve added a CLI flag to only export the docs. This flag is also available in dev mode:
|
||||
|
||||
```sh
|
||||
yarn build-storybook --docs
|
||||
|
||||
@ -27,7 +27,7 @@ addParameters({
|
||||
|
||||
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all of the Docs components are tagged with class names to make this possible. This is advanced usage: use at your own risk.
|
||||
|
||||
The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, simply "inspect element" in your browser.
|
||||
The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, use "inspect element" in your browser.
|
||||
|
||||
You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays:
|
||||
|
||||
@ -39,7 +39,7 @@ You can style these classes in `.storybook/preview-head.html`. For example, here
|
||||
</style>
|
||||
```
|
||||
|
||||
> NOTE: All of these elements also have the `sbdocs` class, which is simply an idiomatic way of increasing the CSS specificity so you don't have to use `!important`.
|
||||
> NOTE: All of these elements also have the `sbdocs` class, which is an idiomatic way of increasing the CSS specificity so you don't have to use `!important`.
|
||||
|
||||
## MDX component overrides
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,16 +42,16 @@
|
||||
"@mdx-js/loader": "^1.1.0",
|
||||
"@mdx-js/mdx": "^1.1.0",
|
||||
"@mdx-js/react": "^1.0.27",
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/router": "5.3.0-alpha.17",
|
||||
"@storybook/source-loader": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/router": "5.3.0-alpha.20",
|
||||
"@storybook/source-loader": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"js-string-escape": "^1.0.1",
|
||||
"lodash": "^4.17.11",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`;
|
||||
|
||||
@ -6,6 +6,6 @@ export interface AnchorProps {
|
||||
storyId: string;
|
||||
}
|
||||
|
||||
export const Anchor: React.FC<AnchorProps> = ({ storyId, children }) => (
|
||||
export const Anchor: FunctionComponent<AnchorProps> = ({ storyId, children }) => (
|
||||
<div id={anchorBlockIdFromId(storyId)}>{children}</div>
|
||||
);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { Component, CURRENT_SELECTION } from './shared';
|
||||
@ -66,7 +66,7 @@ ${getDocgen(target) || ''}
|
||||
}
|
||||
};
|
||||
|
||||
const DescriptionContainer: React.FunctionComponent<DescriptionProps> = props => (
|
||||
const DescriptionContainer: FunctionComponent<DescriptionProps> = props => (
|
||||
<DocsContext.Consumer>
|
||||
{context => {
|
||||
const { markdown } = getDescriptionProps(props, context);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent, useEffect } from 'react';
|
||||
import { document } from 'global';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
|
||||
@ -15,7 +15,7 @@ interface DocsContainerProps {
|
||||
interface CodeOrSourceProps {
|
||||
className?: string;
|
||||
}
|
||||
export const CodeOrSource: React.FC<CodeOrSourceProps> = props => {
|
||||
export const CodeOrSource: FunctionComponent<CodeOrSourceProps> = props => {
|
||||
const { className, children, ...rest } = props;
|
||||
// markdown-to-jsx does not add className to inline code
|
||||
if (
|
||||
@ -41,17 +41,14 @@ const defaultComponents = {
|
||||
code: CodeOrSource,
|
||||
};
|
||||
|
||||
export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
|
||||
context,
|
||||
children,
|
||||
}) => {
|
||||
export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
|
||||
const { id: storyId = null, parameters = {} } = context || {};
|
||||
const options = parameters.options || {};
|
||||
const theme = ensureTheme(options.theme);
|
||||
const { components: userComponents = null } = parameters.docs || {};
|
||||
const components = { ...defaultComponents, ...userComponents };
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
let element = document.getElementById(anchorBlockIdFromId(storyId));
|
||||
if (!element) {
|
||||
element = document.getElementById(storyBlockIdFromId(storyId));
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import { Context, createContext } from 'react';
|
||||
|
||||
export interface DocsContextProps {
|
||||
id?: string;
|
||||
@ -16,4 +16,4 @@ export interface DocsContextProps {
|
||||
forceRender?: () => void;
|
||||
}
|
||||
|
||||
export const DocsContext: React.Context<DocsContextProps> = React.createContext({});
|
||||
export const DocsContext: Context<DocsContextProps> = createContext({});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
import { parseKind } from '@storybook/router';
|
||||
import { DocsPage as PureDocsPage, PropsTable, PropsTableProps } from '@storybook/components';
|
||||
@ -79,7 +79,7 @@ const defaultStoriesSlot: StoriesSlot = stories => {
|
||||
const StoriesHeading = H2;
|
||||
const StoryHeading = H3;
|
||||
|
||||
const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
|
||||
const DocsStory: FunctionComponent<DocsStoryProps> = ({
|
||||
id,
|
||||
name,
|
||||
expanded = true,
|
||||
@ -97,7 +97,7 @@ const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
|
||||
export const DocsPage: FunctionComponent<DocsPageProps> = ({
|
||||
titleSlot = defaultTitleSlot,
|
||||
subtitleSlot = defaultSubtitleSlot,
|
||||
descriptionSlot = defaultDescriptionSlot,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import { FunctionComponent } from 'react';
|
||||
|
||||
type Decorator = (...args: any) => any;
|
||||
|
||||
@ -14,4 +14,4 @@ interface MetaProps {
|
||||
* and gets transformed into a default export underneath the hood.
|
||||
* It doesn't actually render anything.
|
||||
*/
|
||||
export const Meta: React.FunctionComponent<MetaProps> = props => null;
|
||||
export const Meta: FunctionComponent<MetaProps> = props => null;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { ReactNodeArray } from 'react';
|
||||
import React, { FunctionComponent, ReactElement, ReactNode, ReactNodeArray } from 'react';
|
||||
import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
|
||||
import { getSourceProps } from './Source';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
@ -11,23 +11,26 @@ export enum SourceState {
|
||||
|
||||
type PreviewProps = PurePreviewProps & {
|
||||
withSource?: SourceState;
|
||||
mdxSource?: string;
|
||||
};
|
||||
|
||||
const getPreviewProps = (
|
||||
{
|
||||
withSource = SourceState.CLOSED,
|
||||
children,
|
||||
...props
|
||||
}: PreviewProps & { children?: React.ReactNode },
|
||||
{ withSource = SourceState.CLOSED, mdxSource, children, ...props }: PreviewProps & { children?: ReactNode },
|
||||
{ mdxStoryNameToId, storyStore }: DocsContextProps
|
||||
): PurePreviewProps => {
|
||||
if (withSource === SourceState.NONE && !children) {
|
||||
if (withSource === SourceState.NONE) {
|
||||
return props;
|
||||
}
|
||||
if (mdxSource) {
|
||||
return {
|
||||
...props,
|
||||
withSource: getSourceProps({ code: decodeURI(mdxSource) }, { storyStore }),
|
||||
};
|
||||
}
|
||||
const childArray: ReactNodeArray = Array.isArray(children) ? children : [children];
|
||||
const stories = childArray.filter(
|
||||
(c: React.ReactElement) => c.props && (c.props.id || c.props.name)
|
||||
) as React.ReactElement[];
|
||||
(c: ReactElement) => c.props && (c.props.id || c.props.name)
|
||||
) as ReactElement[];
|
||||
const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]);
|
||||
const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
|
||||
return {
|
||||
@ -37,7 +40,7 @@ const getPreviewProps = (
|
||||
};
|
||||
};
|
||||
|
||||
export const Preview: React.FunctionComponent<PreviewProps> = props => (
|
||||
export const Preview: FunctionComponent<PreviewProps> = props => (
|
||||
<DocsContext.Consumer>
|
||||
{context => {
|
||||
const previewProps = getPreviewProps(props, context);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { Component, CURRENT_SELECTION } from './shared';
|
||||
@ -44,7 +44,7 @@ export const getPropsTableProps = (
|
||||
}
|
||||
};
|
||||
|
||||
const PropsContainer: React.FunctionComponent<PropsProps> = props => (
|
||||
const PropsContainer: FunctionComponent<PropsProps> = props => (
|
||||
<DocsContext.Consumer>
|
||||
{context => {
|
||||
const propsTableProps = getPropsTableProps(props, context);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { CURRENT_SELECTION } from './shared';
|
||||
@ -85,7 +85,7 @@ export const getSourceProps = (
|
||||
* or the source for a story if `storyId` is provided, or
|
||||
* the source for the current story if nothing is provided.
|
||||
*/
|
||||
const SourceContainer: React.FunctionComponent<SourceProps> = props => (
|
||||
const SourceContainer: FunctionComponent<SourceProps> = props => (
|
||||
<DocsContext.Consumer>
|
||||
{context => {
|
||||
const sourceProps = getSourceProps(props, context);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { createElement, ElementType, FunctionComponent, ReactNode } from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { components as docsComponents } from '@storybook/components/html';
|
||||
import { Story, StoryProps as PureStoryProps } from '@storybook/components';
|
||||
@ -8,9 +8,9 @@ import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
|
||||
export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
|
||||
|
||||
const resetComponents: Record<string, React.ElementType> = {};
|
||||
const resetComponents: Record<string, ElementType> = {};
|
||||
Object.keys(docsComponents).forEach(key => {
|
||||
resetComponents[key] = (props: any) => React.createElement(key, props);
|
||||
resetComponents[key] = (props: any) => createElement(key, props);
|
||||
});
|
||||
|
||||
interface CommonProps {
|
||||
@ -20,7 +20,7 @@ interface CommonProps {
|
||||
|
||||
type StoryDefProps = {
|
||||
name: string;
|
||||
children: React.ReactNode;
|
||||
children: ReactNode;
|
||||
} & CommonProps;
|
||||
|
||||
type StoryRefProps = {
|
||||
@ -66,7 +66,7 @@ export const getStoryProps = (
|
||||
const { storyFn = undefined, name: storyName = undefined } = data || {};
|
||||
|
||||
const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
|
||||
if (storyIsInline && !prepareForInline) {
|
||||
if (storyIsInline && !prepareForInline && framework !== 'react') {
|
||||
throw new Error(
|
||||
`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`
|
||||
);
|
||||
@ -81,7 +81,7 @@ export const getStoryProps = (
|
||||
};
|
||||
};
|
||||
|
||||
const StoryContainer: React.FunctionComponent<StoryProps> = props => (
|
||||
const StoryContainer: FunctionComponent<StoryProps> = props => (
|
||||
<DocsContext.Consumer>
|
||||
{context => {
|
||||
const storyProps = getStoryProps(props, context);
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
interface WrapperProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Wrapper: React.FunctionComponent<WrapperProps> = ({ children }) => (
|
||||
export const Wrapper: FunctionComponent = ({ children }) => (
|
||||
<div style={{ fontFamily: 'sans-serif' }}>{children}</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,7 @@ addParameters({
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
// react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline
|
||||
prepareForInline: (storyFn: StoryFn) => storyFn(),
|
||||
// NOTE: that the result is a react element. Hooks support is provided by the outer code.
|
||||
prepareForInline: storyFn => storyFn(),
|
||||
},
|
||||
});
|
||||
|
||||
@ -338,6 +338,10 @@ function MDXContent({ components, ...props }) {
|
||||
</Story>
|
||||
<Story id=\\"welcome--welcome\\" mdxType=\\"Story\\" />
|
||||
</Preview>
|
||||
<p>{\`Preview wthout a story\`}</p>
|
||||
<Preview mdxSource=\\"%0A%3CButton%3EJust%20a%20button%3C/Button%3E%0A\\" mdxType=\\"Preview\\">
|
||||
<Button mdxType=\\"Button\\">Just a button</Button>
|
||||
</Preview>
|
||||
</MDXLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -17,3 +17,10 @@ Previews can contain normal components, stories, and story references
|
||||
</Story>
|
||||
<Story id="welcome--welcome" />
|
||||
</Preview>
|
||||
|
||||
|
||||
Preview wthout a story
|
||||
|
||||
<Preview>
|
||||
<Button>Just a button</Button>
|
||||
</Preview>
|
||||
@ -192,7 +192,68 @@ function stringifyMeta(meta) {
|
||||
return result;
|
||||
}
|
||||
|
||||
const hasStoryChild = node => {
|
||||
if (node.openingElement && node.openingElement.name.name === 'Story') {
|
||||
return node;
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
return node.children.find(child => hasStoryChild(child));
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
function extractExports(node, options) {
|
||||
node.children.forEach(child => {
|
||||
if (child.type === 'jsx') {
|
||||
try {
|
||||
const ast = parser.parseExpression(child.value, { plugins: ['jsx'] });
|
||||
if (
|
||||
ast.openingElement &&
|
||||
ast.openingElement.type === 'JSXOpeningElement' &&
|
||||
ast.openingElement.name.name === 'Preview' &&
|
||||
!hasStoryChild(ast)
|
||||
) {
|
||||
const previewAst = ast.openingElement;
|
||||
previewAst.attributes.push({
|
||||
type: 'JSXAttribute',
|
||||
name: {
|
||||
type: 'JSXIdentifier',
|
||||
name: 'mdxSource',
|
||||
},
|
||||
value: {
|
||||
type: 'StringLiteral',
|
||||
value: encodeURI(
|
||||
ast.children
|
||||
.map(
|
||||
el =>
|
||||
generate(el, {
|
||||
quotes: 'double',
|
||||
}).code
|
||||
)
|
||||
.join('\n')
|
||||
),
|
||||
},
|
||||
});
|
||||
}
|
||||
const { code } = generate(ast, {});
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
child.value = code;
|
||||
} catch {
|
||||
/** catch erroneous child.value string where the babel parseExpression makes exception
|
||||
* https://github.com/mdx-js/mdx/issues/767
|
||||
* eg <button>
|
||||
* <div>hello world</div>
|
||||
*
|
||||
* </button>
|
||||
* generates error
|
||||
* 1. child.value =`<button>\n <div>hello world</div`
|
||||
* 2. child.value =`\n`
|
||||
* 3. child.value =`</button>`
|
||||
*
|
||||
*/
|
||||
}
|
||||
}
|
||||
});
|
||||
// we're overriding default export
|
||||
const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
|
||||
const storyExports = [];
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,14 +31,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-api": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-api": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.11",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { ChangeEvent, Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
@ -12,7 +12,7 @@ interface StyledTextareaProps {
|
||||
shown: boolean;
|
||||
failed: boolean;
|
||||
value?: string;
|
||||
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
||||
onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
|
||||
}
|
||||
|
||||
const StyledTextarea = styled(({ shown, failed, ...rest }: StyledTextareaProps) => (
|
||||
@ -143,7 +143,7 @@ class Item extends Component<ItemProps, ItemState> {
|
||||
prevPayload: null,
|
||||
};
|
||||
|
||||
onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newState: Partial<ItemState> = {
|
||||
payloadString: value,
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import Panel from './components/Panel';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,8 +29,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.14.2",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import GraphiQL from 'graphiql';
|
||||
|
||||
import 'graphiql/graphiql.css';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,10 +29,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"jsx-to-string": "^1.4.0",
|
||||
|
||||
@ -1334,11 +1334,9 @@ exports[`addon Info should render component description if story kind matches co
|
||||
>
|
||||
<SyntaxHighlighter
|
||||
bordered={true}
|
||||
className={null}
|
||||
copyable={true}
|
||||
format={false}
|
||||
language="js"
|
||||
padded={false}
|
||||
>
|
||||
<Styled(div)
|
||||
bordered={true}
|
||||
@ -3118,11 +3116,9 @@ exports[`addon Info should render component description if story kind matches co
|
||||
>
|
||||
<SyntaxHighlighter
|
||||
bordered={true}
|
||||
className={null}
|
||||
copyable={true}
|
||||
format={false}
|
||||
language="jsx"
|
||||
padded={false}
|
||||
>
|
||||
<Styled(div)
|
||||
bordered={true}
|
||||
@ -5893,11 +5889,9 @@ exports[`addon Info should render component description if story name matches co
|
||||
>
|
||||
<SyntaxHighlighter
|
||||
bordered={true}
|
||||
className={null}
|
||||
copyable={true}
|
||||
format={false}
|
||||
language="js"
|
||||
padded={false}
|
||||
>
|
||||
<Styled(div)
|
||||
bordered={true}
|
||||
@ -7905,11 +7899,9 @@ exports[`addon Info should render component description if story name matches co
|
||||
>
|
||||
<SyntaxHighlighter
|
||||
bordered={true}
|
||||
className={null}
|
||||
copyable={true}
|
||||
format={false}
|
||||
language="jsx"
|
||||
padded={false}
|
||||
>
|
||||
<Styled(div)
|
||||
bordered={true}
|
||||
|
||||
@ -38,7 +38,7 @@ You may want to add it the result file to `.gitignore`, since it's a generated f
|
||||
|
||||
But much like lockfiles and snapshots checking-in generated files can have certain advantages as well. It's up to you.
|
||||
We recommend to **do** check in the test results file so starting storybook from an clean git clone doesn't require running all tests first,
|
||||
but this can mean you'll experience merge conflicts on this file in the future. (_re-generating this file is super easy though, just like lockfiles and snapshots_)
|
||||
but this can mean you'll experience merge conflicts on this file in the future. (_re-generating this file is very similar to re-generating lockfiles and snapshots_)
|
||||
|
||||
## Generating the test results
|
||||
|
||||
@ -96,7 +96,7 @@ storiesOf('MyComponent', module)
|
||||
);
|
||||
```
|
||||
|
||||
Or in order to avoid importing `.jest-test-results.json` in each story, simply add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on:
|
||||
Or in order to avoid importing `.jest-test-results.json` in each story, add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on:
|
||||
|
||||
```js
|
||||
import { addDecorator } from '@storybook/react'; // <- or your view layer
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,11 +35,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Component as ReactComponent, ComponentType } from 'react';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
import { API } from '@storybook/api';
|
||||
import { ADD_TESTS } from '../shared';
|
||||
@ -34,8 +34,8 @@ export interface HocState {
|
||||
tests?: Test[];
|
||||
}
|
||||
|
||||
const provideTests = (Component: React.ComponentType<InjectedProps>) =>
|
||||
class TestProvider extends React.Component<HocProps, HocState> {
|
||||
const provideTests = (Component: ComponentType<InjectedProps>) =>
|
||||
class TestProvider extends ReactComponent<HocProps, HocState> {
|
||||
state: HocState = {};
|
||||
|
||||
static defaultProps = {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import addons, { Parameters, DecoratorFunction, StoryFn } from '@storybook/addons';
|
||||
import addons, { Parameters, StoryFn } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { normalize, sep } from 'upath';
|
||||
import { ADD_TESTS } from './shared';
|
||||
@ -51,15 +51,15 @@ const emitAddTests = ({ kind, story, testFiles, options }: EmitAddTestsArg) => {
|
||||
export const withTests = (userOptions: {
|
||||
results: any;
|
||||
filesExt?: string;
|
||||
}): DecoratorFunction<unknown> => {
|
||||
}) => {
|
||||
const defaultOptions = {
|
||||
filesExt: '((\\.specs?)|(\\.tests?))?(\\.[jt]sx?)?$',
|
||||
};
|
||||
const options = { ...defaultOptions, ...userOptions };
|
||||
|
||||
return (...args) => {
|
||||
return (...args: any []) => {
|
||||
if (typeof args[0] === 'string') {
|
||||
return deprecate((storyFn: StoryFn<unknown>, { kind }: Parameters) => {
|
||||
return deprecate((storyFn: StoryFn<any>, { kind }: Parameters) => {
|
||||
emitAddTests({ kind, story: storyFn, testFiles: (args as any) as string[], options });
|
||||
|
||||
return storyFn();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,19 +29,19 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-api": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-api": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"qs": "^6.6.0",
|
||||
"react-color": "^2.17.0",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import Panel from './components/Panel';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,10 +29,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/router": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/router": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import React, { MouseEvent, PureComponent, ReactNode } from 'react';
|
||||
|
||||
import { navigate, hrefTo } from '../../preview';
|
||||
|
||||
@ -8,10 +8,10 @@ import { navigate, hrefTo } from '../../preview';
|
||||
// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
|
||||
const LEFT_BUTTON = 0;
|
||||
|
||||
const isPlainLeftClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>
|
||||
const isPlainLeftClick = (e: MouseEvent<HTMLAnchorElement>) =>
|
||||
e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
|
||||
|
||||
const cancelled = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, cb = (_e: any) => {}) => {
|
||||
const cancelled = (e: MouseEvent<HTMLAnchorElement>, cb = (_e: any) => {}) => {
|
||||
if (isPlainLeftClick(e)) {
|
||||
e.preventDefault();
|
||||
cb(e);
|
||||
@ -21,7 +21,7 @@ const cancelled = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, cb = (_e:
|
||||
interface Props {
|
||||
kind: string;
|
||||
story: string;
|
||||
children: React.ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
||||
@ -35,7 +35,7 @@ import { storiesOf } from '@storybook/react';
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module).add('with some emoji', () => <Component />, {
|
||||
notes: 'A very simple example of addon notes',
|
||||
notes: 'An example of addon notes',
|
||||
});
|
||||
```
|
||||
|
||||
@ -53,7 +53,7 @@ storiesOf('MyButton', module).add(
|
||||
template: '<my-button>😀 😎 👍 💯</my-button>',
|
||||
}),
|
||||
{
|
||||
notes: 'A very simple example of addon notes',
|
||||
notes: 'An example of addon notes',
|
||||
}
|
||||
);
|
||||
```
|
||||
@ -74,7 +74,7 @@ storiesOf('Button', module).add(
|
||||
}
|
||||
}),
|
||||
{
|
||||
notes: 'A very simple example of addon notes',
|
||||
notes: 'An example of addon notes',
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,13 +30,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/router": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/router": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.10.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,13 +26,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.3.0-alpha.17"
|
||||
"@storybook/addon-actions": "5.3.0-alpha.20"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable react/no-array-index-key */
|
||||
/* eslint-disable no-nested-ternary */
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { Button, View, Text } from 'react-native';
|
||||
|
||||
const theme = {
|
||||
@ -22,7 +22,7 @@ const theme = {
|
||||
ARROW_ANIMATION_DURATION: '0',
|
||||
};
|
||||
|
||||
class Inspect extends React.Component<{ name?: string; value: any }, { expanded: boolean }> {
|
||||
class Inspect extends Component<{ name?: string; value: any }, { expanded: boolean }> {
|
||||
state = { expanded: false };
|
||||
|
||||
render() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { Button, View, Text, ScrollView } from 'react-native';
|
||||
import { ActionDisplay } from '@storybook/addon-actions';
|
||||
import Inspect from './Inspect';
|
||||
@ -8,7 +8,7 @@ interface ActionLoggerProps {
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
|
||||
export const ActionLogger: FunctionComponent<ActionLoggerProps> = ({ actions, onClear }) => (
|
||||
<ScrollView>
|
||||
<ScrollView horizontal>
|
||||
<View>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from '@storybook/addon-actions';
|
||||
import ActionLogger from './containers/ActionLogger';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,9 +31,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-api": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-api": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import Constants from './constants';
|
||||
import { Channel } from './BackgroundPanel';
|
||||
@ -12,7 +12,7 @@ interface ContainerState {
|
||||
background: string;
|
||||
}
|
||||
|
||||
export default class Container extends React.Component<ContainerProps, ContainerState> {
|
||||
export default class Container extends Component<ContainerProps, ContainerState> {
|
||||
constructor(props: ContainerProps) {
|
||||
super(props);
|
||||
this.state = { background: props.initialBackground || '' };
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import addons, { makeDecorator } from '@storybook/addons';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,8 +27,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -36,7 +36,7 @@ import { storiesOf } from '@storybook/react-native';
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module).add('with some emoji', () => <Component />, {
|
||||
notes: 'A very simple component',
|
||||
notes: 'A small component',
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,11 +27,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-api": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-api": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable react/destructuring-assignment */
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import Markdown from 'react-native-simple-markdown';
|
||||
import { AddonStore } from '@storybook/addons';
|
||||
@ -19,7 +19,7 @@ interface NotesState {
|
||||
selection: Selection;
|
||||
}
|
||||
|
||||
export class Notes extends React.Component<NotesProps, NotesState> {
|
||||
export class Notes extends Component<NotesProps, NotesState> {
|
||||
componentDidMount() {
|
||||
this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { Notes } from './components/Notes';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
|
||||
@ -17,7 +17,7 @@ yarn add @storybook/addon-storyshots --dev
|
||||
```
|
||||
|
||||
## Configure your app for Jest
|
||||
In many cases, for example Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`.
|
||||
In many cases, for example Create React App, it's already configured for Jest. You need to create a filename with the extension `.test.js`.
|
||||
|
||||
If you still need to configure jest you can use the resources mentioned below:
|
||||
|
||||
@ -96,7 +96,7 @@ First, install it:
|
||||
yarn add require-context.macro --dev
|
||||
```
|
||||
|
||||
Now, inside of your Storybook config file, simply import the macro and run it in place of `require.context`, like so:
|
||||
Now, inside of your Storybook config file, import the macro and run it in place of `require.context`, like so:
|
||||
|
||||
```javascript
|
||||
import requireContext from 'require-context.macro';
|
||||
@ -587,7 +587,7 @@ Like the default, but allows you to specify a set of options for the renderer, j
|
||||
|
||||
### `multiSnapshotWithOptions(options)`
|
||||
|
||||
Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, simply pass an empty object.
|
||||
Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, you can pass an empty object.
|
||||
If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
|
||||
```js
|
||||
// jest.config.js
|
||||
@ -602,7 +602,7 @@ module.exports = {
|
||||
#### integrityOptions
|
||||
|
||||
This option is useful when running test with `multiSnapshotWithOptions(options)` in order to track snapshots are matching the stories. (disabled by default).
|
||||
The value is just a [settings](https://github.com/isaacs/node-glob#options) to a `glob` object, that searches for the snapshot files.
|
||||
The value is a [settings](https://github.com/isaacs/node-glob#options) to a `glob` object, that searches for the snapshot files.
|
||||
|
||||
```js
|
||||
initStoryshots({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,8 +33,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^24.9.0",
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/client-api": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/client-api": "5.3.0-alpha.20",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^24.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
|
||||
@ -121,6 +121,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
|
||||
@ -101,6 +101,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
|
||||
@ -5,6 +5,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
|
||||
@ -5,6 +5,7 @@ exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
|
||||
@ -40,7 +40,7 @@ initStoryshots({
|
||||
done();
|
||||
}, TIMEOUT);
|
||||
} else {
|
||||
// If not async just mark the test as done
|
||||
// If not async, mark the test as done
|
||||
done();
|
||||
}
|
||||
},
|
||||
|
||||
@ -205,7 +205,7 @@ You can find a working example of this in the [official-storybook](https://githu
|
||||
|
||||
You have two options here, you can either:
|
||||
|
||||
- Simply add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
|
||||
- Add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
|
||||
|
||||
- Create a custom test file using Jest outside of the CRA scope:
|
||||
|
||||
@ -227,7 +227,7 @@ You have two options here, you can either:
|
||||
|
||||
### Reminder
|
||||
|
||||
An image snapshot is simply a screenshot taken by a web browser (in our case, Chrome).
|
||||
An image snapshot is a screenshot taken by a web browser (in our case, Chrome).
|
||||
|
||||
The browser opens a page (either using the static build of storybook or a running instance of Storybook)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,8 +29,8 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "5.3.0-alpha.17",
|
||||
"@storybook/router": "5.3.0-alpha.17",
|
||||
"@storybook/node-logger": "5.3.0-alpha.20",
|
||||
"@storybook/router": "5.3.0-alpha.20",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@types/puppeteer-core": "^1.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/router": "5.3.0-alpha.17",
|
||||
"@storybook/source-loader": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/router": "5.3.0-alpha.20",
|
||||
"@storybook/source-loader": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
@ -118,7 +118,7 @@ addParameters({
|
||||
|
||||
### Use Custom Set of Devices
|
||||
|
||||
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
|
||||
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/api": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/components": "5.3.0-alpha.17",
|
||||
"@storybook/core-events": "5.3.0-alpha.17",
|
||||
"@storybook/theming": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/api": "5.3.0-alpha.20",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/components": "5.3.0-alpha.20",
|
||||
"@storybook/core-events": "5.3.0-alpha.20",
|
||||
"@storybook/theming": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable no-fallthrough */
|
||||
import React, { Fragment, ReactNode, useEffect, useRef, FunctionComponent } from 'react';
|
||||
import React, { Fragment, ReactNode, useEffect, useRef, FunctionComponent, memo } from 'react';
|
||||
import memoize from 'memoizerific';
|
||||
|
||||
import { styled, Global, Theme, withTheme } from '@storybook/theming';
|
||||
@ -122,7 +122,7 @@ const getStyles = (
|
||||
return isRotated ? flip(result) : result;
|
||||
};
|
||||
|
||||
export const ViewportTool: FunctionComponent<{}> = React.memo(
|
||||
export const ViewportTool: FunctionComponent = memo(
|
||||
withTheme(({ theme }: { theme: Theme }) => {
|
||||
const { viewports, defaultViewport, disable } = useParameter<ViewportAddonParameter>(
|
||||
PARAM_KEY,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import addons, { types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID } from './constants';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,9 +33,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/core": "5.3.0-alpha.17",
|
||||
"@storybook/node-logger": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/core": "5.3.0-alpha.20",
|
||||
"@storybook/node-logger": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.4",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -31,7 +31,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.3.0-alpha.17",
|
||||
"@storybook/core": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,8 +33,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.17",
|
||||
"@storybook/core": "5.3.0-alpha.17",
|
||||
"@storybook/addons": "5.3.0-alpha.20",
|
||||
"@storybook/core": "5.3.0-alpha.20",
|
||||
"@types/webpack-env": "^1.13.9",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,8 +33,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@marko/webpack": "^2.0.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.17",
|
||||
"@storybook/core": "5.3.0-alpha.17",
|
||||
"@storybook/client-logger": "5.3.0-alpha.20",
|
||||
"@storybook/core": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,7 +33,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.3.0-alpha.17",
|
||||
"@storybook/core": "5.3.0-alpha.20",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "5.3.0-alpha.17",
|
||||
"version": "5.3.0-alpha.20",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -32,7 +32,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.3.0-alpha.17",
|
||||
"@storybook/core": "5.3.0-alpha.20",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
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