chore: strict eslint check (#1084)

packages/component/src/components/BlockSuiteErrorBoundary.tsx

@@ -1,5 +1,5 @@
-import React, { Component, ErrorInfo } from 'react';
 import { MigrationError } from '@blocksuite/global/error';
+import React, { Component, ErrorInfo } from 'react';
 
 export type BlockSuiteErrorBoundaryProps = React.PropsWithChildren;
 
@@ -43,6 +43,7 @@ export class BlockSuiteErrorBoundary extends Component<
                 <a
                   target="_blank"
                   href="https://github.com/toeverything/blocksuite/issues"
+                  rel="noreferrer"
                 >
                   BlockSuite Github Issue
                 </a>

packages/component/src/index.ts

@@ -1,4 +1,5 @@
 // export * from './components/BlockSuiteEditor';
+export * from './styles';
 export * from './ui/breadcrumbs';
 export * from './ui/button';
 export * from './ui/confirm';
@@ -8,10 +9,9 @@ export * from './ui/input';
 export * from './ui/layout';
 export * from './ui/menu';
 export * from './ui/modal';
+export * from './ui/mui';
 export * from './ui/popper';
 export * from './ui/shared/Container';
 export * from './ui/table';
 export * from './ui/toast';
 export * from './ui/tooltip';
-export * from './ui/mui';
-export * from './styles';

packages/component/src/stories/BlockSuiteEditor.stories.tsx

@@ -1,12 +1,13 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import React, { Suspense } from 'react';
-import { Meta, Story } from '@storybook/react';
 import { builtInSchemas } from '@blocksuite/blocks/models';
+import { Page, Workspace } from '@blocksuite/store';
+import { Meta, Story } from '@storybook/react';
+import React, { Suspense } from 'react';
+
 import {
   BlockSuiteEditor,
   BlockSuiteEditorProps,
 } from '../components/BlockSuiteEditor';
-import { Page, Workspace } from '@blocksuite/store';
 
 const worksapce = new Workspace({
   room: 'test',

packages/component/src/stories/BlockSuiteErrorBoundary.stories.tsx

@@ -1,11 +1,12 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import { MigrationError } from '@blocksuite/global/error';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
+
 import {
   BlockSuiteErrorBoundary,
   BlockSuiteErrorBoundaryProps,
 } from '../components/BlockSuiteErrorBoundary';
-import { MigrationError } from '@blocksuite/global/error';
 
 export default {
   title: 'BlockSuite/ErrorBoundary',
@@ -22,5 +23,8 @@ export const ErrorComponent = () => {
 
 export const Primary = Template.bind(undefined);
 Primary.args = {
-  children: [<span>There is no error</span>, <ErrorComponent />],
+  children: [
+    <span key="1">There is no error</span>,
+    <ErrorComponent key="2" />,
+  ],
 };

packages/component/src/stories/Breadcrumbs.stories.tsx

@@ -1,8 +1,9 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Breadcrumbs } from '..';
 import { Link, Typography } from '@mui/material';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+
+import { Breadcrumbs } from '..';
 
 export default {
   title: 'AFFiNE/Breadcrumbs',
@@ -14,12 +15,14 @@ const Template: Story = args => <Breadcrumbs {...args} />;
 export const Primary = Template.bind(undefined);
 Primary.args = {
   children: [
-    <Link underline="hover" color="inherit" href="/">
+    <Link key="1" underline="hover" color="inherit" href="/">
       AFFiNE
     </Link>,
-    <Link underline="hover" color="inherit" href="/Docs/">
+    <Link key="2" underline="hover" color="inherit" href="/Docs/">
       Docs
     </Link>,
-    <Typography color="text.primary">Introduction</Typography>,
+    <Typography key="3" color="text.primary">
+      Introduction
+    </Typography>,
   ],
 };

packages/component/src/stories/Button.stories.tsx

@@ -1,6 +1,7 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import React from 'react';
 import { Meta, Story } from '@storybook/react';
+import React from 'react';
+
 import { Button } from '..';
 import { ButtonProps } from '../ui/button/interface';
 

packages/component/src/styles/index.ts

@@ -1,5 +1,5 @@
+export * from './helper';
 export * from './styled';
 export * from './theme';
-export * from './helper';
 export * from './types';
 export * from './utils';

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 { AffineTheme } from './types';
 export { css, keyframes } from '@emotion/react';
 export const styled = emotionStyled;

packages/component/src/styles/theme.ts

@@ -1,7 +1,9 @@
 import '@emotion/react';
-import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
+
 import type { EditorContainer } from '@blocksuite/editor';
 
+import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
+
 const basicFontFamily =
   'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
 

packages/component/src/styles/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './systemThemeHelper';
 export * from './localStorageThemeHelper';
+export * from './systemThemeHelper';

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',