diff --git a/.dumirc.ts b/.dumirc.ts index 7a89997..0f1beb4 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,6 +1,9 @@ import { defineConfig } from 'dumi'; import path from 'path'; +const basePath = process.env.GH_PAGES ? '/rate/' : '/'; +const publicPath = basePath; + export default defineConfig({ alias: { '@rc-component/rate$': path.resolve('src'), @@ -11,4 +14,7 @@ export default defineConfig({ name: 'Rate', logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', }, + outputPath: 'docs-dist', + base: basePath, + publicPath, }); 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 d151590..3b730ef 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,20 +1,19 @@ version: 2 updates: -- package-ecosystem: npm - directory: "/" - schedule: - interval: daily - time: "21:00" - open-pull-requests-limit: 10 - ignore: - - dependency-name: "@types/react" - versions: - - 17.0.0 - - 17.0.1 - - 17.0.2 - - 17.0.3 - - dependency-name: "@types/react-dom" - versions: - - 17.0.0 - - 17.0.1 - - 17.0.2 + - 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/codeql.yml b/.github/workflows/codeql.yml index 4204398..be9c576 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: "7 4 * * 2" + - cron: '7 4 * * 2' 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@v7 + 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/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 5735e2d..8d135ed 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -1,6 +1,9 @@ name: ✅ test on: [push, pull_request] +permissions: + contents: read 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: + CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} \ No newline at end of file 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 2bbb726..b3750a5 100755 --- a/.gitignore +++ b/.gitignore @@ -29,10 +29,12 @@ package-lock.json pnpm-lock.yaml .doc/ dist +docs-dist .doc # dumi .dumi/tmp .dumi/tmp-test .dumi/tmp-production +.vercel bun.lockb diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..2312dc5 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +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 1dbe6e9..c1caeb6 100644 --- a/README.md +++ b/README.md @@ -1,121 +1,124 @@ -# rc-rate - -React Rate Component - -[![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]: http://img.shields.io/npm/v/rc-rate.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-rate -[github-actions-image]: https://github.com/react-component/rate/workflows/CI/badge.svg -[github-actions-url]: https://github.com/react-component/rate/actions -[codecov-image]: https://img.shields.io/codecov/c/github/react-component/rate/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/react-component/rate/branch/master -[david-url]: https://david-dm.org/react-component/rate -[david-image]: https://david-dm.org/react-component/rate/status.svg?style=flat-square -[david-dev-url]: https://david-dm.org/react-component/rate?type=dev -[david-dev-image]: https://david-dm.org/react-component/rate/dev-status.svg?style=flat-square -[download-image]: https://img.shields.io/npm/dm/rc-rate.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-rate -[bundlephobia-url]: https://bundlephobia.com/result?p=rc-rate -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-rate -[dumi-url]: https://github.com/umijs/dumi -[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square - -## Screenshots - - - -## Changelog - -- [CHANGELOG](./CHANGELOG.md) +
+

@rc-component/rate

+

Ant Design Part of the Ant Design ecosystem.

+

📦 ⭐ Accessible React rating component with half-star and keyboard support.

-## Development +

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

+
-``` -npm install -npm start -``` +

English | 简体中文

-## Example -- Local: http://localhost:9001/ +## Highlights -- Online: http://react-component.github.io/rate/ +- Controlled and uncontrolled rating values. +- Half-star selection, custom characters, and custom character rendering. +- Keyboard interaction, focus/blur methods, disabled state, and RTL support. +- TypeScript definitions for props and imperative refs. -## install +## Install -[![rc-rate](https://nodei.co/npm/rc-rate.png)](https://npmjs.org/package/rc-rate) +```bash +npm install @rc-component/rate +``` ## Usage -```js -import React from 'react'; -import ReactDOM from 'react-dom'; +```tsx | pure import Rate from '@rc-component/rate'; - -ReactDOM.render( - , - document.getElementById('root') -) +export default () => ; ``` -### with [styled-components](https://github.com/styled-components/styled-components) -```js -import React from 'react'; -import ReactDOM from 'react-dom'; +```tsx | pure import Rate from '@rc-component/rate'; -import styled from 'styled-components'; - -const StyledRate = styled(Rate)` - &.rc-rate { - font-size: ${({ size }) => size}px; - } -` - -ReactDOM.render( - , - document.getElementById('root') -) +export default () => ( + index + 1} + onChange={(value) => { + console.log('selected', value); + }} + /> +); ``` -## API +## Examples -### props +Run the local dumi site: -| name | type | default | description | -| ------------- | --------------------------------- | ------------- | ----------------------------------------------------- | -| count | number | 5 | Star numbers | -| value | number | - | Controlled value | -| defaultValue | number | 0 | Initial value | -| allowHalf | boolean | false | Support half star | -| allowClear | boolean | true | Reset when click again | -| style | object | {} | | -| onChange | function | (value) => {} | `onChange` will be triggered when click | -| onHoverChange | function | (value) => {} | `onHoverChange` will be triggered when hover on stars | -| character | ReactNode \| (props) => ReactNode | ★ | The each character of rate | -| disabled | boolean | false | | -| direction | string | `ltr` | The direction of rate | +```bash +npm install +npm start +``` -## Test Case +Then open `http://localhost:8000`. -``` +## API + +### Rate + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `allowClear` | boolean | true | Clear the value when clicking the selected item again. | +| `allowHalf` | boolean | false | Enable half item selection. | +| `autoFocus` | boolean | false | Focus the rating on mount. | +| `character` | ReactNode \| (props: StarProps) => ReactNode | `'★'` | Custom character for each item. | +| `characterRender` | (origin: ReactElement, props: StarProps) => ReactNode | - | Custom renderer for each item. | +| `className` | string | - | Additional class name. | +| `count` | number | 5 | Number of rating items. | +| `defaultValue` | number | 0 | Initial uncontrolled value. | +| `direction` | string | `'ltr'` | Layout direction. Use `'rtl'` for right-to-left display. | +| `disabled` | boolean | false | Disable interaction. | +| `id` | string | - | Root element id. | +| `keyboard` | boolean | true | Enable keyboard control. | +| `prefixCls` | string | `'rc-rate'` | Prefix class name. | +| `style` | React.CSSProperties | - | Root style. | +| `tabIndex` | number | 0 | Root tab index. | +| `value` | number | - | Controlled value. | +| `onBlur` | () => void | - | Blur callback. | +| `onChange` | (value: number) => void | - | Value change callback. | +| `onFocus` | () => void | - | Focus callback. | +| `onHoverChange` | (value: number) => void | - | Hover value callback. | +| `onKeyDown` | React.KeyboardEventHandler | - | Keydown callback. | +| `onMouseEnter` | React.MouseEventHandler | - | Mouse enter callback. | +| `onMouseLeave` | React.MouseEventHandler | - | Mouse leave callback. | + +### Ref + +| Name | Type | Description | +| ------- | ---------- | ----------------------------- | +| `blur` | () => void | Remove focus from the rating. | +| `focus` | () => void | Focus the rating. | + +## Development + +```bash +npm install +npm start npm test -npm run chrome-test +npm run tsc +npm run compile +npm run build ``` -## Coverage +The dumi site runs at `http://localhost:8000` by default. -``` -npm run coverage +## Release + +```bash +npm run prepublishOnly ``` -open coverage/ dir +The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License -rc-rate is released under the MIT license. +@rc-component/rate 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..001637b --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,124 @@ +
+

@rc-component/rate

+

Ant Design Ant Design 生态的一部分。

+

📦 ⭐ React 评分组件，支持半星、自定义字符、清除和键盘交互。

+ +

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

+
+ +

English | 简体中文

+ + +## 特性 + +- 受控和非受控额定值。 +- 半星选择、自定义角色和自定义角色渲染。 +- 支持键盘交互、焦点/模糊方法、取消状态和RTL。 +- props 和命令式引用的 TypeScript 定义。 + +## 安装 + +```bash +npm install @rc-component/rate +``` + +## 使用 + +```tsx | pure +import Rate from '@rc-component/rate'; +export default () => ; +``` + +```tsx | pure +import Rate from '@rc-component/rate'; +export default () => ( + index + 1} + onChange={(value) => { + console.log('selected', value); + }} + /> +); +``` + +## 示例 + +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 + +## API + +### Rate + +| 名称 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| `allowClear` | boolean | true | 再次单击所选项目时清除该值。 | +| `allowHalf` | boolean | false | 启用一半项目选择。 | +| `autoFocus` | boolean | false | 将评级重点放在安装上。 | +| `character` | ReactNode \| (props: StarProps) => ReactNode | `'★'` | 每项的自定义字符。 | +| `characterRender` | (origin: ReactElement, props: StarProps) => ReactNode | - | 每项的自定义渲染函数。 | +| `className` | string | - | 附加 className。 | +| `count` | number | 5 | 评级项目的数量。 | +| `defaultValue` | number | 0 | 初始不受控值。 | +| `direction` | string | `'ltr'` | 布局方向。使用 `'rtl'` 从右到左显示。 | +| `disabled` | boolean | false | 禁用交互。 | +| `id` | string | - | 根元素 ID。 | +| `keyboard` | boolean | true | 启用键盘控制。 | +| `prefixCls` | string | `'rc-rate'` | className 前缀。 | +| `style` | React.CSSProperties | - | 根样式。 | +| `tabIndex` | number | 0 | 根选项卡索引。 | +| `value` | number | - | 受控值。 | +| `onBlur` | () => void | - | 失焦回调。 | +| `onChange` | (value: number) => void | - | 值变化回调。 | +| `onFocus` | () => void | - | 聚焦回调。 | +| `onHoverChange` | (value: number) => void | - | 悬浮值回调。 | +| `onKeyDown` | React.KeyboardEventHandler | - | 按键回调。 | +| `onMouseEnter` | React.MouseEventHandler | - | 鼠标进入回调。 | +| `onMouseLeave` | React.MouseEventHandler | - | 鼠标离开回调。 | + +### Ref + +| 名称 | 类型 | 说明 | +| ------- | ---------- | ----------------------------- | +| `blur` | () => void | 移除评分组件焦点。 | +| `focus` | () => void | 聚焦评分组件。 | + +## 本地开发 + +```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/rate 基于 [MIT](./LICENSE) 许可证发布。 diff --git a/docs/index.md b/docs/index.md index aed1d13..a6cb69e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,6 @@ --- hero: - title: rc-rate + title: '@rc-component/rate' description: React Rate Component --- diff --git a/package.json b/package.json index 5f9926b..2b20f2f 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "react-rate", "rate" ], - "homepage": "https://github.com/react-component/rate", + "homepage": "https://react-component.github.io/rate", "bugs": { "url": "https://github.com/react-component/rate/issues" }, @@ -25,19 +25,20 @@ "assets/*.css" ], "scripts": { + "build": "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 dist", + "docs:deploy": "gh-pages -d docs-dist", + "gh-pages": "cross-env GH_PAGES=1 npm run docs:build && npm run docs:deploy", "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", - "now-build": "npm run docs:build", - "prepare": "dumi setup", + "prepare": "husky && dumi setup", "prepublishOnly": "npm run compile && rc-np", - "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", - "postpublish": "npm run docs:build && npm run docs:deploy", + "prettier": "prettier --write --ignore-unknown .", + "postpublish": "npm run gh-pages", "start": "dumi dev", "test": "rc-test", - "tsc": "bunx tsc --noEmit" + "tsc": "tsc --noEmit" }, "dependencies": { "@rc-component/util": "^1.11.1", @@ -45,24 +46,27 @@ }, "devDependencies": { "@rc-component/father-plugin": "^2.2.0", - "@rc-component/np": "^1.0.0", + "prettier": "^3.9.0", + "@rc-component/np": "^1.0.4", "@rc-component/tooltip": "^1.2.1", - "@testing-library/react": "^16.0.1", - "@types/jest": "^29.5.1", - "@types/node": "^24.5.2", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "@umijs/fabric": "^3.0.0", - "cross-env": "^7.0.0", - "dumi": "^2.1.2", - "eslint": "^7.1.0", - "father": "^4.0.0", - "gh-pages": "^3.1.0", - "less": "^3.0.0", - "rc-test": "^7.0.15", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "typescript": "^5.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", + "cross-env": "^10.1.0", + "dumi": "^2.4.35", + "eslint": "^8.57.1", + "father": "^4.6.23", + "gh-pages": "^6.3.0", + "less": "^4.6.7", + "rc-test": "^7.1.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "typescript": "^5.9.3", + "husky": "^9.1.7", + "lint-staged": "^16.4.0" }, "peerDependencies": { "react": ">=16.9.0", @@ -70,5 +74,12 @@ }, "engines": { "node": ">=8.x" - } + }, + "publishConfig": { + "access": "public" + }, + "lint-staged": { + "*": "prettier --write --ignore-unknown" + }, + "types": "./es/index.d.ts" } diff --git a/tsconfig.json b/tsconfig.json index 6820619..f0380c4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,10 +8,31 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": [".dumi/tmp/*"], - "@rc-component/rate": ["src/index.tsx"] - } + "@/*": [ + "src/*" + ], + "@@/*": [ + ".dumi/tmp/*" + ], + "@rc-component/rate": [ + "src/index.tsx" + ] + }, + "ignoreDeprecations": "5.0" }, - "include": [".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx"] + "include": [ + ".fatherrc.ts", + ".dumirc.ts", + "src", + "docs", + "tests" + ], + "exclude": [ + "node_modules", + "lib", + "es", + "dist", + "docs-dist", + ".dumi" + ] } 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" +}