How to add new custom fields to to the defineSchema() types?

[MurzNN]

I've implemented custom fields and added them to the registry, and everything works well, but in the function defineSchema(), TypeScript isn't aware of the new custom field types and shows an error:

How to fix this issue?

[MurzNN]

Here is the full code of the component:

"use client";

import { defineSchema, type InferType } from "@buildnbuzz/form-react";
import {
  Form,
  FormContent,
  FormFields,
  FormSubmit,
} from "@/components/buzzform/form";
import { myRegistry } from "@/components/buzzform-custom/my-registry";

const schema = defineSchema({
  fields: [
    {
      type: "select",
      name: "roomType",
      required: true,
      options: [
        { value: "standard", label: "Standard Room" },
        { value: "deluxe", label: "Deluxe Room" },
        { value: "suite", label: "Executive Suite" },
        { value: "penthouse", label: "Penthouse" },
      ],
      defaultValue: "standard",
    },
    {
      type: "mySelect",
      name: "roomType2",
      required: true,
      options: [
        { value: "standard", label: "Standard Room" },
        { value: "deluxe", label: "Deluxe Room" },
        { value: "suite", label: "Executive Suite" },
        { value: "penthouse", label: "Penthouse" },
      ],
      defaultValue: "standard",
    },
  ],
});

type FormData = InferType<typeof schema.fields>;

export function MyForm() {
  return (
    <Form
      schema={schema}
      registries={{ fields: myRegistry }}
      onSubmit={({ value }) => console.log(value)}
    >
      <FormContent>
        <FormFields />
        <FormSubmit>Submit</FormSubmit>
      </FormContent>
    </Form>
  );
}

and the registry:

"use client";

import type { FieldRegistry } from "@buildnbuzz/form-react";
import { MySelectField } from "./fields/my-select";
import { registry as buzzformRegistry } from "../buzzform/registry";

export const myRegistry: FieldRegistry & {
  mySelect: typeof MySelectField;
} = {
  ...buzzformRegistry,
  mySelect: MySelectField,
};

[ladparth]

i think this along with #149 can be fixed by just opening FormSchema -> Fields to allow custom fields.

[ladparth]

Hey, checkout this example i just added with custom field support https://form.buildnbuzz.com/examples/ui-and-custom-fields-form

[MurzNN]

Thank you for the example, but TypeScript is still not happy enough with it:


Do you have any ideas on how to make the file green, without TS errors like this, and have the typed data?