chore: strict eslint check (#1084)

packages/component/src/ui/breadcrumbs/index.ts

@@ -1,4 +1,5 @@
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+
 import { styled } from '../../styles';
 
 export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {

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

@@ -1,9 +1,9 @@
-import { cloneElement, Children, forwardRef } from 'react';
-import { StyledButton } from './styles';
+import { Children, cloneElement, forwardRef } from 'react';
 
 import { ButtonProps } from './interface';
-import { getSize } from './utils';
 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

@@ -1,11 +1,12 @@
 import {
-  HTMLAttributes,
-  cloneElement,
-  ReactElement,
   Children,
+  cloneElement,
   CSSProperties,
   forwardRef,
+  HTMLAttributes,
+  ReactElement,
 } from 'react';
+
 import { StyledIconButton } from './styles';
 
 const SIZE_SMALL = 'small' as const;

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

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

packages/component/src/ui/button/index.ts

@@ -1,3 +1,3 @@
-export * from './IconButton';
 export * from './Button';
+export * from './IconButton';
 export * from './TextButton';

packages/component/src/ui/button/styles.ts

@@ -1,7 +1,8 @@
-import { absoluteCenter, displayInlineFlex, styled } from '../../styles';
 import { CSSProperties } from 'react';
+
+import { absoluteCenter, displayInlineFlex, styled } from '../../styles';
 import { ButtonProps } from './interface';
-import { getSize, getButtonColors } from './utils';
+import { getButtonColors, getSize } from './utils';
 
 export const StyledIconButton = styled('button', {
   shouldForwardProp: prop => {

packages/component/src/ui/button/utils.ts

@@ -1,9 +1,9 @@
 import { AffineTheme } from '../../styles';
 import {
-  SIZE_SMALL,
-  SIZE_MIDDLE,
-  SIZE_DEFAULT,
   ButtonProps,
+  SIZE_DEFAULT,
+  SIZE_MIDDLE,
+  SIZE_SMALL,
 } from './interface';
 
 // TODO: Designer is not sure about the size, Now, is just use default size

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

@@ -1,14 +1,15 @@
+import { useTranslation } from '@affine/i18n';
 import { useState } from 'react';
+
+import { Button } from '../button';
 import { Modal, ModalCloseButton, ModalProps } from '../modal';
 import {
-  StyledRowButtonWrapper,
   StyledColumnButtonWrapper,
   StyledConfirmContent,
   StyledConfirmTitle,
   StyledModalWrapper,
+  StyledRowButtonWrapper,
 } from './styles';
-import { Button } from '../button';
-import { useTranslation } from '@affine/i18n';
 export type ConfirmProps = {
   title?: string;
   content?: string;

packages/component/src/ui/divider/index.ts

@@ -1,4 +1,5 @@
 import MuiDivider from '@mui/material/Divider';
+
 import { styled } from '../../styles';
 
 export const Divider = styled(MuiDivider)(({ theme }) => {

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
-import { EmptySVG } from './EmptySVG';
+
 import { styled } from '../../styles';
+import { EmptySVG } from './EmptySVG';
 
 export type EmptyContentProps = {
   width?: CSSProperties['width'];

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

@@ -1,11 +1,12 @@
 import {
+  FocusEventHandler,
+  HTMLAttributes,
   InputHTMLAttributes,
+  KeyboardEventHandler,
   useEffect,
   useState,
-  FocusEventHandler,
-  KeyboardEventHandler,
-  HTMLAttributes,
 } from 'react';
+
 import { StyledInput } from './style';
 
 type inputProps = {

packages/component/src/ui/layout/Content.tsx

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+
 import { styled, textEllipsis } from '../../styles';
 
 // This component should be just used to be contained the text content

packages/component/src/ui/layout/Wrapper.tsx

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+
 import { styled } from '../../styles';
 
 export type WrapperProps = {

packages/component/src/ui/layout/index.ts

@@ -1,2 +1,2 @@
-export * from './Wrapper';
 export * from './Content';
+export * from './Wrapper';

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

@@ -1,5 +1,6 @@
-import { Popper, type PopperProps } from '../popper';
 import { TooltipProps } from '@mui/material';
+
+import { Popper, type PopperProps } from '../popper';
 import { StyledMenuWrapper } from './styles';
 
 export const Menu = (props: PopperProps & Omit<TooltipProps, 'title'>) => {

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

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

packages/component/src/ui/menu/styles.ts

@@ -1,6 +1,7 @@
+import { ArrowRightIcon } from '@blocksuite/icons';
+
 import { displayFlex, styled } from '../../styles';
 import StyledPopperContainer from '../shared/Container';
-import { ArrowRightIcon } from '@blocksuite/icons';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   return {

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

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

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

@@ -1,7 +1,8 @@
-import { HTMLAttributes } from 'react';
 import { CloseIcon } from '@blocksuite/icons';
-import { IconButton, IconButtonProps } from '../button/IconButton';
+import { HTMLAttributes } from 'react';
+
 import { styled } from '../../styles';
+import { IconButton, IconButtonProps } from '../button/IconButton';
 export type ModalCloseButtonProps = {
   top?: number;
   right?: number;

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

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+
 import { styled } from '../../styles';
 
 export const ModalWrapper = styled.div<{

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

@@ -1,7 +1,7 @@
 import Modal from './Modal';
 
+export * from './Modal';
 export * from './ModalCloseButton';
 export * from './ModalWrapper';
-export * from './Modal';
 
 export default Modal;

packages/component/src/ui/modal/styles.ts

@@ -1,8 +1,9 @@
-import { styled } from '../../styles';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
-import { Wrapper } from '../layout';
 import { CSSProperties } from 'react';
 
+import { styled } from '../../styles';
+import { Wrapper } from '../layout';
+
 export const StyledBackdrop = styled.div(({ theme }) => {
   return {
     zIndex: '-1',

packages/component/src/ui/mui.ts

@@ -1,17 +1,17 @@
+import MuiClickAwayListener from '@mui/base/ClickAwayListener';
+import MuiAvatar from '@mui/material/Avatar';
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
 import MuiCollapse from '@mui/material/Collapse';
-import MuiSlide from '@mui/material/Slide';
-import MuiAvatar from '@mui/material/Avatar';
-import MuiGrow from '@mui/material/Grow';
-import MuiClickAwayListener from '@mui/base/ClickAwayListener';
 import MuiFade from '@mui/material/Fade';
+import MuiGrow from '@mui/material/Grow';
+import MuiSlide from '@mui/material/Slide';
 
 export {
-  MuiBreadcrumbs,
-  MuiCollapse,
-  MuiSlide,
   MuiAvatar,
-  MuiGrow,
-  MuiFade,
+  MuiBreadcrumbs,
   MuiClickAwayListener,
+  MuiCollapse,
+  MuiFade,
+  MuiGrow,
+  MuiSlide,
 };

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

@@ -1,9 +1,10 @@
 import { forwardRef } from 'react';
+
 import { styled } from '../../styles';
 import { PopperArrowProps } from './interface';
 
 export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
-  ({ placement }, ref) => {
+  function PopperArrow({ placement }, ref) {
     return <StyledArrow placement={placement} ref={ref} />;
   }
 );

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

@@ -1,17 +1,16 @@
+import ClickAwayListener from '@mui/base/ClickAwayListener';
+import PopperUnstyled from '@mui/base/PopperUnstyled';
+import Grow from '@mui/material/Grow';
 import {
+  cloneElement,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
-  cloneElement,
 } from 'react';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-import ClickAwayListener from '@mui/base/ClickAwayListener';
-import Grow from '@mui/material/Grow';
 
 import { styled } from '../../styles';
-
 import { PopperProps, VirtualElement } from './interface';
 import { PopperArrow } from './PopoverArrow';
 export const Popper = ({

packages/component/src/ui/popper/interface.ts

@@ -1,8 +1,8 @@
-import type { CSSProperties, ReactNode, Ref, ReactElement } from 'react';
 import {
   type PopperPlacementType,
   type PopperUnstyledProps,
 } from '@mui/base/PopperUnstyled';
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 export type VirtualElement = {
   getBoundingClientRect: () => ClientRect | DOMRect;
   contextElement?: Element;

packages/component/src/ui/shared/Container.tsx

@@ -1,6 +1,7 @@
-import { styled } from '../../styles';
 import { PopperPlacementType } from '@mui/material';
 
+import { styled } from '../../styles';
+
 export type PopperDirection =
   | 'none'
   | 'left-top'

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

@@ -1,4 +1,5 @@
-import { PropsWithChildren, Children, ReactNode, HTMLAttributes } from 'react';
+import { Children, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+
 import { StyledTable } from './styles';
 
 const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+
 import { StyledTableBody } from './styles';
 
 export const TableBody = ({

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+
 import { TableCellProps } from './interface';
 import { StyledTableCell } from './styles';
 

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+
 import { StyledTableHead } from './styles';
 
 export const TableHead = ({

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+
 import { StyledTableRow } from './styles';
 
 export const TableRow = ({

packages/component/src/ui/table/index.ts

@@ -6,7 +6,7 @@
 //
 
 export * from './Table';
-export * from './TableRow';
-export * from './TableHead';
-export * from './TableCell';
 export * from './TableBody';
+export * from './TableCell';
+export * from './TableHead';
+export * from './TableRow';

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

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