[docs] play app

arwes · Nov 12, 2017 · 204462b · 204462b
1 parent c9850d9
commit 204462b
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 0 deletions.
diff --git a/play/components.js b/play/components.js
@@ -0,0 +1,9 @@
+import Arwes from '../src/Arwes/Play.md';
+import Button from '../src/Button/Play.md';
+
+const components = [
+  { name: 'Arwes', code: Arwes },
+  { name: 'Button', code: Button },
+];
+
+export default components;
diff --git a/play/favicon.ico b/play/favicon.ico
diff --git a/play/img/background.jpg b/play/img/background.jpg
diff --git a/play/img/glow.png b/play/img/glow.png
diff --git a/play/index.html b/play/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Arwes</title>
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/styles.css">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Titillium+Web:400,600">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Electrolize">
+    <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
+    <meta name="theme-color" content="#000000">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script async src="play.js"></script>
+  </body>
+</html>
diff --git a/play/index.js b/play/index.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import Navigo from 'navigo';
+
+import * as arwes from '../src';
+import { ThemeProvider } from '../src';
+import components from './components';
+
+class App extends Component {
+
+  constructor () {
+    super(...arguments);
+
+    this.state = {
+      selectedComponentName: '',
+    };
+  }
+
+  componentDidMount () {
+    this.router = new Navigo(null, true);
+
+    this.router.on('/', () => {
+      this.setState({ selectedComponentName: '' });
+    });
+
+    components.forEach(component => {
+      this.router.on(component.name, () => {
+        this.setState({ selectedComponentName: component.name });
+      }).resolve();
+    });
+  }
+
+  render () {
+
+    const { selectedComponentName } = this.state;
+    const selectedComponent = components.find(el => el.name === selectedComponentName);
+
+    return (
+      <div className='play'>
+        <div className='play-header'>
+          <div className='play-header-title'>Arwes</div>
+          <select
+            className='play-header-select'
+            value={selectedComponentName}
+            onChange={ev => this.onChange(ev.target.value)}
+          >
+            <option value=''>-- select --</option>
+            {components.map((el, index) => {
+              if (!el) return null;
+              return <option key={index} value={el.name}>{el.name}</option>;
+            })}
+          </select>
+        </div>
+        <div className='play-content'>
+          {!selectedComponent && (
+            <p className='play-content-msg'>Select a component to play with.</p>
+          )}
+          {!!selectedComponent && (
+          <LiveProvider
+            noInline
+            code={selectedComponent.code}
+            scope={arwes}
+            className='play-content-live'
+          >
+            <LiveEditor className='play-content-editor' />
+            <LiveError className='play-content-error' />
+            <LivePreview className='play-content-preview' />
+          </LiveProvider>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  onChange = (selectedComponentName) => {
+    this.router.navigate(selectedComponentName);
+  }
+}
+
+ReactDOM.render(
+  <ThemeProvider theme={arwes.theme}>
+    <App />
+  </ThemeProvider>,
+  document.querySelector('#app')
+);
diff --git a/play/styles.css b/play/styles.css
@@ -0,0 +1,94 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+.play {
+  position: fixed;
+  left: 0; right: 0;
+  top: 0; bottom: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #000000;
+  color: #00ffff;
+}
+
+.play-header {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  height: 50px;
+  border-bottom: 1px solid #00ffff;
+  background-color: #222222;
+}
+
+.play-header-title {
+  float: left;
+  display: inline-block;
+  margin: 0 16px;
+  line-height: 50px;
+  font-size: 32px;
+  font-weight: bold;
+  font-family: Monaco, Terminal, monospace;
+}
+
+.play-header-select {
+  float: left;
+  display: inline-block;
+  margin: 10px 0;
+  height: 30px;
+  border: none;
+  border-bottom: 1px solid #00ffff;
+  outline: none;
+  box-shadow: none;
+  pointer: cursor;
+
+  background-color: transparent;
+  font-family: Monaco, Terminal, monospace;
+  line-height: 30px;
+  font-size: 16px;
+  color: #00ffff;
+}
+
+.play-content {
+  display: flex;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.play-content-msg {
+  margin: 16px;
+  font-size: 16px;
+  line-height: 1.5;
+  font-family: Monaco, Terminal, monospace;
+}
+
+.play-content-live {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.play-content-editor {
+  overflow-x: auto;
+  font-size: 14px;
+}
+
+.play-content-preview {
+  flex: 1;
+  position: relative;
+  padding: 20px;
+  min-height: 300px;
+}
+
+.arwes {
+  position: absolute !important;
+}