Merge pull request #5670 from roc-lang/checkmate-ui-scaffold

Checkmate UI scaffold

crates/compiler/checkmate/www/.vim/coc-settings.json

@@ -0,0 +1,4 @@
+{
+  "tsserver.useLocalTsdk": true,
+  "tsserver.tsdk": "${workspaceFolder}/node_modules/typescript/lib"
+}

crates/compiler/checkmate/www/package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dagrejs/dagre": "^1.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "reactflow": "^11.7.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,9 +39,11 @@
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "clsx": "^2.0.0",
     "json-schema-to-typescript": "^13.0.2",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.3.3",
+    "tiny-typed-emitter": "^2.1.0",
     "typescript": "^4.9.5"
   }
 }

crates/compiler/checkmate/www/src/App.tsx

@@ -1,13 +1,39 @@
 import React from "react";
+import FileInput, { LoadedEvents } from "./components/FileInput";
+import Ui from "./components/Ui";
+import data from "./checkmate.json";
+import { AllEvents } from "./schema";
 
 export default function App() {
+  const [events, setEvents] = React.useState<LoadedEvents | null>({
+    kind: "ok",
+    events: data as AllEvents,
+  });
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-      </header>
+    <div className="w-screen h-screen p-2 bg-gray-100 flex flex-col">
+      <div>
+        <FileInput setResult={setEvents} />
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <EventsWrapper events={events} />
+      </div>
     </div>
   );
 }
+
+interface EventsWrapperProps {
+  events: LoadedEvents | null;
+}
+
+function EventsWrapper({ events }: EventsWrapperProps): JSX.Element {
+  if (events === null) {
+    return <div></div>;
+  }
+  switch (events.kind) {
+    case "ok":
+      return <Ui events={events.events} />;
+    case "err":
+      return <div className="text-red-400 text-lg">{events.error}</div>;
+  }
+}