style: enable react/react-in-jsx-scope lint rule (#1107)

packages/component/src/components/BlockSuiteEditor.tsx

@@ -1,5 +1,5 @@
 import { Editor, EditorProps } from '@blocksuite/react/editor';
-
+import React from 'react';
 export type BlockSuiteEditorProps = EditorProps;
 export const BlockSuiteEditor = (props: BlockSuiteEditorProps) => {
   return <Editor {...props} />;

packages/component/src/styles/styled.tsx

@@ -1,6 +1,7 @@
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import emotionStyled from '@emotion/styled';
 import type { PropsWithChildren } from 'react';
+import React from 'react';
 
 import { AffineTheme } from './types';
 export { css, keyframes } from '@emotion/react';

packages/component/src/ui/button/Button.tsx

@@ -1,10 +1,10 @@
 import { Children, cloneElement, forwardRef } from 'react';
+import React from 'react';
 
 import { ButtonProps } from './interface';
 import { Loading } from './Loading';
 import { StyledButton } from './styles';
 import { getSize } from './utils';
-
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {

packages/component/src/ui/button/IconButton.tsx

@@ -6,9 +6,9 @@ import {
   HTMLAttributes,
   ReactElement,
 } from 'react';
+import React from 'react';
 
 import { StyledIconButton } from './styles';
-
 const SIZE_SMALL = 'small' as const;
 const SIZE_MIDDLE = 'middle' as const;
 const SIZE_NORMAL = 'normal' as const;

packages/component/src/ui/button/Loading.tsx

@@ -1,7 +1,8 @@
+import React from 'react';
+
 import { styled } from '../../styles';
 import { ButtonProps } from './interface';
 import { getButtonColors } from './utils';
-
 export const LoadingContainer = styled('div')<Pick<ButtonProps, 'type'>>(
   ({ theme, type = 'default' }) => {
     const { color } = getButtonColors(theme, type, false);

packages/component/src/ui/button/TextButton.tsx

@@ -1,9 +1,9 @@
 import { Children, cloneElement, forwardRef } from 'react';
+import React from 'react';
 
 import { ButtonProps } from './interface';
 import { StyledTextButton } from './styles';
 import { getSize } from './utils';
-
 export const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {

packages/component/src/ui/confirm/Confirm.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from '@affine/i18n';
 import { useState } from 'react';
+import React from 'react';
 
 import { Button } from '../button';
 import { Modal, ModalCloseButton, ModalProps } from '../modal';

packages/component/src/ui/empty/Empty.tsx

@@ -1,8 +1,8 @@
 import { CSSProperties } from 'react';
+import React from 'react';
 
 import { EmptySVG } from './EmptySVG';
 import { StyledEmptyContainer } from './style';
-
 export type EmptyContentProps = {
   imageStyle?: CSSProperties;
   description?: string;

packages/component/src/ui/empty/EmptySVG.tsx

@@ -1,4 +1,5 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import React from 'react';
 
 export const EmptySVG = (props: SvgIconProps) => {
   return (

packages/component/src/ui/input/Input.tsx

@@ -6,9 +6,9 @@ import {
   useEffect,
   useState,
 } from 'react';
+import React from 'react';
 
 import { StyledInput } from './style';
-
 type inputProps = {
   value?: string;
   placeholder?: string;

packages/component/src/ui/menu/Menu.tsx

@@ -1,8 +1,8 @@
 import { TooltipProps } from '@mui/material';
+import React from 'react';
 
 import { Popper, type PopperProps } from '../popper';
 import { StyledMenuWrapper } from './styles';
-
 export const Menu = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
   const { content, placement = 'bottom-start', children } = props;
   return content ? (

packages/component/src/ui/menu/MenuItem.tsx

@@ -5,9 +5,9 @@ import {
   PropsWithChildren,
   ReactElement,
 } from 'react';
+import React from 'react';
 
 import { StyledArrow, StyledMenuItem } from './styles';
-
 export type IconMenuProps = PropsWithChildren<{
   isDir?: boolean;
   icon?: ReactElement;

packages/component/src/ui/modal/Modal.tsx

@@ -1,8 +1,8 @@
 import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
+import React from 'react';
 
 import { StyledBackdrop, StyledModal } from './styles';
-
 const Backdrop = ({
   open,
   ...other

packages/component/src/ui/modal/ModalCloseButton.tsx

@@ -1,5 +1,6 @@
 import { CloseIcon } from '@blocksuite/icons';
 import { HTMLAttributes } from 'react';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { IconButton, IconButtonProps } from '../button/IconButton';

packages/component/src/ui/popper/PopoverArrow.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { PopperArrowProps } from './interface';

packages/component/src/ui/popper/Popper.tsx

@@ -9,6 +9,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { PopperProps, VirtualElement } from './interface';

packages/component/src/ui/table/Table.tsx

@@ -1,7 +1,7 @@
 import { Children, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
 
 import { StyledTable } from './styles';
-
 const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {
   return Children.toArray(children).some(child => {
     if (typeof child === 'object' && 'props' in child) {

packages/component/src/ui/table/TableBody.tsx

@@ -1,7 +1,7 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { StyledTableBody } from './styles';
-
 export const TableBody = ({
   children,
   ...props

packages/component/src/ui/table/TableCell.tsx

@@ -1,8 +1,8 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { TableCellProps } from './interface';
 import { StyledTableCell } from './styles';
-
 export const TableCell = ({
   children,
   ...props

packages/component/src/ui/table/TableHead.tsx

@@ -1,4 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { StyledTableHead } from './styles';
 

packages/component/src/ui/table/TableRow.tsx

@@ -1,7 +1,7 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { StyledTableRow } from './styles';
-
 export const TableRow = ({
   children,
   ...props

packages/component/src/ui/tooltip/Tooltip.tsx

@@ -1,9 +1,9 @@
 import type { TooltipProps } from '@mui/material';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { Popper, type PopperProps } from '../popper';
 import StyledPopperContainer from '../shared/Container';
-
 const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     maxWidth: '320px',