This looks super cool!!
With a simpler form, like the one in the example, rather than dealing with all the overhead, I would prefer to just do this, where everything related to field rendering (styling, label, errors…) is handled in those Field components (like in the demo on the components library):
interface IFormCreateEntity {
email: string
name?: string
}
const onSubmit = (data: IFormCreateEntity) => {
// do something with the data
}
return (
<Form<IFormCreateEntity> onSubmit={onSubmit}>
<TextField name="email" label="Email" />
<TextField name="name" label="Name" optional /> // fields should be required by default
<Submit>Create</Submit>
</Form>
)
Where I would then find AutoForm useful is where the effort of manual declaration is greater than that of using AutoForm - with a schema like this, for example (the Spoonjoy recipe input):
const StringSchema = z.string();
const IntSchema = z.number().int();
const FloatSchema = z.number();
const BooleanSchema = z.boolean();
const CreateIngredientInput = z.object({
quantity: FloatSchema,
unitName: StringSchema,
ingredientName: StringSchema,
}).required();
const CreateStepOutputUseInput = z.object({
outputOfStepNum: IntSchema,
inputOfStepNum: IntSchema.optional(),
}).required();
const CreateRecipeStepInput = z.object({
description: StringSchema,
stepNum: IntSchema,
stepTitle: StringSchema.optional(),
ingredients: z.array(CreateIngredientInput).optional(),
stepOutputUses: z.array(CreateStepOutputUseInput).optional(),
}).required();
const CreateRecipeInput = z.object({
description: StringSchema.optional(),
title: StringSchema,
servings: IntSchema.optional(),
steps: z.array(CreateRecipeStepInput),
}).required();
const CreateRecipeInputSchema = z.object({
input: CreateRecipeInput,
});
I did try to test that out, but it looks like something isn’t yet supported by AutoField:
That is a form that took a lot of time to manually define, and I’d love to see what AutoForm would be able to do for a situation like that.
Keep up the great work! 