@gleb.askerko/componentkit-js/examples/script.js

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

// Button Examples
function createButtonExamples() {
    // Primary buttons
    const primaryBtn = new ComponentKit.Button({
        text: 'Primary',
        variant: 'primary',
        onClick: () => alert('Primary button clicked!')
    });
    primaryBtn.render('#button-primary-demo');

    // Secondary buttons
    const secondaryBtn = new ComponentKit.Button({
        text: 'Secondary',
        variant: 'secondary',
        onClick: () => alert('Secondary button clicked!')
    });
    secondaryBtn.render('#button-secondary-demo');

    // Outline buttons
    const outlineBtn = new ComponentKit.Button({
        text: 'Outline',
        variant: 'outline',
        onClick: () => alert('Outline button clicked!')
    });
    outlineBtn.render('#button-outline-demo');

    // Different sizes
    const sizesContainer = document.getElementById('button-sizes-demo');
    
    const smallBtn = new ComponentKit.Button({
        text: 'Small',
        size: 'small',
        variant: 'primary'
    });
    
    const mediumBtn = new ComponentKit.Button({
        text: 'Medium',
        size: 'medium',
        variant: 'primary'
    });
    
    const largeBtn = new ComponentKit.Button({
        text: 'Large',
        size: 'large',
        variant: 'primary'
    });

    smallBtn.render(sizesContainer);
    sizesContainer.appendChild(document.createElement('br'));
    sizesContainer.appendChild(document.createElement('br'));
    mediumBtn.render(sizesContainer);
    sizesContainer.appendChild(document.createElement('br'));
    sizesContainer.appendChild(document.createElement('br'));
    largeBtn.render(sizesContainer);
}

// Input Examples
function createInputExamples() {
    // Text input
    const textInput = new ComponentKit.Input({
        label: 'Full Name',
        placeholder: 'Enter your name',
        type: 'text'
    });
    textInput.render('#input-text-demo');

    // Email input with validation
    const emailInput = new ComponentKit.Input({
        label: 'Email Address',
        placeholder: 'user@example.com',
        type: 'email',
        validation: { email: true }
    });
    emailInput.render('#input-email-demo');

    // Password input
    const passwordInput = new ComponentKit.Input({
        label: 'Password',
        placeholder: 'Enter password',
        type: 'password',
        validation: { minLength: 6 }
    });
    passwordInput.render('#input-password-demo');

    // Required input
    const requiredInput = new ComponentKit.Input({
        label: 'Required Field',
        placeholder: 'This field is required',
        required: true
    });
    requiredInput.render('#input-required-demo');
}

// Card Examples
function createCardExamples() {
    // Basic card
    const basicCard = new ComponentKit.Card({
        title: 'Basic Card',
        content: 'This is a simple card with title and content.',
        variant: 'default'
    });
    basicCard.render('#card-basic-demo');

    // Card with actions
    const actionsCard = new ComponentKit.Card({
        title: 'Interactive Card',
        content: 'This card has action buttons.',
        actions: [
            { 
                text: 'Like', 
                variant: 'primary',
                onClick: () => alert('Liked!')
            },
            { 
                text: 'Share', 
                variant: 'outline',
                onClick: () => alert('Shared!')
            }
        ]
    });
    actionsCard.render('#card-actions-demo');

    // Elevated card
    const elevatedCard = new ComponentKit.Card({
        title: 'Elevated Card',
        content: 'This card has enhanced shadow styling.',
        variant: 'elevated'
    });
    elevatedCard.render('#card-elevated-demo');

    // Outlined card
    const outlinedCard = new ComponentKit.Card({
        title: 'Outlined Card',
        content: 'This card has a prominent border.',
        variant: 'outlined'
    });
    outlinedCard.render('#card-outlined-demo');
}

// Modal Examples
function createModalExamples() {
    // Basic modal
    const basicModalBtn = new ComponentKit.Button({
        text: 'Open Basic Modal',
        variant: 'primary',
        onClick: () => {
            const modal = new ComponentKit.Modal({
                title: 'Basic Modal',
                content: 'This is a basic modal dialog.',
                size: 'medium'
            });
            modal.open();
        }
    });
    basicModalBtn.render('#modal-basic-demo');

    // Confirmation modal
    const confirmModalBtn = new ComponentKit.Button({
        text: 'Show Confirmation',
        variant: 'primary',
        onClick: () => {
            const modal = new ComponentKit.Modal({
                title: 'Confirm Action',
                content: 'Are you sure you want to delete this item?',
                actions: [
                    { text: 'Cancel', variant: 'secondary' },
                    { 
                        text: 'Delete', 
                        variant: 'primary',
                        onClick: () => {
                            alert('Item deleted!');
                            return true; // Close modal
                        }
                    }
                ]
            });
            modal.open();
        }
    });
    confirmModalBtn.render('#modal-confirm-demo');

    // Large modal
    const largeModalBtn = new ComponentKit.Button({
        text: 'Open Large Modal',
        variant: 'primary',
        onClick: () => {
            const modal = new ComponentKit.Modal({
                title: 'Large Modal',
                content: 'This is a large modal with more space for content. It can contain forms, images, or any other content that needs more room.',
                size: 'large'
            });
            modal.open();
        }
    });
    largeModalBtn.render('#modal-large-demo');

    // Custom modal
    const customModalBtn = new ComponentKit.Button({
        text: 'Custom Modal',
        variant: 'primary',
        onClick: () => {
            const customContent = document.createElement('div');
            customContent.innerHTML = `
                <p>This modal contains custom HTML content:</p>
                <ul>
                    <li>Custom styled lists</li>
                    <li>Rich content</li>
                    <li>Multiple elements</li>
                </ul>
                <p style="color: #64748b; font-style: italic;">You can put any HTML content here!</p>
            `;

            const modal = new ComponentKit.Modal({
                title: 'Custom Content Modal',
                content: customContent,
                actions: [
                    { text: 'Close', variant: 'secondary' }
                ]
            });
            modal.open();
        }
    });
    customModalBtn.render('#modal-custom-demo');
}

// Progress Gift Examples
function createProgressGiftExamples() {
    // Basic progress gift
    const basicProgressGift = new ComponentKit.ProgressGift({
        maxPoints: 100,
        giftIcon: '🎁',
        onGiftEarned: (gifts, points) => {
            console.log(`Поздравляем! Подарок #${gifts} получен! Осталось очков: ${points}`);
        }
    });
    basicProgressGift.render('#progress-gift-basic-demo');

    // Add some demo points to show progress and earn gifts
    setTimeout(() => basicProgressGift.addPoints(30), 1000);
    setTimeout(() => basicProgressGift.addPoints(70), 2000);
    setTimeout(() => basicProgressGift.addPoints(50), 3000);

    // Custom gift icon
    const customProgressGift = new ComponentKit.ProgressGift({
        maxPoints: 50,
        giftIcon: '🏆',
        onGiftEarned: (gifts, points) => {
            console.log(`Trophy earned! Total: ${gifts}`);
        }
    });
    customProgressGift.render('#progress-gift-custom-demo');
    setTimeout(() => customProgressGift.addPoints(60), 1500); // Earn trophy

    // High score progress - demo earning many gifts
    const scoreProgressGift = new ComponentKit.ProgressGift({
        maxPoints: 100,
        currentPoints: 0,
        giftIcon: '⭐',
        onGiftEarned: (gifts, points) => {
            console.log(`Star earned! Total: ${gifts}, Points: ${points}`);
        }
    });
    scoreProgressGift.render('#progress-gift-score-demo');
    
    // Add many points to demonstrate overflow display
    setTimeout(() => scoreProgressGift.addPoints(1500), 2000); // Should earn 15 stars

    // Progress gift with controls
    const controlsContainer = document.getElementById('progress-gift-controls-demo');
    const controlledProgressGift = new ComponentKit.ProgressGift({
        maxPoints: 100,
        giftIcon: '🎁',
        onGiftEarned: (gifts, points) => {
            alert(`Поздравляем! Вы получили подарок #${gifts}!`);
        }
    });
    controlledProgressGift.render(controlsContainer);

    // Add control buttons
    const buttonsContainer = document.createElement('div');
    buttonsContainer.style.marginTop = '1rem';
    buttonsContainer.style.display = 'flex';
    buttonsContainer.style.gap = '0.5rem';
    buttonsContainer.style.flexWrap = 'wrap';

    const add10Btn = new ComponentKit.Button({
        text: '+10',
        size: 'small',
        variant: 'primary',
        onClick: () => controlledProgressGift.addPoints(10)
    });

    const add25Btn = new ComponentKit.Button({
        text: '+25',
        size: 'small',
        variant: 'secondary',
        onClick: () => controlledProgressGift.addPoints(25)
    });

    const add100Btn = new ComponentKit.Button({
        text: '+100',
        size: 'small',
        variant: 'outline',
        onClick: () => controlledProgressGift.addPoints(100)
    });

    const resetBtn = new ComponentKit.Button({
        text: 'Reset',
        size: 'small',
        variant: 'secondary',
        onClick: () => controlledProgressGift.reset()
    });

    add10Btn.render(buttonsContainer);
    add25Btn.render(buttonsContainer);
    add100Btn.render(buttonsContainer);
    resetBtn.render(buttonsContainer);

    // Add custom input field
    const customInputContainer = document.createElement('div');
    customInputContainer.style.marginTop = '1rem';
    customInputContainer.style.padding = '1rem';
    customInputContainer.style.backgroundColor = '#f8fafc';
    customInputContainer.style.border = '1px solid #e2e8f0';
    customInputContainer.style.borderRadius = '0.5rem';

    const customLabel = document.createElement('label');
    customLabel.textContent = 'Произвольное количество очков:';
    customLabel.style.display = 'block';
    customLabel.style.marginBottom = '0.5rem';
    customLabel.style.fontSize = '0.875rem';
    customLabel.style.fontWeight = '500';
    customLabel.style.color = '#374151';

    const customInputWrapper = document.createElement('div');
    customInputWrapper.style.display = 'flex';
    customInputWrapper.style.gap = '0.5rem';
    customInputWrapper.style.alignItems = 'flex-end';

    const customInput = new ComponentKit.Input({
        type: 'number',
        placeholder: 'Введите количество очков',
        size: 'small',
        min: 1,
        max: 1000
    });

    const addCustomBtn = new ComponentKit.Button({
        text: 'Добавить',
        size: 'small',
        variant: 'primary',
        onClick: () => {
            const value = parseInt(customInput.getValue());
            if (!isNaN(value) && value > 0) {
                controlledProgressGift.addPoints(value);
                customInput.setValue('');
            }
        }
    });

    customInput.render(customInputWrapper);
    addCustomBtn.render(customInputWrapper);

    customInputContainer.appendChild(customLabel);
    customInputContainer.appendChild(customInputWrapper);

    const hintText = document.createElement('div');
    hintText.textContent = 'Введите число от 1 до 1000';
    hintText.style.fontSize = '0.75rem';
    hintText.style.color = '#6b7280';
    hintText.style.marginTop = '0.25rem';
    customInputContainer.appendChild(hintText);

    controlsContainer.appendChild(buttonsContainer);
    controlsContainer.appendChild(customInputContainer);
}

// Complete Form Example
function createCompleteFormExample() {
    const formContainer = document.getElementById('complete-form-demo');
    
    // Create form wrapper
    const formCard = new ComponentKit.Card({
        title: 'Contact Form',
        content: '',
        variant: 'elevated'
    });
    formCard.render(formContainer);

    const cardBody = formContainer.querySelector('.ck-card-body');
    const form = document.createElement('div');
    form.style.display = 'flex';
    form.style.flexDirection = 'column';
    form.style.gap = '1rem';

    // Name input
    const nameInput = new ComponentKit.Input({
        label: 'Full Name *',
        placeholder: 'Enter your full name',
        required: true
    });
    nameInput.render(form);

    // Email input
    const emailInput = new ComponentKit.Input({
        type: 'email',
        label: 'Email Address *',
        placeholder: 'user@example.com',
        required: true,
        validation: { email: true }
    });
    emailInput.render(form);

    // Phone input
    const phoneInput = new ComponentKit.Input({
        type: 'tel',
        label: 'Phone Number',
        placeholder: '+1 (555) 123-4567'
    });
    phoneInput.render(form);

    // Message input
    const messageInput = new ComponentKit.Input({
        label: 'Message *',
        placeholder: 'Enter your message here...',
        required: true,
        validation: { minLength: 10 }
    });
    messageInput.render(form);

    // Button container
    const buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'flex';
    buttonContainer.style.gap = '0.75rem';
    buttonContainer.style.justifyContent = 'flex-end';
    buttonContainer.style.marginTop = '1rem';

    // Clear button
    const clearBtn = new ComponentKit.Button({
        text: 'Clear Form',
        variant: 'secondary',
        onClick: () => {
            nameInput.clear();
            emailInput.clear();
            phoneInput.clear();
            messageInput.clear();
        }
    });
    clearBtn.render(buttonContainer);

    // Submit button
    const submitBtn = new ComponentKit.Button({
        text: 'Submit Form',
        variant: 'primary',
        onClick: () => {
            // Validate all fields
            const nameValid = nameInput.validate(nameInput.getValue());
            const emailValid = emailInput.validate(emailInput.getValue());
            const messageValid = messageInput.validate(messageInput.getValue());

            if (nameValid && emailValid && messageValid) {
                // Show success modal
                const successModal = new ComponentKit.Modal({
                    title: 'Form Submitted!',
                    content: 'Thank you for your message. We will get back to you soon.',
                    actions: [
                        { 
                            text: 'OK', 
                            variant: 'primary',
                            onClick: () => {
                                // Clear form after successful submission
                                nameInput.clear();
                                emailInput.clear();
                                phoneInput.clear();
                                messageInput.clear();
                            }
                        }
                    ]
                });
                successModal.open();
            } else {
                // Show error modal
                const errorModal = new ComponentKit.Modal({
                    title: 'Validation Error',
                    content: 'Please fix the errors in the form and try again.',
                    actions: [
                        { text: 'OK', variant: 'primary' }
                    ]
                });
                errorModal.open();
            }
        }
    });
    submitBtn.render(buttonContainer);

    form.appendChild(buttonContainer);
    cardBody.appendChild(form);
}

// Initialize all examples
document.addEventListener('DOMContentLoaded', () => {
    createButtonExamples();
    createInputExamples();
    createCardExamples();
    createProgressGiftExamples();
    createModalExamples();
    createCompleteFormExample();
});