feat(web): styles; wip(gql)

nevalang · Oct 15, 2023 · a5893bb · a5893bb
1 parent c1792d1
commit a5893bb
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 122 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -27,6 +27,7 @@
     "debugConsole.infoForeground": "#cccccc",
     "minimap.background": "#00000000",
     "scrollbar.shadow": "#00000000"
-  }
+  },
+  "svg.preview.background": "dark-transparent"
   // "go.lintFlags": ["--config=${workspaceFolder}/.golangci.yml", "--fast"]
 }
diff --git a/Makefile b/Makefile
@@ -14,3 +14,12 @@ irproto:
 web:
 	@cd web && npm start
 
+# generate golang graphql SDK
+.PHONY: gqlgo
+gql:
+	@go run -mod=mod github.com/99designs/gqlgen --config ./api/graphql/gqlgen.yml
+
+# generate typescript graphql SDK
+.PHONY: gqlts
+gqlts:
+	@cd web && npm i && npm run gqlgen
diff --git a/api/graphql/gqlgen.yml b/api/graphql/gqlgen.yml
@@ -0,0 +1,68 @@
+schema:
+  - api/graphql/schema/*.graphql
+
+exec:
+  filename: pkg/gql/generated.go
+  package: gql
+
+model:
+  filename: pkg/gql/models_gen.go
+  package: gql
+
+resolver:
+  layout: follow-schema
+  dir: internal/server
+  package: server
+
+omit_slice_element_pointers: true
+
+# gqlgen will search for any type names in the schema in these go packages
+# if they match it will use them, otherwise it will generate them.
+autobind:
+ - "github.com/nevalang/neva/internal/compiler/src"
+
+# This section declares type mapping between the GraphQL and go type systems
+#
+# The first line in each type will be used as defaults for resolver arguments and
+# modelgen, the others will be allowed when binding to fields. Configure them to
+# your liking
+# models:
+#   ID:
+#     model:
+#       - github.com/99designs/gqlgen/graphql.IntID
+#   Timestamp:
+#     model:
+#       - github.com/eqtlab/eqtbot/pkg/api.Timestamp
+#   Decimal:
+#     model:
+#       - github.com/eqtlab/eqtbot/pkg/api.Decimal
+#   Account:
+#     model:
+#       - github.com/eqtlab/eqtbot/internal/tracker/models.Account
+#     fields:
+#       assets:
+#         resolver: true
+#   AccountAsset:
+#     model:
+#       - github.com/eqtlab/eqtbot/internal/tracker/models.AccountAsset
+#     fields:
+#         asset:
+#           resolver: true
+#         balanceBase:
+#           resolver: true
+#   Asset:
+#     model:
+#       - github.com/eqtlab/eqtbot/internal/tracker/models.Asset
+#   Transaction:
+#     model:
+#       - github.com/eqtlab/eqtbot/internal/tracker/models.Transaction
+#     fields:
+#       asset:
+#         resolver: true
+#       account:
+#         resolver: true
+#       category:
+#         resolver: true
+#   Category:
+#     model:
+#       - github.com/eqtlab/eqtbot/internal/tracker/models.Category
diff --git a/api/graphql/schema.gql b/api/graphql/schema.gql
diff --git a/api/graphql/schema/schema.gql b/api/graphql/schema/schema.gql
@@ -0,0 +1,27 @@
+schema {
+  mutation: Mutation
+  query: Query
+}
+
+type Query {
+  component(location: Location!, entityName: String!): Component!
+}
+
+type Location {
+  pkgName: String!
+  fileName: String!
+}
+
+type Component {
+  interface: Interface!
+  nodes: [Node!]!
+  net: ComponentNetwork!
+}
+
+type Interface {
+  typeParams: [TypeParam]
+}
+
+type Mutation {
+  updateComponent(location: Location!, component: Component!): Component!
+}
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/web/index.html b/web/index.html
@@ -1,7 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Nevalang UI</title>

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -13,64 +13,51 @@ import ReactFlow, {
   Edge,
   Node,
   MarkerType,
+  NodeProps,
 } from "reactflow";
 import dagre from "dagre";
 import "reactflow/dist/style.css";
 
-function generateValue(n: number, i: number): number {
-  if (n == 1) {
-    return 50;
-  }
-  return (i / (n - 1)) * 100;
+interface IPorts {
+  in: string[];
+  out: string[];
 }
 
-interface INormalNodeProps {
-  id: string;
-  data: {
-    ports: {
-      in: string[];
-      out: string[];
-    };
-  };
-}
-
-function NormalNode(props: INormalNodeProps) {
+function NormalNode(props: NodeProps<{ ports: IPorts }>) {
   return (
     <div className="react-flow__node-default">
-      <div className="ports">
-        {props.data.ports.in.map((inportName, idx, arr) => (
-          <Handle
-            content="asd"
-            type="target"
-            // style={{
-            //   left: generateValue(arr.length, idx) + "%",
-            // }}
-            id={inportName}
-            key={inportName}
-            position={Position.Top}
-            isConnectable={true}
-          >
-            {inportName}
-          </Handle>
-        ))}
-      </div>
+      {props.data.ports.in.length > 0 && (
+        <div className="inports">
+          {props.data.ports.in.map((inportName, idx, arr) => (
+            <Handle
+              content="asd"
+              type="target"
+              id={inportName}
+              key={inportName}
+              position={Position.Top}
+              isConnectable={true}
+            >
+              {inportName}
+            </Handle>
+          ))}
+        </div>
+      )}
       <div className="nodeName">{props.id}</div>
-      <div className="ports">
-        {props.data.ports.out.map((outportName, idx, arr) => (
-          <Handle
-            type="source"
-            id={outportName}
-            key={outportName}
-            position={Position.Bottom}
-            isConnectable={true}
-            // style={{
-            //   left: generateValue(arr.length, idx) + "%",
-            // }}
-          >
-            {outportName}
-          </Handle>
-        ))}
-      </div>
+      {props.data.ports.out.length > 0 && (
+        <div className="outports">
+          {props.data.ports.out.map((outportName, idx, arr) => (
+            <Handle
+              type="source"
+              id={outportName}
+              key={outportName}
+              position={Position.Bottom}
+              isConnectable={true}
+            >
+              {outportName}
+            </Handle>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
@@ -304,7 +291,7 @@ export default function App() {
       >
         <Controls />
         <MiniMap />
-        <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
+        <Background variant={BackgroundVariant.Dots} gap={5} size={0.5} />
       </ReactFlow>
     </div>
   );