Add PubButtonGroup and PubBadge components with documentation updates

[shivishbrahma]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello, 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!

This pull request significantly expands the UI component library by introducing two new components, PubBadge and PubButtonGroup, along with comprehensive documentation. It also enhances existing PubButton and PubIcon components with new features and improves the overall theming system through an automated color generation script, streamlining development and ensuring design consistency.

Highlights

• New Components Introduced: Two new UI components, PubBadge and PubButtonGroup, have been added to the library, expanding the available building blocks for user interfaces.
• Comprehensive Documentation: Dedicated documentation pages and various demo examples have been created for both PubBadge and PubButtonGroup, ensuring clear usage instructions and visual demonstrations.
• Enhanced Existing Components: The PubButton component received new square and prepend/append slot functionalities, while PubIcon gained an aschild prop and an expanded icon set, including new navigation and e-commerce icons.
• Automated Theme Generation: A new script (update_theme.js) was introduced to automatically generate color shades for themes using chroma-js, leading to a more consistent and maintainable color palette in main.css.
• Improved Component Creation Workflow: The create_component.js script was updated to be interactive, prompting for component names and automating the setup of new component files and their documentation entries.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• docs/.vitepress/components/index.ts
  • Updated component table of contents to include PubBadge and PubButtonGroup.
• docs/components/demo/PubBadge/AsLink.vue
  • Added demo for PubBadge as a link.
• docs/components/demo/PubBadge/Bordered.vue
  • Added demo for bordered PubBadge.
• docs/components/demo/PubBadge/Default.vue
  • Added default theme demo for PubBadge.
• docs/components/demo/PubBadge/Icon.vue
  • Added demo for PubBadge with only an icon.
• docs/components/demo/PubBadge/Rounded.vue
  • Added demo for rounded PubBadge.
• docs/components/demo/PubBadge/Size.vue
  • Added size variations demo for PubBadge.
• docs/components/demo/PubBadge/WithIcon.vue
  • Added demo for PubBadge with text and an icon.
• docs/components/demo/PubButton/Default.vue
  • Renamed Theme.vue to Default.vue for PubButton demos.
• docs/components/demo/PubButton/Icon.vue
  • Added demo for icon-only PubButton.
• docs/components/demo/PubButton/WithIcon.vue
  • Added demo for PubButton with icons in prepend/append slots.
• docs/components/demo/PubButton/WithLabel.vue
  • Added demo for PubButton with a label (PubBadge).
• docs/components/demo/PubButtonGroup/Default.vue
  • Added default usage demo for PubButtonGroup.
• docs/components/demo/PubButtonGroup/IconAction.vue
  • Added demo for PubButtonGroup with an icon action.
• docs/components/demo/PubButtonGroup/Rounded.vue
  • Added demo for rounded PubButtonGroup.
• docs/components/demo/PubButtonGroup/WithIcon.vue
  • Added demo for PubButtonGroup with icons.
• docs/components/pub-badge.md
  • Added new documentation page for the PubBadge component, detailing its props and slots.
• docs/components/pub-button-group.md
  • Added new documentation page for the PubButtonGroup component, detailing its props and slots.
• docs/components/pub-button.md
  • Updated PubButton documentation with new sections for default buttons, outline buttons, pill buttons, button sizes, disabled buttons, loading states, buttons with icons, buttons with labels, and icon buttons.
  • Updated theme options to include 'magenta' and 'cyan'.
• docs/components/pub-icon.md
  • Added a description to the frontmatter of the PubIcon documentation.
• package-lock.json
  • Updated package dependencies and versions, including adding 'chroma-js' and updating 'minizlib', 'tar', and 'vitepress'.
  • Removed 'mkdirp' dependency.
• package.json
  • Added 'chroma-js' as a development dependency.
  • Added a new script 'create:component' for automated component generation.
• scripts/create_component.js
  • Modified component creation script to be interactive, prompting for component names.
  • Updated script to automatically generate component exports and add a basic template for new components.
• scripts/update_theme.js
  • Added new script to generate color shades for defined themes using 'chroma-js' and update 'main.css'.
• src/components/PubBadge/PubBadge.vue
  • Added the new PubBadge component, supporting themes, sizes, links, borders, rounded corners, and icon slots.
• src/components/PubBadge/types.ts
  • Defined types for BadgeTheme and BadgeSize.
• src/components/PubBadge/utils.ts
  • Implemented utility functions to generate CSS classes for PubBadge based on its props.
• src/components/PubButton/PubButton.vue
  • Added 'square' prop to PubButton.
  • Introduced 'prepend' and 'append' slots for adding content before and after the default slot.
• src/components/PubButton/utils.ts
  • Updated button utility classes to support the new 'square' prop.
  • Adjusted theme color classes to reflect the new shade generation system.
  • Refined default span classes for button content alignment.
• src/components/PubButtonGroup/PubButtonGroup.vue
  • Added the new PubButtonGroup component, allowing grouping of buttons with optional rounded corners.
• src/components/PubIcon/PubIcon.vue
  • Added 'aschild' prop to PubIcon.
  • Changed the default size of PubIcon from 'md' to 'sm'.
• src/components/PubIcon/icons.ts
  • Added new icon paths for 'cart', 'love_fill', 'sun', 'arrow_up', 'arrow_down', 'arrow_right', 'arrow_left', 'download', and 'upload'.
  • Added new icon aliases, including 'heart-fill', 'heart', and 'light-mode'.
• src/components/PubIcon/types.ts
  • Added '2xs' to the IconSize type definition.
• src/components/PubIcon/utils.ts
  • Added '2xs' size to icon size classes.
  • Modified icon class generation to conditionally apply theme classes based on the 'aschild' prop.
• src/components/PubNavbar/PubNavbarLogo.vue
  • Updated the default image URL path for PubNavbarLogo.
• src/components/index.ts
  • Exported the new PubBadge and PubButtonGroup components.
• src/styles/main.css
  • Refactored theme color definitions to use a generated shade system for blue, red, green, yellow, cyan, magenta, and grey.
  • Added a new 'grey' theme with generated shades.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

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.

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 two new components, PubBadge and PubButtonGroup, complete with documentation and demos. It also features a significant theme overhaul, including a script for generating color scales, and enhances the component creation script. While the additions are substantial and well-structured, I've identified several areas for improvement. There are critical issues in the theme generation script and a utility function that could cause incorrect styling. Additionally, I've noted some incorrect demo implementations, an undocumented breaking change, and minor inconsistencies. My review includes specific suggestions to address these points and improve the overall quality and correctness of the new features.