remix-validated-form 2.0.1-beta.1 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/.turbo/turbo-build.log +9 -0
  2. package/.turbo/turbo-dev.log +0 -0
  3. package/.turbo/turbo-test.log +10 -35
  4. package/README.md +20 -8
  5. package/browser/ValidatedForm.d.ts +13 -1
  6. package/browser/ValidatedForm.js +72 -19
  7. package/browser/index.d.ts +0 -2
  8. package/browser/index.js +0 -2
  9. package/browser/internal/submissionCallbacks.d.ts +1 -0
  10. package/browser/internal/submissionCallbacks.js +13 -0
  11. package/browser/validation/createValidator.js +12 -1
  12. package/browser/validation/types.d.ts +3 -0
  13. package/browser/validation/validation.test.js +5 -0
  14. package/build/ValidatedForm.d.ts +13 -1
  15. package/build/ValidatedForm.js +71 -18
  16. package/build/index.d.ts +0 -2
  17. package/build/index.js +0 -2
  18. package/build/internal/submissionCallbacks.d.ts +1 -0
  19. package/build/internal/submissionCallbacks.js +17 -0
  20. package/build/validation/createValidator.js +12 -1
  21. package/build/validation/types.d.ts +3 -0
  22. package/package.json +4 -9
  23. package/src/ValidatedForm.tsx +96 -18
  24. package/src/index.ts +0 -2
  25. package/src/internal/submissionCallbacks.ts +15 -0
  26. package/src/validation/createValidator.ts +12 -2
  27. package/src/validation/types.ts +2 -0
  28. package/build/test-data/testFormData.d.ts +0 -15
  29. package/build/test-data/testFormData.js +0 -50
  30. package/build/validation/validation.test.d.ts +0 -1
  31. package/build/validation/validation.test.js +0 -290
  32. package/build/validation/withYup.d.ts +0 -6
  33. package/build/validation/withYup.js +0 -44
  34. package/build/validation/withZod.d.ts +0 -6
  35. package/build/validation/withZod.js +0 -57
  36. package/jest.config.js +0 -10
  37. package/src/test-data/testFormData.ts +0 -55
  38. package/src/validation/validation.test.ts +0 -317
  39. package/src/validation/withYup.ts +0 -43
  40. package/src/validation/withZod.ts +0 -51
@@ -1,57 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.withZod = void 0;
7
- const isEqual_1 = __importDefault(require("lodash/isEqual"));
8
- const toPath_1 = __importDefault(require("lodash/toPath"));
9
- const createValidator_1 = require("./createValidator");
10
- const getIssuesForError = (err) => {
11
- return err.issues.flatMap((issue) => {
12
- if ("unionErrors" in issue) {
13
- return issue.unionErrors.flatMap((err) => getIssuesForError(err));
14
- }
15
- else {
16
- return [issue];
17
- }
18
- });
19
- };
20
- function pathToString(array) {
21
- return array.reduce(function (string, item) {
22
- var prefix = string === "" ? "" : ".";
23
- return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
24
- }, "");
25
- }
26
- /**
27
- * Create a validator using a `zod` schema.
28
- */
29
- function withZod(zodSchema) {
30
- return (0, createValidator_1.createValidator)({
31
- validate: (value) => {
32
- const result = zodSchema.safeParse(value);
33
- if (result.success)
34
- return { data: result.data, error: undefined };
35
- const fieldErrors = {};
36
- getIssuesForError(result.error).forEach((issue) => {
37
- const path = pathToString(issue.path);
38
- if (!fieldErrors[path])
39
- fieldErrors[path] = issue.message;
40
- });
41
- return { error: fieldErrors, data: undefined };
42
- },
43
- validateField: (data, field) => {
44
- var _a;
45
- const result = zodSchema.safeParse(data);
46
- if (result.success)
47
- return { error: undefined };
48
- return {
49
- error: (_a = getIssuesForError(result.error).find((issue) => {
50
- const allPathsAsString = issue.path.map((p) => `${p}`);
51
- return (0, isEqual_1.default)(allPathsAsString, (0, toPath_1.default)(field));
52
- })) === null || _a === void 0 ? void 0 : _a.message,
53
- };
54
- },
55
- });
56
- }
57
- exports.withZod = withZod;
package/jest.config.js DELETED
@@ -1,10 +0,0 @@
1
- /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
2
- module.exports = {
3
- globals: {
4
- "ts-jest": {
5
- tsconfig: "tsconfig.json",
6
- },
7
- },
8
- preset: "ts-jest",
9
- testEnvironment: "node",
10
- };
@@ -1,55 +0,0 @@
1
- // Copied from remix to use in tests
2
- // https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
3
- export class TestFormData implements FormData {
4
- private _params: URLSearchParams;
5
-
6
- constructor(body?: string) {
7
- this._params = new URLSearchParams(body);
8
- }
9
- append(name: string, value: string | Blob, fileName?: string): void {
10
- if (typeof value !== "string") {
11
- throw new Error("formData.append can only accept a string");
12
- }
13
- this._params.append(name, value);
14
- }
15
- delete(name: string): void {
16
- this._params.delete(name);
17
- }
18
- get(name: string): FormDataEntryValue | null {
19
- return this._params.get(name);
20
- }
21
- getAll(name: string): FormDataEntryValue[] {
22
- return this._params.getAll(name);
23
- }
24
- has(name: string): boolean {
25
- return this._params.has(name);
26
- }
27
- set(name: string, value: string | Blob, fileName?: string): void {
28
- if (typeof value !== "string") {
29
- throw new Error("formData.set can only accept a string");
30
- }
31
- this._params.set(name, value);
32
- }
33
- forEach(
34
- callbackfn: (
35
- value: FormDataEntryValue,
36
- key: string,
37
- parent: FormData
38
- ) => void,
39
- thisArg?: any
40
- ): void {
41
- this._params.forEach(callbackfn, thisArg);
42
- }
43
- entries(): IterableIterator<[string, FormDataEntryValue]> {
44
- return this._params.entries();
45
- }
46
- keys(): IterableIterator<string> {
47
- return this._params.keys();
48
- }
49
- values(): IterableIterator<FormDataEntryValue> {
50
- return this._params.values();
51
- }
52
- *[Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]> {
53
- yield* this._params;
54
- }
55
- }
@@ -1,317 +0,0 @@
1
- import * as yup from "yup";
2
- import { z } from "zod";
3
- import { Validator, withYup } from "..";
4
- import { TestFormData } from "../test-data/testFormData";
5
- import { withZod } from "./withZod";
6
-
7
- // If adding an adapter, write a validator that validates this shape
8
- type Person = {
9
- firstName: string;
10
- lastName: string;
11
- age?: number;
12
- address: {
13
- streetAddress: string;
14
- city: string;
15
- country: string;
16
- };
17
- pets?: {
18
- animal: string;
19
- name: string;
20
- }[];
21
- };
22
-
23
- type ValidationTestCase = {
24
- name: string;
25
- validator: Validator<Person>;
26
- };
27
-
28
- const validationTestCases: ValidationTestCase[] = [
29
- {
30
- name: "yup",
31
- validator: withYup(
32
- yup.object({
33
- firstName: yup.string().required(),
34
- lastName: yup.string().required(),
35
- age: yup.number(),
36
- address: yup
37
- .object({
38
- streetAddress: yup.string().required(),
39
- city: yup.string().required(),
40
- country: yup.string().required(),
41
- })
42
- .required(),
43
- pets: yup.array().of(
44
- yup.object({
45
- animal: yup.string().required(),
46
- name: yup.string().required(),
47
- })
48
- ),
49
- })
50
- ),
51
- },
52
- {
53
- name: "zod",
54
- validator: withZod(
55
- z.object({
56
- firstName: z.string().nonempty(),
57
- lastName: z.string().nonempty(),
58
- age: z.optional(z.number()),
59
- address: z.preprocess(
60
- (value) => (value == null ? {} : value),
61
- z.object({
62
- streetAddress: z.string().nonempty(),
63
- city: z.string().nonempty(),
64
- country: z.string().nonempty(),
65
- })
66
- ),
67
- pets: z
68
- .object({
69
- animal: z.string().nonempty(),
70
- name: z.string().nonempty(),
71
- })
72
- .array()
73
- .optional(),
74
- })
75
- ),
76
- },
77
- ];
78
-
79
- // Not going to enforce exact error strings here
80
- const anyString = expect.any(String);
81
-
82
- describe("Validation", () => {
83
- describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
84
- describe("validate", () => {
85
- it("should return the data when valid", () => {
86
- const person: Person = {
87
- firstName: "John",
88
- lastName: "Doe",
89
- age: 30,
90
- address: {
91
- streetAddress: "123 Main St",
92
- city: "Anytown",
93
- country: "USA",
94
- },
95
- pets: [{ animal: "dog", name: "Fido" }],
96
- };
97
- expect(validator.validate(person)).toEqual({
98
- data: person,
99
- error: undefined,
100
- });
101
- });
102
-
103
- it("should return field errors when invalid", () => {
104
- const obj = { age: "hi!", pets: [{ animal: "dog" }] };
105
- expect(validator.validate(obj)).toEqual({
106
- data: undefined,
107
- error: {
108
- firstName: anyString,
109
- lastName: anyString,
110
- age: anyString,
111
- "address.city": anyString,
112
- "address.country": anyString,
113
- "address.streetAddress": anyString,
114
- "pets[0].name": anyString,
115
- },
116
- });
117
- });
118
-
119
- it("should unflatten data when validating", () => {
120
- const data = {
121
- firstName: "John",
122
- lastName: "Doe",
123
- age: 30,
124
- "address.streetAddress": "123 Main St",
125
- "address.city": "Anytown",
126
- "address.country": "USA",
127
- "pets[0].animal": "dog",
128
- "pets[0].name": "Fido",
129
- };
130
- expect(validator.validate(data)).toEqual({
131
- data: {
132
- firstName: "John",
133
- lastName: "Doe",
134
- age: 30,
135
- address: {
136
- streetAddress: "123 Main St",
137
- city: "Anytown",
138
- country: "USA",
139
- },
140
- pets: [{ animal: "dog", name: "Fido" }],
141
- },
142
- error: undefined,
143
- });
144
- });
145
-
146
- it("should accept FormData directly and return errors", () => {
147
- const formData = new TestFormData();
148
- formData.set("firstName", "John");
149
- formData.set("lastName", "Doe");
150
- formData.set("address.streetAddress", "123 Main St");
151
- formData.set("address.country", "USA");
152
- formData.set("pets[0].animal", "dog");
153
-
154
- expect(validator.validate(formData)).toEqual({
155
- data: undefined,
156
- error: {
157
- "address.city": anyString,
158
- "pets[0].name": anyString,
159
- },
160
- });
161
- });
162
-
163
- it("should accept FormData directly and return valid data", () => {
164
- const formData = new TestFormData();
165
- formData.set("firstName", "John");
166
- formData.set("lastName", "Doe");
167
- formData.set("address.streetAddress", "123 Main St");
168
- formData.set("address.country", "USA");
169
- formData.set("address.city", "Anytown");
170
- formData.set("pets[0].animal", "dog");
171
- formData.set("pets[0].name", "Fido");
172
-
173
- expect(validator.validate(formData)).toEqual({
174
- data: {
175
- firstName: "John",
176
- lastName: "Doe",
177
- address: {
178
- streetAddress: "123 Main St",
179
- country: "USA",
180
- city: "Anytown",
181
- },
182
- pets: [{ animal: "dog", name: "Fido" }],
183
- },
184
- error: undefined,
185
- });
186
- });
187
- });
188
-
189
- describe("validateField", () => {
190
- it("should not return an error if field is valid", () => {
191
- const person = {
192
- firstName: "John",
193
- lastName: {}, // invalid, but we should only be validating firstName
194
- };
195
- expect(validator.validateField(person, "firstName")).toEqual({
196
- error: undefined,
197
- });
198
- });
199
- it("should not return an error if a nested field is valid", () => {
200
- const person = {
201
- firstName: "John",
202
- lastName: {}, // invalid, but we should only be validating firstName
203
- address: {
204
- streetAddress: "123 Main St",
205
- city: "Anytown",
206
- country: "USA",
207
- },
208
- pets: [{ animal: "dog", name: "Fido" }],
209
- };
210
- expect(
211
- validator.validateField(person, "address.streetAddress")
212
- ).toEqual({
213
- error: undefined,
214
- });
215
- expect(validator.validateField(person, "address.city")).toEqual({
216
- error: undefined,
217
- });
218
- expect(validator.validateField(person, "address.country")).toEqual({
219
- error: undefined,
220
- });
221
- expect(validator.validateField(person, "pets[0].animal")).toEqual({
222
- error: undefined,
223
- });
224
- expect(validator.validateField(person, "pets[0].name")).toEqual({
225
- error: undefined,
226
- });
227
- });
228
-
229
- it("should return an error if field is invalid", () => {
230
- const person = {
231
- firstName: "John",
232
- lastName: {},
233
- address: {
234
- streetAddress: "123 Main St",
235
- city: 1234,
236
- },
237
- };
238
- expect(validator.validateField(person, "lastName")).toEqual({
239
- error: anyString,
240
- });
241
- });
242
-
243
- it("should return an error if a nested field is invalid", () => {
244
- const person = {
245
- firstName: "John",
246
- lastName: {},
247
- address: {
248
- streetAddress: "123 Main St",
249
- city: 1234,
250
- },
251
- pets: [{ animal: "dog" }],
252
- };
253
- expect(validator.validateField(person, "address.country")).toEqual({
254
- error: anyString,
255
- });
256
- expect(validator.validateField(person, "pets[0].name")).toEqual({
257
- error: anyString,
258
- });
259
- });
260
- });
261
- });
262
- });
263
-
264
- describe("withZod", () => {
265
- it("returns coherent errors for complex schemas", () => {
266
- const schema = z.union([
267
- z.object({
268
- type: z.literal("foo"),
269
- foo: z.string(),
270
- }),
271
- z.object({
272
- type: z.literal("bar"),
273
- bar: z.string(),
274
- }),
275
- ]);
276
- const obj = {
277
- type: "foo",
278
- bar: 123,
279
- foo: 123,
280
- };
281
-
282
- expect(withZod(schema).validate(obj)).toEqual({
283
- data: undefined,
284
- error: {
285
- type: anyString,
286
- bar: anyString,
287
- foo: anyString,
288
- },
289
- });
290
- });
291
-
292
- it("returns errors for fields that are unions", () => {
293
- const schema = z.object({
294
- field1: z.union([z.literal("foo"), z.literal("bar")]),
295
- field2: z.union([z.literal("foo"), z.literal("bar")]),
296
- });
297
- const obj = {
298
- field1: "a value",
299
- // field2 missing
300
- };
301
-
302
- const validator = withZod(schema);
303
- expect(validator.validate(obj)).toEqual({
304
- data: undefined,
305
- error: {
306
- field1: anyString,
307
- field2: anyString,
308
- },
309
- });
310
- expect(validator.validateField(obj, "field1")).toEqual({
311
- error: anyString,
312
- });
313
- expect(validator.validateField(obj, "field2")).toEqual({
314
- error: anyString,
315
- });
316
- });
317
- });
@@ -1,43 +0,0 @@
1
- import type { AnyObjectSchema, InferType, ValidationError } from "yup";
2
- import { createValidator } from "./createValidator";
3
- import { FieldErrors, Validator } from "./types";
4
-
5
- const validationErrorToFieldErrors = (error: ValidationError): FieldErrors => {
6
- const fieldErrors: FieldErrors = {};
7
- error.inner.forEach((innerError) => {
8
- if (!innerError.path) return;
9
- fieldErrors[innerError.path] = innerError.message;
10
- });
11
- return fieldErrors;
12
- };
13
-
14
- /**
15
- * Create a `Validator` using a `yup` schema.
16
- */
17
- export const withYup = <Schema extends AnyObjectSchema>(
18
- validationSchema: Schema
19
- ): Validator<InferType<Schema>> => {
20
- return createValidator({
21
- validate: (data) => {
22
- try {
23
- const validated = validationSchema.validateSync(data, {
24
- abortEarly: false,
25
- });
26
- return { data: validated, error: undefined };
27
- } catch (err) {
28
- return {
29
- error: validationErrorToFieldErrors(err as ValidationError),
30
- data: undefined,
31
- };
32
- }
33
- },
34
- validateField: (data, field) => {
35
- try {
36
- validationSchema.validateSyncAt(field, data);
37
- return {};
38
- } catch (err) {
39
- return { error: (err as ValidationError).message };
40
- }
41
- },
42
- });
43
- };
@@ -1,51 +0,0 @@
1
- import isEqual from "lodash/isEqual";
2
- import toPath from "lodash/toPath";
3
- import type { z } from "zod";
4
- import { FieldErrors, Validator } from "..";
5
- import { createValidator } from "./createValidator";
6
-
7
- const getIssuesForError = (err: z.ZodError<any>): z.ZodIssue[] => {
8
- return err.issues.flatMap((issue) => {
9
- if ("unionErrors" in issue) {
10
- return issue.unionErrors.flatMap((err) => getIssuesForError(err));
11
- } else {
12
- return [issue];
13
- }
14
- });
15
- };
16
-
17
- function pathToString(array: (string | number)[]): string {
18
- return array.reduce(function (string: string, item: string | number) {
19
- var prefix = string === "" ? "" : ".";
20
- return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
21
- }, "");
22
- }
23
-
24
- /**
25
- * Create a validator using a `zod` schema.
26
- */
27
- export function withZod<T>(zodSchema: z.Schema<T>): Validator<T> {
28
- return createValidator({
29
- validate: (value) => {
30
- const result = zodSchema.safeParse(value);
31
- if (result.success) return { data: result.data, error: undefined };
32
-
33
- const fieldErrors: FieldErrors = {};
34
- getIssuesForError(result.error).forEach((issue) => {
35
- const path = pathToString(issue.path);
36
- if (!fieldErrors[path]) fieldErrors[path] = issue.message;
37
- });
38
- return { error: fieldErrors, data: undefined };
39
- },
40
- validateField: (data, field) => {
41
- const result = zodSchema.safeParse(data);
42
- if (result.success) return { error: undefined };
43
- return {
44
- error: getIssuesForError(result.error).find((issue) => {
45
- const allPathsAsString = issue.path.map((p) => `${p}`);
46
- return isEqual(allPathsAsString, toPath(field));
47
- })?.message,
48
- };
49
- },
50
- });
51
- }