updated react-form to latest

app/package.json

@@ -40,7 +40,7 @@
     "@libsql/client": "^0.14.0",
     "@mantine/core": "^7.13.4",
     "@sinclair/typebox": "^0.32.34",
-    "@tanstack/react-form": "0.19.2",
+    "@tanstack/react-form": "^1.0.5",
     "@uiw/react-codemirror": "^4.23.6",
     "@xyflow/react": "^12.3.2",
     "aws4fetch": "^1.0.18",

app/src/ui/modules/data/components/EntityForm.tsx

@@ -1,4 +1,4 @@
-import type { FieldApi, FormApi } from "@tanstack/react-form";
+import type { FieldApi, ReactFormExtendedApi } from "@tanstack/react-form";
 import {
    type Entity,
    type EntityData,
@@ -8,6 +8,7 @@ import {
    JsonSchemaField,
    RelationField,
 } from "data";
+import { useStore } from "@tanstack/react-store";
 import { MediaField } from "media/MediaField";
 import { type ComponentProps, Suspense } from "react";
 import { JsonEditor } from "ui/components/code/JsonEditor";
@@ -20,13 +21,18 @@ import { EntityRelationalFormField } from "./fields/EntityRelationalFormField";
 import ErrorBoundary from "ui/components/display/ErrorBoundary";
 import { Alert } from "ui/components/display/Alert";
 
+// simplify react form types 🤦
+export type FormApi = ReactFormExtendedApi<any, any, any, any, any, any, any, any, any, any>;
+// biome-ignore format: ...
+export type TFieldApi = FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+
 type EntityFormProps = {
    entity: Entity;
    entityId?: number;
    data?: EntityData;
    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
    fieldsDisabled: boolean;
-   Form: FormApi<any>;
+   Form: FormApi;
    className?: string;
    action: "create" | "update";
 };
@@ -42,7 +48,6 @@ export function EntityForm({
    action,
 }: EntityFormProps) {
    const fields = entity.getFillableFields(action, true);
-   console.log("data", { data, fields });
 
    return (
       <form onSubmit={handleSubmit}>
@@ -132,7 +137,7 @@ type EntityFormFieldProps<
    T extends keyof JSX.IntrinsicElements = "input",
    F extends Field = Field,
 > = ComponentProps<T> & {
-   fieldApi: FieldApi<any, any>;
+   fieldApi: TFieldApi;
    field: F;
    action: "create" | "update";
    data?: EntityData;
@@ -215,7 +220,7 @@ function EntityMediaFormField({
    entityId,
    disabled,
 }: {
-   formApi: FormApi<any>;
+   formApi: FormApi;
    field: MediaField;
    entity: Entity;
    entityId?: number;
@@ -223,7 +228,7 @@ function EntityMediaFormField({
 }) {
    if (!entityId) return;
 
-   const value = formApi.useStore((state) => {
+   const value = useStore(formApi.store, (state) => {
       const val = state.values[field.name];
       if (!val || typeof val === "undefined") return [];
       if (Array.isArray(val)) return val;
@@ -253,7 +258,7 @@ function EntityJsonFormField({
    fieldApi,
    field,
    ...props
-}: { fieldApi: FieldApi<any, any>; field: JsonField }) {
+}: { fieldApi: TFieldApi; field: JsonField }) {
    const handleUpdate = useEvent((value: any) => {
       fieldApi.handleChange(value);
    });
@@ -289,7 +294,7 @@ function EntityEnumFormField({
    fieldApi,
    field,
    ...props
-}: { fieldApi: FieldApi<any, any>; field: EnumField }) {
+}: { fieldApi: TFieldApi; field: EnumField }) {
    const handleUpdate = useEvent((e: React.ChangeEvent<HTMLTextAreaElement>) => {
       fieldApi.handleChange(e.target.value);
    });

app/src/ui/modules/data/components/fields/EntityJsonSchemaFormField.tsx

@@ -1,8 +1,8 @@
-import type { FieldApi } from "@tanstack/react-form";
 import type { EntityData, JsonSchemaField } from "data";
 import * as Formy from "ui/components/form/Formy";
 import { FieldLabel } from "ui/components/form/Formy";
 import { JsonSchemaForm } from "ui/components/form/json-schema";
+import type { TFieldApi } from "ui/modules/data/components/EntityForm";
 
 export function EntityJsonSchemaFormField({
    fieldApi,
@@ -11,7 +11,7 @@ export function EntityJsonSchemaFormField({
    disabled,
    ...props
 }: {
-   fieldApi: FieldApi<any, any>;
+   fieldApi: TFieldApi;
    field: JsonSchemaField;
    data?: EntityData;
    disabled?: boolean;

app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx

@@ -1,5 +1,4 @@
 import { getHotkeyHandler, useHotkeys } from "@mantine/hooks";
-import type { FieldApi } from "@tanstack/react-form";
 import { ucFirst } from "core/utils";
 import type { EntityData, RelationField } from "data";
 import { useEffect, useRef, useState } from "react";
@@ -12,10 +11,11 @@ import { Popover } from "ui/components/overlay/Popover";
 import { Link } from "ui/components/wouter/Link";
 import { routes } from "ui/lib/routes";
 import { useLocation } from "wouter";
-import { EntityTable, type EntityTableProps } from "../EntityTable";
+import type { EntityTableProps } from "../EntityTable";
 import type { ResponseObject } from "modules/ModuleApi";
 import ErrorBoundary from "ui/components/display/ErrorBoundary";
 import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
+import type { TFieldApi } from "ui/modules/data/components/EntityForm";
 
 // @todo: allow clear if not required
 export function EntityRelationalFormField({
@@ -25,7 +25,7 @@ export function EntityRelationalFormField({
    disabled,
    tabIndex,
 }: {
-   fieldApi: FieldApi<any, any>;
+   fieldApi: TFieldApi;
    field: RelationField;
    data?: EntityData;
    disabled?: boolean;

app/src/ui/routes/data/data.$entity.$id.tsx

@@ -1,5 +1,5 @@
 import { ucFirst } from "core/utils";
-import type { Entity, EntityData, EntityRelation, RepoQuery } from "data";
+import type { Entity, EntityData, EntityRelation } from "data";
 import { Fragment, useState } from "react";
 import { TbDots } from "react-icons/tb";
 import { useApiQuery, useEntityQuery } from "ui/client";