sanity-plugin-recurring-dates 1.0.0

package/src/components/RecurringDate.tsx

@@ -0,0 +1,139 @@
+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, set} from 'sanity'
+import {Feedback} from 'sanity-plugin-utils'
+
+import type {PluginConfig, WithRequiredProperty} from '../types'
+import {validateRRuleStrings} from '../utils'
+import {CustomRule} from './CustomRule'
+
+type RecurringDatesProps = ObjectInputProps & {
+  pluginConfig: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>
+}
+
+export function RecurringDates(props: RecurringDatesProps) {
+  const {onChange, members, value: currentValue, schemaType, pluginConfig} = props
+  const {options}: {options?: PluginConfig} = schemaType
+  const {defaultRecurrences, hideEndDate, hideCustom, dateTimeOptions} = {
+    ...pluginConfig,
+    ...options,
+  }
+
+  // For the custom RRULE modal
+  const [open, setOpen] = useState(false)
+  const onClose = useCallback(() => setOpen(false), [])
+  const onOpen = useCallback(() => setOpen(true), [])
+
+  // Update the RRULE field when the select changes
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const {value} = event.currentTarget
+
+      if (value == 'custom') {
+        // open modal...
+        onOpen()
+      } else {
+        // update the field
+        onChange(set(value, ['rrule']))
+      }
+    },
+    [onChange, onOpen],
+  )
+
+  // Validate the default recurrences
+  const invalidRecurrences = validateRRuleStrings(defaultRecurrences)
+
+  // Grab the fields we want to output from the members array
+  const startDateMember = members.find(
+    (member) => member.kind === 'field' && member.name === 'startDate',
+  )
+  const endDateMember = members.find(
+    (member) => member.kind === 'field' && member.name === 'endDate',
+  )
+  const rruleMember = members.find((member) => member.kind === 'field' && member.name === 'rrule')
+
+  // If we have a custom RRULE, add it to the list of options
+  const availableRecurrences = [...defaultRecurrences]
+  if (currentValue && !availableRecurrences.includes(currentValue?.rrule)) {
+    availableRecurrences.push(currentValue?.rrule)
+  }
+
+  // Pass along functions to each member so that it knows how to render
+  const renderProps = {
+    renderField: props.renderField,
+    renderInput: props.renderInput,
+    renderItem: props.renderItem,
+    renderPreview: props.renderPreview,
+  }
+
+  if (startDateMember?.kind == 'field') {
+    startDateMember.field.schemaType.options = {
+      ...startDateMember?.field?.schemaType.options,
+      ...dateTimeOptions,
+    }
+  }
+
+  if (endDateMember?.kind == 'field') {
+    endDateMember.field.schemaType.options = {
+      ...endDateMember?.field?.schemaType.options,
+      ...dateTimeOptions,
+    }
+  }
+
+  return (
+    <Stack space={3}>
+      <Grid columns={hideEndDate ? 1 : 2} gap={3}>
+        <Flex align="flex-end" gap={2}>
+          <Box flex={1}>
+            {startDateMember && <ObjectInputMember member={startDateMember} {...renderProps} />}
+          </Box>
+        </Flex>
+        {!hideEndDate && (
+          <Flex align="flex-end" gap={2}>
+            <Box flex={1}>
+              {endDateMember && <ObjectInputMember member={endDateMember} {...renderProps} />}
+            </Box>
+          </Flex>
+        )}
+      </Grid>
+      {invalidRecurrences ? (
+        <Feedback tone="critical">
+          <Text size={1}>
+            <strong>Error:</strong> An invalid RRULE string was provided in the{' '}
+            <code>defaultRecurrences</code> array. Check plugin configuration.
+          </Text>
+        </Feedback>
+      ) : (
+        <Select onChange={handleChange} value={currentValue?.rrule}>
+          <option value="">Doesn't repeat</option>
+          {availableRecurrences.map((recurrence) => {
+            if (!recurrence) {
+              return null
+            }
+            const rule = rrulestr(recurrence)
+
+            return (
+              <option key={recurrence} value={recurrence}>
+                {upperFirst(rule.toText())}
+              </option>
+            )
+          })}
+          {!hideCustom && <option value="custom">Custom...</option>}
+        </Select>
+      )}
+      {rruleMember && <ObjectInputMember member={rruleMember} {...renderProps} />}
+      <CustomRule
+        open={open}
+        onClose={onClose}
+        onChange={onChange}
+        initialValue={currentValue?.rrule}
+        startDate={
+          startDateMember?.kind == 'field' ? (startDateMember?.field?.value as string) : undefined
+        }
+        dateTimeOptions={dateTimeOptions}
+      />
+    </Stack>
+  )
+}

package/src/constants.ts

@@ -0,0 +1,36 @@
+import {PluginConfig, WithRequiredProperty} from './types'
+
+const DEFAULT_RECURRENCES = [
+  'RRULE:FREQ=DAILY;INTERVAL=1',
+  'RRULE:FREQ=WEEKLY;INTERVAL=1',
+  'RRULE:FREQ=MONTHLY;INTERVAL=1',
+  'RRULE:FREQ=YEARLY;INTERVAL=1',
+]
+
+export const DEFAULT_CONFIG: WithRequiredProperty<PluginConfig, 'defaultRecurrences'> = {
+  defaultRecurrences: DEFAULT_RECURRENCES,
+}
+
+export const MONTHS = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+]
+
+export const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+
+export const DEFAULT_COUNTS = [
+  5, // yearly
+  12, // monthly
+  12, // weekly
+  30, // daily
+]

package/src/index.ts

@@ -0,0 +1,2 @@
+export {recurringDates} from './plugin'
+export * from './types'

package/src/plugin.tsx

@@ -0,0 +1,19 @@
+import {definePlugin} from 'sanity'
+
+import {DEFAULT_CONFIG} from './constants'
+import recurringDateSchema from './schema/recurringDates'
+import {PluginConfig, WithRequiredProperty} from './types'
+
+export const recurringDates = definePlugin<PluginConfig>((config) => {
+  const pluginConfig: WithRequiredProperty<PluginConfig, 'defaultRecurrences'> = {
+    ...DEFAULT_CONFIG,
+    ...config,
+  }
+
+  return {
+    name: 'sanity-plugin-recurring-dates',
+    schema: {
+      types: [recurringDateSchema(pluginConfig)],
+    },
+  }
+})

package/src/schema/recurringDates.tsx

@@ -0,0 +1,44 @@
+import {defineField} from 'sanity'
+
+import {RecurringDates} from '../components/RecurringDate'
+import {PluginConfig, WithRequiredProperty} from '../types'
+
+export default (config: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>) => {
+  const {hideEndDate, dateTimeOptions} = config
+
+  return defineField({
+    name: 'recurringDates',
+    title: 'Dates',
+    type: 'object',
+    fields: [
+      defineField({
+        title: 'Start Date',
+        name: 'startDate',
+        type: 'datetime',
+        options: dateTimeOptions,
+        validation: (Rule) => Rule.required(),
+      }),
+      defineField({
+        title: 'End Date',
+        name: 'endDate',
+        type: 'datetime',
+        options: dateTimeOptions,
+        validation: (Rule) => Rule.min(Rule.valueOfField('startDate')),
+      }),
+      defineField({
+        title: 'Recurring event',
+        name: 'recurs',
+        type: 'boolean',
+      }),
+      defineField({
+        title: 'RRULE',
+        name: 'rrule',
+        type: 'string',
+        hidden: true,
+      }),
+    ].filter((field) => !(field.name === 'endDate' && hideEndDate)),
+    components: {
+      input: (props) => RecurringDates({...props, pluginConfig: config}),
+    },
+  })
+}

package/src/types.ts

@@ -0,0 +1,27 @@
+import type {DatetimeOptions, ObjectDefinition} from 'sanity'
+
+export interface PluginConfig {
+  defaultRecurrences?: string[]
+  hideEndDate?: boolean
+  hideCustom?: boolean
+  dateTimeOptions?: DatetimeOptions
+}
+
+export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
+  [Property in Key]-?: Type[Property]
+}
+
+// create a new schema definition based on object (we remove the ability to assign field, change the type add some options)
+export type RecurringDateFieldOptions = Omit<ObjectDefinition, 'type' | 'fields'> & {
+  type: 'recurringDates'
+  options?: PluginConfig
+}
+
+// redeclares sanity module so we can add interfaces props to it
+declare module 'sanity' {
+  // redeclares IntrinsicDefinitions and adds a named definition to it
+  // it is important that the key is the same as the type in the definition ('magically-added-type')
+  export interface IntrinsicDefinitions {
+    recurringDates: RecurringDateFieldOptions
+  }
+}

package/src/utils.ts

@@ -0,0 +1,16 @@
+import {rrulestr} from 'rrule'
+
+export const validateRRuleString = (recurrence: string): boolean => {
+  try {
+    rrulestr(recurrence)
+    return false
+  } catch (e) {
+    return true
+  }
+}
+
+export const validateRRuleStrings = (recurrences: string[]): boolean => {
+  return recurrences.some((recurrence) => {
+    return validateRRuleString(recurrence)
+  })
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})