style: force import type usage and add jsx-runtime rules (#170)

Author: pionxzh

.eslintrc.js

@@ -8,7 +8,12 @@ module.exports = {
   env: {
     browser: true, es6: true
   },
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'standard'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'standard'
+  ],
   globals: {
     Atomics: 'readonly', SharedArrayBuffer: 'readonly'
   },
@@ -75,6 +80,7 @@ module.exports = {
           delimiter: 'semi', requireLast: false
         }
       }],
+    '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports', disallowTypeAnnotations: false }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',

docs/components/JsonViewerPreview.tsx

@@ -1,5 +1,6 @@
-import { JsonViewer, JsonViewerProps } from '@textea/json-viewer'
-import type React from 'react'
+import type { JsonViewerProps } from '@textea/json-viewer'
+import { JsonViewer } from '@textea/json-viewer'
+import React from 'react'
 
 export const JsonViewerPreview: React.FC<JsonViewerProps> = (props) => {
   return (

docs/pages/_app.tsx

@@ -1,7 +1,7 @@
 import 'nextra-theme-docs/style.css'
 
 import type { AppProps } from 'next/app'
-import type React from 'react'
+import React from 'react'
 
 export default function Nextra ({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />

docs/pages/full/index.tsx

@@ -11,17 +11,18 @@ import {
   Toolbar,
   Typography
 } from '@mui/material'
-import {
-  applyValue,
-  createDataType,
-  JsonViewer,
+import type {
   JsonViewerKeyRenderer,
   JsonViewerOnChange,
   JsonViewerTheme
 } from '@textea/json-viewer'
+import {
+  applyValue,
+  createDataType,
+  JsonViewer
+} from '@textea/json-viewer'
 import Image from 'next/image'
-import type React from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
 import { ocean } from '../../lib/shared'
 

src/browser.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { createRoot, Root } from 'react-dom/client'
+import type { Root } from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 
 import { JsonViewer as JsonViewerComponent } from '.'
 import type { JsonViewerProps } from './type'

src/components/DataKeyPair.tsx

@@ -1,6 +1,5 @@
 import { Box, styled } from '@mui/material'
-import type React from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 
 import { useTextColor } from '../hooks/useColor'
 import { useClipboard } from '../hooks/useCopyToClipboard'

src/components/DataTypeLabel.tsx

@@ -1,4 +1,4 @@
-import type React from 'react'
+import React from 'react'
 
 import { DataBox } from './mui/DataBox'
 

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 type React from 'react'
+import React from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { DataItemProps } from '../../type'

src/components/Icons.tsx

@@ -1,5 +1,6 @@
-import { SvgIcon, SvgIconProps } from '@mui/material'
-import type React from 'react'
+import type { SvgIconProps } from '@mui/material'
+import { SvgIcon } from '@mui/material'
+import React from 'react'
 
 const BaseIcon: React.FC<SvgIconProps> = ({ d, ...props }) => {
   return (

src/components/mui/DataBox.tsx

@@ -1,5 +1,4 @@
 import { Box, styled } from '@mui/material'
-import type React from 'react'
 
 export const DataBox = styled(props => <Box component='div' {...props}/>)`
   display: inline-block;