@africode/core 5.0.0

package/components/select.js

@@ -0,0 +1,322 @@
+/**
+ * AfriCode Select/Dropdown Component
+ * 
+ * Custom styled select dropdown for forms.
+ * Suitable for: Forms, Filters, Settings, Language selection
+ * 
+ * @module components/select
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriSelect extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['label', 'placeholder', 'theme', 'error', 'required', 'aria-label', 'aria-describedby'];
+    }
+
+    constructor() {
+        super();
+        this._uniqueId = Math.random().toString(36).substr(2, 9);
+        this._isOpen = false;
+        this._selectedIndex = -1;
+        this._options = [];
+        this.render();
+    }
+
+    get value() {
+        return this._selectedIndex >= 0 ? this._options[this._selectedIndex]?.value : '';
+    }
+
+    connectedCallback() {
+        this._options = Array.from(this.querySelectorAll('option')).map(opt => ({
+            value: opt.value,
+            label: opt.textContent
+        }));
+        this.render();
+        this._setupListeners();
+    }
+
+    _setupListeners() {
+        const trigger = this.shadowRoot.querySelector('.select-trigger');
+        const dropdown = this.shadowRoot.querySelector('.select-dropdown');
+
+        trigger?.addEventListener('click', () => {
+            this._toggleDropdown();
+        });
+
+        trigger?.addEventListener('keydown', (e) => {
+            this._handleKeydown(e);
+        });
+
+        this.shadowRoot.querySelectorAll('.select-option').forEach((opt, i) => {
+            opt.addEventListener('click', () => {
+                this._selectOption(i);
+            });
+        });
+
+        document.addEventListener('click', (e) => {
+            if (!this.contains(e.target) && this._isOpen) {
+                this._closeDropdown();
+            }
+        });
+    }
+
+    _toggleDropdown() {
+        this._isOpen = !this._isOpen;
+        const trigger = this.shadowRoot.querySelector('.select-trigger');
+        const dropdown = this.shadowRoot.querySelector('.select-dropdown');
+        
+        dropdown?.classList.toggle('open', this._isOpen);
+        trigger?.classList.toggle('open', this._isOpen);
+        
+        if (this._isOpen) {
+            trigger?.setAttribute('aria-expanded', 'true');
+            dropdown?.setAttribute('aria-hidden', 'false');
+        } else {
+            trigger?.setAttribute('aria-expanded', 'false');
+            dropdown?.setAttribute('aria-hidden', 'true');
+        }
+    }
+
+    _closeDropdown() {
+        this._isOpen = false;
+        const trigger = this.shadowRoot.querySelector('.select-trigger');
+        const dropdown = this.shadowRoot.querySelector('.select-dropdown');
+        
+        dropdown?.classList.remove('open');
+        trigger?.classList.remove('open');
+        trigger?.setAttribute('aria-expanded', 'false');
+        dropdown?.setAttribute('aria-hidden', 'true');
+    }
+
+    _selectOption(index) {
+        this._selectedIndex = index;
+        this._closeDropdown();
+        this.render();
+        this._setupListeners();
+        this.emit('af-change', { value: this.value, label: this._options[index].label });
+    }
+
+    _handleKeydown(e) {
+        const trigger = this.shadowRoot.querySelector('.select-trigger');
+        
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this._toggleDropdown();
+                break;
+            case 'Escape':
+                if (this._isOpen) {
+                    e.preventDefault();
+                    this._closeDropdown();
+                    trigger.focus();
+                }
+                break;
+            case 'ArrowDown':
+                if (!this._isOpen) {
+                    e.preventDefault();
+                    this._toggleDropdown();
+                } else {
+                    e.preventDefault();
+                    this._navigateOptions(1);
+                }
+                break;
+            case 'ArrowUp':
+                if (this._isOpen) {
+                    e.preventDefault();
+                    this._navigateOptions(-1);
+                }
+                break;
+        }
+    }
+
+    _navigateOptions(direction) {
+        const options = this.shadowRoot.querySelectorAll('.select-option');
+        if (options.length === 0) {return;}
+
+        let newIndex = this._selectedIndex + direction;
+        if (newIndex < 0) {newIndex = options.length - 1;}
+        if (newIndex >= options.length) {newIndex = 0;}
+
+        this._selectedIndex = newIndex;
+        this.render();
+        this._setupListeners();
+        
+        // Focus the selected option
+        const selectedOption = this.shadowRoot.querySelector('.select-option.selected');
+        selectedOption?.scrollIntoView({ block: 'nearest' });
+    }
+
+    attributeChangedCallback() {
+        this.render();
+        this._setupListeners();
+    }
+
+    render() {
+        const label = this.getAttribute('label') || '';
+        const placeholder = this.getAttribute('placeholder') || 'Select an option';
+        const theme = this.getAttribute('theme') || 'tanzania';
+        const error = this.getAttribute('error') || '';
+        const required = this.hasAttribute('required');
+        const ariaLabel = this.getAttribute('aria-label');
+        const ariaDescribedBy = this.getAttribute('aria-describedby');
+
+        const themes = {
+            tanzania: { focus: '#1EB53A', error: '#DC3545' },
+            maasai: { focus: '#FF0000', error: '#8B0000' },
+            ndebele: { focus: '#4169E1', error: '#DC143C' }
+        };
+        const t = themes[theme] || themes.tanzania;
+
+        const describedByList = [];
+        if (error) {describedByList.push(`error-${this._uniqueId}`);}
+        if (ariaDescribedBy) {describedByList.push(...ariaDescribedBy.split(' '));}
+        const combinedDescribedBy = describedByList.length > 0 ? `aria-describedby="${describedByList.join(' ')}"` : '';
+
+        const selectedLabel = this._selectedIndex >= 0
+            ? this._options[this._selectedIndex]?.label
+            : placeholder;
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+          position: relative;
+        }
+
+        label {
+          display: block;
+          font-weight: 500;
+          margin-bottom: 5px;
+          color: #333;
+          font-size: 14px;
+        }
+
+        .required-star {
+          color: ${t.error};
+          margin-left: 2px;
+        }
+
+        .select-container {
+          position: relative;
+        }
+
+        .select-trigger {
+          width: 100%;
+          padding: 10px 40px 10px 13px;
+          font-size: 15px;
+          border: 2px solid ${error ? t.error : '#ddd'};
+          border-radius: 5px;
+          background: white;
+          cursor: pointer;
+          text-align: left;
+          font-family: inherit;
+          transition: all 200ms ease;
+          color: ${this._selectedIndex >= 0 ? '#333' : '#888'};
+        }
+
+        .select-trigger:focus,
+        .select-trigger.open {
+          outline: none;
+          border-color: ${error ? t.error : t.focus};
+          box-shadow: 0 0 0 3px ${error ? t.error + '20' : t.focus + '20'};
+        }
+
+        .select-arrow {
+          position: absolute;
+          right: 13px;
+          top: 50%;
+          transform: translateY(-50%);
+          pointer-events: none;
+          transition: transform 200ms ease;
+        }
+
+        .select-trigger.open + .select-arrow {
+          transform: translateY(-50%) rotate(180deg);
+        }
+
+        .select-dropdown {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: white;
+          border: 2px solid #ddd;
+          border-radius: 5px;
+          margin-top: 4px;
+          max-height: 0;
+          overflow: hidden;
+          opacity: 0;
+          transition: all 200ms ease;
+          z-index: 1000;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+
+        .select-dropdown.open {
+          max-height: 200px;
+          overflow-y: auto;
+          opacity: 1;
+        }
+
+        .select-option {
+          padding: 10px 13px;
+          cursor: pointer;
+          transition: background 150ms ease;
+        }
+
+        .select-option:hover {
+          background: ${t.focus}15;
+        }
+
+        .select-option.selected {
+          background: ${t.focus};
+          color: white;
+        }
+
+        .error-text {
+          font-size: 12px;
+          margin-top: 4px;
+          color: ${t.error};
+        }
+
+        ::slotted(option) {
+          display: none;
+        }
+      </style>
+
+      ${label ? `<label for="select-${this._uniqueId}">${label}${required ? '<span class="required-star">*</span>' : ''}</label>` : ''}
+      <div class="select-container">
+        <button type="button" 
+                id="select-${this._uniqueId}"
+                class="select-trigger ${this._isOpen ? 'open' : ''}"
+                aria-expanded="${this._isOpen}"
+                aria-haspopup="listbox"
+                ${ariaLabel ? `aria-label="${ariaLabel}"` : ''}
+                ${error ? 'aria-invalid="true"' : ''}
+                ${combinedDescribedBy}>
+          ${selectedLabel}
+        </button>
+        <span class="select-arrow" aria-hidden="true">▼</span>
+        <div class="select-dropdown ${this._isOpen ? 'open' : ''}" 
+             role="listbox"
+             aria-hidden="${!this._isOpen}">
+          ${this._options.map((opt, i) => `
+            <div class="select-option ${i === this._selectedIndex ? 'selected' : ''}" 
+                 data-index="${i}"
+                 role="option"
+                 aria-selected="${i === this._selectedIndex}">
+              ${opt.label}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+      ${error ? `<div id="error-${this._uniqueId}" class="error-text" role="alert">${error}</div>` : ''}
+      <slot></slot>
+    `;
+    }
+}
+
+registerComponent('af-select', AfriSelect);
+export default AfriSelect;

package/components/sidebar.js

@@ -0,0 +1,180 @@
+/**
+ * AfriCode Sidebar Component
+ * 
+ * Collapsible side navigation with pattern header.
+ * Reactively binded to the Global Store.
+ * 
+ * @module components/sidebar
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+import { store } from '../core/store.js';
+import { subscribe } from '../core/state.js';
+
+export class AfriSidebar extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['position'];
+  }
+
+  constructor() {
+    super();
+    this._unsubscribe = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Subscribe to store updates
+    this._unsubscribe = subscribe(() => {
+      this.updateUI();
+    });
+
+    // Initial render
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this._unsubscribe) {
+      this._unsubscribe();
+    }
+  }
+
+  updateUI() {
+    // Reactive update: minimal DOM manipulation
+    const collapsed = store.ui.sidebarCollapsed;
+    const sidebar = this.shadowRoot.querySelector('.sidebar');
+    const title = this.shadowRoot.querySelector('.sidebar-title');
+    const toggleBtn = this.shadowRoot.getElementById('toggle');
+    const content = this.shadowRoot.querySelector('.sidebar-content');
+
+    // Apply changes if elements exist (shadowDOM might be lazy)
+    if (sidebar) {sidebar.style.width = collapsed ? '60px' : '260px';}
+    if (title) {title.style.opacity = collapsed ? '0' : '1';}
+    if (content) {content.style.padding = collapsed ? '12px' : '20px';}
+    if (toggleBtn) {toggleBtn.innerHTML = collapsed ? '→' : '← Collapse';}
+  }
+
+  render() {
+    const position = this.getAttribute('position') || 'left';
+    // Read initial state from store
+    const collapsed = store.ui.sidebarCollapsed;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          ${position}: 0;
+          height: 100vh;
+          z-index: 900;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .sidebar {
+          width: ${collapsed ? '60px' : '260px'};
+          height: 100%;
+          background: #121212;
+          border-${position === 'left' ? 'right' : 'left'}: 1px solid #1e1e1e;
+          display: flex;
+          flex-direction: column;
+          transition: width 0.3s var(--ease-drum, ease);
+          overflow: hidden;
+        }
+
+        .sidebar-header {
+          padding: 20px;
+          border-bottom: 1px solid #1e1e1e;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .sidebar-logo {
+          width: 32px;
+          height: 32px;
+          background: linear-gradient(135deg, #1EB53A, #FCD116);
+          border-radius: 8px;
+          flex-shrink: 0;
+        }
+
+        .sidebar-title {
+          font-weight: 700;
+          font-size: 1.1rem;
+          color: #FCD116;
+          white-space: nowrap;
+          opacity: ${collapsed ? 0 : 1};
+          transition: opacity 0.2s;
+        }
+
+        .sidebar-content {
+          flex: 1;
+          padding: ${collapsed ? '12px' : '20px'};
+          overflow-y: auto;
+        }
+
+        .sidebar-footer {
+          padding: 16px;
+          border-top: 1px solid #1e1e1e;
+        }
+
+        .toggle-btn {
+          width: 100%;
+          padding: 10px;
+          background: #1e1e1e;
+          border: none;
+          border-radius: 8px;
+          color: #a0a0a0;
+          cursor: pointer;
+          font-size: 0.85rem;
+          transition: all 0.2s;
+        }
+
+        .toggle-btn:hover {
+          background: #2a2a2a;
+          color: #1EB53A;
+        }
+
+        /* Slotted Content Styles */
+        ::slotted(a), ::slotted(button) {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 12px 16px;
+          color: #a0a0a0;
+          text-decoration: none;
+          border-radius: 8px;
+          margin-bottom: 4px;
+          transition: all 0.2s;
+        }
+
+        ::slotted(a:hover), ::slotted(button:hover) {
+          background: #1e1e1e;
+          color: #1EB53A;
+        }
+      </style>
+
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <div class="sidebar-logo"></div>
+          <span class="sidebar-title">AfriCode</span>
+        </div>
+        <nav class="sidebar-content">
+          <slot></slot>
+        </nav>
+        <div class="sidebar-footer">
+          <button class="toggle-btn" id="toggle">
+            ${collapsed ? '→' : '← Collapse'}
+          </button>
+        </div>
+      </aside>
+    `;
+
+    this.shadowRoot.getElementById('toggle').addEventListener('click', () => {
+      actions.toggleSidebar(); // Dispatch action to store
+    });
+  }
+}
+
+registerComponent('af-sidebar', AfriSidebar);
+export default AfriSidebar;

package/components/skeleton.js

@@ -0,0 +1,85 @@
+/**
+ * AfriCode Skeleton Component
+ * 
+ * Loading placeholder with shimmer animation.
+ * 
+ * @module components/skeleton
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriSkeleton extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['variant', 'width', 'height', 'lines'];
+    }
+
+    constructor() {
+        super();
+        this.render();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const variant = this.getAttribute('variant') || 'text';
+        const width = this.getAttribute('width') || '100%';
+        const height = this.getAttribute('height') || 'auto';
+        const lines = parseInt(this.getAttribute('lines')) || 1;
+
+        const variants = {
+            text: { height: '16px', borderRadius: '4px' },
+            title: { height: '28px', borderRadius: '4px' },
+            avatar: { width: '48px', height: '48px', borderRadius: '50%' },
+            card: { height: '200px', borderRadius: '12px' },
+            button: { height: '40px', borderRadius: '6px', width: '120px' }
+        };
+
+        const v = variants[variant] || variants.text;
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .skeleton {
+          background: linear-gradient(
+            90deg,
+            #1e1e1e 0%,
+            #2a2a2a 50%,
+            #1e1e1e 100%
+          );
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+          border-radius: ${v.borderRadius};
+        }
+
+        @keyframes shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+
+        .skeleton-line {
+          width: ${variant === 'text' ? width : v.width || width};
+          height: ${v.height};
+          margin-bottom: 8px;
+        }
+
+        .skeleton-line:last-child {
+          margin-bottom: 0;
+          width: ${variant === 'text' ? '70%' : '100%'};
+        }
+      </style>
+
+      ${variant === 'text' || variant === 'title'
+                ? Array(lines).fill(0).map(() => `<div class="skeleton skeleton-line"></div>`).join('')
+                : `<div class="skeleton" style="width: ${v.width || width}; height: ${v.height || height};"></div>`
+            }
+    `;
+    }
+}
+
+registerComponent('af-skeleton', AfriSkeleton);
+export default AfriSkeleton;