@africode/core 5.0.8 → 5.0.9

package/components/nav-drawer.js

@@ -0,0 +1,217 @@
+/**
+ * AfriCode Navigation Drawer Component
+ * 
+ * A responsive navigation drawer that works on mobile and desktop
+ * with smooth animations and accessibility features.
+ * 
+ * @module components/nav-drawer
+ */
+
+import { AfriCodeComponent, html } from './base.js';
+
+export class AfriNavDrawer extends AfriCodeComponent {
+    constructor() {
+        super();
+        this.isOpen = false;
+        this.position = this.getAttribute('position') || 'left'; // left or right
+        this.width = this.getAttribute('width') || '280px';
+        this.overlay = this.hasAttribute('overlay');
+    }
+
+    static get observedAttributes() {
+        return ['open', 'position', 'width', 'overlay'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case 'open':
+                this.isOpen = newValue !== null;
+                this.render();
+                break;
+            case 'position':
+                this.position = newValue;
+                break;
+            case 'width':
+                this.width = newValue;
+                break;
+            case 'overlay':
+                this.overlay = newValue !== null;
+                break;
+        }
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeyDown);
+        this.loadStyles();
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+
+    handleKeyDown = (e) => {
+        if (e.key === 'Escape' && this.isOpen) {
+            this.close();
+        }
+    }
+
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+
+    open() {
+        this.isOpen = true;
+        this.setAttribute('open', '');
+        this.render();
+        this.emit('af-navdrawer-open', { drawer: this });
+    }
+
+    close() {
+        this.isOpen = false;
+        this.removeAttribute('open');
+        this.render();
+        this.emit('af-navdrawer-close', { drawer: this });
+    }
+
+    render() {
+        if (!this.shadowRoot) return;
+
+        // Apply styles first
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    z-index: 1000;
+                }
+
+                .nav-drawer {
+                    position: fixed;
+                    top: 0;
+                    ${this.position}: 0;
+                    width: ${this.width};
+                    height: 100vh;
+                    background: var(--af-bg, #ffffff);
+                    box-shadow: var(--af-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+                    transform: translateX(${this.position === 'left' ? '-100%' : '100%'});
+                    transition: transform 0.3s ease-in-out;
+                    overflow-y: auto;
+                    z-index: 1001;
+                }
+
+                .nav-drawer.open {
+                    transform: translateX(0);
+                }
+
+                .nav-drawer-overlay {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100vw;
+                    height: 100vh;
+                    background: rgba(0, 0, 0, 0.5);
+                    opacity: 0;
+                    visibility: hidden;
+                    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+                    z-index: 1000;
+                }
+
+                .nav-drawer-overlay.open {
+                    opacity: 1;
+                    visibility: visible;
+                }
+
+                .nav-drawer-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 1rem;
+                    border-bottom: 1px solid var(--af-border-color, #e5e7eb);
+                }
+
+                .nav-drawer-title {
+                    margin: 0;
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                }
+
+                .close-btn {
+                    background: none;
+                    border: none;
+                    font-size: 1.5rem;
+                    cursor: pointer;
+                    padding: 0.25rem;
+                    border-radius: 4px;
+                }
+
+                .close-btn:hover {
+                    background: var(--af-hover-bg, #f3f4f6);
+                }
+
+                .nav-drawer-content {
+                    padding: 1rem;
+                }
+
+                .nav-item {
+                    display: block;
+                    padding: 0.75rem 1rem;
+                    text-decoration: none;
+                    color: var(--af-text, #1f2937);
+                    border-radius: 6px;
+                    margin-bottom: 0.25rem;
+                    transition: background-color 0.2s;
+                }
+
+                .nav-item:hover {
+                    background-color: var(--af-hover-bg, #f3f4f6);
+                }
+
+                .nav-item.active {
+                    background-color: var(--af-primary, #10b981);
+                    color: white;
+                }
+            </style>
+
+            ${this.overlay ? `<div class="nav-drawer-overlay ${this.isOpen ? 'open' : ''}" part="overlay"></div>` : ''}
+
+            <aside class="nav-drawer ${this.isOpen ? 'open' : ''}" part="drawer" role="dialog" aria-modal="true" aria-label="Navigation menu">
+                <header class="nav-drawer-header" part="header">
+                    <h2 class="nav-drawer-title" part="title"><slot name="title">Menu</slot></h2>
+                    <button class="close-btn" part="close-button" @click="${() => this.close()}" aria-label="Close menu">✕</button>
+                </header>
+                <div class="nav-drawer-content" part="content">
+                    <slot name="content"></slot>
+                </div>
+            </aside>
+        `;
+
+        // Add event listener to overlay if it exists
+        if (this.overlay) {
+            const overlay = this.shadowRoot.querySelector('.nav-drawer-overlay');
+            if (overlay) {
+                overlay.addEventListener('click', () => this.close());
+            }
+        }
+    }
+
+    // Allow programmatic access to menu items
+    getItems() {
+        return this.querySelectorAll('[slot="content"] .nav-item');
+    }
+
+    setActiveItem(selector) {
+        const items = this.getItems();
+        items.forEach(item => item.classList.remove('active'));
+        const activeItem = this.querySelector(selector);
+        if (activeItem) {
+            activeItem.classList.add('active');
+        }
+    }
+}
+
+// Register the component
+import { registerComponent } from './base.js';
+registerComponent('af-nav-drawer', AfriNavDrawer);
+
+export default AfriNavDrawer;

package/components/transaction-ledger.js

@@ -0,0 +1,138 @@
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+const styles = `
+  :host {
+    display: block;
+    color: var(--af-smart-text, var(--af-text, #172033));
+    font-family: var(--af-font-family, Inter, system-ui, sans-serif);
+  }
+
+  .ledger {
+    display: grid;
+    gap: 10px;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid var(--af-smart-border, var(--af-border, #d8dee8));
+    border-radius: 8px;
+    background: var(--af-smart-surface, var(--af-surface, #ffffff));
+  }
+
+  .status,
+  .empty {
+    color: var(--af-smart-muted, var(--af-muted, #647084));
+    font-size: 0.84rem;
+  }
+
+  .amount {
+    font-weight: 760;
+  }
+
+  .error {
+    color: var(--af-smart-danger, var(--af-danger, #b42318));
+  }
+`;
+
+function formatCurrency(value, currency) {
+  return `${currency || 'TZS'} ${Number(value || 0).toLocaleString('en-US')}`;
+}
+
+export class AfriTransactionLedger extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['endpoint'];
+  }
+
+  connectedCallback() {
+    this.renderShell('Loading transactions');
+    this.load();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.load();
+    }
+  }
+
+  get endpoint() {
+    return this.getAttribute('endpoint') || '/api/wallet';
+  }
+
+  renderShell(message = '') {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="ledger" role="list"></div>
+    `;
+
+    if (message) {
+      const empty = document.createElement('div');
+      empty.className = 'empty';
+      empty.textContent = message;
+      this.shadowRoot.querySelector('.ledger').append(empty);
+    }
+  }
+
+  renderTransactions(transactions) {
+    this.renderShell();
+    const ledger = this.shadowRoot.querySelector('.ledger');
+
+    if (!transactions.length) {
+      const empty = document.createElement('div');
+      empty.className = 'empty';
+      empty.textContent = 'No transactions yet.';
+      ledger.append(empty);
+      return;
+    }
+
+    ledger.replaceChildren(...transactions.map((tx) => {
+      const row = document.createElement('article');
+      const details = document.createElement('div');
+      const counterparty = document.createElement('strong');
+      const status = document.createElement('div');
+      const amount = document.createElement('span');
+
+      row.className = 'row';
+      row.setAttribute('role', 'listitem');
+      status.className = 'status';
+      amount.className = 'amount';
+      counterparty.textContent = tx.counterparty || tx.id || 'Transaction';
+      status.textContent = tx.status || tx.type || 'pending';
+      amount.textContent = formatCurrency(tx.amount, tx.currency);
+
+      details.append(counterparty, status);
+      row.append(details, amount);
+      return row;
+    }));
+  }
+
+  renderError(message) {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="empty error"></div>
+    `;
+    this.shadowRoot.querySelector('.empty').textContent = message;
+  }
+
+  async load() {
+    try {
+      const response = await fetch(this.endpoint);
+      const data = await response.json();
+      const transactions = Array.isArray(data.transactions) ? data.transactions : [];
+
+      if (!response.ok || data.ok === false) {
+        throw new Error(data.error || 'Ledger data unavailable.');
+      }
+
+      this.renderTransactions(transactions);
+      this.emit('af-ledger-load', { transactions });
+    } catch (error) {
+      this.renderError('Transaction ledger unavailable.');
+      this.emit('af-ledger-error', { message: error.message });
+    }
+  }
+}
+
+registerComponent('af-transaction-ledger', AfriTransactionLedger);

package/components/wallet-balance.js

@@ -0,0 +1,114 @@
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+const styles = `
+  :host {
+    display: block;
+    color: var(--af-smart-text, var(--af-text, #172033));
+    font-family: var(--af-font-family, Inter, system-ui, sans-serif);
+  }
+
+  .wallet {
+    display: grid;
+    gap: 8px;
+    padding: 16px;
+    border: 1px solid var(--af-smart-border, var(--af-border, #d8dee8));
+    border-radius: 8px;
+    background: var(--af-smart-surface, var(--af-surface, #ffffff));
+  }
+
+  .label,
+  .meta {
+    color: var(--af-smart-muted, var(--af-muted, #647084));
+    font-size: 0.84rem;
+  }
+
+  .amount {
+    font-size: 1.8rem;
+    font-weight: 760;
+  }
+
+  .error {
+    color: var(--af-smart-danger, var(--af-danger, #b42318));
+  }
+`;
+
+function formatCurrency(value, currency) {
+  return `${currency || 'TZS'} ${Number(value || 0).toLocaleString('en-US')}`;
+}
+
+export class AfriWalletBalance extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['endpoint'];
+  }
+
+  connectedCallback() {
+    this.renderLoading();
+    this.load();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.load();
+    }
+  }
+
+  get endpoint() {
+    return this.getAttribute('endpoint') || '/api/wallet';
+  }
+
+  renderLoading() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <article class="wallet">
+        <span class="label">Available balance</span>
+        <strong class="amount">Loading</strong>
+        <span class="meta">Fetching wallet</span>
+      </article>
+    `;
+  }
+
+  renderWallet(wallet) {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <article class="wallet">
+        <span class="label">Available balance</span>
+        <strong class="amount"></strong>
+        <span class="meta"></span>
+      </article>
+    `;
+
+    this.shadowRoot.querySelector('.amount').textContent = formatCurrency(wallet.availableBalance, wallet.currency);
+    this.shadowRoot.querySelector('.meta').textContent = `Ledger ${formatCurrency(wallet.ledgerBalance, wallet.currency)} · Daily limit ${formatCurrency(wallet.dailyLimit, wallet.currency)}`;
+  }
+
+  renderError(message) {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <article class="wallet">
+        <span class="label">Available balance</span>
+        <strong class="amount error">Unavailable</strong>
+        <span class="meta error"></span>
+      </article>
+    `;
+    this.shadowRoot.querySelector('.meta').textContent = message;
+  }
+
+  async load() {
+    try {
+      const response = await fetch(this.endpoint);
+      const data = await response.json();
+
+      if (!response.ok || data.ok === false || !data.wallet) {
+        throw new Error(data.error || 'Wallet data unavailable.');
+      }
+
+      this.renderWallet(data.wallet);
+      this.emit('af-wallet-load', data);
+    } catch (error) {
+      this.renderError('Wallet API is unavailable.');
+      this.emit('af-wallet-error', { message: error.message });
+    }
+  }
+}
+
+registerComponent('af-wallet-balance', AfriWalletBalance);

package/core/a2ui-schema-manager.js

@@ -146,7 +146,7 @@ export class A2UISchemaManager {
      */
     extractComponentMetadata(filename, content) {
         // Extract tagName
-        const tagMatch = content.match(/customElements\.define\(['"]([a-z0-9-]+)['"]/);
+        const tagMatch = content.match(/(?:customElements\.define|registerComponent)\(['"]([a-z0-9-]+)['"]/);
         if (!tagMatch) return null;
 
         const tagName = tagMatch[1];

package/core/a2ui.js

@@ -20,7 +20,13 @@ export const A2UI_TYPES = {
     CARD: 'card',
     MODAL: 'modal',
     TOAST: 'toast',
-    PROGRESS: 'progress'
+    PROGRESS: 'progress',
+    CHART: 'chart',
+    DATATABLE: 'datatable',
+    TABS: 'tabs',
+    ACCORDION: 'accordion',
+    STEPPER: 'stepper',
+    DASHBOARD_WIDGET: 'dashboard-widget'
 };
 
 /**
@@ -167,6 +173,24 @@ export class A2UIRenderer {
             case A2UI_TYPES.PROGRESS:
                 element = this.createProgress(props);
                 break;
+            case A2UI_TYPES.CHART:
+                element = this.createChart(props);
+                break;
+            case A2UI_TYPES.DATATABLE:
+                element = this.createDatatable(props);
+                break;
+            case A2UI_TYPES.TABS:
+                element = this.createTabs(props);
+                break;
+            case A2UI_TYPES.ACCORDION:
+                element = this.createAccordion(props);
+                break;
+            case A2UI_TYPES.STEPPER:
+                element = this.createStepper(props);
+                break;
+            case A2UI_TYPES.DASHBOARD_WIDGET:
+                element = this.createDashboardWidget(props);
+                break;
             default:
                 throw new Error(`Unknown A2UI component type: ${type}`);
         }
@@ -324,6 +348,159 @@ export class A2UIRenderer {
         return progress;
     }
 
+    /**
+     * Create chart component
+     */
+    createChart({ type = 'bar', data = [], labels = [], title, options = {} }) {
+        const chart = document.createElement('af-chart');
+        
+        chart.setAttribute('type', type);
+        chart.setAttribute('data', JSON.stringify(data));
+        chart.setAttribute('labels', JSON.stringify(labels));
+        
+        if (title) {
+            chart.setAttribute('title', title);
+        }
+        
+        if (options) {
+            chart.setAttribute('options', JSON.stringify(options));
+        }
+        
+        return chart;
+    }
+
+    /**
+     * Create datatable component
+     */
+    createDatatable({ columns = [], rows = [], title, options = {} }) {
+        const table = document.createElement('af-datatable');
+        
+        table.setAttribute('columns', JSON.stringify(columns));
+        table.setAttribute('rows', JSON.stringify(rows));
+        
+        if (title) {
+            table.setAttribute('title', title);
+        }
+        
+        if (options) {
+            table.setAttribute('options', JSON.stringify(options));
+        }
+        
+        return table;
+    }
+
+    /**
+     * Create tabs component
+     */
+    createTabs({ tabs = [], activeTab = 0 }) {
+        const tabsContainer = document.createElement('af-tabs');
+        tabsContainer.setAttribute('active', activeTab);
+        
+        for (let i = 0; i < tabs.length; i++) {
+            const tab = tabs[i];
+            const tabButton = document.createElement('af-tab-button');
+            tabButton.setAttribute('tab-id', i);
+            tabButton.textContent = tab.title;
+            
+            const tabContent = document.createElement('af-tab-content');
+            tabContent.setAttribute('tab-id', i);
+            tabContent.innerHTML = tab.content || '';
+            
+            tabsContainer.appendChild(tabButton);
+            tabsContainer.appendChild(tabContent);
+        }
+        
+        return tabsContainer;
+    }
+
+    /**
+     * Create accordion component
+     */
+    createAccordion({ items = [] }) {
+        const accordion = document.createElement('af-accordion');
+        
+        for (const item of items) {
+            const panel = document.createElement('af-accordion-panel');
+            
+            const header = document.createElement('af-accordion-header');
+            header.textContent = item.title;
+            
+            const content = document.createElement('af-accordion-content');
+            content.innerHTML = item.content || '';
+            
+            panel.appendChild(header);
+            panel.appendChild(content);
+            accordion.appendChild(panel);
+        }
+        
+        return accordion;
+    }
+
+    /**
+     * Create stepper component
+     */
+    createStepper({ steps = [], currentStep = 0 }) {
+        const stepper = document.createElement('af-stepper');
+        stepper.setAttribute('current-step', currentStep);
+        
+        for (let i = 0; i < steps.length; i++) {
+            const step = document.createElement('af-step');
+            step.setAttribute('step-number', i + 1);
+            step.setAttribute('active', i <= currentStep);
+            
+            if (i === currentStep) {
+                step.setAttribute('current', 'true');
+            }
+            
+            step.textContent = steps[i].title || `Step ${i + 1}`;
+            stepper.appendChild(step);
+        }
+        
+        return stepper;
+    }
+
+    /**
+     * Create dashboard widget component
+     */
+    createDashboardWidget({ title, content, type = 'card', size = 'medium', actions = [] }) {
+        const widget = document.createElement('af-dashboard-widget');
+        widget.setAttribute('type', type);
+        widget.setAttribute('size', size);
+        
+        if (title) {
+            const header = document.createElement('h3');
+            header.className = 'widget-title';
+            header.textContent = title;
+            widget.appendChild(header);
+        }
+        
+        if (content) {
+            const contentEl = document.createElement('div');
+            contentEl.className = 'widget-content';
+            contentEl.innerHTML = typeof content === 'string' ? content : JSON.stringify(content);
+            widget.appendChild(contentEl);
+        }
+        
+        if (actions.length > 0) {
+            const actionsEl = document.createElement('div');
+            actionsEl.className = 'widget-actions';
+            
+            for (const action of actions) {
+                const button = document.createElement('af-button');
+                button.textContent = action.label;
+                button.setAttribute('variant', action.variant || 'secondary');
+                if (action.onClick) {
+                    button.addEventListener('click', action.onClick);
+                }
+                actionsEl.appendChild(button);
+            }
+            
+            widget.appendChild(actionsEl);
+        }
+        
+        return widget;
+    }
+
     /**
      * Update existing component
      */