✨ Confetti#1206
Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Confetti component to the ACL library with animation capabilities for celebrating user actions. The component supports two modes: "boom" (burst from center) and "shower" (continuous rain), with customizable colors, shapes, durations, and effects. It also includes imperative APIs for programmatic triggering.
Changes:
- New Confetti component with declarative React API and imperative function-based API
- Seasonal color palettes with automatic detection for holidays and special events
- Canvas-based particle animation system with physics simulation
- Comprehensive test coverage for utilities, component behavior, and imperative functions
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| Confetti.tsx | Main component implementing canvas-based animation with boom/shower modes |
| Confetti.types.ts | Type definitions for component props and particle system |
| Confetti.constants.ts | Default colors, shapes, and physics constants |
| Confetti.styles.tsx | Styled canvas element for rendering |
| Confetti.stories.tsx | Storybook stories demonstrating component usage |
| utils/utils.ts | Color conversion and random number utilities |
| utils/seasonalColors.ts | Color palettes for seasonal events |
| utils/getSeasonalEvent.ts | Date-based seasonal event detection |
| utils/drawShapes.ts | Canvas drawing functions for different particle shapes |
| utils/createParticle.ts | Particle factory with physics simulation |
| utils/createConfetti.ts | Batch particle creation for boom/shower modes |
| imperatives/boomConfetti.tsx | Imperative API for single boom effect |
| imperatives/showerConfetti.tsx | Imperative API for shower effect |
| Confetti.test.tsx | Component behavior and validation tests |
| Confetti.utils.jsdom.test.tsx | Utility function tests |
| Confetti.imperatives.jsdom.test.tsx | Imperative API tests |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 10 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 9 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 19 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 19 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 19 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Azure DevOps links
User story
Description
This PR creates an ACL Confetti component based on the animation I was working on for Recap. It has two usages:
-As a Confetti component with a series of props controlling type of confetti (boom or shower), duration, repetitions, etc. This component just needs to be rendered to trigger the confetti, and so mounting/unmounting is expected to be handled by the developer using it.
-As a hook that can be called within the Confetti Provider that shows up a confetti boom or shower front and center, by using a react portal straight to the document body.