docs(ListField): update flat example

form-atoms · Dec 4, 2023 · 9f97f99 · 9f97f99
1 parent 3fa670f
commit 9f97f99
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 44 deletions.
diff --git a/src/components/list-field/Docs.mdx b/src/components/list-field/Docs.mdx
@@ -110,33 +110,51 @@ import { ListField } from "@form-atoms/field";
 
 ```tsx
 import { formAtom, fieldAtom } from "form-atoms";
-import { ListField } from "@form-atoms/field";
+import {
+  AddItemButtonProps,
+  ListField,
+  listFieldBuilder,
+  textField,
+} from "@form-atoms/field";
+
+const typescriptBenefits = listFieldBuilder((value) =>
+  textField({ name: "ts-benefit", value }),
+);
 
-const hobbiesForm = formAtom({
-  hobbies: [fieldAtom({ value: "gardening" })],
+const form = formAtom({
+  benefits: typescriptBenefits(["safe function calls", "it's fast"]),
 });
 
 // NOTE: the keyFrom prop is not needed as the item/fieldAtom itself is used as the render key default.
 const Example = () => (
-  <ListField
-    form={hobbiesForm}
-    path={["hobbies"]}
-    builder={() => fieldAtom({ value: "" })}
-  >
-    {({ fields, RemoveItemButton }) => (
-      <div
-        style={{
-          display: "grid",
-          gridGap: 16,
-          gridTemplateColumns: "auto min-content",
-        }}
-      >
-        {/* NOTE: The item is itself a field atom */}
-        <InputField atom={fields} component="input" />
-        <RemoveItemButton />
-      </div>
-    )}
-  </ListField>
+  <>
+    <label style={{ marginBottom: 16 }}>
+      What are some benefits of TypeScript?
+    </label>
+    <ListField
+      form={form}
+      path={["benefits"]}
+      AddItemButton={({ add }: AddItemButtonProps) => (
+        <button type="button" className="outline" onClick={add}>
+          Add Benefit
+        </button>
+      )}
+      builder={typescriptBenefits}
+    >
+      {({ fields, RemoveItemButton }) => (
+        <div
+          style={{
+            display: "grid",
+            gridGap: 16,
+            gridTemplateColumns: "auto min-content",
+          }}
+        >
+          <InputField atom={fields} component="input" />
+          <RemoveItemButton />
+        </div>
+      )}
+    </ListField>
+  </>
 );
 ```
 

diff --git a/src/components/list-field/ListField.stories.tsx b/src/components/list-field/ListField.stories.tsx
@@ -78,40 +78,53 @@ export const Primary = formStory({
   },
 });
 
+const typescriptBenefits = listFieldBuilder((value) =>
+  textField({ name: "ts-benefit", value }),
+);
+
 export const Flat = formStory({
   parameters: {
     docs: {
       description: {
         story:
-          "The array items can be plain field atoms. This is usefull when you want to capture list of primitives, e.g. strings or numbers. Here our hobbies list contains `FieldAtom<string>` items.",
+          "The array items can be plain field atoms. This is usefull when you want to capture list of primitives, e.g. strings or numbers. Here our list of TypeScript benefits contains `FieldAtom<string>` items.",
       },
     },
   },
   args: {
     fields: {
-      hobbies: [fieldAtom({ value: "gardening" })],
+      benefits: typescriptBenefits(["safe function calls", "it's fast"]),
     },
     children: ({ form }) => (
-      <ListField
-        form={form}
-        path={["hobbies"]}
-        AddItemButton={AddHobbyField}
-        RemoveItemButton={RemoveButton}
-        builder={() => fieldAtom({ value: "" })}
-      >
-        {({ fields, RemoveItemButton }) => (
-          <div
-            style={{
-              display: "grid",
-              gridGap: 16,
-              gridTemplateColumns: "auto min-content",
-            }}
-          >
-            <InputField atom={fields} component="input" />
-            <RemoveItemButton />
-          </div>
-        )}
-      </ListField>
+      <>
+        <label style={{ marginBottom: 16 }}>
+          What are some benefits of TypeScript?
+        </label>
+        <ListField
+          form={form}
+          path={["benefits"]}
+          AddItemButton={({ add }: AddItemButtonProps) => (
+            <button type="button" className="outline" onClick={add}>
+              Add Benefit
+            </button>
+          )}
+          RemoveItemButton={RemoveButton}
+          builder={typescriptBenefits}
+        >
+          {({ fields, RemoveItemButton }) => (
+            <div
+              style={{
+                display: "grid",
+                gridGap: 16,
+                gridTemplateColumns: "auto min-content",
+              }}
+            >
+              <InputField atom={fields} component="input" />
+              <RemoveItemButton />
+            </div>
+          )}
+        </ListField>
+      </>
     ),
   },
 });