feat(IconKey): adding IconKey to library

[aversini]

PR Type

Enhancement, Tests

---

Description

• Added a new IconKey component with SVG paths and properties.
• Exported the IconKey component in the index file.
• Added tests for the IconKey component in the generic icons prop tests.
• Updated the configuration file to include the new IconKey component.

---

Changes walkthrough 📝

	Relevant files
Enhancement	IconKey.tsx Add new IconKey component with SVG paths                                  packages/ui-icons/src/components/Icons/IconKey.tsx Added a new IconKey component. Implemented SVG paths for the key icon. Included properties such as className, viewBox, spacing, title, and monotone. +48/-0    index.ts Export new IconKey component                                                          packages/ui-icons/src/components/index.ts Exported the new IconKey component. +2/-0      config.json Add configuration for new IconKey component                            packages/ui-icons/lib/icons/config.json Added configuration for the new IconKey component. Included properties such as name, title, and monotone. +5/-0
Tests	Icons.test.tsx Add tests for new IconKey component                                            packages/ui-icons/src/components/Icons/tests/Icons.test.tsx Added tests for the new IconKey component. Included IconKey in the generic icons prop tests. +9/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

Summary by CodeRabbit

• New Features

  • Introduced a new "Key" icon with a monotone style.
  • Added a new IconKey component for displaying the key icon.

• Tests

  • Included tests for the new IconKey component.

[coderabbitai]

Walkthrough

This update introduces a new icon component called IconKey to the UI Icons package. It includes the icon configuration in config.json, the new component file IconKey.tsx, updates to the test suite to include tests for IconKey, and exports the new component in the index file. This addition allows the key icon to be used consistently across the project with different properties and styling options.

Changes

File/Directory	Summary
packages/ui-icons/lib/icons/config.json	Added icon configuration for IconKey.
packages/ui-icons/src/components/Icons/IconKey.tsx	Introduced new IconKey component.
packages/ui-icons/src/components/Icons/__tests__/...	Added IconKey component tests in Icons.test.tsx.
packages/ui-icons/src/components/index.ts	Added export for IconKey component.

Sequence Diagrams

IconKey Component Rendering

sequenceDiagram
    participant User
    participant IconKey Component
    participant Font Awesome Library

    User->>IconKey Component: Include IconKey component
    IconKey Component->>Font Awesome Library: Request for key icon
    Font Awesome Library-->>IconKey Component: Return key icon data
    IconKey Component-->>User: Render key icon with specified properties

Loading

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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 as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[qodo-merge-pro]

PR Reviewer Guide 🔍

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

🧪 PR contains tests

🔒 No security concerns identified

⚡ Key issues to review License Clarification The file header mentions a commercial license from Font Awesome. Ensure that the usage complies with the license, especially if the code is for a commercial product. Hardcoded Values The defaultViewBox and defaultClassName are hardcoded in the component. Consider making these values configurable through props or a configuration file to enhance flexibility.

[qodo-merge-pro]

PR Code Suggestions ✨

Category	Suggestion	Score
Best practice	Set default viewBox value in the function signature for clarity and reliability Ensure that the viewBox prop in the SvgIcon component defaults properly when not provided. Currently, the default is set directly in the JSX, which might lead to unexpected behaviors if viewBox is undefined. Use a default parameter in the function signature instead. packages/ui-icons/src/components/Icons/IconKey.tsx [31] -viewBox={viewBox} +export const IconKey = ({ + viewBox = "0 0 512 512", + ... +}: IconsProps) => { Suggestion importance[1-10]: 9 Why: Setting the default viewBox value in the function signature ensures clarity and reliability, preventing unexpected behaviors if viewBox is undefined. This is a best practice and improves code robustness.	9
Enhancement	Modify the conditional rendering of the title prop to avoid adding an empty title attribute Consider using a conditional rendering approach for the title prop in the SvgIcon component to ensure that the title attribute is only added to the DOM when a title is provided. This can help avoid rendering an empty title attribute, which can be misleading for accessibility tools. packages/ui-icons/src/components/Icons/IconKey.tsx [34] -title={title || "Key"} +title={title ? title : undefined} Apply this suggestion Suggestion importance[1-10]: 8 Why: This suggestion improves accessibility by ensuring that an empty title attribute is not rendered, which can be misleading for accessibility tools. It is a good enhancement for better user experience.	8
Maintainability	Use CSS classes for controlling opacity to enhance maintainability and flexibility Replace the hardcoded opacity values with a more flexible approach using CSS classes or styled components. This would allow easier theming and adjustments without modifying the JavaScript code. packages/ui-icons/src/components/Icons/IconKey.tsx [26] -const opacity = monotone ? "1" : "0.4"; +className={`icon-opacity ${monotone ? 'full' : 'partial'}`} Apply this suggestion Suggestion importance[1-10]: 7 Why: Using CSS classes for opacity control enhances maintainability and flexibility, allowing easier theming and adjustments without modifying the JavaScript code. However, it is not a critical change.	7
	Refactor to use destructuring for props directly in the function signature to enhance code clarity Use destructuring at the function parameter level for monotone and other props to clean up the component body and improve readability. packages/ui-icons/src/components/Icons/IconKey.tsx [17-23] export const IconKey = ({ className, - viewBox, + viewBox = "0 0 512 512", spacing, title, monotone, ...rest }: IconsProps) => { + const opacity = monotone ? "1" : "0.4"; Suggestion importance[1-10]: 6 Why: This refactor improves code readability by cleaning up the component body. While it enhances maintainability, it is a minor improvement and not crucial.	6

[github-actions]

Bundle Size (components)

Status	File	Size (Gzip)	Limits
✅	style.css	7.36 KB	8 KB
✅	index.js	9.8 KB (+4 B +0.04%)	10 KB
✅	vendor.js	65.49 KB	67 KB

Overall bundle size: 82.65 KB (+4 B 0.00%)
Overall status: ✅

Bundle Size (form components)

Status	File	Size (Gzip)	Limits
✅	index.js	4.88 KB (+5 B +0.10%)	20 KB
✅	vendor.js	44.46 KB	67 KB

Overall bundle size: 49.33 KB (+5 B +0.01%)
Overall status: ✅

Bundle Size (system)

Status	File	Size (Gzip)	Limits
✅	style.css	7.67 KB (+7 B +0.09%)	8 KB
✅	index.js	1.93 KB	3 KB
✅	vendor.js	44.46 KB	46 KB

Overall bundle size: 54.06 KB (+7 B +0.01%)
Overall status: ✅

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between acc0192 and efb842c.

Files ignored due to path filters (1)

• packages/ui-icons/lib/icons/svg/key.svg is excluded by !**/*.svg

Files selected for processing (4)

• packages/ui-icons/lib/icons/config.json (1 hunks)
• packages/ui-icons/src/components/Icons/IconKey.tsx (1 hunks)
• packages/ui-icons/src/components/Icons/tests/Icons.test.tsx (3 hunks)
• packages/ui-icons/src/components/index.ts (2 hunks)

Files skipped from review due to trivial changes (3)

• packages/ui-icons/lib/icons/config.json
• packages/ui-icons/src/components/Icons/IconKey.tsx
• packages/ui-icons/src/components/index.ts

Additional comments not posted (3)

packages/ui-icons/src/components/Icons/__tests__/Icons.test.tsx (3)

20-20: Import statement change approved.

The addition of IconKey to the import statement is correct and necessary for testing.

---

277-283: Addition of IconKey to the test suite approved.

The addition of IconKey to the test suite follows the existing pattern and ensures it is tested alongside other icons.

---

315-315: Addition of icon-key to the dataTestId array approved.

The addition of icon-key to the dataTestId array ensures it is included in the loop that verifies the rendered output for each icon.