feat: add reusable EmptyState component #3692
Conversation
- Add flexible EmptyState component with multiple variants - Support different types: default, search, filter, data, error, tasks, projects - Add size variants: sm, md, lg - Add visual variants: default, subtle, card - Add support for custom illustrations and actions - Add comprehensive TypeScript types and documentation - Implement responsive design with Tailwind CSS
WalkthroughThis pull request introduces a new React functional component named Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant ES as EmptyState Component
U->>ES: Render component with props (type, title, message, etc.)
ES->>ES: Select default configuration based on type
ES-->>U: Render empty state (image, title, message, action button if defined)
U->>ES: Click action button (if available)
ES->>ES: Invoke onAction callback
Possibly related PRs
Suggested labels
Suggested reviewers
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
apps/web/components/ui/empty-state.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
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. 🪧 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 (
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Added a flexible and reusable EmptyState component with comprehensive configuration options for displaying empty states across the application.
- Added support for 7 preset types (default, search, filter, data, error, tasks, projects) with customizable titles, messages and illustrations
- Implemented 3 size variants (sm, md, lg) with responsive typography and spacing using Tailwind CSS
- Added 3 visual variants (default, subtle, card) with consistent styling and shadows
- Integrated optional action button with customizable label and callback
- Added comprehensive TypeScript types and JSDoc documentation for improved developer experience
💡 (5/5) You can turn off certain types of comments like style here!
1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
![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
🧹 Nitpick comments (4)
apps/web/components/ui/empty-state.tsx (4)
52-73: Well-documented props interface with comprehensive options.The EmptyStateProps interface is well-documented with JSDoc comments for each prop, making it clear what each prop does.
However, consider changing the default for
showImagefromfalsetotruesince the component is styled to accommodate images and this would align better with user expectations.
78-95: Good props handling with sensible defaults.The component properly destructures props with defaults and creates final values by merging custom inputs with defaults from the selected type.
Note that
showImagedefaults tofalse, which means images won't display unless explicitly enabled. Consider if this is the intended default behavior.
96-112: Well-organized style configurations.The size and variant classes are organized in a clear, maintainable way.
For a small performance optimization, consider moving these style configuration objects outside the component to avoid recreating them on each render.
+ const sizeClasses = { + sm: 'p-4 gap-2', + md: 'p-8 gap-4', + lg: 'p-12 gap-6' + }; + + const variantClasses = { + default: 'bg-transparent', + subtle: 'bg-muted/50 rounded-lg', + card: 'bg-card border rounded-lg shadow-sm' + }; + + const imageSize = { + sm: 'w-24 h-24', + md: 'w-48 h-48', + lg: 'w-64 h-64' + }; export const EmptyState: FC<EmptyStateProps> = ({ type = 'default', title: customTitle, message: customMessage, imageSrc: customImageSrc, actionLabel, onAction, showImage = false, className, size = 'md', variant = 'default' }) => { const { title, message, imageSrc } = defaultConfigs[type]; const finalTitle = customTitle || title; const finalMessage = customMessage || message; const finalImageSrc = customImageSrc || imageSrc; - const sizeClasses = { - sm: 'p-4 gap-2', - md: 'p-8 gap-4', - lg: 'p-12 gap-6' - }; - - const variantClasses = { - default: 'bg-transparent', - subtle: 'bg-muted/50 rounded-lg', - card: 'bg-card border rounded-lg shadow-sm' - }; - - const imageSize = { - sm: 'w-24 h-24', - md: 'w-48 h-48', - lg: 'w-64 h-64' - };
150-159: Action button with appropriate conditional rendering.The button is only shown when both
actionLabelandonActionare provided.The size mapping logic can be simplified and accessibility improved:
<Button onClick={onAction} variant="default" - size={size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default'} + size={size === 'md' ? 'default' : size} className="mt-4" + aria-label={`${actionLabel} for ${finalTitle || 'empty state'}`} > {actionLabel} </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/components/ui/empty-state.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (3)
apps/web/components/ui/empty-state.tsx (3)
1-5: Good job with the imports!The imports are well-organized and appropriate for the component's needs.
128-149: Well-structured title and message rendering.The title and message elements are properly conditionally rendered with appropriate styling based on the size prop.
160-162: Overall excellent component implementation.The EmptyState component is well-structured, flexible, and follows React best practices. It provides good customization options while maintaining sensible defaults.
Description
Please include a summary of the changes and the related issues.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of the previous status
Current screenshots
Please add here videos or images of the current (new) status
Summary by CodeRabbit