@africode/core 5.0.7 → 5.0.9

package/README.md

@@ -349,6 +349,8 @@ Then use them in your HTML:
 
 AfriCode now includes a native UI kit with shadcn-inspired Web Components for rapid interface design. The Tailwind starter demonstrates the new UI kit using components like `af-ui-button`, `af-ui-card`, `af-ui-input`, `af-ui-badge`, and `af-ui-switch` in a Shadow DOM-friendly workflow.
 
+All `af-`, `af-ui-`, and `af-dashboard-` components are distributed together in the same `@africode/core` package, so they share theme, styles, registry, and versioning.
+
 The library is optimized for consistent spacing, elevation, and interactive states across theme-aware apps.
 
 Use the Tailwind starter template for a ready-made UI experience:

package/bin/create-africode.js

@@ -27,6 +27,42 @@ const colors = {
   dim: '\x1b[2m'
 };
 
+async function resolveTemplateName(args) {
+  const templateIdx = args.indexOf('--template');
+  if (templateIdx > -1) {
+    return args[templateIdx + 1] || 'starter';
+  }
+
+  if (!process.stdin.isTTY || !process.stdout.isTTY || process.env.CI) {
+    return 'starter';
+  }
+
+  const options = [
+    { value: 'starter', label: 'starter', description: 'General-purpose starter' },
+    { value: 'starter-fintech', label: 'fintech', description: 'Payments, wallets, and compliance' },
+    { value: 'starter-website', label: 'website', description: 'Marketing and content sites' },
+    { value: 'starter-dashboard', label: 'dashboard', description: 'Admin panels and analytics' },
+    { value: 'starter-tailwind', label: 'tailwind', description: 'Tailwind-enabled starter' },
+    { value: 'starter-react', label: 'react', description: 'React-style starter' },
+    { value: 'starter-3d', label: '3d', description: '3D and immersive starter' }
+  ];
+
+  console.log('\nChoose a starter template:');
+  options.forEach((option, index) => {
+    console.log(`  ${index + 1}. ${option.label} - ${option.description}`);
+  });
+
+  process.stdout.write('Enter a number [1-7] (default: 1): ');
+
+  const answer = await new Promise((resolve) => {
+    process.stdin.setEncoding('utf8');
+    process.stdin.once('data', (data) => resolve(data.toString().trim()));
+  });
+
+  const selection = Number(answer);
+  return options[selection - 1]?.value || 'starter';
+}
+
 export async function createProject(targetName) {
   const projectName = targetName || 'africode-app';
 
@@ -50,22 +86,26 @@ ${colors.gold}╔═════════════════════
     await mkdir(projectDir);
 
     // 2. Copy Template Files
-    // Support --template arg
-    // node bin/create-africode.js my-app --template 3d
-    const args = process.argv;
-    const templateIdx = args.indexOf('--template');
-    const templateName = templateIdx > -1 ? args[templateIdx + 1] : 'starter';
+    const args = process.argv.slice(2);
+    const templateName = await resolveTemplateName(args);
 
     // Validate template
-    const validTemplates = ['starter', 'starter-3d', 'starter-tailwind', 'starter-react', '3d', 'tailwind', 'react'];
+    const validTemplates = ['starter', 'starter-3d', 'starter-tailwind', 'starter-react', 'starter-fintech', 'starter-website', 'starter-dashboard', '3d', 'tailwind', 'react', 'fintech', 'website', 'dashboard'];
     // Map short aliases to full template directory names
-    const aliasMap = { '3d': 'starter-3d', 'tailwind': 'starter-tailwind', 'react': 'starter-react' };
+    const aliasMap = {
+      '3d': 'starter-3d',
+      'tailwind': 'starter-tailwind',
+      'react': 'starter-react',
+      'fintech': 'starter-fintech',
+      'website': 'starter-website',
+      'dashboard': 'starter-dashboard'
+    };
     const actualTemplate = aliasMap[templateName] || templateName || 'starter';
 
     const templateDir = path.join(FRAMEWORK_ROOT, 'templates', actualTemplate);
 
     if (!existsSync(templateDir)) {
-      throw new Error(`Template "${actualTemplate}" not found. Available: starter, tailwind, react, 3d`);
+      throw new Error(`Template "${actualTemplate}" not found. Available: starter, tailwind, react, fintech, website, dashboard, 3d`);
     }
 
     console.log(`${colors.blue}ℹ Using template: ${actualTemplate}${colors.reset}`);
@@ -84,17 +124,39 @@ ${colors.gold}╔═════════════════════
 
     await writeFile(pkgPath, JSON.stringify(pkgJson, null, 2));
 
-    // 4. Create bin directory and copy CLI tool (africode.js)
-    // This allows 'bun run bin/africode.js dev' to work in the new project
-    const binSrc = path.join(FRAMEWORK_ROOT, 'bin', 'africode.js');
+    // 4. Create bin directory and provide a lightweight CLI wrapper
+    // that resolves the installed @africode/core package entrypoint.
     const binDestDir = path.join(projectDir, 'bin');
     await mkdir(binDestDir, { recursive: true });
 
-    if (existsSync(binSrc)) {
-      await cp(binSrc, path.join(binDestDir, 'africode.js'));
-    } else {
-      console.error(`${colors.red}✗ Critical: CLI entry point not found${colors.reset}`);
-    }
+    const cliWrapper = `#!/usr/bin/env bun
+import { spawnSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+
+const args = process.argv.slice(2);
+const cliPath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../node_modules/@africode/core/bin/africode.js');
+
+if (!existsSync(cliPath)) {
+  console.error("AfriCode CLI was not found in node_modules. Run 'bun install' first.");
+  process.exit(1);
+}
+
+const result = spawnSync('bun', [cliPath, ...args], {
+  stdio: 'inherit',
+  shell: false
+});
+
+if (result.error) {
+  console.error(result.error);
+  process.exit(1);
+}
+
+process.exit(result.status ?? 0);
+`;
+
+    await writeFile(path.join(binDestDir, 'africode.js'), cliWrapper);
 
     // 5. Auto-generate index.js if missing
     const srcDir = path.join(projectDir, 'src');
@@ -110,8 +172,7 @@ ${colors.gold}╔═════════════════════
  * - SPA: import and initialize your router here
  */
 
-import { Layout } from './core/server/render.js';
-import { html } from './core/html.js';
+import { Layout, html } from '@africode/core';
 
 // Example: Simple HTML page export
 export default function App() {
@@ -135,15 +196,16 @@ export default function App() {
     console.log(`${colors.green}✓ Project created successfully!${colors.reset}\n`);
     console.log(`${colors.bold}Your project contains:${colors.reset}`);
     console.log(`  ${colors.blue}africode.config.js${colors.reset} - Framework Configuration`);
-    console.log(`  ${colors.blue}src/components/${colors.reset}    - 24+ UI Components`);
-    console.log(`  ${colors.blue}src/styles/${colors.reset}        - Design Tokens`);
-    console.log(`  ${colors.blue}src/pages/${colors.reset}         - Documentation & Demos`);
-    console.log(`  ${colors.blue}src/index.js${colors.reset}       - App Entry Point (auto-generated)`);
+    console.log(`  ${colors.blue}.env.example${colors.reset}       - Environment variable guide`);
+    console.log(`  ${colors.blue}src/pages/${colors.reset}         - File-based routes`);
+    console.log(`  ${colors.blue}src/styles/${colors.reset}        - Theme and design tokens`);
+    console.log(`  ${colors.blue}src/index.js${colors.reset}       - App entry point`);
+    console.log(`  ${colors.blue}bin/africode.js${colors.reset}    - Local CLI wrapper`);
     console.log(`\n${colors.bold}Next steps:${colors.reset}`);
     console.log(`  ${colors.dim}cd${colors.reset} ${projectName}`);
-    console.log(`  ${colors.dim}bun install${colors.reset} (if needed)`);
-    console.log(`  ${colors.dim}bun run${colors.reset} dev\n`);
-    console.log(`${colors.gold}Happy coding with the rhythm of the continent!${colors.reset}\n`);
+    console.log(`  ${colors.dim}bun install${colors.reset}`);
+    console.log(`  ${colors.dim}bun run ./bin/africode.js dev${colors.reset}`);
+    console.log(`\n${colors.gold}Happy coding with the rhythm of the continent!${colors.reset}\n`);
 
   } catch (err) {
     console.error(`${colors.red}✗ Failed to create project:${colors.reset}`, err);

package/components/auth-form.js

@@ -0,0 +1,154 @@
+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);
+  }
+
+  form {
+    display: grid;
+    gap: 12px;
+  }
+
+  label {
+    display: grid;
+    gap: 6px;
+    color: var(--af-smart-muted, var(--af-muted, #647084));
+    font-size: 0.86rem;
+  }
+
+  input {
+    min-height: 42px;
+    border: 1px solid var(--af-smart-border, var(--af-border, #d8dee8));
+    border-radius: 6px;
+    padding: 0 12px;
+    background: var(--af-smart-field-bg, var(--af-surface-muted, #eef2f7));
+    color: inherit;
+  }
+
+  button {
+    min-height: 42px;
+    border: 1px solid var(--af-smart-primary, var(--af-primary, #0f766e));
+    border-radius: 6px;
+    background: var(--af-smart-primary, var(--af-primary, #0f766e));
+    color: var(--af-smart-primary-text, #ffffff);
+    cursor: pointer;
+    font: inherit;
+    font-weight: 700;
+  }
+
+  button:disabled {
+    cursor: wait;
+    opacity: 0.7;
+  }
+
+  .message {
+    min-height: 20px;
+    color: var(--af-smart-muted, var(--af-muted, #647084));
+    font-size: 0.86rem;
+  }
+
+  .message.error {
+    color: var(--af-smart-danger, var(--af-danger, #b42318));
+  }
+
+  .message.success {
+    color: var(--af-smart-success, var(--af-success, #087443));
+  }
+`;
+
+function isEmail(value) {
+  return typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+
+export class AfriAuthForm extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['endpoint', 'button-label'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+
+  get endpoint() {
+    return this.getAttribute('endpoint') || '/api/auth';
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <form novalidate>
+        <label>
+          Email
+          <input name="email" type="email" autocomplete="email" required />
+        </label>
+        <label>
+          Password
+          <input name="password" type="password" autocomplete="current-password" minlength="8" required />
+        </label>
+        <button type="submit">${this.getAttribute('button-label') || 'Continue'}</button>
+        <div class="message" role="status" aria-live="polite"></div>
+      </form>
+    `;
+
+    this.shadowRoot.querySelector('form').addEventListener('submit', (event) => this.handleSubmit(event));
+  }
+
+  setMessage(message, type = '') {
+    const target = this.shadowRoot.querySelector('.message');
+    target.className = type ? `message ${type}` : 'message';
+    target.textContent = message;
+  }
+
+  async handleSubmit(event) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const button = form.querySelector('button');
+    const payload = {
+      email: form.elements.email.value.trim(),
+      password: form.elements.password.value
+    };
+
+    if (!isEmail(payload.email) || payload.password.length < 8) {
+      this.setMessage('Enter a valid email and password.', 'error');
+      this.emit('af-auth-error', { code: 'INVALID_INPUT' });
+      return;
+    }
+
+    button.disabled = true;
+    this.setMessage('Checking credentials...');
+
+    try {
+      const response = await fetch(this.endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      });
+      const data = await response.json();
+
+      if (!response.ok || data.ok === false) {
+        this.setMessage(data.error || 'Authentication failed.', 'error');
+        this.emit('af-auth-error', { response: data, status: response.status });
+        return;
+      }
+
+      this.setMessage('Authenticated.', 'success');
+      this.emit('af-auth-success', data);
+    } catch (error) {
+      this.setMessage('Authentication service unavailable.', 'error');
+      this.emit('af-auth-error', { code: 'NETWORK_ERROR', message: error.message });
+    } finally {
+      button.disabled = false;
+    }
+  }
+}
+
+registerComponent('af-auth-form', AfriAuthForm);

package/components/index.js

@@ -1,6 +1,11 @@
 /**
  * Component Registry (Islands Map)
  * 
+ * All AfriCode components, including the native UI kit (`af-ui-*`),
+ * dashboard widgets (`af-dashboard-*`), and website/system helpers,
+ * ship together from the same @africode/core package.
+ * This keeps theme, styles, registry, and versioning unified.
+ *
  * Instead of statically importing all components (monolithic bundle),
  * we export a map for lazy hydration.
  */
@@ -35,6 +40,11 @@ export { AfriDashboardTopbar } from './dashboard-topbar.js';
 export { AfriDashboardCard } from './dashboard-card.js';
 export { AfriDashboardMetric } from './dashboard-metric.js';
 export { AfriDashboardActivityList } from './dashboard-activity-list.js';
+export { AfriAuthForm } from './auth-form.js';
+export { AfriKycUpload } from './kyc-upload.js';
+export { AfriWalletBalance } from './wallet-balance.js';
+export { AfriTransactionLedger } from './transaction-ledger.js';
+export { AfriNavDrawer } from './nav-drawer.js';
 
 // Map of Tag Name -> Dynamic Import
 export const componentMap = {
@@ -105,6 +115,11 @@ export const componentMap = {
 
     // Auth
     'af-auth': () => import('./auth.js'),
+    'af-auth-form': () => import('./auth-form.js'),
+    'af-kyc-upload': () => import('./kyc-upload.js'),
+    'af-wallet-balance': () => import('./wallet-balance.js'),
+    'af-transaction-ledger': () => import('./transaction-ledger.js'),
+    'af-nav-drawer': () => import('./nav-drawer.js'),
 
     // Theming
     'af-theme-toggle': () => import('./theme-toggle.js'),

package/components/kyc-upload.js

@@ -0,0 +1,173 @@
+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);
+  }
+
+  form {
+    display: grid;
+    gap: 12px;
+    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 {
+    display: grid;
+    gap: 6px;
+    color: var(--af-smart-muted, var(--af-muted, #647084));
+    font-size: 0.86rem;
+  }
+
+  input {
+    width: 100%;
+    border: 1px solid var(--af-smart-border, var(--af-border, #d8dee8));
+    border-radius: 6px;
+    padding: 10px;
+    background: var(--af-smart-field-bg, var(--af-surface-muted, #eef2f7));
+    color: inherit;
+  }
+
+  button {
+    min-height: 42px;
+    border: 1px solid var(--af-smart-primary, var(--af-primary, #0f766e));
+    border-radius: 6px;
+    background: var(--af-smart-primary, var(--af-primary, #0f766e));
+    color: var(--af-smart-primary-text, #ffffff);
+    cursor: pointer;
+    font: inherit;
+    font-weight: 700;
+  }
+
+  button:disabled {
+    cursor: wait;
+    opacity: 0.7;
+  }
+
+  .hint,
+  .message {
+    color: var(--af-smart-muted, var(--af-muted, #647084));
+    font-size: 0.84rem;
+  }
+
+  .message.error {
+    color: var(--af-smart-danger, var(--af-danger, #b42318));
+  }
+
+  .message.success {
+    color: var(--af-smart-success, var(--af-success, #087443));
+  }
+`;
+
+const allowedTypes = new Set(['application/pdf', 'image/jpeg', 'image/png']);
+
+export class AfriKycUpload extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['endpoint', 'max-size-mb'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+
+  get endpoint() {
+    return this.getAttribute('endpoint') || '/api/kyc';
+  }
+
+  get maxSizeMb() {
+    return Number(this.getAttribute('max-size-mb') || 5);
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <form novalidate>
+        <label>
+          Identity document
+          <input name="document" type="file" accept="application/pdf,image/jpeg,image/png" required />
+        </label>
+        <span class="hint">PDF, JPG, or PNG. Maximum ${this.maxSizeMb} MB.</span>
+        <button type="submit">Upload for review</button>
+        <div class="message" role="status" aria-live="polite"></div>
+      </form>
+    `;
+
+    this.shadowRoot.querySelector('form').addEventListener('submit', (event) => this.handleSubmit(event));
+  }
+
+  setMessage(message, type = '') {
+    const target = this.shadowRoot.querySelector('.message');
+    target.className = type ? `message ${type}` : 'message';
+    target.textContent = message;
+  }
+
+  validateFile(file) {
+    if (!file) {
+      return { ok: false, code: 'FILE_REQUIRED', error: 'Choose an identity document.' };
+    }
+
+    if (!allowedTypes.has(file.type)) {
+      return { ok: false, code: 'UNSUPPORTED_FILE_TYPE', error: 'Use a PDF, JPG, or PNG document.' };
+    }
+
+    if (file.size > this.maxSizeMb * 1024 * 1024) {
+      return { ok: false, code: 'FILE_TOO_LARGE', error: `File must be ${this.maxSizeMb} MB or smaller.` };
+    }
+
+    return { ok: true };
+  }
+
+  async handleSubmit(event) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const button = form.querySelector('button');
+    const file = form.elements.document.files?.[0];
+    const validation = this.validateFile(file);
+
+    if (!validation.ok) {
+      this.setMessage(validation.error, 'error');
+      this.emit('af-kyc-error', validation);
+      return;
+    }
+
+    const payload = new FormData();
+    payload.set('document', file, file.name);
+
+    button.disabled = true;
+    this.setMessage('Uploading document...');
+
+    try {
+      const response = await fetch(this.endpoint, {
+        method: 'POST',
+        body: payload
+      });
+      const data = await response.json().catch(() => ({}));
+
+      if (!response.ok || data.ok === false) {
+        this.setMessage(data.error || 'Document upload failed.', 'error');
+        this.emit('af-kyc-error', { response: data, status: response.status });
+        return;
+      }
+
+      this.setMessage('Document received for review.', 'success');
+      this.emit('af-kyc-success', data);
+    } catch (error) {
+      this.setMessage('KYC service unavailable.', 'error');
+      this.emit('af-kyc-error', { code: 'NETWORK_ERROR', message: error.message });
+    } finally {
+      button.disabled = false;
+    }
+  }
+}
+
+registerComponent('af-kyc-upload', AfriKycUpload);