fix: checkbox group

package.json

@@ -78,7 +78,7 @@
     "zod": "^3.20.6"
   },
   "dependencies": {
-    "@form-atoms/field": "2.4.2",
+    "@form-atoms/field": "2.5.0",
     "flowbite": "1.6.3",
     "flowbite-react": "0.3.8",
     "form-atoms": "3.0.0",

src/checkbox-group-field/CheckboxGroupField.stories.tsx

@@ -1,15 +1,14 @@
-import { multiSelectField } from "@form-atoms/field";
-
 import { CheckboxGroupField } from "./CheckboxGroupField";
 import { getLabel, getValue, options } from "./languages";
 import { FormStory, meta, optionalField } from "../stories";
+import { stringArrayField } from "@form-atoms/field";
 
 export default {
   title: "CheckboxGroupField",
   ...meta,
 };
 
-const proficientLanguages = multiSelectField();
+const proficientLanguages = stringArrayField();
 
 export const Required: FormStory = {
   args: {
@@ -27,7 +26,7 @@ export const Required: FormStory = {
   },
 };
 
-const optionalLanguages = multiSelectField({ optional: true });
+const optionalLanguages = stringArrayField({ optional: true });
 
 export const Optional: FormStory = {
   ...optionalField,

src/checkbox-group-field/CheckboxGroupField.test.tsx

@@ -1,4 +1,3 @@
-import { multiSelectField } from "@form-atoms/field";
 import { render, screen } from "@testing-library/react";
 import { act as domAct, renderHook } from "@testing-library/react-hooks/dom";
 import userEvent from "@testing-library/user-event";
@@ -8,6 +7,7 @@ import { describe, expect, it } from "vitest";
 import { getLabel, getValue, options } from "./languages";
 
 import { CheckboxGroupField } from ".";
+import { stringArrayField } from "@form-atoms/field";
 
 describe("<CheckboxGroupField />", () => {
   const props = {
@@ -18,7 +18,7 @@ describe("<CheckboxGroupField />", () => {
   };
 
   it("should focus first checkbox when clicked on first label", async () => {
-    const field = multiSelectField();
+    const field = stringArrayField();
 
     render(<CheckboxGroupField field={field} {...props} />);
 
@@ -30,7 +30,7 @@ describe("<CheckboxGroupField />", () => {
   });
 
   it("should render error message when submitting empty & required", async () => {
-    const field = multiSelectField();
+    const field = stringArrayField();
     const form = formAtom({ field });
     const { result } = renderHook(() => useFormSubmit(form));
 
@@ -48,9 +48,9 @@ describe("<CheckboxGroupField />", () => {
     expect(onSubmit).not.toBeCalled();
   });
 
-  describe("with optional multiSelectField()", () => {
+  describe("with optional stringArrayField()", () => {
     it("submits form with empty array value", async () => {
-      const value = multiSelectField({ optional: true });
+      const value = stringArrayField({ optional: true });
       const form = formAtom({ value });
       const { result } = renderHook(() => useFormSubmit(form));
 

src/checkbox-group-field/CheckboxGroupField.tsx

@@ -1,29 +1,28 @@
 import {
-  MultiSelectFieldProps,
-  useMultiSelectFieldProps,
-  useMultiSelectOptions,
+  FieldProps,
+  useCheckboxGroup,
+  UseCheckboxGroupProps,
+  ZodArrayField,
 } from "@form-atoms/field";
 import { Checkbox, HelperText, Label } from "flowbite-react";
 
 import { FlowbiteField } from "../field";
 
-export const CheckboxGroupField = <Option,>({
+export const CheckboxGroupField = <Option, Field extends ZodArrayField>({
   field,
   options,
   getValue,
   getLabel,
   label,
   required,
-  placeholder,
   helperText,
   ...uiProps
-}: MultiSelectFieldProps<Option>) => {
-  const props = useMultiSelectFieldProps(field);
-  const { renderOptions } = useMultiSelectOptions(field, {
+}: UseCheckboxGroupProps<Option, Field> & FieldProps<Field>) => {
+  const checkboxGroup = useCheckboxGroup({
+    field,
+    options,
     getValue,
     getLabel,
-    options,
-    placeholder,
   });
 
   return (
@@ -34,25 +33,17 @@ export const CheckboxGroupField = <Option,>({
       label={label}
     >
       {({ color, helperText, required: isInputRequired, ...fieldProps }) => {
-        // maybe move into multiSelectOptions?
-        const required = props.value.length === 0 ? isInputRequired : false;
-
         return (
           <>
-            {renderOptions.map(({ value, label, isActive }) => (
-              <div key={value} className="flex gap-2">
+            {checkboxGroup.map((checkboxProps) => (
+              <div key={checkboxProps.id} className="flex gap-2">
                 <Checkbox
                   role="checkbox"
-                  {...props}
                   {...uiProps}
                   {...fieldProps}
-                  required={required}
-                  aria-required={required}
-                  id={value}
-                  checked={isActive}
-                  value={value}
+                  {...checkboxProps}
                 />
-                <Label htmlFor={value}>{label}</Label>
+                <Label htmlFor={checkboxProps.id}>{checkboxProps.label}</Label>
               </div>
             ))}
             {helperText && <HelperText color={color}>{helperText}</HelperText>}

yarn.lock

@@ -1821,9 +1821,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@form-atoms/field@npm:2.4.2":
-  version: 2.4.2
-  resolution: "@form-atoms/field@npm:2.4.2"
+"@form-atoms/field@npm:2.5.0":
+  version: 2.5.0
+  resolution: "@form-atoms/field@npm:2.5.0"
   dependencies:
     object-path-immutable: ^4.1.2
     react-render-prop-type: 0.1.0
@@ -1832,7 +1832,7 @@ __metadata:
     jotai: ^2
     react: ">=16.8"
     zod: ^3
-  checksum: 8bf310097078dca02d411171cd8ccd109eb88094fa9b2e694af51efb4583e132c3780c4fb8672e65e79f841f5903252140be0a1dfd6fe5119657f9ed99070be8
+  checksum: 60c38c8365fc785c012bae2175fcfc339519aba75942a46921590782c4dc8f59486680b236f14872ebdc1a751adb7065728597f5cd5b20f7a2ba074e433cd37b
   languageName: node
   linkType: hard
 
@@ -1844,7 +1844,7 @@ __metadata:
     "@babel/preset-env": ^7.20.2
     "@babel/preset-react": ^7.18.6
     "@babel/preset-typescript": ^7.18.6
-    "@form-atoms/field": 2.4.2
+    "@form-atoms/field": 2.5.0
     "@mdx-js/react": ^1.6.22
     "@semantic-release/changelog": ^6.0.2
     "@semantic-release/git": ^10.0.1