@africode/core 5.0.0

package/components/pattern-showcase.js

@@ -0,0 +1,225 @@
+/**
+ * AfriCode Pattern Showcase Component
+ * 
+ * Interactive gallery displaying all African cultural patterns
+ * with hover effects and pattern information.
+ * 
+ * @module components/pattern-showcase
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+import * as patterns from '../core/patterns.js';
+
+export class PatternShowcase extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['region', 'size'];
+  }
+
+  constructor() {
+    super();
+    this._allPatterns = [
+      // East Africa
+      { key: 'shuka', name: 'Maasai Shuka', region: 'east', country: 'Tanzania/Kenya', fn: patterns.generateShuka, meaning: 'Bravery, Unity, Identity' },
+      { key: 'hadzabe', name: 'Hadzabe', region: 'east', country: 'Tanzania', fn: patterns.generateHadzabe, meaning: 'Ancient traditions, Hunter-gatherer heritage' },
+      { key: 'kanga', name: 'Kanga', region: 'east', country: 'Tanzania/Kenya', fn: patterns.generateKangaBorder, meaning: 'Communication, Proverbs, Femininity' },
+      { key: 'kitenge', name: 'Kitenge', region: 'east', country: 'East Africa', fn: patterns.generateKitenge, meaning: 'Celebration, African identity' },
+      { key: 'tibeb', name: 'Tibeb', region: 'east', country: 'Ethiopia', fn: patterns.generateTibeb, meaning: 'Faith, Tradition, Celebration' },
+      // West Africa
+      { key: 'kente', name: 'Kente', region: 'west', country: 'Ghana', fn: patterns.generateKente, meaning: 'Royalty, Wisdom, Celebration' },
+      { key: 'adinkra', name: 'Adinkra', region: 'west', country: 'Ghana', fn: patterns.generateAdinkra, meaning: 'Philosophy, Proverbs, Wisdom' },
+      { key: 'bogolan', name: 'Bogolan', region: 'west', country: 'Mali', fn: patterns.generateBogolan, meaning: 'Earth energy, Protection, Healing' },
+      { key: 'asooke', name: 'Aso-Oke', region: 'west', country: 'Nigeria', fn: patterns.generateAsoOke, meaning: 'Prestige, Celebration, Heritage' },
+      { key: 'adire', name: 'Adire (Indigo)', region: 'west', country: 'Nigeria', fn: patterns.generateAdire, meaning: 'Creativity, Uniqueness, Depth' },
+      { key: 'ankara', name: 'Ankara', region: 'west', country: 'West Africa', fn: patterns.generateAnkara, meaning: 'Boldness, Pan-African pride' },
+      // Central Africa
+      { key: 'kuba', name: 'Kuba Shoowa', region: 'central', country: 'DRC', fn: patterns.generateKuba, meaning: 'Status, Mathematics, Eternity' },
+      { key: 'imigongo', name: 'Imigongo', region: 'central', country: 'Rwanda', fn: patterns.generateImigongo, meaning: 'Resilience, Strength, Artistry' },
+      // North Africa
+      { key: 'berber', name: 'Berber', region: 'north', country: 'North Africa', fn: patterns.generateBerber, meaning: 'Protection, Nature, Identity' },
+      // Southern Africa
+      { key: 'ndebele', name: 'Ndebele', region: 'south', country: 'South Africa', fn: patterns.generateNdebele, meaning: 'Artistry, Marriage, Status' },
+      { key: 'zulu', name: 'Zulu Beadwork', region: 'south', country: 'South Africa', fn: patterns.generateZulu, meaning: 'Love letters, Community' },
+      { key: 'swazi', name: 'Swazi', region: 'south', country: 'Eswatini', fn: patterns.generateSwazi, meaning: 'Monarchy, Warriors, Pride' },
+      { key: 'xhosa', name: 'Xhosa', region: 'south', country: 'South Africa', fn: patterns.generateXhosa, meaning: 'Dignity, Coming of age' }
+    ];
+    this.render();
+  }
+
+  connectedCallback() {
+    this._setupHovers();
+  }
+
+  _setupHovers() {
+    this.shadowRoot.querySelectorAll('.pattern-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const key = item.dataset.key;
+        const pattern = this._allPatterns.find(p => p.key === key);
+        if (pattern) {
+          this.emit('af-pattern-select', { pattern });
+        }
+      });
+    });
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this._setupHovers();
+  }
+
+  render() {
+    const regionFilter = this.getAttribute('region') || 'all';
+    const size = this.getAttribute('size') || 'md';
+
+    const filtered = regionFilter === 'all'
+      ? this._allPatterns
+      : this._allPatterns.filter(p => p.region === regionFilter);
+
+    const sizes = { sm: 80, md: 120, lg: 160 };
+    const itemSize = sizes[size] || sizes.md;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .showcase-container {
+          padding: 10px;
+        }
+
+        .region-tabs {
+          display: flex;
+          gap: 8px;
+          margin-block-end: 20px;
+          flex-wrap: wrap;
+        }
+
+        .region-tab {
+          padding: 8px 16px;
+          border: none;
+          border-radius: 20px;
+          font-family: inherit;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          background: #e9ecef;
+          color: #495057;
+          transition: all 200ms ease;
+        }
+
+        .region-tab:hover {
+          background: #dee2e6;
+        }
+
+        .region-tab.active {
+          background: linear-gradient(135deg, #1EB53A 0%, #00A3DD 100%);
+          color: white;
+        }
+
+        .pattern-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(${itemSize + 40}px, 1fr));
+          gap: 16px;
+        }
+
+        .pattern-item {
+          background: white;
+          border-radius: 12px;
+          overflow: hidden;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+          cursor: pointer;
+          transition: all 300ms ease;
+        }
+
+        .pattern-item:hover {
+          transform: scale(1.05);
+          box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+        }
+
+        .pattern-preview {
+          inline-size: 100%;
+          block-size: ${itemSize}px;
+          background-repeat: repeat;
+          transition: background-position 10s linear;
+        }
+
+        .pattern-item:hover .pattern-preview {
+          background-position: 50px 50px;
+        }
+
+        .pattern-info {
+          padding: 12px;
+        }
+
+        .pattern-name {
+          font-weight: 600;
+          font-size: 14px;
+          margin-block-end: 4px;
+          color: #333;
+        }
+
+        .pattern-country {
+          font-size: 11px;
+          color: #888;
+          margin-block-end: 6px;
+        }
+
+        .pattern-meaning {
+          font-size: 11px;
+          color: #666;
+          font-style: italic;
+          line-height: 1.4;
+          margin-block-end: 6px;
+        }
+
+        .region-label {
+          font-size: 12px;
+          padding: 3px 8px;
+          border-radius: 10px;
+          display: inline-block;
+          margin-block-end: 6px;
+        }
+
+        .region-east { background: #d4edda; color: #155724; }
+        .region-west { background: #fff3cd; color: #856404; }
+        .region-central { background: #e2e3ff; color: #3e2723; }
+        .region-south { background: #d1ecf1; color: #0c5460; }
+      </style>
+
+      <div class="showcase-container">
+        <div class="region-tabs">
+          <button class="region-tab ${regionFilter === 'all' ? 'active' : ''}" data-region="all">All Regions</button>
+          <button class="region-tab ${regionFilter === 'east' ? 'active' : ''}" data-region="east">East Africa</button>
+          <button class="region-tab ${regionFilter === 'west' ? 'active' : ''}" data-region="west">West Africa</button>
+          <button class="region-tab ${regionFilter === 'central' ? 'active' : ''}" data-region="central">Central Africa</button>
+          <button class="region-tab ${regionFilter === 'south' ? 'active' : ''}" data-region="south">Southern Africa</button>
+        </div>
+
+        <div class="pattern-grid">
+          ${filtered.map(p => `
+            <div class="pattern-item" data-key="${p.key}">
+              <div class="pattern-preview" style="background-image: url('${p.fn()}')"></div>
+              <div class="pattern-info">
+                <span class="region-label region-${p.region}">${p.region.charAt(0).toUpperCase() + p.region.slice(1)}</span>
+                <div class="pattern-name">${p.name}</div>
+                <div class="pattern-country">${p.country}</div>
+                <div class="pattern-meaning">${p.meaning}</div>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `;
+
+    // Region filter tabs
+    this.shadowRoot.querySelectorAll('.region-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        this.setAttribute('region', tab.dataset.region);
+      });
+    });
+  }
+}
+
+registerComponent('af-pattern-showcase', PatternShowcase);
+export default PatternShowcase;

package/components/progress.js

@@ -0,0 +1,134 @@
+/**
+ * AfriCode Progress Bar Component
+ * 
+ * Progress indicators for loading, completion, and metrics.
+ * Suitable for: File uploads, Course progress, Health goals, Downloads
+ * 
+ * @module components/progress
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriProgress extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['value', 'max', 'theme', 'size', 'label', 'animated'];
+    }
+
+    constructor() {
+        super();
+        this.render();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const value = parseFloat(this.getAttribute('value')) || 0;
+        const max = parseFloat(this.getAttribute('max')) || 100;
+        const theme = this.getAttribute('theme') || 'tanzania';
+        const size = this.getAttribute('size') || 'md';
+        const label = this.getAttribute('label');
+        const animated = this.hasAttribute('animated');
+
+        const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+        const themes = {
+            tanzania: { bar: '#1EB53A', track: '#e9ecef' },
+            maasai: { bar: '#FF0000', track: '#e9ecef' },
+            ndebele: { bar: '#4169E1', track: '#e9ecef' },
+            gold: { bar: '#FCD116', track: '#e9ecef' },
+            gradient: { bar: 'linear-gradient(90deg, #1EB53A 0%, #FCD116 50%, #00A3DD 100%)', track: '#e9ecef' }
+        };
+        const t = themes[theme] || themes.tanzania;
+
+        const sizes = {
+            sm: '6px',
+            md: '10px',
+            lg: '16px'
+        };
+        const height = sizes[size] || sizes.md;
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .progress-container {
+          width: 100%;
+        }
+
+        .progress-header {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 5px;
+          font-size: 13px;
+        }
+
+        .progress-label {
+          color: #333;
+          font-weight: 500;
+        }
+
+        .progress-value {
+          color: #666;
+        }
+
+        .progress-track {
+          width: 100%;
+          height: ${height};
+          background: ${t.track};
+          border-radius: 100px;
+          overflow: hidden;
+        }
+
+        .progress-bar {
+          height: 100%;
+          width: ${percentage}%;
+          background: ${t.bar};
+          border-radius: 100px;
+          transition: width 500ms ease-out;
+          ${animated ? `
+            background-size: 30px 30px;
+            background-image: linear-gradient(
+              135deg,
+              rgba(255,255,255,0.2) 25%,
+              transparent 25%,
+              transparent 50%,
+              rgba(255,255,255,0.2) 50%,
+              rgba(255,255,255,0.2) 75%,
+              transparent 75%,
+              transparent
+            );
+            animation: stripes 1s linear infinite;
+          ` : ''}
+        }
+
+        @keyframes stripes {
+          0% { background-position: 0 0; }
+          100% { background-position: 30px 0; }
+        }
+      </style>
+
+      <div class="progress-container">
+        ${label || true ? `
+          <div class="progress-header">
+            <span class="progress-label">${label || ''}</span>
+            <span class="progress-value">${percentage.toFixed(0)}%</span>
+          </div>
+        ` : ''}
+        <div class="progress-track">
+          <div class="progress-bar" role="progressbar" 
+               aria-valuenow="${value}" 
+               aria-valuemin="0" 
+               aria-valuemax="${max}"></div>
+        </div>
+      </div>
+    `;
+    }
+}
+
+registerComponent('af-progress', AfriProgress);
+export default AfriProgress;

package/components/react.js

@@ -0,0 +1,111 @@
+/**
+ * AfriCode React Interoperability Wrapper
+ *
+ * Mounts a React component tree inside an AfriCode Web Component's Shadow DOM.
+ * This allows teams to embed React views within AfriCode pages without replacing
+ * the framework's routing, build, or HMR systems.
+ *
+ * Usage:
+ *   import { AfriReact } from 'africode/components/react.js';
+ *   // or use declaratively after registration:
+ *   <af-react component="MyReactApp"></af-react>
+ *
+ * Programmatic mount:
+ *   const wrapper = document.querySelector('af-react');
+ *   wrapper.mount(MyReactComponent, { someProp: 'value' });
+ *
+ * @module components/react
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriReact extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['component'];
+    }
+
+    constructor() {
+        super();
+        this._root = null;          // React root instance
+        this._mountPoint = null;    // DOM node React renders into
+        this._component = null;     // The React component function/class
+        this._props = {};           // Props passed to the React component
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        // Create mount point inside Shadow DOM
+        this._mountPoint = document.createElement('div');
+        this._mountPoint.setAttribute('data-af-react-root', '');
+        this.shadowRoot.appendChild(this._mountPoint);
+    }
+
+    disconnectedCallback() {
+        // Clean unmount to prevent memory leaks
+        this._unmount();
+    }
+
+    /**
+     * Mount a React component into this wrapper.
+     * @param {Function|Object} Component - React component (function or class)
+     * @param {Object} [props={}] - Props to pass to the component
+     */
+    async mount(Component, props = {}) {
+        if (!this._mountPoint) {
+            console.error('[AfriCode/React] Cannot mount — component not connected to DOM.');
+            return;
+        }
+
+        this._component = Component;
+        this._props = props;
+
+        try {
+            const React = await import('react');
+            const ReactDOM = await import('react-dom/client');
+
+            // Unmount any previous tree
+            this._unmount();
+
+            this._root = ReactDOM.createRoot(this._mountPoint);
+            this._root.render(React.createElement(Component, props));
+        } catch (err) {
+            console.error('[AfriCode/React] Failed to mount React component:', err);
+            this._mountPoint.innerHTML = `
+                <div style="padding: 12px; border: 1px dashed crimson; border-radius: 6px; color: crimson; font-size: 0.85rem;">
+                    React mount failed. Ensure <code>react</code> and <code>react-dom</code> are installed.
+                </div>
+            `;
+        }
+    }
+
+    /**
+     * Update props on the currently mounted React component.
+     * @param {Object} nextProps - New props to merge and re-render with
+     */
+    async update(nextProps) {
+        if (!this._root || !this._component) {
+            console.warn('[AfriCode/React] No component mounted — call mount() first.');
+            return;
+        }
+        this._props = { ...this._props, ...nextProps };
+
+        const React = await import('react');
+        this._root.render(React.createElement(this._component, this._props));
+    }
+
+    /** @private */
+    _unmount() {
+        if (this._root) {
+            try {
+                this._root.unmount();
+            } catch (e) {
+                // Already unmounted or root was invalid
+            }
+            this._root = null;
+        }
+    }
+}
+
+registerComponent('af-react', AfriReact);
+export default AfriReact;

package/components/section.js

@@ -0,0 +1,54 @@
+/**
+ * AfriCode Content Section
+ * Standardized vertical spacing and containerization.
+ */
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriSection extends AfriCodeComponent {
+    render() {
+        const variant = this.getAttribute('variant') || 'default';
+        const title = this.getAttribute('title');
+
+        this.shadowRoot.innerHTML = html`
+            <style>
+                :host { display: block; width: 100%; }
+                .section {
+                    padding: 100px 5%;
+                    max-width: var(--page-max-width, 1280px);
+                    margin: 0 auto;
+                }
+                .section-header {
+                    text-align: center;
+                    margin-bottom: 60px;
+                }
+                .section-header h2 {
+                    font-size: 3rem;
+                    font-family: 'Outfit', sans-serif;
+                    margin: 0;
+                    color: var(--text-primary);
+                }
+                
+                :host([variant="muted"]) { background: var(--bg-surface, rgba(30, 41, 59, 0.3)); }
+                :host([variant="brand"]) { 
+                    background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-surface) 100%);
+                    border-top: 1px solid var(--glass-border);
+                    border-bottom: 1px solid var(--glass-border);
+                }
+            </style>
+            <section class="section">
+                ${title ? html`
+                    <div class="section-header">
+                        <h2>${title}</h2>
+                    </div>
+                ` : ''}
+                <slot></slot>
+            </section>
+        `;
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+}
+
+registerComponent('af-section', AfriSection);