style: restrict type import (#1589)

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

@@ -1,6 +1,6 @@
 import { Children, cloneElement, forwardRef } from 'react';
 
-import { ButtonProps } from './interface';
+import type { ButtonProps } from './interface';
 import { Loading } from './Loading';
 import { StyledButton } from './styles';
 import { getSize } from './utils';

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import {
+import type {
   CSSProperties,
   HTMLAttributes,
   PropsWithChildren,

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

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

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

@@ -1,11 +1,7 @@
-import { Theme } from '@mui/material';
+import type { Theme } from '@mui/material';
 
-import {
-  ButtonProps,
-  SIZE_DEFAULT,
-  SIZE_MIDDLE,
-  SIZE_SMALL,
-} from './interface';
+import type { ButtonProps } from './interface';
+import { SIZE_DEFAULT, SIZE_MIDDLE, SIZE_SMALL } from './interface';
 
 // TODO: Designer is not sure about the size, Now, is just use default size
 export const SIZE_CONFIG = {

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

@@ -1,7 +1,8 @@
 import { useTranslation } from '@affine/i18n';
 
 import { Button } from '../button';
-import { Modal, ModalCloseButton, ModalProps } from '../modal';
+import type { ModalProps } from '../modal';
+import { Modal, ModalCloseButton } from '../modal';
 import {
   StyledColumnButtonWrapper,
   StyledConfirmContent,

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import { EmptySVG } from './EmptySVG';
 import { StyledEmptyContainer } from './style';

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import { styled, textEllipsis } from '../../styles';
 

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

@@ -1,5 +1,5 @@
-import { TooltipProps } from '@mui/material';
-import { CSSProperties } from 'react';
+import type { TooltipProps } from '@mui/material';
+import type { CSSProperties } from 'react';
 
 import { Popper, type PopperProps } from '../popper';
 import { StyledMenuWrapper } from './styles';

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

@@ -1,10 +1,5 @@
-import {
-  cloneElement,
-  forwardRef,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-} from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
+import { cloneElement, forwardRef } from 'react';
 
 import { StyledArrow, StyledMenuItem } from './styles';
 export type IconMenuProps = PropsWithChildren<{

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

@@ -1,5 +1,5 @@
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import { displayFlex, styled } from '../../styles';
 import StyledPopperContainer from '../shared/Container';

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

@@ -1,4 +1,4 @@
-import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
+import type { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
 
 import { StyledBackdrop, StyledModal } from './styles';

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

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

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

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

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

@@ -1,5 +1,5 @@
 import ModalUnstyled from '@mui/base/ModalUnstyled';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import { styled } from '../../styles';
 import { Wrapper } from '../layout';

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

@@ -1,7 +1,8 @@
-import { CSSProperties, forwardRef } from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
 
 import { styled } from '../../styles';
-import { PopperArrowProps } from './interface';
+import type { PopperArrowProps } from './interface';
 
 export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
   function PopperArrow({ placement }, ref) {

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

@@ -11,7 +11,7 @@ import {
 } from 'react';
 
 import { styled } from '../../styles';
-import { PopperProps, VirtualElement } from './interface';
+import type { PopperProps, VirtualElement } from './interface';
 import { PopperArrow } from './PopoverArrow';
 export const Popper = ({
   children,

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

@@ -1,4 +1,4 @@
-import { PopperPlacementType } from '@mui/material';
+import type { PopperPlacementType } from '@mui/material';
 
 import { styled } from '../../styles';
 

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { TableCellProps } from './interface';
+import type { TableCellProps } from './interface';
 import { StyledTableCell } from './styles';
 export const TableCell = ({ children, ...props }: TableCellProps) => {
   return <StyledTableCell {...props}>{children}</StyledTableCell>;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
 
 export type TableCellProps = {
   align?: 'left' | 'right' | 'center';

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

@@ -1,5 +1,5 @@
 import { styled, textEllipsis } from '../../styles';
-import { TableCellProps } from './interface';
+import type { TableCellProps } from './interface';
 
 export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
   ({ theme, tableLayout }) => {

packages/component/src/ui/toast/toast.ts

@@ -1,5 +1,6 @@
 // Copyright: https://github.com/toeverything/blocksuite/commit/8032ef3ab97aefce01664b36502fc392c5db8b78#diff-bf5b41be21936f9165a8400c7f20e24d3dbc49644ba57b9258e0943f0dc1c464
-import { css, html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { css, html } from 'lit';
 
 export const sleep = (ms = 0) =>
   new Promise(resolve => setTimeout(resolve, ms));