refactor: fix lint errors

packages/cli/src/commands/connector/add.ts

@@ -1,4 +1,4 @@
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 
 import { log } from '../../utilities';
 import { addConnectors, addOfficialConnectors, inquireInstancePath } from './utils';

packages/cli/src/commands/connector/index.ts

@@ -1,5 +1,5 @@
 import { noop } from '@silverhand/essentials';
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 
 import add from './add';
 import list from './list';

packages/cli/src/commands/connector/list.ts

@@ -1,5 +1,5 @@
 import chalk from 'chalk';
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 
 import { getConnectorPackagesFrom, isOfficialConnector } from './utils';
 

packages/cli/src/commands/connector/remove.ts

@@ -1,6 +1,6 @@
 import chalk from 'chalk';
 import fsExtra from 'fs-extra';
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 
 import { log } from '../../utilities';
 import { getConnectorPackagesFrom } from './utils';

packages/cli/src/commands/database/alteration/index.test.ts

@@ -2,7 +2,7 @@ import { createMockPool } from 'slonik';
 
 import * as functions from '.';
 import * as queries from '../../../queries/logto-config';
-import { QueryType } from '../../../test-utilities';
+import type { QueryType } from '../../../test-utilities';
 import { chooseAlterationsByVersion } from './version';
 
 const mockQuery: jest.MockedFunction<QueryType> = jest.fn();

packages/cli/src/commands/database/alteration/index.ts

@@ -1,12 +1,12 @@
 import path from 'path';
 
-import { AlterationScript } from '@logto/schemas/lib/types/alteration';
+import type { AlterationScript } from '@logto/schemas/lib/types/alteration';
 import { findPackage } from '@logto/shared';
 import { conditionalString } from '@silverhand/essentials';
 import chalk from 'chalk';
 import { copy, existsSync, remove, readdir } from 'fs-extra';
-import { DatabasePool } from 'slonik';
-import { CommandModule } from 'yargs';
+import type { DatabasePool } from 'slonik';
+import type { CommandModule } from 'yargs';
 
 import { createPoolFromConfig } from '../../../database';
 import {
@@ -14,7 +14,7 @@ import {
   updateDatabaseTimestamp,
 } from '../../../queries/logto-config';
 import { getPathInModule, log } from '../../../utilities';
-import { AlterationFile } from './type';
+import type { AlterationFile } from './type';
 import { chooseAlterationsByVersion } from './version';
 
 const alterationFilenameRegex = /-(\d+)-?.*\.js$/;

packages/cli/src/commands/database/alteration/version.ts

@@ -4,7 +4,7 @@ import inquirer from 'inquirer';
 import { SemVer, compare, eq, gt } from 'semver';
 
 import { findLastIndex, isTty, log } from '../../../utilities';
-import { AlterationFile } from './type';
+import type { AlterationFile } from './type';
 
 const getVersionFromFilename = (filename: string) => {
   try {

packages/cli/src/commands/database/config.ts

@@ -1,7 +1,8 @@
-import { logtoConfigGuards, LogtoConfigKey, logtoConfigKeys } from '@logto/schemas';
+import type { LogtoConfigKey } from '@logto/schemas';
+import { logtoConfigGuards, logtoConfigKeys } from '@logto/schemas';
 import { deduplicate, noop } from '@silverhand/essentials';
 import chalk from 'chalk';
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 
 import { createPoolFromConfig } from '../../database';
 import { getRowsByKeys, updateValueByKey } from '../../queries/logto-config';

packages/cli/src/commands/database/index.ts

@@ -1,5 +1,5 @@
 import { noop } from '@silverhand/essentials';
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 
 import alteration from './alteration';
 import config from './config';

packages/cli/src/commands/database/seed/index.ts

@@ -4,9 +4,10 @@ import path from 'path';
 import { logtoConfigGuards, LogtoOidcConfigKey, seeds } from '@logto/schemas';
 import { buildApplicationSecret } from '@logto/shared';
 import chalk from 'chalk';
-import { DatabasePool, DatabaseTransactionConnection, sql } from 'slonik';
+import type { DatabasePool, DatabaseTransactionConnection } from 'slonik';
+import { sql } from 'slonik';
 import { raw } from 'slonik-sql-tag-raw';
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 import { z } from 'zod';
 
 import { createPoolAndDatabaseIfNeeded, insertInto } from '../../../database';

packages/cli/src/commands/database/seed/oidc-config.ts

@@ -2,7 +2,8 @@ import { generateKeyPair } from 'crypto';
 import { readFile } from 'fs/promises';
 import { promisify } from 'util';
 
-import { LogtoOidcConfigKey, LogtoOidcConfigType } from '@logto/schemas';
+import type { LogtoOidcConfigType } from '@logto/schemas';
+import { LogtoOidcConfigKey } from '@logto/schemas';
 import { getEnv, getEnvAsStringArray } from '@silverhand/essentials';
 import { nanoid } from 'nanoid';
 

packages/cli/src/commands/install/index.ts

@@ -1,5 +1,5 @@
 import chalk from 'chalk';
-import { CommandModule } from 'yargs';
+import type { CommandModule } from 'yargs';
 
 import { getDatabaseUrlFromConfig } from '../../database';
 import { log } from '../../utilities';

packages/cli/src/database.ts

@@ -1,4 +1,4 @@
-import { SchemaLike } from '@logto/schemas';
+import type { SchemaLike } from '@logto/schemas';
 import { convertToPrimitiveOrSql } from '@logto/shared';
 import { assert } from '@silverhand/essentials';
 import decamelize from 'decamelize';

packages/cli/src/include.d/slonik-interceptor-preset.d.ts

@@ -1,5 +1,5 @@
 declare module 'slonik-interceptor-preset' {
-  import { Interceptor } from 'slonik';
+  import type { Interceptor } from 'slonik';
 
   export const createInterceptors: (config?: {
     benchmarkQueries: boolean;

packages/cli/src/queries/logto-config.test.ts

@@ -2,7 +2,8 @@ import { AlterationStateKey, LogtoConfigs } from '@logto/schemas';
 import { convertToIdentifiers } from '@logto/shared';
 import { createMockPool, createMockQueryResult, sql } from 'slonik';
 
-import { expectSqlAssert, QueryType } from '../test-utilities';
+import type { QueryType } from '../test-utilities';
+import { expectSqlAssert } from '../test-utilities';
 import { updateDatabaseTimestamp, getCurrentDatabaseAlterationTimestamp } from './logto-config';
 
 const mockQuery: jest.MockedFunction<QueryType> = jest.fn();

packages/cli/src/queries/logto-config.ts

@@ -1,14 +1,9 @@
-import {
-  AlterationState,
-  LogtoConfig,
-  logtoConfigGuards,
-  LogtoConfigKey,
-  LogtoConfigs,
-  AlterationStateKey,
-} from '@logto/schemas';
+import type { AlterationState, LogtoConfig, LogtoConfigKey } from '@logto/schemas';
+import { logtoConfigGuards, LogtoConfigs, AlterationStateKey } from '@logto/schemas';
 import { convertToIdentifiers } from '@logto/shared';
-import { Nullable } from '@silverhand/essentials';
-import { DatabasePool, DatabaseTransactionConnection, sql } from 'slonik';
+import type { Nullable } from '@silverhand/essentials';
+import type { DatabasePool, DatabaseTransactionConnection } from 'slonik';
+import { sql } from 'slonik';
 import { z } from 'zod';
 
 const { table, fields } = convertToIdentifiers(LogtoConfigs);

packages/cli/src/test-utilities.ts

@@ -1,7 +1,7 @@
 // Copied from core
 
-import { QueryResult, QueryResultRow } from 'slonik';
-import { PrimitiveValueExpression } from 'slonik/dist/src/types.d';
+import type { QueryResult, QueryResultRow } from 'slonik';
+import type { PrimitiveValueExpression } from 'slonik/dist/src/types.d';
 
 export type QueryType = (
   sql: string,

packages/cli/src/utilities.ts

@@ -2,9 +2,11 @@ import { execSync } from 'child_process';
 import { createWriteStream } from 'fs';
 import path from 'path';
 
-import { conditionalString, Optional } from '@silverhand/essentials';
+import type { Optional } from '@silverhand/essentials';
+import { conditionalString } from '@silverhand/essentials';
 import chalk from 'chalk';
-import got, { Progress } from 'got';
+import type { Progress } from 'got';
+import got from 'got';
 import { HttpsProxyAgent } from 'hpagent';
 import inquirer from 'inquirer';
 import ora from 'ora';

packages/console/src/components/ActionMenu/ActionMenuButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 
-import Button, { Props as ButtonProps } from '../Button';
+import type { Props as ButtonProps } from '../Button';
+import Button from '../Button';
 
 const ActionMenuButton = forwardRef<HTMLDivElement, ButtonProps>((props, anchorReference) => (
   <div ref={anchorReference} style={{ display: 'inline-block' }}>

packages/console/src/components/ActionMenu/index.tsx

@@ -1,6 +1,7 @@
-import { ReactNode, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useRef, useState } from 'react';
 
-import { Props as ButtonProps } from '../Button';
+import type { Props as ButtonProps } from '../Button';
 import Dropdown from '../Dropdown';
 import ActionMenuButton from './ActionMenuButton';
 import * as styles from './index.module.scss';

packages/console/src/components/Alert/index.tsx

@@ -1,6 +1,6 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import Info from '@/assets/images/info.svg';
 import LinkButton from '@/components/LinkButton';

packages/console/src/components/AppBoundary/index.tsx

@@ -1,5 +1,6 @@
 import { AppearanceMode } from '@logto/schemas';
-import { ReactNode, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
 
 import useUserPreferences from '@/hooks/use-user-preferences';
 import initI18n from '@/i18n/init';

packages/console/src/components/AppContent/components/Sidebar/components/Contact/hook.tsx

@@ -1,4 +1,4 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import { AppearanceMode } from '@logto/schemas';
 
 import DiscordDark from '@/assets/images/discord-dark.svg';

packages/console/src/components/AppContent/components/Sidebar/components/Item/index.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
-import { ReactChild, ReactNode, useMemo, useState } from 'react';
-import { TFuncKey, useTranslation } from 'react-i18next';
+import type { ReactChild, ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+import type { TFuncKey } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { getPath } from '../../utils';

packages/console/src/components/AppContent/components/Sidebar/components/Section/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/AppContent/components/Sidebar/hook.tsx

@@ -1,6 +1,6 @@
-import { Optional } from '@silverhand/essentials';
-import { FC, ReactNode } from 'react';
-import { TFuncKey } from 'react-i18next';
+import type { Optional } from '@silverhand/essentials';
+import type { FC, ReactNode } from 'react';
+import type { TFuncKey } from 'react-i18next';
 
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useUserPreferences from '@/hooks/use-user-preferences';

packages/console/src/components/AppContent/components/Sidebar/icons/BarGraph.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const BarGraph = (props: SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>

packages/console/src/components/AppContent/components/Sidebar/icons/Bolt.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Bolt = (props: SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>

packages/console/src/components/AppContent/components/Sidebar/icons/Box.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Box = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/Cloud.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Cloud = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/Connection.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Connection = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/Contact.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Contact = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/Document.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Document = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/Gear.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Gear = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/List.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const List = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/UserProfile.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const UserProfile = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/Sidebar/icons/Web.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 const Web = (props: SVGProps<SVGSVGElement>) => {
   return (

packages/console/src/components/AppContent/components/UserInfo/index.tsx

@@ -1,4 +1,5 @@
-import { useLogto, IdTokenClaims } from '@logto/react';
+import type { IdTokenClaims } from '@logto/react';
+import { useLogto } from '@logto/react';
 import classNames from 'classnames';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';

packages/console/src/components/ApplicationIcon/index.tsx

@@ -1,4 +1,5 @@
-import { AppearanceMode, ApplicationType } from '@logto/schemas';
+import type { ApplicationType } from '@logto/schemas';
+import { AppearanceMode } from '@logto/schemas';
 
 import { darkModeApplicationIconMap, lightModeApplicationIconMap } from '@/consts';
 import { useTheme } from '@/hooks/use-theme';

packages/console/src/components/ApplicationName/index.tsx

@@ -1,4 +1,4 @@
-import { Application } from '@logto/schemas';
+import type { Application } from '@logto/schemas';
 import { adminConsoleApplicationId } from '@logto/schemas/lib/seeds';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';

packages/console/src/components/AuditLogTable/components/ApplicationSelector/index.tsx

@@ -1,4 +1,4 @@
-import { Application } from '@logto/schemas';
+import type { Application } from '@logto/schemas';
 import { adminConsoleApplicationId } from '@logto/schemas/lib/seeds';
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';

packages/console/src/components/AuditLogTable/index.tsx

@@ -1,4 +1,5 @@
-import { LogDto, LogResult } from '@logto/schemas';
+import type { LogDto } from '@logto/schemas';
+import { LogResult } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +12,7 @@ import TableEmpty from '@/components/Table/TableEmpty';
 import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import UserName from '@/components/UserName';
-import { RequestError } from '@/hooks/use-api';
+import type { RequestError } from '@/hooks/use-api';
 import * as tableStyles from '@/scss/table.module.scss';
 
 import ApplicationSelector from './components/ApplicationSelector';

packages/console/src/components/Button/index.tsx

@@ -1,11 +1,12 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { HTMLProps, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
+import type { HTMLProps, ReactElement, ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Ring as Spinner } from '@/components/Spinner';
 
-import DangerousRaw from '../DangerousRaw';
+import type DangerousRaw from '../DangerousRaw';
 import * as styles from './index.module.scss';
 
 export type ButtonType = 'primary' | 'danger' | 'outline' | 'text' | 'default' | 'branding';

packages/console/src/components/Card/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { forwardRef, Ref, ReactNode } from 'react';
+import type { Ref, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/CardTitle/index.tsx

@@ -1,9 +1,9 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DangerousRaw from '../DangerousRaw';
+import type DangerousRaw from '../DangerousRaw';
 import * as styles from './index.module.scss';
 
 type Props = {

packages/console/src/components/Checkbox/index.tsx

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid';
-import { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
 
 import Icon from './Icon';
 import * as styles from './index.module.scss';

packages/console/src/components/CodeEditor/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { ChangeEvent, KeyboardEvent, useRef } from 'react';
+import type { ChangeEvent, KeyboardEvent } from 'react';
+import { useRef } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark as theme } from 'react-syntax-highlighter/dist/esm/styles/prism';
 

packages/console/src/components/ColorPicker/index.tsx

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid';
-import { ChangeEventHandler, useState } from 'react';
+import type { ChangeEventHandler } from 'react';
+import { useState } from 'react';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/ConfirmModal/index.tsx

@@ -1,9 +1,10 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import ReactModal from 'react-modal';
 
-import Button, { ButtonType } from '@/components/Button';
+import type { ButtonType } from '@/components/Button';
+import Button from '@/components/Button';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 import ModalLayout from '../ModalLayout';

packages/console/src/components/CopyToClipboard/index.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
-import { MouseEventHandler, useEffect, useMemo, useRef, useState } from 'react';
-import { TFuncKey, useTranslation } from 'react-i18next';
+import type { MouseEventHandler } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { TFuncKey } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Copy from '@/assets/images/copy.svg';
 import EyeClosed from '@/assets/images/eye-closed.svg';

packages/console/src/components/DangerousRaw/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type Props = {
   children: ReactNode;

packages/console/src/components/DateTime/index.tsx

@@ -1,4 +1,4 @@
-import { Nullable } from '@silverhand/essentials';
+import type { Nullable } from '@silverhand/essentials';
 import dayjs from 'dayjs';
 
 type Props = {

packages/console/src/components/DeleteConfirmModal/index.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
 
 import ConfirmModal from '@/components/ConfirmModal';
 import TextInput from '@/components/TextInput';

packages/console/src/components/Drawer/index.tsx

@@ -1,4 +1,4 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import ReactModal from 'react-modal';
 
 import Close from '@/assets/images/close.svg';

packages/console/src/components/Dropdown/DropdownItem.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
 
 import { onKeyDownHandler } from '@/utilities/a11y';
 

packages/console/src/components/Dropdown/index.tsx

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
-import { ReactNode, RefObject, useRef } from 'react';
+import type { ReactNode, RefObject } from 'react';
+import { useRef } from 'react';
 import ReactModal from 'react-modal';
 
-import usePosition, { HorizontalAlignment } from '@/hooks/use-position';
+import type { HorizontalAlignment } from '@/hooks/use-position';
+import usePosition from '@/hooks/use-position';
 import { onKeyDownHandler } from '@/utilities/a11y';
 
 import * as styles from './index.module.scss';

packages/console/src/components/ErrorBoundary/index.tsx

@@ -1,5 +1,6 @@
 import { conditional } from '@silverhand/essentials';
-import { Component, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { Component } from 'react';
 
 import AppError from '../AppError';
 

packages/console/src/components/FormField/index.tsx

@@ -1,11 +1,12 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { ReactElement, ReactNode, useRef } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Tip from '@/assets/images/tip.svg';
 
-import DangerousRaw from '../DangerousRaw';
+import type DangerousRaw from '../DangerousRaw';
 import Spacer from '../Spacer';
 import Tooltip from '../Tooltip';
 import * as styles from './index.module.scss';

packages/console/src/components/IconButton/index.tsx

@@ -1,7 +1,8 @@
-import { AdminConsoleKey } from '@logto/phrases';
-import { Nullable } from '@silverhand/essentials';
+import type { AdminConsoleKey } from '@logto/phrases';
+import type { Nullable } from '@silverhand/essentials';
 import classNames from 'classnames';
-import { ForwardedRef, forwardRef, HTMLProps, useImperativeHandle, useRef } from 'react';
+import type { ForwardedRef, HTMLProps } from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Tooltip from '../Tooltip';

packages/console/src/components/ItemPreview/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
-import { ReactNode } from 'react';
-import { Link, To } from 'react-router-dom';
+import type { ReactNode } from 'react';
+import type { To } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/LinkButton/index.tsx

@@ -1,10 +1,10 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import DangerousRaw from '../DangerousRaw';
+import type DangerousRaw from '../DangerousRaw';
 import * as styles from './index.module.scss';
 
 type Props = {

packages/console/src/components/Markdown/components/GithubRawImage/index.tsx

@@ -1,4 +1,5 @@
-import { HTMLProps, useRef, useState } from 'react';
+import type { HTMLProps } from 'react';
+import { useRef, useState } from 'react';
 
 const githubRawUrlPrefix = 'https://raw.githubusercontent.com/logto-io/logto/master';
 

packages/console/src/components/Markdown/index.tsx

@@ -1,4 +1,5 @@
-import { conditionalString, Optional } from '@silverhand/essentials';
+import type { Optional } from '@silverhand/essentials';
+import { conditionalString } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { memo, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';

packages/console/src/components/ModalLayout/index.tsx

@@ -1,6 +1,6 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import Close from '@/assets/images/close.svg';
 

packages/console/src/components/MultiTextInput/index.tsx

@@ -1,5 +1,6 @@
-import { AdminConsoleKey } from '@logto/phrases';
-import { KeyboardEvent, useMemo, useState } from 'react';
+import type { AdminConsoleKey } from '@logto/phrases';
+import type { KeyboardEvent } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Minus from '@/assets/images/minus.svg';
@@ -9,7 +10,7 @@ import ConfirmModal from '../ConfirmModal';
 import IconButton from '../IconButton';
 import TextInput from '../TextInput';
 import * as styles from './index.module.scss';
-import { MultiTextInputError } from './types';
+import type { MultiTextInputError } from './types';
 
 type Props = {
   title: AdminConsoleKey;
@@ -53,7 +54,7 @@ const MultiTextInput = ({ title, value, onChange, onKeyPress, error, placeholder
           <div className={styles.deletableInput}>
             <TextInput
               hasError={Boolean(
-                error?.inputs?.[fieldIndex] || (fieldIndex === 0 && error?.required)
+                error?.inputs?.[fieldIndex] ?? (fieldIndex === 0 && error?.required)
               )}
               value={fieldValue}
               placeholder={placeholder}

packages/console/src/components/MultiTextInput/utils.ts

@@ -2,7 +2,8 @@ import { t } from 'i18next';
 
 import { safeParseJson } from '@/utilities/json';
 
-import { MultiTextInputError, multiTextInputErrorGuard, MultiTextInputRule } from './types';
+import type { MultiTextInputError, MultiTextInputRule } from './types';
+import { multiTextInputErrorGuard } from './types';
 
 export const validate = (
   value?: string[],

packages/console/src/components/RadioGroup/Radio.tsx

@@ -1,6 +1,7 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import type { KeyboardEventHandler, ReactNode } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import * as styles from './index.module.scss';

packages/console/src/components/RadioGroup/index.tsx

@@ -1,7 +1,9 @@
 import classNames from 'classnames';
-import { Children, cloneElement, forwardRef, isValidElement, LegacyRef, ReactNode } from 'react';
+import type { LegacyRef, ReactNode } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
 
-import Radio, { Props as RadioProps } from './Radio';
+import type { Props as RadioProps } from './Radio';
+import Radio from './Radio';
 import * as styles from './index.module.scss';
 
 type Props = {

packages/console/src/components/Search/index.tsx

@@ -1,4 +1,5 @@
-import { FormEventHandler, KeyboardEventHandler, useState } from 'react';
+import type { FormEventHandler, KeyboardEventHandler } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import SearchIcon from '@/assets/images/search.svg';

packages/console/src/components/Select/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { ReactEventHandler, ReactNode, useRef, useState } from 'react';
+import type { ReactEventHandler, ReactNode } from 'react';
+import { useRef, useState } from 'react';
 
 import Close from '@/assets/images/close.svg';
 import KeyboardArrowDown from '@/assets/images/keyboard-arrow-down.svg';

packages/console/src/components/Status/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/Switch/index.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, HTMLProps, ReactNode, Ref } from 'react';
+import type { HTMLProps, ReactNode, Ref } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/Table/TableEmpty.tsx

@@ -1,5 +1,5 @@
 import { AppearanceMode } from '@logto/schemas';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import EmptyDark from '@/assets/images/table-empty-dark.svg';

packages/console/src/components/TextInput/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { forwardRef, HTMLProps, ReactNode, ForwardedRef } from 'react';
+import type { HTMLProps, ReactNode, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/Textarea/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { ForwardedRef, forwardRef, HTMLProps } from 'react';
+import type { ForwardedRef, HTMLProps } from 'react';
+import { forwardRef } from 'react';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/Tooltip/index.tsx

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
-import { ReactNode, RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import type { ReactNode, RefObject } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import usePosition, { VerticalAlignment, HorizontalAlignment } from '@/hooks/use-position';
+import type { VerticalAlignment, HorizontalAlignment } from '@/hooks/use-position';
+import usePosition from '@/hooks/use-position';
 
 import * as styles from './index.module.scss';
 

packages/console/src/components/Transfer/DragDropProvider.tsx

@@ -1,5 +1,6 @@
 import { conditionalString } from '@silverhand/essentials';
-import { createContext, ReactNode, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useMemo, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 

packages/console/src/components/Transfer/DraggableItem.tsx

@@ -1,6 +1,7 @@
-import { Nullable } from '@silverhand/essentials';
+import type { Nullable } from '@silverhand/essentials';
 import type { Identifier } from 'dnd-core';
-import { ReactNode, useContext, useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
 import { DragDropContext } from './DragDropProvider';

packages/console/src/components/Transfer/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import CircleMinus from '@/assets/images/circle-minus.svg';

packages/console/src/components/UnsavedChangesAlertModal/index.tsx

@@ -1,7 +1,8 @@
 import type { Blocker, Transition } from 'history';
 import { useCallback, useContext, useLayoutEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { UNSAFE_NavigationContext, Navigator } from 'react-router-dom';
+import type { Navigator } from 'react-router-dom';
+import { UNSAFE_NavigationContext } from 'react-router-dom';
 
 import ConfirmModal from '../ConfirmModal';
 

packages/console/src/components/UserName/index.tsx

@@ -1,9 +1,10 @@
-import { User, UserRole } from '@logto/schemas';
+import type { User } from '@logto/schemas';
+import { UserRole } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import useSWR from 'swr';
 
-import { RequestError } from '@/hooks/use-api';
+import type { RequestError } from '@/hooks/use-api';
 
 import * as styles from './index.module.scss';
 

packages/console/src/consts/connectors.ts

@@ -1,4 +1,4 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import { ConnectorPlatform, ConnectorType } from '@logto/schemas';
 
 import EmailConnector from '@/assets/images/connector-email.svg';

packages/console/src/hooks/use-api.ts

@@ -1,5 +1,5 @@
 import { useLogto } from '@logto/react';
-import { RequestErrorBody } from '@logto/schemas';
+import type { RequestErrorBody } from '@logto/schemas';
 import { managementResource } from '@logto/schemas/lib/seeds';
 import ky from 'ky';
 import { useMemo } from 'react';

packages/console/src/hooks/use-connector-groups.ts

@@ -1,9 +1,10 @@
-import { ConnectorResponse, ConnectorType } from '@logto/schemas';
+import type { ConnectorResponse } from '@logto/schemas';
+import { ConnectorType } from '@logto/schemas';
 import { useMemo } from 'react';
 import useSWR from 'swr';
 
-import { RequestError } from '@/hooks/use-api';
-import { ConnectorGroup } from '@/types/connector';
+import type { RequestError } from '@/hooks/use-api';
+import type { ConnectorGroup } from '@/types/connector';
 
 // Group connectors by target
 const useConnectorGroups = () => {

packages/console/src/hooks/use-connector-in-use.ts

@@ -1,7 +1,8 @@
-import { ConnectorType, SignInExperience, SignInMethodState } from '@logto/schemas';
+import type { SignInExperience } from '@logto/schemas';
+import { ConnectorType, SignInMethodState } from '@logto/schemas';
 import useSWR from 'swr';
 
-import { RequestError } from './use-api';
+import type { RequestError } from './use-api';
 
 const useConnectorInUse = (type?: ConnectorType, target?: string): boolean | undefined => {
   const { data } = useSWR<SignInExperience, RequestError>(target && type && '/api/sign-in-exp');

packages/console/src/hooks/use-position.ts

@@ -1,4 +1,5 @@
-import { RefObject, useCallback, useEffect, useState } from 'react';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export type VerticalAlignment = 'top' | 'center' | 'bottom';
 

packages/console/src/hooks/use-scroll.ts

@@ -1,4 +1,4 @@
-import { Nullable } from '@silverhand/essentials';
+import type { Nullable } from '@silverhand/essentials';
 import { useState, useEffect, useCallback } from 'react';
 
 const useScroll = (contentRef: Nullable<HTMLDivElement>) => {

packages/console/src/hooks/use-settings.ts

@@ -1,8 +1,9 @@
 import { useLogto } from '@logto/react';
-import { AdminConsoleConfig, Setting } from '@logto/schemas';
+import type { AdminConsoleConfig, Setting } from '@logto/schemas';
 import useSWR from 'swr';
 
-import useApi, { RequestError } from './use-api';
+import type { RequestError } from './use-api';
+import useApi from './use-api';
 
 const useSettings = () => {
   const { isAuthenticated, error: authError } = useLogto();

packages/console/src/hooks/use-swr-fetcher.ts

@@ -1,8 +1,8 @@
-import { RequestErrorBody } from '@logto/schemas';
+import type { RequestErrorBody } from '@logto/schemas';
 import { HTTPError } from 'ky';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BareFetcher } from 'swr';
+import type { BareFetcher } from 'swr';
 
 import useApi, { RequestError } from './use-api';
 

packages/console/src/hooks/use-swr-options.ts

@@ -1,4 +1,4 @@
-import { SWRConfiguration } from 'swr';
+import type { SWRConfiguration } from 'swr';
 
 import { RequestError } from './use-api';
 import useSwrFetcher from './use-swr-fetcher';

packages/console/src/hooks/use-ui-languages.ts

@@ -1,11 +1,12 @@
-import { LanguageTag } from '@logto/language-kit';
+import type { LanguageTag } from '@logto/language-kit';
 import { builtInLanguages as builtInUiLanguages } from '@logto/phrases-ui';
 import { useCallback, useMemo } from 'react';
 import useSWR from 'swr';
 
-import { CustomPhraseResponse } from '@/types/custom-phrase';
+import type { CustomPhraseResponse } from '@/types/custom-phrase';
 
-import useApi, { RequestError } from './use-api';
+import type { RequestError } from './use-api';
+import useApi from './use-api';
 
 const useUiLanguages = () => {
   const {

packages/console/src/hooks/use-user-preferences.ts

@@ -1,7 +1,7 @@
 import { builtInLanguages as builtInConsoleLanguages } from '@logto/phrases';
 import { useLogto } from '@logto/react';
 import { AppearanceMode } from '@logto/schemas';
-import { Nullable, Optional } from '@silverhand/essentials';
+import type { Nullable, Optional } from '@silverhand/essentials';
 import { t } from 'i18next';
 import { useCallback, useEffect, useMemo } from 'react';
 import { toast } from 'react-hot-toast';
@@ -10,7 +10,8 @@ import { z } from 'zod';
 
 import { themeStorageKey } from '@/consts';
 
-import useApi, { RequestError } from './use-api';
+import type { RequestError } from './use-api';
+import useApi from './use-api';
 import useLogtoUserId from './use-logto-user-id';
 
 const userPreferencesGuard = z.object({

packages/console/src/i18n/init.ts

@@ -1,4 +1,4 @@
-import { LanguageTag } from '@logto/language-kit';
+import type { LanguageTag } from '@logto/language-kit';
 import resources from '@logto/phrases';
 import i18next from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';

packages/console/src/include.d/react-app.d.ts

@@ -36,7 +36,7 @@ declare module '*.webp' {
 }
 
 declare module '*.svg' {
-  import * as React from 'react';
+  import type * as React from 'react';
 
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & { title?: string }

packages/console/src/include.d/react-i18next.d.ts

@@ -1,6 +1,6 @@
 // https://react.i18next.com/latest/typescript#create-a-declaration-file
 
-import { LocalPhrase } from '@logto/phrases';
+import type { LocalPhrase } from '@logto/phrases';
 
 declare module 'react-i18next' {
   interface CustomTypeOptions {

packages/console/src/mdx-components/DetailsSummary/index.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
-import { ReactNode, useState, useCallback } from 'react';
-import AnimateHeight, { Height } from 'react-animate-height';
+import type { ReactNode } from 'react';
+import { useState, useCallback } from 'react';
+import type { Height } from 'react-animate-height';
+import AnimateHeight from 'react-animate-height';
 
 import ArrowRight from '@/assets/images/triangle-right.svg';
 import { onKeyDownHandler } from '@/utilities/a11y';

packages/console/src/mdx-components/Step/index.tsx

@@ -1,6 +1,7 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { PropsWithChildren, useEffect, useRef, useState, useCallback } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 
 import KeyboardArrowDown from '@/assets/images/keyboard-arrow-down.svg';
 import KeyboardArrowUp from '@/assets/images/keyboard-arrow-up.svg';

packages/console/src/mdx-components/TabItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export type Props = {
   children: ReactNode;

packages/console/src/mdx-components/Tabs/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Nullable } from '@silverhand/essentials';
+import type { Nullable } from '@silverhand/essentials';
 import { useState, isValidElement, type ReactElement, cloneElement, useRef, Children } from 'react';
 
 import type { Props as TabItemProps } from '../TabItem';

packages/console/src/mdx-components/UriInputField/index.tsx

@@ -1,6 +1,7 @@
-import { AdminConsoleKey } from '@logto/phrases';
-import { Application } from '@logto/schemas';
-import { useRef, KeyboardEvent } from 'react';
+import type { AdminConsoleKey } from '@logto/phrases';
+import type { Application } from '@logto/schemas';
+import type { KeyboardEvent } from 'react';
+import { useRef } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -11,8 +12,9 @@ import FormField from '@/components/FormField';
 import MultiTextInput from '@/components/MultiTextInput';
 import { convertRhfErrorMessage, createValidatorForRhf } from '@/components/MultiTextInput/utils';
 import TextInput from '@/components/TextInput';
-import useApi, { RequestError } from '@/hooks/use-api';
-import { GuideForm } from '@/types/guide';
+import type { RequestError } from '@/hooks/use-api';
+import useApi from '@/hooks/use-api';
+import type { GuideForm } from '@/types/guide';
 import { uriValidator } from '@/utilities/validator';
 
 import * as styles from './index.module.scss';