fix: support for nested structure (#62)

fix: support for nested structure

Author: ndelangen

example/stories/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withSmartKnobs } from '../../src'
 import { withKnobs, select } from '@storybook/addon-knobs'
+import { withInfo } from '@storybook/addon-info'
 
 import SmartKnobedComponent from './SmartKnobedComponent'
 import SmartKnobedComponentMissingProps from './SmartKnobedComponentMissingProps'
@@ -14,6 +15,18 @@ storiesOf('Basic', module)
   .addDecorator(withKnobs)
   .add('proptypes', () => <SmartKnobedComponent />)
   .add('flow', () => <SmartKnobedComponentWithFlow />)
+  .add('nested example', () => (
+    <div>
+      <span />
+      <SmartKnobedComponent />
+    </div>
+  ))
+
+storiesOf('withInfo', module)
+  .addDecorator(withSmartKnobs)
+  .addDecorator(withKnobs)
+  .addDecorator(withInfo)
+  .add('proptypes', () => <SmartKnobedComponent />)
 
 storiesOf('Missing props', module)
   .addDecorator(withSmartKnobs)

src/index.js

@@ -1,4 +1,4 @@
-import { cloneElement } from 'react'
+import { cloneElement, Children } from 'react'
 import { action } from '@storybook/addon-actions'
 import { logger } from '@storybook/client-logger'
 import { text, boolean, number, object, select } from '@storybook/addon-knobs'
@@ -69,13 +69,8 @@ addKnobResolver({
 })
 
 const ensureType = (item) => item.flowType ? ({ ...item, type: item.flowType }) : item
-export const withSmartKnobs = (story, context) => {
-  const component = story(context)
-
-  let target = component.props.components && component.props.propTables && component.props.propTablesExclude
-    ? component.props.children
-    : component
 
+const getNewProps = (target, context) => {
   const { __docgenInfo: { props } = { props: {} } } = target.type
   const defaultProps = {
     ...(target.type.defaultProps || {}),
@@ -97,12 +92,34 @@ export const withSmartKnobs = (story, context) => {
     }
   }, {}) : {}
 
-  const newProps = resolvePropValues(finalProps, defaultProps)
+  return resolvePropValues(finalProps, defaultProps)
+}
+
+const mutateChildren = (component) => {
+  return cloneElement(component, { children: Children.map(component.props.children, (child) => {
+    if (child.type.__docgenInfo) {
+      const newProps = getNewProps(child)
+
+      return cloneElement(child, { ...child.props, ...newProps })
+    }
 
-  if (component.props.components) {
-    return cloneElement(component, { ...component.props, children: cloneElement(component.props.children, newProps) })
+    if (child.props.children) {
+      return mutateChildren(child)
+    }
+
+    return child
+  }) })
+}
+
+export const withSmartKnobs = (story, context) => {
+  const component = story(context)
+
+  if (!component.type.__docgenInfo && component.props.children) {
+    return mutateChildren(component)
   }
 
+  const newProps = getNewProps(component, context)
+
   return cloneElement(component, newProps)
 }