fix(withSmartKnobs): check for undefined types

relates to #5

Author: weslleyaraujo

example/stories/SmartKnobedComponent.js

@@ -12,15 +12,16 @@ const SmartKnobedComponent = props => (
         <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>
-    )) }
+    <tbody>
+      {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>
+      ))}
+    </tbody>
   </table>
 )
 

example/stories/SmartKnobedComponentMissingProps.js

@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react';
+
+const SmartKnobedComponentMissingProps = ({
+  foo = '',
+  bar = 'bar',
+}) => (
+  <code>
+    <p>You should see a console.warn about a prop with default value bar.</p>
+    <p>{foo}</p>
+    <p>{bar}</p>
+  </code>
+);
+
+SmartKnobedComponentMissingProps.propTypes = {
+  foo: PropTypes.string.isRequired,
+};
+
+export default SmartKnobedComponentMissingProps;

example/stories/index.js

@@ -2,13 +2,17 @@ import React from 'react'
 import { storiesOf } from '@kadira/storybook'
 import { withSmartKnobs } from '../../src'
 
-import SmartKnobedComponent from './SmartKnobedComponent'
+import SmartKnobedComponent from './SmartKnobedComponent';
+import SmartKnobedComponentMissingProps from './SmartKnobedComponentMissingProps';
 
 storiesOf('Example of smart Knobs', module)
   .addDecorator(withSmartKnobs)
   .add('full example', () => (
     <SmartKnobedComponent />
   ))
 
-
-  console.log(SmartKnobedComponent.__docgenInfo)
+storiesOf('Smart Knobs missing props', module)
+  .addDecorator(withSmartKnobs)
+  .add('example', () => (
+    <SmartKnobedComponentMissingProps foo="baz" />
+  ))

src/index.js

@@ -62,7 +62,20 @@ export const withSmartKnobs = (story, context) => {
     ...component.props
   }
 
-  return withKnobs(() => cloneElement(component, resolvePropValues(props, defaultProps)), context)
+  const finalProps = Object.keys(props).reduce((acc, n) => {
+    const item = props[n];
+    if (!item.type) {
+      console.warn(`There is a prop with defaultValue ${item.defaultValue.value} but it wasnt specified on element.propTypes. Check story: "${context.kind}".`);
+      return acc;
+    }
+
+    return {
+      ...acc,
+      [n]: item,
+    };
+  }, {});
+
+  return withKnobs(() => cloneElement(component, resolvePropValues(finalProps, defaultProps)), context)
 }
 
 const resolvePropValues = (propTypes, defaultProps) => {