docs: add link docs and navigation search #1547
Conversation
WalkthroughAdds new documentation for the Link component and a Migration Guide, including SEO metadata, examples, and API data. Updates docs navigation to include new entries. Overhauls the Navigation component with search, version filtering, and a scrollable layout. Minor text change in the “Edit on GitHub” helper. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant N as Navigation
participant S as Sections Data
participant UI as ScrollArea/Category
U->>N: Load docs page
N->>S: Determine sections (docs vs default)
S-->>N: Sections array
N->>N: Initialize state { query:"", version:"latest" }
N->>UI: Render controls + scrollable nav
rect rgba(198,235,255,0.25)
note right of U: Search/filter flow (new)
U->>N: Type in search input (query)
N->>N: filteredSections = match titles by query
N->>UI: Render categories for filtered items
end
rect rgba(210,255,210,0.25)
note right of U: Version select (new)
U->>N: Change version
N->>N: Update version state (reserved for filtering)
N->>UI: Re-render (same flow)
end
U->>UI: Scroll navigation
UI-->>U: Visible, filtered sections
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
✨ Finishing Touches
🧪 Generate unit tests
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 |
CoverageThis report compares the PR with the base branch. “Δ” shows how the PR affects each metric.
Coverage improved or stayed the same. Great job! Run |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/components/docsHelpers/EditPageOnGithub.tsx (1)
8-18: Harden path building to avoid broken edit URLs on root or trailing slash pathsWhen pathname is just "/docs" or has a trailing slash, currentDocsPath becomes empty and the URL includes a double slash. Normalize and add a safe fallback.
Apply:
- const pathname = usePathname(); - const page = pathname.split("/").slice(2).join("/"); - - const currentDocsPath = "docs/app/docs/" + page; + const pathname = usePathname(); + // Strip leading "/docs/" and trailing slashes; fallback to a default doc + const page = pathname.startsWith("/docs/") + ? pathname.slice("/docs/".length).replace(/\/+$/,"") + : pathname.replace(/^\/+/, "").replace(/\/+$/,""); + const currentDocsPath = `docs/app/docs/${page || "first-steps/introduction"}`;
🧹 Nitpick comments (10)
docs/components/docsHelpers/EditPageOnGithub.tsx (1)
16-18: (Optional) Open in a new tab and add rel for safetyIf you want the GitHub edit link to open in a new tab, include rel to prevent reverse‑tabnabbing.
- <Link href={`https://github.com/rad-ui/rad-ui/edit/main/${currentDocsPath}/page.mdx`}> + <Link href={`https://github.com/rad-ui/rad-ui/edit/main/${currentDocsPath}/page.mdx`} target="_blank" rel="noopener noreferrer"> Edit on GitHub </Link>docs/app/docs/docsNavigationSections.tsx (1)
27-31: LGTM — navigation entries added correctlyBoth “Migration Guide” and “Link” look consistent with existing items and paths.
Consider extracting route/path strings into a central const to reduce typos if reused elsewhere.
Also applies to: 97-101
docs/app/docs/guides/migration/page.mdx (1)
6-26: LGTM — clear structure and metadata wiringContent structure is sound and uses Documentation layout correctly.
Optionally add cross-links to the referenced component pages (e.g., Link, Dialog) for quicker navigation.
docs/components/navigation/Navigation.tsx (3)
44-51: Null-safe filter over itemsGuard in case a future section type lacks items.
- .map(section => ({ + .map(section => ({ ...section, - items: section.items.filter((item: any) => + items: (section.items ?? []).filter((item: any) => item.title.toLowerCase().includes(query.toLowerCase()) ), }))
52-74: Gate new UI behind feature flags per docs guidelinesSearch and version selector should be behind well-named flags stored in a central enum (UPPERCASE_WITH_UNDERSCORE). Validate flag values before use.
Example (outside this diff, add centrally):
// docs/config/featureFlags.ts export enum DocsFeatureFlag { DOCS_SEARCH = 'DOCS_SEARCH', DOCS_VERSION_SELECT = 'DOCS_VERSION_SELECT', } export const DOCS_FLAGS: Record<DocsFeatureFlag, boolean> = { [DocsFeatureFlag.DOCS_SEARCH]: true, [DocsFeatureFlag.DOCS_VERSION_SELECT]: true, };Then here:
import { DOCS_FLAGS, DocsFeatureFlag } from '@/docs/config/featureFlags'; const enableSearch = DOCS_FLAGS[DocsFeatureFlag.DOCS_SEARCH] === true; const enableVersionSelect = DOCS_FLAGS[DocsFeatureFlag.DOCS_VERSION_SELECT] === true; ... {enableSearch && (<input ... />)} {enableVersionSelect && (<select ... />)}Also, how does selected version affect routing/content? If not wired yet, consider deferring the control behind the flag until implemented.
81-85: Remove placeholder “Hello” branchThis will render a stray block if a non-category section appears. Prefer returning null or handling known types only.
- else{ - return <div key={i} className='h-10 w-full bg-gray-100'> - Hello - </div> - } + else { + return null; + }docs/app/docs/components/link/docs/component_api/link.tsx (1)
1-1: Add a lightweight type to prevent API-table drift.Typing this static schema reduces breakage when columns/rows evolve.
-const data = { +type DocApiColumn = { name: string; id: string }; +type DocApiRow = { prop: { name: string; info_tooltips: string }; type: string; default: string }; +interface DocApi { name: string; description: string; columns: DocApiColumn[]; data: DocApiRow[]; } +const data: DocApi = {docs/app/docs/components/link/page.mdx (3)
2-2: Remove unused import.-import Link from '@radui/ui/Link';
25-29: Add title and lazy loading to the Storybook iframe (a11y + perf).- <iframe - src="/storybook/iframe.html?id=components-link--all" - className="w-full h-96 border rounded" - /> + <iframe + src="/storybook/iframe.html?id=components-link--all" + title="Storybook: Link component" + loading="lazy" + className="w-full h-96 border rounded" + />
32-34: Strengthen a11y guidance for external links.- <p>Links are focusable and support keyboard navigation. Ensure link text clearly describes the destination.</p> + <p> + Links are focusable and support keyboard navigation. Ensure link text clearly describes the destination. When opening in a new tab (target="_blank"), include rel="noopener noreferrer". + </p>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/app/docs/components/link/docs/codeUsage.js(1 hunks)docs/app/docs/components/link/docs/component_api/link.tsx(1 hunks)docs/app/docs/components/link/examples/LinkExample.tsx(1 hunks)docs/app/docs/components/link/page.mdx(1 hunks)docs/app/docs/components/link/seo.ts(1 hunks)docs/app/docs/docsNavigationSections.tsx(2 hunks)docs/app/docs/guides/migration/page.mdx(1 hunks)docs/app/docs/guides/migration/seo.ts(1 hunks)docs/components/docsHelpers/EditPageOnGithub.tsx(1 hunks)docs/components/navigation/Navigation.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
docs/**/*.{ts,tsx}
📄 CodeRabbit inference engine (docs/.cursor/rules/posthog-integration.mdc)
In TypeScript, store feature flag names in an enum
Files:
docs/app/docs/docsNavigationSections.tsxdocs/app/docs/components/link/examples/LinkExample.tsxdocs/components/navigation/Navigation.tsxdocs/app/docs/components/link/docs/component_api/link.tsxdocs/app/docs/guides/migration/seo.tsdocs/app/docs/components/link/seo.tsdocs/components/docsHelpers/EditPageOnGithub.tsx
docs/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (docs/.cursor/rules/posthog-integration.mdc)
docs/**/*.{ts,tsx,js,jsx}: Write enum/const object members for feature flag names in UPPERCASE_WITH_UNDERSCORE
Gate flag-dependent code with a check that verifies the flag’s values are valid and expected before use
If a custom person/event property is referenced in two or more places, define it in a central enum (TS) or const object (JS) and reuse that reference
Files:
docs/app/docs/docsNavigationSections.tsxdocs/app/docs/components/link/docs/codeUsage.jsdocs/app/docs/components/link/examples/LinkExample.tsxdocs/components/navigation/Navigation.tsxdocs/app/docs/components/link/docs/component_api/link.tsxdocs/app/docs/guides/migration/seo.tsdocs/app/docs/components/link/seo.tsdocs/components/docsHelpers/EditPageOnGithub.tsx
docs/**/*.{js,jsx}
📄 CodeRabbit inference engine (docs/.cursor/rules/posthog-integration.mdc)
In JavaScript, store feature flag names as strings in a constant object to simulate an enum, and use a consistent naming convention
Files:
docs/app/docs/components/link/docs/codeUsage.js
🧬 Code graph analysis (1)
docs/app/docs/components/link/docs/component_api/link.tsx (1)
docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js (1)
data(32-32)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: coverage
🔇 Additional comments (5)
docs/app/docs/components/link/examples/LinkExample.tsx (1)
6-8: Add rel when using target="_blankVerify whether the
Linkcomponent from@radui/uiautomatically injects arelattribute. If it does not, update this example to includerel="noopener noreferrer"to prevent reverse-tabnabbing:- <Link href="https://rad-ui.com" target="_blank"> + <Link href="https://rad-ui.com" target="_blank" rel="noopener noreferrer"> Visit Rad UI </Link>docs/app/docs/guides/migration/seo.ts (1)
1-8: LGTM — SEO metadata follows existing patternConsistent with other pages using generateSeoMetadata.
docs/app/docs/components/link/seo.ts (1)
1-8: LGTM — SEO metadata for Link pageMatches established SEO utility usage.
docs/app/docs/components/link/docs/component_api/link.tsx (2)
44-50: Verify “size” is an actual Link prop.If Link doesn’t support size, this row is misleading; either document allowed sizes or remove.
20-25: No action needed:info_tooltipscorrectly matches DocsTable’s InfoRenderer
The table helper at docs/components/layout/Documentation/helpers/DocsTable.js readsrow.prop.info_tooltips, so the existing key is correct and tooltips will render as expected.
| @@ -0,0 +1,34 @@ | |||
| // Import API documentation | |||
| import link_api_SourceCode from './component_api/link.tsx'; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid importing a .tsx file with an explicit extension from JS.
This can trip bundlers/linters; resolve by omitting the extension (or convert this file to TS).
-import link_api_SourceCode from './component_api/link.tsx';
+import linkApi from './component_api/link';Also update the reference below:
-export const api_documentation = {
- link: link_api_SourceCode,
-};
+export const api_documentation = { link: linkApi };📝 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.
| import link_api_SourceCode from './component_api/link.tsx'; | |
| // docs/app/docs/components/link/docs/codeUsage.js | |
| import linkApi from './component_api/link'; | |
| -export const api_documentation = { | |
| - link: link_api_SourceCode, | |
| export const api_documentation = { | |
| link: linkApi, | |
| }; |
🤖 Prompt for AI Agents
In docs/app/docs/components/link/docs/codeUsage.js around line 2, the file
currently imports a .tsx file with an explicit extension which can break
bundlers/linters; change the import to omit the extension (import from
'./component_api/link' instead of './component_api/link.tsx') and update the
downstream reference(s) in this file that expect the original import name/path
so they point to the new import (ensure variable names remain correct and update
any string/path usages that included the .tsx extension).
| code: `import Link from "@radui/ui/Link" | ||
|
|
||
| const LinkExample = () => ( | ||
| <Link href="https://rad-ui.com" target="_blank">Rad UI</Link> | ||
| )` | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Align code and SCSS; add rel for target="_blank".
Sample uses .rad-ui-link styles but the element lacked that class. Also add rel for security.
- code: `import Link from "@radui/ui/Link"
-
-const LinkExample = () => (
- <Link href="https://rad-ui.com" target="_blank">Rad UI</Link>
-)
+ code: `import Link from "@radui/ui/Link"
+
+const LinkExample = () => (
+ <Link className="rad-ui-link" href="https://rad-ui.com" target="_blank" rel="noopener noreferrer">
+ Rad UI
+ </Link>
+)
`📝 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.
| code: `import Link from "@radui/ui/Link" | |
| const LinkExample = () => ( | |
| <Link href="https://rad-ui.com" target="_blank">Rad UI</Link> | |
| )` | |
| }, | |
| code: `import Link from "@radui/ui/Link" | |
| const LinkExample = () => ( | |
| <Link className="rad-ui-link" href="https://rad-ui.com" target="_blank" rel="noopener noreferrer"> | |
| Rad UI | |
| </Link> | |
| )` |
🤖 Prompt for AI Agents
In docs/app/docs/components/link/docs/codeUsage.js around lines 6 to 11, the
sample JSX uses the .rad-ui-link SCSS but the rendered Link lacks that class and
also misses the security rel when using target="_blank"; update the example so
the Link includes className="rad-ui-link" and add rel="noopener noreferrer"
alongside target="_blank" so styles and security are aligned.
| <Documentation.Section title="API Documentation" as="h2" /> | ||
| <Documentation.Table | ||
| title="Link" | ||
| description={api_documentation.link.description} | ||
| columns={api_documentation.link.columns} | ||
| data={api_documentation.link.data} | ||
| /> | ||
| </Documentation> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Wrap the API table inside the Section (layout/spacing & anchor semantics).
- {/* API Documentation */}
- <Documentation.Section title="API Documentation" as="h2" />
- <Documentation.Table
- title="Link"
- description={api_documentation.link.description}
- columns={api_documentation.link.columns}
- data={api_documentation.link.data}
- />
+ {/* API Documentation */}
+ <Documentation.Section title="API Documentation" as="h2">
+ <Documentation.Table
+ title="Link"
+ description={api_documentation.link.description}
+ columns={api_documentation.link.columns}
+ data={api_documentation.link.data}
+ />
+ </Documentation.Section>📝 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.
| <Documentation.Section title="API Documentation" as="h2" /> | |
| <Documentation.Table | |
| title="Link" | |
| description={api_documentation.link.description} | |
| columns={api_documentation.link.columns} | |
| data={api_documentation.link.data} | |
| /> | |
| </Documentation> | |
| {/* API Documentation */} | |
| <Documentation.Section title="API Documentation" as="h2"> | |
| <Documentation.Table | |
| title="Link" | |
| description={api_documentation.link.description} | |
| columns={api_documentation.link.columns} | |
| data={api_documentation.link.data} | |
| /> | |
| </Documentation.Section> |
🤖 Prompt for AI Agents
In docs/app/docs/components/link/page.mdx around lines 37 to 44, the
Documentation.Table is currently rendered outside the Documentation.Section
causing layout, spacing and anchor issues; move the Documentation.Table so it is
a child of the Documentation.Section (place the Table between the Section's
opening and closing tags) and adjust the surrounding tags so the Section
encapsulates the title and the table content.
| const [sections, setSections] = useState(docsSections); | ||
| const [query, setQuery] = useState(""); | ||
| const versions = ["0.0.47", "0.0.46"]; | ||
| const [version, setVersion] = useState(versions[0]); | ||
| // customSections || sections; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Initialize sections based on pathname to avoid UI flash; respect customSections
On non-docs routes, sections initially show docsSections until useEffect runs. Also, customSections is ignored. Initialize from pathname and prefer customSections when provided.
- const [sections, setSections] = useState(docsSections);
+ const [sections, setSections] = useState(
+ (customSections ?? (pathname.includes("/docs/") ? docsSections : defaultSections))
+ );📝 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.
| const [sections, setSections] = useState(docsSections); | |
| const [query, setQuery] = useState(""); | |
| const versions = ["0.0.47", "0.0.46"]; | |
| const [version, setVersion] = useState(versions[0]); | |
| // customSections || sections; | |
| const [sections, setSections] = useState( | |
| (customSections ?? (pathname.includes("/docs/") ? docsSections : defaultSections)) | |
| ); | |
| const [query, setQuery] = useState(""); | |
| const versions = ["0.0.47", "0.0.46"]; | |
| const [version, setVersion] = useState(versions[0]); | |
| // customSections || sections; |
🤖 Prompt for AI Agents
In docs/components/navigation/Navigation.tsx around lines 29-33, the sections
state is always initialized to docsSections and ignores customSections which
causes a UI flash on non-docs routes; update the initial state logic to pick the
correct source based on the current pathname and prefer customSections when
provided (e.g., if pathname indicates docs use docsSections, otherwise use an
empty or non-docs default), and set useState to compute the initial sections
from pathname and customSections so the component renders the correct menu
immediately without waiting for useEffect.
| setSections(defaultSections) | ||
| } | ||
| }, [pathname]) | ||
| const filteredSections = sections |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Effect should handle customSections and unify selection logic
Prefer customSections when present; otherwise pick based on pathname. Add customSections to deps.
- }, [pathname])
+ }, [pathname, customSections])And replace the effect body with:
useEffect(() => {
if (customSections) {
setSections(customSections);
return;
}
setSections(pathname.includes("/docs/") ? docsSections : defaultSections);
}, [pathname, customSections]);🤖 Prompt for AI Agents
In docs/components/navigation/Navigation.tsx around lines 40 to 43, the effect
currently only reacts to pathname and always falls back to defaultSections,
ignoring customSections and failing to include customSections in the dependency
array; change the effect to prefer customSections when present and to set
sections accordingly (use customSections if truthy, otherwise set docsSections
when pathname includes "/docs/" or defaultSections otherwise), and add
customSections to the dependency array so the effect runs when customSections
changes.
Summary
Testing
npm testhttps://chatgpt.com/codex/tasks/task_e_68c1a20e34cc833180c09989c87480fb
Summary by CodeRabbit