feat: add Empty component with documentation and previews #116
Conversation
|
@ehmasuk is attempting to deploy a commit to the Retro UI Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughA new composite React Empty component (with nested Content, Icon, Title, Separator, Description) was added, plus docs, navigation entry, config registration, and four preview/example components demonstrating usage. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 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
🧹 Recent nitpick comments
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (3)
🔇 Additional comments (3)
✏️ Tip: You can disable this entire section by setting 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@preview/components/empty-style-table.tsx`:
- Line 27: The Tailwind class on Empty.Title is invalid: replace the
non-existent "md:text-md" with a valid utility such as "text-base" (or if you
meant a responsive style, use "md:text-base" or "md:text-sm"); update the
className on Empty.Title to use one of these valid Tailwind text-size utilities.
🧹 Nitpick comments (8)
components/retroui/Empty.tsx (2)
6-8: RedundantclassNameproperty in interface.
HTMLAttributes<HTMLDivElement>already includesclassName, so explicitly declaring it here is unnecessary.Suggested fix
-interface IEmptyProps extends HTMLAttributes<HTMLDivElement> { - className?: string; -} +interface IEmptyProps extends HTMLAttributes<HTMLDivElement> {}
53-55: Consider adding accessibility attributes to the separator.For better accessibility, consider adding
role="separator"to make the semantic purpose explicit to assistive technologies.Suggested fix
const EmptySeparator = ({ className, ...props }: IEmptyProps) => { - return <div className={cn("w-full h-1 bg-primary", className)} {...props} />; + return <div role="separator" className={cn("w-full h-1 bg-primary", className)} {...props} />; };components/retroui/index.ts (1)
2-9: Pre-existing duplicate export detected.Note:
"./Input"is exported twice (lines 2 and 9). While not introduced in this PR, consider removing the duplicate in a follow-up.preview/components/empty-style-custom-everything.tsx (1)
1-2: Inconsistent import pattern.
Buttonis imported from the barrel file whileEmptyis imported directly. For consistency, consider importing both from the same source.Option 1: Both from barrel
-import { Button } from "@/components/retroui"; -import { Empty } from "@/components/retroui/Empty"; +import { Button, Empty } from "@/components/retroui";preview/components/empty-style-default.tsx (1)
1-1: Consider importing from the barrel file for consistency.Similar to the other preview file, consider importing from
@/components/retrouifor consistency across the codebase.Suggested change
-import { Empty } from "@/components/retroui/Empty"; +import { Empty } from "@/components/retroui";preview/components/empty-style-table.tsx (2)
21-21: Prefer strict equality operator.Use
===instead of==for comparinginvoices.lengthto0to avoid type coercion surprises.Suggested fix
- {invoices?.length == 0 && ( + {invoices?.length === 0 && (
23-23: Remove emptyclassNameattribute.The empty
className=""serves no purpose.Suggested fix
- <Table.Cell colSpan={5} className=""> + <Table.Cell colSpan={5}>config/components.ts (1)
164-167: Consider alphabetical ordering for core components.The
emptyentry is placed at the end of thecoreobject, but other entries appear to follow alphabetical order. For consistency and easier navigation, consider moving it betweendrawerandinput.Suggested placement
drawer: { name: "drawer", filePath: "components/retroui/Drawer.tsx", }, + empty: { + name: "empty", + filePath: "components/retroui/Empty.tsx", + }, input: { name: "input", filePath: "components/retroui/Input.tsx", },And remove from lines 164-167.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
components/retroui/Empty.tsxcomponents/retroui/index.tsconfig/components.tsconfig/navigation.tscontent/docs/components/empty.mdxpreview/components/empty-style-custom-everything.tsxpreview/components/empty-style-custom-icon.tsxpreview/components/empty-style-default.tsxpreview/components/empty-style-table.tsx
🧰 Additional context used
🧬 Code graph analysis (2)
preview/components/empty-style-custom-everything.tsx (1)
components/retroui/Button.tsx (1)
Button(40-63)
components/retroui/Empty.tsx (2)
lib/utils.ts (1)
cn(4-6)components/retroui/Text.tsx (1)
Text(30-37)
🔇 Additional comments (10)
components/retroui/Empty.tsx (1)
69-77: LGTM! Well-structured compound component pattern.The
Object.assignapproach is idiomatic for React compound components, providing a clean API (Empty.Content,Empty.Icon, etc.) while maintaining proper display names for debugging.components/retroui/index.ts (1)
29-30: LGTM! New exports correctly added.The
Emptycomponent is properly exported as part of the public API.config/navigation.ts (1)
61-61: LGTM! Navigation entry correctly added.The entry maintains alphabetical ordering and follows the existing pattern for new components with the "New" tag.
preview/components/empty-style-custom-everything.tsx (1)
5-19: LGTM! Good example of a fully customized empty state.This preview effectively demonstrates the flexibility of the Empty component with a custom icon, content, and an action button.
preview/components/empty-style-default.tsx (1)
3-15: LGTM! Clean default example.This provides a clear and straightforward demonstration of the Empty component's default usage pattern with all sub-components.
preview/components/empty-style-table.tsx (1)
1-5: LGTM!Imports and demo data setup look correct for a preview component.
content/docs/components/empty.mdx (2)
5-6: Verify the source URL organization name.The source link points to
Logging-Stuffbut the PR is fromLogging-Studio. Please confirm the correct GitHub organization name.
9-70: LGTM!Documentation structure is well-organized with clear examples covering default usage, custom icons, full customization, and table integration. The API reference succinctly describes all sub-components.
preview/components/empty-style-custom-icon.tsx (1)
1-19: LGTM!Clean demonstration of the custom icon capability using the Empty component's compositional API.
config/components.ts (1)
723-742: LGTM!The four example entries follow the established pattern and correctly reference the new preview components with lazy loading.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
1 participant
This Pull Request introduces the Empty component, a modular and styled element used to display states when no data is available. It follows the library's retro aesthetic.
What's included:
Example component structure :
<Empty.Content>
<Empty.Icon />
<Empty.Title>No Data Found</Empty.Title>
<Empty.Separator />
<Empty.Description>Try adjusting your search filters.</Empty.Description>
</Empty.Content>
Examples:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.