refactor: migrate to @rc-component namespace and update dependencies (#480)

aojunhao123 · zombieJ · web-flow · commit 5b5480409568 · 2025-02-26T17:11:47.000+08:00
* chore: migrate to @rc-component namespace and update dependencies * chore: reset package version to 1.0.0 * chore: upgrade React and React DOM to version 19 and update type references * fix: update containerRef type initialization * fix: type fix * chore: clean up --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
diff --git a/docs/examples/base.tsx b/docs/examples/base.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState } from 'react';
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 import motionProps from './motion';
 
 const Demo = () => {
diff --git a/docs/examples/bodyProps.tsx b/docs/examples/bodyProps.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState } from 'react';
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 import motionProps from './motion';
 
 const Demo = () => {
diff --git a/docs/examples/change-remove.tsx b/docs/examples/change-remove.tsx
@@ -6,7 +6,7 @@ import {
 import { Menu } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import '../../assets/index.less';
 import './assets/index.less';
diff --git a/docs/examples/change.tsx b/docs/examples/change.tsx
@@ -6,7 +6,7 @@ import {
 import { Menu } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import 'antd/lib/menu/style';
 import 'antd/lib/style';
diff --git a/docs/examples/forceRender.tsx b/docs/examples/forceRender.tsx
@@ -1,7 +1,7 @@
 import { Button } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import 'antd/lib/button/style';
 import 'antd/lib/menu/style';
diff --git a/docs/examples/getContainer-false.tsx b/docs/examples/getContainer-false.tsx
@@ -6,7 +6,7 @@ import {
 import { Menu } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import 'antd/lib/menu/style';
 import 'antd/lib/style';
diff --git a/docs/examples/getContainer.tsx b/docs/examples/getContainer.tsx
@@ -6,7 +6,7 @@ import {
 import { Menu } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import 'antd/lib/menu/style';
 import 'antd/lib/style';
@@ -19,7 +19,7 @@ const { SubMenu } = Menu;
 const MenuItemGroup = Menu.ItemGroup;
 
 export default () => {
-  const containerRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const [open, setOpen] = React.useState(false);
 
   return (
diff --git a/docs/examples/motion.ts b/docs/examples/motion.ts
@@ -1,4 +1,4 @@
-import type { DrawerProps } from 'rc-drawer';
+import type { DrawerProps } from '@rc-component/drawer';
 import './assets/motion.less';
 
 export const maskMotion: DrawerProps['maskMotion'] = {
diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx
@@ -2,7 +2,7 @@
 import { Button } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import 'antd/lib/button/style';
 import 'antd/lib/style';
diff --git a/docs/examples/no-mask.tsx b/docs/examples/no-mask.tsx
@@ -6,7 +6,7 @@ import {
 import { Menu } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import 'antd/lib/menu/style';
 import 'antd/lib/style';
diff --git a/docs/examples/placement.tsx b/docs/examples/placement.tsx
@@ -6,7 +6,7 @@ import {
 import { Menu, Select } from 'antd';
 import * as React from 'react';
 
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 
 import 'antd/lib/button/style';
 import 'antd/lib/menu/style';
diff --git a/now.json b/now.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rc-drawer",
-  "version": "8.0.0",
+  "name": "@rc-component/drawer",
+  "version": "1.0.0",
   "description": "drawer component for react",
   "keywords": [
     "react",
@@ -36,29 +36,29 @@
     "compile": "father build && lessc assets/index.less assets/index.css",
     "lint": "eslint src/ --ext .tsx,.ts",
     "now-build": "npm run build",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile && rc-np",
     "start": "dumi dev",
     "test": "rc-test",
     "prettier": "prettier --write .",
     "prepare": "husky"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
-    "@rc-component/portal": "^1.1.1",
-    "classnames": "^2.2.6",
-    "rc-motion": "^2.6.1",
-    "rc-util": "^5.38.1"
+    "@rc-component/motion": "^1.1.4",
+    "@rc-component/portal": "^2.0.0",
+    "@rc-component/util": "^1.2.1",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.3.0",
-    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/father-plugin": "^2.0.2",
+    "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.0.0",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.11",
     "@types/raf": "^3.4.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/warning": "^3.0.0",
     "antd": "^5.12.7",
     "dumi": "^2.2.0",
@@ -70,18 +70,17 @@
     "husky": "^9.0.10",
     "less": "^4.2.0",
     "lint-staged": "^15.2.2",
-    "np": "^9.2.0",
     "prettier": "^3.0.0",
     "rc-test": "^7.0.9",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "stylelint": "^16.2.1",
     "stylelint-config-standard-less": "^3.0.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix",
diff --git a/src/Drawer.tsx b/src/Drawer.tsx
@@ -1,6 +1,6 @@
 import type { PortalProps } from '@rc-component/portal';
 import Portal from '@rc-component/portal';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
 import { RefContext } from './context';
 import type {
@@ -70,9 +70,9 @@ const Drawer: React.FC<DrawerProps> = props => {
   const mergedOpen = mounted ? open : false;
 
   // ============================ Focus =============================
-  const popupRef = React.useRef<HTMLDivElement>();
+  const popupRef = React.useRef<HTMLDivElement>(null);
 
-  const lastActiveRef = React.useRef<HTMLElement>();
+  const lastActiveRef = React.useRef<HTMLElement>(null);
   useLayoutEffect(() => {
     if (mergedOpen) {
       lastActiveRef.current = document.activeElement as HTMLElement;
diff --git a/src/DrawerPanel.tsx b/src/DrawerPanel.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { RefContext } from './context';
-import pickAttrs from 'rc-util/lib/pickAttrs';
-import { useComposeRef } from 'rc-util/lib/ref';
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
+import { useComposeRef } from '@rc-component/util/lib/ref';
 
 export interface DrawerPanelRef {
   focus: VoidFunction;
diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import type { CSSMotionProps } from 'rc-motion';
-import CSSMotion from 'rc-motion';
-import KeyCode from 'rc-util/lib/KeyCode';
-import pickAttrs from 'rc-util/lib/pickAttrs';
+import type { CSSMotionProps } from '@rc-component/motion';
+import CSSMotion from '@rc-component/motion';
+import KeyCode from '@rc-component/util/lib/KeyCode';
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import * as React from 'react';
 import type { DrawerContextProps } from './context';
 import DrawerContext from './context';
@@ -126,9 +126,9 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
   } = props;
 
   // ================================ Refs ================================
-  const panelRef = React.useRef<HTMLDivElement>();
-  const sentinelStartRef = React.useRef<HTMLDivElement>();
-  const sentinelEndRef = React.useRef<HTMLDivElement>();
+  const panelRef = React.useRef<HTMLDivElement>(null);
+  const sentinelStartRef = React.useRef<HTMLDivElement>(null);
+  const sentinelEndRef = React.useRef<HTMLDivElement>(null);
 
   React.useImperativeHandle(ref, () => panelRef.current);
 
diff --git a/src/util.ts b/src/util.ts
@@ -1,5 +1,5 @@
-import warning from 'rc-util/lib/warning';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import warning from '@rc-component/util/lib/warning';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
 import type { DrawerProps } from './Drawer';
 
 export function parseWidthHeight(value?: number | string) {
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, render, act } from '@testing-library/react';
-import KeyCode from 'rc-util/lib/KeyCode';
-import { resetWarned } from 'rc-util/lib/warning';
+import KeyCode from '@rc-component/util/lib/KeyCode';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import type { DrawerProps } from '../src';
 import Drawer from '../src';
diff --git a/tests/motion.spec.tsx b/tests/motion.spec.tsx
@@ -2,8 +2,10 @@ import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Drawer from '../src';
 
-jest.mock('rc-motion', () => {
-  const { genCSSMotion } = jest.requireActual('rc-motion/lib/CSSMotion');
+jest.mock('@rc-component/motion', () => {
+  const { genCSSMotion } = jest.requireActual(
+    '@rc-component/motion/lib/CSSMotion',
+  );
   const CSSMotion = genCSSMotion(true);
   return CSSMotion;
 });
diff --git a/tests/ssr.spec.tsx b/tests/ssr.spec.tsx
@@ -2,12 +2,12 @@ import { render } from '@testing-library/react';
 import { renderToString } from 'react-dom/server';
 import React from 'react';
 import Drawer from '../src';
-// import canUseDom from 'rc-util/lib/Dom/canUseDom'
+// import canUseDom from '@rc-component/util/lib/Dom/canUseDom'
 
 global.canUseDom = true;
 
-jest.mock('rc-util/lib/Dom/canUseDom', () => {
-  // const canUseDom = jest.requireActual('rc-util/lib/Dom/canUseDom');
+jest.mock('@rc-component/util/lib/Dom/canUseDom', () => {
+  // const canUseDom = jest.requireActual('@rc-component/util/lib/Dom/canUseDom');
   return () => global.canUseDom;
 });
 
@@ -55,7 +55,7 @@ describe('SSR', () => {
   // This may affect ref call. Let's check this also.
   it('should not block ref', done => {
     const Demo = ({ open }: any = {}) => {
-      const ref = React.useRef<HTMLDivElement>();
+      const ref = React.useRef<HTMLDivElement>(null);
 
       React.useEffect(() => {
         if (open) {
diff --git a/tsconfig.json b/tsconfig.json
@@ -10,7 +10,7 @@
     "paths": {
       "@/*": ["src/*"],
       "@@/*": ["src/.umi/*"],
-      "rc-drawer": ["src/index.ts"]
+      "@rc-component/drawer": ["src/index.ts"]
     }
   },
   "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"]
diff --git a/typings/custom.d.ts b/typings/custom.d.ts
@@ -1,14 +1,14 @@
-declare module 'rc-util/lib/KeyCode' {
+declare module '@rc-component/util/lib/KeyCode' {
   const Ret: { ESC: any; TAB: any };
   export default Ret;
 }
 
-declare module 'rc-util/lib/getScrollBarSize' {
+declare module '@rc-component/util/lib/getScrollBarSize' {
   const Ret: (b: boolean) => number;
   export default Ret;
 }
 
-declare module 'rc-util/lib/*' {
+declare module '@rc-component/util/lib/*' {
   const Ret: any;
   export default Ret;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { DrawerProps } from 'rc-drawer';`
	`1`	`+import type { DrawerProps } from '@rc-component/drawer';`
`2`	`2`	`import './assets/motion.less';`
`3`	`3`
`4`	`4`	`export const maskMotion: DrawerProps['maskMotion'] = {`