Component/interact (#102)

* fix proptype definition * interactive documentation component * add code example clean up function * new interact component * make Preview component interactive * remove interact element import from docs * return commas where automatically removed by formatter * change toggle text * cleanUpCode function refactor * change tooltip to prop description * describe props in comments * remove prop count * remove Interact exports * use styleguide button * use styleguide colors * fix commas * Preview component documentation for interactiveProps * add mdx heading * stylistic changes * remove interactiveProps preview, no use * change wording
lightingbeetle · Mar 26, 2019 · 9e41ac1 · 9e41ac1
1 parent 7b61be6
commit 9e41ac1
Show file tree

Hide file tree

Showing 10 changed files with 961 additions and 21 deletions.
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
@@ -51,7 +51,7 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,json,css}": [
-      "prettier --single-quote --write",
+      "prettier --single-quote --trailing-comma --write",
       "git add"
     ]
   },

diff --git a/packages/styleguide/src/components/Button/Button.js b/packages/styleguide/src/components/Button/Button.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { string } from 'prop-types';
 
 import { rem } from './../../style/utils';
 
@@ -17,7 +18,7 @@ const StyledButton = styled.button`
   background: transparent;
   font-family: ${props => props.theme.fontFamily};
   font-weight: ${props => props.theme.fontWeights.bold};
-  font-size: ${props => props.theme.fontSizes.small};
+  font-size: ${props => props.theme.fontSizes[props.fontSize]};
   color: ${props => props.theme.colors.black};
 
   .icon {
@@ -26,6 +27,14 @@ const StyledButton = styled.button`
   }
 `;
 
+StyledButton.propTypes = {
+  fontSize: string,
+};
+
+StyledButton.defaultProps = {
+  fontSize: 'small',
+};
+
 const Button = ({ children, variant, ...other }) => {
   return <StyledButton {...other}>{children}</StyledButton>;
 };

diff --git a/packages/styleguide/src/components/ColorPalette/ColorPalette.docs.mdx b/packages/styleguide/src/components/ColorPalette/ColorPalette.docs.mdx
@@ -48,4 +48,4 @@ Convey meaning through color. ColorPalette is intended to display one color hue
 
 ## Props
 
-<ComponentDocs title="<ColorPallete />" component={ColorPallete} />
+<ComponentDocs title="<ColorPallete />" component={ColorPallete} />
diff --git a/packages/styleguide/src/components/ComponentDocs/utils.js b/packages/styleguide/src/components/ComponentDocs/utils.js
@@ -120,7 +120,6 @@ function getType(type) {
 }
 
 function getPropsData(props = {}) {
-  console.log('props:', props);
   return Object.keys(props).reduce(
     (allProps, prop) => [
       ...allProps,

diff --git a/packages/styleguide/src/components/ComponentInfo/ComponentInfo.js b/packages/styleguide/src/components/ComponentInfo/ComponentInfo.js
@@ -14,11 +14,11 @@ const propTypes = {
       /** Type label */
       label: string.isRequired,
       /** Array of values which will be displayed as InfoBadges */
-      values: array
+      values: array,
     })
   ).isRequired,
   /** Default map of available colors to types. Color must be defined in theme. */
-  typeToColorMap: BadgePropTypes.typeToColorMap
+  typeToColorMap: BadgePropTypes.typeToColorMap,
 };
 
 const ComponentInfo = ({ infoTypes, typeToColorMap, ...other }) => {
@@ -33,7 +33,7 @@ const ComponentInfo = ({ infoTypes, typeToColorMap, ...other }) => {
             typeToColorMap={typeToColorMap}
             {...other}
           />
-        </BarItem>
+        </BarItem>,
       ];
     }
 
@@ -58,6 +58,6 @@ const StyledComponentInfo = styled.div`
 `;
 
 ComponentInfo.propTypes = propTypes;
-ComponentInfo.defaultName = 'ComponentInfo';
+ComponentInfo.displayName = 'ComponentInfo';
 
 export default ComponentInfo;
diff --git a/packages/styleguide/src/components/Preview/CodeExample.js b/packages/styleguide/src/components/Preview/CodeExample.js
@@ -11,14 +11,65 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import Code from '../Code/';
 import Button from '../Button';
 
+/**
+ * Remove props that are undefined or null
+ * Don't show React.Fragment in code example
+ */
+const cleanUpCode = markup => {
+  const markupProps = markup.props || {};
+
+  return Object.keys(markupProps).reduce((acc, curr) => {
+    let currProp = markupProps[curr];
+
+    let newProp;
+    // clean up child code
+    if (curr === 'children' && typeof currProp !== 'string') {
+      newProp = React.Children.map(currProp, child => {
+        // hide fragments if containing just strings
+        const isFragmentString =
+          child.type === React.Fragment &&
+          child.props &&
+          typeof child.props.children === 'string';
+
+        return isFragmentString
+          ? child.props.children
+          : {
+              ...child,
+              props: cleanUpCode(child)
+            };
+      });
+    }
+
+    // hide undefined or null props
+    const isNotDefined = [undefined, null].indexOf(currProp) !== -1;
+    return {
+      ...acc,
+      ...(isNotDefined
+        ? {}
+        : {
+            [curr]: newProp || currProp
+          })
+    };
+  }, {});
+};
+
 const getJSXAsStringFromMarkup = (markup, options) => {
+  const { cleanProps, ...otherOptions } = options || {};
+
   const reactElementToJSXStringOptions = {
     showDefaultProps: false,
     showFunctions: true,
     functionValue: fn => fn.name,
-    ...options
+    ...otherOptions
   };
 
+  if (cleanProps) {
+    markup = {
+      ...markup,
+      props: cleanUpCode(markup)
+    };
+  }
+
   // valid element can be passed to reactElementToJSXString directly
   if (React.isValidElement(markup)) {
     return reactElementToJSXString(markup, reactElementToJSXStringOptions);