Feat 18 optimize animations for reduced motion #158
Conversation
feat: include cursorrules
|
@Marvelousmicheal is attempting to deploy a commit to the kindfi Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR updates both documentation and UI components. The README now presents policy information as plain text without bullet points. In the web components, conditional logic has been introduced to apply animations based on the user's reduced motion preference. The sidebar code now includes new constants and styles for smoother width and transform transitions. Additionally, a new module centralizes animation class definitions using Tailwind CSS, ensuring consistent and type-safe UI transitions across components. Changes
Sequence Diagram(s)sequenceDiagram
participant UI as UI Component
participant RM as ReducedMotion Checker
participant AH as Animation Handler
UI->>RM: Check reduced motion preference
alt Reduced Motion Enabled
RM-->>UI: Return TRUE
UI->>AH: Request animation classes (omit animations)
else Reduced Motion Disabled
RM-->>UI: Return FALSE
UI->>AH: Request animation classes (apply animations)
end
AH-->>UI: Provide appropriate animation parameters
UI->>UI: Render with updated animations
Possibly related PRs
Suggested labels
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
chore
![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
🧹 Nitpick comments (5)
apps/web/lib/animation.ts (1)
1-10: Consider enhancing documentation with examples for each animation type.The current documentation provides a good overview, but we could make it more comprehensive by including examples for each animation category. This would help developers understand when to use specific animations.
Add examples in the documentation like this:
/** * ANIMATION UTILITIES * * Predefined animation class combinations for common UI transitions. * Leverages Tailwind CSS animations and Radix UI state attributes. * All values are immutable for type safety (`as const`). * @example * In a dialog.tsx component * className={cn(animations.fade.in)} + * + * @examples + * // Fade animation + * className={cn(animations.fade.in)} + * + * // Zoom animation + * className={cn(animations.zoom.in)} + * + * // Slide animation + * className={cn(animations.slide.fromLeft)} + * + * // Combined animation + * className={cn(animations.fadeAndZoomAndAnimate.inOut)} */apps/web/components/base/sidebar.tsx (1)
41-50: Consider moving transition constants to a shared configuration file.The transition duration and styles could be moved to a shared constants file to maintain consistency across components and improve maintainability.
Create a new file
apps/web/lib/constants/transitions.ts:export const TRANSITIONS = { duration: { default: '200ms', fast: '150ms', slow: '300ms' }, styles: { sidebar: { width: { transition: 'width var(--transition-duration) linear', willChange: 'width' }, transform: { transition: 'transform var(--transition-duration) linear', willChange: 'transform' } } } } as constapps/contract/README.md (3)
13-17: Consistency in List Formatting for Account Factory
The description for the Account Factory still uses leading hyphens. Since the PR objective specifies removal of bullet points in favor of plain text formatting, consider removing the hyphens here to maintain consistency and clarity.
20-26: Revisit Bullet Formatting for Auth Controller
Similar to the Account Factory section, the Auth Controller details still begin with hyphenated list items. To fully align with the PR objective of eliminating bullet points, it might be worthwhile to remove these hyphens for a uniform plain text style.
30-36: Typographical Refinement in Account Contract Descriptions
In the Account Contract description, note the double period after "WebAuthn specifications.." on line 31. Removing the extra period will improve the professionalism and readability of the documentation. In addition, as with previous sections, consider removing the leading hyphen if plain text is the desired style.🧰 Tools
🪛 LanguageTool
[typographical] ~31-~31: Two consecutive dots
Context: ...es, in line with WebAuthn specifications.. - Provides methods for account recovery...(DOUBLE_PUNCTUATION)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/contract/README.md(1 hunks)apps/web/components/base/alert-dialog.tsx(1 hunks)apps/web/components/base/dropdown-menu.tsx(1 hunks)apps/web/components/base/sidebar.tsx(4 hunks)apps/web/lib/animation.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`**/*.ts`: Review TypeScript files ensuring type safety with...
**/*.ts: Review TypeScript files ensuring type safety with no 'any' usage unless justified. Verify named exports, proper error handling with typed errors, and pure functions. Check module encapsulation and consistent naming using camelCase for functions and PascalCase for types. Validate unit test coverage for utilities if required.
apps/web/lib/animation.ts
`**/*.md`: Review documentation for technical accuracy and c...
**/*.md: Review documentation for technical accuracy and completeness. Verify code examples are correct and up-to-date. Ensure clear installation instructions and proper API documentation.
apps/contract/README.md
🧠 Learnings (1)
apps/web/components/base/dropdown-menu.tsx (1)
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.
🪛 LanguageTool
apps/contract/README.md
[typographical] ~31-~31: Two consecutive dots
Context: ...es, in line with WebAuthn specifications.. - Provides methods for account recovery...
(DOUBLE_PUNCTUATION)
🔇 Additional comments (4)
apps/web/components/base/alert-dialog.tsx (1)
54-58: Great implementation of accessibility features!The component effectively handles reduced motion preferences while maintaining proper ARIA attributes. The conditional application of animations based on user preferences aligns well with WCAG guidelines.
apps/web/components/base/dropdown-menu.tsx (1)
26-33: Well-structured animation utility function with clear separation of concerns!The implementation follows best practices by:
- Using an if statement for better readability (as per past learning)
- Centralizing animation logic
- Maintaining consistent behavior with other components
apps/web/components/base/sidebar.tsx (1)
454-457: Great use of will-change property for performance optimization!The implementation properly uses will-change for width and transform properties, which helps browsers optimize animations. The motion-reduce utility class is also correctly applied for accessibility.
apps/contract/README.md (1)
8-9: Clear and Informative Overview Heading
The "Overview" section is introduced clearly, providing a good context for the subsequent contract details.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
…mponents (#158) Co-authored-by: Brandon Fernández <[email protected]> Signed-off-by: Jagadeeshftw <[email protected]>
Summary:
Adds accessibility-focused motion reductions and removes overly complex transition patterns in the sidebar to improve performance and WCAG compliance.
Key Changes:
✅ Added:
@media (prefers-reduced-motion: reduce) handling
Motion-safe/motion-reduce utility variants
Fallback transitions for critical UI elements
❌ Removed:
Nested transform animations
Complex calc()-based width transitions
Redundant transition property overrides
Summary by CodeRabbit
Documentation
New Features
Style