Feat dialog component#57
Open
abdirahmanmahamoud wants to merge 3 commits into
Open
Conversation
|
@abdirahmanmahamoud is attempting to deploy a commit to the OrcDev Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
📝 WalkthroughWalkthroughA new Warcraft-themed Dialog component suite was added, built on Radix UI, with supporting documentation, registry entry, and navigation updates across the documentation structure. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip You can disable poems in the walkthrough.Disable the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/ui/warcraftcn/dialog.tsx`:
- Around line 36-47: The overlay is receiving the same spread props as the
content which can duplicate IDs/handlers and send unsupported props to the wrong
element; update the component so DialogPrimitive.Overlay does not receive the
full {...props} meant for DialogPrimitive.Content—destructure the incoming props
(e.g., ({ className, ...contentProps }) or split into overlayProps and
contentProps) and spread only overlay-specific attributes onto
DialogPrimitive.Overlay and only contentProps (plus className) onto
DialogPrimitive.Content; reference DialogPrimitive.Overlay,
DialogPrimitive.Content, className and props to find and fix the incorrect
spread.
In `@registry.json`:
- Around line 492-493: The registry entry currently lists only
"@radix-ui/react-dialog" in the "dependencies" array but the component
components/ui/warcraftcn/dialog.tsx imports XIcon from "lucide-react"; update
the dialog registry entry by adding "lucide-react" to its "dependencies" array
so consumers will install it alongside `@radix-ui/react-dialog` and avoid
missing-import installation failures.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c1459c31-a6e9-47de-a152-f0afb51dbcd7
📒 Files selected for processing (5)
components/ui/warcraftcn/dialog.tsxcontent/docs/components/dialog.mdxcontent/docs/components/index.mdxcontent/docs/components/meta.jsonregistry.json
Comment on lines
+36
to
+47
| <DialogPrimitive.Overlay | ||
| data-slot="dialog-overlay" | ||
| className="fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" | ||
| {...props} | ||
| /> | ||
| <DialogPrimitive.Content | ||
| data-slot="dialog-content" | ||
| className={cn( | ||
| "fantasy fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-solid wc-dropdown-border [border-image-repeat:stretch] border-[16px] [border-image-slice:16_fill] bg-amber-950/95 p-6 text-amber-100 shadow-2xl duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-[0.98] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[52%]", | ||
| className | ||
| )} | ||
| {...props} |
Contributor
There was a problem hiding this comment.
Do not spread DialogContent props onto the overlay.
DialogPrimitive.Content props are also being applied to DialogPrimitive.Overlay on Line 39. This can duplicate IDs/event handlers and pass unsupported props to the wrong node.
🔧 Proposed fix
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className="fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
- {...props}
/>
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"fantasy fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-solid wc-dropdown-border [border-image-repeat:stretch] border-[16px] [border-image-slice:16_fill] bg-amber-950/95 p-6 text-amber-100 shadow-2xl duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-[0.98] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[52%]",
className
)}
{...props}
>📝 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.
Suggested change
| <DialogPrimitive.Overlay | |
| data-slot="dialog-overlay" | |
| className="fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" | |
| {...props} | |
| /> | |
| <DialogPrimitive.Content | |
| data-slot="dialog-content" | |
| className={cn( | |
| "fantasy fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-solid wc-dropdown-border [border-image-repeat:stretch] border-[16px] [border-image-slice:16_fill] bg-amber-950/95 p-6 text-amber-100 shadow-2xl duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-[0.98] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[52%]", | |
| className | |
| )} | |
| {...props} | |
| <DialogPrimitive.Overlay | |
| data-slot="dialog-overlay" | |
| className="fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" | |
| /> | |
| <DialogPrimitive.Content | |
| data-slot="dialog-content" | |
| className={cn( | |
| "fantasy fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-solid wc-dropdown-border [border-image-repeat:stretch] border-[16px] [border-image-slice:16_fill] bg-amber-950/95 p-6 text-amber-100 shadow-2xl duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-[0.98] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[52%]", | |
| className | |
| )} | |
| {...props} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/ui/warcraftcn/dialog.tsx` around lines 36 - 47, The overlay is
receiving the same spread props as the content which can duplicate IDs/handlers
and send unsupported props to the wrong element; update the component so
DialogPrimitive.Overlay does not receive the full {...props} meant for
DialogPrimitive.Content—destructure the incoming props (e.g., ({ className,
...contentProps }) or split into overlayProps and contentProps) and spread only
overlay-specific attributes onto DialogPrimitive.Overlay and only contentProps
(plus className) onto DialogPrimitive.Content; reference
DialogPrimitive.Overlay, DialogPrimitive.Content, className and props to find
and fix the incorrect spread.
Comment on lines
+492
to
+493
| "dependencies": ["@radix-ui/react-dialog"], | ||
| "registryDependencies": [], |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify dialog component imports lucide-react
rg -n 'from "lucide-react"' components/ui/warcraftcn/dialog.tsx
# Verify declared dependencies in registry entry
rg -n '"name": "dialog"|"dependencies"' registry.json -A8 -B2Repository: TheOrcDev/warcraftcn-ui
Length of output: 3998
Add missing lucide-react dependency for the dialog registry entry.
components/ui/warcraftcn/dialog.tsx imports XIcon from lucide-react, but the registry entry only declares @radix-ui/react-dialog as a dependency. This will cause installation failures for consumers.
🔧 Proposed fix
- "dependencies": ["@radix-ui/react-dialog"],
+ "dependencies": ["@radix-ui/react-dialog", "lucide-react"],📝 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.
Suggested change
| "dependencies": ["@radix-ui/react-dialog"], | |
| "registryDependencies": [], | |
| "dependencies": ["@radix-ui/react-dialog", "lucide-react"], | |
| "registryDependencies": [], |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@registry.json` around lines 492 - 493, The registry entry currently lists
only "@radix-ui/react-dialog" in the "dependencies" array but the component
components/ui/warcraftcn/dialog.tsx imports XIcon from "lucide-react"; update
the dialog registry entry by adding "lucide-react" to its "dependencies" array
so consumers will install it alongside `@radix-ui/react-dialog` and avoid
missing-import installation failures.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
issues number #7
Summary by CodeRabbit
New Features
Documentation