feat/ignore-props

Author: evless

README.md

@@ -26,12 +26,24 @@ Button.propTypes = {
 }
 
 storiesOf('Button')
-  .addDecorator(withSmartKnobs)
+  .addDecorator(withSmartKnobs(options))
   .addDecorator(withKnobs)
   .add('simple', () => <Button>Smart knobed button</Button>)
 
 ```
 
+## Options
+
+- **ignoreProps**
+  
+  Type: `Array`
+
+  If you want to ignore automatically props, you can list them. Example:
+  ```js
+    .withSmartKnobs({ ignoreProps: ['number'] })
+    .add('example' () => <div number={date('number', date)} />) 
+  ```
+
 ## Configuration:
 
 This plugin has a peer dependency on [babel-plugin-react-docgen

example/stories/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withSmartKnobs } from '../../src'
-import { withKnobs, select } from '@storybook/addon-knobs'
+import { withKnobs, select, date } from '@storybook/addon-knobs'
 import { withInfo } from '@storybook/addon-info'
 
 import SmartKnobedComponent from './SmartKnobedComponent'
@@ -11,7 +11,7 @@ import SmartKnobedComponentWithFlow from './SmartKnobedComponentWithFlow'
 const stub = fn => fn()
 
 storiesOf('Basic', module)
-  .addDecorator(withSmartKnobs)
+  .addDecorator(withSmartKnobs())
   .addDecorator(withKnobs)
   .add('proptypes', () => <SmartKnobedComponent />)
   .add('flow', () => <SmartKnobedComponentWithFlow />)
@@ -23,22 +23,27 @@ storiesOf('Basic', module)
   ))
 
 storiesOf('withInfo', module)
-  .addDecorator(withSmartKnobs)
+  .addDecorator(withSmartKnobs())
   .addDecorator(withKnobs)
   .addDecorator(withInfo)
   .add('proptypes', () => <SmartKnobedComponent />)
 
 storiesOf('Missing props', module)
-  .addDecorator(withSmartKnobs)
+  .addDecorator(withSmartKnobs())
   .addDecorator(withKnobs)
   .add('example', () => (
     <SmartKnobedComponentMissingProps foo='baz' />
   ))
 
 storiesOf('Manual knobs', module)
   .addDecorator(stub)
-  .addDecorator(withSmartKnobs)
+  .addDecorator(withSmartKnobs())
   .addDecorator(withKnobs)
   .add('example', () => (
     <SmartKnobedComponent string={ select('string', ['1', '2', '3'], '2') } />
   ))
+
+storiesOf('Ignore Props', module)
+  .addDecorator(withSmartKnobs({ ignoreProps: ['number'] }))
+  .addDecorator(withKnobs)
+  .add('proptypes', () => <SmartKnobedComponent number={ date('number', new Date()) } />)

src/index.js

@@ -70,8 +70,9 @@ addKnobResolver({
 
 const ensureType = (item) => item.flowType ? ({ ...item, type: item.flowType }) : item
 
-const getNewProps = (target, context) => {
+const getNewProps = (target, context, opts) => {
   const { __docgenInfo: { props } = { props: {} } } = target.type
+  const { ignoreProps = [] } = opts
   const defaultProps = {
     ...(target.type.defaultProps || {}),
     ...target.props
@@ -80,6 +81,10 @@ const getNewProps = (target, context) => {
   const finalProps = props ? Object.keys(props).reduce((acc, n) => {
     const item = ensureType(props[n])
 
+    if (ignoreProps.includes(n)) {
+      return acc
+    }
+
     if (!item.type) {
       const defaultValue = item.defaultValue ? item.defaultValue.value : 'Unknown'
       logger.warn(`There is a prop with defaultValue ${defaultValue} but it wasn't specified on element.propTypes. Check story: "${context.kind}".`)
@@ -95,30 +100,30 @@ const getNewProps = (target, context) => {
   return resolvePropValues(finalProps, defaultProps)
 }
 
-const mutateChildren = (component) => {
+const mutateChildren = (component, context, opts) => {
   return cloneElement(component, { children: Children.map(component.props.children, (child) => {
     if (child.type.__docgenInfo) {
-      const newProps = getNewProps(child)
+      const newProps = getNewProps(child, context, opts)
 
       return cloneElement(child, { ...child.props, ...newProps })
     }
 
     if (child.props.children) {
-      return mutateChildren(child)
+      return mutateChildren(child, context, opts)
     }
 
     return child
   }) })
 }
 
-export const withSmartKnobs = (story, context) => {
+export const withSmartKnobs = (opts = {}) => (story, context) => {
   const component = story(context)
 
   if (!component.type.__docgenInfo && component.props.children) {
-    return mutateChildren(component)
+    return mutateChildren(component, context, opts)
   }
 
-  const newProps = getNewProps(component, context)
+  const newProps = getNewProps(component, context, opts)
 
   return cloneElement(component, newProps)
 }