ComponentKit.js

A lightweight, framework-agnostic JavaScript component library designed for modern web applications.

Features

• ProgressGift Component: Gamified progress tracking with point accumulation and reward systems
• Framework Agnostic: Works with any web framework or vanilla JavaScript
• Lightweight: Minimal dependencies and small footprint
• Version Display: Built-in version indicator for debugging and compatibility
• Customizable: Flexible styling and configuration options

Installation

npm install @gleb.askerko/componentkit-js

Quick Start

ProgressGift Component

import { ProgressGift } from '@gleb.askerko/componentkit-js';

// Create a progress gift component
const progressGift = new ProgressGift({
  maxPoints: 100,
  giftIcon: '🎁',
  showVersion: true // Shows v1.0.0 in top-left corner
});

// Render to DOM
progressGift.render('#progress-container');

// Add points
progressGift.addPoints(25);

Configuration Options

const progressGift = new ProgressGift({
  maxPoints: 100,        // Points needed for each gift
  giftIcon: '🎁',        // Gift emoji/icon
  showVersion: true,     // Show version badge (default: true)
  className: 'custom-class' // Additional CSS classes
});

API Methods

• render(selector) - Mount component to DOM element
• addPoints(amount) - Add points with animation
• restart() - Reset component to initial state
• initProgressGift() - Initialize/reinitialize component

Styling

The component comes with built-in CSS classes that you can customize:

• .ck-progress-gift-wrapper - Main container
• .ck-progress-gift-bar - Progress bar
• .ck-progress-gift-fill - Progress fill
• .ck-progress-version - Version badge (top-left corner)

Version Information

Every component displays its version (v1.0.0) in the top-left corner by default. This can be disabled by setting showVersion: false.

Browser Support

• Modern browsers (ES6+ support)
• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

License

MIT License - see LICENSE file for details.