mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 13:01:07 +08:00
Merge next
This commit is contained in:
Gytis Vinclovas
commit
53550c6629
@ -99,6 +99,11 @@ jobs:
|
||||
command: |
|
||||
cd examples/riot-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: Build preact kitchen-sink
|
||||
command: |
|
||||
cd examples/preact-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: Build official-storybook
|
||||
command: |
|
||||
@ -166,6 +171,11 @@ jobs:
|
||||
command: |
|
||||
cd examples/riot-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run preact kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/preact-kitchen-sink
|
||||
yarn storybook --smoke-test --quiet
|
||||
native-smoke-tests:
|
||||
<<: *defaults
|
||||
steps:
|
||||
|
||||
@ -50,6 +50,7 @@ module.exports = {
|
||||
{
|
||||
js: 'never',
|
||||
ts: 'never',
|
||||
mjs: 'never',
|
||||
},
|
||||
],
|
||||
'import/no-extraneous-dependencies': [
|
||||
|
||||
1
.github/autolabeler.yml
vendored
1
.github/autolabeler.yml
vendored
@ -14,6 +14,7 @@
|
||||
'addon: viewport': ["addons/viewport/**"]
|
||||
'app: angular': ["app/angular/**"]
|
||||
'app: polymer ': ["app/polymer/**"]
|
||||
'app: preact': ["app/preact/**"]
|
||||
'app: react-native': ["app/react-native/**"]
|
||||
'app: react': ["app/react/**"]
|
||||
'app: vue': ["app/vue/**"]
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
package OpenSourceProjects_Storybook.patches.buildTypes
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
|
||||
|
||||
/*
|
||||
This patch script was generated by TeamCity on settings change in UI.
|
||||
To apply the patch, change the buildType with uuid = '9f9177e7-9ec9-4e2e-aabb-d304fd667711' (id = 'OpenSourceProjects_Storybook_Test')
|
||||
accordingly, and delete the patch script.
|
||||
*/
|
||||
changeBuildType("9f9177e7-9ec9-4e2e-aabb-d304fd667711") {
|
||||
params {
|
||||
add {
|
||||
param("docker.node.version", "10.13")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,23 +1,23 @@
|
||||
## Addon / Framework Support Table
|
||||
|
||||
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)|
|
||||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |+|
|
||||
|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds) |+|*|+|+|+|+|+|+|+|+|+|
|
||||
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|
|
||||
|[events](addons/events) |+| |+|+|+|+|+|+| | |+|
|
||||
|[graphql](addons/graphql) |+| | | | | | | | | | |
|
||||
|[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[info](addons/info) |+| | | | | | | | | | |
|
||||
|[jest](addons/jest) |+| | |+| | |+| | | | |
|
||||
|[knobs](addons/knobs) |+|+*|+|+|+|+|+|+|+|+|+|
|
||||
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|
|
||||
|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|
|
||||
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|
|
||||
|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+|
|
||||
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |
|
||||
|[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+|
|
||||
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|
|
||||
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)|
|
||||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |+|+|
|
||||
|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds) |+|*|+|+|+|+|+|+|+|+|+|+|
|
||||
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|+|
|
||||
|[events](addons/events) |+| |+|+|+|+|+|+| | |+|+|
|
||||
|[graphql](addons/graphql) |+| | | | | | | | | | | |
|
||||
|[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[info](addons/info) |+| | | | | | | | | | | |
|
||||
|[jest](addons/jest) |+| | |+| | |+| | | | | |
|
||||
|[knobs](addons/knobs) |+|+*|+|+|+|+|+|+|+|+|+|+|
|
||||
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|+|
|
||||
|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|+|
|
||||
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|+|
|
||||
|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |+|
|
||||
|[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
|
||||
89
CHANGELOG.md
89
CHANGELOG.md
@ -1,3 +1,92 @@
|
||||
## 4.2.0-alpha.4 (December 18, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React: fix alias for react(-dom) to resolve to the user's version ([#5042](https://github.com/storybooks/storybook/pull/5042))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Bump husky from 1.2.0 to 1.3.0 ([#5038](https://github.com/storybooks/storybook/pull/5038))
|
||||
* Bump fork-ts-checker-webpack-plugin from 0.4.15 to 0.5.2 ([#5037](https://github.com/storybooks/storybook/pull/5037))
|
||||
|
||||
## 4.2.0-alpha.3 (December 18, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React: add alias to react & react-dom ([#5016](https://github.com/storybooks/storybook/pull/5016))
|
||||
* Addon-knobs: fix color picker display ([#5010](https://github.com/storybooks/storybook/pull/5010))
|
||||
|
||||
## 4.2.0-alpha.2 (December 16, 2018)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-Info: add markdown support for jsdoc comments ([#4983](https://github.com/storybooks/storybook/pull/4983))
|
||||
* Addon-Storysource: support Flow ([#4971](https://github.com/storybooks/storybook/pull/4971))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Make applyPresets function signature more consistent ([#4988](https://github.com/storybooks/storybook/pull/4988))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* RESET lockfile ([#4991](https://github.com/storybooks/storybook/pull/4991))
|
||||
|
||||
## 4.1.2 (December 15, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-Knob: Add missing key property in Panel ([#4507](https://github.com/storybooks/storybook/pull/4507))
|
||||
* Fix package version dependencies ([#4960](https://github.com/storybooks/storybook/pull/4960))
|
||||
|
||||
## 4.2.0-alpha.1 (December 12, 2018)
|
||||
|
||||
Fixes 4.2.0-alpha.0
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-info: add forwardRef support ([#4961](https://github.com/storybooks/storybook/pull/4961))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-knobs: Add missing key property in Panel ([#4507](https://github.com/storybooks/storybook/pull/4507))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Addon-notes: Migrated to TypeScript ([#4758](https://github.com/storybooks/storybook/pull/4758))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Fix: Add missing peer dependencies to addon-knobs ([#4928](https://github.com/storybooks/storybook/pull/4928))
|
||||
|
||||
## 4.2.0-alpha.0 (December 12, 2018)
|
||||
|
||||
Bad release
|
||||
|
||||
## 4.1.1 (December 12, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* FIX react native by adding an empty array named dlls to the templateParameters ([#4985](https://github.com/storybooks/storybook/pull/4985))
|
||||
|
||||
## 4.1.0 (December 12, 2018)
|
||||
|
||||
Storybook 4.1 with performance and compatibility improvements! Highlights include:
|
||||
|
||||
* Core: Performance optimizations on separate manager preview split, improved cold start, restart & rebuild ([#4834](https://github.com/storybooks/storybook/pull/4834))
|
||||
* React: add support for all versions of react ([#4808](https://github.com/storybooks/storybook/pull/4808))
|
||||
* Addon-CSSResources: new adddon to dynamically add/remove css ([#4622](https://github.com/storybooks/storybook/pull/4622))
|
||||
* React: use babel presets/plugins based on CRA. ([#4836](https://github.com/storybooks/storybook/pull/4836))
|
||||
* React-native: Add ability to filter story list ([#4806](https://github.com/storybooks/storybook/pull/4806))
|
||||
* React: Add TypeScript support for react-scripts ([#4824](https://github.com/storybooks/storybook/pull/4824))
|
||||
|
||||
There are dozens more fixes, features, and tweaks in the 4.1 release. See changelogs for `4.1.0-*` for details.
|
||||
|
||||
## 4.1.0-alpha.13 (December 12, 2018)
|
||||
|
||||
### Maintenance
|
||||
|
||||
* React-native: add core-js to addons ([#4981](https://github.com/storybooks/storybook/pull/4981))
|
||||
|
||||
## 4.1.0-alpha.12 (December 11, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
@ -96,6 +96,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
| [Svelte](app/svelte) | [v4.0.0](https://storybooks-svelte.netlify.com/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | [v4.0.0](https://storybooks-riot.netlify.com/) | [](app/riot) |
|
||||
| [Ember](app/ember) | [v4.0.0](https://storybooks-ember.netlify.com/) | [](app/ember) |
|
||||
| [Preact](app/preact) | [v4.0.0](https://storybooks-preact.netlify.com/) | [](app/preact) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
35
__mocks__/inject-decorator.flow-stories.txt
Normal file
35
__mocks__/inject-decorator.flow-stories.txt
Normal file
@ -0,0 +1,35 @@
|
||||
// @flow
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
|
||||
import TableComponent from '../components/TableComponent';
|
||||
|
||||
import type { JssClasses } from '../types';
|
||||
|
||||
type State = {
|
||||
value: any,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
classes: JssClasses,
|
||||
name: string,
|
||||
};
|
||||
|
||||
class Table extends React.Component<Props, State> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
state: State;
|
||||
|
||||
render() {
|
||||
return <TableComponent />;
|
||||
}
|
||||
}
|
||||
|
||||
const stories = storiesOf('Table', module);
|
||||
stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -26,11 +26,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/client-logger": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/client-logger": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"axe-core": "^3.1.2",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -23,9 +23,10 @@
|
||||
"@emotion/core": "^0.13.1",
|
||||
"@emotion/provider": "^0.11.2",
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"deep-equal": "^1.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,8 +25,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"eventemitter3": "^3.1.0",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
|
||||
@ -47,6 +47,20 @@ storiesOf('MyComponent', module)
|
||||
}));
|
||||
```
|
||||
|
||||
example for Preact:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/preact';
|
||||
import centered from '@storybook/addon-centered/preact';
|
||||
|
||||
import MyComponent from '../Component';
|
||||
|
||||
storiesOf('MyComponent', module)
|
||||
.addDecorator(centered)
|
||||
.add('without props', () => (<MyComponent />))
|
||||
.add('with some props', () => (<MyComponent text="The Comp"/>));
|
||||
```
|
||||
|
||||
example for Svelte:
|
||||
|
||||
```js
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,6 +22,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
1
addons/centered/preact.js
Normal file
1
addons/centered/preact.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('./dist/preact');
|
||||
12
addons/centered/src/preact.js
Normal file
12
addons/centered/src/preact.js
Normal file
@ -0,0 +1,12 @@
|
||||
/** @jsx h */
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { h } from 'preact';
|
||||
import styles from './styles';
|
||||
|
||||
export default function(storyFn) {
|
||||
return (
|
||||
<div style={styles.style}>
|
||||
<div style={styles.innerStyle}>{storyFn()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,9 +25,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-syntax-highlighter": "^10.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,8 +24,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,7 +21,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.3"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,6 +21,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.12.0",
|
||||
"graphql": "^14.0.2",
|
||||
|
||||
@ -17,7 +17,7 @@ npm i -D @storybook/addon-info
|
||||
|
||||
## Basic usage
|
||||
|
||||
Then, add `withInfo` as a decarator to your book of stories.
|
||||
Then, add `withInfo` as a decorator to your book of stories.
|
||||
It is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.
|
||||
|
||||
It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,14 +22,16 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/client-logger": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/client-logger": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.1.0",
|
||||
"nested-object-assign": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-addons-create-fragment": "^15.5.3",
|
||||
"react-is": "^16.6.1",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -2970,7 +2970,79 @@ exports[`addon Info should render component description 1`] = `
|
||||
}
|
||||
>
|
||||
<div>
|
||||
Awesome test component description
|
||||
<H1
|
||||
context={Object {}}
|
||||
id="awesome-test-component-description"
|
||||
key="0"
|
||||
>
|
||||
<h1
|
||||
id="awesome-test-component-description"
|
||||
style={
|
||||
Object {
|
||||
"WebkitFontSmoothing": "antialiased",
|
||||
"borderBottom": "1px solid #eee",
|
||||
"color": "#444",
|
||||
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
|
||||
"fontSize": "40px",
|
||||
"fontWeight": 600,
|
||||
"margin": 0,
|
||||
"padding": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
Awesome test component description
|
||||
</h1>
|
||||
</H1>
|
||||
<H2
|
||||
context={Object {}}
|
||||
id="awesome-test-component-description-with-markdown-support"
|
||||
key="1"
|
||||
>
|
||||
<h2
|
||||
id="awesome-test-component-description-with-markdown-support"
|
||||
style={
|
||||
Object {
|
||||
"WebkitFontSmoothing": "antialiased",
|
||||
"color": "#444",
|
||||
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
|
||||
"fontSize": "30px",
|
||||
"fontWeight": 600,
|
||||
"margin": 0,
|
||||
"padding": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
with markdown support
|
||||
</h2>
|
||||
</H2>
|
||||
<P
|
||||
context={Object {}}
|
||||
key="4"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"WebkitFontSmoothing": "antialiased",
|
||||
"color": "#444",
|
||||
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
|
||||
"fontSize": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<strong
|
||||
key="2"
|
||||
>
|
||||
bold
|
||||
</strong>
|
||||
|
||||
<em
|
||||
key="3"
|
||||
>
|
||||
cursive
|
||||
</em>
|
||||
|
||||
</div>
|
||||
</P>
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { isForwardRef } from 'react-is';
|
||||
import PropTypes from 'prop-types';
|
||||
import Props from './Props';
|
||||
|
||||
@ -72,6 +73,43 @@ export default function Node(props) {
|
||||
);
|
||||
}
|
||||
|
||||
if (isForwardRef(node)) {
|
||||
const childElement = node.type.render(node.props);
|
||||
return (
|
||||
<div>
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
<
|
||||
{`ForwardRef`}
|
||||
</span>
|
||||
<Props
|
||||
node={node}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
<span style={tagStyle}>></span>
|
||||
</div>
|
||||
<Node
|
||||
node={childElement}
|
||||
depth={depth + 1}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
</
|
||||
{`ForwardRef`}
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Single-line tag
|
||||
if (!children) {
|
||||
return (
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import React, { Component, createElement } from 'react';
|
||||
import { isForwardRef } from 'react-is';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import PropTypes from 'prop-types';
|
||||
import global from 'global';
|
||||
@ -255,7 +256,8 @@ class Story extends Component {
|
||||
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
|
||||
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
|
||||
if (STORYBOOK_REACT_CLASSES[key].name === context.kind) {
|
||||
retDiv = <div>{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}</div>;
|
||||
const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
|
||||
retDiv = <div>{this.marksy(componentDescription).tree}</div>;
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -337,9 +339,13 @@ class Story extends Component {
|
||||
if (innerChildren.props && innerChildren.props.children) {
|
||||
extract(innerChildren.props.children);
|
||||
}
|
||||
if (isForwardRef(innerChildren)) {
|
||||
extract(innerChildren.type.render(innerChildren.props));
|
||||
}
|
||||
if (
|
||||
typeof innerChildren === 'string' ||
|
||||
typeof innerChildren.type === 'string' ||
|
||||
isForwardRef(innerChildren) ||
|
||||
(Array.isArray(propTablesExclude) && // also ignore excluded types
|
||||
~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise
|
||||
) {
|
||||
|
||||
@ -28,7 +28,11 @@ const storybookReactClassMock = {
|
||||
name: 'TestComponent',
|
||||
path: reactClassPath,
|
||||
docgenInfo: {
|
||||
description: 'Awesome test component description',
|
||||
description: `
|
||||
# Awesome test component description
|
||||
## with markdown support
|
||||
**bold** *cursive*
|
||||
`,
|
||||
name: 'TestComponent',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,8 +28,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"upath": "^1.1.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,11 +21,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "^0.13.1",
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^2.5.7",
|
||||
"escape-html": "^1.0.3",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,9 +21,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"marked": "^0.5.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,7 +23,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,7 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-color-picker": "^0.4.0",
|
||||
@ -29,7 +30,7 @@
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "4.1.0-alpha.1",
|
||||
"@storybook/addon-knobs": "4.2.0-alpha.1",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,7 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -5,6 +5,7 @@ module.exports = {
|
||||
'@storybook/html',
|
||||
'@storybook/react',
|
||||
'@storybook/react-native',
|
||||
'@storybook/preact',
|
||||
'@storybook/vue',
|
||||
'@storybook/svelte',
|
||||
'enzyme',
|
||||
|
||||
@ -52,9 +52,9 @@ other tools may lack this feature. Since Storyshot is running under Jest,
|
||||
we need to polyfill this functionality to work with Jest. The easiest
|
||||
way is to integrate it to babel.
|
||||
|
||||
One of the possible babel plugins to
|
||||
polyfill this functionality might be
|
||||
[babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
|
||||
You can do this with a Babel [plugin](https://github.com/smrq/babel-plugin-require-context-hook) or [macro](https://github.com/storybooks/require-context.macro). If you're using `create-react-app` (v2 or above), you will use the macro.
|
||||
|
||||
- *Plugin*
|
||||
|
||||
First, install it:
|
||||
|
||||
@ -88,6 +88,23 @@ Finally, add the plugin to `.babelrc`:
|
||||
```
|
||||
The plugin is only added to the test environment otherwise it could replace webpack's version of it.
|
||||
|
||||
- *Macro*
|
||||
|
||||
First, install it:
|
||||
|
||||
```sh
|
||||
npm install --save-dev require-context.macro
|
||||
```
|
||||
|
||||
Now, inside of your Storybook config file, simply import the macro and run it in place of `require.context`, like so:
|
||||
|
||||
```javascript
|
||||
import requireContext from 'require-context.macro';
|
||||
|
||||
// const req = require.context('../stories', true, /.stories.js$/); <-- replaced
|
||||
const req = requireContext('../stories', true, /.stories.js$/);
|
||||
```
|
||||
|
||||
### Configure Jest for React
|
||||
StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
@ -141,6 +158,14 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
### Configure Jest for Preact
|
||||
StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
```sh
|
||||
npm install --save-dev preact-render-to-json
|
||||
```
|
||||
|
||||
### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
|
||||
Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
@ -33,10 +33,10 @@
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "4.1.0-alpha.12",
|
||||
"@storybook/addon-links": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/react": "4.1.0-alpha.12",
|
||||
"@storybook/addon-actions": "4.2.0-alpha.4",
|
||||
"@storybook/addon-links": "4.2.0-alpha.4",
|
||||
"@storybook/addons": "4.2.0-alpha.1",
|
||||
"@storybook/react": "4.2.0-alpha.4",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"react": "^16.6.0"
|
||||
},
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
/** @jsx h */
|
||||
|
||||
import global from 'global';
|
||||
import configure from '../configure';
|
||||
import hasDependency from '../hasDependency';
|
||||
|
||||
function test(options) {
|
||||
return (
|
||||
options.framework === 'preact' || (!options.framework && hasDependency('@storybook/preact'))
|
||||
);
|
||||
}
|
||||
|
||||
function load(options) {
|
||||
global.STORYBOOK_ENV = 'preact';
|
||||
|
||||
const { configPath, config } = options;
|
||||
const storybook = require.requireActual('@storybook/preact');
|
||||
|
||||
configure({ configPath, config, storybook });
|
||||
|
||||
return {
|
||||
framework: 'preact',
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for preact');
|
||||
},
|
||||
storybook,
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
load,
|
||||
test,
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
/** @jsx h */
|
||||
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import preactRenderer from 'preact-render-to-json';
|
||||
|
||||
function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
|
||||
const storyElement = story.render(context);
|
||||
const currentRenderer = renderer || preactRenderer;
|
||||
const tree = currentRenderer(storyElement, rendererOptions);
|
||||
|
||||
if (serializer) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
'The "serializer" option of @storybook/addon-storyshots has been deprecated. Please use "snapshotSerializers: [<your serializer>]" in the future.'
|
||||
);
|
||||
return serializer(tree);
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
|
||||
export default getRenderedTree;
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,7 +21,7 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "4.1.0-alpha.12",
|
||||
"@storybook/node-logger": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"jest-image-snapshot": "^2.6.0",
|
||||
"puppeteer": "^1.9.0",
|
||||
|
||||
@ -46,6 +46,7 @@ The parser that will be parsing your code to AST (based on [prettier](https://gi
|
||||
Alowed values:
|
||||
* `javascript` - default
|
||||
* `typescript`
|
||||
* `flow`
|
||||
|
||||
Usage:
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,8 +21,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
|
||||
@ -19,6 +19,45 @@ storiesOf('Custom|ng-content', module).add('Default', () => ({
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator injectDecorator option is false - flow does not inject stories decorator after the all "storiesOf" functions 1`] = `
|
||||
"// @flow
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
|
||||
import TableComponent from '../components/TableComponent';
|
||||
|
||||
import type { JssClasses } from '../types';
|
||||
|
||||
type State = {
|
||||
value: any,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
classes: JssClasses,
|
||||
name: string,
|
||||
};
|
||||
|
||||
class Table extends React.Component<Props, State> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
state: State;
|
||||
|
||||
render() {
|
||||
return <TableComponent />;
|
||||
}
|
||||
}
|
||||
|
||||
const stories = storiesOf('Table', module);
|
||||
stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
|
||||
"import { Component } from '@angular/core';
|
||||
import { Store, StoreModule } from '@ngrx/store';
|
||||
@ -245,6 +284,60 @@ storiesOf('Custom|ng-content', module).addDecorator(withStorySource(__STORY__, _
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator positive - flow calculates "adds" map 1`] = `
|
||||
Object {
|
||||
"@Flow Class": Object {
|
||||
"endLoc": Object {
|
||||
"col": 70,
|
||||
"line": 35,
|
||||
},
|
||||
"startLoc": Object {
|
||||
"col": 12,
|
||||
"line": 35,
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`inject-decorator positive - flow injects stories decorator after the all "storiesOf" functions 1`] = `
|
||||
"// @flow
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
|
||||
import TableComponent from '../components/TableComponent';
|
||||
|
||||
import type { JssClasses } from '../types';
|
||||
|
||||
type State = {
|
||||
value: any,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
classes: JssClasses,
|
||||
name: string,
|
||||
};
|
||||
|
||||
class Table extends React.Component<Props, State> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
state: State;
|
||||
|
||||
render() {
|
||||
return <TableComponent />;
|
||||
}
|
||||
}
|
||||
|
||||
const stories = storiesOf('Table', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__));
|
||||
stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator positive - ts calculates "adds" map 1`] = `
|
||||
Object {
|
||||
"ngrx|Store@With component": Object {
|
||||
|
||||
@ -51,6 +51,29 @@ describe('inject-decorator', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('positive - flow', () => {
|
||||
const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
|
||||
const source = fs.readFileSync(mockFilePath, 'utf-8');
|
||||
const result = injectDecorator(
|
||||
source,
|
||||
ADD_DECORATOR_STATEMENT,
|
||||
path.resolve(__dirname, mockFilePath),
|
||||
{ parser: 'flow' }
|
||||
);
|
||||
|
||||
it('returns "changed" flag', () => {
|
||||
expect(result.changed).toBeTruthy();
|
||||
});
|
||||
|
||||
it('injects stories decorator after the all "storiesOf" functions', () => {
|
||||
expect(result.source).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('calculates "adds" map', () => {
|
||||
expect(result.addsMap).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('positive - ts', () => {
|
||||
const mockFilePath = './__mocks__/inject-decorator.ts.txt';
|
||||
const source = fs.readFileSync(mockFilePath, 'utf-8');
|
||||
@ -155,6 +178,24 @@ describe('inject-decorator', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('injectDecorator option is false - flow', () => {
|
||||
const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
|
||||
const source = fs.readFileSync(mockFilePath, 'utf-8');
|
||||
const result = injectDecorator(
|
||||
source,
|
||||
ADD_DECORATOR_STATEMENT,
|
||||
path.resolve(__dirname, mockFilePath),
|
||||
{
|
||||
injectDecorator: false,
|
||||
parser: 'flow',
|
||||
}
|
||||
);
|
||||
|
||||
it('does not inject stories decorator after the all "storiesOf" functions', () => {
|
||||
expect(result.source).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('injectDecorator option is false - ts', () => {
|
||||
const mockFilePath = './__mocks__/inject-decorator.ts.txt';
|
||||
const source = fs.readFileSync(mockFilePath, 'utf-8');
|
||||
|
||||
@ -9,6 +9,11 @@ function getParser(type) {
|
||||
return require('./parser-ts').default;
|
||||
}
|
||||
|
||||
if (type === 'flow') {
|
||||
// eslint-disable-next-line global-require
|
||||
return require('./parser-flow').default;
|
||||
}
|
||||
|
||||
throw new Error(`Parser of type "${type}" is not supported`);
|
||||
}
|
||||
|
||||
|
||||
9
addons/storysource/src/loader/parsers/parser-flow.js
Normal file
9
addons/storysource/src/loader/parsers/parser-flow.js
Normal file
@ -0,0 +1,9 @@
|
||||
import parseFlow from 'prettier/parser-flow';
|
||||
|
||||
function parse(source) {
|
||||
return parseFlow.parsers.flow.parse(source);
|
||||
}
|
||||
|
||||
export default {
|
||||
parse,
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,9 +21,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/components": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/components": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,11 +25,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"@storybook/node-logger": "4.1.0-alpha.12",
|
||||
"@storybook/core": "4.2.0-alpha.4",
|
||||
"@storybook/node-logger": "4.2.0-alpha.4",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^2.5.7",
|
||||
"fork-ts-checker-webpack-plugin": "^0.4.14",
|
||||
"fork-ts-checker-webpack-plugin": "^0.5.2",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
"react-dom": "^16.6.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -23,7 +23,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.0.0",
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"@storybook/core": "4.2.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"@storybook/core": "4.2.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"@storybook/core": "4.2.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,7 +26,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.2.0",
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"@storybook/core": "4.2.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"@storybook/core": "4.2.0-alpha.4",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
|
||||
2
app/preact/.npmignore
Normal file
2
app/preact/.npmignore
Normal file
@ -0,0 +1,2 @@
|
||||
docs
|
||||
.babelrc
|
||||
29
app/preact/README.md
Normal file
29
app/preact/README.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Storybook for Preact
|
||||
|
||||
Storybook for Preact is a UI development environment for your Preact components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
## Getting Started
|
||||
|
||||
```sh
|
||||
cd my-preact-app
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
|
||||
|
||||
## Docs
|
||||
|
||||
- [Basics](https://storybook.js.org/basics/introduction)
|
||||
- [Configurations](https://storybook.js.org/configurations/default-config)
|
||||
- [Addons](https://storybook.js.org/addons/introduction)
|
||||
4
app/preact/bin/build.js
Executable file
4
app/preact/bin/build.js
Executable file
@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
require('../dist/server/build');
|
||||
3
app/preact/bin/index.js
Executable file
3
app/preact/bin/index.js
Executable file
@ -0,0 +1,3 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
require('../dist/server');
|
||||
47
app/preact/package.json
Normal file
47
app/preact/package.json
Normal file
@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/preact",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
"storybook-server": "./bin/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.2.0",
|
||||
"@storybook/core": "4.2.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
"react-dom": "^16.6.0",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"preact": "^8.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"preact": "^8.3.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
9
app/preact/src/client/index.js
Normal file
9
app/preact/src/client/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
} from './preview';
|
||||
5
app/preact/src/client/preview/globals.js
Normal file
5
app/preact/src/client/preview/globals.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { window } from 'global';
|
||||
|
||||
if (window) {
|
||||
window.STORYBOOK_ENV = 'preact';
|
||||
}
|
||||
18
app/preact/src/client/preview/index.js
Normal file
18
app/preact/src/client/preview/index.js
Normal file
@ -0,0 +1,18 @@
|
||||
import { start } from '@storybook/core/client';
|
||||
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
28
app/preact/src/client/preview/render.js
Normal file
28
app/preact/src/client/preview/render.js
Normal file
@ -0,0 +1,28 @@
|
||||
/* eslint-disable-next-line no-unused-vars */
|
||||
import { h, render } from 'preact';
|
||||
import { document } from 'global';
|
||||
import { stripIndents } from 'common-tags';
|
||||
|
||||
let renderedStory;
|
||||
const rootElement = document ? document.getElementById('root') : null;
|
||||
|
||||
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
|
||||
const element = story();
|
||||
|
||||
if (!element) {
|
||||
showError({
|
||||
title: `Expecting a Preact element from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
description: stripIndents`
|
||||
Did you forget to return the Preact element from the story?
|
||||
Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
|
||||
`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
render(null, rootElement, renderedStory);
|
||||
|
||||
showMain();
|
||||
|
||||
renderedStory = render(element, rootElement);
|
||||
}
|
||||
4
app/preact/src/server/build.js
Normal file
4
app/preact/src/server/build.js
Normal file
@ -0,0 +1,4 @@
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import options from './options';
|
||||
|
||||
buildStatic(options);
|
||||
9
app/preact/src/server/framework-preset-preact.js
Normal file
9
app/preact/src/server/framework-preset-preact.js
Normal file
@ -0,0 +1,9 @@
|
||||
export function babelDefault(config) {
|
||||
return {
|
||||
...config,
|
||||
plugins: [
|
||||
...config.plugins,
|
||||
[require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }],
|
||||
],
|
||||
};
|
||||
}
|
||||
4
app/preact/src/server/index.js
Normal file
4
app/preact/src/server/index.js
Normal file
@ -0,0 +1,4 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
6
app/preact/src/server/options.js
Normal file
6
app/preact/src/server/options.js
Normal file
@ -0,0 +1,6 @@
|
||||
import packageJson from '../../package.json';
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
frameworkPresets: [require.resolve('./framework-preset-preact.js')],
|
||||
};
|
||||
8
app/preact/standalone.js
Normal file
8
app/preact/standalone.js
Normal file
@ -0,0 +1,8 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
2
app/react-native-server/.npmignore
Normal file
2
app/react-native-server/.npmignore
Normal file
@ -0,0 +1,2 @@
|
||||
docs
|
||||
.babelrc
|
||||
37
app/react-native-server/package.json
Normal file
37
app/react-native-server/package.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "@storybook/react-native-server",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-native",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/react-native-server",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"storybook": "dist/bin/storybook.js"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"commander": "^2.19.0",
|
||||
"webpack": "^4.23.1",
|
||||
"ws": "^6.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
137
app/react-native-server/readme.md
Normal file
137
app/react-native-server/readme.md
Normal file
@ -0,0 +1,137 @@
|
||||
# Storybook for React Native
|
||||
|
||||
With Storybook for React Native you can design and develop individual React Native components without running your app.
|
||||
|
||||
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
## Getting Started
|
||||
|
||||
The `storybook` CLI tool can be used to add Storybook to your React Native app. Install the `storybook` tool if necessary and run it from your project directory with these commands:
|
||||
|
||||
```shell
|
||||
cd my-rn-app
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
The next thing you need to do is make Storybook UI visible in your app.
|
||||
|
||||
### CRNA, React Native vanilla
|
||||
|
||||
The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
|
||||
|
||||
```js
|
||||
export default from './storybook';
|
||||
```
|
||||
|
||||
This will get you up and running quickly, but then you lose your app!
|
||||
There are multiple options here. for example, you can export conditionally:
|
||||
|
||||
```js
|
||||
import StorybookUI from './storybook';
|
||||
|
||||
import App from './app';
|
||||
|
||||
module.exports = __DEV__ ? StorybookUI : App;
|
||||
```
|
||||
|
||||
### React Native Navigation, other complex use cases
|
||||
|
||||
`StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
|
||||
|
||||
## Start Storybook server (optional)
|
||||
|
||||
If you want to control storybook from browser/VS Code/websockets you need to start the server.
|
||||
After initial setup start the storybook server with the storybook npm script.
|
||||
|
||||
```shell
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
Now, you can open <http://localhost:7007> to view your storybook menus in the browser.
|
||||
|
||||
## Old standalone behaviour
|
||||
|
||||
Since storybook version v4.0 packager is removed from storybook.
|
||||
The suggested storybook usage is to include it inside your app.
|
||||
If you want to keep the old behaviour, you have to start the packager yourself with a different project root.
|
||||
|
||||
```
|
||||
npm run storybook start -p 7007 | react-native start --projectRoot storybook
|
||||
```
|
||||
|
||||
## Start App
|
||||
|
||||
To see your Storybook stories on the device, you should start your mobile app for the `<platform>` of your choice (typically `ios` or `android`). (Note that due to an implementation detail, your stories will only show up in the left pane of your browser window after your device has connected to this storybook server.)
|
||||
|
||||
For CRNA apps:
|
||||
|
||||
npm run <platform>
|
||||
|
||||
For RN apps:
|
||||
|
||||
react-native run-<platform>
|
||||
|
||||
Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app.
|
||||
|
||||
If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
|
||||
`adb reverse tcp:7007 tcp:7007`
|
||||
|
||||
## Start Command Parameters
|
||||
|
||||
The following parameters can be passed to the start command:
|
||||
|
||||
```
|
||||
-h, --host <host>
|
||||
host to listen on
|
||||
-p, --port <port>
|
||||
port to listen on
|
||||
-s, --secured
|
||||
whether server is running on https
|
||||
-c, --config-dir [dir-name]
|
||||
storybook config directory
|
||||
-e, --environment [environment]
|
||||
DEVELOPMENT/PRODUCTION environment for webpack
|
||||
-i, --manual-id
|
||||
allow multiple users to work with same storybook
|
||||
--smoke-test
|
||||
Exit after successful start
|
||||
```
|
||||
|
||||
## getStorybookUI Options
|
||||
|
||||
You can pass these parameters to getStorybookUI call in your storybook entry point:
|
||||
|
||||
```
|
||||
{
|
||||
onDeviceUI: Boolean (true)
|
||||
-- display navigator and addons on the device
|
||||
disableWebsockets: Boolean (false)
|
||||
-- allows to display stories without running storybook server. Should be used with onDeviceUI
|
||||
secured: Boolean (false)
|
||||
-- use wss/https instead of ws/http
|
||||
host: String (NativeModules.SourceCode.scriptURL)
|
||||
-- host to use
|
||||
port: Number (7007)
|
||||
-- port to use
|
||||
query: String ("")
|
||||
-- additional query string to pass to websockets
|
||||
isUIHidden: Boolean (false)
|
||||
-- should the ui be closed initialy.
|
||||
tabOpen: Number (0)
|
||||
-- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
|
||||
initialSelection: Object (null)
|
||||
-- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }`
|
||||
shouldPersistSelection: Boolean (true)
|
||||
-- initialize storybook with the last selected story.
|
||||
shouldDisableKeyboardAvoidingView: Boolean (false)
|
||||
-- Disable KeyboardAvoidingView wrapping Storybook's view
|
||||
keyboardAvoidingViewVerticalOffset: Number (0)
|
||||
-- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
|
||||
}
|
||||
```
|
||||
|
||||
## Learn More
|
||||
|
||||
Check the `docs` directory in this repo for more advanced setup guides and other info.
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "4.1.0-alpha.12",
|
||||
"version": "4.2.0-alpha.4",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -16,41 +16,24 @@
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"main": "src/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"bin": {
|
||||
"storybook": "dist/bin/storybook.js"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.1.0-alpha.12",
|
||||
"@storybook/channel-websocket": "4.1.0-alpha.12",
|
||||
"@storybook/channels": "4.1.0-alpha.12",
|
||||
"@storybook/core": "4.1.0-alpha.12",
|
||||
"@storybook/core-events": "4.1.0-alpha.12",
|
||||
"@storybook/ui": "4.1.0-alpha.12",
|
||||
"commander": "^2.19.0",
|
||||
"@storybook/addons": "4.2.0-alpha.4",
|
||||
"@storybook/channel-websocket": "4.2.0-alpha.4",
|
||||
"@storybook/channels": "4.2.0-alpha.4",
|
||||
"@storybook/client-api": "4.2.0-alpha.4",
|
||||
"@storybook/core-events": "4.2.0-alpha.4",
|
||||
"core-js": "^2.5.7",
|
||||
"express": "^4.16.3",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.6.0",
|
||||
"react-dev-utils": "^6.1.0",
|
||||
"react-dom": "^16.6.0",
|
||||
"react-native-swipe-gestures": "^1.0.2",
|
||||
"shelljs": "^0.8.2",
|
||||
"url-parse": "^1.4.3",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.23.1",
|
||||
"ws": "^6.1.0"
|
||||
"url-parse": "^1.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-native": "^0.52.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"react-native": ">=0.51.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
2
app/react-native/src/index.js
vendored
2
app/react-native/src/index.js
vendored
@ -1,4 +1,4 @@
|
||||
import Preview from './client/preview';
|
||||
import Preview from './preview';
|
||||
|
||||
const preview = new Preview();
|
||||
|
||||
|
||||
@ -10,11 +10,11 @@ import {
|
||||
} from 'react-native';
|
||||
import Events from '@storybook/core-events';
|
||||
|
||||
import StoryListView from '../StoryListView';
|
||||
import StoryView from '../StoryView';
|
||||
import Addons from './addons';
|
||||
import StoryListView from '../StoryListView/index';
|
||||
import StoryView from '../StoryView/index';
|
||||
import Addons from './addons/index';
|
||||
import Panel from './panel';
|
||||
import Navigation from './navigation';
|
||||
import Navigation from './navigation/index';
|
||||
import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
|
||||
|
||||
import { PREVIEW } from './navigation/consts';
|
||||
@ -8,9 +8,9 @@ import addons from '@storybook/addons';
|
||||
import Events from '@storybook/core-events';
|
||||
import Channel from '@storybook/channels';
|
||||
import createChannel from '@storybook/channel-websocket';
|
||||
import { StoryStore, ClientApi } from '@storybook/core/client';
|
||||
import OnDeviceUI from './components/OnDeviceUI';
|
||||
import StoryView from './components/StoryView';
|
||||
import { StoryStore, ClientApi } from '@storybook/client-api';
|
||||
import OnDeviceUI from './components/OnDeviceUI/index';
|
||||
import StoryView from './components/StoryView/index';
|
||||
|
||||
const STORAGE_KEY = 'lastOpenedStory';
|
||||
|
||||
75
app/react-native/src/server/config/webpack.config.js
Normal file
75
app/react-native/src/server/config/webpack.config.js
Normal file
@ -0,0 +1,75 @@
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import Dotenv from 'dotenv-webpack';
|
||||
import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
|
||||
import { getManagerHeadHtml } from '@storybook/core/server';
|
||||
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv } from './utils';
|
||||
import { version } from '../../../package.json';
|
||||
|
||||
const getConfig = options => {
|
||||
const environment = loadEnv();
|
||||
const entriesMeta = {
|
||||
manager: {
|
||||
headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
mode: 'development',
|
||||
devtool: '#cheap-module-eval-source-map',
|
||||
entry: {
|
||||
manager: [require.resolve('../../manager')],
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
filename: 'static/[name].bundle.js',
|
||||
publicPath: '/',
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
filename: `index.html`,
|
||||
chunksSortMode: 'none',
|
||||
alwaysWriteToDisk: true,
|
||||
inject: false,
|
||||
templateParameters: (compilation, files, o) => ({
|
||||
compilation,
|
||||
files,
|
||||
options: o,
|
||||
version,
|
||||
dlls: [],
|
||||
...entriesMeta.manager,
|
||||
}),
|
||||
template: require.resolve(`@storybook/core/src/server/templates/index.ejs`),
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
storybookOptions: JSON.stringify(options),
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new CaseSensitivePathsPlugin(),
|
||||
new WatchMissingNodeModulesPlugin(nodeModulesPaths),
|
||||
new webpack.DefinePlugin(environment),
|
||||
new Dotenv({ silent: true }),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
query: require('./babel.js'), // eslint-disable-line
|
||||
include: includePaths,
|
||||
exclude: excludePaths,
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
loader: require.resolve('raw-loader'),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default getConfig;
|
||||
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