fixed code style problems.

packages/addon-info/src/components/PropTable.js

@@ -44,7 +44,12 @@ export default class PropTable extends React.Component {
           ? type.__docgenInfo.props[property].description
           : null;
         if (propType === 'other') {
-          if (type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] && type.__docgenInfo.props[property].type) {
+          if (
+            type.__docgenInfo &&
+            type.__docgenInfo.props &&
+            type.__docgenInfo.props[property] &&
+            type.__docgenInfo.props[property].type
+          ) {
             propType = type.__docgenInfo.props[property].type.name;
           }
         }

packages/addon-info/src/components/PropVal.js

@@ -1,119 +1,119 @@
-import React from 'react'
+import React from 'react';
-import createFragment from 'react-addons-create-fragment'
+import createFragment from 'react-addons-create-fragment';
 
 const valueStyles = {
   func: {
-    color: '#170'
+    color: '#170',
   },
 
   attr: {
-    color: '#666'
+    color: '#666',
   },
 
   object: {
-    color: '#666'
+    color: '#666',
   },
 
   array: {
-    color: '#666'
+    color: '#666',
   },
 
   number: {
-    color: '#a11'
+    color: '#a11',
   },
 
   string: {
     color: '#22a',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
   },
 
   bool: {
-    color: '#a11'
+    color: '#a11',
   },
 
   empty: {
-    color: '#777'
+    color: '#777',
-  }
+  },
-}
+};
 
 function previewArray(val) {
-  const items = {}
+  const items = {};
   val.slice(0, 3).forEach((item, i) => {
-    items[`n${i}`] = <PropVal val={item} />
+    items[`n${i}`] = <PropVal val={item} />;
-    items[`c${i}`] = ', '
+    items[`c${i}`] = ', ';
-  })
+  });
   if (val.length > 3) {
-    items.last = '…'
+    items.last = '…';
   } else {
-    delete items[`c${val.length - 1}`]
+    delete items[`c${val.length - 1}`];
   }
   return (
     <span style={valueStyles.array}>
       [{createFragment(items)}]
     </span>
-  )
+  );
 }
 
 function previewObject(val) {
-  const names = Object.keys(val)
+  const names = Object.keys(val);
-  const items = {}
+  const items = {};
   names.slice(0, 3).forEach((name, i) => {
-    items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>
+    items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
-    items[`c${i}`] = ': '
+    items[`c${i}`] = ': ';
-    items[`v${i}`] = <PropVal val={val[name]} />
+    items[`v${i}`] = <PropVal val={val[name]} />;
-    items[`m${i}`] = ', '
+    items[`m${i}`] = ', ';
-  })
+  });
   if (names.length > 3) {
-    items.rest = '…'
+    items.rest = '…';
   } else {
-    delete items[`m${names.length - 1}`]
+    delete items[`m${names.length - 1}`];
   }
   return (
     <span style={valueStyles.object}>
       {'{'}{createFragment(items)}{'}'}
     </span>
-  )
+  );
 }
 
 function previewProp(val) {
-  let braceWrap = true
+  let braceWrap = true;
-  let content = null
+  let content = null;
   if (typeof val === 'number') {
-    content = <span style={valueStyles.number}>{val}</span>
+    content = <span style={valueStyles.number}>{val}</span>;
   } else if (typeof val === 'string') {
     if (val.length > 50) {
-      val = `${val.slice(0, 50)}…`
+      val = `${val.slice(0, 50)}…`;
     }
-    content = <span style={valueStyles.string}>"{val}"</span>
+    content = <span style={valueStyles.string}>"{val}"</span>;
-    braceWrap = false
+    braceWrap = false;
   } else if (typeof val === 'boolean') {
-    content = <span style={valueStyles.bool}>{`${val}`}</span>
+    content = <span style={valueStyles.bool}>{`${val}`}</span>;
   } else if (Array.isArray(val)) {
-    content = previewArray(val)
+    content = previewArray(val);
   } else if (typeof val === 'function') {
-    content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>
+    content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
   } else if (!val) {
-    content = <span style={valueStyles.empty}>{`${val}`}</span>
+    content = <span style={valueStyles.empty}>{`${val}`}</span>;
   } else if (typeof val !== 'object') {
-    content = <span>…</span>
+    content = <span>…</span>;
   } else if (React.isValidElement(val)) {
     content = (
       <span style={valueStyles.object}>
         {`<${val.type.displayName || val.type.name || val.type} />`}
       </span>
-    )
+    );
   } else {
-    content = previewObject(val)
+    content = previewObject(val);
   }
 
-  if (!braceWrap) return content
+  if (!braceWrap) return content;
-  return <span>{content}</span>
+  return <span>{content}</span>;
 }
 
 export default class PropVal extends React.Component {
   render() {
-    return previewProp(this.props.val)
+    return previewProp(this.props.val);
   }
 }
 
-module.exports = PropVal
+module.exports = PropVal;

packages/addon-info/src/components/Story.js

@@ -1,10 +1,10 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
-import React from 'react'
+import React from 'react';
-import MTRC from 'markdown-to-react-components'
+import MTRC from 'markdown-to-react-components';
-import PropTable from './PropTable'
+import PropTable from './PropTable';
-import Node from './Node'
+import Node from './Node';
-import { baseFonts } from './theme'
+import { baseFonts } from './theme';
-import { Pre } from './markdown'
+import { Pre } from './markdown';
 
 const stylesheet = {
   link: {
@@ -17,13 +17,13 @@ const stylesheet = {
       background: '#28c',
       color: '#fff',
       padding: '5px 15px',
-      cursor: 'pointer'
+      cursor: 'pointer',
     },
     topRight: {
       top: 0,
       right: 0,
-      borderRadius: '0 0 0 5px'
+      borderRadius: '0 0 0 5px',
-    }
+    },
   },
   info: {
     position: 'fixed',
@@ -33,70 +33,70 @@ const stylesheet = {
     left: 0,
     right: 0,
     padding: '0 40px',
-    overflow: 'auto'
+    overflow: 'auto',
   },
   children: {
     position: 'relative',
-    zIndex: 0
+    zIndex: 0,
   },
   infoBody: {
     ...baseFonts,
     fontWeight: 300,
     lineHeight: 1.45,
-    fontSize: '15px'
+    fontSize: '15px',
   },
   infoContent: {
-    marginBottom: 0
+    marginBottom: 0,
   },
   jsxInfoContent: {
     borderTop: '1px solid #eee',
-    margin: '20px 0 0 0'
+    margin: '20px 0 0 0',
   },
   header: {
     h1: {
       margin: 0,
       padding: 0,
-      fontSize: '35px'
+      fontSize: '35px',
     },
     h2: {
       margin: '0 0 10px 0',
       padding: 0,
       fontWeight: 400,
-      fontSize: '22px'
+      fontSize: '22px',
     },
     body: {
       borderBottom: '1px solid #eee',
       paddingTop: 10,
-      marginBottom: 10
+      marginBottom: 10,
-    }
+    },
   },
   source: {
     h1: {
       margin: '20px 0 0 0',
       padding: '0 0 5px 0',
       fontSize: '25px',
-      borderBottom: '1px solid #EEE'
+      borderBottom: '1px solid #EEE',
-    }
+    },
   },
   propTableHead: {
-    margin: '20px 0 0 0'
+    margin: '20px 0 0 0',
-  }
+  },
-}
+};
 
 export default class Story extends React.Component {
   constructor(...args) {
-    super(...args)
+    super(...args);
     this.state = {
       open: false,
-      stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet)))
+      stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))),
-    }
+    };
-    MTRC.configure(this.props.mtrcConf)
+    MTRC.configure(this.props.mtrcConf);
   }
 
   componentWillReceiveProps(nextProps) {
     this.setState({
-      stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet)))
+      stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))),
-    })
+    });
   }
 
   _renderStory() {
@@ -104,7 +104,7 @@ export default class Story extends React.Component {
       <div>
         {this.props.children}
       </div>
-    )
+    );
   }
 
   _renderInline() {
@@ -127,29 +127,29 @@ export default class Story extends React.Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   _renderOverlay() {
     const linkStyle = {
       ...stylesheet.link.base,
-      ...stylesheet.link.topRight
+      ...stylesheet.link.topRight,
-    }
+    };
 
-    const infoStyle = Object.assign({}, stylesheet.info)
+    const infoStyle = Object.assign({}, stylesheet.info);
     if (!this.state.open) {
-      infoStyle.display = 'none'
+      infoStyle.display = 'none';
     }
 
     const openOverlay = () => {
-      this.setState({ open: true })
+      this.setState({ open: true });
-      return false
+      return false;
-    }
+    };
 
     const closeOverlay = () => {
-      this.setState({ open: false })
+      this.setState({ open: false });
-      return false
+      return false;
-    }
+    };
 
     return (
       <div>
@@ -170,12 +170,12 @@ export default class Story extends React.Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   _getInfoHeader() {
     if (!this.props.context || !this.props.showHeader) {
-      return null
+      return null;
     }
 
     return (
@@ -183,12 +183,12 @@ export default class Story extends React.Component {
         <h1 style={this.state.stylesheet.header.h1}>{this.props.context.kind}</h1>
         <h2 style={this.state.stylesheet.header.h2}>{this.props.context.story}</h2>
       </div>
-    )
+    );
   }
 
   _getInfoContent() {
     if (!this.props.info) {
-      return ''
+      return '';
     }
 
     if (React.isValidElement(this.props.info)) {
@@ -196,28 +196,28 @@ export default class Story extends React.Component {
         <div style={this.props.showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent}>
           {this.props.info}
         </div>
-      )
+      );
     }
 
-    const lines = this.props.info.split('\n')
+    const lines = this.props.info.split('\n');
     while (lines[0].trim() === '') {
-      lines.shift()
+      lines.shift();
     }
-    let padding = 0
+    let padding = 0;
-    const matches = lines[0].match(/^ */)
+    const matches = lines[0].match(/^ */);
     if (matches) {
-      padding = matches[0].length
+      padding = matches[0].length;
     }
-    const source = lines.map(s => s.slice(padding)).join('\n')
+    const source = lines.map(s => s.slice(padding)).join('\n');
     return (
       <div style={this.state.stylesheet.infoContent}>
         {MTRC(source).tree}
       </div>
-    )
+    );
   }
 
   _getComponentDescription() {
-    let retDiv = null
+    let retDiv = null;
 
     if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
       Object.keys(STORYBOOK_REACT_CLASSES).forEach((key, index) => {
@@ -226,17 +226,17 @@ export default class Story extends React.Component {
             <div>
               {STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
             </div>
-          )
+          );
         }
-      })
+      });
     }
 
-    return retDiv
+    return retDiv;
   }
 
   _getSourceCode() {
     if (!this.props.showSource) {
-      return null
+      return null;
     }
 
     return (
@@ -248,53 +248,56 @@ export default class Story extends React.Component {
           ))}
         </Pre>
       </div>
-    )
+    );
   }
 
   _getPropTables() {
-    const types = new Map()
+    const types = new Map();
 
     if (this.props.propTables === null) {
-      return null
+      return null;
     }
 
     if (!this.props.children) {
-      return null
+      return null;
     }
 
     if (this.props.propTables) {
       this.props.propTables.forEach(type => {
-        types.set(type, true)
+        types.set(type, true);
-      })
+      });
     }
 
     // depth-first traverse and collect types
     const extract = children => {
       if (!children) {
-        return
+        return;
       }
       if (Array.isArray(children)) {
-        children.forEach(extract)
+        children.forEach(extract);
-        return
+        return;
       }
       if (children.props && children.props.children) {
-        extract(children.props.children)
+        extract(children.props.children);
       }
-      if (typeof children === 'string' || typeof children.type === 'string' ||
+      if (
+        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))
-        return
+      ) {
+        return;
       }
       if (children.type && !types.has(children.type)) {
-        types.set(children.type, true)
+        types.set(children.type, true);
-      }
       }
+    };
 
     // extract components from children
-    extract(this.props.children)
+    extract(this.props.children);
 
-    const array = Array.from(types.keys())
+    const array = Array.from(types.keys());
-    array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name))
+    array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
 
     const propTables = array.map((type, idx) => (
       <div key={idx}>
@@ -303,10 +306,10 @@ export default class Story extends React.Component {
         </h2>
         <PropTable type={type} />
       </div>
-    ))
+    ));
 
     if (!propTables || propTables.length === 0) {
-      return null
+      return null;
     }
 
     return (
@@ -314,19 +317,19 @@ export default class Story extends React.Component {
         <h1 style={this.state.stylesheet.source.h1}>Prop Types</h1>
         {propTables}
       </div>
-    )
+    );
   }
 
   render() {
     if (this.props.showInline) {
-      return this._renderInline()
+      return this._renderInline();
     }
 
-    return this._renderOverlay()
+    return this._renderOverlay();
   }
 }
 
-Story.displayName = 'Story'
+Story.displayName = 'Story';
 Story.propTypes = {
   context: PropTypes.object,
   info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -337,12 +340,12 @@ Story.propTypes = {
   showSource: PropTypes.bool,
   styles: PropTypes.func.isRequired,
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  mtrcConf: PropTypes.object
+  mtrcConf: PropTypes.object,
-}
+};
 
 Story.defaultProps = {
   showInline: false,
   showHeader: true,
   showSource: true,
-  mtrcConf: {}
+  mtrcConf: {},
-}
+};