style: drop React default import

pionxzh · pionxzh · commit 70733952545e · 2023-03-08T00:59:56.000+08:00
diff --git a/docs/components/JsonViewerPreview.tsx b/docs/components/JsonViewerPreview.tsx
@@ -1,8 +1,8 @@
 import type { JsonViewerProps } from '@textea/json-viewer'
 import { JsonViewer } from '@textea/json-viewer'
-import React from 'react'
+import type { FC } from 'react'
 
-export const JsonViewerPreview: React.FC<JsonViewerProps> = (props) => {
+export const JsonViewerPreview: FC<JsonViewerProps> = (props) => {
   return (
     <JsonViewer
       theme='auto'
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -1,7 +1,6 @@
 import 'nextra-theme-docs/style.css'
 
 import type { AppProps } from 'next/app'
-import React from 'react'
 
 export default function Nextra ({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
diff --git a/docs/pages/full/index.tsx b/docs/pages/full/index.tsx
@@ -22,7 +22,8 @@ import {
   JsonViewer
 } from '@textea/json-viewer'
 import Image from 'next/image'
-import React, { useCallback, useEffect, useState } from 'react'
+import type { FC } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { ocean } from '../../lib/shared'
 
@@ -109,7 +110,7 @@ const KeyRenderer: JsonViewerKeyRenderer = ({ path }) => {
 }
 KeyRenderer.when = (props) => props.value === 114.514
 
-const IndexPage: React.FC = () => {
+const IndexPage: FC = () => {
   const [indent, setIndent] = useState(3)
   const [groupArraysAfterLength, setGroupArraysAfterLength] = useState(100)
   const [themeKey, setThemeKey] = useState<string>('light')
diff --git a/src/browser.tsx b/src/browser.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import type { Root } from 'react-dom/client'
 import { createRoot } from 'react-dom/client'
 
diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@mui/material'
-import type { ComponentProps } from 'react'
-import React, { useCallback, useMemo, useState } from 'react'
+import type { ComponentProps, FC, MouseEvent } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import { useTextColor } from '../hooks/useColor'
 import { useClipboard } from '../hooks/useCopyToClipboard'
@@ -28,7 +28,7 @@ export type DataKeyPairProps = {
 
 type IconBoxProps = ComponentProps<typeof Box>
 
-const IconBox: React.FC<IconBoxProps> = (props) => (
+const IconBox: FC<IconBoxProps> = (props) => (
   <Box
     component='span'
     {...props}
@@ -40,7 +40,7 @@ const IconBox: React.FC<IconBoxProps> = (props) => (
   />
 )
 
-export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
+export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
   const { value, path, nestedIndex } = props
   const propsEditable = props.editable ?? undefined
   const storeEditable = useJsonViewerStore(store => store.editable)
@@ -214,7 +214,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
           opacity: 0.8
         }}
         onClick={
-          useCallback((event: React.MouseEvent<HTMLSpanElement>) => {
+          useCallback((event: MouseEvent<HTMLSpanElement>) => {
             if (event.isDefaultPrevented()) {
               return
             }
diff --git a/src/components/DataTypeLabel.tsx b/src/components/DataTypeLabel.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type { FC } from 'react'
 
 import { DataBox } from './mui/DataBox'
 
@@ -7,7 +7,7 @@ export type DataLabelProps = {
   enable?: boolean
 }
 
-export const DataTypeLabel: React.FC<DataLabelProps> = ({
+export const DataTypeLabel: FC<DataLabelProps> = ({
   dataType
   , enable = true
 }) => {
diff --git a/src/components/DataTypes/Function.tsx b/src/components/DataTypes/Function.tsx
@@ -3,7 +3,7 @@
  *  Because in Next.js SSR, the function will be translated to other type
  */
 import { Box, NoSsr } from '@mui/material'
-import React from 'react'
+import type { FC } from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { DataItemProps } from '../../type'
@@ -41,7 +41,7 @@ const functionName = (func: Function) => {
 const lb = '{'
 const rb = '}'
 
-export const PreFunctionType: React.FC<DataItemProps<Function>> = (props) => {
+export const PreFunctionType: FC<DataItemProps<Function>> = (props) => {
   return (
     <NoSsr>
       <DataTypeLabel dataType='function'/>
@@ -58,7 +58,7 @@ export const PreFunctionType: React.FC<DataItemProps<Function>> = (props) => {
   )
 }
 
-export const PostFunctionType: React.FC<DataItemProps<Function>> = () => {
+export const PostFunctionType: FC<DataItemProps<Function>> = () => {
   return (
     <NoSsr>
       <Box component='span' className='data-function-end'>
@@ -68,7 +68,7 @@ export const PostFunctionType: React.FC<DataItemProps<Function>> = () => {
   )
 }
 
-export const FunctionType: React.FC<DataItemProps<Function>> = (props) => {
+export const FunctionType: FC<DataItemProps<Function>> = (props) => {
   const functionColor = useJsonViewerStore(store => store.colorspace.base05)
   return (
     <NoSsr>
diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@mui/material'
-import React, { useMemo, useState } from 'react'
+import type { FC } from 'react'
+import { useMemo, useState } from 'react'
 
 import { useTextColor } from '../../hooks/useColor'
 import { useIsCycleReference } from '../../hooks/useIsCycleReference'
@@ -28,7 +29,7 @@ function inspectMetadata (value: object) {
   return `${length} Items${name ? ` (${name})` : ''}`
 }
 
-export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
+export const PreObjectType: FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
   const textColor = useTextColor()
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
@@ -75,7 +76,7 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
   )
 }
 
-export const PostObjectType: React.FC<DataItemProps<object>> = (props) => {
+export const PostObjectType: FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
   const displayObjectSize = useJsonViewerStore(store => store.displayObjectSize)
@@ -109,7 +110,7 @@ function getIterator (value: any): value is Iterable<unknown> {
   return typeof value?.[Symbol.iterator] === 'function'
 }
 
-export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
+export const ObjectType: FC<DataItemProps<object>> = (props) => {
   const keyColor = useTextColor()
   const borderColor = useJsonViewerStore(store => store.colorspace.base02)
   const groupArraysAfterLength = useJsonViewerStore(store => store.groupArraysAfterLength)
diff --git a/src/components/DataTypes/createEasyType.tsx b/src/components/DataTypes/createEasyType.tsx
@@ -1,5 +1,6 @@
 import { InputBase } from '@mui/material'
-import React, { useCallback } from 'react'
+import type { ChangeEventHandler, ComponentType, FC } from 'react'
+import { memo, useCallback } from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { Colorspace } from '../../theme/base16'
@@ -9,7 +10,7 @@ import { DataBox } from '../mui/DataBox'
 
 export function createEasyType<Value> (
   type: string,
-  renderValue: React.ComponentType<Pick<DataItemProps<Value>, 'value'>>,
+  renderValue: ComponentType<Pick<DataItemProps<Value>, 'value'>>,
   config: {
     colorKey: keyof Colorspace
     fromString?: (value: string) => Value
@@ -18,8 +19,8 @@ export function createEasyType<Value> (
 ): Omit<DataType<Value>, 'is'> {
   const { fromString, colorKey, displayTypeLabel = true } = config
 
-  const Render = React.memo(renderValue)
-  const EasyType: React.FC<DataItemProps<Value>> = (props) => {
+  const Render = memo(renderValue)
+  const EasyType: FC<DataItemProps<Value>> = (props) => {
     const storeDisplayDataTypes = useJsonViewerStore(store => store.displayDataTypes)
     const color = useJsonViewerStore(store => store.colorspace[colorKey])
     const onSelect = useJsonViewerStore(store => store.onSelect)
@@ -41,13 +42,13 @@ export function createEasyType<Value> (
     }
   }
 
-  const EasyTypeEditor: React.FC<EditorProps<Value>> = ({ value, setValue }) => {
+  const EasyTypeEditor: FC<EditorProps<Value>> = ({ value, setValue }) => {
     const color = useJsonViewerStore(store => store.colorspace[colorKey])
     return (
       <InputBase
         value={value}
         onChange={
-          useCallback<React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>(
+          useCallback<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>(
             (event) => {
               const value = fromString(event.target.value)
               setValue(value)
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -1,8 +1,8 @@
 import type { SvgIconProps } from '@mui/material'
 import { SvgIcon } from '@mui/material'
-import React from 'react'
+import type { FC } from 'react'
 
-const BaseIcon: React.FC<SvgIconProps> = ({ d, ...props }) => {
+const BaseIcon: FC<SvgIconProps> = ({ d, ...props }) => {
   return (
     <SvgIcon {...props}>
       <path d={d}/>
@@ -18,30 +18,30 @@ const ContentCopy = 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v
 const Edit = 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'
 const ExpandMore = 'M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'
 
-export const CheckIcon: React.FC<SvgIconProps> = (props) => {
+export const CheckIcon: FC<SvgIconProps> = (props) => {
   return <BaseIcon d={Check} {...props} />
 }
 
-export const ChevronRightIcon: React.FC<SvgIconProps> = (props) => {
+export const ChevronRightIcon: FC<SvgIconProps> = (props) => {
   return <BaseIcon d={ChevronRight} {...props} />
 }
 
-export const CircularArrowsIcon: React.FC<SvgIconProps> = (props) => {
+export const CircularArrowsIcon: FC<SvgIconProps> = (props) => {
   return <BaseIcon d={CircularArrows} {...props} />
 }
 
-export const CloseIcon: React.FC<SvgIconProps> = (props) => {
+export const CloseIcon: FC<SvgIconProps> = (props) => {
   return <BaseIcon d={Close} {...props} />
 }
 
-export const ContentCopyIcon: React.FC<SvgIconProps> = (props) => {
+export const ContentCopyIcon: FC<SvgIconProps> = (props) => {
   return <BaseIcon d={ContentCopy} {...props} />
 }
 
-export const EditIcon: React.FC<SvgIconProps> = (props) => {
+export const EditIcon: FC<SvgIconProps> = (props) => {
   return <BaseIcon d={Edit} {...props} />
 }
 
-export const ExpandMoreIcon: React.FC<SvgIconProps> = (props) => {
+export const ExpandMoreIcon: FC<SvgIconProps> = (props) => {
   return <BaseIcon d={ExpandMore} {...props} />
 }
diff --git a/src/components/mui/DataBox.tsx b/src/components/mui/DataBox.tsx
@@ -1,10 +1,9 @@
 import { Box } from '@mui/material'
-import type { ComponentProps } from 'react'
-import React from 'react'
+import type { ComponentProps, FC } from 'react'
 
 type DataBoxProps = ComponentProps<typeof Box>
 
-export const DataBox: React.FC<DataBoxProps> = props => (
+export const DataBox: FC<DataBoxProps> = props => (
   <Box
     component='div'
     {...props}
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,8 @@ import {
   createTheme, Paper,
   ThemeProvider
 } from '@mui/material'
-import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import type { FC, ReactElement } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { DataKeyPair } from './components/DataKeyPair'
 import { useThemeDetector } from './hooks/useThemeDetector'
@@ -42,7 +43,7 @@ function useSetIfNotUndefinedEffect<Key extends keyof JsonViewerProps> (
 /**
  * @internal
  */
-const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
+const JsonViewerInner: FC<JsonViewerProps> = (props) => {
   const api = useJsonViewerStoreApi()
   useSetIfNotUndefinedEffect('value', props.value)
   useSetIfNotUndefinedEffect('editable', props.editable)
@@ -112,7 +113,7 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   )
 }
 
-export const JsonViewer = function JsonViewer<Value> (props: JsonViewerProps<Value>): React.ReactElement {
+export const JsonViewer = function JsonViewer<Value> (props: JsonViewerProps<Value>): ReactElement {
   const isAutoDarkTheme = useThemeDetector()
   const themeType = useMemo(() => props.theme === 'auto'
     ? (isAutoDarkTheme ? 'light' : 'dark')
diff --git a/src/type.ts b/src/type.ts
@@ -1,5 +1,4 @@
-import type { Dispatch, SetStateAction } from 'react'
-import type React from 'react'
+import type { ComponentType, CSSProperties, Dispatch, FC, SetStateAction } from 'react'
 
 import type { Colorspace } from './theme/base16'
 
@@ -41,21 +40,21 @@ export interface DataItemProps<ValueType = unknown> {
 
 export type EditorProps<ValueType = unknown> = {
   value: ValueType
-  setValue: React.Dispatch<ValueType>
+  setValue: Dispatch<ValueType>
 }
 
 export type DataType<ValueType = unknown> = {
   /**
    * Whether the value belongs to the data type
    */
   is: (value: unknown, path: Path) => boolean
-  Component: React.ComponentType<DataItemProps<ValueType>>
-  Editor?: React.ComponentType<EditorProps<ValueType>>
-  PreComponent?: React.ComponentType<DataItemProps<ValueType>>
-  PostComponent?: React.ComponentType<DataItemProps<ValueType>>
+  Component: ComponentType<DataItemProps<ValueType>>
+  Editor?: ComponentType<EditorProps<ValueType>>
+  PreComponent?: ComponentType<DataItemProps<ValueType>>
+  PostComponent?: ComponentType<DataItemProps<ValueType>>
 }
 
-export interface JsonViewerKeyRenderer extends React.FC<DataItemProps> {
+export interface JsonViewerKeyRenderer extends FC<DataItemProps> {
   when (props: DataItemProps): boolean
 }
 
@@ -154,7 +153,7 @@ export type JsonViewerProps<T = unknown> = {
   displayDataTypes?: boolean
 
   className?: string
-  style?: React.CSSProperties
+  style?: CSSProperties
   /**
    *
    * @default 'light'
diff --git a/src/utils/index.ts b/src/utils/index.ts
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
diff --git a/tests/util.test.tsx b/tests/util.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react'`
`2`	`1`	`import type { Root } from 'react-dom/client'`
`3`	`2`	`import { createRoot } from 'react-dom/client'`
`4`	`3`