Add filtering prop table docs and examples

README.md

@@ -206,6 +206,12 @@ Will be applied for series of stories.
        */
       codeTheme: 'github',
 
+      /**
+       * You can include prop tables locally here. See `propTables` example
+       * for more information
+       */
+      includePropTables: [YourImportedReactComponent],
+
       /**
        * Wrapper for story. Usually used to set some styles
        * NOTE: will be applied only for content docs (docs around the story)
@@ -302,6 +308,10 @@ addParameters({
   readme: {
     // You can set a code theme globally.
     codeTheme: 'github',
+
+    // You can exclude prop tables globally here. See `propTables` example
+    // for more information
+    excludePropTables: [YourImportedReactComponent]
   },
 });
 ```

packages/example-react/components/PropTables/RenderPropComponent.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export class RenderPropComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.state = { x: 0, y: 0 };
+  }
+
+  handleMouseMove(event) {
+    this.setState({
+      x: event.clientX,
+      y: event.clientY,
+    });
+  }
+
+  render() {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: '100%',
+          border: this.props.border,
+        }}
+        onMouseMove={this.handleMouseMove}
+      >
+        {this.props.children(this.state)}
+      </div>
+    );
+  }
+}
+
+RenderPropComponent.defaultProps = {
+  type: 'RenderProp Component',
+  border: '1px solid red',
+};
+
+RenderPropComponent.propTypes = {
+  /**
+   * This is a Render Prop Component!
+   */
+  type: PropTypes.string.isRequired,
+
+  /**
+   * Border value
+   */
+  border: PropTypes.string.isRequired,
+};
+
+export const DisplayMouseCoordinates = ({ name, x, y }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid black',
+        width: '500px',
+        height: '500px',
+      }}
+    >
+      <div>{name}</div>
+      <span>{`x: ${x}, y: ${y}`}</span>
+    </div>
+  );
+};
+
+DisplayMouseCoordinates.defaultProps = {
+  name: 'DisplayMouseCoordinates Component',
+};
+
+DisplayMouseCoordinates.propTypes = {
+  /**
+   * Name of the component
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Name of the component
+   */
+  x: PropTypes.number,
+  /**
+   * Name of the component
+   */
+  y: PropTypes.number,
+};

packages/example-react/components/PropTables/SmallComponentOne.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const SmallComponentOne = ({ type }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid black',
+        width: '200px',
+        height: '50px',
+      }}
+    >
+      {type}
+    </div>
+  );
+};
+
+SmallComponentOne.defaultProps = {
+  type: 'Small Component One',
+};
+
+SmallComponentOne.propTypes = {
+  /**
+   * Type of the component(small one)
+   */
+  type: PropTypes.string.isRequired,
+};

packages/example-react/components/PropTables/SmallComponentThree.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const SmallComponentThree = ({ type, backgroundColor }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid black',
+        width: '200px',
+        height: '50px',
+        backgroundColor,
+      }}
+    >
+      {type}
+    </div>
+  );
+};
+
+SmallComponentThree.defaultProps = {
+  type: 'Small Component Three',
+  backgroundColor: 'black',
+};
+
+SmallComponentThree.propTypes = {
+  /**
+   * Type of the component(small three)
+   */
+  type: PropTypes.string.isRequired,
+
+  /**
+   * Background color of the component
+   */
+  backgroundColor: PropTypes.string.isRequired,
+};

packages/example-react/components/PropTables/SmallComponentTwo.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const SmallComponentTwo = ({ type, color }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid black',
+        width: '200px',
+        height: '50px',
+        color,
+      }}
+    >
+      {type}
+    </div>
+  );
+};
+
+SmallComponentTwo.defaultProps = {
+  type: 'Small Component Two',
+  color: 'blue',
+};
+
+SmallComponentTwo.propTypes = {
+  /**
+   * Type of the component(small two)
+   */
+  type: PropTypes.string.isRequired,
+
+  /**
+   * Color of the component
+   */
+  color: PropTypes.string.isRequired,
+};

packages/example-react/components/PropTables/WrapperComponent.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const WrapperComponent = ({ width, height, children }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        border: '2px solid black',
+        width,
+        height,
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+WrapperComponent.defaultProps = {
+  width: '200px',
+  height: '200px',
+};
+
+WrapperComponent.propTypes = {
+  /**
+   * Width of the component
+   */
+  width: PropTypes.string.isRequired,
+
+  /**
+   * Height of the component
+   */
+  height: PropTypes.string.isRequired,
+
+  /**
+   * Children's are needed
+   */
+  children: PropTypes.node,
+};

packages/example-react/components/PropTables/withHOC.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const withHOC = options => WrappedComponent => {
+  const Enhanced = props => {
+    return <WrappedComponent {...props} />;
+  };
+  Enhanced.defaultProps = {
+    name: 'Enhanced Component',
+    whatever: 'Whatever string here',
+  };
+  Enhanced.propTypes = {
+    /**
+     * Name of this Component
+     */
+    name: PropTypes.string.isRequired,
+
+    /**
+     * Whatever string here
+     */
+    whatever: PropTypes.string.isRequired,
+  };
+
+  return Enhanced;
+};

packages/example-react/stories/withPropsTable/basic.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import ButtonWithPropTypes from '../../components/Button/ButtonWithPropTypes';
+
+const Basic = `
+# Basic Usage
+
+If your React component is already using \`PropTypes\`, then It is easy to
+show it in a table format by adding \`<!-- PROPS -->\` to \`readme\` object's
+\`content\`.
+
+### From specific story
+\`\`\`javascript
+import ButtonWithPropTypes from '../../components/Button/ButtonWithPropTypes';
+storiesOf('Your story name', module).add(
+  'Your story name',
+  () => <ButtonWithPropTypes label={'Hello Im Button with propTypes'} />,
+  {
+    readme: {
+      content: \`<!-- STORY --><!-- PROPS -->\`,
+    }
+  }
+);
+\`\`\`
+
+You can notice from below that the React component is showing and \`PropTypes\`
+that you specified to component is showing as a table format.
+`;
+
+storiesOf('PropsTable', module).add(
+  'Basic Usage',
+  () => <ButtonWithPropTypes label={'Hello Im Button with propTypes'} />,
+  {
+    readme: {
+      content: `${Basic}<!-- STORY --><!-- PROPS -->`,
+
+      // This is not necessary in normal situation. The reason for
+      // `includePropTables` is needed here is because `ButtonWithPropTypes` is
+      // specified in `excludePropTables` at `config.js`
+      includePropTables: [ButtonWithPropTypes],
+    },
+  }
+);