Merge pull request #75 from blueberryapps/cl-57-variants

CL-57 Render only variants that affect component's look

src/app/atoms/Input.react.js

@@ -8,7 +8,6 @@ import * as colors from '../styles/Colors';
 export default class Input extends Component {
   static propTypes = {
     inheritedStyles: RPT.oneOfType([RPT.array, RPT.object]),
-    key: RPT.string,
     kind: RPT.oneOf([
       'inputDefault',
       'inputSearch'

src/app/component/Variants.react.js

@@ -1,12 +1,14 @@
+import _ from 'lodash';
 import AtomPreview from '../atoms/AtomPreview.react';
 import Component from 'react-pure-render/component';
-import {fromJS} from 'immutable';
 import headingStyles from '../styles/Headings';
 import Radium from 'radium';
 import React, {PropTypes as RPT} from 'react';
 import renderProp from '../../libraries/renderProp';
 import SourceCode from './SourceCode.react';
 import styles from '../styles/Sources';
+import variantChecksum from '../../libraries/variantChecksum';
+import {fromJS} from 'immutable';
 
 @Radium
 export default class Variants extends Component {
@@ -53,13 +55,36 @@ export default class Variants extends Component {
 
   renderEnumVariant(key, name, value) {
     if (typeof value === 'object')
-      return this.renderVariants(key, name, value.map(text => text.get('value').replace(/\'/g, '')))
+      return this.renderVariants(key, name, value.map(text => text.get('value').replace(/\'/g, '')).toJS())
     return null
   }
 
+  collectVariants(key, type, variants) {
+    const {atom, componentProps} = this.props
+
+    return variants.map(variant => {
+      const variantProps = componentProps.set(key, variant)
+
+      return {
+        atom,
+        key,
+        type,
+        variant,
+        variantProps,
+        checksum: variantChecksum({atom, variantProps, context: this.context}),
+      }
+    })
+  }
+
   renderVariants(key, type, variants) {
     const {headingColor} = this.props
 
+    const collection = this.collectVariants(key, type, variants);
+    const uniqCollection = _.uniqBy(collection, i => i.checksum);
+
+    if (uniqCollection.length < 2)
+      return null;
+
     return (
       <div>
         <div style={styles.panel}>
@@ -69,15 +94,13 @@ export default class Variants extends Component {
           >
             Prop variant: <b>{key}</b>
           </h2>
-          {variants.map(variant => this.renderVariant(key, type, variant))}
+          {collection.map(item => this.renderVariant(item))}
         </div>
       </div>
     )
   }
 
-  renderVariant(key, type, variant) {
-    const {atom, componentProps} = this.props
-    const variantProps = componentProps.set(key,  variant)
+  renderVariant({atom, key, type, variant, variantProps}) {
     const source = `<${atom.get('componentName')} ${renderProp(key, type, variant)} />`
 
     return (

src/libraries/variantChecksum.js

@@ -0,0 +1,34 @@
+import AtomPreview from '../app/atoms/AtomPreview.react';
+import React, {PropTypes as RPT} from 'react';
+import ReactDOM from 'react-dom/server';
+
+const variantChecksum = ({atom, variantProps, context}) => {
+  const Context = contextCreator(context);
+  const html = ReactDOM.renderToStaticMarkup(
+    <Context context={context}>
+      <AtomPreview atom={atom} variantProps={variantProps} />
+    </Context>
+  )
+  const pureHtml = html.replace(/<([a-zA-Z]+)\s?([^>])+>/ig, '<$1>');
+  const style = (html.match(/style="[^"]+"/ig) || []).toString();
+  const classes = (html.match(/class="[^"]+"/ig) || []).toString();
+  return JSON.stringify([pureHtml, style, classes]);
+}
+
+const contextCreator = (context) => class ContextProvider extends React.Component {
+  static childContextTypes = Object.keys(context).reduce((out, key)=> ({...out, [key]: RPT.any}), {});
+
+  static propTypes = {
+    children: RPT.node
+  }
+
+  getChildContext() {
+    return context;
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default variantChecksum;