refactor: migrate rc-* to @rc-component/* and classnames to clsx

package.json

@@ -15,7 +15,7 @@
     "publish-version": "tsx ./scripts/synchronize-version.ts",
     "prepublishOnly": "tsx ./scripts/pre-publish.ts",
     "precompile": "npm run precompile --workspaces",
-    "prepare": "husky install",
+    "prepare": "husky",
     "size-limit": "size-limit",
     "lint": "npm run lint --workspaces",
     "tsc": "npm run tsc --workspaces",

packages/x-markdown/.jest.js

@@ -1,4 +1,5 @@
 const compileModules = [
+  '@rc-component',
   'react-sticky-box',
   'rc-tween-one',
   '@babel',

packages/x-markdown/package.json

@@ -49,7 +49,7 @@
   "license": "MIT",
   "description": "placeholder for @ant-design/x-markdown",
   "dependencies": {
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "dompurify": "^3.2.6",
     "html-react-parser": "^5.2.5",
     "katex": "^0.16.22",

packages/x-markdown/src/XMarkdown/index.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useMemo } from 'react';
 import { Parser, Renderer } from './core';
 import { useStreaming } from './hooks';
@@ -21,7 +21,7 @@ const XMarkdown: React.FC<XMarkdownProps> = React.memo((props) => {
   } = props;
 
   // ============================ style ============================
-  const mergedCls = classnames('x-markdown', rootClassName, className);
+  const mergedCls = clsx('x-markdown', rootClassName, className);
 
   // ============================ Streaming ============================
   const displayContent = useStreaming(content || children || '', { streaming, components });

packages/x-markdown/tests/setup.ts

@@ -40,7 +40,7 @@ export function fillWindowEnv(window: Window | DOMWindow) {
     });
   }
 
-  // Fix css-animation or rc-motion deps on these
+  // Fix css-animation or @rc-component/motion deps on these
   // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35
   // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
   win.AnimationEvent = win.AnimationEvent || win.Event;

packages/x-markdown/tests/setupAfterEnv.ts

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
 
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import { toHaveNoViolations } from 'jest-axe';
 import jsdom from 'jsdom';
 import format, { plugins } from 'pretty-format';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 
 // Mock `scrollTo` since jsdom do not support it
 spyElementPrototypes(HTMLElement, {

packages/x-sdk/.jest.js

@@ -1,4 +1,5 @@
 const compileModules = [
+  '@rc-component',
   'react-sticky-box',
   'rc-tween-one',
   '@babel',

packages/x-sdk/package.json

@@ -44,7 +44,7 @@
   "license": "MIT",
   "description": "placeholder for @ant-design/x-sdk",
   "dependencies": {
-    "rc-util": "^5.43.0"
+    "@rc-component/util": "^1.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.2",

packages/x-sdk/src/x-chat/index.ts

@@ -1,4 +1,4 @@
-import { useEvent } from 'rc-util';
+import { useEvent } from '@rc-component/util';
 import React, { useEffect, useState } from 'react';
 import type { AnyObject } from '../_util/type';
 import { AbstractChatProvider } from '../chat-providers';

packages/x-sdk/tests/setup.ts

@@ -41,7 +41,7 @@ export function fillWindowEnv(window: Window | DOMWindow) {
     });
   }
 
-  // Fix css-animation or rc-motion deps on these
+  // Fix css-animation or @rc-component/motion deps on these
   // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35
   // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
   win.AnimationEvent = win.AnimationEvent || win.Event;

packages/x-sdk/tests/utils.tsx

@@ -1,8 +1,8 @@
+import { _rs as onEsResize } from '@rc-component/resize-observer/es/utils/observerUtil';
+import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';
 import type { RenderOptions, RenderResult } from '@testing-library/react';
 import { act, render } from '@testing-library/react';
 import MockDate from 'mockdate';
-import { _rs as onEsResize } from 'rc-resize-observer/es/utils/observerUtil';
-import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
 import type { ReactElement } from 'react';
 import React, { createRef, StrictMode } from 'react';
 

packages/x/.dumi/components/SemanticPreview.tsx

@@ -1,8 +1,8 @@
 import { XProvider } from '@ant-design/x';
+import set from '@rc-component/util/lib/utils/set';
 import { Col, Flex, Popover, Row, Tag, Typography, theme } from 'antd';
 import { createStyles, css } from 'antd-style';
-import classnames from 'classnames';
-import set from 'rc-util/lib/utils/set';
+import { clsx } from 'clsx';
 /* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */
 import React from 'react';
 
@@ -149,13 +149,13 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
 
   // ======================== Render ========================
   return (
-    <div className={classnames(styles.container)} ref={containerRef}>
+    <div className={styles.container} ref={containerRef}>
       <Row style={{ minHeight: height }}>
-        <Col span={16} className={classnames(styles.colWrap)}>
+        <Col span={16} className={styles.colWrap}>
           <XProvider theme={{ token: { motion: false } }}>{cloneNode}</XProvider>
         </Col>
         <Col span={8}>
-          <ul className={classnames(styles.listWrap)}>
+          <ul className={styles.listWrap}>
             {semantics.map<React.ReactNode>((semantic) => (
               <Popover
                 key={semantic.name}
@@ -179,7 +179,7 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
                 }
               >
                 <li
-                  className={classnames(styles.listItem)}
+                  className={styles.listItem}
                   onMouseEnter={() => setHoverSemantic(semantic.name)}
                   onMouseLeave={() => setHoverSemantic(null)}
                 >
@@ -201,7 +201,7 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
         </Col>
       </Row>
       <div
-        className={classnames(
+        className={clsx(
           styles.marker,
           hoverSemantic ? styles.markerActive : styles.markerNotActive,
           positionMotion ? styles.markerMotion : styles.markerNotMotion,

packages/x/.dumi/hooks/useMenu.tsx

@@ -2,7 +2,7 @@ import { version } from '@ant-design/x';
 import type { MenuProps } from 'antd';
 import { Flex, Tag } from 'antd';
 import { createStyles } from 'antd-style';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 import React, { useMemo } from 'react';
 import Link from '../theme/common/Link';
@@ -61,13 +61,13 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
 
   if (!before && !after) {
     return (
-      <Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
+      <Link to={`${link}${search}`} className={clsx(className, { [styles.link]: tag })}>
         <Flex justify="flex-start" align="center" gap="small">
           <span>{title}</span>
           {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
         </Flex>
         {tag && (
-          <Tag variant="filled" className={classnames(styles.tag)} color={getTagColor(tag)}>
+          <Tag variant="filled" className={styles.tag} color={getTagColor(tag)}>
             {tag.replace(/VERSION/i, version)}
           </Tag>
         )}

packages/x/.dumi/hooks/useThemeAnimation.ts

@@ -1,5 +1,5 @@
+import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 import { useTheme } from 'antd-style';
-import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 import { useEffect, useRef } from 'react';
 
 const viewTransitionStyle = `

packages/x/.dumi/pages/index/common/Container.tsx

@@ -1,5 +1,5 @@
 import { createStyles } from 'antd-style';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 const useStyle = createStyles(({ token, css }) => {
@@ -48,7 +48,7 @@ const Container: React.FC<ContainerProps> = (props) => {
   const { styles } = useStyle();
   return (
     <div
-      className={classnames(styles.container, props.className)}
+      className={clsx(styles.container, props.className)}
       style={props.style}
       onClick={props.onClick}
     >

packages/x/.dumi/pages/index/components/DesignGuide.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { useLocation, useNavigate } from 'dumi';
 import React from 'react';
 import useLocale from '../../../hooks/useLocale';
@@ -224,7 +224,7 @@ const DesignGuide: React.FC = () => {
             return (
               <div className={styles.chain_item} key={item.label}>
                 <div>
-                  <div className={classnames(styles.chain_item_icon)}>
+                  <div className={clsx(styles.chain_item_icon)}>
                     <img alt="icon" src={item.icon} loading="lazy" />
                     <img
                       alt="icon"

packages/x/.dumi/pages/index/components/MainBanner.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { useLocation } from 'dumi';
 import type { AnimationDirection, AnimationItem } from 'lottie-web';
 import React, { lazy, Suspense, useRef } from 'react';
@@ -260,12 +260,12 @@ const MainBanner: React.FC = () => {
 
           <div className={styles.content}>
             <Link to={getLocalizedPathname('components/introduce', isZhCN(pathname), search)}>
-              <button type="button" className={classnames(styles.btn, styles.startBtn)}>
+              <button type="button" className={clsx(styles.btn, styles.startBtn)}>
                 {locale.start}
               </button>
             </Link>
             <Link to={getLocalizedPathname('/docs/spec/introduce', isZhCN(pathname), search)}>
-              <Button type="text" className={classnames(styles.btn, styles.designBtn)}>
+              <Button type="text" className={clsx(styles.btn, styles.designBtn)}>
                 {locale.design}
               </Button>
             </Link>
@@ -275,7 +275,7 @@ const MainBanner: React.FC = () => {
           <Suspense>
             <LottieComponent
               onLoad={onLoad}
-              className={classnames(styles.lottie, direction === 'rtl' && styles.lottie_rtl)}
+              className={clsx(styles.lottie, direction === 'rtl' && styles.lottie_rtl)}
               path="https://mdn.alipayobjects.com/huamei_lkxviz/afts/file/n25_R7prS_0AAAAAQPAAAAgADtFMAQFr"
             />
           </Suspense>

packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx

@@ -1,6 +1,6 @@
 import { Button, Carousel } from 'antd';
 import { createStyles } from 'antd-style';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 import useLocale from '../../../../hooks/useLocale';
@@ -228,7 +228,7 @@ const SceneBanner: React.FC = () => {
               <Button
                 key={item.key}
                 disabled={item.disabled}
-                className={classnames(
+                className={clsx(
                   styles.item,
                   active === item.key && styles['item-active'],
                   item.disabled && styles['item-disabled'],

packages/x/.dumi/pages/index/index.tsx

@@ -1,5 +1,5 @@
 import { createStyles } from 'antd-style';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { lazy, Suspense } from 'react';
 import DesignBanner from './components/DesignBanner';
 import MainBanner from './components/MainBanner';
@@ -42,20 +42,20 @@ const Homepage: React.FC = () => {
       <section className={styles.section}>
         <DesignBanner />
       </section>
-      <section className={classnames(styles.section, styles.container)}>
+      <section className={clsx(styles.section, styles.container)}>
         <Suspense>
           <DesignGuide />
         </Suspense>
       </section>
-      <section className={classnames(styles.section, styles.container)}>
+      <section className={clsx(styles.section, styles.container)}>
         <Suspense>
           <SceneIntroduction />
         </Suspense>
         <Suspense>
           <CompIntroduction />
         </Suspense>
       </section>
-      <section className={classnames(styles.section, styles.framework, styles.container)}>
+      <section className={clsx(styles.section, styles.framework, styles.container)}>
         <Suspense>
           <DesignFramework />
         </Suspense>

packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx

@@ -1,7 +1,7 @@
 import * as AntdIcons from '@ant-design/icons';
 import { App, Badge } from 'antd';
 import { createStyles } from 'antd-style';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
@@ -106,7 +106,7 @@ const CopyableIcon: React.FC<CopyableIconProps> = (props) => {
   };
   return (
     <CopyToClipboard text={`<${name} />`} onCopy={onCopy}>
-      <li className={classNames(theme, styles.iconItem, { copied: justCopied === name })}>
+      <li className={clsx(theme, styles.iconItem, { copied: justCopied === name })}>
         {React.createElement(allIcons[name])}
         <span className={styles.anticonCls}>
           <Badge dot={isNew}>{name}</Badge>

packages/x/.dumi/theme/builtins/ImagePreview/index.tsx

@@ -1,6 +1,6 @@
+import toArray from '@rc-component/util/lib/Children/toArray';
 import { Image } from 'antd';
-import classNames from 'classnames';
-import toArray from 'rc-util/lib/Children/toArray';
+import { clsx } from 'clsx';
 import React from 'react';
 
 interface ImagePreviewProps {
@@ -80,7 +80,7 @@ const ImagePreview: React.FC<React.PropsWithChildren<ImagePreviewProps>> = (prop
 
   const hasCarousel = imgs.length > 1 && !comparable;
 
-  const previewClassName = classNames(rootClassName, 'clearfix', 'preview-image-boxes', {
+  const previewClassName = clsx(rootClassName, 'clearfix', 'preview-image-boxes', {
     'preview-image-boxes-compare': comparable,
     'preview-image-boxes-with-carousel': hasCarousel,
   });
@@ -104,7 +104,7 @@ const ImagePreview: React.FC<React.PropsWithChildren<ImagePreviewProps>> = (prop
           return null;
         }
         const coverMeta = imgsMeta[index];
-        const imageWrapperClassName = classNames(imgWrapperCls, {
+        const imageWrapperClassName = clsx(imgWrapperCls, {
           good: coverMeta.isGood,
           bad: coverMeta.isBad,
         });

packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx

@@ -1,5 +1,5 @@
 import { createStyles, css } from 'antd-style';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 interface IconProps {
@@ -21,7 +21,7 @@ const BunIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
   const { styles } = useStyle();
   return (
-    <span className={classNames(styles.iconWrap, className)} style={style}>
+    <span className={clsx(styles.iconWrap, className)} style={style}>
       <svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70" width="1em" height="1em">
         <title>Bun Logo</title>
         <path

packages/x/.dumi/theme/builtins/InstallDependencies/index.tsx

@@ -1,7 +1,7 @@
 import { XProvider } from '@ant-design/x';
+import type { Tab } from '@rc-component/tabs/lib/interface';
 import { Tabs } from 'antd';
 import SourceCode from 'dumi/theme-default/builtins/SourceCode';
-import type { Tab } from 'rc-tabs/lib/interface';
 import React from 'react';
 
 import BunLogo from './bun';

packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx

@@ -1,5 +1,5 @@
 import { createStyles, css } from 'antd-style';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 interface IconProps {
@@ -21,7 +21,7 @@ const NpmIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
   const { styles } = useStyle();
   return (
-    <span className={classNames(styles.iconWrap, className)} style={style}>
+    <span className={clsx(styles.iconWrap, className)} style={style}>
       <svg
         fill="#E53E3E"
         focusable="false"

packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx

@@ -1,5 +1,5 @@
 import { createStyles, css } from 'antd-style';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 interface IconProps {
@@ -21,7 +21,7 @@ const PnpmIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
   const { styles } = useStyle();
   return (
-    <span className={classNames(styles.iconWrap, className)} style={style}>
+    <span className={clsx(styles.iconWrap, className)} style={style}>
       <svg
         aria-hidden="true"
         fill="#F69220"