fix(docs): types in date-related doc pages #3393
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughRecent updates to the documentation and codebase include enhancing type definitions related to date and time handling, refining data structures, and adjusting method parameters. These changes largely focus on standardizing how dates and times are represented across components and improving the handling of component properties in the Changes
Sequence Diagram(s)(For this set of changes, generating sequence diagrams isn't necessary, as the changes are primarily related to type definitions, handler parameter updates, and minor refactoring.) 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
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/docs/content/docs/components/range-calendar.mdx (1 hunks)
Additional comments not posted (1)
apps/docs/content/docs/components/range-calendar.mdx (1)
239-239: Correct theonChangehandler type.The
onChangehandler type has been correctly updated toRangeValue<MappedDateValue<DateValue>>. This change ensures that the handler processes and handles value changes appropriately.
wingkwong
changed the title
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (6)
- apps/docs/content/docs/components/calendar.mdx (2 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/range-calendar.mdx (2 hunks)
- packages/components/image/src/use-image.ts (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/docs/content/docs/components/range-calendar.mdx
Additional comments not posted (18)
packages/components/image/src/use-image.ts (2)
124-137: Consolidate width and height calculations.The changes to consolidate width and height calculations into a single
useMemoblock are efficient and improve code readability.However, ensure that
propsis correctly used and passed in the context.Verification successful
Verified: Correct usage of
propsinuseImagefunction.The
propsobject is correctly used and passed within theuseImagefunction. The consolidation of width and height calculations into a singleuseMemoblock is efficient and improves code readability.
propsis mapped fromoriginalPropsand used consistently within the function.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `props` in the `useImage` function. # Test: Search for the usage of `props` within the `useImage` function. Expect: Correct usage and passing of `props`. rg --type js --pcre2 "props" packages/components/image/src/use-image.tsLength of output: 579
170-170: Conditional application of height.The logic for applying height conditionally based on
otherPropsis correct.Ensure that
otherPropsis properly populated in the context.apps/docs/content/docs/components/date-input.mdx (3)
330-330: UpdateonChangehandler type.The update to the
onChangehandler type aligns with the new date and time types.Ensure the new type
MappedDateValueis correctly used and documented.
361-364: IntroduceMappedDateValuetype.The
MappedDateValuetype mapsDateValueto specific date and time types correctly.Ensure that the mapping logic is accurate.
369-372: IntroduceDateValue,CalendarDate,CalendarDateTime, andZonedDateTimetypes.The types represent different date and time formats correctly.
Ensure that the constructors and methods are accurately documented and implemented.
Also applies to: 379-419, 426-474, 481-535
Verification successful
Introduce
DateValue,CalendarDate,CalendarDateTime, andZonedDateTimetypes.The types represent different date and time formats correctly. The documentation and implementation for these types, including their constructors and methods, are accurately documented across various locations in the codebase.
- Verified in:
apps/docs/content/components/date-range-picker/international-calendar.tsapps/docs/content/components/date-range-picker/with-time-field.tsapps/docs/content/components/date-range-picker/time-zones.tsapps/docs/content/components/time-input/controlled.tsapps/docs/content/components/time-input/timezones.tsapps/docs/content/components/time-input/hour-cycle.tsapps/docs/content/components/date-range-picker/presets.tsapps/docs/content/components/time-input/hide-timezone.tsapps/docs/content/components/date-range-picker/granularity.tsapps/docs/content/components/range-calendar/controlled.tsapps/docs/content/components/range-calendar/presets.tsapps/docs/content/components/range-calendar/invalid-date.tsapps/docs/content/components/range-calendar/index.tsapps/docs/content/components/date-range-picker/controlled.tsapps/docs/content/components/date-picker/controlled.tsapps/docs/content/components/date-input/controlled.tsapps/docs/content/components/date-input/disabled.tsapps/docs/content/components/date-input/hide-timezone.tsapps/docs/content/components/date-picker/preset.tsapps/docs/content/components/date-picker/time-zones.tsapps/docs/content/components/date-input/error-message-function.tsapps/docs/content/components/date-input/usage.tsapps/docs/content/components/date-input/hourly-cycle.tsapps/docs/content/components/date-input/time-zones.tsapps/docs/content/components/date-input/international-calendar.tsapps/docs/content/components/date-input/variants.tsapps/docs/content/components/date-input/readonly.tsapps/docs/content/components/date-input/label-placements.tsapps/docs/content/components/date-input/granularity.tsapps/docs/content/components/date-input/error-message.tsapps/docs/content/components/date-picker/granularity.tsapps/docs/content/components/date-input/start-end-content.tsapps/docs/content/components/date-picker/international-calendar.tsapps/docs/content/components/date-input/required.tsapps/docs/content/components/date-input/description.tsapps/docs/content/components/calendar/presets.tsapps/docs/content/components/calendar/invalid-date.tsapps/docs/content/components/calendar/index.tsapps/docs/content/components/calendar/controlled.tsapps/docs/content/components/calendar/controlled-focused-value.tsapps/docs/content/docs/components/time-input.mdxapps/docs/content/docs/components/date-range-picker.mdxapps/docs/content/docs/components/date-picker.mdxapps/docs/content/docs/components/range-calendar.mdxapps/docs/content/docs/components/calendar.mdxapps/docs/content/docs/api-references/nextui-provider.mdxapps/docs/content/blog/v2.3.0.mdxapps/docs/config/search-meta.jsonpackages/components/calendar/src/index.tspackages/components/calendar/stories/calendar.stories.tsxpackages/components/calendar/src/utils.tspackages/components/calendar/src/use-range-calendar.tspackages/components/calendar/stories/range-calendar.stories.tsxpackages/components/calendar/src/use-calendar.tspackages/components/calendar/src/range-calendar.tsxpackages/components/calendar/src/calendar.tsxpackages/components/calendar/src/use-calendar-base.tspackages/components/calendar/src/use-calendar-picker.tspackages/components/calendar/src/calendar-month.tsxpackages/components/calendar/src/calendar-header.tsxpackages/components/calendar/src/calendar-cell.tsxpackages/components/calendar/__tests__/calendar.test.tsxpackages/components/calendar/__tests__/range-calendar.test.tsxpackages/components/date-picker/__tests__/date-picker.test.tsxpackages/components/date-input/src/use-date-input.tspackages/components/date-input/stories/time-input.stories.tsxpackages/components/date-input/src/date-input.tsxpackages/components/date-input/stories/date-input.stories.tsxpackages/components/date-input/src/index.tspackages/components/date-input/__tests__/time-input.test.tsxpackages/components/date-input/__tests__/date-input.test.tsxpackages/components/date-picker/src/use-date-picker-base.tspackages/components/date-picker/stories/date-picker.stories.tsxpackages/components/date-picker/src/date-range-picker.tsxpackages/components/date-picker/src/date-range-picker-field.tsxpackages/components/date-picker/src/date-picker.tsxpackages/components/date-picker/src/use-date-range-picker.tspackages/components/date-picker/src/use-date-picker.tspackages/components/date-picker/stories/date-range-picker.stories.tsxpackages/core/system/src/provider-context.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the documentation and implementation of constructors and methods in `DateValue`, `CalendarDate`, `CalendarDateTime`, and `ZonedDateTime`. # Test: Search for the documentation and implementation of constructors and methods. Expect: Accurate documentation and implementation. rg --type ts --pcre2 "(DateValue|CalendarDate|CalendarDateTime|ZonedDateTime)" apps/docs/content/docs/componentsLength of output: 114
Script:
#!/bin/bash # Description: Verify the documentation and implementation of constructors and methods in `DateValue`, `CalendarDate`, `CalendarDateTime`, and `ZonedDateTime`. # Test: Search for the documentation and implementation of constructors and methods. Expect: Accurate documentation and implementation. rg --pcre2 "(DateValue|CalendarDate|CalendarDateTime|ZonedDateTime)"Length of output: 92664
apps/docs/content/docs/components/calendar.mdx (3)
274-277: IntroduceDateValue,CalendarDate,CalendarDateTime, andZonedDateTimetypes.The types represent different date and time formats correctly.
Ensure that the constructors and methods are accurately documented and implemented.
Also applies to: 284-324, 331-379, 386-440
Verification successful
Introduce
DateValue,CalendarDate,CalendarDateTime, andZonedDateTimetypes.The types represent different date and time formats correctly. The documentation and implementation of their constructors and methods are accurately provided in the codebase.
DateValue,CalendarDate,CalendarDateTime, andZonedDateTimeare well-documented in the.mdxfiles.- The constructors and methods for these types are implemented and documented as expected.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the documentation and implementation of constructors and methods in `DateValue`, `CalendarDate`, `CalendarDateTime`, and `ZonedDateTime`. # Test: Search for the documentation and implementation of constructors and methods. Expect: Accurate documentation and implementation. rg --type ts --pcre2 "(DateValue|CalendarDate|CalendarDateTime|ZonedDateTime)" apps/docs/content/docs/componentsLength of output: 114
Script:
#!/bin/bash # Description: Verify the documentation and implementation of constructors and methods in `DateValue`, `CalendarDate`, `CalendarDateTime`, and `ZonedDateTime`. # Test: Search the entire codebase for the documentation and implementation of constructors and methods. Expect: Accurate documentation and implementation. rg --type-add 'docs:*.{ts,js,mdx}' --type docs --pcre2 "(DateValue|CalendarDate|CalendarDateTime|ZonedDateTime)"Length of output: 69173
Line range hint
244-261:
IntroduceSupportedCalendarstype.The
SupportedCalendarstype lists various calendar systems correctly.Ensure that all listed calendars are supported.
Verification successful
All listed calendar types in
SupportedCalendarsare correctly supported.The search results confirm that each calendar type listed in the
SupportedCalendarstype is referenced and supported across various parts of the codebase, including documentation, utility functions, and test files.
- buddhist: Found in multiple files including
dates.ts,types.ts, and several MDX files.- ethiopic: Found in
dates.ts,types.ts, and several MDX files.- ethioaa: Found in
dates.ts,types.ts, and several MDX files.- coptic: Found in
dates.ts,types.ts, and several MDX files.- hebrew: Found in
dates.ts,types.ts, and several MDX files.- indian: Found in
dates.ts,types.ts, and several MDX files.- islamic-civil: Found in
dates.ts,types.ts, and several MDX files.- islamic-tbla: Found in
dates.ts,types.ts, and several MDX files.- islamic-umalqura: Found in
dates.ts,types.ts, and several MDX files.- japanese: Found in
dates.ts,types.ts, and several MDX files.- persian: Found in
dates.ts,types.ts, and several MDX files.- roc: Found in
dates.ts,types.ts, and several MDX files.- gregory: Found in
dates.ts,types.ts, and several MDX files.All calendar types are adequately supported and referenced in the codebase, confirming the correctness of the
SupportedCalendarstype definition.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the support for all listed calendars in `SupportedCalendars`. # Test: Search for the usage and support for all listed calendars. Expect: Correct support for all listed calendars. rg --type ts --pcre2 "SupportedCalendars" apps/docs/content/docs/componentsLength of output: 75
Script:
#!/bin/bash # Description: Verify the support for each listed calendar in `SupportedCalendars`. # List of calendar types to verify calendars=("buddhist" "ethiopic" "ethioaa" "coptic" "hebrew" "indian" "islamic-civil" "islamic-tbla" "islamic-umalqura" "japanese" "persian" "roc" "gregory") # Search for each calendar type in the codebase for calendar in "${calendars[@]}"; do echo "Searching for support for calendar type: $calendar" rg --type ts --pcre2 "$calendar" apps/docs/content/docs/components doneLength of output: 2911
Script:
#!/bin/bash # Description: Verify the support for each listed calendar in `SupportedCalendars` across the entire repository. # List of calendar types to verify calendars=("buddhist" "ethiopic" "ethioaa" "coptic" "hebrew" "indian" "islamic-civil" "islamic-tbla" "islamic-umalqura" "japanese" "persian" "roc" "gregory") # Search for each calendar type in the entire repository for calendar in "${calendars[@]}"; do echo "Searching for support for calendar type: $calendar" rg --pcre2 "$calendar" doneLength of output: 23453
266-269: IntroduceMappedDateValuetype.The
MappedDateValuetype mapsDateValueto specific date and time types correctly.Ensure that the mapping logic is accurate.
apps/docs/content/docs/components/date-picker.mdx (4)
367-380: Approved: SupportedCalendars type.The
SupportedCalendarstype definition looks correct and comprehensive.
394-396: Approved: DateValue type.The
DateValuetype definition as a union ofCalendarDate,CalendarDateTime, andZonedDateTimelooks correct.
404-443: Approved: CalendarDate, CalendarDateTime, and ZonedDateTime classes.The class definitions for
CalendarDate,CalendarDateTime, andZonedDateTimelook comprehensive and well-documented. Ensure that the classes are correctly used and instantiated in the codebase.Also applies to: 451-498, 506-559
Verification successful
Verified: Usage of CalendarDate, CalendarDateTime, and ZonedDateTime classes.
The classes
CalendarDate,CalendarDateTime, andZonedDateTimeare correctly used and instantiated across various files in the codebase. The search results show proper references and instantiations of these classes.
Files with
CalendarDateusage:
packages/core/system/src/provider-context.tsapps/docs/content/components/date-input/error-message.tsapps/docs/content/components/date-input/error-message-function.tsapps/docs/content/components/date-input/required.tsapps/docs/content/components/date-input/start-end-content.tsapps/docs/content/components/date-input/variants.tsapps/docs/content/components/date-input/usage.tsapps/docs/content/components/date-input/readonly.tsapps/docs/content/components/date-input/label-placements.tsapps/docs/content/components/date-input/disabled.tspackages/components/date-input/stories/date-input.stories.tsxpackages/components/date-picker/__tests__/date-picker.test.tsxpackages/components/date-input/__tests__/date-input.test.tsxpackages/components/calendar/src/calendar-month.tsxpackages/components/calendar/__tests__/calendar.test.tsxpackages/components/calendar/src/use-calendar-picker.tspackages/components/calendar/src/calendar-header.tsxpackages/components/calendar/src/calendar-cell.tsxpackages/components/calendar/src/use-calendar-base.tspackages/components/calendar/__tests__/range-calendar.test.tsxpackages/components/calendar/stories/range-calendar.stories.tsxFiles with
CalendarDateTimeusage:
packages/components/date-picker/__tests__/date-picker.test.tsxpackages/components/date-input/__tests__/date-input.test.tsxFiles with
ZonedDateTimeusage:
apps/docs/content/components/time-input/controlled.tsapps/docs/content/components/time-input/hide-timezone.tspackages/components/date-input/stories/time-input.stories.tsxpackages/components/date-input/__tests__/time-input.test.tsxThe search results confirm that the classes are used appropriately, and there are no apparent issues with their instantiation or usage.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the `CalendarDate`, `CalendarDateTime`, and `ZonedDateTime` classes in the codebase. # Test: Search for the usage of the classes. Expect: Correct usage and instantiation. rg --type ts $'CalendarDate|CalendarDateTime|ZonedDateTime'Length of output: 22860
386-388: LGTM! But verify the usage of theMappedDateValuetype.The
MappedDateValuetype definition looks correct. Ensure that the mapping logic is consistently used throughout the codebase.apps/docs/content/docs/components/date-range-picker.mdx (6)
409-421: LGTM!The
RangeValueinterface is well-defined and documented.
423-429: LGTM!The
MappedDateValuetype definition is correct and aligns with the new type mappings for date values.
431-437: LGTM!The
DateValuetype definition is correct and includes the appropriate date value types.
439-483: LGTM!The
CalendarDateclass is well-defined and documented, providing detailed information about each property and method.
486-537: LGTM!The
CalendarDateTimeclass is well-defined and documented, providing detailed information about each property and method.
541-599: LGTM!The
ZonedDateTimeclass is well-defined and documented, providing detailed information about each property and method.
Closes #
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
New Features
onChangehandlers indate-input,date-picker,DateRangePicker, andRangeCalendarcomponents to useMappedDateValuefor better date handling.SupportedCalendars,MappedDateValue,DateValue,CalendarDate,CalendarDateTime, andZonedDateTime.Refactor
useImagefunction with a more efficientuseMemoimplementation.