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

``bash
npm install @gleb.askerko/componentkit-js
`

Quick Start

$3

`javascript
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);
`

$3

`javascript
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
});
`

$3

- 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.