feat: add preview component (#22)

src/components/RecurringDatesPreview.tsx

@@ -0,0 +1,55 @@
+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 type {ObjectSchemaType, PreviewProps} from 'sanity'
+
+import type {PluginConfig, RecurringDate, WithRequiredProperty} from '../types'
+
+type CastPreviewProps = PreviewProps &
+  RecurringDate & {
+    pluginConfig: WithRequiredProperty<PluginConfig, 'defaultRecurrences'>
+  }
+
+type RecurringDateObjectSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: PluginConfig
+}
+
+export function RecurringDatesPreview(props: CastPreviewProps): React.JSX.Element {
+  const {startDate, endDate, rrule, schemaType, pluginConfig} = props
+  const options: RecurringDateObjectSchemaType = schemaType?.options
+
+  const {dateTimeOptions, dateOnly} = {
+    ...pluginConfig,
+    ...options,
+  }
+
+  const rule = rrule && rrulestr(rrule)
+
+  const dateFormat = dateTimeOptions?.dateFormat || DEFAULT_DATE_FORMAT
+  const timeFormat = dateTimeOptions?.timeFormat || DEFAULT_TIME_FORMAT
+
+  const start = startDate ? new Date(startDate) : undefined
+  const end = endDate ? new Date(endDate) : undefined
+  const sameDay = start && end && start.toDateString() === end.toDateString()
+
+  let title = 'No start date'
+  if (dateOnly) {
+    title = start ? format(start, dateFormat) : 'No start date'
+    if (end && !sameDay) {
+      title += ` - ${format(end, dateFormat)}`
+    }
+  } else {
+    title = start ? format(start, `${dateFormat} ${timeFormat}`) : 'No start date'
+    if (end) {
+      title += ` - ${format(end, sameDay ? timeFormat : `${dateFormat} ${timeFormat}`)}`
+    }
+  }
+
+  const previewProps = {
+    title,
+    subtitle: rule && upperFirst(rule.toText()),
+  }
+
+  return props.renderDefault({...previewProps, ...props})
+}

src/schema/recurringDates.tsx

@@ -1,6 +1,8 @@
+import {CalendarIcon} from '@sanity/icons'
 import {defineField, SchemaTypeDefinition} from 'sanity'
 
 import {RecurringDates} from '../components/RecurringDate'
+import {RecurringDatesPreview} from '../components/RecurringDatesPreview'
 import {PluginConfig, WithRequiredProperty} from '../types'
 
 export default (
@@ -12,6 +14,7 @@ export default (
     name: 'recurringDates',
     title: 'Dates',
     type: 'object',
+    icon: CalendarIcon,
     fields: [
       defineField({
         title: 'Start Date',
@@ -43,6 +46,14 @@ export default (
     ],
     components: {
       input: (props) => RecurringDates({...props, pluginConfig: config}),
+      preview: (props) => RecurringDatesPreview({...props, pluginConfig: config}),
+    },
+    preview: {
+      select: {
+        startDate: 'startDate',
+        endDate: 'endDate',
+        rrule: 'rrule',
+      },
     },
   })
 }

src/types.ts

@@ -32,7 +32,7 @@ declare module 'sanity' {
 }
 
 export interface RecurringDate {
-  rrule: string
-  startDate: string
-  endDate: string
+  rrule?: string
+  startDate?: string
+  endDate?: string
 }