fix(useCheckboxFieldProps): extend to support BooleanField as input

fixes #33

src/fields/boolean-field/booleanField.stories.tsx

@@ -1,6 +1,7 @@
 import { booleanField } from "./booleanField";
 import { RadioGroupField } from "../../components/radio-group/RadioGroupField";
 import { formStory, meta } from "../../scenarios/StoryForm";
+import { CheckboxInput } from "../checkbox-field/CheckboxInput.mock";
 
 export default {
   ...meta,
@@ -72,3 +73,25 @@ export const Optional = formStory({
     },
   },
 });
+
+export const OptionalCheckbox = formStory({
+  args: {
+    fields: {
+      approved: booleanField().optional(),
+    },
+    children: ({ fields }) => (
+      <CheckboxInput
+        field={fields.approved}
+        label="I preffer the digital form to the paper one"
+      />
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Optional _booleanField_ can be submitted with the initial `undefined` value which indicates that the user didn't care to interact with the field.",
+      },
+    },
+  },
+});

src/fields/checkbox-field/CheckboxInput.mock.tsx

@@ -4,13 +4,14 @@ import { CheckboxField } from "./checkboxField";
 import { FieldLabel } from "../../components";
 import { FieldErrors } from "../../components/field-errors";
 import { useCheckboxFieldProps, useRequiredProps } from "../../hooks";
+import { BooleanField } from "../boolean-field";
 
 export const CheckboxInput = ({
   field,
   label,
   required,
 }: {
-  field: CheckboxField;
+  field: BooleanField | CheckboxField;
   label: ReactNode;
   required?: boolean;
 }) => {

src/hooks/use-checkbox-field-props/useCheckboxFieldProps.test.tsx

@@ -0,0 +1,38 @@
+import { render, renderHook, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { describe, expect, test } from "vitest";
+
+import { useCheckboxFieldProps } from "./useCheckboxFieldProps";
+import { booleanField, checkboxField } from "../../fields";
+
+describe("useCheckboxFieldProps()", () => {
+  describe("with booleanField()", () => {
+    test("initial value prop is false", () => {
+      const field = booleanField();
+
+      const checkboxProps = renderHook(() => useCheckboxFieldProps(field));
+
+      expect(checkboxProps.result.current.checked).toBe(false);
+    });
+  });
+
+  test("it reads the checked event property", async () => {
+    const field = checkboxField();
+
+    const checkboxProps = renderHook(() => useCheckboxFieldProps(field));
+
+    render(
+      <input
+        type="checkbox"
+        data-testid="input-checkbox"
+        {...checkboxProps.result.current}
+      />,
+    );
+
+    expect(checkboxProps.result.current.checked).toBe(false);
+
+    await userEvent.click(screen.getByTestId("input-checkbox"));
+
+    expect(checkboxProps.result.current.checked).toBe(true);
+  });
+});

src/hooks/use-checkbox-field-props/useCheckboxFieldProps.ts

@@ -1,15 +1,18 @@
 import { ChangeEvent, useMemo } from "react";
 
 import { FieldProps, useFieldProps } from "../";
-import { type CheckboxField } from "../../fields";
+import { BooleanField, type CheckboxField } from "../../fields";
 
-export type CheckboxFieldProps = FieldProps<CheckboxField>;
+export type CheckboxFieldProps = FieldProps<CheckboxField | BooleanField>;
 
 const getChecked = (event: ChangeEvent<HTMLInputElement>) =>
   event.target.checked;
 
-export function useCheckboxFieldProps(field: CheckboxField) {
-  const { value: checked, ...props } = useFieldProps(field, getChecked);
+export function useCheckboxFieldProps(field: CheckboxField | BooleanField) {
+  // undefined (empty checkbox) is rendered as unchecked input
+  const { value: checked = false, ...props } = useFieldProps<
+    CheckboxField | BooleanField
+  >(field, getChecked);
 
   return useMemo(
     () => ({