From e359e1683f73ad0be232878340e51affe24c533c Mon Sep 17 00:00:00 2001
From: PabloLec <pablo.lecolinet@gmail.com>
Date: Thu, 9 May 2024 17:51:52 +0200
Subject: [PATCH] Add Calendar for date fields

---
 test-frontend/package.json                    |  1 +
 test-frontend/pnpm-lock.yaml                  |  3 +
 .../src/components/ui/button/Button.vue       | 26 ++++++++
 .../src/components/ui/button/index.ts         | 35 +++++++++++
 .../ui/search/form/FieldSelector.vue          |  1 -
 .../components/ui/search/form/ValueInput.vue  | 55 ++++++++++++++++-
 .../ui/shadcn/calendar/Calendar.vue           | 60 +++++++++++++++++++
 .../ui/shadcn/calendar/CalendarCell.vue       | 24 ++++++++
 .../shadcn/calendar/CalendarCellTrigger.vue   | 38 ++++++++++++
 .../ui/shadcn/calendar/CalendarGrid.vue       | 24 ++++++++
 .../ui/shadcn/calendar/CalendarGridBody.vue   | 11 ++++
 .../ui/shadcn/calendar/CalendarGridHead.vue   | 11 ++++
 .../ui/shadcn/calendar/CalendarGridRow.vue    | 21 +++++++
 .../ui/shadcn/calendar/CalendarHeadCell.vue   | 21 +++++++
 .../ui/shadcn/calendar/CalendarHeader.vue     | 21 +++++++
 .../ui/shadcn/calendar/CalendarHeading.vue    | 27 +++++++++
 .../ui/shadcn/calendar/CalendarNextButton.vue | 32 ++++++++++
 .../ui/shadcn/calendar/CalendarPrevButton.vue | 32 ++++++++++
 .../components/ui/shadcn/calendar/index.ts    | 12 ++++
 .../components/ui/shadcn/popover/Popover.vue  | 15 +++++
 .../ui/shadcn/popover/PopoverContent.vue      | 48 +++++++++++++++
 .../ui/shadcn/popover/PopoverTrigger.vue      | 11 ++++
 .../src/components/ui/shadcn/popover/index.ts |  3 +
 .../src/lib/search/fieldsConfiguration.ts     |  2 +-
 24 files changed, 531 insertions(+), 3 deletions(-)
 create mode 100644 test-frontend/src/components/ui/button/Button.vue
 create mode 100644 test-frontend/src/components/ui/button/index.ts
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/Calendar.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarCell.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarCellTrigger.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarGrid.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarGridBody.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarGridHead.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarGridRow.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarHeadCell.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarHeader.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarHeading.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarNextButton.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/CalendarPrevButton.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/calendar/index.ts
 create mode 100644 test-frontend/src/components/ui/shadcn/popover/Popover.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/popover/PopoverContent.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/popover/PopoverTrigger.vue
 create mode 100644 test-frontend/src/components/ui/shadcn/popover/index.ts

diff --git a/test-frontend/package.json b/test-frontend/package.json
index 3df5609..2f1a233 100644
--- a/test-frontend/package.json
+++ b/test-frontend/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@internationalized/date": "^3.5.3",
     "@tanstack/vue-table": "^8.16.0",
     "@vee-validate/zod": "^4.12.7",
     "@vueuse/core": "^10.9.0",
diff --git a/test-frontend/pnpm-lock.yaml b/test-frontend/pnpm-lock.yaml
index 090a829..2f5dac9 100644
--- a/test-frontend/pnpm-lock.yaml
+++ b/test-frontend/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@internationalized/date':
+        specifier: ^3.5.3
+        version: 3.5.3
       '@tanstack/vue-table':
         specifier: ^8.16.0
         version: 8.16.0(vue@3.4.27(typescript@5.4.5))
diff --git a/test-frontend/src/components/ui/button/Button.vue b/test-frontend/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..5cfd668
--- /dev/null
+++ b/test-frontend/src/components/ui/button/Button.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/test-frontend/src/components/ui/button/index.ts b/test-frontend/src/components/ui/button/index.ts
new file mode 100644
index 0000000..1b00c32
--- /dev/null
+++ b/test-frontend/src/components/ui/button/index.ts
@@ -0,0 +1,35 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/test-frontend/src/components/ui/search/form/FieldSelector.vue b/test-frontend/src/components/ui/search/form/FieldSelector.vue
index 4d16367..adffe76 100644
--- a/test-frontend/src/components/ui/search/form/FieldSelector.vue
+++ b/test-frontend/src/components/ui/search/form/FieldSelector.vue
@@ -31,7 +31,6 @@ const emit = defineEmits(['update:modelValue', 'change']);
 const currentFieldsConfig = computed(() => fieldsConfiguration[props.parentField]);
 
 const handleChange = (value: string | number) => {
-  console.log("Value changed to:", value);
   emit('update:modelValue', value);
 };
 
diff --git a/test-frontend/src/components/ui/search/form/ValueInput.vue b/test-frontend/src/components/ui/search/form/ValueInput.vue
index 8d732be..f3529eb 100644
--- a/test-frontend/src/components/ui/search/form/ValueInput.vue
+++ b/test-frontend/src/components/ui/search/form/ValueInput.vue
@@ -1,5 +1,6 @@
 <template>
   <Input v-if="isInput" :modelValue="modelValue" type="text" placeholder="Value" @update:modelValue="handleChange" class="w-full"/>
+
   <Select v-if="isSelect" :modelValue="modelValue" @update:modelValue="handleChange">
     <SelectTrigger class="w-[180px]">
       <SelectValue placeholder="Value" />
@@ -10,6 +11,24 @@
       </SelectItem>
     </SelectContent>
   </Select>
+
+  <Popover v-if="isDate">
+    <PopoverTrigger as-child>
+      <Button
+          variant="outline"
+          :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !dateValue && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        {{ dateValue ? df.format(dateValue.toDate(getLocalTimeZone())) : "Pick a date" }}
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="dateValue" initial-focus />
+    </PopoverContent>
+  </Popover>
 </template>
 
 <script lang="ts" setup>
@@ -20,8 +39,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/shadcn/select'
+import {
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone,
+  CalendarDate
+} from '@internationalized/date'
+
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { Calendar } from '@/components/ui/shadcn/calendar'
+import { Button } from '@/components/ui/shadcn/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/shadcn/popover'
+import { cn } from '@/lib/utils'
 import { Input } from '@/components/ui/shadcn/input'
-import {computed} from 'vue';
+import {computed, ref, watch, watchEffect} from 'vue';
 import {fieldsConfiguration} from '@/lib/search/fieldsConfiguration.ts';
 
 const props = defineProps({
@@ -30,14 +61,36 @@ const props = defineProps({
   parentField: String
 });
 
+
+const df = new DateFormatter('fr-FR', {
+  dateStyle: 'short',
+})
+
+const dateValue = ref<DateValue>()
+
 const emit = defineEmits(['update:modelValue']);
 
 const currentFieldsConfig = computed(() => fieldsConfiguration[props.parentField]);
 
 const isInput = computed(() => currentFieldsConfig.value[props.field]?.valueComponent === 'input');
 const isSelect = computed(() => currentFieldsConfig.value[props.field]?.valueComponent === 'select');
+const isDate = computed(() => currentFieldsConfig.value[props.field]?.valueComponent === 'date');
 const valueOptions = computed(() => currentFieldsConfig.value[props.field]?.valueOptions ?? []);
 
+watch(dateValue, (newDate) => {
+  if (newDate) {
+    const formattedDate = `${newDate.year}-${String(newDate.month).padStart(2, '0')}-${String(newDate.day).padStart(2, '0')}`;
+    emit('update:modelValue', formattedDate);
+  }
+});
+
+watchEffect(() => {
+  if (isDate.value && props.modelValue) {
+    const [year, month, day] = props.modelValue.split('-').map(Number);
+    dateValue.value = new CalendarDate( year, month, day);
+  }
+});
+
 const handleChange = (value: string | number) => {
   emit('update:modelValue', value);
 };
diff --git a/test-frontend/src/components/ui/shadcn/calendar/Calendar.vue b/test-frontend/src/components/ui/shadcn/calendar/Calendar.vue
new file mode 100644
index 0000000..704d3a5
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/Calendar.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from './index.ts'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarCell.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarCell.vue
new file mode 100644
index 0000000..fbd0c07
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarCell.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarCellTrigger.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000..c022db0
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarGrid.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..5de6177
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarGrid.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarGridBody.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000..23d71ce
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarGridBody.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarGridHead.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000..f8101a3
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarGridHead.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarGridRow.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000..8747911
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarHeadCell.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000..b6bc691
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarHeadCell.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarHeader.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarHeader.vue
new file mode 100644
index 0000000..034d6cf
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarHeader.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarHeading.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarHeading.vue
new file mode 100644
index 0000000..dd8fbc4
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarHeading.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarNextButton.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarNextButton.vue
new file mode 100644
index 0000000..2afcadd
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils.ts'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/CalendarPrevButton.vue b/test-frontend/src/components/ui/shadcn/calendar/CalendarPrevButton.vue
new file mode 100644
index 0000000..de6dcf1
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/CalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import { cn } from '@/lib/utils.ts'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/calendar/index.ts b/test-frontend/src/components/ui/shadcn/calendar/index.ts
new file mode 100644
index 0000000..5239a1b
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/test-frontend/src/components/ui/shadcn/popover/Popover.vue b/test-frontend/src/components/ui/shadcn/popover/Popover.vue
new file mode 100644
index 0000000..1a5873a
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/popover/PopoverContent.vue b/test-frontend/src/components/ui/shadcn/popover/PopoverContent.vue
new file mode 100644
index 0000000..37d9277
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/popover/PopoverContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/popover/PopoverTrigger.vue b/test-frontend/src/components/ui/shadcn/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..22f4772
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/popover/PopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/test-frontend/src/components/ui/shadcn/popover/index.ts b/test-frontend/src/components/ui/shadcn/popover/index.ts
new file mode 100644
index 0000000..495d55a
--- /dev/null
+++ b/test-frontend/src/components/ui/shadcn/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
diff --git a/test-frontend/src/lib/search/fieldsConfiguration.ts b/test-frontend/src/lib/search/fieldsConfiguration.ts
index 695a812..f50fcf2 100644
--- a/test-frontend/src/lib/search/fieldsConfiguration.ts
+++ b/test-frontend/src/lib/search/fieldsConfiguration.ts
@@ -28,7 +28,7 @@ const libraryFieldsConfiguration: Record<string, FieldConfig> = {
     establishedDate: {
         label: "Established Date",
         fieldType: 'date',
-        valueComponent: 'input',
+        valueComponent: 'date',
         isFieldWithSubCriteria: false
     },
     website: {