From 07abc554f64905405097f41b0abb1aed5060fcf4 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Mon, 8 Jan 2024 09:00:09 +0100
Subject: [PATCH] fix(list): use listField & List

BREAKING CHANGE
uses new list api
---
 package.json                                  |  4 +-
 .../list-field/ListField.stories.tsx          | 49 ----------
 .../list-field/NestedListField.stories.tsx    | 91 ++++++++-----------
 src/components/list-field/Phones.stories.tsx  | 40 ++++----
 src/components/story-form/StoryForm.tsx       |  3 +-
 .../address-list-field/AddressListField.tsx   | 54 ++++++-----
 .../review-list/ReviewList.stories.tsx        | 16 +++-
 src/showcase/review-list/ReviewList.tsx       | 59 +++++-------
 yarn.lock                                     | 20 ++--
 9 files changed, 134 insertions(+), 202 deletions(-)
 delete mode 100644 src/components/list-field/ListField.stories.tsx

diff --git a/package.json b/package.json
index c3a2958..4dddc2d 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/list-field/ListField.stories.tsx b/src/components/list-field/ListField.stories.tsx
deleted file mode 100644
index 1feb8f4..0000000
--- a/src/components/list-field/ListField.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ListField, listFieldBuilder, textField } from "@form-atoms/field";
-import { Card } from "flowbite-react";
-
-import { formStory, meta } from "../story-form";
-import { TextField } from "../text-field";
-
-export default {
-  title: "ListField",
-  ...meta,
-};
-
-const addressBuilder = listFieldBuilder(({ city, street }) => ({
-  city: textField({
-    name: "city",
-    value: city,
-  }),
-  street: textField({
-    name: "street",
-    value: street,
-  }),
-}));
-
-const fields = {
-  addresses: addressBuilder([
-    { city: "Stockholm", street: "Carl Gustav Street" },
-    { city: "Bratislava", street: "Kosicka" },
-  ]),
-};
-
-export const AddressesListField = formStory({
-  args: {
-    fields,
-    children: ({ form }) => (
-      <ListField
-        form={form}
-        keyFrom="city"
-        path={["addresses"]}
-        builder={addressBuilder}
-      >
-        {({ fields }) => (
-          <Card className="grid grid-flow-col grid-cols-2 gap-4">
-            <TextField label="City" field={fields.city} />
-            <TextField label="Street" field={fields.street} />
-          </Card>
-        )}
-      </ListField>
-    ),
-  },
-});
diff --git a/src/components/list-field/NestedListField.stories.tsx b/src/components/list-field/NestedListField.stories.tsx
index abcb204..9b1fe58 100644
--- a/src/components/list-field/NestedListField.stories.tsx
+++ b/src/components/list-field/NestedListField.stories.tsx
@@ -1,9 +1,4 @@
-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";
@@ -11,35 +6,12 @@ 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>
     ),
   },
 });
diff --git a/src/components/list-field/Phones.stories.tsx b/src/components/list-field/Phones.stories.tsx
index 5d57b9a..b05b911 100644
--- a/src/components/list-field/Phones.stories.tsx
+++ b/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>
     ),
diff --git a/src/components/story-form/StoryForm.tsx b/src/components/story-form/StoryForm.tsx
index 7e3add3..ad05264 100644
--- a/src/components/story-form/StoryForm.tsx
+++ b/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()}>
diff --git a/src/showcase/address-list-field/AddressListField.tsx b/src/showcase/address-list-field/AddressListField.tsx
index 326a0f5..5f61a9b 100644
--- a/src/showcase/address-list-field/AddressListField.tsx
+++ b/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,26 +12,27 @@ 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);
@@ -39,19 +40,16 @@ 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,7 +60,7 @@ export const AddressesListField = () => (
                 <Button color="light" onClick={moveDown}>
                   <HiOutlineChevronDown />
                 </Button>
-                <RemoveItemButton />
+                <RemoveButton />
               </div>
             </div>
             <TextField label="City" field={fields.city} />
@@ -70,7 +68,7 @@ export const AddressesListField = () => (
             <TextField label="Zip Code" field={fields.zipCode} />
           </Card>
         )}
-      </ListField>
+      </List>
     </div>
   </div>
 );
diff --git a/src/showcase/review-list/ReviewList.stories.tsx b/src/showcase/review-list/ReviewList.stories.tsx
index 6027a3c..fc2e153 100644
--- a/src/showcase/review-list/ReviewList.stories.tsx
+++ b/src/showcase/review-list/ReviewList.stories.tsx
@@ -1,4 +1,6 @@
-import { ReviewList, reviewItemBuilder } from "./ReviewList";
+import { listField, textField } from "@form-atoms/field";
+
+import { ReviewList } from "./ReviewList";
 import { formStory, meta } from "../../components/story-form";
 
 export default {
@@ -7,13 +9,19 @@ export default {
 };
 
 const fields = {
-  positives: reviewItemBuilder(["quality materials used", "waterproof"]),
-  negatives: reviewItemBuilder(["could be lighter"]),
+  positives: listField({
+    value: ["quality materials used", "waterproof"],
+    builder: (value) => textField({ value }),
+  }),
+  negatives: listField({
+    value: ["could be lighter"],
+    builder: (value) => textField({ value }),
+  }),
 };
 
 export const Primary = formStory({
   args: {
     fields,
-    children: ({ form }) => <ReviewList form={form} />,
+    children: ({ fields }) => <ReviewList fields={fields} />,
   },
 });
diff --git a/src/showcase/review-list/ReviewList.tsx b/src/showcase/review-list/ReviewList.tsx
index 97075e7..3e9014c 100644
--- a/src/showcase/review-list/ReviewList.tsx
+++ b/src/showcase/review-list/ReviewList.tsx
@@ -1,13 +1,11 @@
 import {
-  AddItemButtonProps,
-  ListField,
-  RemoveItemButtonProps,
+  AddButtonProps,
+  List,
+  type ListField,
+  RemoveButtonProps,
   type TextField as TTextField,
-  listFieldBuilder,
-  textField,
 } from "@form-atoms/field";
 import { Button, Card, Label } from "flowbite-react";
-import { FormAtom } from "form-atoms";
 import {
   HiOutlineMinusCircle,
   HiOutlinePlusCircle,
@@ -16,73 +14,66 @@ import {
 
 import { TextField } from "../../components";
 
-const AddButton = ({ add }: AddItemButtonProps) => (
+const AddButton = ({ add }: AddButtonProps) => (
   // The div makes it non-full width
   <div>
     <Button onClick={add}>Add</Button>
   </div>
 );
 
-const RemoveButton = ({ remove }: RemoveItemButtonProps) => (
+const RemoveButton = ({ remove }: RemoveButtonProps) => (
   <Button onClick={remove} color="light">
     <HiOutlineTrash />
   </Button>
 );
 
-export const reviewItemBuilder = listFieldBuilder((value) =>
-  textField({
-    value: value,
-  }),
-);
-
 /**
  * Generic permits to include this review list in different forms having the positives/negatives fields at minimum.
  */
 export const ReviewList = ({
-  form,
+  fields,
 }: {
-  form: FormAtom<{ positives: TTextField[]; negatives: TTextField[] }>;
+  fields: {
+    positives: ListField<TTextField, string>;
+    negatives: ListField<TTextField, string>;
+  };
 }) => (
   <Card>
     <Label>Please review your shoes:</Label>
     <div className="flex gap-4">
       <div className="flex flex-1 flex-col gap-4">
         <Label>Positives</Label>
-        <ListField
-          form={form}
-          path={["positives"]}
-          builder={reviewItemBuilder}
-          RemoveItemButton={RemoveButton}
-          AddItemButton={AddButton}
+        <List
+          field={fields.positives}
+          RemoveButton={RemoveButton}
+          AddButton={AddButton}
         >
-          {({ fields, RemoveItemButton }) => (
+          {({ fields, RemoveButton }) => (
             <div className="flex items-center gap-2">
-              <RemoveItemButton />
+              <RemoveButton />
               <div className="w-full">
                 <TextField icon={HiOutlinePlusCircle} field={fields} />
               </div>
             </div>
           )}
-        </ListField>
+        </List>
       </div>
       <div className="flex flex-1 flex-col gap-4">
         <Label>Negatives</Label>
-        <ListField
-          form={form}
-          path={["negatives"]}
-          builder={reviewItemBuilder}
-          RemoveItemButton={RemoveButton}
-          AddItemButton={AddButton}
+        <List
+          field={fields.negatives}
+          RemoveButton={RemoveButton}
+          AddButton={AddButton}
         >
-          {({ fields, RemoveItemButton }) => (
+          {({ fields, RemoveButton }) => (
             <div className="flex w-full items-center gap-2">
-              <RemoveItemButton />
+              <RemoveButton />
               <div className="w-full">
                 <TextField icon={HiOutlineMinusCircle} field={fields} />
               </div>
             </div>
           )}
-        </ListField>
+        </List>
       </div>
     </div>
   </Card>
diff --git a/yarn.lock b/yarn.lock
index 52e0c58..e6c8d30 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2706,9 +2706,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@form-atoms/field@npm:^3.8.7":
-  version: 3.8.7
-  resolution: "@form-atoms/field@npm:3.8.7"
+"@form-atoms/field@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@form-atoms/field@npm:4.0.0"
   dependencies:
     react-render-prop-type: "npm:0.1.0"
   peerDependencies:
@@ -2717,7 +2717,7 @@ __metadata:
     jotai-effect: ^0
     react: ">=16.8"
     zod: ^3
-  checksum: baeca497ce2cc146180f2f53d2aede5e95038fc3b5d422a6939752573c7030db873c4de45ed156c9c64df2b9b6cf38f1c86cfb3ee9fbb675750cd1cd82cb3f38
+  checksum: f27c1f5b8d20f78e0c60193b9e94efeaf2be4196a325f074e13b37f10d3ea9a3b5837c6088498b6ae5a97242435289f9da77232942b0958f5e0041cfad8bf4f3
   languageName: node
   linkType: hard
 
@@ -2726,7 +2726,7 @@ __metadata:
   resolution: "@form-atoms/flowbite@workspace:."
   dependencies:
     "@emotion/react": "npm:^11.11.1"
-    "@form-atoms/field": "npm:^3.8.7"
+    "@form-atoms/field": "npm:^4.0.0"
     "@mdx-js/react": "npm:^2.3.0"
     "@semantic-release/changelog": "npm:^6.0.3"
     "@semantic-release/commit-analyzer": "npm:^11.1.0"
@@ -2763,7 +2763,7 @@ __metadata:
     eslint-plugin-prettier: "npm:5.0.1"
     flowbite: "npm:^2.2.0"
     flowbite-react: "npm:^0.7.0"
-    form-atoms: "npm:3.2.0"
+    form-atoms: "npm:3.2.1"
     happy-dom: "npm:12.10.3"
     jotai: "npm:^2.6.0"
     jotai-devtools: "npm:0.7.0"
@@ -10283,13 +10283,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"form-atoms@npm:3.2.0":
-  version: 3.2.0
-  resolution: "form-atoms@npm:3.2.0"
+"form-atoms@npm:3.2.1":
+  version: 3.2.1
+  resolution: "form-atoms@npm:3.2.1"
   peerDependencies:
     jotai: ^2.0.0
     react: ">=16.8"
-  checksum: a096c2077da6ad4d2ed0a56d6b33862586e027ac52697b0f7bc7b56993da815cf4debeec78bdba5e8836c582f686fb8ade5e5c4ca89f710aaa86dbc05c64fa83
+  checksum: 70d8bf68d2462e36419622038776faad85342fcda0513b4be81cc4658adee0ab6d369f90030f5bc58c2f37cf91698b04afb076fd93db3453f28178beae59a918
   languageName: node
   linkType: hard