docs: add forms guide #3822
docs: add forms guide #3822
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe pull request introduces several changes, including the modification of the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (12)
apps/docs/components/docs/toc.tsx (1)
22-22: Approved: Improved visual hierarchy for level 4 headingsThe change from "pl-3" to "pl-6" for level 4 headings enhances the visual hierarchy in the table of contents, making it easier for users to distinguish between different heading levels. This improvement aligns well with the PR's objective of enhancing documentation and guidelines.
For consistency and future-proofing, consider using a multiple of a base padding unit. For example, if we assume "pl-3" represents 3 units of padding, we could use "pl-9" (3 * 3) instead of "pl-6" for level 4. This approach would make it easier to maintain a consistent scale if you need to add more levels in the future.
- 4: "pl-6", + 4: "pl-9",apps/docs/content/docs/guide/routing.mdx (4)
Line range hint
87-93: LGTM: Enhanced root layout example with NextUIProviderThe updated code snippet provides a more comprehensive example of wrapping the root layout with NextUIProvider. The addition of the
langattribute andclassNameto thehtmltag is a good practice for accessibility and theming.Consider adding a brief comment explaining the purpose of the
darkclass, as it might not be immediately clear to all readers why it's being added.
102-106: LGTM: Added helpful section on handling Next.js basePathThe new "Add useHref (Optional)" section is a valuable addition, providing clear instructions for users who need to work with the Next.js basePath configuration. The code snippets and explanations are accurate and helpful.
To enhance clarity, consider adding a brief explanation of what the
basePathsetting does and why a user might need to use it. This context could help readers better understand the purpose of this optional configuration.Also applies to: 118-121
165-167: LGTM: Clear instructions for handling basePath in Next.js Pages RouterThe updates to the basePath configuration section for Next.js Pages Router provide clear and accurate instructions. The code snippet is correct and consistent with the App Router example.
For consistency with the App Router section, consider adding a brief note explaining why a user might need to use the basePath configuration. This would provide similar context across both routing approaches.
185-189: LGTM: Enhanced React Router integration instructionsThe updates to the React Router section provide more comprehensive information about integrating with NextUIProvider. The explanation of useHref and basename is particularly helpful for users with complex routing setups. The code snippet is clear and includes all necessary imports.
To further improve clarity, consider adding a brief explanation or link to documentation about what the
basenameoption in React Router does. This would help readers understand why they might need to use theuseHrefhook in this context.Also applies to: 194-195
apps/docs/content/docs/guide/form.mdx (6)
1-28: LGTM! Clear introduction and explanation of labels and help text.The introduction and "Labels and help text" section provide a solid foundation for understanding NextUI form components. The emphasis on accessibility is commendable.
Consider adding a brief explanation of why labels and help text are important for accessibility. This could help developers understand the significance of these features beyond just UI design.
29-90: LGTM! Comprehensive coverage of form submission methods.The "Submitting data" section effectively explains both uncontrolled and controlled forms, providing clear code examples for each approach.
In the controlled form example (lines 70-89), consider adding a brief comment explaining the benefits of using controlled components, such as real-time validation or dynamic form behavior based on user input.
91-205: LGTM! Comprehensive coverage of validation techniques.The "Validation" section provides a thorough explanation of various validation approaches, including built-in validation, custom error messages, custom validation, and real-time validation. The code examples effectively illustrate each technique.
In the real-time validation example (lines 172-204), consider adding a debounce function to the
onValueChangehandler. This would prevent excessive validation checks while the user is typing, improving performance and user experience.
206-367: LGTM! Comprehensive coverage of server-side validation techniques.The "Server validation" section provides an excellent overview of server-side validation approaches, including schema validation and integration with React Server Actions and Remix. The code examples are clear and illustrative.
In the server-side validation examples, consider adding a brief explanation or example of how to handle unexpected server errors (e.g., network issues) in addition to validation errors. This would provide a more complete picture of error handling in form submissions.
368-416: LGTM! Clear explanation of form library integration.The "Form libraries" section provides a good introduction to integrating NextUI components with form libraries, focusing on React Hook Form. The code example effectively demonstrates the integration process.
Consider adding a brief mention or example of integrating with other popular form libraries, such as Formik. This would provide a more comprehensive overview of form library integration options for developers.
1-416: LGTM! Consistent and well-structured code examples.The code examples throughout the document are consistently written in TypeScript, using functional components and React hooks. They effectively demonstrate the usage of NextUI components and adhere to modern React best practices.
For improved consistency, consider adding type annotations to all function parameters and return types in the code examples. This would further enhance the TypeScript usage and provide clearer documentation for developers.
apps/docs/config/routes.json (1)
40-45: LGTM! Consider expanding keywords for better searchability.The new "Forms" route is well-structured and appropriately placed within the "Guide" section. The key, title, and path are consistent with the existing pattern.
Consider expanding the keywords to include more relevant terms. For example:
- "keywords": "forms, form validation, nextui", + "keywords": "forms, form validation, input handling, form submission, nextui",This could improve searchability and help users find the forms documentation more easily.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (4)
- apps/docs/components/docs/toc.tsx (1 hunks)
- apps/docs/config/routes.json (1 hunks)
- apps/docs/content/docs/guide/form.mdx (1 hunks)
- apps/docs/content/docs/guide/routing.mdx (12 hunks)
🔇 Additional comments (5)
apps/docs/content/docs/guide/routing.mdx (4)
61-64: LGTM: Improved Next.js App Router setup instructionsThe changes in this section enhance the clarity of the setup instructions for Next.js App Router. The addition of the "use client" directive and the correct imports improve the code snippet's completeness and accuracy.
139-139: LGTM: Improved Next.js Pages Router setup instructionsThe updates to the Next.js Pages Router section enhance the clarity of the setup instructions. The addition of necessary imports and type definitions in the code snippet improves its completeness and accuracy.
Also applies to: 144-146
229-231: LGTM: Improved Remix integration instructionsThe updates to the Remix section provide clearer and more accurate information about integrating NextUIProvider. The explanation that Remix uses React Router under the hood is helpful, and the guidance on where to render NextUIProvider in a Remix app is valuable. The code snippet is clear and includes all necessary imports.
Also applies to: 236-237
Line range hint
1-329: Overall assessment: Significant improvements to the routing guideThis update to the routing guide brings substantial improvements across various sections, including Next.js (both App and Pages Router), React Router, and Remix. The changes consistently enhance clarity, provide more comprehensive examples, and offer valuable insights for different routing scenarios.
Key improvements:
- Clearer setup instructions for Next.js App and Pages Router
- New section on handling Next.js basePath configuration
- Enhanced explanation of React Router integration
- Improved Remix integration instructions
These changes align well with the PR objectives of enhancing documentation. The guide now provides a more robust and user-friendly resource for developers integrating NextUI components with various routing solutions.
apps/docs/content/docs/guide/form.mdx (1)
1-416: LGTM! Well-structured and comprehensive form handling guide.The document is excellently structured, providing a logical progression from basic form concepts to advanced topics like server-side validation and form library integration. The consistent use of code examples throughout the guide enhances understanding and practical application.
📝 Description
Created the form guidelines that will be added in the following PR.
Reference: Forms – React Aria
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
New Features
Documentation
Style