sanity-plugin-recurring-dates 1.1.1 → 1.3.0

package/src/components/DateInputs/base/calendar/CalendarMonth.tsx

@@ -1,6 +1,7 @@
 import {Box, Grid, Text} from '@sanity/ui'
 import {isSameDay, isSameMonth} from 'date-fns'
 import React from 'react'
+
 import {CalendarDay} from './CalendarDay'
 import {WEEK_DAY_NAMES} from './constants'
 import {getWeeksOfMonth} from './utils'
@@ -13,7 +14,7 @@ interface CalendarMonthProps {
   hidden?: boolean
 }
 
-export function CalendarMonth(props: CalendarMonthProps) {
+export function CalendarMonth(props: CalendarMonthProps): React.JSX.Element {
   return (
     <Box aria-hidden={props.hidden || false} data-ui="CalendarMonth">
       <Grid gap={1} style={{gridTemplateColumns: 'repeat(7, minmax(44px, 46px))'}}>
@@ -44,7 +45,7 @@ export function CalendarMonth(props: CalendarMonthProps) {
                 selected={selected}
               />
             )
-          })
+          }),
         )}
       </Grid>
     </Box>

package/src/components/DateInputs/base/calendar/YearInput.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import {TextInput} from '@sanity/ui'
+import React from 'react'
+
 import {LazyTextInput} from '../LazyTextInput'
 
 type Props = Omit<React.ComponentProps<typeof TextInput>, 'onChange' | 'value'> & {
@@ -7,7 +8,7 @@ type Props = Omit<React.ComponentProps<typeof TextInput>, 'onChange' | 'value'>
   onChange: (year: number) => void
 }
 
-export const YearInput = ({onChange, ...props}: Props) => {
+export const YearInput = ({onChange, ...props}: Props): React.JSX.Element => {
   const handleChange = React.useCallback(
     (event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>) => {
       const numericValue = parseInt(event.currentTarget.value, 10)
@@ -15,7 +16,7 @@ export const YearInput = ({onChange, ...props}: Props) => {
         onChange(numericValue)
       }
     },
-    [onChange]
+    [onChange],
   )
 
   return <LazyTextInput {...props} onChange={handleChange} inputMode="numeric" />

package/src/components/RecurringDate.tsx

@@ -2,7 +2,13 @@ import {Box, Flex, Grid, Select, Stack, Text} from '@sanity/ui'
 import {upperFirst} from 'lodash'
 import React, {useCallback, useState} from 'react'
 import {rrulestr} from 'rrule'
-import {ObjectInputMember, type ObjectInputProps, ObjectSchemaType, set} from 'sanity'
+import {
+  ObjectInputMember,
+  type ObjectInputProps,
+  type ObjectSchemaType,
+  type Rule,
+  set,
+} from 'sanity'
 import {Feedback} from 'sanity-plugin-utils'
 
 import type {PluginConfig, WithRequiredProperty} from '../types'
@@ -18,10 +24,10 @@ type RecurringDateObjectSchemaType = Omit<ObjectSchemaType, 'options'> & {
   options?: PluginConfig
 }
 
-export function RecurringDates(props: RecurringDatesProps) {
+export function RecurringDates(props: RecurringDatesProps): React.JSX.Element {
   const {onChange, members, value: currentValue, schemaType, pluginConfig} = props
   const {options, title}: RecurringDateObjectSchemaType = schemaType
-  const {defaultRecurrences, hideEndDate, hideCustom, dateTimeOptions, dateOnly} = {
+  const {defaultRecurrences, hideEndDate, hideCustom, dateTimeOptions, dateOnly, validation} = {
     ...pluginConfig,
     ...options,
   }
@@ -104,8 +110,19 @@ export function RecurringDates(props: RecurringDatesProps) {
     }
   }
 
+  // Add custom validation to the start and end date fields
+  if (validation?.startDate && startDateMember?.kind == 'field') {
+    startDateMember.field.schemaType.validation = (CustomValidation) =>
+      validation?.startDate?.(CustomValidation) as Rule
+  }
+
+  if (validation?.endDate && endDateMember?.kind == 'field') {
+    endDateMember.field.schemaType.validation = (CustomValidation) =>
+      validation?.endDate?.(CustomValidation) as Rule
+  }
+
   // Do we have an end date set for this field?
-  const hasEndDate = currentValue && currentValue.endDate
+  const hasEndDate = currentValue?.endDate
 
   return (
     <Stack space={3}>

package/src/components/RecurringDatesPreview.tsx

@@ -0,0 +1,55 @@
+import {DEFAULT_DATE_FORMAT, DEFAULT_TIME_FORMAT, format} from '@sanity/util/legacyDateFormat'
+import {upperFirst} from 'lodash'
+import React from 'react'
+import {rrulestr} from 'rrule'
+import type {ObjectSchemaType, PreviewProps} from 'sanity'
+
+import type {PluginConfig, RecurringDate, WithRequiredProperty} from '../types'
+
+type CastPreviewProps = PreviewProps &
+  RecurringDate & {
+    pluginConfig: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>
+  }
+
+type RecurringDateObjectSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: PluginConfig
+}
+
+export function RecurringDatesPreview(props: CastPreviewProps): React.JSX.Element {
+  const {startDate, endDate, rrule, schemaType, pluginConfig} = props
+  const options: RecurringDateObjectSchemaType = schemaType?.options
+
+  const {dateTimeOptions, dateOnly} = {
+    ...pluginConfig,
+    ...options,
+  }
+
+  const rule = rrule && rrulestr(rrule)
+
+  const dateFormat = dateTimeOptions?.dateFormat || DEFAULT_DATE_FORMAT
+  const timeFormat = dateTimeOptions?.timeFormat || DEFAULT_TIME_FORMAT
+
+  const start = startDate ? new Date(startDate) : undefined
+  const end = endDate ? new Date(endDate) : undefined
+  const sameDay = start && end && start.toDateString() === end.toDateString()
+
+  let title = 'No start date'
+  if (dateOnly) {
+    title = start ? format(start, dateFormat) : 'No start date'
+    if (end && !sameDay) {
+      title += ` - ${format(end, dateFormat)}`
+    }
+  } else {
+    title = start ? format(start, `${dateFormat} ${timeFormat}`) : 'No start date'
+    if (end) {
+      title += ` - ${format(end, sameDay ? timeFormat : `${dateFormat} ${timeFormat}`)}`
+    }
+  }
+
+  const previewProps = {
+    title,
+    subtitle: rule && upperFirst(rule.toText()),
+  }
+
+  return props.renderDefault({...previewProps, ...props})
+}

package/src/components/RemoveEndDate.tsx

@@ -2,6 +2,7 @@ import {TrashIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
 import {upperFirst} from 'lodash'
 import {useCallback} from 'react'
+import React from 'react'
 import {type ObjectInputProps, unset} from 'sanity'
 
 export function RemoveEndDate({
@@ -10,7 +11,7 @@ export function RemoveEndDate({
 }: {
   title?: string
   onChange: ObjectInputProps['onChange']
-}) {
+}): React.JSX.Element {
   // Update the RRULE field when the select changes
   const handleUnsetClick = useCallback(() => {
     onChange(unset(['endDate']))
@@ -39,7 +40,7 @@ export function RemoveEndDate({
             tone="critical"
             text={<>Remove end date</>}
             onClick={handleUnsetClick}
-            width="100%"
+            width="fill"
           />
         </Stack>
       </Flex>

package/src/schema/recurringDates.tsx

@@ -1,29 +1,36 @@
-import {defineField} from 'sanity'
+import {CalendarIcon} from '@sanity/icons'
+import {defineField, SchemaTypeDefinition} from 'sanity'
 
 import {RecurringDates} from '../components/RecurringDate'
+import {RecurringDatesPreview} from '../components/RecurringDatesPreview'
 import {PluginConfig, WithRequiredProperty} from '../types'
 
-export default (config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>) => {
-  const {dateTimeOptions, dateOnly} = config
+export default (
+  config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>,
+): SchemaTypeDefinition => {
+  const {dateTimeOptions, dateOnly, validation} = config
 
   return defineField({
     name: 'recurringDates',
     title: 'Dates',
     type: 'object',
+    icon: CalendarIcon,
     fields: [
       defineField({
         title: 'Start Date',
         name: 'startDate',
         type: dateOnly ? 'date' : 'datetime',
         options: dateTimeOptions,
-        validation: (Rule) => Rule.required(),
+        validation: (Rule) =>
+          validation?.startDate ? validation.startDate(Rule) : Rule.required(),
       }),
       defineField({
         title: 'End Date',
         name: 'endDate',
         type: dateOnly ? 'date' : 'datetime',
         options: dateTimeOptions,
-        validation: (Rule) => Rule.min(Rule.valueOfField('startDate')),
+        validation: (Rule) =>
+          validation?.endDate ? validation.endDate(Rule) : Rule.min(Rule.valueOfField('startDate')),
       }),
       defineField({
         title: 'Recurring event',
@@ -39,6 +46,14 @@ export default (config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>
     ],
     components: {
       input: (props) => RecurringDates({...props, pluginConfig: config}),
+      preview: (props) => RecurringDatesPreview({...props, pluginConfig: config}),
+    },
+    preview: {
+      select: {
+        startDate: 'startDate',
+        endDate: 'endDate',
+        rrule: 'rrule',
+      },
     },
   })
 }

package/src/types.ts

@@ -1,4 +1,4 @@
-import type {DatetimeOptions, ObjectDefinition} from 'sanity'
+import type {DateRule, DatetimeOptions, ObjectDefinition} from 'sanity'
 
 export interface PluginConfig {
   defaultRecurrences?: string[]
@@ -6,6 +6,10 @@ export interface PluginConfig {
   hideCustom?: boolean
   dateTimeOptions?: DatetimeOptions
   dateOnly?: boolean
+  validation?: {
+    startDate?: (Rule: DateRule) => DateRule
+    endDate?: (Rule: DateRule) => DateRule
+  }
 }
 
 export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
@@ -28,7 +32,7 @@ declare module 'sanity' {
 }
 
 export interface RecurringDate {
-  rrule: string
-  startDate: string
-  endDate: string
+  rrule?: string
+  startDate?: string
+  endDate?: string
 }