diff --git a/.dumirc.ts b/.dumirc.ts index 4e31969..762ed97 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,15 +1,22 @@ -// more config: https://d.umijs.org/config import { defineConfig } from 'dumi'; +import path from 'path'; + +const basePath = process.env.GH_PAGES ? '/switch/' : '/'; +const publicPath = basePath; export default defineConfig({ + alias: { + '@rc-component/switch$': path.resolve('src'), + '@rc-component/switch/es': path.resolve('src'), + '@rc-component/switch/assets': path.resolve('assets'), + }, + mfsu: false, favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], themeConfig: { - name: 'rc-switch', + name: 'Switch', logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', }, - outputPath: '.doc', - exportStatic: {}, - base: '/switch', - publicPath: '/switch/', - hash: true, + outputPath: 'docs-dist', + base: basePath, + publicPath, }); diff --git a/.eslintignore b/.eslintignore index 19ff8b1..3ae8e97 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,6 @@ .eslintrc.js es/ lib/ -.doc/ \ No newline at end of file +.doc/ +docs-dist/ +.vercel/ diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..758659a --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +github: ant-design +open_collective: ant-design diff --git a/.github/dependabot.yml b/.github/dependabot.yml index d4ffe42..3b730ef 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,12 +1,19 @@ version: 2 updates: -- package-ecosystem: npm - directory: "/" - schedule: - interval: daily - time: "21:00" - open-pull-requests-limit: 10 - ignore: - - dependency-name: less - versions: - - 4.1.0 + - package-ecosystem: npm + directory: '/' + schedule: + interval: weekly + day: monday + time: '21:00' + timezone: Asia/Shanghai + open-pull-requests-limit: 10 + + - package-ecosystem: github-actions + directory: '/' + schedule: + interval: weekly + day: monday + time: '21:00' + timezone: Asia/Shanghai + open-pull-requests-limit: 10 diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml deleted file mode 100644 index 5735e2d..0000000 --- a/.github/workflows/main.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: ✅ test -on: [push, pull_request] -jobs: - test: - uses: react-component/rc-test/.github/workflows/test.yml@main - secrets: inherit \ No newline at end of file diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml new file mode 100644 index 0000000..1ed6420 --- /dev/null +++ b/.github/workflows/react-component-ci.yml @@ -0,0 +1,12 @@ +name: ✅ test +on: + push: + branches: [master] + pull_request: + branches: [master] +permissions: + contents: read +jobs: + test: + uses: react-component/rc-test/.github/workflows/test-utoo.yml@main + secrets: inherit diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml new file mode 100644 index 0000000..097eb88 --- /dev/null +++ b/.github/workflows/react-doctor.yml @@ -0,0 +1,27 @@ +name: React Doctor + +on: + pull_request: + types: [opened, synchronize, reopened, ready_for_review] + push: + branches: [master] + +permissions: + contents: read + pull-requests: write + issues: write + statuses: write + +concurrency: + group: react-doctor-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true + +jobs: + react-doctor: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v7 + with: + fetch-depth: 0 + persist-credentials: false + - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3 diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml new file mode 100644 index 0000000..4c2f17e --- /dev/null +++ b/.github/workflows/surge-preview.yml @@ -0,0 +1,54 @@ +name: Surge Preview + +on: + pull_request: + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number }} + cancel-in-progress: true + +permissions: + contents: read + pull-requests: write + checks: write + +jobs: + preview: + runs-on: ubuntu-latest + concurrency: + group: surge-preview-${{ github.event.pull_request.number }} + cancel-in-progress: true + env: + PREVIEW: true + steps: + - uses: actions/checkout@v7 + with: + persist-credentials: false + - name: Check Surge token + id: surge-token + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + run: | + if [ -n "$SURGE_TOKEN" ]; then + echo "enabled=true" >> "$GITHUB_OUTPUT" + else + echo "enabled=false" >> "$GITHUB_OUTPUT" + fi + - name: Build preview + if: ${{ steps.surge-token.outputs.enabled == 'true' }} + run: | + npm install + npm run build + - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec + if: ${{ steps.surge-token.outputs.enabled == 'true' }} + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + with: + surge_token: ${{ env.SURGE_TOKEN }} + github_token: ${{ secrets.GITHUB_TOKEN }} + dist: docs-dist + failOnError: false + setCommitStatus: false + - name: Skip Surge preview + if: ${{ steps.surge-token.outputs.enabled != 'true' }} + run: echo "SURGE_TOKEN is not configured; skip Surge preview." diff --git a/.gitignore b/.gitignore index 30faecb..dc304ef 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ *.iml *.log +*.log.* .idea/ .ipr .iws @@ -20,20 +21,29 @@ Thumbs.db .build node_modules .cache +dist assets/**/*.css build lib es +/coverage yarn.lock package-lock.json pnpm-lock.yaml -coverage/ +.doc +docs-dist +.vercel +.storybook -# dumi -.dumi/tmp -.dumi/tmp-test -.dumi/tmp-production +# umi +.umi +.umi-production +.umi-test .env.local -.doc/ +.dumi/ -bun.lockb \ No newline at end of file +bun.lockb +bun.lock +coverage +.dumi/tmp +.dumi/tmp-production diff --git a/.husky/pre-commit b/.husky/pre-commit index d24fdfc..2312dc5 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - npx lint-staged diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..c466d87 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,14 @@ +node_modules +coverage +docs-dist +dist +es +lib +.dumi/tmp +.dumi/tmp-production +.vercel +package-lock.json +pnpm-lock.yaml +yarn.lock +bun.lockb +*.log diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..bd0a1f7 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019-present react-component + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 7b52abd..9337205 100644 --- a/README.md +++ b/README.md @@ -1,74 +1,99 @@ -# rc-switch - ---- - -Switch ui component for react. - -[![NPM version][npm-image]][npm-url] -[![npm download][download-image]][download-url] -[![build status][github-actions-image]][github-actions-url] -[![Test coverage][codecov-image]][codecov-url] -[![bundle size][bundlephobia-image]][bundlephobia-url] - -[npm-image]: http://img.shields.io/npm/v/rc-switch.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-switch -[travis-image]: https://img.shields.io/travis/react-component/switch/master?style=flat-square -[travis-url]: https://travis-ci.com/react-component/switch -[github-actions-image]: https://github.com/react-component/switch/workflows/CI/badge.svg -[github-actions-url]: https://github.com/react-component/switch/actions -[codecov-image]: https://img.shields.io/codecov/c/github/react-component/switch/master.svg?style=flat-square -[codecov-url]: https://app.codecov.io/gh/react-component/switch -[david-url]: https://david-dm.org/react-component/switch -[david-image]: https://david-dm.org/react-component/switch/status.svg?style=flat-square -[david-dev-url]: https://david-dm.org/react-component/switch?type=dev -[david-dev-image]: https://david-dm.org/react-component/switch/dev-status.svg?style=flat-square -[download-image]: https://img.shields.io/npm/dm/rc-switch.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-switch -[bundlephobia-url]: https://bundlephobia.com/package/rc-switch -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-switch +
+

@rc-component/switch

+

Ant Design Part of the Ant Design ecosystem.

+

🔘 Accessible React switch for boolean state with controlled and uncontrolled modes.

+ +

+ NPM version + npm downloads + build status + Codecov + bundle size + dumi +

+
+ +

English | 简体中文

+ + +## Highlights + +- Renders a native button with `role="switch"` and `aria-checked` state. +- Supports controlled and uncontrolled checked state. +- Handles click and keyboard toggles with left and right arrow keys. +- Provides content class/style slots for checked and unchecked labels. ## Install -[![rc-switch](https://nodei.co/npm/rc-switch.png)](https://npmjs.org/package/rc-switch) +```bash +npm install @rc-component/switch +``` ## Usage -```js -import Switch from 'rc-switch'; +```tsx pure +import Switch from '@rc-component/switch'; +import '@rc-component/switch/assets/index.css'; -export default () => ; +export default () => ; ``` -## Compatibility +Online preview: https://switch.react-component.vercel.app/ + +## Examples -| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +Run the local dumi site: + +```bash +npm install +npm start +``` + +Then open `http://localhost:8000`. ## API -| Property | Type | Default | Description | -| -------------- | ------------------------ | --------- | -------------------------------------------------------- | -| prefixCls | String | rc-switch | | -| className | String | '' | additional class name of root node | -| checked | boolean | false | whether switch is checked | -| defaultChecked | boolean | false | whether switch is checked on init | -| onChange | Function(checked, event) | | called when switch is checked or unchecked | -| tabIndex | number | | tab-index of switch node | -| onClick | Function(checked, event) | | called when switch is clicked | -| autoFocus | boolean | | get focus when mounts | -| disabled | boolean | false | whether switch is disabled | -| loadingIcon | React.ReactNode | | specific the extra node. generally used in loading icon. | +| Name | Type | Default | Description | +| ------------------- | ----------------------------------- | ------------- | ------------------------------------------ | +| `autoFocus` | boolean | - | Focus the switch on mount. | +| `checked` | boolean | - | Controlled checked state. | +| `checkedChildren` | React.ReactNode | - | Content shown when checked. | +| `className` | string | - | Additional class name. | +| `classNames` | `{ content?: string }` | - | Semantic class names for internal content. | +| `defaultChecked` | boolean | false | Initial checked state. | +| `disabled` | boolean | false | Disable interaction. | +| `loadingIcon` | React.ReactNode | - | Extra loading icon node. | +| `onChange` | `(checked, event) => void` | - | Triggered after checked state changes. | +| `onClick` | `(checked, event) => void` | - | Triggered after click. | +| `onKeyDown` | React.KeyboardEventHandler | - | Key down handler. | +| `prefixCls` | string | `'rc-switch'` | Prefix class name. | +| `style` | React.CSSProperties | - | Root style. | +| `styles` | `{ content?: React.CSSProperties }` | - | Semantic styles for internal content. | +| `tabIndex` | number | - | Tab index. | +| `title` | string | - | Native title attribute. | +| `unCheckedChildren` | React.ReactNode | - | Content shown when unchecked. | ## Development -``` +```bash npm install npm start +npm test +npm run tsc +npm run compile +npm run build +``` + +The dumi site runs at `http://localhost:8000` by default. + +## Release + +```bash +npm run prepublishOnly ``` -Online demo: http://react-component.github.io/switch/ +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License -rc-switch is released under the MIT license. +@rc-component/switch is released under the [MIT](./LICENSE) license. diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..1a0bf93 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,98 @@ +
+

@rc-component/switch

+

Ant Design Ant Design 生态的一部分。

+

🔘 React 开关组件。

+ +

+ NPM version + npm downloads + build status + Codecov + bundle size + dumi +

+
+ +

English | 简体中文

+ +## 特性 + +- 渲染具有 `role="switch"` 和 `aria-checked` 状态的本机按钮。 +- 支持受控和非受控检查状态。 +- 使用左右箭头键处理点击和键盘切换。 +- 为选中和未选中的标签提供内容类/样式槽。 + +## 安装 + +```bash +npm install @rc-component/switch +``` + +## 使用 + +```tsx pure +import Switch from '@rc-component/switch'; +import '@rc-component/switch/assets/index.css'; + +export default () => ; +``` + +在线预览：https://switch.react-component.vercel.app/ + +## 示例 + +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 + +## API + +| 名称 | 类型 | 默认值 | 说明 | +| ------------------- | ----------------------------------- | ------------- | -------------------------- | +| `autoFocus` | boolean | - | 挂载后自动聚焦开关。 | +| `checked` | boolean | - | 受控的检查状态。 | +| `checkedChildren` | React.ReactNode | - | 勾选时显示的内容。 | +| `className` | string | - | 附加 className。 | +| `classNames` | `{ content?: string }` | - | 内部内容的语义 className。 | +| `defaultChecked` | boolean | false | 初始检查状态。 | +| `disabled` | boolean | false | 禁用交互。 | +| `loadingIcon` | React.ReactNode | - | 额外加载图标节点。 | +| `onChange` | `(checked, event) => void` | - | 检查状态更改后触发。 | +| `onClick` | `(checked, event) => void` | - | 点击后触发。 | +| `onKeyDown` | React.KeyboardEventHandler | - | 按键按下处理函数。 | +| `prefixCls` | string | `'rc-switch'` | className 前缀。 | +| `style` | React.CSSProperties | - | 根样式。 | +| `styles` | `{ content?: React.CSSProperties }` | - | 内部内容的语义样式。 | +| `tabIndex` | number | - | Tab index. | +| `title` | string | - | 本土产权属性。 | +| `unCheckedChildren` | React.ReactNode | - | 未选中时显示的内容。 | + +## 本地开发 + +```bash +npm install +npm start +npm test +npm run tsc +npm run compile +npm run build +``` + +dumi 站点默认运行在 `http://localhost:8000`。 + +## 发布 + +```bash +npm run prepublishOnly +``` + +包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。 + +## 许可证 + +@rc-component/switch 基于 [MIT](./LICENSE) 许可证发布。 diff --git a/docs/index.md b/docs/index.md index e0b39b2..5ba3f17 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,6 @@ --- hero: - title: rc-switch + title: '@rc-component/switch' description: React Switch Component --- diff --git a/package.json b/package.json index 15deee7..b980484 100644 --- a/package.json +++ b/package.json @@ -1,46 +1,43 @@ { "name": "@rc-component/switch", "version": "1.0.3", - "description": "switch ui component for react", + "description": "Switch UI component for React", "keywords": [ "react", "react-component", "react-switch", "switch" ], - "homepage": "https://github.com/react-component/switch", + "homepage": "https://react-component.github.io/switch", "bugs": { - "url": "https://github.com/react-component/switch/issues" + "url": "https://github.com/react-component/switch/issues" }, "repository": { "type": "git", - "url": "git@github.com:react-component/switch.git" + "url": "https://github.com/react-component/switch.git" }, "license": "MIT", - "main": "lib/index", + "main": "./lib/index", "module": "./es/index", "files": [ "assets/*.css", - "es", - "lib" + "lib", + "es" ], "scripts": { + "build": "npm run compile && npm run docs:build", "compile": "father build && lessc assets/index.less assets/index.css", + "coverage": "rc-test --coverage", "docs:build": "dumi build", - "docs:deploy": "gh-pages -d .doc", - "gh-pages": "npm run docs:build && npm run docs:deploy", + "docs:deploy": "gh-pages -d docs-dist", + "gh-pages": "npm run compile && cross-env GH_PAGES=1 npm run docs:build && npm run docs:deploy", "lint": "eslint .", - "lint-staged": "lint-staged", - "prepare": "husky install && dumi setup", "prepublishOnly": "npm run compile && rc-np", - "postpublish": "npm run gh-pages", + "prettier": "prettier --write --ignore-unknown .", "start": "dumi dev", - "test": "umi-test" - }, - "lint-staged": { - "**/*.{js,jsx,tsx,ts,md,json}": [ - "prettier --write" - ] + "test": "rc-test", + "tsc": "tsc --noEmit", + "prepare": "husky" }, "dependencies": { "@rc-component/util": "^1.11.1", @@ -48,29 +45,39 @@ }, "devDependencies": { "@rc-component/father-plugin": "^2.2.0", - "@rc-component/np": "^1.0.3", - "@testing-library/react": "^16.0.1", - "@types/jest": "^29.4.0", - "@types/node": "^24.5.2", - "@types/react": "^19.1.14", - "@types/react-dom": "^19.1.9", - "@umijs/fabric": "^3.0.0", - "dumi": "^2.0.0", - "eslint": "^8.55.0", - "eslint-plugin-jest": "^27.6.0", - "eslint-plugin-unicorn": "^49.0.0", - "father": "^4.0.0", - "gh-pages": "^6.1.0", - "husky": "^8.0.1", - "less": "^4.1.3", - "lint-staged": "^15.1.0", - "prettier": "^3.1.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "umi-test": "^1.9.7" + "@rc-component/np": "^1.0.4", + "@testing-library/react": "^15.0.7", + "@types/jest": "^29.5.14", + "@types/node": "^26.0.1", + "@types/react": "^18.3.31", + "@types/react-dom": "^18.3.7", + "@umijs/fabric": "^4.0.1", + "dumi": "^2.4.35", + "eslint": "^8.57.1", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-unicorn": "^56.0.1", + "father": "^4.6.23", + "gh-pages": "^6.3.0", + "husky": "^9.1.7", + "less": "^4.6.7", + "lint-staged": "^16.4.0", + "prettier": "^3.9.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "cross-env": "^10.1.0", + "rc-test": "^7.1.3", + "typescript": "^5.9.3" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" + }, + "types": "./es/index.d.ts", + "style": "./assets/index.css", + "publishConfig": { + "access": "public" + }, + "lint-staged": { + "*": "prettier --write --ignore-unknown" } } diff --git a/tsconfig.json b/tsconfig.json index f110b99..9388b08 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,20 +1,49 @@ { "compilerOptions": { "target": "esnext", - "module": "ESNext", "moduleResolution": "node", "baseUrl": "./", - "lib": ["dom", "es2017"], + "lib": [ + "dom", + "es2017" + ], "jsx": "react", - "strict": true, - "esModuleInterop": true, - "experimentalDecorators": true, - "emitDecoratorMetadata": true, - "skipLibCheck": true, "declaration": true, + "skipLibCheck": true, + "esModuleInterop": true, "paths": { - "@rc-component/switch": ["src/"], - "@@/*": [".dumi/tmp/*"] - } - } + "@/*": [ + "src/*" + ], + "@@/*": [ + ".dumi/tmp/*" + ], + "@rc-component/switch": [ + "src/index.tsx" + ], + "@rc-component/switch/es": [ + "src" + ], + "@rc-component/switch/es/*": [ + "src/*" + ], + "@rc-component/switch/assets/*": [ + "assets/*" + ] + }, + "strict": true, + "ignoreDeprecations": "5.0" + }, + "include": [ + ".fatherrc.ts", + ".dumirc.ts", + "src", + "tests", + "docs/examples" + ], + "exclude": [ + "docs-dist", + "lib", + "es" + ] } diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..5f9139e --- /dev/null +++ b/vercel.json @@ -0,0 +1,6 @@ +{ + "framework": "umijs", + "installCommand": "npm install", + "buildCommand": "npm run build", + "outputDirectory": "docs-dist" +}