feat: add DatePicker component - #25
Open
patrickkuei wants to merge 1 commit into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #13
Summary
DatePickercomponent: a cyberpunk-styled single-date picker for booking forms, filters, and scheduling UI.value/onValueChange(controlled) ordefaultValue(uncontrolled) manage the selectedDate;minDate/maxDatebound selectable days, rendering out-of-range cells dimmed and disabled rather than hiding them. The trigger is a read-only text<input>reusingInput's exactvariant/sizeclass logic (primary/secondary/danger/ghost) so it looks identical to other form inputs. The popover reusesDropdownMenu's click-outside/staged open-close mechanics (same timing, same transition classes) rather than reinventing overlay plumbing, and matchesModal/Select's neon-bordered surface treatment. The calendar grid follows the WAI-ARIA date-picker pattern (role="grid"/"row"/"columnheader"/"gridcell") with a roving-tabindex focused cell — arrow keys move a day/week at a time and can cross month boundaries,Home/Endjump to the edges of the focused week,PageUp/PageDownstep a month, and the view always renders a fixed 6-week grid so row count never jumps between months.Changes
DatePicker(src/components/DatePicker.tsx) —value/defaultValue/onValueChange,minDate/maxDate,label,placeholder,variant, responsivesize,disabled,helperText,error,formatDate,ariaLabel,className,id. No new runtime dependencies — all date math (month/week arithmetic, grid building) is hand-rolled.DatePicker/DatePickerPropsfromsrc/components/index.ts.DatePicker.stories.tsx): Default, Primary/Secondary/Ghost variants, WithBoundedRange (14-day window demo), sizes (Small/Medium/Large), WithError, Disabled, Controlled, and an AllVariants render story (cyberpunk copy throughout, e.g. "Neural Sync Window", "Extraction Window", "Cold Storage Timestamp").DatePicker.test.tsx, 19 cases): renders trigger without crashing,aria-haspopup/aria-expanded/aria-controlswiring, opens on click, formatted value display, day selection (uncontrolled + controlled, without self-managed state),minDate/maxDatedisabling out-of-range days,aria-current="date"on today, ArrowDown opening the calendar, Arrow key grid navigation (day and week steps), PageUp/PageDown month stepping, Enter selection, Escape close + focus return, click-outside close, disabled blocks opening, customformatDate, error state +aria-invalid, responsive size.DatePickerintoscripts/generate-manifest.js(CATEGORY_MAP→ Forms, alongsideSelect/RadioGroup;DOC_SUMMARIES) and regenerated docs vianpm run docs:generate— diff reviewed, onlyDatePicker-related lines changed.[Unreleased].Test plan
Generated by Claude Code