docs: add component anatomy explorer for all compound components#472
docs: add component anatomy explorer for all compound components#472MaxLee-dev wants to merge 5 commits intodocs-component-analyzerfrom
Conversation
Add interactive anatomy examples with ComponentExplorer for 24 compound pattern components. Each example marks all component parts with data-part attributes for hover-based highlighting in the documentation site. Components added: - Simple: Grid, Avatar - Containers: Card, Callout, Collapsible, Breadcrumb - Form Controls: Switch, Checkbox, Radio, RadioGroup, InputGroup, Field - Tabs/Table: Pagination, Tabs, Table - Popup: Tooltip, FloatingBar, Popover, Sheet, NavigationMenu - Complex: Select, MultiSelect, Toast, Menu Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Summary of ChangesHello @MaxLee-dev, 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! 이 Pull Request는 컴포넌트 문서의 사용자 경험을 혁신적으로 개선하기 위해 인터랙티브 Anatomy Explorer를 도입합니다. 개발자와 디자이너는 이제 각 컴포넌트의 내부 구조와 파트를 시각적으로 탐색하고 이해할 수 있어, 컴포넌트 사용 및 커스터마이징이 훨씬 용이해질 것입니다. 이는 문서의 가독성과 유용성을 크게 향상시키는 중요한 기능 추가입니다. 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. Changelog
Activity
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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![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
이 PR은 복합 컴포넌트(compound components)를 위한 대화형 Anatomy Explorer를 도입하여 문서의 완성도를 크게 높였습니다. 전반적인 구현은 훌륭하며, 자동화된 데이터 생성 스크립트와 다수의 컴포넌트에 대한 문서 업데이트가 인상적입니다. 다만, 일부 새로운 anatomy 예제 파일에서 data-part 속성이 누락되어 Explorer가 특정 파트를 하이라이트하지 못하는 문제가 발견되었습니다. 각 파일에 구체적인 수정 제안을 포함한 리뷰 코멘트를 남겼으니 확인 부탁드립니다. 이 리뷰는 저장소 스타일 가이드에 따라 작성되었습니다.
apps/website/src/components/demo/examples/breadcrumb/anatomy-breadcrumb.tsx
Show resolved
Hide resolved
apps/website/src/components/demo/examples/floating-bar/anatomy-floating-bar.tsx
Show resolved
Hide resolved
apps/website/src/components/demo/examples/navigation-menu/anatomy-navigation-menu.tsx
Outdated
Show resolved
Hide resolved
noahchoii
left a comment
noahchoii
left a comment
There was a problem hiding this comment.
Thanks for your work! Explorer looks really great! I've left a few questions and points for discussion below—please take a look!
-
The reason we initially proposed adding Anatomy was to clearly show the hierarchical structure between component elements, but that part seems to be missing!
-
Elements like PortalPrimitive and PopupPrimitive don't seem to be navigating properly—please check this!
-
For rendering states like the open state of Overlay elements or the checked state of checkboxes, adjusting the initial value to true or similar might be beneficial!
-
Clicking the left button doesn't seem to trigger any specific event, but the active style remains, potentially creating an expectation among users that another action will occur. How about leaving only the hover style, or using a different element?
-
The
roleof the left sidebar is set tonavigation. The navigation role is a collection of links used for navigating a website. Personally, I feel this doesn't fit this component. Is there a specific reason you determined it should be the navigation role?
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThis PR adds "Anatomy" sections to 23 component documentation pages with interactive Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Suggested labels
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
apps/website/src/components/demo/examples/input-group/anatomy-input-group.tsx (1)
7-10:TextInput에data-part속성 추가 고려다른 anatomy 예제들의 패턴을 보면, 시각화 대상이 되는 모든 컴포넌트에
data-part속성을 부여하고 있습니다.TextInput은 InputGroup의 핵심 구성 요소이므로, anatomy 탐색기에서 하이라이팅되도록data-part속성을 추가하는 것이 좋을 것 같습니다.♻️ 제안된 수정 사항
<InputGroup.Root data-part="Root"> - <TextInput placeholder="메시지를 입력하세요..." maxLength={100} width="100%" /> + <TextInput data-part="TextInput" placeholder="메시지를 입력하세요..." maxLength={100} width="100%" /> <InputGroup.Counter data-part="Counter" /> </InputGroup.Root>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/components/demo/examples/input-group/anatomy-input-group.tsx` around lines 7 - 10, Add a data-part attribute to the TextInput inside the InputGroup so it is included in the anatomy highlight; update the JSX under InputGroup.Root (where TextInput is rendered alongside InputGroup.Counter) to include a suitable data-part (e.g., "Input" or "TextInput") on the TextInput component so the anatomy explorer can target it along with InputGroup.Root and InputGroup.Counter.apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx (1)
1-11:'use client'지시어 누락 확인 필요
Pagination컴포넌트는 페이지 이동을 위한 인터랙션이 포함된 컴포넌트입니다. 클라이언트 사이드 동작이 필요할 수 있으므로'use client'지시어 추가를 고려해 주세요.♻️ 제안된 수정 사항
+'use client'; + import { Pagination } from '@vapor-ui/core'; export default function AnatomyPagination() {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx` around lines 1 - 11, This file exports a client-interactive React component AnatomyPagination using Pagination.* interactive subcomponents; add the 'use client' directive as the very first line of the file (before the import) so the component and Pagination.Root/Previous/Items/Next run on the client; update the top of apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx accordingly to ensure client-side interactivity for the AnatomyPagination component.apps/website/src/components/demo/examples/switch/anatomy-switch.tsx (1)
1-9:'use client'지시어 누락 확인 필요
Switch컴포넌트는defaultChecked상태를 관리하는 인터랙티브 컴포넌트입니다. 다른 anatomy 예제들(예:anatomy-collapsible.tsx,anatomy-input-group.tsx)과 일관성을 유지하기 위해'use client'지시어 추가를 권장합니다.♻️ 제안된 수정 사항
+'use client'; + import { Switch } from '@vapor-ui/core'; export default function AnatomySwitch() {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/components/demo/examples/switch/anatomy-switch.tsx` around lines 1 - 9, The AnatomySwitch component is missing the 'use client' directive required for interactive, stateful components; add a 'use client' directive as the very first line of the file so AnatomySwitch (the exported function) and its usage of Switch.Root and Switch.ThumbPrimitive with defaultChecked run on the client, matching other anatomy examples like anatomy-collapsible and anatomy-input-group.apps/website/src/components/demo/examples/radio/anatomy-radio.tsx (1)
1-9:'use client'지시어 누락 확인 필요다른 인터랙티브 컴포넌트 예제(예:
anatomy-switch.tsx,anatomy-collapsible.tsx)에서는'use client'지시어를 사용하고 있습니다.Radio컴포넌트도 상태 관리가 필요한 인터랙티브 컴포넌트이므로 일관성을 위해'use client'지시어 추가를 고려해 주세요.♻️ 제안된 수정 사항
+'use client'; + import { Radio } from '@vapor-ui/core'; export default function AnatomyRadio() {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/components/demo/examples/radio/anatomy-radio.tsx` around lines 1 - 9, Add the missing 'use client' directive as the very first line of this file so the AnatomyRadio component runs as a client component; update the top of the file containing the AnatomyRadio function (which renders Radio.Root and Radio.IndicatorPrimitive) to include 'use client' before any imports/exports to ensure the interactive Radio component is treated consistently with other examples.apps/website/src/components/demo/examples/select/anatomy-select.tsx (1)
1-39:'use client'directive 추가 고려Select 컴포넌트는 열기/닫기 상호작용이 필요한 클라이언트 컴포넌트입니다. 다른 인터랙티브 anatomy 예제(FloatingBar, Sheet, Tooltip 등)와 일관성을 위해
'use client'directive 추가를 권장합니다.♻️ 제안된 수정
+'use client'; + import { Select } from '@vapor-ui/core';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/components/demo/examples/select/anatomy-select.tsx` around lines 1 - 39, This file exports the interactive AnatomySelect component that uses Select.Root / Select.Trigger and other Select primitives which require client-side interactivity; add the 'use client' directive as the first line of the file so AnatomySelect and its Select.Trigger/Select.PortalPrimitive/Select.PopupPrimitive behavior runs as a client component.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/website/src/components/demo/examples/checkbox/anatomy-checkbox.tsx`:
- Around line 5-6: The Checkbox example is missing an accessible name; update
the Checkbox.Root usage (and/or add a visible label component) to provide an
accessible name by adding an aria-label or by associating it with a text label
(e.g., render a Checkbox.Label or a <label> tied to Checkbox.Root's id) so
screen readers can announce the control; ensure the change applies to the
instance that renders Checkbox.Root and that Checkbox.IndicatorPrimitive remains
as the visual indicator only.
In `@apps/website/src/components/demo/examples/menu/anatomy-menu.tsx`:
- Around line 16-48: Some Menu elements are missing consistent data-part
annotations which breaks hover highlighting; update the JSX to add data-part
attributes for the missing elements: add data-part="GroupLabel" to the
Menu.GroupLabel instance (the "File" label), add data-part="Item" to the "Open
File" Menu.Item, ensure the Menu.CheckboxItemPrimitive and its inner
Menu.CheckboxItemIndicatorPrimitive / Menu.CheckboxItem each have data-part
attributes (for the Auto Save entry), add data-part on the
Menu.RadioItemPrimitive/value="dark" and its inner Menu.RadioItem for the "Dark"
option, and add data-part attributes to Menu.SubmenuTriggerItem and the
Menu.SubmenuPopup children ("PDF", "CSV") so all instances (Menu.GroupLabel,
Menu.Item, Menu.CheckboxItemPrimitive, Menu.CheckboxItemIndicatorPrimitive,
Menu.CheckboxItem, Menu.RadioItemPrimitive, Menu.RadioItem,
Menu.SubmenuTriggerItem, Menu.SubmenuPopup) are annotated consistently.
In `@apps/website/src/components/demo/examples/tabs/anatomy-tabs.tsx`:
- Around line 8-26: Some Tabs parts are missing the data-part attributes causing
inconsistent Anatomy Explorer highlighting; add data-part="Button" to the second
Tabs.Button (value="features") and add data-part="Panel" to the second
Tabs.Panel (value="features") so both Tabs.Button and Tabs.Panel instances use
consistent data-part values ("Button" and "Panel") for proper part highlighting.
---
Nitpick comments:
In
`@apps/website/src/components/demo/examples/input-group/anatomy-input-group.tsx`:
- Around line 7-10: Add a data-part attribute to the TextInput inside the
InputGroup so it is included in the anatomy highlight; update the JSX under
InputGroup.Root (where TextInput is rendered alongside InputGroup.Counter) to
include a suitable data-part (e.g., "Input" or "TextInput") on the TextInput
component so the anatomy explorer can target it along with InputGroup.Root and
InputGroup.Counter.
In `@apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx`:
- Around line 1-11: This file exports a client-interactive React component
AnatomyPagination using Pagination.* interactive subcomponents; add the 'use
client' directive as the very first line of the file (before the import) so the
component and Pagination.Root/Previous/Items/Next run on the client; update the
top of
apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx
accordingly to ensure client-side interactivity for the AnatomyPagination
component.
In `@apps/website/src/components/demo/examples/radio/anatomy-radio.tsx`:
- Around line 1-9: Add the missing 'use client' directive as the very first line
of this file so the AnatomyRadio component runs as a client component; update
the top of the file containing the AnatomyRadio function (which renders
Radio.Root and Radio.IndicatorPrimitive) to include 'use client' before any
imports/exports to ensure the interactive Radio component is treated
consistently with other examples.
In `@apps/website/src/components/demo/examples/select/anatomy-select.tsx`:
- Around line 1-39: This file exports the interactive AnatomySelect component
that uses Select.Root / Select.Trigger and other Select primitives which require
client-side interactivity; add the 'use client' directive as the first line of
the file so AnatomySelect and its
Select.Trigger/Select.PortalPrimitive/Select.PopupPrimitive behavior runs as a
client component.
In `@apps/website/src/components/demo/examples/switch/anatomy-switch.tsx`:
- Around line 1-9: The AnatomySwitch component is missing the 'use client'
directive required for interactive, stateful components; add a 'use client'
directive as the very first line of the file so AnatomySwitch (the exported
function) and its usage of Switch.Root and Switch.ThumbPrimitive with
defaultChecked run on the client, matching other anatomy examples like
anatomy-collapsible and anatomy-input-group.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 87be65c3-26d0-4df6-b7fb-59951cde2121
📒 Files selected for processing (46)
apps/website/content/docs/components/(components)/avatar.mdxapps/website/content/docs/components/(components)/breadcrumb.mdxapps/website/content/docs/components/(components)/callout.mdxapps/website/content/docs/components/(components)/card.mdxapps/website/content/docs/components/(components)/checkbox.mdxapps/website/content/docs/components/(components)/collapsible.mdxapps/website/content/docs/components/(components)/field.mdxapps/website/content/docs/components/(components)/floating-bar.mdxapps/website/content/docs/components/(components)/input-group.mdxapps/website/content/docs/components/(components)/menu.mdxapps/website/content/docs/components/(components)/multi-select.mdxapps/website/content/docs/components/(components)/navigation-menu.mdxapps/website/content/docs/components/(components)/pagination.mdxapps/website/content/docs/components/(components)/popover.mdxapps/website/content/docs/components/(components)/radio.mdxapps/website/content/docs/components/(components)/select.mdxapps/website/content/docs/components/(components)/sheet.mdxapps/website/content/docs/components/(components)/switch.mdxapps/website/content/docs/components/(components)/table.mdxapps/website/content/docs/components/(components)/tabs.mdxapps/website/content/docs/components/(components)/toast.mdxapps/website/content/docs/components/(components)/tooltip.mdxapps/website/content/docs/components/(layouts)/grid.mdxapps/website/src/components/demo/examples/avatar/anatomy-avatar.tsxapps/website/src/components/demo/examples/breadcrumb/anatomy-breadcrumb.tsxapps/website/src/components/demo/examples/callout/anatomy-callout.tsxapps/website/src/components/demo/examples/card/anatomy-card.tsxapps/website/src/components/demo/examples/checkbox/anatomy-checkbox.tsxapps/website/src/components/demo/examples/collapsible/anatomy-collapsible.tsxapps/website/src/components/demo/examples/field/anatomy-field.tsxapps/website/src/components/demo/examples/floating-bar/anatomy-floating-bar.tsxapps/website/src/components/demo/examples/grid/anatomy-grid.tsxapps/website/src/components/demo/examples/input-group/anatomy-input-group.tsxapps/website/src/components/demo/examples/menu/anatomy-menu.tsxapps/website/src/components/demo/examples/multi-select/anatomy-multi-select.tsxapps/website/src/components/demo/examples/navigation-menu/anatomy-navigation-menu.tsxapps/website/src/components/demo/examples/pagination/anatomy-pagination.tsxapps/website/src/components/demo/examples/popover/anatomy-popover.tsxapps/website/src/components/demo/examples/radio/anatomy-radio.tsxapps/website/src/components/demo/examples/select/anatomy-select.tsxapps/website/src/components/demo/examples/sheet/anatomy-sheet.tsxapps/website/src/components/demo/examples/switch/anatomy-switch.tsxapps/website/src/components/demo/examples/table/anatomy-table.tsxapps/website/src/components/demo/examples/tabs/anatomy-tabs.tsxapps/website/src/components/demo/examples/toast/anatomy-toast.tsxapps/website/src/components/demo/examples/tooltip/anatomy-tooltip.tsx
apps/website/src/components/demo/examples/checkbox/anatomy-checkbox.tsx
Outdated
Show resolved
Hide resolved
Thanks for the review! Here are my responses to each point. 1. Hierarchical structure Components like Popup internally render PopupPrimitive, PositionerPrimitive, PortalPrimitive, etc. However, due to the component architecture, when using Popup you can't directly render the internal primitives separately. So rather than showing a tree hierarchy, I intentionally split the panel into Parts / Primitives sections to show where the primitive layer sits. Expressing the hierarchy as a tree view could be discussed as a future improvement. 2. PortalPrimitive / PopupPrimitive navigation Fixed by updating the examples. 3. Rendering initial state Agreed. Adjusted initial values so that overlay elements appear in an open state and checkboxes appear checked, making parts immediately visible. 4. Click active style Clicking a part now sets it to a selected state. The selected part provides visual feedback with a left indicator and primary color. 5. Sidebar role attribute Changed from |
MaxLee-dev
requested review from
noahchoii
and removed request for
ZeroChoi2781
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
…' for consistency across documentation
|
I’ve reviewed the changes, and the component structure is much easier to grasp now! Thank you, Max. I do have one question, though. I noticed that anatomy components composed of multiple primitives (e.g., |
2 participants
Related Issues
Description of Changes
An interactive Anatomy Explorer has been implemented for all compound pattern components, and an Anatomy section has been added to each component's documentation.
1. Component Explorer System Implementation
2. Automated Anatomy Data Generation
generate:anatomyscript automatically generates anatomy JSON fromindex.parts.ts3. Add Anatomy Examples for 25 Components
4. MDX Documentation Updates
<componentexplorer>before the Props Table sectionChecklist
Summary by CodeRabbit