Merge pull request #6 from weslleyaraujo/master

Undefined propType breaks render

Author: lucasconstantino

dist/index.js

@@ -19,10 +19,10 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
 var knobResolvers = {};
 var addKnobResolver = exports.addKnobResolver = function addKnobResolver(_ref) {
-  var name = _ref.name;
-  var resolver = _ref.resolver;
-  var _ref$weight = _ref.weight;
-  var weight = _ref$weight === undefined ? 0 : _ref$weight;
+  var name = _ref.name,
+      resolver = _ref.resolver,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === undefined ? 0 : _ref$weight;
   return knobResolvers[name] = { name: name, resolver: resolver, weight: weight };
 };
 
@@ -48,10 +48,10 @@ var propTypeKnobsMap = [{ name: 'string', knob: _storybookAddonKnobs.text }, { n
   } }, { name: 'object', knob: _storybookAddonKnobs.object }, { name: 'node', knob: _storybookAddonKnobs.text }, { name: 'element', knob: _storybookAddonKnobs.text }];
 
 propTypeKnobsMap.forEach(function (_ref2, weight) {
-  var name = _ref2.name;
-  var knob = _ref2.knob;
-  var _ref2$args = _ref2.args;
-  var args = _ref2$args === undefined ? [] : _ref2$args;
+  var name = _ref2.name,
+      knob = _ref2.knob,
+      _ref2$args = _ref2.args,
+      args = _ref2$args === undefined ? [] : _ref2$args;
   return addKnobResolver({
     weight: weight * 10,
     name: 'PropTypes.' + name,
@@ -90,8 +90,18 @@ var withSmartKnobs = exports.withSmartKnobs = function withSmartKnobs(story, con
 
   var defaultProps = _extends({}, component.type.defaultProps || {}, component.props);
 
+  var finalProps = Object.keys(props).reduce(function (acc, n) {
+    var 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 _extends({}, acc, _defineProperty({}, n, item));
+  }, {});
+
   return (0, _storybookAddonKnobs.withKnobs)(function () {
-    return (0, _react.cloneElement)(component, resolvePropValues(props, defaultProps));
+    return (0, _react.cloneElement)(component, resolvePropValues(finalProps, defaultProps));
   }, context);
 };
 

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) => {