Add GUI dev environment (#114)

Setup dev tools to build GUI using ReasonML + Electron Use react-scripts instead of custom build config Add electron command Rename command
2017-10-17 21:39:30 +02:00
parent 89647ae457
commit 71046216ce
13 changed files with 7515 additions and 0 deletions
@@ -0,0 +1,17 @@
+# dependencies
+/node_modules
+
+# build
+/build
+
+# bucklescript
+/lib
+/types
+.merlin
+
+# misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
@@ -0,0 +1,3 @@
+# Cameradar GUI
+
+## WIP
@@ -0,0 +1,16 @@
+{
+  "name": "reason-scripts",
+  "sources": [
+    "src"
+  ],
+  "bs-dependencies": [
+    "reason-react",
+    "bs-jest"
+  ],
+  "reason": {
+    "react-jsx": 2
+  },
+  "bsc-flags": [
+    "-bs-super-errors"
+  ]
+}
@@ -0,0 +1,34 @@
+// This is the entry point of the electron app
+// It manages the overall state of the native app (menus, windows, ...)
+// TODO: launch cameradar process
+
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const url = require('url');
+
+let mainWindow;
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', () => {
+  // create the browser window.
+  mainWindow = new BrowserWindow({ width: 800, height: 600 });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(
+    url.format({
+      pathname: `${__dirname}/../build/index.html`,
+      protocol: 'file:',
+    }),
+  );
+
+  // Open the DevTools.
+  mainWindow.webContents.openDevTools({
+    mode: 'bottom',
+  });
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+});
@@ -0,0 +1,23 @@
+{
+  "name": "gui",
+  "version": "0.1.0",
+  "private": true,
+  "main": "electron_app/index.js",
+  "homepage": ".",
+  "dependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "reason-scripts": "0.6.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "electron": "electron ."
+  },
+  "devDependencies": {
+    "bs-jest": "^0.2.0",
+    "electron": "^1.7.9",
+    "electron-packager": "^9.1.0",
+    "reason-react": "^0.2.4"
+  }
+}
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <title>Cameradar</title>
+</head>
+
+<body>
+  <div id="index"></div>
+</body>
+
+</html>
@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+.mainWindow {
+  margin-top: 40px;
+}
+
+.title {
+  text-align: center;
+}
+
+.logo {
+  width: 50vw;
+  display: block;
+  margin: auto;
+}
@@ -0,0 +1,16 @@
+open Utils;
+
+requireCSS "./MainWindow.css";
+
+let logo = requireAssetURI "./images/logo.png";
+
+let component = ReasonReact.statelessComponent "MainPage";
+
+let make _children => {
+  ...component,
+  render: fun _self =>
+    <div className="mainWindow">
+      <h1 className="title"> (textEl "Coming soon !") </h1>
+      <img className="logo" src=logo />
+    </div>
+};
@@ -0,0 +1,7 @@
+/* require css file for side effect only */
+external requireCSS : string => unit = "require" [@@bs.val];
+
+/* require an asset (eg. an image) and return exported string value (image URI) */
+external requireAssetURI : string => string = "require" [@@bs.val];
+
+let textEl str => ReasonReact.stringToElement str;
@@ -0,0 +1 @@
+ReactDOMRe.renderToElementWithId <MainWindow /> "index";
				`@@ -0,0 +1 @@`
				`ReactDOMRe.renderToElementWithId <MainWindow /> "index";`