feat: add button style

[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 @nexim/button package to the design system, providing CSS classes for Material Design 3 buttons. It includes various button styles like base, transparent, primary, secondary, tertiary, and error variations, along with icon button options. The package also includes a LICENSE file, a README with installation and usage instructions, and a CHANGELOG.md file.

Highlights

• New Package: Introduces the @nexim/button package, a new component for the design system.
• Material Design 3 Styling: Provides CSS classes for Material Design 3 buttons, ensuring consistent styling across the application.
• Button Variations: Offers a range of button styles, including colored, transparent, and icon buttons, catering to different design needs.
• State Management: Includes comprehensive state management for hover, active, and disabled states, enhancing user interaction.
• Installation and Usage: Provides clear installation and usage instructions in the README, making it easy for developers to integrate the component.

Changelog

Click here to see the changelog

• packages/button/CHANGELOG.md
  • Initial release of the @nexim/button package (version 0.1.0).
  • Adds card component feature.
• packages/button/LICENSE
  • Adds the GNU Affero General Public License v3.0 for the @nexim/button package.
• packages/button/README.md
  • Provides an overview of the @nexim/button package.
  • Includes installation instructions using npm and yarn.
  • Explains basic API usage with a code example.
• packages/button/package.json
  • Defines the package metadata, including name, version, description, keywords, and repository information.
  • Specifies the license as AGPL-3.0-only.
  • Lists the author and contributors.
  • Configures the files to be included in the published package.
  • Sets the publish config to public.
• packages/button/style/main.css
  • Defines CSS classes for various button styles, including base, transparent, primary, secondary, tertiary, and error variations.
  • Implements state management for hover, active, and disabled states.
  • Provides CSS classes for icon buttons with different background styles.
• packages/card/README.md
  • Minor formatting change: Removed trailing whitespace on line 30.
• yarn.lock
  • Adds the @nexim/button package to the yarn lockfile.
  • Minor change: Updates the lockfile to include the new button package and its dependencies.

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.

---

A button's tale, in CSS spun,
From primary hues to errors done.
With hover's grace and active's click,
A digital world at fingertips quick.

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

The pull request introduces a new button component to the design system. The changes include a new changelog entry, license file, README, package.json, and CSS file. Overall, the implementation seems reasonable, but there are some areas that could be improved.

Summary of Findings

• Repository Directory in package.json: The directory field in the package.json file points to the card component instead of the button component. This should be corrected to ensure proper linking and documentation.
• CSS Class Naming Convention: The CSS class naming convention in style/main.css uses -base and other suffixes. Consider using a more descriptive and consistent naming convention for better maintainability and readability.
• README Example: The README example uses button-bass which is likely a typo and should be corrected to button-base or a more appropriate class name.

Merge Readiness

The pull request introduces a new component and associated files. While the changes are generally well-structured, there are a few issues that should be addressed before merging, particularly the incorrect directory in package.json and the typo in the README example. I am unable to approve this pull request, and recommend that another reviewer does so before merging.