Adds Expander component

Author: danieldelcore

packages/pretty-proptypes/src/LayoutRenderer/index.js

@@ -5,6 +5,8 @@
 import { FC, type ComponentType } from 'react';
 
 import type { CommonProps } from '../types';
+import type { Components } from '../components';
+
 import getPropTypes from '../getPropTypes';
 import renderPropType from '../renderPropType';
 import PrettyPropType from '../PrettyConvert';
@@ -29,12 +31,13 @@ export type LayoutRendererProps = {
     component?: Obj | Inter
   },
   component?: ComponentType<any>,
+  components?: Components,
   renderType: CommonProps => ComponentType<CommonProps>
 };
 
 const getProps = props => (props && props.component ? getPropTypes(props.component) : null);
 
-const LayoutRenderer: FC<LayoutRendererProps> = ({ props, component, ...rest }) => {
+const LayoutRenderer: FC<LayoutRendererProps> = ({ props, component, components, ...rest }) => {
   let resolvedProps = props;
   if (component) {
     /* $FlowFixMe the component prop is typed as a component because
@@ -53,7 +56,11 @@ const LayoutRenderer: FC<LayoutRendererProps> = ({ props, component, ...rest })
   }
 
   return getProps(resolvedProps).map(propType =>
-    renderPropType(propType, { ...rest, components: { PropType: PrettyPropType } }, rest.renderType)
+    renderPropType(
+      propType,
+      { ...rest, components: { ...components, PropType: PrettyPropType } },
+      rest.renderType
+    )
   );
 };
 

packages/pretty-proptypes/src/PrettyConvert/AddBrackets.js

@@ -1,50 +1,14 @@
 // @flow
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import { Component, Fragment, type Node } from 'react';
-import { colors } from '../components/constants';
-
-const StateBit = ({
-  isHovered,
-  onMouseEnter,
-  onMouseLeave,
-  onClick,
-  children
-}: {
-  isHovered: boolean,
-  onMouseEnter: () => mixed,
-  onMouseLeave: () => mixed,
-  onClick: () => mixed,
-  children: Node
-}) => (
-  <button
-    type="button"
-    onClick={onClick}
-    css={css`
-      background-color: ${isHovered ? colors.P300 : colors.N20};
-      color: ${isHovered ? 'white' : colors.subtleText};
-      border: 0;
-      fonts-size: 14px;
-      fonts-family: sans-serif;
-      line-height: 20px;
-      width: auto;
-      margin: 2px 0;
-      padding: 0 0.2em;
-      :hover {
-        cursor: pointer;
-      }
-    `}
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}
-  >
-    {children}
-  </button>
-);
+import { jsx } from '@emotion/core';
+import { Component, ComponentType, Fragment, type Node } from 'react';
+import ExpanderDefault from '../Components/Expander';
 
 type Props = {
   openBracket: string,
   closeBracket: string,
-  children: Node | void
+  children: Node | void,
+  Expander: ComponentType<any>
 };
 
 type State = {
@@ -55,7 +19,8 @@ type State = {
 export default class AddBrackets extends Component<Props, State> {
   static defaultProps = {
     openBracket: '(',
-    closeBracket: ')'
+    closeBracket: ')',
+    Expander: ExpanderDefault
   };
 
   state = { isHovered: false, isShown: true };
@@ -64,39 +29,39 @@ export default class AddBrackets extends Component<Props, State> {
   isNotHovered = () => this.setState({ isHovered: false });
 
   render() {
-    let { openBracket, closeBracket, children } = this.props;
-    let { isHovered, isShown } = this.state;
+    const { openBracket, closeBracket, children, Expander } = this.props;
+    const { isHovered, isShown } = this.state;
 
     return (
       <Fragment>
-        <StateBit
+        <Expander
           isHovered={isHovered}
           onClick={() => this.setState({ isShown: !isShown })}
           onMouseEnter={this.isHovered}
           onMouseLeave={this.isNotHovered}
         >
           {openBracket}
-        </StateBit>
+        </Expander>
         {isShown ? (
           children
         ) : (
-          <StateBit
+          <Expander
             isHovered={isHovered}
             onClick={() => this.setState({ isShown: true, isHovered: false })}
             onMouseEnter={this.isHovered}
             onMouseLeave={this.isNotHovered}
           >
             ...
-          </StateBit>
+          </Expander>
         )}
-        <StateBit
+        <Expander
           isHovered={isHovered}
           onClick={() => this.setState({ isShown: !isShown })}
           onMouseEnter={this.isHovered}
           onMouseLeave={this.isNotHovered}
         >
           {closeBracket}
-        </StateBit>
+        </Expander>
       </Fragment>
     );
   }

packages/pretty-proptypes/src/PrettyConvert/converters.js

@@ -86,7 +86,7 @@ export const converters: { [string]: ?Function } = {
       return (
         <span>
           <components.TypeMeta>{convert(type.value)}</components.TypeMeta>
-          <AddBrackets openBracket="<" closeBracket=">">
+          <AddBrackets openBracket="<" closeBracket=">" Expander={components.Expander}>
             {type.typeParams &&
               type.typeParams.params.map((param, index, array) => (
                 <span key={index}>
@@ -120,7 +120,7 @@ export const converters: { [string]: ?Function } = {
 
     return (
       <span>
-        <AddBrackets BracketStyler={components.TypeMeta} openBracket="{" closeBracket="}">
+        <AddBrackets openBracket="{" closeBracket="}" Expander={components.Expander}>
           <components.Indent>
             {type.members
               .filter(p => p)
@@ -147,7 +147,7 @@ export const converters: { [string]: ?Function } = {
     return (
       <span>
         <components.TypeMeta>Array</components.TypeMeta>
-        <AddBrackets BracketStyler={components.TypeMeta} openBracket="<" closeBracket=">">
+        <AddBrackets openBracket="<" closeBracket=">" Expander={components.Expander}>
           <components.Indent>{prettyConvert(type.type, components, depth)}</components.Indent>
         </AddBrackets>
       </span>
@@ -168,7 +168,7 @@ export const converters: { [string]: ?Function } = {
   union: (type: K.Union, components: Components, depth: number) => (
     <span>
       <components.TypeMeta>One of </components.TypeMeta>
-      <AddBrackets BracketStyler={components.TypeMeta} openBracket="<" closeBracket=">">
+      <AddBrackets openBracket="<" closeBracket=">" Expander={components.Expander}>
         <components.Indent>
           {type.types.map((t, index, array) => (
             <div key={index}>
@@ -198,7 +198,7 @@ export const converters: { [string]: ?Function } = {
     } else if (simpleParameters || type.parameters.length < 2) {
       return (
         <span>
-          <AddBrackets BracketStyler={components.FunctionType}>
+          <AddBrackets Expander={components.Expander}>
             {type.parameters.map((param, index, array) => [
               prettyConvert(param, components, depth),
               array.length - 1 === index ? '' : ', '
@@ -212,7 +212,7 @@ export const converters: { [string]: ?Function } = {
       return (
         <span>
           <components.TypeMeta>function </components.TypeMeta>
-          <AddBrackets BracketStyler={components.FunctionType}>
+          <AddBrackets Expander={components.Expander}>
             <components.Indent>
               {type.parameters.map((param, index, array) => (
                 <div key={convert(param.value)}>
@@ -228,9 +228,9 @@ export const converters: { [string]: ?Function } = {
       );
     }
   },
-  param: (type: K.Param, components, depth) => {
-    return <span key={convert(type.value)}>{prettyConvert(type.value, components, depth)}</span>;
-  },
+  param: (type: K.Param, components, depth) => (
+    <span key={convert(type.value)}>{prettyConvert(type.value, components, depth)}</span>
+  ),
   typeof: (type: K.Typeof, components, depth) => prettyConvert(type.type, components, depth)
 };
 

packages/pretty-proptypes/src/PrettyConvert/index.js

@@ -21,8 +21,6 @@ const Wrapper = (props: { children: Node }) => (
   />
 );
 
-// const printFunc = type => null;
-
 type PrettyPropTypeProps = {
   typeValue: Object,
   shouldCollapse?: boolean,

packages/pretty-proptypes/src/components/Expander.js

@@ -0,0 +1,45 @@
+// @flow
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
+import { colors } from './constants';
+
+const Expander = ({
+  isHovered,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  children
+}: {
+  isHovered: boolean,
+  onMouseEnter: () => mixed,
+  onMouseLeave: () => mixed,
+  onClick: () => mixed,
+  children: Node
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    css={css`
+      background-color: ${isHovered ? colors.P300 : colors.N20};
+      color: ${isHovered ? 'white' : colors.subtleText};
+      border: 0;
+      border-radius: 3px;
+      font-size: 14px;
+      font-family: sans-serif;
+      line-height: 20px;
+      width: auto;
+      margin: 2px 0;
+      padding: 0 0.2em;
+      :hover {
+        cursor: pointer;
+      }
+    `}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+  >
+    {children}
+  </button>
+);
+
+export default Expander;

packages/pretty-proptypes/src/components/index.js

@@ -5,6 +5,7 @@ import Outline from './Outline';
 import Required from './Required';
 import Description from './Description';
 import Button from './Button';
+import Expander from './Expander';
 import Type, { StringType, TypeMeta, FunctionType } from './Type';
 
 const components = {
@@ -16,7 +17,8 @@ const components = {
   TypeMeta,
   Description,
   Button,
-  FunctionType
+  FunctionType,
+  Expander
 };
 
 export default components;
@@ -30,5 +32,6 @@ export type Components = {
   TypeMeta: ComponentType<any>,
   Description: ComponentType<any>,
   Button: ComponentType<any>,
-  FunctionType: ComponentType<any>
+  FunctionType: ComponentType<any>,
+  Expander: ComponentType<any>
 };

stories/layout/LayoutRenderer.stories.js

@@ -121,7 +121,7 @@ Base.args = {
                     <HeadingType>{type}</HeadingType>
                   </span>
                   <span>
-                    <components.PropType typeValue={typeValue} />
+                    <components.PropType typeValue={typeValue} components={components} />
                   </span>
                 </td>
               </tr>