feat(docs): add ReactVersionSwitcher and LatestVersionBanner#1253
Open
feat(docs): add ReactVersionSwitcher and LatestVersionBanner#1253
Conversation
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthrough사이드바에 ReactVersionSwitcher 배너를 주입하고 레이아웃 본문 상단에 LatestVersionBanner를 렌더링합니다. 몇몇 탭 아이콘과 컴포넌트 카드의 이미지 Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser
participant Layout as Docs Layout
participant Latest as LatestVersionBanner
participant Sidebar as Sidebar
participant Switcher as ReactVersionSwitcher
participant External as External Site
Browser->>Layout: 페이지 요청 및 렌더링
Layout->>Latest: 마운트 시 호스트네임 검사 (useEffect)
Latest-->>Layout: 배너 렌더 여부 결정
Layout->>Sidebar: sidebar.banner에 Switcher 전달
Sidebar->>Switcher: Switcher 렌더 및 현재 버전 결정
Browser->>Switcher: 사용자 클릭 (팝오버 열기)
Switcher->>Browser: 팝오버에 버전 목록 표시
Browser->>External: 비현재 버전 클릭 → 새 탭으로 이동
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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 |
Contributor
Alpha Preview (Stackflow SPA)
|
Contributor
Alpha Preview (Storybook)
|
Contributor
Alpha Preview (Docs)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
docs/components/latest-version-banner.tsx (1)
6-26: 코딩 가이드라인: 신규 컴포넌트에displayName미적용
**/*.{tsx,jsx}가이드라인에서는forwardRef와displayName사용을 요구하지만, 이 프로젝트는 React 19.2.3을 사용 중이므로forwardRef는 공식적으로 deprecated 상태이며 적용이 불필요합니다. 단, HOC/동적으로 생성되지 않는 명명된 함수 컴포넌트는displayName이 자동으로 추론되므로, 가이드라인 자체를 React 19 환경에 맞게 업데이트하는 것을 검토해 볼 수 있습니다.As per coding guidelines,
**/*.{tsx,jsx}파일에서는forwardRef와displayName사용이 요구됩니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/components/latest-version-banner.tsx` around lines 6 - 26, The review notes that the new component LatestVersionBanner does not set a displayName per project guidelines; update the component to explicitly set LatestVersionBanner.displayName = "LatestVersionBanner" (or wrap with forwardRef and set displayName if you intend to support refs) so tooling and stack traces show the proper name; reference the LatestVersionBanner function and ensure the displayName assignment is added after the function declaration (or adjust guidelines if you prefer to exempt plain named function components for React 19.2.3).docs/components/react-version-switcher.tsx (1)
15-17:cva를 변형(variants) 없이 기본 클래스만으로 사용
itemVariants는 variant 없이 기본 클래스만 정의되어 있어cva대신cn()또는clsx()로 대체하면 불필요한 의존성 없이 동일한 결과를 얻을 수 있습니다.♻️ 제안 수정
-import { cva } from "class-variance-authority"; +import clsx from "clsx"; -const itemVariants = cva( - "text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4", -); +const itemBase = + "text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4";호출부 수정:
-className={itemVariants({ - className: "text-fd-primary pointer-events-none justify-between", -})} +className={clsx(itemBase, "text-fd-primary pointer-events-none justify-between")}-className={itemVariants({ className: "justify-between" })} +className={clsx(itemBase, "justify-between")}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/components/react-version-switcher.tsx` around lines 15 - 17, The variable itemVariants uses cva only to hold a static class string; replace cva usage with a simple className helper (cn or clsx) by: remove the cva import and definition of itemVariants, create a constant (e.g., itemClasses) containing the same class string, import cn/clsx instead, and update all usages of itemVariants in the ReactVersionSwitcher component to use cn(itemClasses, ...) or clsx(itemClasses, ...) so the behavior stays identical without the cva dependency.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/components/react-version-switcher.tsx`:
- Line 33: The decorative icons IconChevronDownLine (used near current?.label)
and IconCheckmarkLine (used near version.label) are missing aria-hidden, causing
screen readers to announce them; update their usages to include
aria-hidden="true" (matching the SidebarTabIconContainer change) so the icons
are ignored by assistive tech while the text labels provide the accessible
context.
- Around line 49-57: The anchor rendered in react-version-switcher.tsx uses
target="_blank" but omits rel="noopener noreferrer"; update the <a> element that
uses version.label and version.url (the element that also calls setOpen(false)
and uses itemVariants) to include rel="noopener noreferrer" to prevent the
opened page from accessing window.opener and improve security/compatibility.
---
Nitpick comments:
In `@docs/components/latest-version-banner.tsx`:
- Around line 6-26: The review notes that the new component LatestVersionBanner
does not set a displayName per project guidelines; update the component to
explicitly set LatestVersionBanner.displayName = "LatestVersionBanner" (or wrap
with forwardRef and set displayName if you intend to support refs) so tooling
and stack traces show the proper name; reference the LatestVersionBanner
function and ensure the displayName assignment is added after the function
declaration (or adjust guidelines if you prefer to exempt plain named function
components for React 19.2.3).
In `@docs/components/react-version-switcher.tsx`:
- Around line 15-17: The variable itemVariants uses cva only to hold a static
class string; replace cva usage with a simple className helper (cn or clsx) by:
remove the cva import and definition of itemVariants, create a constant (e.g.,
itemClasses) containing the same class string, import cn/clsx instead, and
update all usages of itemVariants in the ReactVersionSwitcher component to use
cn(itemClasses, ...) or clsx(itemClasses, ...) so the behavior stays identical
without the cva dependency.
te6-in
force-pushed
the
docs/switch-docs-versions
branch
from
c1d7148 to
17ae62d
Compare
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
docs/app/layout.config.tsx (1)
14-29:SidebarTabIconContainer에displayName이 설정되지 않았습니다.코딩 가이드라인에서는 React 컴포넌트에
displayName을 설정하도록 요구합니다. 현재 프로젝트는 React 19.2.3을 사용하고 있으므로forwardRef는 deprecated되어 생략이 맞지만,displayName은 React DevTools에서 컴포넌트 이름을 올바르게 표시하기 위해 여전히 유효합니다.♻️ displayName 추가 제안
function SidebarTabIconContainer({ children, className, }: PropsWithChildren<{ className?: string }>) { return ( <div aria-hidden className={clsx( className, "[&_svg]:size-full rounded-lg size-full text-(--tab-color) max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5", )} > {children} </div> ); } +SidebarTabIconContainer.displayName = "SidebarTabIconContainer";As per coding guidelines, "Use
forwardRefanddisplayNamefor React components" (**/*.{tsx,jsx}).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/app/layout.config.tsx` around lines 14 - 29, The SidebarTabIconContainer component is missing a displayName; set SidebarTabIconContainer.displayName = "SidebarTabIconContainer" after the function declaration so React DevTools shows the correct name (no forwardRef needed here); locate the SidebarTabIconContainer function and add the displayName assignment referencing that exact function name.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@docs/app/layout.config.tsx`:
- Around line 14-29: The SidebarTabIconContainer component is missing a
displayName; set SidebarTabIconContainer.displayName = "SidebarTabIconContainer"
after the function declaration so React DevTools shows the correct name (no
forwardRef needed here); locate the SidebarTabIconContainer function and add the
displayName assignment referencing that exact function name.
9fda8e4 to
7bf2dec
Compare
te6-in
changed the title
te6-in
force-pushed
the
docs/switch-docs-versions
branch
from
7bf2dec to
80611f7
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
*.pages.dev프리뷰/이전 배포에서seed-design.io로 안내하는 LatestVersionBanner 추가alt="", 아이콘 컨테이너에aria-hidden적용 등 접근성 개선Test plan
bun --filter @seed-design/docs dev실행 후/react섹션에서 VersionSwitcher 확인pages.dev호스트네임에서 LatestVersionBanner가 표시되는지 확인seed-design.io(또는seed-design.pages.dev)에서는 배너가 표시되지 않는지 확인🤖 Generated with Claude Code
Summary by CodeRabbit
릴리스 노트
새로운 기능
접근성 / UI