feat: add card component

[s-ali-k]

Description

Tasks

Code & Documentation:

• 📝 Self-Review: Thoroughly review your code changes.
• 📚 Code Documentation: Update/create all necessary in-code documentation.
• 📖 User Guides (If Applicable): Add necessary guides to README or other help files.
• 🎨 Formatting: Ensure code is properly formatted.

Project Management & Tracking:

• 📅 Daily Report (If Applicable): Record changes in the company's daily report.
• ⬆️ GitHub Management: Ensure PR is assigned, added to the correct project, and has appropriate labels. Confirm it adheres to the single purpose principle.
• 🏷️ Set Label: Select and apply the appropriate label(s) for this pull request (e.g., bug, feature, enhancement, documentation). This helps categorize and track the changes.
• 🎯 Single Purpose PR: Confirm this PR addresses a single, well-defined change.

Deployment & Testing (If Applicable):

• 🔄 Rebase: Ensure your branch is rebased and updated.
• ✅ Local Deployment Testing: Deploy and test locally if changes affect functionality.

[gemini-code-assist]

Hello @s-ali-k, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request introduces a new card component to the @nexim design system. The component provides CSS classes for rendering Material Design cards with consistent styling. The changes include adding a LICENSE file, a README with installation and usage instructions, a package.json file with metadata, and a main.css file defining the card styles. Additionally, the README file for the @nexim/icon package was updated to remove a badge.

Highlights

• New Component: A new card component is added to the @nexim design system, providing a reusable card styling.
• CSS Styling: The card component's styling is defined in style/main.css, using Tailwind CSS utility classes for a Material Design-inspired look.
• Package Metadata: A package.json file is created for the card component, including metadata such as name, version, description, keywords, and repository information.
• Documentation: A README file is added to the card component, providing installation instructions, API usage, and a basic example.

Changelog

Click here to see the changelog

• packages/card/LICENSE
  • Added the GNU Affero General Public License v3 for the card component.
• packages/card/README.md
  • Created a README file with an overview of the card component.
  • Added installation instructions using npm and yarn.
  • Provided API usage instructions, including how to import the CSS and use the card-filled class.
  • Included a basic HTML example demonstrating the usage of the card-filled class.
• packages/card/package.json
  • Created a package.json file for the card component.
  • Defined the package name, version, description, keywords, and other metadata.
  • Specified the license as AGPL-3.0-only.
  • Configured the files to be included in the published package.
• packages/card/style/main.css
  • Created a main.css file to define the CSS styles for the card component.
  • Used the @layer components directive to organize the component styles.
  • Defined the card-filled class with Tailwind CSS utility classes for background, elevation, flex layout, gap, rounded corners, and padding.
  • Added a stateful modifier class to apply state-onSurface styles.
• packages/icon/README.md
  • Removed the npm bundle size badge from the README file.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

Trivia time!

What is the primary purpose of the GNU Affero General Public License (AGPL)?

Click here for the answer

The GNU Affero General Public License (AGPL) is specifically designed to ensure that modified versions of software used on network servers are made available to the community.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new card component to the design system. The changes include adding a LICENSE file, a README.md file, a package.json file, and a main.css file for the component's styling. The README.md file in the icon package was also modified. Overall, the changes seem well-structured and follow the conventions used in the existing packages. However, there are a few areas that could be improved for clarity and maintainability.

Summary of Findings

• Inconsistent package descriptions: The package.json description for the card component incorrectly references 'Material Design 3 icons' instead of 'Material Design cards'. This should be updated for accuracy.
• README.md inconsistency: The README.md for the card component still has the title for the icon component. This should be updated.
• Missing component documentation: The README.md file for the card component lacks detailed documentation on how to use and customize the component. Providing more comprehensive examples and explanations would improve usability.

Merge Readiness

The pull request introduces a new component and associated files. While the code appears functional, the inconsistencies in package descriptions and missing component documentation should be addressed before merging. I am unable to directly approve this pull request, and recommend that others review and approve this code before merging. At a minimum, the high severity issues should be addressed before merging.

[njfamirm]

thanks