mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 07:21:16 +08:00
Merge branch 'master' into knob-object-array
This commit is contained in:
Filipp Riabchun
GitHub
commit
eafe512f20
@ -40,7 +40,7 @@ jobs:
|
||||
- run:
|
||||
name: "Bootstrapping"
|
||||
command: |
|
||||
npm run bootstrap
|
||||
npm run bootstrap -- --all
|
||||
- save_cache:
|
||||
key: package-dependencies-{{ checksum "package.json" }}
|
||||
paths:
|
||||
@ -63,7 +63,7 @@ jobs:
|
||||
- run:
|
||||
name: "Bootstrapping"
|
||||
command: |
|
||||
npm run bootstrap
|
||||
npm run bootstrap -- --core
|
||||
- run:
|
||||
name: "Build react kitchen-sink"
|
||||
command: |
|
||||
@ -87,9 +87,7 @@ jobs:
|
||||
- run:
|
||||
name: "Bootstrapping packages"
|
||||
command: |
|
||||
npm run bootstrap
|
||||
npm run build-packs
|
||||
npm run bootstrap:react-native-vanilla
|
||||
npm run bootstrap -- --core --reactnative
|
||||
- run:
|
||||
name: "Running react-native"
|
||||
command: |
|
||||
@ -109,7 +107,7 @@ jobs:
|
||||
- run:
|
||||
name: "Bootstrapping"
|
||||
command: |
|
||||
npm run bootstrap:docs
|
||||
npm run bootstrap -- --docs
|
||||
- run:
|
||||
name: "Running docs"
|
||||
command: |
|
||||
@ -145,9 +143,7 @@ jobs:
|
||||
- run:
|
||||
name: "Bootstrapping"
|
||||
command: |
|
||||
npm run bootstrap
|
||||
npm run build-packs
|
||||
npm run bootstrap:react-native-vanilla
|
||||
npm run bootstrap -- --core --reactnative
|
||||
- run:
|
||||
name: "Unit testing"
|
||||
command: |
|
||||
|
||||
@ -6,8 +6,6 @@ addons/**/example/**
|
||||
app/**/demo/**
|
||||
docs/public
|
||||
|
||||
vue
|
||||
|
||||
*.bundle.js
|
||||
*.js.map
|
||||
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,6 +1,7 @@
|
||||
node_modules
|
||||
*.log
|
||||
.idea
|
||||
.vscode
|
||||
npm-shrinkwrap.json
|
||||
dist
|
||||
.tern-port
|
||||
|
||||
29
CHANGELOG.md
29
CHANGELOG.md
@ -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
|
||||
|
||||
2017-August-22
|
||||
|
||||
@ -20,22 +20,26 @@ 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:
|
||||
|
||||
1. Download the latest version of this project, and build it
|
||||
1. Download the latest version of this project, and build it:
|
||||
|
||||
git clone https://github.com/storybooks/storybook.git
|
||||
cd storybook
|
||||
npm install
|
||||
npm run bootstrap
|
||||
```sh
|
||||
git clone https://github.com/storybooks/storybook.git
|
||||
cd storybook
|
||||
npm install
|
||||
npm run bootstrap -- --core
|
||||
```
|
||||
|
||||
2. Link `storybook` and any other required dependencies
|
||||
2. Link `storybook` and any other required dependencies:
|
||||
|
||||
cd app/react
|
||||
npm link
|
||||
```sh
|
||||
cd app/react
|
||||
npm link
|
||||
|
||||
cd <your-project>
|
||||
npm link @storybook/react
|
||||
cd <your-project>
|
||||
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
|
||||
|
||||
@ -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:
|
||||
|
||||
```bash
|
||||
```sh
|
||||
# Download and build this repository:
|
||||
git clone https://github.com/storybooks/storybook.git
|
||||
cd storybook
|
||||
npm install
|
||||
npm run bootstrap
|
||||
npm run bootstrap -- --core
|
||||
|
||||
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
|
||||
|
||||
- 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, it is reasonable to wait 2 weeks before closing).
|
||||
|
||||
- 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).
|
||||
- `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, and closed when released or if the feature is deemed not appropriate.
|
||||
|
||||
- `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.
|
||||
|
||||
- `feature`s, `maintenance`s, `greenkeeper`s should be labelled `merged` when merged,
|
||||
and closed when released or if the feature is deemed not appropriate.
|
||||
- `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.
|
||||
- `discussion`s should be closed at a maintainer's discretion.
|
||||
|
||||
## 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.
|
||||
So run the following command:
|
||||
|
||||
npm run dev
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This will watch files and transpile.
|
||||
This will watch files and transpile in watch mode.
|
||||
|
||||
### Linking
|
||||
|
||||
@ -194,7 +198,7 @@ git status
|
||||
git clean -fdx && yarn
|
||||
|
||||
# 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.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.7",
|
||||
"description": "Storybook decorator to center components",
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-comments",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.8",
|
||||
"description": "Comments addon for Storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -36,10 +36,10 @@
|
||||
"react-textarea-autosize": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "^3.2.5",
|
||||
"@storybook/addon-actions": "^3.2.0",
|
||||
"@kadira/storybook-database-cloud": "*",
|
||||
"@kadira/storybook-deployer": "*",
|
||||
"@storybook/addon-actions": "^3.2.0",
|
||||
"@storybook/react": "^3.2.8",
|
||||
"git-url-parse": "^6.2.2",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.7",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -15,7 +15,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/components": "^3.2.6",
|
||||
"@storybook/components": "^3.2.7",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^2.0.0",
|
||||
|
||||
@ -229,6 +229,8 @@ const defaultValue = new Date('Jan 20 2017');
|
||||
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
|
||||
|
||||
If you feel like this addon is not performing well enough there is an option to use `withKnobsOptions` instead of `withKnobs`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.8",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -29,9 +29,9 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
|
||||
knobStore.subscribe(this.setPaneKnobs);
|
||||
},
|
||||
|
||||
beforeDestroy(){
|
||||
beforeDestroy() {
|
||||
channel.removeListener('addon:knobs:reset', this.onKnobReset);
|
||||
channel.removeListener('addon:knobs:knobChange', this.onKnobChange);
|
||||
knobStore.unsubscribe(this.setPaneKnobs);
|
||||
}
|
||||
},
|
||||
});
|
||||
@ -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 testStory = () => ({ render: (h) => h('div', ['testStory']) });
|
||||
const testStory = () => ({ render: h => h('div', ['testStory']) });
|
||||
const testContext = {
|
||||
kind: 'Foo',
|
||||
story: 'bar baz',
|
||||
};
|
||||
|
||||
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).toHaveBeenCalledWith('addon:knobs:reset', expect.any(Function));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.7",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.8",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -22,7 +22,7 @@
|
||||
"devDependencies": {
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"@storybook/react": "^3.2.6",
|
||||
"@storybook/react": "^3.2.8",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
@ -33,7 +33,7 @@
|
||||
"peerDependencies": {
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"@storybook/react": "^3.2.6",
|
||||
"@storybook/react": "^3.2.8",
|
||||
"babel-core": "^6.25.0",
|
||||
"react": "*",
|
||||
"react-test-renderer": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.8",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -28,7 +28,7 @@
|
||||
"@storybook/addon-links": "^3.2.6",
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/channel-websocket": "^3.2.0",
|
||||
"@storybook/ui": "^3.2.6",
|
||||
"@storybook/ui": "^3.2.7",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
|
||||
2
app/react-native/src/server/config/babel.js
vendored
2
app/react-native/src/server/config/babel.js
vendored
@ -5,7 +5,7 @@ module.exports = {
|
||||
[
|
||||
require.resolve('babel-preset-env'),
|
||||
{
|
||||
modules: false,
|
||||
modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
|
||||
},
|
||||
],
|
||||
require.resolve('babel-preset-react'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.8",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
|
||||
"bugs": {
|
||||
@ -26,7 +26,7 @@
|
||||
"@storybook/addon-links": "^3.2.6",
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/channel-postmessage": "^3.2.0",
|
||||
"@storybook/ui": "^3.2.6",
|
||||
"@storybook/ui": "^3.2.7",
|
||||
"airbnb-js-shims": "^1.1.1",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
|
||||
@ -8,7 +8,6 @@ export default class ClientApi {
|
||||
this._storyStore = storyStore;
|
||||
this._addons = {};
|
||||
this._globalDecorators = [];
|
||||
this._storiesAdded = false;
|
||||
}
|
||||
|
||||
setAddon(addon) {
|
||||
@ -19,9 +18,6 @@ export default class ClientApi {
|
||||
}
|
||||
|
||||
addDecorator(decorator) {
|
||||
if (this._storiesAdded) {
|
||||
throw new Error('Global decorators added after loading stories will not be applied');
|
||||
}
|
||||
this._globalDecorators.push(decorator);
|
||||
}
|
||||
|
||||
@ -62,8 +58,6 @@ export default class ClientApi {
|
||||
});
|
||||
|
||||
api.add = (storyName, getStory) => {
|
||||
this._storiesAdded = true;
|
||||
|
||||
if (typeof storyName !== 'string') {
|
||||
throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
|
||||
}
|
||||
|
||||
@ -150,16 +150,6 @@ describe('preview.client_api', () => {
|
||||
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', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
const findCacheDir = require('find-cache-dir');
|
||||
|
||||
module.exports = {
|
||||
// Don't try to find .babelrc because we want to force this configuration.
|
||||
babelrc: false,
|
||||
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
|
||||
presets: [
|
||||
[
|
||||
require.resolve('babel-preset-env'),
|
||||
@ -11,7 +8,7 @@ module.exports = {
|
||||
targets: {
|
||||
browsers: ['last 2 versions', 'safari >= 7'],
|
||||
},
|
||||
modules: false,
|
||||
modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
|
||||
},
|
||||
],
|
||||
require.resolve('babel-preset-stage-0'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.8",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
|
||||
"bugs": {
|
||||
@ -26,7 +26,7 @@
|
||||
"@storybook/addon-links": "^3.2.6",
|
||||
"@storybook/addons": "^3.2.6",
|
||||
"@storybook/channel-postmessage": "^3.2.0",
|
||||
"@storybook/ui": "^3.2.6",
|
||||
"@storybook/ui": "^3.2.7",
|
||||
"airbnb-js-shims": "^1.1.1",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
// import deprecate from 'util-deprecate';
|
||||
|
||||
// NOTE export these to keep backwards compatibility
|
||||
// import { action as deprecatedAction } from '@storybook/addon-actions';
|
||||
|
||||
@ -30,8 +30,11 @@ export default class ClientApi {
|
||||
throw new Error('Invalid or missing kind provided for stories, should be a string');
|
||||
}
|
||||
|
||||
if(!m) {
|
||||
console.warn(`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`);
|
||||
if (!m) {
|
||||
// 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) {
|
||||
@ -56,9 +59,9 @@ export default class ClientApi {
|
||||
|
||||
const createWrapperComponent = Target => ({
|
||||
functional: true,
|
||||
render (h, c) {
|
||||
render(h, c) {
|
||||
return h(Target, c.data, c.children);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
api.add = (storyName, getStory) => {
|
||||
@ -81,7 +84,7 @@ export default class ClientApi {
|
||||
const decoratedStory = decorator(story, context);
|
||||
decoratedStory.components = decoratedStory.components || {};
|
||||
decoratedStory.components.story = createWrapperComponent(story());
|
||||
return decoratedStory
|
||||
return decoratedStory;
|
||||
},
|
||||
getStory
|
||||
);
|
||||
|
||||
@ -181,7 +181,9 @@ describe('preview.client_api', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
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>' }));
|
||||
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
import { stripIndents } from 'common-tags';
|
||||
import Vue from 'vue';
|
||||
|
||||
import ErrorDisplay from './ErrorDisplay.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;
|
||||
let previousKind = '';
|
||||
let previousStory = '';
|
||||
@ -20,9 +16,10 @@ function renderErrorDisplay(error) {
|
||||
err = new Vue({
|
||||
el: '#error-display',
|
||||
render(h) {
|
||||
return h('div', { attrs: { id: 'error-display' } }, error
|
||||
? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } }) ]
|
||||
: []
|
||||
return h(
|
||||
'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) {
|
||||
if (storyStore.size() === 0) return null;
|
||||
if (storyStore.size() === 0) return;
|
||||
|
||||
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.
|
||||
`,
|
||||
};
|
||||
return renderError(error);
|
||||
renderError(error);
|
||||
}
|
||||
|
||||
renderRoot({
|
||||
el: '#root',
|
||||
render(h) {
|
||||
return h('div', { attrs: { id: 'root' } }, [h(component)]);
|
||||
return h('div', { attrs: { id: 'root' } }, [h(component)]);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* eslint-disable global-require, import/no-dynamic-require */
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import findCacheDir from 'find-cache-dir';
|
||||
import loadBabelConfig from './babel_config';
|
||||
|
||||
// avoid ESLint errors
|
||||
@ -13,7 +14,13 @@ export default function(configType, baseConfig, configDir) {
|
||||
const config = baseConfig;
|
||||
|
||||
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
|
||||
// config directory and throw an error if it's not.
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
const findCacheDir = require('find-cache-dir');
|
||||
|
||||
module.exports = {
|
||||
// Don't try to find .babelrc because we want to force this configuration.
|
||||
babelrc: false,
|
||||
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
|
||||
presets: [
|
||||
[
|
||||
require.resolve('babel-preset-env'),
|
||||
@ -11,7 +8,7 @@ module.exports = {
|
||||
targets: {
|
||||
browsers: ['last 2 versions', 'safari >= 7'],
|
||||
},
|
||||
modules: false,
|
||||
modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
|
||||
},
|
||||
],
|
||||
require.resolve('babel-preset-stage-0'),
|
||||
|
||||
@ -52,10 +52,10 @@ export default function() {
|
||||
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
|
||||
modules: ['node_modules'].concat(nodePaths),
|
||||
alias: {
|
||||
'vue$': require.resolve('vue/dist/vue.esm.js'),
|
||||
'react$': require.resolve('react'),
|
||||
vue$: require.resolve('vue/dist/vue.esm.js'),
|
||||
react$: require.resolve('react'),
|
||||
'react-dom$': require.resolve('react-dom'),
|
||||
}
|
||||
},
|
||||
},
|
||||
performance: {
|
||||
hints: false,
|
||||
|
||||
@ -60,10 +60,10 @@ export default function() {
|
||||
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
|
||||
modules: ['node_modules'].concat(nodePaths),
|
||||
alias: {
|
||||
'vue$': require.resolve('vue/dist/vue.esm.js'),
|
||||
'react$': require.resolve('react'),
|
||||
vue$: require.resolve('vue/dist/vue.esm.js'),
|
||||
react$: require.resolve('react'),
|
||||
'react-dom$': require.resolve('react-dom'),
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -23,5 +23,5 @@
|
||||
"examples/*"
|
||||
],
|
||||
"concurrency": 1,
|
||||
"version": "3.2.6"
|
||||
"version": "3.2.8"
|
||||
}
|
||||
|
||||
@ -9,7 +9,8 @@ module.exports = Promise.all([
|
||||
latestVersion('@storybook/react'),
|
||||
latestVersion('@storybook/addon-actions'),
|
||||
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
|
||||
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
|
||||
|
||||
@ -41,6 +42,10 @@ module.exports = Promise.all([
|
||||
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.storybook = 'storybook start -p 7007';
|
||||
|
||||
|
||||
@ -7,7 +7,8 @@ module.exports = Promise.all([
|
||||
latestVersion('@storybook/react'),
|
||||
latestVersion('@storybook/addon-actions'),
|
||||
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
|
||||
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
|
||||
|
||||
@ -25,6 +26,10 @@ module.exports = Promise.all([
|
||||
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.storybook = 'storybook start -p 7007';
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ const helpers = require('../../lib/helpers');
|
||||
const path = require('path');
|
||||
const latestVersion = require('latest-version');
|
||||
|
||||
Promise.all([
|
||||
module.exports = Promise.all([
|
||||
latestVersion('@storybook/vue'),
|
||||
latestVersion('@storybook/addon-actions'),
|
||||
latestVersion('@storybook/addon-links'),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export default {
|
||||
name: 'my-button',
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
buttonStyles: {
|
||||
border: '1px solid #eee',
|
||||
@ -10,9 +10,9 @@ export default {
|
||||
cursor: 'pointer',
|
||||
fontSize: 15,
|
||||
padding: '3px 10px',
|
||||
margin: 10
|
||||
}
|
||||
}
|
||||
margin: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
template: `
|
||||
@ -22,8 +22,8 @@ export default {
|
||||
`,
|
||||
|
||||
methods: {
|
||||
onClick () {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -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 {
|
||||
name: 'welcome',
|
||||
@ -6,28 +7,28 @@ export default {
|
||||
props: {
|
||||
showApp: {
|
||||
type: Function,
|
||||
default: log
|
||||
}
|
||||
default: log,
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
main: {
|
||||
margin: 15,
|
||||
maxWidth: 600,
|
||||
lineHeight: 1.4,
|
||||
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif'
|
||||
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
|
||||
},
|
||||
|
||||
logo: {
|
||||
width: 200
|
||||
width: 200,
|
||||
},
|
||||
|
||||
link: {
|
||||
color: '#1474f3',
|
||||
textDecoration: 'none',
|
||||
borderBottom: '1px solid #1474f3',
|
||||
paddingBottom: 2
|
||||
paddingBottom: 2,
|
||||
},
|
||||
|
||||
code: {
|
||||
@ -37,13 +38,13 @@ export default {
|
||||
border: '1px solid #eae9e9',
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#f3f2f2',
|
||||
color: '#3a3a3a'
|
||||
color: '#3a3a3a',
|
||||
},
|
||||
|
||||
note: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
opacity: 0.5,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
template: `
|
||||
@ -112,9 +113,9 @@ export default {
|
||||
`,
|
||||
|
||||
methods: {
|
||||
onClick (event) {
|
||||
event.preventDefault()
|
||||
this.showApp()
|
||||
}
|
||||
}
|
||||
}
|
||||
onClick(event) {
|
||||
event.preventDefault();
|
||||
this.showApp();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,25 +1,23 @@
|
||||
import { storiesOf } from '@storybook/vue'
|
||||
import { action } from '@storybook/addon-actions'
|
||||
import { linkTo } from '@storybook/addon-links'
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
import MyButton from './MyButton'
|
||||
import Welcome from './Welcome'
|
||||
import MyButton from './MyButton';
|
||||
import Welcome from './Welcome';
|
||||
|
||||
storiesOf('Welcome', module)
|
||||
.add('to Storybook', () => ({
|
||||
storiesOf('Welcome', module).add('to Storybook', () => ({
|
||||
components: { Welcome },
|
||||
template: '<welcome :showApp="action" />',
|
||||
methods: { action: linkTo('Button') }
|
||||
}))
|
||||
methods: { action: linkTo('Button') },
|
||||
}));
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('with text', () => ({
|
||||
components: { MyButton },
|
||||
template: '<my-button @click="action">Hello Button</my-button>',
|
||||
methods: { action: linkTo('clicked') }
|
||||
methods: { action: linkTo('clicked') },
|
||||
}))
|
||||
.add('with some emoji', () => ({
|
||||
components: { MyButton },
|
||||
template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
|
||||
methods: { action: linkTo('clicked') }
|
||||
}))
|
||||
methods: { action: linkTo('clicked') },
|
||||
}));
|
||||
|
||||
@ -3,7 +3,7 @@ const helpers = require('../../lib/helpers');
|
||||
const path = require('path');
|
||||
const latestVersion = require('latest-version');
|
||||
|
||||
Promise.all([
|
||||
module.exports = Promise.all([
|
||||
latestVersion('@storybook/react'),
|
||||
latestVersion('@storybook/addon-actions'),
|
||||
latestVersion('@storybook/addon-links'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.8",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/components",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.7",
|
||||
"description": "Core Storybook Components",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ui",
|
||||
"version": "3.2.6",
|
||||
"version": "3.2.7",
|
||||
"description": "Core Storybook UI",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -15,7 +15,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@hypnosphi/fuse.js": "^3.0.9",
|
||||
"@storybook/components": "^3.2.6",
|
||||
"@storybook/components": "^3.2.7",
|
||||
"@storybook/react-fuzzy": "^0.4.0",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
|
||||
12
package.json
12
package.json
@ -6,7 +6,8 @@
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"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:react-native-vanilla": "lerna exec --scope react-native-vanilla -- 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:dev": "cd docs && npm run dev",
|
||||
"github-release": "github-release-from-changelog",
|
||||
"import-repo": "lerna import",
|
||||
"lint": "npm run lint:js . && npm run lint:md .",
|
||||
"lint:js": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
|
||||
"lint:md": "remark",
|
||||
@ -41,6 +41,7 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"chalk": "^2.0.1",
|
||||
"codecov": "^2.2.0",
|
||||
"commander": "^2.9.0",
|
||||
"danger": "^1.0.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"eslint": "^4.3.0",
|
||||
@ -55,11 +56,12 @@
|
||||
"fs-extra": "^4.0.0",
|
||||
"gh-pages": "^1.0.0",
|
||||
"github-release-from-changelog": "^1.2.1",
|
||||
"inquirer": "^3.1.0",
|
||||
"glob": "^7.1.2",
|
||||
"husky": "^0.14.3",
|
||||
"jest": "^20.0.4",
|
||||
"jest-enzyme": "^3.6.1",
|
||||
"lerna": "2.0.0",
|
||||
"lerna": "2.1.0",
|
||||
"lint-staged": "^4.0.2",
|
||||
"lodash": "^4.17.4",
|
||||
"nodemon": "^1.11.0",
|
||||
@ -85,6 +87,7 @@
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"lint-staged": {
|
||||
"linters": {
|
||||
"*.js": [
|
||||
"npm run lint:js -- --fix",
|
||||
"git add"
|
||||
@ -98,6 +101,9 @@
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"verbose": true,
|
||||
"concurrent": false
|
||||
},
|
||||
"pr-log": {
|
||||
"skipLabels": [
|
||||
"cleanup"
|
||||
|
||||
177
scripts/bootstrap.js
vendored
Executable file
177
scripts/bootstrap.js
vendored
Executable 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;
|
||||
});
|
||||
@ -105,8 +105,8 @@ const task = getLernaPackages()
|
||||
|
||||
task
|
||||
.then(packages => {
|
||||
log.info(prefix, packages.map(dir => dir.replace(cwd, '')).join(',\n'));
|
||||
log.success(prefix, 'complete');
|
||||
log.verbose(prefix, packages.map(dir => dir.replace(cwd, '')).join(',\n'));
|
||||
log.success(prefix, `Hoisted ${packages.length} packages`);
|
||||
})
|
||||
.catch(error => {
|
||||
log.error(prefix, 'failed', error);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user