feat: add shadcn's command menu #30
Conversation
…detection and DOM mutation observation
…themes in registry-colors.ts
…UI imports and improve scrollbar styling
…g ones in package.json and pnpm-lock.yaml
…grating SpecialIndex for improved component handling
…ay with copy functionality
…tomizable orientation
…te preview link dynamically based on registry keys
… and simplify mobile preview integration
…e code consistency
… by integrating SpecialRegistryKeys for improved component validation
… functionality with visual feedback
… code retrieval with registry path conversion
…responsive dialog management
…irectly to MobilePreview component
…n-command-menu with validation functions
…t for dynamic height adjustments
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning Rate limit exceeded@SameerJS6 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 46 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 (4)
WalkthroughThis update introduces a new "Shadcn Command Menu" component, its documentation, and supporting utilities such as color palette handling, hooks, and registry integration. Several UI components are refactored to use a new base UI library. The codebase receives new features for code highlighting, copy-to-clipboard, and enhanced mobile preview logic. Documentation and configuration files are updated to reflect these additions and improvements. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CommandMenu
participant Clipboard
participant NextRouter
participant ColorUtils
User->>CommandMenu: Open (Cmd/Ctrl+K or "/")
CommandMenu->>CommandMenu: Render search input and grouped items
User->>CommandMenu: Type or select item
CommandMenu->>CommandMenu: Highlight and update selection
User->>CommandMenu: Press Enter on page
CommandMenu->>NextRouter: Navigate to page URL
User->>CommandMenu: Press Enter on color
CommandMenu->>ColorUtils: Get color value
CommandMenu->>Clipboard: Copy color code
User->>CommandMenu: Press Cmd/Ctrl+C
CommandMenu->>Clipboard: Copy selected payload
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
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: 7
🔭 Outside diff range comments (1)
app/iphone-preview/[component]/page.tsx (1)
46-50: Include special components in static generationThe current
generateStaticParamsonly iterates overIndex, so any keys inSpecialIndex(i.e.SpecialRegistryKeys) won’t be pre-rendered. Update it to pull from both registries:• File:
app/iphone-preview/[component]/page.tsx
• Lines: ~46–50Diff:
-export async function generateStaticParams() { - return Object.keys(Index).map((component) => ({ - component, - })); -} +export async function generateStaticParams() { + const main = Object.keys(Index); + const special = Object.keys(SpecialIndex); + return [...main, ...special].map((component) => ({ + component, + })); +}This ensures pages for both
RegistryKeysandSpecialRegistryKeysare statically generated.
🧹 Nitpick comments (8)
hooks/use-is-mac.ts (2)
4-4: Consider usingfalseas the initial state to prevent layout shift.The default
truevalue may cause a brief flash of Mac-specific UI on non-Mac devices before the effect runs. Consider starting withfalseornullto avoid this visual inconsistency.- const [isMac, setIsMac] = useState(true); + const [isMac, setIsMac] = useState(false);
7-7: Enhance platform detection reliability.The current implementation only checks
navigator.platformwhich is deprecated. Consider using the more modernnavigator.userAgentDataor a combination of checks for better reliability.- setIsMac(navigator.platform.toUpperCase().includes("MAC")); + setIsMac( + navigator.platform.toUpperCase().includes("MAC") || + navigator.userAgent.includes("Mac") + );hooks/use-copy-button.ts (1)
15-15: Consider making the timeout duration configurable.The 1.5-second timeout is currently hardcoded. For better reusability, consider accepting it as an optional parameter.
-export function useCopyButton(onCopy: () => void): [checked: boolean, onClick: MouseEventHandler] { +export function useCopyButton(onCopy: () => void, timeout: number = 1500): [checked: boolean, onClick: MouseEventHandler] { const [checked, setChecked] = useState(false); const timeoutRef = useRef<number | null>(null); const callbackRef = useRef(onCopy); callbackRef.current = onCopy; const onClick: MouseEventHandler = useCallback(() => { if (timeoutRef.current) window.clearTimeout(timeoutRef.current); timeoutRef.current = window.setTimeout(() => { setChecked(false); - }, 1500); + }, timeout); callbackRef.current(); setChecked(true); - }, []); + }, [timeout]);components/mobile-preview.tsx (1)
55-55: Fix early return value.The early return should return
nullinstead ofundefinedto follow React conventions and avoid potential warnings.Apply this diff:
- if (!previewLink) return; + if (!previewLink) return null;components/copy-button.tsx (1)
38-40: Consider improving icon positioning.The absolute positioning of the Copy icon might cause layout shifts or overlap issues. Consider using a more predictable approach.
Apply this diff for better icon positioning:
- <Check className={cn("text-green-600 transition-transform dark:text-green-500", !checked && "scale-0")} /> - <Copy className={cn("absolute transition-transform", checked && "scale-0")} /> + <div className="relative size-3.5"> + <Check className={cn("absolute inset-0 text-green-600 transition-transform dark:text-green-500", !checked && "scale-0")} /> + <Copy className={cn("absolute inset-0 transition-transform", checked && "scale-0")} /> + </div>components/special-registry.ts (1)
10-16: Consider more flexible component typing for future extensibility.The current
component: React.ComponentType<() => React.JSX.Element>type is quite restrictive, requiring components with no props. Consider using a more flexible type likeReact.ComponentType<any>or a generic to support future special components that might need props.interface SpecialRegistry { name: string; description: string; - component: React.ComponentType<() => React.JSX.Element>; + component: React.ComponentType<any>; categories?: string[]; meta?: string; }components/code-block.tsx (2)
23-30: Verify copy functionality handles edge cases.The copy implementation looks correct but should handle cases where textContent might be null or empty.
const onCopy = () => { const pre = areaRef.current?.getElementsByTagName("pre").item(0); if (!pre) return; const clone = pre.cloneNode(true) as HTMLElement; - navigator.clipboard.writeText(clone.textContent || ""); + const text = clone.textContent?.trim(); + if (text) { + navigator.clipboard.writeText(text); + } };
54-65: Consider extracting complex className for maintainability.The className string is quite complex and could benefit from being extracted into a constant or computed separately for better readability and maintainability.
+const codeBlockWrapperClasses = [ + "group relative overflow-hidden !whitespace-pre rounded-lg border bg-fd-secondary/50", + "[&_code]:font-geist-mono [&_code]:text-[13px]", + "[&_pre]:max-h-[600px] [&_pre]:whitespace-pre [&_pre]:rounded-md [&_pre]:!bg-transparent [&_pre]:p-4 [&_pre]:!leading-tight" +].join(" "); + return content ? ( <div className={cn( - "group relative overflow-hidden !whitespace-pre rounded-lg border bg-fd-secondary/50 [&_code]:font-geist-mono [&_code]:text-[13px] [&_pre]:max-h-[600px] [&_pre]:whitespace-pre [&_pre]:rounded-md [&_pre]:!bg-transparent [&_pre]:p-4 [&_pre]:!leading-tight", + codeBlockWrapperClasses, className )} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (24)
app/(docs)/layout.tsx(1 hunks)app/iphone-preview/[component]/page.tsx(1 hunks)components/code-block.tsx(1 hunks)components/component-preview.tsx(3 hunks)components/copy-button.tsx(1 hunks)components/hero.tsx(1 hunks)components/mobile-preview.tsx(2 hunks)components/special-registry.ts(1 hunks)components/ui/scroll-area.tsx(2 hunks)components/ui/separator.tsx(1 hunks)components/ui/tabs.tsx(2 hunks)content/docs/meta.json(1 hunks)hooks/use-copy-button.ts(1 hunks)hooks/use-is-mac.ts(1 hunks)hooks/use-mutation-observer.ts(1 hunks)lib/code-highlight.ts(1 hunks)lib/colors.ts(1 hunks)lib/mobile-preview.ts(1 hunks)next.config.mjs(1 hunks)package.json(4 hunks)registry/cmdk/responsive-command.tsx(2 hunks)registry/registry-colors.ts(1 hunks)registry/revola/revola.tsx(1 hunks)tailwind.config.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (20)
📓 Common learnings
Learnt from: SameerJS6
PR: SameerJS6/revola#28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like `DrawerType` to `ResponsiveDialogProps` is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: SameerJS6/revola#25
File: registry/revola/examples/origin-ui/forms/authentication/otp-code.tsx:36-36
Timestamp: 2025-07-15T16:44:07.975Z
Learning: SameerJS6 uses numeric separators (underscores) in JavaScript numbers for readability, such as `1_00` for 100 milliseconds. This is valid ES2021 syntax and is their preferred coding style.
app/iphone-preview/[component]/page.tsx (2)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
app/(docs)/layout.tsx (4)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: public/r/edit-profile.json:30-31
Timestamp: 2025-07-15T19:03:01.759Z
Learning: In the SameerJS6/revola project, demo and example code does not need production-level optimizations such as memory leak fixes (like revoking object URLs on unmount). Demo components are meant to showcase UI patterns and interactions, not production functionality, so performance optimizations and cleanup code are not necessary.
Learnt from: SameerJS6
PR: #28
File: public/r/search-command.json:0-0
Timestamp: 2025-07-27T17:23:12.505Z
Learning: In the SameerJS6/revola project using lucide-react version ^0.477.0, icons are exported with the "Icon" suffix (e.g., SearchIcon, ArrowUpRightIcon, FolderPlusIcon, FileInputIcon, CircleFadingPlusIcon). These icon names are valid and used throughout the codebase successfully.
Learnt from: SameerJS6
PR: #25
File: public/r/sticky-header.json:7-10
Timestamp: 2025-07-15T19:10:16.425Z
Learning: In the SameerJS6/revola project, when using shadcn's registry system, the registryDependencies array must contain full URLs (not local file references) for downloading internal dependencies. External URLs like https://revola.sameerjs.com/r/revola.json are required for the shadcn registry to properly resolve and download dependencies.
package.json (5)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: public/r/edit-profile.json:30-31
Timestamp: 2025-07-15T19:03:01.759Z
Learning: In the SameerJS6/revola project, demo and example code does not need production-level optimizations such as memory leak fixes (like revoking object URLs on unmount). Demo components are meant to showcase UI patterns and interactions, not production functionality, so performance optimizations and cleanup code are not necessary.
Learnt from: SameerJS6
PR: #28
File: public/r/search-command.json:0-0
Timestamp: 2025-07-27T17:23:12.505Z
Learning: In the SameerJS6/revola project using lucide-react version ^0.477.0, icons are exported with the "Icon" suffix (e.g., SearchIcon, ArrowUpRightIcon, FolderPlusIcon, FileInputIcon, CircleFadingPlusIcon). These icon names are valid and used throughout the codebase successfully.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui-esm/checkout-esm.tsx:95-95
Timestamp: 2025-07-15T16:50:43.602Z
Learning: In the SameerJS6/revola project, when using explicit ES module imports with .js extensions (like "react-payment-inputs/lib/images/index.js"), type assertions may be necessary to bridge type mismatches caused by the ES module workaround. This is specifically used to fix ERR_UNSUPPORTED_DIR_IMPORT errors from rehype-component.ts and the as unknown as CardImages assertion is required for proper TypeScript compilation.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
components/mobile-preview.tsx (2)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
components/ui/separator.tsx (1)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
tailwind.config.ts (1)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
lib/mobile-preview.ts (1)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
components/copy-button.tsx (1)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
registry/revola/revola.tsx (1)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
registry/cmdk/responsive-command.tsx (2)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #28
File: public/r/search-command.json:0-0
Timestamp: 2025-07-27T17:23:12.505Z
Learning: In the SameerJS6/revola project using lucide-react version ^0.477.0, icons are exported with the "Icon" suffix (e.g., SearchIcon, ArrowUpRightIcon, FolderPlusIcon, FileInputIcon, CircleFadingPlusIcon). These icon names are valid and used throughout the codebase successfully.
components/ui/scroll-area.tsx (3)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui-esm/checkout-esm.tsx:95-95
Timestamp: 2025-07-15T16:50:43.602Z
Learning: In the SameerJS6/revola project, when using explicit ES module imports with .js extensions (like "react-payment-inputs/lib/images/index.js"), type assertions may be necessary to bridge type mismatches caused by the ES module workaround. This is specifically used to fix ERR_UNSUPPORTED_DIR_IMPORT errors from rehype-component.ts and the as unknown as CardImages assertion is required for proper TypeScript compilation.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
components/special-registry.ts (4)
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui-esm/checkout-esm.tsx:95-95
Timestamp: 2025-07-15T16:50:43.602Z
Learning: In the SameerJS6/revola project, when using explicit ES module imports with .js extensions (like "react-payment-inputs/lib/images/index.js"), type assertions may be necessary to bridge type mismatches caused by the ES module workaround. This is specifically used to fix ERR_UNSUPPORTED_DIR_IMPORT errors from rehype-component.ts and the as unknown as CardImages assertion is required for proper TypeScript compilation.
Learnt from: SameerJS6
PR: #25
File: public/r/sticky-header.json:7-10
Timestamp: 2025-07-15T19:10:16.425Z
Learning: In the SameerJS6/revola project, when using shadcn's registry system, the registryDependencies array must contain full URLs (not local file references) for downloading internal dependencies. External URLs like https://revola.sameerjs.com/r/revola.json are required for the shadcn registry to properly resolve and download dependencies.
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
lib/code-highlight.ts (2)
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui-esm/checkout-esm.tsx:95-95
Timestamp: 2025-07-15T16:50:43.602Z
Learning: In the SameerJS6/revola project, when using explicit ES module imports with .js extensions (like "react-payment-inputs/lib/images/index.js"), type assertions may be necessary to bridge type mismatches caused by the ES module workaround. This is specifically used to fix ERR_UNSUPPORTED_DIR_IMPORT errors from rehype-component.ts and the as unknown as CardImages assertion is required for proper TypeScript compilation.
components/hero.tsx (6)
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/authentication/sign-in.tsx:77-79
Timestamp: 2025-07-15T16:12:11.925Z
Learning: In demo and example code, non-functional links using href="#" are acceptable and don't need to be replaced with actual routes or functionality. Demo components are meant to showcase UI patterns and interactions, not production functionality.
Learnt from: SameerJS6
PR: #25
File: public/r/edit-profile.json:30-31
Timestamp: 2025-07-15T19:03:01.759Z
Learning: In the SameerJS6/revola project, demo and example code does not need production-level optimizations such as memory leak fixes (like revoking object URLs on unmount). Demo components are meant to showcase UI patterns and interactions, not production functionality, so performance optimizations and cleanup code are not necessary.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/management/invite-members.tsx:112-112
Timestamp: 2025-07-15T16:47:02.051Z
Learning: In demo and example code, hardcoded URLs (such as magic links, referral links, or API endpoints) are acceptable and don't need to be made dynamic or configurable. Demo components are meant to showcase UI patterns and interactions, not production functionality.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/user-profile/edit-profile.tsx:26-44
Timestamp: 2025-07-15T16:29:48.780Z
Learning: In demo and example code, hardcoded initial data (such as initial images, form values, or mock data) is acceptable and doesn't need to be made configurable through props. Demo components are meant to showcase UI patterns and interactions, not production functionality.
components/component-preview.tsx (3)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui-esm/checkout-esm.tsx:95-95
Timestamp: 2025-07-15T16:50:43.602Z
Learning: In the SameerJS6/revola project, when using explicit ES module imports with .js extensions (like "react-payment-inputs/lib/images/index.js"), type assertions may be necessary to bridge type mismatches caused by the ES module workaround. This is specifically used to fix ERR_UNSUPPORTED_DIR_IMPORT errors from rehype-component.ts and the as unknown as CardImages assertion is required for proper TypeScript compilation.
lib/colors.ts (1)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
components/ui/tabs.tsx (3)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui-esm/checkout-esm.tsx:95-95
Timestamp: 2025-07-15T16:50:43.602Z
Learning: In the SameerJS6/revola project, when using explicit ES module imports with .js extensions (like "react-payment-inputs/lib/images/index.js"), type assertions may be necessary to bridge type mismatches caused by the ES module workaround. This is specifically used to fix ERR_UNSUPPORTED_DIR_IMPORT errors from rehype-component.ts and the as unknown as CardImages assertion is required for proper TypeScript compilation.
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
registry/registry-colors.ts (1)
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
components/code-block.tsx (2)
Learnt from: SameerJS6
PR: #25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
Learnt from: SameerJS6
PR: #28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like DrawerType to ResponsiveDialogProps is considered minor since it doesn't affect component functionality or behavior, only the type import names.
🧬 Code Graph Analysis (11)
app/iphone-preview/[component]/page.tsx (3)
components/registry.ts (2)
RegistryKeys(59-62)Index(64-681)components/special-registry.ts (3)
SpecialRegistryKeys(36-36)isSpecialComponent(36-36)SpecialIndex(36-36)app/iphone-preview/layout.tsx (1)
MobilePreviewLayout(9-22)
components/mobile-preview.tsx (3)
components/registry.ts (1)
RegistryKeys(59-62)components/special-registry.ts (1)
SpecialRegistryKeys(36-36)lib/mobile-preview.ts (1)
generateMobilePreviewLink(10-20)
components/ui/separator.tsx (1)
lib/utils.ts (1)
cn(4-6)
lib/mobile-preview.ts (2)
components/registry.ts (2)
RegistryKeys(59-62)Index(64-681)components/special-registry.ts (2)
SpecialRegistryKeys(36-36)isSpecialComponent(36-36)
registry/revola/revola.tsx (1)
registry/revola/examples/vaul/default/controlled-demo.tsx (1)
VaulControlledDemo(16-104)
components/ui/scroll-area.tsx (1)
lib/utils.ts (1)
cn(4-6)
lib/code-highlight.ts (1)
lib/rehype-component.ts (1)
rehypeComponent(15-72)
components/component-preview.tsx (1)
components/mobile-preview.tsx (1)
MobilePreview(29-127)
lib/colors.ts (1)
registry/registry-colors.ts (1)
colors(1-1755)
components/ui/tabs.tsx (1)
lib/utils.ts (1)
cn(4-6)
components/code-block.tsx (4)
lib/code-highlight.ts (1)
highlight(70-70)lib/utils.ts (1)
cn(4-6)components/ui/scroll-area.tsx (2)
ScrollArea(41-41)ScrollBar(41-41)components/copy-button.tsx (1)
CopyButton(12-42)
🪛 Biome (2.1.2)
registry/cmdk/responsive-command.tsx
[error] 92-92: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
🔇 Additional comments (40)
registry/revola/revola.tsx (1)
48-48: LGTM! Hook export enables external usage.The export of
useResponsiveDialogallows other components to access the ResponsiveDialog context, which is consistent with the hook's usage pattern throughout this file.registry/cmdk/responsive-command.tsx (2)
14-14: LGTM! Import added for context access.The import of
useResponsiveDialogenables the component to access ResponsiveDialog context for responsive styling.
103-108: Approve responsive styling logic with caveat.The conditional max-height styling based on dialog context is well-implemented, providing appropriate heights for different dialog configurations.
Note: This styling logic will work correctly once the conditional hook usage issue above is resolved.
hooks/use-copy-button.ts (1)
5-28: LGTM! Excellent hook implementation with proper cleanup.This hook demonstrates several React best practices:
- Uses
useRefto maintain stable callback reference- Proper cleanup of timeouts in
useEffect- Efficient
useCallbackusage to prevent unnecessary rerenders- Clear TypeScript types with tuple return
registry/registry-colors.ts (2)
1-1755: LGTM! Comprehensive and well-structured color registry.This is an excellent implementation of a color system with several strong points:
- Consistent structure: All color families follow the same scale pattern (50-950)
- Multiple formats: Each color provides hex, rgb, hsl, and oklch values
- Template-based theming: The
colorMappinguses{{base}}placeholders for flexible theme generation- Comprehensive coverage: Includes all standard color families plus semantic colors
The size of this file is appropriate given its role as a comprehensive color registry.
1757-1810: Excellent use of template strings for theme flexibility.The
colorMappingdesign with{{base}}placeholders is clever and allows for dynamic color theme generation. The distinction between light and dark themes with appropriate contrast ratios shows good UX consideration.lib/colors.ts (2)
5-21: LGTM! Well-defined schemas with clear structure.The Zod schemas provide excellent runtime validation and clear TypeScript types. The structure properly models the color data hierarchy.
73-84: LGTM! Proper luminance calculation for contrast determination.The
getForegroundFromBackgroundfunction correctly implements the WCAG luminance calculation using the sRGB to linear RGB conversion formula. The 0.179 threshold is appropriate for determining black vs white text contrast.app/(docs)/layout.tsx (1)
20-20: LGTM!The GitHub URL integration is correctly implemented and points to the appropriate repository.
content/docs/meta.json (1)
16-16: LGTM!The new documentation entry is correctly placed in the Examples section and follows the established naming convention.
package.json (2)
3-3: LGTM!The minor version bump is appropriate for adding the new command menu feature.
30-30: LGTM!The new dependencies are well-chosen for the enhanced UI functionality:
@radix-ui/react-separatorfor UI componentshast-util-to-jsx-runtimefor code renderingshikifor syntax highlightingAll are at stable versions appropriate for the features being added.
Also applies to: 45-45, 59-59
next.config.mjs (1)
11-11: LGTM!Correctly configures shiki as an external package, which is necessary for proper server-side rendering of syntax-highlighted code blocks.
tailwind.config.ts (2)
3-3: LGTM!Correctly imports the plugin utility needed for the custom Tailwind plugin.
114-128: Excellent cross-browser scrollbar hiding implementation!The
.no-scrollbarutility provides comprehensive browser support:
- IE/Edge:
-ms-overflow-style: none- Firefox:
scrollbar-width: none- Webkit:
::-webkit-scrollbar { display: none }The plugin implementation follows Tailwind best practices and will work consistently across all major browsers.
components/hero.tsx (1)
125-125: LGTM! Clean API simplification.The refactoring to pass a
nameprop directly instead of generating the preview link externally is a good improvement. It centralizes the link generation logic within theMobilePreviewcomponent and simplifies the usage pattern.lib/mobile-preview.ts (1)
10-17: LGTM! Proper handling of both registry types.The function correctly expands support for both standard and special registry components. The existence check properly validates against both registries before generating the preview link.
components/mobile-preview.tsx (1)
25-29: LGTM! Good API improvement.The refactoring to accept a
nameprop and internally generate the preview link is a clean improvement that centralizes the link generation logic within the component.components/copy-button.tsx (1)
12-42: LGTM! Well-implemented copy button component.The component is well-structured with proper TypeScript typing, accessibility support, and clean state management. The visual feedback with icon transitions provides good UX.
components/ui/separator.tsx (1)
1-32: LGTM! Well-implemented separator component following shadcn/ui patterns.The component implementation is solid with proper TypeScript typing, ref forwarding, and conditional styling logic. The use of React.forwardRef with proper type constraints and the cn utility for class merging aligns well with the established patterns.
components/ui/tabs.tsx (2)
1-7: LGTM! Clean migration to @base-ui-components.The import change and consistent semicolon additions look good.
25-42: Verify ref‐type consistency for Tabs primitives
EnsureTabsList,TabsTrigger, andTabsContentuse the correct ref types as defined by the@base-ui-components/react/tabspackage:
- components/ui/tabs.tsx
- TabsList (lines 8–16): currently uses
React.ElementRef<typeof TabsPrimitive.List>- TabsTrigger (lines 25–33): uses
React.ComponentRef<typeof TabsPrimitive.Tab>- TabsContent (lines 35–43): uses
React.ComponentRef<typeof TabsPrimitive.Panel>Please confirm in the
@base-ui-components/react/tabstype definitions or docs whetherListshould indeed useElementRef(e.g. an HTML element) or if it exports a custom component type requiringComponentRef. AdjustTabsListaccordingly.components/ui/scroll-area.tsx (2)
4-4: LGTM! Clean migration to @base-ui-components.The import change follows the same pattern as the tabs component migration.
24-39: Excellent UX improvements with opacity transitions.The enhanced className with opacity and transition utilities provides smooth scrollbar visibility handling. The positioning fix with
!-bottom-pxfor horizontal scrollbars and the sophisticated transition timing (delay-300 for hiding, delay-0 for showing) creates a polished user experience.components/special-registry.ts (3)
5-6: LGTM! Clean type-safe registry key definition.The const assertion and mapped type approach provides excellent type safety for the special registry keys.
28-34: LGTM! Clean utility functions with proper type safety.The type guard function and getter function are well-implemented with proper TypeScript typing and clear purpose.
18-26: Component Import Path Not Found – Please VerifyI couldn’t locate the
@/registry/cmdk/examples/shadcn-command-menu-rootfile or export in the codebase. Please ensure that:
- The
registry/cmdk/examplesdirectory exists under the project root.- A file named
shadcn-command-menu-root.tsx(or.ts) lives there.- It exports a React component as the default export.
components/code-block.tsx (2)
11-17: LGTM! Well-defined TypeScript interfaces.The props interface is clear and provides good flexibility with optional initial and preHighlighted content.
32-51: LGTM! Proper async handling with cleanup.The useLayoutEffect implementation correctly handles async highlighting with proper cleanup using the isMounted flag to prevent memory leaks. The early return for preHighlighted content is appropriate.
components/component-preview.tsx (8)
4-4: LGTM! UI library migration to @base-ui-components.The import change from Radix UI to
@base-ui-components/react/tabsis consistent with the broader UI library migration in this PR.
51-51: LGTM! Correct migration to namespaced Tabs API.The change from
<Tabsto<Tabs.Rootfollows the new namespaced API pattern while preserving all functionality.
54-54: LGTM! Consistent with the new Tabs API.The migration from
<TabsListto<Tabs.Listmaintains all styling and functionality.
55-66: LGTM! Consistent tab component migration.All tab components correctly migrated from
<TabsTriggerto<Tabs.Tabwhile preserving styling and functionality. Thedata-[state=active]selectors should continue to work with the new API.
67-67: LGTM! Enhanced UX with active tab indicator.The new
Tabs.Indicatorcomponent adds a visual indicator for the active tab using CSS custom properties for dynamic positioning. The implementation correctly uses absolute positioning, transitions, and proper z-indexing.
68-68: LGTM! Matching closing tag.Correctly updated to match the
<Tabs.List>opening tag.
71-74: LGTM! Panel migration and MobilePreview simplification.The migration from
<TabsContentto<Tabs.Panelis correct. The simplifiedMobilePreviewusage (just passingnameinstead of generating preview link) aligns with the component now handling link generation internally.
93-101: LGTM! Consistent completion of Tabs API migration.All remaining tab components correctly migrated to the new namespaced API while preserving functionality and styling.
lib/code-highlight.ts (3)
1-4: LGTM! Well-chosen imports for code highlighting.The imports are appropriate for the functionality:
- JSX runtime components for programmatic JSX creation
hast-util-to-jsx-runtimefor AST to JSX conversionshiki/bundle/webfor optimized web-based syntax highlighting
6-21: LGTM! Well-implemented syntax highlighting function.The
highlightfunction correctly:
- Uses async/await for the Shiki API
- Configures appropriate GitHub themes for light/dark modes
- Converts HAST to JSX runtime elements properly
- Uses proper TypeScript typing with reasonable type assertion
62-68: LGTM! Correct registry path conversion.The
convertRegistryPathsfunction properly converts registry import paths to standard local paths. The regex patterns correctly handle all the expected registry path formats and align with similar logic inlib/rehype-component.ts.
…installation instructions
…proved flexibility
…vigation and color selection
…d-out code and simplifying item rendering
…ort path for ShadcnCommandMenu component
…ditional hooks for enhanced functionality
…siveDialog hook and updating media query listener
…ls and dependencies for enhanced command menu integration
…onent preview and code display functionality
…d update shadcn-command-menu example for improved component display
There was a problem hiding this comment.
Actionable comments posted: 7
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/shadcn-command-menu-issue.pngis excluded by!**/*.png
📒 Files selected for processing (17)
app/(docs)/docs/[[...slug]]/page.tsx(2 hunks)app/iphone-preview/[component]/page.tsx(2 hunks)components/component-preview-custom-highlight.tsx(1 hunks)components/special-registry.ts(1 hunks)content/docs/command.mdx(6 hunks)content/docs/getting-started.mdx(5 hunks)content/docs/roadmap.mdx(1 hunks)content/docs/shadcn-command-menu.mdx(1 hunks)hooks/use-media-query.tsx(1 hunks)lib/source.ts(2 hunks)public/r/responsive-command.json(1 hunks)public/r/revola.json(1 hunks)public/r/shadcn-command-menu.json(1 hunks)registry.json(1 hunks)registry/cmdk/examples/shadcn-command-menu-wrapper.tsx(1 hunks)registry/cmdk/examples/shadcn-command-menu.tsx(1 hunks)registry/revola/revola.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (3)
- registry/cmdk/examples/shadcn-command-menu-wrapper.tsx
- app/(docs)/docs/[[...slug]]/page.tsx
- components/special-registry.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- registry/revola/revola.tsx
- app/iphone-preview/[component]/page.tsx
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: SameerJS6
PR: SameerJS6/revola#28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like `DrawerType` to `ResponsiveDialogProps` is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Learnt from: SameerJS6
PR: SameerJS6/revola#25
File: registry/revola/examples/origin-ui/forms/authentication/otp-code.tsx:36-36
Timestamp: 2025-07-15T16:44:07.975Z
Learning: SameerJS6 uses numeric separators (underscores) in JavaScript numbers for readability, such as `1_00` for 100 milliseconds. This is valid ES2021 syntax and is their preferred coding style.
📚 Learning: sameerjs6 distinguishes between functionally breaking changes and type-only breaking changes when de...
Learnt from: SameerJS6
PR: SameerJS6/revola#28
File: CHANGELOG.md:3-9
Timestamp: 2025-07-27T17:27:54.333Z
Learning: SameerJS6 distinguishes between functionally breaking changes and type-only breaking changes when determining version bumps. For the Revola project, renaming TypeScript types like `DrawerType` to `ResponsiveDialogProps` is considered minor since it doesn't affect component functionality or behavior, only the type import names.
Applied to files:
hooks/use-media-query.tsxpublic/r/revola.jsonlib/source.tsregistry/cmdk/examples/shadcn-command-menu.tsxcontent/docs/command.mdxcomponents/component-preview-custom-highlight.tsxpublic/r/shadcn-command-menu.jsoncontent/docs/getting-started.mdxpublic/r/responsive-command.jsoncontent/docs/roadmap.mdxregistry.json
📚 Learning: in the sameerjs6/revola project, when using shadcn's registry system, the `registrydependencies` arr...
Learnt from: SameerJS6
PR: SameerJS6/revola#25
File: public/r/sticky-header.json:7-10
Timestamp: 2025-07-15T19:10:16.425Z
Learning: In the SameerJS6/revola project, when using shadcn's registry system, the `registryDependencies` array must contain full URLs (not local file references) for downloading internal dependencies. External URLs like `https://revola.sameerjs.com/r/revola.json` are required for the shadcn registry to properly resolve and download dependencies.
Applied to files:
public/r/revola.jsonpublic/r/shadcn-command-menu.jsonpublic/r/responsive-command.jsonregistry.json
📚 Learning: in the sameerjs6/revola project using lucide-react version ^0.477.0, icons are exported with the "ic...
Learnt from: SameerJS6
PR: SameerJS6/revola#28
File: public/r/search-command.json:0-0
Timestamp: 2025-07-27T17:23:12.505Z
Learning: In the SameerJS6/revola project using lucide-react version ^0.477.0, icons are exported with the "Icon" suffix (e.g., SearchIcon, ArrowUpRightIcon, FolderPlusIcon, FileInputIcon, CircleFadingPlusIcon). These icon names are valid and used throughout the codebase successfully.
Applied to files:
public/r/revola.jsoncontent/docs/shadcn-command-menu.mdxregistry/cmdk/examples/shadcn-command-menu.tsxcontent/docs/command.mdxpublic/r/shadcn-command-menu.jsoncontent/docs/getting-started.mdxpublic/r/responsive-command.jsonregistry.json
📚 Learning: the project uses a two-variant system for components: esm versions for preview/showcase purposes (wi...
Learnt from: SameerJS6
PR: SameerJS6/revola#25
File: registry/revola/examples/origin-ui/forms/payment/checkout.tsx:5-5
Timestamp: 2025-07-15T16:27:38.971Z
Learning: The project uses a two-variant system for components: ESM versions for preview/showcase purposes (with explicit ESM imports) and normal versions for actual download (with simpler import paths). This design choice allows for different use cases while maintaining code consistency.
Applied to files:
public/r/revola.jsoncontent/docs/shadcn-command-menu.mdxcontent/docs/command.mdxcomponents/component-preview-custom-highlight.tsxpublic/r/shadcn-command-menu.jsonpublic/r/responsive-command.jsonregistry.json
📚 Learning: in the sameerjs6/revola project, demo and example code does not need production-level optimizations ...
Learnt from: SameerJS6
PR: SameerJS6/revola#25
File: public/r/edit-profile.json:30-31
Timestamp: 2025-07-15T19:03:01.759Z
Learning: In the SameerJS6/revola project, demo and example code does not need production-level optimizations such as memory leak fixes (like revoking object URLs on unmount). Demo components are meant to showcase UI patterns and interactions, not production functionality, so performance optimizations and cleanup code are not necessary.
Applied to files:
public/r/revola.jsoncontent/docs/command.mdxcontent/docs/roadmap.mdx
📚 Learning: in the sameerjs6/revola project, when using explicit es module imports with `.js` extensions (like `...
Learnt from: SameerJS6
PR: SameerJS6/revola#25
File: registry/revola/examples/origin-ui-esm/checkout-esm.tsx:95-95
Timestamp: 2025-07-15T16:50:43.602Z
Learning: In the SameerJS6/revola project, when using explicit ES module imports with `.js` extensions (like `"react-payment-inputs/lib/images/index.js"`), type assertions may be necessary to bridge type mismatches caused by the ES module workaround. This is specifically used to fix `ERR_UNSUPPORTED_DIR_IMPORT` errors from `rehype-component.ts` and the `as unknown as CardImages` assertion is required for proper TypeScript compilation.
Applied to files:
public/r/revola.jsonpublic/r/shadcn-command-menu.jsonpublic/r/responsive-command.json
🧬 Code Graph Analysis (1)
content/docs/shadcn-command-menu.mdx (2)
registry/cmdk/examples/default-demo.tsx (1)
CommandDemo(14-55)app/(docs)/layout.tsx (1)
DocLayout(9-25)
🔇 Additional comments (24)
lib/source.ts (1)
8-20: LGTM! Good TypeScript API improvementsThe addition of the
Treetype alias and conversion to named exports improves the module's API and provides better TypeScript support for consumers.public/r/revola.json (2)
15-15: LGTM! Good API enhancementExporting the
useResponsiveDialoghook makes it available for external use, which aligns with the command menu implementation that needs access to dialog context.
20-20: Media query hook bug also present in registryThe same critical bug identified in the source file is present in this registry content. Once the bug in
hooks/use-media-query.tsxis fixed, this registry entry will need to be updated as well.After fixing the media query hook, regenerate this registry file to include the corrected implementation.
content/docs/roadmap.mdx (3)
11-11: LGTM! Better readabilityThe punctuation change improves the sentence flow and readability.
16-18: LGTM! Accurate progress trackingThe updated "In Progress" items correctly reflect the current development focus on command component enhancements.
25-29: LGTM! Good project transparencyThe new "Finished" section provides clear visibility into completed milestones, including the shadcn command menu integration that this PR delivers.
content/docs/shadcn-command-menu.mdx (1)
1-93: LGTM! Comprehensive and well-structured documentationThis documentation provides excellent coverage of the new shadcn command menu component, including:
- Clear installation instructions
- Step-by-step usage guide
- Proper integration examples
- Honest disclosure of known issues
The structure follows good documentation practices and will help users successfully implement the component.
public/r/responsive-command.json (1)
17-17: LGTM! Excellent integration with responsive dialog context.The integration of
useResponsiveDialoghook inResponsiveCommandListis well-implemented with proper error handling. The try-catch block ensures graceful degradation when the hook context is unavailable, and the conditional max-height styling based ondirectionandonlyDialogprovides better responsive behavior.registry.json (1)
238-252: LGTM! Well-structured registry entry for the new command menu.The
shadcn-command-menuregistry entry is properly structured with appropriate dependencies and file references. The use of"registry:component"type distinguishes it as a special component, and the inclusion of both library files (colors.ts,source.ts) and utility hooks (use-is-mac.ts,use-mutation-observer.ts) provides a comprehensive component package.content/docs/getting-started.mdx (4)
120-121: LGTM! Correct event listener for media query changes.The change from
"resize"to"change"event is correct for listening to media query changes. Media queries fire"change"events when their match state changes, not"resize"events.
151-151: LGTM! Better naming with ResponsiveDialogProps.The rename from
DrawerTypetoResponsiveDialogPropsis more descriptive and accurately reflects that this type applies to the entire responsive dialog system, not just drawers.
185-185: LGTM! Exporting useResponsiveDialog enables wider usage.Exporting
useResponsiveDialogallows other components likeResponsiveCommandListto access the responsive dialog context, which is essential for the new command menu functionality.
326-332: LGTM! Improved mobile UX with reduced max-height.Reducing the max-height from
95%to65%for mobile variants provides better user experience by preventing the dialog from taking up too much screen space, leaving room for interaction with the underlying content.content/docs/command.mdx (4)
46-46: LGTM! Clear filename with extension.Adding the
.tsxextension to the filename makes it clearer what type of file this is for developers copying the code.
60-60: LGTM! Correct import addition.Adding the
useResponsiveDialogimport is necessary for the enhancedResponsiveCommandListfunctionality shown later in the code.
78-107: LGTM! Cleaner component structure.The refactor from
React.forwardRefto a functional component is cleaner since ref forwarding isn't needed here. The explicitshouldScaleBackground={false}prop improves the dialog behavior.
134-157: LGTM! Consistent responsive behavior integration.The
ResponsiveCommandListenhancement withuseResponsiveDialoghook matches the implementation in the actual component file. The try-catch error handling ensures graceful degradation when the context isn't available.components/component-preview-custom-highlight.tsx (5)
1-12: LGTM! Well-structured imports and type definitions.The imports are properly organized and the
ComponentDetailsPropstype is well-defined with appropriate constraints usingSpecialRegistryKeys.
21-38: LGTM! Excellent async data fetching and error handling.The component properly handles async code fetching and provides a clear fallback for missing registry entries. Using
React.createElementfor dynamic component rendering is the correct approach here.
42-61: LGTM! Proper integration with updated Tabs components.The implementation correctly uses the new
@base-ui-components/react/tabscomponents with appropriate styling and conditional rendering for thehideCodeprop.
62-84: LGTM! Well-implemented preview with loading states.The preview tab properly integrates
MobilePreview, usesReact.Suspensefor loading states, and implements flexible alignment options. The loading fallback provides good UX.
85-107: LGTM! Comprehensive code display with fallback.The code tab handles both successful code display using the new
CodeBlockcomponent and provides a helpful fallback with a link to report issues when code is unavailable.registry/cmdk/examples/shadcn-command-menu.tsx (1)
322-358: Well-implemented selection detection mechanism.The use of mutation observer to detect
aria-selectedchanges is a clever solution for tracking command item selection. The component is properly typed and follows React best practices.public/r/shadcn-command-menu.json (1)
1-42: Registry configuration looks well-structured.The registry configuration follows the proper schema and includes all necessary dependencies and files. The use of full URLs for registry dependencies aligns with the project's requirements as mentioned in the learnings.
…rs.ts for comprehensive color management
…d color definitions in registry-colors.ts for improved color management
…nd streamline clipboard copy functionality
…ith Tailwind CSS conventions
…h Tailwind CSS conventions
…vements, and breaking changes; update package.json version
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Chores
Documentation