docs: story form not resetable for list field

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

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/components/list-field/Docs.mdx b/src/components/list-field/Docs.mdx
@@ -90,16 +90,6 @@ const Example = () => (
 - ✅ Handles adding and removal of array items.
 - ✅ Supports deeply nested arrays in arrays.
 
-## Usage
-
-```ts
-import { ListField } from "@form-atoms/field";
-```
-
-### Props
-
-<Controls of={ListFieldStories.Primary} sort="requiredFirst" />
-
 ## Examples
 
 ### Flat

diff --git a/src/components/list-field/ListField.stories.tsx b/src/components/list-field/ListField.stories.tsx
@@ -31,6 +31,7 @@ export const Primary = formStory({
     },
   },
   args: {
+    resettable: false,
     fields: {
       envVars: envVarsBuilder([
         { variable: "GITHUB_TOKEN", value: "ff52d09a" },
@@ -92,6 +93,7 @@ export const Flat = formStory({
     },
   },
   args: {
+    resettable: false,
     fields: {
       benefits: typescriptBenefits(["safe function calls", "it's fast"]),
     },
@@ -138,6 +140,7 @@ export const Prepend = formStory({
     },
   },
   args: {
+    resettable: false,
     fields: {
       hobbies: [fieldAtom({ value: "gardening" })],
     },
@@ -179,6 +182,7 @@ export const Ordering = formStory({
     },
   },
   args: {
+    resettable: false,
     fields: {
       hobbies: [fieldAtom({ value: "gardening" })],
     },
@@ -215,6 +219,7 @@ export const Ordering = formStory({
 
 export const Nested = formStory({
   args: {
+    resettable: false,
     fields: {
       people: [
         {
@@ -296,6 +301,7 @@ export const Nested = formStory({
 
 export const WithRadioControl = formStory({
   args: {
+    resettable: false,
     fields: {
       phones: [
         {

diff --git a/src/scenarios/StoryForm.tsx b/src/scenarios/StoryForm.tsx
@@ -6,6 +6,7 @@ import { RenderProp } from "react-render-prop-type";
 
 type Props<Fields extends FormFields> = {
   fields: Fields;
+  resettable?: boolean;
   required?: boolean;
 } & RenderProp<{
   form: FormAtom<Fields>;
@@ -14,6 +15,7 @@ type Props<Fields extends FormFields> = {
 }>;
 
 export const StoryForm = <Fields extends FormFields>({
+  resettable = true,
   fields,
   children,
   required = true,
@@ -25,9 +27,11 @@ export const StoryForm = <Fields extends FormFields>({
     <form onSubmit={submit(action("submit"))}>
       {children({ fields, required, form })}
       <button>Submit</button>
-      <button className="outline secondary" type="button" onClick={reset}>
-        Reset
-      </button>
+      {resettable && (
+        <button className="outline secondary" type="button" onClick={reset}>
+          Reset
+        </button>
+      )}
     </form>
   );
 };