muspe-cli/src/ui/demo.js

MusPE Advanced Framework v2.1.3 - Mobile User-friendly Simple Progressive Engine with Enhanced CLI Tools, Specialized E-Commerce Templates, Material Design 3, Progressive Enhancement, Mobile Optimizations, Performance Analysis, and Enterprise-Grade Develo

// MusPE UI Components Demo - Complete Mobile UI Components Showcase
// This file demonstrates how to use all MusPE UI components

// Import all components
import MusPEUI from './index.js';

// Or import individual components
import { Button, Input, Card, Modal, ActionSheet, Navbar, Toolbar, Container } from './index.js';

class MusPEUIDemo {
  constructor() {
    this.container = null;
    this.currentModal = null;
    this.currentActionSheet = null;
  }
  
  init() {
    this.setupContainer();
    this.setupNavbar();
    this.setupContent();
    this.setupToolbar();
  }
  
  setupContainer() {
    // Create main container
    this.container = new Container({
      safeArea: true,
      padding: 'default',
      maxWidth: 'lg'
    });
    
    document.body.appendChild(this.container.render());
  }
  
  setupNavbar() {
    // Create navigation bar
    const navbar = new Navbar({
      title: 'MusPE UI Demo',
      backButton: false,
      searchButton: true,
      menuButton: true,
      theme: 'light',
      callbacks: {
        onSearch: () => {
          console.log('Search clicked');
        },
        onMenu: () => {
          this.showActionSheet();
        }
      }
    });
    
    document.body.appendChild(navbar.render());
  }
  
  setupContent() {
    const content = document.createElement('div');
    content.className = 'demo-content';
    content.style.marginTop = '72px'; // Account for fixed navbar
    content.style.marginBottom = '72px'; // Account for fixed toolbar
    
    content.innerHTML = `
      <div class="demo-section">
        <h2>📱 MusPE UI Components</h2>
        <p>A complete mobile-first UI component library for MusPE Framework.</p>
      </div>
    `;
    
    // Add component demonstrations
    this.addButtonDemo(content);
    this.addInputDemo(content);
    this.addCardDemo(content);
    this.addModalDemo(content);
    this.addFormDemo(content);
    
    this.container.setContent(content);
  }
  
  addButtonDemo(container) {
    const section = document.createElement('div');
    section.className = 'demo-section';
    
    const title = document.createElement('h3');
    title.textContent = '🔘 Buttons';
    section.appendChild(title);
    
    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'demo-buttons';
    buttonsContainer.style.display = 'flex';
    buttonsContainer.style.flexDirection = 'column';
    buttonsContainer.style.gap = '12px';
    
    // Primary button
    const primaryBtn = new Button({
      text: 'Primary Button',
      variant: 'primary',
      size: 'md',
      callbacks: {
        onClick: () => console.log('Primary button clicked')
      }
    });
    buttonsContainer.appendChild(primaryBtn.render());
    
    // Secondary button with icon
    const secondaryBtn = new Button({
      text: 'Secondary',
      variant: 'secondary',
      size: 'md',
      icon: '⭐',
      callbacks: {
        onClick: () => console.log('Secondary button clicked')
      }
    });
    buttonsContainer.appendChild(secondaryBtn.render());
    
    // Outline button
    const outlineBtn = new Button({
      text: 'Outline Button',
      variant: 'outline',
      size: 'md',
      fullWidth: true
    });
    buttonsContainer.appendChild(outlineBtn.render());
    
    // Loading button
    const loadingBtn = new Button({
      text: 'Loading Button',
      variant: 'primary',
      loading: true,
      size: 'md'
    });
    buttonsContainer.appendChild(loadingBtn.render());
    
    section.appendChild(buttonsContainer);
    container.appendChild(section);
  }
  
  addInputDemo(container) {
    const section = document.createElement('div');
    section.className = 'demo-section';
    
    const title = document.createElement('h3');
    title.textContent = '📝 Input Fields';
    section.appendChild(title);
    
    const inputsContainer = document.createElement('div');
    inputsContainer.style.display = 'flex';
    inputsContainer.style.flexDirection = 'column';
    inputsContainer.style.gap = '16px';
    
    // Text input
    const textInput = new Input({
      label: 'Name',
      placeholder: 'Enter your name',
      required: true,
      clearable: true,
      callbacks: {
        onInput: (value) => console.log('Name input:', value)
      }
    });
    inputsContainer.appendChild(textInput.render());
    
    // Email input
    const emailInput = new Input({
      type: 'email',
      label: 'Email Address',
      placeholder: 'your@email.com',
      variant: 'filled',
      icon: '📧',
      callbacks: {
        onChange: (value) => console.log('Email:', value)
      }
    });
    inputsContainer.appendChild(emailInput.render());
    
    // Password input
    const passwordInput = new Input({
      type: 'password',
      label: 'Password',
      placeholder: 'Enter password',
      variant: 'outline',
      required: true
    });
    inputsContainer.appendChild(passwordInput.render());
    
    // Search input
    const searchInput = new Input({
      type: 'search',
      placeholder: 'Search...',
      variant: 'underline',
      icon: '🔍',
      clearable: true
    });
    inputsContainer.appendChild(searchInput.render());
    
    section.appendChild(inputsContainer);
    container.appendChild(section);
  }
  
  addCardDemo(container) {
    const section = document.createElement('div');
    section.className = 'demo-section';
    
    const title = document.createElement('h3');
    title.textContent = '🃏 Cards';
    section.appendChild(title);
    
    const cardsContainer = document.createElement('div');
    cardsContainer.style.display = 'grid';
    cardsContainer.style.gap = '16px';
    
    // Simple card
    const simpleCard = new Card({
      title: 'Simple Card',
      subtitle: 'This is a basic card component',
      content: 'Cards are great for displaying content in a structured way. This card demonstrates the basic usage.',
      variant: 'elevated'
    });
    cardsContainer.appendChild(simpleCard.render());
    
    // Card with image and actions
    const actionCard = new Card({
      title: 'Action Card',
      subtitle: 'With image and actions',
      content: 'This card shows how to add images and action buttons.',
      image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMyMCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMTgwIiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik0xNDQgNzJIMTc2VjEwNEgxNDRWNzJaIiBmaWxsPSIjOUNBM0FGIi8+Cjx0ZXh0IHg9IjE2MCIgeT0iMTI0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic3lzdGVtLXVpIiBmb250LXNpemU9IjE0IiBmaWxsPSIjNkI3MjgwIj5JbWFnZSBQbGFjZWhvbGRlcjwvdGV4dD4KPC9zdmc+',
      variant: 'outlined',
      actions: [
        {
          text: 'Like',
          icon: '❤️',
          callback: () => console.log('Liked!')
        },
        {
          text: 'Share',
          icon: '📤',
          callback: () => console.log('Shared!')
        }
      ]
    });
    cardsContainer.appendChild(actionCard.render());
    
    // Clickable card
    const clickableCard = new Card({
      title: 'Clickable Card',
      content: 'This entire card is clickable. Tap it!',
      variant: 'filled',
      clickable: true,
      callbacks: {
        onClick: () => {
          alert('Card clicked!');
        }
      }
    });
    cardsContainer.appendChild(clickableCard.render());
    
    section.appendChild(cardsContainer);
    container.appendChild(section);
  }
  
  addModalDemo(container) {
    const section = document.createElement('div');
    section.className = 'demo-section';
    
    const title = document.createElement('h3');
    title.textContent = '🪟 Modals & Sheets';
    section.appendChild(title);
    
    const buttonsContainer = document.createElement('div');
    buttonsContainer.style.display = 'flex';
    buttonsContainer.style.gap = '12px';
    buttonsContainer.style.flexWrap = 'wrap';
    
    // Modal button
    const modalBtn = new Button({
      text: 'Show Modal',
      variant: 'primary',
      callbacks: {
        onClick: () => this.showModal()
      }
    });
    buttonsContainer.appendChild(modalBtn.render());
    
    // Action sheet button
    const actionSheetBtn = new Button({
      text: 'Show Action Sheet',
      variant: 'secondary',
      callbacks: {
        onClick: () => this.showActionSheet()
      }
    });
    buttonsContainer.appendChild(actionSheetBtn.render());
    
    section.appendChild(buttonsContainer);
    container.appendChild(section);
  }
  
  addFormDemo(container) {
    const section = document.createElement('div');
    section.className = 'demo-section';
    
    const title = document.createElement('h3');
    title.textContent = '📋 Complete Form';
    section.appendChild(title);
    
    const form = document.createElement('form');
    form.style.display = 'flex';
    form.style.flexDirection = 'column';
    form.style.gap = '16px';
    
    // Name input
    const nameInput = new Input({
      label: 'Full Name',
      placeholder: 'John Doe',
      required: true
    });
    form.appendChild(nameInput.render());
    
    // Email input
    const emailInput = new Input({
      type: 'email',
      label: 'Email',
      placeholder: 'john@example.com',
      required: true
    });
    form.appendChild(emailInput.render());
    
    // Submit button
    const submitBtn = new Button({
      text: 'Submit Form',
      variant: 'primary',
      fullWidth: true,
      type: 'submit'
    });
    form.appendChild(submitBtn.render());
    
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      submitBtn.setLoading(true);
      setTimeout(() => {
        submitBtn.setLoading(false);
        alert('Form submitted!');
      }, 2000);
    });
    
    section.appendChild(form);
    container.appendChild(section);
  }
  
  showModal() {
    this.currentModal = new Modal({
      title: 'Demo Modal',
      content: `
        <p>This is a modal dialog. It can contain any content you want.</p>
        <p>You can close it by clicking the X button, pressing Escape, or clicking outside.</p>
        <br>
        <div style="padding: 16px; background: #f3f4f6; border-radius: 8px;">
          <strong>Features:</strong>
          <ul style="margin: 8px 0; padding-left: 20px;">
            <li>Responsive design</li>
            <li>Keyboard navigation</li>
            <li>Focus trapping</li>
            <li>Multiple sizes</li>
            <li>Custom animations</li>
          </ul>
        </div>
      `,
      size: 'md',
      showFooter: true,
      footerActions: [
        {
          text: 'Cancel',
          variant: 'secondary',
          callback: () => console.log('Cancelled')
        },
        {
          text: 'Confirm',
          variant: 'primary',
          callback: () => console.log('Confirmed')
        }
      ],
      callbacks: {
        onClose: () => {
          this.currentModal = null;
        }
      }
    });
    
    this.currentModal.render();
    this.currentModal.open();
  }
  
  showActionSheet() {
    this.currentActionSheet = new ActionSheet({
      title: 'Choose an Action',
      message: 'Select one of the options below',
      actions: [
        {
          text: 'Camera',
          icon: '📷',
          callback: () => console.log('Camera selected')
        },
        {
          text: 'Photo Library',
          icon: '🖼️',
          callback: () => console.log('Photo Library selected')
        },
        {
          text: 'Files',
          icon: '📁',
          callback: () => console.log('Files selected')
        },
        {
          text: 'Delete',
          icon: '🗑️',
          destructive: true,
          callback: () => console.log('Delete selected')
        }
      ],
      callbacks: {
        onClose: () => {
          this.currentActionSheet = null;
        }
      }
    });
    
    this.currentActionSheet.render();
    this.currentActionSheet.open();
  }
  
  setupToolbar() {
    // Create bottom toolbar/tab bar
    const toolbar = new Toolbar({
      position: 'bottom',
      theme: 'light',
      activeIndex: 0,
      items: [
        {
          icon: {
            active: '🏠',
            inactive: '🏡'
          },
          label: 'Home'
        },
        {
          icon: {
            active: '🔍',
            inactive: '🔎'
          },
          label: 'Search'
        },
        {
          icon: {
            active: '❤️',
            inactive: '🤍'
          },
          label: 'Favorites'
        },
        {
          icon: {
            active: '👤',
            inactive: '👥'
          },
          label: 'Profile'
        }
      ],
      badge: {
        2: '5' // Badge on favorites tab
      },
      callbacks: {
        onItemClick: (index, item) => {
          console.log('Tab clicked:', index, item.label);
        }
      }
    });
    
    document.body.appendChild(toolbar.render());
  }
}

// Add demo styles
const demoStyles = `
.demo-content {
  padding: 20px 0;
}

.demo-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--muspe-gray-200);
}

.demo-section:last-child {
  border-bottom: none;
}

.demo-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--muspe-gray-900);
  margin: 0 0 8px 0;
}

.demo-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--muspe-gray-800);
  margin: 0 0 16px 0;
}

.demo-section p {
  color: var(--muspe-gray-600);
  margin: 0 0 16px 0;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  .demo-section {
    border-bottom-color: var(--muspe-gray-700);
  }
  
  .demo-section h2 {
    color: var(--muspe-gray-100);
  }
  
  .demo-section h3 {
    color: var(--muspe-gray-200);
  }
  
  .demo-section p {
    color: var(--muspe-gray-400);
  }
}
`;

// Auto-inject demo styles
if (typeof document !== 'undefined') {
  const styleSheet = document.createElement('style');
  styleSheet.textContent = demoStyles;
  document.head.appendChild(styleSheet);
}

// Initialize demo when DOM is ready
if (typeof document !== 'undefined') {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      const demo = new MusPEUIDemo();
      demo.init();
    });
  } else {
    const demo = new MusPEUIDemo();
    demo.init();
  }
}

export default MusPEUIDemo;