feat: deprecate displayError() (#218)

* feat: deprecate display error

* chore: changeset

Author: logaretm

.changeset/young-taxis-press.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': minor
+---
+
+feat: deprecate displayError

packages/core/src/useCheckbox/useCheckbox.ts

@@ -340,7 +340,6 @@ function createGroupField<TValue = unknown>(group: CheckboxGroupContext<TValue>,
     ...group.field,
     errors: computed(() => []),
     errorMessage: computed(() => ''),
-    displayError: () => undefined,
     setValue,
   };
 }

packages/core/src/useForm/useForm.spec.ts

@@ -1422,17 +1422,6 @@ describe('form validation', () => {
     expect(getError('test')).toBeUndefined();
   });
 
-  test('displays errors if the field is touched', async () => {
-    const { setTouched, displayError, setErrors } = await renderSetup(() => {
-      return useForm();
-    });
-
-    setErrors('test', 'error');
-    expect(displayError('test')).toBeUndefined();
-    setTouched('test', true);
-    expect(displayError('test')).toBe('error');
-  });
-
   test('when looking up errors for a path, search for prefix matches when direct path is not found', async () => {
     const { ...form } = useForm({
       initialValues: {

packages/core/src/useForm/useForm.ts

@@ -154,12 +154,6 @@ export interface FormReturns<TInput extends FormObject = FormObject, TOutput ext
    */
   getErrors: (path?: Path<TInput>) => string[];
 
-  /**
-   * Displays the errors for a form field.
-   * @param path - The path to display the errors for.
-   */
-  displayError(path: Path<TInput>): string | undefined;
-
   /**
    * Get the issues for a form field.
    */
@@ -318,10 +312,6 @@ export function useForm<
     return ctx.isPathDisabled(path) ? undefined : ctx.getFieldSubmitErrors(path)[0];
   }
 
-  function displayError(path: Path<TResolvedInput>) {
-    return ctx.isTouched(path) && !ctx.isPathDisabled(path) ? getError(path) : undefined;
-  }
-
   provide(FormKey, {
     ...ctx,
     ...transactionsManager,
@@ -370,7 +360,6 @@ export function useForm<
     setErrors: ctx.setErrors,
     setValues: ctx.setValues,
     getError,
-    displayError,
     getErrors: ctx.getErrors,
     getIssues: ctx.getIssues,
     getSubmitError,

packages/core/src/useFormField/useErrorDisplay.spec.ts

@@ -12,7 +12,6 @@ import {
   isLowPriority,
 } from '../utils/common';
 import { FormGroupKey } from '../useFormGroup';
-import { useErrorDisplay } from './useErrorDisplay';
 import { usePathPrefixer } from '../helpers/usePathPrefixer';
 import { createDisabledContext } from '../helpers/createDisabledContext';
 
@@ -44,7 +43,6 @@ export type FormField<TValue> = {
   setValue: (value: TValue | undefined) => void;
   setTouched: (touched: boolean) => void;
   setErrors: (messages: Arrayable<string>) => void;
-  displayError: () => string | undefined;
   form?: FormContext | null;
 };
 
@@ -64,8 +62,6 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
   const { errors, setErrors, isValid, errorMessage, pathlessValidity, submitErrors, submitErrorMessage } =
     useFieldValidity(getPath, isDisabled, form);
 
-  const { displayError } = useErrorDisplay(errorMessage, isTouched);
-
   const isDirty = computed(() => {
     if (!form) {
       return !isEqual(fieldValue.value, initialValue);
@@ -139,7 +135,6 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     setValue,
     setTouched,
     setErrors,
-    displayError,
     submitErrors,
     submitErrorMessage,
   };
@@ -410,11 +405,6 @@ function createLocalValidity() {
 }
 
 export type ExposedField<TValue> = {
-  /**
-   * Display the error message for the field.
-   */
-  displayError: () => string | undefined;
-
   /**
    * The error message for the field.
    */
@@ -484,7 +474,6 @@ export function exposeField<TReturns extends object, TValue>(
   field: FormField<TValue>,
 ): ExposedField<TValue> & TReturns {
   const exposedField = {
-    displayError: field.displayError,
     errorMessage: field.errorMessage,
     errors: field.errors,
     submitErrors: field.submitErrors,

packages/core/src/useFormField/useErrorDisplay.ts

@@ -148,13 +148,6 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
     return form?.getErrors(prefixPath(path) ?? '')?.[0];
   }
 
-  function displayError(name: string) {
-    const msg = getError(name);
-    const path = prefixPath(name) ?? '';
-
-    return form?.isTouched(path) ? msg : undefined;
-  }
-
   function prefixPath(path: string | undefined) {
     return _prefixPath(getPath(), path);
   }
@@ -216,10 +209,7 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
      * Whether the form group is disabled.
      */
     isDisabled,
-    /**
-     * Displays an error for a given field.
-     */
-    displayError,
+
     /**
      * Validates the form group.
      */

packages/core/src/useFormField/useFormField.ts

@@ -55,10 +55,10 @@ function createSelect() {
         listBoxProps,
         errorMessageProps,
         descriptionProps,
-        displayError,
         fieldValue,
         selectedOptions,
         selectedOption,
+        errorMessage,
       } = useSelect(all);
 
       exposedSelectedOptions = selectedOptions;
@@ -77,12 +77,12 @@ function createSelect() {
         listBoxProps,
         errorMessageProps,
         descriptionProps,
-        displayError,
         getValue,
         groups,
         options,
         selectedOptions,
         selectedOption,
+        errorMessage,
       };
     },
     template: `
@@ -128,7 +128,7 @@ function createSelect() {
           </div>
 
           <span v-bind="errorMessageProps">
-            {{ displayError() }}
+            {{ errorMessage }}
           </span>
         </div>
     `,

packages/core/src/useFormGroup/useFormGroup.ts

@@ -7,7 +7,7 @@
     {{ { isDirty, isTouched } }}
 
     <div class="flex flex-col gap-2 p-8">
-      <slot :display-error="displayError" :get-error="getError" :isTouched="isTouched" />
+      <slot :get-error="getError" :isTouched="isTouched" />
     </div>
   </div>
 </template>
@@ -17,5 +17,5 @@ import { FormGroupProps, useFormGroup } from '@formwerk/core';
 
 const props = defineProps<FormGroupProps>();
 
-const { labelProps, groupProps, getError, displayError, isDirty, isTouched } = useFormGroup(props);
+const { labelProps, groupProps, getError, isDirty, isTouched } = useFormGroup(props);
 </script>