@gleb.askerko/componentkit-js/README.md

Lightweight, framework-agnostic JavaScript component library with progress gift components

# 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

### ProgressGift Component

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

### Configuration Options

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

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