chore: adjust hor style

.dumi/rehypeAntd.ts

@@ -1,5 +1,6 @@
 import assert from 'assert';
-import { unistUtilVisit, type HastRoot, type UnifiedTransformer } from 'dumi';
+import type { HastRoot, UnifiedTransformer } from 'dumi';
+import { unistUtilVisit } from 'dumi';
 
 /**
  * plugin for modify hast tree when docs compiling

.dumi/theme/builtins/ColorChunk/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
+import type { ColorInput } from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
 
 interface ColorChunkProps {

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { EditOutlined, GithubOutlined } from '@ant-design/icons';
-import { Descriptions, theme, Tooltip, Typography, type GetProp } from 'antd';
+import type { GetProp } from 'antd';
+import { Descriptions, theme, Tooltip, Typography } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import CopyToClipboard from 'react-copy-to-clipboard';

.dumi/theme/builtins/Container/index.tsx

@@ -2,7 +2,7 @@
  * copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container
  */
 import * as React from 'react';
-import { type FC, type ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { Alert } from 'antd';
 
 import useStyles from './style';

.dumi/theme/common/CodePreview.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo, type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Button, Tabs, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import toReactElement from 'jsonml-to-react-element';
@@ -120,7 +121,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
       style: Prism.highlight(styleCode, Prism.languages.css, 'css'),
     };
     // 去掉空的代码类型
-    Object.keys(codes).forEach((key: keyof typeof codes) => {
+    (Object.keys(codes) as (keyof typeof codes)[]).forEach((key) => {
       if (!codes[key]) {
         delete codes[key];
       }

.dumi/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "resolveJsonModule": true
   },
-  "include": ["**/*"]
+  "include": ["**/*", "../typings/index.d.ts"]
 }

.eslintrc.js

@@ -44,6 +44,7 @@ module.exports = {
         'no-unused-expressions': 'off',
         '@typescript-eslint/no-unused-expressions': 2,
         '@typescript-eslint/consistent-type-imports': [2, { disallowTypeAnnotations: false }],
+        'import/consistent-type-specifier-style': 2,
       },
     },
     {

.prettierignore

@@ -31,3 +31,4 @@ components/*/*.jsx
 .eslintignore
 .history
 **/*.yml
+*.html

components/__tests__/setup.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { render } from '../../tests/utils';
 
 describe('SetUp.Test', () => {

components/_util/ActionButton.tsx

@@ -1,5 +1,6 @@
-import useState from 'rc-util/lib/hooks/useState';
 import * as React from 'react';
+import useState from 'rc-util/lib/hooks/useState';
+
 import Button from '../button';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
 import { convertLegacyProps } from '../button/buttonHelpers';

components/_util/__tests__/responsiveObserve.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { render } from '../../../tests/utils';
 import useResponsiveObserver from '../responsiveObserver';
 

components/_util/__tests__/transButton.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import TransButton from '../transButton';
+
 import { render } from '../../../tests/utils';
+import TransButton from '../transButton';
 
 describe('transButton component', () => {
   it('disabled should update style', () => {

components/_util/__tests__/useSyncState.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
+import { fireEvent, render } from '../../../tests/utils';
 import useSyncState from '../hooks/useSyncState';
-import { render, fireEvent } from '../../../tests/utils';
 
 describe('Table', () => {
   it('useSyncState', () => {

components/_util/__tests__/util.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
-import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
+
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import { isStyleSupport } from '../styleChecker';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';

components/_util/__tests__/warning.test.tsx

@@ -1,5 +1,6 @@
-import { render } from '@testing-library/react';
 import React from 'react';
+import { render } from '@testing-library/react';
+
 import { devUseWarning as useWarning } from '../warning';
 
 describe('Test warning', () => {

components/_util/__tests__/wave.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
+
 import mountTest from '../../../tests/shared/mountTest';
 import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils';
+import Checkbox from '../../checkbox';
 import Wave from '../wave';
 import { TARGET_CLS } from '../wave/interface';
-import Checkbox from '../../checkbox';
 
 (global as any).isVisible = true;
 

components/_util/colors.ts

@@ -14,7 +14,7 @@ export const PresetStatusColorTypes = [
 
 export type PresetColorType = PresetColorKey | InverseColor;
 
-export type PresetStatusColorType = typeof PresetStatusColorTypes[number];
+export type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
 
 /**
  * determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.

components/_util/hooks/useProxyImperativeHandle.ts

@@ -1,7 +1,8 @@
 // Proxy the dom ref with `{ nativeElement, otherFn }` type
 // ref: https://github.com/ant-design/ant-design/discussions/45242
 
-import { useImperativeHandle, type Ref } from 'react';
+import { useImperativeHandle } from 'react';
+import type { Ref } from 'react';
 
 function fillProxy(
   element: HTMLElement & { _antProxy?: Record<string, any> },

components/_util/motion.ts

@@ -27,7 +27,7 @@ const initCollapseMotion = (rootCls: string = 'ant'): CSSMotionProps => ({
 
 const SelectPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
 
-export type SelectCommonPlacement = typeof SelectPlacements[number];
+export type SelectCommonPlacement = (typeof SelectPlacements)[number];
 
 const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
   if (transitionName !== undefined) {

components/_util/scrollTo.ts

@@ -1,4 +1,5 @@
 import raf from 'rc-util/lib/raf';
+
 import { easeInOutCubic } from './easings';
 import getScroll, { isWindow } from './getScroll';
 

components/_util/statusUtils.ts

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
+
 import type { ValidateStatus } from '../form/FormItem';
 
 const InputStatuses = ['warning', 'error', ''] as const;
 
-export type InputStatus = typeof InputStatuses[number];
+export type InputStatus = (typeof InputStatuses)[number];
 
 export function getStatusClassNames(
   prefixCls: string,

components/_util/transButton.tsx

@@ -3,8 +3,8 @@
  *
  * This helps accessibility reader to tread as a interactive button to operation.
  */
-import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
 
 interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;

components/_util/wave/WaveEffect.tsx

@@ -4,7 +4,8 @@ import CSSMotion from 'rc-motion';
 import raf from 'rc-util/lib/raf';
 import { render, unmount } from 'rc-util/lib/React/render';
 
-import { TARGET_CLS, type ShowWaveEffect } from './interface';
+import { TARGET_CLS } from './interface';
+import type { ShowWaveEffect } from './interface';
 import { getTargetWaveColor } from './util';
 
 function validateNum(value: number) {

components/_util/wave/useWave.ts

@@ -4,7 +4,8 @@ import raf from 'rc-util/lib/raf';
 
 import { ConfigContext } from '../../config-provider';
 import useToken from '../../theme/useToken';
-import { TARGET_CLS, type ShowWave } from './interface';
+import { TARGET_CLS } from './interface';
+import type { ShowWave } from './interface';
 import showWaveEffect from './WaveEffect';
 
 const useWave = (

components/alert/Alert.tsx

@@ -9,11 +9,11 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 
+import type { ClosableType } from '../_util/hooks/useClosable';
 import { replaceElement } from '../_util/reactNode';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-import type { ClosableType } from '../_util/hooks/useClosable';
 
 export interface AlertProps {
   /** Type of Alert styles, options:`success`, `info`, `warning`, `error` */

components/alert/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import Alert from './Alert';
 
 interface ErrorBoundaryProps {

components/alert/__tests__/index.test.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { resetWarned } from 'rc-util/lib/warning';
-import React from 'react';
+
 import Alert from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';

components/alert/demo/closable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Alert, Space } from 'antd';
 import { CloseSquareFilled } from '@ant-design/icons';
+import { Alert, Space } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');

components/alert/demo/component-token.tsx

@@ -1,5 +1,5 @@
-import { SmileOutlined } from '@ant-design/icons';
 import React from 'react';
+import { SmileOutlined } from '@ant-design/icons';
 import { Alert, ConfigProvider } from 'antd';
 
 const icon = <SmileOutlined />;

components/alert/demo/loop-banner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Marquee from 'react-fast-marquee';
 import { Alert } from 'antd';
+import Marquee from 'react-fast-marquee';
 
 const App: React.FC = () => (
   <Alert

components/alert/demo/smooth-closed.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Alert, Switch, Space } from 'antd';
+import { Alert, Space, Switch } from 'antd';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(true);

components/alert/index.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+
 import type { AlertProps } from './Alert';
 import InternalAlert from './Alert';
 import ErrorBoundary from './ErrorBoundary';

components/anchor/__tests__/Anchor.test.tsx

@@ -1,5 +1,5 @@
-import { resetWarned } from 'rc-util/lib/warning';
 import React, { useState } from 'react';
+import { resetWarned } from 'rc-util/lib/warning';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 import Anchor from '..';

components/anchor/__tests__/cached-context.test.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useContext } from 'react';
+
 import { fireEvent, pureRender } from '../../../tests/utils';
 import Anchor from '../Anchor';
 import AnchorContext from '../context';

components/anchor/__tests__/demo.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
 demoTest('anchor', {

components/anchor/context.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import type { AntAnchor } from './Anchor';
 
 const AnchorContext = React.createContext<AntAnchor | undefined>(undefined);

components/anchor/demo/basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Anchor, Row, Col } from 'antd';
+import { Anchor, Col, Row } from 'antd';
 
 const App: React.FC = () => (
   <Row>

components/anchor/demo/targetOffset.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Anchor, Row, Col } from 'antd';
+import { Anchor, Col, Row } from 'antd';
 
 const App: React.FC = () => {
   const topRef = React.useRef<HTMLDivElement>(null);

components/auto-complete/__tests__/demo.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
 demoTest('auto-complete', {

components/auto-complete/__tests__/focus.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+
 import AutoComplete from '..';
 import { render } from '../../../tests/utils';
 

components/auto-complete/__tests__/index.test.tsx

@@ -1,10 +1,11 @@
-import userEvent from '@testing-library/user-event';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
+
 import AutoComplete from '..';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render, screen } from '../../../tests/utils';
-import { resetWarned } from '../../_util/warning';
 import Input from '../../input';
 
 describe('AutoComplete', () => {

components/auto-complete/demo/render-panel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AutoComplete, Switch, Space } from 'antd';
+import { AutoComplete, Space, Switch } from 'antd';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalAutoComplete } = AutoComplete;
 

components/avatar/AvatarContext.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import type { ScreenSizeMap } from '../_util/responsiveObserver';
 
 export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;

components/avatar/__tests__/Avatar.test.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
+
 import Avatar from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
-import useBreakpoint from '../../grid/hooks/useBreakpoint';
 import ConfigProvider from '../../config-provider';
+import useBreakpoint from '../../grid/hooks/useBreakpoint';
 
 jest.mock('../../grid/hooks/useBreakpoint');
 

components/avatar/__tests__/demo.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
 demoTest('avatar');

components/avatar/demo/badge.tsx

@@ -1,5 +1,5 @@
-import { UserOutlined } from '@ant-design/icons';
 import React from 'react';
+import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Badge, Space } from 'antd';
 
 const App: React.FC = () => (

components/avatar/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { UserOutlined } from '@ant-design/icons';
 import React from 'react';
+import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Space } from 'antd';
 
 const App: React.FC = () => (

components/avatar/demo/component-token.tsx

@@ -1,5 +1,5 @@
-import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import React from 'react';
+import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Avatar, Badge, ConfigProvider, Space, Tooltip } from 'antd';
 
 const App: React.FC = () => (