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