feat(DatePicker): DatePicker implementation (#674)

* feat(calendar): implemented DateField,Calendar and DatePicker components

* feat(range-calendar): implemented range calendar

* fix(range-calendar): remove console.log

* feat(DateRangeField): implemented DateRangeField

* fix(DateField): shallow copy initialSegments to keep them unchanged

* chore(DateRangeField): remove unused functions from test file

* fix(DateRangeField): fix issue where date was not updating from input

* fix(DateField): adjust checks between dates for updating placeholder

* feat(DateRangePicker): implement DateRangePicker

* refactor(DateRangeField/DateField): remove duplicate functions

* feat(DateField): separate DateField concerns into different files

* refactor(DateField): refactor ARROW_UP & ARROW_DOWN incrementing and decrementing

* fix(DateField): fix inconsistencies with previous value and edge case for filling in the day

* chore(DatePicker/DateRangeField): rename variables

* refactor(useDateFormatter): convert formatter to ref

* refactor(Calendar): extract common functions for Calendar and RangeCalendar

* refactor(RangeCalendar): use common functions in RangeCalendar

* chore(DateField): minor code lint

* refactor(DateField): move common functions into useDateField

* refactor(DateRangeField): reuse common functions from useDateField

* refactor(useDateFormatter): move utility to root

* fix(RangeCalendarCell): add proper aria labels and conditions

* refactor(Calendar/RangeCalendar): rename calendar day to cell trigger

* feat(calendar): implement functions and utilities for generating year and decade

* feat(Calendar): implement logic for different calendar views(month, year, decade)

* chore(DateField): add TODO and make props in test optional

* fix(constant): fix export for test

* feat(RangeCalendar): adjust RangeCalendar for new calendar views

* feat(Calendar): add year and month selection

* chore: add .volar for neovim to load LSP

* feat(RangeCalendar): add month and year view to RangeCalendar

* fix(Calendar): adjust Calendar stories styling

* fix(Calendar): add heading segment to exports

* refactor(DatePicker/DateRangePicker): refactor pickers with calendar views

* chore: add file for neoconf and neovim volar lsp

* chore: update @internationalized/date lib

* fix(DateField): set TZ to utility function

* chore(Calendar): fix Calendar stories

* chore(DateField): add story styling

* chore(DatePicker): add story styling

* fix(DatePicker): provide heading value from Calendar

* fix(DateRangeField): add watchers for startValue and endValue

* chore(DateRangePicker): add story styling

* fix(DateRangePicker): pass heading value from RangeCalendar

* chore(useDateFormatter): export explicit Formatter type

* fix(jsdoc): return type in doc for custom types/interfaces

* chore: generate jsdoc

* chore: update jsdoc meta

* chore: add documentation for props, events and slots

* chore: update lockfile

* chore(Calendar): add calendar doc scaffold

* fix(histoire): update histoire vue plugin package version to match main

* docs(Calendar/RangeCalendar): add documentation

* chore: update lockfile

* fix(RangeCalendar): fix heading value displaying [object Object]

* chore: consistent styling across all calendar related stories

* docs(DateField/DateRangeField): add docs

* chore: add stylings for date fields

* fix(DateRangeField): add class to label in story

* docs(DatePicker/DateRangePicker): add docs

* fix: minor tailwind focus style adjustments

* fix: fix typing errors

* fix(CalendarCellTrigger/RangeCalendarCellTrigger): remove is selected and add formatting for months

* docs: add docs for useDateFormatter

* docs: add credits

* chore: add datepicker modules to namespaced

* docs: add docs for date picker Close

* fix(Popover): export Arrow props

* fix(DatePicker/DateRangePicker): use arrow and close props from popover

* docs: fix docs for date picker arrow and close

* chore: exclude '@internationalized/date' in bundle as it would be an external deps

* chore: tidy up export

* chore: cleanup shared

* chore: fix chunk function was replaced

* fix: test

* chore: merge with upstream

* fix: remove pointer events none from stories

* feat(Calendar): enable selection of dates outside the month

* fix(useCalendar): prevent focus loss on select

* fix(useCalendar): fix next page/prev page

* refactor: remove all references to calendarView and HeadingSegment

* fix: story styling for range calendar and picker

* fix: styling on range calendar to match adobe spectrum

* fix(Calendar): return new DateValue for placeholder

* fix(DateField): return new DateValue for placeholder

* chore: merge changes

* fix: v-model value for DateField/Calendar

* fix(useDateField): update hour on dayPeriod change

* chore: add more stories

* chore: add stories for custom popover month and year select

* fix: placeholder values losing proxy

* chore: add calendar stories

* fix(Calendar): fix deselect error

* fix(useCalendar): fix placeholder v-model ref error

* fix: remove console.log

* fix(RangeCalendar): fix placeholder v-model

* fix(DateField): fix placeholder v-model

* fix: remove second from hour granularity

* fix(DateRangeField): fix placeholder v-model

* fix(DateRangePicker): fix calendar story styling

* fix: add back passive to placeholder

* fix(Calendar): add SupportedLocale import

* chore: remove log value

* fix(Calendar/RangeCalendar): fix v-model losing date proxy

* fix: set default props

* docs: update docs

* refactor: add back defaultValue

* docs: update docs

* chore: add stories

* docs: run codegen

* chore: add more stories

* chore: rerun pnpm

* fix: local pipeline caused by different timezone

* fix: exclude story from bundling

* docs: update example

* chore: fix missing slotprops, default start not changing

* fix: timezone not showing

* docs: add demos

---------

Co-authored-by: zernonia <zernonia@gmail.com>

.gitignore

@@ -29,8 +29,9 @@ coverage
 *.sln
 *.sw?
 ./.nuxt
+.neoconf.json
 
 test-results/
 playwright-report/
 vite.config.ts.timestamp*
-*/.vitepress/cache
+*/.vitepress/cache

.histoire/package.json

@@ -9,7 +9,10 @@
     "story:preview": "histoire preview"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.17.7",
+    "@antfu/eslint-config": "^0.39.7",
+    "@floating-ui/dom": "^1.4.2",
+    "@floating-ui/vue": "^1.0.2",
+    "@histoire/plugin-vue": "^0.17.9",
     "@iconify/vue": "^4.1.1",
     "@radix-ui/colors": "^1.0.1",
     "@rollup/plugin-alias": "^5.1.0",
@@ -20,13 +23,11 @@
     "tailwindcss": "^3.4.1"
   },
   "peerDependencies": {
-    "vue": "*",
-    "vite": "*", 
-    "@floating-ui/dom": "*",
-    "@floating-ui/vue": "*",
     "@vitejs/plugin-vue": "*",
     "@vueuse/components": "*",
     "@vueuse/core": "*",
-    "@vueuse/shared": "*"
+    "@vueuse/shared": "*",
+    "vite": "*",
+    "vue": "*"
   }
 }

docs/.vitepress/config.ts

@@ -111,10 +111,15 @@ export default defineConfig({
           { text: 'Alert Dialog', link: '/components/alert-dialog' },
           { text: 'Aspect Ratio', link: '/components/aspect-ratio' },
           { text: 'Avatar', link: '/components/avatar' },
+          { text: `Calendar ${BadgeHTML('Alpha')}`, link: '/components/calendar' },
           { text: 'Checkbox', link: '/components/checkbox' },
           { text: 'Collapsible', link: '/components/collapsible' },
           { text: 'Combobox', link: '/components/combobox' },
           { text: 'Context Menu', link: '/components/context-menu' },
+          { text: `Date Field ${BadgeHTML('Alpha')}`, link: '/components/date-field' },
+          { text: `Date Picker ${BadgeHTML('Alpha')}`, link: '/components/date-picker' },
+          { text: `Date Range Field ${BadgeHTML('Alpha')}`, link: '/components/date-range-field' },
+          { text: `Date Range Picker ${BadgeHTML('Alpha')}`, link: '/components/date-range-picker' },
           { text: 'Dialog', link: '/components/dialog' },
           { text: 'Dropdown Menu', link: '/components/dropdown-menu' },
           { text: 'Hover Card', link: '/components/hover-card' },
@@ -126,6 +131,7 @@ export default defineConfig({
           { text: 'Popover', link: '/components/popover' },
           { text: 'Progress', link: '/components/progress' },
           { text: 'Radio Group', link: '/components/radio-group' },
+          { text: `Range Calendar ${BadgeHTML('Alpha')}`, link: '/components/range-calendar' },
           { text: 'Scroll Area', link: '/components/scroll-area' },
           { text: 'Select', link: '/components/select' },
           { text: 'Separator', link: '/components/separator' },
@@ -150,6 +156,7 @@ export default defineConfig({
           { text: 'Primitive', link: '/utilities/primitive' },
           { text: 'Slot', link: '/utilities/slot' },
           { text: 'useId', link: '/utilities/use-id' },
+          { text: 'useDateFormatter', link: '/utilities/use-date-formatter' },
           { text: 'useEmitAsProps', link: '/utilities/use-emit-as-props' },
           { text: 'useForwardExpose', link: '/utilities/use-forward-expose' },
           { text: 'useForwardProps', link: '/utilities/use-forward-props' },

docs/.vitepress/theme/style.css

@@ -2,7 +2,7 @@
  * Customize default theme styling by overriding CSS variables:
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
- 
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */
@@ -15,7 +15,7 @@
   --vp-c-brand-2: #059669;
   --vp-c-brand-darker: #047857;
   --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
-  --vp-code-color: rgba(60, 60, 67);  
+  --vp-code-color: rgba(60, 60, 67);
   --vp-code-block-bg: #292b30;
   --vp-code-block-bg-light: #1e1e20;
   --vp-code-block-divider-color: #000000;
@@ -24,7 +24,7 @@
 
 .dark {
   --vp-c-bg: #1e1e20;
-  --vp-c-bg-alt: #161618; 
+  --vp-c-bg-alt: #161618;
   --vp-c-bg-soft: #252529;
   --vp-code-block-bg: #161618;
 }

docs/components/Demos.vue

@@ -3,10 +3,15 @@ import AccordionDemo from './demo/Accordion/tailwind/index.vue'
 import AlertDialogDemo from './demo/AlertDialog/tailwind/index.vue'
 import AspectRatioDemo from './demo/AspectRatio/tailwind/index.vue'
 import AvatarDemo from './demo/Avatar/tailwind/index.vue'
+import CalendarDemo from './demo/Calendar/tailwind/index.vue'
 import CheckboxDemo from './demo/Checkbox/tailwind/index.vue'
 import CollapsibleDemo from './demo/Collapsible/tailwind/index.vue'
 import ComboboxDemo from './demo/Combobox/tailwind/index.vue'
 import ContextMenuDemo from './demo/ContextMenu/tailwind/index.vue'
+import DateFieldDemo from './demo/DateField/tailwind/index.vue'
+import DatePickerDemo from './demo/DatePicker/tailwind/index.vue'
+import DateRangeFieldDemo from './demo/DateRangeField/tailwind/index.vue'
+import DateRangePickerDemo from './demo/DateRangePicker/tailwind/index.vue'
 import DialogDemo from './demo/Dialog/tailwind/index.vue'
 import DropdownMenuDemo from './demo/DropdownMenu/tailwind/index.vue'
 import HoverCardDemo from './demo/HoverCard/tailwind/index.vue'
@@ -18,10 +23,12 @@ import PinInputDemo from './demo/PinInput/tailwind/index.vue'
 import PopoverDemo from './demo/Popover/tailwind/index.vue'
 import ProgressDemo from './demo/Progress/tailwind/index.vue'
 import RadioGroupDemo from './demo/RadioGroup/tailwind/index.vue'
+import RangeCalendarDemo from './demo/RangeCalendar/tailwind/index.vue'
 import ScrollAreaDemo from './demo/ScrollArea/tailwind/index.vue'
 import SelectDemo from './demo/Select/tailwind/index.vue'
 import SeparatorDemo from './demo/Separator/tailwind/index.vue'
 import SliderDemo from './demo/Slider/tailwind/index.vue'
+import SplitterDemo from './demo/Splitter/tailwind/index.vue'
 import SwitchDemo from './demo/Switch/tailwind/index.vue'
 import TabsDemo from './demo/Tabs/tailwind/index.vue'
 import TagsInputDemo from './demo/TagsInput/tailwind/index.vue'
@@ -48,6 +55,9 @@ import DemoContainer from './DemoContainer.vue'
     <DemoContainer title="avatar">
       <AvatarDemo />
     </DemoContainer>
+    <DemoContainer title="calendar">
+      <CalendarDemo />
+    </DemoContainer>
     <DemoContainer title="checkbox">
       <CheckboxDemo />
     </DemoContainer>
@@ -60,6 +70,18 @@ import DemoContainer from './DemoContainer.vue'
     <DemoContainer title="context menu">
       <ContextMenuDemo />
     </DemoContainer>
+    <DemoContainer title="date field">
+      <DateFieldDemo />
+    </DemoContainer>
+    <DemoContainer title="date picker">
+      <DatePickerDemo />
+    </DemoContainer>
+    <DemoContainer title="date range field">
+      <DateRangeFieldDemo />
+    </DemoContainer>
+    <DemoContainer title="date range picker">
+      <DateRangePickerDemo />
+    </DemoContainer>
     <DemoContainer title="dialog">
       <DialogDemo />
     </DemoContainer>
@@ -93,6 +115,9 @@ import DemoContainer from './DemoContainer.vue'
     <DemoContainer title="radio group">
       <RadioGroupDemo />
     </DemoContainer>
+    <DemoContainer title="range calendar">
+      <RangeCalendarDemo />
+    </DemoContainer>
     <DemoContainer title="scroll area">
       <ScrollAreaDemo />
     </DemoContainer>
@@ -105,6 +130,9 @@ import DemoContainer from './DemoContainer.vue'
     <DemoContainer title="slider">
       <SliderDemo />
     </DemoContainer>
+    <DemoContainer title="splitter">
+      <SplitterDemo />
+    </DemoContainer>
     <DemoContainer title="switch">
       <SwitchDemo />
     </DemoContainer>

docs/components/demo/Calendar/css/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, type CalendarRootProps } from 'radix-vue'
+import './styles.css'
+
+const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
+  return date.day === 17 || date.day === 18
+}
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ weekDays, grid }"
+    :is-date-unavailable="isDateUnavailable"
+    class="Calendar"
+    fixed-weeks
+  >
+    <CalendarHeader class="CalendarHeader">
+      <CalendarPrev
+        class="CalendarNavButton"
+      >
+        <Icon icon="radix-icons:chevron-left" class="Icon" />
+      </CalendarPrev>
+      <CalendarHeading class="CalendarHeading" />
+      <CalendarNext
+        class="CalendarNavButton"
+      >
+        <Icon icon="radix-icons:chevron-right" class="Icon" />
+      </CalendarNext>
+    </CalendarHeader>
+    <div
+      class="CalendarWrapper"
+    >
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()" class="CalendarGrid">
+        <CalendarGridHead>
+          <CalendarGridRow class="CalendarGridRow">
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+              class="CalendarHeadCell"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody class="CalendarGridWrapper">
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="CalendarGridRow">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              class="CalendarCell"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+                class="CalendarCellTrigger"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

docs/components/demo/Calendar/css/styles.css

@@ -0,0 +1,153 @@
+@import '@radix-ui/colors/black-alpha.css';
+@import '@radix-ui/colors/grass.css';
+
+.Icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.Calendar {
+  margin-top: 1.5rem;
+  border-width: 1px;
+  border-color: #000000;
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  padding: 22px;
+}
+
+.CalendarHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.CalendarNavButton {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  color: #000000;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.CalendarNavButton:hover {
+  color: #ffffff;
+  background-color: #000000;
+}
+
+.CalendarHeading {
+  font-weight: 500;
+  color: #000000;
+  color: 15px;
+}
+
+.CalendarWrapper {
+  display: flex;
+  padding-top: 1rem;
+  margin-top: 1rem;
+  flex-direction: column;
+}
+
+@media (min-width: 640px) {
+  .CalendarWrapper {
+    margin-left: 1rem;
+    margin-top: 0;
+    flex-direction: row;
+  }
+}
+
+.CalendarGrid {
+  margin-top: 0.25rem;
+  width: 100%;
+  user-select: none;
+  border-collapse: collapse;
+}
+
+.CalendarGridRow {
+  display: grid
+  margin-bottom: 0.25rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  width: 100%;
+}
+
+.CalendarGridRow[data-radix-vue-calendar-month-view] {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.CalendarHeadCell {
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #000000;
+  font-weight: 400;
+}
+
+.CalendarCell {
+  position: relative;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: center;
+}
+
+.CalendarCellTrigger {
+  display: flex;
+  position: relative;
+  padding: 0.5rem;
+  justify-content: center;
+  align-items: center;
+  border-width: 1px;
+  border-color: transparent;
+  outline-style: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: #000000;
+  white-space: nowrap;
+  background-color: transparent;
+}
+
+.CalendarCellTrigger:hover {
+  border-color: #000000;
+}
+
+.CalendarCellTrigger:focus {
+  box-shadow: 0 0 0 2px #000000;
+}
+
+.CalendarCellTrigger[data-disabled] {
+  cursor: none;
+  color: rgba(0,0,0,0.3);
+}
+
+.CalendarCellTrigger[data-selected] {
+  background-color: #000000;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+.CalendarCellTrigger[data-selected]::before {
+  background-color: #FFFFFF;
+}
+
+.CalendarCellTrigger[data-unavailable] {
+  color: rgba(0,0,0,0.3);
+  text-decoration: line-through;
+}
+
+.CalendarCellTrigger::before {
+  content: '';
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 9999px;
+  background-color: #FFFFFF;
+}
+
+.CalendarCellTrigger[data-today]::before {
+  display: block;
+  background-color: var(--grass-9);
+}