diff --git a/.dumirc.ts b/.dumirc.ts index 85985a52..ded1b399 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -3,8 +3,8 @@ import path from 'path'; export default defineConfig({ alias: { - 'rc-steps$': path.resolve('src'), - 'rc-steps/es': path.resolve('src'), + '@rc-component/steps$': path.resolve('src'), + '@rc-component/steps/es': path.resolve('src'), }, mfsu: false, favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], diff --git a/README.md b/README.md index f059cbeb..cb200378 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# rc-steps +# @rc-component/steps --- @@ -10,21 +10,21 @@ React steps component. [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url] -[npm-image]: http://img.shields.io/npm/v/rc-steps.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-steps +[npm-image]: http://img.shields.io/npm/v/@rc-component/steps.svg?style=flat-square +[npm-url]: http://npmjs.org/package/@rc-component/steps [travis-image]: https://img.shields.io/travis/react-component/steps.svg?style=flat-square [travis-url]: https://travis-ci.org/react-component/steps [codecov-image]: https://img.shields.io/codecov/c/github/react-component/steps/master.svg?style=flat-square [codecov-url]: https://codecov.io/gh/react-component/steps/branch/master -[download-image]: https://img.shields.io/npm/dm/rc-steps.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-steps -[bundlephobia-url]: https://bundlephobia.com/result?p=rc-steps -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-steps +[download-image]: https://img.shields.io/npm/dm/@rc-component/steps.svg?style=flat-square +[download-url]: https://npmjs.org/package/@rc-component/steps +[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/steps +[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/steps ## Usage ```bash -npm install rc-steps +npm install @rc-component/steps ```
@@ -188,4 +188,4 @@ npm start ## License -rc-steps is released under the MIT license. +@rc-component/steps is released under the MIT license. diff --git a/docs/examples/alternativeLabel.jsx b/docs/examples/alternativeLabel.jsx index 12fa2b4a..9c40b65b 100644 --- a/docs/examples/alternativeLabel.jsx +++ b/docs/examples/alternativeLabel.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; const description = '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; diff --git a/docs/examples/composable.jsx b/docs/examples/composable.jsx index d957dd1c..5f607169 100644 --- a/docs/examples/composable.jsx +++ b/docs/examples/composable.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; const description = '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'; diff --git a/docs/examples/custom-svg-icon.jsx b/docs/examples/custom-svg-icon.jsx index db5fd52c..7587fd5c 100644 --- a/docs/examples/custom-svg-icon.jsx +++ b/docs/examples/custom-svg-icon.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; function getFinishIcon() { const path = diff --git a/docs/examples/customIcon.jsx b/docs/examples/customIcon.jsx index 839ca136..f48102b8 100644 --- a/docs/examples/customIcon.jsx +++ b/docs/examples/customIcon.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; // eslint-disable-next-line react/prop-types const Icon = ({ type }) => ; diff --git a/docs/examples/dynamic.jsx b/docs/examples/dynamic.jsx index 30e7c919..3ccede02 100644 --- a/docs/examples/dynamic.jsx +++ b/docs/examples/dynamic.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React, { useState } from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; export default () => { const [items, setItems] = useState([ diff --git a/docs/examples/errorStep.jsx b/docs/examples/errorStep.jsx index 15e817ad..338833aa 100644 --- a/docs/examples/errorStep.jsx +++ b/docs/examples/errorStep.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; const description = '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; diff --git a/docs/examples/inline.jsx b/docs/examples/inline.jsx index fbea806a..8d866c0a 100644 --- a/docs/examples/inline.jsx +++ b/docs/examples/inline.jsx @@ -1,6 +1,6 @@ import '../../assets/index.less'; import React, { useState } from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; export default () => { const [current, setCurrent] = useState(0); diff --git a/docs/examples/nav-base.jsx b/docs/examples/nav-base.jsx index 79ac486d..5900bd50 100644 --- a/docs/examples/nav-base.jsx +++ b/docs/examples/nav-base.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React, { useState } from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; export default () => { const [current, setCurrent] = useState(0); diff --git a/docs/examples/nextStep.jsx b/docs/examples/nextStep.jsx index df05053c..125e6aaf 100644 --- a/docs/examples/nextStep.jsx +++ b/docs/examples/nextStep.jsx @@ -2,7 +2,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import './nextStep.css'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; function generateRandomSteps() { const n = Math.floor(Math.random() * 3) + 3; diff --git a/docs/examples/progressDot.jsx b/docs/examples/progressDot.jsx index fc62ae48..5622b55a 100644 --- a/docs/examples/progressDot.jsx +++ b/docs/examples/progressDot.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; const description = '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; diff --git a/docs/examples/simple.jsx b/docs/examples/simple.jsx index 1c112397..328ebf9d 100644 --- a/docs/examples/simple.jsx +++ b/docs/examples/simple.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; const description = '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'; diff --git a/docs/examples/smallSize.jsx b/docs/examples/smallSize.jsx index b55d8fbe..b9db8d35 100644 --- a/docs/examples/smallSize.jsx +++ b/docs/examples/smallSize.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; // eslint-disable-next-line react/prop-types const Icon = ({ type }) => ; diff --git a/docs/examples/stepIcon.jsx b/docs/examples/stepIcon.jsx index 880eeb61..73e4f764 100644 --- a/docs/examples/stepIcon.jsx +++ b/docs/examples/stepIcon.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; function stepIcon({ status, node }) { const isProcessing = status === 'process'; diff --git a/docs/examples/vertical.jsx b/docs/examples/vertical.jsx index 232cb28b..c0a8d647 100644 --- a/docs/examples/vertical.jsx +++ b/docs/examples/vertical.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; const description = '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; diff --git a/docs/examples/verticalSmall.jsx b/docs/examples/verticalSmall.jsx index fdc23fe9..7667d48b 100644 --- a/docs/examples/verticalSmall.jsx +++ b/docs/examples/verticalSmall.jsx @@ -1,7 +1,7 @@ import '../../assets/index.less'; import '../../assets/iconfont.less'; import React from 'react'; -import Steps from 'rc-steps'; +import Steps from '@rc-component/steps'; const description = '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; diff --git a/docs/index.md b/docs/index.md index 3358d44b..8160c503 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,6 @@ --- hero: - title: rc-steps + title: "@rc-component/steps" description: React Steps Component --- diff --git a/jest.config.js b/jest.config.js index 0c6601ae..ab35fb0d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,4 +1,3 @@ module.exports = { setupFiles: ['./tests/setup.js'], - snapshotSerializers: [require.resolve('enzyme-to-json/serializer')], }; \ No newline at end of file diff --git a/now.json b/now.json deleted file mode 100644 index 0bd19e4f..00000000 --- a/now.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "version": 2, - "name": "rc-steps", - "builds": [ - { - "src": "package.json", - "use": "@now/static-build", - "config": { "distDir": "dist" } - } - ] -} diff --git a/package.json b/package.json index ad9c1ed1..07e9f09b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "rc-steps", - "version": "6.0.1", + "name": "@rc-component/steps", + "version": "0.0.0", "description": "steps ui component for react", "keywords": [ "react", @@ -33,17 +33,17 @@ ], "scripts": { "compile": "father build && lessc assets/index.less assets/index.css", - "coverage": "umi-test --coverage", + "coverage": "rc-test --coverage", "docs:build": "dumi build", "docs:deploy": "gh-pages -d .doc", "gh-pages": "npm run docs:build && npm run docs:deploy", "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", "prepare": "husky install && dumi setup", - "prepublishOnly": "npm run compile && np --yolo --no-publish", + "prepublishOnly": "npm run compile && rc-np", "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", "postpublish": "npm run gh-pages", "start": "dumi dev", - "test": "umi-test", + "test": "rc-test", "now-build": "npm run docs:build" }, "lint-staged": { @@ -52,23 +52,21 @@ ] }, "dependencies": { - "@babel/runtime": "^7.16.7", "classnames": "^2.2.3", - "rc-util": "^5.16.1" + "@rc-component/util": "^1.2.1" }, "devDependencies": { - "@rc-component/father-plugin": "^1.0.1", + "@rc-component/father-plugin": "^2.0.2", + "@rc-component/np": "^1.0.0", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.6", "@types/classnames": "^2.2.9", - "@types/enzyme": "^3.10.11", "@types/jest": "^29.4.0", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@umijs/fabric": "^4.0.1", "cross-env": "^7.0.0", "dumi": "^2.0.0", - "enzyme": "^3.1.0", - "enzyme-adapter-react-16": "^1.0.1", - "enzyme-to-json": "^3.1.2", "eslint": "^8.55.0", "eslint-plugin-jest": "^27.6.0", "eslint-plugin-unicorn": "^50.0.1", @@ -78,16 +76,13 @@ "husky": "^8.0.1", "less": "^4.1.3", "lint-staged": "^15.2.0", - "np": "^9.0.0", "prettier": "^3.1.0", "querystring": "^0.2.0", "rc-dialog": "8.x", - "rc-tools": "^9.6.1", - "react": "^16.0.0", - "react-dom": "^16.0.0", - "typescript": "^5.0.0", - "cheerio": "1.0.0-rc.12", - "umi-test": "^1.9.7" + "rc-test": "^7.0.9", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "typescript": "^5.0.0" }, "peerDependencies": { "react": ">=16.9.0", diff --git a/src/Step.tsx b/src/Step.tsx index a1b869f8..02cc9d92 100644 --- a/src/Step.tsx +++ b/src/Step.tsx @@ -1,7 +1,7 @@ /* eslint react/prop-types: 0 */ import * as React from 'react'; import classNames from 'classnames'; -import KeyCode from 'rc-util/lib/KeyCode'; +import KeyCode from '@rc-component/util/lib/KeyCode'; import type { Status, Icons } from './interface'; import type { StepIconRender, ProgressDotRender } from './Steps'; diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap index f097c479..b44aebb3 100644 --- a/tests/__snapshots__/index.test.tsx.snap +++ b/tests/__snapshots__/index.test.tsx.snap @@ -1827,7 +1827,7 @@ exports[`Steps render should render svg finishIcon and errorIcon correctly 1`] = @@ -1871,7 +1871,7 @@ exports[`Steps render should render svg finishIcon and errorIcon correctly 1`] = diff --git a/tests/index.test.tsx b/tests/index.test.tsx index bb5a65e1..413c859f 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { mount, render } from 'enzyme'; +import { render, fireEvent, createEvent } from '@testing-library/react'; import Steps from '../src'; describe('Steps', () => { @@ -26,8 +26,8 @@ describe('Steps', () => { ); it('renders correctly', () => { - const wrapper = render(setSteps({})); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({})); + expect(container.firstChild).toMatchSnapshot(); }); it('renders without items', () => { @@ -36,57 +36,43 @@ describe('Steps', () => { }).not.toThrow(); }); - // it('render support Fragment', () => { - // const wrapper = mount( - // - // - // - // <> - // - // - // - // , - // ); - // expect(wrapper.find('div.rc-steps-item')).toHaveLength(4); - // }); - it('renders current correctly', () => { - const wrapper = render(setSteps({ current: 2 })); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({ current: 2 })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders status correctly', () => { - const wrapper = render(setSteps({ current: 2, status: 'error' })); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({ current: 2, status: 'error' })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders vertical correctly', () => { - const wrapper = render(setSteps({ direction: 'vertical' })); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({ direction: 'vertical' })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders labelPlacement correctly', () => { - const wrapper = render(setSteps({ labelPlacement: 'vertical' })); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({ labelPlacement: 'vertical' })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders progressDot correctly', () => { - const wrapper = render(setSteps({ progressDot: true })); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({ progressDot: true })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders progressDot function correctly', () => { - const wrapper = render(setSteps({ progressDot: () => a })); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({ progressDot: () => a })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders stepIcon function correctly', () => { - const wrapper = render(setSteps({ stepIcon: () => a })); - expect(wrapper).toMatchSnapshot(); + const { container } = render(setSteps({ stepIcon: () => a })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders step with description', () => { - const wrapper = render( + const { container } = render( { ]} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('renders step with description and status', () => { - const wrapper = render( + const { container } = render( { ]} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('renders with falsy children', () => { - const wrapper = render( + const { container } = render( { ]} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('renders step with tailContent', () => { - const wrapper = render( + const { container } = render( { ]} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('renders step with type navigation', () => { description = 'This is a description.'; - const wrapper = render( + const { container } = render( { ]} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('renders step with type inline', () => { description = 'This is a description.'; - const wrapper = render( + const { container } = render( { itemRender={(item, stepItem) => React.cloneElement(stepItem, { title: item.description })} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); function getFinishIcon() { @@ -323,7 +309,7 @@ describe('Steps', () => { finish: getFinishIcon(), error: getErrorIcon(), }; - const wrapper = render( + const { container } = render( { ]} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); it('should render customIcon correctly', () => { const Icon = ({ type }) => ; - const wrapper = render( + const { container } = render( { ]} />, ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('onChange', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { ]} />, ); - - wrapper.find('.rc-steps-item-container').at(1).simulate('click'); + const items = container.querySelectorAll('.rc-steps-item-container'); + fireEvent.click(items[1]); expect(onChange).toBeCalledWith(1); }); @@ -413,19 +399,22 @@ describe('Steps', () => { const onChange = (val) => { current = val; }; - const wrapper = mount( + const { container, rerender } = render( , ); - wrapper.find('.rc-steps-item-container').at(1).simulate('click'); - wrapper.setProps({ current: current }); - expect(wrapper.find('.rc-steps-item').at(1).hasClass('rc-steps-item-process')).toBeTruthy(); + const step = container.querySelectorAll('.rc-steps-item-container')[1]; + fireEvent.click(step); + rerender(); + expect(container.querySelectorAll('.rc-steps-item')[1].classList).toContain( + 'rc-steps-item-process', + ); }); it('onClick', () => { const onClick = jest.fn(); const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { />, ); - wrapper.find('.rc-steps-item-container').at(0).simulate('click'); + const btn = container.querySelectorAll('.rc-steps-item-container')[0]; + fireEvent.click(btn); expect(onClick).toHaveBeenCalled(); }); it('disabled', () => { const onChange = jest.fn(); - const wrapper = mount( - , + const { container } = render( + , ); - wrapper.find('.rc-steps-item-container').at(2).simulate('click'); + const items = container.querySelectorAll('.rc-steps-item-container'); + fireEvent.click(items[2]); expect(onChange).not.toBeCalled(); }); it('key board support', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { />, ); - wrapper.find('[role="button"]').at(1).simulate('keydown', { which: 13 }); + const button = container.querySelectorAll('[role="button"]')[1]; + fireEvent.keyDown(button, { key: 'Enter', keyCode: 13, which: 13 }); - expect(onChange).toBeCalledWith(1); + expect(onChange).toHaveBeenCalledWith(1); }); }); diff --git a/tests/setup.js b/tests/setup.js index 946a2fb3..8aaa6845 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,8 +1,3 @@ global.requestAnimationFrame = global.requestAnimationFrame || function raf(cb) { return setTimeout(cb, 0); }; - -const Enzyme = require('enzyme'); -const Adapter = require('enzyme-adapter-react-16'); - -Enzyme.configure({ adapter: new Adapter() }); diff --git a/tsconfig.json b/tsconfig.json index 089dee51..4f49d936 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "paths": { "@/*": ["src/*"], "@@/*": ["dumi/tmp/*"], - "rc-steps": ["src/index.ts"] + "@rc-component/steps": ["src/index.ts"] } } } \ No newline at end of file