Merge branch 'master' into fix-select-order

.circleci/config.yml

@@ -0,0 +1,26 @@
+version: 2
+
+jobs:
+  build:
+    docker:
+      - image: circleci/node:10
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
+      - run: yarn install
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: yarn compile
+
+workflows:
+  version: 2
+  test:
+    jobs:
+      - build

.github/workflows/chromatic.yml

@@ -0,0 +1,21 @@
+name: "Chromatic"
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - run: |
+        yarn
+    - run: |
+        yarn compile
+    - run: |
+        yarn build-storybook
+    - uses: chromaui/action@v1
+      with: 
+        appCode: ${{ secrets.CHROMATIC_APP_CODE }}
+        token: ${{ secrets.GITHUB_TOKEN }}
+        storybookBuildDir: storybook-static
+

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)

package.json

@@ -10,6 +10,7 @@
     "clean": "rimraf ./dist",
     "compile": "babel ./src --out-dir ./dist",
     "prepublish": "npm run clean && npm run compile",
+    "build-storybook": "build-storybook",
     "storybook": "start-storybook -p 9010",
     "test": "jest"
   },
@@ -28,8 +29,8 @@
     "@storybook/client-logger": "^5.0.0",
     "@storybook/react": "^5.0.0",
     "babel-loader": "^8.0.4",
-    "css-loader": "^3.1.0",
     "core-js": "^3.0.1",
+    "css-loader": "^3.1.0",
     "eslint-config-taller": "^2.0.0",
     "eslint-plugin-flowtype": "^3.5.1",
     "jest": "^24.7.1",
@@ -44,5 +45,8 @@
     "@storybook/react": "^5.0.0",
     "babel-plugin-react-docgen": "^2.0.0",
     "react": ">=15.0.0 || ^16.0.0"
+  },
+  "dependencies": {
+    "storybook-chromatic": "^3.0.3"
   }
 }

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'
@@ -70,13 +70,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 || {}),
@@ -98,12 +93,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)
 }