add commit hooks and fix bug (#638)

* add commit hooks and fix bug

* add prettier config

* format

* rebase

.eslintrc

@@ -1,5 +1,7 @@
 parser: babel-eslint
-extends: jason/react
+extends:
+  - jason/react
+  - prettier
 
 rules:
   global-require: off

.storybook/webpack.config.js

@@ -1,43 +1,19 @@
-const path = require('path');
-const Autoprefixer = require('less-plugin-autoprefix');
+const { rules, loaders, plugins, stats } = require("webpack-atoms");
 
-module.exports = {
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css?$/,
-        loaders: [ 'style', 'raw' ],
-        include: [
-          path.resolve(__dirname, '../')
-        ]
-      },
-      {
-        test: /\.less?$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'less-loader',
-            options: {
-              plugins: [
-                new Autoprefixer({
-                  browsers: ['last 2 versions', 'ie >= 10']
-                })
-              ]
-            },
-          }
-        ],
-        include: [
-          path.resolve(__dirname, '../')
-        ]
-      },
-      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
-      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
-      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
-      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
-    ]
-  }
+const browsers = ["last 2 versions", "ie >= 10"];
+
+module.exports = function(config) {
+  return {
+    ...config,
+    module: {
+      rules: [
+        rules.js(),
+        rules.fonts(),
+        rules.images(),
+        rules.css(),
+        rules.less({ browsers })
+      ]
+    },
+    plugins: [...config.plugins, plugins.extractText()]
+  };
 };

examples/.eslintrc

@@ -1,5 +1,9 @@
 
+rules:
+  no-console: off
+globals:
+  alert: false
 settings:
   import/resolver:
     webpack:
-      config: 'webpack/examples.config.js'
+      config: 'examples/webpack.config.js'

examples/Api.js

@@ -1,46 +1,50 @@
-import React from 'react';
-import transform from 'lodash/transform';
+import React from 'react'
+import transform from 'lodash/transform'
 
-import metadata from 'component-metadata-loader!react-big-calendar/lib/Calendar';
+import metadata from 'component-metadata-loader!react-big-calendar/lib/Calendar'
 
-function displayObj(obj){
+function displayObj(obj) {
   return JSON.stringify(obj, null, 2).replace(/"|'/g, '')
 }
 
-let capitalize = str => str[0].toUpperCase() + str.substr(1);
-let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');
+let capitalize = str => str[0].toUpperCase() + str.substr(1)
+let cleanDocletValue = str =>
+  str
+    .trim()
+    .replace(/^\{/, '')
+    .replace(/\}$/, '')
 
 let Api = React.createClass({
-  render(){
-    let calData = metadata.Calendar;
+  render() {
+    let calData = metadata.Calendar
 
     return (
       <div {...this.props}>
-        <h1 id='api'><a href='#api'>API</a></h1>
+        <h1 id="api">
+          <a href="#api">API</a>
+        </h1>
         <p dangerouslySetInnerHTML={{ __html: calData.descHtml }} />
 
         <h2>Props</h2>
         {Object.keys(calData.props).map(propName => {
-          let data = calData.props[propName];
+          let data = calData.props[propName]
 
-          return this.renderProp(data, propName, 'h3');
+          return this.renderProp(data, propName, 'h3')
         })}
       </div>
     )
   },
 
   renderProp(data, name, Heading) {
-    let typeInfo = this.renderType(data);
+    let typeInfo = this.renderType(data)
 
     return (
       <section key={name}>
         <Heading id={`prop-${name}`}>
           <a href={`#prop-${name}`}>
             <code>{name}</code>
           </a>
-          {data.required &&
-            <strong>{' required'}</strong>
-          }
+          {data.required && <strong>{' required'}</strong>}
           {this.renderControllableNote(data, name)}
         </Heading>
         <div dangerouslySetInnerHTML={{ __html: data.descHtml }} />
@@ -49,11 +53,13 @@ let Api = React.createClass({
           <div style={{ paddingLeft: 0 }}>
             <div>
               {'type: '}
-              { typeInfo && typeInfo.type === 'pre' ? typeInfo : <code>{typeInfo}</code> }
+              {typeInfo && typeInfo.type === 'pre' ? typeInfo : <code>{typeInfo}</code>}
             </div>
-            { data.defaultValue &&
-              <div>default: <code>{data.defaultValue.trim()}</code></div>
-            }
+            {data.defaultValue && (
+              <div>
+                default: <code>{data.defaultValue.trim()}</code>
+              </div>
+            )}
           </div>
         ) : (
           <div>
@@ -62,74 +68,75 @@ let Api = React.createClass({
             )}
           </div>
         )}
-
       </section>
     )
   },
 
   renderType(prop) {
-    let type = prop.type || {};
-    let name = getDisplayTypeName(type.name);
-    let doclets = prop.doclets || {};
+    let type = prop.type || {}
+    let name = getDisplayTypeName(type.name)
+    let doclets = prop.doclets || {}
 
     switch (name) {
       case 'node':
-	return 'any';
+        return 'any'
       case 'function':
-	return 'Function';
+        return 'Function'
       case 'elementType':
-        return 'ReactClass<any>';
+        return 'ReactClass<any>'
       case 'dateFormat':
-        return 'string | (date: Date, culture: ?string, localizer: Localizer) => string';
+        return 'string | (date: Date, culture: ?string, localizer: Localizer) => string'
       case 'dateRangeFormat':
-        return '(range: { start: Date, end: Date }, culture: ?string, localizer: Localizer) => string';
+        return '(range: { start: Date, end: Date }, culture: ?string, localizer: Localizer) => string'
       case 'object':
       case 'Object':
         if (type.value)
-          return (
-            <pre className='shape-prop'>
-              { displayObj(renderObject(type.value))}
-            </pre>
-          )
+          return <pre className="shape-prop">{displayObj(renderObject(type.value))}</pre>
 
-        return name;
+        return name
       case 'union':
         return type.value.reduce((current, val, i, list) => {
-          val = typeof val === 'string' ? { name: val } : val;
-          let item = this.renderType({ type: val });
+          val = typeof val === 'string' ? { name: val } : val
+          let item = this.renderType({ type: val })
           if (React.isValidElement(item)) {
-            item = React.cloneElement(item, {key: i});
+            item = React.cloneElement(item, { key: i })
           }
-          current = current.concat(item);
+          current = current.concat(item)
 
-          return i === (list.length - 1) ? current : current.concat(' | ');
-        }, []);
+          return i === list.length - 1 ? current : current.concat(' | ')
+        }, [])
       case 'array':
       case 'Array': {
-        let child = this.renderType({ type: type.value });
-
-        return <span>{'Array<'}{ child }{'>'}</span>;
+        let child = this.renderType({ type: type.value })
+
+        return (
+          <span>
+            {'Array<'}
+            {child}
+            {'>'}
+          </span>
+        )
       }
       case 'enum':
-        return this.renderEnum(type);
+        return this.renderEnum(type)
       case 'custom':
-        return cleanDocletValue(doclets.type || name);
+        return cleanDocletValue(doclets.type || name)
       default:
-        return name;
+        return name
     }
   },
 
   renderEnum(enumType) {
-    const enumValues = enumType.value || [];
-    return <code>{enumValues.join(' | ')}</code>;
+    const enumValues = enumType.value || []
+    return <code>{enumValues.join(' | ')}</code>
   },
 
   renderControllableNote(prop, propName) {
-    let controllable = prop.doclets && prop.doclets.controllable;
-    let isHandler = prop.type && getDisplayTypeName(prop.type.name) === 'function';
+    let controllable = prop.doclets && prop.doclets.controllable
+    let isHandler = prop.type && getDisplayTypeName(prop.type.name) === 'function'
 
     if (!controllable) {
-      return false;
+      return false
     }
 
     let text = isHandler ? (
@@ -138,64 +145,68 @@ let Api = React.createClass({
       </span>
     ) : (
       <span>
-        controlled by: <code>{controllable}</code>,
-        initialized with: <code>{'default' + capitalize(propName)}</code>
+        controlled by: <code>{controllable}</code>, initialized with:{' '}
+        <code>{'default' + capitalize(propName)}</code>
       </span>
-    );
+    )
 
     return (
-      <div className='pull-right'>
-        <em><small>{ text }</small></em>
+      <div className="pull-right">
+        <em>
+          <small>{text}</small>
+        </em>
       </div>
-    );
-  }
+    )
+  },
 })
 
 function getDisplayTypeName(typeName) {
   if (typeName === 'func') {
-    return 'function';
+    return 'function'
   } else if (typeName === 'bool') {
-    return 'boolean';
+    return 'boolean'
   } else if (typeName === 'object') {
-    return 'Object';
+    return 'Object'
   }
 
-  return typeName;
+  return typeName
 }
 
-function renderObject(props){
-  return transform(props, (obj, val, key) => {
-    obj[val.required ? key : key + '?'] = simpleType(val)
-
-  }, {})
+function renderObject(props) {
+  return transform(
+    props,
+    (obj, val, key) => {
+      obj[val.required ? key : key + '?'] = simpleType(val)
+    },
+    {}
+  )
 }
 
 function simpleType(prop) {
-  let type = prop.type || {};
-  let name = getDisplayTypeName(type.name);
-  let doclets = prop.doclets || {};
+  let type = prop.type || {}
+  let name = getDisplayTypeName(type.name)
+  let doclets = prop.doclets || {}
 
   switch (name) {
     case 'node':
-      return 'any';
+      return 'any'
     case 'function':
-      return 'Function';
+      return 'Function'
     case 'elementType':
-      return 'ReactClass<any>';
+      return 'ReactClass<any>'
     case 'object':
     case 'Object':
-      if (type.value)
-        return renderObject(type.value)
-      return name;
+      if (type.value) return renderObject(type.value)
+      return name
     case 'array':
     case 'Array':
-      let child = simpleType({ type: type.value });
+      let child = simpleType({ type: type.value })
 
-      return 'Array<' + child + '>';
+      return 'Array<' + child + '>'
     case 'custom':
-      return cleanDocletValue(doclets.type || name);
+      return cleanDocletValue(doclets.type || name)
     default:
-      return name;
+      return name
   }
 }
-export default Api;
+export default Api