diff --git a/src/scenarios/dependent-validation/PasswordValidation.stories.tsx b/src/scenarios/dependent-validation/DependentValidation.stories.tsx
similarity index 56%
rename from src/scenarios/dependent-validation/PasswordValidation.stories.tsx
rename to src/scenarios/dependent-validation/DependentValidation.stories.tsx
index 5397085..2cce0ee 100644
--- a/src/scenarios/dependent-validation/PasswordValidation.stories.tsx
+++ b/src/scenarios/dependent-validation/DependentValidation.stories.tsx
@@ -1,41 +1,63 @@
import { InputField } from "form-atoms";
-import { zodValidate } from "form-atoms/zod";
import { z } from "zod";
import { FieldErrors, FieldLabel } from "../../components";
+import { numberField } from "../../fields/number-field";
+import { NumberInput } from "../../fields/number-field/NumberInput.mock";
import { textField } from "../../fields/text-field";
import { formStory, meta } from "../StoryForm";
export default {
...meta,
- title: "guides/PasswordValidation",
+ title: "scenarios/DependentValidation",
};
+const min = numberField({
+ name: "min",
+ schema: z.number().min(0),
+});
+
+const max = numberField({
+ name: "max",
+ // @ts-expect-error https://github.com/microsoft/TypeScript/issues/54539
+ schema: (s, get) => {
+ const minVal = get(get(min).value);
+ return z.number().min(minVal ?? 0);
+ },
+});
+
+export const Range = formStory({
+ args: {
+ fields: {
+ min,
+ max,
+ },
+ children: ({ fields }) => (
+ <>
+
+
+ >
+ ),
+ },
+});
+
const password = textField({
name: "password",
schema: z.string().min(6),
});
+// TODO: custom error
const confirmPassword = textField({
name: "confirmPassword",
- validate: zodValidate(
- (get) => {
- const initialPassword = get(get(password).value);
+ // @ts-expect-error https://github.com/microsoft/TypeScript/issues/54539
+ schema: (s, get) => {
+ const initialPassword = get(get(password).value);
- return z.literal(initialPassword);
- },
- {
- on: "change",
- formatError: ({ issues }) => {
- return issues.map(({ code, message }) =>
- code === "invalid_literal" ? "Passwords must match" : message,
- );
- },
- },
- ),
+ return z.literal(initialPassword);
+ },
});
-export const Primary = formStory({
+export const PasswordValidation = formStory({
args: {
fields: {
password,
diff --git a/src/scenarios/dependent-validation/Docs.mdx b/src/scenarios/dependent-validation/Docs.mdx
index 039d508..fc7b1e2 100644
--- a/src/scenarios/dependent-validation/Docs.mdx
+++ b/src/scenarios/dependent-validation/Docs.mdx
@@ -1,7 +1,7 @@
import { Meta, Markdown, Stories } from "@storybook/blocks";
-import * as PasswordValidation from "./PasswordValidation.stories";
+import * as DependentValidation from "./DependentValidation.stories";
-
+
# Dependend field validation