Merge pull request #2 from storybooks/webpack2

Support webpack 2
storybookjs · Apr 1, 2017 · c7636e8 · c7636e8
2 parents cbda34e + 0ac020a
commit c7636e8
Show file tree

Hide file tree

Showing 128 changed files with 12,198 additions and 2,950 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+dist
+coverage
+node_modules
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,29 @@
+{
+  "extends": [
+    "./node_modules/eslint-config-airbnb-base/rules/es6.js"
+  ],
+  "plugins": [
+    "prettier"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "rules": {
+    "strict": 0,
+    "prettier/prettier": ["warn", {
+      "printWidth": 100,
+      "tabWidth": 2,
+      "bracketSpacing": true,
+      # "trailingComma": "es5",
+      "singleQuote": true
+    }],
+    "quotes": ["warn", "single"],
+    "arrow-parens": ["warn", "as-needed"]
+    # "comma-dangle": ["warn", "always"]
+  }
+}
diff --git a/.travis.yml b/.travis.yml
@@ -9,6 +9,6 @@ node_js:
   - "5"
 before_install: ./scripts/travis/before_install.sh
 after_success: ./scripts/travis/after_success.sh
-script: npm run test
+script: npm run lint && npm run test
 git:
   depth: 1
diff --git a/package.json b/package.json
@@ -1,9 +1,16 @@
 {
   "devDependencies": {
-    "lerna": "2.0.0-beta.38"
+    "babel-eslint": "^7.2.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb-base": "^11.1.2",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-prettier": "^2.0.1",
+    "lerna": "2.0.0-beta.38",
+    "prettier": "^0.22.0"
   },
   "scripts": {
     "postinstall": "lerna bootstrap",
-    "test": "lerna run test"
+    "test": "lerna run test",
+    "lint": "eslint ."
   }
 }
diff --git a/packages/addon-knobs/.eslintrc b/packages/addon-knobs/.eslintrc
diff --git a/packages/addon-knobs/example/stories/index.js b/packages/addon-knobs/example/stories/index.js
@@ -1,25 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 import moment from 'moment';
-import {
-  withKnobs,
-  number,
-  object,
-  boolean,
-  text,
-  select,
-  date,
-  array,
-  color,
-} from '../../src';
+import { withKnobs, number, object, boolean, text, select, date, array, color } from '../../src';
 
 const stories = storiesOf('Example of Knobs', module);
 
 stories.addDecorator(withKnobs);
 
-stories.add('simple example', () => (
-  <button>{text('Label', 'Hello Button')}</button>
-));
+stories.add('simple example', () => <button>{text('Label', 'Hello Button')}</button>);
 
 stories.add('with all knobs', () => {
   const name = text('Name', 'Tom Cary');
@@ -28,76 +16,76 @@ stories.add('with all knobs', () => {
   const bold = boolean('Bold', false);
   const selectedColor = color('Color', 'black');
   const favoriteNumber = number('Favorite Number', 42);
-  const comfortTemp = number('Comfort Temp', 72, {range:true, min: 60, max: 90, step: 1});
+  const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 });
 
   const passions = array('Passions', ['Fishing', 'Skiing']);
 
   const customStyle = object('Style', {
     fontFamily: 'Arial',
-    padding: 20,
+    padding: 20
   });
 
   const style = {
     ...customStyle,
-    fontWeight: bold ? 800: 400,
-    favoriteNumber: favoriteNumber,
-    color: selectedColor,
+    fontWeight: bold ? 800 : 400,
+    favoriteNumber,
+    color: selectedColor
   };
 
   return (
     <div style={style}>
-      I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}"
+      I'm {name} and I was born on "{moment(dob).format('DD MMM YYYY')}"
       I like: <ul>{passions.map((p, i) => <li key={i}>{p}</li>)}</ul>
       <p>My favorite number is {favoriteNumber}.</p>
       <p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
     </div>
   );
-})
+});
 
 stories.add('dates Knob', () => {
   const today = date('today');
   const dob = date('DOB', null);
   const myDob = date('My DOB', new Date('July 07 1993'));
 
   return (
-    <ul style={{listStyleType:"none",listStyle:"none",paddingLeft:"15px"}}>
+    <ul style={{ listStyleType: 'none', listStyle: 'none', paddingLeft: '15px' }}>
       <li>
         <p><b>Javascript Date</b> default value, passes date value</p>
         <blockquote>
           <code>const myDob = date('My DOB', new Date('July 07 1993'));</code>
-          <pre>// I was born in: "{moment(myDob).format("DD MMM YYYY")}"</pre>
+          <pre>// I was born in: "{moment(myDob).format('DD MMM YYYY')}"</pre>
         </blockquote>
       </li>
       <li>
         <p><b>undefined</b> default value passes today's date</p>
         <blockquote>
           <code>const today = date('today');</code>
-          <pre>// Today's date is: "{moment(today).format("DD MMM YYYY")}"</pre>
+          <pre>// Today's date is: "{moment(today).format('DD MMM YYYY')}"</pre>
         </blockquote>
       </li>
       <li>
         <p><b>null</b> default value passes null value</p>
         <blockquote>
           <code>const dob = date('DOB', null);</code>
-          <pre>// You were born in: "{dob? moment(dob).format("DD MMM YYYY"): 'Please select date.'}"</pre>
+          <pre>
+            // You were born in: "{dob ? moment(dob).format('DD MMM YYYY') : 'Please select date.'}"
+          </pre>
         </blockquote>
       </li>
     </ul>
-  )
-})
+  );
+});
 
 stories.add('dynamic knobs', () => {
-  const showOptional = select('Show optional', ['yes', 'no'], 'yes')
+  const showOptional = select('Show optional', ['yes', 'no'], 'yes');
   return (
     <div>
       <div>
         {text('compulsary', 'I must be here')}
       </div>
-      { showOptional==='yes' ? <div>{text('optional', 'I can disapear')}</div> : null }
+      {showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null}
     </div>
-  )
-})
+  );
+});
 
-stories.add('without any knob', () => (
-  <button>This is a button</button>
-));
+stories.add('without any knob', () => <button>This is a button</button>);
diff --git a/packages/addon-knobs/package.json b/packages/addon-knobs/package.json
@@ -10,10 +10,7 @@
   "scripts": {
     "start": "./example/prepublish.sh",
     "prepublish": ". ./.scripts/prepublish.sh",
-    "lint": "eslint ./src",
-    "lintfix": "eslint ./src --fix",
-    "testonly": "mocha --require ./.scripts/mocha_runner ./src/**/tests/**/*.js",
-    "test": "npm run lint && npm run testonly",
+    "test": "mocha --require ./.scripts/mocha_runner ./src/**/tests/**/*.js",
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
     "storybook": "start-storybook -p 9010",
     "publish-storybook": "bash .scripts/publish_storybook.sh"
@@ -34,11 +31,6 @@
     "babel-preset-stage-2": "^6.5.0",
     "chai": "^3.5.0",
     "enzyme": "^2.2.0",
-    "eslint": "^2.7.0",
-    "eslint-config-airbnb": "^7.0.0",
-    "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-jsx-a11y": "^0.6.2",
-    "eslint-plugin-react": "^4.3.0",
     "git-url-parse": "^6.0.1",
     "jsdom": "^8.3.1",
     "mocha": "^3.1.0",

diff --git a/packages/addon-knobs/src/KnobManager.js b/packages/addon-knobs/src/KnobManager.js
@@ -28,7 +28,7 @@ export default class KnobManager {
     const knobInfo = {
       ...options,
       name,
-      defaultValue,
+      defaultValue
     };
 
     knobStore.set(name, knobInfo);
@@ -41,14 +41,14 @@ export default class KnobManager {
     let knobStore = this.knobStoreMap[key];
 
     if (!knobStore) {
-      knobStore = this.knobStoreMap[key] = new KnobStore();
+      knobStore = (this.knobStoreMap[key] = new KnobStore());
     }
 
     this.knobStore = knobStore;
     knobStore.markAllUnused();
     const initialContent = storyFn(context);
     const props = { context, storyFn, channel, knobStore, initialContent };
-    return (<WrapStory {...props} />);
+    return <WrapStory {...props} />;
   }
 
   _mayCallChannel() {
@@ -66,10 +66,13 @@ export default class KnobManager {
     }
     this.calling = true;
 
-    setTimeout(() => {
-      this.calling = false;
-      // emit to the channel and trigger a panel re-render
-      this.channel.emit('addon:knobs:setKnobs', this.knobStore.getAll());
-    }, PANEL_UPDATE_INTERVAL);
+    setTimeout(
+      () => {
+        this.calling = false;
+        // emit to the channel and trigger a panel re-render
+        this.channel.emit('addon:knobs:setKnobs', this.knobStore.getAll());
+      },
+      PANEL_UPDATE_INTERVAL
+    );
   }
 }
diff --git a/packages/addon-knobs/src/components/Panel.js b/packages/addon-knobs/src/components/Panel.js
@@ -4,12 +4,12 @@ import Types from './types';
 
 const styles = {
   panelWrapper: {
-    width: '100%',
+    width: '100%'
   },
   panel: {
     padding: '5px',
     width: 'auto',
-    position: 'relative',
+    position: 'relative'
   },
   noKnobs: {
     fontFamily: `
@@ -20,7 +20,7 @@ const styles = {
     width: '100%',
     textAlign: 'center',
     color: 'rgb(190, 190, 190)',
-    padding: '10px',
+    padding: '10px'
   },
   resetButton: {
     position: 'absolute',
@@ -33,8 +33,8 @@ const styles = {
     padding: '5px 10px',
     borderRadius: '4px 0 0 0',
     color: 'rgba(0, 0, 0, 0.5)',
-    outline: 'none',
-  },
+    outline: 'none'
+  }
 };
 
 export default class Panel extends React.Component {
@@ -57,13 +57,14 @@ export default class Panel extends React.Component {
     const queryParams = {};
     const { api, channel } = this.props;
 
-    Object.keys(knobs).forEach((name) => {
+    Object.keys(knobs).forEach(name => {
       const knob = knobs[name];
       // For the first time, get values from the URL and set them.
       if (!this.loadedFromUrl) {
         const urlValue = api.getQueryParam(`knob-${name}`);
 
-        if (urlValue !== undefined) { // If the knob value present in url
+        if (urlValue !== undefined) {
+          // If the knob value present in url
           knob.value = Types[knob.type].deserialize(urlValue);
           channel.emit('addon:knobs:knobChange', knob);
         }
@@ -88,7 +89,7 @@ export default class Panel extends React.Component {
     const newKnobs = { ...knobs };
     newKnobs[name] = {
       ...newKnobs[name],
-      ...changedKnob,
+      ...changedKnob
     };
 
     this.setState({ knobs: newKnobs });
@@ -102,14 +103,10 @@ export default class Panel extends React.Component {
 
   render() {
     const { knobs } = this.state;
-    const knobsArray = Object.keys(knobs)
-      .filter(key => (knobs[key].used))
-      .map(key => (knobs[key]));
+    const knobsArray = Object.keys(knobs).filter(key => knobs[key].used).map(key => knobs[key]);
 
     if (knobsArray.length === 0) {
-      return (
-        <div style={styles.noKnobs}>NO KNOBS</div>
-      );
+      return <div style={styles.noKnobs}>NO KNOBS</div>;
     }
 
     return (
@@ -126,5 +123,5 @@ export default class Panel extends React.Component {
 Panel.propTypes = {
   channel: React.PropTypes.object,
   onReset: React.PropTypes.object,
-  api: React.PropTypes.object,
+  api: React.PropTypes.object
 };