Merge pull request #3468 from andyo729/feature/add-excluded-proptypes…

…-to-with-info Add excludedPropTypes as an option to info addon
storybookjs · Apr 27, 2018 · f9635a0 · f9635a0
2 parents da5fdef + e3acf75
commit f9635a0
Show file tree

Hide file tree

Showing 11 changed files with 510 additions and 8 deletions.
diff --git 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
@@ -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
@@ -20,6 +20,7 @@ exports[`addon Info should render <Info /> 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
                   </h2>
                   <Component
+                    excludedPropTypes={Array []}
                     maxPropArrayLength={3}
                     maxPropObjectKeys={3}
                     maxPropStringLength={50}
                     type={[Function]}
                   >
                     <PropTable
+                      excludedPropTypes={Array []}
                       maxPropArrayLength={3}
                       maxPropObjectKeys={3}
                       maxPropStringLength={50}

diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import 'core-js/fn/array/includes';
 
 import { Table, Td, Th } from '@storybook/components';
 import PropVal from './PropVal';
@@ -22,20 +23,33 @@ export const multiLineText = input => {
       ));
 };
 
+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,
     maxPropObjectKeys,
     maxPropArrayLength,
     maxPropStringLength,
     propDefinitions,
+    excludedPropTypes,
   } = props;
 
   if (!type) {
     return null;
   }
 
-  if (!propDefinitions.length) {
+  const includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes);
+
+  if (!includedPropDefinitions.length) {
     return <small>No propTypes defined!</small>;
   }
 
@@ -57,7 +71,7 @@ export default function PropTable(props) {
         </tr>
       </thead>
       <tbody>
-        {propDefinitions.map(row => (
+        {includedPropDefinitions.map(row => (
           <tr key={row.property}>
             <Td bordered code>
               {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
@@ -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 = () => (<div />);
+    const propTableProps = {
+      type: FooComponent,
+      maxPropArrayLength: 5,
+      maxPropObjectKeys: 5,
+      maxPropStringLength: 5,
+      propDefinitions,
+    };
+
+    it('should include all propTypes by default', () => {
+      const wrapper = mount(<PropTable { ...propTableProps } />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should exclude excluded propTypes', () => {
+      const props = { ...propTableProps, excludedPropTypes: ['foo'] };
+      const wrapper = mount(<PropTable { ...props } />);
+      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
@@ -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
       <div key={`${getName(type)}_${i}`}>
@@ -341,6 +341,7 @@ class Story extends React.Component {
           maxPropObjectKeys={maxPropObjectKeys}
           maxPropArrayLength={maxPropArrayLength}
           maxPropStringLength={maxPropStringLength}
+          excludedPropTypes={excludedPropTypes}
         />
       </div>
     ));
@@ -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
@@ -1,5 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`PropTable multiLineText should exclude excluded propTypes 1`] = `
+<PropTable
+  excludedPropTypes={
+    Array [
+      "foo",
+    ]
+  }
+  maxPropArrayLength={5}
+  maxPropObjectKeys={5}
+  maxPropStringLength={5}
+  propDefinitions={
+    Array [
+      Object {
+        "defaultValue": undefined,
+        "description": "",
+        "propType": Object {
+          "name": "string",
+        },
+        "property": "foo",
+        "required": false,
+      },
+    ]
+  }
+  type={[Function]}
+>
+  <small>
+    No propTypes defined!
+  </small>
+</PropTable>
+`;
+
 exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = `
 Array [
   <span>
@@ -18,3 +49,144 @@ Array [
   </span>,
 ]
 `;
+
+exports[`PropTable multiLineText should include all propTypes by default 1`] = `
+<PropTable
+  excludedPropTypes={Array []}
+  maxPropArrayLength={5}
+  maxPropObjectKeys={5}
+  maxPropStringLength={5}
+  propDefinitions={
+    Array [
+      Object {
+        "defaultValue": undefined,
+        "description": "",
+        "propType": Object {
+          "name": "string",
+        },
+        "property": "foo",
+        "required": false,
+      },
+    ]
+  }
+  type={[Function]}
+>
+  <glamorous(table)>
+    <table
+      className="css-1ytzlk7"
+    >
+      <thead>
+        <tr>
+          <glamorous(th)
+            bordered={true}
+          >
+            <th
+              className="css-d52hbj"
+            >
+              property
+            </th>
+          </glamorous(th)>
+          <glamorous(th)
+            bordered={true}
+          >
+            <th
+              className="css-d52hbj"
+            >
+              propType
+            </th>
+          </glamorous(th)>
+          <glamorous(th)
+            bordered={true}
+          >
+            <th
+              className="css-d52hbj"
+            >
+              required
+            </th>
+          </glamorous(th)>
+          <glamorous(th)
+            bordered={true}
+          >
+            <th
+              className="css-d52hbj"
+            >
+              default
+            </th>
+          </glamorous(th)>
+          <glamorous(th)
+            bordered={true}
+          >
+            <th
+              className="css-d52hbj"
+            >
+              description
+            </th>
+          </glamorous(th)>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          key="foo"
+        >
+          <glamorous(td)
+            bordered={true}
+            code={true}
+          >
+            <td
+              className="css-1ygfcef"
+            >
+              foo
+            </td>
+          </glamorous(td)>
+          <glamorous(td)
+            bordered={true}
+            code={true}
+          >
+            <td
+              className="css-1ygfcef"
+            >
+              <PrettyPropType
+                depth={1}
+                propType={
+                  Object {
+                    "name": "string",
+                  }
+                }
+              >
+                <span>
+                  string
+                </span>
+              </PrettyPropType>
+            </td>
+          </glamorous(td)>
+          <glamorous(td)
+            bordered={true}
+          >
+            <td
+              className="css-d52hbj"
+            >
+              -
+            </td>
+          </glamorous(td)>
+          <glamorous(td)
+            bordered={true}
+          >
+            <td
+              className="css-d52hbj"
+            >
+              -
+            </td>
+          </glamorous(td)>
+          <glamorous(td)
+            bordered={true}
+          >
+            <td
+              className="css-d52hbj"
+            />
+          </glamorous(td)>
+        </tr>
+      </tbody>
+    </table>
+  </glamorous(table)>
+</PropTable>
+`;
diff --git 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 <Story {...props}>{storyFn(context)}</Story>;
 }