mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 14:11:26 +08:00
Merge branch 'next' into performance-fix-knob-change-debouncing
This commit is contained in:
Alex Wilson
GitHub
commit
ca63d0ec9a
@ -200,6 +200,25 @@ jobs:
|
||||
command: |
|
||||
cd examples-native/crna-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
frontpage:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: Restore core dependencies cache
|
||||
keys:
|
||||
- core-dependencies-v3-{{ checksum "yarn.lock" }}
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install
|
||||
- run:
|
||||
name: Trigger build
|
||||
command: ./scripts/build-frontpage.js
|
||||
- save_cache:
|
||||
name: Cache core dependencies
|
||||
key: core-dependencies-v3-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache/yarn
|
||||
docs:
|
||||
<<: *defaults
|
||||
steps:
|
||||
@ -288,6 +307,7 @@ workflows:
|
||||
jobs:
|
||||
- build
|
||||
- docs
|
||||
- frontpage
|
||||
- lint:
|
||||
requires:
|
||||
- docs
|
||||
|
||||
@ -18,3 +18,8 @@ lib/cli/test
|
||||
!.eslintrc-markdown.js
|
||||
!.jest.config.js
|
||||
!.storybook
|
||||
|
||||
REACT_NATIVE
|
||||
examples-native
|
||||
react-native
|
||||
ondevice-*
|
||||
@ -39,6 +39,7 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
|
||||
}
|
||||
retryBuild {
|
||||
delaySeconds = 60
|
||||
enabled = false
|
||||
}
|
||||
finishBuildTrigger {
|
||||
enabled = false
|
||||
|
||||
@ -43,7 +43,9 @@ object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({
|
||||
+:next
|
||||
""".trimIndent()
|
||||
}
|
||||
retryBuild {}
|
||||
retryBuild {
|
||||
enabled = false
|
||||
}
|
||||
}
|
||||
|
||||
features {
|
||||
|
||||
107
CHANGELOG.md
107
CHANGELOG.md
@ -1,3 +1,109 @@
|
||||
## 5.1.0-alpha.0 (March 6, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* UI: Custom scrollbars ([#5714](https://github.com/storybooks/storybook/pull/5714))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Fix: Move `react-select` dependency to 2.2 ([#5867](https://github.com/storybooks/storybook/pull/5867))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Cleanup unused dependencies ([#5453](https://github.com/storybooks/storybook/pull/5453))
|
||||
* Add directory attribute to repositories in package.json files ([#5643](https://github.com/storybooks/storybook/pull/5643))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Project-wide dependency upgrades ([#5740](https://github.com/storybooks/storybook/pull/5740))
|
||||
* Bump react-is from 16.8.1 to 16.8.3 ([#5743](https://github.com/storybooks/storybook/pull/5743))
|
||||
* Bump danger from 7.0.13 to 7.0.14 ([#5744](https://github.com/storybooks/storybook/pull/5744))
|
||||
* Bump babel-plugin-named-asset-import from 0.3.0 to 0.3.1 ([#5745](https://github.com/storybooks/storybook/pull/5745))
|
||||
* Bump eslint-plugin-json from 1.3.2 to 1.4.0 ([#5719](https://github.com/storybooks/storybook/pull/5719))
|
||||
* Bump react-native-modal-datetime-picker from 5.1.0 to 6.0.0 ([#4425](https://github.com/storybooks/storybook/pull/4425))
|
||||
* Bump immer from 1.12.0 to 2.0.0 ([#5694](https://github.com/storybooks/storybook/pull/5694))
|
||||
* Bump danger from 7.0.11 to 7.0.13 ([#5696](https://github.com/storybooks/storybook/pull/5696))
|
||||
* Bump eslint-plugin-jsx-a11y from 6.2.0 to 6.2.1 ([#5698](https://github.com/storybooks/storybook/pull/5698))
|
||||
* Bump @angular/platform-browser-dynamic from 7.2.4 to 7.2.6 ([#5697](https://github.com/storybooks/storybook/pull/5697))
|
||||
* Bump eslint from 5.12.1 to 5.14.1 ([#5653](https://github.com/storybooks/storybook/pull/5653))
|
||||
* Bump babel-preset-react-app from 7.0.0 to 7.0.1 ([#5674](https://github.com/storybooks/storybook/pull/5674))
|
||||
* Bump react from 16.8.1 to 16.8.2 ([#5673](https://github.com/storybooks/storybook/pull/5673))
|
||||
* Bump @angular/cli from 7.3.0 to 7.3.2 ([#5654](https://github.com/storybooks/storybook/pull/5654))
|
||||
* Bump @types/jest from 24.0.0 to 24.0.6 ([#5655](https://github.com/storybooks/storybook/pull/5655))
|
||||
* Bump lint-staged from 8.1.3 to 8.1.4 ([#5606](https://github.com/storybooks/storybook/pull/5606))
|
||||
* Bump @types/lodash from 4.14.120 to 4.14.121 ([#5609](https://github.com/storybooks/storybook/pull/5609))
|
||||
* Bump webpack from 4.29.0 to 4.29.3 ([#5570](https://github.com/storybooks/storybook/pull/5570))
|
||||
* update modal manager for rn 0.58 support ([#5581](https://github.com/storybooks/storybook/pull/5581))
|
||||
* Bump danger from 7.0.7 to 7.0.11 ([#5568](https://github.com/storybooks/storybook/pull/5568))
|
||||
* Bump jest-jasmine2 from 24.0.0 to 24.1.0 ([#5569](https://github.com/storybooks/storybook/pull/5569))
|
||||
* Bump jest-jasmine2 from 24.0.0 to 24.1.0 ([#5567](https://github.com/storybooks/storybook/pull/5567))
|
||||
* Bump handlebars from 4.0.12 to 4.1.0 ([#5576](https://github.com/storybooks/storybook/pull/5576))
|
||||
* Bump esm from 3.2.1 to 3.2.4 ([#5556](https://github.com/storybooks/storybook/pull/5556))
|
||||
* Bump @types/jest from 23.3.13 to 24.0.0 ([#5554](https://github.com/storybooks/storybook/pull/5554))
|
||||
* Bump webpack-dev-middleware from 3.5.1 to 3.5.2 ([#5552](https://github.com/storybooks/storybook/pull/5552))
|
||||
* Bump @emotion/core from 10.0.6 to 10.0.7 ([#5555](https://github.com/storybooks/storybook/pull/5555))
|
||||
* Bump terser-webpack-plugin from 1.2.1 to 1.2.2 ([#5553](https://github.com/storybooks/storybook/pull/5553))
|
||||
* Bump fuse.js from 3.3.1 to 3.4.2 ([#5538](https://github.com/storybooks/storybook/pull/5538))
|
||||
* Bump @angular/platform-browser-dynamic from 7.2.3 to 7.2.4 ([#5540](https://github.com/storybooks/storybook/pull/5540))
|
||||
* Bump emotion-theming from 10.0.6 to 10.0.7 ([#5541](https://github.com/storybooks/storybook/pull/5541))
|
||||
* Bump eslint-config-prettier from 3.6.0 to 4.0.0 ([#5539](https://github.com/storybooks/storybook/pull/5539))
|
||||
|
||||
## 5.0.0 (March 5, 2019)
|
||||
|
||||
Storybook 5.0 is a completely new UI with the following improvements:
|
||||
|
||||
- 🌓 New design with light and dark themes
|
||||
- 🛠 Canvas toolbar for easy access to addons
|
||||
- 🗺 Overhauled navigation sidebar with an intuitive menu
|
||||
- 🗜 Redesigned addons panel with handy buttons to toggle visibility and orientation
|
||||
- ⌨️ Improved keyboard shortcuts that are user configurable
|
||||
- 🌍 New URL structure that eliminates long strings of query parameters
|
||||
|
||||
5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybooks/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`.
|
||||
|
||||
## 5.0.0-rc.11 (March 5, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Fix base theme initialization and theme bootup ([#5843](https://github.com/storybooks/storybook/pull/5843))
|
||||
* UI: Fix SidebarItem feels "laggy" when clicked ([#5850](https://github.com/storybooks/storybook/pull/5850))
|
||||
|
||||
## 5.0.0-rc.10 (March 4, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-viewports: Restore v4 behaviour ([#5829](https://github.com/storybooks/storybook/pull/5829))
|
||||
* Addon-backgrounds: Remove previously deprecated default export ([#5828](https://github.com/storybooks/storybook/pull/5828))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Addon-a11y: Cleanup and document migration ([#5833](https://github.com/storybooks/storybook/pull/5833))
|
||||
|
||||
## 5.0.0-rc.9 (March 3, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Core: Allow local decorators via params ([#5806](https://github.com/storybooks/storybook/pull/5806))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Add warning for decorators added "mid-kind" ([#5819](https://github.com/storybooks/storybook/pull/5819))
|
||||
* Addon-notes: Support inline code markdown ([#5802](https://github.com/storybooks/storybook/pull/5802))
|
||||
* Theming: Fix theme loading bugs ([#5787](https://github.com/storybooks/storybook/pull/5787))
|
||||
* CLI: Fix build-storybook with simplebar esm files ([#5816](https://github.com/storybooks/storybook/pull/5816))
|
||||
|
||||
## 5.0.0-rc.8 (March 1, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Core: Allow local decorators via params ([#5806](https://github.com/storybooks/storybook/pull/5806))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Sort storiesHash so grouped keys appear together ([#5805](https://github.com/storybooks/storybook/pull/5805))
|
||||
* UI: Close tooltips on iframe clicks on keypresses ([#5807](https://github.com/storybooks/storybook/pull/5807))
|
||||
* Addon-Info: Add font family to info panel ([#5759](https://github.com/storybooks/storybook/pull/5759))
|
||||
|
||||
## 5.0.0-rc.7 (February 28, 2019)
|
||||
|
||||
### Features
|
||||
@ -83,6 +189,7 @@
|
||||
### Features
|
||||
|
||||
* UI: Allow collapsing active story and use separate expansion for filtered ([#5625](https://github.com/storybooks/storybook/pull/5625))
|
||||
* UI: Handle prerelease versions in version check ([#5641](https://github.com/storybooks/storybook/pull/5641))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
|
||||
196
MIGRATION.md
196
MIGRATION.md
@ -2,8 +2,16 @@
|
||||
|
||||
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
|
||||
- [Webpack config simplification](#webpack-config-simplification)
|
||||
- [Theming overhaul](#theming-overhaul)
|
||||
- [Story hierarchy defaults](#story-hierarchy-defaults)
|
||||
- [Options addon deprecated](#options-addon-deprecated)
|
||||
- [Individual story decorators](#individual-story-decorators)
|
||||
- [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
|
||||
- [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
|
||||
- [Addon viewport uses parameters](#addon-viewport-uses-parameters)
|
||||
- [Addon a11y uses parameters](#addon-a11y-uses-parameters-decorator-renamed)
|
||||
- [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
|
||||
- [New URL structure](#new-url-structure)
|
||||
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
|
||||
- [Private addon config](#private-addon-config)
|
||||
- [React 15.x](#react-15x)
|
||||
@ -45,7 +53,7 @@
|
||||
|
||||
Storybook 5.0 includes sweeping UI changes as well as changes to the addon API and custom webpack configuration. We've tried to keep backwards compatibility in most cases, but there are some notable exceptions documented below.
|
||||
|
||||
## Webpack config simplifcation
|
||||
## Webpack config simplification
|
||||
|
||||
The API for custom webpack configuration has been simplifed in 5.0, but it's a breaking change.
|
||||
|
||||
@ -54,13 +62,17 @@ Storybook's "full control mode" for webpack allows you to override the webpack c
|
||||
In Storybook 5 there is a single signature for full-control mode that takes a parameters object with the fields `config` and `mode`:
|
||||
|
||||
```js
|
||||
module.exports = ({ config, mode }) => { config.modules.rules.push(...); return config; }
|
||||
module.exports = ({ config, mode }) => { config.module.rules.push(...); return config; }
|
||||
```
|
||||
|
||||
In contrast, the 4.x configuration function accepted either two or three arguments (`(baseConfig, mode)`, or `(baseConfig, mode, defaultConfig)`). The `config` object in the 5.x signature is equivalent to 4.x's `defaultConfig`.
|
||||
|
||||
Please see the [current custom webpack documentation](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config.
|
||||
|
||||
## Theming overhaul
|
||||
|
||||
Theming has been rewritten in v5. If you used theming in v4, please consult the [theming docs](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/theming/index.md) to learn about the new API.
|
||||
|
||||
## Story hierarchy defaults
|
||||
|
||||
Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
|
||||
@ -139,6 +151,164 @@ Here is the mapping from old options to new:
|
||||
|
||||
Storybook v5 removes the search dialog box in favor of a quick search in the navigation view, so `showSearchBox` has been removed.
|
||||
|
||||
## Individual story decorators
|
||||
|
||||
The behavior of adding decorators to a kind has changed in SB5 ([#5781](https://github.com/storybooks/storybook/issues/5781)).
|
||||
|
||||
In SB4 it was possible to add decorators to only a subset of the stories of a kind.
|
||||
|
||||
```js
|
||||
storiesOf('Stories', module)
|
||||
.add('noncentered', () => 'Hello')
|
||||
.addDecorator(centered)
|
||||
.add('centered', () => 'Hello');
|
||||
```
|
||||
|
||||
The semantics has changed in SB5 so that calling `addDecorator` on a kind adds a decorator to all its stories, no mater the order. So in the previous example, both stories would be centered.
|
||||
|
||||
To allow for a subset of the stories in a kind to be decorated, we've added the ability to add decorators to individual stories using parameters:
|
||||
|
||||
```js
|
||||
storiesOf('Stories', module)
|
||||
.add('noncentered', () => 'Hello')
|
||||
.add('centered', () => 'Hello', { decorators: [centered] });
|
||||
```
|
||||
|
||||
## Addon backgrounds uses parameters
|
||||
|
||||
Similarly, `@storybook/addon-backgrounds` uses parameters to pass background options. If you previously had:
|
||||
|
||||
```js
|
||||
import { withBackgrounds } from `@storybook/addon-backgrounds`;
|
||||
|
||||
storiesOf('Stories', module)
|
||||
.addDecorator(withBackgrounds(options));
|
||||
```
|
||||
|
||||
You should replace it with:
|
||||
|
||||
```js
|
||||
storiesOf('Stories', module).addParameters({ backgrounds: options });
|
||||
```
|
||||
|
||||
You can pass `backgrounds` parameters at the global level (via `addParameters` imported from `@storybook/react` et al.), and the story level (via the third argument to `.add()`).
|
||||
|
||||
## Addon cssresources name attribute renamed
|
||||
|
||||
In the options object for `@storybook/addon-cssresources`, the `name` attribute for each resource has been renamed to `id`. If you previously had:
|
||||
|
||||
```js
|
||||
import { withCssResources } from '@storybook/addon-cssresources';
|
||||
import { addDecorator } from '@storybook/react';
|
||||
|
||||
addDecorator(
|
||||
withCssResources({
|
||||
cssresources: [
|
||||
{
|
||||
name: `bluetheme`, // Previous
|
||||
code: `<style>body { background-color: lightblue; }</style>`,
|
||||
picked: false,
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
```
|
||||
|
||||
You should replace it with:
|
||||
|
||||
```js
|
||||
import { withCssResources } from '@storybook/addon-cssresources';
|
||||
import { addDecorator } from '@storybook/react';
|
||||
|
||||
addDecorator(
|
||||
withCssResources({
|
||||
cssresources: [
|
||||
{
|
||||
id: `bluetheme`, // Renamed
|
||||
code: `<style>body { background-color: lightblue; }</style>`,
|
||||
picked: false,
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
```
|
||||
|
||||
## Addon viewport uses parameters
|
||||
|
||||
Similarly, `@storybook/addon-viewport` uses parameters to pass viewport options. If you previously had:
|
||||
|
||||
```js
|
||||
import { configureViewport } from `@storybook/addon-viewport`;
|
||||
|
||||
configureViewport(options);
|
||||
```
|
||||
|
||||
You should replace it with:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react'; // or others
|
||||
|
||||
addParameters({ viewport: options });
|
||||
```
|
||||
|
||||
The `withViewport` decorator is also no longer supported and should be replaced with a parameter based API as above. Also the `onViewportChange` callback is no longer supported.
|
||||
|
||||
See the [viewport addon README](https://github.com/storybooks/storybook/blob/master/addons/viewport/README.md) for more information.
|
||||
|
||||
## Addon a11y uses parameters, decorator renamed
|
||||
|
||||
Similarly, `@storybook/addon-a11y` uses parameters to pass a11y options. If you previously had:
|
||||
|
||||
```js
|
||||
import { configureA11y } from `@storybook/addon-a11y`;
|
||||
|
||||
configureA11y(options);
|
||||
```
|
||||
|
||||
You should replace it with:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react'; // or others
|
||||
|
||||
addParameters({ a11y: options });
|
||||
```
|
||||
|
||||
You can also pass `a11y` parameters at the component level (via `storiesOf(...).addParameters`), and the story level (via the third argument to `.add()`).
|
||||
|
||||
Furthermore, the decorator `checkA11y` has been deprecated and renamed to `withA11y` to make it consistent with other Storybook decorators.
|
||||
|
||||
See the [a11y addon README](https://github.com/storybooks/storybook/blob/master/addons/a11y/README.md) for more information.
|
||||
|
||||
## New keyboard shortcuts defaults
|
||||
|
||||
Storybook's keyboard shortcuts are updated in 5.0, but they are configurable via the menu so if you want to set them back you can:
|
||||
|
||||
| Shorctut | Old | New |
|
||||
| ---------------------- | ----------- | ----- |
|
||||
| Toggle sidebar | cmd-shift-X | S |
|
||||
| Toggle addons panel | cmd-shift-Z | A |
|
||||
| Toggle addons position | cmd-shift-G | D |
|
||||
| Toggle fullscreen | cmd-shift-F | F |
|
||||
| Next story | cmd-shift-→ | alt-→ |
|
||||
| Prev story | cmd-shift-← | alt-← |
|
||||
| Next component | | alt-↓ |
|
||||
| Prev component | | alt-↑ |
|
||||
| Search | | / |
|
||||
|
||||
## New URL structure
|
||||
|
||||
We've update Storybook's URL structure in 5.0. The old structure used URL parameters to save the UI state, resulting in long ugly URLs. v5 respects the old URL parameters, but largely does away with them.
|
||||
|
||||
The old structure encoded `selectedKind` and `selectedStory` among other parameters. Storybook v5 respects these parameters but will issue a deprecation message in the browser console warning of potential future removal.
|
||||
|
||||
The new URL structure looks like:
|
||||
|
||||
```
|
||||
https://url-of-storybook?path=/story/<storyId>
|
||||
```
|
||||
|
||||
The structure of `storyId` is a slugified `<selectedKind>--<selectedStory>` (slugified = lowercase, hyphen-separated). Each `storyId` must be unique. We plan to build more features into Storybook in upcoming versions based on this new structure.
|
||||
|
||||
## From version 4.0.x to 4.1.x
|
||||
|
||||
There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
|
||||
@ -168,17 +338,19 @@ However, if you're developing React components, this means you need to upgrade t
|
||||
Also, here's the error you'll get if you're running an older version of React:
|
||||
|
||||
```
|
||||
|
||||
core.browser.esm.js:15 Uncaught TypeError: Object(...) is not a function
|
||||
at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
|
||||
at **webpack_require** (bootstrap:724)
|
||||
at fn (bootstrap:101)
|
||||
at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
|
||||
at **webpack_require** (bootstrap:724)
|
||||
at fn (bootstrap:101)
|
||||
at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
|
||||
at **webpack_require** (bootstrap:724)
|
||||
at fn (bootstrap:101)
|
||||
at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)
|
||||
at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
|
||||
at **webpack_require** (bootstrap:724)
|
||||
at fn (bootstrap:101)
|
||||
at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
|
||||
at **webpack_require** (bootstrap:724)
|
||||
at fn (bootstrap:101)
|
||||
at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
|
||||
at **webpack_require** (bootstrap:724)
|
||||
at fn (bootstrap:101)
|
||||
at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)
|
||||
|
||||
```
|
||||
|
||||
### Generic addons
|
||||
|
||||
@ -131,10 +131,10 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
|
||||
|
||||
We have a badge! Link it to your live Storybook example.
|
||||
|
||||
|
||||
|
||||
|
||||
```md
|
||||
[](link to site)
|
||||
[](link to site)
|
||||
```
|
||||
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
|
||||
|
||||
@ -20,16 +20,16 @@ Add this line to your `addons.js` file (create this file inside your storybook c
|
||||
import '@storybook/addon-a11y/register';
|
||||
```
|
||||
|
||||
import the `withA11Y` decorator to check your stories for violations within your components.
|
||||
import the `withA11y` decorator to check your stories for violations within your components.
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withA11Y } from '@storybook/addon-a11y';
|
||||
import { withA11y } from '@storybook/addon-a11y';
|
||||
|
||||
// should only be added once
|
||||
// best place is in config.js
|
||||
addDecorator(withA11Y)
|
||||
addDecorator(withA11y)
|
||||
|
||||
storiesOf('button', module)
|
||||
.add('Accessible', () => (
|
||||
@ -51,9 +51,9 @@ You can override these options at story level too.
|
||||
import React from 'react';
|
||||
import { storiesOf, addDecorator, addParameters } from '@storybook/react';
|
||||
|
||||
import { withA11Y } from '@storybook/addon-a11y';
|
||||
import { withA11y } from '@storybook/addon-a11y';
|
||||
|
||||
addDecorator(withA11Y)
|
||||
addDecorator(withA11y)
|
||||
addParameters({
|
||||
a11y: {
|
||||
// ... axe options
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -26,18 +26,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/client-logger": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/client-logger": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"axe-core": "^3.1.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -3,7 +3,7 @@ import axe from 'axe-core';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { stripIndents } from 'common-tags';
|
||||
|
||||
import addons, { makeDecorator } from '@storybook/addons';
|
||||
import addons from '@storybook/addons';
|
||||
import { STORY_RENDERED } from '@storybook/core-events';
|
||||
import EVENTS, { PARAM_KEY } from './constants';
|
||||
|
||||
@ -24,16 +24,16 @@ const report = input => {
|
||||
channel.emit(EVENTS.RESULT, input);
|
||||
};
|
||||
|
||||
const run = (c, o) => {
|
||||
const run = (config, options) => {
|
||||
progress = progress.then(() => {
|
||||
axe.reset();
|
||||
if (c) {
|
||||
axe.configure(c);
|
||||
if (config) {
|
||||
axe.configure(config);
|
||||
}
|
||||
return axe
|
||||
.run(
|
||||
getElement(),
|
||||
o || {
|
||||
options || {
|
||||
restoreScroll: true,
|
||||
}
|
||||
)
|
||||
@ -41,18 +41,14 @@ const run = (c, o) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const withA11Y = makeDecorator({
|
||||
name: 'withA11Y',
|
||||
parameterName: PARAM_KEY,
|
||||
skipIfNoParametersOrOptions: false,
|
||||
allowDeprecatedUsage: false,
|
||||
|
||||
wrapper: (getStory, context, opt) => {
|
||||
setup = opt.parameters || opt.options || {};
|
||||
|
||||
return getStory(context);
|
||||
},
|
||||
});
|
||||
// NOTE: we should add paramaters to the STORY_RENDERED event and deprecate this
|
||||
export const withA11y = (getStory, context) => {
|
||||
const params = context.parameters[PARAM_KEY];
|
||||
if (params) {
|
||||
setup = params;
|
||||
}
|
||||
return getStory(context);
|
||||
};
|
||||
|
||||
channel.on(STORY_RENDERED, () => run(setup.config, setup.options));
|
||||
channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options));
|
||||
@ -61,10 +57,16 @@ if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
// TODO: REMOVE at v6.0.0
|
||||
export const withA11Y = deprecate(
|
||||
(...args) => withA11y(...args),
|
||||
'withA11Y has been renamed withA11y'
|
||||
);
|
||||
|
||||
// TODO: REMOVE at v6.0.0
|
||||
export const checkA11y = deprecate(
|
||||
(...args) => withA11Y(...args),
|
||||
'checkA11y has been replaced with withA11Y'
|
||||
(...args) => withA11y(...args),
|
||||
'checkA11y has been renamed withA11y'
|
||||
);
|
||||
|
||||
// TODO: REMOVE at v6.0.0
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -21,18 +21,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
"prop-types": "^15.6.2",
|
||||
"polished": "^2.3.3",
|
||||
"react": "^16.8.2",
|
||||
"react-inspector": "^2.3.0",
|
||||
"polished": "^3.0.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-inspector": "^2.3.1",
|
||||
"uuid": "^3.3.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { styled } from '@storybook/theming';
|
||||
import { opacify } from 'polished';
|
||||
import { ActionBar } from '@storybook/components';
|
||||
|
||||
export const Action = styled.div({
|
||||
display: 'flex',
|
||||
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,15 +25,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/client-logger": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/client-logger": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.2",
|
||||
"react": "^16.8.3",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,7 +1,2 @@
|
||||
export const ADDON_ID = 'storybook/background';
|
||||
export const PARAM_KEY = 'backgrounds';
|
||||
|
||||
export const EVENTS = {
|
||||
SET: `${ADDON_ID}:set`,
|
||||
UNSET: `${ADDON_ID}:unset`,
|
||||
};
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
import backgrounds from '.';
|
||||
|
||||
export default deprecate(
|
||||
backgrounds,
|
||||
"addon-backgrounds: framework-specific imports are deprecated, just use `import backgrounds from '@storybook/addon-backgrounds`"
|
||||
);
|
||||
@ -1,43 +1,18 @@
|
||||
import { addons, makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons';
|
||||
import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
import { REGISTER_SUBSCRIPTION } from '@storybook/core-events';
|
||||
import { EVENTS } from './constants';
|
||||
import { BackgroundConfig } from './models';
|
||||
|
||||
let prevBackgrounds: BackgroundConfig[];
|
||||
|
||||
const subscription = () => () => {
|
||||
prevBackgrounds = null;
|
||||
addons.getChannel().emit(EVENTS.UNSET);
|
||||
};
|
||||
|
||||
export const withBackgrounds = makeDecorator({
|
||||
name: 'withBackgrounds',
|
||||
parameterName: 'backgrounds',
|
||||
skipIfNoParametersOrOptions: true,
|
||||
allowDeprecatedUsage: true,
|
||||
wrapper: (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
|
||||
const data = parameters || options || [];
|
||||
const backgrounds = Array.isArray(data) ? data : Object.values(data);
|
||||
|
||||
if (backgrounds.length === 0) {
|
||||
// This decorator is kept purely so we produce a decorator that is compatible with both
|
||||
// `addDecorator(withBackgrounds(...))` and `addDecorator(withBackgrounds)`
|
||||
export const withBackgrounds = deprecate(
|
||||
makeDecorator({
|
||||
name: 'withBackgrounds',
|
||||
parameterName: 'backgrounds',
|
||||
wrapper: (getStory: StoryGetter, context: StoryContext) => {
|
||||
return getStory(context);
|
||||
}
|
||||
|
||||
if (prevBackgrounds !== backgrounds) {
|
||||
addons.getChannel().emit(EVENTS.SET, backgrounds);
|
||||
prevBackgrounds = backgrounds;
|
||||
}
|
||||
addons.getChannel().emit(REGISTER_SUBSCRIPTION, subscription);
|
||||
|
||||
return getStory(context);
|
||||
},
|
||||
});
|
||||
|
||||
export default deprecate(
|
||||
withBackgrounds,
|
||||
'The default export of @storybook/addon-backgrounds is deprecated, please `import { withBackgrounds }` instead'
|
||||
},
|
||||
}),
|
||||
`Note that withBackgrounds(options) has been replaced by addParameters({ backgrounds: options})
|
||||
Read more about it in the migration guide: https://github.com/storybooks/storybook/blob/master/MIGRATION.md`
|
||||
);
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/deprecated');
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,7 +23,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,12 +25,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.2"
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,13 +24,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-textarea-autosize": "^7.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,11 +20,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.3"
|
||||
"react-ga": "^2.5.7"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,11 +22,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.12.0",
|
||||
"graphql": "^14.1.1",
|
||||
"prop-types": "^15.6.2"
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,23 +22,23 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/client-logger": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/client-logger": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.1.0",
|
||||
"nested-object-assign": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.2",
|
||||
"react-addons-create-fragment": "^15.5.3",
|
||||
"nested-object-assign": "^1.0.3",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-addons-create-fragment": "^15.6.2",
|
||||
"react-is": "^16.8.3",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-test-renderer": "^16.8.1"
|
||||
"react-test-renderer": "^16.8.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,14 +28,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"upath": "^1.1.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,21 +22,21 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"escape-html": "^1.0.3",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"prop-types": "^15.6.2",
|
||||
"qs": "^6.5.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"qs": "^6.6.0",
|
||||
"react-color": "^2.17.0",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-select": "^2.3.0"
|
||||
"react-select": "^2.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -3,7 +3,7 @@ import { shallow, mount } from 'enzyme';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
import { TabsState } from '@storybook/components';
|
||||
|
||||
import { ThemeProvider, themes } from '@storybook/theming';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import Panel from '../Panel';
|
||||
import { CHANGE, SET } from '../../shared';
|
||||
import PropForm from '../PropForm';
|
||||
@ -191,7 +191,7 @@ describe('Panel', () => {
|
||||
// We have to do a full mount.
|
||||
|
||||
const root = mount(
|
||||
<ThemeProvider theme={themes.light}>
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<Panel channel={testChannel} api={testApi} active />
|
||||
</ThemeProvider>
|
||||
);
|
||||
@ -225,7 +225,7 @@ describe('Panel', () => {
|
||||
|
||||
it('should have one tab per groupId and an empty ALL tab when all are defined', () => {
|
||||
const root = mount(
|
||||
<ThemeProvider theme={themes.light}>
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<Panel channel={testChannel} api={testApi} active />
|
||||
</ThemeProvider>
|
||||
);
|
||||
@ -265,7 +265,7 @@ describe('Panel', () => {
|
||||
|
||||
it('the ALL tab should have its own additional content when there are knobs both with and without a groupId', () => {
|
||||
const root = mount(
|
||||
<ThemeProvider theme={themes.light}>
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<Panel channel={testChannel} api={testApi} active />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,13 +22,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"qs": "^6.5.2"
|
||||
"prop-types": "^15.7.2",
|
||||
"qs": "^6.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,17 +23,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/client-logger": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/client-logger": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"markdown-to-jsx": "^6.9.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/prop-types": "^15.5.7",
|
||||
"@types/prop-types": "^15.5.9",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"@types/webpack-env": "^1.13.7"
|
||||
},
|
||||
|
||||
23
addons/notes/src/Panel.test.js
Normal file
23
addons/notes/src/Panel.test.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { SyntaxHighlighter as SyntaxHighlighterBase } from '@storybook/components';
|
||||
import { SyntaxHighlighter } from './Panel.tsx';
|
||||
|
||||
describe('NotesPanel', () => {
|
||||
describe('SyntaxHighlighter component', () => {
|
||||
it('should return code if className is undefined', () => {
|
||||
const wrapper = shallow(<SyntaxHighlighter>some text</SyntaxHighlighter>);
|
||||
const code = wrapper.find('code');
|
||||
expect(code.exists()).toBeTruthy();
|
||||
expect(code.text()).toBe('some text');
|
||||
});
|
||||
it('should return SyntaxHighlighterBase if there is a className prop', () => {
|
||||
const wrapper = shallow(
|
||||
<SyntaxHighlighter className="lang-jsx">some text</SyntaxHighlighter>
|
||||
);
|
||||
const syntaxHighlighterBase = wrapper.find(SyntaxHighlighterBase);
|
||||
expect(syntaxHighlighterBase.exists()).toBeTruthy();
|
||||
expect(syntaxHighlighterBase.prop('language')).toBe('jsx');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -41,7 +41,15 @@ function read(param: Parameters | undefined): string | undefined {
|
||||
}
|
||||
}
|
||||
|
||||
const SyntaxHighlighter = (props: any) => <SyntaxHighlighterBase bordered copyable {...props} />;
|
||||
export const SyntaxHighlighter = (props: any) => {
|
||||
// markdown-to-jsx does not add className to inline code
|
||||
if (props.className === undefined) {
|
||||
return <code>{props.children}</code>;
|
||||
}
|
||||
//className: "lang-jsx"
|
||||
const language = props.className.split('-');
|
||||
return <SyntaxHighlighterBase language={language[1]} bordered copyable {...props} />;
|
||||
};
|
||||
|
||||
const defaultOptions = {
|
||||
overrides: {
|
||||
@ -105,21 +113,25 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
|
||||
|
||||
// TODO: memoize
|
||||
const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce((acc, [k, v]) => ({ ...acc, [k]: v.render }), {});
|
||||
const options = { ...defaultOptions, overrides: { ...defaultOptions.overrides, ...extraElements } };
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
overrides: { ...defaultOptions.overrides, ...extraElements },
|
||||
};
|
||||
|
||||
return value ? (
|
||||
<Panel className="addon-notes-container">
|
||||
<DocumentFormatting>
|
||||
<Markdown options={options}>{value}</Markdown>
|
||||
<DocumentFormatting>
|
||||
<Markdown options={options}>{value}</Markdown>
|
||||
</DocumentFormatting>
|
||||
</Panel>
|
||||
) : (
|
||||
<Placeholder>
|
||||
<React.Fragment>No notes yet</React.Fragment>
|
||||
<React.Fragment>
|
||||
No notes yet
|
||||
</React.Fragment>
|
||||
<React.Fragment>
|
||||
Learn how to <Link href="https://github.com/storybooks/storybook/tree/master/addons/notes" target="_blank" withArrow>document components in Markdown</Link>
|
||||
Learn how to{' '}
|
||||
<Link href="https://github.com/storybooks/storybook/tree/master/addons/notes" target="_blank" withArrow>
|
||||
document components in Markdown
|
||||
</Link>
|
||||
</React.Fragment>
|
||||
</Placeholder>
|
||||
);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.0.0-beta.3",
|
||||
"private": true,
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,9 +25,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"prop-types": "^15.6.2"
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.0.0-beta.3",
|
||||
"private": true,
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,10 +22,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-color-picker": "^0.4.0",
|
||||
"react-native-modal-datetime-picker": "^6.0.0",
|
||||
"react-native-modal-selector": "^1.0.2",
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.0.0-beta.3",
|
||||
"private": true,
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,9 +20,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,8 +21,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,8 +25,8 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
"jest-specific-snapshot": "^1.0.0",
|
||||
@ -34,9 +34,9 @@
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"jest-emotion": "^10.0.6",
|
||||
"react": "^16.8.2"
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"jest-emotion": "^10.0.7",
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,11 +22,11 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/router": "5.0.0-beta.3",
|
||||
"@storybook/node-logger": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"jest-image-snapshot": "^2.6.0",
|
||||
"puppeteer": "^1.12.0",
|
||||
"@storybook/node-logger": "5.1.0-alpha.0",
|
||||
"@storybook/router": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"jest-image-snapshot": "^2.8.1",
|
||||
"puppeteer": "^1.12.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -23,14 +23,14 @@ import '@storybook/addon-storysource/register';
|
||||
Use this hook to a custom webpack.config. This will generate a decorator call in every story:
|
||||
|
||||
```js
|
||||
module.exports = function (baseConfig, env, defaultConfig) {
|
||||
defaultConfig.module.rules.push({
|
||||
module.exports = function ({ config }) {
|
||||
config.module.rules.push({
|
||||
test: /\.stories\.jsx?$/,
|
||||
loaders: [require.resolve('@storybook/addon-storysource/loader')],
|
||||
enforce: 'pre',
|
||||
});
|
||||
|
||||
return defaultConfig;
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,15 +22,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"@storybook/router": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/router": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.1",
|
||||
"loader-utils": "^1.2.3",
|
||||
"prettier": "^1.16.4",
|
||||
"prop-types": "^15.6.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^8.0.1",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Storybook Viewport Addon
|
||||
|
||||
Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
|
||||
Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
@ -28,21 +28,30 @@ import '@storybook/addon-viewport/register';
|
||||
|
||||
## Configuration
|
||||
|
||||
Import and use the `configureViewport` function in your `config.js` file.
|
||||
The viewport addon is configured by story parameters with the `viewport` key. To configure globally, import `addParameters` from your app layer in your `config.js` file.
|
||||
|
||||
```js
|
||||
import { configureViewport } from '@storybook/addon-viewport';
|
||||
import { addParameters } from '@storybook/react';
|
||||
|
||||
addParameters({ viewport: options });
|
||||
```
|
||||
|
||||
Options can take a object with the following keys:
|
||||
|
||||
### defaultViewport : String
|
||||
----
|
||||
|
||||
---
|
||||
|
||||
Setting this property to, let say `iphone6`, will make `iPhone 6` the default device/viewport for all stories. Default is `'responsive'` which fills 100% of the preview area.
|
||||
|
||||
### viewports : Object
|
||||
----
|
||||
|
||||
---
|
||||
|
||||
A key-value pair of viewport's key and properties (see `Viewport` definition below) for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/shared/index.js)
|
||||
|
||||
#### Viewport Model
|
||||
|
||||
```js
|
||||
{
|
||||
/**
|
||||
@ -70,154 +79,81 @@ A key-value pair of viewport's key and properties (see `Viewport` definition bel
|
||||
}
|
||||
```
|
||||
|
||||
## Decorators
|
||||
## Configuring per component or story
|
||||
|
||||
Sometimes you want to show collection of mobile stories, and you know those stories look horible on desktop (`responsive`), so you think you need to change the default viewport only for those?
|
||||
Parameters can be configured for a whole set of stories or a single story via the standard parameter API:
|
||||
|
||||
Here is the answer, with `withViewport` decorator, you can change the default viewport of single, multiple, or all stories.
|
||||
|
||||
`withViewport` accepts either
|
||||
* A `String`, which represents the default viewport, or
|
||||
* An `Object`, which looks like
|
||||
```js
|
||||
{
|
||||
name: 'iphone6', // default viewport
|
||||
onViewportChange({ viewport }) { // called whenever different viewport is selected from the dropdown
|
||||
import addStories from '@storybook/react';
|
||||
|
||||
}
|
||||
}
|
||||
addStories('Stories', module)
|
||||
// To set a default viewport for all the stories for this component
|
||||
.addParameters({ viewport: { defaultViewport: 'iphone6' }})
|
||||
.add('story', () => </>, { viewport: 'iphonex' });
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Simply import the Storybook Viewport Addon in the `addons.js` file in your `.storybook` directory.
|
||||
|
||||
```js
|
||||
import '@storybook/addon-viewport/register'
|
||||
```
|
||||
|
||||
This will register the Viewport Addon to Storybook and will show up in the action area.
|
||||
|
||||
|
||||
### Use Custom Set of Devices
|
||||
|
||||
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `configureViewport` 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 simply calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
|
||||
|
||||
```js
|
||||
import { configureViewport } from '@storybook/addon-viewport';
|
||||
import { addParameters } from '@storybook/react';
|
||||
|
||||
const newViewports = {
|
||||
kindleFire2: {
|
||||
name: 'Kindle Fire 2',
|
||||
styles: {
|
||||
width: '600px',
|
||||
height: '963px'
|
||||
}
|
||||
height: '963px',
|
||||
},
|
||||
},
|
||||
kindleFireHD: {
|
||||
name: 'Kindle Fire HD',
|
||||
styles: {
|
||||
width: '533px',
|
||||
height: '801px'
|
||||
}
|
||||
}
|
||||
height: '801px',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
configureViewport({
|
||||
viewports: newViewports
|
||||
addParameters({
|
||||
viewport: { viewports: newViewports },
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Add New Device
|
||||
|
||||
This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is acheived by making use of the exported [`INITIAL_VIEWPORTS`](src/shared/index.js) property, by merging it with the new viewports and pass the result as `viewports` to `configureViewport` function
|
||||
|
||||
```js
|
||||
import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
const newViewports = {
|
||||
kindleFire2: {
|
||||
name: 'Kindle Fire 2',
|
||||
styles: {
|
||||
width: '600px',
|
||||
height: '963px'
|
||||
}
|
||||
height: '963px',
|
||||
},
|
||||
},
|
||||
kindleFireHD: {
|
||||
name: 'Kindle Fire HD',
|
||||
styles: {
|
||||
width: '533px',
|
||||
height: '801px'
|
||||
}
|
||||
}
|
||||
height: '801px',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
configureViewport({
|
||||
viewports: {
|
||||
...INITIAL_VIEWPORTS,
|
||||
...newViewports
|
||||
}
|
||||
addParameters({
|
||||
viewport: {
|
||||
viewports: {
|
||||
...INITIAL_VIEWPORTS,
|
||||
...newViewports,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Change The Default Viewport
|
||||
|
||||
This will make `iPhone 6` the default viewport for all stories.
|
||||
|
||||
```js
|
||||
import { configureViewport } from '@storybook/addon-viewport';
|
||||
|
||||
configureViewport({
|
||||
defaultViewport: 'iphone6'
|
||||
});
|
||||
```
|
||||
|
||||
## withViewport Decorator
|
||||
|
||||
Change the default viewport for single/multiple/global stories, or listen to viewport selection changes
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf, addDecorator } from '@storybook/react';
|
||||
import { withViewport } from '@storybook/addon-viewport';
|
||||
|
||||
// Globablly
|
||||
addDecorator(withViewport('iphone5'));
|
||||
|
||||
// Collection
|
||||
storiesOf('Decorator with string', module)
|
||||
.addDecorator(withViewport('iphone6'))
|
||||
.add('iPhone 6', () => (
|
||||
<h1>
|
||||
Do I look good on <b>iPhone 6</b>?
|
||||
</h1>
|
||||
));
|
||||
|
||||
// Single
|
||||
storiesOf('Parameterized story', module)
|
||||
.addDecorator(withViewport())
|
||||
.add(
|
||||
'iPad',
|
||||
() => (
|
||||
<h1>
|
||||
Do I look good on <b>iPad</b>?
|
||||
</h1>
|
||||
),
|
||||
{ viewport: 'ipad' }
|
||||
);
|
||||
|
||||
storiesOf('Decorator with object', module)
|
||||
.addDecorator(
|
||||
withViewport({
|
||||
onViewportChange({ viewport }) {
|
||||
console.log(`Viewport changed: ${viewport.name} (${viewport.type})`); // e.g. Viewport changed: iphone6 (mobile)
|
||||
},
|
||||
})
|
||||
)
|
||||
.add('onViewportChange', () => <MobileFirstComponent />);
|
||||
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,15 +21,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/client-logger": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"core-js": "^2.6.2",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/client-logger": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -4,4 +4,3 @@ exports.configureViewport = preview.configureViewport;
|
||||
exports.DEFAULT_VIEWPORT = preview.DEFAULT_VIEWPORT;
|
||||
exports.INITIAL_VIEWPORTS = preview.INITIAL_VIEWPORTS;
|
||||
exports.withViewport = preview.withViewport;
|
||||
exports.Viewport = preview.Viewport;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import memoize from 'memoizerific';
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
import { Global } from '@storybook/theming';
|
||||
|
||||
@ -8,6 +9,7 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
|
||||
import { SET_STORIES } from '@storybook/core-events';
|
||||
|
||||
import { PARAM_KEY } from './constants';
|
||||
import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from './defaults';
|
||||
|
||||
const toList = memoize(50)(items =>
|
||||
items ? Object.entries(items).map(([id, value]) => ({ ...value, id })) : []
|
||||
@ -26,14 +28,35 @@ const createItem = memoize(1000)((id, name, value, change) => ({
|
||||
|
||||
const flip = ({ width, height }) => ({ height: width, width: height });
|
||||
|
||||
const deprecatedViewportString = deprecate(
|
||||
() => 0,
|
||||
'The viewport parameter must be an object with keys `viewports` and `defaultViewport`'
|
||||
);
|
||||
const deprecateOnViewportChange = deprecate(
|
||||
() => 0,
|
||||
'The viewport parameter `onViewportChange` is no longer supported'
|
||||
);
|
||||
|
||||
const getState = memoize(10)((props, state, change) => {
|
||||
const data = props.api.getCurrentStoryData();
|
||||
const list = toList(data && data.parameters && data.parameters[PARAM_KEY]);
|
||||
const parameters = data && data.parameters && data.parameters[PARAM_KEY];
|
||||
|
||||
if (parameters && typeof parameters !== 'object') {
|
||||
deprecatedViewportString();
|
||||
}
|
||||
|
||||
const { disable, viewports, defaultViewport, onViewportChange } = parameters || {};
|
||||
|
||||
if (onViewportChange) {
|
||||
deprecateOnViewportChange();
|
||||
}
|
||||
|
||||
const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS);
|
||||
|
||||
const selected =
|
||||
state.selected === 'responsive' || list.find(i => i.id === state.selected)
|
||||
? state.selected
|
||||
: list.find(i => i.default) || 'responsive';
|
||||
: list.find(i => i.default) || defaultViewport || DEFAULT_VIEWPORT;
|
||||
|
||||
const resets =
|
||||
selected !== 'responsive'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const ADDON_ID = 'storybook/viewport';
|
||||
export const PARAM_KEY = 'viewports';
|
||||
export const PARAM_KEY = 'viewport';
|
||||
|
||||
export default {
|
||||
UPDATE: `${ADDON_ID}/update`,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../defaults';
|
||||
export { default as withViewport, Viewport } from './withViewport';
|
||||
export { default as withViewport } from './withViewport';
|
||||
|
||||
export const configureViewport = deprecate(() => {},
|
||||
'usage is deprecated, use .addParameters({ viewport }) instead');
|
||||
'configureViewport is no longer supported, use .addParameters({ viewport }) instead');
|
||||
|
||||
@ -3,17 +3,11 @@ import deprecate from 'util-deprecate';
|
||||
|
||||
const withViewport = makeDecorator({
|
||||
name: 'withViewport',
|
||||
parameterName: 'viewports',
|
||||
allowDeprecatedUsage: true,
|
||||
parameterName: 'viewport',
|
||||
wrapper: deprecate(
|
||||
(getStory, context) => getStory(context),
|
||||
'usage is deprecated, use .addParameters({ viewport }) instead'
|
||||
'withViewport is no longer supported, use .addParameters({ viewport }) instead'
|
||||
),
|
||||
});
|
||||
|
||||
export default withViewport;
|
||||
|
||||
export const Viewport = deprecate(
|
||||
({ children }) => children,
|
||||
`<Viewport> usage is deprecated, use .addParameters({ viewport }) instead`
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,17 +26,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/node-logger": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"@storybook/node-logger": "5.1.0-alpha.0",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"fork-ts-checker-webpack-plugin": "^0.5.2",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^5.3.2",
|
||||
"ts-loader": "^5.3.3",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0",
|
||||
"webpack": "^4.29.3"
|
||||
"webpack": "^4.29.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"zone.js": "^0.8.29"
|
||||
@ -50,7 +50,7 @@
|
||||
"@angular/platform-browser": ">=6.0.0",
|
||||
"@angular/platform-browser-dynamic": ">=6.0.0",
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"zone.js": "^0.8.27"
|
||||
"zone.js": "^0.8.29"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -23,10 +23,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.3.1",
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,9 +25,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,17 +26,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"marko-loader": "^1.3.3",
|
||||
"marko-loader": "^1.5.0",
|
||||
"raw-loader": "^1.0.0",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"marko": "^4.10.0",
|
||||
"marko": "^4.15.2",
|
||||
"marko-widgets": "^7.0.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -8,6 +8,9 @@ export function webpack(config) {
|
||||
{
|
||||
test: /\.marko$/,
|
||||
loader: require.resolve('marko-loader'),
|
||||
options: {
|
||||
compiler: require.resolve('marko/compiler'),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,9 +27,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,13 +25,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"webpack": "^4.29.3"
|
||||
"webpack": "^4.29.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lit-html": "^1.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,9 +27,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"preact": "^8.3.1"
|
||||
"preact": "^8.4.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "5.0.0-beta.3",
|
||||
"private": true,
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -26,12 +27,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/channel-websocket": "5.0.0-beta.3",
|
||||
"@storybook/channels": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/ui": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/channel-websocket": "5.1.0-alpha.0",
|
||||
"@storybook/channels": "5.1.0-alpha.0",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/ui": "5.1.0-alpha.0",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-macros": "^2.4.5",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
@ -48,23 +49,23 @@
|
||||
"commander": "^2.19.0",
|
||||
"dotenv-webpack": "^1.7.0",
|
||||
"ejs": "^2.6.1",
|
||||
"express": "^4.16.3",
|
||||
"express": "^4.16.4",
|
||||
"find-cache-dir": "^2.0.0",
|
||||
"global": "^4.3.2",
|
||||
"html-webpack-plugin": "^4.0.0-beta.2",
|
||||
"json5": "^2.1.0",
|
||||
"lazy-universal-dotenv": "^2.0.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"raw-loader": "^1.0.0",
|
||||
"react-dev-utils": "^7.0.1",
|
||||
"react-dev-utils": "^7.0.3",
|
||||
"react-native-swipe-gestures": "^1.0.2",
|
||||
"shelljs": "^0.8.2",
|
||||
"url-parse": "^1.4.3",
|
||||
"shelljs": "^0.8.3",
|
||||
"url-parse": "^1.4.4",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.29.3",
|
||||
"webpack-dev-middleware": "^3.5.2",
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-dev-middleware": "^3.6.0",
|
||||
"webpack-hot-middleware": "^2.24.3",
|
||||
"ws": "^6.1.3"
|
||||
"ws": "^6.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-native": "^0.52.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,22 +29,22 @@
|
||||
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/node-logger": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"@storybook/node-logger": "5.1.0-alpha.0",
|
||||
"@svgr/webpack": "^4.0.3",
|
||||
"babel-plugin-named-asset-import": "^0.3.1",
|
||||
"babel-plugin-react-docgen": "^2.0.2",
|
||||
"babel-preset-react-app": "^7.0.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
"mini-css-extract-plugin": "^0.5.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-dev-utils": "^7.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-dev-utils": "^7.0.3",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"semver": "^5.6.0",
|
||||
"webpack": "^4.29.3"
|
||||
"webpack": "^4.29.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,16 +25,16 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"raw-loader": "^1.0.0",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-transform-modules-commonjs": "^7.2.0",
|
||||
"@babel/preset-env": "^7.3.1",
|
||||
"@babel/preset-env": "^7.3.4",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,15 +26,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^2.16.1",
|
||||
"svelte-loader": "^2.12.0"
|
||||
"svelte-loader": "^2.13.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,23 +26,23 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-vue": "^2.0.2",
|
||||
"vue": "^2.6.3",
|
||||
"vue-loader": "15.6.2",
|
||||
"vue-template-compiler": "^2.6.3"
|
||||
"vue": "^2.6.8",
|
||||
"vue-loader": "^15.7.0",
|
||||
"vue-template-compiler": "^2.6.8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"vue": ">=2.5.16",
|
||||
"vue-loader": ">=15.x.x",
|
||||
"vue-template-compiler": ">=2.5.16"
|
||||
"vue": "^2.6.8",
|
||||
"vue-loader": "^15.7.0",
|
||||
"vue-template-compiler": "^2.6.8"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -19,7 +19,6 @@ module.exports = {
|
||||
'/basics/writing-stories/',
|
||||
'/basics/exporting-storybook/',
|
||||
'/basics/faq/',
|
||||
'/basics/community/',
|
||||
'/basics/live-examples/',
|
||||
],
|
||||
configurations: [
|
||||
@ -45,7 +44,6 @@ module.exports = {
|
||||
addons: [
|
||||
'/addons/introduction/',
|
||||
'/addons/using-addons/',
|
||||
'/addons/addon-gallery/',
|
||||
'/addons/writing-addons/',
|
||||
'/addons/api/',
|
||||
],
|
||||
|
||||
@ -14,6 +14,24 @@ function pagesToSitemap(pages) {
|
||||
}));
|
||||
}
|
||||
|
||||
function getVersionData(distTag) {
|
||||
const versionFile = `${__dirname}/src/versions/${distTag}.json`;
|
||||
if (!fs.existsSync(versionFile)) {
|
||||
return null;
|
||||
}
|
||||
const data = {
|
||||
[distTag]: JSON.parse(fs.readFileSync(versionFile)),
|
||||
};
|
||||
return data;
|
||||
}
|
||||
|
||||
function generateVersionsFile() {
|
||||
const latest = getVersionData('latest');
|
||||
const next = getVersionData('next');
|
||||
const data = { ...latest, ...next };
|
||||
fs.writeFileSync(`${__dirname}/public/versions.json`, JSON.stringify(data));
|
||||
}
|
||||
|
||||
function generateSitemap(pages) {
|
||||
const sitemap = sm.createSitemap({
|
||||
hostname: 'https://storybook.js.org',
|
||||
@ -36,6 +54,7 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
`);
|
||||
generateVersionsFile();
|
||||
generateSitemap(result.data.allSitePage.edges.map(({ node }) => node));
|
||||
},
|
||||
onCreateNode({ node, boundActionCreators, getNode }) {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import Link from 'gatsby-link';
|
||||
import slackIcon from './images/slack-icon.png';
|
||||
import githubIcon from './images/github-icon.png';
|
||||
import './style.css';
|
||||
@ -10,7 +9,7 @@ const Footer = () => (
|
||||
<div className="logos">
|
||||
<div className="col-xs-12">
|
||||
<center>
|
||||
Maintained by the <Link to="/basics/community/">Storybook Community</Link>.
|
||||
Maintained by the <a href="https://storybook.js.org/community/">Storybook Community</a>.
|
||||
</center>
|
||||
<center>
|
||||
<a
|
||||
|
||||
@ -1,28 +1,54 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Link from 'gatsby-link';
|
||||
import GatsbyLink from 'gatsby-link';
|
||||
import './style.css';
|
||||
|
||||
import storybookLogo from '../../design/homepage/storybook-logo.svg';
|
||||
|
||||
const home = 'https://storybook.js.org/';
|
||||
|
||||
const sections = [
|
||||
{ id: 'home', caption: 'Home', href: '/' },
|
||||
{ id: 'docs', caption: 'Docs', href: '/basics/introduction/' },
|
||||
{ id: 'examples', caption: 'Examples', href: '/examples/' },
|
||||
{ id: 'addons', caption: 'Addons', href: `${home}addons/` },
|
||||
{ id: 'community', caption: 'Community', href: `${home}community/` },
|
||||
{ id: 'use-cases', caption: 'Use cases', href: `${home}use-cases/` },
|
||||
{ id: 'support', caption: 'Support', href: `${home}support/` },
|
||||
{ id: 'team', caption: 'Team', href: `${home}team/` },
|
||||
];
|
||||
|
||||
const Link = ({ children, to, ...other }) => {
|
||||
// Tailor the following test to your environment.
|
||||
// This example assumes that any internal link (intended for Gatsby)
|
||||
// will start with exactly one slash, and that anything else is external.
|
||||
const internal = /^\/(?!\/)/.test(to);
|
||||
|
||||
// Use Gatsby Link for internal links, and <a> for others
|
||||
if (internal) {
|
||||
return (
|
||||
<GatsbyLink to={to} {...other}>
|
||||
{children}
|
||||
</GatsbyLink>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<a href={to} {...other}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
Link.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
to: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
class Header extends React.Component {
|
||||
renderSections() {
|
||||
return sections.map(section => {
|
||||
const { currentSection } = this.props;
|
||||
const className = currentSection === section.id ? 'selected' : '';
|
||||
|
||||
return (
|
||||
<Link className={className} key={section.href} to={section.href}>
|
||||
{section.caption}
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
return sections.map(section => (
|
||||
<Link className="selected" key={section.id} to={section.href}>
|
||||
{section.caption}
|
||||
</Link>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -36,7 +62,7 @@ class Header extends React.Component {
|
||||
<div id="header" className="row">
|
||||
<div className="col-xs-12 col-md-12">
|
||||
<div id="header-title" className={titleClassname}>
|
||||
<Link to="/">
|
||||
<Link to={home}>
|
||||
<img className="sb-title" src={storybookLogo} alt="Storybook Logo" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -12,14 +12,13 @@
|
||||
|
||||
#header-links a {
|
||||
padding-left: 15px;
|
||||
text-transform: uppercase;
|
||||
color: rgb(102, 102, 102);
|
||||
}
|
||||
|
||||
#header-links a.selected {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 540px) {
|
||||
#header {
|
||||
margin: 50px 0 20px;
|
||||
|
||||
@ -129,9 +129,6 @@ class MainLinks extends React.Component {
|
||||
<li>
|
||||
<Link to="/addons/using-addons/">Using Addons</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/addons/addon-gallery/">Addon Gallery</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/addons/writing-addons/">Writing Addons</Link>
|
||||
</li>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 6.5 KiB |
@ -19,11 +19,7 @@ For example, let's say we want to center a story rendered on the screen. For tha
|
||||
const styles = {
|
||||
textAlign: 'center',
|
||||
};
|
||||
const Center = ({ children }) => (
|
||||
<div style={styles}>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
const Center = ({ children }) => <div style={styles}>{children}</div>;
|
||||
```
|
||||
|
||||
Then we can use it when writing stories.
|
||||
@ -35,12 +31,11 @@ import { action } from '@storybook/addon-actions';
|
||||
import Center from './center';
|
||||
import Button from './button';
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('with text', () => (
|
||||
<Center>
|
||||
<Button onClick={action('clicked')}>Hello Button</Button>
|
||||
</Center>
|
||||
));
|
||||
storiesOf('Button', module).add('with text', () => (
|
||||
<Center>
|
||||
<Button onClick={action('clicked')}>Hello Button</Button>
|
||||
</Center>
|
||||
));
|
||||
```
|
||||
|
||||
### Storybook Decorators
|
||||
@ -56,19 +51,17 @@ import Button from './button';
|
||||
const styles = {
|
||||
textAlign: 'center',
|
||||
};
|
||||
const CenterDecorator = (storyFn) => (
|
||||
<div style={styles}>
|
||||
{ storyFn() }
|
||||
</div>
|
||||
);
|
||||
const CenterDecorator = storyFn => <div style={styles}>{storyFn()}</div>;
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(CenterDecorator)
|
||||
.add('with text', () => (
|
||||
<Button onClick={action('clicked')}>Hello Button</Button>
|
||||
))
|
||||
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
|
||||
.add('with some emojies', () => (
|
||||
<Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
|
||||
<Button onClick={action('clicked')}>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Button>
|
||||
));
|
||||
```
|
||||
|
||||
@ -85,24 +78,19 @@ import Welcome from './welcome';
|
||||
const styles = {
|
||||
textAlign: 'center',
|
||||
};
|
||||
const CenterDecorator = (storyFn) => (
|
||||
<div style={styles}>
|
||||
{ storyFn() }
|
||||
</div>
|
||||
);
|
||||
const CenterDecorator = storyFn => <div style={styles}>{storyFn()}</div>;
|
||||
addDecorator(CenterDecorator);
|
||||
|
||||
storiesOf('Welcome', module)
|
||||
.add('to Storybook', () => (
|
||||
<Welcome showApp={linkTo('Button')}/>
|
||||
));
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('with text', () => (
|
||||
<Button onClick={action('clicked')}>Hello Button</Button>
|
||||
))
|
||||
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
|
||||
.add('with some emojies', () => (
|
||||
<Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
|
||||
<Button onClick={action('clicked')}>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Button>
|
||||
));
|
||||
```
|
||||
|
||||
@ -120,6 +108,6 @@ It will allow you to inspect the parameters of any event of your components.
|
||||
|
||||
See the following links to learn more about native addons:
|
||||
|
||||
- [Using addons](/addons/using-addons)
|
||||
- [Addon gallery](/addons/addon-gallery)
|
||||
- [Write your own addon](/addons/writing-addons)
|
||||
- [Using addons](/addons/using-addons)
|
||||
- [Addon gallery](https://storybook.js.org/addons/)
|
||||
- [Write your own addon](/addons/writing-addons)
|
||||
|
||||
@ -75,4 +75,4 @@ addParameters({
|
||||
|
||||
Here's an example of a [production-ready config file](https://github.com/storybooks/storybook/blob/next/examples/cra-kitchen-sink/.storybook/config.js) from the cra-kitchen example.
|
||||
|
||||
Just like this, you can install any other addon and use it. Have a look at our [addon gallery](/addons/addon-gallery) to discover more addons.
|
||||
Just like this, you can install any other addon and use it. Have a look at our [addon gallery](https://storybook.js.org/addons/) to discover more addons.
|
||||
|
||||
@ -30,7 +30,7 @@ With an addon, you can add more functionality to Storybook. Here are a few thing
|
||||
- Navigating.
|
||||
- Register keyboard shortcuts (coming soon).
|
||||
|
||||
With this, you can write some pretty cool addons. Look at our [Addon gallery](/addons/addon-gallery) to have a look at some sample addons.
|
||||
With this, you can write some pretty cool addons. Look at our [Addon gallery](https://storybook.js.org/addons/) to have a look at some sample addons.
|
||||
|
||||
## Getting Started
|
||||
|
||||
@ -61,7 +61,7 @@ We write an addon that responds to a change in story selection like so:
|
||||
// register.js
|
||||
|
||||
import React from 'react';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
import { STORY_RENDERED } from '@storybook/core-events';
|
||||
import addons, { types } from '@storybook/addons';
|
||||
|
||||
const ADDON_ID = 'myaddon';
|
||||
@ -102,7 +102,7 @@ class MyPanel extends React.Component {
|
||||
}
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
const render = ({ active }) => <Panel api={api} active={active} />;
|
||||
const render = ({ active }) => <MyPanel api={api} active={active} />;
|
||||
const title = 'My Addon';
|
||||
|
||||
addons.add(PANEL_ID, {
|
||||
@ -184,7 +184,7 @@ class MyPanel extends React.Component {
|
||||
componentDidMount() {
|
||||
const { api } = this.props;
|
||||
api.on('foo/doSomeAction', this.onSomeAction);
|
||||
api.on(STORY_RENDERED this.onStoryChange);
|
||||
api.on(STORY_RENDERED, this.onStoryChange);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
const { api } = this.props;
|
||||
|
||||
@ -31,11 +31,11 @@ npm i --save-dev @storybook/mithril
|
||||
|
||||
## Add mithril and babel-core
|
||||
|
||||
Make sure that you have `mithril` and `babel-core` in your dependencies as well because we list these as a peerDependency:
|
||||
Make sure that you have `mithril`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peerDependency:
|
||||
|
||||
```sh
|
||||
npm i --save mithril
|
||||
npm i --save-dev babel-core
|
||||
npm i --save-dev @babel/core babel-loader
|
||||
```
|
||||
|
||||
Then add the following NPM script to your package json in order to start the storybook later in this guide:
|
||||
|
||||
@ -3,7 +3,7 @@ id: 'introduction'
|
||||
title: 'Introduction'
|
||||
---
|
||||
|
||||
Storybook is a UI development environment and playground for UI components.
|
||||
Storybook is a user interface development environment and playground for UI components.
|
||||
The tool enables users to create components independently and showcase components interactively in an isolated development environment.
|
||||
|
||||
Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
@ -15,5 +15,5 @@ A [Static version](/basics/exporting-storybook) of Storybook can also be built a
|
||||
|
||||
Here are some featured Storybooks to see how it works:
|
||||
|
||||
- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
|
||||
- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)
|
||||
- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
|
||||
- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)
|
||||
|
||||
@ -33,7 +33,7 @@ You can get these themes like so:
|
||||
|
||||
```js
|
||||
import { addParameters, configure } from '@storybook/react';
|
||||
import { themes } from '@storybook/components';
|
||||
import { themes } from '@storybook/theming';
|
||||
|
||||
// Option defaults.
|
||||
addParameters({
|
||||
|
||||
@ -25,21 +25,25 @@ We first have to use the [custom Webpack config in full control mode, extending
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
module.exports = (baseConfig, env, config) => {
|
||||
module.exports = ({ config, mode }) => {
|
||||
config.module.rules.push({
|
||||
test: /\.(ts|tsx)$/,
|
||||
use: [{
|
||||
loader: require.resolve('awesome-typescript-loader')
|
||||
}, {
|
||||
loader: require.resolve('react-docgen-typescript-loader')
|
||||
}]
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('awesome-typescript-loader')
|
||||
},
|
||||
// Optional
|
||||
{
|
||||
loader: require.resolve('react-docgen-typescript-loader')
|
||||
}
|
||||
]
|
||||
});
|
||||
config.resolve.extensions.push('.ts', '.tsx');
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
The above example shows a working Webpack config with the TSDocgen plugin also integrated; remove the optional sections if you don't plan on using them.
|
||||
The above example shows a working Webpack config with the [TSDocgen plugin](https://github.com/strothj/react-docgen-typescript-loader) integrated. This plugin is not necessary to use Storybook and the section marked `// optional` can be safely removed if the features of TSDocgen are not required.
|
||||
|
||||
### `tsconfig.json`
|
||||
|
||||
@ -91,13 +95,13 @@ yarn add -D @types/storybook__react # typings
|
||||
We first have to use the [custom Webpack config in full control mode, extending default configs](/configurations/custom-webpack-config/#full-control-mode--default) by creating a `webpack.config.js` file in our Storybook configuration directory (by default, it’s `.storybook`):
|
||||
|
||||
```js
|
||||
module.exports = (baseConfig, env, config) => {
|
||||
module.exports = ({ config, mode }) => {
|
||||
config.module.rules.push({
|
||||
test: /\.(ts|tsx)$/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
presets: [['react-app', { flow: false, typescript: true }]],
|
||||
},
|
||||
presets: [['react-app', { flow: false, typescript: true }]]
|
||||
}
|
||||
});
|
||||
config.resolve.extensions.push('.ts', '.tsx');
|
||||
return config;
|
||||
|
||||
@ -179,3 +179,10 @@ vanilla:
|
||||
demo: https://vanilla-framework.github.io/vanilla-framework-react/
|
||||
source: https://github.com/vanilla-framework/vanilla-framework-react
|
||||
site: https://vanillaframework.io/
|
||||
govuk:
|
||||
thumbnail: gov-uk.png
|
||||
title: GOV.UK react
|
||||
description: An implementation of the GOV.UK Design System in React using CSSinJS
|
||||
demo: https://govuk-react.github.io/govuk-react/
|
||||
source: https://github.com/govuk-react/govuk-react
|
||||
site: https://design-system.service.gov.uk/
|
||||
|
||||
BIN
docs/src/pages/examples/thumbnails/gov-uk.png
Normal file
BIN
docs/src/pages/examples/thumbnails/gov-uk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
6
docs/src/versions/latest.json
Normal file
6
docs/src/versions/latest.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"version": "5.0.0",
|
||||
"info": {
|
||||
"plain": "Storybook 5.0 is a completely new UI with the following improvements:\n\n- 🌓 New design with light and dark themes\n- 🛠 Canvas toolbar for easy access to addons\n- 🗺 Overhauled navigation sidebar with an intuitive menu\n- 🗜 Redesigned addons panel with handy buttons to toggle visibility and orientation\n- ⌨️ Improved keyboard shortcuts that are user configurable\n- 🌍 New URL structure that eliminates long strings of query parameters\n\n5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybooks/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`."
|
||||
}
|
||||
}
|
||||
6
docs/src/versions/next.json
Normal file
6
docs/src/versions/next.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"version": "5.1.0-alpha.0",
|
||||
"info": {
|
||||
"plain": "### Features\n\n* UI: Custom scrollbars ([#5714](https://github.com/storybooks/storybook/pull/5714))\n\n### Bug Fixes\n\n* Fix: Move `react-select` dependency to 2.2 ([#5867](https://github.com/storybooks/storybook/pull/5867))\n\n### Maintenance\n\n* Cleanup unused dependencies ([#5453](https://github.com/storybooks/storybook/pull/5453))\n* Add directory attribute to repositories in package.json files ([#5643](https://github.com/storybooks/storybook/pull/5643))\n\n### Dependency Upgrades\n\n* Project-wide dependency upgrades ([#5740](https://github.com/storybooks/storybook/pull/5740))\n* Bump react-is from 16.8.1 to 16.8.3 ([#5743](https://github.com/storybooks/storybook/pull/5743))\n* Bump danger from 7.0.13 to 7.0.14 ([#5744](https://github.com/storybooks/storybook/pull/5744))\n* Bump babel-plugin-named-asset-import from 0.3.0 to 0.3.1 ([#5745](https://github.com/storybooks/storybook/pull/5745))\n* Bump eslint-plugin-json from 1.3.2 to 1.4.0 ([#5719](https://github.com/storybooks/storybook/pull/5719))\n* Bump react-native-modal-datetime-picker from 5.1.0 to 6.0.0 ([#4425](https://github.com/storybooks/storybook/pull/4425))\n* Bump immer from 1.12.0 to 2.0.0 ([#5694](https://github.com/storybooks/storybook/pull/5694))\n* Bump danger from 7.0.11 to 7.0.13 ([#5696](https://github.com/storybooks/storybook/pull/5696))\n* Bump eslint-plugin-jsx-a11y from 6.2.0 to 6.2.1 ([#5698](https://github.com/storybooks/storybook/pull/5698))\n* Bump @angular/platform-browser-dynamic from 7.2.4 to 7.2.6 ([#5697](https://github.com/storybooks/storybook/pull/5697))\n* Bump eslint from 5.12.1 to 5.14.1 ([#5653](https://github.com/storybooks/storybook/pull/5653))\n* Bump babel-preset-react-app from 7.0.0 to 7.0.1 ([#5674](https://github.com/storybooks/storybook/pull/5674))\n* Bump react from 16.8.1 to 16.8.2 ([#5673](https://github.com/storybooks/storybook/pull/5673))\n* Bump @angular/cli from 7.3.0 to 7.3.2 ([#5654](https://github.com/storybooks/storybook/pull/5654))\n* Bump @types/jest from 24.0.0 to 24.0.6 ([#5655](https://github.com/storybooks/storybook/pull/5655))\n* Bump lint-staged from 8.1.3 to 8.1.4 ([#5606](https://github.com/storybooks/storybook/pull/5606))\n* Bump @types/lodash from 4.14.120 to 4.14.121 ([#5609](https://github.com/storybooks/storybook/pull/5609))\n* Bump webpack from 4.29.0 to 4.29.3 ([#5570](https://github.com/storybooks/storybook/pull/5570))\n* update modal manager for rn 0.58 support ([#5581](https://github.com/storybooks/storybook/pull/5581))\n* Bump danger from 7.0.7 to 7.0.11 ([#5568](https://github.com/storybooks/storybook/pull/5568))\n* Bump jest-jasmine2 from 24.0.0 to 24.1.0 ([#5569](https://github.com/storybooks/storybook/pull/5569))\n* Bump jest-jasmine2 from 24.0.0 to 24.1.0 ([#5567](https://github.com/storybooks/storybook/pull/5567))\n* Bump handlebars from 4.0.12 to 4.1.0 ([#5576](https://github.com/storybooks/storybook/pull/5576))\n* Bump esm from 3.2.1 to 3.2.4 ([#5556](https://github.com/storybooks/storybook/pull/5556))\n* Bump @types/jest from 23.3.13 to 24.0.0 ([#5554](https://github.com/storybooks/storybook/pull/5554))\n* Bump webpack-dev-middleware from 3.5.1 to 3.5.2 ([#5552](https://github.com/storybooks/storybook/pull/5552))\n* Bump @emotion/core from 10.0.6 to 10.0.7 ([#5555](https://github.com/storybooks/storybook/pull/5555))\n* Bump terser-webpack-plugin from 1.2.1 to 1.2.2 ([#5553](https://github.com/storybooks/storybook/pull/5553))\n* Bump fuse.js from 3.3.1 to 3.4.2 ([#5538](https://github.com/storybooks/storybook/pull/5538))\n* Bump @angular/platform-browser-dynamic from 7.2.3 to 7.2.4 ([#5540](https://github.com/storybooks/storybook/pull/5540))\n* Bump emotion-theming from 10.0.6 to 10.0.7 ([#5541](https://github.com/storybooks/storybook/pull/5541))\n* Bump eslint-config-prettier from 3.6.0 to 4.0.0 ([#5539](https://github.com/storybooks/storybook/pull/5539))"
|
||||
}
|
||||
}
|
||||
3
docs/static/_headers
vendored
Normal file
3
docs/static/_headers
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
/versions.json
|
||||
Access-Control-Allow-Origin: *
|
||||
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
|
||||
14
docs/static/versions.json
vendored
14
docs/static/versions.json
vendored
@ -1,14 +0,0 @@
|
||||
{
|
||||
"next": {
|
||||
"version": "5.0.0-rc.7",
|
||||
"info": {
|
||||
"plain": "### Features\n\n* UI: Page load animation and `STORIES_CONFIGURED` event ([#5756](https://github.com/storybooks/storybook/pull/5756))\n* Theming: Improve `brand` API ([#5733](https://github.com/storybooks/storybook/pull/5733))\n* UI: Fuzzy search improvement ([#5748](https://github.com/storybooks/storybook/pull/5748))\n* UI: Add toolbar animation ([#5742](https://github.com/storybooks/storybook/pull/5742))\n\n### Bug Fixes\n\n* UI: Fix update notifications placement ([#5716](https://github.com/storybooks/storybook/pull/5716))\n* Angular: Fix global style imports ([#5776](https://github.com/storybooks/storybook/pull/5776))\n* Addon-options: Add backwards compatibility ([#5758](https://github.com/storybooks/storybook/pull/5758))\n* Addon-options: Fix deprecated url/name options ([#5773](https://github.com/storybooks/storybook/pull/5773))\n* Addon-knobs: Remove call to `forceReRender()` on `STORY_CHANGED` ([#5753](https://github.com/storybooks/storybook/pull/5753))\n* UI: Fix active state in addon-background, addon-viewport tools ([#5749](https://github.com/storybooks/storybook/pull/5749))"
|
||||
}
|
||||
},
|
||||
"latest": {
|
||||
"version": "4.1.13",
|
||||
"info": {
|
||||
"plain": "### Maintenance\n\n* Cleanup CLI version notice ([#5699](https://github.com/storybooks/storybook/pull/5699))\n* Use static versions.json file instead of hacking one in ([#5675](https://github.com/storybooks/storybook/pull/5675))"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"expo": "^31.0.4",
|
||||
"prop-types": "^15.6.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.2.0",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -18,37 +18,37 @@
|
||||
"test:watch": "jest --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "^7.2.1",
|
||||
"@angular/compiler": "^7.2.3",
|
||||
"@angular/core": "^7.2.1",
|
||||
"@angular/forms": "^7.2.1",
|
||||
"@angular/platform-browser": "^7.2.1",
|
||||
"@angular/common": "^7.2.6",
|
||||
"@angular/compiler": "^7.2.6",
|
||||
"@angular/core": "^7.2.6",
|
||||
"@angular/forms": "^7.2.6",
|
||||
"@angular/platform-browser": "^7.2.6",
|
||||
"@angular/platform-browser-dynamic": "^7.2.6",
|
||||
"@ngrx/store": "^7.2.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^2.6.5",
|
||||
"rxjs": "^6.3.3",
|
||||
"rxjs-compat": "^6.4.0",
|
||||
"zone.js": "^0.8.29"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^0.13.1",
|
||||
"@angular/cli": "^7.3.2",
|
||||
"@angular/compiler-cli": "^7.2.1",
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-backgrounds": "5.0.0-beta.3",
|
||||
"@storybook/addon-centered": "5.0.0-beta.3",
|
||||
"@storybook/addon-jest": "5.0.0-beta.3",
|
||||
"@storybook/addon-knobs": "5.0.0-beta.3",
|
||||
"@storybook/addon-links": "5.0.0-beta.3",
|
||||
"@storybook/addon-notes": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addon-storyshots": "5.0.0-beta.3",
|
||||
"@storybook/addon-storysource": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/angular": "5.0.0-beta.3",
|
||||
"@angular-devkit/build-angular": "^0.13.4",
|
||||
"@angular/cli": "^7.3.3",
|
||||
"@angular/compiler-cli": "^7.2.6",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.0",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.0",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.0",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.0",
|
||||
"@storybook/addon-links": "5.1.0-alpha.0",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/angular": "5.1.0-alpha.0",
|
||||
"@types/core-js": "^2.5.0",
|
||||
"@types/jest": "^24.0.6",
|
||||
"@types/node": "~10.12.19",
|
||||
"@types/node": "~11.9.5",
|
||||
"@types/webpack-env": "^1.13.7",
|
||||
"global": "^4.3.2",
|
||||
"jasmine-core": "~3.3.0",
|
||||
@ -57,6 +57,6 @@
|
||||
"jest-preset-angular": "^6.0.1",
|
||||
"protractor": "~5.4.2",
|
||||
"ts-node": "~8.0.2",
|
||||
"typescript": "^3.3.1"
|
||||
"typescript": "^3.3.3333"
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
|
||||
<storybook-simple-knobs-component>
|
||||
<div
|
||||
ng-reflect-ng-style="[object Object]"
|
||||
style="border-radius: 8px;"
|
||||
style="border: 2px dotted deeppink; border-radius: 8px;"
|
||||
>
|
||||
<h1>
|
||||
My name is Jane,
|
||||
|
||||
@ -9,10 +9,15 @@ storiesOf('Custom|Dependencies', module)
|
||||
title: 'Component dependencies',
|
||||
},
|
||||
}))
|
||||
.addDecorator(withKnobs)
|
||||
.add('inputs and inject dependencies with knobs', () => ({
|
||||
component: DiComponent,
|
||||
props: {
|
||||
title: text('title', 'Component dependencies'),
|
||||
},
|
||||
}));
|
||||
.add(
|
||||
'inputs and inject dependencies with knobs',
|
||||
() => ({
|
||||
component: DiComponent,
|
||||
props: {
|
||||
title: text('title', 'Component dependencies'),
|
||||
},
|
||||
}),
|
||||
{
|
||||
decorators: [withKnobs],
|
||||
}
|
||||
);
|
||||
|
||||
@ -19,10 +19,15 @@ storiesOf('Custom|Pipes', module)
|
||||
field: 'foobar',
|
||||
},
|
||||
}))
|
||||
.addDecorator(withKnobs)
|
||||
.add('With Knobs', () => ({
|
||||
component: NameComponent,
|
||||
props: {
|
||||
field: text('field', 'foobar'),
|
||||
},
|
||||
}));
|
||||
.add(
|
||||
'With Knobs',
|
||||
() => ({
|
||||
component: NameComponent,
|
||||
props: {
|
||||
field: text('field', 'foobar'),
|
||||
},
|
||||
}),
|
||||
{
|
||||
decorators: [withKnobs],
|
||||
}
|
||||
);
|
||||
|
||||
@ -19,14 +19,19 @@ storiesOf('Custom|Providers', module)
|
||||
name: 'Static name',
|
||||
},
|
||||
}))
|
||||
.addDecorator(withKnobs)
|
||||
.add('With knobs', () => {
|
||||
const name = text('name', 'Dynamic knob');
|
||||
.add(
|
||||
'With knobs',
|
||||
() => {
|
||||
const name = text('name', 'Dynamic knob');
|
||||
|
||||
return {
|
||||
component: ServiceComponent,
|
||||
props: {
|
||||
name,
|
||||
},
|
||||
};
|
||||
});
|
||||
return {
|
||||
component: ServiceComponent,
|
||||
props: {
|
||||
name,
|
||||
},
|
||||
};
|
||||
},
|
||||
{
|
||||
decorators: [withKnobs],
|
||||
}
|
||||
);
|
||||
|
||||
@ -24,19 +24,24 @@ storiesOf('Custom|Style', module)
|
||||
`,
|
||||
],
|
||||
}))
|
||||
.addDecorator(withKnobs)
|
||||
.add('With Knobs', () => ({
|
||||
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
|
||||
props: {
|
||||
text: text('text', 'Button with custom styles'),
|
||||
onClick: action('log'),
|
||||
},
|
||||
styles: [
|
||||
`
|
||||
.add(
|
||||
'With Knobs',
|
||||
() => ({
|
||||
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
|
||||
props: {
|
||||
text: text('text', 'Button with custom styles'),
|
||||
onClick: action('log'),
|
||||
},
|
||||
styles: [
|
||||
`
|
||||
storybook-button-component {
|
||||
background-color: red;
|
||||
padding: 25px;
|
||||
}
|
||||
`,
|
||||
],
|
||||
}));
|
||||
],
|
||||
}),
|
||||
{
|
||||
decorators: [withKnobs],
|
||||
}
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@ import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-comp-with-store',
|
||||
template: '<div>{{this.getSotreState()}}</div>',
|
||||
template: '<div>{{this.getStoreState()}}</div>',
|
||||
})
|
||||
class WithStoreComponent {
|
||||
private store: Store<any>;
|
||||
@ -13,7 +13,7 @@ class WithStoreComponent {
|
||||
this.store = store;
|
||||
}
|
||||
|
||||
getSotreState() {
|
||||
getStoreState() {
|
||||
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
|
||||
@ -13,30 +13,30 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.2",
|
||||
"react-dom": "^16.8.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-dom": "^16.8.3",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "5.0.0-beta.3",
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-backgrounds": "5.0.0-beta.3",
|
||||
"@storybook/addon-centered": "5.0.0-beta.3",
|
||||
"@storybook/addon-events": "5.0.0-beta.3",
|
||||
"@storybook/addon-info": "5.0.0-beta.3",
|
||||
"@storybook/addon-jest": "5.0.0-beta.3",
|
||||
"@storybook/addon-knobs": "5.0.0-beta.3",
|
||||
"@storybook/addon-links": "5.0.0-beta.3",
|
||||
"@storybook/addon-notes": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addon-storyshots": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/client-logger": "5.0.0-beta.3",
|
||||
"@storybook/react": "5.0.0-beta.3",
|
||||
"enzyme": "^3.7.0",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.0",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.0",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.0",
|
||||
"@storybook/addon-events": "5.1.0-alpha.0",
|
||||
"@storybook/addon-info": "5.1.0-alpha.0",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.0",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.0",
|
||||
"@storybook/addon-links": "5.1.0-alpha.0",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/client-logger": "5.1.0-alpha.0",
|
||||
"@storybook/react": "5.1.0-alpha.0",
|
||||
"enzyme": "^3.9.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"jest": "^23.6.0",
|
||||
"jest-emotion": "^10.0.7",
|
||||
"react-scripts": "^2.1.3"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-kitchen-sink",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
|
||||
@ -16,29 +16,29 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^16.8.2",
|
||||
"react-dom": "^16.8.1"
|
||||
"react": "^16.8.3",
|
||||
"react-dom": "^16.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-info": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/react": "5.0.0-beta.3",
|
||||
"@types/enzyme": "^3.1.15",
|
||||
"@types/react": "^16.7.22",
|
||||
"@types/react-dom": "^16.0.11",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-info": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/react": "5.1.0-alpha.0",
|
||||
"@types/enzyme": "^3.9.0",
|
||||
"@types/react": "^16.8.4",
|
||||
"@types/react-dom": "^16.8.2",
|
||||
"@types/storybook__addon-actions": "^3.4.1",
|
||||
"@types/storybook__addon-info": "^3.4.2",
|
||||
"@types/storybook__addon-info": "^4.1.0",
|
||||
"@types/storybook__react": "^4.0.0",
|
||||
"enzyme": "^3.8.0",
|
||||
"enzyme": "^3.9.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"fork-ts-checker-webpack-plugin": "^0.5.2",
|
||||
"react-docgen-typescript-loader": "^3.0.1",
|
||||
"react-scripts": "^2.1.3",
|
||||
"tslint": "^5.12.1",
|
||||
"tslint": "^5.13.0",
|
||||
"tslint-config-airbnb": "^5.11.1",
|
||||
"typescript": "^3.3.1"
|
||||
"typescript": "^3.3.3333"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ember-example",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
|
||||
@ -14,38 +14,38 @@
|
||||
"ember-template-compiler": "^1.9.0-alpha"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.2.2",
|
||||
"@storybook/addon-a11y": "5.0.0-beta.3",
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-backgrounds": "5.0.0-beta.3",
|
||||
"@storybook/addon-centered": "5.0.0-beta.3",
|
||||
"@storybook/addon-knobs": "5.0.0-beta.3",
|
||||
"@storybook/addon-links": "5.0.0-beta.3",
|
||||
"@storybook/addon-notes": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addon-storysource": "5.0.0-beta.3",
|
||||
"@storybook/addon-viewport": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/ember": "5.0.0-beta.3",
|
||||
"@babel/core": "^7.3.4",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.0",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.0",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.0",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.0",
|
||||
"@storybook/addon-links": "5.1.0-alpha.0",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.0",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/ember": "5.1.0-alpha.0",
|
||||
"babel-loader": "^8",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"ember-ajax": "^4.0.2",
|
||||
"ember-cli": "~3.7.1",
|
||||
"ember-cli-app-version": "^3.0.0",
|
||||
"ember-cli-babel": "^7.4.1",
|
||||
"ember-cli-babel": "^7.5.0",
|
||||
"ember-cli-htmlbars": "^3.0.1",
|
||||
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
|
||||
"ember-cli-inject-live-reload": "^2.0.1",
|
||||
"ember-cli-shims": "^1.2.0",
|
||||
"ember-cli-sri": "^2.1.0",
|
||||
"ember-cli-storybook": "^0.0.1",
|
||||
"ember-cli-storybook": "^0.1.0",
|
||||
"ember-cli-uglify": "^2.0.0",
|
||||
"ember-load-initializers": "^2.0.0",
|
||||
"ember-resolver": "^5.0.1",
|
||||
"ember-source": "~3.7.3",
|
||||
"ember-resolver": "^5.1.3",
|
||||
"ember-source": "~3.8.0",
|
||||
"loader.js": "^4.2.3",
|
||||
"webpack": "^4.29.3",
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-cli": "^3.2.3"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html-kitchen-sink",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -14,23 +14,23 @@
|
||||
"storybook": "start-storybook -p 9006"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "5.0.0-beta.3",
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-backgrounds": "5.0.0-beta.3",
|
||||
"@storybook/addon-centered": "5.0.0-beta.3",
|
||||
"@storybook/addon-events": "5.0.0-beta.3",
|
||||
"@storybook/addon-jest": "5.0.0-beta.3",
|
||||
"@storybook/addon-knobs": "5.0.0-beta.3",
|
||||
"@storybook/addon-links": "5.0.0-beta.3",
|
||||
"@storybook/addon-notes": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addon-storyshots": "5.0.0-beta.3",
|
||||
"@storybook/addon-storysource": "5.0.0-beta.3",
|
||||
"@storybook/addon-viewport": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/core": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/html": "5.0.0-beta.3",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.0",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.0",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.0",
|
||||
"@storybook/addon-events": "5.1.0-alpha.0",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.0",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.0",
|
||||
"@storybook/addon-links": "5.1.0-alpha.0",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.0",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/core": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/html": "5.1.0-alpha.0",
|
||||
"eventemitter3": "^3.1.0",
|
||||
"format-json": "^1.0.3",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { document, setTimeout } from 'global';
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withA11Y } from '@storybook/addon-a11y';
|
||||
import { withA11y } from '@storybook/addon-a11y';
|
||||
|
||||
const text = 'Testing the a11y addon';
|
||||
|
||||
storiesOf('Addons|a11y', module)
|
||||
.addDecorator(withA11Y)
|
||||
.addDecorator(withA11y)
|
||||
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
|
||||
.add('Default', () => `<button></button>`)
|
||||
.add('Label', () => `<button>${text}</button>`)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "marko-cli",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"description": "Demo of how to build an app using marko-starter",
|
||||
"repository": {
|
||||
@ -20,17 +20,17 @@
|
||||
"test": "npm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"marko": "^4.14.21",
|
||||
"marko": "^4.15.2",
|
||||
"marko-starter": "^2.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-knobs": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addon-storysource": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/marko": "5.0.0-beta.3",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/marko": "5.1.0-alpha.0",
|
||||
"prettier": "^1.16.4",
|
||||
"webpack": "^4.29.3"
|
||||
"webpack": "^4.29.6"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
.count {
|
||||
color:#70b;
|
||||
font-size:3em;
|
||||
}
|
||||
|
||||
.example-button {
|
||||
font-size:1em;
|
||||
padding:0.5em;
|
||||
}
|
||||
@ -36,6 +36,18 @@ class {
|
||||
}
|
||||
}
|
||||
|
||||
style {
|
||||
.count {
|
||||
color:#70b;
|
||||
font-size:3em;
|
||||
}
|
||||
|
||||
.example-button {
|
||||
font-size:1em;
|
||||
padding:0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Elapsed time: ${state.elapsedTime.toFixed(1)}s
|
||||
|
||||
@ -4,12 +4,12 @@ import ClickCount from '../components/click-count/index.marko';
|
||||
import StopWatch from '../components/stop-watch/index.marko';
|
||||
import Welcome from '../components/welcome/index.marko';
|
||||
|
||||
storiesOf('Welcome', module).add('welcome', () => Welcome.renderSync({}));
|
||||
storiesOf('Main|Welcome', module).add('welcome', () => Welcome.renderSync({}));
|
||||
|
||||
storiesOf('Hello', module)
|
||||
storiesOf('Main|Hello', module)
|
||||
.add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
|
||||
.add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
|
||||
|
||||
storiesOf('ClickCount', module).add('Simple', () => ClickCount.renderSync({}));
|
||||
storiesOf('Main|ClickCount', module).add('Simple', () => ClickCount.renderSync({}));
|
||||
|
||||
storiesOf('StopWatch', module).add('Simple', () => StopWatch.renderSync({}));
|
||||
storiesOf('Main|StopWatch', module).add('Simple', () => StopWatch.renderSync({}));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mithril-example",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
|
||||
@ -11,18 +11,18 @@
|
||||
"mithril": "^1.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-backgrounds": "5.0.0-beta.3",
|
||||
"@storybook/addon-centered": "5.0.0-beta.3",
|
||||
"@storybook/addon-knobs": "5.0.0-beta.3",
|
||||
"@storybook/addon-links": "5.0.0-beta.3",
|
||||
"@storybook/addon-notes": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addon-storyshots": "5.0.0-beta.3",
|
||||
"@storybook/addon-storysource": "5.0.0-beta.3",
|
||||
"@storybook/addon-viewport": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/mithril": "5.0.0-beta.3",
|
||||
"webpack": "^4.29.3"
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.0",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.0",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.0",
|
||||
"@storybook/addon-links": "5.1.0-alpha.0",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.0",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/mithril": "5.1.0-alpha.0",
|
||||
"webpack": "^4.29.6"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
import React from 'react';
|
||||
import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
|
||||
import { Global, ThemeProvider, themes, createReset } from '@storybook/theming';
|
||||
import { Global, ThemeProvider, themes, createReset, create, convert } from '@storybook/theming';
|
||||
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
import { withCssResources } from '@storybook/addon-cssresources';
|
||||
import { withA11Y } from '@storybook/addon-a11y';
|
||||
import { withA11y } from '@storybook/addon-a11y';
|
||||
import { withNotes } from '@storybook/addon-notes';
|
||||
|
||||
import 'storybook-chromatic';
|
||||
|
||||
import addHeadWarning from './head-warning';
|
||||
import extraViewports from './extra-viewports.json';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (!process.env.DOTENV_DEVELOPMENT_DISPLAY_WARNING) {
|
||||
@ -30,11 +28,11 @@ addHeadWarning('preview-head-not-loaded', 'Preview head not loaded');
|
||||
addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');
|
||||
|
||||
addDecorator(withCssResources);
|
||||
addDecorator(withA11Y);
|
||||
addDecorator(withA11y);
|
||||
addDecorator(withNotes);
|
||||
|
||||
addDecorator(storyFn => (
|
||||
<ThemeProvider theme={themes.normal}>
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<Global styles={createReset} />
|
||||
{storyFn()}
|
||||
</ThemeProvider>
|
||||
@ -51,14 +49,10 @@ addParameters({
|
||||
options: {
|
||||
hierarchySeparator: /\/|\./,
|
||||
hierarchyRootSeparator: '|',
|
||||
// theme: themes.dark,
|
||||
},
|
||||
viewports: {
|
||||
...INITIAL_VIEWPORTS,
|
||||
...extraViewports,
|
||||
theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
|
||||
},
|
||||
backgrounds: [
|
||||
{ name: 'storybook app', value: themes.normal.background.app, default: true },
|
||||
{ name: 'storybook app', value: themes.light.appBg, default: true },
|
||||
{ name: 'light', value: '#eeeeee' },
|
||||
{ name: 'dark', value: '#222222' },
|
||||
],
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
{
|
||||
"kindleFire2": {
|
||||
"name": "Kindle Fire 2",
|
||||
"styles": {
|
||||
"width": "600px",
|
||||
"height": "963px"
|
||||
},
|
||||
"type": "tablet"
|
||||
},
|
||||
"kindleFireHD": {
|
||||
"name": "Kindle Fire HD",
|
||||
"styles": {
|
||||
"width": "533px",
|
||||
"height": "801px"
|
||||
},
|
||||
"type": "tablet"
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "5.0.0-beta.3",
|
||||
"version": "5.1.0-alpha.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
|
||||
@ -13,46 +13,46 @@
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "5.0.0-beta.3",
|
||||
"@storybook/addon-actions": "5.0.0-beta.3",
|
||||
"@storybook/addon-backgrounds": "5.0.0-beta.3",
|
||||
"@storybook/addon-centered": "5.0.0-beta.3",
|
||||
"@storybook/addon-cssresources": "5.0.0-beta.3",
|
||||
"@storybook/addon-events": "5.0.0-beta.3",
|
||||
"@storybook/addon-graphql": "5.0.0-beta.3",
|
||||
"@storybook/addon-info": "5.0.0-beta.3",
|
||||
"@storybook/addon-jest": "5.0.0-beta.3",
|
||||
"@storybook/addon-knobs": "5.0.0-beta.3",
|
||||
"@storybook/addon-links": "5.0.0-beta.3",
|
||||
"@storybook/addon-notes": "5.0.0-beta.3",
|
||||
"@storybook/addon-options": "5.0.0-beta.3",
|
||||
"@storybook/addon-storyshots": "5.0.0-beta.3",
|
||||
"@storybook/addon-storyshots-puppeteer": "5.0.0-beta.3",
|
||||
"@storybook/addon-storysource": "5.0.0-beta.3",
|
||||
"@storybook/addon-viewport": "5.0.0-beta.3",
|
||||
"@storybook/addons": "5.0.0-beta.3",
|
||||
"@storybook/components": "5.0.0-beta.3",
|
||||
"@storybook/core-events": "5.0.0-beta.3",
|
||||
"@storybook/node-logger": "5.0.0-beta.3",
|
||||
"@storybook/react": "5.0.0-beta.3",
|
||||
"@storybook/theming": "5.0.0-beta.3",
|
||||
"cors": "^2.8.4",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.0",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.0",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.0",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.0",
|
||||
"@storybook/addon-cssresources": "5.1.0-alpha.0",
|
||||
"@storybook/addon-events": "5.1.0-alpha.0",
|
||||
"@storybook/addon-graphql": "5.1.0-alpha.0",
|
||||
"@storybook/addon-info": "5.1.0-alpha.0",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.0",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.0",
|
||||
"@storybook/addon-links": "5.1.0-alpha.0",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.0",
|
||||
"@storybook/addon-options": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storyshots-puppeteer": "5.1.0-alpha.0",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.0",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.0",
|
||||
"@storybook/addons": "5.1.0-alpha.0",
|
||||
"@storybook/components": "5.1.0-alpha.0",
|
||||
"@storybook/core-events": "5.1.0-alpha.0",
|
||||
"@storybook/node-logger": "5.1.0-alpha.0",
|
||||
"@storybook/react": "5.1.0-alpha.0",
|
||||
"@storybook/theming": "5.1.0-alpha.0",
|
||||
"cors": "^2.8.5",
|
||||
"cross-env": "^5.2.0",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"eventemitter3": "^3.1.0",
|
||||
"express": "^4.16.3",
|
||||
"express": "^4.16.4",
|
||||
"express-graphql": "^0.7.1",
|
||||
"format-json": "^1.0.3",
|
||||
"global": "^4.3.2",
|
||||
"graphql": "^14.1.1",
|
||||
"jest-emotion": "^10.0.7",
|
||||
"paths.macro": "^2.0.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.8.2",
|
||||
"react-dom": "^16.8.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
"react-dom": "^16.8.3",
|
||||
"storybook-chromatic": "^1.2.6",
|
||||
"ts-loader": "^5.3.3",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.29.3"
|
||||
"webpack": "^4.29.6"
|
||||
}
|
||||
}
|
||||
|
||||
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