From 1e7bc951f705054b0251ea002c58c26ad30b6197 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 22 Mar 2024 09:32:38 +0100
Subject: [PATCH] docs: validate values in ascending order

---
 src/components/list/Docs.mdx         | 78 ++++++++++++++++++++++++++++
 src/components/list/List.stories.tsx | 64 ++++++++++++++++++++++-
 src/story/PicoFieldErrors.tsx        | 17 ++++++
 3 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 src/story/PicoFieldErrors.tsx

diff --git a/src/components/list/Docs.mdx b/src/components/list/Docs.mdx
index 0b37bd3..481163a 100644
--- a/src/components/list/Docs.mdx
+++ b/src/components/list/Docs.mdx
@@ -451,3 +451,81 @@ const RemoveButton = ({ remove }: RemoveButtonProps) => (
 ```
 
 </Example>
+
+<Example of={ListStories.ValidateAscendingValues} >
+
+```tsx
+import { fieldAtom, InputField } from "form-atoms";
+import { List, listAtom } from "@form-atoms/list-atom";
+
+const levels = listAtom({
+  value: [],
+  name: "levels",
+  fields: ({ level }) => ({ level: fieldAtom<number>({ value: level }) }),
+  validate: ({ value }) => {
+    const errors: string[] = [];
+
+    if (1 < value.length) {
+      let [current] = value;
+
+      value.forEach((value, index) => {
+        if (index === 0) {
+          return;
+        }
+
+        if (value.level <= current!.level) {
+          errors.push(
+            `Level at index ${index} must greater than the previous.`,
+          );
+        }
+
+        current = value;
+      });
+    }
+
+    return errors;
+  },
+});
+
+const Example = () => (
+  <>
+    <List atom={levels} initialValue={[10, 30, 20].map((level) => ({ level }))}>
+      {({ fields, moveUp, moveDown, RemoveButton }) => (
+        <div
+          style={{
+            display: "grid",
+            gridGap: 16,
+            gridTemplateColumns: "auto min-content min-content min-content",
+          }}
+        >
+          <InputField atom={fields.level} component="input" />
+          <button type="button" className="outline" onClick={moveUp}>
+            Up
+          </button>
+          <button type="button" className="outline" onClick={moveDown}>
+            Down
+          </button>
+          <RemoveButton />
+        </div>
+      )}
+    </List>
+    <FieldErrors atom={levels} />
+  </>
+);
+
+const FieldErrors = ({ atom }: { atom: FieldAtom<any> }) => {
+  const errors = useFieldErrors(atom);
+
+  return (
+    <>
+      {errors.map((error, index) => (
+        <p key={index} style={{ color: "var(--pico-color-red-550)" }}>
+          {error}
+        </p>
+      ))}
+    </>
+  );
+};
+```
+
+</Example>
diff --git a/src/components/list/List.stories.tsx b/src/components/list/List.stories.tsx
index 27f2167..a8daae5 100644
--- a/src/components/list/List.stories.tsx
+++ b/src/components/list/List.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryObj } from "@storybook/react";
 import {
-  FieldAtom,
+  type FieldAtom,
   type FormFieldValues,
   type FormFields,
   InputField,
@@ -10,6 +10,7 @@ import {
 
 import { AddButtonProps, List, ListProps, RemoveButtonProps } from "./List";
 import { listAtom } from "../../atoms";
+import { PicoFieldErrors } from "../../story/PicoFieldErrors";
 import { PicoFieldName } from "../../story/PicoFieldName";
 import { StoryForm } from "../../story/StoryForm";
 
@@ -447,3 +448,64 @@ export const ProgrammaticallySetValue = listStory({
     );
   },
 });
+
+export const ValidateAscendingValues = listStory({
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    initialValue: [{ level: 10 }, { level: 30 }, { level: 20 }],
+    atom: listAtom({
+      name: "levels",
+      value: [{ level: 0 }],
+      fields: ({ level }) => ({ level: fieldAtom<number>({ value: level }) }),
+      validate: ({ value }) => {
+        const errors: string[] = [];
+
+        if (1 < value.length) {
+          let [current] = value;
+
+          value.forEach((value, index) => {
+            if (index === 0) {
+              return;
+            }
+
+            if (value.level <= current!.level) {
+              errors.push(
+                `Level at index ${index} must greater than the previous.`,
+              );
+            }
+
+            current = value;
+          });
+        }
+
+        return errors;
+      },
+    }),
+    children: ({ fields, moveUp, moveDown, RemoveButton }) => (
+      <fieldset role="group">
+        <InputField atom={fields.level} component="input" type="number" />
+        <button type="button" className="outline" onClick={moveUp}>
+          Up
+        </button>
+        <button type="button" className="outline" onClick={moveDown}>
+          Down
+        </button>
+        <RemoveButton />
+      </fieldset>
+    ),
+  },
+  render: (props) => {
+    return (
+      <>
+        <List {...props} />
+        <PicoFieldErrors atom={props.atom} />
+      </>
+    );
+  },
+});
diff --git a/src/story/PicoFieldErrors.tsx b/src/story/PicoFieldErrors.tsx
new file mode 100644
index 0000000..7d62f9c
--- /dev/null
+++ b/src/story/PicoFieldErrors.tsx
@@ -0,0 +1,17 @@
+import { FieldAtom, useFieldErrors } from "form-atoms";
+
+const style = { color: "var(--pico-color-red-550)" };
+
+export const PicoFieldErrors = ({ atom }: { atom: FieldAtom<any> }) => {
+  const errors = useFieldErrors(atom);
+
+  return (
+    <>
+      {errors.map((error, index) => (
+        <p key={index} style={style}>
+          {error}
+        </p>
+      ))}
+    </>
+  );
+};