Add CaniuseLink component for browser compatibility tables

[Copilot]

🎉 Successfully implemented CaniuseLink component to display browser compatibility tables for web features!

Overview

This PR adds a new CaniuseLink component that displays live browser compatibility tables for web features using data from caniuse.com. The component follows the same architectural pattern as existing GithubPermalink and GithubIssueLink components, providing three variants: Base, Client, and RSC.

Features Implemented

✅ Live Data: Fetches real-time compatibility data from caniuse.com GitHub repository
✅ Server-Side Rendering: Full RSC support ensures users get the most recent data
✅ Color-Coded Support: Green (supported), Yellow (partial), Red (not supported)
✅ Multiple Variants: Block and inline display options
✅ Error Handling: Graceful fallback for network/API issues
✅ Consistent API: Follows the same pattern as existing components
✅ Comprehensive Testing: Unit tests with mocking for reliability
✅ TypeScript Support: Full type definitions included

Component Usage

Basic Usage

import { CaniuseLink } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";

<CaniuseLink feature="flexbox" />

Inline Usage

<p>This layout uses <CaniuseLink feature="flexbox" variant="inline" /> for positioning.</p>

RSC Usage

import { CaniuseLinkRsc } from 'react-github-permalink/dist/rsc';

<CaniuseLinkRsc feature="flexbox" />

With Custom Data

import { CaniuseLinkBase } from 'react-github-permalink';

const customData = {
    title: "CSS Flexible Box Layout Module",
    description: "Method of positioning elements...",
    stats: {
        chrome: { "89": "y", "90": "y" },
        firefox: { "84": "y", "85": "y" },
        safari: { "14.0": "y", "14.1": "y" },
        edge: { "89": "y", "90": "y" },
        ie: { "8": "n", "9": "n", "10": "a x", "11": "a" }
    },
    status: "ok"
};

<CaniuseLinkBase feature="flexbox" data={customData} />

Changes Made

• New Components: Added CaniuseLink, CaniuseLinkBase, and CaniuseLinkRsc components
• Configuration: Extended BaseConfiguration to include getCaniuseFn function
• Data Fetching: Implemented defaultGetCaniuseFn that fetches from caniuse GitHub repository
• Styling: Added comprehensive CSS styling with color-coded browser support indicators
• Type Definitions: Added CaniuseLinkDataResponse type for type safety
• Testing: Created unit tests for the new functionality
• Documentation: Updated README with usage examples and configuration details
• Storybook: Added stories for both base and client components

Technical Details

The implementation addresses the original requirement to provide "live tables with the latest information" while being "careful with server rendering" by:

1. Server-Side Data Fetching: RSC components fetch data server-side for fresh information
2. Client-Side Caching: Client components use useEffect for client-side data fetching
3. Error Handling: Graceful degradation when API calls fail
4. Performance: Efficient data fetching from caniuse's GitHub repository

The component displays browser compatibility with intuitive color coding:

• Green: Fully supported
• Yellow: Partial support
• Red: Not supported

Fixes #40.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• caniuse.com
  • Triggering command: curl -s REDACTED (dns block)
• fonts.googleapis.com
  • Triggering command: next-server (v15.3.4) (dns block)
• storybook.js.org
  • Triggering command: node /home/REDACTED/work/react-github-permalink/react-github-permalink/node_modules/.bin/storybook build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 833a642

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for react-github-permalink ready!

Name	Link
🔨 Latest commit	833a642
🔍 Latest deploy log	https://app.netlify.com/projects/react-github-permalink/deploys/686f5b37db83700008e44695
😎 Deploy Preview	https://deploy-preview-68--react-github-permalink.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.