docs: expose example for prepending items

form-atoms · Apr 19, 2024 · 9d3654f · 9d3654f
1 parent a01dcd9
commit 9d3654f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 17 deletions.
diff --git a/src/components/list/Docs.mdx b/src/components/list/Docs.mdx
@@ -203,15 +203,16 @@ const hobbies = listAtom({
 });
 
 const Example = () => (
-  <List atom={hobbies} initialValue={["coding", "gardening", "mountain bike"]}>
+  <List
+    atom={hobbies}
+    initialValue={[
+      { hobby: "coding" },
+      { hobby: "gardening" },
+      { hobby: "mountain bike" },
+    ]}
+  >
     {({ fields, moveUp, moveDown, RemoveButton }) => (
-      <div
-        style={{
-          display: "grid",
-          gridGap: 16,
-          gridTemplateColumns: "auto min-content min-content min-content",
-        }}
-      >
+      <fieldset role="group">
         <InputField atom={fields.hobby} component="input" />
         <button type="button" className="outline" onClick={moveUp}>
           Up
@@ -220,7 +221,43 @@ const Example = () => (
           Down
         </button>
         <RemoveButton />
-      </div>
+      </fieldset>
+    )}
+  </List>
+);
+```
+
+</Example>
+
+<Example of={ListStories.Prepend} >
+
+```tsx
+import { fieldAtom, InputField } from "form-atoms";
+import { List, listAtom } from "@form-atoms/list-atom";
+
+const hobbies = listAtom({
+  value: [],
+  name: "hobbies",
+  fields: ({ hobby }) => ({ hobby: fieldAtom({ value: hobby }) }),
+});
+
+const Example = () => (
+  <List
+    atom={hobbies}
+    initialValue={[
+      { hobby: "swimming" },
+      { hobby: "gardening" },
+      { hobby: "coding" },
+    ]}
+  >
+    {({ fields, RemoveButton, add, item }) => (
+      <fieldset role="group">
+        <InputField atom={fields.hobby} component="input" />
+        <button type="button" className="outline" onClick={() => add(item)}>
+          Prepend
+        </button>
+        <RemoveButton />
+      </fieldset>
     )}
   </List>
 );

diff --git a/src/components/list/List.stories.tsx b/src/components/list/List.stories.tsx
@@ -193,21 +193,20 @@ export const Prepend = listStory({
       value: [{ hobby: "gardening" }],
       fields: ({ hobby }) => ({ hobby: fieldAtom({ value: hobby }) }),
     }),
+    initialValue: [
+      { hobby: "swimming" },
+      { hobby: "gardening" },
+      { hobby: "coding" },
+    ],
     AddButton: AddHobbyButton,
     children: ({ fields, RemoveButton, add, item }) => (
-      <div
-        style={{
-          display: "grid",
-          gridGap: 16,
-          gridTemplateColumns: "auto min-content min-content",
-        }}
-      >
+      <fieldset role="group">
         <InputField atom={fields.hobby} component="input" />
         <button type="button" className="outline" onClick={() => add(item)}>
           Prepend
         </button>
         <RemoveButton />
-      </div>
+      </fieldset>
     ),
   },
 });