79 lines
3.2 KiB
JSON
79 lines
3.2 KiB
JSON
{
|
|
"id": "calendar-popover",
|
|
"name": "CalendarPopover",
|
|
"kind": "component",
|
|
"status": "stable-reference",
|
|
"summary": "Date picker popover based on Task Manager DateDropdown and nodedc-calendar-shell styling.",
|
|
"implementation": {
|
|
"baseLibrary": "react-day-picker@9.5.0",
|
|
"localePackage": "date-fns@4.1.0",
|
|
"launcherComponent": "NodeDcDateField renders NodeDcDropdown + NodeDcCalendar; NodeDcCalendar delegates the month grid/range math to DayPicker instead of a hand-written grid.",
|
|
"isolation": "Calendar logic and styling live in src/shared/nodedc-ui/Calendar.tsx and src/shared/nodedc-ui/calendar.css. Feature screens must consume NodeDcDateField or NodeDcCalendar directly instead of creating local date wrappers."
|
|
},
|
|
"sourceRefs": [
|
|
{
|
|
"project": "nodedc_taskmanager",
|
|
"file": "plane-src/apps/web/core/components/dropdowns/date.tsx",
|
|
"exports": ["DateDropdown"]
|
|
},
|
|
{
|
|
"project": "nodedc_taskmanager",
|
|
"file": "plane-src/apps/web/styles/globals.css",
|
|
"classes": ["nodedc-calendar-shell"]
|
|
},
|
|
{
|
|
"project": "nodedc_launcher",
|
|
"file": "src/shared/nodedc-ui/Calendar.tsx",
|
|
"exports": [
|
|
"NodeDcDateField",
|
|
"NodeDcCalendar",
|
|
"NodeDcDateFieldProps",
|
|
"NodeDcCalendarProps",
|
|
"NodeDcCalendarRangePreview",
|
|
"NodeDcDateInput",
|
|
"NodeDcWeekStartsOn"
|
|
]
|
|
},
|
|
{
|
|
"project": "nodedc_launcher",
|
|
"file": "src/shared/nodedc-ui/calendar.css",
|
|
"classes": ["nodedc-ui-calendar", "nodedc-ui-calendar-frame", "nodedc-ui-date-trigger"]
|
|
},
|
|
{
|
|
"project": "nodedc_launcher",
|
|
"file": "src/widgets/admin-overlay/AdminOverlay.tsx",
|
|
"consumers": ["ClientsSection", "ClientEditorModal", "InvitesSection"]
|
|
}
|
|
],
|
|
"anatomy": [
|
|
"date trigger button",
|
|
"portal dropdown surface",
|
|
"calendar shell",
|
|
"month/year controls",
|
|
"day buttons",
|
|
"single or range mode"
|
|
],
|
|
"visualContract": {
|
|
"surface": "DropdownSurface",
|
|
"calendarRadius": "1.1rem",
|
|
"dayButtonRadius": "999px",
|
|
"selectedRangeFill": "continuous accent row fill under the day numbers; row breaks create rounded start/end caps",
|
|
"todayMarker": "today is always a circular ring marker; inside an accent range the ring uses the dark on-accent color and the day cell remains range-filled, not solid-filled",
|
|
"outsideDays": "muted"
|
|
},
|
|
"behaviorContract": [
|
|
"Default placement bottom-start.",
|
|
"Render through portal.",
|
|
"Support minDate, maxDate, clearable value, closeOnSelect, empty labels, popover width, and start-of-week preference.",
|
|
"Close on select when closeOnSelect is true.",
|
|
"When rangePreview or rangeStart/rangeEnd are present, render a continuous accent range preview while still selecting one field value.",
|
|
"When only one date is present, render a single circular selected date.",
|
|
"Today must not be solid-filled. It uses an inset circular ring both outside and inside a range; inside a range the row fill remains visible behind the ring."
|
|
],
|
|
"currentConsumers": [
|
|
"Client demo/contract/paid dates",
|
|
"Invite expiration dates",
|
|
"Any future date field in admin modals and tables"
|
|
]
|
|
}
|