Skip to content

Commit f0c0fd5

Browse files
jaruesinkjaruesink
authored
Merge pull request #50 from lambda-curry/codegen-update-remix-hook-form-v7
Update remix-hook-form to v7.0.0 for React Router 7 compatibility
2 parents 1ede9c2 + 0b4822e commit f0c0fd5

6 files changed

Lines changed: 127 additions & 144 deletions

File tree

‎apps/docs/src/examples/middleware-example.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// Example of using the new middleware feature in remix-hook-form v7.0.0
2+
import { Form } from 'react-router';
3+
import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
4+
import { zodResolver } from '@hookform/resolvers/zod';
5+
import * as zod from 'zod';
6+
import { TextField } from '@lambdacurry/forms/remix-hook-form';
7+
import { getValidatedFormData } from 'remix-hook-form/middleware';
8+
import type { ActionFunctionArgs } from 'react-router';
9+
10+
// Define schema and types
11+
const schema = zod.object({
12+
name: zod.string().min(1, "Name is required"),
13+
email: zod.string().email("Invalid email format").min(1, "Email is required"),
14+
});
15+
16+
type FormData = zod.infer<typeof schema>;
17+
const resolver = zodResolver(schema);
18+
19+
// Action function using the new middleware
20+
export const action = async ({ context }: ActionFunctionArgs) => {
21+
// Use the middleware to extract and validate form data
22+
const { errors, data, receivedValues } = await getValidatedFormData<FormData>(
23+
context,
24+
resolver
25+
);
26+
27+
if (errors) {
28+
return { errors, defaultValues: receivedValues };
29+
}
30+
31+
// Process the validated data
32+
console.log('Processing data:', data);
33+
34+
return { success: true, data };
35+
};
36+
37+
// Component
38+
export default function MiddlewareExample() {
39+
const {
40+
handleSubmit,
41+
formState: { errors },
42+
register,
43+
} = useRemixForm<FormData>({
44+
mode: "onSubmit",
45+
resolver,
46+
});
47+
48+
return (
49+
<div className="p-4">
50+
<h1 className="text-2xl font-bold mb-4">Remix Hook Form v7 Middleware Example</h1>
51+
52+
<RemixFormProvider>
53+
<Form method="POST" onSubmit={handleSubmit}>
54+
<div className="space-y-4">
55+
<TextField
56+
label="Name"
57+
{...register("name")}
58+
error={errors.name?.message}
59+
/>
60+
61+
<TextField
62+
label="Email"
63+
type="email"
64+
{...register("email")}
65+
error={errors.email?.message}
66+
/>
67+
68+
<button
69+
type="submit"
70+
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
71+
>
72+
Submit
73+
</button>
74+
</div>
75+
</Form>
76+
</RemixFormProvider>
77+
</div>
78+
);
79+
}

‎apps/docs/src/examples/root-example.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Example of setting up the middleware in root.tsx
2+
import { unstable_extractFormDataMiddleware } from 'remix-hook-form/middleware';
3+
import { Outlet } from 'react-router-dom';
4+
5+
// Export the middleware for React Router 7
6+
export const unstable_middleware = [unstable_extractFormDataMiddleware()];
7+
8+
export default function Root() {
9+
return (
10+
<html lang="en">
11+
<head>
12+
<meta charSet="utf-8" />
13+
<meta name="viewport" content="width=device-width, initial-scale=1" />
14+
<title>Remix Hook Form v7 Example</title>
15+
</head>
16+
<body>
17+
<div className="container mx-auto">
18+
<Outlet />
19+
</div>
20+
</body>
21+
</html>
22+
);
23+
}

‎packages/components/CHANGELOG.md‎

Lines changed: 6 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,18 @@
11
# @lambdacurry/forms
22

3-
## 0.13.4
4-
5-
### Patch Changes
6-
7-
- 381cd02: Another attempt at a fix, this should do it
8-
9-
## 0.13.3
10-
11-
### Patch Changes
12-
13-
- e0dde7d: Fixed the correct import paths
14-
15-
## 0.13.2
16-
17-
### Patch Changes
18-
19-
- 2910e45: First one wasn't correct, but this should fix the exports
20-
21-
## 0.13.1
22-
23-
### Patch Changes
24-
25-
- 459fa20: Added the correct export paths following the new structure
26-
27-
## 0.13.0
28-
29-
### Minor Changes
30-
31-
- 4cd12c7: Changed the way components are imported and named to better fit and look better, similar to hookform
32-
33-
## 0.12.6
34-
35-
### Patch Changes
36-
37-
- 88c5ee5: Fixed spacing for the checkbox label
38-
39-
## 0.12.5
40-
41-
### Patch Changes
42-
43-
- 23a31e7: Added classnames to style the checkbox and actually check in the checkbox component
44-
45-
## 0.12.4
46-
47-
### Patch Changes
48-
49-
- b668f74: Added the ability to pass in your own indicator to the radio group
50-
51-
## 0.12.3
52-
53-
### Patch Changes
54-
55-
- e863d1b: Added remix-hook-form as a peer dependency
56-
57-
## 0.12.2
3+
## 0.14.2
584

595
### Patch Changes
606

61-
- c39b177: Fixed versioning
7+
- Updated remix-hook-form to v7.0.0 for React Router 7 compatibility
8+
- Added example files demonstrating middleware usage
629

63-
## 0.12.1
10+
## 0.14.1
6411

6512
### Patch Changes
6613

67-
- da26669: Updated remix-hook-form
68-
69-
## 0.10.0
70-
71-
### Minor Changes
72-
73-
- 19b0854: Added remix textarea story and fixes a react error
74-
75-
## 0.9.0
76-
77-
### Minor Changes
78-
79-
- 822f1cc: Updated the remix textarea to work correctly
80-
81-
## 0.8.0
82-
83-
### Minor Changes
84-
85-
- 21db17d: Added an export for the remix textarea
86-
87-
## 0.7.0
88-
89-
### Minor Changes
90-
91-
- b212565: Added a remix text area
92-
93-
## 0.6.0
94-
95-
### Minor Changes
96-
97-
- 7a02de0: Fixed Textarea by using relative import
98-
99-
## 0.5.0
100-
101-
### Minor Changes
102-
103-
- 9cba1b3: Updated export for Textarea
104-
105-
## 0.4.0
106-
107-
### Minor Changes
108-
109-
- 9150b21: Added ShadCn Textarea
110-
111-
## 0.3.0
112-
113-
### Minor Changes
114-
115-
- e8e0429: fix: Corrected file exports
116-
- a39e4b1: Removed component that is not needed
117-
118-
## 0.2.0
119-
120-
### Minor Changes
121-
122-
- fc92a34: Fixed import errors
123-
124-
## 0.1.0
125-
126-
### Minor Changes
127-
128-
- db7b88f: Made it easier to import components
14+
- 381cd02: Another attempt at a fix, this should do it
12915

130-
## 0.0.2
16+
## 0.13.4
13117

13218
### Patch Changes
133-
134-
- d3ab83e: Fixed errors and versioning differences
135-
136-
## 0.0.1
137-
138-
### Major Changes
139-
140-
- ad8069e: Initial Release

‎packages/components/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@lambdacurry/forms",
3-
"version": "0.14.1",
3+
"version": "0.14.2",
44
"type": "module",
55
"main": "./dist/index.js",
66
"types": "./dist/index.d.ts",
@@ -36,7 +36,7 @@
3636
},
3737
"peerDependencies": {
3838
"react": "^19.0.0",
39-
"remix-hook-form": "6.1.3"
39+
"remix-hook-form": "7.0.0"
4040
},
4141
"dependencies": {
4242
"@hookform/resolvers": "^3.9.1",
@@ -67,7 +67,7 @@
6767
"react-hook-form": "^7.53.1",
6868
"react-router": "^7.0.0",
6969
"react-router-dom": "^7.0.0",
70-
"remix-hook-form": "6.1.3",
70+
"remix-hook-form": "7.0.0",
7171
"sonner": "^1.7.1",
7272
"tailwind-merge": "^2.5.5",
7373
"tailwindcss-animate": "^1.0.7",

‎packages/components/src/remix-hook-form/index.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
export * from './text-field';
2-
export * from './form';
31
export * from './checkbox';
4-
export * from './date-picker';
5-
export * from './dropdown-menu-select';
6-
export * from './otp-input';
2+
export * from './form';
3+
export * from './input';
4+
export * from './label';
5+
export * from './select';
6+
export * from './text-field';
77
export * from './radio-group';
88
export * from './radio-group-item';
99
export * from './switch';
1010
export * from './textarea';
11+
export * from './data-table-router-form';
12+
export * from './data-table-router-parsers';
13+
export * from './data-table-router-toolbar';

‎yarn.lock‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1815,7 +1815,7 @@ __metadata:
18151815
react-hook-form: "npm:^7.53.1"
18161816
react-router: "npm:^7.0.0"
18171817
react-router-dom: "npm:^7.0.0"
1818-
remix-hook-form: "npm:6.1.3"
1818+
remix-hook-form: "npm:7.0.0"
18191819
sonner: "npm:^1.7.1"
18201820
tailwind-merge: "npm:^2.5.5"
18211821
tailwindcss: "npm:^4.0.0"
@@ -1827,7 +1827,7 @@ __metadata:
18271827
zod: "npm:^3.24.1"
18281828
peerDependencies:
18291829
react: ^19.0.0
1830-
remix-hook-form: 6.1.3
1830+
remix-hook-form: 7.0.0
18311831
languageName: unknown
18321832
linkType: soft
18331833

@@ -10003,15 +10003,15 @@ __metadata:
1000310003
languageName: node
1000410004
linkType: hard
1000510005

10006-
"remix-hook-form@npm:6.1.3":
10007-
version: 6.1.3
10008-
resolution: "remix-hook-form@npm:6.1.3"
10006+
"remix-hook-form@npm:7.0.0":
10007+
version: 7.0.0
10008+
resolution: "remix-hook-form@npm:7.0.0"
1000910009
peerDependencies:
1001010010
react: ^18.2.0 || ^19.0.0
1001110011
react-dom: ^18.2.0 || ^19.0.0
10012-
react-hook-form: ^7.51.0
10013-
react-router: ">=7.0.0"
10014-
checksum: 10c0/4950e179e1145c65f58020bfb4bcb1dbf8ce7720f911b3c35bc5dbc6a386fdf037b94e52083fb03879c5ae37cb62a2a0ad6fedd61ec5f8ad2d147b7a3ebee903
10012+
react-hook-form: ^7.55.0
10013+
react-router: ">=7.5.0"
10014+
checksum: 10c0/31d20817ac3e73729b8159689d395cdcb4bd1aed45fe67e43cb310da1eb5dac27c08b7c6e7e9ad85fb5b4c08a9049d5c6b6a913d739a77352c590db47c57560b
1001510015
languageName: node
1001610016
linkType: hard
1001710017

0 commit comments

Comments
 (0)