feat: add month and year pickers to DateRangePicker and RangeCalendar #3302
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 70a92fc The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Warning Rate limit exceeded@jrgarciadev has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 19 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe recent update focuses on enhancing the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DateRangePicker
participant RangeCalendar
participant CalendarHeader
participant CalendarBase
User->>DateRangePicker: Render with showMonthAndYearPickers
DateRangePicker->>RangeCalendar: Initialize component
RangeCalendar->>CalendarHeader: Show picker button
CalendarHeader->>CalendarBase: Handle button press
CalendarBase-->>CalendarHeader: Render month and year pickers
CalendarHeader-->>RangeCalendar: Show updated view
RangeCalendar-->>User: Display with month and year pickers
Assessment against linked issues
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
|
|
@ryo-manba please adjust the range calendar docs and make clear that it only works when visible months is |
|
@jrgarciadev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (3)
packages/components/calendar/src/use-calendar.ts (1)
Line range hint
27-29: Consider renamingbuttonPickerPropsfor clarity.The parameter
buttonPickerPropsmight be more descriptive if renamed tomonthYearPickerButtonPropsto clearly indicate its purpose.- buttonPickerProps: buttonPickerPropsProp, + monthYearPickerButtonProps: buttonPickerPropsProp,packages/components/calendar/stories/range-calendar.stories.tsx (1)
Line range hint
273-273: Avoid using the comma operator.The comma operator is disallowed as it often obscures side effects. Refactor the code to avoid using the comma operator.
- setValue(nextMonthValue), setFocusedValue(nextMonthValue.start); + setValue(nextMonthValue); + setFocusedValue(nextMonthValue.start);apps/docs/content/docs/components/date-picker.mdx (1)
Line range hint
324-325: Correct preposition usage for clarity.Use "on" instead of "in" for better clarity.
- | Element to be rendered in the left side of the date-picker. + | Element to be rendered on the left side of the date-picker. - | Element to be rendered in the right side of the date-picker. + | Element to be rendered on the right side of the date-picker.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (16)
- .changeset/kind-cobras-travel.md (1 hunks)
- apps/docs/content/components/date-range-picker/index.ts (2 hunks)
- apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts (1 hunks)
- apps/docs/content/components/range-calendar/index.ts (2 hunks)
- apps/docs/content/components/range-calendar/with-month-and-year-picker.ts (1 hunks)
- apps/docs/content/docs/components/calendar.mdx (2 hunks)
- apps/docs/content/docs/components/date-picker.mdx (3 hunks)
- apps/docs/content/docs/components/date-range-picker.mdx (3 hunks)
- apps/docs/content/docs/components/range-calendar.mdx (2 hunks)
- packages/components/calendar/src/calendar-header.tsx (1 hunks)
- packages/components/calendar/src/range-calendar.tsx (1 hunks)
- packages/components/calendar/src/use-calendar-base.ts (2 hunks)
- packages/components/calendar/src/use-calendar.ts (1 hunks)
- packages/components/calendar/src/use-range-calendar.ts (6 hunks)
- packages/components/calendar/stories/range-calendar.stories.tsx (2 hunks)
- packages/components/date-picker/stories/date-range-picker.stories.tsx (1 hunks)
Files skipped from review due to trivial changes (2)
- .changeset/kind-cobras-travel.md
- packages/components/calendar/src/calendar-header.tsx
Additional context used
Biome
packages/components/calendar/stories/range-calendar.stories.tsx
[error] 273-273: The comma operator is disallowed.
Its use is often confusing and obscures side effects.
(lint/style/noCommaOperator)
packages/components/date-picker/stories/date-range-picker.stories.tsx
[error] 488-488: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
LanguageTool
apps/docs/content/docs/components/date-picker.mdx
[style] ~109-~109: ‘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...(EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT)
[typographical] ~226-~226: Usually, there’s no comma before “if”.
Context: ...lows displaying up to 3 months at a time, if screen space permits. <CodeDemo title=...(IF_NO_COMMA)
[grammar] ~324-~324: 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. ...(IN_ON_THE_RIGHT_HAND_SIDE)
[grammar] ~325-~325: 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. ...(IN_ON_THE_RIGHT_HAND_SIDE)
[typographical] ~332-~332: Consider adding a comma after ‘Usually’ for more clarity.
Context: ...icon to toggle the date picker popover. Usually a calendar icon. ...(RB_LY_COMMA)
[grammar] ~338-~338: 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'...(HOUR_HYPHEN)
[uncategorized] ~339-~339: A comma may be missing after the conjunctive/linking adverb ‘Typically’.
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
apps/docs/content/docs/components/calendar.mdx
[style] ~90-~90: 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...(FIX_RESOLVE)
[uncategorized] ~214-~214: 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. ...(EN_COMPOUND_ADJECTIVE_INTERNAL)
apps/docs/content/docs/components/range-calendar.mdx
[style] ~98-~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...(FIX_RESOLVE)
[uncategorized] ~222-~222: 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. ...(EN_COMPOUND_ADJECTIVE_INTERNAL)
apps/docs/content/docs/components/date-range-picker.mdx
[typographical] ~65-~65: Usually, there’s no comma before “if”.
Context: ...lows displaying up to 3 months at a time, if screen space permits. <CodeDemo title=...(IF_NO_COMMA)
[style] ~126-~126: ‘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...(EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT)
[grammar] ~241-~241: This expression is usually spelled with a hyphen.
Context: ...PickerContent.unavailableDates} /> ### Non Contiguous The allowsNonContiguousRanges prop ena...(NON_ANTI_JJ)
[misspelling] ~338-~338: 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...(EN_A_VS_AN)
[style] ~340-~340: This phrasing could be wordy, so try replacing it with something more concise.
Context: ... the date-range-picker'svisibleMonthis more than 2. ## Accessibility ...(MORE_THAN_EXCEEDS)
[grammar] ~373-~373: 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. ...(IN_ON_THE_RIGHT_HAND_SIDE)
[grammar] ~374-~374: 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. ...(IN_ON_THE_RIGHT_HAND_SIDE)
[typographical] ~384-~384: Consider adding a comma after ‘Usually’ for more clarity.
Context: ...icon to toggle the date picker popover. Usually a calendar icon. ...(RB_LY_COMMA)
[grammar] ~388-~388: 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'...(HOUR_HYPHEN)
[uncategorized] ~389-~389: A comma may be missing after the conjunctive/linking adverb ‘Typically’.
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
Additional comments not posted (16)
apps/docs/content/components/range-calendar/with-month-and-year-picker.ts (1)
1-10: LGTM!The
with-month-and-year-pickercomponent correctly integrates theRangeCalendarwith the month and year picker functionality.apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts (1)
1-13: LGTM!The
with-month-and-year-pickerscomponent correctly integrates theDateRangePickerwith the month and year picker functionality.apps/docs/content/components/range-calendar/index.ts (1)
Line range hint
15-32: LGTM!The
withMonthAndYearPickerimport and export are correctly added to therange-calendarcontent.packages/components/calendar/src/range-calendar.tsx (1)
13-13: LGTM!The
Propsinterface has been streamlined by removing unnecessary properties, simplifying theRangeCalendarcomponent.apps/docs/content/components/date-range-picker/index.ts (1)
22-22: LGTM!However, ensure that the
with-month-and-year-pickersmodule exists and is correctly implemented.Also applies to: 47-47
Verification successful
LGTM!
The
with-month-and-year-pickersmodule exists and is correctly implemented in thedate-range-pickerdirectory.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the `with-month-and-year-pickers` module. # Test: Check if the file exists. Expect: The file should exist. fd --type f 'with-month-and-year-pickers.ts'Length of output: 194
packages/components/calendar/src/use-calendar.ts (1)
16-16: Ensure type consistency forUseCalendarProps.The new type
UseCalendarPropscorrectly extendsUseCalendarBasePropsandAriaCalendarProps. Make sure this change is consistent with other related types and interfaces.Verification successful
Type consistency for
UseCalendarPropsverified.The
UseCalendarPropstype is consistently defined and used across the codebase. TheuseCalendarfunction is correctly updated and used in multiple places without any inconsistencies.
UseCalendarPropsis correctly imported and extended incalendar.tsx.UseCalendarBasePropsandAriaCalendarPropsare correctly defined and used.- The
useCalendarfunction is correctly implemented and used across the codebase.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify type consistency for `UseCalendarProps`. # Test: Search for the usage of `UseCalendarProps`. Expect: Consistent usage across the codebase. rg --type ts 'UseCalendarProps'Length of output: 507
Script:
#!/bin/bash # Search for the definitions of `UseCalendarBaseProps` and `AriaCalendarProps` rg --type ts 'UseCalendarBaseProps' rg --type ts 'AriaCalendarProps' # Verify the `useCalendar` function implementation and its usage rg --type ts 'useCalendar'Length of output: 5675
packages/components/calendar/src/use-range-calendar.ts (2)
11-12: Ensure correct import ofButtonProps.The import of
ButtonPropsfrom@nextui-org/buttonis necessary for the newbuttonPickerPropsparameter. Make sure this import is correct and used consistently.Verification successful
Verified correct import and usage of
ButtonProps.The import of
ButtonPropsfrom@nextui-org/buttonis consistent and correctly used across the codebase, including theuse-range-calendarfile.
packages/components/calendar/src/use-range-calendar.ts: Correct import and usage ofButtonProps.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correct import of `ButtonProps`. # Test: Search for the usage of `ButtonProps`. Expect: Consistent usage across the codebase. rg --type ts 'ButtonProps'Length of output: 23442
47-47: Ensure correct implementation ofshowMonthAndYearPickers.The new
showMonthAndYearPickersparameter is introduced. Make sure this parameter is correctly implemented and used throughout the component.Verification successful
The
showMonthAndYearPickersparameter is correctly implemented and used throughout the component.The parameter is consistently defined, assigned, and utilized in relevant contexts across multiple files:
packages/components/date-picker/src/use-date-picker-base.tspackages/components/calendar/src/use-calendar.tspackages/components/calendar/src/use-calendar-base.tspackages/components/calendar/src/use-range-calendar.tspackages/components/calendar/src/calendar-header.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correct implementation of `showMonthAndYearPickers`. # Test: Search for the usage of `showMonthAndYearPickers`. Expect: Consistent usage across the codebase. rg --type ts 'showMonthAndYearPickers'Length of output: 4635
Script:
#!/bin/bash # Inspect the usage of `showMonthAndYearPickers` in key files to ensure correct implementation. # Extract relevant lines from files where `showMonthAndYearPickers` is defined or used. rg --type ts --type tsx --line-number --context 5 'showMonthAndYearPickers' packages/components/date-picker/src/use-date-picker-base.ts packages/components/calendar/src/use-calendar.ts packages/components/calendar/src/use-calendar-base.ts packages/components/calendar/src/use-range-calendar.ts packages/components/calendar/src/calendar-header.tsxLength of output: 374
Script:
#!/bin/bash # Inspect the usage of `showMonthAndYearPickers` in key files to ensure correct implementation. # Extract relevant lines from files where `showMonthAndYearPickers` is defined or used. rg --type-add 'tsx:*.tsx' --type ts --type tsx --line-number --context 5 'showMonthAndYearPickers' packages/components/date-picker/src/use-date-picker-base.ts packages/components/calendar/src/use-calendar.ts packages/components/calendar/src/use-calendar-base.ts packages/components/calendar/src/use-range-calendar.ts packages/components/calendar/src/calendar-header.tsxLength of output: 18789
packages/components/calendar/stories/range-calendar.stories.tsx (1)
379-385: LGTM!The new export
WithMonthAndYearPickerscorrectly demonstrates the new feature.packages/components/calendar/src/use-calendar-base.ts (2)
166-171: Add documentation forbuttonPickerProps.The
buttonPickerPropsproperty has been added, but it lacks detailed documentation.+ /** + * Props for the button picker, which is used to select the month, year and expand the header. + */Likely invalid or redundant comment.
222-224: EnsureshowMonthAndYearPickerslogic is correct.The logic for
showMonthAndYearPickersis clear and correctly implemented. However, ensure that this logic aligns with the rest of the codebase.Verification successful
Ensure
showMonthAndYearPickerslogic is correct.The logic for
showMonthAndYearPickersaligns with the rest of the codebase. It is consistently used in various contexts, such as stories, tests, and source files, and the conditionvisibleMonths === 1is correctly implemented.
packages/components/calendar/src/use-calendar-base.ts:const showMonthAndYearPickers = originalProps.showMonthAndYearPickers && visibleMonths === 1;- Other instances in stories and tests also reflect the correct usage.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `showMonthAndYearPickers` in the codebase. # Test: Search for the usage of `showMonthAndYearPickers`. Expect: Consistent logic and usage. rg --type typescript $'showMonthAndYearPickers'Length of output: 81
Script:
#!/bin/bash # Description: Verify the usage of `showMonthAndYearPickers` in the codebase. # Test: Search for the usage of `showMonthAndYearPickers`. Expect: Consistent logic and usage. rg --type ts 'showMonthAndYearPickers'Length of output: 4635
packages/components/date-picker/stories/date-range-picker.stories.tsx (1)
386-392: Add alternative text for SVGs for accessibility.Ensure all SVGs have alternative text for accessibility purposes.
- <svg height="1em" viewBox="0 0 24 24" width="1em"> + <svg height="1em" viewBox="0 0 24 24" width="1em" aria-label="Calendar icon">Likely invalid or redundant comment.
apps/docs/content/docs/components/range-calendar.mdx (2)
110-114: LGTM!The documentation for the
showMonthAndYearPickersprop is clear and concise.
217-223: LGTM!The documentation for the
showMonthAndYearPickersprop in the props table is clear and concise.Tools
LanguageTool
[uncategorized] ~222-~222: 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. ...(EN_COMPOUND_ADJECTIVE_INTERNAL)
apps/docs/content/docs/components/date-range-picker.mdx (2)
99-103: LGTM!The documentation for the
showMonthAndYearPickersprop is clear and concise.
386-396: LGTM!The documentation for the
showMonthAndYearPickersprop in the props table is clear and concise.Tools
LanguageTool
[grammar] ~388-~388: 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'...(HOUR_HYPHEN)
[uncategorized] ~389-~389: A comma may be missing after the conjunctive/linking adverb ‘Typically’.
Context: ...t that is displayed in the date picker. Typically "day" for dates. ...(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
| You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature. | ||
|
|
There was a problem hiding this comment.
Improve wording for clarity.
The sentence can be improved for better clarity.
- You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature.
+ To enable month and year pickers in the calendar popover, set the `showMonthAndYearPickers` property to `true`. Note that setting the `visibleMonths` prop to a number greater than 1 will disable this feature.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.
| You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature. | |
| You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. Note that setting the `visibleMonths` prop to a number greater than 1 will disable this feature. |
| @@ -101,7 +101,7 @@ This example validates that the selected date is a weekday and not a weekend acc | |||
|
|
|||
| ### With Month And Year Picker | |||
|
|
|||
| Calendar supports month and year picker for rapid selection. | |||
| Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled. | |||
There was a problem hiding this comment.
Improve clarity in documentation.
The sentence can be improved for better clarity.
- Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
+ The calendar supports month and year pickers for rapid selection. Enable this feature by setting `showMonthAndYearPickers` to `true`. Note that if `visibleMonths` is set to a number greater than 1, this feature will be disabled.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.
| Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled. | |
| Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled. | |
| ``` | |
| ```suggestion | |
| The calendar supports month and year pickers for rapid selection. Enable this feature by setting `showMonthAndYearPickers` to `true`. Note that if `visibleMonths` is set to a number greater than 1, this feature will be disabled. |
| const buttonPickerProps: ButtonProps = { | ||
| ...buttonPickerPropsProp, | ||
| onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)), | ||
| }; |
There was a problem hiding this comment.
Consider renaming buttonPickerProps for clarity.
The parameter buttonPickerProps might be more descriptive if renamed to monthYearPickerButtonProps to clearly indicate its purpose.
- const buttonPickerProps: ButtonProps = {
- ...buttonPickerPropsProp,
- onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)),
- };
+ const monthYearPickerButtonProps: ButtonProps = {
+ ...buttonPickerPropsProp,
+ onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)),
+ };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 buttonPickerProps: ButtonProps = { | |
| ...buttonPickerPropsProp, | |
| onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)), | |
| }; | |
| const monthYearPickerButtonProps: ButtonProps = { | |
| ...buttonPickerPropsProp, | |
| onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)), | |
| }; |
|
@ryo-manba |
|
@Artem2001S This PR is marked in 2.5.0 milestone. We'll merge this after v2.4.3. |
📝 Description
Added month and year pickers to DateRangePicker and RangeCalendar.
⛳️ Current behavior (updates)
DateRangePicker and RangeCalendar do not have month and year pickers.
🚀 New behavior
DateRangePicker and RangeCalendar now support month and year pickers.
💣 Is this a breaking change (Yes/No):
No.
📝 Additional Information
Summary by CodeRabbit
New Features
Enhancements
showMonthAndYearPickersprop and its interactions withvisibleMonths.Bug Fixes
visibleMonthsproperty to disable month and year pickers when set to a number greater than 1.Documentation