feat: add a2ui DateTimeInput catalog component#2718
Conversation
🦋 Changeset detectedLatest commit: 66d5681 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
📝 WalkthroughWalkthroughAdds a new DateTimeInput catalog component: utilities for parsing/formatting and calendar grid building, a React dialog-based date/time picker component, stylesheet, tests, package/catalog exports, playground registration, server manifest, README updates, instructions, and a changeset. ChangesDateTimeInput Catalog Component
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
MoonfaceX
requested review from
HuJean,
PupilTong,
Sherry-hue,
fzx2666-fz and
gaoachao
as code owners
MoonfaceX
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![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
🧹 Nitpick comments (1)
packages/genui/a2ui/test/dateTimeInput.test.ts (1)
46-50: ⚡ Quick winAdd regression tests for invalid rollover inputs and large negative deltas.
These cases would lock in expected behavior for the parsing and stepping edge cases.
Suggested test additions
test('ignores unsupported values', () => { expect(normalizeDateTimeInputValue(undefined)).toBeNull(); expect(normalizeDateTimeInputValue('bad')).toBeNull(); expect(normalizeDateTimeInputValue({ path: '/date' })).toBeNull(); + expect(normalizeDateTimeInputValue('2026-02-31')).toBeNull(); + expect(normalizeDateTimeInputValue('24:99')).toBeNull(); }); @@ test('compares date-time parts and wraps time stepping', () => { @@ expect( incrementDateTimePart( { year: 2026, month: 5, day: 26, hour: 23, minute: 59 }, 'minute', 1, ).minute, ).toBe(0); + expect( + incrementDateTimePart( + { year: 2026, month: 5, day: 26, hour: 23, minute: 59 }, + 'minute', + -121, + ).minute, + ).toBe(58); });Also applies to: 131-152
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui/test/dateTimeInput.test.ts` around lines 46 - 50, Add regression tests to dateTimeInput.test.ts covering invalid rollover inputs and very large negative deltas to lock in parsing/stepping behavior: extend the existing test block that calls normalizeDateTimeInputValue (and the related step/rollover helpers used in the later tests around lines 131-152) with cases that pass invalid rollover strings (e.g., malformed unit/format) and extremely negative numeric deltas to assert they return null or the expected clamped value; reference normalizeDateTimeInputValue and the step/rollover functions used in those later tests so the new assertions mirror the existing expectations for unsupported values and edge-case deltas.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/genui/a2ui/src/catalog/DateTimeInput/utils.ts`:
- Around line 86-97: The input parsing currently allows impossible calendar/time
parts because createLocalDate is allowed to auto-normalize invalid values;
before constructing the Date in the dateTimeMatch handling (and the similar
block at 100-111), validate the numeric components themselves: ensure month ∈
[1,12], day ∈ [1, daysInMonth(year, month)], hour ∈ [0,23], minute ∈ [0,59]; if
any component is out of range return null immediately instead of calling
createLocalDate/isValidDate/partsFromDate. Use the same validation logic for the
other similar parsing branch to reject impossible inputs before Date
normalization.
- Around line 362-365: The wrap-around calculation for next using (current +
delta + limit) % limit can still yield negative values for large negative delta;
update the computation in utils.ts (where limit, current, next, parts, part,
delta are used) to normalize with a double-mod pattern so next is always in [0,
limit): replace the existing modulus expression with a robust form that first
applies modulus then adds limit and mods again (i.e., ((current + delta) % limit
+ limit) % limit) to ensure correct wrapping for any delta magnitude.
---
Nitpick comments:
In `@packages/genui/a2ui/test/dateTimeInput.test.ts`:
- Around line 46-50: Add regression tests to dateTimeInput.test.ts covering
invalid rollover inputs and very large negative deltas to lock in
parsing/stepping behavior: extend the existing test block that calls
normalizeDateTimeInputValue (and the related step/rollover helpers used in the
later tests around lines 131-152) with cases that pass invalid rollover strings
(e.g., malformed unit/format) and extremely negative numeric deltas to assert
they return null or the expected clamped value; reference
normalizeDateTimeInputValue and the step/rollover functions used in those later
tests so the new assertions mirror the existing expectations for unsupported
values and edge-case deltas.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1909ae89-8a5e-4df6-af1d-82cfc4997876
📒 Files selected for processing (14)
.changeset/flat-moons-kneel.md.github/a2ui-catalog.instructions.mdpackages/genui/a2ui-playground/lynx-src/a2ui/App.tsxpackages/genui/a2ui-playground/src/catalog/a2ui.tspackages/genui/a2ui/package.jsonpackages/genui/a2ui/src/catalog/DateTimeInput/index.tsxpackages/genui/a2ui/src/catalog/DateTimeInput/utils.tspackages/genui/a2ui/src/catalog/README.mdpackages/genui/a2ui/src/catalog/index.tspackages/genui/a2ui/src/index.tspackages/genui/a2ui/styles/catalog/DateTimeInput.csspackages/genui/a2ui/test/dateTimeInput.test.tspackages/genui/server/agent/a2ui-catalog.tspackages/genui/server/agent/catalog/DateTimeInput/catalog.json
Merging this PR will improve performance by 16.95%
|
| Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|
| ⚡ | transform 1000 view elements |
47.1 ms | 40.2 ms | +16.95% |
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing MoonfaceX:codex/add-a2ui-datetimeinput (66d5681) with main (735f695)
Footnotes
-
26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩
React External#1813 Bundle Size — 699.5KiB (0%).66d5681(current) vs 735f695 main#1803(baseline) Bundle metrics
|
| Current #1813 |
Baseline #1803 |
|
|---|---|---|
 Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
17 |
17 |
| Duplicate Modules |
5 |
5 |
| Duplicate Code |
7.13% |
7.13% |
| Packages |
0 |
0 |
| Duplicate Packages |
0 |
0 |
Bundle analysis report Branch MoonfaceX:codex/add-a2ui-datetim... Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#8698 Bundle Size — 238KiB (0%).66d5681(current) vs 735f695 main#8687(baseline) Bundle metrics
|
| Current #8698 |
Baseline #8687 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
204 |
204 |
| Duplicate Modules |
81 |
81 |
| Duplicate Code |
44.59% |
44.59% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #8698 |
Baseline #8687 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
92.24KiB |
92.24KiB |
Bundle analysis report Branch MoonfaceX:codex/add-a2ui-datetim... Project dashboard
Generated by RelativeCI Documentation Report issue
React MTF Example#1832 Bundle Size — 208.94KiB (0%).66d5681(current) vs 735f695 main#1821(baseline) Bundle metrics
|
| Current #1832 |
Baseline #1821 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
199 |
199 |
| Duplicate Modules |
78 |
78 |
| Duplicate Code |
44.08% |
44.08% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #1832 |
Baseline #1821 |
|
|---|---|---|
| IMG |
111.23KiB |
111.23KiB |
| Other |
97.71KiB |
97.71KiB |
Bundle analysis report Branch MoonfaceX:codex/add-a2ui-datetim... Project dashboard
Generated by RelativeCI Documentation Report issue
React Example with Element Template#966 Bundle Size — 204.36KiB (0%).66d5681(current) vs 735f695 main#956(baseline) Bundle metrics
|
| Current #966 |
Baseline #956 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
124 |
124 |
| Duplicate Modules |
50 |
50 |
| Duplicate Code |
45.19% |
45.19% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #966 |
Baseline #956 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
58.61KiB |
58.61KiB |
Bundle analysis report Branch MoonfaceX:codex/add-a2ui-datetim... Project dashboard
Generated by RelativeCI Documentation Report issue
Web Explorer#10274 Bundle Size — 903.53KiB (0%).66d5681(current) vs 735f695 main#10264(baseline) Bundle metrics
|
| Current #10274 |
Baseline #10264 |
|
|---|---|---|
| Initial JS |
45.06KiB |
45.06KiB |
| Initial CSS |
2.22KiB |
2.22KiB |
| Cache Invalidation |
0% |
0% |
| Chunks |
9 |
9 |
| Assets |
11 |
11 |
 Modules |
232(+0.43%) |
231 |
| Duplicate Modules |
11 |
11 |
| Duplicate Code |
27.12% |
27.12% |
| Packages |
10 |
10 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #10274 |
Baseline #10264 |
|
|---|---|---|
| JS |
499.15KiB |
499.15KiB |
| Other |
402.16KiB |
402.16KiB |
| CSS |
2.22KiB |
2.22KiB |
Bundle analysis report Branch MoonfaceX:codex/add-a2ui-datetim... Project dashboard
Generated by RelativeCI Documentation Report issue
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/genui/a2ui/src/catalog/DateTimeInput/utils.ts`:
- Around line 72-81: The code incorrectly relies on new Date(year, ...)
semantics where years 0–99 are mapped to 1900–1999; update validation to guard
against years 0..99 before any Date construction: in isValidDatePart (and thus
parseDateTimeString path) add an explicit check that rejects years in the range
0 through 99 (or otherwise handle them by constructing the Date without the
legacy mapping), and ensure daysInMonth either isn’t called with a 0..99 year or
is updated to construct dates using a method that preserves the literal year
(e.g., create the Date then call setFullYear(year) or validate year first).
Target the functions named isValidDatePart and daysInMonth when making this
change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 31cdb3c0-4013-49b6-84cc-285b011a9bee
📒 Files selected for processing (3)
packages/genui/a2ui/src/catalog/DateTimeInput/index.tsxpackages/genui/a2ui/src/catalog/DateTimeInput/utils.tspackages/genui/a2ui/test/dateTimeInput.test.ts
Huxpro
left a comment
Huxpro
left a comment
There was a problem hiding this comment.
Looks good after fixing the DateTimeInput validation and time-only dialog title edge cases.
3 participants
Summary
DateTimeInputcatalog component for ReactLynxValidation
pnpm turbo build --filter @lynx-js/a2ui-reactlynxpnpm -F @lynx-js/a2ui-reactlynx test -- --runInBandpnpm devinpackages/genui/a2ui-playground, verified/,/render, and/__rspeedy_urlon port 3001Summary by CodeRabbit
New Features
Styles
Documentation
Tests