fix: use the new listFieldBuilder

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintrc.js → .eslintrc.cjs

@@ -16,6 +16,7 @@ module.exports = {
     "plugin:import/typescript",
   ],
   rules: {
+    "@typescript-eslint/no-explicit-any": "off",
     "sort-imports": [
       "error",
       {

package.json

@@ -36,12 +36,15 @@
     "sb": "yarn storybook",
     "build:storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "lint": "eslint --ext .tsx,.ts ./src",
+    "lint:fix": "yarn run lint --fix",
+    "ui": "yarn upgrade-interactive"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
-    "@form-atoms/field": "^3.6.1",
-    "@mdx-js/react": "^1.6.22",
+    "@form-atoms/field": "^3.8.0",
+    "@mdx-js/react": "^2.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-actions": "7.6.0",
@@ -64,8 +67,15 @@
     "@types/react-dom": "^18",
     "@types/semantic-release": "^20.0.6",
     "@types/testing-library__jest-dom": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "6.13.1",
+    "@typescript-eslint/parser": "6.13.1",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "10.4.16",
+    "eslint": "8.54.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "5.0.1",
     "flowbite": "^2.2.0",
     "flowbite-react": "^0.7.0",
     "form-atoms": "3.2.0",
@@ -74,6 +84,7 @@
     "jotai-devtools": "0.7.0",
     "jotai-effect": "^0.2.3",
     "postcss": "8.4.31",
+    "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/TemplateField.test.skip.tsx

@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import { act as domAct, renderHook } from "@testing-library/react-hooks/dom";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { formAtom, useFormSubmit } from "form-atoms";
 import { describe, expect, it } from "vitest";
 

src/components/checkbox-field/CheckboxField.test.tsx

@@ -1,7 +1,7 @@
 import { checkboxField } 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";
+import { userEvent } from "@testing-library/user-event";
 import { formAtom, useFormSubmit } from "form-atoms";
 import { describe, expect, it } from "vitest";
 

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

@@ -1,7 +1,8 @@
+import { stringArrayField } from "@form-atoms/field";
+
 import { CheckboxGroupField } from "./CheckboxGroupField";
 import { getLabel, getValue, options } from "./languages";
 import { FormStory, meta, optionalField } from "../story-form";
-import { stringArrayField } from "@form-atoms/field";
 
 export default {
   title: "CheckboxGroupField",

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

@@ -1,13 +1,13 @@
+import { stringArrayField } 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";
+import { userEvent } from "@testing-library/user-event";
 import { formAtom, useFormSubmit } from "form-atoms";
 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 = {

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

@@ -1,10 +1,11 @@
 import {
   FieldProps,
-  useCheckboxGroup,
   UseCheckboxGroupProps,
   ZodArrayField,
+  useCheckboxGroup,
 } from "@form-atoms/field";
 import { Checkbox, HelperText, Label } from "flowbite-react";
+
 import { Option as BaseOption, type OptionRenderProp } from "@/components";
 
 import { FlowbiteField } from "../field";

src/components/field/FlowbiteField.tsx

@@ -5,13 +5,14 @@ import {
   useRequiredProps,
 } from "@form-atoms/field";
 import { Label } from "flowbite-react";
+import { useAtomValue } from "jotai";
 import { ReactNode } from "react";
 import { RenderProp } from "react-render-prop-type";
 
-import { FlowbiteStateColor, useFieldError } from "../../hooks";
-import { useAtomValue } from "jotai";
 import { RequiredIndicator } from "@/components";
 
+import { FlowbiteStateColor, useFieldError } from "../../hooks";
+
 type Children = RenderProp<
   Omit<RequiredProps, "isFieldRequired"> & {
     id: string;

src/components/file-field/FilesField.test.tsx

@@ -1,7 +1,7 @@
 import { filesField } from "@form-atoms/field";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { act as domAct, renderHook } from "@testing-library/react-hooks/dom";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { formAtom, useForm, useFormSubmit } from "form-atoms";
 import { describe, expect, it } from "vitest";
 
@@ -33,7 +33,7 @@ describe("<FilesField />", () => {
     // TODO: event does not cause re-render
     expect(screen.getByRole("dialog")).toBeInvalid();
     expect(
-      screen.getByText("Input not instance of FileList")
+      screen.getByText("Input not instance of FileList"),
     ).toBeInTheDocument();
     expect(onSubmit).not.toBeCalled();
   });

src/components/file-field/FilesField.tsx

@@ -1,8 +1,8 @@
 import { FileFieldProps, useFilesFieldProps } from "@form-atoms/field";
 import { FileInput, FileInputProps } from "flowbite-react";
 
-import { FlowbiteField } from "../field";
 import { InputColors } from "../../hooks";
+import { FlowbiteField } from "../field";
 
 type FlowbiteFilesFieldProps = FileFieldProps &
   FileInputProps & { colors?: InputColors };
@@ -11,7 +11,6 @@ export const FilesField = ({
   label,
   field,
   helperText,
-  colors,
   required,
   ...uiProps
 }: FlowbiteFilesFieldProps) => {

src/components/list-field/ListField.stories.tsx

@@ -1,4 +1,5 @@
-import { listFieldAtoms, textField } from "@form-atoms/field";
+import { listFieldBuilder, textField } from "@form-atoms/field";
+import { Card } from "flowbite-react";
 
 import { ListField } from "./ListField";
 import { formStory, meta } from "../story-form";
@@ -9,17 +10,7 @@ export default {
   ...meta,
 };
 
-type Address = {
-  city: string;
-  street: string;
-};
-
-const addressBuilder = (
-  { city, street }: Address | undefined = {
-    city: "",
-    street: "",
-  }
-) => ({
+const addressBuilder = listFieldBuilder(({ city, street }) => ({
   city: textField({
     name: "city",
     value: city,
@@ -28,10 +19,10 @@ const addressBuilder = (
     name: "street",
     value: street,
   }),
-});
+}));
 
 const fields = {
-  addresses: listFieldAtoms(addressBuilder, [
+  addresses: addressBuilder([
     { city: "Stockholm", street: "Carl Gustav Street" },
     { city: "Bratislava", street: "Kosicka" },
   ]),
@@ -47,11 +38,11 @@ export const AddressesListField = formStory({
         form={form}
         builder={addressBuilder}
       >
-        {({ fields, index }) => (
-          <div key={index} className="grid grid-flow-col grid-cols-2 gap-4">
+        {({ fields }) => (
+          <Card className="grid grid-flow-col grid-cols-2 gap-4">
             <TextField label="City" field={fields.city} />
             <TextField label="Street" field={fields.street} />
-          </div>
+          </Card>
         )}
       </ListField>
     ),

src/components/list-field/ListField.tsx

@@ -1,7 +1,7 @@
 import {
-  ListFieldProps,
-  ListField as BaseListField,
   AddItemButtonProps,
+  ListField as BaseListField,
+  ListFieldProps,
   RemoveItemButtonProps,
 } from "@form-atoms/field";
 import { Button, Label } from "flowbite-react";
@@ -22,7 +22,7 @@ const FlowbiteRemoveItemButton = ({ remove }: RemoveItemButtonProps) => (
  */
 export const ListField = <
   Fields extends FormFields,
-  Path extends (string | number)[]
+  Path extends (string | number)[],
 >({
   label,
   AddItemButton = FlowbiteAddItemButton,

src/components/list-field/NestedListField.stories.tsx

@@ -1,6 +1,5 @@
-import { numberField, textField } from "@form-atoms/field";
-import { Button } from "flowbite-react";
-import { Fragment } from "react";
+import { listFieldBuilder, numberField, textField } from "@form-atoms/field";
+import { Button, Card } from "flowbite-react";
 
 import { ListField } from "./ListField";
 import { NumberField } from "../number-field";
@@ -12,22 +11,7 @@ export default {
   ...meta,
 };
 
-type Address = {
-  city: string;
-  street: string;
-};
-
-type Person = {
-  age: number;
-  name: string;
-};
-
-const personBuilder = (
-  { name, age }: Person | undefined = {
-    name: "",
-    age: 0,
-  }
-) => ({
+const personBuilder = listFieldBuilder(({ name, age }) => ({
   name: textField({
     name: "name",
     value: name,
@@ -36,15 +20,9 @@ const personBuilder = (
     name: "age",
     value: age,
   }),
-});
+}));
 
-const addressBuilder = (
-  { city, street, people }: (Address & { people: Person[] }) | undefined = {
-    city: "",
-    street: "",
-    people: [],
-  }
-) => ({
+const addressBuilder = listFieldBuilder(({ city, street, people = [] }) => ({
   city: textField({
     name: "city",
     value: city,
@@ -53,34 +31,22 @@ const addressBuilder = (
     name: "street",
     value: street,
   }),
-  people: [],
-});
+  people: personBuilder(people),
+}));
 
 const fields = {
-  addresses: [
+  addresses: addressBuilder([
     {
-      city: textField({
-        name: "city",
-        value: "Bratislava",
-      }),
-      street: textField({
-        name: "street",
-        value: "Kosicka",
-      }),
+      city: "Bratislava",
+      street: "Kosicka",
       people: [
         {
-          name: textField({
-            name: "name",
-            value: "Simon",
-          }),
-          age: numberField({
-            name: "age",
-            value: 20,
-          }),
+          name: "Simon",
+          age: 20,
         },
       ],
     },
-  ],
+  ]),
 };
 
 export const AddressesWithPeopleListField = formStory({
@@ -99,7 +65,7 @@ export const AddressesWithPeopleListField = formStory({
         )}
       >
         {({ fields, index }) => (
-          <Fragment key={index}>
+          <Card>
             <div className="grid grid-flow-col grid-cols-2 gap-4">
               <TextField label="City" field={fields.city} />
               <TextField label="Street" field={fields.street} />
@@ -115,17 +81,14 @@ export const AddressesWithPeopleListField = formStory({
                 </Button>
               )}
             >
-              {({ fields, index }) => (
-                <div
-                  key={index}
-                  className="grid grid-flow-col grid-cols-2 gap-4"
-                >
+              {({ fields }) => (
+                <Card className="grid grid-flow-col grid-cols-2 gap-4">
                   <TextField label="Name" field={fields.name} />
                   <NumberField label="Age" field={fields.age} />
-                </div>
+                </Card>
               )}
             </ListField>
-          </Fragment>
+          </Card>
         )}
       </ListField>
     ),