Dashboard

Readme.md

@@ -19,9 +19,29 @@ nars is currently being developed in a private repo, but it's public on npm so t
 
 ### App packages
 
-In the rest of this guide, I assume that you have three packages: `client`, `server`, and `common`. 
+In the rest of this guide, I assume that you have three packages: `client`, `server`, and `common`.
 You can rename these however you want but make sure to swap the name in all relevant places.
 
+### Dashboard
+
+You can use the project dashboard to run all necessary scripts at once.
+
+Choose the dashboard type from one of `{type}` :
+
+- `example` - run all scripts from the example directory
+- `core` - run all build scripts from code packages
+- `full` - run example and core at once
+
+To run dashboard use:
+
+```sh
+yarn dashboard {type}
+```
+
+| full  | core  | examples  |
+|---|---|---|
+| ![image](https://user-images.githubusercontent.com/10349378/64976097-cc016d00-d8b0-11e9-97c2-6bc824131c96.png) | ![image](https://user-images.githubusercontent.com/10349378/64976116-d9b6f280-d8b0-11e9-8b47-43eb1a9c1f1b.png) | ![image](https://user-images.githubusercontent.com/10349378/64976136-e3405a80-d8b0-11e9-8d35-bbc9d19ff5b5.png) | 
+
 ### Folder structure
 
 We want to share the common package so we will create a yarn monorepo.
@@ -53,6 +73,7 @@ package.json in root:
 ### Defining a config
 
 In the common package run:
+
 - `yarn add nars-common@latest`
 
 Next, create index.js with a config.
@@ -79,6 +100,7 @@ export const config = {
 ### Configuring the server
 
 In the server package run:
+
 - `yarn add nars <common_package_name>` where `common_package_name` is the name of the package in the `common` directory.
 
 Create `index.js` file:
@@ -121,11 +143,13 @@ Static.attatchListener(webSocketServer, router);
 **Typescript**
 
 Add `parcel` if not present:
+
 ```
 yarn add parcel
 ```
 
 Run:
+
 ```
 parcel build --target node index.tsx && node dist/index.js
 ```
@@ -139,6 +163,7 @@ node index.js
 ### Attaching a client
 
 Set up your React Native app in the client folder. Next run:
+
 - `yarn add nars-client <common_package_name>` where `common_package_name` is the name of the package in the `common` directory.
 - Go to a file where you'd like to use nars' `RemoteComponent`.
 
@@ -214,19 +239,21 @@ There's a limited set of props which are supported. You can check them out in
 
 ### Adding a prop to an existing component
 
-Go to schema protobuf file: 
+Go to schema protobuf file:
 `packages/nars-common/src/proto/schema.proto`
 
 1. Find the message that describes the component (i.e. View is described by message View)
 2. Add a field to the component's message (see [Protobuf Language Guide](https://developers.google.com/protocol-buffers/docs/proto#simple)
-for a reference.
-3. If the field is optional, wrap it in a value type. See `Int32Value` message for reference. 
-It's a wrapper around int32 type. Protobuf doesn't have the notion of optional values but
-the default value for message is 0 so it's possible to detect if it's set or not.
+   for a reference.
+3. If the field is optional, wrap it in a value type. See `Int32Value` message for reference.
+   It's a wrapper around int32 type. Protobuf doesn't have the notion of optional values but
+   the default value for message is 0 so it's possible to detect if it's set or not.
 4. If the prop is a function we use Callback message for describing it.
 
 Go to `packages/nars/src/<component-name>.ts`
+
 - Add the prop to the component and parsing code
 
 Go to `packages/nars-client/src/DecodeElement.tsx`
+
 - Implement decoding for the prop.

package.json

@@ -1,13 +1,15 @@
 {
   "private": true,
   "scripts": {
+    "dashboard": "node packages/dashboard/run",
     "build-nars-common": "cd packages/nars-common && yarn && ./generate_proto.sh && yarn build",
     "build-nars": "cd packages/nars && yarn && yarn build",
     "build-nars-client": "cd packages/nars-client && yarn build",
     "build": "yarn build-nars-common && yarn build-nars && yarn build-nars-client"
   },
   "workspaces": [
     "packages/nars",
+    "packages/dashboard",
     "packages/nars-common",
     "packages/nars-client",
     "packages/reason-react-reconciler",

packages/dashboard/Core.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+
+import Process from "./Process";
+
+const Core = () => {
+  return (
+    <blessed-element>
+      <Process label="Nars - TS" arg="build-nars-ts" height="50%" width="50%" />
+
+      <Process
+        label="Nars - RE"
+        arg="build-nars-re"
+        top="50%"
+        height="50%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Client"
+        arg="build-nars-client"
+        right="0"
+        height="50%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Common"
+        arg="build-nars-common"
+        top="50%"
+        right="0"
+        height="50%"
+        width="50%"
+      />
+    </blessed-element>
+  );
+};
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars core dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function() {
+  return process.exit(0);
+});
+
+render(<Core />, screen);

packages/dashboard/Example.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+
+import Process from "./Process";
+
+const Example = () => {
+  return (
+    <blessed-element>
+      <Process label="Client" arg="build-client" height="50%" width="100%" />
+
+      <Process
+        label="Server"
+        arg="build-server"
+        top="50%"
+        height="50%"
+        width="70%"
+      />
+
+      <Process
+        label="Common"
+        arg="build-common"
+        top="50%"
+        height="50%"
+        width="30%"
+        right="0"
+      />
+    </blessed-element>
+  );
+};
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars example dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function() {
+  return process.exit(0);
+});
+
+render(<Example />, screen);

packages/dashboard/Full.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+
+import Process from "./Process";
+
+const Full = () => {
+  return (
+    <blessed-element>
+      <Process label="Client" arg="build-client" height="33%" width="50%" />
+
+      <Process
+        label="Server"
+        arg="build-server"
+        top="33%"
+        height="33%"
+        width="50%"
+      />
+
+      <Process
+        label="Common"
+        arg="build-common"
+        top="66%"
+        height="33%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars - TS"
+        arg="build-nars-ts"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars - RE"
+        arg="build-nars-re"
+        top="25%"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Client"
+        arg="build-nars-client"
+        top="50%"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Common"
+        arg="build-nars-common"
+        top="75%"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+    </blessed-element>
+  );
+};
+
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function() {
+  return process.exit(0);
+});
+
+render(<Full />, screen);

packages/dashboard/Process.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { spawn } from "child_process";
+
+import stylesheet from "./stylesheet";
+
+type Props = {
+  label: string;
+  arg: string;
+  width: string;
+  height: string;
+  top?: string;
+  right?: string;
+  left?: string;
+};
+
+const Process = ({ width, height, top, right, left, label, arg }: Props) => {
+  const [logs, setLogs] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    const subprocess = spawn("yarn", [arg], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      setLogs(state => [data.toString("utf-8"), ...state]);
+    });
+
+    return () => subprocess.kill();
+  }, []);
+
+  return (
+    <blessed-box
+      label={label}
+      class={stylesheet.bordered}
+      top={top}
+      right={right}
+      left={left}
+      width={width}
+      height={height}
+      draggable={true}
+    >
+      <blessed-list items={logs} />
+    </blessed-box>
+  );
+};
+
+export default Process;

packages/dashboard/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "dashboard",
+  "version": "0.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build-client": "cd ../../examples/client && yarn start",
+    "build-server": "cd ../../examples/server && yarn start",
+    "build-common": "cd ../../examples/common && yarn build",
+    "build-nars-re": "cd ../nars && yarn re:watch",
+    "build-nars-ts": "cd ../nars && yarn watch",
+    "build-nars-client": "cd ../nars-client && yarn watch",
+    "build-nars-common": "cd ../nars-common && yarn watch"
+  },
+  "dependencies": {
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.6.0",
+    "blessed": "^0.1.81",
+    "react": "^16.9.0",
+    "react-blessed": "^0.6.1",
+    "react-devtools-core": "^3.6.3",
+    "ws": "^7.1.2"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.6.0",
+    "@types/blessed": "^0.1.12",
+    "@types/react-blessed": "^0.3.1"
+  }
+}

packages/dashboard/run.js

@@ -0,0 +1,25 @@
+require("@babel/register")({
+  presets: [
+    ["@babel/preset-env"],
+    ["@babel/preset-react"],
+    "@babel/typescript",
+  ],
+  extensions: [".js", ".ts", ".tsx"],
+});
+
+const argv = process.argv.slice(2);
+
+const version = argv[0];
+const versions = ["full", "example", "core"];
+
+if (versions.indexOf(version) === -1) {
+  console.warn(
+    "Invalid dashboard type %s selected. Must be one of:\n *",
+    version,
+    versions.join("\n  * ")
+  );
+
+  process.exit(0);
+}
+
+require("./" + version[0].toUpperCase() + version.slice(1) + ".tsx");