@africode/core 5.0.0

package/bin/scaffold.ts

@@ -0,0 +1,219 @@
+#!/usr/bin/env bun
+/**
+ * create-africode v5.0.0
+ *
+ * Scaffolds a new AfriCode project with autonomous lifecycle management
+ * usage: bunx create-africode my-app
+ *
+ * @module bin/scaffold
+ */
+
+import { mkdir, writeFile, cp, readFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const FRAMEWORK_ROOT = path.resolve(__dirname, '..');
+
+const colors = {
+  green: '\x1b[32m',
+  gold: '\x1b[33m',
+  blue: '\x1b[34m',
+  red: '\x1b[31m',
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m'
+};
+
+export async function createProject(targetName?: string): Promise<void> {
+  const projectName = targetName || 'africode-app';
+
+  console.log(`
+${colors.gold}╔═══════════════════════════════════════╗
+║   ${colors.green}Creating AfriCode v5.0.0 Project${colors.gold}     ║
+╚═══════════════════════════════════════╝${colors.reset}
+`);
+
+  const projectDir = path.join(process.cwd(), projectName);
+
+  if (existsSync(projectDir)) {
+    console.log(`${colors.red}✗ Directory "${projectName}" already exists${colors.reset}`);
+    process.exit(1);
+  }
+
+  console.log(`${colors.dim}  Creating ${projectName}...${colors.reset}\n`);
+
+  try {
+    // 1. Create Project Root
+    await mkdir(projectDir);
+
+    // 2. Create package.json
+    const packageJson = {
+      "name": projectName,
+      "version": "1.0.0",
+      "description": `AfriCode v5.0.0 application - ${projectName}`,
+      "type": "module",
+      "scripts": {
+        "dev": "bun run --hot src/server.ts",
+        "build": "bun build src/server.ts --outdir dist",
+        "start": "bun run dist/server.js",
+        "test": "bun test",
+        "lint": "eslint src --ext .ts,.tsx",
+        "generate": "africode generate a2ui"
+      },
+      "dependencies": {
+        "@africode/core": "^5.0.0"
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+        "eslint": "^9.0.0",
+        "typescript": "^5.0.0"
+      }
+    };
+
+    await writeFile(
+      path.join(projectDir, 'package.json'),
+      JSON.stringify(packageJson, null, 2)
+    );
+
+    // 3. Create src directory structure
+    await mkdir(path.join(projectDir, 'src'), { recursive: true });
+    await mkdir(path.join(projectDir, 'src', 'pages'), { recursive: true });
+    await mkdir(path.join(projectDir, 'src', 'components'), { recursive: true });
+    await mkdir(path.join(projectDir, 'src', 'core'), { recursive: true });
+    await mkdir(path.join(projectDir, 'public'), { recursive: true });
+
+    // 4. Create server.ts
+    const serverContent = `#!/usr/bin/env bun
+/**
+ * ${projectName} - AfriCode v5.0.0 Server
+ */
+
+import { AfriCode } from '@africode/core';
+
+const app = new AfriCode({
+  port: 3000,
+  pagesDir: 'src/pages',
+  publicDir: 'public'
+});
+
+console.log('🚀 Starting ${projectName}...');
+app.start();
+`;
+
+    await writeFile(path.join(projectDir, 'src', 'server.ts'), serverContent);
+
+    // 5. Create index page
+    const indexPage = `/**
+ * Home Page - ${projectName}
+ */
+
+import { html } from '@africode/core';
+
+export default function Home() {
+  return html\`
+    <af-app>
+      <af-navbar>
+        <h1 slot="brand">${projectName}</h1>
+      </af-navbar>
+
+      <main>
+        <af-hero>
+          <h1>Welcome to ${projectName}</h1>
+          <p>Built with AfriCode v5.0.0</p>
+          <af-button variant="primary" size="lg">Get Started</af-button>
+        </af-hero>
+
+        <af-section>
+          <af-card>
+            <h2>African-Centric Framework</h2>
+            <p>Real-time performance with cultural patterns</p>
+          </af-card>
+        </af-section>
+      </main>
+    </af-app>
+  \`;
+}
+`;
+
+    await writeFile(path.join(projectDir, 'src', 'pages', 'index.ts'), indexPage);
+
+    // 6. Create tsconfig.json
+    const tsconfig = {
+      "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "@africode/core",
+        "strict": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "types": ["bun-types"]
+      },
+      "include": ["src/**/*"],
+      "exclude": ["node_modules", "dist"]
+    };
+
+    await writeFile(
+      path.join(projectDir, 'tsconfig.json'),
+      JSON.stringify(tsconfig, null, 2)
+    );
+
+    // 7. Create README
+    const readme = `# ${projectName}
+
+Built with AfriCode v5.0.0 - African-centric full-stack framework.
+
+## Getting Started
+
+\`\`\`bash
+cd ${projectName}
+bun install
+bun run dev
+\`\`\`
+
+## Features
+
+- ⚡ Bun runtime with 5ms startup
+- 🎨 African cultural patterns
+- 🔐 Fintech compliance (NIDA, TIPS)
+- 🤖 AI-safe component system
+- 📱 Real-time WebSocket support
+
+## Scripts
+
+- \`bun run dev\` - Start development server with hot reload
+- \`bun run build\` - Build for production
+- \`bun run start\` - Start production server
+- \`bun run test\` - Run tests
+- \`bun run generate\` - Generate A2UI schema
+`;
+
+    await writeFile(path.join(projectDir, 'README.md'), readme);
+
+    console.log(`${colors.green}✓ Project "${projectName}" created successfully!${colors.reset}`);
+    console.log(`\n${colors.blue}Next steps:${colors.reset}`);
+    console.log(`  cd ${projectName}`);
+    console.log(`  bun install`);
+    console.log(`  bun run dev`);
+    console.log(`\n${colors.dim}Happy coding with AfriCode! 🇹🇿${colors.reset}`);
+
+  } catch (error) {
+    console.error(`${colors.red}✗ Failed to create project: ${error.message}${colors.reset}`);
+    process.exit(1);
+  }
+}
+
+// CLI runner
+if (import.meta.main) {
+  const projectName = process.argv[2];
+  createProject(projectName);
+}

package/components/accordion.js

@@ -0,0 +1,183 @@
+/**
+ * AfriCode Accordion Component
+ * 
+ * Collapsible content sections for FAQs and organized information.
+ * Suitable for: FAQs, Settings, Documentation, Course content
+ * 
+ * @module components/accordion
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriAccordion extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['theme', 'multiple'];
+    }
+
+    constructor() {
+        super();
+        this._openItems = new Set();
+        this._uniqueId = Math.random().toString(36).substr(2, 9);
+        this.render();
+    }
+
+    connectedCallback() {
+        this._setupAccordion();
+    }
+
+    _setupAccordion() {
+        const headers = this.shadowRoot.querySelectorAll('.accordion-header');
+        headers.forEach((header, index) => {
+            header.addEventListener('click', () => {
+                this._toggleItem(index);
+            });
+        });
+    }
+
+    _toggleItem(index) {
+        const multiple = this.hasAttribute('multiple');
+
+        if (this._openItems.has(index)) {
+            this._openItems.delete(index);
+        } else {
+            if (!multiple) {
+                this._openItems.clear();
+            }
+            this._openItems.add(index);
+        }
+
+        this.render();
+        this._setupAccordion();
+        this.emit('af-toggle', { index, open: this._openItems.has(index) });
+    }
+
+    attributeChangedCallback() {
+        this.render();
+        this._setupAccordion();
+    }
+
+    render() {
+        const theme = this.getAttribute('theme') || 'tanzania';
+        const itemsSlot = this.querySelector('[slot="items"]');
+        const items = itemsSlot ? Array.from(itemsSlot.children) : [];
+
+        const themes = {
+            tanzania: { accent: '#1EB53A' },
+            maasai: { accent: '#FF0000' },
+            ndebele: { accent: '#4169E1' }
+        };
+        const t = themes[theme] || themes.tanzania;
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .accordion {
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        .accordion-item {
+          border-bottom: 1px solid #eee;
+        }
+
+        .accordion-item:last-child {
+          border-bottom: none;
+        }
+
+        .accordion-header {
+          width: 100%;
+          padding: 16px 21px;
+          background: white;
+          border: none;
+          text-align: left;
+          font-family: inherit;
+          font-size: 15px;
+          font-weight: 600;
+          color: #333;
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          transition: all 200ms ease;
+        }
+
+        .accordion-header:hover {
+          background: #f8f9fa;
+        }
+
+        .accordion-header.active {
+          color: ${t.accent};
+        }
+
+        .accordion-icon {
+          font-size: 12px;
+          transition: transform 300ms ease;
+        }
+
+        .accordion-header.active .accordion-icon {
+          transform: rotate(180deg);
+        }
+
+        .accordion-content {
+          max-height: 0;
+          overflow: hidden;
+          background: #fafafa;
+          transition: max-height 300ms ease-out;
+        }
+
+        .accordion-content.open {
+          max-height: 500px;
+        }
+
+        .accordion-body {
+          padding: 16px 21px;
+          color: #555;
+          line-height: 1.6;
+        }
+
+        ::slotted([slot="items"]) {
+          display: none;
+        }
+      </style>
+
+      <div class="accordion">
+        ${items.map((item, i) => {
+          const expanded = this._openItems.has(i);
+          const headerId = `accordion-header-${this._uniqueId}-${i}`;
+          const panelId = `accordion-panel-${this._uniqueId}-${i}`;
+          return `
+          <div class="accordion-item">
+            <button
+              class="accordion-header ${expanded ? 'active' : ''}"
+              aria-expanded="${expanded}"
+              aria-controls="${panelId}"
+              id="${headerId}"
+            >
+              <span>${item.getAttribute('title') || `Item ${i + 1}`}</span>
+              <span class="accordion-icon">▼</span>
+            </button>
+            <div
+              class="accordion-content ${expanded ? 'open' : ''}"
+              id="${panelId}"
+              role="region"
+              aria-labelledby="${headerId}"
+            >
+              <div class="accordion-body">
+                ${item.innerHTML}
+              </div>
+            </div>
+          </div>
+        `}).join('')}
+      </div>
+      <slot name="items"></slot>
+    `;
+    }
+}
+
+registerComponent('af-accordion', AfriAccordion);
+export default AfriAccordion;

package/components/alert.js

@@ -0,0 +1,131 @@
+/**
+ * AfriCode Alert/Notification Component
+ * 
+ * Status messages, alerts, and notifications with cultural theming.
+ * Suitable for: Healthcare alerts, Financial notifications, System messages
+ * 
+ * @module components/alert
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriAlert extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['type', 'title', 'dismissible'];
+    }
+
+    constructor() {
+        super();
+        this.render();
+    }
+
+    connectedCallback() {
+        this.shadowRoot.querySelector('.close-btn')?.addEventListener('click', () => {
+            this.remove();
+            this.emit('af-dismiss');
+        });
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const type = this.getAttribute('type') || 'info';
+        const title = this.getAttribute('title') || '';
+        const dismissible = this.hasAttribute('dismissible');
+
+        const types = {
+            success: { bg: '#d4edda', border: '#1EB53A', text: '#155724', icon: '✓' },
+            warning: { bg: '#fff3cd', border: '#FCD116', text: '#856404', icon: '⚠' },
+            error: { bg: '#f8d7da', border: '#DC3545', text: '#721c24', icon: '✕' },
+            info: { bg: '#d1ecf1', border: '#00A3DD', text: '#0c5460', icon: 'ℹ' }
+        };
+        const t = types[type] || types.info;
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .alert {
+          padding: 13px 21px;
+          border-radius: 5px;
+          border-left: 4px solid ${t.border};
+          background: ${t.bg};
+          color: ${t.text};
+          display: flex;
+          align-items: flex-start;
+          gap: 13px;
+          animation: slideIn 300ms ease-out;
+        }
+
+        @keyframes slideIn {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .icon {
+          font-size: 18px;
+          flex-shrink: 0;
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: ${t.border};
+          color: white;
+          border-radius: 50%;
+        }
+
+        .content {
+          flex: 1;
+        }
+
+        .title {
+          font-weight: 600;
+          margin-bottom: 3px;
+        }
+
+        .close-btn {
+          background: none;
+          border: none;
+          font-size: 18px;
+          cursor: pointer;
+          color: ${t.text};
+          opacity: 0.7;
+          padding: 0;
+          line-height: 1;
+        }
+
+        .close-btn:hover {
+          opacity: 1;
+        }
+
+        ::slotted(*) {
+          margin: 0;
+        }
+      </style>
+
+      <div class="alert" role="alert">
+        <span class="icon">${t.icon}</span>
+        <div class="content">
+          ${title ? `<div class="title">${title}</div>` : ''}
+          <slot></slot>
+        </div>
+        ${dismissible ? '<button class="close-btn" aria-label="Dismiss">×</button>' : ''}
+      </div>
+    `;
+    }
+}
+
+registerComponent('af-alert', AfriAlert);
+export default AfriAlert;

package/components/auth.js

@@ -0,0 +1,172 @@
+/**
+ * AfriCode Auth Component
+ * A "Profound Dark" themed login/register form.
+ * 
+ * Usage: <af-auth></af-auth>
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriAuth extends AfriCodeComponent {
+    constructor() {
+        super();
+        this.mode = 'login'; // login | register
+    }
+
+    connectedCallback() {
+        this.render();
+        this.setupEvents();
+    }
+
+    setupEvents() {
+        const form = this.shadowRoot.querySelector('form');
+        const toggle = this.shadowRoot.querySelector('.toggle-mode');
+
+        if (toggle) {
+            toggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.mode = this.mode === 'login' ? 'register' : 'login';
+                this.render();
+                this.setupEvents();
+            });
+        }
+
+        if (form) {
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const email = this.shadowRoot.querySelector('#email').value;
+                const password = this.shadowRoot.querySelector('#password').value;
+                const feedback = this.shadowRoot.querySelector('.feedback');
+
+                feedback.textContent = 'Processing...';
+
+                try {
+                    const res = await fetch('/api/auth', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ action: this.mode, email, password })
+                    });
+
+                    const data = await res.json();
+
+                    if (data.error) {
+                        feedback.textContent = data.error;
+                        feedback.style.color = '#ef4444';
+                    } else {
+                        feedback.textContent = 'Success! Redirecting...';
+                        feedback.style.color = '#22c55e';
+                        setTimeout(() => window.location.href = '/', 1000);
+                    }
+                } catch (err) {
+                    feedback.textContent = 'Network Error';
+                }
+            });
+        }
+    }
+
+    render() {
+        const isLogin = this.mode === 'login';
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+            display: block;
+            font-family: 'Inter', system-ui;
+            max-width: 400px;
+            margin: 0 auto;
+        }
+        .auth-card {
+            background: #1e293b;
+            border: 1px solid #334155;
+            border-radius: 12px;
+            padding: 32px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        h2 {
+            margin-top: 0;
+            color: white;
+            text-align: center;
+            font-weight: 800;
+        }
+        .input-group {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            color: #94a3b8;
+            font-size: 0.9rem;
+            margin-bottom: 8px;
+        }
+        input {
+            width: 100%;
+            padding: 12px;
+            background: #0f172a;
+            border: 1px solid #334155;
+            border-radius: 6px;
+            color: white;
+            font-size: 1rem;
+            box-sizing: border-box; 
+        }
+        input:focus {
+            border-color: #1EB53A;
+            outline: none;
+        }
+        button {
+            width: 100%;
+            padding: 12px;
+            background: #1EB53A;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-weight: 700;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+        button:hover {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+        .footer {
+            margin-top: 20px;
+            text-align: center;
+            font-size: 0.9rem;
+            color: #94a3b8;
+        }
+        .toggle-mode {
+            color: #FCD116;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+        .feedback {
+            text-align: center;
+            margin-bottom: 16px;
+            min-height: 20px;
+            font-size: 0.9rem;
+        }
+      </style>
+
+      <div class="auth-card">
+        <h2>${isLogin ? 'Welcome Back' : 'Create Account'}</h2>
+        <div class="feedback"></div>
+        <form>
+            <div class="input-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" required placeholder="you@example.com">
+            </div>
+            <div class="input-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" required placeholder="••••••••">
+            </div>
+            <button type="submit">${isLogin ? 'Sign In' : 'Sign Up'}</button>
+        </form>
+        <div class="footer">
+            ${isLogin ? 'New here?' : 'Already have an account?'}
+            <span class="toggle-mode">${isLogin ? 'Create an account' : 'Sign in'}</span>
+        </div>
+      </div>
+    `;
+    }
+}
+
+registerComponent('af-auth', AfriAuth);