Add avatar component

[skrobek]

User description

---

PR Type

Enhancement, Tests

---

Description

• Implemented a new Avatar component with customizable variants and sizes.
• Added CSS styles for the Avatar component, including online/offline status indicators.
• Created tests for the Avatar component, ensuring correct rendering and snapshot matching.
• Integrated the Avatar component into the component index for export.
• Developed Storybook stories to demonstrate the Avatar component usage.
• Updated the package version to 0.11.7 to reflect new changes.

---

Changes walkthrough 📝

	Relevant files
Enhancement	style.css Add styles for avatar component and status indicators        style.css Added styles for the new avatar component. Defined styles for online and offline status indicators. Introduced new width and text size utility classes. +102/-0  index.ts Export Avatar component                                                                    src/components/index.ts Exported the new Avatar component. +1/-0      avatar.tsx Implement Avatar component with variants and placeholders src/components/ui/avatar/avatar.tsx Implemented the Avatar component with variant and size options. Supported placeholder text and image source. +74/-0    index.ts Export Avatar component from directory                                      src/components/ui/avatar/index.ts Exported the Avatar component from its directory. +1/-0      Avatar.stories.tsx Add Storybook stories for Avatar component                              src/stories/Avatar.stories.tsx Added Storybook stories for the Avatar component. Included example with different props. +21/-0
Tests	avatar.spec.tsx Add tests for Avatar component                                                      src/components/ui/avatar/avatar.spec.tsx Added tests for the Avatar component. Included snapshot tests for image and placeholder states. +21/-0
Configuration changes	package.json Bump package version to 0.11.7                                                      package.json Updated package version from 0.11.6 to 0.11.7. +1/-1

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review CSS Specificity The use of !important in CSS rules for .avatar.\!placeholder > div might lead to specificity issues and could make future CSS maintenance challenging. CSS Variables Fallback Ensure that the CSS variable fallbacks are correctly implemented and tested across different browsers, especially the custom properties used in the avatar component styles. Prop Spreading The use of prop spreading in the Avatar component might lead to unintended props being passed to the DOM elements, which could result in React warnings or HTML validation issues.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Enhancement	Add an alt attribute to the img element to enhance accessibility Ensure that the img element has an alt attribute to improve accessibility and SEO. src/components/ui/avatar/avatar.tsx [46] -<img src={src} /> +<img src={src} alt="Avatar" /> Suggestion importance[1-10]: 8 Why: Adding an alt attribute to the img element is crucial for accessibility and SEO, making this a highly beneficial enhancement.	8
	Implement error handling for image loading failures Consider adding error handling for image loading failures to enhance user experience. src/components/ui/avatar/avatar.tsx [46] -<img src={src} /> +<img src={src} onError={(e) => (e.currentTarget.src = 'default-avatar.png')} /> Suggestion importance[1-10]: 7 Why: Implementing error handling for image loading enhances the user experience by providing a fallback mechanism, which is a good practice in modern web development.	7
Best practice	Use a CSS variable for border-radius to enhance maintainability Consider using a CSS variable for the border-radius value to maintain consistency and ease future updates. style.css [1740-1742] .avatar-group :where(.avatar) { - border-radius: 9999px; + border-radius: var(--max-border-radius); } Suggestion importance[1-10]: 7 Why: Using a CSS variable for border-radius in .avatar-group :where(.avatar) enhances maintainability and consistency across the stylesheet.	7
	Avoid using !important unless absolutely necessary for easier maintenance Ensure the use of !important in CSS rules is necessary as it can make debugging and maintenance difficult. style.css [753-757] .avatar.\!placeholder > div { - display: flex !important; + display: flex; } Suggestion importance[1-10]: 6 Why: Removing !important can make the CSS easier to maintain and debug, although it's necessary to ensure that this change doesn't affect the specificity and override sequence needed in the project's styling.	6