orion/static/admin/js/components.js

// static/admin/js/components.js

// Setup logging
const COMPONENTS_LOG_LEVEL = 3;

const componentsLog = {
    error: (...args) => COMPONENTS_LOG_LEVEL >= 1 && console.error('❌ [COMPONENTS ERROR]', ...args),
    warn: (...args) => COMPONENTS_LOG_LEVEL >= 2 && console.warn('⚠️ [COMPONENTS WARN]', ...args),
    info: (...args) => COMPONENTS_LOG_LEVEL >= 3 && console.info('ℹ️ [COMPONENTS INFO]', ...args),
    debug: (...args) => COMPONENTS_LOG_LEVEL >= 4 && console.log('🔍 [COMPONENTS DEBUG]', ...args)
};

/**
 * Components Library Alpine.js Component
 * UI components reference with live examples
 */
function adminComponents() {
    return {
        // ✅ CRITICAL: Inherit base layout functionality
        ...data(),

        // ✅ CRITICAL: Set page identifier
        currentPage: 'components',

        // Active section for navigation
        activeSection: 'forms',

        // Component sections
        sections: [
            { id: 'forms', name: 'Forms', icon: 'clipboard-list' },
            { id: 'buttons', name: 'Buttons', icon: 'cursor-click' },
            { id: 'cards', name: 'Cards', icon: 'collection' },
            { id: 'badges', name: 'Badges', icon: 'tag' },
            { id: 'tables', name: 'Tables', icon: 'table' },
            { id: 'modals', name: 'Modals', icon: 'window' },
            { id: 'alerts', name: 'Alerts', icon: 'exclamation' }
        ],

        // Sample form data for examples
        exampleForm: {
            textInput: 'Sample text',
            email: 'user@example.com',
            textarea: 'Sample description text...',
            select: 'option1',
            checkbox: true,
            radio: 'option1',
            disabled: 'Read-only value'
        },

        // Sample errors for validation examples
        exampleErrors: {
            email: 'Please enter a valid email address',
            required: 'This field is required'
        },

        // ✅ CRITICAL: Proper initialization with guard
        async init() {
            componentsLog.info('=== COMPONENTS PAGE INITIALIZING ===');

            // Prevent multiple initializations
            if (window._componentsInitialized) {
                componentsLog.warn('Components page already initialized, skipping...');
                return;
            }
            window._componentsInitialized = true;

            // Set active section from URL hash if present
            this.setActiveSectionFromHash();

            // Listen for hash changes
            window.addEventListener('hashchange', () => {
                this.setActiveSectionFromHash();
            });

            componentsLog.info('=== COMPONENTS PAGE INITIALIZATION COMPLETE ===');
        },

        /**
         * Set active section from URL hash
         */
        setActiveSectionFromHash() {
            const hash = window.location.hash.replace('#', '');
            if (hash && this.sections.find(s => s.id === hash)) {
                this.activeSection = hash;
                componentsLog.debug('Set active section from hash:', hash);
            }
        },

        /**
         * Navigate to section
         */
        goToSection(sectionId) {
            componentsLog.info('Navigating to section:', sectionId);
            this.activeSection = sectionId;
            window.location.hash = sectionId;

            // Smooth scroll to section
            const element = document.getElementById(sectionId);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        },

        /**
         * Check if section is active
         */
        isSectionActive(sectionId) {
            return this.activeSection === sectionId;
        },

        /**
         * Copy code to clipboard
         */
        async copyCode(code) {
            try {
                await navigator.clipboard.writeText(code);
                Utils.showToast('Code copied to clipboard!', 'success');
                componentsLog.debug('Code copied to clipboard');
            } catch (error) {
                componentsLog.error('Failed to copy code:', error);
                Utils.showToast('Failed to copy code', 'error');
            }
        },

        /**
         * Show toast example
         */
        showToastExample(type) {
            const messages = {
                success: 'Operation completed successfully!',
                error: 'An error occurred!',
                warning: 'Please review your input.',
                info: 'Here is some information.'
            };
            Utils.showToast(messages[type] || messages.info, type);
        }
    };
}

componentsLog.info('Components module loaded');