feat(registry) add menubar component #193
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughA new 8-bit styled menubar UI component suite was introduced, built on Radix UI primitives and styled with a retro theme. The menubar and its subcomponents were added to the codebase, documented with a new demo/docs page, included in navigation and registry files, and supported by a new metadata asset. The relevant Radix UI dependency was added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MenubarPage (Docs)
participant Menubar (UI Component)
participant RadixMenubar
User->>MenubarPage (Docs): Visit /docs/components/menubar
MenubarPage (Docs)->>Menubar (UI Component): Render Menubar demo
Menubar (UI Component)->>RadixMenubar: Use Radix primitives for UI/logic
User->>Menubar (UI Component): Interact with menu (open, select, etc.)
Menubar (UI Component)->>RadixMenubar: Forward events, manage state
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
components/ui/8bit/menubar.tsxOops! Something went wrong! :( ESLint: 9.26.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✨ Finishing Touches
🪧 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 (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/assets/8bitcn-menubar-light.pngis excluded by!**/*.png
📒 Files selected for processing (7)
app/docs/components/menubar/page.tsx(1 hunks)components/ui/8bit/menubar.tsx(1 hunks)config/nav-items.ts(1 hunks)lib/metadata.ts(1 hunks)package.json(1 hunks)public/r/8bit-menubar.json(1 hunks)registry.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
app/docs/components/menubar/page.tsx (5)
lib/metadata.ts (1)
menubarMetaData(53-53)app/docs/components/copy-command-button.tsx (1)
CopyCommandButton(13-27)app/docs/components/open-in-v0-button.tsx (1)
OpenInV0Button(4-41)app/docs/components/installation-commands.tsx (1)
InstallationCommands(14-117)app/docs/components/code-snippet.tsx (1)
CodeSnippet(9-44)
components/ui/8bit/menubar.tsx (2)
config/fonts.ts (1)
pressStart(3-6)lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (18)
package.json (1)
24-24: New dependency added correctly.The Radix UI menubar dependency has been added with the appropriate version using caret notation, consistent with other Radix UI dependencies in the project.
lib/metadata.ts (1)
53-53: LGTM: Metadata path added correctly.The menubar metadata path follows the consistent naming pattern and structure used for other component metadata in the file.
config/nav-items.ts (1)
123-127: Navigation entry properly structured.The menubar component navigation entry follows the established pattern with the correct properties (title, URL, and new flag). Placement between Label and Pagination is appropriate.
registry.json (1)
426-439: Component registered correctly in registry.The 8bit-menubar component entry follows the same structure as other components in the registry with appropriate name, type, title, description, and file paths.
app/docs/components/menubar/page.tsx (4)
26-32: Metadata configured properly.The metadata is well-structured with appropriate title, description, and OpenGraph image reference to the menubar metadata.
60-148: Complete menubar implementation with a variety of features.The example demonstrates a comprehensive menubar implementation showcasing various features:
- Multiple menu sections (File, Edit, View, Profiles)
- Keyboard shortcuts
- Nested submenus
- Checkbox items
- Radio group items
- Disabled states
- Separators
This provides users with a thorough understanding of the component's capabilities.
156-158: Installation command references correctly.The installation commands component correctly references the menubar component URL.
164-172: Usage examples are clear and concise.The code snippets provide straightforward examples of how to import and implement the menubar component, which will be helpful for users integrating this into their applications.
Also applies to: 174-188
components/ui/8bit/menubar.tsx (9)
1-9: Clean imports and client directive setup.The component correctly uses the "use client" directive for Next.js client components and imports all necessary dependencies.
11-26: Good font configuration with variants system.The Press_Start_2P font is properly imported and configured, with a well-designed variant system using class-variance-authority. The default retro font styling matches the 8-bit theme goal.
28-56: Well-structured primitive wrapper components.These wrapper components follow React best practices for encapsulating Radix UI primitives. The
data-slotattribute on MenubarSub provides good component identification for potential styling hooks.
58-83: Excellent 8-bit styling technique for the menubar container.The component effectively uses border styling and nested elements to create the 8-bit aesthetic. The use of
aria-hidden="true"on the decorative border element shows good accessibility awareness.
85-98: Well-implemented trigger components with focus and state handling.Both MenubarTrigger and MenubarSubTrigger properly implement Radix UI's state attributes for styling different states (focus, open, etc.). The SubTrigger's custom 8-bit chevron icon is a nice touch that maintains the theme.
Also applies to: 100-137
139-178: Thorough styling and animation for dropdown content.The content components include comprehensive animation properties for different states and positions. Good use of z-index and Portal to ensure proper rendering above other content.
180-316: Well-implemented menu items with proper accessibility features.MenubarItem, MenubarCheckboxItem, and MenubarRadioItem all handle their respective states properly. The custom 8-bit checkbox icon is a creative touch that maintains the theme consistency.
318-346: Clean implementation of supporting components.Both MenubarLabel and MenubarSeparator are straightforward and well-implemented, with proper styling and ref forwarding.
364-381: Comprehensive exports for all component variants.All component variants are properly exported, making the component library easy to use with named imports.
public/r/8bit-menubar.json (1)
1-16: Well-structured component registry entry.The registry file follows the shadcn UI schema correctly and provides all necessary metadata for the component. The inclusion of the full component code ensures the registry is self-contained.
| <CopyCommandButton | ||
| copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-button.json`} | ||
| command={"pnpm dlx shadcn@canary add 8bit-button"} | ||
| /> |
There was a problem hiding this comment.
Incorrect component referenced in copy command.
The copy command button is referencing "8bit-button" instead of "8bit-menubar", which doesn't match the component being documented on this page.
- <CopyCommandButton
- copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-button.json`}
- command={"pnpm dlx shadcn@canary add 8bit-button"}
- />
+ <CopyCommandButton
+ copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-menubar.json`}
+ command={"pnpm dlx shadcn@canary add 8bit-menubar"}
+ />📝 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.
| <CopyCommandButton | |
| copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-button.json`} | |
| command={"pnpm dlx shadcn@canary add 8bit-button"} | |
| /> | |
| <CopyCommandButton | |
| copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-menubar.json`} | |
| command={"pnpm dlx shadcn@canary add 8bit-menubar"} | |
| /> |
🤖 Prompt for AI Agents
In app/docs/components/menubar/page.tsx around lines 39 to 42, the
CopyCommandButton's copyCommand and command props incorrectly reference
"8bit-button" instead of "8bit-menubar". Update both props to use "8bit-menubar"
to correctly match the component documented on this page.
| const MenubarShortcut = ({ | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLSpanElement>) => { | ||
| return ( | ||
| <span | ||
| className={cn( | ||
| "ml-auto text-xs tracking-widest text-muted-foreground", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } | ||
| MenubarShortcut.displayname = "MenubarShortcut" |
There was a problem hiding this comment.
Fix property name typo in MenubarShortcut.
There's a typo in the component's display name property.
-MenubarShortcut.displayname = "MenubarShortcut"
+MenubarShortcut.displayName = "MenubarShortcut"The property should be displayName with a capital 'N' to follow React's naming convention.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const MenubarShortcut = ({ | |
| className, | |
| ...props | |
| }: React.HTMLAttributes<HTMLSpanElement>) => { | |
| return ( | |
| <span | |
| className={cn( | |
| "ml-auto text-xs tracking-widest text-muted-foreground", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| ) | |
| } | |
| MenubarShortcut.displayname = "MenubarShortcut" | |
| const MenubarShortcut = ({ | |
| className, | |
| ...props | |
| }: React.HTMLAttributes<HTMLSpanElement>) => { | |
| return ( | |
| <span | |
| className={cn( | |
| "ml-auto text-xs tracking-widest text-muted-foreground", | |
| className | |
| )} | |
| {...props} | |
| /> | |
| ) | |
| } | |
| MenubarShortcut.displayName = "MenubarShortcut" |
🤖 Prompt for AI Agents
In components/ui/8bit/menubar.tsx around lines 348 to 362, the component's
display name property is incorrectly spelled as displayname. Change it to
displayName with a capital 'N' to follow React's naming convention.
Summary by CodeRabbit
New Features
Chores