sanity-plugin-recurring-dates 1.1.0 → 1.2.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/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,10 +1,12 @@
-import {defineField} from 'sanity'
+import {defineField, SchemaTypeDefinition} from 'sanity'
 
 import {RecurringDates} from '../components/RecurringDate'
 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',
@@ -16,14 +18,16 @@ export default (config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>
         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',

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 & {
@@ -30,5 +34,5 @@ declare module 'sanity' {
 export interface RecurringDate {
   rrule: string
   startDate: string
-  endDate: String
+  endDate: string
 }