chore(sanity): remove react import

packages/@sanity/cli/test/__fixtures__/v2/components/MyLogo.jsx → packages/@sanity/cli/test/__fixtures__/v2/components/MyLogo.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styles from './MyLogo.module.css'
 
 const fromDotEnv = process.env.SANITY_STUDIO_FROM_DOTENV || 'notset'

packages/@sanity/cli/test/__fixtures__/v3/components/MyLogo.jsx → packages/@sanity/cli/test/__fixtures__/v3/components/MyLogo.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styles from './MyLogo.module.css'
 
 // Since bundles are compressed and symbols obfuscated,

packages/@sanity/portable-text-editor/src/editor/Editable.tsx

@@ -1,5 +1,19 @@
-import {BaseRange, Transforms, Text, select, Editor} from 'slate'
-import React, {useCallback, useMemo, useEffect, forwardRef, useState, KeyboardEvent} from 'react'
+import {BaseRange, Transforms, Text, Editor} from 'slate'
+import {
+  useCallback,
+  useMemo,
+  useEffect,
+  forwardRef,
+  useState,
+  KeyboardEvent,
+  CSSProperties,
+  FocusEventHandler,
+  ForwardedRef,
+  HTMLProps,
+  ReactNode,
+  TextareaHTMLAttributes,
+  ClipboardEvent,
+} from 'react'
 import {
   Editable as SlateEditable,
   ReactEditor,
@@ -39,7 +53,7 @@ import {useForwardedRef} from './hooks/useForwardedRef'
 
 const debug = debugWithName('component:Editable')
 
-const PLACEHOLDER_STYLE: React.CSSProperties = {
+const PLACEHOLDER_STYLE: CSSProperties = {
   opacity: 0.5,
   position: 'absolute',
   userSelect: 'none',
@@ -54,7 +68,7 @@ const EMPTY_DECORATORS: BaseRange[] = []
  * @public
  */
 export type PortableTextEditableProps = Omit<
-  React.TextareaHTMLAttributes<HTMLDivElement>,
+  TextareaHTMLAttributes<HTMLDivElement>,
   'onPaste' | 'onCopy' | 'onBeforeInput'
 > & {
   hotkeys?: HotkeyOptions
@@ -66,7 +80,7 @@ export type PortableTextEditableProps = Omit<
   renderChild?: RenderChildFunction
   renderDecorator?: RenderDecoratorFunction
   renderListItem?: RenderListItemFunction
-  renderPlaceholder?: () => React.ReactNode
+  renderPlaceholder?: () => ReactNode
   renderStyle?: RenderStyleFunction
   scrollSelectionIntoView?: ScrollSelectionIntoViewFunction
   selection?: EditorSelection
@@ -78,8 +92,8 @@ export type PortableTextEditableProps = Omit<
  */
 export const PortableTextEditable = forwardRef(function PortableTextEditable(
   props: PortableTextEditableProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'onPaste' | 'onBeforeInput'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+    Omit<HTMLProps<HTMLDivElement>, 'as' | 'onPaste' | 'onBeforeInput'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     hotkeys,
@@ -233,7 +247,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
 
   // Handle from props onCopy function
   const handleCopy = useCallback(
-    (event: React.ClipboardEvent<HTMLDivElement>): void | ReactEditor => {
+    (event: ClipboardEvent<HTMLDivElement>): void | ReactEditor => {
       if (onCopy) {
         const result = onCopy(event)
         // CopyFn may return something to avoid doing default stuff
@@ -247,7 +261,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
 
   // Handle incoming pasting events in the editor
   const handlePaste = useCallback(
-    (event: React.ClipboardEvent<HTMLDivElement>): Promise<void> | void => {
+    (event: ClipboardEvent<HTMLDivElement>): Promise<void> | void => {
       event.preventDefault()
       if (!slateEditor.selection) {
         return
@@ -297,7 +311,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
     [change$, onPaste, portableTextEditor, schemaTypes, slateEditor],
   )
 
-  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(
+  const handleOnFocus: FocusEventHandler<HTMLDivElement> = useCallback(
     (event) => {
       if (onFocus) {
         onFocus(event)
@@ -323,7 +337,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
     [onFocus, portableTextEditor, change$, slateEditor],
   )
 
-  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(
+  const handleOnBlur: FocusEventHandler<HTMLDivElement> = useCallback(
     (event) => {
       if (onBlur) {
         onBlur(event)

packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx

@@ -1,4 +1,4 @@
-import React, {PropsWithChildren} from 'react'
+import {Component, PropsWithChildren} from 'react'
 import {
   ArrayDefinition,
   ArraySchemaType,
@@ -85,7 +85,7 @@ export type PortableTextEditorProps = PropsWithChildren<{
  * The main Portable Text Editor component.
  * @public
  */
-export class PortableTextEditor extends React.Component<PortableTextEditorProps> {
+export class PortableTextEditor extends Component<PortableTextEditorProps> {
   /**
    * An observable of all the editor changes.
    */

packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditor.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-irregular-whitespace */
 
-import React from 'react'
+import {RefObject, createRef} from 'react'
 import {render, waitFor} from '@testing-library/react'
 import {PortableTextBlock} from '@sanity/types'
 import {PortableTextEditor} from '../PortableTextEditor'
@@ -18,7 +18,7 @@ const renderPlaceholder = () => 'Jot something down here'
 
 describe('initialization', () => {
   it('receives initial onChange events and has custom placeholder', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
     const {container} = render(
       <PortableTextEditorTester
@@ -74,7 +74,7 @@ describe('initialization', () => {
                 data-slate-length="0"
                 data-slate-zero-width="n"
               >
-                
+
                 <br />
               </span>
             </span>
@@ -90,7 +90,7 @@ describe('initialization', () => {
   it('takes value from props and confirms it by emitting value change event', async () => {
     const initialValue = [helloBlock]
     const onChange = jest.fn()
-    const editorRef = React.createRef<PortableTextEditor>()
+    const editorRef = createRef<PortableTextEditor>()
     render(
       <PortableTextEditorTester
         ref={editorRef}
@@ -109,7 +109,7 @@ describe('initialization', () => {
   })
 
   it('takes initial selection from props', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const initialValue = [helloBlock]
     const initialSelection: EditorSelection = {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
@@ -134,7 +134,7 @@ describe('initialization', () => {
   })
 
   it('updates editor selection from new prop and keeps object equality in editor.getSelection()', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const initialValue = [helloBlock]
     const initialSelection: EditorSelection = {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
@@ -184,7 +184,7 @@ describe('initialization', () => {
   })
 
   it('handles empty array value', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const initialValue: PortableTextBlock[] = []
     const initialSelection: EditorSelection = {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
@@ -223,7 +223,7 @@ describe('initialization', () => {
     })
   })
   it('validates a non-initial value', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     let value: PortableTextBlock[] = [helloBlock]
     const initialSelection: EditorSelection = {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
@@ -299,7 +299,7 @@ describe('initialization', () => {
     })
   })
   it("doesn't crash when containing a invalid block somewhere inside the content", async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const initialValue: PortableTextBlock[] = [
       helloBlock,
       {

packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -1,4 +1,4 @@
-import React, {ForwardedRef, forwardRef, useCallback, useEffect} from 'react'
+import {ForwardedRef, forwardRef, useCallback, useEffect} from 'react'
 import {Schema} from '@sanity/schema'
 
 import {defineArrayMember, defineField} from '@sanity/types'

packages/@sanity/portable-text-editor/src/editor/components/DraggableBlock.tsx

@@ -1,4 +1,13 @@
-import React, {useState, useRef, useMemo, useCallback, DragEvent, useEffect} from 'react'
+import {
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  DragEvent,
+  useEffect,
+  MutableRefObject,
+  ReactNode,
+} from 'react'
 import {Element as SlateElement, Transforms, Path, Editor} from 'slate'
 import {ReactEditor, useSlateStatic} from 'slate-react'
 import {debugWithName} from '../../utils/debug'
@@ -16,10 +25,10 @@ const debugRenders = false
  * @internal
  */
 export interface DraggableBlockProps {
-  children: React.ReactNode
+  children: ReactNode
   element: SlateElement
   readOnly: boolean
-  blockRef: React.MutableRefObject<HTMLDivElement | null>
+  blockRef: MutableRefObject<HTMLDivElement | null>
 }
 
 /**
@@ -28,7 +37,7 @@ export interface DraggableBlockProps {
  */
 export const DraggableBlock = ({children, element, readOnly, blockRef}: DraggableBlockProps) => {
   const editor = useSlateStatic()
-  const dragGhostRef: React.MutableRefObject<undefined | HTMLElement> = useRef()
+  const dragGhostRef: MutableRefObject<undefined | HTMLElement> = useRef()
   const [isDragOver, setIsDragOver] = useState(false)
   const isVoid = useMemo(() => Editor.isVoid(editor, element), [editor, element])
   const isInline = useMemo(() => Editor.isInline(editor, element), [editor, element])

packages/@sanity/portable-text-editor/src/editor/components/Element.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 /* eslint-disable max-statements */
-import React, {ReactElement, FunctionComponent, useRef, useMemo} from 'react'
+import {ReactElement, FunctionComponent, useRef, useMemo} from 'react'
 import {Element as SlateElement, Editor, Range} from 'slate'
 import {Path, PortableTextChild, PortableTextObject, PortableTextTextBlock} from '@sanity/types'
 import {useSelected, useSlateStatic, ReactEditor, RenderElementProps} from 'slate-react'

packages/@sanity/portable-text-editor/src/editor/components/Leaf.tsx

@@ -1,4 +1,5 @@
-import React, {
+import {
+  useRef,
   ReactElement,
   startTransition,
   useCallback,
@@ -47,7 +48,7 @@ export interface LeafProps extends RenderLeafProps {
 export const Leaf = (props: LeafProps) => {
   const {attributes, children, leaf, schemaTypes, renderChild, renderDecorator, renderAnnotation} =
     props
-  const spanRef = React.useRef<HTMLElement>(null)
+  const spanRef = useRef<HTMLElement>(null)
   const portableTextEditor = usePortableTextEditor()
   const blockSelected = useSelected()
   const [focused, setFocused] = useState(false)

packages/@sanity/portable-text-editor/src/editor/components/SlateContainer.tsx

@@ -1,4 +1,4 @@
-import React, {PropsWithChildren, useEffect, useMemo} from 'react'
+import {PropsWithChildren, useEffect, useMemo} from 'react'
 import {Slate, withReact} from 'slate-react'
 import {createEditor} from 'slate'
 import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'

packages/@sanity/portable-text-editor/src/editor/components/Synchronizer.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   PropsWithChildren,
   startTransition,
   useCallback,

packages/@sanity/portable-text-editor/src/editor/hooks/useForwardedRef.ts

@@ -1,8 +1,8 @@
-import React, {useRef, useLayoutEffect, useEffect} from 'react'
+import {useRef, useLayoutEffect, useEffect, ForwardedRef, MutableRefObject} from 'react'
 
 const useIsomorphicEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
 
-export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
+export function useForwardedRef<T>(ref: ForwardedRef<T>): MutableRefObject<T | null> {
   const innerRef = useRef<T | null>(null)
 
   useIsomorphicEffect(() => {

packages/@sanity/portable-text-editor/src/editor/hooks/useSyncValue.test.tsx

@@ -1,6 +1,5 @@
 import {render, waitFor} from '@testing-library/react'
-
-import React from 'react'
+import {RefObject, createRef} from 'react'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from '../__tests__/PortableTextEditorTester'
 
@@ -23,7 +22,7 @@ const initialValue = [
 
 describe('useSyncValue', () => {
   it('updates span text', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
     const syncedValue = [
       {
@@ -64,7 +63,7 @@ describe('useSyncValue', () => {
     })
   })
   it('replaces span nodes with different keys inside the same children array', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
     const syncedValue = [
       {

packages/@sanity/portable-text-editor/src/editor/nodes/DefaultAnnotation.tsx

@@ -1,9 +1,9 @@
 import {PortableTextObject} from '@sanity/types'
-import React, {useCallback} from 'react'
+import {ReactNode, useCallback} from 'react'
 
 type Props = {
   annotation: PortableTextObject
-  children: React.ReactNode
+  children: ReactNode
 }
 export function DefaultAnnotation(props: Props) {
   // eslint-disable-next-line no-alert

packages/@sanity/portable-text-editor/src/editor/nodes/DefaultObject.tsx

@@ -1,5 +1,4 @@
 import {PortableTextBlock, PortableTextChild} from '@sanity/types'
-import React from 'react'
 
 type Props = {
   value: PortableTextBlock | PortableTextChild

packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withEditableAPIDelete.test.tsx

@@ -1,6 +1,5 @@
 import {render, waitFor} from '@testing-library/react'
-
-import React from 'react'
+import {RefObject, createRef} from 'react'
 import {PortableTextEditor} from '../../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from '../../__tests__/PortableTextEditorTester'
 
@@ -42,7 +41,7 @@ const initialSelection = {
 
 describe('plugin:withEditableAPI: .delete()', () => {
   it('deletes block', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
     render(
       <PortableTextEditorTester
@@ -84,7 +83,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
   })
 
   it('deletes all the blocks, but leaves a placeholder block', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
     render(
       <PortableTextEditorTester
@@ -137,7 +136,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
   })
 
   it('deletes children', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
     render(
       <PortableTextEditorTester
@@ -196,7 +195,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
     })
   })
   it('deletes selected', async () => {
-    const editorRef: React.RefObject<PortableTextEditor> = React.createRef()
+    const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
     render(
       <PortableTextEditorTester