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

Author: cmwhited

apps/events/src/schema.ts

@@ -2,13 +2,13 @@ import { Entity, Type } from '@graphprotocol/hypergraph';
 
 export class User extends Entity.Class<User>('User')({
   name: Type.String,
-  created: Type.Date,
+  created: Type.Date
 }) {}
 
 export class Todo extends Entity.Class<Todo>('Todo')({
   name: Type.String,
   completed: Type.Boolean,
-  assignees: Type.Relation(User),
+  assignees: Type.Relation(User)
 }) {}
 
 export class Todo2 extends Entity.Class<Todo2>('Todo2')({
@@ -18,21 +18,22 @@ export class Todo2 extends Entity.Class<Todo2>('Todo2')({
   due: Type.Date,
   amount: Type.Number,
   point: Type.Point,
-  website: Type.String,
+  website: Type.String
 }) {}
 
 export class JobOffer extends Entity.Class<JobOffer>('JobOffer')({
   name: Type.String,
-  salary: Type.Number,
+  salary: Type.Number
 }) {}
 
 export class Company extends Entity.Class<Company>('Company')({
   name: Type.String,
-  jobOffers: Type.Relation(JobOffer),
+  jobOffers: Type.Relation(JobOffer)
 }) {}
 
 export class Event extends Entity.Class<Event>('Event')({
   name: Type.String,
   description: Type.optional(Type.String),
   sponsors: Type.Relation(Company),
-}) {}
+  createdAt: Type.Date
+}) {}

packages/hypergraph/typesync-studio/package.json

@@ -13,27 +13,27 @@
     "lint:fix": "biome check --write --unsafe"
   },
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.1",
-    "@graphprotocol/grc-20": "^0.23.1",
+    "@base-ui-components/react": "1.0.0-beta.2",
+    "@graphprotocol/grc-20": "^0.24.1",
     "@graphprotocol/hypergraph": "workspace:*",
     "@graphprotocol/hypergraph-react": "workspace:*",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@headlessui/react": "^2.2.7",
     "@phosphor-icons/react": "^2.1.10",
-    "@tanstack/react-form": "^1.15.2",
-    "@tanstack/react-query": "^5.84.1",
-    "@tanstack/react-query-devtools": "^5.84.1",
-    "@tanstack/react-router": "^1.130.11",
-    "@tanstack/react-router-devtools": "^1.130.11",
-    "@tanstack/router-plugin": "^1.130.11",
-    "effect": "^3.17.6",
+    "@tanstack/react-form": "^1.19.1",
+    "@tanstack/react-query": "^5.85.0",
+    "@tanstack/react-query-devtools": "^5.85.0",
+    "@tanstack/react-router": "^1.131.7",
+    "@tanstack/react-router-devtools": "^1.131.7",
+    "@tanstack/router-plugin": "^1.131.7",
+    "effect": "3.17.6",
     "graphql": "^16.11.0",
     "graphql-request": "^7.2.0",
     "lodash.debounce": "^4.0.8",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwindcss": "^4.1.11",
-    "zod": "^4.0.14"
+    "zod": "^4.0.17"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.7",

packages/hypergraph/typesync-studio/src/Components/Arrow.tsx

@@ -0,0 +1,19 @@
+export function Arrow(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+      <title>Tooltip positioner arrow</title>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        className="fill-gray-100 dark:fill-slate-900"
+      />
+      <path
+        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+        className="fill-gray-200 dark:fill-slate-900"
+      />
+      <path
+        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+        className="fill-gray-300 dark:fill-slate-900"
+      />
+    </svg>
+  );
+}

packages/hypergraph/typesync-studio/src/Components/Form/SubmitButton.tsx

@@ -1,13 +1,31 @@
+'use client';
+
+import { Tooltip } from '@base-ui-components/react/tooltip';
 import { CheckIcon, ExclamationMarkIcon } from '@phosphor-icons/react';
 
 import { classnames } from '@/utils/classnames.ts';
+import { Arrow } from '../Arrow.tsx';
 import { Loading } from '../Loading.tsx';
 import { useFormContext } from './form.ts';
 
 export function SubmitButton({
   status,
+  tooltip,
   children,
-}: Readonly<{ status: 'idle' | 'error' | 'success' | 'submitting'; children: React.ReactNode }>) {
+}: Readonly<{
+  status: 'idle' | 'error' | 'success' | 'submitting';
+  /**
+   * If provided, then render a rooltip around the button with additional details
+   */
+  tooltip?:
+    | {
+        disabled?: boolean | undefined;
+        content: React.ReactNode;
+      }
+    | null
+    | undefined;
+  children: React.ReactNode;
+}>) {
   const form = useFormContext();
 
   return (
@@ -19,35 +37,85 @@ export function SubmitButton({
         dirty: state.isDirty,
       })}
     >
-      {({ canSubmit, isSubmitting, valid, dirty }) => (
-        <button
-          type="submit"
-          disabled={!canSubmit || !valid || !dirty || isSubmitting}
-          data-state={status}
-          className={classnames(
-            'rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 inline-flex items-center gap-x-2 cursor-pointer',
-            'disabled:bg-gray-400 disabled:text-gray-900 disabled:hover:bg-gray-400 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed',
-            'data-[state=error]:bg-red-600 data-[state=error]:hover:bg-red-500 data-[state=error]:focus-visible:bg-red-500 data-[state=success]:focus-visible:bg-green-500',
-            'data-[state=success]:bg-green-600 data-[state=success]:hover:bg-green-500',
-          )}
-        >
-          {status === 'submitting' ? (
-            <Loading />
-          ) : status === 'success' ? (
-            <>
-              <CheckIcon className="size-5 text-white" aria-hidden="true" />
-              {children}
-            </>
-          ) : status === 'error' ? (
-            <>
-              <ExclamationMarkIcon className="size-5 text-white" aria-hidden="true" />
-              Error
-            </>
-          ) : (
-            children
-          )}
-        </button>
-      )}
+      {({ canSubmit, isSubmitting, valid, dirty }) => {
+        if (tooltip) {
+          return (
+            <Tooltip.Provider delay={300} closeDelay={1_000}>
+              <Tooltip.Root disabled={tooltip.disabled || false}>
+                <Tooltip.Trigger
+                  type="submit"
+                  disabled={!canSubmit || !valid || !dirty || isSubmitting}
+                  data-state={status}
+                  className={classnames(
+                    'rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 inline-flex items-center gap-x-2 cursor-pointer',
+                    'disabled:bg-gray-400 disabled:text-gray-900 disabled:hover:bg-gray-400 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed',
+                    'data-[state=error]:bg-red-600 data-[state=error]:hover:bg-red-500 data-[state=error]:focus-visible:bg-red-500 data-[state=success]:focus-visible:bg-green-500',
+                    'data-[state=success]:bg-green-600 data-[state=success]:hover:bg-green-500',
+                  )}
+                >
+                  {status === 'submitting' ? (
+                    <Loading />
+                  ) : status === 'success' ? (
+                    <>
+                      <CheckIcon className="size-5 text-white" aria-hidden="true" />
+                      {children}
+                    </>
+                  ) : status === 'error' ? (
+                    <>
+                      <ExclamationMarkIcon className="size-5 text-white" aria-hidden="true" />
+                      Error
+                    </>
+                  ) : (
+                    children
+                  )}
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Positioner side="top" sideOffset={10}>
+                    <Tooltip.Popup className="box-border text-sm flex flex-col px-2 py-3 rounded-lg bg-gray-100 dark:bg-slate-900 transform-content data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 w-fit max-w-xs">
+                      <Tooltip.Arrow className="flex data-[side=top]:-bottom-2 data-[side=top]:rotate-180 data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0 data-[side=left]:-right-3 data-[side=left]:rotate-90 data-[side=right]:-left-3 data-[side=right]:-rotate-90">
+                        <Arrow />
+                      </Tooltip.Arrow>
+                      <span className="text-xs text-gray-700 dark:text-white whitespace-break-spaces w-full">
+                        {tooltip.content}
+                      </span>
+                    </Tooltip.Popup>
+                  </Tooltip.Positioner>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            </Tooltip.Provider>
+          );
+        }
+
+        return (
+          <button
+            type="submit"
+            disabled={!canSubmit || !valid || !dirty || isSubmitting}
+            data-state={status}
+            className={classnames(
+              'rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 inline-flex items-center gap-x-2 cursor-pointer',
+              'disabled:bg-gray-400 disabled:text-gray-900 disabled:hover:bg-gray-400 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed',
+              'data-[state=error]:bg-red-600 data-[state=error]:hover:bg-red-500 data-[state=error]:focus-visible:bg-red-500 data-[state=success]:focus-visible:bg-green-500',
+              'data-[state=success]:bg-green-600 data-[state=success]:hover:bg-green-500',
+            )}
+          >
+            {status === 'submitting' ? (
+              <Loading />
+            ) : status === 'success' ? (
+              <>
+                <CheckIcon className="size-5 text-white" aria-hidden="true" />
+                {children}
+              </>
+            ) : status === 'error' ? (
+              <>
+                <ExclamationMarkIcon className="size-5 text-white" aria-hidden="true" />
+                Error
+              </>
+            ) : (
+              children
+            )}
+          </button>
+        );
+      }}
     </form.Subscribe>
   );
 }

packages/hypergraph/typesync-studio/src/Components/InlineCode.tsx

@@ -1,6 +1,9 @@
-export function InlineCode({ children }: Readonly<{ children: React.ReactNode }>) {
+export function InlineCode({ children, ...rest }: React.ComponentProps<'span'>) {
   return (
-    <span className="text-xs inline 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">
+    <span
+      {...rest}
+      className="text-xs inline 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"
+    >
       {children}
     </span>
   );