diff --git a/.dumirc.ts b/.dumirc.ts index 01854c1..7d2614c 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,6 +1,12 @@ import { defineConfig } from 'dumi'; +const basePath = process.env.GH_PAGES ? '/checkbox/' : '/'; +const publicPath = basePath; + export default defineConfig({ + outputPath: 'docs-dist', + base: basePath, + publicPath, themeConfig: { name: 'Checkbox', }, 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/workflows/codeql.yml b/.github/workflows/codeql.yml index 1bc4e70..85ac177 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -1,12 +1,12 @@ -name: "CodeQL" +name: 'CodeQL' on: push: - branches: [ "master" ] + branches: ['master'] pull_request: - branches: [ "master" ] + branches: ['master'] schedule: - - cron: "8 20 * * 1" + - cron: '8 20 * * 1' jobs: analyze: @@ -20,22 +20,24 @@ jobs: strategy: fail-fast: false matrix: - language: [ javascript ] + language: [javascript] steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false - name: Initialize CodeQL - uses: github/codeql-action/init@v2 + uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e with: languages: ${{ matrix.language }} queries: +security-and-quality - name: Autobuild - uses: github/codeql-action/autobuild@v2 + uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e with: - category: "/language:${{ matrix.language }}" + category: '/language:${{ matrix.language }}' diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 5735e2d..f8482b6 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -2,5 +2,5 @@ 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 + 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..f68281c --- /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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + 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..0f193f1 --- /dev/null +++ b/.github/workflows/surge-preview.yml @@ -0,0 +1,48 @@ +name: Surge Preview + +on: + pull_request: + +permissions: + contents: read + pull-requests: write + checks: write + statuses: write + +jobs: + preview: + runs-on: ubuntu-latest + env: + PREVIEW: true + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + 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/README.md b/README.md index 0a64f69..7d31401 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,13 @@ -# rc-checkbox +
+

@rc-component/checkbox

+

Ant Design Part of the Ant Design ecosystem.

+

☑️ A small, accessible checkbox primitive for React.

+
---- +

English | 简体中文

-Checkbox ui component for react. + +
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] @@ -11,102 +16,114 @@ Checkbox ui component for react. [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] -[npm-image]: http://img.shields.io/npm/v/rc-checkbox.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-checkbox -[travis-image]: https://img.shields.io/travis/react-component/checkbox/master?style=flat-square -[travis-url]: https://travis-ci.com/react-component/checkbox -[github-actions-image]: https://github.com/react-component/checkbox/workflows/CI/badge.svg -[github-actions-url]: https://github.com/react-component/checkbox/actions +
+ +[npm-image]: https://img.shields.io/npm/v/@rc-component/checkbox.svg?style=flat-square +[npm-url]: https://npmjs.org/package/@rc-component/checkbox +[github-actions-image]: https://github.com/react-component/checkbox/actions/workflows/main.yml/badge.svg +[github-actions-url]: https://github.com/react-component/checkbox/actions/workflows/main.yml [codecov-image]: https://img.shields.io/codecov/c/github/react-component/checkbox/master.svg?style=flat-square [codecov-url]: https://app.codecov.io/gh/react-component/checkbox -[david-url]: https://david-dm.org/react-component/checkbox -[david-image]: https://david-dm.org/react-component/checkbox/status.svg?style=flat-square -[david-dev-url]: https://david-dm.org/react-component/checkbox?type=dev -[david-dev-image]: https://david-dm.org/react-component/checkbox/dev-status.svg?style=flat-square -[download-image]: https://img.shields.io/npm/dm/rc-checkbox.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-checkbox -[bundlephobia-url]: https://bundlephobia.com/package/rc-checkbox -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-checkbox -[dumi-url]: https://github.com/umijs/dumi +[download-image]: https://img.shields.io/npm/dm/@rc-component/checkbox.svg?style=flat-square +[download-url]: https://npmjs.org/package/@rc-component/checkbox +[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/%40rc-component%2Fcheckbox?style=flat-square +[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/checkbox [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square +[dumi-url]: https://github.com/umijs/dumi + +## Highlights + +- Works as a controlled or uncontrolled checkbox. +- Exposes an imperative ref for focus, blur, and DOM access. +- Keeps native input attributes available while normalizing the change event. +- Ships compiled JavaScript, TypeScript definitions, and a standalone CSS asset. ## Install -[![rc-checkbox](https://nodei.co/npm/rc-checkbox.png)](https://npmjs.org/package/rc-checkbox) +```bash +npm install @rc-component/checkbox +``` ## Usage -```js -import checkbox from '@rc-component/checkbox'; - -export default () => ; +```tsx +import Checkbox from '@rc-component/checkbox'; +import '@rc-component/checkbox/assets/index.css'; + +export default function App() { + return ( + { + console.log(event.target.checked); + }} + /> + ); +} ``` -## Compatibility +## Examples + +Run the local dumi site: -| [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 | +```bash +npm install +npm start +``` + +Then open `http://localhost:8000`. ## API - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
prefixClsStringrc-checkbox
classNameString''additional class name of root node
nameStringsame with native input checkbox
checkedenum: 0,1,2
defaultCheckedenum: 0,1,20same with native input checkbox
onChangeFunction(e:Event, checked:Number)called when checkbox is changed. e is native event, checked is original checked state.
+### Checkbox + +| Property | Description | Type | Default | +| -------------- | ------------------------------------------ | -------------------------------------- | ------------- | +| checked | Whether the checkbox is checked | boolean | - | +| className | Additional class name | string | - | +| defaultChecked | Whether the checkbox is checked by default | boolean | false | +| disabled | Whether the checkbox is disabled | boolean | false | +| name | Same as native checkbox input `name` | string | - | +| prefixCls | Component class name prefix | string | `rc-checkbox` | +| style | Inline style for the wrapper | `React.CSSProperties` | - | +| type | Native input type | string | `checkbox` | +| value | Same as native checkbox input `value` | string \| number \| readonly string[] | - | +| onChange | Callback when checked state changes | `(event: CheckboxChangeEvent) => void` | - | + +Other native input attributes are also supported. + +### Ref + +| Property | Description | Type | +| ------------- | ------------------------------ | ---------------------------------- | +| blur | Remove focus from the checkbox | `() => void` | +| focus | Focus the checkbox | `(options?: FocusOptions) => void` | +| input | Native input element | `HTMLInputElement \| null` | +| nativeElement | Wrapper element | `HTMLElement \| null` | ## Development -``` +```bash npm install npm start ``` -Online demo: http://react-component.github.io/checkbox/ +```bash +npm test +npm run tsc +npm run lint +npm run compile +npm run build +``` + +## Release + +```bash +npm run prepublishOnly +``` + +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License -rc-checkbox is released under the MIT license. +@rc-component/checkbox is released under the [MIT](./LICENSE.md) license. diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..589541e --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,129 @@ +
+

@rc-component/checkbox

+

Ant Design Ant Design 生态的一部分。

+

☑️ 轻量、可访问的 React 复选框基础组件。

+
+ +

English | 简体中文

+ + +
+ +[![NPM version][npm-image]][npm-url] +[![npm download][download-image]][download-url] +[![build status][github-actions-image]][github-actions-url] +[![Codecov][codecov-image]][codecov-url] +[![bundle size][bundlephobia-image]][bundlephobia-url] +[![dumi][dumi-image]][dumi-url] + +
+ +[npm-image]: https://img.shields.io/npm/v/@rc-component/checkbox.svg?style=flat-square +[npm-url]: https://npmjs.org/package/@rc-component/checkbox +[github-actions-image]: https://github.com/react-component/checkbox/actions/workflows/main.yml/badge.svg +[github-actions-url]: https://github.com/react-component/checkbox/actions/workflows/main.yml +[codecov-image]: https://img.shields.io/codecov/c/github/react-component/checkbox/master.svg?style=flat-square +[codecov-url]: https://app.codecov.io/gh/react-component/checkbox +[download-image]: https://img.shields.io/npm/dm/@rc-component/checkbox.svg?style=flat-square +[download-url]: https://npmjs.org/package/@rc-component/checkbox +[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/%40rc-component%2Fcheckbox?style=flat-square +[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/checkbox +[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square +[dumi-url]: https://github.com/umijs/dumi + +## 特性 + +- 可作为受控或非受控复选框。 +- 引入用于焦点、模糊和 DOM 访问的命令式引用。 +- 在规范化更改事件时保留可用的本机输入属性。 +- 提供编译后的 JavaScript、TypeScript 类型定义和独立 CSS 资源。 + +## 安装 + +```bash +npm install @rc-component/checkbox +``` + +## 使用 + +```tsx +import Checkbox from '@rc-component/checkbox'; +import '@rc-component/checkbox/assets/index.css'; + +export default function App() { + return ( + { + console.log(event.target.checked); + }} + /> + ); +} +``` + +## 示例 + +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 + +## API + +### Checkbox + +| 参数 | 说明 | 类型 | 默认值 | +| -------------- | ------------------------------------------ | -------------------------------------- | ------------- | +| checked | 复选框是否被选中 | boolean | - | +| className | 附加 className | string | - | +| defaultChecked | 复选框是否默认选中 | boolean | false | +| disabled | 复选框是否禁用 | boolean | false | +| name | 与原生 checkbox input 一致 `name` | string | - | +| prefixCls | 组件 className 前缀 | string | `rc-checkbox` | +| style | 包装器的内联样式 | `React.CSSProperties` | - | +| type | 原生输入类型 | string | `checkbox` | +| value | 与原生 checkbox input 一致 `value` | string \| number \| readonly string[] | - | +| onChange | 勾选状态改变时回调 | `(event: CheckboxChangeEvent) => void` | - | + +还支持其他本机输入属性。 + +### Ref + +| 参数 | 说明 | 类型 | +| ------------- | ------------------------------ | ---------------------------------- | +| blur | 从复选框中移除焦点 | `() => void` | +| focus | 聚焦复选框 | `(options?: FocusOptions) => void` | +| input | 原生输入元素 | `HTMLInputElement \| null` | +| nativeElement | 包装元素 | `HTMLElement \| null` | + +## 本地开发 + +```bash +npm install +npm start +``` + +```bash +npm test +npm run tsc +npm run lint +npm run compile +npm run build +``` + +## 发布 + +```bash +npm run prepublishOnly +``` + +包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。 + +## 许可证 + +@rc-component/checkbox 基于 [MIT](./LICENSE.md) 许可证发布。 diff --git a/package.json b/package.json index 038b9fb..963ce38 100644 --- a/package.json +++ b/package.json @@ -31,18 +31,19 @@ "coverage": "jest --coverage", "gh-pages": "npm run build && father doc deploy -d dist", "lint": "eslint src/ --ext .tsx,.ts", - "prepare": "husky install && dumi setup", + "prepare": "husky && dumi setup", "prepublishOnly": "npm run compile && rc-np", + "prettier": "prettier --write --ignore-unknown .", "start": "dumi dev", "test": "jest", - "tsc": "bunx tsc --noEmit" + "tsc": "tsc --noEmit" }, "lint-staged": { "*.{js,jsx,less,md,json}": [ - "prettier --write" + "prettier --write --ignore-unknown" ], "*.ts?(x)": [ - "prettier --parser=typescript --write" + "prettier --write --ignore-unknown" ] }, "dependencies": { @@ -51,29 +52,29 @@ }, "devDependencies": { "@rc-component/father-plugin": "^2.2.0", - "@rc-component/np": "^1.0.0", - "@testing-library/jest-dom": "^6.1.5", - "@testing-library/react": "^14.1.2", - "@types/jest": "^29.2.4", - "@types/node": "^24.5.2", - "@types/react": "^18.0.26", - "@types/react-dom": "^18.0.9", + "@rc-component/np": "^1.0.4", + "@testing-library/jest-dom": "^6.9.1", + "@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", - "@umijs/test": "^4.0.34", - "dumi": "^2.0.12", - "eslint": "^8.55.0", - "eslint-plugin-jest": "^27.6.0", - "eslint-plugin-unicorn": "^50.0.1", - "father": "^4.1.1", - "husky": "9.0.5", - "jest": "^29.3.1", - "jest-environment-jsdom": "^29.3.1", - "less": "^4.2.0", - "lint-staged": "^15.1.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "@umijs/test": "^4.6.68", + "dumi": "^2.4.35", + "eslint": "^8.57.1", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-unicorn": "^56.0.1", + "father": "^4.6.23", + "husky": "^9.1.7", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "less": "^4.6.7", + "lint-staged": "^16.4.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "ts-node": "^10.9.1", - "typescript": "^5.2.2" + "typescript": "^5.9.3" }, "peerDependencies": { "react": ">=16.9.0", diff --git a/tsconfig.json b/tsconfig.json index 206c1bb..3e28a3f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,10 +9,22 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": [".dumi/tmp/*"], - "@rc-component/checkbox": ["src/index.tsx"] - } + "@/*": [ + "src/*" + ], + "@@/*": [ + ".dumi/tmp/*" + ], + "@rc-component/checkbox": [ + "src/index.tsx" + ] + }, + "ignoreDeprecations": "5.0" }, - "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"] + "include": [ + ".fatherrc.ts", + ".dumirc.ts", + "**/*.ts", + "**/*.tsx" + ] } 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" +}