diff --git a/apps/test-app/app/components/Fieldset.tsx b/apps/test-app/app/components/Fieldset.tsx index e2b86d01..8ea1fb8a 100644 --- a/apps/test-app/app/components/Fieldset.tsx +++ b/apps/test-app/app/components/Fieldset.tsx @@ -1,10 +1,10 @@ import { FC, PropsWithChildren } from "react"; -import { Rvf, useField } from "@rvf/remix"; +import { FormScope, useField } from "@rvf/remix"; type FieldsetProps = PropsWithChildren<{ label: string; name: string; - rvf?: Rvf; + rvf?: FormScope; }>; export const Fieldset: FC = ({ children, label, name, rvf }) => { diff --git a/apps/test-app/app/components/Input.tsx b/apps/test-app/app/components/Input.tsx index 504de07b..d90c3480 100644 --- a/apps/test-app/app/components/Input.tsx +++ b/apps/test-app/app/components/Input.tsx @@ -1,8 +1,8 @@ import React, { forwardRef } from "react"; -import { useField, Rvf } from "@rvf/remix"; +import { useField, FormScope } from "@rvf/remix"; type InputProps = { - name: string | Rvf; + name: string | FormScope; label: string; type?: string; value?: string; diff --git a/apps/test-app/app/components/SubmitButton.tsx b/apps/test-app/app/components/SubmitButton.tsx index 7b351601..3eab8bb5 100644 --- a/apps/test-app/app/components/SubmitButton.tsx +++ b/apps/test-app/app/components/SubmitButton.tsx @@ -1,5 +1,5 @@ import { - Rvf, + FormScope, useIsSubmitting, useIsValid, useFormScopeOrContext, @@ -9,7 +9,7 @@ type Props = { label?: string; submittingLabel?: string; disableWhenInvalid?: boolean; - form?: Rvf; + form?: FormScope; name?: string; value?: string; "data-testid"?: string; diff --git a/apps/test-app/app/routes/context-hooks.tsx b/apps/test-app/app/routes/context-hooks.tsx index fe261e47..e408cfae 100644 --- a/apps/test-app/app/routes/context-hooks.tsx +++ b/apps/test-app/app/routes/context-hooks.tsx @@ -2,7 +2,7 @@ import { DataFunctionArgs, json } from "@remix-run/node"; import { useActionData } from "@remix-run/react"; import { withYup } from "@rvf/yup"; import { - Rvf, + FormScope, FormProvider, useRemixFormResponse, useForm, @@ -23,7 +23,7 @@ const DisplayContext = ({ form, }: { testid: string; - form?: Rvf; + form?: FormScope; }) => { const context = useFormScopeOrContext(form); diff --git a/packages/core/src/dom/dom.ts b/packages/core/src/dom/dom.ts index 6c69e9f9..72e577b8 100644 --- a/packages/core/src/dom/dom.ts +++ b/packages/core/src/dom/dom.ts @@ -1,4 +1,4 @@ -import { Rvf, RvfStore } from "../form"; +import { FormScope, FormStore } from "../form"; import { getFieldValue } from "../getters"; import { MultiValueMap } from "../native-form-data/MultiValueMap"; import * as R from "remeda"; @@ -140,7 +140,7 @@ export const getElementsWithNames = ( ) as HTMLElement[]; }; -export const registerFormElementEvents = (store: RvfStore) => { +export const registerFormElementEvents = (store: FormStore) => { const transientState = () => store.store.getState(); const onChange = (event: Event) => { diff --git a/packages/core/src/form.ts b/packages/core/src/form.ts index d7aa7de4..a59a3583 100644 --- a/packages/core/src/form.ts +++ b/packages/core/src/form.ts @@ -48,17 +48,17 @@ type FormInit = { flags: StoreFlags; } & SubmitTypes; -export interface Rvf { +export interface FormScope { __brand__: "rvf"; __type__FormInputData: FormInputData; __field_prefix__: string; - __store__: RvfStore; + __store__: FormStore; scope>( field: Path, - ): Rvf>>; + ): FormScope>>; } -export interface RvfStore { +export interface FormStore { transientFieldRefs: RefStore; controlledFieldRefs: RefStore; fieldSerializerRefs: RefStore; @@ -70,7 +70,10 @@ export interface RvfStore { subformCache: Map; } -export const createRvf = ({ +export const createFormScope = < + FormInputData extends FieldValues, + FormOutputData, +>({ defaultValues, serverValidationErrors, validator, @@ -81,7 +84,7 @@ export const createRvf = ({ submitSource, formProps, flags, -}: FormInit): Rvf => { +}: FormInit): FormScope => { const transientFieldRefs = createRefStore(); const controlledFieldRefs = createRefStore(); const fieldSerializerRefs = createRefStore(); @@ -109,7 +112,7 @@ export const createRvf = ({ }); const subformCache = new Map(); - const rvfStore: RvfStore = { + const rvfStore: FormStore = { transientFieldRefs, controlledFieldRefs, fieldSerializerRefs, @@ -121,13 +124,13 @@ export const createRvf = ({ useStoreState: createTrackedSelector(store), }; - return instantiateRvf(rvfStore, ""); + return instantiateFormScope(rvfStore, ""); }; -const instantiateRvf = ( - store: RvfStore, +const instantiateFormScope = ( + store: FormStore, prefix: string, -): Rvf => ({ +): FormScope => ({ __brand__: "rvf", __type__FormInputData: {} as any, __field_prefix__: prefix, @@ -137,15 +140,15 @@ const instantiateRvf = ( if (store.subformCache.has(newPrefix)) return store.subformCache.get(newPrefix); - const scoped = instantiateRvf(store, newPrefix); + const scoped = instantiateFormScope(store, newPrefix); store.subformCache.set(newPrefix, scoped); return scoped; }, }); -export const scopeRvf = ( - parentForm: Rvf, +export const scopeFormScope = ( + parentForm: FormScope, prefix: string, -): Rvf => { +): FormScope => { return parentForm.scope(prefix as never); }; diff --git a/packages/react/src/ValidatedForm.tsx b/packages/react/src/ValidatedForm.tsx index 4237c2b5..5f41a071 100644 --- a/packages/react/src/ValidatedForm.tsx +++ b/packages/react/src/ValidatedForm.tsx @@ -1,6 +1,6 @@ import { FieldValues, AllProps } from "@rvf/core"; import { FormOpts, useForm } from "./useForm"; -import { RvfReact } from "./base"; +import { ReactFormApi } from "./base"; import { FormProvider } from "./context"; export type ValidatedFormProps< @@ -17,7 +17,7 @@ export type ValidatedFormProps< children: | React.ReactNode - | ((form: RvfReact) => React.ReactNode); + | ((form: ReactFormApi) => React.ReactNode); }; export const ValidatedForm = < diff --git a/packages/react/src/array.tsx b/packages/react/src/array.tsx index 62a78401..743e7340 100644 --- a/packages/react/src/array.tsx +++ b/packages/react/src/array.tsx @@ -1,15 +1,15 @@ import { ReactNode, useMemo } from "react"; import { FormStoreValue, - Rvf, + FormScope, getFieldError, getFieldValue, - scopeRvf, + scopeFormScope, getArrayUpdateKey, FieldArrayValidationBehaviorConfig, } from "@rvf/core"; import { makeImplFactory } from "./implFactory"; -import { RvfReact, makeBaseRvfReact } from "./base"; +import { ReactFormApi, makeBaseReactFormApi } from "./base"; import { ValidationBehaviorConfig } from "@rvf/core"; import { useFormScopeOrContextInternal } from "./context"; @@ -38,7 +38,7 @@ export interface FieldArrayApi> { map: ( callback: ( key: string, - form: RvfReact, + form: ReactFormApi, index: number, ) => ReactNode, ) => ReactNode; @@ -94,7 +94,7 @@ export interface FieldArrayApi> { } export type FieldArrayParams = { - form: Rvf; + form: FormScope; arrayFieldName: string; trackedState: FormStoreValue; validationBehavior?: FieldArrayValidationBehaviorConfig; @@ -107,8 +107,10 @@ export const makeFieldArrayImpl = >({ validationBehavior, }: FieldArrayParams): FieldArrayApi => { const itemImpl = makeImplFactory(arrayFieldName, (itemFieldName) => - makeBaseRvfReact({ - form: scopeRvf(form, itemFieldName) as Rvf, + makeBaseReactFormApi({ + form: scopeFormScope(form, itemFieldName) as FormScope< + FormInputData[number] + >, prefix: itemFieldName, trackedState, }), @@ -135,8 +137,8 @@ export const makeFieldArrayImpl = >({ return trackedState .getFieldArrayKeys(arrayFieldName) .map((key, index) => { - const itemRvf = itemImpl(String(index)); - return callback(key, itemRvf, index); + const itemFormScope = itemImpl(String(index)); + return callback(key, itemFormScope, index); }); }, push: (value) => @@ -182,7 +184,7 @@ export type UseFieldArrayOpts = { validationBehavior?: FieldArrayValidationBehaviorConfig; }; export function useFieldArray( - form: Rvf, + form: FormScope, { validationBehavior }?: UseFieldArrayOpts, ): FieldArrayApi; export function useFieldArray( @@ -190,7 +192,7 @@ export function useFieldArray( opts?: UseFieldArrayOpts, ): FieldArrayApi; export function useFieldArray( - formOrName: Rvf | string, + formOrName: FormScope | string, { validationBehavior }: UseFieldArrayOpts = {}, ) { const scope = useFormScopeOrContextInternal(formOrName); @@ -217,7 +219,7 @@ export function useFieldArray( } export type FieldArrayPropsWithScope = { - scope: Rvf; + scope: FormScope; children: (field: FieldArrayApi) => React.ReactNode; }; diff --git a/packages/react/src/base.tsx b/packages/react/src/base.tsx index d6111d6b..e49c1fed 100644 --- a/packages/react/src/base.tsx +++ b/packages/react/src/base.tsx @@ -1,8 +1,8 @@ import { useEffect, useMemo } from "react"; import * as R from "remeda"; import { - Rvf, - scopeRvf, + FormScope, + scopeFormScope, SubmitStatus, FormStoreValue, getFieldValue, @@ -44,12 +44,12 @@ import { ValidInputPropsValues, } from "./inputs/getInputProps"; -type MinimalRvf = { +type MinimalFormScope = { resetField: (fieldName: FieldPaths, nextValue?: any) => void; }; export type FormFields
= - Form extends MinimalRvf ? FieldPaths : never; + Form extends MinimalFormScope ? FieldPaths : never; interface FormProps { onSubmit: (event: React.FormEvent) => void; @@ -64,7 +64,7 @@ export type ManualSubmitOption = SubmitterOptions & { value?: string; }; -export interface RvfReact { +export interface ReactFormApi { /** * Gets whether the field has been touched. * @willRerender @@ -234,14 +234,14 @@ export interface RvfReact { ) => void; /** - * Creates an `Rvf` scoped to the specified field. + * Creates an `FormScope` scoped to the specified field. * This is useful for creating subforms. * In order to use this, you can pass it to `useForm`. * * @example * ```tsx * type PersonFormProps = { - * rvf: Rvf<{ name: string }>; + * rvf: FormScope<{ name: string }>; * } * * const PersonForm = ({ rvf }: PersonFormProps) => { @@ -272,12 +272,12 @@ export interface RvfReact { */ scope>( fieldName: Field, - ): Rvf>>; + ): FormScope>>; /** - * Returns an `Rvf` without scoping any further. + * Returns an `FormScope` without scoping any further. */ - scope(): Rvf; + scope(): FormScope; getFormProps: (props?: Partial) => FormProps; @@ -369,17 +369,17 @@ export interface RvfReact { submit: (option?: ManualSubmitOption) => void; } -export type BaseRvfReactParams = { - form: Rvf; +export type BaseReactFormParams = { + form: FormScope; prefix: string; trackedState: FormStoreValue; }; -export const makeBaseRvfReact = ({ +export const makeBaseReactFormApi = ({ trackedState, prefix, form, -}: BaseRvfReactParams): RvfReact => { +}: BaseReactFormParams): ReactFormApi => { const f = (fieldName?: string) => pathArrayToString([prefix, fieldName].filter(R.isNonNullish)); const transientState = () => form.__store__.store.getState(); @@ -392,7 +392,7 @@ export const makeBaseRvfReact = ({ makeFieldArrayImpl({ trackedState, arrayFieldName, - form: scopeRvf(form, arrayFieldName) as Rvf, + form: scopeFormScope(form, arrayFieldName) as FormScope, }), ); @@ -505,7 +505,7 @@ export const makeBaseRvfReact = ({ form.__store__.store.getState().resetField(f(fieldName), nextValue), scope: (fieldName?: string) => - fieldName == null ? form : (scopeRvf(form, fieldName) as any), + fieldName == null ? form : (scopeFormScope(form, fieldName) as any), name: (fieldName?: string) => f(fieldName), @@ -594,7 +594,9 @@ export const makeBaseRvfReact = ({ }; }; -export const useFormInternal = (form: Rvf) => { +export const useFormInternal = ( + form: FormScope, +) => { const prefix = form.__field_prefix__; const { useStoreState, resolvers } = form.__store__; const trackedState = useStoreState(); @@ -610,7 +612,7 @@ export const useFormInternal = (form: Rvf) => { const base = useMemo( () => - makeBaseRvfReact({ + makeBaseReactFormApi({ form, prefix, trackedState, diff --git a/packages/react/src/context.tsx b/packages/react/src/context.tsx index 54f4ee87..f17f78d8 100644 --- a/packages/react/src/context.tsx +++ b/packages/react/src/context.tsx @@ -1,4 +1,4 @@ -import { Rvf, scopeRvf } from "@rvf/core"; +import { FormScope, scopeFormScope } from "@rvf/core"; import { createContext, type PropsWithChildren, @@ -6,17 +6,17 @@ import { useContext, useEffect, } from "react"; -import { RvfReact } from "./base"; +import { ReactFormApi } from "./base"; import { useFormScope } from "./useFormScope"; type FormContextValue = { - scope: Rvf; + scope: FormScope; }; const FormContext = createContext(null); export type FormProviderProps = { - scope: Rvf; + scope: FormScope; }; export const FormProvider = ({ @@ -31,15 +31,15 @@ export const useFormContext = () => { const value = useContext(FormContext); if (!value) throw new Error("useFormContext must be used within a FormProvider"); - return useFormScope(value.scope) as RvfReact; + return useFormScope(value.scope) as ReactFormApi; }; export const useFormScopeOrContextInternal = ( - rvfOrName?: Rvf | string, -): Rvf => { + rvfOrName?: FormScope | string, +): FormScope => { const value = useContext(FormContext); - const getRvf = () => { + const getFormScope = () => { if (rvfOrName == null) { if (!value) throw new Error("useFormContext must be used within a FormProvider"); @@ -50,10 +50,10 @@ export const useFormScopeOrContextInternal = ( if (!value) throw new Error("useFormContext must be used within a FormProvider"); - return scopeRvf(value.scope, rvfOrName); + return scopeFormScope(value.scope, rvfOrName); }; - const rvf = getRvf(); + const rvf = getFormScope(); // Flush on every update useEffect(() => { @@ -64,15 +64,15 @@ export const useFormScopeOrContextInternal = ( }; export const useFormScopeOrContext = ( - rvf?: Rvf, -): RvfReact => { + rvf?: FormScope, +): ReactFormApi => { const value = useContext(FormContext); const scope = value?.scope ?? rvf; if (!scope) throw new Error( - "useFormScopeOrContext must be passed an Rvf or be used within a FormProvider", + "useFormScopeOrContext must be passed an FormScope or be used within a FormProvider", ); - return useFormScope(scope) as RvfReact; + return useFormScope(scope) as ReactFormApi; }; diff --git a/packages/react/src/field.tsx b/packages/react/src/field.tsx index 86329417..e8266d8e 100644 --- a/packages/react/src/field.tsx +++ b/packages/react/src/field.tsx @@ -2,7 +2,7 @@ import { RefCallback, useMemo } from "react"; import { FieldSerializer, FormStoreValue, - Rvf, + FormScope, ValidationBehaviorConfig, getFieldDefaultValue, getFieldDirty, @@ -99,7 +99,7 @@ export interface FieldApi { } export type FieldImplParams = { - form: Rvf; + form: FormScope; fieldName: string; trackedState: FormStoreValue; validationBehavior?: ValidationBehaviorConfig; @@ -229,7 +229,7 @@ export type UseFieldOpts = { }; export function useField( - form: Rvf, + form: FormScope, { validationBehavior }?: UseFieldOpts, ): FieldApi; export function useField( @@ -237,7 +237,7 @@ export function useField( opts?: UseFieldOpts, ): FieldApi; export function useField( - formOrName: Rvf | string, + formOrName: FormScope | string, opts?: UseFieldOpts, ): FieldApi { const scope = useFormScopeOrContextInternal(formOrName); @@ -263,7 +263,7 @@ export function useField( } export type FieldPropsWithScope = { - scope: Rvf; + scope: FormScope; children: (field: FieldApi) => React.ReactNode; }; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index cae085a4..6ff409f9 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -14,12 +14,12 @@ export { type CreateValidatorArg, type FieldValues, type SubmitStatus, - type Rvf, + type FormScope, type StateSubmitHandler, type DomSubmitHandler, isValidationErrorResponse, } from "@rvf/core"; -export { type RvfReact, type FormFields } from "./base"; +export { type ReactFormApi, type FormFields } from "./base"; export { useForm, FormOpts } from "./useForm"; export { useField, diff --git a/packages/react/src/isolation.tsx b/packages/react/src/isolation.tsx index 4705f4ea..1d225361 100644 --- a/packages/react/src/isolation.tsx +++ b/packages/react/src/isolation.tsx @@ -1,13 +1,13 @@ import { ReactNode } from "react"; -import { Rvf } from "@rvf/core"; -import { RvfReact, useFormInternal } from "./base"; +import { FormScope } from "@rvf/core"; +import { ReactFormApi, useFormInternal } from "./base"; export const Isolate = ({ form, render, }: { - form: Rvf; - render: (form: RvfReact) => ReactNode; + form: FormScope; + render: (form: ReactFormApi) => ReactNode; }) => { const rvf = useFormInternal(form); return render(rvf); diff --git a/packages/react/src/test/field-array.test.tsx b/packages/react/src/test/field-array.test.tsx index 3ef4aeb8..d0849e4a 100644 --- a/packages/react/src/test/field-array.test.tsx +++ b/packages/react/src/test/field-array.test.tsx @@ -8,7 +8,7 @@ import { successValidator } from "./util/successValidator"; import { controlInput } from "./util/controlInput"; import { FieldArray, useFieldArray } from "../array"; import { FormProvider } from "../context"; -import { FieldErrors, Rvf, createValidator } from "@rvf/core"; +import { FieldErrors, FormScope, createValidator } from "@rvf/core"; import { ComponentProps, useState } from "react"; import { useFormScope } from "../useFormScope"; @@ -1048,7 +1048,7 @@ it("should validate on submit, then on change after that by default", async () = it("should support custom validation behavior", async () => { const submit = vi.fn(); - const FA = ({ scope }: { scope: Rvf }) => { + const FA = ({ scope }: { scope: FormScope }) => { const array = useFieldArray(scope, { validationBehavior: { initial: "onChange", diff --git a/packages/react/src/test/subforms.test.tsx b/packages/react/src/test/subforms.test.tsx index 7bd6e714..0c24cdf6 100644 --- a/packages/react/src/test/subforms.test.tsx +++ b/packages/react/src/test/subforms.test.tsx @@ -1,5 +1,5 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react"; -import { Rvf, createValidator } from "@rvf/core"; +import { FormScope, createValidator } from "@rvf/core"; import { useForm } from "../useForm"; import userEvent from "@testing-library/user-event"; import { successValidator } from "./util/successValidator"; @@ -8,7 +8,7 @@ import { useFormScope } from "../useFormScope"; it("should be able to create scoped subforms", async () => { const submit = vi.fn(); - const NameForm = ({ form }: { form: Rvf<{ name: string }> }) => { + const NameForm = ({ form }: { form: FormScope<{ name: string }> }) => { const iso = useFormScope(form); return ( @@ -36,7 +36,7 @@ it("should be able to create scoped subforms", async () => { }); const personForm = form.scope("person"); - expectTypeOf(personForm).toEqualTypeOf>(); + expectTypeOf(personForm).toEqualTypeOf>(); return ( @@ -65,7 +65,7 @@ it("should be able to create scoped subforms", async () => { it("should be able to create subforms of arrays", async () => { const submit = vi.fn(); - const NameForm = ({ form }: { form: Rvf<{ name: string }> }) => { + const NameForm = ({ form }: { form: FormScope<{ name: string }> }) => { const iso = useFormScope(form); return ( @@ -96,16 +96,16 @@ it("should be able to create subforms of arrays", async () => { }); expectTypeOf(form.scope("people[0]")).toEqualTypeOf< - Rvf<{ name: string }> + FormScope<{ name: string }> >(); expectTypeOf(form.scope(`people[${0 as number}]`)).toEqualTypeOf< - Rvf<{ name: string }> + FormScope<{ name: string }> >(); const peopleForm = useFormScope(form.scope("people")); expectTypeOf(peopleForm.scope(`${0 as number}`)).toEqualTypeOf< - Rvf<{ name: string }> + FormScope<{ name: string }> >(); return ( diff --git a/packages/react/src/test/validation.test.tsx b/packages/react/src/test/validation.test.tsx index 0cfde595..5f3623d1 100644 --- a/packages/react/src/test/validation.test.tsx +++ b/packages/react/src/test/validation.test.tsx @@ -2,7 +2,7 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import { useForm } from "../useForm"; import userEvent from "@testing-library/user-event"; import { RenderCounter } from "./util/RenderCounter"; -import { FieldErrors, Rvf, createValidator } from "@rvf/core"; +import { FieldErrors, FormScope, createValidator } from "@rvf/core"; import { useField } from "../field"; it("should validate on onBlur, then on change after that", async () => { @@ -297,7 +297,7 @@ it("should be posible to customize validation behavior at the field level", asyn const submit = vi.fn(); - const Input = ({ form }: { form: Rvf }) => { + const Input = ({ form }: { form: FormScope }) => { const field = useField(form, { validationBehavior: behaviorConfig }); return ; }; diff --git a/packages/react/src/useForm.tsx b/packages/react/src/useForm.tsx index cf6bf400..44bb7d56 100644 --- a/packages/react/src/useForm.tsx +++ b/packages/react/src/useForm.tsx @@ -3,13 +3,13 @@ import { FieldValues, ValidationBehaviorConfig, Validator, - Rvf, - createRvf, + FormScope, + createFormScope, registerFormElementEvents, StateSubmitHandler, DomSubmitHandler, } from "@rvf/core"; -import { RvfReact, useFormInternal } from "./base"; +import { ReactFormApi, useFormInternal } from "./base"; import { FieldErrors } from "@rvf/core"; const noOp = () => {}; @@ -101,11 +101,11 @@ export type FormOpts< resetAfterSubmit?: boolean; } & FormSubmitOpts; -const isRvf = (form: any): form is Rvf => +const isFormScope = (form: any): form is FormScope => "__brand__" in form && form.__brand__ === "rvf"; /** - * Create and use an `Rvf`. + * Create and use an `FormScope`. */ export function useForm< FormInputData extends FieldValues, @@ -113,7 +113,7 @@ export function useForm< SubmitResponseData, >( options: FormOpts, -): RvfReact { +): ReactFormApi { // everything from below const { validator, @@ -133,8 +133,8 @@ export function useForm< const defaultFormId = useId(); - const [form] = useState>(() => { - const rvf = createRvf({ + const [form] = useState>(() => { + const rvf = createFormScope({ defaultValues: options.defaultValues ?? {}, serverValidationErrors: serverValidationErrors ?? {}, validator, diff --git a/packages/react/src/useFormScope.tsx b/packages/react/src/useFormScope.tsx index cfca8b2c..df365861 100644 --- a/packages/react/src/useFormScope.tsx +++ b/packages/react/src/useFormScope.tsx @@ -1,11 +1,11 @@ -import { Rvf } from "@rvf/core"; -import { RvfReact, useFormInternal } from "./base"; +import { FormScope } from "@rvf/core"; +import { ReactFormApi, useFormInternal } from "./base"; /** - * Interprets an `Rvf` created via `form.scope`, for use in a subcomponent. + * Interprets an `FormScope` created via `form.scope`, for use in a subcomponent. */ export function useFormScope( - form: Rvf, -): RvfReact { + form: FormScope, +): ReactFormApi { return useFormInternal(form); } diff --git a/packages/remix/src/ValidatedForm.tsx b/packages/remix/src/ValidatedForm.tsx index 10db8361..17800921 100644 --- a/packages/remix/src/ValidatedForm.tsx +++ b/packages/remix/src/ValidatedForm.tsx @@ -1,6 +1,6 @@ import { AllProps, FieldValues } from "@rvf/core"; -import { RvfRemixOpts, useForm } from "./useForm"; -import { FormProvider, RvfReact } from "@rvf/react"; +import { FormScopeRemixOpts, useForm } from "./useForm"; +import { FormProvider, ReactFormApi } from "@rvf/react"; import { useRemixFormResponse } from "./auto-server-hooks"; type ScopeToSubaction< @@ -8,7 +8,10 @@ type ScopeToSubaction< Subaction extends string | undefined, > = Subaction extends undefined ? Data : Data & { subaction: Subaction }; -type RvfRemixSubmitOpts = +type FormScopeRemixSubmitOpts< + FormOutputData, + Subaction extends string | undefined, +> = | { submitSource: "state"; handleSubmit: ( @@ -29,7 +32,7 @@ export type ValidatedFormProps< FormResponseData, Subaction extends string | undefined, > = Omit< - RvfRemixOpts, + FormScopeRemixOpts, "submitSource" | "handleSubmit" | "serverValidationErrors" > & Omit, "children"> & { @@ -46,8 +49,8 @@ export type ValidatedFormProps< children: | React.ReactNode - | ((form: RvfReact) => React.ReactNode); - } & RvfRemixSubmitOpts; + | ((form: ReactFormApi) => React.ReactNode); + } & FormScopeRemixSubmitOpts; export const ValidatedForm = < FormInputData extends FieldValues, @@ -119,7 +122,7 @@ export const ValidatedForm = < otherFormProps, reloadDocument, } satisfies AllProps< - RvfRemixOpts + FormScopeRemixOpts >); return ( diff --git a/packages/remix/src/compatability/misc.ts b/packages/remix/src/compatability/misc.ts index bdf70b25..2e4d11a0 100644 --- a/packages/remix/src/compatability/misc.ts +++ b/packages/remix/src/compatability/misc.ts @@ -1,4 +1,4 @@ -import { Rvf, useFormScopeOrContext } from "@rvf/react"; +import { FormScope, useFormScopeOrContext } from "@rvf/react"; import { useCallback, useMemo } from "react"; /** @@ -6,29 +6,29 @@ import { useCallback, useMemo } from "react"; * This is different from Remix's `useNavigation()` in that it * is aware of what form it's in and when _that_ form is being submitted. * - * Can optionally accept an `Rvf` to grab the data from that instead. + * Can optionally accept an `FormScope` to grab the data from that instead. * * @deprecated Provided for backwards compatibility with `remix-validated-form`. * You can instead get this data directly off of the `useForm` hook. */ -export const useIsSubmitting = (rvf?: Rvf) => +export const useIsSubmitting = (rvf?: FormScope) => useFormScopeOrContext(rvf).formState.isSubmitting; /** * Returns whether or not the current form is valid. * - * Can optionally accept an `Rvf` to grab the data from that instead. + * Can optionally accept an `FormScope` to grab the data from that instead. * * @deprecated Provided for backwards compatibility with `remix-validated-form`. * You can instead get this data directly off of the `useForm` hook. */ -export const useIsValid = (rvf?: Rvf) => +export const useIsValid = (rvf?: FormScope) => useFormScopeOrContext(rvf).formState.isValid; /** * @deprecated Can get the value and set the value directly off of the `useForm` hook. */ -export const useControlField = (name: string, rvf?: Rvf) => { +export const useControlField = (name: string, rvf?: FormScope) => { const form = useFormScopeOrContext(rvf); const value: T = form.value(name); const setValue = useCallback( @@ -41,7 +41,7 @@ export const useControlField = (name: string, rvf?: Rvf) => { /** * @deprecated Can set the value directly off of the `useForm` hook. */ -export const useUpdateControlledField = (rvf?: Rvf) => { +export const useUpdateControlledField = (rvf?: FormScope) => { const form = useFormScopeOrContext(rvf); return useCallback( (name: string, value: any) => form.setValue(name, value), diff --git a/packages/remix/src/index.ts b/packages/remix/src/index.ts index 5324c01b..d6087fb4 100644 --- a/packages/remix/src/index.ts +++ b/packages/remix/src/index.ts @@ -13,14 +13,14 @@ export { type CreateValidatorArg, type FieldValues, type SubmitStatus, - type Rvf, + type FormScope, FieldArray, type FieldArrayPropsWithName, type FieldArrayPropsWithScope, Field, type FieldPropsWithName, type FieldPropsWithScope, - type RvfReact, + type ReactFormApi, type FormFields, useField, type FieldApi, @@ -35,7 +35,7 @@ export { isValidationErrorResponse, useFormScope, } from "@rvf/react"; -export { useForm, type RvfRemixOpts } from "./useForm"; +export { useForm, type FormScopeRemixOpts } from "./useForm"; export { ValidatedForm, type ValidatedFormProps } from "./ValidatedForm"; export { validationError, setFormDefaults, type FormDefaults } from "./server"; export { useRemixFormResponse } from "./auto-server-hooks"; diff --git a/packages/remix/src/useForm.tsx b/packages/remix/src/useForm.tsx index 0ddfb988..1a0b070d 100644 --- a/packages/remix/src/useForm.tsx +++ b/packages/remix/src/useForm.tsx @@ -1,9 +1,9 @@ import { useForm as useFormReact, FieldValues, - Rvf, + FormScope, FormOpts, - RvfReact, + ReactFormApi, } from "@rvf/react"; import { useRemixSubmit } from "./remix-submission-handling"; import { @@ -17,7 +17,7 @@ import { GenericObject, SubmitterOptions } from "@rvf/core"; type PartialProps = Omit & Partial>; -export type RvfRemixOpts< +export type FormScopeRemixOpts< FormInputData extends FieldValues, FormOutputData, FormResponseData, @@ -44,16 +44,16 @@ export type RvfRemixOpts< }; /** - * Create and use an `Rvf`. + * Create and use an `FormScope`. */ export function useForm< FormInputData extends FieldValues, FormOutputData, FormResponseData, >( - rvfOpts: RvfRemixOpts, -): RvfReact { - let rvf: RvfReact; + rvfOpts: FormScopeRemixOpts, +): ReactFormApi { + let rvf: ReactFormApi; const { fetcher,