Add react hot as development dependency

.gitignore

@@ -2,4 +2,5 @@
 .DS_Store
 coverage
 lib
+componentsIndex.js
 node_modules

README.md

@@ -69,7 +69,6 @@ npm install
 cd ./example
 npm install
 gulp
-npm start
 open http://127.0.0.1:8001
 ```
 this will start development server and then you can play with Library components

package.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "babel-cli": ">=5",
     "babel-core": ">=5",
+    "babel-eslint": "^5.0.0",
     "babel-loader": ">=5",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": ">=5",
@@ -50,6 +51,7 @@
     "expect": "^1.12.2",
     "gulp": "^3.9.1",
     "mocha": "^2.3.3",
+    "react-hot-loader": "^1.3.0",
     "rimraf": "^2.4.3"
   },
   "dependencies": {

src/components/Component.js

@@ -77,6 +77,9 @@ export default class LibraryComponent extends Component {
           <h3 style={styles.blockHeading}>Code</h3>
           <ExampleSource atom={atom} componentProps={currentProps} />
         </div>
+        <h3 style={styles.blockHeading}>
+          Prop Variants
+        </h3>
         <Variants atom={atom} componentProps={currentProps} styles={styles} />
       </div>
     )

src/components/ExampleSource.js

@@ -1,4 +1,4 @@
-import Highlight from './highlight';
+import Highlight from './Highlight.react';
 import Radium from 'radium';
 import React, {Component, PropTypes as RPT} from 'react';
 import renderProp from '../helpers/renderProp';
@@ -52,9 +52,11 @@ export default class ExampleSource extends Component {
   }
 
   renderInlineProps() {
+    const {atom: {propsDefinition}} = this.props
+
     const {componentProps} = this.props
     return Object.keys(componentProps)
-      .map((key) => `  ${renderProp(key, componentProps[key])}`)
+      .map((key) => `  ${renderProp(key, propsDefinition[key].type.name, componentProps[key])}`)
       .join('\n')
   }
 

src/components/Highlight.react.js

@@ -0,0 +1,7 @@
+import Highlight from 'react-highlight/lib/optimized';
+import hljs from 'highlight.js/lib/highlight';
+import javascriptHighlight from 'highlight.js/lib/languages/javascript';
+
+hljs.registerLanguage('javascript', javascriptHighlight)
+
+export default Highlight;

src/components/Sidebar.js

@@ -11,11 +11,20 @@ export default class Sidebar extends Component {
   }
 
   render() {
-    const {componentsIndex} = this.props
+    const {componentsIndex, selectAtom, selectedAtom} = this.props
 
     return (
       <div style={styles.wrapper}>
         <ul style={styles.sidebar}>
+          <li key={name} style={styles.sidebarElement}>
+            <div
+              key="all-components"
+              onClick={() => selectAtom(null)}
+              style={[styles.link, !selectedAtom && styles.sidebarLinkActive]}
+            >
+                All components
+            </div>
+          </li>
           {Object.keys(componentsIndex).map(name => this.renderAtom(name))}
         </ul>
       </div>

src/components/Variants.js

@@ -1,5 +1,5 @@
 import extendComponentProps from '../helpers/extendComponentProps';
-import Highlight from './highlight';
+import Highlight from './Highlight.react';
 import Radium from 'radium';
 import React, {Component, PropTypes as RPT} from 'react';
 import renderProp from '../helpers/renderProp';
@@ -41,53 +41,38 @@ export default class Variants extends Component {
     const {type: {name, value}} = definition
 
     switch (name) {
-      case 'string': return this.renderVariants(key, ['', `Default string ${key}`])
-      case 'number': return this.renderVariants(key, [0, 1, 100, 1234.56])
-      case 'bool': return this.renderVariants(key, [false, true])
-      case 'enum' : return this.renderVariants(key, value.map(text => text.value.replace(/\'/g, '')))
+      case 'string': return this.renderVariants(key, name, ['', `Default string ${key}`])
+      case 'number': return this.renderVariants(key, name, [0, 1, 100, 1234.56])
+      case 'bool': return this.renderVariants(key, name, [false, true])
+      case 'enum' : return this.renderVariants(key, name, value.map(text => text.value.replace(/\'/g, '')))
     }
 
     return null
   }
 
-  renderVariants(key, variants) {
+  renderVariants(key, type, variants) {
     const {styles} = this.props
 
     return (
       <div style={[styles.paddedElement, styles.panel]}>
-        <h3 id={key} style={styles.blockHeading}>Prop variant: {key}</h3>
-        {variants.map(variant => this.renderVariant(key, variant))}
+        <h3 id={key} style={styles.blockHeading}>{key} ({type})</h3>
+        {variants.map(variant => this.renderVariant(key, type, variant))}
       </div>
     )
   }
 
-  renderVariant(key, variant) {
+  renderVariant(key, type, variant) {
     const {atom, componentProps} = this.props
     const ExampleAtom = resolveComponent(atom.component)
     const variantProps = {...componentProps, [key]: variant}
 
     return (
       <div key={variant}>
         <Highlight className='javascript'>
-          &lt;{atom.componentName} {renderProp(key, variant)} /&gt;
+          &lt;{atom.componentName} {renderProp(key, type, variant)} /&gt;
         </Highlight>
         <ExampleAtom {...this.getComponentExtendendProps()} {...variantProps} />
       </div>
     )
   }
 }
-
-const styles = {
-  pre: {
-    background: 'white',
-    border: '1px solid hsl(0, 0%, 70%)',
-    padding: '3px 10px',
-    margin: '0'
-  },
-
-  blockHeading: {
-    color: 'hsl(202, 40%, 50%)',
-    marginRight: '20px',
-    display: 'inline-block'
-  }
-};

src/helpers/buildProps.js

@@ -23,7 +23,7 @@ function calculateProp(type, prop) {
     case 'string': return `Default string ${prop}`
     case 'bool':   return true
     case 'number': return 1
-    case 'func':   return () => {alert('called function')} // eslint-disable-line no-eval
+    case 'func':   return eval(`[function () { alert('called function ${prop}') }][0]`) // eslint-disable-line no-eval
     case 'enum':   return type.value[0].value.replace(/'/g, '')
     case 'shape':  return Map(type.value)
       .map((subType, name) => calculateProp(subType, name))