chore: supplement validation behavior #3106
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughIn version 2.4.0 of the NextUI library, significant updates were made to the validation behavior across various components. The default validation behavior now follows the Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant User
participant Component
participant Form
participant Validation
User->>Component: Enter data
Component->>Validation: Validate data in real-time
Validation->>Component: Return validation status (isInvalid)
Component->>User: Display validation status
User->>Form: Submit form
Form->>Validation: Validate data on submit
Validation->>Form: Return validation status (native)
Form->>User: Display validation errors if any
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (4)
apps/docs/content/blog/v2.4.0.mdx (1)
233-233: The update to thedoctorcommand is well-documented, but consider linking to the specific issue for better traceability.packages/components/input/stories/input.stories.tsx (3)
Line range hint
497-497: Specify a more explicit type instead of usinganyto improve type safety and code clarity.
Line range hint
500-500: Use template literals here for better readability and consistency with modern JavaScript practices.- alert("Submitted value: " + JSON.stringify(data)); + alert(`Submitted value: ${JSON.stringify(data)}`);
Line range hint
142-142: Ensure all dependencies are specified in theuseMemoanduseMemohooks to avoid subtle bugs related to stale closures.- const validationState = React.useMemo(() => { - if (value === "") return undefined; - return validateEmail(value) ? "valid" : "invalid"; - }, [value]); + const validationState = React.useMemo(() => { - if (value === "") return undefined; - return validateEmail(value) ? "valid" : "invalid"; - }, [value, validateEmail]); - const end = React.useMemo(() => { - if (isClearable) { - return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>; - } - return endContent; - }, [isClearable, getClearButtonProps]); + const end = React.useMemo(() => { - if (isClearable) { - return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>; - } - return endContent; - }, [isClearable, getClearButtonProps, endContent]);Also applies to: 441-441
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- apps/docs/content/blog/v2.4.0.mdx (3 hunks)
- apps/docs/content/docs/components/input.mdx (1 hunks)
- packages/components/input/stories/input.stories.tsx (3 hunks)
Files skipped from review due to trivial changes (1)
- apps/docs/content/docs/components/input.mdx
Additional Context Used
Biome (7)
packages/components/input/stories/input.stories.tsx (7)
97-97: The computed expression can be simplified without the use of a string literal.
497-497: Unexpected any. Specify a different type.
500-500: Template literals are preferred over string concatenation.
5-6: All these imports are only used as types.
17-18: Some named imports are only used as types.
142-142: This hook does not specify all of its dependencies: validateEmail
441-441: This hook does not specify all of its dependencies: endContent
Additional comments not posted (5)
packages/components/input/stories/input.stories.tsx (5)
530-530: The addition ofvalidationBehavior: "native"aligns with the new validation strategy. Ensure this is consistently applied across all relevant components.
669-669: ThevalidationBehavior: "native"setting here is crucial for ensuring that the component behaves as expected under the new validation framework.
687-687: Good to seevalidationBehavior: "native"being applied here as well. This consistency is key in maintaining predictable behavior across the UI components.
Line range hint
97-97: Consider simplifying this computed expression to enhance readability and maintainability.
[REFACTOR_SUGGESTion]- const validationState = React.useMemo(() => { - if (value === "") return undefined; - return validateEmail(value) ? "valid" : "invalid"; - }, [value]); + const validationState = value ? (validateEmail(value) ? "valid" : "invalid") : undefined;
Line range hint
5-6: These imports are only used as types, which is a good practice to avoid unnecessary runtime imports.Also applies to: 17-18
|
|
||
| Since v2.4.0, we've changed the default validation behavior to `aria` wihch means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above. | ||
|
|
||
| For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead. |
There was a problem hiding this comment.
The form does not prevent submission, but the validate function will display error messages.
| <form onSubmit={onSubmit}> | ||
| <Input errorMessage={formErrors?.field1} isInvalid={!!formErrors?.field1} name="field1" /> | ||
| <Button type="submit">Submit</Button> | ||
| </form> |
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/docs/content/blog/v2.4.0.mdx (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/docs/content/blog/v2.4.0.mdx
There was a problem hiding this comment.
Actionable comments posted: 7
Outside diff range and nitpick comments (8)
apps/docs/content/docs/components/date-range-picker.mdx (8)
Line range hint
65-65: Consider removing the comma before "if" for grammatical correctness.- By default, the calendar popover displays a single month. The `visibleMonths` prop allows displaying up to 3 months at a time, if screen space permits. + By default, the calendar popover displays a single month. The `visibleMonths` prop allows displaying up to 3 months at a time if screen space permits.
Line range hint
116-116: Consider using a more concise phrase instead of "taken into account".- ...ncerns such as daylight saving time are taken into account when the value is manipulated. + ...ncerns such as daylight saving time are considered when the value is manipulated.
Line range hint
231-231: Hyphenate "Non Contiguous" to "Non-Contiguous" for consistency.- ### Non Contiguous + ### Non-Contiguous
Line range hint
324-324: Use "an" instead of "a" before a word starting with a vowel sound.- When the date-range-picker has a end content. + When the date-range-picker has an end content.
Line range hint
326-326: Consider rephrasing for conciseness.- When the date-range-picker's `visibleMonth` is more than 2. + When the date-range-picker's `visibleMonth` exceeds 2.
Line range hint
370-370: Add a comma after "Usually" for better readability.- Usually a calendar icon. + Usually, a calendar icon.
Line range hint
374-374: Hyphenate "24-hour" when used as an adjective.- Whether to display the time in 12 or 24 hour format. + Whether to display the time in 12 or 24-hour format.
Line range hint
375-375: Add a comma after "Typically" for better readability.- Typically "day" for dates. + Typically, "day" for dates.
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (7)
- apps/docs/content/docs/components/date-input.mdx (1 hunks)
- apps/docs/content/docs/components/date-picker.mdx (1 hunks)
- apps/docs/content/docs/components/date-range-picker.mdx (1 hunks)
- apps/docs/content/docs/components/radio-group.mdx (1 hunks)
- apps/docs/content/docs/components/range-calendar.mdx (1 hunks)
- apps/docs/content/docs/components/textarea.mdx (1 hunks)
- apps/docs/content/docs/components/time-input.mdx (1 hunks)
Additional Context Used
LanguageTool (42)
apps/docs/content/docs/components/date-input.mdx (9)
Near line 96: ‘taken into account’ might be wordy. Consider a shorter alternative.
Context: ...ncerns such as daylight saving time are taken into account when the value is manipulated. [@Inter...
Rule ID: EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT
Near line 213: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen.
Context: ...ateInput displays times in either 12 or 24 hour hour format depending on the user's loc...
Rule ID: HOUR_HYPHEN
Near line 246: Unpaired symbol: ‘"’ seems to be missing
Context: ...ge of the date-input. {" "} ## Data AttributesDateInputhas...
Rule ID: EN_UNPAIRED_QUOTES
Near line 246: Unpaired symbol: ‘"’ seems to be missing
Context: ... of the date-input. {" "} ## Data AttributesDateInputhas t...
Rule ID: EN_UNPAIRED_QUOTES
Near line 267: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’.
Context: ...nd-content**: When the date-input has a end content. Base on thoseendContent...
Rule ID: EN_A_VS_AN
Near line 304: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”?
Context: ... | Element to be rendered in the left side of the date input. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDE
Near line 305: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”?
Context: ... | Element to be rendered in the right side of the date input. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDE
Near line 315: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen.
Context: ... | Whether to display the time in 12 or 24 hour format. This is determined by the user'...
Rule ID: HOUR_HYPHEN
Near line 316: A comma may be missing after the conjunctive/linking adverb ‘Typically’.
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...
Rule ID: SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMAapps/docs/content/docs/components/date-picker.mdx (9)
Near line 103: ‘taken into account’ might be wordy. Consider a shorter alternative.
Context: ...ncerns such as daylight saving time are taken into account when the value is manipulated. [@Inter...
Rule ID: EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT
Near line 220: Usually, there’s no comma before “if”.
Context: ...lows displaying up to 3 months at a time, if screen space permits. <CodeDemo title=...
Rule ID: IF_NO_COMMA
Near line 269: Unpaired symbol: ‘"’ seems to be missing
Context: ...ut component element. {" "} ## Data AttributesDatePickerha...
Rule ID: EN_UNPAIRED_QUOTES
Near line 298: Unpaired symbol: ‘"’ seems to be missing
Context: ...e validation errors {" "} ## API ### DatePicker Props | Attri...
Rule ID: EN_UNPAIRED_QUOTES
Near line 318: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”?
Context: ... | Element to be rendered in the left side of the date-picker. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDE
Near line 319: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”?
Context: ... | Element to be rendered in the right side of the date-picker. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDE
Near line 326: Consider adding a comma after ‘Usually’ for more clarity.
Context: ...icon to toggle the date picker popover. Usually a calendar icon. ...
Rule ID: RB_LY_COMMA
Near line 333: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen.
Context: ... | Whether to display the time in 12 or 24 hour format. This is determined by the user'...
Rule ID: HOUR_HYPHEN
Near line 334: A comma may be missing after the conjunctive/linking adverb ‘Typically’.
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...
Rule ID: SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMAapps/docs/content/docs/components/date-range-picker.mdx (10)
Near line 65: Usually, there’s no comma before “if”.
Context: ...lows displaying up to 3 months at a time, if screen space permits. <CodeDemo title=...
Rule ID: IF_NO_COMMA
Near line 116: ‘taken into account’ might be wordy. Consider a shorter alternative.
Context: ...ncerns such as daylight saving time are taken into account when the value is manipulated. [@Inter...
Rule ID: EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT
Near line 231: This expression is usually spelled with a hyphen.
Context: ...PickerContent.unavailableDates} /> ### Non Contiguous The allowsNonContiguousRanges prop ena...
Rule ID: NON_ANTI_JJ
Near line 324: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’.
Context: ...ent**: When the date-range-picker has a end content. Base on thoseendContent...
Rule ID: EN_A_VS_AN
Near line 326: This phrasing could be wordy, so try replacing it with something more concise.
Context: ... the date-range-picker'svisibleMonthis more than 2. ## Accessibility ...
Rule ID: MORE_THAN_EXCEEDS
Near line 359: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”?
Context: ... | Element to be rendered in the left side of the date-range-picker. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDE
Near line 360: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”?
Context: ... | Element to be rendered in the right side of the date-range-picker. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDE
Near line 370: Consider adding a comma after ‘Usually’ for more clarity.
Context: ...icon to toggle the date picker popover. Usually a calendar icon. ...
Rule ID: RB_LY_COMMA
Near line 374: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen.
Context: ... | Whether to display the time in 12 or 24 hour format. This is determined by the user'...
Rule ID: HOUR_HYPHEN
Near line 375: A comma may be missing after the conjunctive/linking adverb ‘Typically’.
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...
Rule ID: SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMAapps/docs/content/docs/components/radio-group.mdx (2)
Near line 103: Unpaired symbol: ‘"’ seems to be missing
Context: ...ontent.customImpl} /> {" "} ## Data Attributes - RadioGroup ha...
Rule ID: EN_UNPAIRED_QUOTES
Near line 144: Unpaired symbol: ‘"’ seems to be missing
Context: ...sistive technology. {" "} ## API ### RadioGroup Props | Attri...
Rule ID: EN_UNPAIRED_QUOTESapps/docs/content/docs/components/range-calendar.mdx (2)
Near line 98: Consider using a different verb for a more formal wording.
Context: ...ssage slot may be used to help the user fix the issue. By default, the selected da...
Rule ID: FIX_RESOLVE
Near line 216: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...r, e.g. single letter, abbreviation, or full day name. ...
Rule ID: EN_COMPOUND_ADJECTIVE_INTERNALapps/docs/content/docs/components/textarea.mdx (4)
Near line 105: Unpaired symbol: ‘"’ seems to be missing
Context: ...sage of the textarea. {" "} ## Data AttributesTextareahas ...
Rule ID: EN_UNPAIRED_QUOTES
Near line 136: Unpaired symbol: ‘"’ seems to be missing
Context: ...the input via ARIA. {" "} ## API ### Textarea Props | Attribu...
Rule ID: EN_UNPAIRED_QUOTES
Near line 156: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the left side”?
Context: ... | Element to be rendered in the left side of the input. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDE
Near line 157: In this case, the usual preposition with “side” is “on”, not “in”. Did you mean “on the right side”?
Context: ... | Element to be rendered in the right side of the input. ...
Rule ID: IN_ON_THE_RIGHT_HAND_SIDEapps/docs/content/docs/components/time-input.mdx (6)
Near line 95: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...artContent} /> ### End Content If you want to display some content after the time inp...
Rule ID: REP_WANT_TO_VB
Near line 107: ‘taken into account’ might be wordy. Consider a shorter alternative.
Context: ...ncerns such as daylight saving time are taken into account when the value is manipulated. In most...
Rule ID: EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT
Near line 111: Probably a preposition is missing after ‘applies’.
Context: ...ale abolishes DST). Examples where this applies include calendar events, reminders, and other t...
Rule ID: ATD_VERBS_TO_COLLOCATION
Near line 149: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen.
Context: ...meInput` displays times in either 12 or 24 hour hour format depending on the user's loc...
Rule ID: HOUR_HYPHEN
Near line 149: Possible missing comma found.
Context: ...lays times in either 12 or 24 hour hour format depending on the user's locale. However...
Rule ID: AI_HYDRA_LEO_MISSING_COMMA
Near line 211: When ‘24-hour’ is used as a modifier, it is usually spelled with a hyphen.
Context: ... | Whether to display the time in 12 or 24 hour format. By default, this is determined ...
Rule ID: HOUR_HYPHEN
Additional comments not posted (2)
apps/docs/content/docs/components/date-picker.mdx (1)
316-316: The update to thevalidateproperty is clear and aligns well with the new validation behavior. However, consider using "on the left side" instead of "in the left side" for better grammatical accuracy.- Element to be rendered in the left side of the date-picker. + Element to be rendered on the left side of the date-picker.Likely invalid or redundant comment.
apps/docs/content/docs/components/range-calendar.mdx (1)
229-229: The update to thevalidateproperty is clear and aligns well with the new validation behavior. However, consider using "on the right side" instead of "in the right side" for better grammatical accuracy.- Element to be rendered in the right side of the date-picker. + Element to be rendered on the right side of the date-picker.Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (9)
- apps/docs/content/docs/components/checkbox-group.mdx (1 hunks)
- apps/docs/content/docs/components/date-input.mdx (1 hunks)
- apps/docs/content/docs/components/date-picker.mdx (1 hunks)
- apps/docs/content/docs/components/date-range-picker.mdx (1 hunks)
- apps/docs/content/docs/components/input.mdx (1 hunks)
- apps/docs/content/docs/components/radio-group.mdx (1 hunks)
- apps/docs/content/docs/components/range-calendar.mdx (1 hunks)
- apps/docs/content/docs/components/textarea.mdx (1 hunks)
- apps/docs/content/docs/components/time-input.mdx (1 hunks)
Files skipped from review as they are similar to previous changes (8)
- apps/docs/content/docs/components/date-input.mdx
- apps/docs/content/docs/components/date-picker.mdx
- apps/docs/content/docs/components/date-range-picker.mdx
- apps/docs/content/docs/components/input.mdx
- apps/docs/content/docs/components/radio-group.mdx
- apps/docs/content/docs/components/range-calendar.mdx
- apps/docs/content/docs/components/textarea.mdx
- apps/docs/content/docs/components/time-input.mdx
Closes #
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
New Features
isInvalidprop for real-time validation across various components.validateproperty to include additional information on displaying validation errors based onvalidationBehaviorsetting.Improvements
doctorcommand to check and display incorrect peerDependencies.ariafor better accessibility.Documentation
isInvalidprop.