fix(list): use listField & List

BREAKING CHANGE
uses new list api

package.json

@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
-    "@form-atoms/field": "^3.8.7",
+    "@form-atoms/field": "^4.0.0",
     "@mdx-js/react": "^2.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^11.1.0",
@@ -80,7 +80,7 @@
     "eslint-plugin-prettier": "5.0.1",
     "flowbite": "^2.2.0",
     "flowbite-react": "^0.7.0",
-    "form-atoms": "3.2.0",
+    "form-atoms": "3.2.1",
     "happy-dom": "12.10.3",
     "jotai": "^2.6.0",
     "jotai-devtools": "0.7.0",

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

@@ -1,45 +1,17 @@
-import {
-  ListField,
-  listFieldBuilder,
-  numberField,
-  textField,
-} from "@form-atoms/field";
+import { List, listField, numberField, textField } from "@form-atoms/field";
 import { Button, Card } from "flowbite-react";
 
 import { NumberField } from "../number-field";
 import { formStory, meta } from "../story-form";
 import { TextField } from "../text-field";
 
 export default {
-  title: "ListField",
+  title: "List",
   ...meta,
 };
 
-const personBuilder = listFieldBuilder(({ name, age }) => ({
-  name: textField({
-    name: "name",
-    value: name,
-  }),
-  age: numberField({
-    name: "age",
-    value: age,
-  }),
-}));
-
-const addressBuilder = listFieldBuilder(({ city, street, people = [] }) => ({
-  city: textField({
-    name: "city",
-    value: city,
-  }),
-  street: textField({
-    name: "street",
-    value: street,
-  }),
-  people: personBuilder(people),
-}));
-
-const fields = {
-  addresses: addressBuilder([
+const addresses = listField({
+  value: [
     {
       city: "Bratislava",
       street: "Kosicka",
@@ -50,36 +22,53 @@ const fields = {
         },
       ],
     },
-  ]),
-};
+  ],
+  builder: ({ city, street, people = [] }) => ({
+    city: textField({
+      name: "city",
+      value: city,
+    }),
+    street: textField({
+      name: "street",
+      value: street,
+    }),
+    people: listField({
+      value: people,
+      builder: ({ name, age }) => ({
+        name: textField({
+          name: "name",
+          value: name,
+        }),
+        age: numberField({
+          name: "age",
+          value: age,
+        }),
+      }),
+    }),
+  }),
+});
 
 export const AddressesWithPeopleListField = formStory({
   args: {
-    fields,
-    children: ({ form }) => (
-      <ListField
-        form={form}
-        keyFrom="street"
-        path={["addresses"]}
-        builder={addressBuilder}
-        AddItemButton={({ add }) => (
+    fields: { addresses },
+    children: ({ fields }) => (
+      <List
+        field={fields.addresses}
+        AddButton={({ add }) => (
           <Button color="gray" onClick={add}>
             Add Address
           </Button>
         )}
       >
-        {({ fields, index }) => (
+        {({ fields }) => (
           <Card>
             <div className="grid grid-flow-col grid-cols-2 gap-4">
               <TextField label="City" field={fields.city} />
               <TextField label="Street" field={fields.street} />
             </div>
-            <ListField
-              form={form}
-              keyFrom="name"
-              path={["addresses", index, "people"]}
-              builder={personBuilder}
-              AddItemButton={({ add }) => (
+            <List
+              field={fields.people}
+              AddButton={({ add }) => (
                 <Button color="gray" onClick={add}>
                   Add Person
                 </Button>
@@ -91,10 +80,10 @@ export const AddressesWithPeopleListField = formStory({
                   <NumberField label="Age" field={fields.age} />
                 </Card>
               )}
-            </ListField>
+            </List>
           </Card>
         )}
-      </ListField>
+      </List>
     ),
   },
 });

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

@@ -1,9 +1,9 @@
 import {
-  ListField,
+  List,
   Radio,
   RadioControl,
   checkboxField,
-  listFieldBuilder,
+  listField,
   textField,
 } from "@form-atoms/field";
 import { Card } from "flowbite-react";
@@ -17,33 +17,27 @@ export default {
   ...meta,
 };
 
-const phoneBuilder = listFieldBuilder(({ number, primary }) => ({
-  number: textField({ name: "number", value: number }),
-  primary: checkboxField({
-    name: "primaryPhone",
-    value: primary,
-  }).optional(),
-}));
-
-const formFields = {
-  phones: phoneBuilder([
+const phones = listField({
+  value: [
     { number: "+421 933 888 999", primary: true },
     { number: "+420 905 100 200", primary: false },
-  ]),
-};
+  ],
+  builder: ({ number, primary }) => ({
+    number: textField({ name: "number", value: number }),
+    primary: checkboxField({
+      name: "primaryPhone",
+      value: primary,
+    }).optional(),
+  }),
+});
 
 export const PhonesListField = formStory({
   args: {
-    fields: formFields,
-    children: ({ required, form }) => (
+    fields: { phones },
+    children: ({ required, fields }) => (
       <RadioControl name="primaryPhone">
         {({ control }) => (
-          <ListField
-            form={form}
-            keyFrom="primary"
-            path={["phones"]}
-            builder={phoneBuilder}
-          >
+          <List field={fields.phones}>
             {({ fields }) => (
               <Card>
                 <TextField
@@ -63,7 +57,7 @@ export const PhonesListField = formStory({
                 </Radio>
               </Card>
             )}
-          </ListField>
+          </List>
         )}
       </RadioControl>
     ),

src/components/story-form/StoryForm.tsx

@@ -8,6 +8,7 @@ import { RenderProp } from "react-render-prop-type";
 export type VariantProps<Fields extends FormFields> = {
   required: boolean;
   form: FormAtom<Fields>;
+  fields: Fields;
 };
 
 type StoryFormProps<Fields extends FormFields> = {
@@ -31,7 +32,7 @@ export const StoryForm = <Fields extends FormFields>({
       })}
       className="flex flex-col gap-4"
     >
-      {children({ required, form })}
+      {children({ required, form, fields })}
       <div className="flex gap-2">
         <Button type="submit">Submit</Button>
         <Button color="gray" onClick={() => reset()}>

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

@@ -1,4 +1,4 @@
-import { ListField, listFieldBuilder, textField } from "@form-atoms/field";
+import { List, listField, textField } from "@form-atoms/field";
 import { Button, Card, Label } from "flowbite-react";
 import { formAtom } from "form-atoms";
 import {
@@ -12,46 +12,44 @@ import { TextField } from "../../components";
 
 const zipCodeSchema = z.string().regex(/^\d{5}$/);
 
-const addressBuilder = listFieldBuilder(({ city, street, zipCode }) => ({
-  city: textField({
-    name: "city",
-    value: city,
+const addresses = listField({
+  value: [{ city: "Bratislava", street: "Hrad", zipCode: "81106" }],
+  builder: ({ city, street, zipCode }) => ({
+    city: textField({
+      name: "city",
+      value: city,
+    }),
+    street: textField({
+      name: "street",
+      value: street,
+    }),
+    zipCode: textField({
+      schema: zipCodeSchema,
+      name: "zipCode",
+      value: zipCode,
+    }),
   }),
-  street: textField({
-    name: "street",
-    value: street,
-  }),
-  zipCode: textField({
-    schema: zipCodeSchema,
-    name: "zipCode",
-    value: zipCode,
-  }),
-}));
+});
 
 const fields = {
-  addresses: addressBuilder([
-    { city: "Bratislava", street: "Hrad", zipCode: "81106" },
-  ]),
+  addresses,
 };
 
 const form = formAtom(fields);
 
 export const AddressesListField = () => (
   <div className="max-w-xl">
     <div className="flex flex-col gap-4">
-      <ListField
-        keyFrom="city"
-        path={["addresses"]}
-        form={form}
-        builder={addressBuilder}
-        RemoveItemButton={({ remove }) => (
+      <List
+        field={fields.addresses}
+        RemoveButton={({ remove }) => (
           <Button onClick={remove} color="failure">
             <HiOutlineTrash />
           </Button>
         )}
-        AddItemButton={({ add }) => <Button onClick={add}>Add address</Button>}
+        AddButton={({ add }) => <Button onClick={add}>Add address</Button>}
       >
-        {({ fields, RemoveItemButton, index, moveUp, moveDown }) => (
+        {({ fields, RemoveButton, index, moveUp, moveDown }) => (
           <Card>
             <div className="flex items-center justify-between">
               <Label>Address #{index + 1}</Label>
@@ -62,15 +60,15 @@ export const AddressesListField = () => (
                 <Button color="light" onClick={moveDown}>
                   <HiOutlineChevronDown />
                 </Button>
-                <RemoveItemButton />
+                <RemoveButton />
               </div>
             </div>
             <TextField label="City" field={fields.city} />
             <TextField label="Street" field={fields.street} />
             <TextField label="Zip Code" field={fields.zipCode} />
           </Card>
         )}
-      </ListField>
+      </List>
     </div>
   </div>
 );