refactor: create the @louffee/hook-form internal module

Author: mrlemoos

packages/hook-form/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@louffee/hook-form",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    "./field-controller": "./src/field-controller.tsx",
+    "./form-controller": "./src/form-controller.tsx",
+    "./use-form": "./src/use-form.ts"
+  },
+  "homepage": "https://github.com/louffee/louffee.co/tree/main/packages/hook-form",
+  "peerDependencies": {
+    "@hookform/resolvers": "^3",
+    "react": "^18",
+    "react-hook-form": "^7",
+    "zod": "^3.22.4"
+  }
+}

packages/hook-form/src/field-controller.tsx

@@ -0,0 +1,90 @@
+import type { JSX, ReactElement } from 'react'
+
+import {
+  Controller as HookForm$Controller,
+  type FieldValues,
+  type ControllerFieldState as HookForm$ControllerFieldState,
+  type ControllerProps as HookForm$ControllerProps,
+  type ControllerRenderProps as HookForm$ControllerRenderProps,
+  type FieldPath as HookForm$FieldPath,
+  type UseFormStateReturn as HookForm$UseFormStateReturn,
+} from 'react-hook-form'
+
+export interface FieldRenderFnProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends HookForm$FieldPath<TFieldValues> = HookForm$FieldPath<TFieldValues>,
+> {
+  /**
+   * The object which contains the field props. This object contains the
+   * properties, *e.g.*, which are injected into the input element to control
+   * the field, *e.g.*, the field `value`, `onChange`, `onBlur`, and `ref`.
+   *
+   * @see https://react-hook-form.com/docs/usecontroller
+   */
+  field: HookForm$ControllerRenderProps<TFieldValues, TName>
+  /**
+   * The object which contains the field state. This object contains the
+   * properties such, *e.g.*, the field is touched, dirty, or invalid.
+   *
+   * @see {@link HookForm$ControllerFieldState}
+   */
+  fieldState: HookForm$ControllerFieldState
+  /**
+   * The object which contains the form state. This object contains the
+   * properties, *e.g.*, the form is submitting, submitting, or dirty.
+   *
+   * @see {@link HookForm$UseFormStateReturn}
+   */
+  formState: HookForm$UseFormStateReturn<TFieldValues>
+}
+
+/**
+ * The type which defines the parameters and return type of the render function
+ * passed down to the `FieldController` component.
+ */
+export type FieldRenderFn<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends HookForm$FieldPath<TFieldValues> = HookForm$FieldPath<TFieldValues>,
+> = (props: FieldRenderFnProps<TFieldValues, TName>) => ReactElement
+
+/**
+ * @internal The type which defines the props for the `FieldController`
+ *           component. This type is used to pick the props from the
+ *           `FieldController` component and pass them down to the `Controller`.
+ */
+type PickedFieldControllerProps = Omit<HookForm$ControllerProps, 'render'>
+
+/**
+ * The interface which defines the props for the `FieldController` component.
+ */
+export interface FieldControllerProps extends PickedFieldControllerProps {
+  /**
+   * The `children` prop is defined as a render function which will be passed
+   * down to the `FieldController`  component. This function will be called with
+   * the `FieldController` props.
+   *
+   * @see {@link FieldRenderFn}
+   */
+  children: FieldRenderFn
+}
+
+/**
+ * The `FieldController` is a component which wraps the `Controller` component
+ * from the `react-hook-form` library, connecting the field to the form state.
+ *
+ * @example
+ * ```tsx
+ * <FieldController name="email" control={control} rules={{ required: true }}>
+ *   {({ field, fieldState, formState }) => (
+ *    <input type="email" {...field} />
+ *   })}
+ * </FieldController>
+ * ```
+ *
+ * @props {@link FieldControllerProps}
+ */
+function FieldController({ children, ...props }: FieldControllerProps): JSX.Element {
+  return <HookForm$Controller {...props} render={children} />
+}
+
+export default FieldController

packages/hook-form/src/form-controller.tsx

@@ -0,0 +1,47 @@
+import type { JSX, ReactNode } from 'react'
+
+import { FormProvider, type FieldValues } from 'react-hook-form'
+
+import useForm, { type UseFormProps } from './use-form'
+
+/**
+ * The interface which defines the props for the `FormController` component.
+ *
+ * @see https://react-hook-form.com
+ */
+export interface FormControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = // biome-ignore lint/suspicious/noExplicitAny:
+  any,
+> extends UseFormProps<TFieldValues, TContext> {
+  /**
+   * The children passed down to the `FormController` component and to which the
+   * form context will be available.
+   *
+   * @see {@link ReactNode}
+   */
+  children: ReactNode | ReactNode[]
+}
+
+/**
+ * The `FormController` component is a client-side controller which initialises
+ * the `useForm()` hook and provides the form context to its children.
+ *
+ * This component also handles the form default behaviours and settings via the
+ * [Hook Form](https://react-hook-form.com).
+ *
+ * @props {@link FormControllerProps}
+ *
+ * @see https://react-hook-form.com
+ */
+function FormController<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = // biome-ignore lint/suspicious/noExplicitAny:
+  any,
+>({ children, ...props }: FormControllerProps<TFieldValues, TContext>): JSX.Element {
+  const control = useForm<TFieldValues>(props)
+
+  return <FormProvider {...control}>{children}</FormProvider>
+}
+
+export default FormController

packages/hook-form/src/use-form-state.ts

@@ -0,0 +1,24 @@
+import { useFormState as useFormState$HookForm, type FieldValues, type FormState } from 'react-hook-form'
+
+/**
+ * The type which defines the return value of the `useFormState()` hook as a
+ * tuple containing the form state and the form handlers.
+ */
+export type UseFormStateReturnType<TFieldValues extends FieldValues = FieldValues> = FormState<TFieldValues>
+
+/**
+ * The `useFormState()` is a custom React hook which returns the form state and
+ * the form handlers from [React Hook Form](https://react-hook-form.com).
+ *
+ * Note that to use this hook, the host component must be wrapped in a
+ * `FormController` component.
+ *
+ * @see {@link UseFormStateReturnType}
+ */
+function useFormState<TFieldValues extends FieldValues = FieldValues>(): UseFormStateReturnType<TFieldValues> {
+  const formState = useFormState$HookForm<TFieldValues>()
+
+  return formState
+}
+
+export default useFormState

packages/hook-form/src/use-form.ts

@@ -0,0 +1,72 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  useForm as useForm$ReactHookForm,
+  type FieldValues,
+  type UseFormProps as HookForm$UseFormProps,
+  type UseFormReturn as HookForm$UseFormReturn,
+} from 'react-hook-form'
+import type { Schema } from 'zod'
+
+/**
+ * The interface which defines and maps the props of the `useForm()` hook. It
+ * utilises the `UseFormProps` interface from the `react-hook-form` package.
+ *
+ * @see https://react-hook-form.com
+ */
+export interface UseFormProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = // biome-ignore lint/suspicious/noExplicitAny:
+  any,
+> extends HookForm$UseFormProps<TFieldValues, TContext> {
+  /**
+   * The schema which defines the shape of the form values with Zod.
+   *
+   * @see https://nehalist.io/react-hook-form-with-nextjs-server-actions
+   */
+  schema?: Schema<TFieldValues>
+}
+
+/**
+ * The interface for the return value of the `useForm()` hook. It is the same as
+ * the return value of the `useForm()` hook from `react-hook-form`.
+ *
+ * The `TFieldValues` generic is the shape of the form values.
+ *
+ * @see https://react-hook-form.com
+ */
+export interface UseFormReturnType<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = // biome-ignore lint/suspicious/noExplicitAny:
+  any,
+> extends HookForm$UseFormReturn<TFieldValues, TContext> {}
+
+/**
+ * The `useForm()` is a custom React hook which defines the behaviour of a form
+ * shaped by the given Zod {@link UseFormProps.schema | schema}.
+ *
+ * @example
+ * ```ts
+ * const schema = z.object({
+ *   email: z.string().email(),
+ * });
+ *
+ * const { register, handleSubmit, formState: { errors } } = useForm({
+ *   schema,
+ * });
+ * ```
+ */
+function useForm<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = // biome-ignore lint/suspicious/noExplicitAny:
+  any,
+>({ schema, mode = 'all', ...props }: UseFormProps<TFieldValues, TContext>): UseFormReturnType<TFieldValues, TContext> {
+  const hook = useForm$ReactHookForm({
+    resolver: schema ? zodResolver(schema) : undefined,
+    mode,
+    ...props,
+  })
+
+  return hook
+}
+
+export default useForm

packages/hook-form/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@louffee/tsconfig/tsconfig.react-library.json"
+}