From c77fdd04c60d68eb2f481d6e808f1b5be9a1bb61 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Mon, 4 Dec 2023 18:58:22 +0100
Subject: [PATCH] fix(ListField): label

---
 package.json                                  |  2 +-
 .../list-field/ListField.stories.tsx          |  2 +-
 .../list-field/NestedListField.stories.tsx    |  4 +-
 src/components/list-field/Phones.stories.tsx  |  2 +-
 .../address-list-field/AddressListField.tsx   |  5 +-
 .../review-list/ReviewList.stories.tsx        |  5 ++
 src/showcase/review-list/ReviewList.tsx       | 89 +++++++++++++++++++
 yarn.lock                                     | 10 +--
 8 files changed, 105 insertions(+), 14 deletions(-)
 create mode 100644 src/showcase/review-list/ReviewList.stories.tsx
 create mode 100644 src/showcase/review-list/ReviewList.tsx

diff --git a/package.json b/package.json
index 8329164..c3a2958 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
-    "@form-atoms/field": "^3.8.4",
+    "@form-atoms/field": "^3.8.7",
     "@mdx-js/react": "^2.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^11.1.0",
diff --git a/src/components/list-field/ListField.stories.tsx b/src/components/list-field/ListField.stories.tsx
index fd670c0..1feb8f4 100644
--- a/src/components/list-field/ListField.stories.tsx
+++ b/src/components/list-field/ListField.stories.tsx
@@ -32,9 +32,9 @@ export const AddressesListField = formStory({
     fields,
     children: ({ form }) => (
       <ListField
+        form={form}
         keyFrom="city"
         path={["addresses"]}
-        form={form}
         builder={addressBuilder}
       >
         {({ fields }) => (
diff --git a/src/components/list-field/NestedListField.stories.tsx b/src/components/list-field/NestedListField.stories.tsx
index cca7099..abcb204 100644
--- a/src/components/list-field/NestedListField.stories.tsx
+++ b/src/components/list-field/NestedListField.stories.tsx
@@ -58,9 +58,9 @@ export const AddressesWithPeopleListField = formStory({
     fields,
     children: ({ form }) => (
       <ListField
+        form={form}
         keyFrom="street"
         path={["addresses"]}
-        form={form}
         builder={addressBuilder}
         AddItemButton={({ add }) => (
           <Button color="gray" onClick={add}>
@@ -75,10 +75,10 @@ export const AddressesWithPeopleListField = formStory({
               <TextField label="Street" field={fields.street} />
             </div>
             <ListField
+              form={form}
               keyFrom="name"
               path={["addresses", index, "people"]}
               builder={personBuilder}
-              form={form}
               AddItemButton={({ add }) => (
                 <Button color="gray" onClick={add}>
                   Add Person
diff --git a/src/components/list-field/Phones.stories.tsx b/src/components/list-field/Phones.stories.tsx
index c92005b..5d57b9a 100644
--- a/src/components/list-field/Phones.stories.tsx
+++ b/src/components/list-field/Phones.stories.tsx
@@ -39,8 +39,8 @@ export const PhonesListField = formStory({
       <RadioControl name="primaryPhone">
         {({ control }) => (
           <ListField
-            keyFrom="primary"
             form={form}
+            keyFrom="primary"
             path={["phones"]}
             builder={phoneBuilder}
           >
diff --git a/src/showcase/address-list-field/AddressListField.tsx b/src/showcase/address-list-field/AddressListField.tsx
index a2a052d..326a0f5 100644
--- a/src/showcase/address-list-field/AddressListField.tsx
+++ b/src/showcase/address-list-field/AddressListField.tsx
@@ -41,7 +41,6 @@ export const AddressesListField = () => (
     <div className="flex flex-col gap-4">
       <ListField
         keyFrom="city"
-        label="Adjust your addresses, the first one will be primary."
         path={["addresses"]}
         form={form}
         builder={addressBuilder}
@@ -50,9 +49,7 @@ export const AddressesListField = () => (
             <HiOutlineTrash />
           </Button>
         )}
-        AddItemButton={({ add }) => (
-          <Button onClick={add}>Pridaj address</Button>
-        )}
+        AddItemButton={({ add }) => <Button onClick={add}>Add address</Button>}
       >
         {({ fields, RemoveItemButton, index, moveUp, moveDown }) => (
           <Card>
diff --git a/src/showcase/review-list/ReviewList.stories.tsx b/src/showcase/review-list/ReviewList.stories.tsx
new file mode 100644
index 0000000..622e51d
--- /dev/null
+++ b/src/showcase/review-list/ReviewList.stories.tsx
@@ -0,0 +1,5 @@
+export { ReviewList as Primary } from "./ReviewList";
+
+export default {
+  title: "showcase/ReviewList",
+};
diff --git a/src/showcase/review-list/ReviewList.tsx b/src/showcase/review-list/ReviewList.tsx
new file mode 100644
index 0000000..38c9c72
--- /dev/null
+++ b/src/showcase/review-list/ReviewList.tsx
@@ -0,0 +1,89 @@
+import {
+  AddItemButtonProps,
+  ListField,
+  RemoveItemButtonProps,
+  listFieldBuilder,
+  textField,
+} from "@form-atoms/field";
+import { Button, Card, Label } from "flowbite-react";
+import { formAtom } from "form-atoms";
+import {
+  HiOutlineMinusCircle,
+  HiOutlinePlusCircle,
+  HiOutlineTrash,
+} from "react-icons/hi2";
+
+import { TextField } from "../../components";
+
+const textFieldBuilder = listFieldBuilder((value) =>
+  textField({
+    name: "positive",
+    value: value,
+  }),
+);
+
+const fields = {
+  positives: textFieldBuilder(["quality materials used", "waterproof"]),
+  negatives: textFieldBuilder(["could be lighter"]),
+};
+
+const form = formAtom(fields);
+
+const AddButton = ({ add }: AddItemButtonProps) => (
+  // The div makes it non-full width
+  <div>
+    <Button onClick={add}>Add</Button>
+  </div>
+);
+
+const RemoveButton = ({ remove }: RemoveItemButtonProps) => (
+  <Button onClick={remove} color="light">
+    <HiOutlineTrash />
+  </Button>
+);
+
+export const ReviewList = () => (
+  <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={textFieldBuilder}
+          RemoveItemButton={RemoveButton}
+          AddItemButton={AddButton}
+        >
+          {({ fields, RemoveItemButton }) => (
+            <div className="flex items-center gap-2">
+              <RemoveItemButton />
+              <div className="w-full">
+                <TextField icon={HiOutlinePlusCircle} field={fields} />
+              </div>
+            </div>
+          )}
+        </ListField>
+      </div>
+      <div className="flex flex-1 flex-col gap-4">
+        <Label>Negatives</Label>
+        <ListField
+          form={form}
+          path={["negatives"]}
+          builder={textFieldBuilder}
+          RemoveItemButton={RemoveButton}
+          AddItemButton={AddButton}
+        >
+          {({ fields, RemoveItemButton }) => (
+            <div className="flex w-full items-center gap-2">
+              <RemoveItemButton />
+              <div className="w-full">
+                <TextField icon={HiOutlineMinusCircle} field={fields} />
+              </div>
+            </div>
+          )}
+        </ListField>
+      </div>
+    </div>
+  </Card>
+);
diff --git a/yarn.lock b/yarn.lock
index dabf064..52e0c58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2706,9 +2706,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@form-atoms/field@npm:^3.8.4":
-  version: 3.8.4
-  resolution: "@form-atoms/field@npm:3.8.4"
+"@form-atoms/field@npm:^3.8.7":
+  version: 3.8.7
+  resolution: "@form-atoms/field@npm:3.8.7"
   dependencies:
     react-render-prop-type: "npm:0.1.0"
   peerDependencies:
@@ -2717,7 +2717,7 @@ __metadata:
     jotai-effect: ^0
     react: ">=16.8"
     zod: ^3
-  checksum: bf4f0f9d6864a7f85a0fd320613455f196a5b75d3be132523833e2894c1faa18b800bf444163bbd4b7fdeec2fab324e2e52d90bac8ea2fce5d744fec13c92b85
+  checksum: baeca497ce2cc146180f2f53d2aede5e95038fc3b5d422a6939752573c7030db873c4de45ed156c9c64df2b9b6cf38f1c86cfb3ee9fbb675750cd1cd82cb3f38
   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.4"
+    "@form-atoms/field": "npm:^3.8.7"
     "@mdx-js/react": "npm:^2.3.0"
     "@semantic-release/changelog": "npm:^6.0.3"
     "@semantic-release/commit-analyzer": "npm:^11.1.0"