From 0aba834f11f91c3907803e8f4f6a460f3237c523 Mon Sep 17 00:00:00 2001
From: Collin Miller <collintmiller@gmail.com>
Date: Mon, 16 May 2016 15:19:18 -0500
Subject: [PATCH] some enhancements to example runner for designing at multiple
 breakpoints inside iframes

---
 .eslintignore         |   1 +
 examples/component.js | 277 ++++++++++++++++++++++++++++++++++++++++--
 examples/examples.js  |   5 +-
 examples/index.html   |   3 +
 examples/index.js     |  46 ++++---
 examples/routes.js    |  21 +++-
 examples/style.scss   |   9 ++
 7 files changed, 320 insertions(+), 42 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 2db218e1..f01dc4e7 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 scripts/*
 bower_components/*
 generator-bulbs-elements
+examples/*
diff --git a/examples/component.js b/examples/component.js
index fec9a925..9746488e 100644
--- a/examples/component.js
+++ b/examples/component.js
@@ -1,24 +1,279 @@
-/* eslint react/no-unknown-property: "off" */
-/* eslint-disable react/prop-types, react/no-danger */
-
 import React from 'react';
+import { browserHistory } from 'react-router';
 import examples from './element-examples';
 
-class Component extends React.Component {
+const DEVICES = {
+  desktop: {
+    width: '1000px',
+  },
+  tablet: {
+    width: '600px',
+  },
+  mobile: {
+    width: '320px',
+  },
+};
+
+function Checkerboard () {
+  let gridSize = 8;
+  let gridColor = '#fafafa';
+  return (
+    <svg
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 0,
+        width: '100%',
+        height: '100%',
+      }}
+		>
+			<defs>
+				<pattern
+					id="checkerboard"
+					x="0"
+					y="0"
+					width={gridSize * 2}
+					height={gridSize * 2}
+					patternUnits="userSpaceOnUse"
+				>
+					<rect
+						fill={gridColor}
+						x="0"
+						y="0"
+						width={gridSize}
+						height={gridSize}
+					/>
+					<rect
+						fill={gridColor}
+						x={gridSize}
+						y={gridSize}
+						width={gridSize}
+						height={gridSize}
+					/>
+				</pattern>
+			</defs>
+			<rect
+				fill="url(#checkerboard)"
+				x="0"
+				y="0"
+				width="100%"
+				height="100%"
+			/>
+		</svg>
+	);
+}
+
+class ExampleViewport extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+			scale: 1,
+			workspace: 1,
+		};
+  }
+
+  setDevice (device) {
+    let segments = [
+      'example',
+      this.props.params.element,
+      this.props.params.example,
+      device,
+    ];
+
+    console.log('/' + segments.join('/'), {});
+    browserHistory.push('/' + segments.join('/'), {});
+  }
+
+  setScale(event) {
+    this.setState({
+			scale: event.target.value,
+		});
+  }
+
+  setWorkspace(event) {
+    this.setState({
+			workspace: event.target.value,
+		});
+  }
+
+  render () {
+    return (
+      <div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					flexGrow: 1,
+				}}
+			>
+        <header
+          style={{
+            background: '#fcc',
+            fontFamily: 'Rokkitt',
+						position: 'relative',
+						zIndex: 1,
+          }}
+        >
+          <button
+            onClick={this.setDevice.bind(this, 'desktop')}
+          >
+            <i className="fa fa-desktop"/>
+          </button>
+          <button
+            onClick={this.setDevice.bind(this, 'tablet,mobile')}
+          >
+            <i className="fa fa-tablet"/>
+            <i className="fa fa-mobile-phone"/>
+          </button>
+
+					<label>Scale</label>
+					<input
+						type="range"
+						min="0.1"
+						max="2"
+						step="0.01"
+						value={this.state.scale}
+						onChange={this.setScale.bind(this)}
+					/>
+					<input size="4" value={parseInt(this.state.scale * 100) + '%'} disabled />
+
+					<label>Workspace</label>
+					<input
+						type="range"
+						min="0.5"
+						max="2"
+						step="0.01"
+						value={this.state.workspace}
+						onChange={this.setWorkspace.bind(this)}
+					/>
+					<input size="4" value={parseInt(this.state.workspace * 100) + '%'} disabled />
+        </header>
+				<div
+					style={{
+						position: 'relative',
+						flexGrow: 1,
+					}}
+				>
+					<Checkerboard/>
+					<div
+						style={{
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							transform: `scale(${this.state.scale})`,
+							transformOrigin: 'top left',
+							width: 220 * this.state.workspace + '%',
+							height: '100%',
+							display: 'flex',
+							justifyContent: 'space-between',
+						}}
+					>
+						{
+							this.props.params.device.split(',').map((device) => {
+								return (
+									<iframe
+										style={{
+											width: DEVICES[device].width,
+											minWidth: DEVICES[device].width,
+											margin: '0 auto',
+											marginTop: 8,
+											border: 'none',
+										}}
+										src={this.props.componentPath}
+									/>
+								)
+							})
+						}
+					</div>
+				</div>
+      </div>
+    );
+  }
+}
+
+export class RenderComponent extends React.Component {
   renderExample () {
-    let example = examples.find((exmpl) => {
-      return exmpl.element === this.props.params.element;
+    let example = examples.find((anExample) => {
+      return anExample.element === this.props.params.element;
     });
     return {
       __html: example.examples[this.props.params.example].render(),
     };
   }
 
+	render () {
+    try {
+			return <div dangerouslySetInnerHTML={this.renderExample()} />;
+    }
+    catch (error) {
+      let knownError;
+      switch (error.message) {
+        case "Cannot read property 'render' of undefined":
+          knownError = "The example for this url does not exist."
+          break;
+      }
+      return (
+        <div
+          style={{
+            padding: '1em',
+          }}
+        >
+          <code>
+            <h1
+              style={{
+                color: 'red',
+              }}
+            >
+              Failed to render example at:
+            </h1>
+            <a href={location.href}>
+              { location.href }
+            </a>
+
+            <h2
+              style={{
+              }}
+            >
+              {knownError}
+            </h2>
+
+            <hr/>
+            {
+              error.stack.split('\n').map((line) => {
+                return (
+                  <div
+                    style={{
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {line}
+                  </div>
+                );
+              })
+            }
+          </code>
+        </div>
+      );
+    }
+	}
+}
+
+export class Component extends React.Component {
+	buildComponentPath () {
+		return '/' + [
+			'render-example',
+			this.props.params.element,
+			this.props.params.example,
+		].join('/');
+	}
+
   render () {
-    return (
-      <div dangerouslySetInnerHTML={this.renderExample()} />
-    );
+		return (
+			<ExampleViewport
+				params={this.props.params}
+				componentPath={this.buildComponentPath()}
+			>
+			</ExampleViewport>
+		);
   }
 }
-
-export default Component;
diff --git a/examples/examples.js b/examples/examples.js
index b017f103..5643ff81 100644
--- a/examples/examples.js
+++ b/examples/examples.js
@@ -1,5 +1,8 @@
 /* eslint-disable no-unused-vars */
-let context = require.context('../elements', true, /^\.\/[^\/]+\/.+\.js$/);
+// This regex matches .js files
+// it excludes *.test.js files, if we parse test files webpack tries to load
+// enzyme, which breaks the environment.
+let context = require.context('../elements', true, /^\.\/[^\/]+\/[^.]+\.js$/);
 context.keys().forEach((key) => {
   let [_x, dir, file] = key.match(/\.\/(.+)\/(.+).js/) || [];// eslint-disable-line
   if (dir === file) {
diff --git a/examples/index.html b/examples/index.html
index 77164877..a5c07bca 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1,6 +1,9 @@
 <!doctype html>
   <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
+    <script>
+      window.ga = function () {};
+    </script>
     <title>Bulbs Elements Examples</title>
   </head>
 
diff --git a/examples/index.js b/examples/index.js
index d6741db0..7a3ead05 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -1,8 +1,7 @@
-import { React } from 'react';
+import React from 'react';
 import { Link } from 'react-router';
 import examples from './element-examples';
 import inflection from 'inflection';
-window.ga = function(){};
 
 export default class Index extends React.Component {
   render () {
@@ -17,29 +16,25 @@ export default class Index extends React.Component {
           <ul>
             {
               examples.map((group, index) => {
-                return (
-                  <li key={index} className="examples-example-group">
-                    <code>
-                      {`<${group.element}>`}
-                    </code>
-                    <ul>
-                      {
-                        Object.keys(group.examples).map((name) => {
-                          return (
-                            <li key={name} className="examples-example">
-                              <Link
-                                to={`/example/${group.element}/${inflection.dasherize(name)}`}
-                                activeClassName="active"
-                              >
-                                {group.examples[name].title}
-                              </Link>
-                            </li>
-                          );
-                        })
-                      }
-                    </ul>
-                  </li>
-                );
+                return <li key={index} className="examples-example-group">
+                  <code>
+                    {`<${group.element}>`}
+                  </code>
+                  <ul>
+                    {
+                      Object.keys(group.examples).map((name) => {
+                        return <li key={name} className="examples-example">
+                          <Link
+                            to={`/example/${group.element}/${inflection.dasherize(name)}/${this.props.params.device || 'tablet,mobile'}`} // eslint-disable-line max-len
+                            activeClassName="active"
+                          >
+                            {group.examples[name].title}
+                          </Link>
+                        </li>
+                      })
+                    }
+                  </ul>
+                </li>
               })
             }
           </ul>
@@ -51,3 +46,4 @@ export default class Index extends React.Component {
     );
   }
 }
+
diff --git a/examples/routes.js b/examples/routes.js
index 089654c5..66710620 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -1,15 +1,26 @@
 import React from 'react';
-import { Router, Route } from 'react-router';
-import createBrowserHistory from 'history/lib/createBrowserHistory';
-let browserHistory = createBrowserHistory();
+import {
+  Router,
+  Route,
+  browserHistory,
+} from 'react-router';
 
 import Index from './index';
-import Component from './component';
+import {
+	Component,
+	RenderComponent,
+} from './component';
+
+function Empty () {
+  return <h1> Choose an Example </h1>;
+}
 
 const Routes = (
   <Router history={browserHistory}>
+		<Route path="/render-example/:element/:example" component={RenderComponent} />
     <Route path="/" component={Index}>
-      <Route path="example/:element/:example" component={Component} />
+      <Route path="example/:element/:example/:device" component={Component} />
+      <Route path="*" component={Empty}/>
     </Route>
   </Router>
 );
diff --git a/examples/style.scss b/examples/style.scss
index 90e9323a..4b096684 100644
--- a/examples/style.scss
+++ b/examples/style.scss
@@ -16,11 +16,19 @@ body, html, #mount {
   display: flex;
 }
 
+[data-reactroot] {
+  width: 100%;
+}
+
 .examples-index {
   display: flex;
   flex-grow: 1;
 }
 
+iframe {
+  width: 100%;
+}
+
 .examples-index-list {
   min-width: 200px;
   font-family: 'Slabo 27px', serif;
@@ -35,6 +43,7 @@ body, html, #mount {
 .examples-index-pane {
   overflow: auto;
   flex-grow: 1;
+  display: flex;
 }
 
 .examples-example-group {