remix-validated-form 2.0.0 → 2.0.1-beta.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/.turbo/turbo-build.log +9 -0
- package/.turbo/turbo-dev.log +0 -0
- package/browser/ValidatedForm.d.ts +0 -0
- package/browser/ValidatedForm.js +0 -0
- package/browser/hooks.d.ts +0 -0
- package/browser/hooks.js +0 -0
- package/browser/index.d.ts +0 -0
- package/browser/index.js +0 -0
- package/browser/internal/flatten.d.ts +0 -0
- package/browser/internal/flatten.js +0 -0
- package/browser/internal/formContext.d.ts +0 -0
- package/browser/internal/formContext.js +0 -0
- package/browser/internal/util.d.ts +0 -0
- package/browser/internal/util.js +0 -0
- package/browser/server.d.ts +0 -0
- package/browser/server.js +0 -0
- package/browser/test-data/testFormData.d.ts +0 -0
- package/browser/test-data/testFormData.js +0 -0
- package/browser/validation/createValidator.d.ts +0 -0
- package/browser/validation/createValidator.js +0 -0
- package/browser/validation/types.d.ts +0 -0
- package/browser/validation/types.js +0 -0
- package/browser/validation/validation.test.d.ts +0 -0
- package/browser/validation/validation.test.js +0 -0
- package/browser/validation/withYup.d.ts +0 -0
- package/browser/validation/withYup.js +0 -0
- package/browser/validation/withZod.d.ts +0 -0
- package/browser/validation/withZod.js +0 -0
- package/build/ValidatedForm.d.ts +0 -0
- package/build/ValidatedForm.js +0 -0
- package/build/hooks.d.ts +0 -0
- package/build/hooks.js +0 -0
- package/build/index.d.ts +0 -0
- package/build/index.js +0 -0
- package/build/internal/flatten.d.ts +0 -0
- package/build/internal/flatten.js +0 -0
- package/build/internal/formContext.d.ts +0 -0
- package/build/internal/formContext.js +0 -0
- package/build/internal/util.d.ts +0 -0
- package/build/internal/util.js +0 -0
- package/build/server.d.ts +0 -0
- package/build/server.js +0 -0
- package/build/test-data/testFormData.d.ts +0 -0
- package/build/test-data/testFormData.js +0 -0
- package/build/validation/createValidator.d.ts +0 -0
- package/build/validation/createValidator.js +0 -0
- package/build/validation/types.d.ts +0 -0
- package/build/validation/types.js +0 -0
- package/build/validation/validation.test.d.ts +0 -0
- package/build/validation/validation.test.js +0 -0
- package/build/validation/withYup.d.ts +0 -0
- package/build/validation/withYup.js +0 -0
- package/build/validation/withZod.d.ts +0 -0
- package/build/validation/withZod.js +0 -0
- package/jest.config.js +5 -0
- package/package.json +7 -32
- package/src/ValidatedForm.tsx +151 -0
- package/src/hooks.ts +60 -0
- package/src/index.ts +8 -0
- package/src/internal/flatten.ts +48 -0
- package/src/internal/formContext.ts +36 -0
- package/src/internal/util.ts +23 -0
- package/src/server.ts +10 -0
- package/src/test-data/testFormData.ts +55 -0
- package/src/validation/createValidator.ts +24 -0
- package/src/validation/types.ts +26 -0
- package/src/validation/validation.test.ts +317 -0
- package/src/validation/withYup.ts +43 -0
- package/src/validation/withZod.ts +51 -0
- package/tsconfig.json +5 -0
- package/.eslintcache +0 -1
- package/.eslintignore +0 -1
- package/.prettierignore +0 -10
- package/LICENSE +0 -21
- package/README.md +0 -235
- package/browser/flatten.d.ts +0 -4
- package/browser/flatten.js +0 -35
- package/build/flatten.d.ts +0 -4
- package/build/flatten.js +0 -43
- package/sample-app/.env +0 -7
- package/sample-app/README.md +0 -53
- package/sample-app/app/components/ErrorBox.tsx +0 -34
- package/sample-app/app/components/FormInput.tsx +0 -40
- package/sample-app/app/components/FormSelect.tsx +0 -37
- package/sample-app/app/components/SubjectForm.tsx +0 -150
- package/sample-app/app/entry.client.tsx +0 -4
- package/sample-app/app/entry.server.tsx +0 -21
- package/sample-app/app/root.tsx +0 -92
- package/sample-app/app/routes/index.tsx +0 -5
- package/sample-app/app/routes/subjects/$id.edit.tsx +0 -98
- package/sample-app/app/routes/subjects/index.tsx +0 -112
- package/sample-app/app/routes/subjects/new.tsx +0 -46
- package/sample-app/app/services/db.server.ts +0 -23
- package/sample-app/app/types.ts +0 -6
- package/sample-app/package-lock.json +0 -10890
- package/sample-app/package.json +0 -36
- package/sample-app/prisma/dev.db +0 -0
- package/sample-app/prisma/schema.prisma +0 -34
- package/sample-app/public/favicon.ico +0 -0
- package/sample-app/remix.config.js +0 -10
- package/sample-app/remix.env.d.ts +0 -2
package/sample-app/app/root.tsx
DELETED
@@ -1,92 +0,0 @@
|
|
1
|
-
import { ChakraProvider } from "@chakra-ui/react";
|
2
|
-
import {
|
3
|
-
Links,
|
4
|
-
LiveReload,
|
5
|
-
Meta,
|
6
|
-
Outlet,
|
7
|
-
Scripts,
|
8
|
-
ScrollRestoration,
|
9
|
-
useCatch,
|
10
|
-
} from "remix";
|
11
|
-
import { ErrorBox } from "./components/ErrorBox";
|
12
|
-
|
13
|
-
// https://remix.run/api/conventions#default-export
|
14
|
-
// https://remix.run/api/conventions#route-filenames
|
15
|
-
export default function App() {
|
16
|
-
return (
|
17
|
-
<Document>
|
18
|
-
<Outlet />
|
19
|
-
</Document>
|
20
|
-
);
|
21
|
-
}
|
22
|
-
|
23
|
-
// https://remix.run/docs/en/v1/api/conventions#errorboundary
|
24
|
-
export function ErrorBoundary({ error }: { error: Error }) {
|
25
|
-
console.error(error);
|
26
|
-
return (
|
27
|
-
<Document title="Error!">
|
28
|
-
<ErrorBox title={`There was an error`} description={error.message} />
|
29
|
-
</Document>
|
30
|
-
);
|
31
|
-
}
|
32
|
-
|
33
|
-
// https://remix.run/docs/en/v1/api/conventions#catchboundary
|
34
|
-
export function CatchBoundary() {
|
35
|
-
let caught = useCatch();
|
36
|
-
|
37
|
-
let message;
|
38
|
-
switch (caught.status) {
|
39
|
-
case 401:
|
40
|
-
message = (
|
41
|
-
<p>
|
42
|
-
Oops! Looks like you tried to visit a page that you do not have access
|
43
|
-
to.
|
44
|
-
</p>
|
45
|
-
);
|
46
|
-
break;
|
47
|
-
case 404:
|
48
|
-
message = (
|
49
|
-
<p>Oops! Looks like you tried to visit a page that does not exist.</p>
|
50
|
-
);
|
51
|
-
break;
|
52
|
-
|
53
|
-
default:
|
54
|
-
throw new Error(caught.data || caught.statusText);
|
55
|
-
}
|
56
|
-
|
57
|
-
return (
|
58
|
-
<Document title={`${caught.status} ${caught.statusText}`}>
|
59
|
-
<ErrorBox
|
60
|
-
title={`${caught.status}: ${caught.statusText}`}
|
61
|
-
description={message}
|
62
|
-
/>
|
63
|
-
</Document>
|
64
|
-
);
|
65
|
-
}
|
66
|
-
|
67
|
-
function Document({
|
68
|
-
children,
|
69
|
-
title,
|
70
|
-
}: {
|
71
|
-
children: React.ReactNode;
|
72
|
-
title?: string;
|
73
|
-
}) {
|
74
|
-
return (
|
75
|
-
<html lang="en">
|
76
|
-
<head>
|
77
|
-
<meta charSet="utf-8" />
|
78
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
79
|
-
{title ? <title>{title}</title> : null}
|
80
|
-
<Meta />
|
81
|
-
<Links />
|
82
|
-
</head>
|
83
|
-
<body>
|
84
|
-
<ChakraProvider>{children}</ChakraProvider>
|
85
|
-
|
86
|
-
<ScrollRestoration />
|
87
|
-
<Scripts />
|
88
|
-
{process.env.NODE_ENV === "development" && <LiveReload />}
|
89
|
-
</body>
|
90
|
-
</html>
|
91
|
-
);
|
92
|
-
}
|
@@ -1,98 +0,0 @@
|
|
1
|
-
import { Box, Container, Heading } from "@chakra-ui/react";
|
2
|
-
import {
|
3
|
-
ActionFunction,
|
4
|
-
json,
|
5
|
-
LoaderFunction,
|
6
|
-
redirect,
|
7
|
-
useCatch,
|
8
|
-
useLoaderData,
|
9
|
-
useParams,
|
10
|
-
} from "remix";
|
11
|
-
import { z } from "zod";
|
12
|
-
import { ErrorBox } from "~/components/ErrorBox";
|
13
|
-
import { SubjectForm, subjectFormValidator } from "~/components/SubjectForm";
|
14
|
-
import { db } from "~/services/db.server";
|
15
|
-
import { SubjectComplete } from "~/types";
|
16
|
-
import { validationError } from "../../../remix-validated-form";
|
17
|
-
|
18
|
-
export const loader: LoaderFunction = async ({ params }) => {
|
19
|
-
const { id } = z.object({ id: z.string() }).parse(params);
|
20
|
-
|
21
|
-
const subject = await db.subject.findUnique({
|
22
|
-
where: { id: +id },
|
23
|
-
include: {
|
24
|
-
teacher: true,
|
25
|
-
subjectDays: { orderBy: { day: "asc" } },
|
26
|
-
},
|
27
|
-
});
|
28
|
-
|
29
|
-
if (!subject) {
|
30
|
-
throw new Response(`Subject ${id} doesn't exist`, {
|
31
|
-
status: 404,
|
32
|
-
});
|
33
|
-
}
|
34
|
-
|
35
|
-
return json(subject);
|
36
|
-
};
|
37
|
-
|
38
|
-
export const action: ActionFunction = async ({ request, params }) => {
|
39
|
-
const { id } = z.object({ id: z.string() }).parse(params);
|
40
|
-
|
41
|
-
const fieldValues = subjectFormValidator.validate(await request.formData());
|
42
|
-
if (fieldValues.error) return validationError(fieldValues.error);
|
43
|
-
|
44
|
-
const { teacher, subjectDays, ...updatedSubject } = fieldValues.data;
|
45
|
-
|
46
|
-
await db.subject.update({
|
47
|
-
where: { id: +id },
|
48
|
-
data: {
|
49
|
-
...updatedSubject,
|
50
|
-
teacher: {
|
51
|
-
update: teacher,
|
52
|
-
},
|
53
|
-
subjectDays: {
|
54
|
-
deleteMany: {},
|
55
|
-
create: subjectDays,
|
56
|
-
},
|
57
|
-
},
|
58
|
-
});
|
59
|
-
|
60
|
-
return redirect("/subjects");
|
61
|
-
};
|
62
|
-
|
63
|
-
export default function NewSubject() {
|
64
|
-
const subject = useLoaderData<SubjectComplete | null>();
|
65
|
-
return (
|
66
|
-
<>
|
67
|
-
<Box bg="white" pt="4" pb="4" shadow="sm">
|
68
|
-
<Container maxW="7xl">
|
69
|
-
<Heading size="lg" mb="0">
|
70
|
-
Create Subject
|
71
|
-
</Heading>
|
72
|
-
</Container>
|
73
|
-
</Box>
|
74
|
-
|
75
|
-
<Box as="main" py="8" flex="1">
|
76
|
-
<Container maxW="7xl">
|
77
|
-
<SubjectForm defaultValues={subject ?? undefined} />
|
78
|
-
</Container>
|
79
|
-
</Box>
|
80
|
-
</>
|
81
|
-
);
|
82
|
-
}
|
83
|
-
|
84
|
-
export function CatchBoundary() {
|
85
|
-
const caught = useCatch();
|
86
|
-
const params = useParams();
|
87
|
-
if (caught.status === 404) {
|
88
|
-
return <ErrorBox title={`Subject ${params.id} doesn't exist`} />;
|
89
|
-
}
|
90
|
-
throw new Error(`Unhandled error: ${caught.status}`);
|
91
|
-
}
|
92
|
-
|
93
|
-
export function ErrorBoundary() {
|
94
|
-
const { id } = useParams();
|
95
|
-
return (
|
96
|
-
<ErrorBox title={`There was an error subject by the id ${id}. Sorry.`} />
|
97
|
-
);
|
98
|
-
}
|
@@ -1,112 +0,0 @@
|
|
1
|
-
import {
|
2
|
-
Box,
|
3
|
-
Button,
|
4
|
-
Container,
|
5
|
-
Flex,
|
6
|
-
Heading,
|
7
|
-
Spacer,
|
8
|
-
Table,
|
9
|
-
Tbody,
|
10
|
-
Td,
|
11
|
-
Th,
|
12
|
-
Thead,
|
13
|
-
Tr,
|
14
|
-
} from "@chakra-ui/react";
|
15
|
-
import { Subject, SubjectDays, Teacher } from "@prisma/client";
|
16
|
-
import {
|
17
|
-
json,
|
18
|
-
Link,
|
19
|
-
LoaderFunction,
|
20
|
-
useCatch,
|
21
|
-
useLoaderData,
|
22
|
-
useParams,
|
23
|
-
} from "remix";
|
24
|
-
import { db } from "~/services/db.server";
|
25
|
-
|
26
|
-
export const loader: LoaderFunction = async () => {
|
27
|
-
const subjects = await db.subject.findMany({
|
28
|
-
include: { teacher: true, subjectDays: true },
|
29
|
-
});
|
30
|
-
return json(subjects);
|
31
|
-
};
|
32
|
-
|
33
|
-
export default function Subjects() {
|
34
|
-
const subjects =
|
35
|
-
useLoaderData<
|
36
|
-
(Subject & { teacher: Teacher; subjectDays: SubjectDays[] })[]
|
37
|
-
>();
|
38
|
-
return (
|
39
|
-
<>
|
40
|
-
<Box bg="white" pt="4" pb="4" shadow="sm">
|
41
|
-
<Container maxW="7xl">
|
42
|
-
<Flex>
|
43
|
-
<Heading size="lg" mb="0">
|
44
|
-
Subjects
|
45
|
-
</Heading>
|
46
|
-
<Spacer />
|
47
|
-
<Link to="new">
|
48
|
-
<Button colorScheme="blue">New</Button>
|
49
|
-
</Link>
|
50
|
-
</Flex>
|
51
|
-
</Container>
|
52
|
-
</Box>
|
53
|
-
|
54
|
-
<Box as="main" py="8" flex="1">
|
55
|
-
<Container maxW="7xl">
|
56
|
-
<Box bg="white" p="6" rounded="lg" shadow="base" overflowX="auto">
|
57
|
-
<Table borderWidth="1px" fontSize="sm">
|
58
|
-
<Thead bg="white">
|
59
|
-
<Tr>
|
60
|
-
<Th whiteSpace="nowrap" scope="col">
|
61
|
-
Subject
|
62
|
-
</Th>
|
63
|
-
<Th whiteSpace="nowrap" scope="col">
|
64
|
-
Teacher
|
65
|
-
</Th>
|
66
|
-
<Th whiteSpace="nowrap" scope="col"></Th>
|
67
|
-
</Tr>
|
68
|
-
</Thead>
|
69
|
-
<Tbody>
|
70
|
-
{subjects.map((subject) => (
|
71
|
-
<Tr key={subject.id}>
|
72
|
-
<Td whiteSpace="nowrap">{subject.name}</Td>
|
73
|
-
<Td>
|
74
|
-
{subject.teacher.name} ({subject.teacher.email})
|
75
|
-
</Td>
|
76
|
-
<Td textAlign="right">
|
77
|
-
<Link to={`${subject.id}/edit`}>
|
78
|
-
<Button variant="link" colorScheme="blue">
|
79
|
-
Edit
|
80
|
-
</Button>
|
81
|
-
</Link>
|
82
|
-
</Td>
|
83
|
-
</Tr>
|
84
|
-
))}
|
85
|
-
</Tbody>
|
86
|
-
</Table>
|
87
|
-
</Box>
|
88
|
-
</Container>
|
89
|
-
</Box>
|
90
|
-
</>
|
91
|
-
);
|
92
|
-
}
|
93
|
-
|
94
|
-
export function CatchBoundary() {
|
95
|
-
const caught = useCatch();
|
96
|
-
const params = useParams();
|
97
|
-
if (caught.status === 404) {
|
98
|
-
return (
|
99
|
-
<div className="error-container">
|
100
|
-
Huh? What the heck is "{params.id}"?
|
101
|
-
</div>
|
102
|
-
);
|
103
|
-
}
|
104
|
-
throw new Error(`Unhandled error: ${caught.status}`);
|
105
|
-
}
|
106
|
-
|
107
|
-
export function ErrorBoundary() {
|
108
|
-
const { jokeId } = useParams();
|
109
|
-
return (
|
110
|
-
<div className="error-container">{`There was an error loading joke by the id ${jokeId}. Sorry.`}</div>
|
111
|
-
);
|
112
|
-
}
|
@@ -1,46 +0,0 @@
|
|
1
|
-
import { Box, Container, Heading } from "@chakra-ui/react";
|
2
|
-
import { ActionFunction, redirect } from "remix";
|
3
|
-
import { SubjectForm, subjectFormValidator } from "~/components/SubjectForm";
|
4
|
-
import { db } from "~/services/db.server";
|
5
|
-
import { validationError } from "../../../remix-validated-form";
|
6
|
-
|
7
|
-
export const action: ActionFunction = async ({ request }) => {
|
8
|
-
const fieldValues = subjectFormValidator.validate(await request.formData());
|
9
|
-
if (fieldValues.error) return validationError(fieldValues.error);
|
10
|
-
|
11
|
-
const { teacher, subjectDays, ...newSubject } = fieldValues.data;
|
12
|
-
|
13
|
-
await db.subject.create({
|
14
|
-
data: {
|
15
|
-
...newSubject,
|
16
|
-
teacher: {
|
17
|
-
create: teacher,
|
18
|
-
},
|
19
|
-
subjectDays: {
|
20
|
-
create: subjectDays,
|
21
|
-
},
|
22
|
-
},
|
23
|
-
});
|
24
|
-
|
25
|
-
return redirect("/subjects");
|
26
|
-
};
|
27
|
-
|
28
|
-
export default function NewSubject() {
|
29
|
-
return (
|
30
|
-
<>
|
31
|
-
<Box bg="white" pt="4" pb="4" shadow="sm">
|
32
|
-
<Container maxW="7xl">
|
33
|
-
<Heading size="lg" mb="0">
|
34
|
-
Create Subject
|
35
|
-
</Heading>
|
36
|
-
</Container>
|
37
|
-
</Box>
|
38
|
-
|
39
|
-
<Box as="main" py="8" flex="1">
|
40
|
-
<Container maxW="7xl">
|
41
|
-
<SubjectForm />
|
42
|
-
</Container>
|
43
|
-
</Box>
|
44
|
-
</>
|
45
|
-
);
|
46
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { PrismaClient } from "@prisma/client";
|
2
|
-
|
3
|
-
let db: PrismaClient;
|
4
|
-
|
5
|
-
declare global {
|
6
|
-
var __db: PrismaClient | undefined;
|
7
|
-
}
|
8
|
-
|
9
|
-
// this is needed because in development we don't want to restart
|
10
|
-
// the server with every change, but we want to make sure we don't
|
11
|
-
// create a new connection to the DB with every change either.
|
12
|
-
if (process.env.NODE_ENV === "production") {
|
13
|
-
db = new PrismaClient();
|
14
|
-
db.$connect();
|
15
|
-
} else {
|
16
|
-
if (!global.__db) {
|
17
|
-
global.__db = new PrismaClient();
|
18
|
-
global.__db.$connect();
|
19
|
-
}
|
20
|
-
db = global.__db;
|
21
|
-
}
|
22
|
-
|
23
|
-
export { db };
|