From 9cf40d61f75d0931cf2a6984bf4326554c686afd Mon Sep 17 00:00:00 2001 From: Binoy Patel Date: Thu, 18 Jan 2024 22:37:40 -0500 Subject: [PATCH] chore(sanity): remove react import --- .../v2/components/{MyLogo.jsx => MyLogo.tsx} | 1 - .../v3/components/{MyLogo.jsx => MyLogo.tsx} | 1 - .../src/editor/Editable.tsx | 36 +++++++++++++------ .../src/editor/PortableTextEditor.tsx | 4 +-- .../__tests__/PortableTextEditor.test.tsx | 18 +++++----- .../__tests__/PortableTextEditorTester.tsx | 2 +- .../src/editor/components/DraggableBlock.tsx | 17 ++++++--- .../src/editor/components/Element.tsx | 2 +- .../src/editor/components/Leaf.tsx | 5 +-- .../src/editor/components/SlateContainer.tsx | 2 +- .../src/editor/components/Synchronizer.tsx | 2 +- .../src/editor/hooks/useForwardedRef.ts | 4 +-- .../src/editor/hooks/useSyncValue.test.tsx | 7 ++-- .../src/editor/nodes/DefaultAnnotation.tsx | 4 +-- .../src/editor/nodes/DefaultObject.tsx | 1 - .../__tests__/withEditableAPIDelete.test.tsx | 11 +++--- .../__tests__/withEditableAPIInsert.test.tsx | 17 +++++---- .../withPortableTextMarkModel.test.tsx | 26 +++++++------- .../src/editor/plugins/createWithHotKeys.ts | 3 +- .../portable-text-editor/src/types/editor.ts | 32 ++++++++--------- .../portable-text-editor/src/types/options.ts | 3 +- .../__tests__/valueNormalization.test.tsx | 5 ++- .../types/src/schema/test/generic.test.tsx | 1 - packages/@sanity/vision/src/SanityVision.tsx | 1 - .../src/codemirror/VisionCodeMirror.tsx | 1 - .../vision/src/components/DelayedSpinner.tsx | 2 +- .../vision/src/components/ParamsEditor.tsx | 2 +- .../src/components/PerspectivePopover.tsx | 2 +- .../src/components/QueryErrorDetails.tsx | 1 - .../src/components/QueryErrorDialog.tsx | 1 - .../vision/src/components/ResultView.tsx | 1 - .../vision/src/components/VisionGui.tsx | 14 ++++---- .../vision/src/containers/VisionContainer.tsx | 1 - 33 files changed, 120 insertions(+), 110 deletions(-) rename packages/@sanity/cli/test/__fixtures__/v2/components/{MyLogo.jsx => MyLogo.tsx} (92%) rename packages/@sanity/cli/test/__fixtures__/v3/components/{MyLogo.jsx => MyLogo.tsx} (96%) diff --git a/packages/@sanity/cli/test/__fixtures__/v2/components/MyLogo.jsx b/packages/@sanity/cli/test/__fixtures__/v2/components/MyLogo.tsx similarity index 92% rename from packages/@sanity/cli/test/__fixtures__/v2/components/MyLogo.jsx rename to packages/@sanity/cli/test/__fixtures__/v2/components/MyLogo.tsx index 30b72c86b57..4cc798ca0c4 100644 --- a/packages/@sanity/cli/test/__fixtures__/v2/components/MyLogo.jsx +++ b/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' diff --git a/packages/@sanity/cli/test/__fixtures__/v3/components/MyLogo.jsx b/packages/@sanity/cli/test/__fixtures__/v3/components/MyLogo.tsx similarity index 96% rename from packages/@sanity/cli/test/__fixtures__/v3/components/MyLogo.jsx rename to packages/@sanity/cli/test/__fixtures__/v3/components/MyLogo.tsx index c956e3a2210..d8cdf11d09b 100644 --- a/packages/@sanity/cli/test/__fixtures__/v3/components/MyLogo.jsx +++ b/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, diff --git a/packages/@sanity/portable-text-editor/src/editor/Editable.tsx b/packages/@sanity/portable-text-editor/src/editor/Editable.tsx index 84f8dec2089..4de622edacf 100644 --- a/packages/@sanity/portable-text-editor/src/editor/Editable.tsx +++ b/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, + TextareaHTMLAttributes, '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, 'as' | 'onPaste' | 'onBeforeInput'>, - forwardedRef: React.ForwardedRef, + Omit, 'as' | 'onPaste' | 'onBeforeInput'>, + forwardedRef: ForwardedRef, ) { const { hotkeys, @@ -233,7 +247,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable( // Handle from props onCopy function const handleCopy = useCallback( - (event: React.ClipboardEvent): void | ReactEditor => { + (event: ClipboardEvent): 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): Promise | void => { + (event: ClipboardEvent): Promise | 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 = useCallback( + const handleOnFocus: FocusEventHandler = useCallback( (event) => { if (onFocus) { onFocus(event) @@ -323,7 +337,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable( [onFocus, portableTextEditor, change$, slateEditor], ) - const handleOnBlur: React.FocusEventHandler = useCallback( + const handleOnBlur: FocusEventHandler = useCallback( (event) => { if (onBlur) { onBlur(event) diff --git a/packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx b/packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx index 2a9c922d65f..fb2933ff9bd 100644 --- a/packages/@sanity/portable-text-editor/src/editor/PortableTextEditor.tsx +++ b/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 { +export class PortableTextEditor extends Component { /** * An observable of all the editor changes. */ diff --git a/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditor.test.tsx b/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditor.test.tsx index 39e632490b6..67515cdd551 100644 --- a/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditor.test.tsx +++ b/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 = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() const {container} = render( { data-slate-length="0" data-slate-zero-width="n" > -  +
@@ -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() + const editorRef = createRef() render( { }) it('takes initial selection from props', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = 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 = React.createRef() + const editorRef: RefObject = 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 = React.createRef() + const editorRef: RefObject = 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 = React.createRef() + const editorRef: RefObject = 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 = React.createRef() + const editorRef: RefObject = createRef() const initialValue: PortableTextBlock[] = [ helloBlock, { diff --git a/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditorTester.tsx b/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditorTester.tsx index 50a08849a40..e92e03f540d 100644 --- a/packages/@sanity/portable-text-editor/src/editor/__tests__/PortableTextEditorTester.tsx +++ b/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' diff --git a/packages/@sanity/portable-text-editor/src/editor/components/DraggableBlock.tsx b/packages/@sanity/portable-text-editor/src/editor/components/DraggableBlock.tsx index a758786b656..6d4b5e12294 100644 --- a/packages/@sanity/portable-text-editor/src/editor/components/DraggableBlock.tsx +++ b/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 + blockRef: MutableRefObject } /** @@ -28,7 +37,7 @@ export interface DraggableBlockProps { */ export const DraggableBlock = ({children, element, readOnly, blockRef}: DraggableBlockProps) => { const editor = useSlateStatic() - const dragGhostRef: React.MutableRefObject = useRef() + const dragGhostRef: MutableRefObject = useRef() const [isDragOver, setIsDragOver] = useState(false) const isVoid = useMemo(() => Editor.isVoid(editor, element), [editor, element]) const isInline = useMemo(() => Editor.isInline(editor, element), [editor, element]) diff --git a/packages/@sanity/portable-text-editor/src/editor/components/Element.tsx b/packages/@sanity/portable-text-editor/src/editor/components/Element.tsx index 7f7f6e5b271..2f56ac63096 100644 --- a/packages/@sanity/portable-text-editor/src/editor/components/Element.tsx +++ b/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' diff --git a/packages/@sanity/portable-text-editor/src/editor/components/Leaf.tsx b/packages/@sanity/portable-text-editor/src/editor/components/Leaf.tsx index 84d6cc6b50c..d4aaede6317 100644 --- a/packages/@sanity/portable-text-editor/src/editor/components/Leaf.tsx +++ b/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(null) + const spanRef = useRef(null) const portableTextEditor = usePortableTextEditor() const blockSelected = useSelected() const [focused, setFocused] = useState(false) diff --git a/packages/@sanity/portable-text-editor/src/editor/components/SlateContainer.tsx b/packages/@sanity/portable-text-editor/src/editor/components/SlateContainer.tsx index 794bafa1cbf..82d72891510 100644 --- a/packages/@sanity/portable-text-editor/src/editor/components/SlateContainer.tsx +++ b/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' diff --git a/packages/@sanity/portable-text-editor/src/editor/components/Synchronizer.tsx b/packages/@sanity/portable-text-editor/src/editor/components/Synchronizer.tsx index cecfa1936d2..de1d5d66d04 100644 --- a/packages/@sanity/portable-text-editor/src/editor/components/Synchronizer.tsx +++ b/packages/@sanity/portable-text-editor/src/editor/components/Synchronizer.tsx @@ -1,4 +1,4 @@ -import React, { +import { PropsWithChildren, startTransition, useCallback, diff --git a/packages/@sanity/portable-text-editor/src/editor/hooks/useForwardedRef.ts b/packages/@sanity/portable-text-editor/src/editor/hooks/useForwardedRef.ts index e39a70624fc..2fe4848bf9c 100644 --- a/packages/@sanity/portable-text-editor/src/editor/hooks/useForwardedRef.ts +++ b/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(ref: React.ForwardedRef): React.MutableRefObject { +export function useForwardedRef(ref: ForwardedRef): MutableRefObject { const innerRef = useRef(null) useIsomorphicEffect(() => { diff --git a/packages/@sanity/portable-text-editor/src/editor/hooks/useSyncValue.test.tsx b/packages/@sanity/portable-text-editor/src/editor/hooks/useSyncValue.test.tsx index 3b471185076..3a60fc4148d 100644 --- a/packages/@sanity/portable-text-editor/src/editor/hooks/useSyncValue.test.tsx +++ b/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 = React.createRef() + const editorRef: RefObject = 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 = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() const syncedValue = [ { diff --git a/packages/@sanity/portable-text-editor/src/editor/nodes/DefaultAnnotation.tsx b/packages/@sanity/portable-text-editor/src/editor/nodes/DefaultAnnotation.tsx index e277931a32a..7e42389b88e 100644 --- a/packages/@sanity/portable-text-editor/src/editor/nodes/DefaultAnnotation.tsx +++ b/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 diff --git a/packages/@sanity/portable-text-editor/src/editor/nodes/DefaultObject.tsx b/packages/@sanity/portable-text-editor/src/editor/nodes/DefaultObject.tsx index c9b588efef7..2e231d6f504 100644 --- a/packages/@sanity/portable-text-editor/src/editor/nodes/DefaultObject.tsx +++ b/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 diff --git a/packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withEditableAPIDelete.test.tsx b/packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withEditableAPIDelete.test.tsx index 5111cad4dca..cc807a418ee 100644 --- a/packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withEditableAPIDelete.test.tsx +++ b/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 = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { }) it('deletes all the blocks, but leaves a placeholder block', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { }) it('deletes children', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { }) }) it('deletes selected', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { it('inserts child nodes correctly', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { describe('plugin:withEditableAPI: .insertBlock()', () => { it('should not add empty blank blocks: empty block', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { }) it('should not add empty blank blocks: non-empty block', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { }) }) it('should be inserted before if focus is on start of block', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() render( { }) }) it('should not add empty blank blocks: non text block', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() const value = [...initialValue, {_key: 'b', _type: 'someObject', color: 'red'}] render( @@ -281,7 +280,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => { }) }) it('should not add empty blank blocks: in between blocks', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() const value = [...initialValue, {_key: 'b', _type: 'someObject', color: 'red'}] render( @@ -312,7 +311,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => { }) }) it('should not add empty blank blocks: in new empty text block', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const onChange = jest.fn() const value = [...initialValue, ...emptyTextBlock] render( diff --git a/packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx b/packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx index 9102fb07ebc..2455080fc49 100644 --- a/packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx +++ b/packages/@sanity/portable-text-editor/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx @@ -1,7 +1,6 @@ /* eslint-disable max-nested-callbacks */ import {render, waitFor} from '@testing-library/react' - -import React from 'react' +import {RefObject, createRef} from 'react' import {PortableTextEditor} from '../../PortableTextEditor' import { PortableTextEditorTester, @@ -9,12 +8,11 @@ import { schemaTypeWithColorAndLink, } from '../../__tests__/PortableTextEditorTester' import {EditorSelection} from '../../../types/editor' -import {defineType} from '@sanity/types' describe('plugin:withPortableTextMarksModel', () => { describe('normalization', () => { it('merges adjacent spans correctly when removing annotations', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '5fc57af23597', @@ -153,7 +151,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) it('splits correctly when adding marks', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: 'a', @@ -251,7 +249,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) }) it('merges children correctly when toggling marks in various ranges', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: 'a', @@ -381,7 +379,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) }) it('toggles marks on children with annotation marks correctly', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: 'a', @@ -470,7 +468,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) it('merges blocks correctly when containing links', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '5fc57af23597', @@ -600,7 +598,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) it('resets markDefs when splitting a block in the beginning', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '1987f99da4a2', @@ -719,7 +717,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) describe('selection', () => { it('should emit a new selection object when toggling marks, even though the value is the same', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '1987f99da4a2', @@ -768,7 +766,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) describe('removing annotations', () => { it('removes the markDefs if the annotation is no longer in use', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '5fc57af23597', @@ -836,7 +834,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) }) it('preserves the markDefs if the annotation will continue in use', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '5fc57af23597', @@ -919,7 +917,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) }) it('removes the mark from the correct place', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '5fc57af23597', @@ -1004,7 +1002,7 @@ describe('plugin:withPortableTextMarksModel', () => { }) }) it('preserves other marks that apply to the spans', async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '5fc57af23597', diff --git a/packages/@sanity/portable-text-editor/src/editor/plugins/createWithHotKeys.ts b/packages/@sanity/portable-text-editor/src/editor/plugins/createWithHotKeys.ts index 0a329f88994..dd296c11deb 100644 --- a/packages/@sanity/portable-text-editor/src/editor/plugins/createWithHotKeys.ts +++ b/packages/@sanity/portable-text-editor/src/editor/plugins/createWithHotKeys.ts @@ -1,5 +1,6 @@ /* eslint-disable max-statements */ /* eslint-disable complexity */ +import {KeyboardEvent} from 'react' import {Editor, Transforms, Path, Range, Node} from 'slate' import isHotkey from 'is-hotkey' import {ReactEditor} from 'slate-react' @@ -56,7 +57,7 @@ export function createWithHotkeys( portableTextEditor, )[0] return function withHotKeys(editor: PortableTextSlateEditor & ReactEditor) { - editor.pteWithHotKeys = (event: React.KeyboardEvent): void => { + editor.pteWithHotKeys = (event: KeyboardEvent): void => { // Wire up custom marks hotkeys Object.keys(activeHotkeys).forEach((cat) => { if (cat === 'marks') { diff --git a/packages/@sanity/portable-text-editor/src/types/editor.ts b/packages/@sanity/portable-text-editor/src/types/editor.ts index 4d24223a2c5..7253e53ca17 100644 --- a/packages/@sanity/portable-text-editor/src/types/editor.ts +++ b/packages/@sanity/portable-text-editor/src/types/editor.ts @@ -18,7 +18,7 @@ import { import {Subject, Observable} from 'rxjs' import {Descendant, Node as SlateNode, Operation as SlateOperation} from 'slate' import {ReactEditor} from 'slate-react' -import {FocusEvent} from 'react' +import {FocusEvent, ClipboardEvent, KeyboardEvent, ReactElement, RefObject} from 'react' import type {Patch} from '../types/patch' import {PortableTextEditor} from '../editor/PortableTextEditor' @@ -179,7 +179,7 @@ export interface PortableTextSlateEditor extends ReactEditor { /** * Use hotkeys */ - pteWithHotKeys: (event: React.KeyboardEvent) => void + pteWithHotKeys: (event: KeyboardEvent) => void /** * Undo @@ -365,7 +365,7 @@ export type OnPasteResultOrPromise = OnPasteResult | Promise /** @beta */ export interface PasteData { - event: React.ClipboardEvent + event: ClipboardEvent path: Path schemaTypes: PortableTextMemberSchemaTypes value: PortableTextBlock[] | undefined @@ -379,7 +379,7 @@ export type OnBeforeInputFn = (event: InputEvent) => void /** @beta */ export type OnCopyFn = ( - event: React.ClipboardEvent, + event: ClipboardEvent, ) => undefined | unknown /** @beta */ @@ -390,8 +390,8 @@ export type PatchObservable = Observable<{ /** @beta */ export interface BlockRenderProps { - children: React.ReactElement - editorElementRef: React.RefObject + children: ReactElement + editorElementRef: RefObject focused: boolean level?: number listItem?: string @@ -407,8 +407,8 @@ export interface BlockRenderProps { /** @beta */ export interface BlockChildRenderProps { annotations: PortableTextObject[] - children: React.ReactElement - editorElementRef: React.RefObject + children: ReactElement + editorElementRef: RefObject focused: boolean path: Path selected: boolean @@ -421,8 +421,8 @@ export interface BlockChildRenderProps { /** @beta */ export interface BlockAnnotationRenderProps { block: PortableTextBlock - children: React.ReactElement - editorElementRef: React.RefObject + children: ReactElement + editorElementRef: RefObject focused: boolean path: Path schemaType: ObjectSchemaType @@ -433,8 +433,8 @@ export interface BlockAnnotationRenderProps { } /** @beta */ export interface BlockDecoratorRenderProps { - children: React.ReactElement - editorElementRef: React.RefObject + children: ReactElement + editorElementRef: RefObject focused: boolean path: Path schemaType: BlockDecoratorDefinition @@ -447,8 +447,8 @@ export interface BlockDecoratorRenderProps { export interface BlockListItemRenderProps { block: PortableTextTextBlock - children: React.ReactElement - editorElementRef: React.RefObject + children: ReactElement + editorElementRef: RefObject focused: boolean level: number path: Path @@ -473,8 +473,8 @@ export type RenderStyleFunction = (props: BlockStyleRenderProps) => JSX.Element export interface BlockStyleRenderProps { block: PortableTextTextBlock - children: React.ReactElement - editorElementRef: React.RefObject + children: ReactElement + editorElementRef: RefObject focused: boolean path: Path selected: boolean diff --git a/packages/@sanity/portable-text-editor/src/types/options.ts b/packages/@sanity/portable-text-editor/src/types/options.ts index eb3003423b4..b2cd04af7cd 100644 --- a/packages/@sanity/portable-text-editor/src/types/options.ts +++ b/packages/@sanity/portable-text-editor/src/types/options.ts @@ -1,3 +1,4 @@ +import {BaseSyntheticEvent} from 'react' import {PortableTextEditor} from '../editor/PortableTextEditor' import {PatchObservable} from './editor' @@ -11,5 +12,5 @@ export type createEditorOptions = { export type HotkeyOptions = { marks?: Record - custom?: Record void> + custom?: Record void> } diff --git a/packages/@sanity/portable-text-editor/src/utils/__tests__/valueNormalization.test.tsx b/packages/@sanity/portable-text-editor/src/utils/__tests__/valueNormalization.test.tsx index 95777bdbc21..892b2532731 100644 --- a/packages/@sanity/portable-text-editor/src/utils/__tests__/valueNormalization.test.tsx +++ b/packages/@sanity/portable-text-editor/src/utils/__tests__/valueNormalization.test.tsx @@ -1,12 +1,11 @@ import {render, waitFor} from '@testing-library/react' - -import React from 'react' +import {RefObject, createRef} from 'react' import {PortableTextEditor} from '../../editor/PortableTextEditor' import {PortableTextEditorTester, schemaType} from '../../editor/__tests__/PortableTextEditorTester' describe('values: normalization', () => { it("accepts incoming value with blocks without a style or markDefs prop, but doesn't leave them without them when editing them", async () => { - const editorRef: React.RefObject = React.createRef() + const editorRef: RefObject = createRef() const initialValue = [ { _key: '5fc57af23597', diff --git a/packages/@sanity/types/src/schema/test/generic.test.tsx b/packages/@sanity/types/src/schema/test/generic.test.tsx index 359dac07b73..3423687e3bb 100644 --- a/packages/@sanity/types/src/schema/test/generic.test.tsx +++ b/packages/@sanity/types/src/schema/test/generic.test.tsx @@ -3,7 +3,6 @@ * Some of these tests have no expect statement; * use of ts-expect-error serves the same purpose - TypeScript is the testrunner here */ -import React from 'react' import {defineArrayMember, defineField, defineType} from '../types' describe('common type test', () => { diff --git a/packages/@sanity/vision/src/SanityVision.tsx b/packages/@sanity/vision/src/SanityVision.tsx index 248daf120f5..f77da56825c 100644 --- a/packages/@sanity/vision/src/SanityVision.tsx +++ b/packages/@sanity/vision/src/SanityVision.tsx @@ -1,4 +1,3 @@ -import React from 'react' import {type Tool, useClient} from 'sanity' import {type VisionConfig} from './types' import {DEFAULT_API_VERSION} from './apiVersions' diff --git a/packages/@sanity/vision/src/codemirror/VisionCodeMirror.tsx b/packages/@sanity/vision/src/codemirror/VisionCodeMirror.tsx index 7d8ae7fcb8f..b09696fc843 100644 --- a/packages/@sanity/vision/src/codemirror/VisionCodeMirror.tsx +++ b/packages/@sanity/vision/src/codemirror/VisionCodeMirror.tsx @@ -1,4 +1,3 @@ -import React from 'react' import {useTheme} from '@sanity/ui' import CodeMirror, {ReactCodeMirrorProps} from '@uiw/react-codemirror' import {codemirrorExtensions} from './extensions' diff --git a/packages/@sanity/vision/src/components/DelayedSpinner.tsx b/packages/@sanity/vision/src/components/DelayedSpinner.tsx index f871e21250d..ef0a15553ed 100644 --- a/packages/@sanity/vision/src/components/DelayedSpinner.tsx +++ b/packages/@sanity/vision/src/components/DelayedSpinner.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react' +import {useEffect, useState} from 'react' import {Spinner} from '@sanity/ui' interface DelayedSpinnerProps { diff --git a/packages/@sanity/vision/src/components/ParamsEditor.tsx b/packages/@sanity/vision/src/components/ParamsEditor.tsx index d03744844a5..b68b0a7f865 100644 --- a/packages/@sanity/vision/src/components/ParamsEditor.tsx +++ b/packages/@sanity/vision/src/components/ParamsEditor.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect, useMemo, useState} from 'react' +import {useCallback, useEffect, useMemo, useState} from 'react' import {debounce} from 'lodash' import {TFunction, useTranslation} from 'sanity' import {tryParseParams} from '../util/tryParseParams' diff --git a/packages/@sanity/vision/src/components/PerspectivePopover.tsx b/packages/@sanity/vision/src/components/PerspectivePopover.tsx index 3136775bcc3..152c0771220 100644 --- a/packages/@sanity/vision/src/components/PerspectivePopover.tsx +++ b/packages/@sanity/vision/src/components/PerspectivePopover.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useState} from 'react' +import {useCallback, useState} from 'react' import {Popover, Stack, Inline, Text, Card, Badge, Button, useClickOutside} from '@sanity/ui' import {HelpCircleIcon} from '@sanity/icons' import {useTranslation} from 'sanity' diff --git a/packages/@sanity/vision/src/components/QueryErrorDetails.tsx b/packages/@sanity/vision/src/components/QueryErrorDetails.tsx index 3243caf7f89..a4199b727d0 100644 --- a/packages/@sanity/vision/src/components/QueryErrorDetails.tsx +++ b/packages/@sanity/vision/src/components/QueryErrorDetails.tsx @@ -1,4 +1,3 @@ -import React from 'react' import {Box} from '@sanity/ui' import {useTranslation} from 'sanity' import {visionLocaleNamespace} from '../i18n' diff --git a/packages/@sanity/vision/src/components/QueryErrorDialog.tsx b/packages/@sanity/vision/src/components/QueryErrorDialog.tsx index 34aa9089d96..246bb7a9f11 100644 --- a/packages/@sanity/vision/src/components/QueryErrorDialog.tsx +++ b/packages/@sanity/vision/src/components/QueryErrorDialog.tsx @@ -1,4 +1,3 @@ -import React from 'react' import {Stack} from '@sanity/ui' import {QueryErrorDetails} from './QueryErrorDetails' import {ErrorCode} from './QueryErrorDialog.styled' diff --git a/packages/@sanity/vision/src/components/ResultView.tsx b/packages/@sanity/vision/src/components/ResultView.tsx index 2d46d405f11..25e2c708f02 100644 --- a/packages/@sanity/vision/src/components/ResultView.tsx +++ b/packages/@sanity/vision/src/components/ResultView.tsx @@ -1,4 +1,3 @@ -import React from 'react' import HLRU from 'hashlru' import JSONInspector from '@rexxars/react-json-inspector' import {Code} from '@sanity/ui' diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx index fa13b883160..2fba66fa307 100644 --- a/packages/@sanity/vision/src/components/VisionGui.tsx +++ b/packages/@sanity/vision/src/components/VisionGui.tsx @@ -1,5 +1,5 @@ /* eslint-disable complexity */ -import React, {ChangeEvent, type RefObject} from 'react' +import {type RefObject, createRef, PureComponent, ChangeEvent} from 'react' import SplitPane from '@rexxars/react-split-pane' import type {ListenEvent, MutationEvent, SanityClient, ClientPerspective} from '@sanity/client' import {PlayIcon, StopIcon, CopyIcon, ErrorOutlineIcon} from '@sanity/icons' @@ -140,7 +140,7 @@ interface VisionGuiState { paneSizeOptions: PaneSizeOptions } -export class VisionGui extends React.PureComponent { +export class VisionGui extends PureComponent { _visionRoot: RefObject _queryEditorContainer: RefObject _paramsEditorContainer: RefObject @@ -182,11 +182,11 @@ export class VisionGui extends React.PureComponent