Add display configuration options to info addon

addons/info/.storybook/addons.js

@@ -1,2 +1 @@
 import '@storybook/addon-actions/register';
-import 'react-storybook-addon-backgrounds/register';

addons/info/example/story.js

@@ -3,7 +3,6 @@ import Button from './Button';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import backgrounds from 'react-storybook-addon-backgrounds';
 
 storiesOf(
   'Button'
@@ -137,23 +136,57 @@ storiesOf('Button').addWithInfo(
   { inline: true }
 );
 
-storiesOf('Button')
-  .addDecorator(backgrounds([{ name: 'dark', value: '#333', default: true }]))
-  .addWithInfo(
-    'with custom styles',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropsInLine === 1)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { inline: true, maxPropsIntoLine: 1 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropObjectKeys === 5)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
+  { inline: true, maxPropObjectKeys: 5 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropArrayLength === 8)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
+  { inline: true, maxPropArrayLength: 8 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropStringLength === 10)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" string="1 2 3 4 5 6 7 8" />,
+  { inline: true, maxPropStringLength: 5 }
+);
+
+storiesOf('Button').addWithInfo(
+  'with custom styles',
+  `
       This is an example of how to customize the styles of the info components.
 
       For the full styles available, see \`./src/components/Story.js\`
     `,
-    () => <Button label="The Button" onClick={action('onClick')} />,
-    {
-      inline: true,
-      styles: stylesheet => {
-        stylesheet.infoPage = {
-          backgroundColor: '#ccc',
-        };
-        return stylesheet;
-      },
-    }
-  );
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  {
+    inline: true,
+    styles: stylesheet => {
+      stylesheet.infoPage = {
+        backgroundColor: '#ccc',
+      };
+      return stylesheet;
+    },
+  }
+);

addons/info/package.json

@@ -25,10 +25,9 @@
     "git-url-parse": "^6.2.2",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "react-storybook-addon-backgrounds": "0.0.7",
     "react-test-renderer": "^15.5.4"
   },
   "peerDependencies": {
     "react": "*"
   }
-}
+}

addons/info/src/components/Node.js

@@ -43,7 +43,14 @@ function getData(element) {
 }
 
 export default function Node(props) {
-  const { node, depth } = props;
+  const {
+    node,
+    depth,
+    maxPropsIntoLine,
+    maxPropObjectKeys,
+    maxPropArrayLength,
+    maxPropStringLength,
+  } = props;
   const { tagStyle, containerStyle } = stylesheet;
 
   const leftPad = {
@@ -69,7 +76,14 @@ export default function Node(props) {
     return (
       <div style={containerStyle}>
         <span style={tagStyle}>&lt;{name}</span>
-        <Props node={node} singleLine />
+        <Props
+          node={node}
+          singleLine
+          maxPropsIntoLine={maxPropsIntoLine}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
         <span style={tagStyle}>/&gt;</span>
       </div>
     );
@@ -83,10 +97,25 @@ export default function Node(props) {
     <div>
       <div style={containerStyleCopy}>
         <span style={tagStyle}>&lt;{name}</span>
-        <Props node={node} />
+        <Props
+          node={node}
+          maxPropsIntoLine={maxPropsIntoLine}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
         <span style={tagStyle}>&gt;</span>
       </div>
-      {React.Children.map(children, childElement => <Node node={childElement} depth={depth + 1} />)}
+      {React.Children.map(children, childElement => (
+        <Node
+          node={childElement}
+          depth={depth + 1}
+          maxPropsIntoLine={maxPropsIntoLine}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
+      ))}
       <div style={containerStyleCopy}>
         <span style={tagStyle}>&lt;/{name}&gt;</span>
       </div>
@@ -102,4 +131,8 @@ Node.defaultProps = {
 Node.propTypes = {
   node: PropTypes.node,
   depth: PropTypes.number,
+  maxPropsIntoLine: PropTypes.number.isRequired,
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
 };

addons/info/src/components/PropTable.js

@@ -5,14 +5,13 @@ import React from 'react';
 import PropVal from './PropVal';
 
 const PropTypesMap = new Map();
-for (const typeName in PropTypes) { // eslint-disable-line
-  if (!PropTypes.hasOwnProperty(typeName)) { // eslint-disable-line
-    continue; // eslint-disable-line
-  }
+
+Object.keys(PropTypes).forEach(typeName => {
   const type = PropTypes[typeName];
+
   PropTypesMap.set(type, typeName);
   PropTypesMap.set(type.isRequired, typeName);
-}
+});
 
 const stylesheet = {
   propTable: {
@@ -22,26 +21,26 @@ const stylesheet = {
   },
 };
 
-const PropTable = ({ type }) => {
+export default function PropTable(props) {
+  const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+
   if (!type) {
     return null;
   }
 
-  const props = {};
+  const accumProps = {};
 
   if (type.propTypes) {
-      for (const property in type.propTypes) { // eslint-disable-line
-        if (!type.propTypes.hasOwnProperty(property)) { // eslint-disable-line
-          continue; // eslint-disable-line
-      }
+    Object.keys(type.propTypes).forEach(property => {
       const typeInfo = type.propTypes[property];
-      let propType = PropTypesMap.get(typeInfo) || 'other';
       const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
       const description = type.__docgenInfo &&
         type.__docgenInfo.props &&
         type.__docgenInfo.props[property]
         ? type.__docgenInfo.props[property].description
         : null;
+      let propType = PropTypesMap.get(typeInfo) || 'other';
+
       if (propType === 'other') {
         if (
           type.__docgenInfo &&
@@ -52,32 +51,41 @@ const PropTable = ({ type }) => {
           propType = type.__docgenInfo.props[property].type.name;
         }
       }
-      props[property] = { property, propType, required, description };
-    }
+
+      accumProps[property] = { property, propType, required, description };
+    });
   }
 
   if (type.defaultProps) {
-      for (const property in type.defaultProps) { // eslint-disable-line
-        if (!type.defaultProps.hasOwnProperty(property)) { // eslint-disable-line
-          continue; // eslint-disable-line
-      }
+    Object.keys(type.defaultProps).forEach(property => {
       const value = type.defaultProps[property];
+
       if (value === undefined) {
-          continue; // eslint-disable-line
+        return;
       }
-      if (!props[property]) {
-        props[property] = { property };
+
+      if (!accumProps[property]) {
+        accumProps[property] = { property };
       }
-      props[property].defaultValue = value;
-    }
+
+      accumProps[property].defaultValue = value;
+    });
   }
 
-  const array = Object.values(props);
+  const array = Object.values(accumProps);
+
   if (!array.length) {
     return <small>No propTypes defined!</small>;
   }
+
   array.sort((a, b) => a.property > b.property);
 
+  const propValProps = {
+    maxPropObjectKeys,
+    maxPropArrayLength,
+    maxPropStringLength,
+  };
+
   return (
     <table style={stylesheet.propTable}>
       <thead>
@@ -90,24 +98,31 @@ const PropTable = ({ type }) => {
         </tr>
       </thead>
       <tbody>
-        {array.map(row =>
+        {array.map(row => (
           <tr key={row.property}>
             <td>{row.property}</td>
             <td>{row.propType}</td>
             <td>{row.required}</td>
-            <td>{row.defaultValue === undefined ? '-' : <PropVal val={row.defaultValue} />}</td>
+            <td>
+              {row.defaultValue === undefined
+                ? '-'
+                : <PropVal val={row.defaultValue} {...propValProps} />}
+            </td>
             <td>{row.description}</td>
           </tr>
-        )}
+        ))}
       </tbody>
     </table>
   );
-};
+}
 
 PropTable.displayName = 'PropTable';
 PropTable.defaultProps = {
   type: null,
 };
 PropTable.propTypes = {
   type: PropTypes.func,
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
 };