fix: bump field & list-atom

BREAKING CHANGE: now using new major @form-atoms/field

package.json

@@ -44,7 +44,8 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
-    "@form-atoms/field": "^4.0.13",
+    "@form-atoms/field": "^5.1.0",
+    "@form-atoms/list-atom": "^1.0.11",
     "@mdx-js/react": "^2.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^11.1.0",
@@ -80,12 +81,12 @@
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-prettier": "5.0.1",
     "flowbite": "^2.3.0",
-    "flowbite-react": "^0.7.2",
+    "flowbite-react": "^0.7.3",
     "form-atoms": "3.2.4",
     "happy-dom": "12.10.3",
-    "jotai": "^2.6.4",
-    "jotai-devtools": "0.7.1",
-    "jotai-effect": "^0.5.0",
+    "jotai": "^2.7.0",
+    "jotai-devtools": "0.8.0",
+    "jotai-effect": "^0.6.0",
     "postcss": "8.4.32",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "0.5.7",

src/components/number-field/NumberField.test.tsx

@@ -41,7 +41,7 @@ describe("<NumberField />", () => {
       expect(onSubmit).not.toBeCalled();
     });
 
-    it("submits form without error  when entered valid numeric value", async () => {
+    it("submits form without error when entered valid numeric value", async () => {
       const price = numberField();
       const form = formAtom({ price });
       const { result } = renderHook(() => useFormSubmit(form));
@@ -57,7 +57,7 @@ describe("<NumberField />", () => {
       expect(input).toBeInvalid();
       expect(screen.getByText("This field is required")).toBeInTheDocument();
 
-      await fireEvent.change(input, { target: { value: 0 } });
+      await act(() => fireEvent.change(input, { target: { value: 0 } }));
 
       expect(input).toBeValid();
 

src/components/text-field/TextField.stories.tsx

@@ -1,5 +1,4 @@
 import { textField } from "@form-atoms/field";
-import { z } from "zod";
 
 import { TextField } from "./TextField";
 import { FormStory, meta, optionalField } from "../story-form";
@@ -10,7 +9,7 @@ export default {
 };
 
 const username = textField({
-  schema: z.string().min(4),
+  schema: (s) => s.min(4),
 });
 
 export const Required: FormStory = {
@@ -23,7 +22,7 @@ export const Required: FormStory = {
 };
 
 const nickname = textField({
-  schema: z.string().min(4),
+  optionalSchema: (s) => s.min(4),
 }).optional();
 
 export const Optional: FormStory = {
@@ -46,7 +45,7 @@ export const Initialized: FormStory = {
 };
 
 const email = textField({
-  schema: z.string().email(),
+  schema: (s) => s.email(),
 });
 
 export const Email: FormStory = {

src/showcase/address-list-field/AddressListField.tsx

@@ -1,4 +1,5 @@
-import { List, listField, textField } from "@form-atoms/field";
+import { listField, textField } from "@form-atoms/field";
+import { List } from "@form-atoms/list-atom";
 import { Button, Card, Label } from "flowbite-react";
 import { formAtom } from "form-atoms";
 import {
@@ -14,7 +15,7 @@ const zipCodeSchema = z.string().regex(/^\d{5}$/);
 
 const addresses = listField({
   value: [{ city: "Bratislava", street: "Hrad", zipCode: "81106" }],
-  builder: ({ city, street, zipCode }) => ({
+  fields: ({ city, street, zipCode }) => ({
     city: textField({
       name: "city",
       value: city,
@@ -41,13 +42,15 @@ export const AddressesListField = () => (
   <div className="max-w-xl">
     <div className="flex flex-col gap-4">
       <List
-        field={fields.addresses}
+        atom={fields.addresses}
         RemoveButton={({ remove }) => (
           <Button onClick={remove} color="failure">
             <HiOutlineTrash />
           </Button>
         )}
-        AddButton={({ add }) => <Button onClick={add}>Add address</Button>}
+        AddButton={({ add }) => (
+          <Button onClick={() => add()}>Add address</Button>
+        )}
       >
         {({ fields, RemoveButton, index, moveUp, moveDown }) => (
           <Card>