remix-validated-form 1.1.0 → 2.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.
- package/.eslintcache +1 -1
- package/.prettierignore +2 -0
- package/README.md +72 -19
- package/browser/ValidatedForm.d.ts +22 -0
- package/browser/ValidatedForm.js +5 -2
- package/browser/flatten.d.ts +4 -0
- package/browser/flatten.js +35 -0
- package/browser/hooks.d.ts +28 -3
- package/browser/hooks.js +17 -2
- package/browser/index.d.ts +3 -0
- package/browser/index.js +2 -0
- package/browser/internal/flatten.d.ts +4 -0
- package/browser/internal/flatten.js +35 -0
- package/browser/internal/formContext.d.ts +18 -0
- package/browser/server.d.ts +5 -0
- package/browser/server.js +5 -0
- package/browser/test-data/testFormData.d.ts +15 -0
- package/browser/test-data/testFormData.js +46 -0
- package/browser/validation/createValidator.d.ts +7 -0
- package/browser/validation/createValidator.js +19 -0
- package/browser/validation/types.d.ts +14 -2
- package/browser/validation/validation.test.js +157 -8
- package/browser/validation/withYup.d.ts +3 -0
- package/browser/validation/withYup.js +31 -25
- package/browser/validation/withZod.d.ts +3 -0
- package/browser/validation/withZod.js +19 -4
- package/build/ValidatedForm.d.ts +22 -0
- package/build/ValidatedForm.js +5 -2
- package/build/flatten.d.ts +4 -0
- package/build/flatten.js +43 -0
- package/build/hooks.d.ts +28 -3
- package/build/hooks.js +20 -2
- package/build/index.d.ts +3 -0
- package/build/index.js +2 -0
- package/build/internal/flatten.d.ts +4 -0
- package/build/internal/flatten.js +43 -0
- package/build/internal/formContext.d.ts +18 -0
- package/build/server.d.ts +5 -0
- package/build/server.js +5 -0
- package/build/test-data/testFormData.d.ts +15 -0
- package/build/test-data/testFormData.js +50 -0
- package/build/validation/createValidator.d.ts +7 -0
- package/build/validation/createValidator.js +23 -0
- package/build/validation/types.d.ts +14 -2
- package/build/validation/validation.test.js +157 -8
- package/build/validation/withYup.d.ts +3 -0
- package/build/validation/withYup.js +31 -25
- package/build/validation/withZod.d.ts +3 -0
- package/build/validation/withZod.js +22 -4
- package/package.json +18 -13
- package/sample-app/.env +7 -0
- package/sample-app/README.md +53 -0
- package/sample-app/app/components/ErrorBox.tsx +34 -0
- package/sample-app/app/components/FormInput.tsx +40 -0
- package/sample-app/app/components/FormSelect.tsx +37 -0
- package/sample-app/app/components/SubjectForm.tsx +150 -0
- package/sample-app/app/entry.client.tsx +4 -0
- package/sample-app/app/entry.server.tsx +21 -0
- package/sample-app/app/root.tsx +92 -0
- package/sample-app/app/routes/index.tsx +5 -0
- package/sample-app/app/routes/subjects/$id.edit.tsx +98 -0
- package/sample-app/app/routes/subjects/index.tsx +112 -0
- package/sample-app/app/routes/subjects/new.tsx +46 -0
- package/sample-app/app/services/db.server.ts +23 -0
- package/sample-app/app/types.ts +6 -0
- package/sample-app/package-lock.json +10890 -0
- package/sample-app/package.json +36 -0
- package/sample-app/prisma/dev.db +0 -0
- package/sample-app/prisma/schema.prisma +34 -0
- package/sample-app/public/favicon.ico +0 -0
- package/sample-app/remix.config.js +10 -0
- package/sample-app/remix.env.d.ts +2 -0
@@ -0,0 +1,50 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.TestFormData = void 0;
|
4
|
+
// Copied from remix to use in tests
|
5
|
+
// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
|
6
|
+
class TestFormData {
|
7
|
+
constructor(body) {
|
8
|
+
this._params = new URLSearchParams(body);
|
9
|
+
}
|
10
|
+
append(name, value, fileName) {
|
11
|
+
if (typeof value !== "string") {
|
12
|
+
throw new Error("formData.append can only accept a string");
|
13
|
+
}
|
14
|
+
this._params.append(name, value);
|
15
|
+
}
|
16
|
+
delete(name) {
|
17
|
+
this._params.delete(name);
|
18
|
+
}
|
19
|
+
get(name) {
|
20
|
+
return this._params.get(name);
|
21
|
+
}
|
22
|
+
getAll(name) {
|
23
|
+
return this._params.getAll(name);
|
24
|
+
}
|
25
|
+
has(name) {
|
26
|
+
return this._params.has(name);
|
27
|
+
}
|
28
|
+
set(name, value, fileName) {
|
29
|
+
if (typeof value !== "string") {
|
30
|
+
throw new Error("formData.set can only accept a string");
|
31
|
+
}
|
32
|
+
this._params.set(name, value);
|
33
|
+
}
|
34
|
+
forEach(callbackfn, thisArg) {
|
35
|
+
this._params.forEach(callbackfn, thisArg);
|
36
|
+
}
|
37
|
+
entries() {
|
38
|
+
return this._params.entries();
|
39
|
+
}
|
40
|
+
keys() {
|
41
|
+
return this._params.keys();
|
42
|
+
}
|
43
|
+
values() {
|
44
|
+
return this._params.values();
|
45
|
+
}
|
46
|
+
*[Symbol.iterator]() {
|
47
|
+
yield* this._params;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
exports.TestFormData = TestFormData;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Validator } from "..";
|
2
|
+
/**
|
3
|
+
* Used to create a validator for a form.
|
4
|
+
* It provides built-in handling for unflattening nested objects and
|
5
|
+
* extracting the values from FormData.
|
6
|
+
*/
|
7
|
+
export declare function createValidator<T>(validator: Validator<T>): Validator<T>;
|
@@ -0,0 +1,23 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.createValidator = void 0;
|
4
|
+
const flatten_1 = require("../internal/flatten");
|
5
|
+
const preprocessFormData = (data) => {
|
6
|
+
// A slightly janky way of determining if the data is a FormData object
|
7
|
+
// since node doesn't really have FormData
|
8
|
+
if ("entries" in data && typeof data.entries === "function")
|
9
|
+
return (0, flatten_1.objectFromPathEntries)([...data.entries()]);
|
10
|
+
return (0, flatten_1.objectFromPathEntries)(Object.entries(data));
|
11
|
+
};
|
12
|
+
/**
|
13
|
+
* Used to create a validator for a form.
|
14
|
+
* It provides built-in handling for unflattening nested objects and
|
15
|
+
* extracting the values from FormData.
|
16
|
+
*/
|
17
|
+
function createValidator(validator) {
|
18
|
+
return {
|
19
|
+
validate: (value) => validator.validate(preprocessFormData(value)),
|
20
|
+
validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
|
21
|
+
};
|
22
|
+
}
|
23
|
+
exports.createValidator = createValidator;
|
@@ -1,4 +1,10 @@
|
|
1
1
|
export declare type FieldErrors = Record<string, string>;
|
2
|
+
export declare type GenericObject = {
|
3
|
+
[key: string]: any;
|
4
|
+
};
|
5
|
+
/**
|
6
|
+
* The result when validating a form.
|
7
|
+
*/
|
2
8
|
export declare type ValidationResult<DataType> = {
|
3
9
|
data: DataType;
|
4
10
|
error: undefined;
|
@@ -6,10 +12,16 @@ export declare type ValidationResult<DataType> = {
|
|
6
12
|
error: FieldErrors;
|
7
13
|
data: undefined;
|
8
14
|
};
|
15
|
+
/**
|
16
|
+
* The result when validating an individual field in a form.
|
17
|
+
*/
|
9
18
|
export declare type ValidateFieldResult = {
|
10
19
|
error?: string;
|
11
20
|
};
|
21
|
+
/**
|
22
|
+
* A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
|
23
|
+
*/
|
12
24
|
export declare type Validator<DataType> = {
|
13
|
-
validate: (unvalidatedData:
|
14
|
-
validateField: (unvalidatedData:
|
25
|
+
validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
|
26
|
+
validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
|
15
27
|
};
|
@@ -22,6 +22,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
22
|
const yup = __importStar(require("yup"));
|
23
23
|
const zod_1 = require("zod");
|
24
24
|
const __1 = require("..");
|
25
|
+
const testFormData_1 = require("../test-data/testFormData");
|
25
26
|
const withZod_1 = require("./withZod");
|
26
27
|
const validationTestCases = [
|
27
28
|
{
|
@@ -30,6 +31,17 @@ const validationTestCases = [
|
|
30
31
|
firstName: yup.string().required(),
|
31
32
|
lastName: yup.string().required(),
|
32
33
|
age: yup.number(),
|
34
|
+
address: yup
|
35
|
+
.object({
|
36
|
+
streetAddress: yup.string().required(),
|
37
|
+
city: yup.string().required(),
|
38
|
+
country: yup.string().required(),
|
39
|
+
})
|
40
|
+
.required(),
|
41
|
+
pets: yup.array().of(yup.object({
|
42
|
+
animal: yup.string().required(),
|
43
|
+
name: yup.string().required(),
|
44
|
+
})),
|
33
45
|
})),
|
34
46
|
},
|
35
47
|
{
|
@@ -38,6 +50,18 @@ const validationTestCases = [
|
|
38
50
|
firstName: zod_1.z.string().nonempty(),
|
39
51
|
lastName: zod_1.z.string().nonempty(),
|
40
52
|
age: zod_1.z.optional(zod_1.z.number()),
|
53
|
+
address: zod_1.z.preprocess((value) => (value == null ? {} : value), zod_1.z.object({
|
54
|
+
streetAddress: zod_1.z.string().nonempty(),
|
55
|
+
city: zod_1.z.string().nonempty(),
|
56
|
+
country: zod_1.z.string().nonempty(),
|
57
|
+
})),
|
58
|
+
pets: zod_1.z
|
59
|
+
.object({
|
60
|
+
animal: zod_1.z.string().nonempty(),
|
61
|
+
name: zod_1.z.string().nonempty(),
|
62
|
+
})
|
63
|
+
.array()
|
64
|
+
.optional(),
|
41
65
|
})),
|
42
66
|
},
|
43
67
|
];
|
@@ -47,41 +71,166 @@ describe("Validation", () => {
|
|
47
71
|
describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
|
48
72
|
describe("validate", () => {
|
49
73
|
it("should return the data when valid", () => {
|
50
|
-
const
|
74
|
+
const person = {
|
51
75
|
firstName: "John",
|
52
76
|
lastName: "Doe",
|
53
77
|
age: 30,
|
78
|
+
address: {
|
79
|
+
streetAddress: "123 Main St",
|
80
|
+
city: "Anytown",
|
81
|
+
country: "USA",
|
82
|
+
},
|
83
|
+
pets: [{ animal: "dog", name: "Fido" }],
|
54
84
|
};
|
55
|
-
expect(validator.validate(
|
56
|
-
data:
|
85
|
+
expect(validator.validate(person)).toEqual({
|
86
|
+
data: person,
|
57
87
|
error: undefined,
|
58
88
|
});
|
59
89
|
});
|
60
90
|
it("should return field errors when invalid", () => {
|
61
|
-
const obj = { age: "hi!" };
|
91
|
+
const obj = { age: "hi!", pets: [{ animal: "dog" }] };
|
62
92
|
expect(validator.validate(obj)).toEqual({
|
63
93
|
data: undefined,
|
64
94
|
error: {
|
65
95
|
firstName: anyString,
|
66
96
|
lastName: anyString,
|
67
97
|
age: anyString,
|
98
|
+
"address.city": anyString,
|
99
|
+
"address.country": anyString,
|
100
|
+
"address.streetAddress": anyString,
|
101
|
+
"pets[0].name": anyString,
|
102
|
+
},
|
103
|
+
});
|
104
|
+
});
|
105
|
+
it("should unflatten data when validating", () => {
|
106
|
+
const data = {
|
107
|
+
firstName: "John",
|
108
|
+
lastName: "Doe",
|
109
|
+
age: 30,
|
110
|
+
"address.streetAddress": "123 Main St",
|
111
|
+
"address.city": "Anytown",
|
112
|
+
"address.country": "USA",
|
113
|
+
"pets[0].animal": "dog",
|
114
|
+
"pets[0].name": "Fido",
|
115
|
+
};
|
116
|
+
expect(validator.validate(data)).toEqual({
|
117
|
+
data: {
|
118
|
+
firstName: "John",
|
119
|
+
lastName: "Doe",
|
120
|
+
age: 30,
|
121
|
+
address: {
|
122
|
+
streetAddress: "123 Main St",
|
123
|
+
city: "Anytown",
|
124
|
+
country: "USA",
|
125
|
+
},
|
126
|
+
pets: [{ animal: "dog", name: "Fido" }],
|
127
|
+
},
|
128
|
+
error: undefined,
|
129
|
+
});
|
130
|
+
});
|
131
|
+
it("should accept FormData directly and return errors", () => {
|
132
|
+
const formData = new testFormData_1.TestFormData();
|
133
|
+
formData.set("firstName", "John");
|
134
|
+
formData.set("lastName", "Doe");
|
135
|
+
formData.set("address.streetAddress", "123 Main St");
|
136
|
+
formData.set("address.country", "USA");
|
137
|
+
formData.set("pets[0].animal", "dog");
|
138
|
+
expect(validator.validate(formData)).toEqual({
|
139
|
+
data: undefined,
|
140
|
+
error: {
|
141
|
+
"address.city": anyString,
|
142
|
+
"pets[0].name": anyString,
|
68
143
|
},
|
69
144
|
});
|
70
145
|
});
|
146
|
+
it("should accept FormData directly and return valid data", () => {
|
147
|
+
const formData = new testFormData_1.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("address.city", "Anytown");
|
153
|
+
formData.set("pets[0].animal", "dog");
|
154
|
+
formData.set("pets[0].name", "Fido");
|
155
|
+
expect(validator.validate(formData)).toEqual({
|
156
|
+
data: {
|
157
|
+
firstName: "John",
|
158
|
+
lastName: "Doe",
|
159
|
+
address: {
|
160
|
+
streetAddress: "123 Main St",
|
161
|
+
country: "USA",
|
162
|
+
city: "Anytown",
|
163
|
+
},
|
164
|
+
pets: [{ animal: "dog", name: "Fido" }],
|
165
|
+
},
|
166
|
+
error: undefined,
|
167
|
+
});
|
168
|
+
});
|
71
169
|
});
|
72
170
|
describe("validateField", () => {
|
73
171
|
it("should not return an error if field is valid", () => {
|
74
|
-
const
|
172
|
+
const person = {
|
75
173
|
firstName: "John",
|
76
174
|
lastName: {}, // invalid, but we should only be validating firstName
|
77
175
|
};
|
78
|
-
expect(validator.validateField(
|
176
|
+
expect(validator.validateField(person, "firstName")).toEqual({
|
177
|
+
error: undefined,
|
178
|
+
});
|
179
|
+
});
|
180
|
+
it("should not return an error if a nested field is valid", () => {
|
181
|
+
const person = {
|
182
|
+
firstName: "John",
|
183
|
+
lastName: {},
|
184
|
+
address: {
|
185
|
+
streetAddress: "123 Main St",
|
186
|
+
city: "Anytown",
|
187
|
+
country: "USA",
|
188
|
+
},
|
189
|
+
pets: [{ animal: "dog", name: "Fido" }],
|
190
|
+
};
|
191
|
+
expect(validator.validateField(person, "address.streetAddress")).toEqual({
|
192
|
+
error: undefined,
|
193
|
+
});
|
194
|
+
expect(validator.validateField(person, "address.city")).toEqual({
|
195
|
+
error: undefined,
|
196
|
+
});
|
197
|
+
expect(validator.validateField(person, "address.country")).toEqual({
|
198
|
+
error: undefined,
|
199
|
+
});
|
200
|
+
expect(validator.validateField(person, "pets[0].animal")).toEqual({
|
201
|
+
error: undefined,
|
202
|
+
});
|
203
|
+
expect(validator.validateField(person, "pets[0].name")).toEqual({
|
79
204
|
error: undefined,
|
80
205
|
});
|
81
206
|
});
|
82
207
|
it("should return an error if field is invalid", () => {
|
83
|
-
const
|
84
|
-
|
208
|
+
const person = {
|
209
|
+
firstName: "John",
|
210
|
+
lastName: {},
|
211
|
+
address: {
|
212
|
+
streetAddress: "123 Main St",
|
213
|
+
city: 1234,
|
214
|
+
},
|
215
|
+
};
|
216
|
+
expect(validator.validateField(person, "lastName")).toEqual({
|
217
|
+
error: anyString,
|
218
|
+
});
|
219
|
+
});
|
220
|
+
it("should return an error if a nested field is invalid", () => {
|
221
|
+
const person = {
|
222
|
+
firstName: "John",
|
223
|
+
lastName: {},
|
224
|
+
address: {
|
225
|
+
streetAddress: "123 Main St",
|
226
|
+
city: 1234,
|
227
|
+
},
|
228
|
+
pets: [{ animal: "dog" }],
|
229
|
+
};
|
230
|
+
expect(validator.validateField(person, "address.country")).toEqual({
|
231
|
+
error: anyString,
|
232
|
+
});
|
233
|
+
expect(validator.validateField(person, "pets[0].name")).toEqual({
|
85
234
|
error: anyString,
|
86
235
|
});
|
87
236
|
});
|
@@ -1,3 +1,6 @@
|
|
1
1
|
import type { AnyObjectSchema, InferType } from "yup";
|
2
2
|
import { Validator } from "./types";
|
3
|
+
/**
|
4
|
+
* Create a `Validator` using a `yup` schema.
|
5
|
+
*/
|
3
6
|
export declare const withYup: <Schema extends AnyObjectSchema>(validationSchema: Schema) => Validator<InferType<Schema>>;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
exports.withYup = void 0;
|
4
|
+
const createValidator_1 = require("./createValidator");
|
4
5
|
const validationErrorToFieldErrors = (error) => {
|
5
6
|
const fieldErrors = {};
|
6
7
|
error.inner.forEach((innerError) => {
|
@@ -10,29 +11,34 @@ const validationErrorToFieldErrors = (error) => {
|
|
10
11
|
});
|
11
12
|
return fieldErrors;
|
12
13
|
};
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
error:
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
14
|
+
/**
|
15
|
+
* Create a `Validator` using a `yup` schema.
|
16
|
+
*/
|
17
|
+
const withYup = (validationSchema) => {
|
18
|
+
return (0, createValidator_1.createValidator)({
|
19
|
+
validate: (data) => {
|
20
|
+
try {
|
21
|
+
const validated = validationSchema.validateSync(data, {
|
22
|
+
abortEarly: false,
|
23
|
+
});
|
24
|
+
return { data: validated, error: undefined };
|
25
|
+
}
|
26
|
+
catch (err) {
|
27
|
+
return {
|
28
|
+
error: validationErrorToFieldErrors(err),
|
29
|
+
data: undefined,
|
30
|
+
};
|
31
|
+
}
|
32
|
+
},
|
33
|
+
validateField: (data, field) => {
|
34
|
+
try {
|
35
|
+
validationSchema.validateSyncAt(field, data);
|
36
|
+
return {};
|
37
|
+
}
|
38
|
+
catch (err) {
|
39
|
+
return { error: err.message };
|
40
|
+
}
|
41
|
+
},
|
42
|
+
});
|
43
|
+
};
|
38
44
|
exports.withYup = withYup;
|
@@ -1,6 +1,12 @@
|
|
1
1
|
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
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");
|
4
10
|
const getIssuesForError = (err) => {
|
5
11
|
return err.issues.flatMap((issue) => {
|
6
12
|
if ("unionErrors" in issue) {
|
@@ -11,15 +17,24 @@ const getIssuesForError = (err) => {
|
|
11
17
|
}
|
12
18
|
});
|
13
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
|
+
*/
|
14
29
|
function withZod(zodSchema) {
|
15
|
-
return {
|
30
|
+
return (0, createValidator_1.createValidator)({
|
16
31
|
validate: (value) => {
|
17
32
|
const result = zodSchema.safeParse(value);
|
18
33
|
if (result.success)
|
19
34
|
return { data: result.data, error: undefined };
|
20
35
|
const fieldErrors = {};
|
21
36
|
getIssuesForError(result.error).forEach((issue) => {
|
22
|
-
const path = issue.path
|
37
|
+
const path = pathToString(issue.path);
|
23
38
|
if (!fieldErrors[path])
|
24
39
|
fieldErrors[path] = issue.message;
|
25
40
|
});
|
@@ -31,9 +46,12 @@ function withZod(zodSchema) {
|
|
31
46
|
if (result.success)
|
32
47
|
return { error: undefined };
|
33
48
|
return {
|
34
|
-
error: (_a = getIssuesForError(result.error).find((issue) =>
|
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,
|
35
53
|
};
|
36
54
|
},
|
37
|
-
};
|
55
|
+
});
|
38
56
|
}
|
39
57
|
exports.withZod = withZod;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "remix-validated-form",
|
3
|
-
"version": "
|
3
|
+
"version": "2.0.0",
|
4
4
|
"description": "Form component and utils for easy form validation in remix",
|
5
5
|
"browser": "./browser/index.js",
|
6
6
|
"main": "./build/index.js",
|
@@ -14,7 +14,10 @@
|
|
14
14
|
"build:browser": "tsc --project tsconfig.json --module ESNext --outDir ./browser",
|
15
15
|
"build:main": "tsc --project tsconfig.json --module CommonJS --outDir ./build",
|
16
16
|
"build:tests": "tsc --project tsconfig.json --module CommonJS --outDir ./test-app/remix-validated-form",
|
17
|
+
"build:sample": "tsc --project tsconfig.json --module CommonJS --outDir ./sample-app/remix-validated-form",
|
18
|
+
"sample-app": "npm run build:sample && cd sample-app && npm run dev",
|
17
19
|
"test": "jest src",
|
20
|
+
"test:watch": "jest src --watch",
|
18
21
|
"lint": "eslint .",
|
19
22
|
"prettier": "prettier . --write",
|
20
23
|
"prepare": "husky install",
|
@@ -35,22 +38,23 @@
|
|
35
38
|
"validation"
|
36
39
|
],
|
37
40
|
"peerDependencies": {
|
38
|
-
"@remix-run/react": "^1.0.
|
39
|
-
"@remix-run/server-runtime": "^1.0.
|
41
|
+
"@remix-run/react": "^1.0.6",
|
42
|
+
"@remix-run/server-runtime": "^1.0.6",
|
40
43
|
"react": "^17.0.2"
|
41
44
|
},
|
42
45
|
"devDependencies": {
|
43
|
-
"@remix-run/react": "^1.0.
|
44
|
-
"@remix-run/server-runtime": "^1.0.
|
46
|
+
"@remix-run/react": "^1.0.6",
|
47
|
+
"@remix-run/server-runtime": "^1.0.6",
|
45
48
|
"@types/jest": "^27.0.3",
|
46
|
-
"@types/
|
47
|
-
"@
|
48
|
-
"@typescript-eslint/
|
49
|
+
"@types/lodash": "^4.14.178",
|
50
|
+
"@types/react": "^17.0.37",
|
51
|
+
"@typescript-eslint/eslint-plugin": "^5.6.0",
|
52
|
+
"@typescript-eslint/parser": "^5.6.0",
|
49
53
|
"babel-eslint": "^10.1.0",
|
50
54
|
"eslint": "^7.32.0",
|
51
55
|
"eslint-config-react-app": "^6.0.0",
|
52
56
|
"eslint-plugin-cypress": "^2.12.1",
|
53
|
-
"eslint-plugin-flowtype": "^
|
57
|
+
"eslint-plugin-flowtype": "^8.0.3",
|
54
58
|
"eslint-plugin-import": "^2.25.3",
|
55
59
|
"eslint-plugin-jsx-a11y": "^6.5.1",
|
56
60
|
"eslint-plugin-prettier": "^4.0.0",
|
@@ -58,16 +62,17 @@
|
|
58
62
|
"eslint-plugin-react-hooks": "^4.3.0",
|
59
63
|
"fetch-blob": "^3.1.3",
|
60
64
|
"husky": "^7.0.4",
|
61
|
-
"jest": "^27.
|
65
|
+
"jest": "^27.4.4",
|
62
66
|
"lint-staged": "^12.1.2",
|
63
|
-
"prettier": "^2.5.
|
67
|
+
"prettier": "^2.5.1",
|
64
68
|
"react": "^17.0.2",
|
65
|
-
"ts-jest": "^27.
|
66
|
-
"typescript": "^4.5.
|
69
|
+
"ts-jest": "^27.1.1",
|
70
|
+
"typescript": "^4.5.3",
|
67
71
|
"yup": "^0.32.11",
|
68
72
|
"zod": "^3.11.6"
|
69
73
|
},
|
70
74
|
"dependencies": {
|
75
|
+
"lodash": "^4.17.21",
|
71
76
|
"tiny-invariant": "^1.2.0"
|
72
77
|
},
|
73
78
|
"lint-staged": {
|
package/sample-app/.env
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
# Environment variables declared in this file are automatically made available to Prisma.
|
2
|
+
# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
|
3
|
+
|
4
|
+
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server and MongoDB (Preview).
|
5
|
+
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
|
6
|
+
|
7
|
+
DATABASE_URL="file:./dev.db"
|
@@ -0,0 +1,53 @@
|
|
1
|
+
# Welcome to Remix!
|
2
|
+
|
3
|
+
- [Remix Docs](https://remix.run/docs)
|
4
|
+
|
5
|
+
## Development
|
6
|
+
|
7
|
+
From your terminal:
|
8
|
+
|
9
|
+
```sh
|
10
|
+
npm run dev
|
11
|
+
```
|
12
|
+
|
13
|
+
This starts your app in development mode, rebuilding assets on file changes.
|
14
|
+
|
15
|
+
## Deployment
|
16
|
+
|
17
|
+
First, build your app for production:
|
18
|
+
|
19
|
+
```sh
|
20
|
+
npm run build
|
21
|
+
```
|
22
|
+
|
23
|
+
Then run the app in production mode:
|
24
|
+
|
25
|
+
```sh
|
26
|
+
npm start
|
27
|
+
```
|
28
|
+
|
29
|
+
Now you'll need to pick a host to deploy it to.
|
30
|
+
|
31
|
+
### DIY
|
32
|
+
|
33
|
+
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
|
34
|
+
|
35
|
+
Make sure to deploy the output of `remix build`
|
36
|
+
|
37
|
+
- `build/`
|
38
|
+
- `public/build/`
|
39
|
+
|
40
|
+
### Using a Template
|
41
|
+
|
42
|
+
When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
|
43
|
+
|
44
|
+
```sh
|
45
|
+
cd ..
|
46
|
+
# create a new project, and pick a pre-configured host
|
47
|
+
npx create-remix@latest
|
48
|
+
cd my-new-remix-app
|
49
|
+
# remove the new project's app (not the old one!)
|
50
|
+
rm -rf app
|
51
|
+
# copy your app over
|
52
|
+
cp -R ../my-old-remix-app/app app
|
53
|
+
```
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import {
|
2
|
+
Alert,
|
3
|
+
AlertDescription,
|
4
|
+
AlertIcon,
|
5
|
+
AlertTitle,
|
6
|
+
} from "@chakra-ui/react";
|
7
|
+
|
8
|
+
type ErrorProps = {
|
9
|
+
title?: React.ReactNode;
|
10
|
+
description?: React.ReactNode;
|
11
|
+
};
|
12
|
+
export function ErrorBox({ title, description }: ErrorProps) {
|
13
|
+
return (
|
14
|
+
<Alert
|
15
|
+
status="error"
|
16
|
+
variant="subtle"
|
17
|
+
flexDirection="column"
|
18
|
+
alignItems="center"
|
19
|
+
justifyContent="center"
|
20
|
+
textAlign="center"
|
21
|
+
height="200px"
|
22
|
+
>
|
23
|
+
<AlertIcon boxSize="40px" mr={0} />
|
24
|
+
{title && (
|
25
|
+
<AlertTitle mt={4} mb={1} fontSize="lg">
|
26
|
+
{title}
|
27
|
+
</AlertTitle>
|
28
|
+
)}
|
29
|
+
{description && (
|
30
|
+
<AlertDescription maxWidth="sm">{description}</AlertDescription>
|
31
|
+
)}
|
32
|
+
</Alert>
|
33
|
+
);
|
34
|
+
}
|