From 00538bdc0d51af2707c127a71b9615f042fbc24e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C6=B0=C6=A1ng=20=C4=90=E1=BB=A9c=20Tr=E1=BB=8Dng?=
 <duongductrong06@gmail.com>
Date: Sat, 22 Jun 2024 01:36:09 +0700
Subject: [PATCH] refactor: add tests

---
 src/form-control.tsx                          |  5 +-
 src/form-description.tsx                      |  5 +-
 src/form-item.tsx                             | 23 ++---
 src/form-label.tsx                            | 34 +++----
 src/form-message.tsx                          |  5 +-
 src/form.tsx                                  | 94 +++++++++++++++++++
 src/hooks/use-scope.ts                        | 35 -------
 src/index.ts                                  |  3 +-
 .../__snapshots__/create-field.test.tsx.snap  | 54 +++++++++++
 tests/create-field.test.tsx                   | 62 ++++++++++++
 10 files changed, 253 insertions(+), 67 deletions(-)
 create mode 100644 src/form.tsx
 delete mode 100644 src/hooks/use-scope.ts
 create mode 100644 tests/__snapshots__/create-field.test.tsx.snap
 create mode 100644 tests/create-field.test.tsx

diff --git a/src/form-control.tsx b/src/form-control.tsx
index 1fb918f..6fefe44 100644
--- a/src/form-control.tsx
+++ b/src/form-control.tsx
@@ -4,9 +4,12 @@ import { Slot } from "@radix-ui/react-slot"
 import React, { forwardRef } from "react"
 import { useFormField } from "./hooks/use-form-field"
 
+export interface FormControlProps
+  extends React.ComponentPropsWithoutRef<typeof Slot> {}
+
 export const FormControl = forwardRef<
   React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
+  FormControlProps
 >(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
diff --git a/src/form-description.tsx b/src/form-description.tsx
index 4c395ca..42fd360 100644
--- a/src/form-description.tsx
+++ b/src/form-description.tsx
@@ -4,9 +4,12 @@ import { forwardRef, HTMLAttributes } from "react"
 import { useFormField } from "./hooks/use-form-field"
 import { cn } from "./utils"
 
+export interface FormDescriptionProps
+  extends HTMLAttributes<HTMLParagraphElement> {}
+
 export const FormDescription = forwardRef<
   HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
+  FormDescriptionProps
 >(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField()
 
diff --git a/src/form-item.tsx b/src/form-item.tsx
index dc8ca5c..57cbdd4 100644
--- a/src/form-item.tsx
+++ b/src/form-item.tsx
@@ -4,17 +4,18 @@ import { forwardRef, HTMLAttributes, useId, useMemo } from "react"
 import FormItemContext from "./context/form-item-context"
 import { cn } from "./utils"
 
-export const FormItem = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = useId()
+export interface FormItemProps extends HTMLAttributes<HTMLDivElement> {}
 
-  return (
-    <FormItemContext.Provider value={useMemo(() => ({ id }), [id])}>
-      <div ref={ref} className={cn("field-item", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
+export const FormItem = forwardRef<HTMLDivElement, FormItemProps>(
+  ({ className, ...props }, ref) => {
+    const id = useId()
+
+    return (
+      <FormItemContext.Provider value={useMemo(() => ({ id }), [id])}>
+        <div ref={ref} className={cn("field-item", className)} {...props} />
+      </FormItemContext.Provider>
+    )
+  }
+)
 
 FormItem.displayName = "FormItem"
diff --git a/src/form-label.tsx b/src/form-label.tsx
index a687533..f776a1e 100644
--- a/src/form-label.tsx
+++ b/src/form-label.tsx
@@ -4,22 +4,24 @@ import React, { forwardRef } from "react"
 import { useFormField } from "./hooks/use-form-field"
 import { cn } from "./utils"
 
-export const FormLabel = forwardRef<
-  React.ElementRef<"label">,
-  React.ComponentPropsWithoutRef<"label">
->(({ className, ...props }, ref) => {
-  const { error, formItemId, name } = useFormField()
+export interface FormLabelProps
+  extends React.ComponentPropsWithoutRef<"label"> {}
 
-  return (
-    <label
-      ref={ref}
-      className={cn("field-label", className)}
-      data-name={name}
-      data-state={error ? "error" : "idle"}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
+export const FormLabel = forwardRef<React.ElementRef<"label">, FormLabelProps>(
+  ({ className, ...props }, ref) => {
+    const { error, formItemId, name } = useFormField()
+
+    return (
+      <label
+        ref={ref}
+        className={cn("field-label", className)}
+        data-name={name}
+        data-state={error ? "error" : "idle"}
+        htmlFor={formItemId}
+        {...props}
+      />
+    )
+  }
+)
 
 FormLabel.displayName = "FormLabel"
diff --git a/src/form-message.tsx b/src/form-message.tsx
index abd6a93..698f898 100644
--- a/src/form-message.tsx
+++ b/src/form-message.tsx
@@ -4,9 +4,12 @@ import React from "react"
 import { cn } from "./utils"
 import { useFormField } from "./hooks/use-form-field"
 
+export interface FormMessageProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
+
 export const FormMessage = React.forwardRef<
   HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  FormMessageProps
 >(({ className, children, ...props }, ref) => {
   const { name, error, formMessageId } = useFormField()
   const body = error ? String(error?.message) : children
diff --git a/src/form.tsx b/src/form.tsx
new file mode 100644
index 0000000..d4dbfa5
--- /dev/null
+++ b/src/form.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  RefObject,
+  useImperativeHandle,
+  useRef,
+} from "react"
+import {
+  FieldValues,
+  FormProvider as FormPrimitiveProvider,
+  UseFormProps,
+  UseFormReturn,
+  useForm,
+} from "react-hook-form"
+
+export interface FormProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TTransformedValues extends FieldValues | undefined = undefined,
+> extends Omit<ComponentPropsWithoutRef<"form">, "onSubmit">,
+    UseFormProps<TFieldValues, TContext> {
+  ref?: RefObject<HTMLFormElement>
+  formRef?: RefObject<UseFormReturn<TFieldValues, TContext, TTransformedValues>>
+  children: ReactNode
+  onSubmit?: (data: TFieldValues) => void
+}
+
+export const Form = <
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TTransformedValues extends FieldValues | undefined = undefined,
+>({
+  children,
+  mode,
+  disabled,
+  reValidateMode,
+  defaultValues,
+  values,
+  errors,
+  resetOptions,
+  context,
+  shouldFocusError,
+  shouldUnregister,
+  shouldUseNativeValidation,
+  progressive,
+  criteriaMode,
+  delayError,
+  formRef,
+  ref,
+  resolver,
+  onSubmit,
+  ...props
+}: FormProps<TFieldValues, TContext, TTransformedValues>) => {
+  const methods = useForm<TFieldValues, TContext, TTransformedValues>({
+    resolver,
+    mode,
+    disabled,
+    reValidateMode,
+    defaultValues,
+    values,
+    errors,
+    resetOptions,
+    context,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    progressive,
+    criteriaMode,
+    delayError,
+  })
+
+  const innerFormElementRef = useRef<HTMLFormElement>(null)
+
+  useImperativeHandle(formRef, () => methods as any, [methods])
+  useImperativeHandle(ref, () => innerFormElementRef.current as any, [
+    innerFormElementRef.current,
+  ])
+
+  return (
+    <FormPrimitiveProvider {...methods}>
+      <form
+        {...props}
+        onSubmit={onSubmit ? methods.handleSubmit(onSubmit as any) : undefined}
+        ref={innerFormElementRef}
+      >
+        {children}
+      </form>
+    </FormPrimitiveProvider>
+  )
+}
+
+Form.displayName = "Form"
diff --git a/src/hooks/use-scope.ts b/src/hooks/use-scope.ts
deleted file mode 100644
index 1c6332c..0000000
--- a/src/hooks/use-scope.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useCallback, useSyncExternalStore } from "react"
-
-export const createScope = <TState>(initialState: TState) => {
-  let state: TState = initialState
-  const listeners = new Set<any>([])
-
-  const getState = (): TState => state
-
-  const setState = (fn: (state: TState) => TState) => {
-    state = fn(state)
-    listeners.forEach((listener) => listener?.())
-  }
-
-  const subscribe = (fn: any) => {
-    listeners.add(fn)
-
-    return () => {
-      listeners.delete(fn)
-    }
-  }
-
-  return {
-    getState,
-    setState,
-    subscribe,
-  }
-}
-
-export const useScope = <TState, TResult>(
-  scope: ReturnType<typeof createScope<TState>>,
-  selector: (state: TState) => TResult
-) => {
-  const selectorFn = useCallback(() => selector(scope.getState()), [])
-  return useSyncExternalStore(scope.subscribe, selectorFn, selectorFn)
-}
diff --git a/src/index.ts b/src/index.ts
index cb1f4ed..6b95d9a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,3 @@
-// export * from "./context/form-context"
-
 export * from "./field"
 export * from "./form-control"
 export * from "./form-description"
@@ -9,3 +7,4 @@ export * from "./form-label"
 export * from "./form-message"
 export * from "./hooks/use-form-field"
 export * from "./utils"
+export * from "./form"
diff --git a/tests/__snapshots__/create-field.test.tsx.snap b/tests/__snapshots__/create-field.test.tsx.snap
new file mode 100644
index 0000000..aacdbfe
--- /dev/null
+++ b/tests/__snapshots__/create-field.test.tsx.snap
@@ -0,0 +1,54 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders correctly 1`] = `
+<form>
+  <div
+    className="field-item"
+  >
+    <label
+      className="field-label"
+      data-name="a"
+      data-state="idle"
+      htmlFor=":r0:-form-item"
+    >
+      Input
+    </label>
+    <input
+      type="text"
+    />
+  </div>
+  <div
+    className="field-item"
+  >
+    <input
+      type="number"
+    />
+  </div>
+  <div
+    className="field-item"
+  >
+    <label
+      className="field-label"
+      data-name="c"
+      data-state="idle"
+      htmlFor=":r2:-form-item"
+    >
+      File
+    </label>
+    <input
+      type="file"
+    />
+  </div>
+  <div
+    className="field-item"
+  >
+    <select>
+      <option
+        value="test"
+      >
+        Test
+      </option>
+    </select>
+  </div>
+</form>
+`;
diff --git a/tests/create-field.test.tsx b/tests/create-field.test.tsx
new file mode 100644
index 0000000..39466aa
--- /dev/null
+++ b/tests/create-field.test.tsx
@@ -0,0 +1,62 @@
+import React from "react"
+import renderer from "react-test-renderer"
+import { expect, it } from "vitest"
+import { FormLabel } from "../src/form-label"
+import { Form, FormField, createField } from "../src"
+
+interface InputProps {}
+
+interface NumberProps {}
+
+interface FileProps {}
+
+interface SelectProps {
+  options: any[]
+}
+
+const Field = createField({
+  text: (props: InputProps) => <input type="text" />,
+  number: (props: NumberProps) => <input type="number" />,
+  file: (props: FileProps) => <input type="file" />,
+  select: (props: SelectProps) => (
+    <select>
+      <option value="test">Test</option>
+    </select>
+  ),
+})
+
+const MyForm = () => {
+  return (
+    <Form>
+      <Field label="Input" component="text" name="a" />
+      <Field component="number" name="b" />
+      <Field label="File" component="file" name="c" />
+      <Field component="select" name="d" options={[]} />
+    </Form>
+  )
+}
+
+it("renders correctly", () => {
+  const form = renderer.create(<MyForm />)
+  const formInstance = form.root
+
+  expect(formInstance).toBeDefined()
+
+  expect(
+    formInstance.findByProps({ component: "text", name: "a" })
+  ).toBeDefined()
+
+  expect(
+    formInstance.findByProps({ component: "number", name: "b" })
+  ).toBeDefined()
+
+  expect(
+    formInstance.findByProps({ component: "file", name: "c" })
+  ).toBeDefined()
+
+  expect(
+    formInstance.findByProps({ component: "select", name: "d" })
+  ).toBeDefined()
+
+  expect(form.toJSON()).toMatchSnapshot()
+})