docs(listField): add prepend story

form-atoms · Oct 23, 2023 · 99a29a9 · 99a29a9
1 parent 660ef63
commit 99a29a9
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/src/components/list-field/ListField.stories.tsx b/src/components/list-field/ListField.stories.tsx
@@ -111,6 +111,46 @@ export const Flat = formStory({
   },
 });
 
+export const Prepend = formStory({
+  parameters: {
+    docs: {
+      description: {
+        story: "New list items can be prepended to any of the existing items.",
+      },
+    },
+  },
+  args: {
+    fields: {
+      hobbies: [fieldAtom({ value: "gardening" })],
+    },
+    children: ({ form }) => (
+      <ListField
+        form={form}
+        path={["hobbies"]}
+        AddItemButton={AddHobbyField}
+        RemoveItemButton={RemoveButton}
+        builder={() => fieldAtom({ value: "" })}
+      >
+        {({ fields, RemoveItemButton, add, atom }) => (
+          <div
+            style={{
+              display: "grid",
+              gridGap: 16,
+              gridTemplateColumns: "auto min-content min-content",
+            }}
+          >
+            <InputField atom={fields} component="input" />
+            <button type="button" className="outline" onClick={() => add(atom)}>
+              Prepend
+            </button>
+            <RemoveItemButton />
+          </div>
+        )}
+      </ListField>
+    ),
+  },
+});
+
 export const Nested = formStory({
   args: {
     fields: {