Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"tailwindcss": "^4.1.0",
"zod": "^3.23.6"
"zod": "^3.25.x"
},
"dependencies": {
"@douglasneuroinformatics/libjs": "^2.8.0",
Expand Down
16 changes: 8 additions & 8 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions src/components/Form/Form.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import type { FormFields } from '@douglasneuroinformatics/libui-form-types';
import type FormTypes from '@douglasneuroinformatics/libui-form-types';
import type { Meta, StoryObj } from '@storybook/react';
import type { IntRange } from 'type-fest';
import { z } from 'zod';
import { z } from 'zod/v4';

import { Heading } from '../Heading';
import { Form } from './Form';

import type { ZodTypeLike } from './types';

const DISABLED = false;

const $ExampleFormData = z.object({
Expand Down Expand Up @@ -49,7 +51,7 @@ const $ExampleFormData = z.object({
stringRadio: z.enum(['a', 'b', 'c']).optional()
});
type ExampleFormSchemaType = typeof $ExampleFormData;
type ExampleFormData = z.TypeOf<typeof $ExampleFormData>;
type ExampleFormData = z.infer<typeof $ExampleFormData>;

const $SimpleExampleFormData = z.object({
name: z.string()
Expand Down Expand Up @@ -513,7 +515,7 @@ export const WithPreventReset: StoryObj<typeof Form<SimpleExampleFormSchemaType>
}
};

export const WithSuspend: StoryObj<typeof Form<z.ZodType<FormTypes.Data>, { delay?: number }>> = {
export const WithSuspend: StoryObj<typeof Form<ZodTypeLike<FormTypes.Data>, { delay?: number }>> = {
args: {
content: {
delay: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Form/Form.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import type { Mock } from 'vitest';
import { z } from 'zod';
import { z } from 'zod/v4';

import { Form } from './Form';

Expand Down
13 changes: 6 additions & 7 deletions src/components/Form/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import type {
import { get, set } from 'lodash-es';
import { twMerge } from 'tailwind-merge';
import type { Promisable } from 'type-fest';
import { z } from 'zod';

import { useTranslation } from '@/hooks';
import { cn } from '@/utils';
Expand All @@ -22,9 +21,9 @@ import { ErrorMessage } from './ErrorMessage';
import { FieldsComponent } from './FieldsComponent';
import { getInitialValues } from './utils';

import type { FormErrors } from './types';
import type { FormErrors, ZodErrorLike, ZodTypeLike } from './types';

type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>> = {
type FormProps<TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['_input'] = TSchema['_input']> = {
[key: `data-${string}`]: unknown;
additionalButtons?: {
left?: React.ReactNode;
Expand All @@ -42,18 +41,18 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
onBeforeSubmit?:
| ((data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>)
| null;
onError?: (error: z.ZodError<NoInfer<TData>>) => void;
onError?: (error: ZodErrorLike) => void;
onSubmit: (data: NoInfer<TData>) => Promisable<void>;
preventResetValuesOnReset?: boolean;
readOnly?: boolean;
resetBtn?: boolean;
revalidateOnBlur?: boolean;
submitBtnLabel?: string;
suspendWhileSubmitting?: boolean;
validationSchema: z.ZodType<TData>;
validationSchema: ZodTypeLike<TData>;
};

const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['_input'] = TSchema['_input']>({
additionalButtons,
className,
content,
Expand Down Expand Up @@ -81,7 +80,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
);
const [isSubmitting, setIsSubmitting] = useState(false);

const handleError = (error: z.ZodError<TData>) => {
const handleError = (error: ZodErrorLike) => {
const fieldErrors: FormErrors<TData> = {};
const rootErrors: string[] = [];
for (const issue of error.issues) {
Expand Down
33 changes: 33 additions & 0 deletions src/components/Form/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,36 @@ export type BaseFieldComponentProps<TValue extends FormFieldValue = FormFieldVal
export type FormErrors<TData extends FormDataType = FormDataType> = {
[K in keyof TData]?: FieldError<TData[K]>;
};

export type ZodIssueLike = {
[key: string]: any;
readonly code: string;
readonly message: string;
readonly path: PropertyKey[];
};

export type ZodErrorLike = {
cause?: unknown;
issues: ZodIssueLike[];
name: string;
};

export type ZodSafeParseResultLike<T> = ZodSafeParseErrorLike | ZodSafeParseSuccessLike<T>;

export type ZodSafeParseSuccessLike<TOutput> = {
data: TOutput;
error?: never;
success: true;
};

export type ZodSafeParseErrorLike = {
data?: never;
error: ZodErrorLike;
success: false;
};

export type ZodTypeLike<TOutput, TInput = TOutput> = {
readonly _input: TInput;
readonly _output: TOutput;
safeParseAsync: (data: unknown) => Promise<ZodSafeParseResultLike<TOutput>>;
};