sanity-plugin-recurring-dates 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-recurring-dates",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Add a custom input component to your Sanity Studio to manage recurring dates (e.g. for events)",
   "keywords": [
     "sanity",
@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@sanity/incompatible-plugin": "^1.0.4",
+    "date-fns-tz": "^3.2.0",
     "lodash": "^4.17.21",
     "rrule": "^2.7.2",
     "sanity-plugin-utils": "^1.6.2"

package/src/components/CustomRule/CustomRule.tsx

@@ -1,4 +1,5 @@
 import {Box, Button, Dialog, Flex, Radio, Select, Stack, Text, TextInput} from '@sanity/ui'
+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'
@@ -30,7 +31,9 @@ export function CustomRule({
 
   const [frequency, setFrequency] = useState<Options['freq']>(initialRule.origOptions.freq || 1)
   const [interval, setInterval] = useState<Options['interval']>(
-    initialRule.origOptions.interval || 1,
+    initialRule.origOptions.interval && initialRule.origOptions.interval > 0
+      ? initialRule.origOptions.interval
+      : 1,
   )
   const [count, setCount] = useState<Options['count']>(initialRule.origOptions.count || null)
   const [until, setUntil] = useState<Options['until'] | number>(
@@ -47,7 +50,7 @@ export function CustomRule({
       if (name === 'freq') {
         setFrequency(Number(value))
       } else if (name === 'interval') {
-        setInterval(Number(value))
+        setInterval(Number(value) > 1 ? Number(value) : 1)
       } else if (name === 'count') {
         setCount(Number(value))
       }
@@ -68,12 +71,14 @@ export function CustomRule({
       fromDate.setDate(fromDate.getDate() + DEFAULT_COUNTS[frequency])
     }
 
+    fromDate.setHours(23, 59, 59, 999)
+
     return fromDate
   }, [frequency, startDate])
 
   const handleUntilChange = useCallback((date: string | null) => {
     if (date) {
-      setUntil(new Date(date))
+      setUntil(toDate(`${date}T23:59:59`))
     }
   }, [])
 
@@ -111,6 +116,8 @@ export function CustomRule({
     onChange(set(newRule.toString(), ['rrule']))
   }, [byweekday, count, frequency, interval, onChange, onClose, until])
 
+  const formatUntilValue = useCallback((date: Date) => format(date, 'yyyy-MM-dd'), [])
+
   return open ? (
     <Dialog
       header="Custom recurrence"
@@ -125,14 +132,20 @@ export function CustomRule({
             <Flex gap={2} align="center">
               <Text style={{whiteSpace: 'nowrap'}}>Repeat every</Text>
               <Box style={{width: '75px'}}>
-                <TextInput name="interval" type="number" value={interval} onChange={handleChange} />
+                <TextInput
+                  name="interval"
+                  type="number"
+                  min={1}
+                  value={interval}
+                  onChange={handleChange}
+                />
               </Box>
               <Box>
                 <Select name="freq" value={frequency} onChange={handleChange}>
-                  <option value={RRule.YEARLY}>years</option>
-                  <option value={RRule.MONTHLY}>months</option>
-                  <option value={RRule.WEEKLY}>weeks</option>
-                  <option value={RRule.DAILY}>days</option>
+                  <option value={RRule.YEARLY}>year(s)</option>
+                  <option value={RRule.MONTHLY}>month(s)</option>
+                  <option value={RRule.WEEKLY}>week(s)</option>
+                  <option value={RRule.DAILY}>day(s)</option>
                 </Select>
               </Box>
             </Flex>
@@ -179,8 +192,10 @@ export function CustomRule({
                       title: 'Date',
                       options: dateTimeOptions,
                     }}
-                    value={until ? new Date(until) : getUntilDate()}
-                    disabled={!until}
+                    value={
+                      until ? formatUntilValue(new Date(until)) : formatUntilValue(getUntilDate())
+                    }
+                    readOnly={!until}
                   />
                 </Box>
               </Flex>
@@ -204,7 +219,7 @@ export function CustomRule({
                     disabled={!count}
                   />
                 </Box>
-                <Text style={{whiteSpace: 'nowrap'}}>occurrences</Text>
+                <Text style={{whiteSpace: 'nowrap'}}>occurrence(s)</Text>
               </Flex>
             </Stack>
           </Stack>

package/src/components/DateInputs/DateInput.tsx

@@ -16,8 +16,8 @@ interface SchemaOptions {
 type DateInputProps = {
   id: string
   onChange: (date: string | null) => void
-  disabled?: boolean
-  value: number | Date | null
+  readOnly?: boolean
+  value: string | undefined
   type: {
     name: string
     title: string
@@ -46,13 +46,13 @@ const serialize = (date: Date) => format(date, VALUE_FORMAT)
  * @hidden
  * @beta */
 export function DateInput(props: DateInputProps): React.JSX.Element {
-  const {id, onChange, type, value, disabled, ...rest} = props
+  const {id, onChange, type, value, readOnly, ...rest} = props
 
   const {dateFormat} = parseOptions(type.options)
 
   const handleChange = useCallback(
     (nextDate: string | null) => {
-      onChange(nextDate)
+      onChange(nextDate || null)
     },
     [onChange],
   )
@@ -72,7 +72,7 @@ export function DateInput(props: DateInputProps): React.JSX.Element {
       formatInputValue={formatInputValue}
       onChange={handleChange}
       parseInputValue={parseInputValue}
-      readOnly={disabled}
+      readOnly={readOnly}
       selectTime={false}
       serialize={serialize}
       value={value}

package/src/components/RecurringDate.tsx

@@ -1,7 +1,7 @@
 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 {datetime, rrulestr} from 'rrule'
 import {
   ObjectInputMember,
   type ObjectInputProps,
@@ -157,6 +157,17 @@ export function RecurringDates(props: RecurringDatesProps): React.JSX.Element {
             }
             const rule = rrulestr(recurrence)
 
+            rule.options.until =
+              rule?.options?.until &&
+              datetime(
+                rule?.options?.until?.getFullYear(),
+                rule?.options?.until?.getMonth() + 1,
+                rule?.options?.until?.getDate(),
+                rule?.options?.until?.getHours(),
+                rule?.options?.until?.getMinutes(),
+                rule?.options?.until?.getSeconds(),
+              )
+
             return (
               <option key={recurrence} value={recurrence}>
                 {upperFirst(rule.toText())}

package/src/components/RecurringDatesPreview.tsx

@@ -1,7 +1,7 @@
 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 {datetime, rrulestr} from 'rrule'
 import type {ObjectSchemaType, PreviewProps} from 'sanity'
 
 import type {PluginConfig, RecurringDate, WithRequiredProperty} from '../types'
@@ -26,6 +26,19 @@ export function RecurringDatesPreview(props: CastPreviewProps): React.JSX.Elemen
 
   const rule = rrule && rrulestr(rrule)
 
+  if (rule) {
+    rule.options.until =
+      rule?.options?.until &&
+      datetime(
+        rule?.options?.until?.getFullYear(),
+        rule?.options?.until?.getMonth() + 1,
+        rule?.options?.until?.getDate(),
+        rule?.options?.until?.getHours(),
+        rule?.options?.until?.getMinutes(),
+        rule?.options?.until?.getSeconds(),
+      )
+  }
+
   const dateFormat = dateTimeOptions?.dateFormat || DEFAULT_DATE_FORMAT
   const timeFormat = dateTimeOptions?.timeFormat || DEFAULT_TIME_FORMAT