import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" import { createContext, createUniqueId, Show, splitProps, useContext } from "solid-js" import type { PolymorphicProps } from "@kobalte/core/polymorphic" import type { FieldPath, FieldStore, FieldValues, FormStore, ResponseData } from "@modular-forms/solid" import { getValue, Field as ModularField } from "@modular-forms/solid" import { cn } from "@/lib/utils" import { Label } from "@/components/ui/label" type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TResponseData extends ResponseData = undefined, TFieldName extends FieldPath = FieldPath > = { name: TFieldName formStore: FormStore fieldStore: FieldStore } const FormFieldContext = createContext() type FormFieldComponent = < TFieldValues extends FieldValues = FieldValues, TResponseData extends ResponseData = undefined, TFieldName extends FieldPath = FieldPath >(props: { of: FormStore name: TFieldName children: JSX.Element }) => JSX.Element const FormField: FormFieldComponent = (props) => { return ( // @ts-expect-error - Complex generic type compatibility with @modular-forms/solid {(field) => ( {props.children} )} ) } function useFormField< TFieldValues extends FieldValues = FieldValues, TResponseData extends ResponseData = undefined, TFieldName extends FieldPath = FieldPath >() { const context = useContext(FormFieldContext) as | FormFieldContextValue | undefined if (!context) { throw new Error("useFormField must be used within ") } const { name, formStore, fieldStore } = context return { name, formStore, fieldStore, formItemId: String(name), formDescriptionId: `${name}-description`, formMessageId: `${name}-message`, error: fieldStore.error, value: () => getValue(formStore, name) } } type FormItemContextValue = { id: string } const FormItemContext = createContext() const FormItem: Component> = (props) => { const [local, others] = splitProps(props, ["class"]) const id = createUniqueId() return (

) } const FormLabel = ( props: PolymorphicProps> ) => { const [local, others] = splitProps(props as ComponentProps, ["class"]) const { error, formItemId } = useFormField() return ( ) } const FormControl: Component> = (props) => { const [local, others] = splitProps(props, ["class"]) return

} const FormDescription: Component> = (props) => { const [local, others] = splitProps(props, ["class"]) const { formDescriptionId } = useFormField() return (

) } const FormMessage: Component> = (props) => { const [local, others] = splitProps(props, ["class", "children"]) const { error, formMessageId } = useFormField() const body = () => { if (error) { return String(error) } return local.children } return (

{body()}

) } export { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage, useFormField }