[web]Feat 36 standardize animations #108
Conversation
|
@Marvelousmicheal is attempting to deploy a commit to the kindfi Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduce a new custom hook, Changes
Sequence Diagram(s)sequenceDiagram
participant C as Component
participant RM as useReducedMotion Hook
participant M as Media Query
C->>RM: Invoke hook to check reduced motion preference
RM->>M: Query 'prefers-reduced-motion'
M-->>RM: Return boolean value
RM-->>C: Provide reducedMotion state
alt Reduced motion enabled
C->>C: Apply static (non-animated) CSS classes
else
C->>C: Apply animated CSS classes from animations module
end
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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
added
documentation
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/web/bun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (8)
apps/web/.gitignore(1 hunks)apps/web/components/base/alert-dialog.tsx(2 hunks)apps/web/components/base/dialog.tsx(2 hunks)apps/web/components/base/dropdown-menu.tsx(3 hunks)apps/web/components/base/sheet.tsx(2 hunks)apps/web/hooks/use-reduced-motion.tsx(1 hunks)apps/web/lib/animation.ts(1 hunks)apps/web/tailwind.config.ts(2 hunks)
👮 Files not reviewed due to content moderation or server errors (4)
- apps/web/tailwind.config.ts
- apps/web/components/base/sheet.tsx
- apps/web/components/base/alert-dialog.tsx
- apps/web/components/base/dropdown-menu.tsx
🧰 Additional context used
📓 Learnings (3)
apps/web/components/base/dropdown-menu.tsx (2)
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/components/base/dropdown-menu.tsx:48-65
Timestamp: 2025-01-27T08:48:57.046Z
Learning: In the dropdown menu component, when implementing animation class utilities, using an if statement for the reducedMotion check is preferred over a ternary operator for better readability.
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/components/base/dropdown-menu.tsx:48-65
Timestamp: 2025-01-27T01:17:36.610Z
Learning: In the dropdown menu component, slide animations that are specific to dropdown positioning (e.g., data-[side=bottom]:slide-in-from-top-2) should be kept within the component file rather than in the centralized animation.ts, as they are component-specific and not reused elsewhere.
apps/web/hooks/use-reduced-motion.tsx (2)
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/hooks/use-reduced-motion.tsx:1-35
Timestamp: 2025-01-27T00:58:24.309Z
Learning: Guard clauses for SSR compatibility in React hooks should check for `typeof window === 'undefined'` at the start of useEffect hooks that access browser APIs.
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/hooks/use-reduced-motion.tsx:1-38
Timestamp: 2025-01-27T09:29:32.886Z
Learning: The MediaQueryList API in older Safari browsers requires using `addListener`/`removeListener` instead of `addEventListener`/`removeEventListener`. Always include this fallback when working with media queries.
apps/web/tailwind.config.ts (1)
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/tailwind.config.ts:100-101
Timestamp: 2025-01-25T09:50:47.511Z
Learning: In the Tailwind configuration for fade animations, using `ease-in-out` timing function is preferred over separate `ease-in` and `ease-out` functions to maintain consistency and provide smoother transitions.
🔇 Additional comments (21)
apps/web/.gitignore (1)
39-44: Environment configuration files added to .gitignore.The update now includes multiple environment configuration files (.env.local, .env.development, .env.test, and .env.production) alongside the existing .env file. This ensures that sensitive or environment-specific settings are not accidentally committed, aligning with best practices for environment management. The changes are clear and consistent with the project’s configuration strategy.
apps/web/components/base/dialog.tsx (1)
22-39: Great integration of reduced motion logic in DialogOverlay.The conditional application of
'bg-black/80'for reduced motion and the'fadeAndAnimateAndOverlay.inOut'animation for the default state is a clear solution to accommodate users who prefer less motion. Well done!apps/web/tailwind.config.ts (6)
102-109: LGTM! Well-documented animation configurations.The documentation clearly describes the purpose and usage of fade animations, making it easier for other developers to understand and implement them correctly.
119-126: LGTM! Animation configurations align with best practices.The fade animations are well-implemented with:
- Proper opacity transitions
- Consistent ease-in-out timing function (as per previous learnings)
Also applies to: 131-132
102-109: LGTM! Well-documented animation utilities.The documentation clearly explains the purpose and usage of the fade animations, making it easier for other developers to understand and use them correctly.
119-126: LGTM! Consistent timing function used.The fade animations use
ease-in-outtiming function as recommended in the retrieved learnings, which provides smoother transitions.
102-109: Well-documented animation utilities!Clear and comprehensive documentation for the fade animations, specifying their purpose and usage across different components.
119-126: LGTM! Animation configuration aligns with best practices.The fade animations use the recommended
ease-in-outtiming function as per the retrieved learning, providing smooth transitions.Also applies to: 131-132
apps/web/components/base/sheet.tsx (5)
23-38: LGTM! Well-implemented reduced motion support.The SheetOverlay component correctly implements reduced motion support by:
- Using the useReducedMotion hook
- Conditionally applying animations
- Providing a static fallback for users who prefer reduced motion
42-42: LGTM! Transition durations updated to use standardized values.The sheetVariants configuration now uses the new standardized duration values (
duration-slow,duration-fast), improving consistency across animations.
23-38: LGTM! Proper implementation of reduced motion support.The component correctly uses the
useReducedMotionhook to conditionally apply animations, improving accessibility for users who prefer reduced motion.
23-38: LGTM! Proper implementation of reduced motion preferences.The SheetOverlay component correctly handles reduced motion preferences by conditionally applying animations.
42-42: Verify transition duration classes.The duration classes have been updated from hardcoded values to the new standardized durations.
✅ Verification successful
Verified: New standardized transition durations confirmed.
- The Tailwind configuration in
apps/web/tailwind.config.tsdefinesslowas'500ms'andfastas'300ms'.- The component at
apps/web/components/base/sheet.tsxcorrectly references these standardized duration classes.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the new duration classes are defined in the Tailwind config rg -A 1 "duration-(slow|fast|default)" apps/web/tailwind.config.tsLength of output: 68
Script:
#!/bin/bash # Description: Search the entire repository for references to "duration-slow" and "duration-fast" rg -n "duration-slow" . echo "" rg -n "duration-fast" .Length of output: 536
Script:
#!/bin/bash # Description: Search the tailwind.config.ts for any definitions of standardized duration values "slow" or "fast" rg -n "slow" apps/web/tailwind.config.ts echo "" rg -n "fast" apps/web/tailwind.config.tsLength of output: 138
apps/web/components/base/alert-dialog.tsx (3)
20-36: LGTM! Consistent implementation of reduced motion support.The AlertDialogOverlay component follows the same pattern as SheetOverlay, ensuring consistency across components.
20-36: LGTM! Proper implementation of reduced motion support.The component correctly uses the
useReducedMotionhook to conditionally apply animations, improving accessibility.
20-36: LGTM! Consistent implementation of reduced motion preferences.The AlertDialogOverlay component follows the same pattern as SheetOverlay for handling reduced motion preferences.
apps/web/components/base/dropdown-menu.tsx (5)
23-33: LGTM! Well-implemented animation utility function.The
getDropdownAnimationClassesfunction:
- Is well-documented
- Uses if statement for readability (as per previous learnings)
- Correctly keeps slide animations within the component (as per previous learnings)
60-73: LGTM! Consistent implementation across dropdown components.Both DropdownMenuSubContent and DropdownMenuContent components:
- Use the shared utility function
- Implement reduced motion support consistently
Also applies to: 77-96
23-33: LGTM! Well-structured animation utility.The utility follows the learning about using if statement over ternary operator for better readability.
23-33: LGTM! Well-structured animation utility function.The
getDropdownAnimationClassesfunction follows the recommended pattern of using an if statement for reduced motion checks, as per the retrieved learning.
60-73: LGTM! Consistent animation handling across components.Both DropdownMenuSubContent and DropdownMenuContent components properly implement reduced motion preferences using the utility function.
Also applies to: 77-96
feat: include cursorrules
Marvelousmicheal
force-pushed
the
feat-36-standardize-animations
branch
from
9a73c5a to
02c2828
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (7)
apps/web/components/base/alert-dialog.tsx(2 hunks)apps/web/components/base/dialog.tsx(2 hunks)apps/web/components/base/dropdown-menu.tsx(3 hunks)apps/web/components/base/sheet.tsx(2 hunks)apps/web/hooks/use-reduced-motion.tsx(1 hunks)apps/web/lib/animation.ts(1 hunks)apps/web/tailwind.config.ts(2 hunks)
🧰 Additional context used
📓 Learnings (3)
apps/web/components/base/dropdown-menu.tsx (2)
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/components/base/dropdown-menu.tsx:48-65
Timestamp: 2025-01-27T01:17:36.610Z
Learning: In the dropdown menu component, slide animations that are specific to dropdown positioning (e.g., data-[side=bottom]:slide-in-from-top-2) should be kept within the component file rather than in the centralized animation.ts, as they are component-specific and not reused elsewhere.
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/components/base/dropdown-menu.tsx:48-65
Timestamp: 2025-01-27T08:48:57.046Z
Learning: In the dropdown menu component, when implementing animation class utilities, using an if statement for the reducedMotion check is preferred over a ternary operator for better readability.
apps/web/tailwind.config.ts (1)
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/tailwind.config.ts:100-101
Timestamp: 2025-01-25T09:50:47.511Z
Learning: In the Tailwind configuration for fade animations, using `ease-in-out` timing function is preferred over separate `ease-in` and `ease-out` functions to maintain consistency and provide smoother transitions.
apps/web/hooks/use-reduced-motion.tsx (2)
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/hooks/use-reduced-motion.tsx:1-35
Timestamp: 2025-01-27T00:58:24.309Z
Learning: Guard clauses for SSR compatibility in React hooks should check for `typeof window === 'undefined'` at the start of useEffect hooks that access browser APIs.
Learnt from: Marvelousmicheal
PR: kindfi-org/kindfi#70
File: apps/web/hooks/use-reduced-motion.tsx:1-38
Timestamp: 2025-01-27T09:29:32.886Z
Learning: The MediaQueryList API in older Safari browsers requires using `addListener`/`removeListener` instead of `addEventListener`/`removeEventListener`. Always include this fallback when working with media queries.
🔇 Additional comments (17)
apps/web/components/base/dialog.tsx (3)
6-7: Imports look good.
These imports cleanly introduce theuseReducedMotionhook and theanimationsmodule, aligning with the PR's goal of centralizing animations and supporting reduced-motion preferences.
21-36: Conditional application of overlay animation is well-structured.
UsinguseReducedMotionto selectively applyfadeAndAnimateAndOverlay.inOutensures accessibility for users who prefer reduced motion. This approach is consistent with the SSR guard best practices used elsewhere.
39-71: Consider consolidating combined animations.
TheDialogContentincludes bothanimations.fadeAndAnimate.inOutand manual zoom/slide transitions (e.g.,data-[state=closed]:zoom-out-95). This was previously noted in an outdated commit review:"Consider consolidating fade, zoom, and animation into a single utility..."
If you wish to reduce complexity, you could unify these transitions into one combined utility in theanimationsmodule or keep them fully separate, but ensure clarity in maintenance.apps/web/components/base/dropdown-menu.tsx (3)
23-33: Utility function for dropdown animations is clearly structured.
ThegetDropdownAnimationClassesapproach neatly separates the logic forreducedMotion, improving readability and maintainability.
60-74: Retain component-specific slide animations locally.
The existing data attributes (e.g.,data-[side=bottom]:slide-in-from-top-2) duplicate some logic found inanimations.slideAndAnimate.slideIn. Per your retrieved learnings, consider removing the slide logic from the centralanimationsor removing the local variant to avoid duplication and confusion.
78-97: Consistent reducedMotion handling.
The usage ofuseReducedMotionforDropdownMenuContentparallels yourSubContentlogic, ensuring consistent experiences whether a user prefers standard or reduced animations. Good job!apps/web/hooks/use-reduced-motion.tsx (2)
22-24: Remove redundant type union.
The type annotation repeatsMediaQueryListEvent. Per your past review comment, a singleMediaQueryListEventis sufficient.Apply this minor fix:
- const handleChange = (e: MediaQueryListEvent | MediaQueryListEvent) => { + const handleChange = (e: MediaQueryListEvent) => { setReducedMotion(e.matches) }
7-36: Well-implemented SSR guard and fallback for older browsers.
Your early exit for SSR and use ofaddEventListener/removeEventListenerwith aaddListener/removeListenerfallback meet compatibility requirements. This ensures robust support for a range of user agents.apps/web/lib/animation.ts (5)
35-47: LGTM! Well-organized slide animations.The slide animations are well-structured with clear directional naming and logical grouping of entrance and exit animations.
62-71: LGTM! Effective combination of animations.The combined animations are well-implemented, with clear naming and efficient class combination using array join.
77-84: LGTM! Consistent implementation pattern.The fade and animate combination follows the established pattern effectively.
53-56: 🧹 Nitpick (assertive)Align naming with other animation categories.
For consistency with other animation categories, consider updating the naming:
animate: { - in: 'data-[state=open]:animate-in', - out: 'data-[state=closed]:animate-out', + onOpen: 'data-[state=open]:animate-in', + onClose: 'data-[state=closed]:animate-out', },Likely invalid or redundant comment.
17-20: 🛠️ Refactor suggestionClarify fade animation naming.
The current naming of fade animations is counterintuitive:
inapplies fade-out when closingoutapplies fade-in when closingConsider using more descriptive names to prevent confusion:
fade: { - in: 'data-[state=closed]:fade-out-0', - out: 'data-[state=closed]:fade-in-0', + onClose: 'data-[state=closed]:fade-out-0', + onOpen: 'data-[state=closed]:fade-in-0', },Likely invalid or redundant comment.
apps/web/tailwind.config.ts (2)
134-137: Use semantic names for transition durations.The current duration names are confusing as
fast(300ms) is slower thandefault(200ms).Consider using semantic names:
transitionDuration: { - default: '200ms', - slow: '500ms', - fast: '300ms', + instant: '200ms', + normal: '300ms', + relaxed: '500ms', },
119-126: LGTM! Clear and well-documented fade animations.The fade animation keyframes are well-implemented with clear documentation of their usage.
apps/web/components/base/sheet.tsx (1)
22-37: LGTM! Well-implemented reduced motion support.The SheetOverlay component effectively handles reduced motion preferences by conditionally applying appropriate classes.
apps/web/components/base/alert-dialog.tsx (1)
54-60: Extract animation class logic.The component applies multiple animation classes that could potentially conflict. Consider extracting this logic into a utility function:
+const getDialogAnimationClasses = (reducedMotion: boolean): string => { + if (reducedMotion) return animations.contentSlide.inOut + return [ + animations.fadeAndZoomAndAnimate.inOut, + animations.contentSlide.inOut + ].join(' ') +} className={cn( 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-default', - reducedMotion ? '' : animations.fadeAndZoomAndAnimate.inOut, - animations.contentSlide.inOut, + getDialogAnimationClasses(reducedMotion), 'sm:rounded-lg', className, )}
…mponents (kindfi-org#108) Co-authored-by: Brandon Fernández <[email protected]> Co-authored-by: Roberto Lucas <[email protected]>
* feat: Implement Escrow Initialization API Endpoint #48 * fix: escrow types * fix: metadata fields * fix: minor fixes * fix: Number * enhancement: dates * enhancement: dates * feat: refactoring * fix: refactoring, fixes * feat: enhance forms inputs accessibility (#79) * feat: adding aria attributes * feat: removing extra attributes * Update apps/web/app/(auth-pages)/sign-in/page.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/web/app/(auth-pages)/sign-up/page.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: adding error messages * feat: adding values to footer input * feat: fix build error * feat: adding validation hook * Update apps/web/hooks/use-form-validation.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/web/hooks/use-form-validation.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/web/hooks/use-form-validation.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: adjusting email regex * Update apps/web/hooks/use-form-validation.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: adding resetValidation * feat: adjusting resetValidation --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * [web] feat: add descriptive aria labels to all buttons (#80) * feat: update all buttons with descriptive aria-labels * fix: remove redundant aria-labels * fix: remove redundant aria-label from sign-up button * fix: refactor aria-label text on sign up and sign in button * feat: test commit * refactor(buttons): simplify aria-labels for accessibility * refactor(buttons): remove redundant aria-labels for clarity * feat: adding semantic html for dialog (#76) * feat: adding semantic html for dialog * fix: code rabbit fixes * feat: adding semantic html for dialog * feat: adding semantic html for dialog * feat: adding semantic html for dialog * fix(dialog): last fixes for accessibility * fix: adding coderabbit changes * fix: adding coderabbit changes * Update dialog.tsx * feat(components): Create project details components for project page (#97) Co-authored-by: Brandon Fernández <[email protected]> * feat(alert):Implemented-aria-live-regions-#34 (#95) * feat(alert):Implemented-aria-live-regions-#34 * Update apps/web/components/base/alert-dialog.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/web/components/base/alert-dialog.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Brandon Fernández <[email protected]> * update: improvementes on navigation menu (#89) * update: improvementes on navigation menu * update: improvement on navigation menu * update: comment to sign the commit * update remove comment to sign the commit --------- Co-authored-by: Dario Zamora Rojas <[email protected]> Co-authored-by: Brandon Fernández <[email protected]> * feat: Feat building participation card v2 (#98) * [web] impr: rename, organize and implement lazy loading in home sections (#82) * feat(web): add sections directory structure and organize home components * impr(web): implement lazy loading for home sections * chore(web): resolve requested changes from PR #38 * chore(web): resolve requested changes from PR #38 * chore(web): resolve requested changes from PR #38 * chore(web): resolve requested changes from PR #38 * chore(web): resolve requested changes from PR #38 * chore(web): remove unnecessary files * fix(web): build errors --------- Co-authored-by: Roberto Lucas <[email protected]> * [web] feat: project achievement components (#99) * feat: implement user achievements and collection component - user view * refactor: move fallbacks folder to components folder --------- Co-authored-by: Roberto Lucas <[email protected]> * [web] feat: kindfi theme colours and breakpoints for (#96) * Add custom theme and breakpoints for ShadCN * Add custom theme and breakpoints to Tailwind config update * refactor: extract breakpoints into shared constant * refactor: extract breakpoints into shared constant * refactor: extract breakpoints into shared constant * refactor: extract breakpoints into shared constant * feat: updated colour patterns * enhancements: AI recommendations * enhancements: AI recommendations1 * enhancement: modify type * [web] feat: improve dialog focus management and a11y + linting errors (#105) * feat(dialog): improve focus management and a11y. Fix linting errors 1. Improve Dialog focus management and a11y 2. Fix linting errors. * refactor: use event IDs as keys instead of titles/labels. Wrap media thumbnails in buttons * refactor: add --no-install clause to husky commit-msg * fix: assign appropraite IDs to mocked data in otder to resolve type errors in project-updates.tsx * fix: remove duplicate ID in mock data * [web] impr: remove duplicated layout #78 (#94) * fix(layout): resolve duplicated layout issue and remove redundant wrapper * fix: duplicate layout issues and lint errors * fix(components): resolve linting issues in project components --------- Co-authored-by: Favour Abangwu <[email protected]> * fix: base img render + copilot instructions + biome config tweak (#112) * fix: base img render + copilot instructions + biome config tweak * fix: coderabbitai suggestions * refactor(ui): create use-reduced alt, and apply it across affected components (#108) Co-authored-by: Brandon Fernández <[email protected]> Co-authored-by: Roberto Lucas <[email protected]> --------- Co-authored-by: Diego Barquero Quesada <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Favour Abangwu <[email protected]> Co-authored-by: Kevin Latino <[email protected]> Co-authored-by: Josué Araya Marín <[email protected]> Co-authored-by: Brandon Fernández <[email protected]> Co-authored-by: Frankie Power <[email protected]> Co-authored-by: Dario Zamora <[email protected]> Co-authored-by: Dario Zamora Rojas <[email protected]> Co-authored-by: davedumto <[email protected]> Co-authored-by: Derian <[email protected]> Co-authored-by: Roberto Lucas <[email protected]> Co-authored-by: Nnaji Benjamin <[email protected]> Co-authored-by: ayo-ola0710 <[email protected]> Co-authored-by: Emmanuel Ejei-Okeke <[email protected]> Co-authored-by: Lulu <[email protected]> Co-authored-by: Marvelousmicheal <[email protected]>
Overview:
This pull request introduces significant improvements to the animation system in our project. The primary goal was to make animations more reusable, scalable, and accessible while also providing an alternative reduced-animation option for better accessibility compliance.
Key Changes:
Reusable Animation Components:
Reduced Animation Alternative:
prefers-reduced-motionmedia queries).Centralized Animation Management:
animation.tsfile to serve as a single source of truth for all animations. This file will act as a library where new animations can be added systematically when required.Implementation Details:
Refactored Components:
animation.ts.**Reduced Animation Logic:
prefers-reduced-motionpreference using CSS media queries.**Animation Library (
animation.ts):Summary by CodeRabbit
New Features
Refactor