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

.eslintrc.js

@@ -95,7 +95,7 @@ const config = {
     '@typescript-eslint',
     'simple-import-sort',
     'sonarjs',
-    'i',
+    'import-x',
     'unused-imports',
     'unicorn',
     'rxjs',
@@ -131,6 +131,7 @@ const config = {
     'unused-imports/no-unused-imports': 'error',
     'simple-import-sort/imports': 'error',
     'simple-import-sort/exports': 'error',
+    'import-x/no-duplicates': 'error',
     '@typescript-eslint/ban-ts-comment': [
       'error',
       {
@@ -253,7 +254,7 @@ const config = {
         ],
         '@typescript-eslint/no-misused-promises': ['error'],
         '@typescript-eslint/prefer-readonly': 'error',
-        'i/no-extraneous-dependencies': ['error'],
+        'import-x/no-extraneous-dependencies': ['error'],
         'react-hooks/exhaustive-deps': [
           'warn',
           {

package.json

@@ -79,7 +79,7 @@
     "electron": "^29.0.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-i": "^2.29.1",
+    "eslint-plugin-import-x": "^0.4.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-rxjs": "^5.0.3",

packages/backend/server/src/app.module.ts

@@ -18,11 +18,8 @@ import { UserModule } from './core/user';
 import { WorkspaceModule } from './core/workspaces';
 import { getOptionalModuleMetadata } from './fundamentals';
 import { CacheInterceptor, CacheModule } from './fundamentals/cache';
-import {
+import type { AvailablePlugins } from './fundamentals/config';
-  type AvailablePlugins,
+import { Config, ConfigModule } from './fundamentals/config';
-  Config,
-  ConfigModule,
-} from './fundamentals/config';
 import { EventModule } from './fundamentals/event';
 import { GqlModule } from './fundamentals/graphql';
 import { HelpersModule } from './fundamentals/helpers';

packages/backend/server/src/core/auth/service.ts

@@ -5,7 +5,8 @@ import {
   NotFoundException,
   OnApplicationBootstrap,
 } from '@nestjs/common';
-import { PrismaClient, type User } from '@prisma/client';
+import type { User } from '@prisma/client';
+import { PrismaClient } from '@prisma/client';
 import type { CookieOptions, Request, Response } from 'express';
 import { assign, omit } from 'lodash-es';
 

packages/backend/server/src/core/doc/history.ts

@@ -4,12 +4,8 @@ import { Injectable, Logger } from '@nestjs/common';
 import { Cron, CronExpression } from '@nestjs/schedule';
 import { PrismaClient } from '@prisma/client';
 
-import {
+import type { EventPayload } from '../../fundamentals';
-  Config,
+import { Config, metrics, OnEvent } from '../../fundamentals';
-  type EventPayload,
-  metrics,
-  OnEvent,
-} from '../../fundamentals';
 import { QuotaService } from '../quota';
 import { Permission } from '../workspaces/types';
 import { isEmptyBuffer } from './manager';

packages/backend/server/src/core/doc/manager.ts

@@ -16,12 +16,12 @@ import {
   transact,
 } from 'yjs';
 
+import type { EventPayload } from '../../fundamentals';
 import {
   Cache,
   CallTimer,
   Config,
   EventEmitter,
-  type EventPayload,
   mergeUpdatesInApplyWay as jwstMergeUpdates,
   metrics,
   OnEvent,

packages/backend/server/src/core/quota/service.ts

@@ -1,11 +1,8 @@
 import { Injectable } from '@nestjs/common';
 import { PrismaClient } from '@prisma/client';
 
-import {
+import type { EventPayload } from '../../fundamentals';
-  type EventPayload,
+import { OnEvent, PrismaTransaction } from '../../fundamentals';
-  OnEvent,
-  PrismaTransaction,
-} from '../../fundamentals';
 import { FeatureKind } from '../features';
 import { QuotaConfig } from './quota';
 import { QuotaType } from './types';

packages/backend/server/src/core/user/resolver.ts

@@ -7,14 +7,15 @@ import {
   ResolveField,
   Resolver,
 } from '@nestjs/graphql';
-import { PrismaClient, type User } from '@prisma/client';
+import type { User } from '@prisma/client';
+import { PrismaClient } from '@prisma/client';
 import GraphQLUpload from 'graphql-upload/GraphQLUpload.mjs';
 import { isNil, omitBy } from 'lodash-es';
 
+import type { FileUpload } from '../../fundamentals';
 import {
   CloudThrottlerGuard,
   EventEmitter,
-  type FileUpload,
   PaymentRequiredException,
   Throttle,
 } from '../../fundamentals';

packages/backend/server/src/core/workspaces/permission.ts

@@ -1,5 +1,6 @@
 import { ForbiddenException, Injectable } from '@nestjs/common';
-import { type Prisma, PrismaClient } from '@prisma/client';
+import type { Prisma } from '@prisma/client';
+import { PrismaClient } from '@prisma/client';
 
 import { Permission } from './types';
 

packages/backend/server/src/core/workspaces/resolvers/blob.ts

@@ -16,9 +16,9 @@ import {
 import { SafeIntResolver } from 'graphql-scalars';
 import GraphQLUpload from 'graphql-upload/GraphQLUpload.mjs';
 
+import type { FileUpload } from '../../../fundamentals';
 import {
   CloudThrottlerGuard,
-  type FileUpload,
   MakeCache,
   PreventCache,
 } from '../../../fundamentals';

packages/backend/server/src/core/workspaces/resolvers/page.ts

@@ -9,10 +9,8 @@ import {
   ResolveField,
   Resolver,
 } from '@nestjs/graphql';
-import {
+import type { WorkspacePage as PrismaWorkspacePage } from '@prisma/client';
-  PrismaClient,
+import { PrismaClient } from '@prisma/client';
-  type WorkspacePage as PrismaWorkspacePage,
-} from '@prisma/client';
 
 import { CloudThrottlerGuard } from '../../../fundamentals';
 import { CurrentUser } from '../../auth';

packages/backend/server/src/core/workspaces/resolvers/workspace.ts

@@ -20,10 +20,10 @@ import { getStreamAsBuffer } from 'get-stream';
 import GraphQLUpload from 'graphql-upload/GraphQLUpload.mjs';
 import { applyUpdate, Doc } from 'yjs';
 
+import type { FileUpload } from '../../../fundamentals';
 import {
   CloudThrottlerGuard,
   EventEmitter,
-  type FileUpload,
   MailService,
   MutexService,
   Throttle,

packages/backend/server/src/data/migrations/1703756315970-unamed-account.ts

@@ -1,4 +1,5 @@
-import { PrismaClient, type User } from '@prisma/client';
+import type { User } from '@prisma/client';
+import { PrismaClient } from '@prisma/client';
 
 export class UnamedAccount1703756315970 {
   // do the migration

packages/backend/server/src/fundamentals/config/default.ts

@@ -5,13 +5,8 @@ import { createPrivateKey, createPublicKey } from 'node:crypto';
 import { merge } from 'lodash-es';
 
 import pkg from '../../../package.json' assert { type: 'json' };
-import {
+import type { AFFINE_ENV, NODE_ENV, ServerFlavor } from './def';
-  type AFFINE_ENV,
+import { AFFiNEConfig, DeploymentType } from './def';
-  AFFiNEConfig,
-  DeploymentType,
-  type NODE_ENV,
-  type ServerFlavor,
-} from './def';
 import { readEnv } from './env';
 import { getDefaultAFFiNEStorageConfig } from './storage';
 

packages/backend/server/src/fundamentals/helpers/url.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import { type Response } from 'express';
+import type { Response } from 'express';
 
 import { Config } from '../config';
 

packages/backend/server/src/fundamentals/mailer/mail.service.ts

@@ -2,7 +2,8 @@ import { Inject, Injectable, Optional } from '@nestjs/common';
 
 import { Config } from '../config';
 import { URLHelper } from '../helpers';
-import { MAILER_SERVICE, type MailerService, type Options } from './mailer';
+import type { MailerService, Options } from './mailer';
+import { MAILER_SERVICE } from './mailer';
 import { emailTemplate } from './template';
 @Injectable()
 export class MailService {

packages/backend/server/src/fundamentals/metrics/opentelemetry.ts

@@ -15,11 +15,8 @@ import { IORedisInstrumentation } from '@opentelemetry/instrumentation-ioredis';
 import { NestInstrumentation } from '@opentelemetry/instrumentation-nestjs-core';
 import { SocketIoInstrumentation } from '@opentelemetry/instrumentation-socket.io';
 import { Resource } from '@opentelemetry/resources';
-import {
+import type { MeterProvider } from '@opentelemetry/sdk-metrics';
-  type MeterProvider,
+import { MetricProducer, MetricReader } from '@opentelemetry/sdk-metrics';
-  MetricProducer,
-  MetricReader,
-} from '@opentelemetry/sdk-metrics';
 import { NodeSDK } from '@opentelemetry/sdk-node';
 import {
   BatchSpanProcessor,

packages/backend/server/src/fundamentals/throttler/index.ts

@@ -1,5 +1,4 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { ExecutionContext, Global, Injectable, Module } from '@nestjs/common';
-import { Global, Module } from '@nestjs/common';
 import {
   Throttle,
   ThrottlerGuard,

packages/backend/server/src/plugins/payment/types.ts

@@ -1,5 +1,5 @@
-import { type User } from '@prisma/client';
+import type { User } from '@prisma/client';
-import { type Stripe } from 'stripe';
+import type { Stripe } from 'stripe';
 
 import type { Payload } from '../../fundamentals/event/def';
 

packages/backend/server/src/plugins/redis/index.ts

@@ -1,5 +1,6 @@
 import { Global, Provider, Type } from '@nestjs/common';
-import { Redis, type RedisOptions } from 'ioredis';
+import type { RedisOptions } from 'ioredis';
+import { Redis } from 'ioredis';
 import { ThrottlerStorageRedisService } from 'nestjs-throttler-storage-redis';
 
 import { Cache, Locker, SessionCache } from '../../fundamentals';

packages/backend/server/tests/app.e2e.ts

@@ -1,5 +1,6 @@
 import type { INestApplication } from '@nestjs/common';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 import request from 'supertest';
 
 import { AppModule } from '../src/app.module';

packages/backend/server/tests/auth.e2e.ts

@@ -3,7 +3,8 @@ import {
   getLatestMailMessage,
 } from '@affine-test/kit/utils/cloud';
 import type { INestApplication } from '@nestjs/common';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 
 import { AuthService } from '../src/core/auth/service';
 import { MailService } from '../src/fundamentals/mailer';

packages/backend/server/tests/feature.spec.ts

@@ -2,7 +2,8 @@
 
 import { INestApplication, Injectable } from '@nestjs/common';
 import { PrismaClient } from '@prisma/client';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 
 import { AuthService } from '../src/core/auth/service';
 import {

packages/backend/server/tests/history.spec.ts

@@ -7,7 +7,7 @@ import * as Sinon from 'sinon';
 import { DocHistoryManager } from '../src/core/doc';
 import { QuotaModule } from '../src/core/quota';
 import { StorageModule } from '../src/core/storage';
-import { type EventPayload } from '../src/fundamentals/event';
+import type { EventPayload } from '../src/fundamentals/event';
 import { createTestingModule } from './utils';
 
 let m: TestingModule;

packages/backend/server/tests/mailer.e2e.ts

@@ -7,7 +7,8 @@ import {
   getLatestMailMessage,
 } from '@affine-test/kit/utils/cloud';
 import { TestingModule } from '@nestjs/testing';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 
 import { AuthService } from '../src/core/auth/service';
 import { ConfigModule } from '../src/fundamentals/config';

packages/backend/server/tests/mailer.spec.ts

@@ -1,5 +1,6 @@
 import type { INestApplication } from '@nestjs/common';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 import Sinon from 'sinon';
 
 import { AppModule } from '../src/app.module';

packages/backend/server/tests/quota.spec.ts

@@ -1,7 +1,8 @@
 /// <reference types="../src/global.d.ts" />
 
 import { TestingModule } from '@nestjs/testing';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 
 import { AuthService } from '../src/core/auth';
 import {

packages/backend/server/tests/workspace-invite.e2e.ts

@@ -4,7 +4,8 @@ import {
 } from '@affine-test/kit/utils/cloud';
 import type { INestApplication } from '@nestjs/common';
 import { PrismaClient } from '@prisma/client';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 
 import { AppModule } from '../src/app.module';
 import { AuthService } from '../src/core/auth/service';

packages/backend/server/tests/workspace.e2e.ts

@@ -1,6 +1,7 @@
 import type { INestApplication } from '@nestjs/common';
 import { PrismaClient } from '@prisma/client';
-import ava, { type TestFn } from 'ava';
+import type { TestFn } from 'ava';
+import ava from 'ava';
 import request from 'supertest';
 
 import { AppModule } from '../src/app.module';

packages/common/infra/src/blocksuite/migration/subdoc.ts

@@ -1,6 +1,11 @@
 import { nanoid } from 'nanoid';
-import { Array as YArray, Doc as YDoc, Map as YMap } from 'yjs';
+import {
-import { applyUpdate, encodeStateAsUpdate } from 'yjs';
+  applyUpdate,
+  Array as YArray,
+  Doc as YDoc,
+  encodeStateAsUpdate,
+  Map as YMap,
+} from 'yjs';
 
 const migrationOrigin = 'affine-migration';
 

packages/common/infra/src/command/registry.ts

@@ -2,11 +2,8 @@ import { DebugLogger } from '@affine/debug';
 // @ts-expect-error upstream type is wrong
 import { tinykeys } from 'tinykeys';
 
-import {
+import type { AffineCommand, AffineCommandOptions } from './command';
-  type AffineCommand,
+import { createAffineCommand } from './command';
-  type AffineCommandOptions,
-  createAffineCommand,
-} from './command';
 
 const commandLogger = new DebugLogger('command:registry');
 

packages/common/infra/src/di/core/provider.ts

@@ -6,10 +6,10 @@ import {
   ServiceNotFoundError,
 } from './error';
 import { parseIdentifier } from './identifier';
-import {
+import type {
-  type GeneralServiceIdentifier,
+  GeneralServiceIdentifier,
-  type ServiceIdentifierValue,
+  ServiceIdentifierValue,
-  type ServiceVariant,
+  ServiceVariant,
 } from './types';
 
 export interface ResolveOptions {

packages/common/infra/src/di/react/index.ts

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
-import type { ServiceProvider } from '../core';
+import type { GeneralServiceIdentifier, ServiceProvider } from '../core';
-import { type GeneralServiceIdentifier, ServiceCollection } from '../core';
+import { ServiceCollection } from '../core';
 
 export const ServiceProviderContext = React.createContext(
   ServiceCollection.EMPTY.provider()

packages/common/infra/src/livedata/index.ts

@@ -1,22 +1,25 @@
 import { DebugLogger } from '@affine/debug';
+import type {
+  InteropObservable,
+  Observer,
+  OperatorFunction,
+  Subscription,
+  TeardownLogic,
+} from 'rxjs';
 import {
+  BehaviorSubject,
   combineLatest,
   distinctUntilChanged,
   EMPTY,
   filter,
-  type InteropObservable,
   map,
   Observable,
-  type Observer,
   of,
-  type OperatorFunction,
   scan,
   skip,
-  type Subscription,
+  Subject,
   switchMap,
-  type TeardownLogic,
 } from 'rxjs';
-import { BehaviorSubject, Subject } from 'rxjs';
 
 export * from './react';
 

packages/common/infra/src/page/context.ts

@@ -1,6 +1,7 @@
 import type { Doc as BlockSuiteDoc } from '@blocksuite/store';
 
-import { createIdentifier, type ServiceCollection } from '../di';
+import type { ServiceCollection } from '../di';
+import { createIdentifier } from '../di';
 import type { PageRecord } from './record';
 import { PageScope } from './service-scope';
 

packages/common/infra/src/page/index.ts

@@ -4,7 +4,8 @@ export * from './record';
 export * from './record-list';
 export * from './service-scope';
 
-import { type ServiceCollection, ServiceProvider } from '../di';
+import type { ServiceCollection } from '../di';
+import { ServiceProvider } from '../di';
 import { CleanupService } from '../lifecycle';
 import { Workspace, WorkspaceLocalState, WorkspaceScope } from '../workspace';
 import { BlockSuitePageContext, PageRecordContext } from './context';

packages/common/infra/src/page/record-list.ts

@@ -2,7 +2,7 @@ import { isEqual } from 'lodash-es';
 import { distinctUntilChanged, map, Observable } from 'rxjs';
 
 import { LiveData } from '../livedata';
-import { type Workspace, type WorkspaceLocalState } from '../workspace';
+import type { Workspace, WorkspaceLocalState } from '../workspace';
 import { PageRecord } from './record';
 
 export class PageRecordList {

packages/common/infra/src/page/service-scope.ts

@@ -1,4 +1,5 @@
-import { createScope, type ServiceScope } from '../di';
+import type { ServiceScope } from '../di';
+import { createScope } from '../di';
 import { WorkspaceScope } from '../workspace';
 
 export const PageScope: ServiceScope = createScope('page', WorkspaceScope);

packages/common/infra/src/workspace/context.ts

@@ -23,7 +23,8 @@ import { nanoid } from 'nanoid';
 import type { Awareness } from 'y-protocols/awareness.js';
 import type { Doc as YDoc } from 'yjs';
 
-import { createIdentifier, type ServiceCollection } from '../di';
+import type { ServiceCollection } from '../di';
+import { createIdentifier } from '../di';
 import { BlobEngine } from './engine/blob';
 import { globalBlockSuiteSchema } from './global-schema';
 import type { WorkspaceMetadata } from './metadata';

packages/common/infra/src/workspace/engine/doc/__tests__/sync.spec.ts

@@ -1,7 +1,12 @@
 import { nanoid } from 'nanoid';
 import { describe, expect, test, vitest } from 'vitest';
-import { Doc as YDoc, encodeStateAsUpdate } from 'yjs';
+import {
-import { diffUpdate, encodeStateVectorFromUpdate, mergeUpdates } from 'yjs';
+  diffUpdate,
+  Doc as YDoc,
+  encodeStateAsUpdate,
+  encodeStateVectorFromUpdate,
+  mergeUpdates,
+} from 'yjs';
 
 import { AsyncLock } from '../../../../utils';
 import { DocEngine } from '..';

packages/common/infra/src/workspace/engine/doc/index.ts

@@ -9,7 +9,8 @@ import { MANUALLY_STOP } from '../../../utils';
 import { DocEngineLocalPart } from './local';
 import { DocEngineRemotePart } from './remote';
 import type { DocServer } from './server';
-import { type DocStorage, DocStorageInner } from './storage';
+import type { DocStorage } from './storage';
+import { DocStorageInner } from './storage';
 
 const logger = new DebugLogger('doc-engine');
 

packages/common/infra/src/workspace/engine/doc/storage.ts

@@ -1,10 +1,5 @@
-import {
+import type { ByteKV, Memento } from '../../../storage';
-  type ByteKV,
+import { MemoryMemento, ReadonlyByteKV, wrapMemento } from '../../../storage';
-  type Memento,
-  MemoryMemento,
-  ReadonlyByteKV,
-  wrapMemento,
-} from '../../../storage';
 import { AsyncLock, mergeUpdates, throwIfAborted } from '../../../utils';
 import type { DocEventBus } from '.';
 import { DocEventBusInner, MemoryDocEventBus } from './event';

packages/common/infra/src/workspace/factory.ts

@@ -1,4 +1,5 @@
-import { createIdentifier, type ServiceCollection } from '../di';
+import type { ServiceCollection } from '../di';
+import { createIdentifier } from '../di';
 
 export interface WorkspaceFactory {
   name: string;

packages/common/infra/src/workspace/index.ts

@@ -11,7 +11,8 @@ export * from './testing';
 export * from './upgrade';
 export * from './workspace';
 
-import { type ServiceCollection, ServiceProvider } from '../di';
+import type { ServiceCollection } from '../di';
+import { ServiceProvider } from '../di';
 import { CleanupService } from '../lifecycle';
 import { GlobalCache, GlobalState, MemoryMemento } from '../storage';
 import {

packages/common/infra/src/workspace/list/cache.ts

@@ -1,5 +1,5 @@
 import type { GlobalCache } from '../../storage';
-import { type WorkspaceMetadata } from '../metadata';
+import type { WorkspaceMetadata } from '../metadata';
 
 const CACHE_STORAGE_KEY = 'jotai-workspaces';
 

packages/common/infra/src/workspace/list/index.ts

@@ -9,7 +9,8 @@ import type { GlobalCache } from '../../storage';
 import type { BlobStorage } from '../engine';
 import type { WorkspaceMetadata } from '../metadata';
 import { readWorkspaceListCache, writeWorkspaceListCache } from './cache';
-import { type WorkspaceInfo, WorkspaceInformation } from './information';
+import type { WorkspaceInfo } from './information';
+import { WorkspaceInformation } from './information';
 
 export * from './information';
 

packages/common/infra/src/workspace/testing.ts

@@ -4,12 +4,13 @@ import { differenceBy } from 'lodash-es';
 import { nanoid } from 'nanoid';
 import { applyUpdate, encodeStateAsUpdate } from 'yjs';
 
-import { type ServiceCollection } from '../di';
+import type { ServiceCollection } from '../di';
-import { GlobalState, type Memento } from '../storage';
+import type { Memento } from '../storage';
+import { GlobalState } from '../storage';
 import { WorkspaceMetadataContext } from './context';
+import type { BlobStorage } from './engine';
 import {
   AwarenessProvider,
-  type BlobStorage,
   DocStorageImpl,
   LocalBlobStorage,
   MemoryDocStorage,
@@ -17,9 +18,8 @@ import {
 import { MemoryStorage } from './engine/doc/storage';
 import type { WorkspaceFactory } from './factory';
 import { globalBlockSuiteSchema } from './global-schema';
-import type { WorkspaceListProvider } from './list';
+import type { WorkspaceInfo, WorkspaceListProvider } from './list';
-import { type WorkspaceInfo } from './list';
+import type { WorkspaceMetadata } from './metadata';
-import { type WorkspaceMetadata } from './metadata';
 import { WorkspaceScope } from './service-scope';
 
 const LIST_STORE_KEY = 'testing-workspace-list';

packages/common/infra/src/workspace/upgrade.ts

@@ -4,12 +4,16 @@ import { Slot } from '@blocksuite/global/utils';
 import type { DocCollection } from '@blocksuite/store';
 import { applyUpdate, Doc as YDoc, encodeStateAsUpdate } from 'yjs';
 
-import { checkWorkspaceCompatibility, MigrationPoint } from '../blocksuite';
+import {
-import { forceUpgradePages, upgradeV1ToV2 } from '../blocksuite';
+  checkWorkspaceCompatibility,
-import { migrateGuidCompatibility } from '../blocksuite';
+  forceUpgradePages,
+  migrateGuidCompatibility,
+  MigrationPoint,
+  upgradeV1ToV2,
+} from '../blocksuite';
 import type { DocEngine } from './engine';
 import type { WorkspaceManager } from './manager';
-import { type WorkspaceMetadata } from './metadata';
+import type { WorkspaceMetadata } from './metadata';
 
 export interface WorkspaceUpgradeStatus {
   needUpgrade: boolean;

packages/common/infra/src/workspace/workspace.ts

@@ -4,11 +4,12 @@ import type { DocCollection } from '@blocksuite/store';
 
 import type { ServiceProvider } from '../di';
 import { CleanupService } from '../lifecycle';
-import type { WorkspaceEngine } from './engine';
+import type { WorkspaceEngine, WorkspaceEngineStatus } from './engine';
-import { type WorkspaceEngineStatus } from './engine';
+import type { WorkspaceMetadata } from './metadata';
-import { type WorkspaceMetadata } from './metadata';
+import type {
-import type { WorkspaceUpgradeController } from './upgrade';
+  WorkspaceUpgradeController,
-import { type WorkspaceUpgradeStatus } from './upgrade';
+  WorkspaceUpgradeStatus,
+} from './upgrade';
 
 export type { DocCollection } from '@blocksuite/store';
 

packages/common/y-indexeddb/src/provider.ts

@@ -1,22 +1,17 @@
 import { assertExists } from '@blocksuite/global/utils';
 import type { IDBPDatabase } from 'idb';
 import { openDB } from 'idb';
-import {
+import type { DocDataSource } from 'y-provider';
-  createLazyProvider,
+import { createLazyProvider, writeOperation } from 'y-provider';
-  type DocDataSource,
-  writeOperation,
-} from 'y-provider';
 import type { Doc } from 'yjs';
 import { diffUpdate, encodeStateVectorFromUpdate } from 'yjs';
 
-import {
+import type {
-  type BlockSuiteBinaryDB,
+  BlockSuiteBinaryDB,
-  dbVersion,
+  IndexedDBProvider,
-  DEFAULT_DB_NAME,
+  UpdateMessage,
-  type IndexedDBProvider,
-  type UpdateMessage,
-  upgradeDB,
 } from './shared';
+import { dbVersion, DEFAULT_DB_NAME, upgradeDB } from './shared';
 import { mergeUpdates } from './utils';
 
 let mergeCount = 500;

packages/common/y-provider/src/lazy-provider.ts

@@ -1,14 +1,9 @@
 import { assertExists } from '@blocksuite/global/utils';
-import {
+import type { Doc } from 'yjs';
-  applyUpdate,
+import { applyUpdate, encodeStateAsUpdate, encodeStateVector } from 'yjs';
-  type Doc,
-  encodeStateAsUpdate,
-  encodeStateVector,
-} from 'yjs';
 
 import type { DocDataSource } from './data-source';
-import type { DataSourceAdapter } from './types';
+import type { DataSourceAdapter, Status } from './types';
-import type { Status } from './types';
 
 function getDoc(doc: Doc, guid: string): Doc | undefined {
   if (doc.guid === guid) {

packages/frontend/component/src/components/auth-components/auth-input.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 
-import { Input, type InputProps } from '../../ui/input';
+import type { InputProps } from '../../ui/input';
+import { Input } from '../../ui/input';
 import * as styles from './share.css';
 export type AuthInputProps = InputProps & {
   label?: string;

packages/frontend/component/src/components/auth-components/auth-page-container.tsx

@@ -1,10 +1,5 @@
-import {
+import type { FC, PropsWithChildren, ReactNode } from 'react';
-  type FC,
+import { useEffect, useState } from 'react';
-  type PropsWithChildren,
-  type ReactNode,
-  useEffect,
-  useState,
-} from 'react';
 
 import { Empty } from '../../ui/empty';
 import { AffineOtherPageLayout } from '../affine-other-page-layout';

packages/frontend/component/src/components/auth-components/back-button.tsx

@@ -1,8 +1,9 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons';
-import { type FC } from 'react';
+import type { FC } from 'react';
 
-import { Button, type ButtonProps } from '../../ui/button';
+import type { ButtonProps } from '../../ui/button';
+import { Button } from '../../ui/button';
 
 export const BackButton: FC<ButtonProps> = props => {
   const t = useAFFiNEI18N();

packages/frontend/component/src/components/auth-components/count-down-render.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
 
 const formatTime = (time: number): string => {
   const minutes = Math.floor(time / 60);

packages/frontend/component/src/components/auth-components/onboarding-page.tsx

@@ -3,8 +3,9 @@ import { fetchWithTraceReport } from '@affine/graphql';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
+import type { Location } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { type Location, useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useSWR from 'swr';
 
 import { Button } from '../../ui/button';

packages/frontend/component/src/components/auth-components/password-input/index.tsx

@@ -1,9 +1,10 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { passwordStrength } from 'check-password-strength';
-import { type FC, useEffect } from 'react';
+import type { FC } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { Input, type InputProps } from '../../../ui/input';
+import type { InputProps } from '../../../ui/input';
+import { Input } from '../../../ui/input';
 import * as styles from '../share.css';
 import { ErrorIcon } from './error';
 import { SuccessIcon } from './success';

packages/frontend/component/src/components/auth-components/password-input/tag.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import { type FC, useMemo } from 'react';
+import type { FC } from 'react';
+import { useMemo } from 'react';
 
 import type { Status } from './index';
 import { tag } from './style.css';

packages/frontend/component/src/components/auth-components/set-password.tsx

@@ -1,5 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { type FC, useCallback, useRef, useState } from 'react';
+import type { FC } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { Button } from '../../ui/button';
 import { Wrapper } from '../../ui/layout';

packages/frontend/component/src/components/card/block-card/index.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './styles.css';
 

packages/frontend/component/src/components/disable-public-link/index.tsx

@@ -1,6 +1,7 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
-import { ConfirmModal, type ConfirmModalProps } from '../../ui/modal';
+import type { ConfirmModalProps } from '../../ui/modal';
+import { ConfirmModal } from '../../ui/modal';
 
 export const PublicLinkDisableModal = (props: ConfirmModalProps) => {
   const t = useAFFiNEI18N();

packages/frontend/component/src/components/global-loading/index.tsx

@@ -1,5 +1,6 @@
 import { useAtomValue } from 'jotai';
-import { type ReactNode, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Loading } from '../../ui/loading';
 import * as styles from './index.css';

packages/frontend/component/src/components/member-components/accept-invite-page.tsx

@@ -1,5 +1,5 @@
 import { AuthPageContainer } from '@affine/component/auth-components';
-import { type GetInviteInfoQuery } from '@affine/graphql';
+import type { GetInviteInfoQuery } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import { Avatar } from '../../ui/avatar';

packages/frontend/component/src/theme/theme.css.ts

@@ -1,5 +1,8 @@
-import { cssVar } from '@toeverything/theme';
+import {
-import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
+  cssVar,
+  darkCssVariables,
+  lightCssVariables,
+} from '@toeverything/theme';
 import { globalStyle } from '@vanilla-extract/css';
 globalStyle('body', {
   color: cssVar('textPrimaryColor'),

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 type {
-import { forwardRef, type ReactElement, useMemo, useState } from 'react';
+  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 {
+import type {
-  type FC,
+  FC,
-  forwardRef,
+  HTMLAttributes,
-  type HTMLAttributes,
+  PropsWithChildren,
-  type PropsWithChildren,
+  ReactElement,
-  type ReactElement,
-  useMemo,
 } 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 {
+import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
-  type ButtonHTMLAttributes,
+import { forwardRef } from 'react';
-  forwardRef,
-  type MouseEventHandler,
-} 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 type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
-import { forwardRef, type 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, SelectMode } from './types';
-import { type DatePickerProps, defaultDatePickerProps } 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 {
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-  forwardRef,
+import { forwardRef, memo } from 'react';
-  type HTMLAttributes,
-  memo,
-  type PropsWithChildren,
-  type ReactNode,
-} 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 {
+import type { CollectionsIconProps } from './collections-icon';
-  AnimatedCollectionsIcon,
+import { AnimatedCollectionsIcon } from './collections-icon';
-  type CollectionsIconProps,
-} 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 type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { forwardRef, type HTMLAttributes, useMemo } 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 {
-import {
+  CSSProperties,
-  type CSSProperties,
+  HTMLAttributes,
-  forwardRef,
+  PropsWithChildren,
-  type HTMLAttributes,
+  ReactNode,
-  type 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 type { InputProps } from '../input';
-import { ConfirmModal, type ConfirmModalProps } from './confirm-modal';
+import { Input } from '../input';
-import { Modal, type ModalProps } from './modal';
+import type { ConfirmModalProps } from './confirm-modal';
-import { OverlayModal, type OverlayModalProps } from './overlay-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 type { ButtonProps } from '../button';
-import { Modal, type ModalProps } from './modal';
+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 {
+import type { HTMLAttributes, PropsWithChildren } from 'react';
-  type HTMLAttributes,
+import { useEffect, useRef } from 'react';
-  type PropsWithChildren,
-  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);