feat: Circle support semantic structure

[zombieJ]

antd 中只用了 Circle，这里就先给 Circle 加了。

Note：另外 rc-progress 的 root 在 antd 里是 body，因为 antd 本身还有一个 indicator。

Summary by CodeRabbit

• 新功能

  • Circle 组件和 ProgressProps 接口新增 classNames 和 styles 属性，支持为根节点、轨道和进度轨自定义类名和样式。
  • PtgCircle 组件支持通过 className 属性自定义圆环路径的类名。

• 文档

  • 文档、示例和配置全面更新，包名由 rc-progress 更改为 @rc-component/progress。

• 测试

  • 新增 Circle 组件的 classNames 和 styles 语义化测试用例。

• 其他

  • 包名重命名，版本号重置为 1.0.0。
  • 移除本地 useId hook，改为使用外部包实现。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
progress	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 16, 2025 4:20pm

[coderabbitai]

Walkthrough

本次变更主要将原有包名 rc-progress 全面升级为命名空间包名 @rc-component/progress，涉及文档、配置、示例及源码中的包名替换。同时，Circle 组件及其相关的 ProgressProps 接口新增了 classNames 和 styles 属性，允许为根节点、轨道和进度轨迹分别自定义 class 和样式。内部使用的 useId hook 迁移为外部依赖，并删除了本地实现。此外，新增了相关的单元测试以验证语义 class 和样式的应用。

Changes

文件/路径分组	变更摘要
package.json, now.json, tsconfig.json, .dumirc.ts, docs/index.md, README.md	包名从 rc-progress 统一更名为 @rc-component/progress，相关配置、文档、别名同步更新
docs/examples/*.tsx	示例代码中的包导入路径由 rc-progress 改为 @rc-component/progress
src/Circle/PtgCircle.tsx	ColorGradientProps 新增可选 className，渲染 <circle> 时支持自定义 class
src/Circle/index.tsx	引入 classNames 和 styles 可选属性，允许为根、轨道、进度轨迹分别自定义 class 和样式
src/interface.ts	新增类型 SemanticName，ProgressProps 增加 classNames 和 styles 属性
src/Line.tsx	useId hook 引用路径调整为外部包
src/hooks/useId.ts	删除本地 useId hook 实现，全部使用外部依赖
tests/semantic.spec.tsx	新增 Circle 组件关于语义 class 和样式的单元测试

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CircleComponent
    participant SVGElements

    User->>CircleComponent: 传入 classNames/styles 属性
    CircleComponent->>SVGElements: 渲染 root/rail/track，合并默认与自定义 class/style
    SVGElements-->>User: 呈现带自定义样式的进度环

Loading

Poem

🐰
命名空间新衣裳，progress焕新光，
样式语义随心配，轨迹轨道皆可装。
测试护航保质量，
小兔子跳跃在代码行，
新版进度，未来可期长！

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

.dumirc.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

docs/examples/fast-progress.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

docs/examples/loading.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

• 9 others

Tip

⚡💬 Agentic Chat (Pro Plan, General Availability)

• We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 27a7aab and e645f93.

⛔ Files ignored due to path filters (2)

• tests/__snapshots__/conic.spec.tsx.snap is excluded by !**/*.snap
• tests/__snapshots__/index.spec.js.snap is excluded by !**/*.snap

📒 Files selected for processing (18)

• .dumirc.ts (1 hunks)
• README.md (5 hunks)
• docs/examples/fast-progress.tsx (1 hunks)
• docs/examples/gap.tsx (1 hunks)
• docs/examples/gradient-circle.tsx (1 hunks)
• docs/examples/loading.tsx (1 hunks)
• docs/examples/simple.tsx (1 hunks)
• docs/examples/steps.tsx (1 hunks)
• docs/index.md (1 hunks)
• now.json (1 hunks)
• package.json (1 hunks)
• src/Circle/PtgCircle.tsx (4 hunks)
• src/Circle/index.tsx (5 hunks)
• src/Line.tsx (1 hunks)
• src/hooks/useId.ts (0 hunks)
• src/interface.ts (1 hunks)
• tests/semantic.spec.tsx (1 hunks)
• tsconfig.json (1 hunks)

💤 Files with no reviewable changes (1)

• src/hooks/useId.ts

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/Circle/index.tsx (1)

src/Circle/util.ts (1)

• VIEW_BOX_SIZE (5-5)

🪛 LanguageTool

README.md

[style] ~5-~5: Using many exclamation marks might seem excessive (in this case: 4 exclamation marks for a text that’s 1863 characters long)
Context: .... [![NPM version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download...

(EN_EXCESSIVE_EXCLAMATION)

🔇 Additional comments (34)

src/interface.ts (2)

1-1: 新增的语义化类型定义清晰明确

新增的SemanticName类型别名定义了组件的三个主要语义部分：根元素、轨道和进度条，为后续样式定制提供了类型支持。

---

8-9: 良好的语义化样式支持设计

新增的classNames和styles属性使组件支持针对不同语义部分（根元素、轨道和进度条）分别应用样式，增强了组件的定制能力，符合PR的语义结构支持目标。这种设计模式也与antd的样式定制方案保持一致。

docs/examples/steps.tsx (1)

2-2: 包名更新正确

导入路径已正确更新为新的命名空间包名@rc-component/progress，与项目整体包名变更保持一致。

docs/examples/gradient-circle.tsx (1)

2-2: 包名更新正确

导入路径已正确更新为新的命名空间包名@rc-component/progress，与项目整体包名变更保持一致。

docs/examples/loading.tsx (1)

2-2: 包名更新正确

导入路径已正确更新为新的命名空间包名@rc-component/progress，与项目整体包名变更保持一致。

docs/examples/gap.tsx (1)

2-3: 包名升级 import 路径无误

import 路径从 rc-progress 升级为 @rc-component/progress，与整体包名升级保持一致，未发现问题。

now.json (1)

3-3: 项目名称已同步为新包名

name 字段已从 rc-progress 更新为 @rc-component/progress，与包名升级保持一致，配置无误。

docs/examples/simple.tsx (1)

2-3: 包名升级 import 路径无误

import 路径从 rc-progress 升级为 @rc-component/progress，与整体包名升级保持一致，未发现问题。

src/Line.tsx (1)

6-6: useId hook 路径已切换为外部依赖

useId 的 import 路径已切换为外部包，提升了代码复用性，与其它组件保持一致，未发现问题。

docs/examples/fast-progress.tsx (1)

2-3: 包名升级 import 路径无误

import 路径从 rc-progress 升级为 @rc-component/progress，与整体包名升级保持一致，未发现问题。

.dumirc.ts (1)

7-7: 更新包名一致性

配置中的 name 属性从 'rc-progress' 修改为 '@rc-component/progress'，这一更改与整个项目的包名重命名保持一致。这种命名空间方式符合现代 npm 包管理最佳实践。

docs/index.md (1)

3-3: 文档标题与包名保持一致

文档英雄区域的标题从 "rc-progress" 更新为 "@rc-component/progress"，确保了文档与实际包名的一致性，有助于用户理解正确的引用方式。

package.json (1)

2-3: 包名和版本调整

包从 "rc-progress" 重命名为 "@rc-component/progress"，同时版本号从 "4.0.0" 重置为 "1.0.0"。这是命名空间迁移的标准做法：

1. 添加 @rc-component 命名空间提高了包的组织性和归属明确性
2. 版本重置为 1.0.0 符合语义化版本规范，表明这是新命名空间下的首个稳定版本

这种迁移方式有利于避免与旧包名冲突，并明确标识这是一个新的发布周期。

src/Circle/PtgCircle.tsx (4)

4-4: 添加 classNames 工具导入

引入 classNames 工具用于合并类名，为组件添加自定义样式类支持做准备。

---

25-27: 增强组件接口以支持自定义类名

在 ColorGradientProps 接口中添加可选的 className 属性，使组件能够接收外部传入的自定义类名。这与 PR 目标中提到的"增强 Circle 组件的语义结构"相符，允许用户为组件添加语义化的类名。

---

38-45: 在组件参数解构中添加 className

将新增的 className 属性添加到组件参数解构中，为后续使用做准备。这是响应式编程和函数式组件的最佳实践，确保所有需要的属性都被正确提取。

---

61-63: 实现类名合并逻辑

使用 classNames 工具将默认类名 ${prefixCls}-circle-path 与用户传入的 className 进行合并，这种实现方式确保：

1. 默认类名始终存在，保证基础样式不变
2. 用户自定义类名可以附加，实现样式的扩展和覆盖
3. 维持组件的向后兼容性

这是 React 组件中处理类名的标准最佳实践，提高了组件的可定制性和灵活性。

tsconfig.json (1)

13-13: 路径别名更新与包名变更保持一致。

将路径别名从 rc-progress 更新为 @rc-component/progress，确保 TypeScript 模块解析与新的包名称保持一致。这种变更反映了项目整体从普通包名到命名空间包名的迁移。

README.md (7)

1-1: 更新了 README 标题以反映新的包名。

包名从 rc-progress 更新为 @rc-component/progress，采用了命名空间格式，与整个项目的包名变更保持一致。

---

7-8: 更新了 npm 徽章链接以匹配新的包名。

npm 相关的图片和链接已正确更新为 @rc-component/progress，确保徽章能够正常显示当前包的信息。

---

19-22: 更新了下载统计和包大小链接。

下载统计和 bundlephobia 链接已更新为新的包名 @rc-component/progress，确保这些统计数据正确关联到新包。

---

38-38: 更新了 npm 安装预览图。

安装预览图链接已更新为新的包名 @rc-component/progress，与包名变更保持一致。

---

43-43: 更新了代码示例中的导入路径。

示例代码中的导入语句已从 rc-progress 更新为 @rc-component/progress，确保示例与实际使用方式一致。

---

151-151: 更新了安装命令。

npm 安装命令已更新为使用新的包名 @rc-component/progress，确保用户能够正确安装包。

---

163-163: 更新了许可证声明。

许可证声明中的包名已更新为 @rc-component/progress，与整体包名变更保持一致。

src/Circle/index.tsx (8)

2-2: 从 'classnames' 库导入重命名为 cls。

将 classnames 导入重命名为 cls，提高代码清晰度，这是一个良好的重构。

---

5-5: 使用外部包中的 useId hook 替代本地实现。

从 @rc-component/util/lib/hooks/useId 导入 useId，替代了本地实现，有助于代码重用和维护。

---

19-20: 为 Circle 组件添加 classNames 和 styles 属性。

为组件添加了 classNames 和 styles 属性，默认为空对象，使组件能够支持语义化结构，允许用户为不同元素自定义类名和样式。

---

105-106: 为 PtgCircle 组件添加 className 和 style 支持。

将 classNames.track 添加到 PtgCircle 组件，并在样式中合并 styles.track，使组件能够接收自定义类名和样式。

---

154-155: 为步进轨道添加自定义类名支持。

使用 cls 函数组合默认类名和自定义类名 classNames.track，确保用户可以为步进轨道添加自定义样式。

---

161-161: 为步进轨道添加自定义样式支持。

合并 styles.track 到轨道元素的样式中，确保用户可以为步进轨道添加自定义样式。

---

172-177: 为根 SVG 元素添加自定义类名和样式支持。

使用 cls 函数组合默认类名、classNames.root 和 className 属性，并合并 styles.root 和 style 属性，增强了组件的自定义能力。

---

184-194: 为轨道背景添加自定义类名和样式支持。

使用 cls 函数组合默认类名和 classNames.rail，并合并 styles.rail 到轨道背景样式中，使组件支持更丰富的自定义能力。

tests/semantic.spec.tsx (1)

1-56: 新增语义结构测试文件，验证自定义类名和样式功能。

这个测试文件通过两个测试用例验证了 Circle 组件的语义结构支持功能：

1. 基础测试：确保自定义类名和样式正确应用于根元素、轨道背景和进度轨迹
2. 渐变测试：验证在使用渐变色时，自定义类名和样式仍然能够正确应用

测试使用了辅助函数来简化测试代码，并包含了检查 DOM 元素是否具有预期类名和样式的断言。这些测试覆盖了新添加的 classNames 和 styles 属性的功能，确保它们能够按预期工作。

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.38%. Comparing base (27a7aab) to head (e645f93).

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #303      +/-   ##
==========================================
- Coverage   99.41%   99.38%   -0.04%     
==========================================
  Files           8        7       -1     
  Lines         172      162      -10     
  Branches       52       51       -1     
==========================================
- Hits          171      161      -10     
  Misses          1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.