Add component editor component (wip).

Author: arielger

packages/website/src/components/Playground/index.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import hljs from 'highlight.js'
 import './index.styl';
@@ -16,13 +17,13 @@ class Playground extends Component {
   }
 
   render() {
-    const { component, code, title } = this.props;
+    const { component, url, code, title } = this.props;
     return (
       <div className="react-playground">
         { title && <h3 className="react-playground-title">{title}</h3> }
         <div className="react-playground-component">
           <div className="component-links">
-            <a href="#">Open in stage</a>
+            <Link to={`${url}/stage`}>Open in stage</Link>
           </div>
           {component}
         </div>

packages/website/src/containers/App/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HashRouter, Match, Miss } from 'react-router';
-import { ComponentPage, Splash, NotFound } from 'containers';
+import { ComponentPage, ComponentEditor, Splash, NotFound } from 'containers';
 import { Sidebar } from 'components';
 import * as StyleguideComponents from 'auth0-styleguide-react-components';
 import * as StyleguideComponentsExamples from 'auth0-styleguide-react-components/build/examples';
@@ -22,11 +22,16 @@ const App = () => (
             <div>
               <Match pattern="/" exactly component={Splash} />
               {componentsCollection.map((component, index) =>
-                <Match
-                  pattern={component.url}
-                  render={() => (<ComponentPage {...component} />)}
-                  key={index}
-                />
+                <div key={index}>
+                  <Match
+                    pattern={component.url}
+                    render={() => (<ComponentPage {...component} />)}
+                  />
+                  <Match
+                    pattern={`${component.url}/stage`}
+                    render={() => (<ComponentEditor {...component} />)}
+                  />
+                </div>
               )}
               <Miss component={NotFound} />
             </div>

packages/website/src/containers/ComponentEditor/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router';
+import './index.styl';
+
+const ComponentEditor = ({ url }) =>
+  <div className="component-editor">
+    <div className="component-editor-content">
+      <Link to={`${url}`}>
+        <i className="close-editor-btn icon-budicon-471" />
+      </Link>
+      <h2>Component editor</h2>
+    </div>
+  </div>;
+
+export default ComponentEditor;

packages/website/src/containers/ComponentEditor/index.styl

@@ -0,0 +1,24 @@
+.component-editor
+  background-color rgba(black, 0.25)
+  position fixed
+  top 0
+  right 0
+  bottom 0
+  left 0
+  z-index 100
+
+  .component-editor-content
+    position relative
+    border-radius 3px
+    background-color white
+    margin 0 auto
+    margin-top 40px
+    width calc(100% - 80px)
+    height calc(100% - 80px)
+
+  .close-editor-btn
+    position absolute
+    top 30px
+    right 30px
+    font-size 20px
+    color rgba(black, 0.8)

packages/website/src/containers/ComponentPage/index.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { Playground, PropertiesTable } from 'components';
 import './index.styl';
 
-const ComponentPage = ({ title, description, props, examples }) =>
+const ComponentPage = ({ title, description, props, url, examples }) =>
   <section className="react-component-page">
     <div className="component-information">
       <h1 className="component-title">{title}</h1>
@@ -14,6 +14,7 @@ const ComponentPage = ({ title, description, props, examples }) =>
         component={example.component}
         code={example.code}
         title={example.title}
+        url={url}
       />
     )}
     { props && <PropertiesTable props={props} />}

packages/website/src/containers/index.js

@@ -1,4 +1,5 @@
 export App from 'containers/App';
 export NotFound from 'containers/NotFound';
 export ComponentPage from 'containers/ComponentPage';
+export ComponentEditor from 'containers/ComponentEditor';
 export Splash from 'containers/Splash';