Menu Component #31
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,14 +26,19 @@ export const componentConfig = { | |
| name: "card", | ||
| filePath: "packages/ui/Cards/Card.tsx", | ||
| }, | ||
|
|
||
| dialog: { | ||
| name: "dialog", | ||
| filePath: "packages/ui/Dialog/Dialog.tsx", | ||
| }, | ||
| menu: { | ||
| name: "menu", | ||
| filePath: "packages/ui/Menu/Menu.tsx", | ||
| }, | ||
| text: { | ||
| name: "text", | ||
| filePath: "packages/ui/Text/Text.tsx", | ||
| }, | ||
| }, | ||
| examples: { | ||
| "accordion-style-default": { | ||
|
|
@@ -134,6 +139,11 @@ export const componentConfig = { | |
| filePath: "preview/components/input-style-default.tsx", | ||
| preview: lazy(() => import("@/preview/components/input-style-default")), | ||
| }, | ||
| "menu-style-default": { | ||
| name: "menu-style-default", | ||
| filePath: "preview/components/menu-style-default.tsx", | ||
| preview: lazy(() => import("@/preview/components/menu-style-default")), | ||
| }, | ||
|
Comment on lines
+142
to
+146
Contributor
There was a problem hiding this comment. 💡 Codebase verification Found several name-path mismatches in component examples Several components have inconsistent name properties that don't match their file paths:
These mismatches could cause confusion and should be corrected to maintain consistency throughout the codebase. 🔗 Analysis chainLGTM! New menu example follows the established pattern. The configuration is correctly structured with proper lazy loading implementation. I noticed some examples might have incorrect name properties. Let's verify: 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Check for mismatches between example names and their file paths
# Extract examples with potential name mismatches
rg -A 2 'name: ".+?".*\n.*filePath: "preview/components/(.+?)\.tsx"' | \
grep -E 'name:|filePath:' | \
awk '{
if($1=="name:") name=substr($2,2,length($2)-3);
if($1=="filePath:") {
split($2,path,"/");
file=substr(path[3],1,length(path[3])-5);
if(name!=file) printf "Mismatch - Name: %s, File: %s\n",name,file;
}
}'
Length of output: 539 Script: #!/bin/bash
# Let's try a different approach using ripgrep's multiline mode
rg -U --multiline '^.*"name": "([^"]+)".*\n.*"filePath": "preview/components/([^"]+)\.tsx"' config/components.ts | \
while IFS= read -r line; do
name=$(echo "$line" | grep -o '"name": "[^"]*"' | cut -d'"' -f4)
file=$(echo "$line" | grep -o '"filePath": "[^"]*"' | cut -d'"' -f4 | awk -F'/' '{print $NF}' | sed 's/\.tsx$//')
if [ "$name" != "$file" ]; then
echo "Mismatch - Name: $name, File: $file"
fi
done
Length of output: 136 Script: #!/bin/bash
# Let's simplify and try a different approach
rg -A1 'name:' config/components.ts | \
grep -E '(name:|filePath:)' | \
sed 's/[",]//g' | \
sed 's/^ *//'
Length of output: 2736 |
||
| "textarea-style-default": { | ||
| name: "textarea-style-default", | ||
| filePath: "preview/components/textarea-style-default.tsx", | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,11 +22,12 @@ export const navConfig: INavigationConfig = { | |
| { title: "Badge", href: `${componentsRoute}/badge` }, | ||
| { title: "Button", href: `${componentsRoute}/button` }, | ||
| { title: "Card", href: `${componentsRoute}/card` }, | ||
| { title: "Dialog", href: `${componentsRoute}/dialog` }, | ||
| { title: "Input", href: `${componentsRoute}/input` }, | ||
| { title: "Menu", href: `${componentsRoute}/menu` }, | ||
| { title: "Tab", href: `${componentsRoute}/tab` }, | ||
| { title: "Textarea", href: `${componentsRoute}/textarea` }, | ||
| { title: "Text", href: `${componentsRoute}/text` }, | ||
| ], | ||
| }, | ||
| { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| --- | ||
| title: Menu | ||
| description: Show your users a list of actions they can take. 📋 | ||
| lastUpdated: 19 Oct, 2024 | ||
| links: | ||
| api_reference: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference | ||
| source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Menu/Menu.tsx | ||
| --- | ||
|
|
||
| <ComponentShowcase name="menu-style-default" /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| ## Installation | ||
|
|
||
| #### 1. Install dependencies: | ||
|
|
||
| ```sh | ||
| npm install @radix-ui/react-dropdown-menu | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| #### 2. Copy the code 👇 into your project: | ||
|
|
||
| <ComponentSource name="menu" /> | ||
|
|
||
| <br /> | ||
| <br /> | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Default | ||
|
|
||
| <ComponentShowcase name="menu-style-default" /> | ||
|
Comment on lines
+31
to
+35
Contributor
There was a problem hiding this comment. 🛠️ Refactor suggestion Enhance the examples section. Consider adding:
Would you like me to help generate additional example code and documentation for common use cases? |
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| services: | ||
| web: | ||
| image: devarifhossain/retroui:1.0.8 | ||
| container_name: retroui | ||
| expose: | ||
| - "3000" | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,6 +13,7 @@ | |
| "@radix-ui/react-accordion": "^1.2.1", | ||
| "@radix-ui/react-avatar": "^1.1.1", | ||
| "@radix-ui/react-dialog": "^1.1.2", | ||
| "@radix-ui/react-dropdown-menu": "^2.1.2", | ||
| "@radix-ui/react-visually-hidden": "^1.1.0", | ||
| "class-variance-authority": "^0.7.0", | ||
| "clsx": "^2.1.1", | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"; | |||||
| import { cva, VariantProps } from "class-variance-authority"; | ||||||
| import React, { ButtonHTMLAttributes } from "react"; | ||||||
|
|
||||||
| const buttonVariants = cva("font-head transition-all outline-none", { | ||||||
|
Contributor
There was a problem hiding this comment. 🛠️ Refactor suggestion Ensure focus visibility for accessibility. While removing the default outline, make sure to maintain a visible focus indicator for keyboard navigation. Consider adding a custom focus style using -const buttonVariants = cva("font-head transition-all outline-none", {
+const buttonVariants = cva("font-head transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2", {📝 Committable suggestion
Suggested change
|
||||||
| variants: { | ||||||
| variant: { | ||||||
| default: | ||||||
|
|
@@ -39,6 +39,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>( | |||||
| forwardedRef | ||||||
| ) => ( | ||||||
| <button | ||||||
| ref={forwardedRef} | ||||||
| className={cn(buttonVariants({ variant, size }), className)} | ||||||
| {...props} | ||||||
| > | ||||||
|
|
||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,6 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import { HTMLAttributes } from "react"; | ||
| import { Text } from "../Text"; | ||
|
|
||
| interface ICardProps extends HTMLAttributes<HTMLDivElement> { | ||
| className?: string; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| "use client"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
| import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; | ||
| import React, { ComponentPropsWithoutRef, HTMLAttributes } from "react"; | ||
|
|
||
| const Menu = DropdownMenu.Root; | ||
| const Trigger = DropdownMenu.Trigger; | ||
|
|
||
| interface IMenuContent | ||
| extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {} | ||
|
|
||
| const Content = ({ className, ...props }: IMenuContent) => ( | ||
| <DropdownMenu.Portal> | ||
| <DropdownMenu.Content | ||
| side="bottom" | ||
| align="start" | ||
| className={cn( | ||
| "bg-white border-2 border-black shadow-md absolute top-2 min-w-20", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| </DropdownMenu.Portal> | ||
| ); | ||
|
|
||
| const MenuItem = React.forwardRef< | ||
| HTMLDivElement, | ||
| ComponentPropsWithoutRef<typeof DropdownMenu.Item> | ||
| >(({ className, ...props }, ref) => ( | ||
| <DropdownMenu.Item | ||
| ref={ref} | ||
| className={cn( | ||
| "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary-400 hover:text-white focus:bg-primary-400 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| MenuItem.displayName = "MenuItem"; | ||
|
|
||
| const MenuComponent = Object.assign(Menu, { | ||
| Trigger, | ||
| Content, | ||
| Item: MenuItem, | ||
| }); | ||
|
|
||
| export { MenuComponent as Menu }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./Menu"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,3 +8,4 @@ export * from "./Avatars"; | |
| export * from "./Badges"; | ||
| export * from "./Tabs"; | ||
| export * from "./Dialog"; | ||
| export * from "./Menu"; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Consider automating version management.
Instead of hardcoding the version, consider deriving it from the GitHub release tag to prevent version mismatches and reduce manual updates.
📝 Committable suggestion