Checkpoint

A React component for displaying version checkpoints with restore and view details functionality. Perfect for version control UIs, deployment history, or system state management. Built with TypeScript and supports GSAP animations.

Installation

npm install @sarthakb009/checkpoint

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0

Note: GSAP is optional. If you want GSAP animations, install:

npm install gsap @gsap/react

Usage

Basic Example

import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.4"
      title="Checkpoint"
      description="Optimized context window and updated system prompts."
      timestamp="2 mins ago"
      commitId="8f3a2c"
      isActive={false}
    />
  );
}

Active Checkpoint

import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.5"
      title="Current Version"
      description="Latest stable release with bug fixes."
      timestamp="Just now"
      commitId="a1b2c3"
      isActive={true}
      onRestore={(e) => {
        console.log('Restore clicked');
      }}
      onViewDetails={(e) => {
        console.log('View details clicked');
      }}
    />
  );
}

With Animations

import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.4"
      title="Checkpoint"
      description="Optimized context window"
      timestamp="2 mins ago"
      animated="gsap" // or "css" or false
    />
  );
}

Custom Styling

import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.4"
      title="Checkpoint"
      description="Custom styled checkpoint"
      styles={{
        container: { backgroundColor: '#f0f0f0' },
        title: { color: '#333' },
      }}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | version | string | "v2.4" | No | Version identifier to display | | title | string | "Checkpoint" | No | Title of the checkpoint | | description | string | "Optimized context window and updated system prompts." | No | Description text | | timestamp | string | "2 mins ago" | No | Time string (e.g., "2 mins ago", "Just now") | | commitId | string | "8f3a2c" | No | Commit or identifier to display | | isActive | boolean | false | No | Whether this checkpoint is currently active (shows badge) | | animated | 'gsap' \| 'css' \| false | 'css' | No | Animation type. Requires GSAP for 'gsap' option | | onRestore | (e: React.MouseEvent<HTMLButtonElement>) => void | undefined | No | Callback fired when restore button is clicked | | onViewDetails | (e: React.MouseEvent<HTMLButtonElement>) => void | undefined | No | Callback fired when view details button is clicked | | styles | object | undefined | No | Override internal styles (see TypeScript types) | | className | string | undefined | No | Additional CSS classes | | style | React.CSSProperties | undefined | No | Inline styles for container | | id | string | undefined | No | HTML id attribute |

Features

• ✅ Version Display: Clear version and commit information
• ✅ Active State: Visual indicator for active checkpoints
• ✅ Action Buttons: Restore and view details functionality
• ✅ Animations: CSS or GSAP-powered entrance animations
• ✅ Customizable: Style overrides via styles prop
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and semantic HTML

TypeScript

The component is written in TypeScript and exports all types:

import { Checkpoint, CheckpointProps, AnimationType } from '@sarthakb009/checkpoint';

const props: CheckpointProps = {
  version: "v2.4",
  title: "Checkpoint",
  animated: "css" as AnimationType,
};

License

MIT