feat: Add Alert component

[kylengn]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced Alert component with five visual variants: default, info, success, warning, and destructive.
  • Composable Alert subcomponents for structured content: Title, Description, Actions, and Close button with variant-specific styling.

• Documentation

  • Added Storybook stories demonstrating all Alert variants and component composition patterns.

[cursor]

You have run out of free Bugbot PR reviews for this billing cycle. This will reset on November 19.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-ui	Ready	Preview	Comment	Nov 4, 2025 1:39pm

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

This PR introduces a new Alert component for the React UI library with multiple visual variants (default, info, success, warning, destructive), structured subcomponents for content organization, and Storybook documentation. It also expands the icon library by adding a close icon mapping and updates component exports.

Changes

Cohort / File(s)	Summary
Alert Component libs/react/ui/src/components/alert/alert.tsx	Introduces a themed Alert component with seven subcomponents (AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose) using CVA for variant styling (default, info, success, warning, destructive). Includes close button with variant-aware icon styling.
Alert Stories libs/react/ui/src/components/alert/alert.stories.tsx	Adds Storybook meta configuration and two stories: Default (single alert with all subcomponents) and DesignMock (showcase of all variants). Includes argTypes control for variant selection.
Alert Index & Component Exports libs/react/ui/src/components/alert/index.ts libs/react/ui/src/components/index.ts	Adds re-export of alert module components and updates main component index to expose alert exports in the public API.
Icon Library Update libs/react/ui/src/components/icon/icon.tsx	Imports RiCloseLine from RemixIcon and adds close mapping to iconsMap, extending the IconName type.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Alert component structure: Verify the CVA variant configuration matches design specifications and class application logic is correct across all subcomponents
• Close button styling: Confirm that closeIconVariants properly applies variant-specific styles to the RiCloseLine icon
• Storybook stories: Validate that both Default and DesignMock stories accurately represent all component states and configurations
• Icon integration: Ensure RiCloseLine import and mapping doesn't conflict with existing icon infrastructure

Poem

🐰 An alert arrives with colors so bright,
Default, success, warnings taking flight,
With close buttons and stories to tell,
Our UI components now work quite well,
This rabbit declares—the component's swell! 🌟

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: Add Alert component' directly and clearly describes the main change: introduction of a new Alert component to the React UI library.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This PR introduces a new Alert component to the React UI library with support for multiple variants (default, info, success, warning, destructive) and composable sub-components. The component follows the existing design patterns in the codebase.

• Adds a new Alert component with sub-components (AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose)
• Adds the "close" icon (RiCloseLine) to the icon component's icon map
• Exports the new Alert component from the components index

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
libs/react/ui/src/components/index.ts	Exports the alert component from the components barrel file
libs/react/ui/src/components/icon/icon.tsx	Adds RiCloseLine icon to support the close button in alerts
libs/react/ui/src/components/alert/index.ts	Barrel export file for the alert component
libs/react/ui/src/components/alert/alert.tsx	Main implementation of the Alert component with all sub-components
libs/react/ui/src/components/alert/alert.stories.tsx	Storybook stories demonstrating the Alert component usage

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

libs/react/ui/src/components/alert/alert.stories.tsx (1)

34-50: Good coverage of Alert variants.

The Default story demonstrates all the subcomponents clearly. Consider adding an example that logs to console when AlertAction buttons are clicked to showcase the interactive behavior.

libs/react/ui/src/components/alert/alert.tsx (1)

124-145: Close button implemented correctly.

The component properly handles the onClick handler and includes appropriate accessibility attributes with aria-label="Close".

Note that the variant prop must be manually passed to AlertClose to match the parent Alert's variant. Consider using React Context to automatically inherit the variant if this becomes cumbersome, though the current explicit approach is fine for flexibility.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d2f5795 and b05d745.

📒 Files selected for processing (5)

• libs/react/ui/src/components/alert/alert.stories.tsx (1 hunks)
• libs/react/ui/src/components/alert/alert.tsx (1 hunks)
• libs/react/ui/src/components/alert/index.ts (1 hunks)
• libs/react/ui/src/components/icon/icon.tsx (2 hunks)
• libs/react/ui/src/components/index.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*

⚙️ CodeRabbit configuration file

We handle errors at the edge of our applications in most cases. Do not recommend to add error handling around every single function. We prefer them to bubble up and be handled at upper layers.

Files:

• libs/react/ui/src/components/alert/index.ts
• libs/react/ui/src/components/index.ts
• libs/react/ui/src/components/alert/alert.stories.tsx
• libs/react/ui/src/components/alert/alert.tsx
• libs/react/ui/src/components/icon/icon.tsx

🧬 Code graph analysis (2)

libs/react/ui/src/components/alert/alert.stories.tsx (1)

libs/react/ui/src/components/alert/alert.tsx (7)

• Alert (147-147)
• AlertContent (147-147)
• AlertTitle (147-147)
• AlertDescription (147-147)
• AlertActions (147-147)
• AlertAction (147-147)
• AlertClose (147-147)

libs/react/ui/src/components/alert/alert.tsx (1)

libs/react/ui/src/components/icon/icon.tsx (1)

• Icon (45-48)

🔇 Additional comments (9)

libs/react/ui/src/components/alert/index.ts (1)

1-1: LGTM! Standard barrel export pattern.

The file follows the established convention for re-exporting module contents.

libs/react/ui/src/components/index.ts (1)

1-1: LGTM! Alert module properly exposed.

The alert module is correctly added to the public component exports.

libs/react/ui/src/components/icon/icon.tsx (1)

3-3: LGTM! Close icon properly added.

The close icon follows the established pattern for adding new icons to the icon system.

Also applies to: 36-36

libs/react/ui/src/components/alert/alert.stories.tsx (1)

52-77: Excellent visual reference for all variants.

The DesignMock story provides a comprehensive side-by-side comparison of all alert variants.

libs/react/ui/src/components/alert/alert.tsx (5)

6-23: Well-structured variant system.

The alert variants provide clear visual differentiation with appropriate semantic colors for each state.

---

25-38: Variant colors properly coordinated.

The line variants correctly mirror the alert variants for visual consistency.

---

57-71: Solid implementation with good accessibility.

The component properly uses role="alert" for screen reader announcements and aria-hidden for the decorative line element.

---

73-108: Clean composition pattern for content structure.

The subcomponents provide good separation of concerns with appropriate styling defaults and the min-w-0 fix for flex text overflow.

---

147-147: All components properly exported.