docs(dumi): fix CodePreviewer live demo module resolution#1830
docs(dumi): fix CodePreviewer live demo module resolution#1830afc163 merged 3 commits intoant-design:mainfrom
Conversation
|
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request refactors the error display mechanism for Dumi's live code previews, ensuring a more consistent and robust way to show live demo errors. Concurrently, it addresses module resolution issues within the Dumi configuration and implements several UI improvements across various playground components, enhancing their responsiveness and visual presentation. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
📝 Walkthrough概览此变更重构了预览组件的错误处理流程，将 LiveError 从子组件传递改为在父组件中直接渲染，同时更新了多个游乐场组件的样式以支持更灵活的布局，包括调整填充、边距和高度约束。 变更
估计代码审查工作量🎯 3 (中等) | ⏱️ ~20 分钟 诗句
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment Tip CodeRabbit can use oxc to improve the quality of JavaScript and TypeScript code reviews.Add a configuration file to your project to customize how CodeRabbit runs oxc. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces several documentation and UI improvements. It fixes a module resolution issue for live demos in the dumi configuration by using absolute paths. It also refactors the error display for live code previews, making the error message sticky at the bottom. Additionally, it improves the layout of several playground examples by using flexible box properties for scrollable chat lists, which is more robust than using calc().
My review focuses on a few areas for improvement. I've identified a potential bug in CodePreview.tsx where a prop removal could lead to a runtime error. I've also pointed out a couple of potential UI inconsistencies in the playground examples for copilot and ultramodern demos related to component alignment and width constraints. Addressing these points will help improve the correctness and visual consistency of the documentation site.
| onItemClick={(info) => handleUserSubmit(info?.data?.description as string)} | ||
| style={{ | ||
| marginInline: 16, | ||
| }} |
There was a problem hiding this comment.
Removing this inline marginInline style may cause a visual misalignment. The Welcome component above has a margin, but now this Prompts component will not, causing them to have different indentation levels. To maintain consistent alignment, consider re-adding a margin to this component, for example by applying a style class.
| chatSender: css` | ||
| padding: ${token.paddingXS}px; | ||
| `, |
There was a problem hiding this comment.
The Sender component's container div.chatSender no longer has a maxWidth. This could result in the input area becoming excessively wide on larger screens, which is inconsistent with the maxWidth of the message bubbles above. To ensure a consistent layout, please add a maxWidth and center the element.
chatSender: css`
padding: ${token.paddingXS}px;
width: 100%;
max-width: 940px;
margin-inline: auto;
`,
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/x/docs/playground/copilot.tsx (1)
207-209: CSS 格式小问题：flex:1缺少空格
flex:1;应该写成flex: 1;，在冒号后添加空格以保持代码风格一致性。🔧 建议修复
chatList: css` - flex:1; + flex: 1; overflow-y: auto; padding-inline: 16px;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/x/docs/playground/copilot.tsx` around lines 207 - 209, Fix the CSS spacing issue by changing the declaration "flex:1;" to "flex: 1;" in the CSS rule that also contains "overflow-y: auto" and "padding-inline: 16px"; ensure the colon is followed by a single space and run the repo's CSS/formatting tool to keep style consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx`:
- Around line 530-537: The hide-control uses a focusable div with tabIndex and
role but no keyboard handler; update the CodePreviewer hide control (the element
using setCodeExpand(false) and styles.codeHideBtn) to be a native <button>
(remove tabIndex and role) so Enter/Space trigger works natively, preserve
onClick and children (<UpOutlined /> and FormattedMessage), and adjust CSS for
styles.codeHideBtn if needed to reset default button styles and maintain
layout/appearance.
In `@packages/x/docs/playground/agent-tbox.tsx`:
- Around line 298-301: 当前样式块中同时使用了 `padding-top: 32px` 和后续的 `padding:
${token.paddingLG}px`，导致 `padding-top` 被覆盖；请在 agent-tbox.tsx 中的该样式块统一声明间距：要么删除
`padding-top: 32px` 并只保留 `padding: ${token.paddingLG}px`，要么把 32px 合并进
shorthand（例如将 shorthand 的 top 值替换为
32px），以消除歧义并确保顶部间距按预期生效（参考属性名：padding-top、padding、token.paddingLG）。
---
Nitpick comments:
In `@packages/x/docs/playground/copilot.tsx`:
- Around line 207-209: Fix the CSS spacing issue by changing the declaration
"flex:1;" to "flex: 1;" in the CSS rule that also contains "overflow-y: auto"
and "padding-inline: 16px"; ensure the colon is followed by a single space and
run the repo's CSS/formatting tool to keep style consistent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2d1c6bb0-46ca-47a9-9023-7befc3f5f201
📒 Files selected for processing (8)
packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsxpackages/x/.dumi/theme/common/CodePreview.tsxpackages/x/.dumi/theme/common/LiveCode.tsxpackages/x/.dumirc.tspackages/x/docs/playground/agent-tbox.tsxpackages/x/docs/playground/copilot.tsxpackages/x/docs/playground/independent.tsxpackages/x/docs/playground/ultramodern.tsx
💤 Files with no reviewable changes (1)
- packages/x/.dumi/theme/common/CodePreview.tsx
| tabIndex={0} | ||
| role="button" | ||
| className={styles.codeHideBtn} | ||
| onClick={() => setCodeExpand(false)} | ||
| > | ||
| <UpOutlined /> | ||
| <FormattedMessage id="app.demo.code.hide.simplify" /> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 验证该按钮是否仅有 role/tabIndex 但无键盘事件
rg -n -C2 'tabIndex=\{0\}|role="button"|onKeyDown=' packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsxRepository: ant-design/x
Length of output: 295
🏁 Script executed:
cat -n packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx | sed -n '525,545p'Repository: ant-design/x
Length of output: 801
隐藏代码控件缺少键盘触发，存在可访问性缺口。
第 530-533 行使用了可聚焦的 div（tabIndex={0} + role="button"），但缺少 onKeyDown 处理器，键盘用户无法通过 Enter/Space 键触发点击。建议改用原生 <button> 元素。
建议修改
- <div
- tabIndex={0}
- role="button"
+ <button
+ type="button"
className={styles.codeHideBtn}
onClick={() => setCodeExpand(false)}
>
<UpOutlined />
<FormattedMessage id="app.demo.code.hide.simplify" />
- </div>
+ </button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| tabIndex={0} | |
| role="button" | |
| className={styles.codeHideBtn} | |
| onClick={() => setCodeExpand(false)} | |
| > | |
| <UpOutlined /> | |
| <FormattedMessage id="app.demo.code.hide.simplify" /> | |
| </div> | |
| <button | |
| type="button" | |
| className={styles.codeHideBtn} | |
| onClick={() => setCodeExpand(false)} | |
| > | |
| <UpOutlined /> | |
| <FormattedMessage id="app.demo.code.hide.simplify" /> | |
| </button> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx` around lines 530
- 537, The hide-control uses a focusable div with tabIndex and role but no
keyboard handler; update the CodePreviewer hide control (the element using
setCodeExpand(false) and styles.codeHideBtn) to be a native <button> (remove
tabIndex and role) so Enter/Space trigger works natively, preserve onClick and
children (<UpOutlined /> and FormattedMessage), and adjust CSS for
styles.codeHideBtn if needed to reset default button styles and maintain
layout/appearance.
| padding-top: 32px; | ||
| width: 100%; | ||
| padding-inline: ${token.paddingLG}px; | ||
| padding: ${token.paddingLG}px; | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
padding-top 被后续 padding 覆盖，建议合并声明。
Line 298 的 padding-top: 32px 会被 Line 300 的 padding: ... 覆盖，当前顶部间距不是 32px。建议明确保留哪种间距，避免样式歧义。
💡 建议修改
placeholder: css`
- padding-top: 32px;
width: 100%;
- padding: ${token.paddingLG}px;
+ padding: ${token.paddingLG}px;
+ padding-top: 32px;
box-sizing: border-box;
`,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| padding-top: 32px; | |
| width: 100%; | |
| padding-inline: ${token.paddingLG}px; | |
| padding: ${token.paddingLG}px; | |
| box-sizing: border-box; | |
| width: 100%; | |
| padding: ${token.paddingLG}px; | |
| padding-top: 32px; | |
| box-sizing: border-box; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/x/docs/playground/agent-tbox.tsx` around lines 298 - 301,
当前样式块中同时使用了 `padding-top: 32px` 和后续的 `padding: ${token.paddingLG}px`，导致
`padding-top` 被覆盖；请在 agent-tbox.tsx 中的该样式块统一声明间距：要么删除 `padding-top: 32px` 并只保留
`padding: ${token.paddingLG}px`，要么把 32px 合并进 shorthand（例如将 shorthand 的 top 值替换为
32px），以消除歧义并确保顶部间距按预期生效（参考属性名：padding-top、padding、token.paddingLG）。
There was a problem hiding this comment.
demo code短平快，保障样式没问题即可
There was a problem hiding this comment.
@1uokun 理解，demo 代码以简洁实用为主，样式视觉效果没问题即可，不做强制要求。忽略此建议。
🧠 Learnings used
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
首页是否同意添加
|
|
官网livedemo无法编辑问题比较紧急可优先发布 @kimteayon |
Bundle ReportChanges will decrease total bundle size by 368.14kB (-10.07%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antdx-array-pushAssets Changed:
view changes for bundle: x-markdown-array-pushAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1830 +/- ##
=======================================
Coverage 97.42% 97.42%
=======================================
Files 149 149
Lines 5044 5044
Branches 1438 1469 +31
=======================================
Hits 4914 4914
Misses 128 128
Partials 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR). 🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。 |
2 participants
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit
样式优化
构建配置