sanity-plugin-recurring-dates 1.3.2 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-recurring-dates",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "description": "Add a custom input component to your Sanity Studio to manage recurring dates (e.g. for events)",
   "keywords": [
     "sanity",

package/src/components/CustomRule/CustomRule.tsx

@@ -3,6 +3,7 @@ import {format, toDate} from 'date-fns-tz'
 import React, {useCallback, useMemo, useState} from 'react'
 import {Options, RRule, rrulestr, Weekday} from 'rrule'
 import {type ObjectInputProps, set} from 'sanity'
+import {Feedback} from 'sanity-plugin-utils'
 
 import {DEFAULT_COUNTS} from '../../constants'
 import {PluginConfig} from '../../types'
@@ -16,13 +17,15 @@ export function CustomRule({
   onChange,
   initialValue,
   startDate,
+  endDate,
   dateTimeOptions,
 }: {
   open: boolean
   onClose: () => void
   onChange: ObjectInputProps['onChange']
   initialValue: string
-  startDate: string | undefined
+  startDate?: string
+  endDate?: string
   dateTimeOptions: PluginConfig['dateTimeOptions']
 }): React.JSX.Element {
   const initialRule = useMemo(() => {
@@ -43,6 +46,8 @@ export function CustomRule({
     initialRule.origOptions.byweekday || null,
   )
 
+  const [untilValid, setUntilValid] = useState<boolean>(true)
+
   const handleChange = useCallback(
     (event: React.FormEvent<HTMLInputElement> | React.FormEvent<HTMLSelectElement>) => {
       const {name, value} = event.currentTarget
@@ -76,11 +81,25 @@ export function CustomRule({
     return fromDate
   }, [frequency, startDate])
 
-  const handleUntilChange = useCallback((date: string | null) => {
-    if (date) {
-      setUntil(toDate(`${date}T23:59:59`))
-    }
-  }, [])
+  const handleUntilChange = useCallback(
+    (date: string | null) => {
+      if (date) {
+        const untilDate = toDate(`${date}T23:59:59`)
+
+        if (
+          (endDate && untilDate < toDate(endDate)) ||
+          (startDate && untilDate < toDate(startDate))
+        ) {
+          setUntilValid(false)
+        } else {
+          setUntilValid(true)
+        }
+
+        setUntil(untilDate)
+      }
+    },
+    [endDate, startDate],
+  )
 
   const handleEndChange = useCallback(
     (event: React.FormEvent<HTMLInputElement>) => {
@@ -107,7 +126,7 @@ export function CustomRule({
       interval,
       count: count || null,
       until: until ? (until as Date) : null,
-      byweekday,
+      byweekday: frequency === RRule.WEEKLY || frequency === RRule.MONTHLY ? byweekday : null,
     }
 
     const newRule = new RRule(newOptions)
@@ -198,6 +217,11 @@ export function CustomRule({
                     readOnly={!until}
                   />
                 </Box>
+                {!untilValid && (
+                  <Feedback tone="critical">
+                    <Text size={1}>Until date must be after event ends</Text>
+                  </Feedback>
+                )}
               </Flex>
               <Flex gap={2} align="center">
                 <Radio
@@ -227,7 +251,7 @@ export function CustomRule({
         <Box paddingX={4} paddingY={3} style={{borderTop: '1px solid var(--card-border-color)'}}>
           <Flex gap={2} justify="flex-end">
             <Button text="Cancel" mode="ghost" onClick={onClose} />
-            <Button text="Done" tone="positive" onClick={handleConfirm} />
+            <Button text="Done" tone="positive" onClick={handleConfirm} disabled={!untilValid} />
           </Flex>
         </Box>
       </Flex>

package/src/components/CustomRule/Monthly.tsx

@@ -1,5 +1,5 @@
 import {Box, Flex, Select, Text} from '@sanity/ui'
-import React, {useCallback} from 'react'
+import React, {useCallback, useEffect} from 'react'
 import {Options, Weekday} from 'rrule'
 
 import {DAYS} from '../../constants'
@@ -34,6 +34,12 @@ export function Monthly(props: MonthlyProps): React.JSX.Element {
     [dayNo, setByweekday, weekNo],
   )
 
+  useEffect(() => {
+    if (!weekNo) {
+      setByweekday(null)
+    }
+  }, [])
+
   return (
     <Flex gap={2} align="center">
       <Text style={{whiteSpace: 'nowrap'}}>On the</Text>

package/src/components/RecurringDate.tsx

@@ -82,6 +82,31 @@ export function RecurringDates(props: RecurringDatesProps): React.JSX.Element {
       ...startDateMember?.field?.schemaType.options,
       ...dateTimeOptions,
     }
+
+    // Ensure the right schemaType is set
+    if (dateOnly === true) {
+      startDateMember.field.schemaType.name = 'date'
+    } else {
+      startDateMember.field.schemaType.name = 'datetime'
+    }
+
+    // Add custom validation to the start date field
+    if (validation?.startDate) {
+      startDateMember.field.schemaType.validation = (CustomValidation) =>
+        validation?.startDate?.(CustomValidation) as Rule
+    } else {
+      startDateMember.field.schemaType.validation = (DefaultRule) => DefaultRule.required() as Rule
+    }
+
+    // Add custom title to the start date field
+    if (options?.fieldTitles?.startDate) {
+      startDateMember.field.schemaType.title = options.fieldTitles.startDate
+    }
+
+    // Add custom description to the start date field
+    if (options?.fieldDescriptions?.startDate) {
+      startDateMember.field.schemaType.description = options.fieldDescriptions.startDate
+    }
   }
 
   if (endDateMember?.kind == 'field') {
@@ -89,36 +114,32 @@ export function RecurringDates(props: RecurringDatesProps): React.JSX.Element {
       ...endDateMember?.field?.schemaType.options,
       ...dateTimeOptions,
     }
-  }
 
-  if (dateOnly === true) {
-    if (startDateMember?.kind == 'field') {
-      startDateMember.field.schemaType.name = 'date'
-    }
-
-    if (endDateMember?.kind == 'field') {
+    // Ensure the right schemaType is set
+    if (dateOnly === true) {
       endDateMember.field.schemaType.name = 'date'
-    }
-  } else {
-    // we need to explicitly set the schemaType to datetime
-    if (startDateMember?.kind == 'field') {
-      startDateMember.field.schemaType.name = 'datetime'
+    } else {
+      endDateMember.field.schemaType.name = 'datetime'
     }
 
-    if (endDateMember?.kind == 'field') {
-      endDateMember.field.schemaType.name = 'datetime'
+    // Add custom validation to the end date field
+    if (validation?.endDate) {
+      endDateMember.field.schemaType.validation = (CustomValidation) =>
+        validation?.endDate?.(CustomValidation) as Rule
+    } else {
+      endDateMember.field.schemaType.validation = (DefaultRule) =>
+        DefaultRule.min(DefaultRule.valueOfField('startDate')) as Rule
     }
-  }
 
-  // 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
-  }
+    // Add custom title to the end date field
+    if (options?.fieldTitles?.endDate) {
+      endDateMember.field.schemaType.title = options.fieldTitles.endDate
+    }
 
-  if (validation?.endDate && endDateMember?.kind == 'field') {
-    endDateMember.field.schemaType.validation = (CustomValidation) =>
-      validation?.endDate?.(CustomValidation) as Rule
+    // Add custom description to the end date field
+    if (options?.fieldDescriptions?.endDate) {
+      endDateMember.field.schemaType.description = options.fieldDescriptions.endDate
+    }
   }
 
   // Do we have an end date set for this field?
@@ -186,6 +207,9 @@ export function RecurringDates(props: RecurringDatesProps): React.JSX.Element {
         startDate={
           startDateMember?.kind == 'field' ? (startDateMember?.field?.value as string) : undefined
         }
+        endDate={
+          endDateMember?.kind == 'field' ? (endDateMember?.field?.value as string) : undefined
+        }
         dateTimeOptions={dateTimeOptions}
       />
     </Stack>

package/src/schema/recurringDates.tsx

@@ -8,7 +8,7 @@ import {PluginConfig, WithRequiredProperty} from '../types'
 export default (
   config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>,
 ): SchemaTypeDefinition => {
-  const {dateTimeOptions, dateOnly, validation} = config
+  const {dateTimeOptions, dateOnly, validation, fieldTitles, fieldDescriptions} = config
 
   return defineField({
     name: 'recurringDates',
@@ -17,7 +17,8 @@ export default (
     icon: CalendarIcon,
     fields: [
       defineField({
-        title: 'Start Date',
+        title: fieldTitles?.startDate || 'Start Date',
+        description: fieldDescriptions?.startDate || '',
         name: 'startDate',
         type: dateOnly ? 'date' : 'datetime',
         options: dateTimeOptions,
@@ -25,7 +26,8 @@ export default (
           validation?.startDate ? validation.startDate(Rule) : Rule.required(),
       }),
       defineField({
-        title: 'End Date',
+        title: fieldTitles?.endDate || 'End Date',
+        description: fieldDescriptions?.endDate || '',
         name: 'endDate',
         type: dateOnly ? 'date' : 'datetime',
         options: dateTimeOptions,

package/src/types.ts

@@ -10,6 +10,14 @@ export interface PluginConfig {
     startDate?: (Rule: DateRule) => DateRule
     endDate?: (Rule: DateRule) => DateRule
   }
+  fieldTitles?: {
+    startDate?: string
+    endDate?: string
+  }
+  fieldDescriptions?: {
+    startDate?: string
+    endDate?: string
+  }
 }
 
 export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {