[types] Use @sanity/types for Marker, Reference types

packages/@sanity/components/src/fieldsets/DefaultFieldset.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 
-import {Path} from '@sanity/types'
+import {Marker, Path} from '@sanity/types'
 import {FieldPresence, FormFieldPresence} from '@sanity/base/presence'
 import defaultStyles from 'part:@sanity/components/fieldsets/default-style'
 import React from 'react'
@@ -9,7 +9,6 @@ import ValidationStatus from 'part:@sanity/components/validation/status'
 import {FOCUS_TERMINATOR} from '@sanity/util/paths'
 import DefaultLabel from 'part:@sanity/components/labels/default'
 import {ChangeIndicator} from '@sanity/base/lib/change-indicators'
-import {Marker} from '../types'
 import FieldStatus from './FieldStatus'
 
 interface FieldsetProps {

packages/@sanity/components/src/formfields/DefaultFormField.tsx

@@ -1,12 +1,12 @@
 import {FieldPresence, FormFieldPresence} from '@sanity/base/presence'
+import {Marker} from '@sanity/types'
+import {ChangeIndicator} from '@sanity/base/lib/change-indicators'
 import classNames from 'classnames'
 import styles from 'part:@sanity/components/formfields/default-style'
 import DefaultLabel from 'part:@sanity/components/labels/default'
 import ValidationStatus from 'part:@sanity/components/validation/status'
 import React from 'react'
 import FieldStatus from '../fieldsets/FieldStatus'
-import {ChangeIndicator} from '@sanity/base/lib/change-indicators'
-import {Marker} from '../types'
 
 interface DefaultFormFieldProps {
   label?: string

packages/@sanity/components/src/formfields/stories/default.tsx

@@ -1,28 +1,33 @@
+import React from 'react'
 import Chance from 'chance'
 import {range} from 'lodash'
+import {ValidationMarker} from '@sanity/types'
 import DefaultFormField from 'part:@sanity/components/formfields/default'
 import DefaultTextInput from 'part:@sanity/components/textinputs/default'
 import {number, text, boolean} from 'part:@sanity/storybook/addons/knobs'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
 import {CenteredContainer} from 'part:@sanity/storybook/components'
-import React from 'react'
 
 const chance = new Chance()
 
-const mockValidationMarkers = (level = 'error', length = 5) => {
-  return range(length).map((_, markerIndex) => {
-    return {
-      type: 'validation',
-      level,
-      path: [`field_${markerIndex}`],
-      item: {
-        paths: [],
-        path: ['title'],
-        message: chance.sentence(),
-        name: 'ValidationError'
+const mockValidationMarkers = (
+  level: ValidationMarker['level'] = 'error',
+  length = 5
+): ValidationMarker[] => {
+  return range(length).map((_, markerIndex) => ({
+    type: 'validation',
+    level,
+    path: [`field_${markerIndex}`],
+    item: {
+      paths: [],
+      path: ['title'],
+      message: chance.sentence(),
+      name: 'ValidationError',
+      cloneWithMessage() {
+        throw new Error('nope')
       }
     }
-  })
+  }))
 }
 
 export function DefaultFormFieldStory() {

packages/@sanity/components/src/textinputs/types.ts

@@ -1,5 +1,4 @@
-import {Path} from '@sanity/types'
-import {Marker} from '../types'
+import {Path, Marker} from '@sanity/types'
 
 export interface DefaultTextInputProps extends React.HTMLProps<HTMLInputElement> {
   markers?: Marker[]

packages/@sanity/components/src/toggles/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef} from 'react'
 import {useId} from '@reach/auto-id'
-import {Marker} from '../types'
+import {Marker} from '@sanity/types'
 import styles from './Checkbox.css'
 import sharedStyles from './shared.css'
 

packages/@sanity/components/src/toggles/Switch.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef} from 'react'
 import {useId} from '@reach/auto-id'
-import {Marker} from '../types'
+import {Marker} from '@sanity/types'
 import styles from './Switch.css'
 import sharedStyles from './shared.css'
 

packages/@sanity/components/src/types.ts

@@ -1,16 +1,5 @@
-import {Path} from '@sanity/types'
-import {Placement} from '@popperjs/core'
-
 // Re-export Popper.js's `Placement` type
-export {Placement}
-
-// @todo: remove when @sanity/types has implemented this
-export interface Marker {
-  path: Path
-  type: string
-  level?: string
-  item: {message: string}
-}
+export {Placement} from '@popperjs/core'
 
 export * from './autocomplete/types'
 export * from './buttons/types'

packages/@sanity/components/src/validation/ValidationList.tsx

@@ -1,6 +1,11 @@
 import React, {useCallback} from 'react'
-import {ObjectSchemaType, Path} from '@sanity/types'
-import {Marker} from '../types'
+import {
+  ObjectSchemaType,
+  Path,
+  Marker,
+  isValidationErrorMarker,
+  isValidationWarningMarker
+} from '@sanity/types'
 import ValidationListItem from './ValidationListItem'
 
 import styles from './ValidationList.css'
@@ -26,9 +31,8 @@ function ValidationList(props: ValidationListProps) {
     // showLink,
   } = props
 
-  const validation = markers.filter(marker => marker.type === 'validation')
-  const errors = validation.filter(marker => marker.level === 'error')
-  const warnings = validation.filter(marker => marker.level === 'warning')
+  const errors = markers.filter(isValidationErrorMarker)
+  const warnings = markers.filter(isValidationWarningMarker)
 
   const handleClick = useCallback(
     (path: Path = []) => {

packages/@sanity/components/src/validation/ValidationListItem.tsx

@@ -1,8 +1,7 @@
-import {Path} from '@sanity/types'
+import {Marker, Path} from '@sanity/types'
 import classNames from 'classnames'
 import React, {useRef, useEffect, useCallback} from 'react'
 import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
-import {Marker} from '../types'
 
 import styles from './ValidationListItem.css'
 

packages/@sanity/components/src/validation/ValidationStatus.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
+import {
+  isValidationErrorMarker,
+  isValidationMarker,
+  isValidationWarningMarker,
+  Marker
+} from '@sanity/types'
 import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
-// import CheckIcon from 'part:@sanity/base/check-icon'
 import Button from 'part:@sanity/components/buttons/default'
 import {Tooltip} from 'part:@sanity/components/tooltip'
-import {Marker} from '../types'
 import ValidationList from './ValidationList'
 
 import styles from './ValidationStatus.css'
@@ -16,14 +20,14 @@ interface ValidationStatusProps {
 
 function ValidationStatus(props: ValidationStatusProps) {
   const {markers = [], showSummary = false, hideTooltip = false} = props
-  const validationMarkers = markers.filter(marker => marker.type === 'validation')
+  const validationMarkers = markers.filter(isValidationMarker)
 
   if (validationMarkers.length === 0) {
     return null
   }
 
-  const errorMarkers = validationMarkers.filter(marker => marker.level === 'error')
-  const warningMarkers = validationMarkers.filter(marker => marker.level === 'warning')
+  const errorMarkers = validationMarkers.filter(isValidationErrorMarker)
+  const warningMarkers = validationMarkers.filter(isValidationWarningMarker)
 
   const errorsStr = `error${errorMarkers.length === 1 ? '' : 's'}`
   const warningsStr = `warning${warningMarkers.length === 1 ? '' : 's'}`

packages/@sanity/components/src/validation/stories/list.tsx

@@ -1,30 +1,31 @@
+import React from 'react'
 import Chance from 'chance'
 import {range} from 'lodash'
+import {ValidationMarker} from '@sanity/types'
 import ValidationStatus from 'part:@sanity/components/validation/status'
 import ValidationList from 'part:@sanity/components/validation/list'
 import {action} from 'part:@sanity/storybook/addons/actions'
 import {boolean, select} from 'part:@sanity/storybook/addons/knobs'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
 import {CenteredContainer} from 'part:@sanity/storybook/components'
-import React from 'react'
-import {Marker} from '../../types'
 
 const chance = new Chance()
 
-const mockMarkers = (length = 5): Marker[] => {
-  return range(length).map((marker, i) => {
-    return {
-      type: 'validation',
-      level: 'error',
-      path: [`test_${i}`],
-      item: {
-        paths: [],
-        path: ['title'],
-        message: chance.sentence(),
-        name: 'ValidationError'
+const mockMarkers = (length = 5): ValidationMarker[] => {
+  return range(length).map((marker, i) => ({
+    type: 'validation',
+    level: 'error',
+    path: [`test_${i}`],
+    item: {
+      paths: [],
+      path: ['title'],
+      message: chance.sentence(),
+      name: 'ValidationError',
+      cloneWithMessage() {
+        throw new Error('nope')
       }
     }
-  })
+  }))
 }
 
 export function ListStory() {

packages/@sanity/components/src/validation/stories/listItem.tsx

@@ -1,12 +1,12 @@
+import {ValidationMarker} from '@sanity/types'
 import {action} from 'part:@sanity/storybook/addons/actions'
 import {boolean, text} from 'part:@sanity/storybook/addons/knobs'
 import {CenteredContainer} from 'part:@sanity/storybook/components'
 import React from 'react'
 import ValidationListItem from '../ValidationListItem'
-import {Marker} from '../../types'
 
 export function ListItemStory() {
-  const marker: Marker = {
+  const marker: ValidationMarker = {
     type: 'validation',
     level: 'error',
     path: ['test'],
@@ -15,7 +15,11 @@ export function ListItemStory() {
         'Message',
         'The password must be at least 20 characters, have 5 special characters, minimum 5 lowercase and 2+3 uppercase letters, at least 5 numbers (sequences must not be a part if PI), 2 greek symbols and 5 emojis. Also not use your pet name or birthday of anyone in your family or city.',
         'props'
-      )
+      ) as string,
+      paths: [],
+      cloneWithMessage() {
+        throw new Error('nope')
+      }
     }
   }
 

packages/@sanity/components/src/validation/stories/status.tsx

@@ -1,21 +1,25 @@
+import React from 'react'
 import Chance from 'chance'
 import {range} from 'lodash'
+import {ValidationMarker} from '@sanity/types'
 import ValidationStatus from 'part:@sanity/components/validation/status'
 import {boolean} from 'part:@sanity/storybook/addons/knobs'
 import {CenteredContainer} from 'part:@sanity/storybook/components'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
-import React from 'react'
-import {Marker} from '../../types'
 
 const chance = new Chance()
 
-const mockMarkers = (length = 5): Marker[] =>
+const mockMarkers = (length = 5): ValidationMarker[] =>
   range(length).map((_, i) => ({
     type: 'validation',
     level: 'error',
     path: [`test_${i}`],
     item: {
-      message: chance.sentence()
+      message: chance.sentence() as string,
+      paths: [],
+      cloneWithMessage() {
+        throw new Error('nope')
+      }
     }
   }))
 

packages/@sanity/desk-tool/src/panes/documentPane/documentPaneProvider.tsx

@@ -44,7 +44,7 @@ interface Props {
 }
 
 // eslint-disable-next-line complexity
-export const DocumentPaneProvider = withInitialValue((props: Props) => {
+export const DocumentPaneProvider = withInitialValue(function DocumentPaneProvider(props: Props) {
   const documentIdRaw = props.options.id
   const documentId = getPublishedId(documentIdRaw)
   const documentTypeName = props.options.type

packages/@sanity/form-builder/src/FormBuilderInput.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable complexity */
 import React from 'react'
 import shallowEquals from 'shallow-equals'
-import {Path, PathSegment} from '@sanity/types'
+import {Marker, Path, PathSegment} from '@sanity/types'
 import * as PathUtils from '@sanity/util/paths'
 import generateHelpUrl from '@sanity/generate-help-url'
 import {FormFieldPresence, FormFieldPresenceContext} from '@sanity/base/presence'
 import PatchEvent from './PatchEvent'
-import {Type, Marker} from './typedefs'
+import {Type} from './typedefs'
 import {emptyArray, emptyObject} from './utils/empty'
 import {ChangeIndicatorProvider} from '@sanity/base/lib/change-indicators'
 

packages/@sanity/form-builder/src/inputs/ArrayInput/ArrayInput.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import {map} from 'rxjs/operators'
 import {isPlainObject, get} from 'lodash'
+import {Marker, Path} from '@sanity/types'
 import {FOCUS_TERMINATOR, startsWith} from '@sanity/util/paths'
 import formBuilderConfig from 'config:@sanity/form-builder'
 import ArrayFunctions from 'part:@sanity/form-builder/input/array/functions'
 import DefaultButton from 'part:@sanity/components/buttons/default'
 import Fieldset from 'part:@sanity/components/fieldsets/default'
 import {ResolvedUploader, Uploader} from '../../sanity/uploads/typedefs'
-import {Marker, Type} from '../../typedefs'
-import {Path} from '@sanity/types'
+import {Type} from '../../typedefs'
 import {Subscription} from '../../typedefs/observable'
 import {resolveTypeName} from '../../utils/resolveTypeName'
 import UploadTargetFieldset from '../../utils/UploadTargetFieldset'

packages/@sanity/form-builder/src/inputs/ArrayInput/ItemValue.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable complexity */
 import React from 'react'
+import {isValidationMarker, Marker, Path} from '@sanity/types'
+import {ChangeIndicatorScope} from '@sanity/base/lib/change-indicators'
 import LinkIcon from 'part:@sanity/base/link-icon'
 import {FormFieldPresence, FieldPresence, PresenceOverlay} from '@sanity/base/presence'
 import Button from 'part:@sanity/components/buttons/default'
@@ -17,12 +19,10 @@ import {FormBuilderInput} from '../../FormBuilderInput'
 import PatchEvent from '../../PatchEvent'
 import Preview from '../../Preview'
 import {resolveTypeName} from '../../utils/resolveTypeName'
-import {Path} from '@sanity/types'
-import {Marker, Type} from '../../typedefs'
+import {Type} from '../../typedefs'
 import ConfirmButton from './ConfirmButton'
 import styles from './styles/ItemValue.css'
 import {ArrayType, ItemValue} from './typedefs'
-import {ChangeIndicatorScope} from '@sanity/base/lib/change-indicators'
 import InvalidItem from './InvalidItem'
 
 const DragHandle = createDragHandle(() => (
@@ -254,7 +254,7 @@ export default class RenderItemValue extends React.PureComponent<Props> {
     const isGrid = options.layout === 'grid'
     const isSortable = !readOnly && !type.readOnly && options.sortable !== false
     const previewLayout = isGrid ? 'media' : 'default'
-    const validation = markers.filter(marker => marker.type === 'validation')
+    const validation = markers.filter(isValidationMarker)
     const scopedValidation = validation
       .map(marker => {
         if (marker.path.length <= 1) {

packages/@sanity/form-builder/src/inputs/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx

@@ -4,12 +4,12 @@ import {Item as DefaultItem, List as DefaultList} from 'part:@sanity/components/
 import {Item as SortableItem, List as SortableList} from 'part:@sanity/components/lists/sortable'
 import ArrayFunctions from 'part:@sanity/form-builder/input/array/functions'
 import Fieldset from 'part:@sanity/components/fieldsets/default'
+import {Marker, Path} from '@sanity/types'
 import {startsWith} from '@sanity/util/paths'
 import DefaultButton from 'part:@sanity/components/buttons/default'
 import {PatchEvent, set, unset} from '../../PatchEvent'
 import {resolveTypeName} from '../../utils/resolveTypeName'
-import {Path} from '@sanity/types'
-import {Marker, Type} from '../../typedefs'
+import {Type} from '../../typedefs'
 import Warning from '../Warning'
 import styles from './styles/ArrayOfPrimitivesInput.css'
 import getEmptyValue from './getEmptyValue'

packages/@sanity/form-builder/src/inputs/ArrayOfPrimitivesInput/Item.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
+import {Path, Marker} from '@sanity/types'
 import Button from 'part:@sanity/components/buttons/default'
 import TrashIcon from 'part:@sanity/base/trash-icon'
 import ValidationStatus from 'part:@sanity/components/validation/status'
 import {createDragHandle} from 'part:@sanity/components/lists/sortable'
 import DragHandleIcon from 'part:@sanity/base/drag-handle-icon'
 import {FieldPresence} from '@sanity/base/presence'
-import {Type, Marker} from '../../typedefs'
-import {Path} from '@sanity/types'
+import {Type} from '../../typedefs'
 import PatchEvent, {set} from '../../PatchEvent'
 import {FormBuilderInput} from '../../FormBuilderInput'
 import getEmptyValue from './getEmptyValue'