feat(packageManagerSwitcher): Add Package Manager Tabs Component for Documentation to wrap codespaces.

[shashankxrm]

Summary

Added a new PackageManagerTabs component to improve the documentation experience by providing an interactive way to switch between different package manager commands (npm, yarn, pnpm, bun) with a modern UI inspired from vitest documentation.

Motivation

This new feature improves the documentation experience by providing an interactive way to switch between different package manager commands (npm, yarn, pnpm, bun) with a modern UI .

Changes Made

New Component

• Created PackageManagerTabs.tsx component with the following features:
  • Interactive tab switching between package managers
  • Persistent user preference using localStorage
  • Copy to clipboard functionality
  • Dynamic package name support
  • Custom package manager support
  • Modern UI with package manager icons ( For now using icon-png added in site/public/icons)

Integration

• Integrated the component into the MDX system by:
  • Adding it to components/mdx/index.tsx as a replacement for pre elements
  • Ensuring it works seamlessly with existing MDX content

Styling

• Added modern UI elements:
  • Tab-based interface with active state indicators
  • Package manager icons
  • Copy button with success state
  • Consistent styling with the existing documentation theme

Features

• Tab Switching: Users can easily switch between different package managers
• Persistent Preference: Remembers user's last selected package manager
• Copy Command: One-click copy functionality for the active command
• Dynamic Package Names: Supports different package names through props
• Custom Package Managers: Extensible system for adding custom package managers
• Responsive Design: Works well on all screen sizes

Usage Example

<PackageManagerTabs packageName="lovit" />

Screen.Recording.2025-05-20.at.13.24.57.mov

Change Type

• 🐞 Bug fix (non-breaking fix for an issue)
• ✨ Feature (non-breaking addition)
• 🧹 Refactor (non-breaking improvements, no behavior change)
• 💥 Breaking change (fix or feature that would change existing functionality)

Checklist

• I’ve read the Contributing Guidelines
• My code matches the project’s coding style (npm run lint)
• My change introduces changes to the documentation
• I’ve updated documentation where needed
• I’ve added tests covering new behavior( Thought to add tests but not clear where to add the test file. Some guidance will do it.)
• All existing and new tests pass

Related Issues

• Closes Add package manager tab switcher for install commands in docs #9

[MohamadSalman11]

Hi @shashankxrm 👋,

Thanks for your work on the PackageManagerTabs component! The feature works, but to follow our project practices, please note a few points:

1. Icons: Use SVGs instead of PNGs for better quality.
2. Styling: All styles for the package manager switcher should use TailwindCSS instead of the CSS added in site/src/styles/index.css.
3. Component Type: Avoid using the React.FC prefix when creating components.
4. Clipboard Icons: Use SVG files for the clipboard/check icons instead of inline SVG code in the component.

Tip: Always look at other files in the project to follow the same structure and practices.

This is just feedback to align with project standards—it doesn’t mean the component isn’t working.