docs: Migrate List usage

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

@@ -1,4 +1,5 @@
-import { List, listField, numberField, textField } from "@form-atoms/field";
+import { listField, numberField, textField } from "@form-atoms/field";
+import { List } from "@form-atoms/list-atom";
 import { Button, Card } from "flowbite-react";
 
 import { formStory, meta } from "../../stories/story-form";
@@ -11,6 +12,7 @@ export default {
 };
 
 const addresses = listField({
+  name: "address",
   value: [
     {
       city: "Bratislava",
@@ -23,7 +25,7 @@ const addresses = listField({
       ],
     },
   ],
-  builder: ({ city, street, people = [] }) => ({
+  fields: ({ city, street, people = [] }) => ({
     city: textField({
       name: "city",
       value: city,
@@ -33,8 +35,9 @@ const addresses = listField({
       value: street,
     }),
     people: listField({
+      name: "people",
       value: people,
-      builder: ({ name, age }) => ({
+      fields: ({ name, age }) => ({
         name: textField({
           name: "name",
           value: name,
@@ -53,9 +56,9 @@ export const AddressesWithPeopleListField = formStory({
     fields: { addresses },
     children: ({ fields }) => (
       <List
-        field={fields.addresses}
+        atom={fields.addresses}
         AddButton={({ add }) => (
-          <Button color="gray" onClick={add}>
+          <Button color="gray" onClick={() => add()}>
             Add Address
           </Button>
         )}
@@ -67,9 +70,9 @@ export const AddressesWithPeopleListField = formStory({
               <TextField label="Street" field={fields.street} />
             </div>
             <List
-              field={fields.people}
+              atom={fields.people}
               AddButton={({ add }) => (
-                <Button color="gray" onClick={add}>
+                <Button color="gray" onClick={() => add()}>
                   Add Person
                 </Button>
               )}

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

@@ -1,11 +1,11 @@
 import {
-  List,
   Radio,
   RadioControl,
   checkboxField,
   listField,
   textField,
 } from "@form-atoms/field";
+import { List } from "@form-atoms/list-atom";
 import { Card } from "flowbite-react";
 
 import { formStory, meta } from "../../stories/story-form";
@@ -18,11 +18,12 @@ export default {
 };
 
 const phones = listField({
+  name: "phones",
   value: [
     { number: "+421 933 888 999", primary: true },
     { number: "+420 905 100 200", primary: false },
   ],
-  builder: ({ number, primary }) => ({
+  fields: ({ number, primary }) => ({
     number: textField({ name: "number", value: number }),
     primary: checkboxField({
       name: "primaryPhone",
@@ -37,7 +38,7 @@ export const PhonesListField = formStory({
     children: ({ required, fields }) => (
       <RadioControl name="primaryPhone">
         {({ control }) => (
-          <List field={fields.phones}>
+          <List atom={fields.phones}>
             {({ fields }) => (
               <Card>
                 <TextField

src/stories/review-list/ReviewList.stories.tsx

@@ -10,12 +10,12 @@ export default {
 
 const fields = {
   positives: listField({
-    value: ["quality materials used", "waterproof"],
-    builder: (value) => textField({ value }),
+    value: [{ item: "quality materials used" }, { item: "waterproof" }],
+    fields: ({ item }) => ({ item: textField({ value: item }) }),
   }),
   negatives: listField({
-    value: ["could be lighter"],
-    builder: (value) => textField({ value }),
+    value: [{ item: "could be lighter" }],
+    fields: ({ item }) => ({ item: textField({ value: item }) }),
   }),
 };
 

src/stories/review-list/ReviewList.tsx

@@ -1,10 +1,12 @@
 import {
-  AddButtonProps,
-  List,
   type ListField,
-  RemoveButtonProps,
   type TextField as TTextField,
 } from "@form-atoms/field";
+import {
+  type AddButtonProps,
+  List,
+  type RemoveButtonProps,
+} from "@form-atoms/list-atom";
 import { Button, Card, Label } from "flowbite-react";
 import {
   HiOutlineMinusCircle,
@@ -14,7 +16,7 @@ import {
 
 import { TextField } from "../../components";
 
-const AddButton = ({ add }: AddButtonProps) => (
+const AddButton = ({ add }: AddButtonProps<any>) => (
   // The div makes it non-full width
   <div>
     <Button onClick={add}>Add</Button>
@@ -34,8 +36,8 @@ export const ReviewList = ({
   fields,
 }: {
   fields: {
-    positives: ListField<TTextField, string>;
-    negatives: ListField<TTextField, string>;
+    positives: ListField<{ item: TTextField }, { item: string }>;
+    negatives: ListField<{ item: TTextField }, { item: string }>;
   };
 }) => (
   <Card>
@@ -44,15 +46,15 @@ export const ReviewList = ({
       <div className="flex flex-1 flex-col gap-4">
         <Label>Positives</Label>
         <List
-          field={fields.positives}
+          atom={fields.positives}
           RemoveButton={RemoveButton}
           AddButton={AddButton}
         >
           {({ fields, RemoveButton }) => (
             <div className="flex items-center gap-2">
               <RemoveButton />
               <div className="w-full">
-                <TextField icon={HiOutlinePlusCircle} field={fields} />
+                <TextField icon={HiOutlinePlusCircle} field={fields.item} />
               </div>
             </div>
           )}
@@ -61,15 +63,15 @@ export const ReviewList = ({
       <div className="flex flex-1 flex-col gap-4">
         <Label>Negatives</Label>
         <List
-          field={fields.negatives}
+          atom={fields.negatives}
           RemoveButton={RemoveButton}
           AddButton={AddButton}
         >
           {({ fields, RemoveButton }) => (
             <div className="flex w-full items-center gap-2">
               <RemoveButton />
               <div className="w-full">
-                <TextField icon={HiOutlineMinusCircle} field={fields} />
+                <TextField icon={HiOutlineMinusCircle} field={fields.item} />
               </div>
             </div>
           )}