Shadcn UI + React hook form + Zod + Next Js, dynamic form built with Directus

Hello everyone, I am trying to implement dynamic forms with directus, it happens that this gives me the guidelines to define the form, ie, what kind of interface expected, value, validations, etc., it would be a question only to generate the schema validations, and interfaces in next js, however I get a little lost with the fact of how the fields are recorded and how to apply the validations, does anyone have any practical example of this or similar?

I leave my code as an example and as a note, the fact that my problem goes more with the custom interfaces, that is to say with the interfaces provided by Shadcn UI goes great.

"use client" import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { ControllerRenderProps, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { DirectusField, createItem, readItem, updateItem } from '@directus/sdk'; import { Schema, z } from 'zod'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Button } from '@/components/ui/button'; import { Input } from './_type_fields/_input/input'; import { CalendarComponent } from './_type_fields/_datetime/calendar'; import { SelectDropdownComponent } from './_type_fields/_select_dropdown/select'; import { transformToTitleCase } from '@/lib/utils'; import directus, { handleError } from '@/lib/directus'; import { ApiCollections, components } from '../../../../../types/api-collection'; import { toast } from '@/components/ui/use-toast'; import { useRouter } from 'next/navigation'; import { SelectDropdownM2OComponent } from './_type_fields/_select_dropdown_m2o/select-dropdown-m2o'; import { TextareaComponent } from './_type_fields/_textarea/textarea'; import { FilesComponent } from './_type_fields/_files/filesComponent';

const getDefaultForFieldType = (field: DirectusField): any => { return field.schema?.default_value != undefined ? field.schema?.default_value : ''; };

async function getItem(collectionName: string, id: string) { try { let data = await directus.request(readItem(collectionName as keyof ApiCollections, id)) as unknown as ApiCollections[keyof ApiCollections][]; return data; } catch (error: any) { console.log(error); handleError(error); return [] } }

const createFormSchemaAndDefaults = (fields: DirectusField[], item: { [key: string]: any } | null) => { const schemaObject: { [key: string]: z.ZodType<any, any> } = {}; const defaultValues: { [key: string]: any } = {};

fields.forEach(field => {
    const isRequired = field.meta?.required && field.schema?.is_nullable;
    const fieldSchema = getSchemaForFieldType(field);

    if (fieldSchema) {
        schemaObject[field.field] = isRequired ? fieldSchema : fieldSchema.optional();
        if (item && item.hasOwnProperty(field.field)) {
            defaultValues[field.field] = item[field.field];
        } else {
            defaultValues[field.field] = field.schema?.default_value != undefined ? field.schema?.default_value : getDefaultForFieldType(field);

        }
    }
});

const formSchema = z.object(schemaObject);
return { formSchema, defaultValues };

};

export default function DynamicFormContainer({ fields, formId, action }: { fields: DirectusField[], formId: string, action: string }) { if (!fields || fields.length === 0) { return

; }

return <DynamicForm fields={fields} formId={formId} action={action} />;

}

useEffect(() => {
    const fetchData = async () => {
        setLoading(true);
        let item = null;
        if (action !== "%2B") {
            item = await getItem(formId, action);
        }
        const data = createFormSchemaAndDefaults(fields, item);
        console.log(
            "formData.formSchema",
            data.formSchema
        );

        setFormData(data);
        setLoading(false);
    };

    fetchData();
}, [fields, formId, action]);

const form = useForm({
    resolver: formData ? zodResolver(formData.formSchema) : undefined,
    defaultValues: formData ? formData.defaultValues : {},
    mode: "onBlur",
});

const onSubmit = useCallback(async (data: { [key: string]: any }) => {
    console.log("data", data);
    let res;
    if (action != "%2B") {
        res = await updateAnItem(data, formId, action);
    } else {
        res = await saveItem(data, formId);
    }
    console.log("res", res);

    if (res) {
        router.push(`/report/${formId}`);
    }
}, [formId, action, router]);

if (loading || !formData) {
    return <div>Loading...</div>;
}

return (
    <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
            {fields.map((fieldData) => (
                <FormField
                    control={form.control}
                    key={fieldData.field}
                    name={fieldData.field}
                    defaultValue={formData.defaultValues[fieldData.field]}
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>{transformToTitleCase(field.name)}</FormLabel>
                            <FormControl>
                                {renderInputComponent(fieldData, field)}
                            </FormControl>
                            <FormMessage></FormMessage>
                        </FormItem>
                    )}
                />
            ))}
            <Button type="submit">Submit</Button>
        </form>
    </Form>
);

}

shadcn-ui / ui

Shadcn UI + React hook form + Zod + Next Js, dynamic form built with Directus #2795