Form Select

import { type AnyFormApi, type DeepKeys, useField } from "@tanstack/react-form";
import type { ComponentProps, ReactNode } from "react";

import { cn } from "@/lib/utils";

import { Field, FieldLabel } from "@/components/ui/field";
import { FormError } from "@/components/ui/forms/form-error";
import { type GetFormData } from "@/components/ui/forms/helpers";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

export type FormSelectProps<TForm extends AnyFormApi> = Omit<
    ComponentProps<typeof SelectTrigger>,
    "name" | "form" | "prefix"
> & {
    label?: ReactNode;
    form: TForm;
    name: DeepKeys<GetFormData<TForm>>;
    options: { label: string; value: string }[];
    placeholder?: string;
    containerClassName?: string;
    prefix?: ReactNode;
};

export const FormSelect = <TForm extends AnyFormApi>({
    label,
    form,
    name,
    options,
    placeholder,
    className,
    containerClassName,
    prefix,
    ...rest
}: FormSelectProps<TForm>) => {
    const field = useField({
        form,
        name,
    });

    const errors = field.state.meta.errors[0];
    const error = typeof errors === "object" ? errors.message : errors;

    return (
        <Field data-invalid={error != undefined} className={cn("gap-1.5", containerClassName)}>
            {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
            <Select name={field.name} value={field.state.value as string} onValueChange={field.handleChange}>
                <SelectTrigger
                    id={field.name}
                    className={cn("relative", className)}
                    aria-invalid={error != undefined}
                    onBlur={field.handleBlur}
                    {...rest}>
                    {prefix && <div className="absolute inset-s-3 top-1/2 -translate-y-1/2">{prefix}</div>}
                    <SelectValue className={cn({ "ps-7": prefix })} placeholder={placeholder} />
                </SelectTrigger>
                <SelectContent>
                    {options.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                            {option.label}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
            <FormError form={form} name={name} />
        </Field>
    );
};

import { type AnyFormApi, type DeepKeys, useField } from "@tanstack/react-form";
import type { InputHTMLAttributes } from "react";

import { cn } from "@/lib/utils";

import { type GetFormData } from "@/components/ui/forms/helpers";

export type FormErrorProps<TForm extends AnyFormApi> = Omit<
    InputHTMLAttributes<HTMLParagraphElement>,
    "name" | "form"
> & {
    form: TForm;
    name: DeepKeys<GetFormData<TForm>>;
};

export const FormError = <TForm extends AnyFormApi>({ form, name = "", className, ...rest }: FormErrorProps<TForm>) => {
    const field = useField({
        form,
        name,
    });

    const errors = field.state.meta.errors[0];
    const error = typeof errors === "object" ? errors.message : errors;

    return (
        <>
            {error && (
                <p {...rest} className={cn("text-destructive text-sm", className)}>
                    {error}
                </p>
            )}
        </>
    );
};

import { type AnyFormApi, type DeepKeys, type FormApi } from "@tanstack/react-form";

export type GetFormData<TForm> =
    TForm extends FormApi<infer TData, any, any, any, any, any, any, any, any, any, any, any> ? TData : never;

export const setFieldError = <TForm extends AnyFormApi>(
    form: TForm,
    field: DeepKeys<GetFormData<TForm>>,
    error: string,
) => {
    form.setFieldMeta(field, (prev) => ({
        ...prev,
        errorMap: {
            ...prev.errorMap,
            onSubmit: error,
        },
    }));
};

export const clearFormErrors = <TForm extends AnyFormApi>(form: TForm) => {
    form.setErrorMap({ onDynamic: { fields: {} } });
};