sanity-plugin-recurring-dates 1.0.0

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "sanity-plugin-recurring-dates",
+  "version": "1.0.0",
+  "description": "Add a custom input component to your Sanity Studio to manage recurring dates (e.g. for events)",
+  "keywords": [
+    "sanity",
+    "sanity-plugin"
+  ],
+  "homepage": "https://github.com/thebiggianthead/sanity-plugin-recurring-dates#readme",
+  "bugs": {
+    "url": "https://github.com/thebiggianthead/sanity-plugin-recurring-dates/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:thebiggianthead/sanity-plugin-recurring-dates.git"
+  },
+  "license": "MIT",
+  "author": "Tom Smith <tom@sanity.io>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "clean": "rimraf dist",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@sanity/icons": "^2.4.1",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^1.7.4",
+    "lodash": "^4.17.21",
+    "rrule": "^2.7.2",
+    "sanity-plugin-utils": "^1.6.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
+    "@sanity/pkg-utils": "^2.3.9",
+    "@sanity/plugin-kit": "^3.1.7",
+    "@sanity/semantic-release-preset": "^4.1.2",
+    "@types/react": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.9.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.3",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.0",
+    "prettier-plugin-packagejson": "^2.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "sanity": "^3.14.4",
+    "styled-components": "^5.3.11",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "sanity": "^3"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/components/CustomRule/CustomRule.tsx

@@ -0,0 +1,230 @@
+import {Box, Button, Dialog, Flex, Radio, Select, Stack, Text, TextInput} from '@sanity/ui'
+import React, {useCallback, useMemo, useState} from 'react'
+import {Options, RRule, rrulestr, Weekday} from 'rrule'
+import {type ObjectInputProps, set} from 'sanity'
+
+import {DEFAULT_COUNTS} from '../../constants'
+import {PluginConfig} from '../../types'
+import {DateInput} from '../DateInputs'
+import {Monthly} from './Monthly'
+import {Weekly} from './Weekly'
+
+export function CustomRule({
+  open,
+  onClose,
+  onChange,
+  initialValue,
+  startDate,
+  dateTimeOptions,
+}: {
+  open: boolean
+  onClose: () => void
+  onChange: ObjectInputProps['onChange']
+  initialValue: string
+  startDate: string | undefined
+  dateTimeOptions: PluginConfig['dateTimeOptions']
+}) {
+  const initialRule = useMemo(() => {
+    return initialValue ? rrulestr(initialValue) : new RRule()
+  }, [initialValue])
+
+  const [frequency, setFrequency] = useState<Options['freq']>(initialRule.origOptions.freq || 1)
+  const [interval, setInterval] = useState<Options['interval']>(
+    initialRule.origOptions.interval || 1,
+  )
+  const [count, setCount] = useState<Options['count']>(initialRule.origOptions.count || null)
+  const [until, setUntil] = useState<Options['until'] | number>(
+    initialRule.origOptions.until || null,
+  )
+  const [byweekday, setByweekday] = useState<Options['byweekday']>(
+    initialRule.origOptions.byweekday || null,
+  )
+
+  const handleChange = useCallback(
+    (event: React.FormEvent<HTMLInputElement> | React.FormEvent<HTMLSelectElement>) => {
+      const {name, value} = event.currentTarget
+
+      if (name === 'freq') {
+        setFrequency(Number(value))
+      } else if (name === 'interval') {
+        setInterval(Number(value))
+      } else if (name === 'interval') {
+        setCount(Number(value))
+      } else if (name === 'count') {
+        setCount(Number(value))
+      }
+    },
+    [],
+  )
+
+  const getUntilDate = useCallback(() => {
+    const fromDate = new Date(startDate ? startDate : Date.now())
+
+    if (frequency === RRule.YEARLY) {
+      fromDate.setFullYear(fromDate.getFullYear() + DEFAULT_COUNTS[frequency])
+    } else if (frequency === RRule.MONTHLY) {
+      fromDate.setMonth(fromDate.getMonth() + DEFAULT_COUNTS[frequency])
+    } else if (frequency === RRule.WEEKLY) {
+      fromDate.setDate(fromDate.getDate() + DEFAULT_COUNTS[frequency] * 7)
+    } else if (frequency === RRule.DAILY) {
+      fromDate.setDate(fromDate.getDate() + DEFAULT_COUNTS[frequency])
+    }
+
+    return fromDate
+  }, [frequency, startDate])
+
+  const handleUntilChange = useCallback((date: string | null) => {
+    if (date) {
+      setUntil(new Date(date))
+    }
+  }, [])
+
+  const handleEndChange = useCallback(
+    (event: React.FormEvent<HTMLInputElement>) => {
+      const {value} = event.currentTarget
+
+      if (!value) {
+        setUntil(null)
+        setCount(null)
+      } else if (value == 'count') {
+        setCount(DEFAULT_COUNTS[frequency])
+        setUntil(null)
+      } else if (value == 'until') {
+        const untilDate = getUntilDate()
+        setUntil(untilDate)
+        setCount(null)
+      }
+    },
+    [frequency, getUntilDate],
+  )
+
+  const handleConfirm = useCallback(() => {
+    const newOptions = {
+      freq: frequency,
+      interval,
+      count: count || null,
+      until: until ? (until as Date) : null,
+      byweekday,
+    }
+
+    const newRule = new RRule(newOptions)
+
+    onClose()
+    onChange(set(newRule.toString(), ['rrule']))
+  }, [byweekday, count, frequency, interval, onChange, onClose, until])
+
+  return (
+    open && (
+      <Dialog
+        header="Custom recurrence"
+        id="dialog-example"
+        onClose={onClose}
+        zOffset={1000}
+        width={1}
+      >
+        <Flex direction="column">
+          <Box flex={1} overflow="auto" padding={4}>
+            <Stack space={4}>
+              <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}
+                  />
+                </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>
+                  </Select>
+                </Box>
+              </Flex>
+
+              {frequency === RRule.MONTHLY && (
+                <Monthly byweekday={byweekday as Weekday} setByweekday={setByweekday} />
+              )}
+
+              {frequency === RRule.WEEKLY && (
+                <Weekly byweekday={byweekday as Weekday} setByweekday={setByweekday} />
+              )}
+
+              <Stack space={2}>
+                <Text>Ends</Text>
+                <Flex gap={2} paddingY={2} align="center">
+                  <Radio
+                    checked={!count && !until}
+                    name="ends"
+                    onChange={handleEndChange}
+                    value=""
+                    id="ends-never"
+                  />
+                  <Text htmlFor="ends-never" as="label">
+                    Never
+                  </Text>
+                </Flex>
+                <Flex gap={2} align="center">
+                  <Radio
+                    checked={!!until}
+                    name="ends"
+                    onChange={handleEndChange}
+                    value="until"
+                    id="ends-until"
+                  />
+                  <Text htmlFor="ends-until" as="label" style={{width: '75px'}}>
+                    On
+                  </Text>
+                  <Box style={{width: '200px'}}>
+                    <DateInput
+                      id="until"
+                      onChange={handleUntilChange}
+                      type={{
+                        name: 'until',
+                        title: 'Date',
+                        options: dateTimeOptions,
+                      }}
+                      value={until ? new Date(until) : getUntilDate()}
+                      disabled={!until}
+                    />
+                  </Box>
+                </Flex>
+                <Flex gap={2} align="center">
+                  <Radio
+                    checked={!!count}
+                    name="ends"
+                    onChange={handleEndChange}
+                    value="count"
+                    id="ends-count"
+                  />
+                  <Text htmlFor="ends-count" as="label" style={{width: '75px'}}>
+                    After
+                  </Text>
+                  <Box style={{width: '75px'}}>
+                    <TextInput
+                      name="count"
+                      type="number"
+                      value={count || DEFAULT_COUNTS[frequency]}
+                      onChange={handleChange}
+                      disabled={!count}
+                    />
+                  </Box>
+                  <Text style={{whiteSpace: 'nowrap'}}>occurrences</Text>
+                </Flex>
+              </Stack>
+            </Stack>
+          </Box>
+          <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} />
+            </Flex>
+          </Box>
+        </Flex>
+      </Dialog>
+    )
+  )
+}

package/src/components/CustomRule/Monthly.tsx

@@ -0,0 +1,67 @@
+import {Box, Flex, Select, Text} from '@sanity/ui'
+import React, {useCallback} from 'react'
+import {Options, Weekday} from 'rrule'
+
+import {DAYS} from '../../constants'
+
+interface MonthlyProps {
+  byweekday: Weekday
+  setByweekday: (value: Options['byweekday']) => void
+}
+
+export function Monthly(props: MonthlyProps) {
+  const {byweekday, setByweekday} = props
+
+  const {weekday: dayNo, n: weekNo} =
+    byweekday && Array.isArray(byweekday) ? byweekday[0] : {weekday: null, n: null}
+
+  const handleChange = useCallback(
+    (event: React.FormEvent<HTMLSelectElement>) => {
+      const {value, name} = event.currentTarget
+
+      if (name == 'week') {
+        if (value == '') {
+          setByweekday(null)
+        } else {
+          const newWeekday = new Weekday(dayNo ? dayNo : 0, Number(value))
+          setByweekday([newWeekday])
+        }
+      } else if (name == 'day') {
+        const newWeekday = new Weekday(Number(value), weekNo ? weekNo : 1)
+        setByweekday([newWeekday])
+      }
+    },
+    [dayNo, setByweekday, weekNo],
+  )
+
+  return (
+    <Flex gap={2} align="center">
+      <Text style={{whiteSpace: 'nowrap'}}>On the</Text>
+      <Box>
+        <Select name="week" value={weekNo?.toString()} onChange={handleChange}>
+          <option value="">same day</option>
+          <option value="1">first</option>
+          <option value="2">second</option>
+          <option value="3">third</option>
+          <option value="4">fourth</option>
+          <option value="5">fifth</option>
+          <option value="-1">last</option>
+        </Select>
+      </Box>
+      {weekNo && (
+        <Box>
+          <Select name="day" value={dayNo ? dayNo : 1} onChange={handleChange}>
+            {DAYS.map((day: string, i: number) => {
+              const weekday = new Weekday(i)
+              return (
+                <option value={weekday.weekday} key={weekday.weekday}>
+                  {day}
+                </option>
+              )
+            })}
+          </Select>
+        </Box>
+      )}
+    </Flex>
+  )
+}

package/src/components/CustomRule/Weekly.tsx

@@ -0,0 +1,62 @@
+import {Button, Grid, Stack, Text} from '@sanity/ui'
+import React, {useCallback, useMemo} from 'react'
+import {type Options, Weekday} from 'rrule'
+
+import {DAYS} from '../../constants'
+
+interface WeeklyProps {
+  byweekday: Weekday
+  setByweekday: (value: Options['byweekday']) => void
+}
+
+export function Weekly(props: WeeklyProps) {
+  const {byweekday, setByweekday} = props
+
+  const currentWeekdays: number[] = useMemo(() => {
+    return Array.isArray(byweekday) ? byweekday.map((weekday) => weekday.weekday) : []
+  }, [byweekday])
+
+  const handleChange = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      const value = Number(event.currentTarget.value)
+
+      const index = currentWeekdays.indexOf(value)
+
+      if (index === -1) {
+        currentWeekdays.push(value)
+      } else {
+        currentWeekdays.splice(index, 1)
+      }
+
+      setByweekday(
+        currentWeekdays.length
+          ? currentWeekdays.map((currentWeekday) => new Weekday(Number(currentWeekday)))
+          : null,
+      )
+    },
+    [currentWeekdays, setByweekday],
+  )
+
+  return (
+    <Stack space={3}>
+      <Text style={{whiteSpace: 'nowrap'}}>Repeats on</Text>
+      <Grid columns={DAYS.length} gap={1}>
+        {DAYS.map((day: string, i: number) => {
+          const weekday = new Weekday(i)
+
+          return (
+            <Button
+              key={day}
+              mode={currentWeekdays && currentWeekdays.includes(i) ? 'default' : 'ghost'}
+              tone={currentWeekdays && currentWeekdays.includes(i) ? 'primary' : 'default'}
+              text={weekday.toString()}
+              value={i}
+              style={{cursor: 'pointer'}}
+              onClick={handleChange}
+            />
+          )
+        })}
+      </Grid>
+    </Stack>
+  )
+}

package/src/components/CustomRule/index.tsx

@@ -0,0 +1 @@
+export {CustomRule} from './CustomRule'

package/src/components/DateInputs/CommonDateTimeInput.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable no-nested-ternary */
+
+import {TextInput, useForwardedRef} from '@sanity/ui'
+import React, {useEffect} from 'react'
+
+import {DateTimeInput} from './base/DateTimeInput'
+import {ParseResult} from './types'
+
+export interface CommonDateTimeInputProps {
+  id: string
+  deserialize: (value: string) => ParseResult
+  formatInputValue: (date: Date) => string
+  onChange: (nextDate: string | null) => void
+  parseInputValue: (inputValue: string) => ParseResult
+  placeholder?: string
+  readOnly: boolean | undefined
+  selectTime?: boolean
+  serialize: (date: Date) => string
+  timeStep?: number
+  value: number | Date | string | undefined | null
+}
+
+const DEFAULT_PLACEHOLDER_TIME = new Date()
+
+export const CommonDateTimeInput = React.forwardRef(function CommonDateTimeInput(
+  props: CommonDateTimeInputProps,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  const {
+    id,
+    deserialize,
+    formatInputValue,
+    onChange,
+    parseInputValue,
+    placeholder,
+    readOnly,
+    selectTime,
+    serialize,
+    timeStep,
+    value,
+    ...restProps
+  } = props
+
+  const [localValue, setLocalValue] = React.useState<string | null>(null)
+
+  useEffect(() => {
+    setLocalValue(null)
+  }, [value])
+
+  const handleDatePickerInputChange = React.useCallback(
+    (event: any) => {
+      const nextInputValue = event.currentTarget.value
+      const result = nextInputValue === '' ? null : parseInputValue(nextInputValue)
+
+      if (result === null) {
+        onChange(null)
+
+        // If the field value is undefined and we are clearing the invalid value
+        // the above useEffect won't trigger, so we do some extra clean up here
+        if (typeof value === 'undefined' && localValue) {
+          setLocalValue(null)
+        }
+      } else if (result.isValid) {
+        onChange(serialize(result.date))
+      } else {
+        setLocalValue(nextInputValue)
+      }
+    },
+    [parseInputValue, onChange, value, localValue, serialize],
+  )
+
+  const handleDatePickerChange = React.useCallback(
+    (nextDate: Date | null) => {
+      onChange(nextDate ? serialize(nextDate) : null)
+    },
+    [serialize, onChange],
+  )
+
+  const forwardedRef = useForwardedRef(ref)
+
+  const parseResult = localValue
+    ? parseInputValue(localValue)
+    : value
+    ? deserialize(value as string)
+    : null
+
+  const inputValue = localValue
+    ? localValue
+    : parseResult?.isValid
+    ? formatInputValue(parseResult.date)
+    : (value as string)
+
+  return readOnly ? (
+    <TextInput value={inputValue} readOnly disabled={readOnly} />
+  ) : (
+    <DateTimeInput
+      {...restProps}
+      id={id}
+      selectTime={selectTime}
+      timeStep={timeStep}
+      placeholder={placeholder || `e.g. ${formatInputValue(DEFAULT_PLACEHOLDER_TIME)}`}
+      ref={forwardedRef}
+      value={parseResult?.date}
+      inputValue={inputValue || ''}
+      readOnly={Boolean(readOnly)}
+      onInputChange={handleDatePickerInputChange}
+      onChange={handleDatePickerChange}
+      customValidity={parseResult?.error}
+    />
+  )
+})

package/src/components/DateInputs/DateInput.tsx

@@ -0,0 +1,81 @@
+import {format, parse} from '@sanity/util/legacyDateFormat'
+import React, {useCallback} from 'react'
+
+import {CommonDateTimeInput} from './CommonDateTimeInput'
+
+interface ParsedOptions {
+  dateFormat: string
+  calendarTodayLabel: string
+}
+
+interface SchemaOptions {
+  dateFormat?: string
+  calendarTodayLabel?: string
+}
+
+type DateInputProps = {
+  id: string
+  onChange: (date: string | null) => void
+  disabled?: boolean
+  value: number | Date | null
+  type: {
+    name: string
+    title: string
+    description?: string
+    options?: SchemaOptions
+    placeholder?: string
+  }
+}
+
+// This is the format dates are stored on
+const VALUE_FORMAT = 'YYYY-MM-DD'
+// default to how they are stored
+const DEFAULT_DATE_FORMAT = VALUE_FORMAT
+
+function parseOptions(options: SchemaOptions = {}): ParsedOptions {
+  return {
+    dateFormat: options.dateFormat || DEFAULT_DATE_FORMAT,
+    calendarTodayLabel: options.calendarTodayLabel || 'Today',
+  }
+}
+
+const deserialize = (value: string) => parse(value, VALUE_FORMAT)
+const serialize = (date: Date) => format(date, VALUE_FORMAT)
+
+/**
+ * @hidden
+ * @beta */
+export function DateInput(props: DateInputProps) {
+  const {id, onChange, type, value, disabled, ...rest} = props
+
+  const {dateFormat} = parseOptions(type.options)
+
+  const handleChange = useCallback(
+    (nextDate: string | null) => {
+      onChange(nextDate)
+    },
+    [onChange],
+  )
+
+  const formatInputValue = useCallback((date: Date) => format(date, dateFormat), [dateFormat])
+
+  const parseInputValue = useCallback(
+    (inputValue: string) => parse(inputValue, dateFormat),
+    [dateFormat],
+  )
+
+  return (
+    <CommonDateTimeInput
+      id={id}
+      {...rest}
+      deserialize={deserialize}
+      formatInputValue={formatInputValue}
+      onChange={handleChange}
+      parseInputValue={parseInputValue}
+      readOnly={disabled}
+      selectTime={false}
+      serialize={serialize}
+      value={value}
+    />
+  )
+}