feat(hooks): add an useForm hook

* add two "sub"-hooks: useFormValues and useFormSubmit (that
can be used independently)
* handle initial data
* handle custom submit callback
* handle data validation
* handle submit status

1 files changed, 69 insertions, 0 deletions

diff --git a/src/utils/hooks/use-form/use-form-values/use-form-values.test.ts b/src/utils/hooks/use-form/use-form-values/use-form-values.test.ts
new file mode 100644
index 0000000..f86d910
--- /dev/null
+++ b/src/utils/hooks/use-form/use-form-values/use-form-values.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from '@jest/globals';
+import { act, renderHook } from '@testing-library/react';
+import type { ChangeEvent } from 'react';
+import { useFormValues } from './use-form-values';
+
+/**
+ * Generate a new change event.
+ *
+ * @param {string} name - The field name.
+ * @param {unknown} value - The new value of the field.
+ * @returns {ChangeEvent<HTMLInputElement>} The event.
+ */
+const generateChangeEvent = (name: string, value: unknown, type = 'text') => {
+  const ev = new Event('change');
+  Object.defineProperty(ev, 'target', {
+    value: {
+      checked: type === 'checkbox' || type === 'radio' ? value : undefined,
+      name,
+      type,
+      value: type === 'checkbox' || type === 'radio' ? undefined : value,
+    },
+    writable: false,
+  });
+
+  return ev as unknown as ChangeEvent<HTMLInputElement>;
+};
+
+describe('useFormValues', () => {
+  const initialValues = {
+    foo: 'hello',
+    bar: false,
+  };
+  const newValues = {
+    foo: 'world',
+    bar: true,
+  };
+
+  it('can initialize the values', () => {
+    const { result } = renderHook(() => useFormValues(initialValues));
+
+    expect(result.current.values.bar).toBe(initialValues.bar);
+    expect(result.current.values.foo).toBe(initialValues.foo);
+  });
+
+  it('can update and reset the values', () => {
+    const { result } = renderHook(() => useFormValues(initialValues));
+
+    act(() => {
+      result.current.update(
+        generateChangeEvent('bar', newValues.bar, 'checkbox')
+      );
+    });
+
+    expect(result.current.values.bar).toBe(newValues.bar);
+
+    act(() => {
+      result.current.update(generateChangeEvent('foo', newValues.foo));
+    });
+
+    expect(result.current.values.foo).toBe(newValues.foo);
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.values.bar).toBe(initialValues.bar);
+    expect(result.current.values.foo).toBe(initialValues.foo);
+  });
+});