feat: useItems support classnames and styles

[thinkasany]

Summary by CodeRabbit

• 新功能

  • 为折叠组件（Collapse）引入了更灵活的样式和类名自定义选项
  • 新增语义化的样式和类名定制能力，支持对头部、标题、正文和图标元素进行个性化设置

• 改进

  • 扩展了组件的样式配置接口，提高了组件的可定制性
  • 允许通过 classNames 和 styles 属性全局定义组件样式

• 兼容性

  • 保留了现有组件功能，不影响原有的控制流程
  • 为未来版本的样式定制做好准备

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
collapse	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 14, 2025 7:52am

[coderabbitai]

概述

演练

此拉取请求为 Collapse 组件引入了两个新的属性：classNames 和 styles。这些属性允许更灵活地自定义折叠面板的类名和样式。通过在 src/interface.ts 中定义新的接口和类型，并在 src/hooks/useItems.tsx 中更新处理逻辑，组件现在支持对头部、标题、正文和图标元素进行精细的样式和类名控制。

变更

文件	变更摘要
src/interface.ts	新增 SemanticName 类型 为 CollapseProps 和 CollapsePanelProps 添加 classNames 和 styles 可选属性
src/Collapse.tsx	提取 classNames 和 styles 属性并传递给 useItems 钩子
src/hooks/useItems.tsx	更新 Props 类型定义 在 convertItemsToNodes 和 getNewChild 函数中处理新属性
tests/index.spec.tsx	添加测试用例验证 classNames 和 styles 属性

可能相关的 PR

• feat: improve Semantic for collapse #358: 更新可折叠组件的类名和语义结构
• refactor: update content to panel #359: 修改 PanelContent 组件的类名和样式

建议的审阅者

• zombieJ

诗歌

🐰 折叠面板，灵动如风
类名样式，自由随心
语义标记，精准掌控
组件进化，兔子欢呼
代码之美，在此绽放 🎨

Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ 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. (Beta)
• @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.12%. Comparing base (f0b2c7f) to head (fa25759).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #361   +/-   ##
=======================================
  Coverage   99.12%   99.12%           
=======================================
  Files           5        5           
  Lines         114      114           
  Branches       43       43           
=======================================
  Hits          113      113           
  Misses          1        1           

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/hooks/useItems.tsx (1)

24-25: 属性传递实现完整！

样式属性从父组件到面板组件的传递路径清晰。建议添加类型注释以提高代码可读性。

-    classNames: collapseClassNames,
-    styles,
+    classNames: collapseClassNames, // Pass semantic class names to panel
+    styles, // Pass semantic styles to panel

Also applies to: 61-62

tests/index.spec.tsx (1)

874-875: 测试用例设计合理完整！

新增的测试用例完整验证了样式和类名的应用。建议补充边界情况的测试。

建议添加以下测试场景：

1. 空的 styles 和 classNames 对象
2. 部分语义名称缺失的情况
3. 样式覆盖和继承的情况

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between f0b2c7f and fa25759.

📒 Files selected for processing (4)

• src/Collapse.tsx (2 hunks)
• src/hooks/useItems.tsx (5 hunks)
• src/interface.ts (1 hunks)
• tests/index.spec.tsx (1 hunks)

🔇 Additional comments (6)

src/interface.ts (2)

40-41: 类型定义清晰且符合预期！

classNames 和 styles 属性的类型定义合理，使用 Partial<Record> 允许灵活的样式配置。

---

44-44: 语义化命名选择恰当！

SemanticName 类型定义涵盖了所有必要的组件部分。

src/Collapse.tsx (2)

35-36: 属性解构和命名规范合理！

使用 customizeClassNames 避免了与内部 classNames 变量的命名冲突。

---

78-79: 属性传递完整且合理！

样式相关属性正确传递给 useItems 钩子函数。

src/hooks/useItems.tsx (2)

6-9: 类型定义扩展合理！

Props 类型正确包含了新增的样式相关属性。

---

100-101: 属性处理保持一致性！

在 getNewChild 函数中的属性处理与 convertItemsToNodes 保持一致，这很好。

Also applies to: 134-135