Merge pull request #8 from Gongreg/master

Making work with react-native-storybook. Adding some features

Author: lucasconstantino

.gitignore

@@ -0,0 +1 @@
+node_modules/

dist/index.js

@@ -9,7 +9,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _react = require('react');
 
-var _storybook = require('@kadira/storybook');
+var _storybookAddonActions = require('@kadira/storybook-addon-actions');
 
 var _storybookAddonKnobs = require('@kadira/storybook-addon-knobs');
 
@@ -44,7 +44,7 @@ var propTypeKnobResolver = exports.propTypeKnobResolver = function propTypeKnobR
 /* eslint-disable no-multi-spaces */
 // Default simple PropType based knob map.
 var propTypeKnobsMap = [{ name: 'string', knob: _storybookAddonKnobs.text }, { name: 'number', knob: _storybookAddonKnobs.number }, { name: 'bool', knob: _storybookAddonKnobs.boolean }, { name: 'func', knob: function knob(name, value) {
-    return value || (0, _storybook.action)(name);
+    return value || (0, _storybookAddonActions.action)(name);
   } }, { name: 'object', knob: _storybookAddonKnobs.object }, { name: 'node', knob: _storybookAddonKnobs.text }, { name: 'element', knob: _storybookAddonKnobs.text }];
 
 propTypeKnobsMap.forEach(function (_ref2, weight) {
@@ -90,19 +90,17 @@ 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 finalProps = props ? 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(finalProps, defaultProps));
-  }, context);
+  return (0, _react.cloneElement)(component, resolvePropValues(finalProps, defaultProps));
 };
 
 var resolvePropValues = function resolvePropValues(propTypes, defaultProps) {
@@ -118,6 +116,6 @@ var resolvePropValues = function resolvePropValues(propTypes, defaultProps) {
       return value !== undefined ? value : resolver(propName, propTypes[propName], defaultProps[propName], propTypes, defaultProps);
     }, undefined);
   }).reduce(function (props, value, i) {
-    return _extends({}, props, _defineProperty({}, propNames[i], value));
+    return _extends({}, props, _defineProperty({}, propNames[i], value !== undefined ? value : defaultProps[propNames[i]]));
   }, defaultProps);
 };

example/stories/index.js

@@ -1,18 +1,31 @@
 import React from 'react'
 import { storiesOf } from '@kadira/storybook'
 import { withSmartKnobs } from '../../src'
+import { withKnobs, select } from '@kadira/storybook-addon-knobs';
 
 import SmartKnobedComponent from './SmartKnobedComponent';
 import SmartKnobedComponentMissingProps from './SmartKnobedComponentMissingProps';
 
+const stub = fn => fn();
+
 storiesOf('Example of smart Knobs', module)
   .addDecorator(withSmartKnobs)
+  .addDecorator(withKnobs)
   .add('full example', () => (
     <SmartKnobedComponent />
   ))
 
 storiesOf('Smart Knobs missing props', module)
   .addDecorator(withSmartKnobs)
+  .addDecorator(withKnobs)
   .add('example', () => (
     <SmartKnobedComponentMissingProps foo="baz" />
   ))
+
+storiesOf('Smart Knobs with manual knobs', module)
+  .addDecorator(stub)
+  .addDecorator(withSmartKnobs)
+  .addDecorator(withKnobs)
+  .add('example', () => (
+    <SmartKnobedComponent string={ select('string', ['1', '2', '3'], '2') }/>
+  ))

package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
+    "@kadira/storybook-addon-actions": "^1.1.3",
     "@kadira/storybook-addon-knobs": "^1.3.0",
     "react": "^0.14.7 || ^15.0.0"
   },

src/index.js

@@ -1,5 +1,5 @@
 import { cloneElement } from 'react'
-import { action } from '@kadira/storybook'
+import { action } from '@kadira/storybook-addon-actions'
 import { withKnobs, text, boolean, number, object, select } from '@kadira/storybook-addon-knobs'
 
 const knobResolvers = {}
@@ -62,7 +62,7 @@ export const withSmartKnobs = (story, context) => {
     ...component.props
   }
 
-  const finalProps = Object.keys(props).reduce((acc, n) => {
+  const finalProps = props ? 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}".`);
@@ -73,9 +73,9 @@ export const withSmartKnobs = (story, context) => {
       ...acc,
       [n]: item,
     };
-  }, {});
+  }, {}) : {};
 
-  return withKnobs(() => cloneElement(component, resolvePropValues(finalProps, defaultProps)), context)
+  return cloneElement(component, resolvePropValues(finalProps, defaultProps))
 }
 
 const resolvePropValues = (propTypes, defaultProps) => {
@@ -92,6 +92,6 @@ const resolvePropValues = (propTypes, defaultProps) => {
     ))
     .reduce((props, value, i) => ({
       ...props,
-      [propNames[i]]: value
+      [propNames[i]]: value !== undefined ? value : defaultProps[propNames[i]]
     }), defaultProps)
 }