GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 06:11:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into knob-object-array

Browse Source
This commit is contained in:
Filipp Riabchun 2017-08-24 23:39:08 +03:00 committed by GitHub
commit eafe512f20
45 changed files with 409 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.circleci/config.yml
View File

@ -40,7 +40,7 @@ jobs:
- run: - run:
name: "Bootstrapping" name: "Bootstrapping"
command: | command: |
npm run bootstrap npm run bootstrap -- --all
- save_cache: - save_cache:
key: package-dependencies-{{ checksum "package.json" }} key: package-dependencies-{{ checksum "package.json" }}
paths: paths:
@ -63,7 +63,7 @@ jobs:
- run: - run:
name: "Bootstrapping" name: "Bootstrapping"
command: | command: |
npm run bootstrap npm run bootstrap -- --core
- run: - run:
name: "Build react kitchen-sink" name: "Build react kitchen-sink"
command: | command: |
@ -87,9 +87,7 @@ jobs:
- run: - run:
name: "Bootstrapping packages" name: "Bootstrapping packages"
command: | command: |
npm run bootstrap npm run bootstrap -- --core --reactnative
npm run build-packs
npm run bootstrap:react-native-vanilla
- run: - run:
name: "Running react-native" name: "Running react-native"
command: | command: |
@ -109,7 +107,7 @@ jobs:
- run: - run:
name: "Bootstrapping" name: "Bootstrapping"
command: | command: |
npm run bootstrap:docs npm run bootstrap -- --docs
- run: - run:
name: "Running docs" name: "Running docs"
command: | command: |
@ -145,9 +143,7 @@ jobs:
- run: - run:
name: "Bootstrapping" name: "Bootstrapping"
command: | command: |
npm run bootstrap npm run bootstrap -- --core --reactnative
npm run build-packs
npm run bootstrap:react-native-vanilla
- run: - run:
name: "Unit testing" name: "Unit testing"
command: | command: |

2
.eslintignore
View File

@ -6,8 +6,6 @@ addons/**/example/**
app/**/demo/** app/**/demo/**
docs/public docs/public
vue
*.bundle.js *.bundle.js
*.js.map *.js.map

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
node_modules node_modules
*.log *.log
.idea .idea
.vscode
npm-shrinkwrap.json npm-shrinkwrap.json
dist dist
.tern-port .tern-port

29
CHANGELOG.md
View File

@ -1,3 +1,32 @@
# 3.2.8
2017-August-23
#### Bug Fixes
- Fix storyshots with new babel config [#1721](https://github.com/storybooks/storybook/pull/1721)
- Fix CLI generators export [#1722](https://github.com/storybooks/storybook/pull/1722)
#### Documentation
- Add caveat about knobs date defaultValue [#1719](https://github.com/storybooks/storybook/pull/1719)
# 3.2.7
2017-August-23
#### Bug Fixes
- Fix storyshots by moving cacheDirectory to webpack config [#1713](https://github.com/storybooks/storybook/pull/1713)
- Revert "Improved error checking in global addDecorator" [#1716](https://github.com/storybooks/storybook/pull/1716)
- Stricter linting rules for imports [#1676](https://github.com/storybooks/storybook/pull/1676)
- Addon Info: Remove broken prop type sort (keep defined order) [#1711](https://github.com/storybooks/storybook/pull/1711)
#### Maintenance
- Enable eslint for vue-related stuff [#1715](https://github.com/storybooks/storybook/pull/1715)
- CLI: ensure explicit dependency on `prop-types` for RN [#1714](https://github.com/storybooks/storybook/pull/1714)
# 3.2.6 # 3.2.6
2017-August-22 2017-August-22

34
CONTRIBUTING.md
View File

@ -20,15 +20,18 @@ No software is bug free. So, if you got an issue, follow these steps:
To test your project against the current latest version of storybook, you can clone the repository and link it with `npm`. Try following these steps: To test your project against the current latest version of storybook, you can clone the repository and link it with `npm`. Try following these steps:
1. Download the latest version of this project, and build it 1. Download the latest version of this project, and build it:
```sh
git clone https://github.com/storybooks/storybook.git git clone https://github.com/storybooks/storybook.git
cd storybook cd storybook
npm install npm install
npm run bootstrap npm run bootstrap -- --core
```
2. Link `storybook` and any other required dependencies 2. Link `storybook` and any other required dependencies:
```sh
cd app/react cd app/react
npm link npm link
@ -36,6 +39,7 @@ To test your project against the current latest version of storybook, you can cl
npm link @storybook/react npm link @storybook/react
# repeat with whichever other parts of the monorepo you are using. # repeat with whichever other parts of the monorepo you are using.
```
### Reproductions ### Reproductions
@ -43,12 +47,12 @@ The best way to help figure out an issue you are having is to produce a minimal
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository: A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
```bash ```sh
# Download and build this repository: # Download and build this repository:
git clone https://github.com/storybooks/storybook.git git clone https://github.com/storybooks/storybook.git
cd storybook cd storybook
npm install npm install
npm run bootstrap npm run bootstrap -- --core
cd examples/cra-kitchen-sink cd examples/cra-kitchen-sink
@ -115,15 +119,13 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
### Closing issues ### Closing issues
- Duplicate issues should be closed with a link to the original. - Duplicate issues should be closed with a link to the original.
- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline,
- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline, it is reasonable to wait 2 weeks before closing). it is reasonable to wait 2 weeks before closing).
- `bug`s should be labelled `merged` when merged, and be closed when the issue is fixed and released. - `bug`s should be labelled `merged` when merged, and be closed when the issue is fixed and released.
- `feature`s, `maintenance`s, `greenkeeper`s should be labelled `merged` when merged,
- `feature`s, `maintenance`s, `greenkeeper`s should be labelled `merged` when merged, and closed when released or if the feature is deemed not appropriate. and closed when released or if the feature is deemed not appropriate.
- `question / support`s should be closed when the question has been answered.
- `question / support`s should be closed when the question has been answered. If the questioner drops offline, a reasonable period to wait is two weeks. If the questioner drops offline, a reasonable period to wait is two weeks.
- `discussion`s should be closed at a maintainer's discretion. - `discussion`s should be closed at a maintainer's discretion.
## Development Guide ## Development Guide
@ -133,9 +135,11 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
This project written in ES2016+ syntax so, we need to transpile it before use. This project written in ES2016+ syntax so, we need to transpile it before use.
So run the following command: So run the following command:
```sh
npm run dev npm run dev
```
This will watch files and transpile. This will watch files and transpile in watch mode.
### Linking ### Linking
@ -194,7 +198,7 @@ git status
git clean -fdx && yarn git clean -fdx && yarn
# build all the packages # build all the packages
npm run bootstrap npm run bootstrap -- --all
``` ```
From here there are different procedures for prerelease (e.g. alpha/beta/rc) and proper release. From here there are different procedures for prerelease (e.g. alpha/beta/rc) and proper release.

2
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-centered", "name": "@storybook/addon-centered",
"version": "3.2.6", "version": "3.2.7",
"description": "Storybook decorator to center components", "description": "Storybook decorator to center components",
"license": "MIT", "license": "MIT",
"author": "Muhammed Thanish <mnmtanish@gmail.com>", "author": "Muhammed Thanish <mnmtanish@gmail.com>",

6
addons/comments/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-comments", "name": "@storybook/addon-comments",
"version": "3.2.6", "version": "3.2.8",
"description": "Comments addon for Storybook", "description": "Comments addon for Storybook",
"keywords": [ "keywords": [
"storybook" "storybook"
@ -36,10 +36,10 @@
"react-textarea-autosize": "^4.3.0" "react-textarea-autosize": "^4.3.0"
}, },
"devDependencies": { "devDependencies": {
"@storybook/react": "^3.2.5",
"@storybook/addon-actions": "^3.2.0",
"@kadira/storybook-database-cloud": "*", "@kadira/storybook-database-cloud": "*",
"@kadira/storybook-deployer": "*", "@kadira/storybook-deployer": "*",
"@storybook/addon-actions": "^3.2.0",
"@storybook/react": "^3.2.8",
"git-url-parse": "^6.2.2", "git-url-parse": "^6.2.2",
"react": "^15.6.1", "react": "^15.6.1",
"react-dom": "^15.6.1", "react-dom": "^15.6.1",

4
addons/info/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-info", "name": "@storybook/addon-info",
"version": "3.2.6", "version": "3.2.7",
"description": "A Storybook addon to show additional information for your stories.", "description": "A Storybook addon to show additional information for your stories.",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",
@ -15,7 +15,7 @@
}, },
"dependencies": { "dependencies": {
"@storybook/addons": "^3.2.6", "@storybook/addons": "^3.2.6",
"@storybook/components": "^3.2.6", "@storybook/components": "^3.2.7",
"babel-runtime": "^6.23.0", "babel-runtime": "^6.23.0",
"global": "^4.3.2", "global": "^4.3.2",
"marksy": "^2.0.0", "marksy": "^2.0.0",

2
addons/knobs/README.md
View File

@ -229,6 +229,8 @@ const defaultValue = new Date('Jan 20 2017');
const value = date(label, defaultValue); const value = date(label, defaultValue);
``` ```
> Note: the default value must not change - e.g., do not do `date('Label', new Date())` or `date('Label')`
### withKnobs vs withKnobsOptions ### withKnobs vs withKnobsOptions
If you feel like this addon is not performing well enough there is an option to use `withKnobsOptions` instead of `withKnobs`. If you feel like this addon is not performing well enough there is an option to use `withKnobsOptions` instead of `withKnobs`.

2
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-knobs", "name": "@storybook/addon-knobs",
"version": "3.2.6", "version": "3.2.8",
"description": "Storybook Addon Prop Editor Component", "description": "Storybook Addon Prop Editor Component",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",

2
addons/knobs/src/vue/index.js
View File

@ -33,5 +33,5 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
channel.removeListener('addon:knobs:reset', this.onKnobReset); channel.removeListener('addon:knobs:reset', this.onKnobReset);
channel.removeListener('addon:knobs:knobChange', this.onKnobChange); channel.removeListener('addon:knobs:knobChange', this.onKnobChange);
knobStore.unsubscribe(this.setPaneKnobs); knobStore.unsubscribe(this.setPaneKnobs);
} },
}); });

6
addons/knobs/src/vue/index.test.js
View File

@ -21,16 +21,16 @@ describe('Vue handler', () => {
}); });
}); });
it('Subscribes to the channel on creation', () => { it('Subscribes to the channel on creation', () => {
const testChannel = { emit: () => {}, on: jest.fn() }; const testChannel = { emit: () => {}, on: jest.fn() };
const testStory = () => ({ render: (h) => h('div', ['testStory']) }); const testStory = () => ({ render: h => h('div', ['testStory']) });
const testContext = { const testContext = {
kind: 'Foo', kind: 'Foo',
story: 'bar baz', story: 'bar baz',
}; };
const testStore = new KnobStore(); const testStore = new KnobStore();
const component = new Vue(vueHandler(testChannel, testStore)(testStory)(testContext)).$mount(); new Vue(vueHandler(testChannel, testStore)(testStory)(testContext)).$mount();
expect(testChannel.on).toHaveBeenCalledTimes(2); expect(testChannel.on).toHaveBeenCalledTimes(2);
expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:reset', expect.any(Function)); expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:reset', expect.any(Function));

2
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-notes", "name": "@storybook/addon-notes",
"version": "3.2.6", "version": "3.2.7",
"description": "Write notes for your Storybook stories.", "description": "Write notes for your Storybook stories.",
"keywords": [ "keywords": [
"addon", "addon",

6
addons/storyshots/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/addon-storyshots", "name": "@storybook/addon-storyshots",
"version": "3.2.6", "version": "3.2.8",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",
@ -22,7 +22,7 @@
"devDependencies": { "devDependencies": {
"@storybook/addons": "^3.2.6", "@storybook/addons": "^3.2.6",
"@storybook/channels": "^3.2.0", "@storybook/channels": "^3.2.0",
"@storybook/react": "^3.2.6", "@storybook/react": "^3.2.8",
"babel-cli": "^6.24.1", "babel-cli": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0", "babel-preset-env": "^1.6.0",
@ -33,7 +33,7 @@
"peerDependencies": { "peerDependencies": {
"@storybook/addons": "^3.2.6", "@storybook/addons": "^3.2.6",
"@storybook/channels": "^3.2.0", "@storybook/channels": "^3.2.0",
"@storybook/react": "^3.2.6", "@storybook/react": "^3.2.8",
"babel-core": "^6.25.0", "babel-core": "^6.25.0",
"react": "*", "react": "*",
"react-test-renderer": "*" "react-test-renderer": "*"

4
app/react-native/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/react-native", "name": "@storybook/react-native",
"version": "3.2.6", "version": "3.2.8",
"description": "A better way to develop React Native Components for your app", "description": "A better way to develop React Native Components for your app",
"keywords": [ "keywords": [
"react", "react",
@ -28,7 +28,7 @@
"@storybook/addon-links": "^3.2.6", "@storybook/addon-links": "^3.2.6",
"@storybook/addons": "^3.2.6", "@storybook/addons": "^3.2.6",
"@storybook/channel-websocket": "^3.2.0", "@storybook/channel-websocket": "^3.2.0",
"@storybook/ui": "^3.2.6", "@storybook/ui": "^3.2.7",
"autoprefixer": "^7.1.1", "autoprefixer": "^7.1.1",
"babel-core": "^6.25.0", "babel-core": "^6.25.0",
"babel-loader": "^7.0.0", "babel-loader": "^7.0.0",

2
app/react-native/src/server/config/babel.js vendored
View File

@ -5,7 +5,7 @@ module.exports = {
[ [
require.resolve('babel-preset-env'), require.resolve('babel-preset-env'),
{ {
modules: false, modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
}, },
], ],
require.resolve('babel-preset-react'), require.resolve('babel-preset-react'),

4
app/react/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/react", "name": "@storybook/react",
"version": "3.2.6", "version": "3.2.8",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/react", "homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
"bugs": { "bugs": {
@ -26,7 +26,7 @@
"@storybook/addon-links": "^3.2.6", "@storybook/addon-links": "^3.2.6",
"@storybook/addons": "^3.2.6", "@storybook/addons": "^3.2.6",
"@storybook/channel-postmessage": "^3.2.0", "@storybook/channel-postmessage": "^3.2.0",
"@storybook/ui": "^3.2.6", "@storybook/ui": "^3.2.7",
"airbnb-js-shims": "^1.1.1", "airbnb-js-shims": "^1.1.1",
"autoprefixer": "^7.1.1", "autoprefixer": "^7.1.1",
"babel-core": "^6.25.0", "babel-core": "^6.25.0",

6
app/react/src/client/preview/client_api.js
View File

@ -8,7 +8,6 @@ export default class ClientApi {
this._storyStore = storyStore; this._storyStore = storyStore;
this._addons = {}; this._addons = {};
this._globalDecorators = []; this._globalDecorators = [];
this._storiesAdded = false;
} }
setAddon(addon) { setAddon(addon) {
@ -19,9 +18,6 @@ export default class ClientApi {
} }
addDecorator(decorator) { addDecorator(decorator) {
if (this._storiesAdded) {
throw new Error('Global decorators added after loading stories will not be applied');
}
this._globalDecorators.push(decorator); this._globalDecorators.push(decorator);
} }
@ -62,8 +58,6 @@ export default class ClientApi {
}); });
api.add = (storyName, getStory) => { api.add = (storyName, getStory) => {
this._storiesAdded = true;
if (typeof storyName !== 'string') { if (typeof storyName !== 'string') {
throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`); throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
} }

10
app/react/src/client/preview/client_api.test.js
View File

@ -150,16 +150,6 @@ describe('preview.client_api', () => {
expect(storyStore.stories[0].fn()).toBe('bb-Hello'); expect(storyStore.stories[0].fn()).toBe('bb-Hello');
}); });
it('should throw on adding global decorators after stories', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
const localApi = api.storiesOf('none');
localApi.add('storyName', () => 'Hello');
expect(() => {
api.addDecorator(fn => `bb-${fn()}`);
}).toThrow('Global decorators added after loading stories will not be applied');
});
it('should utilize both decorators at once', () => { it('should utilize both decorators at once', () => {
const storyStore = new StoryStore(); const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore }); const api = new ClientAPI({ storyStore });

5
app/react/src/server/config/babel.js
View File

@ -1,9 +1,6 @@
const findCacheDir = require('find-cache-dir');
module.exports = { module.exports = {
// Don't try to find .babelrc because we want to force this configuration. // Don't try to find .babelrc because we want to force this configuration.
babelrc: false, babelrc: false,
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
presets: [ presets: [
[ [
require.resolve('babel-preset-env'), require.resolve('babel-preset-env'),
@ -11,7 +8,7 @@ module.exports = {
targets: { targets: {
browsers: ['last 2 versions', 'safari >= 7'], browsers: ['last 2 versions', 'safari >= 7'],
}, },
modules: false, modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
}, },
], ],
require.resolve('babel-preset-stage-0'), require.resolve('babel-preset-stage-0'),

4
app/vue/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/vue", "name": "@storybook/vue",
"version": "3.2.6", "version": "3.2.8",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue", "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
"bugs": { "bugs": {
@ -26,7 +26,7 @@
"@storybook/addon-links": "^3.2.6", "@storybook/addon-links": "^3.2.6",
"@storybook/addons": "^3.2.6", "@storybook/addons": "^3.2.6",
"@storybook/channel-postmessage": "^3.2.0", "@storybook/channel-postmessage": "^3.2.0",
"@storybook/ui": "^3.2.6", "@storybook/ui": "^3.2.7",
"airbnb-js-shims": "^1.1.1", "airbnb-js-shims": "^1.1.1",
"autoprefixer": "^7.1.1", "autoprefixer": "^7.1.1",
"babel-core": "^6.25.0", "babel-core": "^6.25.0",

2
app/vue/src/client/index.js
View File

@ -1,4 +1,4 @@
import deprecate from 'util-deprecate'; // import deprecate from 'util-deprecate';
// NOTE export these to keep backwards compatibility // NOTE export these to keep backwards compatibility
// import { action as deprecatedAction } from '@storybook/addon-actions'; // import { action as deprecatedAction } from '@storybook/addon-actions';

9
app/vue/src/client/preview/client_api.js
View File

@ -31,7 +31,10 @@ export default class ClientApi {
} }
if (!m) { if (!m) {
console.warn(`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`); // eslint-disable-next-line no-console
console.warn(
`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`
);
} }
if (m && m.hot) { if (m && m.hot) {
@ -58,7 +61,7 @@ export default class ClientApi {
functional: true, functional: true,
render(h, c) { render(h, c) {
return h(Target, c.data, c.children); return h(Target, c.data, c.children);
} },
}); });
api.add = (storyName, getStory) => { api.add = (storyName, getStory) => {
@ -81,7 +84,7 @@ export default class ClientApi {
const decoratedStory = decorator(story, context); const decoratedStory = decorator(story, context);
decoratedStory.components = decoratedStory.components || {}; decoratedStory.components = decoratedStory.components || {};
decoratedStory.components.story = createWrapperComponent(story()); decoratedStory.components.story = createWrapperComponent(story());
return decoratedStory return decoratedStory;
}, },
getStory getStory
); );

4
app/vue/src/client/preview/client_api.test.js
View File

@ -181,7 +181,9 @@ describe('preview.client_api', () => {
const storyStore = new StoryStore(); const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore }); const api = new ClientAPI({ storyStore });
const localApi = api.storiesOf('none'); const localApi = api.storiesOf('none');
localApi.addDecorator((fn, { kind, story }) => ({ template: `<div>${kind}-${story}-${fn().template}</div>` })); localApi.addDecorator((fn, { kind, story }) => ({
template: `<div>${kind}-${story}-${fn().template}</div>`,
}));
localApi.add('storyName', () => ({ template: '<p>hello</p>' })); localApi.add('storyName', () => ({ template: '<p>hello</p>' }));

21
app/vue/src/client/preview/render.js
View File

@ -1,13 +1,9 @@
import { stripIndents } from 'common-tags';
import Vue from 'vue'; import Vue from 'vue';
import ErrorDisplay from './ErrorDisplay.vue'; import ErrorDisplay from './ErrorDisplay.vue';
import NoPreview from './NoPreview.vue'; import NoPreview from './NoPreview.vue';
import { window } from 'global';
import { stripIndents } from 'common-tags';
// check whether we're running on node/browser
const isBrowser = typeof window !== 'undefined';
const logger = console; const logger = console;
let previousKind = ''; let previousKind = '';
let previousStory = ''; let previousStory = '';
@ -20,9 +16,10 @@ function renderErrorDisplay(error) {
err = new Vue({ err = new Vue({
el: '#error-display', el: '#error-display',
render(h) { render(h) {
return h('div', { attrs: { id: 'error-display' } }, error return h(
? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } }) ] 'div',
: [] { attrs: { id: 'error-display' } },
error ? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } })] : []
); );
}, },
}); });
@ -53,7 +50,7 @@ function renderRoot(options) {
} }
export function renderMain(data, storyStore) { export function renderMain(data, storyStore) {
if (storyStore.size() === 0) return null; if (storyStore.size() === 0) return;
const { selectedKind, selectedStory } = data; const { selectedKind, selectedStory } = data;
@ -87,13 +84,13 @@ export function renderMain(data, storyStore) {
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story. Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
`, `,
}; };
return renderError(error); renderError(error);
} }
renderRoot({ renderRoot({
el: '#root', el: '#root',
render(h) { render(h) {
return h('div', { attrs: { id: 'root' } }, [h(component)]); return h('div', { attrs: { id: 'root' } }, [h(component)]);
}, },
}); });
} }

9
app/vue/src/server/config.js
View File

@ -1,6 +1,7 @@
/* eslint-disable global-require, import/no-dynamic-require */ /* eslint-disable global-require, import/no-dynamic-require */
import fs from 'fs'; import fs from 'fs';
import path from 'path'; import path from 'path';
import findCacheDir from 'find-cache-dir';
import loadBabelConfig from './babel_config'; import loadBabelConfig from './babel_config';
// avoid ESLint errors // avoid ESLint errors
@ -13,7 +14,13 @@ export default function(configType, baseConfig, configDir) {
const config = baseConfig; const config = baseConfig;
const babelConfig = loadBabelConfig(configDir); const babelConfig = loadBabelConfig(configDir);
config.module.rules[0].query = babelConfig; config.module.rules[0].query = {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables a cache directory for faster-rebuilds
// `find-cache-dir` will create the cache directory under the node_modules directory.
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
...babelConfig,
};
// Check whether a config.js file exists inside the storybook // Check whether a config.js file exists inside the storybook
// config directory and throw an error if it's not. // config directory and throw an error if it's not.

5
app/vue/src/server/config/babel.js
View File

@ -1,9 +1,6 @@
const findCacheDir = require('find-cache-dir');
module.exports = { module.exports = {
// Don't try to find .babelrc because we want to force this configuration. // Don't try to find .babelrc because we want to force this configuration.
babelrc: false, babelrc: false,
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
presets: [ presets: [
[ [
require.resolve('babel-preset-env'), require.resolve('babel-preset-env'),
@ -11,7 +8,7 @@ module.exports = {
targets: { targets: {
browsers: ['last 2 versions', 'safari >= 7'], browsers: ['last 2 versions', 'safari >= 7'],
}, },
modules: false, modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
}, },
], ],
require.resolve('babel-preset-stage-0'), require.resolve('babel-preset-stage-0'),

6
app/vue/src/server/config/webpack.config.js
View File

@ -52,10 +52,10 @@ export default function() {
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules'].concat(nodePaths), modules: ['node_modules'].concat(nodePaths),
alias: { alias: {
'vue$': require.resolve('vue/dist/vue.esm.js'), vue$: require.resolve('vue/dist/vue.esm.js'),
'react$': require.resolve('react'), react$: require.resolve('react'),
'react-dom$': require.resolve('react-dom'), 'react-dom$': require.resolve('react-dom'),
} },
}, },
performance: { performance: {
hints: false, hints: false,

6
app/vue/src/server/config/webpack.config.prod.js
View File

@ -60,10 +60,10 @@ export default function() {
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules'].concat(nodePaths), modules: ['node_modules'].concat(nodePaths),
alias: { alias: {
'vue$': require.resolve('vue/dist/vue.esm.js'), vue$: require.resolve('vue/dist/vue.esm.js'),
'react$': require.resolve('react'), react$: require.resolve('react'),
'react-dom$': require.resolve('react-dom'), 'react-dom$': require.resolve('react-dom'),
} },
}, },
}; };

2
lerna.json
View File

@ -23,5 +23,5 @@
"examples/*" "examples/*"
], ],
"concurrency": 1, "concurrency": 1,
"version": "3.2.6" "version": "3.2.8"
} }

7
lib/cli/generators/REACT_NATIVE/index.js
View File

@ -9,7 +9,8 @@ module.exports = Promise.all([
latestVersion('@storybook/react'), latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'), latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'), latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => { latestVersion('prop-types'),
]).then(([storybookVersion, actionsVersion, linksVersion, propTypesVersion]) => {
// copy all files from the template directory to project directory // copy all files from the template directory to project directory
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
@ -41,6 +42,10 @@ module.exports = Promise.all([
packageJson.devDependencies['react-dom'] = reactVersion; packageJson.devDependencies['react-dom'] = reactVersion;
} }
if (!packageJson.dependencies['prop-types'] && !packageJson.devDependencies['prop-types']) {
packageJson.devDependencies['prop-types'] = `^${propTypesVersion}`;
}
packageJson.scripts = packageJson.scripts || {}; packageJson.scripts = packageJson.scripts || {};
packageJson.scripts.storybook = 'storybook start -p 7007'; packageJson.scripts.storybook = 'storybook start -p 7007';

7
lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js
View File

@ -7,7 +7,8 @@ module.exports = Promise.all([
latestVersion('@storybook/react'), latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'), latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'), latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => { latestVersion('prop-types'),
]).then(([storybookVersion, actionsVersion, linksVersion, propTypesVersion]) => {
// copy all files from the template directory to project directory // copy all files from the template directory to project directory
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
@ -25,6 +26,10 @@ module.exports = Promise.all([
packageJson.devDependencies['react-dom'] = reactVersion; packageJson.devDependencies['react-dom'] = reactVersion;
} }
if (!packageJson.dependencies['prop-types'] && !packageJson.devDependencies['prop-types']) {
packageJson.devDependencies['prop-types'] = `^${propTypesVersion}`;
}
packageJson.scripts = packageJson.scripts || {}; packageJson.scripts = packageJson.scripts || {};
packageJson.scripts.storybook = 'storybook start -p 7007'; packageJson.scripts.storybook = 'storybook start -p 7007';

2
lib/cli/generators/VUE/index.js
View File

@ -3,7 +3,7 @@ const helpers = require('../../lib/helpers');
const path = require('path'); const path = require('path');
const latestVersion = require('latest-version'); const latestVersion = require('latest-version');
Promise.all([ module.exports = Promise.all([
latestVersion('@storybook/vue'), latestVersion('@storybook/vue'),
latestVersion('@storybook/addon-actions'), latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'), latestVersion('@storybook/addon-links'),

14
lib/cli/generators/VUE/template/stories/MyButton.js
View File

@ -10,9 +10,9 @@ export default {
cursor: 'pointer', cursor: 'pointer',
fontSize: 15, fontSize: 15,
padding: '3px 10px', padding: '3px 10px',
margin: 10 margin: 10,
} },
} };
}, },
template: ` template: `
@ -23,7 +23,7 @@ export default {
methods: { methods: {
onClick() { onClick() {
this.$emit('click') this.$emit('click');
} },
} },
} };

31
lib/cli/generators/VUE/template/stories/Welcome.js
View File

@ -1,4 +1,5 @@
const log = () => console.log('Welcome to storybook!') // eslint-disable-next-line no-console
const log = () => console.log('Welcome to storybook!');
export default { export default {
name: 'welcome', name: 'welcome',
@ -6,8 +7,8 @@ export default {
props: { props: {
showApp: { showApp: {
type: Function, type: Function,
default: log default: log,
} },
}, },
data() { data() {
@ -16,18 +17,18 @@ export default {
margin: 15, margin: 15,
maxWidth: 600, maxWidth: 600,
lineHeight: 1.4, lineHeight: 1.4,
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif' fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
}, },
logo: { logo: {
width: 200 width: 200,
}, },
link: { link: {
color: '#1474f3', color: '#1474f3',
textDecoration: 'none', textDecoration: 'none',
borderBottom: '1px solid #1474f3', borderBottom: '1px solid #1474f3',
paddingBottom: 2 paddingBottom: 2,
}, },
code: { code: {
@ -37,13 +38,13 @@ export default {
border: '1px solid #eae9e9', border: '1px solid #eae9e9',
borderRadius: 4, borderRadius: 4,
backgroundColor: '#f3f2f2', backgroundColor: '#f3f2f2',
color: '#3a3a3a' color: '#3a3a3a',
}, },
note: { note: {
opacity: 0.5 opacity: 0.5,
} },
} };
}, },
template: ` template: `
@ -113,8 +114,8 @@ export default {
methods: { methods: {
onClick(event) { onClick(event) {
event.preventDefault() event.preventDefault();
this.showApp() this.showApp();
} },
} },
} };

22
lib/cli/generators/VUE/template/stories/index.js
View File

@ -1,25 +1,23 @@
import { storiesOf } from '@storybook/vue' import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions' import { linkTo } from '@storybook/addon-links';
import { linkTo } from '@storybook/addon-links'
import MyButton from './MyButton' import MyButton from './MyButton';
import Welcome from './Welcome' import Welcome from './Welcome';
storiesOf('Welcome', module) storiesOf('Welcome', module).add('to Storybook', () => ({
.add('to Storybook', () => ({
components: { Welcome }, components: { Welcome },
template: '<welcome :showApp="action" />', template: '<welcome :showApp="action" />',
methods: { action: linkTo('Button') } methods: { action: linkTo('Button') },
})) }));
storiesOf('Button', module) storiesOf('Button', module)
.add('with text', () => ({ .add('with text', () => ({
components: { MyButton }, components: { MyButton },
template: '<my-button @click="action">Hello Button</my-button>', template: '<my-button @click="action">Hello Button</my-button>',
methods: { action: linkTo('clicked') } methods: { action: linkTo('clicked') },
})) }))
.add('with some emoji', () => ({ .add('with some emoji', () => ({
components: { MyButton }, components: { MyButton },
template: '<my-button @click="action">😀 😎 👍 💯</my-button>', template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
methods: { action: linkTo('clicked') } methods: { action: linkTo('clicked') },
})) }));

2
lib/cli/generators/WEBPACK_REACT/index.js
View File

@ -3,7 +3,7 @@ const helpers = require('../../lib/helpers');
const path = require('path'); const path = require('path');
const latestVersion = require('latest-version'); const latestVersion = require('latest-version');
Promise.all([ module.exports = Promise.all([
latestVersion('@storybook/react'), latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'), latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'), latestVersion('@storybook/addon-links'),

2
lib/cli/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/cli", "name": "@storybook/cli",
"version": "3.2.6", "version": "3.2.8",
"description": "Storybook's CLI - easiest method of adding storybook to your projects", "description": "Storybook's CLI - easiest method of adding storybook to your projects",
"keywords": [ "keywords": [
"cli", "cli",

2
lib/components/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/components", "name": "@storybook/components",
"version": "3.2.6", "version": "3.2.7",
"description": "Core Storybook Components", "description": "Core Storybook Components",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",

4
lib/ui/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@storybook/ui", "name": "@storybook/ui",
"version": "3.2.6", "version": "3.2.7",
"description": "Core Storybook UI", "description": "Core Storybook UI",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",
@ -15,7 +15,7 @@
}, },
"dependencies": { "dependencies": {
"@hypnosphi/fuse.js": "^3.0.9", "@hypnosphi/fuse.js": "^3.0.9",
"@storybook/components": "^3.2.6", "@storybook/components": "^3.2.7",
"@storybook/react-fuzzy": "^0.4.0", "@storybook/react-fuzzy": "^0.4.0",
"babel-runtime": "^6.23.0", "babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1", "deep-equal": "^1.0.1",

12
package.json
View File

@ -6,7 +6,8 @@
"url": "https://github.com/storybooks/storybook.git" "url": "https://github.com/storybooks/storybook.git"
}, },
"scripts": { "scripts": {
"bootstrap": "lerna bootstrap --concurrency 1 --npm-client=\"yarn\" --hoist && node ./scripts/hoist-internals.js", "bootstrap": "./scripts/bootstrap.js",
"bootstrap:core": "lerna bootstrap --concurrency 1 --npm-client=\"yarn\" --hoist && node ./scripts/hoist-internals.js",
"bootstrap:docs": "cd docs && yarn install", "bootstrap:docs": "cd docs && yarn install",
"bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npm install", "bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npm install",
"bootstrap:crna-kitchen-sink": "lerna exec --scope crna-kitchen-sink -- npm install", "bootstrap:crna-kitchen-sink": "lerna exec --scope crna-kitchen-sink -- npm install",
@ -22,7 +23,6 @@
"docs:deploy:manual": "cd docs && npm run deploy:manual", "docs:deploy:manual": "cd docs && npm run deploy:manual",
"docs:dev": "cd docs && npm run dev", "docs:dev": "cd docs && npm run dev",
"github-release": "github-release-from-changelog", "github-release": "github-release-from-changelog",
"import-repo": "lerna import",
"lint": "npm run lint:js . && npm run lint:md .", "lint": "npm run lint:js . && npm run lint:md .",
"lint:js": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json", "lint:js": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
"lint:md": "remark", "lint:md": "remark",
@ -41,6 +41,7 @@
"babel-preset-stage-0": "^6.24.1", "babel-preset-stage-0": "^6.24.1",
"chalk": "^2.0.1", "chalk": "^2.0.1",
"codecov": "^2.2.0", "codecov": "^2.2.0",
"commander": "^2.9.0",
"danger": "^1.0.0", "danger": "^1.0.0",
"enzyme": "^2.9.1", "enzyme": "^2.9.1",
"eslint": "^4.3.0", "eslint": "^4.3.0",
@ -55,11 +56,12 @@
"fs-extra": "^4.0.0", "fs-extra": "^4.0.0",
"gh-pages": "^1.0.0", "gh-pages": "^1.0.0",
"github-release-from-changelog": "^1.2.1", "github-release-from-changelog": "^1.2.1",
"inquirer": "^3.1.0",
"glob": "^7.1.2", "glob": "^7.1.2",
"husky": "^0.14.3", "husky": "^0.14.3",
"jest": "^20.0.4", "jest": "^20.0.4",
"jest-enzyme": "^3.6.1", "jest-enzyme": "^3.6.1",
"lerna": "2.0.0", "lerna": "2.1.0",
"lint-staged": "^4.0.2", "lint-staged": "^4.0.2",
"lodash": "^4.17.4", "lodash": "^4.17.4",
"nodemon": "^1.11.0", "nodemon": "^1.11.0",
@ -85,6 +87,7 @@
"url": "https://opencollective.com/storybook" "url": "https://opencollective.com/storybook"
}, },
"lint-staged": { "lint-staged": {
"linters": {
"*.js": [ "*.js": [
"npm run lint:js -- --fix", "npm run lint:js -- --fix",
"git add" "git add"
@ -98,6 +101,9 @@
"git add" "git add"
] ]
}, },
"verbose": true,
"concurrent": false
},
"pr-log": { "pr-log": {
"skipLabels": [ "skipLabels": [
"cleanup" "cleanup"

177
scripts/bootstrap.js vendored Executable file
View File

@ -0,0 +1,177 @@
#!/usr/bin/env node
const inquirer = require('inquirer');
const program = require('commander');
const childProcess = require('child_process');
const chalk = require('chalk');
const log = require('npmlog');
const { lstatSync, readdirSync } = require('fs');
const { join } = require('path');
const isTgz = source => lstatSync(source).isFile() && source.match(/.tgz$/);
const getDirectories = source => readdirSync(source).map(name => join(source, name)).filter(isTgz);
log.heading = 'storybook';
const prefix = 'bootstrap';
log.addLevel('aborted', 3001, { fg: 'red', bold: true });
const spawn = command =>
childProcess.spawnSync(`${command}`, {
shell: true,
stdio: 'inherit',
});
const main = program
.version('3.0.0')
.option('--all', `Bootstrap everything ${chalk.gray('(all)')}`);
const createTask = ({ defaultValue, option, name, check = () => true, command, pre = [] }) => ({
value: false,
defaultValue: defaultValue || false,
option: option || undefined,
name: name || 'unnamed task',
check: check || (() => true),
command: () => {
// run all pre tasks
// eslint-disable-next-line no-use-before-define
pre.map(key => tasks[key]).forEach(task => {
if (!task.check()) {
task.command();
}
});
log.info(prefix, name);
command();
},
});
const tasks = {
reset: createTask({
name: `Clean and re-install root dependencies ${chalk.red('(reset)')}`,
defaultValue: false,
option: '--reset',
command: () => {
log.info(prefix, 'git clean');
spawn('git clean -fdx --exclude=".vscode" --exclude=".idea"');
log.info(prefix, 'yarn install');
spawn('yarn install --no-lockfile');
},
}),
core: createTask({
name: `Core & Examples ${chalk.gray('(core)')}`,
defaultValue: true,
option: '--core',
command: () => {
spawn('yarn bootstrap:core');
},
}),
docs: createTask({
name: `Documentation ${chalk.gray('(docs)')}`,
defaultValue: false,
option: '--docs',
command: () => {
spawn('yarn bootstrap:docs');
},
}),
packs: createTask({
name: `Build tarballs of packages ${chalk.gray('(build-packs)')}`,
defaultValue: false,
option: '--packs',
command: () => {
spawn('yarn build-packs');
},
check: () => getDirectories(join(__dirname, '..', 'packs')).length > 0,
}),
'react-native-vanilla': createTask({
name: `React-Native example ${chalk.gray('(react-native-vanilla)')}`,
defaultValue: false,
option: '--reactnative',
pre: ['packs'],
command: () => {
spawn('yarn bootstrap:react-native-vanilla');
},
}),
'crna-kitchen-sink': createTask({
name: `React-Native-App example ${chalk.gray('(crna-kitchen-sink)')}`,
defaultValue: false,
option: '--reactnativeapp',
pre: ['packs'],
command: () => {
spawn('yarn bootstrap:crna-kitchen-sink');
},
}),
};
Object.keys(tasks)
.reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main)
.parse(process.argv);
Object.keys(tasks).forEach(key => {
tasks[key].value = program[tasks[key].option.replace('--', '')] || program.all;
});
let selection;
if (!Object.keys(tasks).map(key => tasks[key].value).filter(Boolean).length) {
selection = inquirer
.prompt([
{
type: 'checkbox',
message: 'Select which packages to bootstrap',
name: 'todo',
choices: Object.keys(tasks).map(key => ({
name: tasks[key].name,
checked: tasks[key].defaultValue,
})),
},
])
.then(({ todo }) =>
todo.map(name => tasks[Object.keys(tasks).find(i => tasks[i].name === name)])
)
.then(list => {
if (list.find(i => i === tasks.reset)) {
return inquirer
.prompt([
{
type: 'confirm',
message: `${chalk.red('DESTRUCTIVE')} files not present in git ${chalk.underline(
'will get deleted'
)}, except for .idea and .vscode, ${chalk.cyan('Continue?')}`,
name: 'sure',
},
])
.then(({ sure }) => {
if (sure) {
return list;
}
throw new Error('problem is between keyboard and chair');
});
}
return list;
});
} else {
selection = Promise.resolve(
Object.keys(tasks).map(key => tasks[key]).filter(item => item.value === true)
);
}
selection
.then(list => {
if (list.length === 0) {
log.warn(prefix, 'Nothing to bootstrap');
} else {
list.forEach(key => {
key.command();
});
process.stdout.write('\x07');
try {
spawn('say "Bootstrapping sequence complete"');
} catch (e) {
// discard error
}
}
})
.catch(e => {
log.aborted(prefix, chalk.red(e.message));
log.silly(prefix, e);
return true;
});

4
scripts/hoist-internals.js
View File

@ -105,8 +105,8 @@ const task = getLernaPackages()
task task
.then(packages => { .then(packages => {
log.info(prefix, packages.map(dir => dir.replace(cwd, '')).join(',\n')); log.verbose(prefix, packages.map(dir => dir.replace(cwd, '')).join(',\n'));
log.success(prefix, 'complete'); log.success(prefix, `Hoisted ${packages.length} packages`);
}) })
.catch(error => { .catch(error => {
log.error(prefix, 'failed', error); log.error(prefix, 'failed', error);