Basic ugly interface

package-lock.json

@@ -2001,6 +2001,11 @@
         "negotiator": "0.6.2"
       }
     },
+    "ace-builds": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.8.tgz",
+      "integrity": "sha512-8ZVAxwyCGAxQX8mOp9imSXH0hoSPkGfy8igJy+WO/7axL30saRhKgg1XPACSmxxPA7nfHVwM+ShWXT+vKsNuFg=="
+    },
     "acorn": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
@@ -4225,6 +4230,11 @@
         }
       }
     },
+    "diff-match-patch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
+      "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
+    },
     "diff-sequences": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
@@ -8120,6 +8130,16 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -10571,6 +10591,18 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-ace": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-8.0.0.tgz",
+      "integrity": "sha512-EvU14vXbZpAenb1ZVKdn8yTQs/shZ9RghFulHtt67bBXT6sjrNHcfOEXHYtSEmwMb6pQVVNNuulzzd8o+Uouig==",
+      "requires": {
+        "ace-builds": "^1.4.6",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-app-polyfill": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz",

package.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "ace-builds": "^1.4.8",
     "react": "^16.13.0",
+    "react-ace": "^8.0.0",
     "react-dom": "^16.13.0",
     "react-scripts": "3.4.0"
   },

src/App.css

 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
   background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
   color: white;
 }
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

 import React from 'react';
-import logo from './logo.svg';
+
+import ButtonStrip from './view/ButonStrip'
+import CodeEditor from './view/CodeEditor'
+import UserIO from './view/UserIO'
+
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <ButtonStrip />
+
+        <div className="App-code-editors">
+          <CodeEditor
+            heading='WACC Code'
+            name='wacc_edit' />
+          <CodeEditor
+            heading='JavaScript'
+            name='js_edit' />
+          <CodeEditor
+            heading='ARM Assembly'
+            name='arm_edit'/>
+        </div>
+
+        <UserIO />
+      </div>
+    )
+  }
 }
 
 export default App;

src/view/ButonStrip.js

+import React from 'react';
+
+class ButtonStrip extends React.Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        return (
+            <div>
+                <button>COMPILE</button>
+                <button>COMPILE</button>
+                <button>STEP JS LINE</button>
+                <button>STEP INTO AST NODE</button>
+                <button>STEP OVER AST NODE</button>
+            </div>
+        )
+    }
+}
+
+export default ButtonStrip
\ No newline at end of file

src/view/CodeEditor.js

+import React from "react";
+import AceEditor from "react-ace";
+
+import "ace-builds/src-noconflict/mode-java";
+import "ace-builds/src-noconflict/theme-github";
+
+class CodeEditor extends React.Component {
+    heading() {
+        if (this.props.heading !== undefined) {
+            return <h1>{this.props.heading}</h1>
+        }
+    }
+
+    onChange(newValue) {
+        console.log("change", newValue);
+    }
+
+    // Render editor
+    render() {
+        return (
+            <div>
+                {this.heading()}
+
+                <AceEditor
+                    mode="java"
+                    theme="github"
+                    onChange={this.onChange}
+                    name={this.props.name}
+                    className="aceeditor"
+                    editorProps={{ $blockScrolling: true }}
+                />
+            </div>
+        )
+    };
+}
+
+export default CodeEditor
\ No newline at end of file

src/view/UserIO.js

+import React from 'react'
+
+class UserIO extends React.Component {
+    render() {
+        return <code>User IO. Will do something</code>
+    }
+}
+
+export default UserIO;
\ No newline at end of file