update repl

docs/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

docs/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports={
+  extends: ['rosey'],
+  rules: {
+    '@typescript-eslint/camelcase': 0,
+    '@typescript-eslint/prefer-interface': 0,
+    'sort-imports': 1,
+  },
+};

docs/package.json

@@ -6,32 +6,47 @@
   "main": "src/index.js",
   "homepage": "https://joshrosenstein.github.io/futils",
   "dependencies": {
+    "@emotion/core": "10.0.10",
+    "@emotion/styled": "10.0.10",
     "@roseys/futils": "file:../pkg",
     "babel-standalone": "6.26.0",
     "base-64": "0.1.0",
     "codemirror": "5.39.2",
-    "emotion": "9.2.12",
-    "history": "4.7.2",
+    "history": "4.9.0",
     "json-stringify-pretty-compact": "^1.2.0",
     "lodash.debounce": "4.0.8",
     "prop-types": "15.6.2",
     "ramda": "0.25.0",
-    "react": "16.7",
-    "react-codemirror": "1.0.0",
-    "react-dom": "16.7",
-    "react-emotion": "9.2.6",
+    "react": "16.8.6",
+    "react-codemirror2": "6.0.0",
+    "react-dom": "16.8.6",
     "react-powerplug": "1.0.0-rc.1",
     "react-redux": "5.0.7",
-    "react-scripts": "1.1.4",
     "redux": "4.0.0",
     "redux-logger": "3.0.6",
     "scriptjs": "2.5.8"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "eslint": "5.16.0",
+    "eslint-config-rosey": "^1.0.1",
+    "react-scripts": "^3.0.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

docs/prettier.config.js

@@ -0,0 +1,2 @@
+//https://prettier.io/docs/en/options.html
+module.exports=require('eslint-config-rosey/.prettierrc.js')

docs/public/index.html

@@ -11,7 +11,10 @@
     -->
 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<link href="https://fonts.googleapis.com/css?family=Inconsolata|Work+Sans" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Inconsolata|Work+Sans" rel="stylesheet">
+  <link rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
+  />
 	<!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

docs/src/components/App.css

@@ -0,0 +1,87 @@
+html {
+  background-color: #fafafa;
+  color: #6a6a6a;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    Arial, sans-serif;
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  margin: 0;
+}
+
+
+
+header {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  height: 30px;
+  padding: 11px 27px;
+  background-color: #1a2b34;
+  color: #e0e0e0;
+  position: relative;
+  z-index: 20;
+}
+
+@media (max-width: 400px) {
+  header {
+    padding: 10px;
+  }
+}
+
+header a,
+header a:visited,
+header a:focus,
+header a:active,
+header a:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+.logo-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  height: 34px;
+  margin-right: 10px;
+}
+
+header h1 {
+  font-size: 20px;
+  display: block;
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 18px;
+  position: relative;
+  z-index: 9999;
+  margin: 0;
+}
+
+
+.playground {
+  margin-bottom: 0px;
+  font-size: 14px;
+
+  border-radius: 5px;
+  padding: 20px;
+  padding-bottom: 0;
+}
+.playground .title {
+  font-size: 18px !important;
+  margin-bottom: 12px !important;
+}
+.playground .playground-content .column {
+  display: flex;
+}
+.playground .playground-editor {
+  margin-bottom: 10px;
+}

docs/src/components/App.js

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import Editor from './Editor';
+import Browser from './Browser';
+import Console from './Console';
+import Navbar from './Navbar';
+import './App.css';
+import * as R from 'ramda'
+import * as F from '@roseys/futils'
+
+// Expose libraries for the REPL onto window
+F.keys(F).forEach(method => {
+  global[method] = F[method]
+})
+
+
+global.F = F
+global.R = R
+
+
+/**
+ * Separating to its own component cuz divitis
+ */
+const PlaygroundHeader = ({ title, runCode }) => (
+  <div className='playground-header'>
+    <div className='columns'>
+      <div className='column is-one-quarter'>
+        <h2 className='title is-6'>{title}</h2>
+      </div>
+      <div className='column has-text-right is-one-quarter'>
+        <button onClick={runCode}>Run</button>
+      </div>
+    </div>
+  </div>
+);
+
+/**
+ * The main playground component
+ * Get a gist and only pull the first file of each .html, .css, .js
+ */
+export default class Playground extends Component {
+  state = {
+    history: [],
+    title: '',
+    js: '',
+    isProcessing: false, // tiny way to stop a user from hitting run 10000 times in a row
+  };
+
+  // helpers cuz lazy
+  setTitle = (title) => this.setState({ title });
+  setHistory = (history) => this.setState({ history });
+  setJs = (js) => this.setState({ js });
+
+  /**
+   * Grab the gist on first mount
+   * mocking a gist id for now
+   * https://gist.github.com/sevilayha/efe7fe257c9bfdc4d81aa654ddbb5bec
+   */
+  componentDidMount() {
+    const gistId = this.props.gistId || '64956aea8f0f09bb97e7ee7dd2fe5c85';
+    this.getGist(gistId);
+  }
+
+  /**
+   * Get the gist from GitHub API
+   * Parse for the .html, .css, .js files
+   * This is simple. Will only pull the first file in the gist of each extension
+   */
+  getGist = (id) => {
+    fetch(`https://api.github.com/gists/${id}`)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        // find the first .html, .css, .js files and apply them as the content
+        const fileNames = Object.keys(data.files);
+        const gistJs = fileNames.find((file) => file.includes('.js'));
+
+        this.setTitle(data.files[gistJs].filename);
+        if (gistJs) this.setJs(data.files[gistJs].content);
+      });
+  };
+
+  addHistory = (text) => {
+    const newHistory = [...this.state.history, { text }];
+    this.setHistory(newHistory);
+  };
+
+  clearHistory = () => this.setHistory([]);
+
+  runCode = () => {
+    if (this.state.isProcessing) return false;
+    this.setState({ isProcessing: true });
+
+    const { js } = this.state;
+
+    this.setJs('');
+
+    setTimeout(() => {
+      this.setJs(js);
+      this.setState({ isProcessing: false });
+    }, 250);
+  };
+
+  render() {
+    const { history, title, js } = this.state;
+    const { playgroundId } = this.props;
+
+    return (
+      <div>
+        <Navbar title='FUTILS' />
+        <div className='playground'>
+          <PlaygroundHeader title={title} runCode={this.runCode} />
+          <div className='columns'>
+
+          <Editor language='javascript' code={js} updateCode={this.setJs} />
+          <Console history={history} clearHistory={this.clearHistory} />
+          </div>
+
+          <Browser
+            playgroundId={playgroundId}
+            js={js}
+            addHistory={this.addHistory}
+          />
+
+
+        </div>{' '}
+      </div>
+    );
+  }
+}