feat(typesync | create app form): switch to use @tanstack/react-form. component cleanup (#204)

Author: cmwhited

apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBrowser.tsx renamed to apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/SchemaBrowser.tsx

@@ -6,9 +6,9 @@ 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';
+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 };

apps/typesync/client/src/Components/App/SchemaBuilder/TypeCombobox.tsx renamed to apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx

@@ -3,10 +3,9 @@
 import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/16/solid';
 import { Array as EffectArray, String as EffectString, Schema, pipe } from 'effect';
-import type { UseFormSetValue } from 'react-hook-form';
 
-import type { InsertAppSchema } from '../../../schema.js';
-import { classnames } from '../../../utils/classnames.js';
+import { useFieldContext } from '../../../../context/form.js';
+import { classnames } from '../../../../utils/classnames.js';
 
 class TypeOption extends Schema.Class<TypeOption>('/hypergraph/typesync/models/TypeOption')({
   id: Schema.NonEmptyTrimmedString,
@@ -27,20 +26,12 @@ const typeOptions: Array<TypeOption> = [
 ];
 
 export function TypeCombobox({
-  typePropertyIdx,
-  typeIdx,
-  value,
-  onTypeSelected,
+  id,
+  name,
   schemaTypes = [],
 }: Readonly<{
-  /** the index of this type selection field in the properties array. Types.AppSchemaForm.types[idx].properties[typeInputIdx] */
-  typePropertyIdx: number;
-  /** the index of the type within the schema array Types.AppSchemaForm.types[typeIdx] */
-  typeIdx: number;
-  /** the current value */
-  value: string;
-  /** set the value in the form when the user selects a value */
-  onTypeSelected: UseFormSetValue<InsertAppSchema>;
+  id: string;
+  name: string;
   /**
    * A list of types within the defined schema that the user can use as a relation
    * This allows the user to specify the property as a relationship to a type in the schema
@@ -49,6 +40,8 @@ export function TypeCombobox({
    */
   schemaTypes?: Array<string> | undefined;
 }>) {
+  const field = useFieldContext<string>();
+
   const relationTypeOptions = pipe(
     schemaTypes,
     EffectArray.filter((_type) => EffectString.isNonEmpty(_type)),
@@ -60,38 +53,37 @@ export function TypeCombobox({
   return (
     <Listbox
       as="div"
-      id={`types.${typeIdx}.properties.${typePropertyIdx}.type_name`}
-      name={`types.${typeIdx}.properties.${typePropertyIdx}.type_name`}
-      value={value}
+      id={id}
+      name={name}
+      value={field.state.value}
+      onBlur={field.handleBlur}
       onChange={(value) => {
         if (value) {
-          onTypeSelected(`types.${typeIdx}.properties.${typePropertyIdx}.type_name`, value, {
-            shouldDirty: true,
-            shouldTouch: true,
-            shouldValidate: true,
-          });
+          field.handleChange(value);
         }
       }}
     >
       <Label className="sr-only">Prop type</Label>
       <div className="relative">
-        <ListboxButton className="grid w-full cursor-default grid-cols-1 rounded-md bg-slate-900 py-1.5 pr-2 pl-3 text-left text-white outline-1 -outline-offset-1 outline-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
-          <span className="col-start-1 row-start-1 truncate pr-6">{value}</span>
+        <ListboxButton className="grid w-full cursor-default grid-cols-1 rounded-md bg-white dakr:bg-slate-900 py-1.5 pr-2 pl-3 text-left text-white outline-1 -outline-offset-1 outline-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+          <span className="col-start-1 row-start-1 truncate pr-6 text-gray-950 dark:text-white">
+            {field.state.value}
+          </span>
           <ChevronUpDownIcon
             aria-hidden="true"
-            className="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-300 sm:size-4"
+            className="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-300 dark:text-gray-50 sm:size-4"
           />
         </ListboxButton>
 
         <ListboxOptions
           transition
-          className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-slate-800 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
+          className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-50 dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-gray-200 dark:ring-black/5 focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
         >
           {typeOptions.map((type) => (
             <ListboxOption
               key={type.id}
               value={type.name}
-              className="group relative cursor-default py-2 pr-9 pl-3 text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden"
+              className="group relative cursor-default py-2 pr-9 pl-3 text-gray-800 dark:text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden"
             >
               <span className="block truncate font-normal group-data-selected:font-semibold">{type.name}</span>
 
@@ -105,7 +97,7 @@ export function TypeCombobox({
               key={type.id}
               value={type.name}
               className={classnames(
-                'group relative cursor-default py-2 pr-9 pl-3 text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden',
+                'group relative cursor-default py-2 pr-9 pl-3 text-gray-800 dark:text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden',
                 idx === 0 ? 'border-t border-gray-400 dark:border-white/10' : '',
               )}
             >

apps/typesync/client/src/Components/App/CreateAppForm/useCreateAppForm.tsx

@@ -0,0 +1,24 @@
+import { createFormHook } from '@tanstack/react-form';
+
+import { fieldContext, formContext } from '../../../context/form.js';
+import {
+  FormComponentRadioGroup,
+  FormComponentTextArea,
+  FormComponentTextField,
+  SubmitButton,
+} from '../../FormComponents/index.js';
+import { TypeCombobox } from './SchemaBuilder/TypeCombobox.js';
+
+export const { useAppForm } = createFormHook({
+  fieldComponents: {
+    FormComponentTextField,
+    FormComponentTextArea,
+    FormComponentRadioGroup,
+    TypeCombobox,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+  fieldContext,
+  formContext,
+});

apps/typesync/client/src/Components/App/SchemaBuilder/SchemaPreview.tsx renamed to apps/typesync/client/src/Components/App/Schema/SchemaPreview.tsx

@@ -4,8 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 import type { CSSProperties } from 'react';
 import { type ThemedToken, codeToTokens } from 'shiki';
 
+import type { AppSchema } from '../../../schema.js';
 import { classnames } from '../../../utils/classnames.js';
-import type * as Types from './types.js';
 import * as Utils from './utils.js';
 
 enum FontStyle {
@@ -20,7 +20,7 @@ enum FontStyle {
 type CodeChunk = ThemedToken;
 type CodeLine = { chunks: Array<CodeChunk>; style: 'added' | 'deleted' | null };
 
-export function SchemaPreview({ schema }: Readonly<{ schema: Types.AppSchemaForm }>) {
+export function SchemaPreview({ schema }: Readonly<{ schema: AppSchema }>) {
   const { code, hash } = Utils.buildAppSchemaFormCode(schema);
   const { data } = useQuery({
     queryKey: ['App', 'schema', 'preview', hash] as const,

apps/typesync/client/src/Components/App/SchemaBuilder/utils.ts renamed to apps/typesync/client/src/Components/App/Schema/utils.ts

@@ -1,33 +1,33 @@
-import type { AppSchemaField, AppSchemaForm } from './types.js';
+import type { AppSchema } from '../../../schema.js';
 
 function fieldToEntityString({
   name,
-  typeName,
+  type_name,
   nullable = false,
   optional = false,
   description,
-}: AppSchemaField): string {
+}: AppSchema['types'][number]['properties'][number]): string {
   // Add JSDoc comment if description exists
   const jsDoc = description ? `  /** ${description} */\n` : '';
 
   // Convert type to Entity type
   const entityType = (() => {
     switch (true) {
-      case typeName === 'Text':
+      case type_name === 'Text':
         return 'Type.Text';
-      case typeName === 'Number':
+      case type_name === 'Number':
         return 'Type.Number';
-      case typeName === 'Boolean':
+      case type_name === 'Boolean':
         return 'Type.Boolean';
-      case typeName === 'Date':
+      case type_name === 'Date':
         return 'Type.Date';
-      case typeName === 'Url':
+      case type_name === 'Url':
         return 'Type.Url';
-      case typeName === 'Point':
+      case type_name === 'Point':
         return 'Type.Point';
-      case typeName.startsWith('Relation'):
+      case type_name.startsWith('Relation'):
         // renders the type as `Type.Relation(Entity)`
-        return `Type.${typeName}`;
+        return `Type.${type_name}`;
       default:
         // how to handle complex types
         return 'Type.Text';
@@ -46,7 +46,7 @@ function fieldToEntityString({
 
 function typeDefinitionToString(type: {
   name: string;
-  properties: Readonly<Array<AppSchemaField>>;
+  properties: ReadonlyArray<AppSchema['types'][number]['properties'][number]>;
 }): string | null {
   if (!type.name) {
     return null;
@@ -97,7 +97,7 @@ ${fieldStrings.join(',\n')}
  * @param schema the app schema being built by the user
  * @returns a typescript string representation of the schema as well as a 20bit hash to pass to the useQuery hook
  */
-export function buildAppSchemaFormCode(schema: AppSchemaForm): Readonly<{ code: string; hash: string }> {
+export function buildAppSchemaFormCode(schema: AppSchema): Readonly<{ code: string; hash: string }> {
   const fileCommentStatement = '// src/schema.ts';
   const importStatement = `import { Entity, Type } from '@graphprotocol/hypergraph';\nimport * as Schema from 'effect/Schema';`;
   const typeDefinitions = schema.types