Addons Page Template #334
Addons Page Template #334
Conversation
|
@ruz3n - Please solve the Storybook Tests issues that are failing in the pipeline. |
There was a problem hiding this comment.
Please check the Template Development Guideline and update the PR as per the document.
Also, please check the feedback points given below:
- The template does not match the Figma mockup.
- Verify and align the overall spacing, padding/margin, icon size, color, text size, and font weight with the Figma mockup.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,401 @@ | |||
| import { Container, Title, Text, Button, Badge, Topbar, Tabs } from '@/components'; | |||
There was a problem hiding this comment.
What: The Addon interface contains a property 'icon' of type 'React.ReactNode'. Since icons can be rendered by an external library (lucide-react in this case), ensure that these icons are properly sanitized to prevent potential Aria hidden issues or XSS, especially if they ever receive user input.
Why: Improper handling of React node types can lead to vulnerabilities where unsanitized user inputs could manipulate the DOM through rendered components, potentially leading to XSS (Cross-Site Scripting) attacks.
How: Consider creating a validation or sanitization function for the 'icon' property to ensure it does not accept any malicious payload.
| icon: <Zap className="size-8" />, | ||
| }, | ||
| { | ||
| id: '3', |
There was a problem hiding this comment.
What: In the AddonCard component, the buttons for install and configure actions (onInstall and onConfigure) are just logging the actions. This may lead to an incomplete flow, risking failure in handling the installation/configuration process.
Why: By not implementing the logic to handle these actions, the buttons serve no functional purpose. This means the user interaction is not leading to any outcome and is misleading.
How: Implement the proper installation and configuration logic within those functions, or at least provide a stub for future implementation.
| onConfigure?: ( addon: Addon ) => void; | ||
| } | ||
|
|
||
| const AddonCard = ( { addon, onInstall, onConfigure }: AddonCardProps ) => ( |
There was a problem hiding this comment.
What: There is usage of inline styles and class names for containers throughout the code. This might become inefficient and hard to maintain as the application grows, especially if styles need to change across multiple instances.
Why: Inline styles reduce the separation of concerns and can lead to redundancy, making it harder to manage in the long term and could impact performance due to increased style recalculations by the browser.
How: Consider using a styling module or global CSS for handling styles more effectively, grouping similar functions together, and making it simpler to change styles at a single point.
| <Tabs.Group | ||
| activeItem="addons" | ||
| variant="underline" | ||
| size="sm" |
There was a problem hiding this comment.
What: Be cautious with the use of class names like 'cursor-pointer' alongside non-functional anchor elements (like '#') without any actual href links. This can create confusion for users and reduce accessibility for keyboard and screen reader users.
Why: Using non-functional links can hinder navigability for users with assistive technologies, leading to a decrease in the usability of the application.
How: Replace the anchor elements with buttons where appropriate, or provide actual URLs if they should navigate elsewhere.
| <Button variant="ghost" size="xs" className="p-1" aria-label="Support"> | ||
| <HelpCircle className="size-4" /> | ||
| </Button> | ||
| </Container.Item> |
There was a problem hiding this comment.
What: Consider implementing proper error handling for the install and configure actions to ensure the user is informed about any issues that may arise while interacting with these features.
Why: Without error handling, users might face unexpected behaviors without any feedback, leading to frustration or confusion when something goes wrong during an interaction.
How: Use try-catch blocks for asynchronous operations or promise error handling strategies to catch and display user-friendly messages on the UI when errors occur.
Description
This PR adds the design implementation corresponding to this figma link -> https://www.figma.com/design/5PxINaOCAK9NdEHMlQk382/Force-UI-Components?node-id=13545-43831&t=cvYnJuhmhOYOhpcv-4
The template shows the list of recommended plugins and themes
Screenshots
Types of changes
How has this been tested?
Checklist: