feat: ✨ add new shadcn components #51
Conversation
WalkthroughThis pull request introduces multiple new UI components, documentation files, and configuration updates. New components include Popover, Toaster (Sonner), Toggle, Toggle Group, and Tooltip, along with various preview implementations. In addition, navigation and component registries have been expanded, and package dependencies updated to support these additions. Formatting has been standardized across several files. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant B as Button (SonnerStyle)
participant T as Toast Function
participant R as Toaster Component
U->>B: Click button
B->>T: Trigger toast notification
T->>R: Send toast data
R->>U: Display toast message
sequenceDiagram
participant U as User
participant PT as PopoverTrigger
participant PC as PopoverContent
U->>PT: Click trigger
PT->>PC: Open popover
PC-->>U: Display content
U->>PC: Interact/Click outside
PC->>PT: Close popover
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (9)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 12
🔭 Outside diff range comments (2)
registry.json (2)
332-365: 💡 Verification agent❓ Verification inconclusive
Critical Issue in the Toggle Group registry item: Unexpected merged keys.
In the “toggle-group” entry, after listing the files for Toggle (line 344–347) and ToggleGroup (line 349–352), the object does not properly close its “files” array. Instead, additional keys for “name” and “title” (with values “alert-style-default”) along with a new “registryDependencies” array and a nested “files” block are appended within the same object. This looks like a merge conflict or accidental concatenation of two separate registry items.
Suggested Fix:
- End the “files” array for the toggle-group item right after the ToggleGroup file object.
- Move the “alert-style-default” block into its own separate registry item if it is intended, or remove it if not.
For example, ensure the toggle-group item’s files section is structured as:- "files": [ - { - "path": "components/ui/Toggle.tsx", - "target": "components/retroui/Toggle.tsx", - "type": "registry:component" - }, - { - "path": "components/ui/ToggleGroup.tsx", - "target": "components/retroui/ToggleGroup.tsx", - "type": "registry:component", - [unexpected additional keys below] - "name": "alert-style-default", - "title": "alert-style-default", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], - "files": [ - { - "path": "preview/components/alert-style-default.tsx", - "target": "components/retroui/preview/alert-style-default.tsx", - "type": "registry:block" - } - ] - ] + "files": [ + { + "path": "components/ui/Toggle.tsx", + "target": "components/retroui/Toggle.tsx", + "type": "registry:component" + }, + { + "path": "components/ui/ToggleGroup.tsx", + "target": "components/retroui/ToggleGroup.tsx", + "type": "registry:component" + } + ]
Critical Fix Required: Resolve Merge Conflict in Registry Entry
The JSON for the "toggle-group" registry item is currently malformed. The "files" array is not properly closed after listing the Toggle and ToggleGroup components. Instead, additional keys for another item ("alert-style-default") have been accidentally merged into it. To fix this:
- Close the "files" array immediately after the ToggleGroup file object.
- If the "alert-style-default" block is intentional, move it into its own separate registry entry; otherwise, remove it.
For example, the corrected structure for the "toggle-group" item should be:
- "files": [ - { - "path": "components/ui/Toggle.tsx", - "target": "components/retroui/Toggle.tsx", - "type": "registry:component" - }, - { - "path": "components/ui/ToggleGroup.tsx", - "target": "components/retroui/ToggleGroup.tsx", - "type": "registry:component", - [unexpected additional keys below] - "name": "alert-style-default", - "title": "alert-style-default", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], - "files": [ - { - "path": "preview/components/alert-style-default.tsx", - "target": "components/retroui/preview/alert-style-default.tsx", - "type": "registry:block" - } - ] - ] + "files": [ + { + "path": "components/ui/Toggle.tsx", + "target": "components/retroui/Toggle.tsx", + "type": "registry:component" + }, + { + "path": "components/ui/ToggleGroup.tsx", + "target": "components/retroui/ToggleGroup.tsx", + "type": "registry:component" + } + ]Please update the file accordingly.
366-393: 💡 Verification agent❓ Verification inconclusive
Critical Issue in the Tooltip registry item: Merged object fields from a separate block.
The “tooltip” registry entry is malformed. Its “files” array begins with the Tooltip component file, but then additional keys intended for a separate item (“name”: "alert-style-solid", etc.) are appended into the same object instead of closing off the tooltip block. This again appears to be a merge conflict error.
Suggested Fix:
Terminate the “files” array for Tooltip properly so that it only contains the Tooltip file entry. For example:- "files": [ - { - "path": "components/ui/Tooltip.tsx", - "target": "components/retroui/Tooltip.tsx", - "type": "registry:component", - "name": "alert-style-solid", - "title": "alert-style-solid", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], - "files": [ - { - "path": "preview/components/alert-style-solid.tsx", - "target": "components/retroui/preview/alert-style-solid.tsx", - "type": "registry:block" - } - ] - ] + "files": [ + { + "path": "components/ui/Tooltip.tsx", + "target": "components/retroui/Tooltip.tsx", + "type": "registry:component" + } + ]Then, ensure that the “alert-style-solid” registry item is defined as a separate object in the “items” array.
Critical Merge Conflict Found in Tooltip Registry Entry
The registry.json file (lines 366-393) contains a malformed "tooltip" entry. The "files" array for the Tooltip component improperly includes additional keys intended for a separate "alert-style-solid" item. This appears to be a merge conflict error.
Action Items:
- Limit the "files" array for "tooltip" to only include the Tooltip file entry.
- Remove the erroneously merged keys ("name", "title", "registryDependencies", and the nested "files" array) from the Tooltip entry.
- Define the "alert-style-solid" registry item as a separate object within the registry's "items" array.
Suggested Fix:
- "files": [ - { - "path": "components/ui/Tooltip.tsx", - "target": "components/retroui/Tooltip.tsx", - "type": "registry:component", - "name": "alert-style-solid", - "title": "alert-style-solid", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], - "files": [ - { - "path": "preview/components/alert-style-solid.tsx", - "target": "components/retroui/preview/alert-style-solid.tsx", - "type": "registry:block" - } - ] - ] + "files": [ + { + "path": "components/ui/Tooltip.tsx", + "target": "components/retroui/Tooltip.tsx", + "type": "registry:component" + } + ]Please update the registry by extracting the "alert-style-solid" item into a separate JSON object.
🧹 Nitpick comments (20)
preview/components/label.tsx (1)
3-4: Consider combining imports from the same module.Both
CheckboxandLabelare imported from the same module. You could consolidate these into a single import statement for cleaner code:-import { Checkbox } from "@/components/ui"; -import { Label } from "@/components/ui"; +import { Checkbox, Label } from "@/components/ui";content/docs/components/label.mdx (1)
3-3: Grammar correction needed in component description.The article "An" should be "A" since "universal" begins with a consonant sound despite starting with a vowel.
-description: An universal component for labeling various inputs. +description: A universal component for labeling various inputs.preview/components/toggle-style-outlined.tsx (1)
1-10: Nice implementation of the outlined Toggle variant!The code is clean and correctly imports and uses the Toggle component with the outlined variant.
Consider adding an
aria-labelto improve accessibility for screen readers:- <Toggle variant="outlined"> + <Toggle variant="outlined" aria-label="Bold text"> <Bold /> </Toggle>preview/components/toggle-style-default.tsx (1)
1-10: Clean implementation of the default Toggle variant!The component properly demonstrates the default Toggle variant with the Bold icon.
For better accessibility, consider adding an
aria-label:- <Toggle> + <Toggle aria-label="Bold text"> <Bold /> </Toggle>preview/components/sonner-style-rich-colors.tsx (1)
11-11: Fix typo in button textThere's a typo in the button text: "Rick colors" should be "Rich colors".
- return <Button onClick={onClick}>Show Toast (Rick colors)</Button>; + return <Button onClick={onClick}>Show Toast (Rich colors)</Button>;components/ui/index.ts (1)
2-9: Fix duplicate Input export.There's a duplicate export for the Input component on lines 2 and 9. This should be cleaned up to avoid confusion.
export * from "./Button"; export * from "./Input"; export * from "./Textarea"; export * from "./Checkbox"; export * from "./Radio"; export * from "./Select"; export * from "./Switch"; export * from "./Label"; -export * from "./Input"; export * from "./Text";content/docs/components/tooltip.mdx (2)
4-4: Update the lastUpdated date.The lastUpdated date is set to "08 Apr, 2025", which appears to be a future date. It should likely be set to "08 Apr, 2024" to reflect the actual date when this documentation was created.
-lastUpdated: 08 Apr, 2025 +lastUpdated: 08 Apr, 2024
35-36: Consider adding a Usage section with import examples.The documentation lacks a dedicated Usage section showing how to import the Tooltip components. Consider adding a section similar to the one in the Popover documentation, showing the import statements and basic usage example.
<br /> <br /> +## Usage + +```typescript +import { + Tooltip, + TooltipContent, + TooltipTrigger, + TooltipProvider +} from "@/components/ui/tooltip"; +``` + +```typescript +<TooltipProvider> + <Tooltip> + <TooltipTrigger>Hover</TooltipTrigger> + <TooltipContent>Tooltip content</TooltipContent> + </Tooltip> +</TooltipProvider> +``` + +<br /> +<br /> + ## Examplescomponents/ui/Sonner.tsx (1)
12-22: Consider breaking down long class strings for better readability.The class strings are quite long which can make maintenance more difficult. Consider using template literals or breaking them into smaller, more maintainable variables.
- toast: "h-auto w-full p-4 bg-background rounded-md border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border shadow-lg flex items-center relative", + toast: ` + h-auto w-full p-4 bg-background rounded-md border + group toast + group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border + shadow-lg flex items-center relative + `,content/docs/components/popover.mdx (1)
4-4: Update the lastUpdated date.The lastUpdated date is set to "08 Apr, 2025", which appears to be a future date. It should likely be set to "08 Apr, 2024" to reflect the actual date when this documentation was created.
-lastUpdated: 08 Apr, 2025 +lastUpdated: 08 Apr, 2024content/docs/components/toggle.mdx (1)
3-3: Consider a more formal descriptionThe current description ("This crazy toggling button keeps people toggling...😃") might be too informal for component documentation. Consider revising it to better describe the component's purpose and functionality in a professional tone, while still maintaining the project's voice.
preview/components/popover-style-default-shadow.tsx (1)
23-52: Consider adding state management for the inputsCurrently, the inputs have default values but no state management. For a fully functional component, you might want to track value changes.
+"use client"; + +import { useState } from "react"; import { Popover, PopoverTrigger, PopoverContent, Label, Button, Input, } from "@/components/ui"; export default function PopoverStyleDefaultShadow() { + const [dimensions, setDimensions] = useState({ + width: "100%", + height: "25px" + }); + + const handleDimensionChange = ( + e: React.ChangeEvent<HTMLInputElement>, + dimension: "width" | "height" + ) => { + setDimensions({ + ...dimensions, + [dimension]: e.target.value + }); + }; + return ( <Popover> <PopoverTrigger asChild> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent className="w-80 font-sans" variant="default" shadow="md" > <div className="grid gap-4"> <div className="space-y-2"> <h4 className="font-medium leading-none">Dimensions</h4> <p className="text-sm text-muted-foreground"> Set the dimensions for the layer. </p> </div> <div className="grid gap-2"> <div className="grid grid-cols-3 items-center gap-4"> <Label htmlFor="width">Width</Label> <Input id="width" - defaultValue="100%" + value={dimensions.width} + onChange={(e) => handleDimensionChange(e, "width")} className="col-span-2 h-8" /> </div> <div className="grid grid-cols-3 items-center gap-4"> <Label htmlFor="height">Height</Label> <Input id="height" - defaultValue="25px" + value={dimensions.height} + onChange={(e) => handleDimensionChange(e, "height")} className="col-span-2 h-8" /> </div> </div> </div> </PopoverContent> </Popover> ); }public/r/sonner.json (1)
12-12: Consider adding documentation comments for the Toaster componentWhile the implementation is solid, adding JSDoc comments would improve developer experience when using this component.
"type": "registry:component", "content": "\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\n+/**\n+ * Toaster component that wraps sonner's Toaster with custom styling\n+ * @param props - All props from sonner's Toaster component\n+ */\nconst Toaster = ({ ...props }: ToasterProps) => {\n return (\n <Sonner\n toastOptions={{\n classNames: {\n"content/docs/components/toggle-group.mdx (3)
4-4: Update the lastUpdated dateThe current lastUpdated date is set to April 2025, which is in the future. Consider updating it to the current date.
-lastUpdated: 08 Apr, 2025 +lastUpdated: 08 Apr, 2024
19-22: Consider adding version constraints for dependenciesWhen specifying dependencies, it's generally a good practice to include version constraints to ensure compatibility and prevent breaking changes from newer versions.
```sh -npm install @radix-ui/react-toggle-group @radix-ui/react-toggle +npm install @radix-ui/react-toggle-group@^1.0.0 @radix-ui/react-toggle@^1.0.0
48-54: Enhance usage example with controlled state managementThe current example shows basic usage, but adding a controlled example with state management would be more helpful to demonstrate real-world implementation.
```tsx +import { useState } from "react"; + +export default function ToggleGroupExample() { + const [value, setValue] = useState("a"); + + return ( -<ToggleGroup type="single"> +<ToggleGroup type="single" value={value} onValueChange={setValue}> <ToggleGroupItem value="a">A</ToggleGroupItem> <ToggleGroupItem value="b">B</ToggleGroupItem> <ToggleGroupItem value="c">C</ToggleGroupItem> </ToggleGroup> + ); +}components/ui/Toggle.tsx (1)
19-20: Fix duplicate hover prefix in the outline-muted variantThere's a duplicate
hover:prefix in the CSS classes that should be removed.- "outline-muted": - "border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted", + "outline-muted": + "border-2 border-input bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",config/components.ts (1)
254-258: Consider removing commented codeThere's a commented section for "dropdown-style-default" that isn't used. Consider removing it if it's not needed, or add a comment explaining why it's kept.
- // "dropdown-style-default": { - // name: "dropdown-style-default", - // filePath: "preview/components/dropdown-style-default.tsx", - // preview: lazy(() => import("@/preview/components/dropdown-style-default")), - // },public/r/popover.json (1)
1-8: Improve component descriptionThe current description "A handy small component for your little input needs...😉" doesn't clearly describe what a Popover component actually does. Consider updating it to something more descriptive, such as "A floating component that displays content relative to a trigger element."
- "description": "A handy small component for your little input needs...😉", + "description": "A floating component that displays contextual content relative to a trigger element.",registry.json (1)
980-981: Final Note:
Due to the structural issues observed in the “toggle”, “toggle-group”, and “tooltip” entries, please run a JSON linter/validator on the entire registry file to catch any further merge or formatting issues. This will help ensure that the registry conforms to the expected schema and avoids runtime errors during component registration.🧰 Tools
🪛 Biome (1.9.4)
[error] 981-981: expected
]but instead the file endsthe file ends here
(parse)
📜 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 (42)
app/layout.tsx(1 hunks)components/ui/Popover.tsx(1 hunks)components/ui/Sonner.tsx(1 hunks)components/ui/Toggle.tsx(1 hunks)components/ui/ToggleGroup.tsx(1 hunks)components/ui/Tooltip.tsx(1 hunks)components/ui/index.ts(1 hunks)config/components.ts(1 hunks)config/navigation.ts(1 hunks)content/docs/components/label.mdx(1 hunks)content/docs/components/popover.mdx(1 hunks)content/docs/components/sonner.mdx(1 hunks)content/docs/components/toggle-group.mdx(1 hunks)content/docs/components/toggle.mdx(1 hunks)content/docs/components/tooltip.mdx(1 hunks)package.json(3 hunks)preview/components/label.tsx(1 hunks)preview/components/popover-style-default-shadow.tsx(1 hunks)preview/components/popover-style-default.tsx(1 hunks)preview/components/popover-style-primary-shadow.tsx(1 hunks)preview/components/popover-style-primary.tsx(1 hunks)preview/components/sonner-style-default.tsx(1 hunks)preview/components/sonner-style-error.tsx(1 hunks)preview/components/sonner-style-rich-colors.tsx(1 hunks)preview/components/sonner-style-warning.tsx(1 hunks)preview/components/toggle-group-style-default.tsx(1 hunks)preview/components/toggle-group-style-outline-muted.tsx(1 hunks)preview/components/toggle-group-style-outlined.tsx(1 hunks)preview/components/toggle-group-style-solid.tsx(1 hunks)preview/components/toggle-style-default.tsx(1 hunks)preview/components/toggle-style-outline-muted.tsx(1 hunks)preview/components/toggle-style-outlined.tsx(1 hunks)preview/components/toggle-style-solid.tsx(1 hunks)preview/components/tooltip-style-default.tsx(1 hunks)preview/components/tooltip-style-primary.tsx(1 hunks)preview/components/tooltip-style-solid.tsx(1 hunks)public/r/popover.json(1 hunks)public/r/sonner.json(1 hunks)public/r/toggle-group.json(1 hunks)public/r/toggle.json(1 hunks)public/r/tooltip.json(1 hunks)registry.json(16 hunks)
🧰 Additional context used
🧬 Code Definitions (16)
preview/components/popover-style-primary.tsx (4)
components/ui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/ui/Button.tsx (1)
Button(35-54)components/ui/Label.tsx (1)
Label(18-18)components/ui/Input.tsx (1)
Input(7-25)
preview/components/popover-style-default.tsx (4)
components/ui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/ui/Button.tsx (1)
Button(35-54)components/ui/Label.tsx (1)
Label(18-18)components/ui/Input.tsx (1)
Input(7-25)
preview/components/popover-style-primary-shadow.tsx (4)
components/ui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/ui/Button.tsx (1)
Button(35-54)components/ui/Label.tsx (1)
Label(18-18)components/ui/Input.tsx (1)
Input(7-25)
preview/components/toggle-style-outlined.tsx (1)
components/ui/Toggle.tsx (1)
Toggle(49-49)
preview/components/tooltip-style-solid.tsx (2)
components/ui/Tooltip.tsx (4)
TooltipProvider(52-52)Tooltip(52-52)TooltipTrigger(52-52)TooltipContent(52-52)components/ui/Button.tsx (1)
Button(35-54)
preview/components/popover-style-default-shadow.tsx (4)
components/ui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/ui/Button.tsx (1)
Button(35-54)components/ui/Label.tsx (1)
Label(18-18)components/ui/Input.tsx (1)
Input(7-25)
preview/components/label.tsx (2)
components/ui/Checkbox.tsx (1)
Checkbox(29-49)components/ui/Label.tsx (1)
Label(18-18)
preview/components/sonner-style-error.tsx (1)
components/ui/Button.tsx (1)
Button(35-54)
preview/components/sonner-style-rich-colors.tsx (1)
components/ui/Button.tsx (1)
Button(35-54)
preview/components/sonner-style-warning.tsx (1)
components/ui/Button.tsx (1)
Button(35-54)
components/ui/Tooltip.tsx (1)
lib/utils.ts (1)
cn(4-6)
components/ui/Popover.tsx (1)
lib/utils.ts (1)
cn(4-6)
preview/components/tooltip-style-primary.tsx (2)
components/ui/Tooltip.tsx (4)
TooltipProvider(52-52)Tooltip(52-52)TooltipTrigger(52-52)TooltipContent(52-52)components/ui/Button.tsx (1)
Button(35-54)
components/ui/Toggle.tsx (1)
lib/utils.ts (1)
cn(4-6)
preview/components/sonner-style-default.tsx (1)
components/ui/Button.tsx (1)
Button(35-54)
components/ui/ToggleGroup.tsx (2)
components/ui/Toggle.tsx (1)
toggleVariants(49-49)lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (63)
preview/components/label.tsx (1)
8-11: Good accessibility practice with htmlFor/id pairing.The use of
htmlFor="terms"on the Label correctly associates it with the Checkbox'sid="terms", which ensures proper accessibility for screen readers and keyboard navigation.content/docs/components/label.mdx (2)
34-40: Good documentation of import options.Providing both import paths gives developers flexibility in how they integrate the component into their projects. This is especially helpful for those who might have different project structures.
4-4: 🛠️ Refactor suggestionFuture date in lastUpdated field.
The lastUpdated date is set to April 4, 2025, which is in the future. Please update to the current date.
-lastUpdated: 04 Apr, 2025 +lastUpdated: 04 Apr, 2024Likely an incorrect or invalid review comment.
config/navigation.ts (1)
7-91: Well-structured navigation with new components.The updated navigation configuration properly integrates all the new components with appropriate tagging. The structure is consistent and logical, making it easy for users to find the newly added components.
preview/components/toggle-style-solid.tsx (2)
1-10: Consider adding "use client" directive.For components that involve client-side interactivity, it's recommended to add the "use client" directive at the top of the file. This ensures compatibility with Next.js server components architecture.
+// "use client"; + import { Toggle } from "@/components/ui"; import { Italic } from "lucide-react";If the Toggle component itself is already marked with "use client" and handles all interactivity, then this directive might not be necessary in this preview component. However, it's generally good practice to add it to components that will be rendered on the client side.
6-8: Clear demonstration of the Toggle component.This is a concise and focused example that effectively demonstrates the solid variant of the Toggle component with an icon and text, which is exactly what a preview component should do.
preview/components/sonner-style-warning.tsx (1)
1-10: LGTM! Well-implemented warning toast exampleThe component correctly implements a warning toast notification example with a clear button label and appropriate toast function call.
preview/components/toggle-style-outline-muted.tsx (1)
1-10: LGTM: Well-structured component demonstration for ToggleThe component is well-implemented, showcasing the "outline-muted" variant of the Toggle component with a Bold icon. The code is clean, concise, and follows good React component practices.
preview/components/sonner-style-default.tsx (1)
1-16: LGTM: Well-implemented toast demonstration componentThe component effectively demonstrates the default Sonner toast notification with appropriate message, description, and cancel option. The code is clean and follows good practices.
preview/components/toggle-group-style-outlined.tsx (1)
8-20: LGTM: Good implementation of ToggleGroup with multiple selectionThe implementation of the ToggleGroup with multiple selection type and outlined variant is well-structured. The component correctly demonstrates text styling options with appropriate icons and consistent sizing.
preview/components/popover-style-primary.tsx (1)
1-52: Clean, well-structured popover component implementationThe component implements a primary-styled popover with a form for dimension settings. The code is well-organized and follows React best practices.
preview/components/toggle-group-style-solid.tsx (1)
1-22: Well-implemented toggle group componentThe toggle group implementation with multiple selection is clean and follows best practices. The use of Lucide React icons helps maintain consistency across the UI.
preview/components/popover-style-primary-shadow.tsx (1)
1-56: Well-structured popover with shadow implementationThe component is a well-implemented extension of the popover pattern, adding shadow functionality while maintaining consistent structure.
preview/components/popover-style-default.tsx (1)
1-52: Well-implemented default popover componentThe component follows good React patterns and properly utilizes the Popover components from the UI library.
preview/components/toggle-group-style-outline-muted.tsx (1)
8-20: Implementation looks good.The ToggleGroup component is correctly configured with the "multiple" type and "outline-muted" variant. The ToggleGroupItems are properly structured with appropriate icons and sizing.
preview/components/tooltip-style-default.tsx (1)
11-24: Well-structured Tooltip implementation.The Tooltip implementation follows best practices with the proper component hierarchy:
- TooltipProvider wrapping the Tooltip component
- Using
asChildcorrectly on the TooltipTrigger to pass tooltip behavior to the Button- Explicit variant specification on TooltipContent
components/ui/index.ts (1)
19-23: New component exports added correctly.The exports for Toggle, Sonner, Tooltip, Popover, and ToggleGroup have been properly added to the UI component index.
content/docs/components/sonner.mdx (2)
7-87: Well-structured documentation.The documentation is comprehensive and follows a good structure:
- Includes an introduction with proper attribution to the original creator
- Provides clear installation instructions through multiple methods
- Shows a variety of examples demonstrating different styles
- Uses appropriate spacing and section organization
41-55: Ensure Toaster import path matches implementation.Verify that the import path for the Toaster component in the example matches your actual implementation. The example shows:
import { Toaster } from "@/components/ui/sonner"Make sure this path is correct based on your project structure, or consider using:
import { Toaster } from "@/components/ui"if you're exporting it through the UI barrel file.
content/docs/components/tooltip.mdx (1)
1-53: Documentation looks well-structured and comprehensive.The tooltip documentation provides clear installation instructions, showcases different tooltip styles, and follows the same pattern as other component documentation. The examples are clear and showcase the component's variations effectively.
preview/components/tooltip-style-solid.tsx (2)
3-9: LGTM: Clean import structure.The imports are well-organized and correctly reference the UI components needed for this tooltip example.
11-22: Good implementation of the solid variant tooltip.The component correctly implements a solid variant tooltip with proper structure: TooltipProvider → Tooltip → TooltipTrigger → TooltipContent. The use of
asChildwith TooltipTrigger allows the Button to properly function as the tooltip trigger.components/ui/Sonner.tsx (2)
1-9: LGTM: Clean setup with proper client directive.The client directive is correctly used, and the component imports the underlying Sonner library with a clear type definition for props.
7-28: Well-implemented toast customization.The Toaster component effectively wraps the Sonner library with custom styling. The implementation properly sets
unstyled: trueto override default styles and provides comprehensive class names for all toast elements.content/docs/components/popover.mdx (2)
1-81: Well-structured documentation with comprehensive examples.The Popover documentation is well-organized with clear sections for installation, usage, and examples. The showcase of different variants (default, primary, shadowed, primary shadowed) provides good visual references for developers.
38-51: Good inclusion of usage examples with code snippets.The documentation properly includes both import statements and basic usage examples, which is helpful for developers who want to quickly implement the Popover component.
preview/components/tooltip-style-primary.tsx (1)
1-24: LGTM - Clean, standard implementation of a tooltip component with primary styling.This component follows the recommended Radix UI pattern for tooltips, correctly using the tooltip provider, tooltip trigger with asChild, and applying appropriate variant props. The component name accurately reflects its purpose.
content/docs/components/toggle.mdx (1)
1-59: LGTM - Well-structured documentation with clear installation instructions and examplesThe documentation provides comprehensive information about the Toggle component, including multiple installation methods and a variety of usage examples. The structure follows the project's documentation standards and will be helpful for users.
preview/components/toggle-group-style-default.tsx (1)
1-22: LGTM - Clean implementation of a toggle group with icon buttonsThe component implements a toggle group with multiple selection capability and appropriate icon buttons for text formatting. The structure and implementation follow best practices.
package.json (1)
20-27: LGTM - Appropriate dependencies added for new componentsThe added dependencies (@radix-ui/react-popover, @radix-ui/react-toggle, @radix-ui/react-toggle-group, @radix-ui/react-tooltip, sonner) are correctly specified with appropriate version constraints and match the PR objective of adding new ShadCN components.
Also applies to: 41-41
preview/components/popover-style-default-shadow.tsx (1)
1-56: Good implementation of the Popover component!The component structure is well-organized with clean separation of the trigger and content. The layout inside the popover uses grid effectively for alignment.
public/r/toggle.json (1)
1-17: Well-structured component registry for Toggle componentThe component registry JSON is properly structured with all necessary metadata.
public/r/sonner.json (1)
1-15: Good implementation of the Toaster componentThe Sonner toast implementation is well structured with appropriate customization options. The classNames are comprehensive and cover all aspects of the toast UI elements.
content/docs/components/toggle-group.mdx (1)
1-82: Comprehensive documentation for the Toggle Group componentThe documentation is well-structured with clear installation instructions, usage examples, and visual showcases for different style variants.
components/ui/Toggle.tsx (2)
9-33: Well-structured variant definitions with comprehensive styling options!The toggle variants are well-defined with thoughtful styling for different states (hover, active, disabled). The component provides good flexibility with multiple variants (default, outlined, solid, outline-muted) and size options.
35-45: Excellent use of forwardRef pattern and prop compositionThe Toggle component is well-implemented with proper type definitions, forwarding refs correctly, and good separation of concerns. The component correctly merges variant styles with additional classNames.
components/ui/ToggleGroup.tsx (3)
10-15: Good use of React Context for sharing variant propertiesSetting up a context to share variant and size properties between the ToggleGroup and its children is a great approach for consistent styling. The default values ensure the component works even without explicit props.
17-31: Well-implemented ToggleGroup component with proper props handlingThe ToggleGroup component is well-structured with appropriate type definitions and proper usage of the Radix UI primitive. The context provider ensures variant and size values are shared with children.
35-57: Excellent implementation of ToggleGroupItem with context consumptionThe ToggleGroupItem component correctly consumes the context and properly handles variant fallbacks. The priority logic for using context values over direct props is well-implemented.
components/ui/Tooltip.tsx (2)
9-23: Well-defined tooltip content variants with comprehensive stylingThe tooltip variants provide good flexibility with different styling options (default, primary, solid). The animations and positioning styles make for a polished user experience.
31-49: Well-implemented TooltipContent with proper Portal usageThe TooltipContent component correctly uses Portal for proper DOM positioning and has well-structured styling using the variant system. The default sideOffset is a nice touch for better positioning out of the box.
app/layout.tsx (2)
5-5: Good addition of the Toaster importThe Toaster component import is correctly added to support the new toast functionality.
59-59: Well-placed Toaster component in the layoutThe Toaster component is correctly placed at the root level after the children, which is the recommended positioning for toast notifications to ensure they appear above all other content.
components/ui/Popover.tsx (5)
1-8: Proper import structure and client directive presentThe file correctly starts with the "use client" directive required for client-side components in Next.js. All necessary dependencies are imported, including React, Radix UI popover primitives, and utility functions.
9-29: Well-structured variants for popover contentThe popover content variants are well-defined using class-variance-authority, offering customization for both appearance (default/primary) and shadow depth (sm/md/lg).
31-35: Clean component definitionsGood practice to directly assign Radix UI primitives to named exports, keeping the component structure clean and maintainable.
37-69: Well-implemented forwarded ref componentThe PopoverContent component is properly implemented as a forwarded ref component with appropriate TypeScript typing, including component props inheritance and variant props.
70-72: Proper display name and exportsThe component correctly sets the displayName for better debugging and exports all necessary subcomponents, following established React patterns.
config/components.ts (7)
3-19: Updated component configuration type definitionsThe type definitions for the component configuration have been expanded to include additional properties like dependencies and preview components. This provides better typing support for the configuration object.
20-102: Comprehensive core components configurationThe core components section has been expanded to include all the new components mentioned in the PR objectives (Toggle, Toggle Group, Sonner, Popover, Tooltip). Each component is properly configured with its name and file path.
287-316: Popover preview components configurationThe configuration properly includes various popover style examples, including default, primary, and shadow variants. This allows for comprehensive documentation and testing of the component.
439-466: Sonner toast preview componentsGood variety of Sonner toast examples covering different use cases (default, warning, error, rich colors). This will help users understand the component's capabilities.
472-492: Tooltip preview componentsThe tooltip examples showcase various styles (default, solid, primary), providing good coverage of the component's capabilities.
493-524: Toggle Group preview componentsComprehensive set of Toggle Group examples covering different styles (default, outlined, outline-muted, solid), which aligns with the PR objectives of adding Toggle Group functionality.
411-438: Toggle preview componentsThe Toggle examples cover various styles (default, outlined, solid, outline-muted), providing a complete picture of the component's styling options.
public/r/popover.json (1)
9-15: Component registry configurationThe component registry entry is properly configured with the correct paths and component type. The content field contains the same implementation as the actual component file, ensuring consistency.
public/r/tooltip.json (2)
1-8: Well-defined component metadataThe tooltip component is properly registered with appropriate name, type, title, and dependencies. The casual tone in the description is consistent with the project's style.
9-15: Complete component implementationThe component's implementation in the content field is well-structured and includes various style variants (default, primary, solid), providing good flexibility for users.
public/r/toggle-group.json (1)
1-27: Component registry JSON for Toggle Group looks well structured.
The JSON defines the “toggle-group” component along with its two file entries (one for Toggle and one for ToggleGroup) and includes all necessary metadata (name, type, title, description, dependencies, and author). The inline component code in the “content” fields is correctly embedded and appears consistent with the project’s conventions.registry.json (4)
1-17: Consistent dependency formatting in legacy component definitions.
The existing registry items (e.g. for “utils”, “accordion”, “alert”, etc.) now use single-line array notation for dependencies. This improves readability and standardizes the format across the file.
182-199: New Popover registry item is correctly defined.
The new “popover” component entry has all required fields—including name, type, title, description, dependencies, author, and file mapping—and follows the JSON schema specified by the registry.
231-248: New Sonner registry item appears well integrated.
The entry for “sonner” defines its dependencies and file mapping clearly. This addition should integrate seamlessly with the component registry.
305-331:✅ Verification successful
Critical Issue in the Toggle registry item: Misplaced nested keys.
The registry entry for the “toggle” component is problematic. Instead of only listing the file for the Toggle component, the file object erroneously includes extra keys ("name": "accordion-style-default", "title": "accordion-style-default", a nested “registryDependencies” array, and an inner “files” array for a preview block). This appears to be a copy–paste or merge error.
Suggested Fix: Remove the extraneous keys so that the file entry only contains the expected keys (i.e. "path", "target", and "type"). For example, apply a diff similar to:- "files": [ - { - "path": "components/ui/Toggle.tsx", - "target": "components/retroui/Toggle.tsx", - "type": "registry:component", - "name": "accordion-style-default", - "title": "accordion-style-default", - "registryDependencies": [ - "https://retroui.dev/r/accordion.json" - ], - "files": [ - { - "path": "preview/components/accordion-style-default.tsx", - "target": "components/retroui/preview/accordion-style-default.tsx", - "type": "registry:block" - } - ] - } - ] + "files": [ + { + "path": "components/ui/Toggle.tsx", + "target": "components/retroui/Toggle.tsx", + "type": "registry:component" + } + ]
Critical: Registry JSON for the toggle component contains erroneous nested keys.
The registry entry for “toggle” has extra properties ("name": "accordion-style-default", "title": "accordion-style-default", a nested "registryDependencies" array, and an inner "files" array for a preview block) that clearly do not belong under the "files" array. This appears to be a copy–paste or merge error. The file entry should only include the expected keys ("path", "target", and "type"). For instance, update to the following diff:- "files": [ - { - "path": "components/ui/Toggle.tsx", - "target": "components/retroui/Toggle.tsx", - "type": "registry:component", - "name": "accordion-style-default", - "title": "accordion-style-default", - "registryDependencies": [ - "https://retroui.dev/r/accordion.json" - ], - "files": [ - { - "path": "preview/components/accordion-style-default.tsx", - "target": "components/retroui/preview/accordion-style-default.tsx", - "type": "registry:block" - } - ] - } - ] + "files": [ + { + "path": "components/ui/Toggle.tsx", + "target": "components/retroui/Toggle.tsx", + "type": "registry:component" + } + ]Please update the JSON accordingly to ensure consistency and prevent future misconfigurations.
public/r/toggle.json
Outdated
| "files": [ | ||
| { | ||
| "path": "components/ui/Toggle.tsx", | ||
| "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n {\n variants: {\n variant: {\n default:\n \"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\",\n outlined:\n \"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n solid: \"border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black\",\n \"outline-muted\":\n \"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted\",\n },\n size: {\n default: \"h-10 px-3 min-w-10\",\n sm: \"h-9 px-2.5 min-w-9\",\n lg: \"h-11 px-5 min-w-11\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n", |
There was a problem hiding this comment.
Fix duplicate hover prefix in outline-muted variant
There's a redundant duplication of the hover: prefix in the CSS class definition.
variant: {
default:
"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",
outlined:
"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
solid: "border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black",
"outline-muted":
- "border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted",
+ "border-2 border-input bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",
},📝 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.
| "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n {\n variants: {\n variant: {\n default:\n \"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\",\n outlined:\n \"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n solid: \"border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black\",\n \"outline-muted\":\n \"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted\",\n },\n size: {\n default: \"h-10 px-3 min-w-10\",\n sm: \"h-9 px-2.5 min-w-9\",\n lg: \"h-11 px-5 min-w-11\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n", | |
| "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n {\n variants: {\n variant: {\n default:\n \"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\",\n outlined:\n \"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n solid: \"border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black\",\n \"outline-muted\":\n \"border-2 border-input bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\",\n },\n size: {\n default: \"h-10 px-3 min-w-10\",\n sm: \"h-9 px-2.5 min-w-9\",\n lg: \"h-11 px-5 min-w-11\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nconst Toggle = React.forwardRef<\n React.ElementRef<typeof TogglePrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root\n ref={ref}\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n", |
1 participant
I have created the following ShadCN in RetroUI styles:
Also I have added docs for the following components
Summary by CodeRabbit
New Features
Toastercomponent for notifications and aPopovercomponent for contextual menus.ToggleGroupfor grouped toggle selections and aTooltipfor additional context on hover.Documentation
Configuration & Navigation