style: enable import-x/no-duplicates (#6279)

packages/frontend/component/src/ui/avatar/avatar.stories.tsx

@@ -1,7 +1,8 @@
 import { CameraIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Avatar, type AvatarProps } from './avatar';
+import type { AvatarProps } from './avatar';
+import { Avatar } from './avatar';
 
 export default {
   title: 'UI/Avatar',

packages/frontend/component/src/ui/avatar/avatar.tsx

@@ -1,19 +1,27 @@
 import { CloseIcon } from '@blocksuite/icons';
+import type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarProps as RadixAvatarProps,
+} from '@radix-ui/react-avatar';
 import {
-  type AvatarFallbackProps,
-  type AvatarImageProps,
-  type AvatarProps as RadixAvatarProps,
   Fallback as AvatarFallback,
   Image as AvatarImage,
   Root as AvatarRoot,
 } from '@radix-ui/react-avatar';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { CSSProperties, HTMLAttributes, MouseEvent } from 'react';
-import { forwardRef, type ReactElement, useMemo, useState } from 'react';
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  MouseEvent,
+  ReactElement,
+} from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 
 import { IconButton } from '../button';
-import { Tooltip, type TooltipProps } from '../tooltip';
+import type { TooltipProps } from '../tooltip';
+import { Tooltip } from '../tooltip';
 import { ColorfulFallback } from './colorful-fallback';
 import * as style from './style.css';
 import { sizeVar } from './style.css';

packages/frontend/component/src/ui/button/button.stories.tsx

@@ -1,7 +1,8 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Button, type ButtonProps } from './button';
+import type { ButtonProps } from './button';
+import { Button } from './button';
 export default {
   title: 'UI/Button',
   component: Button,

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

@@ -1,12 +1,11 @@
 import clsx from 'clsx';
-import {
-  type FC,
-  forwardRef,
-  type HTMLAttributes,
-  type PropsWithChildren,
-  type ReactElement,
-  useMemo,
+import type {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
 } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 import { Loading } from '../loading';
 import { button, buttonIcon } from './button.css';

packages/frontend/component/src/ui/button/dropdown-button.tsx

@@ -1,9 +1,6 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
-import {
-  type ButtonHTMLAttributes,
-  forwardRef,
-  type MouseEventHandler,
-} from 'react';
+import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/button/icon-button.stories.tsx

@@ -1,7 +1,8 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { IconButton, type IconButtonProps } from './icon-button';
+import type { IconButtonProps } from './icon-button';
+import { IconButton } from './icon-button';
 export default {
   title: 'UI/IconButton',
   component: IconButton,

packages/frontend/component/src/ui/button/icon-button.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-import { forwardRef, type ReactElement } from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
+import { forwardRef } from 'react';
 
 import { Loading } from '../loading';
 import type { ButtonType } from './button';

packages/frontend/component/src/ui/button/radio.tsx

@@ -4,7 +4,8 @@ import type {
 } from '@radix-ui/react-radio-group';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import clsx from 'clsx';
-import { type CSSProperties, forwardRef } from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/checkbox/checkbox.tsx

@@ -1,6 +1,7 @@
 // components/checkbox.tsx
 import clsx from 'clsx';
-import { type HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import * as icons from './icons';
 import * as styles from './index.css';

packages/frontend/component/src/ui/date-picker/calendar/calendar.tsx

@@ -6,8 +6,8 @@ import * as styles from './calendar.css';
 import { DATE_MAX, DATE_MIN } from './constants';
 import { DayPicker } from './day-picker';
 import { MonthPicker } from './month-picker';
-import type { SelectMode } from './types';
-import { type DatePickerProps, defaultDatePickerProps } from './types';
+import type { DatePickerProps, SelectMode } from './types';
+import { defaultDatePickerProps } from './types';
 import { YearPicker } from './year-picker';
 
 export type { DatePickerProps } from './types';

packages/frontend/component/src/ui/date-picker/calendar/items.tsx

@@ -1,13 +1,8 @@
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import {
-  forwardRef,
-  type HTMLAttributes,
-  memo,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { forwardRef, memo } from 'react';
 
 import { IconButton } from '../../button';
 import * as styles from './calendar.css';

packages/frontend/component/src/ui/date-picker/week-date-picker.tsx

@@ -1,9 +1,8 @@
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
+import type { ForwardedRef, HTMLAttributes } from 'react';
 import {
-  type ForwardedRef,
-  type HTMLAttributes,
   memo,
   useCallback,
   useEffect,

packages/frontend/component/src/ui/divider/divider.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Divider, type DividerProps } from './index';
+import type { DividerProps } from './index';
+import { Divider } from './index';
 
 export default {
   title: 'UI/Divider',

packages/frontend/component/src/ui/editable/inline-edit.stories.tsx

@@ -3,7 +3,8 @@ import { useCallback, useRef, useState } from 'react';
 
 import { Button } from '../button';
 import { ResizePanel } from '../resize-panel/resize-panel';
-import { InlineEdit, type InlineEditHandle } from './inline-edit';
+import type { InlineEditHandle } from './inline-edit';
+import { InlineEdit } from './inline-edit';
 
 export default {
   title: 'UI/Editable/Inline Edit',

packages/frontend/component/src/ui/empty/empty.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Empty, type EmptyContentProps } from './index';
+import type { EmptyContentProps } from './index';
+import { Empty } from './index';
 
 export default {
   title: 'UI/Empty',

packages/frontend/component/src/ui/input/input.stories.tsx

@@ -1,7 +1,8 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Input, type InputProps } from './index';
+import type { InputProps } from './index';
+import { Input } from './index';
 
 export default {
   title: 'UI/Input',

packages/frontend/component/src/ui/loading/loading.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Loading, type LoadingProps } from './loading';
+import type { LoadingProps } from './loading';
+import { Loading } from './loading';
 
 export default {
   title: 'UI/Loading',

packages/frontend/component/src/ui/lottie/collections-icon.stories.tsx

@@ -1,9 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import {
-  AnimatedCollectionsIcon,
-  type CollectionsIconProps,
-} from './collections-icon';
+import type { CollectionsIconProps } from './collections-icon';
+import { AnimatedCollectionsIcon } from './collections-icon';
 
 export default {
   title: 'UI/Lottie/Collection Icons',

packages/frontend/component/src/ui/lottie/collections-icon.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import Lottie, { type LottieRef } from 'lottie-react';
+import type { LottieRef } from 'lottie-react';
+import Lottie from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
 import animationData from './collections-icon.json';

packages/frontend/component/src/ui/lottie/delete-icon.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { AnimatedDeleteIcon, type DeleteIconProps } from './delete-icon';
+import type { DeleteIconProps } from './delete-icon';
+import { AnimatedDeleteIcon } from './delete-icon';
 
 export default {
   title: 'UI/Lottie/Delete Icon',

packages/frontend/component/src/ui/lottie/delete-icon.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import Lottie, { type LottieRef } from 'lottie-react';
+import type { LottieRef } from 'lottie-react';
+import Lottie from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
 import animationData from './delete-icon.json';

packages/frontend/component/src/ui/menu/menu-icon.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import type { PropsWithChildren, ReactNode } from 'react';
-import { forwardRef, type HTMLAttributes, useMemo } from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 import { menuItemIcon } from './styles.css';
 

packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { MenuTrigger, type MenuTriggerProps } from './index';
+import type { MenuTriggerProps } from './index';
+import { MenuTrigger } from './index';
 
 export default {
   title: 'UI/MenuTrigger',

packages/frontend/component/src/ui/menu/menu-trigger.tsx

@@ -1,13 +1,13 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { PropsWithChildren } from 'react';
-import {
-  type CSSProperties,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
 } from 'react';
+import { forwardRef } from 'react';
 
 import { MenuIcon } from './menu-icon';
 import * as styles from './styles.css';

packages/frontend/component/src/ui/menu/menu.stories.tsx

@@ -1,15 +1,15 @@
 import { InformationIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
-import { type ReactNode, useCallback, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useCallback, useState } from 'react';
 
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
+import type { MenuItemProps, MenuProps } from './index';
 import {
   Menu,
   MenuIcon,
   MenuItem,
-  type MenuItemProps,
-  type MenuProps,
   MenuSeparator,
   MenuSub,
   MenuTrigger,

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -2,7 +2,7 @@ import { DoneIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { type MenuItemProps } from './menu.types';
+import type { MenuItemProps } from './menu.types';
 import { MenuIcon } from './menu-icon';
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -3,7 +3,8 @@ import clsx from 'clsx';
 
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
-import { Modal, type ModalProps } from './modal';
+import type { ModalProps } from './modal';
+import { Modal } from './modal';
 import * as styles from './styles.css';
 
 export interface ConfirmModalProps extends ModalProps {

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -2,10 +2,14 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../button';
-import { Input, type InputProps } from '../input';
-import { ConfirmModal, type ConfirmModalProps } from './confirm-modal';
-import { Modal, type ModalProps } from './modal';
-import { OverlayModal, type OverlayModalProps } from './overlay-modal';
+import type { InputProps } from '../input';
+import { Input } from '../input';
+import type { ConfirmModalProps } from './confirm-modal';
+import { ConfirmModal } from './confirm-modal';
+import type { ModalProps } from './modal';
+import { Modal } from './modal';
+import type { OverlayModalProps } from './overlay-modal';
+import { OverlayModal } from './overlay-modal';
 
 export default {
   title: 'UI/Modal',

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

@@ -8,9 +8,11 @@ import type {
 import * as Dialog from '@radix-ui/react-dialog';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import { type CSSProperties, forwardRef } from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
 
-import { IconButton, type IconButtonProps } from '../button';
+import type { IconButtonProps } from '../button';
+import { IconButton } from '../button';
 import * as styles from './styles.css';
 
 export interface ModalProps extends DialogProps {

packages/frontend/component/src/ui/modal/overlay-modal.tsx

@@ -3,8 +3,10 @@ import { cssVar } from '@toeverything/theme';
 import { memo, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Button, type ButtonProps } from '../button';
-import { Modal, type ModalProps } from './modal';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import type { ModalProps } from './modal';
+import { Modal } from './modal';
 import * as styles from './overlay-modal.css';
 
 const defaultContentOptions: ModalProps['contentOptions'] = {

packages/frontend/component/src/ui/popover/popover.tsx

@@ -5,7 +5,8 @@ import type {
 } from '@radix-ui/react-popover';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import clsx from 'clsx';
-import { type ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/resize-panel/resize-panel.tsx

@@ -1,10 +1,6 @@
 import clsx from 'clsx';
-import {
-  type HTMLAttributes,
-  type PropsWithChildren,
-  useEffect,
-  useRef,
-} from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { useEffect, useRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/ui/scrollbar/scrollable.tsx

@@ -1,6 +1,7 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
-import { forwardRef, type RefAttributes } from 'react';
+import type { RefAttributes } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './index.css';
 

packages/frontend/component/src/ui/scrollbar/scrollbar.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { ScrollableContainer, type ScrollableContainerProps } from './index';
+import type { ScrollableContainerProps } from './index';
+import { ScrollableContainer } from './index';
 
 export default {
   title: 'UI/Scrollbar',

packages/frontend/component/src/ui/scrollbar/scrollbar.tsx

@@ -1,6 +1,7 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
-import { type PropsWithChildren, useRef } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useRef } from 'react';
 
 import * as styles from './index.css';
 import { useHasScrollTop } from './use-has-scroll-top';

packages/frontend/component/src/ui/scrollbar/use-has-scroll-top.tsx

@@ -1,4 +1,5 @@
-import { type RefObject, useEffect, useState } from 'react';
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
 
 export function useHasScrollTop(ref: RefObject<HTMLElement> | null) {
   const [hasScrollTop, setHasScrollTop] = useState(false);

packages/frontend/component/src/ui/skeleton/skeleton.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Skeleton, type SkeletonProps } from './index';
+import type { SkeletonProps } from './index';
+import { Skeleton } from './index';
 
 export default {
   title: 'UI/Skeleton',

packages/frontend/component/src/ui/switch/switch.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Switch, type SwitchProps } from './index';
+import type { SwitchProps } from './index';
+import { Switch } from './index';
 
 export default {
   title: 'UI/Switch',

packages/frontend/component/src/ui/switch/switch.tsx

@@ -1,11 +1,7 @@
 // components/switch.tsx
 import clsx from 'clsx';
-import {
-  type HTMLAttributes,
-  type ReactNode,
-  useCallback,
-  useState,
-} from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useCallback, useState } from 'react';
 
 import * as styles from './index.css';
 

packages/frontend/component/src/ui/tooltip/tooltip.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
 import { Button } from '../button';
-import Tooltip, { type TooltipProps } from './index';
+import type { TooltipProps } from './index';
+import Tooltip from './index';
 
 export default {
   title: 'UI/Tooltip',