[desk-tool] add datetime diff component

packages/@sanity/desk-tool/sanity.json

@@ -48,6 +48,10 @@
     {
       "implements": "part:@sanity/base/diff-resolver",
       "path": "diffs/portableTextDiffResolver"
+    },
+    {
+      "implements": "part:@sanity/base/diff-resolver",
+      "path": "diffs/diffResolver"
     }
   ]
 }

packages/@sanity/desk-tool/src/diffs/datetime/DatetimeFieldDiff.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+  DiffComponent,
+  // DatetimeDiff,
+  DiffAnnotationTooltip,
+  useDiffAnnotationColor
+} from '@sanity/field/diff'
+import styles from '../shared/BlockSegmentStyles.css'
+import {getDateFormat} from './helpers'
+import {DiffLayout} from '../shared'
+
+// TODO: fix DatetimeDiff
+
+export const DatetimeFieldDiff /* : DiffComponent<DatetimeDiff> */ = ({diff, schemaType}) => {
+  const {fromValue, toValue} = diff
+  const color = useDiffAnnotationColor(diff, [])
+  const style = color ? {background: color.background, color: color.text} : {}
+  const fromDate = getDateFormat(fromValue, schemaType.name, schemaType.options)
+  const toDate = getDateFormat(toValue, schemaType.name, schemaType.options)
+  return (
+    <DiffAnnotationTooltip className={styles.root} diff={diff}>
+      <DiffLayout
+        renderFrom={
+          fromValue !== undefined && (
+            <del className={`${styles.segment} ${styles.add}`} style={style}>
+              {fromDate}
+            </del>
+          )
+        }
+        renderTo={
+          toValue && (
+            <ins className={`${styles.segment} ${styles.remove}`} style={style}>
+              {toDate}
+            </ins>
+          )
+        }
+      />
+    </DiffAnnotationTooltip>
+  )
+}

packages/@sanity/desk-tool/src/diffs/datetime/helpers.ts

@@ -0,0 +1,19 @@
+import formatDate from 'date-fns/format'
+
+export function getDateFormat(value, type = '', options){
+  let format = 'YYYY-MM-DD'
+  if (options && options.dateFormat) {
+    format = options.dateFormat
+  }
+  if (type === 'date') {
+    // If the type is date only
+    return formatDate(value, format)
+  }
+  // If the type is datetime
+  if (options && options.timeFormat) {
+    format += ` ${options.timeFormat}`
+  } else {
+    format += ' HH:mm'
+  }
+  return formatDate(value, format)
+}

packages/@sanity/desk-tool/src/diffs/datetime/index.ts

@@ -0,0 +1 @@
+export * from './DatetimeFieldDiff'

packages/@sanity/desk-tool/src/diffs/diffResolver.ts

@@ -0,0 +1,12 @@
+import {DiffComponentResolver} from '@sanity/field/diff'
+import {DatetimeFieldDiff} from './datetime'
+
+const diffResolver: DiffComponentResolver = function diffResolver({schemaType}) {
+  // datetime or date
+  if (['datetime', 'date'].includes(schemaType.name)) {
+    return DatetimeFieldDiff
+  }
+  return undefined
+}
+
+export default diffResolver