diff --git a/addons/info/README.md b/addons/info/README.md index 73d67032f3de..112fbc278ecd 100644 --- a/addons/info/README.md +++ b/addons/info/README.md @@ -137,6 +137,7 @@ setDefaults({ maxPropArrayLength: 10, // Displays the first 10 items in the default prop array maxPropStringLength: 100, // Displays the first 100 characters in the default prop string, TableComponent: props => {}, // Override the component used to render the props table + excludedPropTypes: [], // Will exclude any respective properties whose name is included in array } ``` diff --git a/addons/info/package.json b/addons/info/package.json index 329278dab161..780b560f326a 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -16,6 +16,7 @@ "@storybook/client-logger": "4.0.0-alpha.3", "@storybook/components": "4.0.0-alpha.3", "babel-runtime": "^6.26.0", + "core-js": "2.5.5", "glamor": "^2.20.40", "glamorous": "^4.12.4", "global": "^4.3.2", diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index 4fee15da5aaf..62a2985b5fac 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -20,6 +20,7 @@ exports[`addon Info should render and markdown 1`] = ` } } context={Object {}} + excludedPropTypes={Array []} info="# Test story ## with markdown info containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" @@ -2088,12 +2089,14 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" " Component { )); }; +const determineIncludedPropTypes = (propDefinitions, excludedPropTypes) => { + if (excludedPropTypes.length === 0) { + return propDefinitions; + } + + return propDefinitions.filter( + propDefinition => !excludedPropTypes.includes(propDefinition.property) + ); +}; + export default function PropTable(props) { const { type, @@ -29,13 +40,16 @@ export default function PropTable(props) { maxPropArrayLength, maxPropStringLength, propDefinitions, + excludedPropTypes, } = props; if (!type) { return null; } - if (!propDefinitions.length) { + const includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes); + + if (!includedPropDefinitions.length) { return No propTypes defined!; } @@ -57,7 +71,7 @@ export default function PropTable(props) { - {propDefinitions.map(row => ( + {includedPropDefinitions.map(row => ( {row.property} @@ -85,12 +99,14 @@ PropTable.displayName = 'PropTable'; PropTable.defaultProps = { type: null, propDefinitions: [], + excludedPropTypes: [], }; PropTable.propTypes = { type: PropTypes.func, maxPropObjectKeys: PropTypes.number.isRequired, maxPropArrayLength: PropTypes.number.isRequired, maxPropStringLength: PropTypes.number.isRequired, + excludedPropTypes: PropTypes.arrayOf(PropTypes.string), propDefinitions: PropTypes.arrayOf( PropTypes.shape({ property: PropTypes.string.isRequired, diff --git a/addons/info/src/components/PropTable.test.js b/addons/info/src/components/PropTable.test.js index 7e90b480e167..1da87b1e7140 100644 --- a/addons/info/src/components/PropTable.test.js +++ b/addons/info/src/components/PropTable.test.js @@ -1,12 +1,40 @@ +import React from 'react'; import renderer from 'react-test-renderer'; +import { mount } from 'enzyme'; -import { multiLineText } from './PropTable'; +import PropTable, { multiLineText } from './PropTable'; describe('PropTable', () => { describe('multiLineText', () => { const singleLine = 'Foo bar baz'; const unixMultiLineText = 'foo \n bar \n baz'; const windowsMultiLineText = 'foo \r bar \r baz'; + const propDefinitions = [{ + defaultValue: undefined, + description: '', + propType: { name: 'string' }, + property: 'foo', + required: false + }]; + const FooComponent = () => (
); + const propTableProps = { + type: FooComponent, + maxPropArrayLength: 5, + maxPropObjectKeys: 5, + maxPropStringLength: 5, + propDefinitions, + }; + + it('should include all propTypes by default', () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); + + it('should exclude excluded propTypes', () => { + const props = { ...propTableProps, excludedPropTypes: ['foo'] }; + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); it('should return a blank string for a null input', () => { expect(multiLineText(null)).toBe(null); diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 25469c5b3ec7..0d0966b95817 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -331,7 +331,7 @@ class Story extends React.Component { const array = Array.from(types.keys()); array.sort((a, b) => getName(a) > getName(b)); - const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props; + const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength, excludedPropTypes } = this.props; const propTables = array.map((type, i) => ( // eslint-disable-next-line react/no-array-index-key
@@ -341,6 +341,7 @@ class Story extends React.Component { maxPropObjectKeys={maxPropObjectKeys} maxPropArrayLength={maxPropArrayLength} maxPropStringLength={maxPropStringLength} + excludedPropTypes={excludedPropTypes} />
)); @@ -389,6 +390,7 @@ Story.propTypes = { maxPropObjectKeys: PropTypes.number.isRequired, maxPropArrayLength: PropTypes.number.isRequired, maxPropStringLength: PropTypes.number.isRequired, + excludedPropTypes: PropTypes.arrayOf(PropTypes.string) }; Story.defaultProps = { @@ -401,6 +403,7 @@ Story.defaultProps = { showHeader: true, showSource: true, components: {}, + excludedPropTypes: [], }; polyfill(Story); diff --git a/addons/info/src/components/__snapshots__/PropTable.test.js.snap b/addons/info/src/components/__snapshots__/PropTable.test.js.snap index c8573c945642..44f720c0297a 100644 --- a/addons/info/src/components/__snapshots__/PropTable.test.js.snap +++ b/addons/info/src/components/__snapshots__/PropTable.test.js.snap @@ -1,5 +1,36 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`PropTable multiLineText should exclude excluded propTypes 1`] = ` + + + No propTypes defined! + + +`; + exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = ` Array [ @@ -18,3 +49,144 @@ Array [ , ] `; + +exports[`PropTable multiLineText should include all propTypes by default 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ foo + + + + string + + + + - + + - + + +
+ + +`; diff --git a/addons/info/src/index.js b/addons/info/src/index.js index b6003d36d12a..b138f51b65fe 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -78,6 +78,7 @@ function addInfo(storyFn, context, infoOptions) { maxPropArrayLength: options.maxPropArrayLength, maxPropsIntoLine: options.maxPropsIntoLine, maxPropStringLength: options.maxPropStringLength, + excludedPropTypes: options.excludedPropTypes, }; return {storyFn(context)}; } diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot index 688218ae85f5..8cf80030c669 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot @@ -1328,6 +1328,275 @@ exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component fo
`; +exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes that are in the excludedPropTypes array 1`] = ` +
+
+ +
+ +
+ +
+
+
+

+ Addons|Info.Options.excludedPropTypes +

+

+ Excludes propTypes that are in the excludedPropTypes array +

+
+
+
+ Label propType should be excluded +
+
+
+

+ Story Source +

+ 
+            

+              

+                
+                  <BaseButton
+                
+                
+                  
+                     
+                    
+                      label
+                    
+                    
+                      =
+                      
+                        "
+                        
+                          Button
+                        
+                        "
+                      
+                    
+                     
+                  
+                
+                
+                  />
+                
+              

+            

+            
+
+
+
+

+ Prop Types +

+
+

+ "BaseButton" Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ disabled + + + + - + + + { + + false + + } + + +
+ onClick + + + + - + + + { + + onClick() + + } + + +
+ style + + + + - + + + { + + {} + + } + + +
+
+
+
+
+
+
+`; + exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header 1`] = `
) ); +storiesOf('Addons|Info.Options.excludedPropTypes', module).add( + 'Excludes propTypes that are in the excludedPropTypes array', + withInfo({ + text: 'Label propType should be excluded', + excludedPropTypes: ['label'], + })(() => ) +); + storiesOf('Addons|Info.Options.header', module).add( 'Shows or hides Info Addon header', withInfo({ diff --git a/yarn.lock b/yarn.lock index dd37d16ff021..1c567d499c63 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3962,6 +3962,10 @@ copy-webpack-plugin@~4.4.1: p-limit "^1.0.0" serialize-javascript "^1.4.0" +core-js@2.5.5, core-js@^2.5.5: + version "2.5.5" + resolved "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b" + core-js@^1.0.0: version "1.2.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" @@ -3970,10 +3974,6 @@ core-js@^2.2.0, core-js@^2.2.2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0: version "2.5.3" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e" -core-js@^2.5.5: - version "2.5.5" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b" - core-js@~2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.3.0.tgz#fab83fbb0b2d8dc85fa636c4b9d34c75420c6d65"