graphprotocol · cmwhited · May 7, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025
diff --git a/.gitignore b/.gitignore
@@ -51,9 +51,13 @@ typings/
 # dotenv environment variables file
 .env
 .env.test
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 
 # Next.js build output
-.next
+.next
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["biomejs.biome"]
+  "recommendations": ["biomejs.biome", "effectful-tech.effect-vscode"]
 }
diff --git a/apps/server/src/index.ts b/apps/server/src/index.ts
@@ -1,8 +1,8 @@
+import { parse } from 'node:url';
 import { Identity, Inboxes, Messages, SpaceEvents, Utils } from '@graphprotocol/hypergraph';
 import cors from 'cors';
 import { Effect, Exit, Schema } from 'effect';
 import express, { type Request, type Response } from 'express';
-import { parse } from 'node:url';
 import { SiweMessage } from 'siwe';
 import type { Hex } from 'viem';
 import WebSocket, { WebSocketServer } from 'ws';

diff --git a/apps/typesync/.envrc b/apps/typesync/.envrc
@@ -0,0 +1 @@
+use flake
diff --git a/apps/typesync/LICENSE b/apps/typesync/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present <PLACEHOLDER>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/apps/typesync/README.md b/apps/typesync/README.md
@@ -0,0 +1,35 @@
+# @graphprotocol/typesync
+
+CLI toolchain to view existing types, select, pick, extend to create schemas and generate a @graphprotocol/hypergraph schema.
+
+The `@graphprotocol/typesync` cli works by spinning up a [hono](https://hono.dev/) nodejs server that exposes a built vitejs react app. This app will let users see their created app schemas as well as search existing types to create new app schemas.
+Once the user has a schema built in the app, they can then run codegen, which will send a message to the server to codegen the built schema using the `@graphprotocol/hypergraph` framework.
+
+## Running Code
+
+This template leverages [tsx](https://tsx.is) to allow execution of TypeScript files via NodeJS as if they were written in plain JavaScript.
+
+To execute a file with `tsx`:
+
+```sh
+pnpm run dev
+```
+
+## Operations
+
+**Building**
+
+To build the package:
+
+```sh
+pnpm build
+```
+
+**Testing**
+
+To test the package:
+
+```sh
+pnpm test
+```
+
diff --git a/apps/typesync/client/index.html b/apps/typesync/client/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  class="h-full min-h-screen w-full p-0 m-0 dark:bg-slate-950 dark:text-white bg-white text-gray-950 font-mono"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="64x64"
+      href="https://storage.thegraph.com/favicons/64x64.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="256x256"
+      href="https://storage.thegraph.com/favicons/256x256.png"
+    />
+    <title>Graph Protocol | TypeSync</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  </head>
+  <body class="h-full w-full">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBrowser.tsx b/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBrowser.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { Disclosure, DisclosureButton, DisclosurePanel, Input } from '@headlessui/react';
+import { ChevronDownIcon, PlusIcon } from '@heroicons/react/20/solid';
+import { useQuery } from '@tanstack/react-query';
+import { Array as EffectArray, Order, pipe } from 'effect';
+import { useState } from 'react';
+
+import type { SchemaBrowserTypesQuery } from '../../../generated/graphql';
+import { schemaBrowserQueryOptions } from '../../../hooks/useSchemaBrowserQuery';
+import { Loading } from '../../Loading';
+
+export type SchemaBrowserType = NonNullable<SchemaBrowserTypesQuery['space']>['types'][number];
+type ExtendedSchemaBrowserType = SchemaBrowserType & { slug: string };
+
+const SchemaTypeOrder = Order.mapInput(Order.string, (type: SchemaBrowserType) => type.name || type.id);
+
+export type SchemaBrowserProps = Readonly<{
+  typeSelected(type: SchemaBrowserType): void;
+}>;
+export function SchemaBrowser(props: SchemaBrowserProps) {
+  const [typeSearch, setTypeSearch] = useState('');
+
+  const { data: types, isLoading } = useQuery({
+    ...schemaBrowserQueryOptions,
+    select(data) {
+      const types = data.space?.types ?? [];
+      const mappedAndSorted = pipe(
+        types,
+        EffectArray.map((type) => {
+          const slugifiedProps = EffectArray.reduce(type.properties, '', (slug, curr) => `${slug}${curr.name || ''}`);
+          const slug = `${type.name || ''}${slugifiedProps}`.toLowerCase();
+          return {
+            ...type,
+            slug,
+          } as const satisfies ExtendedSchemaBrowserType;
+        }),
+        EffectArray.sort(SchemaTypeOrder),
+      );
+      if (!typeSearch) {
+        return mappedAndSorted;
+      }
+      return pipe(
+        mappedAndSorted,
+        EffectArray.filter((type) => type.slug.includes(typeSearch.toLowerCase())),
+      );
+    },
+  });
+
+  return (
+    <div className="flex flex-col gap-y-6">
+      <h3 className="text-sm/6 font-semibold text-gray-900 dark:text-white flex items-center gap-x-3">
+        Schema Browser
+        {isLoading ? <Loading /> : null}
+      </h3>
+      <div className="bg-gray-100 dark:bg-slate-900 rounded-lg flex flex-col gap-y-3 pt-2">
+        <div className="px-3 mt-2">
+          <Input
+            id="SchemaBrowserSearch"
+            name="SchemaBrowserSearch"
+            value={typeSearch}
+            onChange={(e) => setTypeSearch(e.target.value || '')}
+            type="search"
+            placeholder="Search types..."
+            className="block min-w-0 grow py-1.5 pl-2 pr-3 rounded-md bg-white dark:bg-slate-700 data-[state=invalid]:pr-10 text-base text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline sm:text-sm/6 focus-visible:outline-none w-full"
+          />
+        </div>
+        <ul className="px-4 divide-y divide-gray-100 dark:divide-gray-700 overflow-y-auto h-fit max-h-[500px] 2xl:max-h-[750px]">
+          {(types ?? []).map((_type) => (
+            <Disclosure as="li" key={_type.id} className="py-3 flex flex-col gap-y-2">
+              <div className="flex items-center justify-between gap-x-6">
+                <DisclosureButton
+                  as="div"
+                  disabled={_type.properties.length === 0}
+                  data-interactive={_type.properties.length > 0 ? 'clickable' : undefined}
+                  className="min-w-0 data-[interactive=clickable]:cursor-pointer"
+                >
+                  <div className="flex items-center gap-x-2">
+                    {_type.properties.length > 0 ? <ChevronDownIcon className="size-4" aria-hidden="true" /> : null}
+                    <p className="text-sm/6 font-semibold text-gray-900 dark:text-white">{_type.name || _type.id}</p>
+                    <p className="text-xs font-light text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-slate-600 ring-gray-500/10 rounded-md px-1.5 py-0.5 whitespace-nowrap ring-1 ring-inset">
+                      {_type.id}
+                    </p>
+                  </div>
+                </DisclosureButton>
+                <div className="flex flex-none items-center justify-end">
+                  <button
+                    type="button"
+                    className="rounded-md bg-white dark:bg-black p-2 cursor-pointer text-sm font-semibold text-gray-900 dark:text-white shadow-xs ring-1 ring-gray-300 dark:ring-black/15 ring-inset hover:bg-gray-50 dark:hover:bg-slate-950 inline-flex flex-col items-center justify-center"
+                    onClick={() => props.typeSelected(_type)}
+                  >
+                    <PlusIcon className="size-4" aria-hidden="true" />
+                  </button>
+                </div>
+              </div>
+              <DisclosurePanel
+                as="div"
+                transition
+                className="w-full transition duration-200 ease-in-out py-1.5 flex flex-col gap-y-1"
+              >
+                <ul className="w-full pl-6 pr-3 divide-y divide-gray-300 dark:divide-gray-800">
+                  {_type.properties.map((prop) => (
+                    <li key={prop.id} className="w-full text-xs py-1.5 flex items-center gap-x-2 list-disc">
+                      {prop.name || prop.id}
+                      {prop.valueType?.name != null ? (
+                        <p className="text-xs font-light text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-slate-700 ring-gray-500/10 dark:ring-gray-700/10 rounded-md px-1.5 py-0.5 whitespace-nowrap ring-1 ring-inset">
+                          {prop.valueType.name}
+                        </p>
+                      ) : null}
+                    </li>
+                  ))}
+                </ul>
+              </DisclosurePanel>
+            </Disclosure>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}