refactor(www): framework path params to global state - #64
Conversation
|
|
Warning Rate limit exceeded@iamdin has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 36 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughRefactors docs and code display to a framework-agnostic route structure and multi-framework source rendering. Renames a public prop from component to name across docs/components. Introduces a shared frameworkAtom with localStorage persistence to toggle per-framework UI. Adjusts source APIs (source → content), updates framework selection UI, and revises CI for preview deployments. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant H as SiteHeader / FrameworkSelect
participant A as frameworkAtom
participant LS as localStorage
participant DOM as data-framework blocks (ComponentSource/ExampleSource)
rect rgba(230,240,255,0.4)
note over DOM: On page load
A->>LS: Read saved framework (fallback "react")
A->>DOM: Show matching [data-framework], hide others
end
U->>H: Change framework via select
H->>A: frameworkAtom.set(newFramework)
A->>LS: Persist newFramework
A->>DOM: Toggle visibility across per-framework blocks
sequenceDiagram
autonumber
participant CS as ComponentSource (Astro)
participant ES as ExampleSource (Astro)
participant S as getComponentSource/getExampleSource
participant F as frameworks[]
rect rgba(245,235,255,0.35)
note over CS: Server-side render
CS->>F: Iterate frameworks
CS->>S: getComponentSource(framework, name)
S-->>CS: [{ filename, lang, content }]
CS->>CS: Render hidden blocks per framework (data-framework)
end
rect rgba(245,235,255,0.35)
note over ES: Server-side render
ES->>F: Iterate frameworks
ES->>S: getExampleSource(framework, name)
S-->>ES: { lang, content } | null
ES->>ES: Render hidden blocks per framework (data-framework)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
apps/www/src/lib/source.ts (1)
23-27: Inconsistent property name:getExampleSourcestill returnssourceinstead ofcontent.This will break consumers expecting
content. Align it withgetComponentSource.Apply this diff:
return { filename: `${entryFileInfo[1]}.${entryFileInfo[2]}`, - source: entryFile.result, + content: entryFile.result, lang: entryFileInfo[2] as BuiltinLanguage, }apps/www/content/components/button.mdx (1)
49-53: Incorrect Next.js Link import in example.
next/linkexportsLinkas default, not a named export.Apply this diff:
-import { Link } from "next/link" +import Link from "next/link"apps/www/src/pages/docs/components/[component].astro (1)
1-23: Add redirect route and remove stale alias
- Create
apps/www/src/pages/docs/components/[framework]/[component].astroto redirect/docs/components/:framework/:component→/docs/components/:component(301).- In
apps/www/astro.config.ts(line 24), remove or update the obsolete mapping
"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/docs/components": "/docs/components/react/accordion".
🧹 Nitpick comments (10)
apps/www/src/lib/source.ts (2)
51-57: Rename aligns with new API, but ensure consumers expectcontent(notsource).Good rename. Please confirm all consumers (e.g., ComponentSource/ExampleSource renderers) use
content. Consider introducing a shared type to lock this shape.Apply:
+export type SourceFile = { + filename: string + content: string + lang: BuiltinLanguage +}…and use
Promise<SourceFile[]>/SourceFileas return types here for compile-time safety.Also applies to: 65-67
72-74: Broaden file-extension support or harden parsing.
extractFileInfoonly matches.vue|.ts|.tsx. If examples add.jsxor.css(often co-located), this will fail silently and yieldundefined.undefined.Apply:
-export const extractFileInfo = (p: string) => { - return p.match(/([\w-]+)\.(vue|ts|tsx)$/) || [] -} +export const extractFileInfo = (p: string) => p.match(/([\w-]+)\.(vue|ts|tsx|jsx|js|css|svelte)$/) || []Optionally validate match before using
[1]/[2]and throw a descriptive error.apps/www/content/components/menu.mdx (1)
24-24: LGTM; consider naming consistency in internal UI text.Minor: preview.tsx’s NotFound component still refers to the variable as component; consider renaming to name for consistency across the docs surface.
apps/www/src/components/sidebar.astro (1)
21-21: Active-link check can false-match; add a precise matcher and aria-current.
Prevents e.g. “tab” highlighting on “tabs” and improves a11y.const pathname = Astro.url.pathname +const isActive = (href: string) => + pathname === href || pathname.startsWith(href + "/") ... - <a - href={item.href} - class={cn( - "hover:underline px-2 py-1", - pathname.startsWith(item.href) - ? "font-medium text-foreground" - : "text-muted-foreground" - )} - > + <a + href={item.href} + aria-current={isActive(item.href) ? "page" : undefined} + class={cn( + "hover:underline px-2 py-1", + isActive(item.href) ? "font-medium text-foreground" : "text-muted-foreground" + )} + >Also applies to: 30-41, 33-36
apps/www/src/lib/framework-script.ts (2)
4-4: Typesubscriptionas possibly undefined to match optional use.
Prevents type/lint noise when callingsubscription?.unsubscribe().-let subscription: Subscription +let subscription: Subscription | undefined
6-14: Compute framework once and toggle viahiddenattribute for consistency.
Aligns with ui-library script and avoids class/attribute divergence; minor perf win.-const handler = () => { - for (const element of document.querySelectorAll("[data-framework]")) { - if (element.getAttribute("data-framework") === frameworkAtom.get()) { - element.classList.remove("hidden") - } else { - element.classList.add("hidden") - } - } -} +const handler = () => { + const current = frameworkAtom.get() + const nodes = document.querySelectorAll<HTMLElement>("[data-framework]") + for (const el of nodes) { + el.hidden = el.dataset.framework !== current + } +}apps/www/src/components/site-header.astro (1)
31-31: Consider hydrating the switcher on idle to reduce main-thread contention.
client:idletypically suffices for a small select; keeps LCP steadier without affecting functionality.Apply:
- <FrameworkSelect client:load /> + <FrameworkSelect client:idle />apps/www/src/store/atoms/framework.ts (2)
5-23: Harden storage, add cross-tab sync, and clean up on HMR
- Guard localStorage with try/catch (Safari private mode, quota).
- Derive the default from frameworks[0] to avoid repeating "react".
- Sync across tabs via the storage event.
- Dispose subscriptions/listeners on HMR to avoid duplicate writes during dev.
import { createAtom } from "@xstate/store" export const FRAMEWORK_STORAGE_KEY = `${siteConfig.name}-framework` +const DEFAULT_FRAMEWORK: Framework = frameworks[0] -// Get initial value from localStorage or default to "react" -const getInitialFramework = (): Framework => { - if (typeof window === "undefined") return "react" - const stored = localStorage.getItem(FRAMEWORK_STORAGE_KEY) - return stored && frameworks.includes(stored as Framework) - ? (stored as Framework) - : "react" -} +// Get initial value from localStorage or default to the first framework ("react") +const getInitialFramework = (): Framework => { + if (typeof window === "undefined") return DEFAULT_FRAMEWORK + try { + const stored = localStorage.getItem(FRAMEWORK_STORAGE_KEY) + return stored && frameworks.includes(stored as Framework) + ? (stored as Framework) + : DEFAULT_FRAMEWORK + } catch { + return DEFAULT_FRAMEWORK + } +} export const frameworkAtom = createAtom<Framework>(getInitialFramework()) -// Subscribe to atom changes and persist to localStorage +// Subscribe to atom changes, persist to localStorage, and sync across tabs if (typeof window !== "undefined") { - frameworkAtom.subscribe((framework) => { - localStorage.setItem(FRAMEWORK_STORAGE_KEY, framework) - }) + const onStorage = (e: StorageEvent) => { + if (e.key === FRAMEWORK_STORAGE_KEY && typeof e.newValue === "string") { + if (frameworks.includes(e.newValue as Framework)) { + frameworkAtom.set(e.newValue as Framework) + } + } + } + const sub = frameworkAtom.subscribe((framework) => { + try { + localStorage.setItem(FRAMEWORK_STORAGE_KEY, framework) + } catch { + /* no-op */ + } + }) + window.addEventListener("storage", onStorage) + // HMR safety in dev + // @ts-expect-error Vite HMR + if (import.meta?.hot) { + // @ts-expect-error Vite HMR + import.meta.hot.dispose(() => { + sub.unsubscribe() + window.removeEventListener("storage", onStorage) + }) + } }
7-13: Minor: use constant for default frameworkUsing DEFAULT_FRAMEWORK (first entry of frameworks) reduces duplication if the default ever changes.
apps/www/src/components/framework-select.tsx (1)
28-37: Add aria-label and avoid redundant setsImproves a11y and prevents unnecessary state writes/re-renders.
<Select className="w-20" - value={[framework]} + value={[framework]} + aria-label="Framework" onValueChange={(details) => { const newFramework = details.value[0] as Framework - frameworkAtom.set(newFramework) + if (newFramework !== framework) { + frameworkAtom.set(newFramework) + } }} collection={frameworksCollection} positioning={{ sameWidth: true }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (45)
apps/www/content/components/accordion.mdx(1 hunks)apps/www/content/components/avatar.mdx(1 hunks)apps/www/content/components/button.mdx(1 hunks)apps/www/content/components/checkbox.mdx(1 hunks)apps/www/content/components/collapsible.mdx(1 hunks)apps/www/content/components/combobox.mdx(1 hunks)apps/www/content/components/dialog.mdx(1 hunks)apps/www/content/components/hover-card.mdx(1 hunks)apps/www/content/components/input.mdx(1 hunks)apps/www/content/components/label.mdx(1 hunks)apps/www/content/components/menu.mdx(1 hunks)apps/www/content/components/number-input.mdx(1 hunks)apps/www/content/components/pagination.mdx(1 hunks)apps/www/content/components/pin-input.mdx(1 hunks)apps/www/content/components/popover.mdx(1 hunks)apps/www/content/components/progress.mdx(1 hunks)apps/www/content/components/radio-group.mdx(1 hunks)apps/www/content/components/rating-group.mdx(1 hunks)apps/www/content/components/select.mdx(1 hunks)apps/www/content/components/sheet.mdx(1 hunks)apps/www/content/components/slider.mdx(1 hunks)apps/www/content/components/switch.mdx(1 hunks)apps/www/content/components/tabs.mdx(1 hunks)apps/www/content/components/tags-input.mdx(1 hunks)apps/www/content/components/textarea.mdx(1 hunks)apps/www/content/components/toast.mdx(1 hunks)apps/www/content/components/toggle-group.mdx(1 hunks)apps/www/content/components/toggle.mdx(1 hunks)apps/www/content/components/tooltip.mdx(1 hunks)apps/www/content/components/tree-view.mdx(1 hunks)apps/www/src/components/content/accordion.tsx(0 hunks)apps/www/src/components/content/component-preview/index.astro(2 hunks)apps/www/src/components/content/component-source.astro(1 hunks)apps/www/src/components/content/example-source.astro(1 hunks)apps/www/src/components/framework-select.tsx(2 hunks)apps/www/src/components/framework-select/index.astro(0 hunks)apps/www/src/components/sidebar.astro(2 hunks)apps/www/src/components/site-header.astro(2 hunks)apps/www/src/layouts/doc-layout.astro(1 hunks)apps/www/src/layouts/root-layout.astro(1 hunks)apps/www/src/lib/docs.ts(1 hunks)apps/www/src/lib/framework-script.ts(1 hunks)apps/www/src/lib/source.ts(2 hunks)apps/www/src/pages/docs/components/[component].astro(1 hunks)apps/www/src/store/atoms/framework.ts(1 hunks)
💤 Files with no reviewable changes (2)
- apps/www/src/components/framework-select/index.astro
- apps/www/src/components/content/accordion.tsx
🧰 Additional context used
📓 Path-based instructions (8)
apps/www/**/*
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Document all components and features in the documentation website (apps/www/)
Files:
apps/www/content/components/rating-group.mdxapps/www/src/layouts/root-layout.astroapps/www/content/components/pin-input.mdxapps/www/src/store/atoms/framework.tsapps/www/content/components/toggle.mdxapps/www/content/components/popover.mdxapps/www/content/components/radio-group.mdxapps/www/content/components/switch.mdxapps/www/content/components/progress.mdxapps/www/content/components/menu.mdxapps/www/content/components/checkbox.mdxapps/www/content/components/sheet.mdxapps/www/content/components/combobox.mdxapps/www/content/components/tags-input.mdxapps/www/content/components/textarea.mdxapps/www/content/components/tabs.mdxapps/www/content/components/accordion.mdxapps/www/content/components/button.mdxapps/www/content/components/tooltip.mdxapps/www/content/components/label.mdxapps/www/src/components/content/component-preview/index.astroapps/www/content/components/toggle-group.mdxapps/www/content/components/number-input.mdxapps/www/content/components/toast.mdxapps/www/content/components/hover-card.mdxapps/www/src/lib/framework-script.tsapps/www/content/components/select.mdxapps/www/src/pages/docs/components/[component].astroapps/www/content/components/pagination.mdxapps/www/content/components/slider.mdxapps/www/content/components/avatar.mdxapps/www/src/components/content/example-source.astroapps/www/src/components/framework-select.tsxapps/www/content/components/dialog.mdxapps/www/src/layouts/doc-layout.astroapps/www/content/components/collapsible.mdxapps/www/content/components/tree-view.mdxapps/www/content/components/input.mdxapps/www/src/lib/source.tsapps/www/src/components/content/component-source.astroapps/www/src/components/site-header.astroapps/www/src/lib/docs.tsapps/www/src/components/sidebar.astro
apps/www/content/**/*.mdx
📄 CodeRabbit inference engine (CLAUDE.md)
Place documentation as MDX files under apps/www/content
Place documentation MDX files under apps/www/content
Files:
apps/www/content/components/rating-group.mdxapps/www/content/components/pin-input.mdxapps/www/content/components/toggle.mdxapps/www/content/components/popover.mdxapps/www/content/components/radio-group.mdxapps/www/content/components/switch.mdxapps/www/content/components/progress.mdxapps/www/content/components/menu.mdxapps/www/content/components/checkbox.mdxapps/www/content/components/sheet.mdxapps/www/content/components/combobox.mdxapps/www/content/components/tags-input.mdxapps/www/content/components/textarea.mdxapps/www/content/components/tabs.mdxapps/www/content/components/accordion.mdxapps/www/content/components/button.mdxapps/www/content/components/tooltip.mdxapps/www/content/components/label.mdxapps/www/content/components/toggle-group.mdxapps/www/content/components/number-input.mdxapps/www/content/components/toast.mdxapps/www/content/components/hover-card.mdxapps/www/content/components/select.mdxapps/www/content/components/pagination.mdxapps/www/content/components/slider.mdxapps/www/content/components/avatar.mdxapps/www/content/components/dialog.mdxapps/www/content/components/collapsible.mdxapps/www/content/components/tree-view.mdxapps/www/content/components/input.mdx
apps/www/**
📄 CodeRabbit inference engine (AGENTS.md)
Host the documentation site code in apps/www (Astro/MDX/Tailwind v4)
Files:
apps/www/content/components/rating-group.mdxapps/www/src/layouts/root-layout.astroapps/www/content/components/pin-input.mdxapps/www/src/store/atoms/framework.tsapps/www/content/components/toggle.mdxapps/www/content/components/popover.mdxapps/www/content/components/radio-group.mdxapps/www/content/components/switch.mdxapps/www/content/components/progress.mdxapps/www/content/components/menu.mdxapps/www/content/components/checkbox.mdxapps/www/content/components/sheet.mdxapps/www/content/components/combobox.mdxapps/www/content/components/tags-input.mdxapps/www/content/components/textarea.mdxapps/www/content/components/tabs.mdxapps/www/content/components/accordion.mdxapps/www/content/components/button.mdxapps/www/content/components/tooltip.mdxapps/www/content/components/label.mdxapps/www/src/components/content/component-preview/index.astroapps/www/content/components/toggle-group.mdxapps/www/content/components/number-input.mdxapps/www/content/components/toast.mdxapps/www/content/components/hover-card.mdxapps/www/src/lib/framework-script.tsapps/www/content/components/select.mdxapps/www/src/pages/docs/components/[component].astroapps/www/content/components/pagination.mdxapps/www/content/components/slider.mdxapps/www/content/components/avatar.mdxapps/www/src/components/content/example-source.astroapps/www/src/components/framework-select.tsxapps/www/content/components/dialog.mdxapps/www/src/layouts/doc-layout.astroapps/www/content/components/collapsible.mdxapps/www/content/components/tree-view.mdxapps/www/content/components/input.mdxapps/www/src/lib/source.tsapps/www/src/components/content/component-source.astroapps/www/src/components/site-header.astroapps/www/src/lib/docs.tsapps/www/src/components/sidebar.astro
apps/www/src/**
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
The main documentation website source code must be located under apps/www/src/
Files:
apps/www/src/layouts/root-layout.astroapps/www/src/store/atoms/framework.tsapps/www/src/components/content/component-preview/index.astroapps/www/src/lib/framework-script.tsapps/www/src/pages/docs/components/[component].astroapps/www/src/components/content/example-source.astroapps/www/src/components/framework-select.tsxapps/www/src/layouts/doc-layout.astroapps/www/src/lib/source.tsapps/www/src/components/content/component-source.astroapps/www/src/components/site-header.astroapps/www/src/lib/docs.tsapps/www/src/components/sidebar.astro
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
**/*.{ts,tsx}: Function names must use camelCase (e.g. buttonVariants, cn)
Constant names must use SCREAMING_SNAKE_CASE (e.g. DEFAULT_VARIANT)
Type interfaces must use PascalCase with Props suffix (e.g. ButtonProps)
Files:
apps/www/src/store/atoms/framework.tsapps/www/src/lib/framework-script.tsapps/www/src/components/framework-select.tsxapps/www/src/lib/source.tsapps/www/src/lib/docs.ts
**/*.{js,jsx,ts,tsx,json,jsonc}
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Maintain code quality and style as configured in biome.jsonc
Files:
apps/www/src/store/atoms/framework.tsapps/www/src/lib/framework-script.tsapps/www/src/components/framework-select.tsxapps/www/src/lib/source.tsapps/www/src/lib/docs.ts
**/*.{tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
**/*.{tsx,vue}: Component variable and function names must use PascalCase (e.g. Button, ToggleGroup)
Prefer Tailwind built-in classes for styling
Use semantic design tokens for styling
Support dark theme in component styles
Use Ark UI components as foundation for accessibility
Support keyboard navigation in components
Provide appropriate ARIA attributes in components
Support screen readers in components
Avoid unnecessary re-renders in components
Handle event listeners properly in components
Files:
apps/www/src/components/framework-select.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
Organize complex styles through CVA (Class Variance Authority)
Files:
apps/www/src/components/framework-select.tsx
🧠 Learnings (2)
📚 Learning: 2025-08-30T18:58:30.720Z
Learnt from: CR
PR: shipbase/ui#0
File: AGENTS.md:0-0
Timestamp: 2025-08-30T18:58:30.720Z
Learning: Applies to packages/{react,vue}/src/**/*.{ts,tsx,vue} : Build components on top of Ark UI primitives in framework source code
Applied to files:
apps/www/src/components/content/component-source.astroapps/www/src/components/site-header.astro
📚 Learning: 2025-08-03T17:49:32.389Z
Learnt from: CR
PR: shipbase/ui#0
File: .cursor/rules/component-development.mdc:0-0
Timestamp: 2025-08-03T17:49:32.389Z
Learning: Applies to packages/react/src/components/ui/*.tsx : React components are built on top of Ark UI components
Applied to files:
apps/www/src/components/site-header.astro
🧬 Code graph analysis (19)
apps/www/src/store/atoms/framework.ts (3)
apps/www/src/constants/frameworks.ts (1)
frameworks(3-3)apps/www/src/components/ui-library-select.tsx (4)
FrameworkSwitcher(29-73)details(52-54)initialValue(32-46)uiLibrary(39-41)apps/www/src/components/content/component-install-cli/component-install-cli.tsx (1)
initialValue(30-44)
apps/www/content/components/toggle.mdx (1)
apps/www/src/components/content/component-preview/preview.tsx (1)
Props(8-10)
apps/www/content/components/progress.mdx (1)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (1)
Props(20-22)
apps/www/content/components/menu.mdx (1)
apps/www/src/components/content/component-preview/preview.tsx (1)
NotFound(44-54)
apps/www/content/components/sheet.mdx (1)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (2)
ComponentInstallCLI(26-91)Props(20-22)
apps/www/content/components/tags-input.mdx (1)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (3)
ComponentInstallCLI(26-91)Props(20-22)key(81-87)
apps/www/content/components/textarea.mdx (2)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (1)
Props(20-22)apps/www/src/components/content/component-preview/preview.tsx (1)
Props(8-10)
apps/www/content/components/button.mdx (1)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (1)
Props(20-22)
apps/www/content/components/tooltip.mdx (1)
apps/www/src/components/content/component-preview/preview.tsx (1)
NotFound(44-54)
apps/www/src/components/content/component-preview/index.astro (2)
apps/www/src/components/content/component-preview/tabs.tsx (2)
ComponentPreviewTabs(16-38)Props(11-14)apps/www/src/lib/remark-code-wrapper.ts (3)
remarkCodeWrapper(10-47)node(15-44)tree(11-46)
apps/www/content/components/toggle-group.mdx (1)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (2)
Props(20-22)ComponentInstallCLI(26-91)
apps/www/content/components/number-input.mdx (2)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (1)
Props(20-22)apps/www/src/components/content/component-preview/preview.tsx (1)
Props(8-10)
apps/www/src/lib/framework-script.ts (2)
apps/www/src/store/atoms/framework.ts (1)
frameworkAtom(16-16)apps/www/src/lib/ui-library.ts (1)
subscription(10-28)
apps/www/content/components/avatar.mdx (1)
apps/www/src/components/content/component-preview/preview.tsx (1)
Props(8-10)
apps/www/src/components/content/example-source.astro (1)
apps/www/src/lib/remark-code-wrapper.ts (2)
node(15-44)remarkCodeWrapper(10-47)
apps/www/src/components/framework-select.tsx (3)
apps/www/src/constants/frameworks.ts (1)
frameworks(3-3)apps/www/src/store/atoms/framework.ts (1)
frameworkAtom(16-16)apps/www/src/components/ui-library-select.tsx (3)
FrameworkSwitcher(29-73)details(52-54)initialValue(32-46)
apps/www/content/components/input.mdx (2)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (2)
Props(20-22)ComponentInstallCLI(26-91)apps/www/src/components/content/component-preview/preview.tsx (2)
Props(8-10)NotFound(44-54)
apps/www/src/components/content/component-source.astro (1)
apps/www/src/components/content/component-preview/preview.tsx (1)
Props(8-10)
apps/www/src/components/site-header.astro (1)
apps/www/src/components/ui-library-select.tsx (2)
FrameworkSwitcher(29-73)details(52-54)
🔇 Additional comments (35)
apps/www/content/components/select.mdx (1)
24-24: Prop rename looks good.
component → namealigns with the new API.apps/www/content/components/slider.mdx (1)
24-24: Prop rename looks good.
component → namealigns with the new API.apps/www/content/components/pin-input.mdx (1)
24-24: Approve prop rename; no lingering usages found.
Prop rename from component to name is correct and matches the new API. A search for any remaining<ComponentSource component=>occurrences inapps/www/contentreturned no matches. Approving code changes.apps/www/content/components/textarea.mdx (1)
24-24: LGTM: ComponentSource now uses name.Aligned with the new docs API.
apps/www/content/components/pagination.mdx (1)
24-24: LGTM: Prop rename applied.No further changes needed here.
apps/www/src/layouts/doc-layout.astro (1)
43-43: Removingdata-frameworkis safe
Search across CSS, JS, TS, Astro, JSX/TSX files yielded no selectors or scripts targeting[data-framework]ordata-framework="react", so removing it has no downstream impact.apps/www/content/components/sheet.mdx (1)
24-24: Verifiedcomponent→nameprop rename
No remaining<ComponentSource component=usages;nameprop is defined in ComponentSource.apps/www/content/components/rating-group.mdx (1)
25-25: Consistent prop rename toname.
<ComponentSource name="rating-group" />matches the updated API and other docs.apps/www/content/components/radio-group.mdx (1)
24-24: LGTM on the prop rename.Uses
name="radio-group"as expected with the newComponentSourcesignature.apps/www/content/components/checkbox.mdx (1)
24-24: Good: switched tonameprop.
<ComponentSource name="checkbox" />is aligned with the refactor.apps/www/content/components/popover.mdx (1)
24-24: Correct prop update.
<ComponentSource name="popover" />is consistent with the new API across docs.apps/www/content/components/tags-input.mdx (1)
24-24: Prop rename tonameis correct and allcomponentprop usages have been removed.apps/www/content/components/tooltip.mdx (1)
24-24: LGTM:ComponentSourcenow usesname="tooltip"per the new prop.apps/www/content/components/combobox.mdx (1)
24-24: LGTM:component→namerename applied correctly.apps/www/content/components/hover-card.mdx (1)
24-24: LGTM:ComponentSourceprop rename is aligned with the refactor.apps/www/content/components/dialog.mdx (1)
24-24: Prop rename to name is correct and consistent with the new API.Matches the refactor toward
<ComponentSource name="...">. LGTM.apps/www/content/components/button.mdx (1)
24-24: Prop rename aligned with ComponentSource API.
name="button"is correct post-refactor.apps/www/content/components/tabs.mdx (1)
24-24: LGTM: uses the newnameprop.No issues spotted.
apps/www/content/components/collapsible.mdx (1)
24-24: LGTM: consistentnameprop usage.Change is correct.
apps/www/content/components/input.mdx (1)
24-24: LGTM:ComponentSourcenow usesname.Looks good.
apps/www/content/components/toggle.mdx (1)
27-27: Approve code changes. Prop rename tonamealigns with ComponentSource API; sweep acrossapps/www/content/**/*.mdxconfirmed no leftovercomponent=usages.apps/www/content/components/switch.mdx (1)
24-24: Rename to name is correct here as well.Matches the new ComponentSource interface.
apps/www/content/components/accordion.mdx (1)
24-24: Accordion doc updated to name prop correctly.Change is consistent with the global refactor.
apps/www/content/components/label.mdx (1)
24-24: Label doc uses the new name prop as intended.Looks good.
apps/www/content/components/toast.mdx (1)
25-25: Toast doc updated to name prop; consistent with other pages.No further changes needed.
apps/www/content/components/toggle-group.mdx (1)
24-24: Approve code changes: prop rename tonameis correct and consistent with the new API; no remainingcomponentprop usages found.apps/www/src/lib/framework-script.ts (1)
16-20: No duplicate script inclusion found. Confirmed only one<script src="@/lib/framework-script.ts">inapps/www/src/layouts/root-layout.astro(line 36).apps/www/content/components/number-input.mdx (1)
24-24: Prop rename LGTM — no remainingcomponent=prop usages detected.apps/www/content/components/avatar.mdx (1)
24-24: Approve prop rename ofcomponenttonameacross MDX files
No further concerns.apps/www/content/components/progress.mdx (1)
24-24: Approve code changes — no remainingcomponentprop usages found
Verification script returned zero matches forcomponent=in anyComponentSourcewithinapps/www/content.apps/www/content/components/tree-view.mdx (1)
25-25: Prop rename to name looks correct for ComponentSource.Matches the new public API; nothing else to change here.
apps/www/src/components/site-header.astro (1)
8-8: Import source updated to named export — correct.Switch to
./framework-selectwith a named export aligns with the new TSX component.apps/www/src/components/content/component-preview/index.astro (1)
3-3: Good swap to ExampleSource for multi-framework code.Import and usage are consistent with the new framework-toggling flow.
Also applies to: 29-29
apps/www/src/pages/docs/components/[component].astro (1)
12-20: Static paths simplification to per-component looks good.Removes framework from params cleanly and keeps
entryintact.apps/www/src/components/content/component-source.astro (1)
7-11: All<ComponentSource>call sites have been updated toname=; the lonecomponent=prop inComponentPreview’s NotFound fallback (apps/www/src/components/content/component-preview/preview.tsx:14) is unrelated and expected.
cc9c41a to
c1e042e
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
apps/www/src/components/content/component-preview/index.astro (1)
29-29: Render ExampleSource in code tab — consider lazy evaluation (optional)If ExampleSource emits multi-framework blocks, rendering it by default adds markup cost even when “Code” tab isn’t active. Consider conditional render on tab change to defer work.
apps/www/src/store/atoms/framework.ts (2)
5-15: Harden initialization and centralize defaultLocalStorage can throw (e.g., Safari private mode). Also, a shared DEFAULT avoids “react” string duplication.
+const DEFAULT_FRAMEWORK: Framework = "react" + // Get initial value from localStorage or default to "react" const getInitialFramework = (): Framework => { - if (typeof window === "undefined") return "react" - const stored = localStorage.getItem(FRAMEWORK_STORAGE_KEY) - return stored && frameworks.includes(stored as Framework) - ? (stored as Framework) - : "react" + if (typeof window === "undefined") return DEFAULT_FRAMEWORK + try { + const stored = localStorage.getItem(FRAMEWORK_STORAGE_KEY) + return stored && frameworks.includes(stored as Framework) + ? (stored as Framework) + : DEFAULT_FRAMEWORK + } catch { + return DEFAULT_FRAMEWORK + } }
19-23: Guard persistence with try/catchAvoid crashes if storage is unavailable.
if (typeof window !== "undefined") { frameworkAtom.subscribe((framework) => { - localStorage.setItem(FRAMEWORK_STORAGE_KEY, framework) + try { + localStorage.setItem(FRAMEWORK_STORAGE_KEY, framework) + } catch { + /* no-op */ + } }) }.github/workflows/deploy.yml (4)
4-5: Preview only runs on pushes to nextWith this trigger, the “preview” job won’t run for feature branches or PRs. If you want branch/PR previews, add pull_request and/or broaden branches.
on: - push: - branches: ['next'] + push: + branches: ['**'] + pull_request: + branches: ['next']
33-41: YAML style nits and wrangler command checkFix extra spaces; verify the “versions upload” command is the intended Workers flow for previews.
- - name: Deploy to Cloudflare Workers + - name: Deploy to Cloudflare Workers id: deploy - uses: cloudflare/wrangler-action@v3 + uses: cloudflare/wrangler-action@v3 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} workingDirectory: "apps/www" packageManager: pnpm command: versions upload --message=${{ github.ref_name }} --tag=${{ github.sha }}
42-46: Output variable may differConfirm wrangler-action exposes
deployment-urlfor Workers “versions upload”. Adjust key if needed and remove trailing space.- name: Deployed URL env: DEPLOYMENT_URL: ${{ steps.deploy.outputs.deployment-url }} - run: echo $DEPLOYMENT_URL - + run: echo "$DEPLOYMENT_URL"
72-78: Production step spacingNormalize spacing to satisfy linters; mirrors preview fix.
- - name: Deploy to Cloudflare Workers - uses: cloudflare/wrangler-action@v3 + - name: Deploy to Cloudflare Workers + uses: cloudflare/wrangler-action@v3 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} workingDirectory: "apps/www" packageManager: pnpm
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (46)
.github/workflows/deploy.yml(1 hunks)apps/www/content/components/accordion.mdx(1 hunks)apps/www/content/components/avatar.mdx(1 hunks)apps/www/content/components/button.mdx(1 hunks)apps/www/content/components/checkbox.mdx(1 hunks)apps/www/content/components/collapsible.mdx(1 hunks)apps/www/content/components/combobox.mdx(1 hunks)apps/www/content/components/dialog.mdx(1 hunks)apps/www/content/components/hover-card.mdx(1 hunks)apps/www/content/components/input.mdx(1 hunks)apps/www/content/components/label.mdx(1 hunks)apps/www/content/components/menu.mdx(1 hunks)apps/www/content/components/number-input.mdx(1 hunks)apps/www/content/components/pagination.mdx(1 hunks)apps/www/content/components/pin-input.mdx(1 hunks)apps/www/content/components/popover.mdx(1 hunks)apps/www/content/components/progress.mdx(1 hunks)apps/www/content/components/radio-group.mdx(1 hunks)apps/www/content/components/rating-group.mdx(1 hunks)apps/www/content/components/select.mdx(1 hunks)apps/www/content/components/sheet.mdx(1 hunks)apps/www/content/components/slider.mdx(1 hunks)apps/www/content/components/switch.mdx(1 hunks)apps/www/content/components/tabs.mdx(1 hunks)apps/www/content/components/tags-input.mdx(1 hunks)apps/www/content/components/textarea.mdx(1 hunks)apps/www/content/components/toast.mdx(1 hunks)apps/www/content/components/toggle-group.mdx(1 hunks)apps/www/content/components/toggle.mdx(1 hunks)apps/www/content/components/tooltip.mdx(1 hunks)apps/www/content/components/tree-view.mdx(1 hunks)apps/www/src/components/content/accordion.tsx(0 hunks)apps/www/src/components/content/component-preview/index.astro(2 hunks)apps/www/src/components/content/component-source.astro(1 hunks)apps/www/src/components/content/example-source.astro(1 hunks)apps/www/src/components/framework-select.tsx(2 hunks)apps/www/src/components/framework-select/index.astro(0 hunks)apps/www/src/components/sidebar.astro(2 hunks)apps/www/src/components/site-header.astro(2 hunks)apps/www/src/layouts/doc-layout.astro(1 hunks)apps/www/src/layouts/root-layout.astro(1 hunks)apps/www/src/lib/docs.ts(1 hunks)apps/www/src/lib/framework-script.ts(1 hunks)apps/www/src/lib/source.ts(2 hunks)apps/www/src/pages/docs/components/[component].astro(1 hunks)apps/www/src/store/atoms/framework.ts(1 hunks)
💤 Files with no reviewable changes (2)
- apps/www/src/components/framework-select/index.astro
- apps/www/src/components/content/accordion.tsx
✅ Files skipped from review due to trivial changes (3)
- apps/www/content/components/dialog.mdx
- apps/www/content/components/toggle.mdx
- apps/www/content/components/popover.mdx
🚧 Files skipped from review as they are similar to previous changes (36)
- apps/www/content/components/number-input.mdx
- apps/www/content/components/pagination.mdx
- apps/www/content/components/avatar.mdx
- apps/www/content/components/menu.mdx
- apps/www/content/components/label.mdx
- apps/www/src/layouts/doc-layout.astro
- apps/www/content/components/sheet.mdx
- apps/www/content/components/select.mdx
- apps/www/content/components/collapsible.mdx
- apps/www/content/components/tree-view.mdx
- apps/www/content/components/combobox.mdx
- apps/www/content/components/input.mdx
- apps/www/content/components/toast.mdx
- apps/www/content/components/tooltip.mdx
- apps/www/content/components/hover-card.mdx
- apps/www/src/lib/framework-script.ts
- apps/www/src/layouts/root-layout.astro
- apps/www/content/components/radio-group.mdx
- apps/www/src/components/sidebar.astro
- apps/www/content/components/button.mdx
- apps/www/content/components/slider.mdx
- apps/www/src/components/site-header.astro
- apps/www/content/components/textarea.mdx
- apps/www/content/components/accordion.mdx
- apps/www/src/components/framework-select.tsx
- apps/www/src/lib/docs.ts
- apps/www/src/components/content/example-source.astro
- apps/www/content/components/pin-input.mdx
- apps/www/content/components/progress.mdx
- apps/www/content/components/rating-group.mdx
- apps/www/src/lib/source.ts
- apps/www/content/components/switch.mdx
- apps/www/content/components/toggle-group.mdx
- apps/www/content/components/checkbox.mdx
- apps/www/src/components/content/component-source.astro
- apps/www/src/pages/docs/components/[component].astro
🧰 Additional context used
📓 Path-based instructions (6)
apps/www/**/*
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Document all components and features in the documentation website (apps/www/)
Files:
apps/www/content/components/tags-input.mdxapps/www/content/components/tabs.mdxapps/www/src/store/atoms/framework.tsapps/www/src/components/content/component-preview/index.astro
apps/www/content/**/*.mdx
📄 CodeRabbit inference engine (CLAUDE.md)
Place documentation as MDX files under apps/www/content
Place documentation MDX files under apps/www/content
Files:
apps/www/content/components/tags-input.mdxapps/www/content/components/tabs.mdx
apps/www/**
📄 CodeRabbit inference engine (AGENTS.md)
Host the documentation site code in apps/www (Astro/MDX/Tailwind v4)
Files:
apps/www/content/components/tags-input.mdxapps/www/content/components/tabs.mdxapps/www/src/store/atoms/framework.tsapps/www/src/components/content/component-preview/index.astro
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
**/*.{ts,tsx}: Function names must use camelCase (e.g. buttonVariants, cn)
Constant names must use SCREAMING_SNAKE_CASE (e.g. DEFAULT_VARIANT)
Type interfaces must use PascalCase with Props suffix (e.g. ButtonProps)
Files:
apps/www/src/store/atoms/framework.ts
**/*.{js,jsx,ts,tsx,json,jsonc}
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Maintain code quality and style as configured in biome.jsonc
Files:
apps/www/src/store/atoms/framework.ts
apps/www/src/**
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
The main documentation website source code must be located under apps/www/src/
Files:
apps/www/src/store/atoms/framework.tsapps/www/src/components/content/component-preview/index.astro
🧠 Learnings (1)
📚 Learning: 2025-08-03T17:49:32.389Z
Learnt from: CR
PR: shipbase/ui#0
File: .cursor/rules/component-development.mdc:0-0
Timestamp: 2025-08-03T17:49:32.389Z
Learning: Applies to {packages/react/src/components/ui/*.tsx,packages/vue/src/components/ui/*/*.vue} : Use cn() utility function to merge class names
Applied to files:
apps/www/src/components/content/component-preview/index.astro
🧬 Code graph analysis (3)
apps/www/content/components/tags-input.mdx (1)
apps/www/src/components/content/component-install-cli/component-install-cli.tsx (3)
ComponentInstallCLI(26-91)key(81-87)Props(20-22)
apps/www/src/store/atoms/framework.ts (3)
apps/www/src/constants/frameworks.ts (1)
frameworks(3-3)apps/www/src/components/ui-library-select.tsx (3)
FrameworkSwitcher(29-73)details(52-54)initialValue(32-46)apps/www/src/components/content/component-install-cli/component-install-cli.tsx (1)
initialValue(30-44)
apps/www/src/components/content/component-preview/index.astro (2)
apps/www/src/components/content/component-preview/tabs.tsx (2)
ComponentPreviewTabs(16-38)Props(11-14)apps/www/src/components/content/component-preview/preview.tsx (3)
PreviewReact(12-42)NotFound(44-54)NotFound(15-15)
🪛 YAMLlint (1.37.1)
.github/workflows/deploy.yml
[warning] 33-33: too many spaces after colon
(colons)
[warning] 35-35: too many spaces after colon
(colons)
[error] 46-46: trailing spaces
(trailing-spaces)
🔇 Additional comments (4)
apps/www/content/components/tags-input.mdx (1)
24-24: Approve prop rename; no leftover<ComponentSource component=usages found.
Ranrg -nP '<ComponentSource\s+component=' apps/www -S—returned no matches, confirming all instances updated toname=.apps/www/content/components/tabs.mdx (1)
24-24: Prop rename applied consistently
Verified that all<ComponentSource>usages now use thenameprop; nocomponentprop remains.apps/www/src/components/content/component-preview/index.astro (1)
3-3: Import switch to ExampleSource is fineImport path and symbol look correct for the new multi-framework code rendering.
.github/workflows/deploy.yml (1)
27-32: Ensure install/build run in apps/www workspace (if required)If the monorepo expects app-local build scripts, scope the working directory. Otherwise, ignore.
- name: Install dependencies - run: pnpm install --frozen-lockfile + working-directory: apps/www + run: pnpm install --frozen-lockfile - name: Build - run: pnpm run build + working-directory: apps/www + run: pnpm run buildReplicate in the production job.
Also applies to: 66-71
c1e042e to
6330fe6
Compare
6330fe6 to
f158c2d
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
apps/www/src/components/content/component-preview/preview.tsx (2)
22-28: ARIA: label the button, hide the decorative icon.Move aria-label to Button and mark the icon aria-hidden.
Apply this diff:
- <Button - onClick={() => setKey((prev) => prev + 1)} - variant="ghost" - className="absolute top-2 right-2" - > - <RotateCcw aria-label="restart-btn" size={16} /> + <Button + aria-label="Restart preview" + onClick={() => setKey((prev) => prev + 1)} + variant="ghost" + className="absolute top-2 right-2" + > + <RotateCcw aria-hidden size={16} />
31-31: Invalid Tailwind class "max-w-8/12".Use an arbitrary value or a width utility.
Apply one of:
- className="flex size-full max-w-8/12 flex-1 items-center justify-center " + className="flex size-full max-w-[66%] flex-1 items-center justify-center"or
- className="flex size-full max-w-8/12 flex-1 items-center justify-center " + className="flex size-full w-8/12 flex-1 items-center justify-center"apps/www/src/lib/source.ts (1)
43-59: Skip non-source exports to avoid undefined filename/lang.If an export points to "./style.css" or other unsupported extensions, extractFileInfo returns [], producing "undefined.undefined". Filter by allowed extensions before reading files.
Apply this diff:
- const sources = await Promise.all( - exports - .filter((exp) => exp.specifier?.startsWith("./")) - .map(async (exp) => { + const sources = await Promise.all( + exports + .filter( + (exp) => + exp.specifier?.startsWith("./") && + /\.(vue|ts|tsx)$/.test(exp.specifier!), + ) + .map(async (exp) => { // biome-ignore lint/style/noNonNullAssertion: <explanation> const [, name, lang] = extractFileInfo(exp.specifier!) return { filename: `${name}.${lang}`, content: await fs.readFile( // biome-ignore lint/style/noNonNullAssertion: <explanation> path.resolve(path.dirname(entryPath.result), exp.specifier!), "utf-8" ), lang: lang as BuiltinLanguage, } }) )
♻️ Duplicate comments (1)
.github/workflows/deploy.yml (1)
27-28: Invalid/empty node-version-file may break setup-node.Pin a Node version or point to a real file. Apply in both jobs.
Apply this diff:
- node-version-file: '' + node-version: 20.x cache: pnpmAlso applies to: 75-76
🧹 Nitpick comments (7)
biome.jsonc (1)
11-11: Typo? "packages.json" → "package.json".The ignore entry likely intends the standard package.json.
Apply this diff:
- "packages.json" + "package.json"apps/www/src/components/content/component-preview/preview.tsx (2)
14-14: Fallback component creation on every render.Minor: define the NotFound fallback once to avoid recreating a function each render.
Apply this diff:
- const Component = Examples[name] ?? (() => <NotFound name={name} />) + const Fallback = () => <NotFound name={name} /> + const Component = Examples[name] ?? Fallback
48-56: Add whitespace around the inline code for readability.Without explicit spaces, "Component" and "not found…" can butt up against the code element.
Apply this diff:
- <p className="text-muted-foreground text-sm"> - Component - <code className="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm"> - {name} - </code> - not found in registry. + <p className="text-muted-foreground text-sm"> + Component{" "} + <code className="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm"> + {name} + </code>{" "} + not found in registry.apps/www/src/store/atoms/framework.ts (1)
12-22: Tighten DOM toggle and avoid repeated get().Use classList.toggle and cache the current value. Also persist after computing UI changes.
Apply this diff:
-const handler = () => { - for (const element of document.querySelectorAll("[data-framework]")) { - if (element.getAttribute("data-framework") === frameworkAtom.get()) { - element.classList.remove("hidden") - } else { - element.classList.add("hidden") - } - } - - localStorage.setItem(FRAMEWORK_STORAGE_KEY, frameworkAtom.get()) -} +const handler = () => { + const current = frameworkAtom.get() + for (const element of document.querySelectorAll("[data-framework]")) { + element.classList.toggle( + "hidden", + element.getAttribute("data-framework") !== current, + ) + } + localStorage.setItem(FRAMEWORK_STORAGE_KEY, current) +}.github/workflows/deploy.yml (3)
45-57: deployment-url output may be undefined for wrangler versions upload.Guard the comment step to avoid posting “undefined”.
Apply this diff:
- name: Comment PR with Preview URL uses: actions/github-script@v7 with: script: | - const deploymentUrl = "${{ steps.deploy.outputs.deployment-url }}"; - const body = `🚀 Preview: ${deploymentUrl}`; - - github.rest.issues.createComment({ - issue_number: context.issue.number, - owner: context.repo.owner, - repo: context.repo.repo, - body: body - }); + const deploymentUrl = "${{ steps.deploy.outputs.deployment-url }}"; + if (!deploymentUrl) { + core.warning('wrangler-action did not expose deployment-url output'); + return; + } + const body = `🚀 Preview: ${deploymentUrl}`; + await github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body, + });
51-51: YAML lint: trailing spaces.Remove trailing spaces to satisfy yamllint.
Apply this diff:
- + @@ - +Also applies to: 58-58
10-17: Optional: add concurrency to cancel superseded preview runs.Prevents piling up preview uploads for the same PR.
Apply this block at the job level:
preview: name: Preview Deployment + concurrency: + group: preview-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (10)
.github/workflows/deploy.yml(2 hunks)apps/www/src/components/content/component-preview/component-code.astro(0 hunks)apps/www/src/components/content/component-preview/index.astro(2 hunks)apps/www/src/components/content/component-preview/preview.tsx(2 hunks)apps/www/src/components/content/example-source.astro(1 hunks)apps/www/src/components/site-header.astro(2 hunks)apps/www/src/layouts/root-layout.astro(1 hunks)apps/www/src/lib/source.ts(3 hunks)apps/www/src/store/atoms/framework.ts(1 hunks)biome.jsonc(1 hunks)
💤 Files with no reviewable changes (1)
- apps/www/src/components/content/component-preview/component-code.astro
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/www/src/layouts/root-layout.astro
- apps/www/src/components/content/example-source.astro
- apps/www/src/components/site-header.astro
- apps/www/src/components/content/component-preview/index.astro
🧰 Additional context used
📓 Path-based instructions (9)
biome.jsonc
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
biome.jsonc: 2 space indentation
Use semicolons for statement endings
Single quote strings
Trailing commas (multiline)The biome.jsonc file must be present at the root for code formatting and linting configuration
Files:
biome.jsonc
**/*.{js,jsx,ts,tsx,json,jsonc}
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Maintain code quality and style as configured in biome.jsonc
Files:
biome.jsoncapps/www/src/components/content/component-preview/preview.tsxapps/www/src/store/atoms/framework.tsapps/www/src/lib/source.ts
{package.json,pnpm-workspace.yaml,turbo.json,biome.jsonc}
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Ensure all configuration files are kept up-to-date and valid (package.json, pnpm-workspace.yaml, turbo.json, biome.jsonc)
Files:
biome.jsonc
**/*.{tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
**/*.{tsx,vue}: Component variable and function names must use PascalCase (e.g. Button, ToggleGroup)
Prefer Tailwind built-in classes for styling
Use semantic design tokens for styling
Support dark theme in component styles
Use Ark UI components as foundation for accessibility
Support keyboard navigation in components
Provide appropriate ARIA attributes in components
Support screen readers in components
Avoid unnecessary re-renders in components
Handle event listeners properly in components
Files:
apps/www/src/components/content/component-preview/preview.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
**/*.{ts,tsx}: Function names must use camelCase (e.g. buttonVariants, cn)
Constant names must use SCREAMING_SNAKE_CASE (e.g. DEFAULT_VARIANT)
Type interfaces must use PascalCase with Props suffix (e.g. ButtonProps)
Files:
apps/www/src/components/content/component-preview/preview.tsxapps/www/src/store/atoms/framework.tsapps/www/src/lib/source.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/code-standards.mdc)
Organize complex styles through CVA (Class Variance Authority)
Files:
apps/www/src/components/content/component-preview/preview.tsx
apps/www/**/*
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
Document all components and features in the documentation website (apps/www/)
Files:
apps/www/src/components/content/component-preview/preview.tsxapps/www/src/store/atoms/framework.tsapps/www/src/lib/source.ts
apps/www/src/**
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
The main documentation website source code must be located under apps/www/src/
Files:
apps/www/src/components/content/component-preview/preview.tsxapps/www/src/store/atoms/framework.tsapps/www/src/lib/source.ts
apps/www/**
📄 CodeRabbit inference engine (AGENTS.md)
Host the documentation site code in apps/www (Astro/MDX/Tailwind v4)
Files:
apps/www/src/components/content/component-preview/preview.tsxapps/www/src/store/atoms/framework.tsapps/www/src/lib/source.ts
🧠 Learnings (3)
📚 Learning: 2025-08-03T17:50:06.904Z
Learnt from: CR
PR: shipbase/ui#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-08-03T17:50:06.904Z
Learning: Applies to biome.jsonc : The biome.jsonc file must be present at the root for code formatting and linting configuration
Applied to files:
biome.jsonc
📚 Learning: 2025-08-03T17:49:50.919Z
Learnt from: CR
PR: shipbase/ui#0
File: .cursor/rules/overview.mdc:0-0
Timestamp: 2025-08-03T17:49:50.919Z
Learning: Applies to **/*.{js,jsx,ts,tsx,json,jsonc} : Maintain code quality and style as configured in biome.jsonc
Applied to files:
biome.jsonc
📚 Learning: 2025-08-03T17:49:16.881Z
Learnt from: CR
PR: shipbase/ui#0
File: .cursor/rules/code-standards.mdc:0-0
Timestamp: 2025-08-03T17:49:16.881Z
Learning: Applies to biome.jsonc : 2 space indentation
Applied to files:
biome.jsonc
🧬 Code graph analysis (1)
apps/www/src/store/atoms/framework.ts (3)
apps/www/src/components/ui-library-select.tsx (4)
FrameworkSwitcher(29-73)details(52-54)initialValue(32-46)uiLibrary(39-41)apps/www/src/components/content/component-install-cli/component-install-cli.tsx (1)
initialValue(30-44)apps/www/src/lib/ui-library.ts (1)
subscription(10-28)
🪛 YAMLlint (1.37.1)
.github/workflows/deploy.yml
[error] 51-51: trailing spaces
(trailing-spaces)
[error] 58-58: trailing spaces
(trailing-spaces)
🔇 Additional comments (2)
biome.jsonc (1)
9-10: Ignore additions look good.Excluding Wrangler and Next build artifacts from tooling is appropriate.
apps/www/src/store/atoms/framework.ts (1)
28-30: Validate stored framework value.If localStorage contains an unexpected value, you could end up hiding all blocks. Consider validating against the known frameworks list before set.
I can wire this to your frameworks constant (e.g., frameworks.includes(value)) if you confirm where it lives.
| document.addEventListener("astro:page-load", () => { | ||
| subscription?.unsubscribe() | ||
|
|
||
| // sync state in client | ||
| frameworkAtom.set( | ||
| (localStorage.getItem(FRAMEWORK_STORAGE_KEY) as Framework) || "react" | ||
| ) | ||
|
|
||
| handler() | ||
| subscription = frameworkAtom.subscribe(handler) | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Guard against SSR: document is undefined on the server.
Wrap the event listener to ensure it runs only in the browser.
Apply this diff:
-document.addEventListener("astro:page-load", () => {
+if (typeof document !== "undefined") {
+ document.addEventListener("astro:page-load", () => {
subscription?.unsubscribe()
// sync state in client
frameworkAtom.set(
(localStorage.getItem(FRAMEWORK_STORAGE_KEY) as Framework) || "react"
)
handler()
subscription = frameworkAtom.subscribe(handler)
-})
+ })
+}📝 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.
| document.addEventListener("astro:page-load", () => { | |
| subscription?.unsubscribe() | |
| // sync state in client | |
| frameworkAtom.set( | |
| (localStorage.getItem(FRAMEWORK_STORAGE_KEY) as Framework) || "react" | |
| ) | |
| handler() | |
| subscription = frameworkAtom.subscribe(handler) | |
| }) | |
| if (typeof document !== "undefined") { | |
| document.addEventListener("astro:page-load", () => { | |
| subscription?.unsubscribe() | |
| // sync state in client | |
| frameworkAtom.set( | |
| (localStorage.getItem(FRAMEWORK_STORAGE_KEY) as Framework) || "react" | |
| ) | |
| handler() | |
| subscription = frameworkAtom.subscribe(handler) | |
| }) | |
| } |
🤖 Prompt for AI Agents
In apps/www/src/store/atoms/framework.ts around lines 24 to 34, the
document.addEventListener call runs during SSR and will throw because document
is undefined; guard this by wrapping the whole block in a runtime browser check
(e.g., if (typeof window !== "undefined" && typeof document !== "undefined") {
... }) so the event listener, localStorage access and subscription logic only
execute in the client, keeping existing behavior otherwise.
1 participant
Summary by CodeRabbit