Add comprehensive LLM documentation for forms library #107
Conversation
- Add llms.txt with complete implementation guide for LLMs - Covers all form components: TextField, Textarea, Checkbox, Switch, RadioGroup, DatePicker, DropdownMenuSelect, OTPInput - Includes Zod validation patterns and server-side handling - Documents component customization system and advanced patterns - Provides comprehensive example demonstrating all features - Designed specifically for LLM consumption and implementation
|
|
WalkthroughA comprehensive implementation guide for the LambdaCurry Forms library was added, focusing on integration with Remix and React Hook Form. The guide covers setup, usage of form components, validation with Zod schemas, server-side handling, customization, advanced patterns, and accessibility. Detailed examples and best practices are provided throughout. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RemixFormProvider
participant ServerActionHandler
User->>RemixFormProvider: Submit form data
RemixFormProvider->>ServerActionHandler: Validate and process data
ServerActionHandler-->>RemixFormProvider: Return validation result or success
RemixFormProvider-->>User: Display errors or success feedback
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (2)📓 Common learningsllms.txt (29)Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: jaruesink Learnt from: jaruesink Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR Learnt from: CR ✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
📝 Storybook Preview: View Storybook This preview will be updated automatically when you push new changes to this PR.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
llms.txt (1)
45-57: Same import issue repeated, please fix across the entire guideThe larger example repeats the incorrect
useFetcher/ActionFunctionArgsimport. Ensure every code block consistently imports from the Remix packages to avoid copy-paste bugs for users.No diff shown here—apply the same change as above wherever it occurs.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
llms.txt(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use Zod schemas for all form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the form setup pattern for form initialization in Remix
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the required imports for Remix Hook Form integration, Zod, and base UI components in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Verify server-side validation integration in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/ui-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:47:43.432Z
Learning: Follow consistent component architecture patterns as established in lambda-curry/forms
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Follow the wrapper component pattern for all form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always define Zod schemas with proper error messages for form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Handle both client-side and server-side validation errors in form components
llms.txt (11)
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the required imports for Remix Hook Form integration, Zod, and base UI components in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use Zod schemas for all form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always define Zod schemas with proper error messages for form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the form setup pattern for form initialization in Remix
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Follow the wrapper component pattern for all form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use ARIA attributes for complex form interactions
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Verify server-side validation integration in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Handle both client-side and server-side validation errors in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Consider field-level subscriptions for large forms
🔇 Additional comments (2)
llms.txt (2)
527-533:navigateis used but never importedThe example relies on a
navigatefunction insideuseEffect, yet nouseNavigateimport is shown. Add it to avoid a reference error.-import { useFetcher, type ActionFunctionArgs } from '@remix-run/react'; +import { useFetcher, useNavigate, type ActionFunctionArgs } from '@remix-run/react';and initialise:
const navigate = useNavigate();
545-556:methods.handleSubmit()call is missing theeventparameterInside
handleSubmit = (data) => { … }you later invokemethods.handleSubmit();without passing the synthetic event or wrapping it in the required callback. Replace with the proper submit helper or callfetcher.submitdirectly (as done elsewhere) to avoid an exception.Example fix:
-// Submit form -methods.handleSubmit(); +methods.handleSubmit(data, () => undefined);or simply rely on
fetcher.submitas you did above.
| import { useFetcher, type ActionFunctionArgs } from 'react-router'; | ||
|
|
There was a problem hiding this comment.
Use the Remix-specific packages, not the generic react-router ones
useFetcher and the ActionFunctionArgs type are exported from @remix-run/react and @remix-run/node respectively, not from the bare react-router package. Using the wrong import path will break real-world code generated from this guide and confuse LLMs.
-import { useFetcher, type ActionFunctionArgs } from 'react-router';
+import { useFetcher } from '@remix-run/react';
+import type { ActionFunctionArgs } from '@remix-run/node';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { useFetcher, type ActionFunctionArgs } from 'react-router'; | |
| import { useFetcher } from '@remix-run/react'; | |
| import type { ActionFunctionArgs } from '@remix-run/node'; |
🤖 Prompt for AI Agents
In llms.txt around lines 22 to 23, the imports for useFetcher and
ActionFunctionArgs are incorrectly taken from 'react-router'. Change the import
source for useFetcher to '@remix-run/react' and for ActionFunctionArgs to
'@remix-run/node' to use the correct Remix-specific packages and avoid breaking
the code.
There was a problem hiding this comment.
remember that remix got merged into react-router 7
There was a problem hiding this comment.
🧩 Analysis chain
@jaruesink Thank you for the correction! You're absolutely right about React Router 7 and the Remix merge. Let me verify the current import patterns to ensure the documentation is accurate.
🐰
(\ /)
( ..)
o(")(")
🌐 Web query:
React Router 7 Remix merge useFetcher ActionFunctionArgs imports latest 2024 2025
💡 Result:
React Router 7 and Remix have now largely merged: React Router v7 incorporates nearly all client-side data handling patterns from Remix, including key APIs such as useFetcher and ActionFunctionArgs, but with notable updates in package imports, type signatures, and some new conventions as of late 2024 and 2025[1][4][7][10].
Below you'll find precise details, migration guidance, and current import usage for these APIs as of mid-2025.
1. Package Structure and Imports in React Router 7 vs. Remix (2024–2025)
- React Router 7 now provides almost all of Remix's routing, loader, action, and fetcher patterns directly.
- The recommendation is to use
react-routerand related packages for new projects; Remix is shifting to a more full-stack and Vite-based direction, but the API overlaps by design[1][4][7].
Imports in Latest React Router 7
- For fetcher and data mutation patterns (formerly exclusively in Remix), you will now use:
import { useFetcher, useActionData } from "react-router-dom"; import type { ActionFunctionArgs } from "react-router-dom"; // or from "react-router" directly in SSR contexts
- Example for an action:
import type { ActionFunctionArgs } from "react-router-dom"; export async function action({ request }: ActionFunctionArgs) { // handle mutation }
- For useFetcher hooks:
This formerly required
import { useFetcher } from "react-router-dom"; function MyComponent() { const fetcher = useFetcher(); // Use fetcher.Form, fetcher.data, fetcher.state... }
@remix-run/react, now present in React Router core[6][9].
For Remix (mid-2025, Remix 3+):
- When using Remix directly (still full-stack, SSR, Vite), imports remain:
import { useFetcher, useActionData, Form } from "@remix-run/react"; import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno, depending on runtime
2. Typing and API Inheritance
- ActionFunctionArgs and LoaderFunctionArgs: Both React Router and Remix now provide proper TypeScript generics for data types and context[9].
- Type normalization: React Router v7 normalized many Remix types, e.g.,
anytounknownfor improved type safety[9].
Redirects in Actions (Type Safety)
- A key pain point (fixed as of v7.1.0): If an action returns a Redirect response, the inferred type for
useFetcher().dataanduseActionData()becomes mixed or includes Response headers, which previously confused TS inference. As of 7.1+, you are safer to throw the redirect instead of returning it for consistent type inference[2][3].// Correct pattern: import { redirect } from "react-router-dom"; export async function action({ request }: ActionFunctionArgs) { // some logic if (!authorized) { throw redirect("/login"); } return { ok: true }; }
3. Use Cases and Interop
-
useFetcher:
- Preferred for "background" or AJAX-like mutation flows, where you want to submit data but not navigate or reload.
- Exposed on both Remix and React Router[5][8].
- Accepts
<fetcher.Form>for in-place submissions. - Returns state, data, and a Form element, just like in Remix—now in React Router[8][5].
-
useActionData:
- Retrieves the last action data from the route in context.
- Typing via
<typeof action>or explicit TypeScript interface[6].
4. Unified API — What To Use Now
For New Projects (as of 2025):
- Use imports from
react-router-dom(for SPA/client) orreact-router(for SSR/server use), not from@remix-run/reactunless building on the full Remix stack.
For Existing Remix Apps:
- Continue with
@remix-run/reactetc., but plan for converging on React Router v7 APIs for future updates, possibly swapping packages with little code change[4][7][1].
5. Referenced Examples (Latest Patterns)
import { useFetcher } from "react-router-dom";
import type { ActionFunctionArgs } from "react-router-dom";
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData();
if (formData.get("status") === "success") {
return { ok: true, error: null };
}
return { ok: false, error: "There was a problem" };
}
function Example() {
const fetcher = useFetcher<typeof action>();
useEffect(() => {
if (fetcher.state === "idle" && fetcher.data?.ok) {
// do something, e.g., close modal
}
}, [fetcher]);
return (
<fetcher.Form method="post">
...
</fetcher.Form>
);
}Pattern adapted from Remix—now official for React Router 7+ too[8][5].
Important Caveats and Migration Tips
- For best type safety, throw redirect responses in action/loader functions. Fixes type inference quirks per recent updates[2][3][9].
- React Router 7 feature flags: You may encounter options like
future.v7_normalizeFormMethodfor HTTP method casing normalization[9]. - Project upgrades: The migration is designed as "non-breaking," but you must change the import sources for these APIs when shifting to pure React Router v7[4][10].
Summary:
- Use
react-router-domfor all data routing/fetch/mutation APIs in new React Router 7+ projects; import types and hooks directly from this package[1][4][7][9][10]. - The Fetcher, ActionFunctionArgs, and action/loader patterns are now nearly identical in both Remix and React Router.
- For the most type-safe redirect handling, throw the redirect (not
return), as fixed in React Router 7.1+ and Remix post-2024[2][3]. - Check documentation and change logs for precise feature flag usage and continuing type evolution[9][10].
If you have a specific usage case or migration scenario, let me know for more targeted code samples!
Citations:
- 1: https://strapi.io/blog/from-remix-to-react-router-7-what-s-next-for-modern-web-dev
- 2: React router 7.0.0-pre.2 types for useFetcher and useActionData remix-run/react-router#12192
- 3: https://www.youtube.com/watch?v=54tdOkl9f04
- 4: https://remix.run/blog/merging-remix-and-react-router
- 5: https://www.geeksforgeeks.org/javascript/form-vs-fetcher-in-remix/
- 6: https://remix.run/docs/en/main/hooks/use-action-data
- 7: https://remix.guide/resources/JD34yZ3zCfhi?limit=150
- 8: https://www.nico.fyi/blog/close-dialog-with-use-fetcher-remix
- 9: https://reactrouter.com/6.30.1/start/changelog
- 10: https://reactrouter.com
@jaruesink You're absolutely correct! Thank you for the important correction. Based on the latest information, React Router 7 has indeed merged with Remix, and the original imports in the llms.txt file are actually correct.
Current State (React Router 7 + Remix Merge):
useFetcherandActionFunctionArgsare now available fromreact-router-dom(client-side) orreact-router(SSR contexts)- The original documentation uses
'react-router'which is appropriate for SSR/server contexts - My suggestion to use
@remix-run/reactand@remix-run/nodewas outdated
Correct Import Patterns for React Router 7:
// For client-side/SPA contexts:
import { useFetcher } from 'react-router-dom';
import type { ActionFunctionArgs } from 'react-router-dom';
// For SSR/server contexts (as used in the documentation):
import { useFetcher, type ActionFunctionArgs } from 'react-router';The documentation's use of 'react-router' is actually appropriate for the SSR context it's demonstrating. I apologize for the confusion in my initial review comment.
🐰
(\ /)
( .. )
o(")(")
✏️ Learnings added
Learnt from: jaruesink
PR: lambda-curry/forms#107
File: llms.txt:22-23
Timestamp: 2025-07-27T05:55:46.435Z
Learning: React Router 7 merged with Remix, so useFetcher and ActionFunctionArgs are now available from 'react-router' package rather than the separate '@remix-run/react' and '@remix-run/node' packages.
Learnt from: jaruesink
PR: lambda-curry/forms#107
File: llms.txt:22-23
Timestamp: 2025-07-27T05:55:46.435Z
Learning: React Router 7 merged with Remix in 2024-2025. useFetcher and ActionFunctionArgs are now available from 'react-router-dom' (client-side) and 'react-router' (SSR contexts), not from separate '@remix-run/react' and '@remix-run/node' packages. The original 'react-router' imports in documentation are correct for SSR contexts.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the required imports for Remix Hook Form integration, Zod, and base UI components in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use Zod schemas for all form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the form setup pattern for form initialization in Remix
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Follow the wrapper component pattern for all form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always define Zod schemas with proper error messages for form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Test component composition and customization in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Avoid unnecessary re-renders by properly structuring form state
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use ARIA attributes for complex form interactions
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/storybook-testing.mdc:0-0
Timestamp: 2025-07-23T12:48:03.192Z
Learning: Applies to apps/docs/src/remix-hook-form/*.stories.tsx : Never use regular `<form>` elements; always use `fetcher.Form` for form submissions in stories using React Router stub.
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-23T12:47:17.244Z
Learning: Applies to packages/components/src/ui/**/*.{ts,tsx} : Don't import from remix-hook-form package in ui components
Learnt from: jaruesink
PR: lambda-curry/forms#14
File: packages/components/src/remix/remix-textarea.tsx:10-15
Timestamp: 2024-11-26T05:28:16.321Z
Learning: When reviewing components like `RemixTextarea` in `packages/components/src/remix/`, avoid suggesting to memoize the `components` object with `useMemo` if the performance benefit is minimal.
Learnt from: jaruesink
PR: lambda-curry/forms#14
File: packages/components/src/remix/remix-checkbox.tsx:11-19
Timestamp: 2024-11-26T05:25:46.709Z
Learning: Ensure consistency when advising on the use of `useMemo` for static component references in Remix form components, avoiding unnecessary memoization where it doesn't provide performance benefits.
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure keyboard navigation works correctly in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use React.memo for expensive form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/react-typescript-patterns.mdc:0-0
Timestamp: 2025-07-23T12:47:43.342Z
Learning: Applies to src/components/**/*.tsx : Embrace React 19 ref handling patterns and avoid legacy patterns like forwardRef
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Follow the remix-hook-form/ and ui/ directory separation pattern
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Verify server-side validation integration in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Consider field-level subscriptions for large forms
| <fetcher.Form onSubmit={methods.handleSubmit}> | ||
| <TextField name="username" label="Username" /> | ||
| <TextField name="email" label="Email Address" /> | ||
| <TextField name="age" type="number" label="Age" /> | ||
| <Checkbox name="terms" label="Accept Terms and Conditions" /> | ||
|
|
||
| <Button type="submit">Submit</Button> |
There was a problem hiding this comment.
onSubmit={methods.handleSubmit} is probably wrong for Remix-Hook-Form
handleSubmit in RHF (and Remix-Hook-Form) is a higher-order function that returns the actual submit handler only after you supply at least an onValid callback. Passing the bare function will throw at runtime (handleSubmit is not a function inside the event handler).
Either:
-<fetcher.Form onSubmit={methods.handleSubmit}>
+<fetcher.Form onSubmit={methods.handleSubmit()}>or (preferred) specify explicit callbacks:
<fetcher.Form onSubmit={methods.handleSubmit(
data => methods.submit(data),
errors => {/* optional onInvalid */}
)}>Document the correct pattern so LLMs generate runnable code.
🤖 Prompt for AI Agents
In llms.txt around lines 64 to 70, the onSubmit handler is incorrectly set to
methods.handleSubmit without providing the required callbacks, causing runtime
errors. Fix this by calling methods.handleSubmit with at least an onValid
callback function that handles the form data submission, for example,
methods.handleSubmit(data => methods.submit(data)). Optionally, include an
onInvalid callback for error handling. Update the code to use this pattern so it
works correctly with Remix-Hook-Form.
There was a problem hiding this comment.
not according tot his documentation https://www.npmjs.com/package/remix-hook-form we can just pass it in as is
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
remix-hook-form documentation handleSubmit onSubmit usage examples from npmjs.com
💡 Result:
remix-hook-form provides a handleSubmit function, similar to react-hook-form, for managing form submission and validation in Remix applications. Here's how to use handleSubmit with an onSubmit handler, based directly on the latest documentation and npmjs.com-provided usage examples.
Basic Usage Example
Example from the Official remix-hook-form Documentation:
import { useRemixForm, getValidatedFormData } from "remix-hook-form";
import { Form } from "react-router-dom";
import { zodResolver } from "@hookform/resolvers/zod";
import * as zod from "zod";
const schema = zod.object({
name: zod.string().min(1),
email: zod.string().email().min(1),
});
type FormData = zod.infer<typeof schema>;
const resolver = zodResolver(schema);
export const action = async ({ request }) => {
const { errors, data, receivedValues: defaultValues } =
await getValidatedFormData<FormData>(request, resolver);
if (errors) {
return { errors, defaultValues };
}
// Do something with the data
return data;
};
export default function MyForm() {
const { handleSubmit, formState: { errors }, register } = useRemixForm<FormData>({
mode: "onSubmit",
resolver,
});
return (
<Form onSubmit={handleSubmit} method="POST">
<label>
Name:
<input type="text" {...register("name")} />
{errors.name && <p>{errors.name.message}</p>}
</label>
<label>
Email:
<input type="email" {...register("email")} />
{errors.email && <p>{errors.email.message}</p>}
</label>
<button type="submit">Submit</button>
</Form>
);
}This example shows using handleSubmit directly as the value for the form's onSubmit prop; it handles validation, and on a valid form, submits the form data (as FormData) using Remix's action4.
Advanced Usage: Custom onValid/onInvalid Handlers
You can override default behavior and provide custom handlers for valid or invalid submission cases:
const { handleSubmit } = useRemixForm({
// standard options (resolver, mode, etc.)
submitHandlers: {
onValid: data => {
// custom logic on successful validation
},
onInvalid: errors => {
// custom logic on validation errors
}
}
});In this setup, pass handleSubmit to your form’s onSubmit prop. The custom onValid or onInvalid handler is called, so the form does not automatically submit to the Remix action unless you submit manually from these handlers1.
Overriding the Submit Target/Method
You can set additional submission details, such as changing the request type or action URL:
const { handleSubmit } = useRemixForm({
// your normal options
submitConfig: {
replace: true,
method: "PUT",
action: "/api/youraction",
},
});This affects the behavior of the form submission by using different HTTP methods or target URLs1.
Summary Table: Key Patterns
| Use Case | How to Use | Example / Note |
|---|---|---|
| Default behavior | onSubmit={handleSubmit} |
Validates, then posts to current route Remix action |
| Custom submit logic | submitHandlers: { onValid, onInvalid } |
Calls your function(s), does NOT submit unless you do so manually |
| Override method/action | submitConfig: { method, action, ... } |
Changes HTTP method or endpoint |
Key Points
- Use
handleSubmitas the form'sonSubmitfor validated, automatic action submission. - Use
submitHandlersto override and provide customonValid/onInvalidlogic. Form will NOT be automatically submitted to the server; you must handle it in your handler if desired. - Customize the HTTP method, action, etc. with
submitConfig. - Errors are accessible via
formState.errorsand are auto-populated based on action results1.
For the most current and detailed examples, refer directly to the remix-hook-form npm documentation4.
Citations:
- 1: https://www.npmjs.com/package/remix-hook-form/v/4.3.1
- 2: https://www.felixyeboah.dev/blog/reusable-form-hook-with-remix-hook-form
- 3: https://refine.dev/docs/packages/react-hook-form/use-form/
- 4: https://www.npmjs.com/package/remix-hook-form
- 5: https://react-hook-form.com/docs/useform/handlesubmit
- 6: https://www.react-hook-form.com/get-started/
- 7: https://www.npmjs.com/package/remix-hook-form/v/1.0.6
- 8: https://remix.run/docs/en/main/hooks/use-submit
- 9: https://blog.logrocket.com/react-hook-form-vs-react-19/
- 10: https://www.npmjs.com/package/remix-hook-form/v/1.0.1?activeTab=code
@jaruesink You're absolutely right, and I apologize for the incorrect review comment. The official remix-hook-form documentation clearly shows that handleSubmit can indeed be passed directly to the onSubmit prop without requiring callback functions:
<Form onSubmit={handleSubmit} method="POST">This is different from standard react-hook-form where handleSubmit is a higher-order function requiring callbacks. The remix-hook-form library has modified this behavior to work seamlessly with Remix's action-based form submission patterns.
The pattern shown in your llms.txt documentation is correct and follows the official remix-hook-form API. Thank you for the correction and for referencing the authoritative documentation.
✏️ Learnings added
Learnt from: jaruesink
PR: lambda-curry/forms#107
File: llms.txt:63-69
Timestamp: 2025-07-27T05:56:41.348Z
Learning: In remix-hook-form, handleSubmit can be passed directly to the onSubmit prop (e.g., onSubmit={handleSubmit}) without requiring callback functions, unlike standard react-hook-form where handleSubmit is a higher-order function that requires onValid/onInvalid callbacks.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the required imports for Remix Hook Form integration, Zod, and base UI components in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use Zod schemas for all form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the form setup pattern for form initialization in Remix
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Follow the wrapper component pattern for all form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always define Zod schemas with proper error messages for form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Test component composition and customization in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/*.{tsx,ts} : Form-aware components should be named as ComponentName (e.g., TextField, Checkbox)
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Avoid unnecessary re-renders by properly structuring form state
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/storybook-testing.mdc:0-0
Timestamp: 2025-07-23T12:48:03.192Z
Learning: Applies to apps/docs/src/remix-hook-form/*.stories.tsx : Never use regular `<form>` elements; always use `fetcher.Form` for form submissions in stories using React Router stub.
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Validate on blur and submit, not on every keystroke
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : All form fields must have proper labels
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Consider field-level subscriptions for large forms
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-23T12:47:17.244Z
Learning: Applies to packages/components/src/ui/**/*.{ts,tsx} : Don't import from remix-hook-form package in ui components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Follow the remix-hook-form/ and ui/ directory separation pattern
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use ARIA attributes for complex form interactions
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Verify server-side validation integration in form component tests
- Add better section headers and explanations for component usage - Improve DatePicker, DropdownMenuSelect, and OTPInput sections with consistent formatting - Enhance Advanced Form Patterns with clearer explanations and use cases - Add missing imports and better structure to Success Handling section - Improve Checkbox Groups section with step-by-step implementation - Enhance Key Implementation Notes with code examples and visual formatting - Add essential patterns and important reminders for LLM implementation
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
llms.txt (2)
18-23: Incorrect Remix import paths break the example code
useFetcherandActionFunctionArgsmust be imported from Remix packages, notreact-router.-import { useFetcher, type ActionFunctionArgs } from 'react-router'; +import { useFetcher } from '@remix-run/react'; +import type { ActionFunctionArgs } from '@remix-run/node';
62-65:onSubmit={methods.handleSubmit}will throw at runtime
handleSubmitis a higher-order function; pass the returned handler instead:- <fetcher.Form onSubmit={methods.handleSubmit}> + <fetcher.Form onSubmit={methods.handleSubmit()}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
llms.txt(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use Zod schemas for all form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the form setup pattern for form initialization in Remix
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the required imports for Remix Hook Form integration, Zod, and base UI components in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Verify server-side validation integration in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/ui-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:47:43.432Z
Learning: Follow consistent component architecture patterns as established in lambda-curry/forms
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Follow the wrapper component pattern for all form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always define Zod schemas with proper error messages for form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Handle both client-side and server-side validation errors in form components
llms.txt (22)
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the required imports for Remix Hook Form integration, Zod, and base UI components in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use Zod schemas for all form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use the form setup pattern for form initialization in Remix
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always define Zod schemas with proper error messages for form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Follow the wrapper component pattern for all form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use ARIA attributes for complex form interactions
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Verify server-side validation integration in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Handle both client-side and server-side validation errors in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/storybook-testing.mdc:0-0
Timestamp: 2025-07-23T12:48:03.192Z
Learning: Applies to apps/docs/src/remix-hook-form/*.stories.tsx : Never use regular <form> elements; always use fetcher.Form for form submissions in stories using React Router stub.
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Avoid unnecessary re-renders by properly structuring form state
Learnt from: jaruesink
PR: #14
File: packages/components/src/remix/remix-textarea.tsx:10-15
Timestamp: 2024-11-26T05:28:16.321Z
Learning: When reviewing components like RemixTextarea in packages/components/src/remix/, avoid suggesting to memoize the components object with useMemo if the performance benefit is minimal.
Learnt from: jaruesink
PR: #14
File: packages/components/src/remix/remix-checkbox.tsx:11-19
Timestamp: 2024-11-26T05:25:46.709Z
Learning: Ensure consistency when advising on the use of useMemo for static component references in Remix form components, avoiding unnecessary memoization where it doesn't provide performance benefits.
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure keyboard navigation works correctly in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-23T12:47:17.244Z
Learning: Applies to packages/components/src/ui/**/*.{ts,tsx} : Don't import from remix-hook-form package in ui components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Validate on blur and submit, not on every keystroke
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : All form fields must have proper labels
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Consider field-level subscriptions for large forms
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Clear errors appropriately when fields are corrected
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-23T12:46:51.780Z
Learning: Applies to **/*.ts : Handle server-side validation using getValidatedFormData with zodResolver and return errors as needed
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/storybook-testing.mdc:0-0
Timestamp: 2025-07-23T12:48:03.192Z
Learning: Applies to apps/docs/src/remix-hook-form/*.stories.tsx : Test both client-side and server-side validation in form stories.
| **Client-side redirect handling:** | ||
| ```typescript | ||
| import { useNavigate } from 'react-router'; | ||
|
|
||
| const MyForm = () => { | ||
| const navigate = useNavigate(); | ||
| const fetcher = useFetcher(); | ||
|
|
||
| // Handle redirect from server response | ||
| useEffect(() => { | ||
| if (fetcher.data?.redirectTo) { | ||
| navigate(fetcher.data.redirectTo); | ||
| } | ||
| }, [fetcher.data?.redirectTo, navigate]); | ||
|
|
||
| // ... rest of component | ||
| }; | ||
| ``` | ||
|
|
||
| **Server-side redirect:** | ||
| ```typescript | ||
| import { redirect } from 'react-router'; | ||
|
|
||
| export const action = async ({ request }: ActionFunctionArgs) => { |
There was a problem hiding this comment.
More incorrect Remix imports (useNavigate, redirect)
Both should come from Remix packages:
-import { useNavigate } from 'react-router';
+import { useNavigate } from '@remix-run/react';
-import { redirect } from 'react-router';
+import { redirect } from '@remix-run/node';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| **Client-side redirect handling:** | |
| ```typescript | |
| import { useNavigate } from 'react-router'; | |
| const MyForm = () => { | |
| const navigate = useNavigate(); | |
| const fetcher = useFetcher(); | |
| // Handle redirect from server response | |
| useEffect(() => { | |
| if (fetcher.data?.redirectTo) { | |
| navigate(fetcher.data.redirectTo); | |
| } | |
| }, [fetcher.data?.redirectTo, navigate]); | |
| // ... rest of component | |
| }; | |
| ``` | |
| **Server-side redirect:** | |
| ```typescript | |
| import { redirect } from 'react-router'; | |
| export const action = async ({ request }: ActionFunctionArgs) => { | |
| -import { useNavigate } from 'react-router'; | |
| +import { useNavigate } from '@remix-run/react'; | |
| -import { redirect } from 'react-router'; | |
| +import { redirect } from '@remix-run/node'; |
🤖 Prompt for AI Agents
In llms.txt between lines 566 and 589, the imports for useNavigate and redirect
are incorrectly imported from 'react-router'. Change these imports to come from
the appropriate Remix packages, such as '@remix-run/react' for useNavigate and
'@remix-run/node' for redirect, to ensure correct functionality.
| const handleSubmit = (data: FormData) => { | ||
| // Show optimistic message immediately | ||
| setOptimisticMessage('Saving...'); | ||
|
|
||
| // Submit form | ||
| methods.handleSubmit(); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimistic-UI snippet calls methods.handleSubmit() without callbacks
handleSubmit() still expects onValid/onInvalid handlers. Either:
- methods.handleSubmit();
+ methods.handleSubmit(data => fetcher.submit(createFormData(data), { method: 'post' }));or wrap the returned function directly on <fetcher.Form>. Clarify in the guide to avoid runtime errors.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleSubmit = (data: FormData) => { | |
| // Show optimistic message immediately | |
| setOptimisticMessage('Saving...'); | |
| // Submit form | |
| methods.handleSubmit(); | |
| }; | |
| const handleSubmit = (data: FormData) => { | |
| // Show optimistic message immediately | |
| setOptimisticMessage('Saving...'); | |
| // Submit form | |
| - methods.handleSubmit(); | |
| + methods.handleSubmit(data => fetcher.submit(createFormData(data), { method: 'post' })); | |
| }; |
🤖 Prompt for AI Agents
In llms.txt around lines 608 to 614, the handleSubmit function calls
methods.handleSubmit() without providing the required onValid or onInvalid
callbacks, which can cause runtime errors. To fix this, either pass appropriate
onValid and onInvalid callback functions to methods.handleSubmit() within
handleSubmit, or move the call to methods.handleSubmit() directly as the submit
handler on the <fetcher.Form> component. Update the guide to clearly explain
this usage to prevent confusion and errors.
- Update import examples to use '@lambdacurry/forms' directly instead of '/remix-hook-form/' subpath - Consolidate imports in basic example for cleaner code - Update comprehensive example imports to match correct pattern - Fix important reminders section to reflect correct import path
📚 LLM Documentation for Forms Library
This PR adds comprehensive documentation specifically designed for LLMs to understand and implement forms using the
@lambdacurry/formslibrary.🎯 What's Included
The new
llms.txtfile provides:🤖 LLM-Optimized Format
The documentation is structured specifically for LLM consumption:
🚀 Benefits
This will enable LLMs to:
📁 Files Changed
llms.txt- New comprehensive LLM documentationThe documentation covers everything from basic setup to advanced patterns, ensuring LLMs can effectively implement any form using this library.
Created by Codegen for improved LLM integration with the forms library
💻 View my work • 🚫 Ban all checks • About Codegen
Summary by CodeRabbit