From 0a7163bfd585e78d0fa3497dd93b7660079269c3 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Mon, 17 Apr 2017 16:37:37 +0200
Subject: [PATCH 01/37] ADD stricter eslint rules
---
.eslintrc.js | 19 +++++++++++++++++--
package.json | 1 +
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index ea25eb04850a..ed96f7762d01 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,17 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
module.exports = {
extends: [
- './node_modules/eslint-config-airbnb-base/rules/es6.js',
+ // './node_modules/eslint-config-airbnb-base/rules/es6.js',
+ 'airbnb-base',
+ 'plugin:jest/recommended',
],
plugins: [
'prettier',
+ 'jest',
+ 'react',
],
parser: 'babel-eslint',
parserOptions: {
@@ -12,9 +20,10 @@ module.exports = {
env: {
es6: true,
node: true,
+ 'jest/globals': true,
},
rules: {
- strict: 0,
+ strict: [error, "never"],
'prettier/prettier': ['warn', {
printWidth: 100,
tabWidth: 2,
@@ -24,5 +33,11 @@ module.exports = {
}],
quotes: ['warn', 'single'],
'arrow-parens': ['warn', 'as-needed'],
+ 'space-before-function-paren': ignore,
+ 'import/no-extraneous-dependencies': [error, { devDependencies: true }],
+ 'import/prefer-default-export': ignore,
+ 'react/jsx-uses-react': error,
+ 'react/jsx-uses-vars': error,
+ 'react/react-in-jsx-scope': error,
},
}
diff --git a/package.json b/package.json
index f666e60f96cc..ba194352e744 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jest": "^19.0.1",
"eslint-plugin-prettier": "^2.0.1",
+ "eslint-plugin-react": "^6.10.3",
"jest": "^19.0.2",
"jest-enzyme": "^3.0.1",
"lerna": "2.0.0-rc.2",
From 26f7ca5c9e434e91ed6969f17a8f213f80ba97d8 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Mon, 17 Apr 2017 16:37:49 +0200
Subject: [PATCH 02/37] FIX linting
---
.eslintignore | 2 +
.eslintrc.js | 3 +-
packages/addon-graphql/.storybook/config.js | 1 +
packages/addon-graphql/package.json | 1 +
packages/addon-graphql/src/preview.js | 7 ++-
packages/addon-info/package.json | 1 +
packages/addon-info/src/components/Node.js | 60 +++++++++----------
.../addon-info/src/components/PropTable.js | 20 +++----
packages/addon-info/src/components/PropVal.js | 2 +-
packages/addon-info/src/components/Props.js | 4 +-
packages/addon-info/src/components/Story.js | 4 +-
.../src/components/markdown/code.js | 1 +
packages/addon-info/src/index.js | 7 ++-
packages/addon-knobs/package.json | 5 +-
packages/addon-knobs/src/KnobManager.js | 6 +-
.../addon-knobs/src/components/PropField.js | 2 +
.../addon-knobs/src/components/PropForm.js | 2 +
.../addon-knobs/src/components/WrapStory.js | 2 +
.../addon-knobs/src/components/types/Array.js | 9 +--
.../src/components/types/Boolean.js | 10 +---
.../addon-knobs/src/components/types/Color.js | 10 +---
.../src/components/types/Date/index.js | 9 +--
.../src/components/types/Number.js | 9 +--
.../src/components/types/Object.js | 10 +---
.../src/components/types/Select.js | 11 ++--
.../addon-knobs/src/components/types/Text.js | 9 +--
packages/addon-notes/package.json | 1 +
packages/addon-options/manager.js | 1 +
packages/addon-options/preview.js | 1 +
packages/addon-options/src/manager/index.js | 1 -
packages/addons/src/index.js | 2 +
packages/channel-postmessage/package.json | 1 +
packages/channel-postmessage/src/index.js | 28 +++++----
packages/channel-websocket/package.json | 3 +-
packages/channel-websocket/src/index.js | 13 ++--
packages/channel/src/index.js | 2 +
packages/channel/src/index.test.js | 2 +
packages/decorator-centered/package.json | 8 ++-
packages/getstorybook/bin/generate.js | 16 ++---
packages/getstorybook/generators/.eslintrc.js | 14 +++++
.../getstorybook/generators/METEOR/index.js | 3 +-
.../getstorybook/generators/REACT/index.js | 2 +-
.../REACT/template/stories/Welcome.js | 4 +-
.../generators/REACT_NATIVE/index.js | 2 +-
.../storybook/stories/Welcome/index.js | 2 +
.../generators/REACT_SCRIPTS/index.js | 4 +-
.../template/src/stories/Welcome.js | 4 +-
.../generators/WEBPACK_REACT/index.js | 2 +-
.../WEBPACK_REACT/template/stories/Welcome.js | 4 +-
packages/getstorybook/lib/helpers.js | 15 ++---
packages/getstorybook/package.json | 6 ++
packages/react-native-storybook/package.json | 4 +-
.../src/manager/index.js | 1 +
.../src/preview/index.js | 5 +-
.../src/preview/story_kind.js | 2 +
.../src/preview/story_store.js | 8 ++-
.../src/server/config.js | 2 +-
.../src/server/config/webpack.config.js | 2 +-
.../src/server/config/webpack.config.prod.js | 2 +-
.../src/server/index.js | 4 +-
.../src/server/middleware.js | 6 +-
.../demo/src/stories/Welcome.js | 4 +-
packages/react-storybook/package.json | 1 +
.../react-storybook/scripts/mocha_runner.js | 25 --------
.../src/client/preview/client_api.js | 2 +
.../src/client/preview/client_api.test.js | 2 +
.../src/client/preview/config_api.js | 4 +-
.../src/client/preview/story_store.js | 8 ++-
packages/react-storybook/src/server/config.js | 2 +-
.../config/WatchMissingNodeModulesPlugin.js | 2 +-
.../server/config/defaults/webpack.config.js | 3 +-
packages/react-storybook/src/server/index.js | 1 +
.../react-storybook/src/server/track_usage.js | 2 +-
packages/react-storybook/src/server/utils.js | 8 +--
packages/storybook-ui/example/package.json | 26 ++++----
packages/storybook-ui/example/server.js | 11 ++--
packages/storybook-ui/package.json | 2 +
packages/storybook-ui/src/index.js | 8 +--
.../src/modules/api/actions/api.test.js | 6 +-
.../src/modules/api/configs/init_api.test.js | 16 ++---
.../ui/components/layout/dimensions.js | 6 +-
.../src/modules/ui/components/layout/index.js | 7 ++-
.../ui/components/layout/index.test.js | 2 +-
.../ui/components/left_panel/header.test.js | 2 +-
.../modules/ui/components/left_panel/index.js | 2 +-
.../src/modules/ui/components/search_box.js | 13 ++--
.../modules/ui/configs/handle_keyevents.js | 1 +
.../ui/configs/handle_keyevents.test.js | 3 +-
.../src/modules/ui/configs/handle_routing.js | 2 +
.../modules/ui/configs/handle_routing.test.js | 3 +-
.../modules/ui/containers/shortcuts_help.js | 3 +-
.../modules/ui/libs/gen_podda_loader.test.js | 2 +-
packages/storyshots/package.json | 4 +-
packages/storyshots/src/index.js | 15 ++---
packages/storyshots/src/require_context.js | 6 +-
.../required_with_context/Button.stories.js | 3 +-
.../stories/required_with_context/Welcome.js | 4 +-
97 files changed, 317 insertions(+), 278 deletions(-)
create mode 100644 packages/getstorybook/generators/.eslintrc.js
delete mode 100755 packages/react-storybook/scripts/mocha_runner.js
diff --git a/.eslintignore b/.eslintignore
index 398ff439977d..323c8631ee1b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,5 @@ dist
build
coverage
node_modules
+**/example/**
+**/demo/**
diff --git a/.eslintrc.js b/.eslintrc.js
index ed96f7762d01..ec5543c22beb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -32,9 +32,10 @@ module.exports = {
singleQuote: true,
}],
quotes: ['warn', 'single'],
+ 'class-methods-use-this': ignore,
'arrow-parens': ['warn', 'as-needed'],
'space-before-function-paren': ignore,
- 'import/no-extraneous-dependencies': [error, { devDependencies: true }],
+ 'import/no-extraneous-dependencies': [error, { devDependencies: true, peerDependencies: true }],
'import/prefer-default-export': ignore,
'react/jsx-uses-react': error,
'react/jsx-uses-vars': error,
diff --git a/packages/addon-graphql/.storybook/config.js b/packages/addon-graphql/.storybook/config.js
index c4434721049e..0f14ab35ccd4 100644
--- a/packages/addon-graphql/.storybook/config.js
+++ b/packages/addon-graphql/.storybook/config.js
@@ -1,2 +1,3 @@
import * as storybook from '@kadira/storybook';
+
storybook.configure(() => require('./stories'), module);
diff --git a/packages/addon-graphql/package.json b/packages/addon-graphql/package.json
index 3c509b483f88..81e07b4d5820 100644
--- a/packages/addon-graphql/package.json
+++ b/packages/addon-graphql/package.json
@@ -35,6 +35,7 @@
"react": "*"
},
"dependencies": {
+ "global": "^4.3.1",
"graphiql": "^0.7.8",
"graphql": "^0.7.0"
}
diff --git a/packages/addon-graphql/src/preview.js b/packages/addon-graphql/src/preview.js
index 54807c35c078..fdaf3881dd85 100644
--- a/packages/addon-graphql/src/preview.js
+++ b/packages/addon-graphql/src/preview.js
@@ -1,7 +1,8 @@
+import { fetch } from 'global';
import React from 'react';
import GraphiQL from 'graphiql';
-import FullScreen from './components/FullScreen';
import 'graphiql/graphiql.css';
+import FullScreen from './components/FullScreen';
const FETCH_OPTIONS = {
method: 'post',
@@ -9,7 +10,7 @@ const FETCH_OPTIONS = {
};
function getDefautlFetcher(url) {
- return function(params) {
+ return params => {
const body = JSON.stringify(params);
const options = Object.assign({ body }, FETCH_OPTIONS);
return fetch(url, options).then(res => res.json());
@@ -23,7 +24,7 @@ function reIndentQuery(query) {
}
export function setupGraphiQL(config) {
- return function(_query, variables = '{}') {
+ return (_query, variables = '{}') => {
const query = reIndentQuery(_query);
const fetcher = config.fetcher || getDefautlFetcher(config.url);
return () => (
diff --git a/packages/addon-info/package.json b/packages/addon-info/package.json
index c847b85b515e..6dd871a98e6a 100644
--- a/packages/addon-info/package.json
+++ b/packages/addon-info/package.json
@@ -34,6 +34,7 @@
},
"dependencies": {
"babel-runtime": "^6.5.0",
+ "global": "^4.3.1",
"markdown-to-react-components": "^0.2.1",
"prop-types": "^15.5.7",
"react-addons-create-fragment": "^15.5.3"
diff --git a/packages/addon-info/src/components/Node.js b/packages/addon-info/src/components/Node.js
index c2892317fba7..7e19034d4173 100644
--- a/packages/addon-info/src/components/Node.js
+++ b/packages/addon-info/src/components/Node.js
@@ -8,13 +8,42 @@ const stylesheet = {
},
};
+function getData(element) {
+ const data = {
+ name: null,
+ text: null,
+ children: null,
+ };
+
+ if (typeof element === 'string') {
+ data.text = element;
+ return data;
+ }
+
+ if (typeof element === 'number') {
+ data.text = String.toString(element);
+ return data;
+ }
+
+ data.children = element.props.children;
+ const type = element.type;
+
+ if (typeof type === 'string') {
+ data.name = type;
+ } else {
+ data.name = type.displayName || type.name || 'Unknown';
+ }
+
+ return data;
+}
+
export default class Node extends React.Component {
render() {
const { node, depth } = this.props;
const { tagStyle, containerStyle } = stylesheet;
const leftPad = {
- paddingLeft: 3 + (depth + 1) * 15,
+ paddingLeft: 3 + ((depth + 1) * 15), // eslint-disable-line
paddingRight: 3,
};
@@ -63,32 +92,3 @@ export default class Node extends React.Component {
);
}
}
-
-function getData(element) {
- const data = {
- name: null,
- text: null,
- children: null,
- };
-
- if (typeof element == 'string') {
- data.text = element;
- return data;
- }
-
- if (typeof element === 'number') {
- data.text = String.toString(element);
- return data;
- }
-
- data.children = element.props.children;
- const type = element.type;
-
- if (typeof type === 'string') {
- data.name = type;
- } else {
- data.name = type.displayName || type.name || 'Unknown';
- }
-
- return data;
-}
diff --git a/packages/addon-info/src/components/PropTable.js b/packages/addon-info/src/components/PropTable.js
index 7b200a2c751e..9c18f1a8b524 100644
--- a/packages/addon-info/src/components/PropTable.js
+++ b/packages/addon-info/src/components/PropTable.js
@@ -3,9 +3,9 @@ import React from 'react';
import PropVal from './PropVal';
const PropTypesMap = new Map();
-for (const typeName in PropTypes) {
- if (!PropTypes.hasOwnProperty(typeName)) {
- continue;
+for (const typeName in PropTypes) { // eslint-disable-line
+ if (!PropTypes.hasOwnProperty(typeName)) { // eslint-disable-line
+ continue; // eslint-disable-line
}
const type = PropTypes[typeName];
PropTypesMap.set(type, typeName);
@@ -31,9 +31,9 @@ export default class PropTable extends React.Component {
const props = {};
if (type.propTypes) {
- for (const property in type.propTypes) {
- if (!type.propTypes.hasOwnProperty(property)) {
- continue;
+ for (const property in type.propTypes) { // eslint-disable-line
+ if (!type.propTypes.hasOwnProperty(property)) { // eslint-disable-line
+ continue; // eslint-disable-line
}
const typeInfo = type.propTypes[property];
const propType = PropTypesMap.get(typeInfo) || 'other';
@@ -43,13 +43,13 @@ export default class PropTable extends React.Component {
}
if (type.defaultProps) {
- for (const property in type.defaultProps) {
- if (!type.defaultProps.hasOwnProperty(property)) {
- continue;
+ for (const property in type.defaultProps) { // eslint-disable-line
+ if (!type.defaultProps.hasOwnProperty(property)) { // eslint-disable-line
+ continue; // eslint-disable-line
}
const value = type.defaultProps[property];
if (value === undefined) {
- continue;
+ continue; // eslint-disable-line
}
if (!props[property]) {
props[property] = { property };
diff --git a/packages/addon-info/src/components/PropVal.js b/packages/addon-info/src/components/PropVal.js
index f03af69feb4b..5aa548c27369 100644
--- a/packages/addon-info/src/components/PropVal.js
+++ b/packages/addon-info/src/components/PropVal.js
@@ -82,7 +82,7 @@ function previewProp(val) {
content = {val} ;
} else if (typeof val === 'string') {
if (val.length > 50) {
- val = `${val.slice(0, 50)}…`;
+ val = `${val.slice(0, 50)}…`; // eslint-disable-line
}
content = "{val}" ;
braceWrap = false;
diff --git a/packages/addon-info/src/components/Props.js b/packages/addon-info/src/components/Props.js
index ae7c3c835e43..075bbf33a2c0 100644
--- a/packages/addon-info/src/components/Props.js
+++ b/packages/addon-info/src/components/Props.js
@@ -15,13 +15,13 @@ export default class Props extends React.Component {
return ;
}
- const { propStyle, propValueStyle, propNameStyle } = stylesheet;
+ const { propValueStyle, propNameStyle } = stylesheet;
const names = Object.keys(props).filter(
name =>
name[0] !== '_' &&
name !== 'children' &&
- (!defaultProps || props[name] != defaultProps[name]),
+ (!defaultProps || props[name] !== defaultProps[name]),
);
const breakIntoNewLines = names.length > 3;
diff --git a/packages/addon-info/src/components/Story.js b/packages/addon-info/src/components/Story.js
index be70e3a1fff0..78293fd6b18e 100644
--- a/packages/addon-info/src/components/Story.js
+++ b/packages/addon-info/src/components/Story.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import PropTypes from 'prop-types';
import React from 'react';
import MTRC from 'markdown-to-react-components';
@@ -293,8 +295,6 @@ export default class Story extends React.Component {
{propTables}
);
-
- return;
}
render() {
diff --git a/packages/addon-info/src/components/markdown/code.js b/packages/addon-info/src/components/markdown/code.js
index 0e54a1c7fbc8..be0e64b2ac77 100644
--- a/packages/addon-info/src/components/markdown/code.js
+++ b/packages/addon-info/src/components/markdown/code.js
@@ -1,3 +1,4 @@
+import { Prism } from 'global';
import React from 'react';
export class Code extends React.Component {
diff --git a/packages/addon-info/src/index.js b/packages/addon-info/src/index.js
index a2f6f78081c3..b77729190162 100644
--- a/packages/addon-info/src/index.js
+++ b/packages/addon-info/src/index.js
@@ -1,6 +1,7 @@
import React from 'react';
import _Story from './components/Story';
import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
+
export const Story = _Story;
const defaultOptions = {
@@ -28,9 +29,9 @@ export default {
addWithInfo(storyName, info, storyFn, _options) {
if (typeof storyFn !== 'function') {
if (typeof info === 'function') {
- _options = storyFn;
- storyFn = info;
- info = '';
+ _options = storyFn; // eslint-disable-line
+ storyFn = info; // eslint-disable-line
+ info = ''; // eslint-disable-line
} else {
throw new Error('No story defining function has been specified');
}
diff --git a/packages/addon-knobs/package.json b/packages/addon-knobs/package.json
index e39c43ed932e..f2d9adee0552 100644
--- a/packages/addon-knobs/package.json
+++ b/packages/addon-knobs/package.json
@@ -15,6 +15,7 @@
},
"devDependencies": {
"@kadira/storybook": "*",
+ "@kadira/storybook-addons": "*",
"@types/node": "^7.0.12",
"@types/react": "^15.0.21",
"babel-cli": "^6.24.1",
@@ -26,6 +27,7 @@
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
+ "enzyme": "^2.8.2",
"git-url-parse": "^6.2.2",
"raw-loader": "^0.5.1",
"react": "^15.5.4",
@@ -35,13 +37,14 @@
"typescript-definition-tester": "^0.0.5"
},
"peerDependencies": {
- "@kadira/storybook-addons": "*",
"react": "*",
"react-dom": "*"
},
"dependencies": {
+ "@kadira/storybook-addons": "*",
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
+ "global": "^4.3.1",
"insert-css": "^1.0.0",
"moment": "^2.18.1",
"prop-types": "^15.5.8",
diff --git a/packages/addon-knobs/src/KnobManager.js b/packages/addon-knobs/src/KnobManager.js
index fb83c872fa4b..a6062715f780 100644
--- a/packages/addon-knobs/src/KnobManager.js
+++ b/packages/addon-knobs/src/KnobManager.js
@@ -1,7 +1,9 @@
+/* eslint no-underscore-dangle: 0 */
+
import React from 'react';
+import deepEqual from 'deep-equal';
import WrapStory from './components/WrapStory';
import KnobStore from './KnobStore';
-import deepEqual from 'deep-equal';
// This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
const PANEL_UPDATE_INTERVAL = 400;
@@ -41,7 +43,7 @@ export default class KnobManager {
let knobStore = this.knobStoreMap[key];
if (!knobStore) {
- knobStore = this.knobStoreMap[key] = new KnobStore();
+ knobStore = this.knobStoreMap[key] = new KnobStore(); // eslint-disable-line
}
this.knobStore = knobStore;
diff --git a/packages/addon-knobs/src/components/PropField.js b/packages/addon-knobs/src/components/PropField.js
index 32f5aa01ac43..fc81128deea1 100644
--- a/packages/addon-knobs/src/components/PropField.js
+++ b/packages/addon-knobs/src/components/PropField.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import PropTypes from 'prop-types';
import React from 'react';
import TypeMap from './types';
diff --git a/packages/addon-knobs/src/components/PropForm.js b/packages/addon-knobs/src/components/PropForm.js
index 19a92f055741..77f31f55f0b9 100644
--- a/packages/addon-knobs/src/components/PropForm.js
+++ b/packages/addon-knobs/src/components/PropForm.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import PropTypes from 'prop-types';
import React from 'react';
diff --git a/packages/addon-knobs/src/components/WrapStory.js b/packages/addon-knobs/src/components/WrapStory.js
index 1293a070ec86..9e6ae22fd3f0 100644
--- a/packages/addon-knobs/src/components/WrapStory.js
+++ b/packages/addon-knobs/src/components/WrapStory.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import PropTypes from 'prop-types';
import React from 'react';
diff --git a/packages/addon-knobs/src/components/types/Array.js b/packages/addon-knobs/src/components/types/Array.js
index 259a9bec4093..30fa28c2b2f8 100644
--- a/packages/addon-knobs/src/components/types/Array.js
+++ b/packages/addon-knobs/src/components/types/Array.js
@@ -36,12 +36,7 @@ ArrayType.propTypes = {
onChange: PropTypes.func,
};
-ArrayType.serialize = function(value) {
- return value;
-};
-
-ArrayType.deserialize = function(value) {
- return value;
-};
+ArrayType.serialize = value => value;
+ArrayType.deserialize = value => value;
export default ArrayType;
diff --git a/packages/addon-knobs/src/components/types/Boolean.js b/packages/addon-knobs/src/components/types/Boolean.js
index ea261e5cfca0..40dd84af8588 100644
--- a/packages/addon-knobs/src/components/types/Boolean.js
+++ b/packages/addon-knobs/src/components/types/Boolean.js
@@ -34,13 +34,7 @@ BooleanType.propTypes = {
onChange: PropTypes.func,
};
-BooleanType.serialize = function(value) {
- return String(value);
-};
-
-BooleanType.deserialize = function(value) {
- if (!value) return false;
- return value.trim() === 'true';
-};
+BooleanType.serialize = value => String(value);
+BooleanType.deserialize = value => (typeof value === 'string' ? value.match('true') : false);
export default BooleanType;
diff --git a/packages/addon-knobs/src/components/types/Color.js b/packages/addon-knobs/src/components/types/Color.js
index 04c82af7574e..94fb75fb5ae3 100644
--- a/packages/addon-knobs/src/components/types/Color.js
+++ b/packages/addon-knobs/src/components/types/Color.js
@@ -1,3 +1,4 @@
+import { document } from 'global';
import PropTypes from 'prop-types';
import React from 'react';
import { SketchPicker } from 'react-color';
@@ -90,12 +91,7 @@ ColorType.propTypes = {
onChange: PropTypes.func,
};
-ColorType.serialize = function(value) {
- return value;
-};
-
-ColorType.deserialize = function(value) {
- return value;
-};
+ColorType.serialize = value => value;
+ColorType.deserialize = value => value;
export default ColorType;
diff --git a/packages/addon-knobs/src/components/types/Date/index.js b/packages/addon-knobs/src/components/types/Date/index.js
index e7ad0197c9e8..916d0ff84fc7 100644
--- a/packages/addon-knobs/src/components/types/Date/index.js
+++ b/packages/addon-knobs/src/components/types/Date/index.js
@@ -42,12 +42,7 @@ DateType.propTypes = {
onChange: PropTypes.func,
};
-DateType.serialize = function(value) {
- return String(value);
-};
-
-DateType.deserialize = function(value) {
- return parseFloat(value);
-};
+DateType.serialize = value => String(value);
+DateType.deserialize = value => parseFloat(value);
export default DateType;
diff --git a/packages/addon-knobs/src/components/types/Number.js b/packages/addon-knobs/src/components/types/Number.js
index 211d9403edbc..4f6a3ffab40e 100644
--- a/packages/addon-knobs/src/components/types/Number.js
+++ b/packages/addon-knobs/src/components/types/Number.js
@@ -67,12 +67,7 @@ NumberType.propTypes = {
onChange: PropTypes.func,
};
-NumberType.serialize = function(value) {
- return String(value);
-};
-
-NumberType.deserialize = function(value) {
- return parseFloat(value);
-};
+NumberType.serialize = value => String(value);
+NumberType.deserialize = value => parseFloat(value);
export default NumberType;
diff --git a/packages/addon-knobs/src/components/types/Object.js b/packages/addon-knobs/src/components/types/Object.js
index f08aab7aa0a6..d78a7a5aa88f 100644
--- a/packages/addon-knobs/src/components/types/Object.js
+++ b/packages/addon-knobs/src/components/types/Object.js
@@ -83,13 +83,7 @@ ObjectType.propTypes = {
onChange: PropTypes.func,
};
-ObjectType.serialize = function(object) {
- return JSON.stringify(object);
-};
-
-ObjectType.deserialize = function(value) {
- if (!value) return {};
- return JSON.parse(value);
-};
+ObjectType.serialize = object => JSON.stringify(object);
+ObjectType.deserialize = value => (value ? JSON.parse(value) : {});
export default ObjectType;
diff --git a/packages/addon-knobs/src/components/types/Select.js b/packages/addon-knobs/src/components/types/Select.js
index 3198f9db9a10..5b6f3cd6a01f 100644
--- a/packages/addon-knobs/src/components/types/Select.js
+++ b/packages/addon-knobs/src/components/types/Select.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import PropTypes from 'prop-types';
import React from 'react';
@@ -56,12 +58,7 @@ SelectType.propTypes = {
onChange: PropTypes.func,
};
-SelectType.serialize = function(value) {
- return value;
-};
-
-SelectType.deserialize = function(value) {
- return value;
-};
+SelectType.serialize = value => value;
+SelectType.deserialize = value => value;
export default SelectType;
diff --git a/packages/addon-knobs/src/components/types/Text.js b/packages/addon-knobs/src/components/types/Text.js
index f1ebb3fb6e5a..1327a7b45398 100644
--- a/packages/addon-knobs/src/components/types/Text.js
+++ b/packages/addon-knobs/src/components/types/Text.js
@@ -37,12 +37,7 @@ TextType.propTypes = {
onChange: PropTypes.func,
};
-TextType.serialize = function(value) {
- return value;
-};
-
-TextType.deserialize = function(value) {
- return value;
-};
+TextType.serialize = value => value;
+TextType.deserialize = value => value;
export default TextType;
diff --git a/packages/addon-notes/package.json b/packages/addon-notes/package.json
index 7d4bbd691da0..2e2f16969e79 100644
--- a/packages/addon-notes/package.json
+++ b/packages/addon-notes/package.json
@@ -14,6 +14,7 @@
},
"devDependencies": {
"@kadira/storybook": "*",
+ "@kadira/storybook-addons": "*",
"babel-cli": "^6.5.0",
"babel-core": "^6.5.0",
"babel-loader": "^6.2.4",
diff --git a/packages/addon-options/manager.js b/packages/addon-options/manager.js
index 68d13f4d0bf1..67d49f75b482 100644
--- a/packages/addon-options/manager.js
+++ b/packages/addon-options/manager.js
@@ -1,2 +1,3 @@
const manager = require('./dist/manager');
+
manager.init();
diff --git a/packages/addon-options/preview.js b/packages/addon-options/preview.js
index 85f8d690af28..5511788a140a 100644
--- a/packages/addon-options/preview.js
+++ b/packages/addon-options/preview.js
@@ -1,3 +1,4 @@
const preview = require('./dist/preview');
+
exports.setOptions = preview.setOptions;
preview.init();
diff --git a/packages/addon-options/src/manager/index.js b/packages/addon-options/src/manager/index.js
index 6a56184c6ca2..ece4b5c746c8 100644
--- a/packages/addon-options/src/manager/index.js
+++ b/packages/addon-options/src/manager/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
import addons from '@kadira/storybook-addons';
import { ADDON_ID, EVENT_ID } from '../shared';
diff --git a/packages/addons/src/index.js b/packages/addons/src/index.js
index e141acb35c33..881010f417ad 100644
--- a/packages/addons/src/index.js
+++ b/packages/addons/src/index.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
export class AddonStore {
constructor() {
this._loaders = {};
diff --git a/packages/channel-postmessage/package.json b/packages/channel-postmessage/package.json
index b0928ea61d11..bae01179cab4 100644
--- a/packages/channel-postmessage/package.json
+++ b/packages/channel-postmessage/package.json
@@ -14,6 +14,7 @@
},
"dependencies": {
"@kadira/storybook-channel": "*",
+ "global": "^4.3.1",
"json-stringify-safe": "^5.0.1"
}
}
diff --git a/packages/channel-postmessage/src/index.js b/packages/channel-postmessage/src/index.js
index d3a73b82db33..4dfa5a897780 100644
--- a/packages/channel-postmessage/src/index.js
+++ b/packages/channel-postmessage/src/index.js
@@ -1,13 +1,11 @@
+/* eslint no-underscore-dangle: 0 */
+
+import { window, document } from 'global';
import Channel from '@kadira/storybook-channel';
import stringify from 'json-stringify-safe';
export const KEY = 'storybook-channel';
-export default function createChannel({ page }) {
- const transport = new PostmsgTransport({ page });
- return new Channel({ transport });
-}
-
export class PostmsgTransport {
constructor(config) {
this._config = config;
@@ -58,22 +56,26 @@ export class PostmsgTransport {
return window.parent;
}
- _handleEvent(e) {
- if (!e.data || typeof e.data !== 'string') {
+ _handleEvent(event) {
+ if (!event.data || typeof event.data !== 'string') {
return;
}
let data;
try {
- data = JSON.parse(e.data);
- } catch (e) {
- return null;
+ data = JSON.parse(event.data);
+ } catch (error) {
+ data = null;
}
if (!data || typeof data !== 'object') {
- return null;
+ return;
}
- const { key, event } = data;
+ const { key, event: eventData } = data;
if (key === KEY) {
- this._handler(event);
+ this._handler(eventData);
}
}
}
+export default function createChannel({ page }) {
+ const transport = new PostmsgTransport({ page });
+ return new Channel({ transport });
+}
diff --git a/packages/channel-websocket/package.json b/packages/channel-websocket/package.json
index 9c928c7a7418..94322011d535 100644
--- a/packages/channel-websocket/package.json
+++ b/packages/channel-websocket/package.json
@@ -14,6 +14,7 @@
"shelljs": "^0.7.3"
},
"dependencies": {
- "@kadira/storybook-channel": "^1.0.1"
+ "@kadira/storybook-channel": "^1.0.1",
+ "global": "^4.3.1"
}
}
diff --git a/packages/channel-websocket/src/index.js b/packages/channel-websocket/src/index.js
index 17c059d13b22..91b678341066 100644
--- a/packages/channel-websocket/src/index.js
+++ b/packages/channel-websocket/src/index.js
@@ -1,9 +1,7 @@
-import Channel from '@kadira/storybook-channel';
+/* eslint no-underscore-dangle: 0 */
-export default function createChannel({ url }) {
- const transport = new WebsocketTransport({ url });
- return new Channel({ transport });
-}
+import { WebSocket } from 'global';
+import Channel from '@kadira/storybook-channel';
export class WebsocketTransport {
constructor({ url }) {
@@ -59,3 +57,8 @@ export class WebsocketTransport {
};
}
}
+
+export default function createChannel({ url }) {
+ const transport = new WebsocketTransport({ url });
+ return new Channel({ transport });
+}
diff --git a/packages/channel/src/index.js b/packages/channel/src/index.js
index 6bc528542402..fd7a3c9ae1fb 100644
--- a/packages/channel/src/index.js
+++ b/packages/channel/src/index.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
export default class Channel {
constructor({ transport }) {
this._sender = this._randomId();
diff --git a/packages/channel/src/index.test.js b/packages/channel/src/index.test.js
index 8f70cee8a6ab..987edb2f6829 100644
--- a/packages/channel/src/index.test.js
+++ b/packages/channel/src/index.test.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import Channel from './';
describe('Channel', () => {
diff --git a/packages/decorator-centered/package.json b/packages/decorator-centered/package.json
index 10f7d4b70577..0a9b5f072fab 100644
--- a/packages/decorator-centered/package.json
+++ b/packages/decorator-centered/package.json
@@ -13,11 +13,17 @@
"babelify"
]
},
+ "peerDependencies": {
+ "react": "*",
+ "react-dom": "*"
+ },
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
- "babel-preset-stage-0": "^6.24.1"
+ "babel-preset-stage-0": "^6.24.1",
+ "react": "^15.5.4",
+ "react-dom": "^15.5.4"
}
}
diff --git a/packages/getstorybook/bin/generate.js b/packages/getstorybook/bin/generate.js
index 24697a093fa5..fecb082e14e9 100755
--- a/packages/getstorybook/bin/generate.js
+++ b/packages/getstorybook/bin/generate.js
@@ -10,10 +10,10 @@ const commandLog = require('../lib/helpers').commandLog;
const codeLog = require('../lib/helpers').codeLog;
const paddedLog = require('../lib/helpers').paddedLog;
const installDeps = require('../lib/helpers').installDeps;
-const logger = console;
-
const pkg = require('../package.json');
+const logger = console;
+
program
.version(pkg.version)
.option('-f --force', 'Forcely add storybook')
@@ -59,7 +59,7 @@ switch (projectType) {
break;
case types.REACT_SCRIPTS:
done = commandLog('Adding storybook support to your "Create React App" based project');
- require('../generators/REACT_SCRIPTS');
+ require('../generators/REACT_SCRIPTS'); // eslint-disable-line
done();
installDeps(npmOptions);
@@ -71,7 +71,7 @@ switch (projectType) {
case types.REACT:
done = commandLog('Adding storybook support to your "React" app');
- require('../generators/REACT');
+ require('../generators/REACT'); // eslint-disable-line
done();
installDeps(npmOptions);
@@ -83,7 +83,7 @@ switch (projectType) {
case types.REACT_NATIVE:
done = commandLog('Adding storybook support to your "React Native" app');
- require('../generators/REACT_NATIVE');
+ require('../generators/REACT_NATIVE'); // eslint-disable-line
done();
installDeps(npmOptions);
@@ -95,7 +95,7 @@ switch (projectType) {
case types.METEOR:
done = commandLog('Adding storybook support to your "Meteor" app');
- require('../generators/METEOR');
+ require('../generators/METEOR'); // eslint-disable-line
done();
installDeps(npmOptions);
@@ -107,7 +107,7 @@ switch (projectType) {
case types.WEBPACK_REACT:
done = commandLog('Adding storybook support to your "Webpack React" app');
- require('../generators/WEBPACK_REACT');
+ require('../generators/WEBPACK_REACT'); // eslint-disable-line
done();
installDeps(npmOptions);
@@ -119,7 +119,7 @@ switch (projectType) {
case types.REACT_PROJECT:
done = commandLog('Adding storybook support to your "React" library');
- require('../generators/REACT');
+ require('../generators/REACT'); // eslint-disable-line
done();
installDeps(npmOptions);
diff --git a/packages/getstorybook/generators/.eslintrc.js b/packages/getstorybook/generators/.eslintrc.js
new file mode 100644
index 000000000000..1daf50a7c3f2
--- /dev/null
+++ b/packages/getstorybook/generators/.eslintrc.js
@@ -0,0 +1,14 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
+module.exports = {
+ rules: {
+ 'import/no-extraneous-dependencies': ignore,
+ 'import/no-unresolved': ignore,
+ 'import/extensions': ignore,
+ 'import/extensions': ignore,
+ 'no-new-func': ignore,
+ 'global-require': ignore,
+ },
+};
diff --git a/packages/getstorybook/generators/METEOR/index.js b/packages/getstorybook/generators/METEOR/index.js
index f6f9a54254f4..8a9f0db99f63 100644
--- a/packages/getstorybook/generators/METEOR/index.js
+++ b/packages/getstorybook/generators/METEOR/index.js
@@ -2,7 +2,6 @@ const mergeDirs = require('merge-dirs').default;
const helpers = require('../../lib/helpers');
const path = require('path');
const fs = require('fs');
-const sh = require('shelljs');
const JSON5 = require('json5');
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
@@ -40,7 +39,7 @@ fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8');
// write the new package.json.
packageJson.devDependencies['@kadira/storybook'] = '^2.21.0';
-packageJson.scripts['storybook'] = 'start-storybook -p 6006';
+packageJson.scripts.storybook = 'start-storybook -p 6006';
packageJson.scripts['build-storybook'] = 'build-storybook';
// add react packages.
diff --git a/packages/getstorybook/generators/REACT/index.js b/packages/getstorybook/generators/REACT/index.js
index c20fac033bef..a15f20fe9fb8 100644
--- a/packages/getstorybook/generators/REACT/index.js
+++ b/packages/getstorybook/generators/REACT/index.js
@@ -11,7 +11,7 @@ packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@kadira/storybook'] = '^2.21.0';
packageJson.scripts = packageJson.scripts || {};
-packageJson.scripts['storybook'] = 'start-storybook -p 6006';
+packageJson.scripts.storybook = 'start-storybook -p 6006';
packageJson.scripts['build-storybook'] = 'build-storybook';
helpers.writePackageJson(packageJson);
diff --git a/packages/getstorybook/generators/REACT/template/stories/Welcome.js b/packages/getstorybook/generators/REACT/template/stories/Welcome.js
index 4e9ee8eb7317..069bf85d3c30 100644
--- a/packages/getstorybook/generators/REACT/template/stories/Welcome.js
+++ b/packages/getstorybook/generators/REACT/template/stories/Welcome.js
@@ -50,7 +50,9 @@ export default class Welcome extends React.Component {
{' '}
directory.
- A story is a single state of one or more UI components. You can have as many stories as you want.
+ A story is a single state of one or more UI components.
+ {' '}
+ You can have as many stories as you want.
(Basically a story is like a visual test case.)
diff --git a/packages/getstorybook/generators/REACT_NATIVE/index.js b/packages/getstorybook/generators/REACT_NATIVE/index.js
index 00e9c7cfdae0..73e55ad64049 100644
--- a/packages/getstorybook/generators/REACT_NATIVE/index.js
+++ b/packages/getstorybook/generators/REACT_NATIVE/index.js
@@ -22,6 +22,6 @@ packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@kadira/react-native-storybook'] = '^2.0.0';
packageJson.scripts = packageJson.scripts || {};
-packageJson.scripts['storybook'] = 'storybook start -p 7007';
+packageJson.scripts.storybook = 'storybook start -p 7007';
helpers.writePackageJson(packageJson);
diff --git a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js
index 2305b830c30f..a0677d8def7d 100644
--- a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js
+++ b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js
@@ -1,3 +1,5 @@
+/* eslint max-len: 0 */
+
import React from 'react';
import { View, Text } from 'react-native';
diff --git a/packages/getstorybook/generators/REACT_SCRIPTS/index.js b/packages/getstorybook/generators/REACT_SCRIPTS/index.js
index ad50743aff9c..59e662ee05a1 100644
--- a/packages/getstorybook/generators/REACT_SCRIPTS/index.js
+++ b/packages/getstorybook/generators/REACT_SCRIPTS/index.js
@@ -9,12 +9,12 @@ const packageJson = helpers.getPackageJson();
// TODO: Get the latest version of storybook here.
packageJson.devDependencies['@kadira/storybook'] = '^2.21.0';
-packageJson.scripts['storybook'] = 'start-storybook -p 9009';
+packageJson.scripts.storybook = 'start-storybook -p 9009';
packageJson.scripts['build-storybook'] = 'build-storybook';
if (fs.existsSync(path.resolve('./public'))) {
// has a public folder and add support to it.
- packageJson.scripts['storybook'] += ' -s public';
+ packageJson.scripts.storybook += ' -s public';
packageJson.scripts['build-storybook'] += ' -s public';
}
diff --git a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
index 2b20b2a1b4a4..7a0673ed0731 100644
--- a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
+++ b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
@@ -68,7 +68,9 @@ export default class Welcome extends React.Component {
{' '}
directory.
- A story is a single state of one or more UI components. You can have as many stories as you want.
+ A story is a single state of one or more UI components.
+ {' '}
+ You can have as many stories as you want.
(Basically a story is like a visual test case.)
diff --git a/packages/getstorybook/generators/WEBPACK_REACT/index.js b/packages/getstorybook/generators/WEBPACK_REACT/index.js
index c20fac033bef..a15f20fe9fb8 100644
--- a/packages/getstorybook/generators/WEBPACK_REACT/index.js
+++ b/packages/getstorybook/generators/WEBPACK_REACT/index.js
@@ -11,7 +11,7 @@ packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@kadira/storybook'] = '^2.21.0';
packageJson.scripts = packageJson.scripts || {};
-packageJson.scripts['storybook'] = 'start-storybook -p 6006';
+packageJson.scripts.storybook = 'start-storybook -p 6006';
packageJson.scripts['build-storybook'] = 'build-storybook';
helpers.writePackageJson(packageJson);
diff --git a/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js b/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js
index acd48b6409bc..1a80ed915df7 100644
--- a/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js
+++ b/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js
@@ -54,7 +54,9 @@ export default class Welcome extends React.Component {
{' '}
directory.
- A story is a single state of one or more UI components. You can have as many stories as you want.
+ A story is a single state of one or more UI components.
+ {' '}
+ You can have as many stories as you want.
(Basically a story is like a visual test case.)
diff --git a/packages/getstorybook/lib/helpers.js b/packages/getstorybook/lib/helpers.js
index 38a4f40c8f02..8c3bc969e60d 100644
--- a/packages/getstorybook/lib/helpers.js
+++ b/packages/getstorybook/lib/helpers.js
@@ -1,9 +1,10 @@
const path = require('path');
const fs = require('fs');
const chalk = require('chalk');
-const logger = console;
const spawnSync = require('spawn-sync');
+const logger = console;
+
exports.getPackageJson = function getPackageJson() {
const packageJsonPath = path.resolve('package.json');
if (!fs.existsSync(packageJsonPath)) {
@@ -23,7 +24,7 @@ exports.writePackageJson = function writePackageJson(packageJson) {
exports.commandLog = function commandLog(message) {
process.stdout.write(chalk.cyan(' • ') + message);
- const done = function(errorMessage, errorInfo) {
+ const done = (errorMessage, errorInfo) => {
if (errorMessage) {
process.stdout.write(`. ${chalk.red('✖')}\n`);
logger.error(`\n ${chalk.red(errorMessage)}`);
@@ -41,7 +42,7 @@ exports.commandLog = function commandLog(message) {
return done;
};
-exports.paddedLog = function(message) {
+exports.paddedLog = function paddedLog(message) {
const newMessage = message.split('\n').map(line => ` ${line}`).join('\n');
logger.log(newMessage);
@@ -49,7 +50,7 @@ exports.paddedLog = function(message) {
exports.getChars = function getChars(char, amount) {
let line = '';
- for (let lc = 0; lc < amount; lc++) {
+ for (let lc = 0; lc < amount; lc++) { // eslint-disable-line
line += char;
}
@@ -75,10 +76,10 @@ exports.codeLog = function codeLog(codeLines, leftPadAmount) {
logger.log(finalResult);
};
-exports.installDeps = function(options) {
+exports.installDeps = function installDeps(options) {
let done = exports.commandLog('Preparing to install dependencies');
done();
- console.log();
+ logger.log();
let result;
if (options.useYarn) {
@@ -87,7 +88,7 @@ exports.installDeps = function(options) {
result = spawnSync('npm', ['install'], { stdio: 'inherit' });
}
- console.log();
+ logger.log();
done = exports.commandLog('Installing dependencies');
if (result.status !== 0) {
done('An error occurred while installing dependencies.');
diff --git a/packages/getstorybook/package.json b/packages/getstorybook/package.json
index 6db47b5f7279..08fb648774f5 100644
--- a/packages/getstorybook/package.json
+++ b/packages/getstorybook/package.json
@@ -27,5 +27,11 @@
"shelljs": "^0.7.7",
"spawn-sync": "^1.0.15",
"update-notifier": "^2.1.0"
+ },
+ "devDependencies": {
+ "@kadira/storybook": "^2.35.3",
+ "prop-types": "^15.5.8",
+ "react": "^15.5.4",
+ "react-dom": "^15.5.4"
}
}
diff --git a/packages/react-native-storybook/package.json b/packages/react-native-storybook/package.json
index de9c4225503e..1bb608134900 100644
--- a/packages/react-native-storybook/package.json
+++ b/packages/react-native-storybook/package.json
@@ -61,6 +61,7 @@
"events": "^1.1.1",
"express": "^4.15.2",
"file-loader": "^0.11.1",
+ "global": "^4.3.1",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"postcss-loader": "^1.3.3",
@@ -70,6 +71,7 @@
"uuid": "^3.0.1",
"webpack": "^2.4.1",
"webpack-dev-middleware": "^1.10.1",
- "webpack-hot-middleware": "^2.18.0"
+ "webpack-hot-middleware": "^2.18.0",
+ "ws": "^2.2.3"
}
}
diff --git a/packages/react-native-storybook/src/manager/index.js b/packages/react-native-storybook/src/manager/index.js
index 84b2619d9275..dfc4333cc53d 100644
--- a/packages/react-native-storybook/src/manager/index.js
+++ b/packages/react-native-storybook/src/manager/index.js
@@ -1,3 +1,4 @@
+import { document, location, window } from 'global';
import renderStorybookUI from '@kadira/storybook-ui';
import Provider from './provider';
diff --git a/packages/react-native-storybook/src/preview/index.js b/packages/react-native-storybook/src/preview/index.js
index a3c6b029ee11..9483b980e85f 100644
--- a/packages/react-native-storybook/src/preview/index.js
+++ b/packages/react-native-storybook/src/preview/index.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import React from 'react';
import addons from '@kadira/storybook-addons';
import createChannel from '@kadira/storybook-channel-websocket';
@@ -66,10 +68,11 @@ export default class Preview {
channel = createChannel({ url });
addons.setChannel(channel);
}
- channel.on('getStories', d => this._sendSetStories());
+ channel.on('getStories', () => this._sendSetStories());
channel.on('setCurrentStory', d => this._selectStory(d));
this._sendSetStories();
this._sendGetCurrentStory();
+
// finally return the preview component
return ;
};
diff --git a/packages/react-native-storybook/src/preview/story_kind.js b/packages/react-native-storybook/src/preview/story_kind.js
index 1c91a6d85b1a..ddf0004cda18 100644
--- a/packages/react-native-storybook/src/preview/story_kind.js
+++ b/packages/react-native-storybook/src/preview/story_kind.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
export default class StoryKindApi {
constructor(stories, addons, decorators, kind) {
this.kind = kind;
diff --git a/packages/react-native-storybook/src/preview/story_store.js b/packages/react-native-storybook/src/preview/story_store.js
index 65a8d40df25a..86021172b09f 100644
--- a/packages/react-native-storybook/src/preview/story_store.js
+++ b/packages/react-native-storybook/src/preview/story_store.js
@@ -1,4 +1,5 @@
-let cnt = 0;
+/* eslint no-underscore-dangle: 0 */
+let count = 0;
export default class StoryStore {
constructor() {
@@ -6,17 +7,18 @@ export default class StoryStore {
}
addStory(kind, name, fn) {
+ count += 1;
if (!this._data[kind]) {
this._data[kind] = {
kind,
- index: cnt++,
+ index: count,
stories: {},
};
}
this._data[kind].stories[name] = {
name,
- index: cnt++,
+ index: count,
fn,
};
}
diff --git a/packages/react-native-storybook/src/server/config.js b/packages/react-native-storybook/src/server/config.js
index d715cff14b43..d524394816c1 100644
--- a/packages/react-native-storybook/src/server/config.js
+++ b/packages/react-native-storybook/src/server/config.js
@@ -101,7 +101,7 @@ export default function(configType, baseConfig, projectDir, configDir) {
customConfigPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
}
- const customConfig = require(customConfigPath);
+ const customConfig = require(customConfigPath); // eslint-disable-line
if (typeof customConfig === 'function') {
logger.info('=> Loading custom webpack config (full-control mode).');
diff --git a/packages/react-native-storybook/src/server/config/webpack.config.js b/packages/react-native-storybook/src/server/config/webpack.config.js
index 5f069df7932a..ddd38a20d004 100644
--- a/packages/react-native-storybook/src/server/config/webpack.config.js
+++ b/packages/react-native-storybook/src/server/config/webpack.config.js
@@ -23,7 +23,7 @@ const config = {
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
- query: require('./babel.js'),
+ query: require('./babel.js'), // eslint-disable-line
include: includePaths,
exclude: excludePaths,
},
diff --git a/packages/react-native-storybook/src/server/config/webpack.config.prod.js b/packages/react-native-storybook/src/server/config/webpack.config.prod.js
index 80a9c34d8719..f1601b63bfa6 100644
--- a/packages/react-native-storybook/src/server/config/webpack.config.prod.js
+++ b/packages/react-native-storybook/src/server/config/webpack.config.prod.js
@@ -43,7 +43,7 @@ const config = {
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
- query: require('./babel.prod.js'),
+ query: require('./babel.prod.js'), // eslint-disable-line
include: includePaths,
exclude: excludePaths,
},
diff --git a/packages/react-native-storybook/src/server/index.js b/packages/react-native-storybook/src/server/index.js
index 862347ec7197..36522b31a859 100755
--- a/packages/react-native-storybook/src/server/index.js
+++ b/packages/react-native-storybook/src/server/index.js
@@ -22,14 +22,14 @@ export default class Server {
: {};
if (params.pairedId) {
- socket.pairedId = params.pairedId;
+ socket.pairedId = params.pairedId; // eslint-disable-line
}
}
socket.on('message', data => {
this.wsServer.clients.forEach(c => {
if (!this.options.manualId || (socket.pairedId && socket.pairedId === c.pairedId)) {
- return c.send(data);
+ c.send(data);
}
});
});
diff --git a/packages/react-native-storybook/src/server/middleware.js b/packages/react-native-storybook/src/server/middleware.js
index 7b9ad36028d3..7517cd85d496 100644
--- a/packages/react-native-storybook/src/server/middleware.js
+++ b/packages/react-native-storybook/src/server/middleware.js
@@ -12,13 +12,13 @@ import getIndexHtml from './index.html';
function getMiddleware(configDir) {
const middlewarePath = path.resolve(configDir, 'middleware.js');
if (fs.existsSync(middlewarePath)) {
- let middlewareModule = require(middlewarePath);
- if (middlewareModule.__esModule) {
+ let middlewareModule = require(middlewarePath); // eslint-disable-line
+ if (middlewareModule.__esModule) { // eslint-disable-line
middlewareModule = middlewareModule.default;
}
return middlewareModule;
}
- return function() {};
+ return () => {};
}
export default function({ projectDir, configDir, ...options }) {
diff --git a/packages/react-storybook/demo/src/stories/Welcome.js b/packages/react-storybook/demo/src/stories/Welcome.js
index 5886c30148ad..033352a3f9c0 100644
--- a/packages/react-storybook/demo/src/stories/Welcome.js
+++ b/packages/react-storybook/demo/src/stories/Welcome.js
@@ -68,7 +68,9 @@ export default class Welcome extends React.Component {
{' '}
directory.
- A story is a single state of one or more UI components. You can have as many stories as you want.
+ A story is a single state of one or more UI components.
+ {' '}
+ You can have as many stories as you want.
(Basically a story is like a visual test case.)
diff --git a/packages/react-storybook/package.json b/packages/react-storybook/package.json
index 152c36b2d022..a559687db706 100644
--- a/packages/react-storybook/package.json
+++ b/packages/react-storybook/package.json
@@ -39,6 +39,7 @@
"express": "^4.15.2",
"file-loader": "^0.11.1",
"find-cache-dir": "^0.1.1",
+ "global": "^4.3.1",
"json-loader": "^0.5.4",
"json-stringify-safe": "^5.0.1",
"json5": "^0.5.1",
diff --git a/packages/react-storybook/scripts/mocha_runner.js b/packages/react-storybook/scripts/mocha_runner.js
deleted file mode 100755
index 4b6b7654db95..000000000000
--- a/packages/react-storybook/scripts/mocha_runner.js
+++ /dev/null
@@ -1,25 +0,0 @@
-require('babel-core/register');
-require('babel-polyfill');
-
-// Add jsdom support, which is required for enzyme.
-const jsdom = require('jsdom').jsdom;
-
-const exposedProperties = ['window', 'navigator', 'document'];
-
-global.document = jsdom('');
-global.window = document.defaultView;
-Object.keys(document.defaultView).forEach(property => {
- if (typeof global[property] === 'undefined') {
- exposedProperties.push(property);
- global[property] = document.defaultView[property];
- }
-});
-
-global.navigator = {
- userAgent: 'node.js',
-};
-
-process.on('unhandledRejection', error => {
- console.error('Unhandled Promise Rejection:');
- console.error((error && error.stack) || error);
-});
diff --git a/packages/react-storybook/src/client/preview/client_api.js b/packages/react-storybook/src/client/preview/client_api.js
index ecbabc571fae..ae5047fe8fe6 100644
--- a/packages/react-storybook/src/client/preview/client_api.js
+++ b/packages/react-storybook/src/client/preview/client_api.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
export default class ClientApi {
constructor({ channel, storyStore }) {
// channel can be null when running in node
diff --git a/packages/react-storybook/src/client/preview/client_api.test.js b/packages/react-storybook/src/client/preview/client_api.test.js
index 56f1c7783d37..acb45b425c1f 100644
--- a/packages/react-storybook/src/client/preview/client_api.test.js
+++ b/packages/react-storybook/src/client/preview/client_api.test.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+
import ClientAPI from './client_api';
class StoryStore {
diff --git a/packages/react-storybook/src/client/preview/config_api.js b/packages/react-storybook/src/client/preview/config_api.js
index ccc58b7b4545..cc0bbea3af3e 100644
--- a/packages/react-storybook/src/client/preview/config_api.js
+++ b/packages/react-storybook/src/client/preview/config_api.js
@@ -1,7 +1,7 @@
-/* globals location */
+/* eslint no-underscore-dangle: 0 */
+import { location } from 'global';
import { setInitialStory, setError, clearError } from './actions';
-
import { clearDecorators } from './';
export default class ConfigApi {
diff --git a/packages/react-storybook/src/client/preview/story_store.js b/packages/react-storybook/src/client/preview/story_store.js
index 0cdb82fb0122..b7051c1ea3be 100644
--- a/packages/react-storybook/src/client/preview/story_store.js
+++ b/packages/react-storybook/src/client/preview/story_store.js
@@ -1,8 +1,10 @@
-let cnt = 0;
+/* eslint no-underscore-dangle: 0 */
+
+let count = 0;
function getId() {
- cnt += 1;
- return cnt;
+ count += 1;
+ return count;
}
export default class StoryStore {
diff --git a/packages/react-storybook/src/server/config.js b/packages/react-storybook/src/server/config.js
index 362abe070876..cb61b450ef41 100644
--- a/packages/react-storybook/src/server/config.js
+++ b/packages/react-storybook/src/server/config.js
@@ -42,7 +42,7 @@ export default function(configType, baseConfig, configDir) {
customConfigPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
}
- const customConfig = require(customConfigPath);
+ const customConfig = require(customConfigPath); // eslint-disable-line
if (typeof customConfig === 'function') {
logger.info('=> Loading custom webpack config (full-control mode).');
diff --git a/packages/react-storybook/src/server/config/WatchMissingNodeModulesPlugin.js b/packages/react-storybook/src/server/config/WatchMissingNodeModulesPlugin.js
index 1d6fd4802aa2..b6a74311c324 100644
--- a/packages/react-storybook/src/server/config/WatchMissingNodeModulesPlugin.js
+++ b/packages/react-storybook/src/server/config/WatchMissingNodeModulesPlugin.js
@@ -16,7 +16,7 @@ function WatchMissingNodeModulesPlugin(nodeModulesPath) {
this.nodeModulesPath = nodeModulesPath;
}
-WatchMissingNodeModulesPlugin.prototype.apply = function(compiler) {
+WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
compiler.plugin('emit', (compilation, callback) => {
const missingDeps = compilation.missingDependencies;
const nodeModulesPath = this.nodeModulesPath;
diff --git a/packages/react-storybook/src/server/config/defaults/webpack.config.js b/packages/react-storybook/src/server/config/defaults/webpack.config.js
index 69ec7d68f6ab..75ab902f919c 100644
--- a/packages/react-storybook/src/server/config/defaults/webpack.config.js
+++ b/packages/react-storybook/src/server/config/defaults/webpack.config.js
@@ -1,5 +1,6 @@
+import webpack from 'webpack';
import autoprefixer from 'autoprefixer';
-import { includePaths } from '../utils';
+import { includePaths, excludePaths } from '../utils';
// Add a default custom config which is similar to what React Create App does.
module.exports = storybookBaseConfig => {
diff --git a/packages/react-storybook/src/server/index.js b/packages/react-storybook/src/server/index.js
index 7a347c540884..3fa2a36f6dac 100755
--- a/packages/react-storybook/src/server/index.js
+++ b/packages/react-storybook/src/server/index.js
@@ -1,6 +1,7 @@
#!/usr/bin/env node
import express from 'express';
+import https from 'https';
import favicon from 'serve-favicon';
import program from 'commander';
import path from 'path';
diff --git a/packages/react-storybook/src/server/track_usage.js b/packages/react-storybook/src/server/track_usage.js
index 835d62e152c4..0f00e42065da 100644
--- a/packages/react-storybook/src/server/track_usage.js
+++ b/packages/react-storybook/src/server/track_usage.js
@@ -58,7 +58,7 @@ export function track() {
store.set('userId', userId);
}
- const pkg = require('../../package.json');
+ const pkg = require('../../package.json'); // eslint-disable-line
// We don't wanna worry about the success or failure of this.
request.post(
diff --git a/packages/react-storybook/src/server/utils.js b/packages/react-storybook/src/server/utils.js
index 19811869d4fd..3961915ba6f7 100644
--- a/packages/react-storybook/src/server/utils.js
+++ b/packages/react-storybook/src/server/utils.js
@@ -20,7 +20,7 @@ export function getEnvConfig(program, configEnv) {
const envVarName = configEnv[fieldName];
const envVarValue = process.env[envVarName];
if (envVarValue) {
- program[fieldName] = envVarValue;
+ program[fieldName] = envVarValue; // eslint-disable-line
}
});
}
@@ -28,11 +28,11 @@ export function getEnvConfig(program, configEnv) {
export function getMiddleware(configDir) {
const middlewarePath = path.resolve(configDir, 'middleware.js');
if (fs.existsSync(middlewarePath)) {
- let middlewareModule = require(middlewarePath);
- if (middlewareModule.__esModule) {
+ let middlewareModule = require(middlewarePath); // eslint-disable-line
+ if (middlewareModule.__esModule) { // eslint-disable-line
middlewareModule = middlewareModule.default;
}
return middlewareModule;
}
- return function() {};
+ return () => {};
}
diff --git a/packages/storybook-ui/example/package.json b/packages/storybook-ui/example/package.json
index bd44ab791365..9756c848a6ef 100644
--- a/packages/storybook-ui/example/package.json
+++ b/packages/storybook-ui/example/package.json
@@ -6,20 +6,20 @@
"author": "",
"license": "ISC",
"devDependencies": {
- "babel-core": "^6.0.20",
- "babel-eslint": "^4.1.3",
- "babel-loader": "^6.0.1",
- "babel-preset-es2015": "^6.0.15",
- "babel-preset-react": "^6.0.15",
- "babel-preset-stage-0": "^6.0.15",
- "eslint": "^1.10.3",
- "eslint-plugin-react": "^3.6.2",
- "webpack": "^1.12.2",
- "webpack-dev-server": "^1.12.1"
+ "babel-core": "^6.24.1",
+ "babel-eslint": "^7.2.2",
+ "babel-loader": "^6.4.1",
+ "babel-preset-es2015": "^6.24.1",
+ "babel-preset-react": "^6.24.1",
+ "babel-preset-stage-0": "^6.24.1",
+ "eslint": "^3.19.0",
+ "eslint-plugin-react": "^6.10.3",
+ "webpack": "^2.4.1",
+ "webpack-dev-server": "^2.4.2"
},
"dependencies": {
- "keycode": "^2.1.2",
- "react": "^15.0.1",
- "react-dom": "^15.0.1"
+ "keycode": "^2.1.8",
+ "react": "^15.5.4",
+ "react-dom": "^15.5.4"
}
}
diff --git a/packages/storybook-ui/example/server.js b/packages/storybook-ui/example/server.js
index 8867ab57f46d..834f6655f1f5 100644
--- a/packages/storybook-ui/example/server.js
+++ b/packages/storybook-ui/example/server.js
@@ -6,9 +6,8 @@ new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: false,
historyApiFallback: true,
-}).listen(9999, 'localhost', (err, result) => {
- if (err) {
- return console.log(err);
- }
- console.log('Listening at http://localhost:9999/');
-});
+}).listen(
+ 9999,
+ 'localhost',
+ err => (err ? console.log(err) : console.log('Listening at http://localhost:9999/')),
+);
diff --git a/packages/storybook-ui/package.json b/packages/storybook-ui/package.json
index d7ac3ed36b5c..56df195e4ab6 100644
--- a/packages/storybook-ui/package.json
+++ b/packages/storybook-ui/package.json
@@ -22,6 +22,7 @@
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
+ "enzyme": "^2.8.2",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
@@ -35,6 +36,7 @@
"deep-equal": "^1.0.1",
"events": "^1.1.1",
"fuzzysearch": "^1.0.3",
+ "global": "^4.3.1",
"json-stringify-safe": "^5.0.1",
"keycode": "^2.1.8",
"lodash.pick": "^4.4.0",
diff --git a/packages/storybook-ui/src/index.js b/packages/storybook-ui/src/index.js
index d340875523d6..7ce871295f5f 100644
--- a/packages/storybook-ui/src/index.js
+++ b/packages/storybook-ui/src/index.js
@@ -1,18 +1,18 @@
import { createApp } from 'mantra-core';
import Podda from 'podda';
-import buildContext from './context.js';
+import buildContext from './context';
import shortcutsModule from './modules/shortcuts';
import apiModule from './modules/api';
import uiModule from './modules/ui';
import { setContext, setActions } from './compose';
export class Provider {
- renderPreview(selectedKind, selectedStory) {
+ renderPreview() {
throw new Error('Provider.renderPreview() is not implemented!');
}
- handleAPI(api) {
+ handleAPI() {
throw new Error('Provider.handleAPI() is not implemented!');
}
}
@@ -38,7 +38,7 @@ export default function(domNode, provider) {
app.loadModule(uiModule);
setContext(context);
- setActions(app._bindContext(app.actions));
+ setActions(app._bindContext(app.actions)); // eslint-disable-line
app.init();
}
diff --git a/packages/storybook-ui/src/modules/api/actions/api.test.js b/packages/storybook-ui/src/modules/api/actions/api.test.js
index 04a04f87d769..3536069941d3 100755
--- a/packages/storybook-ui/src/modules/api/actions/api.test.js
+++ b/packages/storybook-ui/src/modules/api/actions/api.test.js
@@ -124,7 +124,7 @@ describe('manager.api.actions.api', () => {
describe('has enough stories', () => {
it('should select the next story', () => {
const clientStore = new MockClientStore();
- actions.jumpToStory({ clientStore }, 1);
+ actions.jumpToStory({ clientStore }, 1); // eslint-disable-line
const state = {
stories,
@@ -140,7 +140,7 @@ describe('manager.api.actions.api', () => {
it('should select the prev story', () => {
const clientStore = new MockClientStore();
- actions.jumpToStory({ clientStore }, -1);
+ actions.jumpToStory({ clientStore }, -1); // eslint-disable-line
const state = {
stories,
@@ -158,7 +158,7 @@ describe('manager.api.actions.api', () => {
describe('has not enough stories', () => {
it('should select the current story', () => {
const clientStore = new MockClientStore();
- actions.jumpToStory({ clientStore }, 1);
+ actions.jumpToStory({ clientStore }, 1); // eslint-disable-line
const state = {
stories,
diff --git a/packages/storybook-ui/src/modules/api/configs/init_api.test.js b/packages/storybook-ui/src/modules/api/configs/init_api.test.js
index 43586b3d2fbc..0d695f10f748 100644
--- a/packages/storybook-ui/src/modules/api/configs/init_api.test.js
+++ b/packages/storybook-ui/src/modules/api/configs/init_api.test.js
@@ -74,14 +74,14 @@ describe('manager.api.config.initApi', () => {
const provider = {
handleAPI(api) {
- let cnt = 0;
+ let count = 0;
api.onStory(() => {
- cnt++;
+ count += 1;
});
api.onStory(() => {
- cnt++;
- expect(cnt).toBe(2);
+ count += 1;
+ expect(count).toBe(2);
done();
});
},
@@ -107,15 +107,15 @@ describe('manager.api.config.initApi', () => {
const provider = {
handleAPI(api) {
- let cnt = 0;
+ let count = 0;
const stop = api.onStory(() => {
- cnt++;
+ count += 1;
});
stop();
api.onStory(() => {
- cnt++;
- expect(cnt).toBe(1);
+ count += 1;
+ expect(count).toBe(1);
done();
});
},
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/dimensions.js b/packages/storybook-ui/src/modules/ui/components/layout/dimensions.js
index 631aeb6f191d..61c9a5d58de3 100644
--- a/packages/storybook-ui/src/modules/ui/components/layout/dimensions.js
+++ b/packages/storybook-ui/src/modules/ui/components/layout/dimensions.js
@@ -33,7 +33,7 @@ class Dimensions extends React.Component {
isVisible: false,
};
- this._hideTimeout = null;
+ this.hideTimeout = null;
}
componentWillReceiveProps({ width, height }) {
@@ -43,13 +43,13 @@ class Dimensions extends React.Component {
}
componentWillUnmount() {
- clearTimeout(this._hideTimeout);
+ clearTimeout(this.hideTimeout);
}
onChange(width, height) {
this.setState({ isVisible: true });
- this._hideTimeout = setTimeout(() => {
+ this.hideTimeout = setTimeout(() => {
// Ensure the dimensions aren't still changing
if (width === this.props.width && height === this.props.height) {
this.setState({ isVisible: false });
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/index.js b/packages/storybook-ui/src/modules/ui/components/layout/index.js
index 0271e34704c7..6fc1060cd5dd 100755
--- a/packages/storybook-ui/src/modules/ui/components/layout/index.js
+++ b/packages/storybook-ui/src/modules/ui/components/layout/index.js
@@ -1,10 +1,11 @@
import PropTypes from 'prop-types';
import React from 'react';
+import { window, document, localStorage } from 'global';
+import SplitPane from '@kadira/react-split-pane';
import VSplit from './vsplit';
import HSplit from './hsplit';
import Dimensions from './dimensions';
-import SplitPane from '@kadira/react-split-pane';
const rootStyle = {
height: '100vh',
@@ -60,11 +61,11 @@ const fullScreenPreviewStyle = {
const vsplit = ;
const hsplit = ;
-const onDragStart = function() {
+const onDragStart = () => {
document.body.classList.add('dragging');
};
-const onDragEnd = function() {
+const onDragEnd = () => {
document.body.classList.remove('dragging');
};
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/index.test.js b/packages/storybook-ui/src/modules/ui/components/layout/index.test.js
index a4c1e93331c5..49e486a468a8 100755
--- a/packages/storybook-ui/src/modules/ui/components/layout/index.test.js
+++ b/packages/storybook-ui/src/modules/ui/components/layout/index.test.js
@@ -1,6 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
-import Layout from './index.js';
+import Layout from './index';
describe('manager.ui.components.layout.index', () => {
describe('with default options', () => {
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js b/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js
index 506044fb1986..9d65d36d6c5f 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js
@@ -1,6 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
-import Header from './header.js';
+import Header from './header';
describe('manager.ui.components.left_panel.header', () => {
test('should fire openShortcutsHelp when clicked on shortcut button', () => {
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/index.js b/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
index 974a5dc69263..924bf7571843 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
@@ -1,9 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
+import pick from 'lodash.pick';
import Header from './header';
import Stories from './stories';
import TextFilter from './text_filter';
-import pick from 'lodash.pick';
const scrollStyle = {
height: 'calc(100vh - 105px)',
diff --git a/packages/storybook-ui/src/modules/ui/components/search_box.js b/packages/storybook-ui/src/modules/ui/components/search_box.js
index 28c58f073175..e95922439257 100644
--- a/packages/storybook-ui/src/modules/ui/components/search_box.js
+++ b/packages/storybook-ui/src/modules/ui/components/search_box.js
@@ -14,21 +14,23 @@ const searchBoxStyle = {
...baseFonts,
};
-const formatStories = function(stories) {
+const formatStories = stories => {
const formattedStories = [];
let i = 0;
stories.forEach(val => {
+ i += 1;
formattedStories.push({
type: 'kind',
value: val.kind,
- id: i++,
+ id: i,
});
val.stories.forEach(story => {
+ i += 1;
formattedStories.push({
type: 'story',
value: story,
- id: i++,
+ id: i,
kind: val.kind,
});
});
@@ -37,8 +39,8 @@ const formatStories = function(stories) {
return formattedStories;
};
-const suggestionTemplate = function(props, state, styles) {
- return state.results.map((val, i) => {
+const suggestionTemplate = (props, state, styles) =>
+ state.results.map((val, i) => {
const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
return (
@@ -49,7 +51,6 @@ const suggestionTemplate = function(props, state, styles) {
);
});
-};
export default class SearchBox extends React.Component {
constructor(props) {
diff --git a/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.js b/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.js
index b5aa1deac660..73bdc51ab729 100755
--- a/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.js
+++ b/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.js
@@ -1,3 +1,4 @@
+import { window } from 'global';
import keyEvents from '../../../libs/key_events';
export default function(actions) {
diff --git a/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.test.js b/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.test.js
index 168a1543c77f..74fb207ae8c8 100755
--- a/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.test.js
+++ b/packages/storybook-ui/src/modules/ui/configs/handle_keyevents.test.js
@@ -1,5 +1,6 @@
-import handleKeyEvents from './handle_keyevents';
+import { window } from 'global';
import keycode from 'keycode';
+import handleKeyEvents from './handle_keyevents';
describe('manager.ui.config.handle_keyevents', () => {
test('should call the correct action', () => {
diff --git a/packages/storybook-ui/src/modules/ui/configs/handle_routing.js b/packages/storybook-ui/src/modules/ui/configs/handle_routing.js
index 9504af9cdf9f..b283a9a7e654 100755
--- a/packages/storybook-ui/src/modules/ui/configs/handle_routing.js
+++ b/packages/storybook-ui/src/modules/ui/configs/handle_routing.js
@@ -1,4 +1,6 @@
+import { window } from 'global';
import qs from 'qs';
+
export const config = {
insidePopState: false,
};
diff --git a/packages/storybook-ui/src/modules/ui/configs/handle_routing.test.js b/packages/storybook-ui/src/modules/ui/configs/handle_routing.test.js
index e8aa611776cc..f8493a632b7a 100755
--- a/packages/storybook-ui/src/modules/ui/configs/handle_routing.test.js
+++ b/packages/storybook-ui/src/modules/ui/configs/handle_routing.test.js
@@ -1,3 +1,4 @@
+import { window } from 'global';
import { changeUrl, handleInitialUrl, config } from './handle_routing';
describe('manager.ui.config.handle_routing', () => {
@@ -42,7 +43,7 @@ describe('manager.ui.config.handle_routing', () => {
customText: 'test',
};
const originalPushState = window.history.pushState;
- window.history.pushState = function(s, t, u) {
+ window.history.pushState = (s, t, u) => {
expect(s).toEqual(pushState);
expect(u).toBe(pushState.url);
done();
diff --git a/packages/storybook-ui/src/modules/ui/containers/shortcuts_help.js b/packages/storybook-ui/src/modules/ui/containers/shortcuts_help.js
index 10495eb79887..09c43e40619b 100755
--- a/packages/storybook-ui/src/modules/ui/containers/shortcuts_help.js
+++ b/packages/storybook-ui/src/modules/ui/containers/shortcuts_help.js
@@ -1,4 +1,5 @@
-import ShortcutsHelp from '../components/shortcuts_help';
+import { window } from 'global';
+import { ShortcutsHelp } from '../components/shortcuts_help';
import genPoddaLoader from '../libs/gen_podda_loader';
import compose from '../../../compose';
diff --git a/packages/storybook-ui/src/modules/ui/libs/gen_podda_loader.test.js b/packages/storybook-ui/src/modules/ui/libs/gen_podda_loader.test.js
index 3d35acc2affa..c715c69265a2 100644
--- a/packages/storybook-ui/src/modules/ui/libs/gen_podda_loader.test.js
+++ b/packages/storybook-ui/src/modules/ui/libs/gen_podda_loader.test.js
@@ -1,5 +1,5 @@
-import genPoddaLoader from './gen_podda_loader';
import Podda from 'podda';
+import genPoddaLoader from './gen_podda_loader';
describe('manager.ui.libs.gen_podda_loader', () => {
describe('mapper', () => {
diff --git a/packages/storyshots/package.json b/packages/storyshots/package.json
index 9739ad9e2b97..194a6735d641 100644
--- a/packages/storyshots/package.json
+++ b/packages/storyshots/package.json
@@ -19,12 +19,14 @@
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.5.4",
- "react-dom": "^15.5.4"
+ "react-dom": "^15.5.4",
+ "react-test-renderer": "^15.5.4"
},
"dependencies": {
"@kadira/storybook": "*",
"@kadira/storybook-addons": "*",
"@kadira/storybook-channel": "*",
+ "babel-core": "^6.24.1",
"babel-runtime": "^6.20.0",
"prop-types": "^15.5.7",
"read-pkg-up": "^2.0.0"
diff --git a/packages/storyshots/src/index.js b/packages/storyshots/src/index.js
index e91c11601fe6..3306586b3796 100644
--- a/packages/storyshots/src/index.js
+++ b/packages/storyshots/src/index.js
@@ -4,6 +4,7 @@ import readPkgUp from 'read-pkg-up';
import addons from '@kadira/storybook-addons';
import runWithRequireContext from './require_context';
import createChannel from './storybook-channel-mock';
+
const { describe, it, expect } = global;
let storybook;
@@ -24,16 +25,16 @@ export default function testStorySnapshots(options = {}) {
if (isStorybook) {
storybook = require.requireActual('@kadira/storybook');
- const loadBabelConfig = require('@kadira/storybook/dist/server/babel_config').default;
+ const loadBabelConfig = require('@kadira/storybook/dist/server/babel_config').default; // eslint-disable-line
const configDirPath = path.resolve(options.configPath || '.storybook');
configPath = path.join(configDirPath, 'config.js');
+ const babelConfig = loadBabelConfig(configDirPath);
const content = babel.transformFileSync(configPath, babelConfig).code;
const contextOpts = {
filename: configPath,
dirname: configDirPath,
};
- const babelConfig = loadBabelConfig(configDirPath);
runWithRequireContext(content, contextOpts);
} else if (isRNStorybook) {
@@ -54,18 +55,18 @@ export default function testStorySnapshots(options = {}) {
const stories = storybook.getStorybook();
// Added not to break existing storyshots configs (can be removed in a future major release)
- options.storyNameRegex = options.storyNameRegex || options.storyRegex;
+ options.storyNameRegex = options.storyNameRegex || options.storyRegex; // eslint-disable-line
- for (const group of stories) {
+ for (const group of stories) { // eslint-disable-line
if (options.storyKindRegex && !group.kind.match(options.storyKindRegex)) {
- continue;
+ continue; // eslint-disable-line
}
describe(suit, () => {
describe(group.kind, () => {
- for (const story of group.stories) {
+ for (const story of group.stories) { // eslint-disable-line
if (options.storyNameRegex && !story.name.match(options.storyNameRegex)) {
- continue;
+ continue; // eslint-disable-line
}
it(story.name, () => {
diff --git a/packages/storyshots/src/require_context.js b/packages/storyshots/src/require_context.js
index de0b60261937..ff77a6902e89 100644
--- a/packages/storyshots/src/require_context.js
+++ b/packages/storyshots/src/require_context.js
@@ -11,7 +11,7 @@ function requireModules(keys, root, directory, regExp, recursive) {
// TODO: Check this in windows
const entryKey = `./${path.join(directory, filename)}`;
if (regExp.test(entryKey)) {
- keys[entryKey] = require(path.join(root, directory, filename));
+ keys[entryKey] = require(path.join(root, directory, filename)); // eslint-disable-line
return;
}
@@ -45,10 +45,10 @@ export default function runWithRequireContext(content, options) {
const newRequire = request => {
if (isRelativeRequest(request)) {
- return require(path.resolve(dirname, request));
+ return require(path.resolve(dirname, request)); // eslint-disable-line
}
- return require(request);
+ return require(request); // eslint-disable-line
};
newRequire.resolve = require.resolve;
diff --git a/packages/storyshots/stories/required_with_context/Button.stories.js b/packages/storyshots/stories/required_with_context/Button.stories.js
index ba6a7a3d8d25..3419c791c631 100644
--- a/packages/storyshots/stories/required_with_context/Button.stories.js
+++ b/packages/storyshots/stories/required_with_context/Button.stories.js
@@ -1,7 +1,6 @@
import React from 'react';
-import { storiesOf, action, linkTo } from '@kadira/storybook';
+import { storiesOf, action } from '@kadira/storybook';
import Button from './Button';
-import Welcome from './Welcome';
storiesOf('Button', module)
.add('with text', () => Hello Button )
diff --git a/packages/storyshots/stories/required_with_context/Welcome.js b/packages/storyshots/stories/required_with_context/Welcome.js
index 4e9ee8eb7317..069bf85d3c30 100644
--- a/packages/storyshots/stories/required_with_context/Welcome.js
+++ b/packages/storyshots/stories/required_with_context/Welcome.js
@@ -50,7 +50,9 @@ export default class Welcome extends React.Component {
{' '}
directory.
- A story is a single state of one or more UI components. You can have as many stories as you want.
+ A story is a single state of one or more UI components.
+ {' '}
+ You can have as many stories as you want.
(Basically a story is like a visual test case.)
From a37eb1140f46e67ea817fb8887a6d51346d1f05c Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Fri, 28 Apr 2017 15:24:09 +0200
Subject: [PATCH 03/37] FIX for
https://github.com/storybooks/storybook/commit/fc7e09b810678c8db2235c397a49df35dc667ef2?diff=split#commitcomment-21940155
---
packages/addon-info/src/components/PropVal.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/addon-info/src/components/PropVal.js b/packages/addon-info/src/components/PropVal.js
index 5aa548c27369..fb4b0223150e 100644
--- a/packages/addon-info/src/components/PropVal.js
+++ b/packages/addon-info/src/components/PropVal.js
@@ -107,7 +107,7 @@ function previewProp(val) {
}
if (!braceWrap) return content;
- return {{ content }} ;
+ return {`{ ${content} }`} ;
}
export default class PropVal extends React.Component {
From b801d6f0a439bd10f67412ceb0eb2a194d3ef8e8 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Fri, 28 Apr 2017 17:25:45 +0200
Subject: [PATCH 04/37] FIX linting
---
.eslintrc.js | 17 ++---
package.json | 7 ++-
.../manager/components/CommentForm/index.js | 2 +-
packages/addon-info/src/components/Node.js | 6 +-
packages/react-storybook/src/server/config.js | 62 +++++++++----------
packages/storybook-ui/package.json | 4 +-
.../modules/ui/components/shortcuts_help.js | 10 ++-
.../stories/directly_required/Button.js | 3 +
.../stories/required_with_context/Welcome.js | 18 +++++-
scripts/prepublish.js | 1 +
10 files changed, 80 insertions(+), 50 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index ec5543c22beb..02c4ca4ed80e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,11 +3,7 @@ const warn = 1;
const ignore = 0;
module.exports = {
- extends: [
- // './node_modules/eslint-config-airbnb-base/rules/es6.js',
- 'airbnb-base',
- 'plugin:jest/recommended',
- ],
+ extends: ['airbnb', 'prettier', 'plugin:jest/recommended'],
plugins: [
'prettier',
'jest',
@@ -23,7 +19,7 @@ module.exports = {
'jest/globals': true,
},
rules: {
- strict: [error, "never"],
+ strict: [error, 'never'],
'prettier/prettier': ['warn', {
printWidth: 100,
tabWidth: 2,
@@ -35,10 +31,17 @@ module.exports = {
'class-methods-use-this': ignore,
'arrow-parens': ['warn', 'as-needed'],
'space-before-function-paren': ignore,
- 'import/no-extraneous-dependencies': [error, { devDependencies: true, peerDependencies: true }],
+ 'import/no-extraneous-dependencies': [error, {
+ devDependencies: true,
+ peerDependencies: true
+ }],
'import/prefer-default-export': ignore,
'react/jsx-uses-react': error,
'react/jsx-uses-vars': error,
'react/react-in-jsx-scope': error,
+ 'react/jsx-filename-extension': [warn, {
+ extensions: ['.js', '.jsx']
+ }],
+ 'react/no-unescaped-entities': ignore,
},
}
diff --git a/package.json b/package.json
index af3709a56419..2a2858b9167e 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,17 @@
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
+ "chalk": "^1.1.3",
"codecov": "^2.1.0",
"enzyme": "^2.8.2",
"enzyme-to-json": "^1.5.1",
"eslint": "^3.19.0",
+ "eslint-config-airbnb": "^14.1.0",
"eslint-config-airbnb-base": "^11.1.3",
+ "eslint-config-prettier": "^1.7.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jest": "^19.0.1",
+ "eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-prettier": "^2.0.1",
"eslint-plugin-react": "^6.10.3",
"jest": "^19.0.2",
@@ -25,11 +29,12 @@
"react": "^15.5.4",
"react-addons-test-utils": "^15.5.1",
"react-dom": "^15.5.4",
+ "react-test-renderer": "^15.5.4",
"shelljs": "^0.7.7"
},
"scripts": {
"bootstrap": "lerna bootstrap",
- "lint": "eslint .",
+ "lint": "eslint . --cache --cache-location ./.cache/eslint",
"test": "jest --config ./.jestrc",
"test:watch": "npm test -- --watch",
"test-examples": "CI=true lerna run test",
diff --git a/packages/addon-comments/src/manager/components/CommentForm/index.js b/packages/addon-comments/src/manager/components/CommentForm/index.js
index c2259db8fdcb..a6ea751e3f87 100644
--- a/packages/addon-comments/src/manager/components/CommentForm/index.js
+++ b/packages/addon-comments/src/manager/components/CommentForm/index.js
@@ -58,7 +58,7 @@ export default class CommentForm extends Component {
if (!this.props.user) {
return (
-
+
this.openLogin()}>
Sign in with Storybook Hub
diff --git a/packages/addon-info/src/components/Node.js b/packages/addon-info/src/components/Node.js
index 77b8e0f62041..ee95c23905fa 100644
--- a/packages/addon-info/src/components/Node.js
+++ b/packages/addon-info/src/components/Node.js
@@ -70,12 +70,12 @@ function getData(element) {
text: null,
children: null,
};
-
+
if (typeof element === 'null') {
- return data
+ return data;
}
- if (typeof element == 'string') {
+ if (typeof element === 'string') {
data.text = element;
return data;
}
diff --git a/packages/react-storybook/src/server/config.js b/packages/react-storybook/src/server/config.js
index c04149a2a303..ec3021242c21 100644
--- a/packages/react-storybook/src/server/config.js
+++ b/packages/react-storybook/src/server/config.js
@@ -44,38 +44,36 @@ export default function(configType, baseConfig, configDir) {
const customConfig = require(configPath);
return customConfig(config);
- } else {
- const customConfig = require(customConfigPath);
+ }
+ const customConfig = require(customConfigPath);
- if (typeof customConfig === 'function') {
- logger.info('=> Loading custom webpack config (full-control mode).');
- return customConfig(config, configType);
- } else {
- logger.info('=> Loading custom webpack config (extending mode).');
- return {
- ...customConfig,
- // We'll always load our configurations after the custom config.
- // So, we'll always load the stuff we need.
- ...config,
- // Override with custom devtool if provided
- devtool: customConfig.devtool || config.devtool,
- // We need to use our and custom plugins.
- plugins: [...config.plugins, ...(customConfig.plugins || [])],
- module: {
- ...config.module,
- // We need to use our and custom rules.
- ...customConfig.module,
- rules: [...config.module.rules, ...(customConfig.module.rules || [])],
- },
- resolve: {
- ...config.resolve,
- ...customConfig.resolve,
- alias: {
- ...config.alias,
- ...(customConfig.resolve && customConfig.resolve.alias),
- },
- },
- };
- }
+ if (typeof customConfig === 'function') {
+ logger.info('=> Loading custom webpack config (full-control mode).');
+ return customConfig(config, configType);
}
+ logger.info('=> Loading custom webpack config (extending mode).');
+ return {
+ ...customConfig,
+ // We'll always load our configurations after the custom config.
+ // So, we'll always load the stuff we need.
+ ...config,
+ // Override with custom devtool if provided
+ devtool: customConfig.devtool || config.devtool,
+ // We need to use our and custom plugins.
+ plugins: [...config.plugins, ...(customConfig.plugins || [])],
+ module: {
+ ...config.module,
+ // We need to use our and custom rules.
+ ...customConfig.module,
+ rules: [...config.module.rules, ...(customConfig.module.rules || [])],
+ },
+ resolve: {
+ ...config.resolve,
+ ...customConfig.resolve,
+ alias: {
+ ...config.alias,
+ ...(customConfig.resolve && customConfig.resolve.alias),
+ },
+ },
+ };
}
diff --git a/packages/storybook-ui/package.json b/packages/storybook-ui/package.json
index c049b0d7dda5..ce1dd73d13b7 100644
--- a/packages/storybook-ui/package.json
+++ b/packages/storybook-ui/package.json
@@ -21,6 +21,7 @@
"deep-equal": "^1.0.1",
"events": "^1.1.1",
"fuzzysearch": "^1.0.3",
+ "global": "^4.3.2",
"json-stringify-safe": "^5.0.1",
"keycode": "^2.1.8",
"lodash.pick": "^4.4.0",
@@ -36,5 +37,6 @@
"react-split-pane": "^0.1.63",
"redux": "^3.6.0"
},
- "main": "dist/index.js"
+ "main": "dist/index.js",
+ "devDependencies": {}
}
diff --git a/packages/storybook-ui/src/modules/ui/components/shortcuts_help.js b/packages/storybook-ui/src/modules/ui/components/shortcuts_help.js
index 25949dc8c05b..16a8a8ced5c4 100755
--- a/packages/storybook-ui/src/modules/ui/components/shortcuts_help.js
+++ b/packages/storybook-ui/src/modules/ui/components/shortcuts_help.js
@@ -67,7 +67,7 @@ export const Keys = ({ shortcutKeys }) => {
// if we have multiple key combinations for a shortcut
const keys = shortcutKeys.map((key, index, arr) => (
-
+
{key}
{/* add / & space if it is not a last key combination */}
{arr.length - 1 !== index ? / : ''}
@@ -82,8 +82,8 @@ Keys.propTypes = {
};
export const Shortcuts = ({ appShortcuts }) => {
- const shortcuts = appShortcuts.map((shortcut, index) => (
-
+ const shortcuts = appShortcuts.map(shortcut => (
+
{shortcut.name}
@@ -112,5 +112,9 @@ ShortcutsHelp.propTypes = {
onClose: PropTypes.func,
platform: PropTypes.string.isRequired,
};
+ShortcutsHelp.defaultProps = {
+ isOpen: false,
+ onClose: () => {},
+};
export default ShortcutsHelp;
diff --git a/packages/storyshots/stories/directly_required/Button.js b/packages/storyshots/stories/directly_required/Button.js
index 97a2c9f0b552..2f3937ce2c96 100644
--- a/packages/storyshots/stories/directly_required/Button.js
+++ b/packages/storyshots/stories/directly_required/Button.js
@@ -21,5 +21,8 @@ Button.propTypes = {
children: PropTypes.string.isRequired,
onClick: PropTypes.func,
};
+Button.defaultProps = {
+ onClick: () => {},
+};
export default Button;
diff --git a/packages/storyshots/stories/required_with_context/Welcome.js b/packages/storyshots/stories/required_with_context/Welcome.js
index 069bf85d3c30..35b8d943631b 100644
--- a/packages/storyshots/stories/required_with_context/Welcome.js
+++ b/packages/storyshots/stories/required_with_context/Welcome.js
@@ -1,4 +1,5 @@
import React from 'react';
+import PropTypes from 'prop-types';
const styles = {
main: {
@@ -59,7 +60,7 @@ export default class Welcome extends React.Component {
See these sample
{' '}
- stories
+ this.showApp(e)}>stories
{' '}
for a component called
{' '}
@@ -79,7 +80,12 @@ export default class Welcome extends React.Component {
Have a look at the
{' '}
-
+
React Storybook
{' '}
@@ -89,3 +95,11 @@ export default class Welcome extends React.Component {
);
}
}
+
+Welcome.propTypes = {
+ showApp: PropTypes.function,
+};
+
+Welcome.defaultProps = {
+ showApp: () => {},
+};
diff --git a/scripts/prepublish.js b/scripts/prepublish.js
index 9ddf58cdc511..3907c06ebd61 100644
--- a/scripts/prepublish.js
+++ b/scripts/prepublish.js
@@ -1,6 +1,7 @@
const path = require('path');
const shell = require('shelljs');
const chalk = require('chalk');
+
const babel = path.join(__dirname, '..', 'node_modules', '.bin', 'babel');
require('./ver');
From d22d23aaff67817f1f2e339143e2437ef59473aa Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Fri, 28 Apr 2017 14:23:13 -0400
Subject: [PATCH 05/37] fixes linting in storyshots
---
packages/storyshots/stories/required_with_context/Button.js | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/packages/storyshots/stories/required_with_context/Button.js b/packages/storyshots/stories/required_with_context/Button.js
index 97a2c9f0b552..dbe0bc689d58 100644
--- a/packages/storyshots/stories/required_with_context/Button.js
+++ b/packages/storyshots/stories/required_with_context/Button.js
@@ -17,6 +17,10 @@ const Button = ({ children, onClick }) => (
);
+Button.defaultProps = {
+ onClick: null,
+};
+
Button.propTypes = {
children: PropTypes.string.isRequired,
onClick: PropTypes.func,
From 15998620148a66d12dab18466cebd394bf6ca7d0 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Fri, 28 Apr 2017 17:41:39 -0400
Subject: [PATCH 06/37] FIX: listing in the `storybook-ui` package
notes:
1. did not resolve `jsx-a11y` errors as that would require closer
attention to the browser
2. did not resolve any `'enzyme' should be listed in the project's
dependencies. Run 'npm i -S enzyme' to add it
import/no-extraneous-dependencies` see note:
https://github.com/storybooks/storybook/pull/911#issuecomment-298077570
---
packages/storybook-ui/package.json | 9 ++++-
.../modules/ui/components/down_panel/index.js | 8 ++++-
.../src/modules/ui/components/layout/index.js | 33 ++++++++-----------
.../modules/ui/components/layout/usplit.js | 2 +-
.../ui/components/left_panel/header.js | 6 ++++
.../modules/ui/components/left_panel/index.js | 15 ++++++---
.../ui/components/left_panel/text_filter.js | 13 ++++++--
.../src/modules/ui/components/search_box.js | 6 ++--
.../modules/ui/components/shortcuts_help.js | 9 +++--
9 files changed, 67 insertions(+), 34 deletions(-)
diff --git a/packages/storybook-ui/package.json b/packages/storybook-ui/package.json
index ce1dd73d13b7..db1566041112 100644
--- a/packages/storybook-ui/package.json
+++ b/packages/storybook-ui/package.json
@@ -38,5 +38,12 @@
"redux": "^3.6.0"
},
"main": "dist/index.js",
- "devDependencies": {}
+ "devDependencies": {},
+ "eslintConfig": {
+ "globals": {
+ "document": true,
+ "localStorage": true,
+ "window": true
+ }
+ }
}
diff --git a/packages/storybook-ui/src/modules/ui/components/down_panel/index.js b/packages/storybook-ui/src/modules/ui/components/down_panel/index.js
index b0c42ec8c346..75d06d205322 100644
--- a/packages/storybook-ui/src/modules/ui/components/down_panel/index.js
+++ b/packages/storybook-ui/src/modules/ui/components/down_panel/index.js
@@ -65,8 +65,14 @@ class DownPanel extends Component {
}
}
+DownPanel.defaultProps = {
+ panels: {},
+ onPanelSelect: () => {},
+ selectedPanel: null,
+};
+
DownPanel.propTypes = {
- panels: PropTypes.object,
+ panels: PropTypes.object, // eslint-disable-line react/forbid-prop-types
onPanelSelect: PropTypes.func,
selectedPanel: PropTypes.string,
};
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/index.js b/packages/storybook-ui/src/modules/ui/components/layout/index.js
index 3fbb897a80ae..f8efed27d0c7 100755
--- a/packages/storybook-ui/src/modules/ui/components/layout/index.js
+++ b/packages/storybook-ui/src/modules/ui/components/layout/index.js
@@ -1,9 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
+import SplitPane from 'react-split-pane';
import USplit from './usplit';
import Dimensions from './dimensions';
-import SplitPane from 'react-split-pane';
const rootStyle = {
height: '100vh',
@@ -76,13 +76,9 @@ const fullScreenPreviewStyle = {
overflow: 'hidden',
};
-const onDragStart = function() {
- document.body.classList.add('dragging');
-};
+const onDragStart = () => document.body.classList.add('dragging');
-const onDragEnd = function() {
- document.body.classList.remove('dragging');
-};
+const onDragEnd = () => document.body.classList.remove('dragging');
const defaultSizes = {
addonPanel: {
@@ -202,12 +198,12 @@ class Layout extends React.Component {
>
{showLeftPanel
?
-
- {leftPanel()}
-
-
+
+ {leftPanel()}
- :
}
+
+
+ :
}
- {showDownPanel
- ?
-
- {downPanel()}
-
- :
}
-
+ {showDownPanel ?
+
+
+ {downPanel()}
+
+ :
}
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/usplit.js b/packages/storybook-ui/src/modules/ui/components/layout/usplit.js
index 890e5b366e7d..80dc23f531f7 100644
--- a/packages/storybook-ui/src/modules/ui/components/layout/usplit.js
+++ b/packages/storybook-ui/src/modules/ui/components/layout/usplit.js
@@ -48,7 +48,7 @@ const USplit = ({ shift, split }) => (
);
-USplit.PropTypes = {
+USplit.propTypes = {
shift: PropTypes.number,
split: PropTypes.oneOf(['vertical', 'horizontal']),
};
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/header.js b/packages/storybook-ui/src/modules/ui/components/left_panel/header.js
index 7d647cf7536f..2b804d1d2f37 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/header.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/header.js
@@ -57,6 +57,12 @@ const Header = ({ openShortcutsHelp, name, url }) => (
);
+Header.defaultProps = {
+ openShortcutsHelp: null,
+ name: '',
+ url: '',
+};
+
Header.propTypes = {
openShortcutsHelp: PropTypes.func,
name: PropTypes.string,
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/index.js b/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
index 924bf7571843..c0ec707cc088 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
@@ -31,12 +31,17 @@ const LeftPanel = props => (
);
-LeftPanel.propTypes = {
- stories: PropTypes.array,
- selectedKind: PropTypes.string,
- selectedStory: PropTypes.string,
- onSelectStory: PropTypes.func,
+LeftPanel.defaultProps = {
+ stories: null,
+ storyFilter: null,
+ onStoryFilter: () => {},
+ openShortcutsHelp: null,
+ name: '',
+ url: '',
+};
+LeftPanel.propTypes = {
+ stories: PropTypes.arrayOf(PropTypes.object),
storyFilter: PropTypes.string,
onStoryFilter: PropTypes.func,
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/text_filter.js b/packages/storybook-ui/src/modules/ui/components/left_panel/text_filter.js
index 33d82562a8af..8196c50964c4 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/text_filter.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/text_filter.js
@@ -54,6 +54,7 @@ export default class TextFilter extends React.Component {
const clearButtonStyle = {
position: 'absolute',
+ backgroundColor: 'transparent',
color: '#868686',
border: 'none',
width: 25,
@@ -74,20 +75,26 @@ export default class TextFilter extends React.Component {
type="text"
placeholder="Filter"
name="filter-text"
- value={this.props.text || ''}
+ value={this.props.text}
onChange={this.onChange}
/>
{this.state.query &&
this.state.query.length &&
-
+
×
-
}
+ }
);
}
}
+TextFilter.defaultProps = {
+ text: '',
+ onChange: null,
+ onClear: null,
+};
+
TextFilter.propTypes = {
text: PropTypes.string,
onChange: PropTypes.func,
diff --git a/packages/storybook-ui/src/modules/ui/components/search_box.js b/packages/storybook-ui/src/modules/ui/components/search_box.js
index e95922439257..4545f312a13f 100644
--- a/packages/storybook-ui/src/modules/ui/components/search_box.js
+++ b/packages/storybook-ui/src/modules/ui/components/search_box.js
@@ -43,7 +43,7 @@ const suggestionTemplate = (props, state, styles) =>
state.results.map((val, i) => {
const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
return (
-
+
{val.value}
{val.type === 'story' ? `in ${val.kind}` : 'Kind'}
@@ -83,7 +83,7 @@ export default class SearchBox extends React.Component {
{this.props.showSearchBox &&
{
};
Keys.propTypes = {
- shortcutKeys: PropTypes.array.isRequired,
+ shortcutKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export const Shortcuts = ({ appShortcuts }) => {
@@ -98,7 +98,12 @@ export const Shortcuts = ({ appShortcuts }) => {
};
Shortcuts.propTypes = {
- appShortcuts: PropTypes.array.isRequired,
+ appShortcuts: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ keys: PropTypes.array,
+ }),
+ ).isRequired,
};
export const ShortcutsHelp = ({ isOpen, onClose, platform }) => (
From 84f1e375f2f52f7ba384c87c25479b4510a9860d Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Fri, 28 Apr 2017 19:12:04 -0400
Subject: [PATCH 07/37] fix: failing Panel.js test in add-knobs
adds `global` as the dep was missing in add-on-knobs
---
packages/addon-knobs/package.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/addon-knobs/package.json b/packages/addon-knobs/package.json
index bfbac8f2f47c..a55892299e4b 100644
--- a/packages/addon-knobs/package.json
+++ b/packages/addon-knobs/package.json
@@ -33,6 +33,7 @@
"dependencies": {
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
+ "global": "^4.3.2",
"insert-css": "^1.0.0",
"moment": "^2.18.1",
"prop-types": "^15.5.8",
From 5deb96e8c7a509b00c029f49e56713a5956f03a9 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Fri, 28 Apr 2017 19:19:29 -0400
Subject: [PATCH 08/37] resolves listing in Stories component of storybook-ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
didn’t resolve jsx-a11y linting in this pass
---
.../src/modules/ui/components/left_panel/stories.js | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/stories.js b/packages/storybook-ui/src/modules/ui/components/left_panel/stories.js
index c53804e25fc5..504e72c8bb59 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/stories.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/stories.js
@@ -103,8 +103,18 @@ class Stories extends React.Component {
}
}
+Stories.defaultProps = {
+ stories: [],
+ onSelectStory: null,
+};
+
Stories.propTypes = {
- stories: PropTypes.array.isRequired,
+ stories: PropTypes.arrayOf(
+ PropTypes.shape({
+ kind: PropTypes.string,
+ stories: PropTypes.array,
+ }),
+ ),
selectedKind: PropTypes.string.isRequired,
selectedStory: PropTypes.string.isRequired,
onSelectStory: PropTypes.func,
From 59daa5c3152b3add78175a576e6d630e66ec0bc7 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Fri, 28 Apr 2017 19:50:36 -0400
Subject: [PATCH 09/37] fix: test for storybook-ui let_panel/index
uses `toMatchObject` rather than `toEqual` to be more lenient about
what props are present
---
.../src/modules/ui/components/left_panel/index.test.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/index.test.js b/packages/storybook-ui/src/modules/ui/components/left_panel/index.test.js
index d2f071984fd2..ca8370ff8f73 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/index.test.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/index.test.js
@@ -31,7 +31,7 @@ describe('manager.ui.components.left_panel.index', () => {
);
const header = wrap.find(Stories).first();
- expect(header.props()).toEqual({
+ expect(header.props()).toMatchObject({
stories,
selectedKind,
selectedStory,
From 0d2cab035b614332bebde434dcb64751b695f4a0 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Fri, 28 Apr 2017 19:51:21 -0400
Subject: [PATCH 10/37] fix: eslint -- resolves globals using the `global`
module rather than the eslint config for globals
---
packages/storybook-ui/package.json | 9 +--------
.../src/modules/ui/components/layout/index.js | 1 +
2 files changed, 2 insertions(+), 8 deletions(-)
diff --git a/packages/storybook-ui/package.json b/packages/storybook-ui/package.json
index db1566041112..ce1dd73d13b7 100644
--- a/packages/storybook-ui/package.json
+++ b/packages/storybook-ui/package.json
@@ -38,12 +38,5 @@
"redux": "^3.6.0"
},
"main": "dist/index.js",
- "devDependencies": {},
- "eslintConfig": {
- "globals": {
- "document": true,
- "localStorage": true,
- "window": true
- }
- }
+ "devDependencies": {}
}
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/index.js b/packages/storybook-ui/src/modules/ui/components/layout/index.js
index f8efed27d0c7..56d63143d0f6 100755
--- a/packages/storybook-ui/src/modules/ui/components/layout/index.js
+++ b/packages/storybook-ui/src/modules/ui/components/layout/index.js
@@ -1,3 +1,4 @@
+import { document, localStorage, window } from 'global';
import PropTypes from 'prop-types';
import React from 'react';
import SplitPane from 'react-split-pane';
From 521949850df09eff727a583e64877738f81a0a8f Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Fri, 28 Apr 2017 20:02:20 -0400
Subject: [PATCH 11/37] fix: linting in `react-storybook` package
---
packages/react-storybook/src/client/preview/error_display.js | 5 ++++-
packages/react-storybook/src/server/config.js | 1 +
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/packages/react-storybook/src/client/preview/error_display.js b/packages/react-storybook/src/client/preview/error_display.js
index 0b4e51d8fcf6..b8f3d3a56afe 100644
--- a/packages/react-storybook/src/client/preview/error_display.js
+++ b/packages/react-storybook/src/client/preview/error_display.js
@@ -42,7 +42,10 @@ const ErrorDisplay = ({ error }) => (
);
ErrorDisplay.propTypes = {
- error: PropTypes.object.isRequired,
+ error: PropTypes.shape({
+ message: PropTypes.string,
+ stack: PropTypes.string,
+ }).isRequired,
};
export default ErrorDisplay;
diff --git a/packages/react-storybook/src/server/config.js b/packages/react-storybook/src/server/config.js
index ec3021242c21..d1a9cc2ce259 100644
--- a/packages/react-storybook/src/server/config.js
+++ b/packages/react-storybook/src/server/config.js
@@ -1,3 +1,4 @@
+/* eslint-disable global-require, import/no-dynamic-require */
import fs from 'fs';
import path from 'path';
import loadBabelConfig from './babel_config';
From 0f65908b703e8032c8f3bb2b7f427c410a4ebace Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 12:22:19 -0400
Subject: [PATCH 12/37] fix: adds missing `ws` dep to `react-native-storybook`
---
packages/react-native-storybook/package.json | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/react-native-storybook/package.json b/packages/react-native-storybook/package.json
index 8416cf6ec5f8..27624cd62da9 100644
--- a/packages/react-native-storybook/package.json
+++ b/packages/react-native-storybook/package.json
@@ -70,6 +70,7 @@
"uuid": "^3.0.1",
"webpack": "^2.4.1",
"webpack-dev-middleware": "^1.10.1",
- "webpack-hot-middleware": "^2.18.0"
+ "webpack-hot-middleware": "^2.18.0",
+ "ws": "^2.3.1"
}
}
From 55a67e75d0a313ee69b34533ce1a8d101c353822 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 12:28:49 -0400
Subject: [PATCH 13/37] fix: adds missing `global` dep to
`react-native-storybook`
---
packages/react-native-storybook/package.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/react-native-storybook/package.json b/packages/react-native-storybook/package.json
index 27624cd62da9..aeb4166a3d65 100644
--- a/packages/react-native-storybook/package.json
+++ b/packages/react-native-storybook/package.json
@@ -61,6 +61,7 @@
"events": "^1.1.1",
"express": "^4.15.2",
"file-loader": "^0.11.1",
+ "global": "^4.3.2",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"postcss-loader": "^1.3.3",
From 52b8490142d67ae12e544fb20217350bf7c77421 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 12:40:06 -0400
Subject: [PATCH 14/37] fix: linting in `react-native-storybook` package
---
.../react-native-storybook/src/bin/storybook-start.js | 2 +-
.../src/preview/components/StoryView/index.js | 10 +++++++++-
2 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/packages/react-native-storybook/src/bin/storybook-start.js b/packages/react-native-storybook/src/bin/storybook-start.js
index a2a1253dd7b7..4f0bb85ecaf1 100644
--- a/packages/react-native-storybook/src/bin/storybook-start.js
+++ b/packages/react-native-storybook/src/bin/storybook-start.js
@@ -36,7 +36,7 @@ server.listen(...listenAddr, err => {
throw err;
}
const address = `http://${program.host || 'localhost'}:${program.port}/`;
- console.info(`\nReact Native Storybook started on => ${address}\n`);
+ console.info(`\nReact Native Storybook started on => ${address}\n`); // eslint-disable-line no-console
});
if (!program.skipPackager) {
diff --git a/packages/react-native-storybook/src/preview/components/StoryView/index.js b/packages/react-native-storybook/src/preview/components/StoryView/index.js
index a2e68c04fe19..48b2c7a764f8 100644
--- a/packages/react-native-storybook/src/preview/components/StoryView/index.js
+++ b/packages/react-native-storybook/src/preview/components/StoryView/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
import { View, Text } from 'react-native';
import style from './style';
@@ -49,3 +49,11 @@ export default class StoryView extends Component {
);
}
}
+
+StoryView.propTypes = {
+ events: PropTypes.shape({
+ on: PropTypes.func.isRequired,
+ removeListener: PropTypes.func.isRequired,
+ }).isRequired,
+ url: PropTypes.string.isRequired,
+};
From 90edfdfda72b69450c05220cf72317bd82227861 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 15:21:56 -0400
Subject: [PATCH 15/37] fix: listing in `getstorybook` package
---
.../REACT/template/stories/Button.js | 4 ++++
.../REACT/template/stories/Welcome.js | 19 +++++++++++++++---
.../storybook/stories/Button/index.android.js | 14 +++++++++++--
.../storybook/stories/Button/index.ios.js | 14 +++++++++++--
.../storybook/stories/CenterView/index.js | 10 +++++++++-
.../storybook/stories/Welcome/index.js | 10 +++++++++-
.../template/src/stories/Button.js | 4 ++++
.../template/src/stories/Welcome.js | 20 +++++++++++++------
.../WEBPACK_REACT/template/stories/Button.js | 4 ++++
.../WEBPACK_REACT/template/stories/Welcome.js | 19 +++++++++++++++---
10 files changed, 100 insertions(+), 18 deletions(-)
diff --git a/packages/getstorybook/generators/REACT/template/stories/Button.js b/packages/getstorybook/generators/REACT/template/stories/Button.js
index 97a2c9f0b552..dbe0bc689d58 100644
--- a/packages/getstorybook/generators/REACT/template/stories/Button.js
+++ b/packages/getstorybook/generators/REACT/template/stories/Button.js
@@ -17,6 +17,10 @@ const Button = ({ children, onClick }) => (
);
+Button.defaultProps = {
+ onClick: null,
+};
+
Button.propTypes = {
children: PropTypes.string.isRequired,
onClick: PropTypes.func,
diff --git a/packages/getstorybook/generators/REACT/template/stories/Welcome.js b/packages/getstorybook/generators/REACT/template/stories/Welcome.js
index 069bf85d3c30..cd9fc4f6b280 100644
--- a/packages/getstorybook/generators/REACT/template/stories/Welcome.js
+++ b/packages/getstorybook/generators/REACT/template/stories/Welcome.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
const styles = {
main: {
@@ -59,7 +59,7 @@ export default class Welcome extends React.Component {
See these sample
{' '}
- stories
+ this.showApp()}>stories
{' '}
for a component called
{' '}
@@ -79,7 +79,12 @@ export default class Welcome extends React.Component {
Have a look at the
{' '}
-
+
React Storybook
{' '}
@@ -89,3 +94,11 @@ export default class Welcome extends React.Component {
);
}
}
+
+Welcome.defaultProps = {
+ showApp: null,
+};
+
+Welcome.propTypes = {
+ showApp: PropTypes.func,
+};
diff --git a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js
index 2bdb364d5e7c..b8a0d0870899 100644
--- a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js
+++ b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js
@@ -1,10 +1,20 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
import { TouchableNativeFeedback } from 'react-native';
export default function Button(props) {
return (
-
+
{props.children}
);
}
+
+Button.defaultProps = {
+ children: null,
+ onPress: () => {},
+};
+
+Button.propTypes = {
+ children: PropTypes.node,
+ onPress: PropTypes.func,
+};
diff --git a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js
index 0447eb95078c..18598ac78374 100644
--- a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js
+++ b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js
@@ -1,10 +1,20 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
import { TouchableHighlight } from 'react-native';
export default function Button(props) {
return (
-
+
{props.children}
);
}
+
+Button.defaultProps = {
+ children: null,
+ onPress: () => {},
+};
+
+Button.propTypes = {
+ children: PropTypes.node,
+ onPress: PropTypes.func,
+};
diff --git a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/CenterView/index.js b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/CenterView/index.js
index ab98f2df0a80..fdb503676bd0 100644
--- a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/CenterView/index.js
+++ b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/CenterView/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
import { View } from 'react-native';
import style from './style';
@@ -9,3 +9,11 @@ export default function CenterView(props) {
);
}
+
+CenterView.defaultProps = {
+ children: null,
+};
+
+CenterView.propTypes = {
+ children: PropTypes.node,
+};
diff --git a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js
index a0677d8def7d..8dcdec1c30e5 100644
--- a/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js
+++ b/packages/getstorybook/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js
@@ -1,6 +1,6 @@
/* eslint max-len: 0 */
-import React from 'react';
+import React, { PropTypes } from 'react';
import { View, Text } from 'react-native';
export default class Welcome extends React.Component {
@@ -40,3 +40,11 @@ export default class Welcome extends React.Component {
);
}
}
+
+Welcome.defaultProps = {
+ showApp: null,
+};
+
+Welcome.propTypes = {
+ showApp: PropTypes.func,
+};
diff --git a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Button.js b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Button.js
index 97a2c9f0b552..dbe0bc689d58 100644
--- a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Button.js
+++ b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Button.js
@@ -17,6 +17,10 @@ const Button = ({ children, onClick }) => (
);
+Button.defaultProps = {
+ onClick: null,
+};
+
Button.propTypes = {
children: PropTypes.string.isRequired,
onClick: PropTypes.func,
diff --git a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
index 7a0673ed0731..ec1bfc278088 100644
--- a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
+++ b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
const styles = {
main: {
@@ -77,7 +77,7 @@ export default class Welcome extends React.Component {
See these sample
{' '}
- stories
+ this.showApp()}>stories
{' '}
for a component called
{' '}
@@ -89,10 +89,9 @@ export default class Welcome extends React.Component {
Here's how to add your App
component as a story.
- ${codeBlock}` }}
- />
+
Usually we create stories with smaller UI components in the app.
Have a look at the
@@ -101,6 +100,7 @@ export default class Welcome extends React.Component {
style={styles.link}
href="https://getstorybook.io/docs/basics/writing-stories"
target="_blank"
+ rel="noopener noreferrer"
>
Writing Stories
@@ -111,3 +111,11 @@ export default class Welcome extends React.Component {
);
}
}
+
+Welcome.defaultProps = {
+ showApp: null,
+};
+
+Welcome.propTypes = {
+ showApp: PropTypes.func,
+};
diff --git a/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Button.js b/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Button.js
index 97a2c9f0b552..dbe0bc689d58 100644
--- a/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Button.js
+++ b/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Button.js
@@ -17,6 +17,10 @@ const Button = ({ children, onClick }) => (
);
+Button.defaultProps = {
+ onClick: null,
+};
+
Button.propTypes = {
children: PropTypes.string.isRequired,
onClick: PropTypes.func,
diff --git a/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js b/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js
index 1a80ed915df7..054e0277625d 100644
--- a/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js
+++ b/packages/getstorybook/generators/WEBPACK_REACT/template/stories/Welcome.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
const styles = {
main: {
@@ -63,7 +63,7 @@ export default class Welcome extends React.Component {
See these sample
{' '}
- stories
+ this.showApp()}>stories
{' '}
for a component called
{' '}
@@ -83,7 +83,12 @@ export default class Welcome extends React.Component {
Have a look at the
{' '}
-
+
React Storybook
{' '}
@@ -103,3 +108,11 @@ export default class Welcome extends React.Component {
);
}
}
+
+Welcome.defaultProps = {
+ showApp: null,
+};
+
+Welcome.propTypes = {
+ showApp: PropTypes.func,
+};
From 79098489f89d8d44489929496f5ae8febd4b4ca5 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 15:27:28 -0400
Subject: [PATCH 16/37] fix: adds `react: "*"` as a peer dep for
`decorator-cantered` to fix `import/no-extraneous-dependencies` linter
warning
---
packages/decorator-centered/package.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/decorator-centered/package.json b/packages/decorator-centered/package.json
index d662cc383226..157cf2878323 100644
--- a/packages/decorator-centered/package.json
+++ b/packages/decorator-centered/package.json
@@ -13,6 +13,8 @@
"babelify"
]
},
- "devDependencies": {
+ "devDependencies": {},
+ "peerDependencies": {
+ "react": "*"
}
}
From dd709520c379b72baa26bba80cc3b8383d207120 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 15:37:41 -0400
Subject: [PATCH 17/37] fix: adds `global` dep to `channel-postmessage` and
`channel-websocket` to resolve `import/no-extraneous-dependencies` lint issue
---
packages/channel-postmessage/package.json | 1 +
packages/channel-websocket/package.json | 3 ++-
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/channel-postmessage/package.json b/packages/channel-postmessage/package.json
index 2f42bda77a99..317732496608 100644
--- a/packages/channel-postmessage/package.json
+++ b/packages/channel-postmessage/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"@kadira/storybook-channel": "*",
+ "global": "^4.3.2",
"json-stringify-safe": "^5.0.1"
}
}
diff --git a/packages/channel-websocket/package.json b/packages/channel-websocket/package.json
index c0c709c7ed62..34f93fad821b 100644
--- a/packages/channel-websocket/package.json
+++ b/packages/channel-websocket/package.json
@@ -11,6 +11,7 @@
"shelljs": "^0.7.3"
},
"dependencies": {
- "@kadira/storybook-channel": "^1.0.1"
+ "@kadira/storybook-channel": "^1.0.1",
+ "global": "^4.3.2"
}
}
From 45353ffd25732e13d2479dea7a9a455d86d61ee0 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 15:38:09 -0400
Subject: [PATCH 18/37] fix: linting in `channel-websockets`
---
packages/channel-websocket/src/index.js | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/packages/channel-websocket/src/index.js b/packages/channel-websocket/src/index.js
index 91b678341066..e91464992b86 100644
--- a/packages/channel-websocket/src/index.js
+++ b/packages/channel-websocket/src/index.js
@@ -1,5 +1,8 @@
-/* eslint no-underscore-dangle: 0 */
-
+/*
+ eslint-disable
+ no-console,
+ no-underscore-dangle
+*/
import { WebSocket } from 'global';
import Channel from '@kadira/storybook-channel';
From fc84af785f6171524946f912432a9866e8872fd9 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 15:43:31 -0400
Subject: [PATCH 19/37] fix: peer dep for `@kadira/storybook-addons` wasn't
resolving properly by eslint
---
packages/addon-notes/package.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/addon-notes/package.json b/packages/addon-notes/package.json
index ee2ea2adada6..4124a0350ad5 100644
--- a/packages/addon-notes/package.json
+++ b/packages/addon-notes/package.json
@@ -20,8 +20,8 @@
"react-dom": "^15.3.2"
},
"peerDependencies": {
- "react": "*",
- "@kadira/storybook-addons": "*"
+ "@kadira/storybook-addons": "*",
+ "react": "*"
},
"dependencies": {
"babel-runtime": "^6.5.0"
From 25382329b9f1c64022161172b034d0cde839ac89 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 15:53:32 -0400
Subject: [PATCH 20/37] fix: listing of `add-on-notes`
---
packages/addon-notes/src/index.js | 11 ++++++++---
packages/addon-notes/src/register.js | 17 +++++++++++++----
2 files changed, 21 insertions(+), 7 deletions(-)
diff --git a/packages/addon-notes/src/index.js b/packages/addon-notes/src/index.js
index 318effe60a8a..a5bb04b4c53b 100644
--- a/packages/addon-notes/src/index.js
+++ b/packages/addon-notes/src/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
import addons from '@kadira/storybook-addons';
export class WithNotes extends React.Component {
@@ -13,7 +13,12 @@ export class WithNotes extends React.Component {
}
}
+WithNotes.defaultProps = {
+ children: null,
+ notes: '',
+};
+
WithNotes.propTypes = {
- children: React.PropTypes.node,
- notes: React.PropTypes.string,
+ children: PropTypes.node,
+ notes: PropTypes.string,
};
diff --git a/packages/addon-notes/src/register.js b/packages/addon-notes/src/register.js
index 5257c94db88a..052071991532 100644
--- a/packages/addon-notes/src/register.js
+++ b/packages/addon-notes/src/register.js
@@ -1,4 +1,5 @@
-import React from 'react';
+/* eslint-disable react/no-danger */
+import React, { PropTypes } from 'react';
import addons from '@kadira/storybook-addons';
const styles = {
@@ -48,7 +49,6 @@ export class Notes extends React.Component {
render() {
const { text } = this.state;
const textAfterFormatted = text ? text.trim().replace(/\n/g, ' ') : '';
-
return (
@@ -57,9 +57,18 @@ export class Notes extends React.Component {
}
}
+Notes.defaultProps = {
+ api: { onStory: () => {} },
+};
+
Notes.propTypes = {
- channel: React.PropTypes.object,
- api: React.PropTypes.object,
+ channel: React.PropTypes.shape({
+ on: PropTypes.func.isRequired,
+ removeListener: PropTypes.func.isRequired,
+ }).isRequired,
+ api: React.PropTypes.shape({
+ onStory: PropTypes.func,
+ }),
};
// Register the addon with a unique name.
From d1d2bfa09306e0fa8316b9feaef4a0dd02cf4727 Mon Sep 17 00:00:00 2001
From: Ned Schwartz
Date: Sat, 29 Apr 2017 20:38:25 -0400
Subject: [PATCH 21/37] fix: linting for `addon-knobs` package
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
note: didn’t tackle jsx-a11y on this pass.
---
packages/addon-knobs/src/components/Panel.js | 12 +++++--
.../addon-knobs/src/components/PropField.js | 5 ++-
.../addon-knobs/src/components/PropForm.js | 13 +++++--
.../addon-knobs/src/components/WrapStory.js | 25 ++++++++++---
.../addon-knobs/src/components/types/Array.js | 14 ++++++--
.../src/components/types/Boolean.js | 16 +++++++--
.../addon-knobs/src/components/types/Color.js | 22 ++++++++----
.../src/components/types/Date/index.js | 35 ++++++++++---------
.../src/components/types/Number.js | 22 +++++++++---
.../src/components/types/Object.js | 14 ++++++--
.../src/components/types/Select.js | 14 ++++++--
.../addon-knobs/src/components/types/Text.js | 14 ++++++--
12 files changed, 157 insertions(+), 49 deletions(-)
diff --git a/packages/addon-knobs/src/components/Panel.js b/packages/addon-knobs/src/components/Panel.js
index 1ac699a1ffd1..98e54db0eeaf 100644
--- a/packages/addon-knobs/src/components/Panel.js
+++ b/packages/addon-knobs/src/components/Panel.js
@@ -122,7 +122,13 @@ export default class Panel extends React.Component {
}
Panel.propTypes = {
- channel: PropTypes.object,
- onReset: PropTypes.object,
- api: PropTypes.object,
+ channel: PropTypes.shape({
+ emit: PropTypes.func,
+ on: PropTypes.func,
+ removeListener: PropTypes.func,
+ }).isRequired,
+ api: PropTypes.shape({
+ getQueryParam: PropTypes.func,
+ setQueryParams: PropTypes.func,
+ }).isRequired,
};
diff --git a/packages/addon-knobs/src/components/PropField.js b/packages/addon-knobs/src/components/PropField.js
index fc81128deea1..f686f07b3449 100644
--- a/packages/addon-knobs/src/components/PropField.js
+++ b/packages/addon-knobs/src/components/PropField.js
@@ -63,6 +63,9 @@ export default class PropField extends React.Component {
}
PropField.propTypes = {
+ knob: PropTypes.shape({
+ name: PropTypes.string,
+ value: PropTypes.string,
+ }),
onChange: PropTypes.func.isRequired,
- knob: PropTypes.object,
};
diff --git a/packages/addon-knobs/src/components/PropForm.js b/packages/addon-knobs/src/components/PropForm.js
index 77f31f55f0b9..074fa3bbc12e 100644
--- a/packages/addon-knobs/src/components/PropForm.js
+++ b/packages/addon-knobs/src/components/PropForm.js
@@ -42,7 +42,7 @@ export default class propForm extends React.Component {
type={knob.type}
value={knob.value}
knob={knob}
- onChange={this._onFieldChange.bind(null, knob.name, knob.type)}
+ onChange={() => this._onFieldChange(knob.name, knob.type)}
/>
))}
@@ -52,7 +52,16 @@ export default class propForm extends React.Component {
propForm.displayName = 'propForm';
+propForm.defaultProps = {
+ knobs: [],
+};
+
propForm.propTypes = {
- knobs: PropTypes.array.isRequired,
+ knobs: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string,
+ value: PropTypes.string,
+ }),
+ ),
onFieldChange: PropTypes.func.isRequired,
};
diff --git a/packages/addon-knobs/src/components/WrapStory.js b/packages/addon-knobs/src/components/WrapStory.js
index 9e6ae22fd3f0..c92e4b2a53b1 100644
--- a/packages/addon-knobs/src/components/WrapStory.js
+++ b/packages/addon-knobs/src/components/WrapStory.js
@@ -62,10 +62,27 @@ export default class WrapStory extends React.Component {
}
}
+WrapStory.defaultProps = {
+ context: {},
+ initialContent: {},
+ storyFn: context => context,
+};
+
WrapStory.propTypes = {
- context: PropTypes.object,
+ context: PropTypes.object, // eslint-disable-line react/forbid-prop-types
storyFn: PropTypes.func,
- channel: PropTypes.object,
- knobStore: PropTypes.object,
- initialContent: PropTypes.object,
+ channel: React.PropTypes.shape({
+ on: PropTypes.func,
+ removeListener: PropTypes.func,
+ }).isRequired,
+ knobStore: PropTypes.shape({
+ channel: PropTypes.func,
+ get: PropTypes.func,
+ getAll: PropTypes.func,
+ markAllUnused: PropTypes.func,
+ reset: PropTypes.func,
+ subscribe: PropTypes.func,
+ unsubscribe: PropTypes.func,
+ }).isRequired,
+ initialContent: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};
diff --git a/packages/addon-knobs/src/components/types/Array.js b/packages/addon-knobs/src/components/types/Array.js
index 30fa28c2b2f8..56705553195c 100644
--- a/packages/addon-knobs/src/components/types/Array.js
+++ b/packages/addon-knobs/src/components/types/Array.js
@@ -22,7 +22,9 @@ class ArrayType extends React.Component {
return (
{this.state.displayColorPicker
? {
- this.popover = e;
+ style={styles.popover}
+ ref={e => {
+ this.popover = e;
}}
- >
- onChange(color.hex)} />
-
+ >
+ onChange(color.hex)} />
+
: null}
);
}
}
+ColorType.defaultProps = {
+ knob: {},
+ onChange: value => value,
+};
+
ColorType.propTypes = {
- knob: PropTypes.object,
+ knob: PropTypes.shape({
+ name: PropTypes.string,
+ value: PropTypes.string,
+ }),
onChange: PropTypes.func,
};
diff --git a/packages/addon-knobs/src/components/types/Date/index.js b/packages/addon-knobs/src/components/types/Date/index.js
index 916d0ff84fc7..1e441517c7d1 100644
--- a/packages/addon-knobs/src/components/types/Date/index.js
+++ b/packages/addon-knobs/src/components/types/Date/index.js
@@ -21,24 +21,27 @@ const customStyle = `
insertCss(style);
insertCss(customStyle);
-class DateType extends React.Component {
- render() {
- const { knob, onChange } = this.props;
- return (
-
- onChange(date.valueOf())}
- />
-
- );
- }
-}
+const DateType = ({ knob, onChange }) => (
+
+ onChange(date.valueOf())}
+ />
+
+);
+
+DateType.defaultProps = {
+ knob: {},
+ onChange: value => value,
+};
DateType.propTypes = {
- knob: PropTypes.object,
+ knob: PropTypes.shape({
+ name: PropTypes.string,
+ value: PropTypes.string,
+ }),
onChange: PropTypes.func,
};
diff --git a/packages/addon-knobs/src/components/types/Number.js b/packages/addon-knobs/src/components/types/Number.js
index 4f6a3ffab40e..4cbf4b9b38a2 100644
--- a/packages/addon-knobs/src/components/types/Number.js
+++ b/packages/addon-knobs/src/components/types/Number.js
@@ -28,11 +28,13 @@ class NumberType extends React.Component {
return (
{
+ this.input = c;
+ }}
style={styles}
value={knob.value}
type="number"
- onChange={() => onChange(parseFloat(this.refs.input.value))}
+ onChange={() => onChange(parseFloat(this.input.value))}
/>
);
}
@@ -43,14 +45,16 @@ class NumberType extends React.Component {
return (
{
+ this.input = c;
+ }}
style={styles}
value={knob.value}
type="range"
min={knob.min}
max={knob.max}
step={knob.step}
- onChange={() => onChange(parseFloat(this.refs.input.value))}
+ onChange={() => onChange(parseFloat(this.input.value))}
/>
);
}
@@ -62,8 +66,16 @@ class NumberType extends React.Component {
}
}
+NumberType.defaultProps = {
+ knob: {},
+ onChange: value => value,
+};
+
NumberType.propTypes = {
- knob: PropTypes.object,
+ knob: PropTypes.shape({
+ name: PropTypes.string,
+ value: PropTypes.string,
+ }),
onChange: PropTypes.func,
};
diff --git a/packages/addon-knobs/src/components/types/Object.js b/packages/addon-knobs/src/components/types/Object.js
index d78a7a5aa88f..ffb876765fc0 100644
--- a/packages/addon-knobs/src/components/types/Object.js
+++ b/packages/addon-knobs/src/components/types/Object.js
@@ -69,7 +69,9 @@ class ObjectType extends React.Component {
return (
diff --git a/lib/ui/src/modules/ui/components/left_panel/stories.js b/lib/ui/src/modules/ui/components/left_panel/stories.js
index 504e72c8bb59..507eb6a46c5f 100755
--- a/lib/ui/src/modules/ui/components/left_panel/stories.js
+++ b/lib/ui/src/modules/ui/components/left_panel/stories.js
@@ -54,7 +54,13 @@ class Stories extends React.Component {
return (
-
+
{story}
@@ -70,11 +76,11 @@ class Stories extends React.Component {
style.fontWeight = 'bold';
return (
-
+
{kind}
-
+
{stories.map(this.renderStory)}
@@ -84,7 +90,7 @@ class Stories extends React.Component {
return (
-
+
{kind}
@@ -95,7 +101,7 @@ class Stories extends React.Component {
const { stories } = this.props;
return (
-
+
{stories.map(this.renderKind)}
diff --git a/packages/getstorybook/generators/.eslintrc.js b/packages/getstorybook/generators/.eslintrc.js
deleted file mode 100644
index 1daf50a7c3f2..000000000000
--- a/packages/getstorybook/generators/.eslintrc.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const error = 2;
-const warn = 1;
-const ignore = 0;
-
-module.exports = {
- rules: {
- 'import/no-extraneous-dependencies': ignore,
- 'import/no-unresolved': ignore,
- 'import/extensions': ignore,
- 'import/extensions': ignore,
- 'no-new-func': ignore,
- 'global-require': ignore,
- },
-};
diff --git a/packages/react-storybook/src/server/track_usage.js b/packages/react-storybook/src/server/track_usage.js
deleted file mode 100644
index 0f00e42065da..000000000000
--- a/packages/react-storybook/src/server/track_usage.js
+++ /dev/null
@@ -1,91 +0,0 @@
-// ### WHAT?
-//
-// We will track anonymous usage of how you use storybook.
-// We don't want any personal information.
-// We just need to collect following information
-//
-// * How many time a user runs start-storybook a day
-//
-// We will send a ping to our server when you run storybook with above information.
-
-// ### WHY?
-//
-// We are maintaining React Storybook and we want to improve it.
-// We also working on storybooks.io which is storybook related service.
-// In order to get a real picture about the storybook usage,
-// we need to get some real usage stats, not the amount of NPM downloads.
-// This is why we do this.
-
-// ### CAN I STOP THIS?
-//
-// You(or your company) may have certain policies.
-// If so, you can stop sending these metrics.
-// To do that, use --dont-track flag when running React Storybook.
-// start-storybook --dont-track -p 9001
-
-// ### HELP US?
-//
-// Maintaining a open source project is hard.
-// It's even harder for a startup like us (Kadira)
-// Help us to make storybook better by sending these few metrics.
-// Based on these metrics, we could improve storybook and build a profitable
-// service around it. With that, we could continue to maintain and
-// improve Storybook.
-
-import ConfigStore from 'configstore';
-import UUID from 'uuid';
-import request from 'request';
-
-const logger = console;
-
-let DONT_TRACK = false;
-
-export function getStore() {
- const key = 'react-storybook-usage';
- const store = new ConfigStore(key);
- return store;
-}
-
-export function track() {
- if (DONT_TRACK) return;
-
- const store = getStore();
-
- // Just a hash to aggregate metrics. Don't use any personal info.
- let userId = store.get('userId');
- if (!userId) {
- userId = UUID.v4();
- store.set('userId', userId);
- }
-
- const pkg = require('../../package.json'); // eslint-disable-line
-
- // We don't wanna worry about the success or failure of this.
- request.post(
- 'https://ping.getstorybook.io/react-storybook-usage',
- {
- json: {
- userId,
- version: pkg.version,
- },
- },
- () => {},
- );
-
- if (!store.get('startTrackingOn')) {
- store.set('startTrackingOn', Date.now());
- }
-
- const pingsSent = store.get('pingsSent') || 0;
- store.set('pingsSent', pingsSent + 1);
-
- if (pingsSent < 5) {
- logger.log(' We will collect some anonymous usage stats of how you use storybook.');
- logger.log(' See why?: https://getstorybook.io/tracking');
- logger.log();
- }
-}
-
-export function dontTrack() {
- DONT_TRACK = true;
-}
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/usplit.js b/packages/storybook-ui/src/modules/ui/components/layout/usplit.js
deleted file mode 100644
index 80dc23f531f7..000000000000
--- a/packages/storybook-ui/src/modules/ui/components/layout/usplit.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const gripSize = 1;
-const splitSize = 10;
-
-const wrapStyle = (shift, split) =>
- (split === 'vertical'
- ? {
- width: splitSize,
- marginLeft: shift - splitSize / 2,
- marginRight: -shift - splitSize / 2,
- position: 'relative',
- }
- : {
- /* horizontal */
- height: splitSize,
- marginTop: shift - splitSize / 2,
- marginBottom: -shift - splitSize / 2,
- position: 'relative',
- });
-
-const spanStyle = split =>
- (split === 'vertical'
- ? {
- width: gripSize,
- height: 20,
- left: splitSize / 2 - (gripSize + 2) / 2,
- top: '50%',
- position: 'absolute',
- borderLeft: 'solid 1px rgba(0,0,0,0.1)',
- borderRight: 'solid 1px rgba(0,0,0,0.1)',
- }
- : {
- /* horizontal */
- height: gripSize,
- width: 20,
- top: splitSize / 2 - (gripSize + 2) / 2,
- left: '50%',
- position: 'absolute',
- borderTop: 'solid 1px rgba(0,0,0,0.1)',
- borderBottom: 'solid 1px rgba(0,0,0,0.1)',
- });
-
-const USplit = ({ shift, split }) => (
-
-
-
-);
-
-USplit.propTypes = {
- shift: PropTypes.number,
- split: PropTypes.oneOf(['vertical', 'horizontal']),
-};
-
-USplit.defaultProps = {
- shift: 0,
- split: 'vertical',
-};
-
-export default USplit;
diff --git a/scripts/prepublish.js b/scripts/prepublish.js
index 8a02b8acd3ea..d13952b9e4c1 100644
--- a/scripts/prepublish.js
+++ b/scripts/prepublish.js
@@ -3,6 +3,7 @@ const shell = require('shelljs');
const chalk = require('chalk');
const packageJson = require('../package.json');
+
shell.echo(chalk.bold(`${packageJson.name}@${packageJson.version}`));
shell.echo(chalk.gray('\n=> Clean dist.'));
From d55bc6ad4b2a6cd1d877cbec71a86dc42036e8a7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 18 May 2017 18:33:51 +0200
Subject: [PATCH 29/37] FIX linting
---
addons/storyshots/package.json | 1 +
addons/storyshots/src/index.js | 2 ++
app/react-native/package.json | 7 ++++---
app/react-native/src/index.js | 9 +++++----
examples/test-cra/src/stories/index.js | 2 ++
lib/cli/generators/METEOR/template/.stories/Button.js | 2 ++
lib/cli/generators/METEOR/template/.stories/Welcome.js | 2 ++
lib/cli/generators/METEOR/template/.stories/index.js | 2 ++
lib/cli/generators/METEOR/template/.storybook/addons.js | 2 ++
lib/cli/generators/METEOR/template/.storybook/config.js | 2 ++
lib/cli/generators/REACT/template/.storybook/addons.js | 2 ++
lib/cli/generators/REACT/template/.storybook/config.js | 2 ++
lib/cli/generators/REACT/template/stories/Button.js | 2 ++
lib/cli/generators/REACT/template/stories/Welcome.js | 2 ++
.../template/storybook/stories/Button/index.android.js | 2 ++
.../template/storybook/stories/Button/index.ios.js | 2 ++
.../REACT_SCRIPTS/template/.storybook/addons.js | 2 ++
.../REACT_SCRIPTS/template/.storybook/config.js | 2 ++
.../REACT_SCRIPTS/template/src/stories/Button.js | 2 ++
.../REACT_SCRIPTS/template/src/stories/Welcome.js | 2 ++
20 files changed, 44 insertions(+), 7 deletions(-)
diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index 428fcc4b60ea..2a03ff56825b 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -28,6 +28,7 @@
"@storybook/addons": "^3.0.0-alpha.0",
"@storybook/channels": "^3.0.0-alpha.0",
"@storybook/react": "^3.0.0-alpha.0",
+ "babel-core": "^6.24.1",
"babel-runtime": "^6.23.0",
"prop-types": "^15.5.8",
"read-pkg-up": "^2.0.0"
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index ae7ab2f10511..cb636d5c95e0 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -4,6 +4,7 @@ import readPkgUp from 'read-pkg-up';
import addons from '@storybook/addons';
import runWithRequireContext from './require_context';
import createChannel from './storybook-channel-mock';
+
const { describe, it, expect } = global;
let storybook;
@@ -24,6 +25,7 @@ export default function testStorySnapshots(options = {}) {
if (isStorybook) {
storybook = require.requireActual('@storybook/react');
+
const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default;
const configDirPath = path.resolve(options.configPath || '.storybook');
configPath = path.join(configDirPath, 'config.js');
diff --git a/app/react-native/package.json b/app/react-native/package.json
index b14f17975530..5caefd89e1bb 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -31,7 +31,7 @@
"babel-cli": "^6.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
- "react-native": "^0.43.3"
+ "react-native": "^0.44.0"
},
"dependencies": {
"@storybook/addon-actions": "^3.0.0-alpha.0",
@@ -39,7 +39,7 @@
"@storybook/addons": "^3.0.0-alpha.0",
"@storybook/channel-websocket": "^3.0.0-alpha.0",
"@storybook/ui": "^3.0.0-alpha.0",
- "autoprefixer": "^7.0.1",
+ "autoprefixer": "^7.1.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-syntax-async-functions": "^6.13.0",
@@ -71,6 +71,7 @@
"uuid": "^3.0.1",
"webpack": "^2.4.1",
"webpack-dev-middleware": "^1.10.1",
- "webpack-hot-middleware": "^2.18.0"
+ "webpack-hot-middleware": "^2.18.0",
+ "ws": "^3.0.0"
}
}
diff --git a/app/react-native/src/index.js b/app/react-native/src/index.js
index 1e67a4740ae6..8738916514c3 100644
--- a/app/react-native/src/index.js
+++ b/app/react-native/src/index.js
@@ -1,4 +1,9 @@
import deprecate from 'util-deprecate';
+
+// NOTE export these to keep backwards compatibility
+import { action as deprecatedAction } from '@storybook/addon-actions';
+import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
+
import Preview from './preview';
const preview = new Preview();
@@ -10,10 +15,6 @@ export const configure = preview.configure.bind(preview);
export const getStorybook = preview.getStorybook.bind(preview);
export const getStorybookUI = preview.getStorybookUI.bind(preview);
-// NOTE export these to keep backwards compatibility
-import { action as deprecatedAction } from '@storybook/addon-actions';
-import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
-
export const action = deprecate(
deprecatedAction,
'@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/packages/addon-actions',
diff --git a/examples/test-cra/src/stories/index.js b/examples/test-cra/src/stories/index.js
index 87e31def937b..e1e8ecdde4da 100644
--- a/examples/test-cra/src/stories/index.js
+++ b/examples/test-cra/src/stories/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
import { storiesOf } from '@storybook/react';
diff --git a/lib/cli/generators/METEOR/template/.stories/Button.js b/lib/cli/generators/METEOR/template/.stories/Button.js
index 2f3937ce2c96..87777532c2f5 100644
--- a/lib/cli/generators/METEOR/template/.stories/Button.js
+++ b/lib/cli/generators/METEOR/template/.stories/Button.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import PropTypes from 'prop-types';
import React from 'react';
diff --git a/lib/cli/generators/METEOR/template/.stories/Welcome.js b/lib/cli/generators/METEOR/template/.stories/Welcome.js
index 6b650029538b..dfb9021530ed 100644
--- a/lib/cli/generators/METEOR/template/.stories/Welcome.js
+++ b/lib/cli/generators/METEOR/template/.stories/Welcome.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/lib/cli/generators/METEOR/template/.stories/index.js b/lib/cli/generators/METEOR/template/.stories/index.js
index 1e71865f35e7..362bce42fba4 100644
--- a/lib/cli/generators/METEOR/template/.stories/index.js
+++ b/lib/cli/generators/METEOR/template/.stories/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
import { storiesOf } from '@storybook/react';
diff --git a/lib/cli/generators/METEOR/template/.storybook/addons.js b/lib/cli/generators/METEOR/template/.storybook/addons.js
index 6aed412d04af..967b20533fe6 100644
--- a/lib/cli/generators/METEOR/template/.storybook/addons.js
+++ b/lib/cli/generators/METEOR/template/.storybook/addons.js
@@ -1,2 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
diff --git a/lib/cli/generators/METEOR/template/.storybook/config.js b/lib/cli/generators/METEOR/template/.storybook/config.js
index 140143dad399..308cc4f3e66e 100644
--- a/lib/cli/generators/METEOR/template/.storybook/config.js
+++ b/lib/cli/generators/METEOR/template/.storybook/config.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import { configure } from '@storybook/react';
function loadStories() {
diff --git a/lib/cli/generators/REACT/template/.storybook/addons.js b/lib/cli/generators/REACT/template/.storybook/addons.js
index 6aed412d04af..967b20533fe6 100644
--- a/lib/cli/generators/REACT/template/.storybook/addons.js
+++ b/lib/cli/generators/REACT/template/.storybook/addons.js
@@ -1,2 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
diff --git a/lib/cli/generators/REACT/template/.storybook/config.js b/lib/cli/generators/REACT/template/.storybook/config.js
index 9154670ab327..00e315321d39 100644
--- a/lib/cli/generators/REACT/template/.storybook/config.js
+++ b/lib/cli/generators/REACT/template/.storybook/config.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import { configure } from '@storybook/react';
function loadStories() {
diff --git a/lib/cli/generators/REACT/template/stories/Button.js b/lib/cli/generators/REACT/template/stories/Button.js
index 2f3937ce2c96..87777532c2f5 100644
--- a/lib/cli/generators/REACT/template/stories/Button.js
+++ b/lib/cli/generators/REACT/template/stories/Button.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import PropTypes from 'prop-types';
import React from 'react';
diff --git a/lib/cli/generators/REACT/template/stories/Welcome.js b/lib/cli/generators/REACT/template/stories/Welcome.js
index 956fd473dd49..f853827f5632 100644
--- a/lib/cli/generators/REACT/template/stories/Welcome.js
+++ b/lib/cli/generators/REACT/template/stories/Welcome.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js
index b8a0d0870899..7a285bc65e46 100644
--- a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React, { PropTypes } from 'react';
import { TouchableNativeFeedback } from 'react-native';
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js
index 18598ac78374..035cacc61e99 100644
--- a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React, { PropTypes } from 'react';
import { TouchableHighlight } from 'react-native';
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/addons.js b/lib/cli/generators/REACT_SCRIPTS/template/.storybook/addons.js
index 6aed412d04af..967b20533fe6 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/addons.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template/.storybook/addons.js
@@ -1,2 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js b/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js
index 35430210ce65..a3e9bb446cb2 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import { configure } from '@storybook/react';
function loadStories() {
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js
index 2f3937ce2c96..87777532c2f5 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import PropTypes from 'prop-types';
import React from 'react';
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
index 6b650029538b..dfb9021530ed 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
import PropTypes from 'prop-types';
From 22b4b94aa0e3054088ff5cc2342f7ea8d925aa97 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 18 May 2017 19:48:47 +0200
Subject: [PATCH 30/37] FIX linting
---
addons/knobs/package.json | 3 ++-
addons/knobs/src/components/Panel.js | 3 ++-
addons/knobs/src/components/PropForm.js | 2 +-
addons/notes/src/register.js | 2 ++
addons/storyshots/src/index.js | 12 ++++++------
5 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index f511b25f5aa3..fd0463fa4e37 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -14,9 +14,10 @@
"publish-storybook": "bash .scripts/publish_storybook.sh"
},
"devDependencies": {
- "@storybook/react": "^3.0.0-alpha.0",
+ "@storybook/addons": "*",
"@types/node": "^7.0.12",
"@types/react": "^15.0.21",
+ "enzyme": "^2.8.2",
"git-url-parse": "^6.2.2",
"raw-loader": "^0.5.1",
"react": "^15.5.4",
diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
index 98e54db0eeaf..a87610a7ef19 100644
--- a/addons/knobs/src/components/Panel.js
+++ b/addons/knobs/src/components/Panel.js
@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types';
import React from 'react';
+import PropTypes from 'prop-types';
+
import PropForm from './PropForm';
import Types from './types';
diff --git a/addons/knobs/src/components/PropForm.js b/addons/knobs/src/components/PropForm.js
index 074fa3bbc12e..bd7ce3458eed 100644
--- a/addons/knobs/src/components/PropForm.js
+++ b/addons/knobs/src/components/PropForm.js
@@ -1,7 +1,7 @@
/* eslint no-underscore-dangle: 0 */
-import PropTypes from 'prop-types';
import React from 'react';
+import PropTypes from 'prop-types';
import PropField from './PropField';
diff --git a/addons/notes/src/register.js b/addons/notes/src/register.js
index 4198ae45d10e..3bbdb4d302ee 100644
--- a/addons/notes/src/register.js
+++ b/addons/notes/src/register.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
import addons from '@storybook/addons';
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index cb636d5c95e0..ad30af73269e 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -26,16 +26,18 @@ export default function testStorySnapshots(options = {}) {
if (isStorybook) {
storybook = require.requireActual('@storybook/react');
- const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default;
+ // eslint-disable-next-line global-require
+ const { default: loadBabelConfig } = require('@storybook/react/dist/server/babel_config');
const configDirPath = path.resolve(options.configPath || '.storybook');
+ const babelConfig = loadBabelConfig(configDirPath);
+
configPath = path.join(configDirPath, 'config.js');
- const content = babel.transformFileSync(configPath, babelConfig).code;
+ const { code: content } = babel.transformFileSync(configPath, babelConfig);
const contextOpts = {
filename: configPath,
dirname: configDirPath,
};
- const babelConfig = loadBabelConfig(configDirPath);
runWithRequireContext(content, contextOpts);
} else if (isRNStorybook) {
@@ -53,9 +55,7 @@ export default function testStorySnapshots(options = {}) {
const suit = options.suit || 'Storyshots';
const stories = storybook.getStorybook();
- // Added not to break existing storyshots configs (can be removed in a future major release)
- options.storyNameRegex = options.storyNameRegex || options.storyRegex;
-
+ /* eslint-disable no-continue, no-restricted-syntax */
for (const group of stories) {
if (options.storyKindRegex && !group.kind.match(options.storyKindRegex)) {
continue;
From e03aa55b8415c0c881edaec8f27bb402418ea833 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 18 May 2017 21:54:50 +0200
Subject: [PATCH 31/37] FIX linting
---
addons/knobs/src/components/PropField.js | 2 +-
examples/test-cra/package.json | 5 +-
examples/test-cra/src/index.js | 2 +
examples/test-cra/src/stories/Button.js | 10 +++-
examples/test-cra/src/stories/Welcome.js | 70 ++++++++++++++----------
lib/channel-postmessage/package.json | 1 +
lib/channel-postmessage/src/index.js | 36 +++++-------
7 files changed, 72 insertions(+), 54 deletions(-)
diff --git a/addons/knobs/src/components/PropField.js b/addons/knobs/src/components/PropField.js
index 77ddc50e3b76..f29cc7c6aad2 100644
--- a/addons/knobs/src/components/PropField.js
+++ b/addons/knobs/src/components/PropField.js
@@ -1,4 +1,4 @@
-/* eslint no-underscore-dangle: 0 */
+/* eslint-disable no-underscore-dangle */
import PropTypes from 'prop-types';
import React from 'react';
diff --git a/examples/test-cra/package.json b/examples/test-cra/package.json
index 48132c3e74aa..012230a5958d 100644
--- a/examples/test-cra/package.json
+++ b/examples/test-cra/package.json
@@ -11,16 +11,17 @@
"test": "react-scripts test --env=jsdom"
},
"dependencies": {
+ "global": "^4.3.2",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
- "@storybook/react": "file:../../app/react",
"@storybook/addon-actions": "file:../../addons/actions",
"@storybook/addon-links": "file:../../addons/links",
"@storybook/addons": "file:../../lib/addons",
- "@storybook/channels": "file:../../lib/channels",
"@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
+ "@storybook/channels": "file:../../lib/channels",
+ "@storybook/react": "file:../../app/react",
"@storybook/ui": "file:../../lib/ui",
"react-scripts": "0.9.5"
},
diff --git a/examples/test-cra/src/index.js b/examples/test-cra/src/index.js
index 5d76a18a8534..0d9b8750cfaf 100644
--- a/examples/test-cra/src/index.js
+++ b/examples/test-cra/src/index.js
@@ -1,5 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import { document } from 'global';
+
import App from './App';
import './index.css';
diff --git a/examples/test-cra/src/stories/Button.js b/examples/test-cra/src/stories/Button.js
index f4288d393484..87777532c2f5 100644
--- a/examples/test-cra/src/stories/Button.js
+++ b/examples/test-cra/src/stories/Button.js
@@ -1,3 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import PropTypes from 'prop-types';
import React from 'react';
const buttonStyles = {
@@ -17,8 +20,11 @@ const Button = ({ children, onClick }) => (
);
Button.propTypes = {
- children: React.PropTypes.string.isRequired,
- onClick: React.PropTypes.func,
+ children: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+};
+Button.defaultProps = {
+ onClick: () => {},
};
export default Button;
diff --git a/examples/test-cra/src/stories/Welcome.js b/examples/test-cra/src/stories/Welcome.js
index 50979fcd203d..f853827f5632 100644
--- a/examples/test-cra/src/stories/Welcome.js
+++ b/examples/test-cra/src/stories/Welcome.js
@@ -1,4 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
+import PropTypes from 'prop-types';
const styles = {
main: {
@@ -29,29 +32,22 @@ const styles = {
color: '#3a3a3a',
},
- codeBlock: {
- backgroundColor: '#f3f2f2',
- padding: '1px 10px',
- margin: '10px 0',
+ note: {
+ opacity: 0.5,
},
};
-const codeBlock = `
-// Add this code to "src/stories/index.js"
-
-import '../index.css';
-import App from '../App';
-
-storiesOf('App', module)
- .add('default view', () => (
- <App />
- ))
-`;
+const log = () => console.log('Welcome to storybook!');
export default class Welcome extends React.Component {
- showApp(e) {
- e.preventDefault();
- if (this.props.showApp) this.props.showApp();
+ constructor(props) {
+ super(props);
+ this.clickHandler = event => {
+ event.preventDefault();
+
+ const { showApp } = this.props;
+ showApp();
+ };
}
render() {
@@ -75,7 +71,7 @@ export default class Welcome extends React.Component {
See these sample
{' '}
- stories
+ stories
{' '}
for a component called
{' '}
@@ -85,27 +81,45 @@ export default class Welcome extends React.Component {
Just like that, you can add your own components as stories.
- Here's how to add your App
component as a story.
-
${codeBlock}` }}
- />
+ You can also edit those components and see changes right away.
+
+ (Try editing the
Button
component
+ located at
src/stories/Button.js
.)
- Usually we create stories with smaller UI components in the app.
+ This is just one thing you can do with Storybook.
+
Have a look at the
{' '}
- Writing Stories
+ Storybook
{' '}
- section in our documentation.
+ repo for more information.
+
+
+ NOTE:
+
+ Have a look at the
+ {' '}
+ .storybook/webpack.config.js
+ {' '}
+ to add webpack
+ loaders and plugins you are using in this project.
);
}
}
+
+Welcome.propTypes = {
+ showApp: PropTypes.function,
+};
+Welcome.defaultProps = {
+ showApp: log,
+};
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index c220f82e441b..8ab9a3e7296a 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"@storybook/channels": "^3.0.0-alpha.0",
+ "global": "^4.3.2",
"json-stringify-safe": "^5.0.1"
}
}
diff --git a/lib/channel-postmessage/src/index.js b/lib/channel-postmessage/src/index.js
index 7f33c58535fe..47e3d5818764 100644
--- a/lib/channel-postmessage/src/index.js
+++ b/lib/channel-postmessage/src/index.js
@@ -1,13 +1,11 @@
+/* eslint-disable no-underscore-dangle */
+
+import { window, document } from 'global';
import Channel from '@storybook/channels';
import stringify from 'json-stringify-safe';
export const KEY = 'storybook-channel';
-export default function createChannel({ page }) {
- const transport = new PostmsgTransport({ page });
- return new Channel({ transport });
-}
-
export class PostmsgTransport {
constructor(config) {
this._config = config;
@@ -58,22 +56,18 @@ export class PostmsgTransport {
return window.parent;
}
- _handleEvent(e) {
- if (!e.data || typeof e.data !== 'string') {
- return;
- }
- let data;
+ _handleEvent(rawEvent) {
try {
- data = JSON.parse(e.data);
- } catch (e) {
- return null;
- }
- if (!data || typeof data !== 'object') {
- return null;
- }
- const { key, event } = data;
- if (key === KEY) {
- this._handler(event);
- }
+ const { data } = rawEvent;
+ const { key, event } = JSON.parse(data);
+ if (key === KEY) {
+ this._handler(event);
+ }
+ } catch (error) {} // eslint-disable-line
}
}
+
+export default function createChannel({ page }) {
+ const transport = new PostmsgTransport({ page });
+ return new Channel({ transport });
+}
From 22a92882b48d51ea895b919f4c06462d0cce8c29 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 18 May 2017 22:40:11 +0200
Subject: [PATCH 32/37] FIX linting
---
addons/notes/package.json | 2 +-
.../stories/required_with_context/Welcome.js | 50 +++++++++++--
examples/cra-storybook/package.json | 8 ++-
examples/cra-storybook/src/stories/Welcome.js | 70 +++++++++++--------
examples/test-cra/src/App.js | 28 ++++----
examples/test-cra/src/App.test.js | 2 +
6 files changed, 107 insertions(+), 53 deletions(-)
diff --git a/addons/notes/package.json b/addons/notes/package.json
index e21d5d91958f..aab7f7a12d0b 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -13,7 +13,7 @@
"publish-storybook": "bash .scripts/publish_storybook.sh"
},
"devDependencies": {
- "@storybook/react": "^3.0.0-alpha.0",
+ "@storybook/addons": "*",
"git-url-parse": "^6.2.2",
"react": "^15.5.4",
"react-addons-test-utils": "^15.5.1",
diff --git a/addons/storyshots/stories/required_with_context/Welcome.js b/addons/storyshots/stories/required_with_context/Welcome.js
index f252aba4efc8..f853827f5632 100644
--- a/addons/storyshots/stories/required_with_context/Welcome.js
+++ b/addons/storyshots/stories/required_with_context/Welcome.js
@@ -1,4 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
+import PropTypes from 'prop-types';
const styles = {
main: {
@@ -28,12 +31,23 @@ const styles = {
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
},
+
+ note: {
+ opacity: 0.5,
+ },
};
+const log = () => console.log('Welcome to storybook!');
+
export default class Welcome extends React.Component {
- showApp(e) {
- e.preventDefault();
- if (this.props.showApp) this.props.showApp();
+ constructor(props) {
+ super(props);
+ this.clickHandler = event => {
+ event.preventDefault();
+
+ const { showApp } = this.props;
+ showApp();
+ };
}
render() {
@@ -57,7 +71,7 @@ export default class Welcome extends React.Component {
See these sample
{' '}
- stories
+ stories
{' '}
for a component called
{' '}
@@ -70,20 +84,42 @@ export default class Welcome extends React.Component {
You can also edit those components and see changes right away.
(Try editing the Button
component
- located at stories/Button.js
.)
+ located at src/stories/Button.js
.)
This is just one thing you can do with Storybook.
Have a look at the
{' '}
-
- Storybook for React
+
+ Storybook
{' '}
repo for more information.
+
+ NOTE:
+
+ Have a look at the
+ {' '}
+ .storybook/webpack.config.js
+ {' '}
+ to add webpack
+ loaders and plugins you are using in this project.
+
);
}
}
+
+Welcome.propTypes = {
+ showApp: PropTypes.function,
+};
+Welcome.defaultProps = {
+ showApp: log,
+};
diff --git a/examples/cra-storybook/package.json b/examples/cra-storybook/package.json
index 12fd5ece265a..7974bb358145 100644
--- a/examples/cra-storybook/package.json
+++ b/examples/cra-storybook/package.json
@@ -7,7 +7,13 @@
"@storybook/addons": "*",
"@storybook/addon-actions": "*",
"@storybook/addon-links": "*",
- "react-scripts": "0.9.5"
+ "react-scripts": "0.9.5",
+ "eslint-config-prettier": "^2.0.0",
+ "eslint-plugin-import": "^2.2.0",
+ "eslint-plugin-jsx-a11y": "^5.0.1",
+ "eslint-plugin-prettier": "^2.0.1",
+ "eslint-plugin-react": "^7.0.0",
+ "eslint-plugin-jest": "^20.0.0"
},
"dependencies": {
"react": "^15.5.4",
diff --git a/examples/cra-storybook/src/stories/Welcome.js b/examples/cra-storybook/src/stories/Welcome.js
index 50979fcd203d..f853827f5632 100644
--- a/examples/cra-storybook/src/stories/Welcome.js
+++ b/examples/cra-storybook/src/stories/Welcome.js
@@ -1,4 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
import React from 'react';
+import PropTypes from 'prop-types';
const styles = {
main: {
@@ -29,29 +32,22 @@ const styles = {
color: '#3a3a3a',
},
- codeBlock: {
- backgroundColor: '#f3f2f2',
- padding: '1px 10px',
- margin: '10px 0',
+ note: {
+ opacity: 0.5,
},
};
-const codeBlock = `
-// Add this code to "src/stories/index.js"
-
-import '../index.css';
-import App from '../App';
-
-storiesOf('App', module)
- .add('default view', () => (
- <App />
- ))
-`;
+const log = () => console.log('Welcome to storybook!');
export default class Welcome extends React.Component {
- showApp(e) {
- e.preventDefault();
- if (this.props.showApp) this.props.showApp();
+ constructor(props) {
+ super(props);
+ this.clickHandler = event => {
+ event.preventDefault();
+
+ const { showApp } = this.props;
+ showApp();
+ };
}
render() {
@@ -75,7 +71,7 @@ export default class Welcome extends React.Component {
See these sample
{' '}
- stories
+ stories
{' '}
for a component called
{' '}
@@ -85,27 +81,45 @@ export default class Welcome extends React.Component {
Just like that, you can add your own components as stories.
- Here's how to add your App
component as a story.
-
${codeBlock}` }}
- />
+ You can also edit those components and see changes right away.
+
+ (Try editing the
Button
component
+ located at
src/stories/Button.js
.)
- Usually we create stories with smaller UI components in the app.
+ This is just one thing you can do with Storybook.
+
Have a look at the
{' '}
- Writing Stories
+ Storybook
{' '}
- section in our documentation.
+ repo for more information.
+
+
+ NOTE:
+
+ Have a look at the
+ {' '}
+ .storybook/webpack.config.js
+ {' '}
+ to add webpack
+ loaders and plugins you are using in this project.
);
}
}
+
+Welcome.propTypes = {
+ showApp: PropTypes.function,
+};
+Welcome.defaultProps = {
+ showApp: log,
+};
diff --git a/examples/test-cra/src/App.js b/examples/test-cra/src/App.js
index d7d52a7f38a3..2c49d780e9a9 100644
--- a/examples/test-cra/src/App.js
+++ b/examples/test-cra/src/App.js
@@ -1,21 +1,17 @@
-import React, { Component } from 'react';
+import React from 'react';
import logo from './logo.svg';
import './App.css';
-class App extends Component {
- render() {
- return (
-
-
-
-
Welcome to React
-
-
- To get started, edit src/App.js
and save to reload.
-
-
- );
- }
-}
+const App = () => (
+
+
+
+
Welcome to React
+
+
+ To get started, edit src/App.js
and save to reload.
+
+
+);
export default App;
diff --git a/examples/test-cra/src/App.test.js b/examples/test-cra/src/App.test.js
index b84af98d7203..7c29c048d76c 100644
--- a/examples/test-cra/src/App.test.js
+++ b/examples/test-cra/src/App.test.js
@@ -1,5 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import { document } from 'global';
+
import App from './App';
it('renders without crashing', () => {
From 24544af38d541340e85ed51306f6520fab8b919e Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Fri, 19 May 2017 00:21:13 +0200
Subject: [PATCH 33/37] FIX linting
---
addons/info/package.json | 1 +
addons/info/src/components/Story.js | 8 ++---
addons/info/src/components/markdown/code.js | 13 ++++---
addons/knobs/package.json | 1 +
addons/knobs/src/components/types/Color.js | 34 +++++++++++--------
addons/notes/package.json | 3 +-
addons/notes/src/index.js | 9 +++--
addons/notes/src/register.js | 9 +++--
addons/options/src/manager/index.js | 1 -
.../stories/required_with_context/Button.js | 7 ++--
.../required_with_context/Button.stories.js | 2 --
app/react/src/client/manager/preview.js | 1 +
examples/cra-storybook/src/App.test.js | 6 +++-
13 files changed, 57 insertions(+), 38 deletions(-)
diff --git a/addons/info/package.json b/addons/info/package.json
index 969e984c175a..721699ccf2ad 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -26,6 +26,7 @@
},
"dependencies": {
"babel-runtime": "^6.23.0",
+ "global": "^4.3.2",
"markdown-to-react-components": "^0.2.1",
"prop-types": "^15.5.8",
"react-addons-create-fragment": "^15.5.3"
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index a2afface1206..7f54cdb891fe 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -157,9 +157,9 @@ export default class Story extends React.Component {
{this.props.children}
- Show Info
+ Show Info
-
×
+
×
{this._getInfoHeader()}
@@ -266,7 +266,7 @@ export default class Story extends React.Component {
typeof children === 'string' ||
typeof children.type === 'string' ||
(Array.isArray(this.props.propTablesExclude) && // also ignore excluded types
- ~this.props.propTablesExclude.indexOf(children.type))
+ ~this.props.propTablesExclude.indexOf(children.type)) // eslint-disable-line no-bitwise
) {
return;
}
@@ -328,12 +328,12 @@ Story.propTypes = {
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
mtrcConf: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};
-
Story.defaultProps = {
context: null,
info: '',
children: null,
propTables: null,
+ propTablesExclude: [],
showInline: false,
showHeader: true,
showSource: true,
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
index 74f792448d44..f43d67955b89 100644
--- a/addons/info/src/components/markdown/code.js
+++ b/addons/info/src/components/markdown/code.js
@@ -43,15 +43,14 @@ export class Code extends React.Component {
}
}
-Code.defaultProps = {
- language: null,
- code: null,
-};
-
Code.propTypes = {
language: PropTypes.string,
code: PropTypes.node,
};
+Code.defaultProps = {
+ language: null,
+ code: null,
+};
export function Pre(props) {
const style = {
@@ -65,8 +64,8 @@ export function Pre(props) {
return
{props.children} ;
}
-Pre.defaultProps = { children: null };
Pre.propTypes = { children: PropTypes.node };
+Pre.defaultProps = { children: null };
export function Blockquote(props) {
const style = {
@@ -78,5 +77,5 @@ export function Blockquote(props) {
return
{props.children} ;
}
-Blockquote.defaultProps = { children: null };
Blockquote.propTypes = { children: PropTypes.node };
+Blockquote.defaultProps = { children: null };
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index fd0463fa4e37..6f03f3d70f38 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -34,6 +34,7 @@
"dependencies": {
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
+ "global": "^4.3.2",
"insert-css": "^1.0.0",
"moment": "^2.18.1",
"prop-types": "^15.5.8",
diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
index 0fbe81bb1d00..69e19d8b3711 100644
--- a/addons/knobs/src/components/types/Color.js
+++ b/addons/knobs/src/components/types/Color.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import React from 'react';
import { SketchPicker } from 'react-color';
+const conditionalRender = (condition, positive, negative) => (condition ? positive() : negative());
+
const styles = {
swatch: {
background: '#fff',
@@ -59,6 +61,7 @@ class ColorType extends React.Component {
render() {
const { knob, onChange } = this.props;
+ const { displayColorPicker } = this.state;
const colorStyle = {
width: 'auto',
height: '20px',
@@ -68,29 +71,28 @@ class ColorType extends React.Component {
};
return (
-
+
- {this.state.displayColorPicker
- ?
{
+ {conditionalRender(
+ displayColorPicker,
+ () => (
+
{
this.popover = e;
}}
- >
- onChange(color.hex)} />
-
- : null}
+ >
+
onChange(color.hex)} />
+
+ ),
+ () => null,
+ )}
);
}
}
-ColorType.defaultProps = {
- knob: {},
- onChange: value => value,
-};
-
ColorType.propTypes = {
knob: PropTypes.shape({
name: PropTypes.string,
@@ -98,6 +100,10 @@ ColorType.propTypes = {
}),
onChange: PropTypes.func,
};
+ColorType.defaultProps = {
+ knob: {},
+ onChange: value => value,
+};
ColorType.serialize = value => value;
ColorType.deserialize = value => value;
diff --git a/addons/notes/package.json b/addons/notes/package.json
index aab7f7a12d0b..948ec2e21158 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -24,7 +24,8 @@
"react": "*"
},
"dependencies": {
- "babel-runtime": "^6.23.0"
+ "babel-runtime": "^6.23.0",
+ "prop-types": "^15.5.10"
},
"optionalDependencies": {
"@types/react": "^15.0.24"
diff --git a/addons/notes/src/index.js b/addons/notes/src/index.js
index 9b39fd8ca5ed..818e3ffb39f3 100644
--- a/addons/notes/src/index.js
+++ b/addons/notes/src/index.js
@@ -1,4 +1,5 @@
import React from 'react';
+import PropTypes from 'prop-types';
import addons from '@storybook/addons';
export class WithNotes extends React.Component {
@@ -14,6 +15,10 @@ export class WithNotes extends React.Component {
}
WithNotes.propTypes = {
- children: React.PropTypes.node,
- notes: React.PropTypes.string,
+ children: PropTypes.node,
+ notes: PropTypes.string,
+};
+WithNotes.defaultProps = {
+ children: null,
+ notes: '',
};
diff --git a/addons/notes/src/register.js b/addons/notes/src/register.js
index 3bbdb4d302ee..0eee2bb8383c 100644
--- a/addons/notes/src/register.js
+++ b/addons/notes/src/register.js
@@ -1,6 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
import React from 'react';
+import PropTypes from 'prop-types';
import addons from '@storybook/addons';
const styles = {
@@ -60,8 +61,12 @@ export class Notes extends React.Component {
}
Notes.propTypes = {
- channel: React.PropTypes.object,
- api: React.PropTypes.object,
+ channel: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+ api: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+Notes.defaultProps = {
+ channel: {},
+ api: {},
};
// Register the addon with a unique name.
diff --git a/addons/options/src/manager/index.js b/addons/options/src/manager/index.js
index ae8ec0478d05..2eb416cfd1f3 100644
--- a/addons/options/src/manager/index.js
+++ b/addons/options/src/manager/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
import addons from '@storybook/addons';
import { ADDON_ID, EVENT_ID } from '../shared';
diff --git a/addons/storyshots/stories/required_with_context/Button.js b/addons/storyshots/stories/required_with_context/Button.js
index dbe0bc689d58..d357ec722337 100644
--- a/addons/storyshots/stories/required_with_context/Button.js
+++ b/addons/storyshots/stories/required_with_context/Button.js
@@ -17,13 +17,12 @@ const Button = ({ children, onClick }) => (
);
-Button.defaultProps = {
- onClick: null,
-};
-
Button.propTypes = {
children: PropTypes.string.isRequired,
onClick: PropTypes.func,
};
+Button.defaultProps = {
+ onClick: null,
+};
export default Button;
diff --git a/addons/storyshots/stories/required_with_context/Button.stories.js b/addons/storyshots/stories/required_with_context/Button.stories.js
index d72a3ceca6b1..2f67f433a677 100644
--- a/addons/storyshots/stories/required_with_context/Button.stories.js
+++ b/addons/storyshots/stories/required_with_context/Button.stories.js
@@ -2,10 +2,8 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
import Button from './Button';
-import Welcome from './Welcome';
storiesOf('Button', module)
.add('with text', () =>
Hello Button )
diff --git a/app/react/src/client/manager/preview.js b/app/react/src/client/manager/preview.js
index 899979141ad4..4f8e792d9641 100644
--- a/app/react/src/client/manager/preview.js
+++ b/app/react/src/client/manager/preview.js
@@ -23,6 +23,7 @@ class Preview extends Component {
return (