Merge pull request #38 from thefrontside/pc/react-app

react app that will run from the graphgen executable
thefrontside · Sep 23, 2022 · 7b52ce2 · 7b52ce2
2 parents 163c235 + 926f14c
commit 7b52ce2
Show file tree

Hide file tree

Showing 47 changed files with 5,211 additions and 14 deletions.
diff --git a/.github/workflows/cli-release.yml b/.github/workflows/cli-release.yml
@@ -47,7 +47,7 @@ jobs:
           # note you'll typically need to create a personal access token
           # with permissions to create releases in the other repo
           token: ${{ secrets.FRONTSIDEJACK_GITHUB_TOKEN }}
-          files: build/cli/*
+          files: cli/build/*
           fail_on_unmatched_files: true
         env:
           GITHUB_REPOSITORY: thefrontside/graphgen
diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
@@ -38,4 +38,4 @@ jobs:
         run: deno lint
 
       - name: test
-        run: deno test
+        run: deno task test
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-  "deno.enable": true
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.defaultFormatter": "denoland.vscode-deno"
 }
diff --git a/cli/.gitignore b/cli/.gitignore
@@ -0,0 +1,5 @@
+/bundled-assets.js
+node_modules
+build
+graphgen
+example/package-lock.json
diff --git a/cli/.vscode/settings.json b/cli/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "deno.enable": true
+}
diff --git a/cli/README.md b/cli/README.md
diff --git a/cli/app/favicon.ico b/cli/app/favicon.ico
diff --git a/cli/app/index.html b/cli/app/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head lang="en">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
+    <title>Graphgen Inspector</title>
+    <link rel="icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="main"></div>
+    <script type="module" src="src/index.tsx"></script>
+  </body>
+</html>
diff --git a/cli/app/src/assert/assert.ts b/cli/app/src/assert/assert.ts
@@ -0,0 +1,10 @@
+export function assert(
+  condition: boolean,
+  message?: string,
+): asserts condition {
+  if (!condition) {
+    const errorMessage = message ?? "Assertion failed";
+
+    throw new Error(errorMessage);
+  }
+}
diff --git a/cli/app/src/components/Factory/Factory.tsx b/cli/app/src/components/Factory/Factory.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { StrictMode, Suspense } from "react";
+import { StyledEngineProvider } from "@mui/material/styles";
+import { GraphInspector } from "../GraphInspector/GraphInspector.tsx";
+import { Loader } from "../Loader/Loader.tsx";
+
+export function Factory() {
+  return (
+    <Suspense>
+      <StrictMode>
+        <StyledEngineProvider injectFirst>
+          <section className="app">
+            <section>
+              <a target="_blank" href="/graphql">GraphiQL</a>
+            </section>
+            <GraphInspector />
+          </section>
+        </StyledEngineProvider>
+      </StrictMode>
+    </Suspense>
+  );
+}
diff --git a/cli/app/src/components/GraphInspector/GraphInspector.css b/cli/app/src/components/GraphInspector/GraphInspector.css
@@ -0,0 +1,167 @@
+main {
+  font-family: Menlo, monospace;
+}
+
+ul {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.main {
+  display: grid;
+  grid-row: main;
+  grid-template-columns: [margin] 2rem [left] 1fr [right] 2fr;
+  overflow: hidden;
+}
+
+.margin {
+  grid-column: margin;
+  background: linear-gradient(#f7f7f7, #e2e2e2);
+  border-right: 1px solid #d0d0d0;
+  display: flex;
+  justify-content: center;
+}
+
+.left {
+  grid-column: left;
+  border-right: 20px solid #F7F7F7;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: [top] 1fr [bottom] 1fr;
+}
+
+.top-bar {
+  background: linear-gradient(#f7f7f7, #e2e2e2);
+  border-bottom: 1px solid #d0d0d0;
+  display: flex;
+  align-items: center;
+  padding-left: 2rem;
+}
+
+.right {
+  grid-column: right;
+  overflow: scroll;
+  height: 100%;
+}
+
+.right > div {
+}
+
+.top {
+  grid-row: top;
+  border-bottom: 10px solid #F7F7F7;
+}
+
+.bottom {
+  grid-row: bottom;
+}
+
+.top,
+.bottom,
+.right {
+  padding: .5rem;
+}
+
+svg {
+  font-size: 1rem;  
+}
+
+html,
+body,
+div,
+a,
+i,
+button,
+select,
+option,
+optgroup,
+hr,
+br {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+
+.treeview > .toggle {
+  pointer-events: all;
+  cursor: pointer;
+}
+.treeview > .toggle:hover {
+  color: #77eb67;
+  fill: #77eb67;
+}
+
+.field {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.root {
+  font-weight: 400;
+  color: #36454F;
+  font-family: "Lucida Console", Monaco, monospace;
+}
+
+.fieldname, .colon {
+  color: rgb(136, 19, 145);
+  padding: 0.0625rem;
+
+}
+
+.value {
+  color: rgb(196, 26, 22);
+  padding: 0.0625rem;
+}
+
+.angle {
+  margin-left: -1rem;
+}
+
+.type {
+  color: #222;
+  position: relative;
+  top: 6px;
+  font-size: 1rem;
+  font-size: 10px;
+  text-transform: lowercase;
+}
+
+.colon {
+  margin-right: 2px;
+}
+
+.type-label {
+  display: flex;
+  color: #000;
+  font-family: "Lucida Console", Monaco, monospace
+}
+
+.type-label :first-child {
+  margin-right: .25rem;
+}
+
+.meta {
+  display: inline-block;
+  padding: 0 .5rem;
+  width: 80%;
+}
+
+.right ul {
+  height: 100%;
+}
+
+#cy {
+  position: relative;
+  width: auto;
+  height: 90%;
+  z-index: 999;
+  margin-left: 290px;
+  right: 0px;
+}