Updated code to use docgen.

Author: lucasconstantino

.storybook/config.js

@@ -5,6 +5,8 @@
 
 import { configure } from '@kadira/storybook'
 
+window.STORYBOOK_REACT_CLASSES = {}
+
 function loadStories () {
   require('../example/stories')
 }

.storybook/webpack.config.js

@@ -4,16 +4,10 @@
 // Do not modify this file.
 // Use `.storybook/user/modify_webpack_config.js instead`.
 
-const path = require('path')
-
 const config = {
   module: {
     loaders: [
-      {
-        test: /\.css?$/,
-        loaders: ['style', 'raw'],
-        include: path.resolve(__dirname, '../'),
-      },
+      { test: /\.css?$/, loader: 'style!css' },
     ],
   },
 }

example/stories/SmartKnobedComponent.css

@@ -0,0 +1,24 @@
+.SmartKnobedComponent {
+  border: 1px solid #999;
+  color: #333;
+  font-family: monospace;
+  border-collapse:collapse;
+  font-size: 1.5em;
+  text-align: left;
+}
+
+.SmartKnobedComponent thead {
+  font-style: italic;
+  font-size: 0.85em;
+}
+
+.SmartKnobedComponent th {
+  background-color: #eee;
+}
+
+.SmartKnobedComponent th,
+.SmartKnobedComponent td {
+  border: 0.05em solid #999;
+  min-width: 1em;
+  padding: 0.4em;
+}

example/stories/SmartKnobedComponent.js

@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react'
+
+import './SmartKnobedComponent.css'
+
+const SmartKnobedComponent = props => (
+  <table className='SmartKnobedComponent'>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>PropType</th>
+        <th>Value</th>
+        <th>typeof</th>
+      </tr>
+    </thead>
+
+    { Object.keys(props).map(prop => (
+      <tr key={ prop }>
+        <th>{ prop }</th>
+        <td>{ SmartKnobedComponent.__docgenInfo.props[prop].type.name }</td>
+        <td>{ typeof props[prop] === 'function' ? <i>function</i> : JSON.stringify(props[prop]) || '(empty)' }</td>
+        <td>{ typeof props[prop] }</td>
+      </tr>
+    )) }
+  </table>
+)
+
+SmartKnobedComponent.propTypes = {
+  bool: PropTypes.bool,
+  number: PropTypes.number,
+  string: PropTypes.string,
+  func: PropTypes.func,
+  oneOf: PropTypes.oneOf(['one', 'two', 'three']),
+  object: PropTypes.object,
+  element: PropTypes.element,
+  node: PropTypes.node,
+}
+
+export default SmartKnobedComponent

example/stories/index.js

@@ -1,20 +1,14 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import { storiesOf } from '@kadira/storybook'
-import { withKnobs } from '@kadira/storybook-addon-knobs'
 import { withSmartKnobs } from '../../src'
 
-const Button = ({ children, onClick }) => (
-  <button onClick={ onClick }>{ children }</button>
-)
+import SmartKnobedComponent from './SmartKnobedComponent'
 
-Button.propTypes = {
-  onClick: PropTypes.func,
-  children: PropTypes.string,
-}
-
-storiesOf('Example of Knobs', module)
+storiesOf('Example of smart Knobs', module)
   .addDecorator(withSmartKnobs)
-  .addDecorator(withKnobs)
-  .add('simple example', () => (
-    <Button>My button</Button>
+  .add('full example', () => (
+    <SmartKnobedComponent />
   ))
+
+
+  console.log(SmartKnobedComponent.__docgenInfo)

package.json

@@ -20,9 +20,11 @@
     "@kadira/storybook": "^2.25.0",
     "@kadira/storybook-addon-knobs": "^1.3.0",
     "babel-cli": "^6.16.0",
+    "babel-plugin-react-docgen": "^1.3.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
+    "css-loader": "^0.25.0",
     "eslint-config-taller": "^1.0.2",
     "react": "^0.14.7 || ^15.0.0",
     "react-dom": "^15.3.2"

src/index.js

@@ -1,6 +1,6 @@
 import { cloneElement } from 'react'
 import { action } from '@kadira/storybook'
-import { text, boolean, number, object, select } from '@kadira/storybook-addon-knobs'
+import { withKnobs, text, boolean, number, object, select } from '@kadira/storybook-addon-knobs'
 
 const knobResolvers = {}
 export const addKnobResolver = ({ name, resolver, weight = 0 }) => (knobResolvers[name] = { name, resolver, weight })
@@ -10,69 +10,75 @@ export const addKnobResolver = ({ name, resolver, weight = 0 }) => (knobResolver
  * --------------------------------
  */
 
-export const propTypeKnobResolver = (test, knob, ...args) =>
-  (name, validate, value, propTypes, defaultProps) => !validate({ 'prop': test }, 'prop')
-    ? knob(name, value, ...args) : undefined
+export const propTypeKnobResolver = (name, knob, ...args) =>
+  (propName, propType, value, propTypes, defaultProps) =>
+    propType.type.name === name ? knob(propName, value, ...args) : undefined
 
 /* eslint-disable no-multi-spaces */
 // Default simple PropType based knob map.
 const propTypeKnobsMap = [
-  { name: 'string', test: '',       knob: text },
-  { name: 'number', test: 0,        knob: number },
-  { name: 'bool',   test: true,     knob: boolean },
-  { name: 'func',   test: () => {}, knob: (name, value) => value || action(name) },
-  { name: 'object', test: {},       knob: object }
+  { name: 'string', knob: text },
+  { name: 'number', knob: number },
+  { name: 'bool',   knob: boolean },
+  { name: 'func',   knob: (name, value) => value || action(name) },
+  { name: 'object', knob: object },
+  { name: 'node', knob: text },
+  { name: 'element', knob: text },
 ]
 
-propTypeKnobsMap.forEach(({ name, test, knob, args = [] }) => addKnobResolver({
-  name,
-  resolver: propTypeKnobResolver(test, knob, ...args)
+propTypeKnobsMap.forEach(({ name, knob, args = [] }, weight) => addKnobResolver({
+  weight: weight * 10,
+  name: `PropTypes.${name}`,
+  resolver: propTypeKnobResolver(name, knob, ...args)
 }))
 
-// Defalt oneOf PropType knob resolver.
+// Register 'oneOf' PropType knob resolver.
 addKnobResolver({
-  name: 'oneOf',
-  resolver: (name, validate, value, propTypes, defaultProps) => {
-    const error = validate({ 'prop': '' }, 'prop')
-    const match = error ? /expected one of (\[.*\])/.exec(error.message) : null
+  name: 'PropTypes.oneOf',
+  resolver: (propName, propType, value, propTypes, defaultProps) => {
+    /* eslint-disable quotes */
+    if (propType.type.name === 'enum' && propType.type.value.length) {
+      try {
+        const options = propType.type.value
+        .map(value => value.value)
+        // Cleanup string quotes, if any.
+        .map(value => value[0] === "'" && value[value.length - 1] === "'"
+        ? '"' + value.replace(/'"'/g, '\\"').slice(1, value.length - 1) + '"' : value)
+        .map(JSON.parse)
+        .reduce((res, value) => ({ ...res, [value]: value }), {})
 
-    if (match && match[1]) {
-      const parsedOptions = JSON.parse(match[1])
-      const options = parsedOptions.reduce((res, value) => ({ ...res, [value]: value }), {})
-
-      return select(name, {
-        '': '--',
-        ...options
-      }, defaultProps[name])
+        return select(propName, { '': '--', ...options }, defaultProps[propName])
+      }
+      catch (e) { }
     }
   }
 })
 
 export const withSmartKnobs = (story, context) => {
-  const component = story()
-  const propTypes = component.type.propTypes
+  const component = story(context)
+  const { __docgenInfo: { props } = { props: { } } } = component.type
   const defaultProps = {
-    ...component.type.defaultProps,
+    ...(component.type.defaultProps || {}),
     ...component.props
   }
 
-  return cloneElement(component, resolvePropValues(propTypes, defaultProps))
+  return withKnobs(() => cloneElement(component, resolvePropValues(props, defaultProps)), context)
 }
 
 const resolvePropValues = (propTypes, defaultProps) => {
-  const propKeys = Object.keys(propTypes)
+  const propNames = Object.keys(propTypes)
   const resolvers = Object.keys(knobResolvers)
     .sort((a, b) => knobResolvers[a].weight < knobResolvers[b].weight)
     .map(name => knobResolvers[name].resolver)
 
-  return propKeys
-    .map(prop => resolvers.reduce(
+  return propNames
+    .map(propName => resolvers.reduce(
       (value, resolver) => value !== undefined ? value
-        : resolver(prop, propTypes[prop], defaultProps[prop], propTypes, defaultProps),
+        : resolver(propName, propTypes[propName], defaultProps[propName], propTypes, defaultProps),
       undefined
     ))
     .reduce((props, value, i) => ({
       ...props,
-      [propKeys[i]]: value
+      [propNames[i]]: value
     }), defaultProps)
 }

storybook-static/favicon.ico

@@ -0,0 +1,21 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script>
+          if (window.parent !== window) {
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+          }
+        </script>
+        <title>React Storybook</title>
+        
+      </head>
+      <body>
+        <div id="root"></div>
+        <div id="error-display"></div>
+        <script src="static/preview.bundle.js"></script>
+      </body>
+    </html>
+  

storybook-static/iframe.html

@@ -0,0 +1,43 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>React Storybook</title>
+        <style>
+          /*
+            When resizing panels, the drag event breaks if the cursor
+            moves over the iframe. Add the 'dragging' class to the body
+            at drag start and remove it when the drag ends.
+           */
+          .dragging iframe {
+            pointer-events: none;
+          }
+
+          /* Styling the fuzzy search box placeholders */
+          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox::-moz-placeholder { /* Firefox 19+ */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox:focus{
+            border-color: #EEE !important;
+          }
+
+          .btn:hover{
+            background-color: #eee
+          }
+        </style>
+      </head>
+      <body style="margin: 0;">
+        <div id="root"></div>
+        <script src="static/manager.bundle.js"></script>
+      </body>
+    </html>
+