feat(352 | typesync.v2): working through publish states

Author: cmwhited

apps/events/src/mapping.ts

@@ -1,7 +1,7 @@
-import type { Mapping } from '@graphprotocol/hypergraph';
 import { Id } from '@graphprotocol/hypergraph';
+import type { Mapping } from '@graphprotocol/hypergraph/mapping';
 
-export const mapping: Mapping.Mapping = {
+export const mapping: Mapping = {
   User: {
     typeIds: [Id('bffa181e-a333-495b-949c-57f2831d7eca')],
     properties: {
@@ -54,9 +54,18 @@ export const mapping: Mapping.Mapping = {
     properties: {
       name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
       description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
+      createdAt: Id('e2e6906b-d2b6-48d2-8aa2-54e8b29f6933'),
+      updatedAt: Id('2e877fe0-a504-4ea0-b43c-210d011db434'),
     },
     relations: {
       sponsors: Id('6860bfac-f703-4289-b789-972d0aaf3abe'),
     },
   },
+  Todo3: {
+    typeIds: [Id('4f7bba76-7855-4d63-b59d-1d9f2be866df')],
+    properties: {
+      name: Id('47006386-d351-411c-8287-1dae1c1aa8c1'),
+      completed: Id('9f9f00eb-4f32-4f71-92ba-b266566d0013'),
+    },
+  },
 };

apps/events/src/schema.ts

@@ -36,4 +36,10 @@ export class Event extends Entity.Class<Event>('Event')({
   description: Type.optional(Type.String),
   sponsors: Type.Relation(Company),
   createdAt: Type.Date,
+  updatedAt: Type.Date,
+}) {}
+
+export class Todo3 extends Entity.Class<Todo3>('Todo3')({
+  name: Type.String,
+  completed: Type.Boolean,
 }) {}

packages/hypergraph/typesync-studio/src/Components/Auth/UserPill.tsx

@@ -4,6 +4,8 @@ import { useHypergraphApp, useHypergraphAuth } from '@graphprotocol/hypergraph-r
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import { SignOutIcon } from '@phosphor-icons/react';
 
+import { shorten } from '@/utils/string.ts';
+
 export function UserPill() {
   const { logout, redirectToConnect } = useHypergraphApp();
   const { authenticated, identity } = useHypergraphAuth();
@@ -52,7 +54,3 @@ export function UserPill() {
     </button>
   );
 }
-
-function shorten(address: string) {
-  return `${address.substring(0, 6)}...${address.substring(address.length - 6, address.length)}`;
-}

packages/hypergraph/typesync-studio/src/Components/Schema/AppSchemaSpaceDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Id, type SpaceStorageEntry } from '@graphprotocol/hypergraph';
-import { useSpaces } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp, useHypergraphAuth, useSpaces } from '@graphprotocol/hypergraph-react';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
 import { WarningIcon, XIcon } from '@phosphor-icons/react';
 import { createFormHook, useStore } from '@tanstack/react-form';
@@ -158,15 +158,63 @@ type SchemaSpaceSelectProps = {
   ): void;
 };
 function SchemaSpaceSelect({ id, name, spaceSelected }: Readonly<SchemaSpaceSelectProps>) {
-  const { data: privateSpaces = [] } = useSpaces({ mode: 'private' });
-  const { data: publicSpaces = [] } = useSpaces({ mode: 'public' });
+  const { redirectToConnect } = useHypergraphApp();
+  const { authenticated } = useHypergraphAuth();
+  const { data: publicSpaces = [], isPending } = useSpaces({ mode: 'public' });
 
   const field = useFieldContext<string>();
   const value = useStore(field.store, (state) => state.value);
   const errors = useStore(field.store, (state) => state.meta.errors);
   const touched = useStore(field.store, (state) => state.meta.isTouched);
   const hasErrors = errors.length > 0 && touched;
 
+  if (!authenticated) {
+    return (
+      <button
+        type="button"
+        className="rounded-full bg-slate-900 flex items-center justify-center px-3 py-1.5 text-sm font-semibold text-white shadow-xs ring-1 ring-white/10 ring-inset hover:bg-white/10 cursor-pointer w-full"
+        onClick={() =>
+          redirectToConnect({
+            storage: localStorage,
+            connectUrl: 'https://connect.geobrowser.io/',
+            successUrl: `${window.location.origin}/authenticate-callback`,
+            redirectFn(url: URL) {
+              window.location.href = url.toString();
+            },
+          })
+        }
+      >
+        Sign in to Geo Account
+      </button>
+    );
+  }
+  if (!isPending && publicSpaces.length === 0) {
+    return (
+      <div className="w-full flex flex-col gap-y-2">
+        <p className="text-sm text-gray-700 dark:text-gray-300">
+          Schemas need to be published to a public Space you have granted access to this app
+        </p>
+        <p className="text-xs text-gray-700 dark:text-gray-300">Reconnect to Geo connect and connect public spaces</p>
+        <button
+          type="button"
+          className="rounded-full bg-slate-900 flex items-center justify-center px-3 py-1.5 text-sm font-semibold text-white shadow-xs ring-1 ring-white/10 ring-inset hover:bg-white/10 cursor-pointer w-full"
+          onClick={() =>
+            redirectToConnect({
+              storage: localStorage,
+              connectUrl: 'https://connect.geobrowser.io/',
+              successUrl: `${window.location.origin}/authenticate-callback`,
+              redirectFn(url: URL) {
+                window.location.href = url.toString();
+              },
+            })
+          }
+        >
+          Connect Spaces
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div className="relative flex flex-col gap-y-2 w-full">
       <fieldset
@@ -179,38 +227,6 @@ function SchemaSpaceSelect({ id, name, spaceSelected }: Readonly<SchemaSpaceSele
         <legend className="mt-1 text-sm/6 text-gray-600 dark:text-gray-400">
           Select the Space to publish your Hypergraph shema to.
         </legend>
-        {privateSpaces.map((privateSpace) => (
-          <label
-            key={privateSpace.id}
-            aria-label={privateSpace.name || privateSpace.id}
-            aria-description={`space-${privateSpace.id}`}
-            className="group flex border border-gray-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-br-md last:rounded-bl-md focus:outline-hidden has-checked:relative has-checked:border-indigo-200 has-checked:bg-indigo-50 dark:border-gray-700 dark:has-checked:border-indigo-800 dark:has-checked:bg-indigo-500/10 w-full cursor-pointer"
-          >
-            <input
-              value={privateSpace.id}
-              checked={privateSpace.id === value}
-              onChange={(e) => {
-                const checked = e.target.checked;
-                if (checked) {
-                  field.handleChange(privateSpace.id);
-                  spaceSelected(privateSpace);
-                }
-              }}
-              name={name}
-              type="radio"
-              className="relative mt-0.5 size-4 shrink-0 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 dark:border-white/10 dark:bg-white/5 dark:checked:border-indigo-500 dark:checked:bg-indigo-500 dark:focus-visible:outline-indigo-500 dark:disabled:border-white/5 dark:disabled:bg-white/10 dark:disabled:before:bg-white/20 forced-colors:appearance-auto forced-colors:before:hidden"
-            />
-            <span className="ml-3 flex flex-col gap-y-1">
-              <span className="flex items-center gap-x-2 text-sm font-medium text-gray-900 group-has-checked:text-indigo-900 dark:text-white dark:group-has-checked:text-indigo-300">
-                {privateSpace.name || privateSpace.id}
-                <SpaceVisibilityTag visibility="public" />
-              </span>
-              <span className="block text-sm text-gray-500 group-has-checked:text-indigo-700 dark:text-gray-400 dark:group-has-checked:text-indigo-300/75">
-                {privateSpace.name != null ? <InlineCode>{privateSpace.id}</InlineCode> : null}
-              </span>
-            </span>
-          </label>
-        ))}
         {publicSpaces.map((publicSpace) => (
           <label
             key={publicSpace.id}
@@ -235,7 +251,6 @@ function SchemaSpaceSelect({ id, name, spaceSelected }: Readonly<SchemaSpaceSele
             <span className="ml-3 flex flex-col gap-y-1">
               <span className="flex items-center gap-x-2 text-sm font-medium text-gray-900 group-has-checked:text-indigo-900 dark:text-white dark:group-has-checked:text-indigo-300">
                 {publicSpace.name || publicSpace.id}
-                <SpaceVisibilityTag visibility="public" />
               </span>
               <span className="block text-sm text-gray-500 group-has-checked:text-indigo-700 dark:text-gray-400 dark:group-has-checked:text-indigo-300/75">
                 {publicSpace.name != null ? <InlineCode>{publicSpace.id}</InlineCode> : null}
@@ -248,27 +263,3 @@ function SchemaSpaceSelect({ id, name, spaceSelected }: Readonly<SchemaSpaceSele
     </div>
   );
 }
-
-type SpaceVisibility = 'public' | 'private';
-
-function SpaceVisibilityTag({ visibility }: Readonly<{ visibility: SpaceVisibility }>) {
-  if (visibility === 'private') {
-    return (
-      <span className="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 inset-ring inset-ring-gray-200 dark:text-white dark:inset-ring-white/10">
-        <svg viewBox="0 0 6 6" aria-hidden="true" className="size-1.5 fill-red-500 dark:fill-red-400">
-          <circle r={3} cx={3} cy={3} />
-        </svg>
-        Private
-      </span>
-    );
-  }
-
-  return (
-    <span className="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 inset-ring inset-ring-gray-200 dark:text-white dark:inset-ring-white/10">
-      <svg viewBox="0 0 6 6" aria-hidden="true" className="size-1.5 fill-green-500 dark:fill-green-400">
-        <circle r={3} cx={3} cy={3} />
-      </svg>
-      Public
-    </span>
-  );
-}

packages/hypergraph/typesync-studio/src/Components/Schema/PropertyCombobox.tsx

@@ -17,6 +17,7 @@ import { useState } from 'react';
 
 import { type ExtendedProperty, usePropertiesQuery } from '@/hooks/useKnowledgeGraph.tsx';
 import { classnames } from '@/utils/classnames.ts';
+import { shorten } from '@/utils/string.ts';
 import { mapKGDataTypeToPrimitiveType } from '@/utils/type-mapper.ts';
 import { ErrorMessages } from '../Form/ErrorMessages.tsx';
 import { useFieldContext } from '../Form/form.ts';
@@ -91,7 +92,7 @@ export function PropertyCombobox({ id, label, propertySelected, ...rest }: Reado
         </ComboboxButton>
 
         {props.length > 0 || EffectString.isNonEmpty(propsFilter) ? (
-          <ComboboxOptions className="absolute z-10 mt-10 max-h-60 w-fit min-w-md 2xl:min-w-xl overflow-auto rounded-md bg-white dark:bg-slate-700 py-1 text-base shadow-lg ring-1 ring-black/5 dark:ring-black/10 focus:outline-hidden sm:text-sm">
+          <ComboboxOptions className="absolute z-10 mt-10 max-h-60 w-fit max-w-lg 2xl:max-w-xl overflow-auto rounded-md bg-white dark:bg-slate-700 py-1 text-base shadow-lg ring-1 ring-black/5 dark:ring-black/10 focus:outline-hidden sm:text-sm">
             {props.map((_prop) => (
               <ComboboxOption
                 key={_prop.id}
@@ -105,9 +106,12 @@ export function PropertyCombobox({ id, label, propertySelected, ...rest }: Reado
                       {_prop.name || _prop.id}
                       <InlineCode>{mapKGDataTypeToPrimitiveType(_prop.dataType, _prop.name || _prop.id)}</InlineCode>
                     </p>
-                    <p className="hidden xl:block xl:w-fit">
+                    <p className="hidden 2xl:block 2xl:w-fit">
                       <InlineCode>{_prop.id}</InlineCode>
                     </p>
+                    <p className="w-fit block 2xl:hidden">
+                      <InlineCode>{shorten(_prop.id)}</InlineCode>
+                    </p>
                   </div>
                   <p className="text-xs text-gray-500 dark:text-gray-300 group-data-focus:text-gray-700 dark:group-data-focus:text-gray-50">
                     {_prop.description}