refactor: resolve Circular dependency (#42750)

* test: detect dependency cycle

* chore: open eslint import/no-cycle rule

close #42804

* chore: Upgrade react-component

* Apply suggestions from code review

* refactor: add getRoundNumber

* chore: Update package.json

.eslintrc.js

@@ -149,7 +149,7 @@ module.exports = {
     'react/function-component-definition': 0,
     'react/no-unused-class-component-methods': 0,
     'import/extensions': 0,
-    'import/no-cycle': 0,
+    'import/no-cycle': 2,
     'import/no-extraneous-dependencies': [
       'error',
       {

components/color-picker/components/ColorHsbInput.tsx

@@ -1,10 +1,9 @@
 import type { HSB } from '@rc-component/color-picker';
-import { getRoundNumber } from '@rc-component/color-picker/lib/util';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import type { Color } from '../color';
 import type { ColorPickerBaseProps } from '../interface';
-import { generateColor } from '../util';
+import { generateColor, getRoundNumber } from '../util';
 import ColorSteppers from './ColorSteppers';
 
 interface ColorHsbInputProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {

components/color-picker/util.ts

@@ -1,5 +1,4 @@
 import type { ColorGenInput } from '@rc-component/color-picker';
-import { getRoundNumber } from '@rc-component/color-picker/lib/util';
 import type { Color } from './color';
 import { ColorFactory } from './color';
 
@@ -12,4 +11,6 @@ export const generateColor = (color: ColorGenInput<Color>): Color => {
   return new ColorFactory(color);
 };
 
+export const getRoundNumber = (value: number) => Math.round(Number(value || 0));
+
 export const getAlphaColor = (color: Color) => getRoundNumber(color.toHsb().a * 100);

package.json

@@ -114,7 +114,7 @@
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.6.0",
-    "@rc-component/color-picker": "~1.2.0",
+    "@rc-component/color-picker": "~1.3.0",
     "@rc-component/mutate-observer": "^1.0.0",
     "@rc-component/tour": "~1.8.0",
     "@rc-component/trigger": "^1.13.0",
@@ -128,16 +128,16 @@
     "rc-dialog": "~9.1.0",
     "rc-drawer": "~6.2.0",
     "rc-dropdown": "~4.1.0",
-    "rc-field-form": "~1.32.0",
+    "rc-field-form": "~1.33.0",
-    "rc-image": "~6.0.0",
+    "rc-image": "~6.1.0",
     "rc-input": "~1.1.0",
     "rc-input-number": "~8.0.0",
-    "rc-mentions": "~2.4.1",
+    "rc-mentions": "~2.5.0",
-    "rc-menu": "~9.9.2",
+    "rc-menu": "~9.10.0",
     "rc-motion": "^2.7.3",
     "rc-notification": "~5.0.4",
     "rc-pagination": "~3.5.0",
-    "rc-picker": "~3.8.2",
+    "rc-picker": "~3.9.0",
     "rc-progress": "~3.4.1",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.2.0",
@@ -147,10 +147,10 @@
     "rc-steps": "~6.0.0",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.32.1",
-    "rc-tabs": "~12.8.1",
+    "rc-tabs": "~12.9.0",
     "rc-textarea": "~1.3.2",
     "rc-tooltip": "~6.0.0",
-    "rc-tree": "~5.7.4",
+    "rc-tree": "~5.7.6",
     "rc-tree-select": "~5.9.0",
     "rc-upload": "~4.3.0",
     "rc-util": "^5.32.0",
@@ -211,6 +211,7 @@
     "antd-token-previewer": "^1.1.0-21",
     "chalk": "^4.0.0",
     "cheerio": "1.0.0-rc.12",
+    "circular-dependency-plugin": "^5.2.2",
     "cross-env": "^7.0.0",
     "dekko": "^0.2.1",
     "dumi": "^2.1.17",

webpack.config.js

@@ -3,6 +3,7 @@
 const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { EsbuildPlugin } = require('esbuild-loader');
+const CircularDependencyPlugin = require('circular-dependency-plugin');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 
 function addLocales(webpackConfig) {
@@ -57,6 +58,13 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
         }),
       );
     }
+
+    config.plugins.push(
+      new CircularDependencyPlugin({
+        // add errors to webpack instead of warnings
+        failOnError: true,
+      }),
+    );
   });
 }