@sanity/rich-date-input 3.0.7 → 4.0.0

package/src/components/RelativeDateTimePicker.tsx

@@ -1,68 +0,0 @@
-import {formatInTimeZone, getTimezoneOffset, zonedTimeToUtc} from 'date-fns-tz'
-import {type ReactNode, useCallback} from 'react'
-import {DateTimeInput, FieldProps, FormPatch, PatchEvent, set, unset} from 'sanity'
-
-import {RichDate} from '../types'
-import {getConstructedUTCDate, unlocalizeDateTime} from '../utils'
-
-interface RelativeDateTimePickerProps extends Omit<FieldProps, 'renderDefault'> {
-  dateValue?: RichDate
-}
-export const RelativeDateTimePicker = (props: RelativeDateTimePickerProps): ReactNode => {
-  const {
-    dateValue: value,
-    inputProps: {onChange},
-  } = props
-
-  const handleDateChange = useCallback(
-    (patch: FormPatch | PatchEvent | FormPatch[]) => {
-      const timezone = value?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone
-      const newDatetime = (patch as unknown as {value: string})?.value
-      if (!newDatetime || !('type' in patch) || patch.type !== 'set') {
-        onChange(unset())
-        return
-      }
-
-      /* get what time the user "meant" to set without tz info
-       * right now, newDatetime is the time the user set plus
-       * their current offset, not the timezone offset
-       */
-      const desiredDateTime = unlocalizeDateTime(
-        newDatetime,
-        Intl.DateTimeFormat().resolvedOptions().timeZone,
-      )
-
-      const newUtcDateObject = zonedTimeToUtc(desiredDateTime, timezone)
-      // offset may have changed based on DST, capture that
-      const newOffset = getTimezoneOffset(timezone, newUtcDateObject) / 60 / 1000
-      const localDate = formatInTimeZone(newUtcDateObject, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX")
-
-      const patches = []
-
-      patches.push(set(newUtcDateObject.toISOString(), ['utc']))
-      patches.push(set(localDate, ['local']))
-
-      if (!value?.timezone) {
-        patches.push(set(timezone, ['timezone']))
-      }
-
-      if (value?.offset !== newOffset) {
-        patches.push(set(newOffset, ['offset']))
-      }
-
-      onChange(patches)
-    },
-    [onChange, value],
-  )
-
-  // Dynamically calculate the offset for the actual event date to handle DST correctly
-  const displayOffset =
-    value?.utc && value?.timezone
-      ? getTimezoneOffset(value.timezone, new Date(value.utc)) / 60 / 1000
-      : (value?.offset ?? 0)
-
-  const dateToDisplay = value?.utc ? getConstructedUTCDate(value.utc, displayOffset) : ''
-
-  // @ts-expect-error -- slight mismatch in elementProps and renderDefault, but should line up in practice
-  return <DateTimeInput {...props} onChange={handleDateChange} value={dateToDisplay} />
-}

package/src/components/RichDateInput.tsx

@@ -1,61 +0,0 @@
-import {Box, Dialog, Flex} from '@sanity/ui'
-import {type ReactNode, useCallback, useState} from 'react'
-import {ObjectInputMember, ObjectInputProps} from 'sanity'
-
-import {RichDate} from '../types'
-import {RelativeDateTimePicker} from './RelativeDateTimePicker'
-import {TimezoneButton} from './TimezoneButton'
-import {TimezoneSelector} from './TimezoneSelector'
-
-export const RichDateInput = (props: ObjectInputProps): ReactNode => {
-  const {onChange, value, members, schemaType} = props
-  const {options} = schemaType
-  const localMember = members.find((member) => member.kind === 'field' && member.name === 'local')
-  const timezoneMember = members.find(
-    (member) => member.kind === 'field' && member.name === 'timezone',
-  )
-  const [timezoneSelectorOpen, setTimezoneSelectorOpen] = useState(false)
-  const onClose = useCallback(() => setTimezoneSelectorOpen(false), [])
-  const onOpen = useCallback(() => setTimezoneSelectorOpen(true), [])
-
-  return (
-    <>
-      <Flex>
-        <Box flex={[1, 2, 4]}>
-          {localMember && (
-            <ObjectInputMember
-              {...props}
-              member={localMember}
-              // eslint-disable-next-line react/jsx-no-bind
-              renderField={(renderFieldProps) => (
-                <RelativeDateTimePicker
-                  {...renderFieldProps}
-                  dateValue={value as RichDate}
-                  schemaType={{...renderFieldProps.schemaType, options}}
-                  inputProps={{...renderFieldProps.inputProps, onChange: onChange}}
-                />
-              )}
-            />
-          )}
-        </Box>
-        <Box flex={[1]} marginLeft={[2, 2, 3, 4]} marginTop={2}>
-          {timezoneMember && (
-            <ObjectInputMember
-              {...props}
-              member={timezoneMember}
-              // eslint-disable-next-line react/jsx-no-bind
-              renderInput={() => (
-                <TimezoneButton onClick={onOpen} timezone={value?.timezone ?? ''} />
-              )}
-            />
-          )}
-        </Box>
-      </Flex>
-      {timezoneSelectorOpen && (
-        <Dialog onClose={onClose} header="Select a timezone" id="timezone-select" width={1}>
-          <TimezoneSelector onChange={onChange} value={value as RichDate} />
-        </Dialog>
-      )}
-    </>
-  )
-}

package/src/components/TimezoneButton.tsx

@@ -1,34 +0,0 @@
-import {EarthAmericasIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
-import {type ReactNode} from 'react'
-
-import {allTimezones} from '../utils'
-
-interface TimezoneButtonProps {
-  onClick: () => void
-  timezone: string
-}
-
-export const TimezoneButton = (props: TimezoneButtonProps): ReactNode => {
-  const {onClick, timezone} = props
-  const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-
-  const label =
-    allTimezones.find((tz) => tz.name === timezone)?.abbreviation ??
-    allTimezones.find((tz) => tz.group.includes(timezone))?.abbreviation ??
-    allTimezones.find((tz) => tz.name === currentTimezone)?.abbreviation ??
-    allTimezones.find((tz) => tz.group.includes(currentTimezone))?.abbreviation
-
-  return (
-    <Button
-      fontSize={1}
-      style={{width: '100%'}}
-      justify={'flex-start'}
-      icon={EarthAmericasIcon}
-      mode="ghost"
-      onClick={onClick}
-      text={`${label}`}
-      aria-label="Select a timezone"
-    />
-  )
-}

package/src/components/TimezoneSelector.tsx

@@ -1,89 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Autocomplete, Box, Card, Text} from '@sanity/ui'
-import {formatInTimeZone, getTimezoneOffset, zonedTimeToUtc} from 'date-fns-tz'
-import {type ReactNode, useCallback} from 'react'
-import {ObjectInputProps, set} from 'sanity'
-
-import {NormalizedTimeZone, RichDate} from '../types'
-import {allTimezones, unlocalizeDateTime} from '../utils'
-
-interface TimezoneSelectorProps {
-  onChange: Pick<ObjectInputProps, 'onChange'>['onChange']
-  value?: RichDate
-}
-
-export const TimezoneSelector = (props: TimezoneSelectorProps): ReactNode => {
-  const {onChange, value} = props
-  const currentTz = allTimezones.find((tz) => tz.name === value?.timezone)
-  const userTzName = Intl.DateTimeFormat().resolvedOptions().timeZone
-  const userTz = (allTimezones.find((tz) => tz.name === userTzName) ??
-    allTimezones.find((tz) => tz.group.includes(userTzName)))!
-
-  const handleTimezoneChange = useCallback(
-    (selectedTz: string) => {
-      const newTimezone =
-        allTimezones.find((tz) => tz.value === selectedTz) ?? (userTz as NormalizedTimeZone)
-
-      const timezonePatch = set(newTimezone.name, ['timezone'])
-      const patches = [timezonePatch]
-
-      // then, recalculate UTC and local from "old" time with the new offset
-      if (value?.utc) {
-        const desiredDateTime = unlocalizeDateTime(value.utc, value.timezone)
-        const newUtcDateObject = zonedTimeToUtc(desiredDateTime, newTimezone.name)
-        const newOffset = getTimezoneOffset(newTimezone.name, newUtcDateObject) / 60 / 1000
-        const newLocalDate = formatInTimeZone(
-          newUtcDateObject.toISOString(),
-          newTimezone.name,
-          "yyyy-MM-dd'T'HH:mm:ssXXX",
-        )
-        patches.push(set(newUtcDateObject.toISOString(), ['utc']))
-        patches.push(set(newLocalDate, ['local']))
-        patches.push(set(newOffset, ['offset']))
-      }
-      onChange(patches)
-    },
-    [onChange, userTz, value],
-  )
-
-  return (
-    // taken from Scheduled Publishing, again!
-    // https://github.com/sanity-io/sanity-plugin-scheduled-publishing/blob/bb282e3df9a8a73df37fab8ee1fdd0e2430745be/src/components/dialogs/DialogTimeZone.tsx#L100
-    <Box padding={4}>
-      <Autocomplete
-        fontSize={2}
-        icon={SearchIcon}
-        id="timezone"
-        onChange={handleTimezoneChange}
-        openButton
-        options={allTimezones}
-        padding={4}
-        placeholder="Search for a city or time zone"
-        popover={{
-          boundaryElement: document.querySelector('body'),
-          constrainSize: true,
-          placement: 'bottom-start',
-        }}
-        // eslint-disable-next-line react/jsx-no-bind
-        renderOption={(option) => {
-          return (
-            <Card as="button" padding={3}>
-              <Text size={1} textOverflow="ellipsis">
-                <span>GMT{option.offset}</span>
-                <span style={{fontWeight: 500, marginLeft: '1em'}}>{option.alternativeName}</span>
-                <span style={{marginLeft: '1em'}}>{option.mainCities}</span>
-              </Text>
-            </Card>
-          )
-        }}
-        // eslint-disable-next-line react/jsx-no-bind
-        renderValue={(_, option) => {
-          if (!option) return ''
-          return `${option.alternativeName} (${option.namePretty})`
-        }}
-        tabIndex={-1}
-        value={currentTz?.value ?? userTz.value}
-      />
-    </Box>
-  )
-}

package/src/index.ts

@@ -1,13 +0,0 @@
-import {definePlugin} from 'sanity'
-
-import {RichDateDefinition, richDateSchema, RichDateSchemaType} from './schema'
-import {RichDate} from './types'
-
-export const richDate = definePlugin({
-  name: 'v3-rich-date-input',
-  schema: {
-    types: [richDateSchema],
-  },
-})
-
-export type {RichDate, RichDateDefinition, RichDateSchemaType}

package/src/schema.ts

@@ -1,62 +0,0 @@
-import {
-  DatetimeDefinition,
-  defineField,
-  defineType,
-  ObjectDefinition,
-  ObjectSchemaType,
-} from 'sanity'
-
-import {RichDateInput} from './components/RichDateInput'
-
-const richDateTypeName = 'richDate' as const
-
-export type RichDateSchemaType = Omit<ObjectSchemaType, 'options'> & {
-  options?: DatetimeDefinition['options']
-}
-
-/**
- *  @public
- */
-export interface RichDateDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {
-  type: typeof richDateTypeName
-  options?: DatetimeDefinition['options']
-}
-
-declare module 'sanity' {
-  //allows the custom input to be valid for the schema def
-  export interface IntrinsicDefinitions {
-    richDate: RichDateDefinition
-  }
-}
-
-export const richDateSchema = defineType({
-  name: richDateTypeName,
-  title: 'Rich Date',
-  type: 'object',
-  fields: [
-    defineField({
-      name: 'local',
-      title: 'Local',
-      type: 'string',
-    }),
-    defineField({
-      name: 'utc',
-      title: 'UTC',
-      type: 'string',
-    }),
-    defineField({
-      name: 'timezone',
-      title: 'Timezone',
-      type: 'string',
-    }),
-    defineField({
-      name: 'offset',
-      title: 'Offset',
-      type: 'number',
-    }),
-  ],
-
-  components: {
-    input: RichDateInput,
-  },
-})

package/src/types/index.ts

@@ -1,18 +0,0 @@
-export interface RichDate {
-  local: string
-  utc: string
-  timezone: string
-  offset: number
-}
-
-export interface NormalizedTimeZone {
-  abbreviation: string
-  alternativeName: string
-  mainCities: string
-  name: string
-  namePretty: string
-  offset: string
-  value: string
-  currentTimeOffsetInMinutes: number
-  group: string[]
-}

package/src/utils/index.ts

@@ -1,41 +0,0 @@
-import {getTimeZones} from '@vvo/tzdb'
-import {formatInTimeZone} from 'date-fns-tz'
-
-import {NormalizedTimeZone} from '../types'
-
-export const unlocalizeDateTime = (datetime: string, timezone: string): string => {
-  return formatInTimeZone(datetime, timezone, 'yyyy-MM-dd HH:mm:ss')
-}
-
-/* We have to "fake" a UTC date to make the datepicker look "right"
- * to the user. For example, if someone sets 7:00AM PST, which is 3PM UTC
- * and I am on the east coast, I want to have 12:00PM UTC, which will look like 7:00AM to me
- * In other words, UTC minus 3 hours, or (UTC(my offset - their offset))
- * this is purely cosmetic and should not be saved at all
- */
-export const getConstructedUTCDate = (utc: string, offset: number): string => {
-  const date = new Date(utc)
-  const currentOffset = date.getTimezoneOffset() * -1
-  const diff = currentOffset - offset
-  const fakeUTCDate = new Date(date.getTime() - diff * 60 * 1000)
-  return fakeUTCDate.toISOString()
-}
-
-//keep some consistency with scheduled publishing
-//https://github.com/sanity-io/sanity-plugin-scheduled-publishing/blob/bb282e3df9a8a73df37fab8ee1fdd0e2430745be/src/hooks/useTimeZone.tsx#L17
-export const allTimezones = getTimeZones().map((tz) => {
-  return {
-    abbreviation: tz.abbreviation,
-    alternativeName: tz.alternativeName,
-    mainCities: tz.mainCities.join(', '),
-    // Main time zone name 'Africa/Dar_es_Salaam'
-    name: tz.name,
-    // Time zone name with underscores removed
-    namePretty: tz.name.replaceAll('_', ' '),
-    offset: tz.currentTimeFormat.split(' ')[0],
-    // all searchable text - this is transformed before being rendered in `<AutoComplete>`
-    value: `${tz.currentTimeFormat} ${tz.abbreviation} ${tz.name}`,
-    currentTimeOffsetInMinutes: tz.currentTimeOffsetInMinutes,
-    group: tz.group,
-  } as NormalizedTimeZone
-})

package/v2-incompatible.js

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