Skip to content
This repository was archived by the owner on Jan 5, 2023. It is now read-only.

Commit 6fcff43

Browse files
authored
Merge pull request #65 from evless/feat/ignore-props
feat/ignore-props
2 parents b819d9b + 06d5874 commit 6fcff43

File tree

3 files changed

+35
-13
lines changed

3 files changed

+35
-13
lines changed

README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,24 @@ Button.propTypes = {
2626
}
2727

2828
storiesOf('Button')
29-
.addDecorator(withSmartKnobs)
29+
.addDecorator(withSmartKnobs(options))
3030
.addDecorator(withKnobs)
3131
.add('simple', () => <Button>Smart knobed button</Button>)
3232

3333
```
3434

35+
## Options
36+
37+
- **ignoreProps**
38+
39+
Type: `Array`
40+
41+
Will not automatically create knobs for props whose name is in this array. Example:
42+
```js
43+
.withSmartKnobs({ ignoreProps: ['numberProp'] })
44+
.add('example', () => <div numberProp={date('date', date)} />)
45+
```
46+
3547
## Configuration:
3648

3749
This plugin has a peer dependency on [babel-plugin-react-docgen

example/stories/index.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { storiesOf } from '@storybook/react'
33
import { withSmartKnobs } from '../../src'
4-
import { withKnobs, select } from '@storybook/addon-knobs'
4+
import { withKnobs, select, date } from '@storybook/addon-knobs'
55
import { withInfo } from '@storybook/addon-info'
66

77
import SmartKnobedComponent from './SmartKnobedComponent'
@@ -11,7 +11,7 @@ import SmartKnobedComponentWithFlow from './SmartKnobedComponentWithFlow'
1111
const stub = fn => fn()
1212

1313
storiesOf('Basic', module)
14-
.addDecorator(withSmartKnobs)
14+
.addDecorator(withSmartKnobs())
1515
.addDecorator(withKnobs)
1616
.add('proptypes', () => <SmartKnobedComponent />)
1717
.add('flow', () => <SmartKnobedComponentWithFlow />)
@@ -23,22 +23,27 @@ storiesOf('Basic', module)
2323
))
2424

2525
storiesOf('withInfo', module)
26-
.addDecorator(withSmartKnobs)
26+
.addDecorator(withSmartKnobs())
2727
.addDecorator(withKnobs)
2828
.addDecorator(withInfo)
2929
.add('proptypes', () => <SmartKnobedComponent />)
3030

3131
storiesOf('Missing props', module)
32-
.addDecorator(withSmartKnobs)
32+
.addDecorator(withSmartKnobs())
3333
.addDecorator(withKnobs)
3434
.add('example', () => (
3535
<SmartKnobedComponentMissingProps foo='baz' />
3636
))
3737

3838
storiesOf('Manual knobs', module)
3939
.addDecorator(stub)
40-
.addDecorator(withSmartKnobs)
40+
.addDecorator(withSmartKnobs())
4141
.addDecorator(withKnobs)
4242
.add('example', () => (
4343
<SmartKnobedComponent string={ select('string', ['1', '2', '3'], '2') } />
4444
))
45+
46+
storiesOf('Ignore Props', module)
47+
.addDecorator(withSmartKnobs({ ignoreProps: ['number'] }))
48+
.addDecorator(withKnobs)
49+
.add('proptypes', () => <SmartKnobedComponent number={ date('date', new Date()) } />)

src/index.js

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,9 @@ addKnobResolver({
7171

7272
const ensureType = (item) => item.flowType ? ({ ...item, type: item.flowType }) : item
7373

74-
const getNewProps = (target, context) => {
74+
const getNewProps = (target, context, opts) => {
7575
const { __docgenInfo: { props } = { props: {} } } = target.type
76+
const { ignoreProps = [] } = opts
7677
const defaultProps = {
7778
...(target.type.defaultProps || {}),
7879
...target.props
@@ -81,6 +82,10 @@ const getNewProps = (target, context) => {
8182
const finalProps = props ? Object.keys(props).reduce((acc, n) => {
8283
const item = ensureType(props[n])
8384

85+
if (ignoreProps.includes(n)) {
86+
return acc
87+
}
88+
8489
if (!item.type) {
8590
const defaultValue = item.defaultValue ? item.defaultValue.value : 'Unknown'
8691
logger.warn(`There is a prop with defaultValue ${defaultValue} but it wasn't specified on element.propTypes. Check story: "${context.kind}".`)
@@ -96,30 +101,30 @@ const getNewProps = (target, context) => {
96101
return resolvePropValues(finalProps, defaultProps)
97102
}
98103

99-
const mutateChildren = (component) => {
104+
const mutateChildren = (component, context, opts) => {
100105
return cloneElement(component, { children: Children.map(component.props.children, (child) => {
101106
if (child.type && child.type.__docgenInfo) {
102-
const newProps = getNewProps(child)
107+
const newProps = getNewProps(child, context, opts)
103108

104109
return cloneElement(child, { ...child.props, ...newProps })
105110
}
106111

107112
if (child.props && child.props.children) {
108-
return mutateChildren(child)
113+
return mutateChildren(child, context, opts)
109114
}
110115

111116
return child
112117
}) })
113118
}
114119

115-
export const withSmartKnobs = (story, context) => {
120+
export const withSmartKnobs = (opts = {}) => (story, context) => {
116121
const component = story(context)
117122

118123
if (!component.type.__docgenInfo && component.props.children) {
119-
return mutateChildren(component)
124+
return mutateChildren(component, context, opts)
120125
}
121126

122-
const newProps = getNewProps(component, context)
127+
const newProps = getNewProps(component, context, opts)
123128

124129
return cloneElement(component, newProps)
125130
}

0 commit comments

Comments
 (0)