@mounaji_npm/cli 0.1.0

package/bin/cli.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/**
+ * mounaji CLI — entry point
+ *
+ * Commands:
+ *   mounaji create <name>    Scaffold a new SaaS app
+ *   mounaji add <module>     Add a module page to an existing app
+ *   mounaji tokens export    Export current tokens as CSS/JSON
+ */
+
+const [,, command, ...args] = process.argv;
+
+switch (command) {
+  case 'create':
+    process.argv = [...process.argv.slice(0, 2), ...args];
+    import('./create.js');
+    break;
+
+  case 'add':
+    console.log('\n@mounaji_npm/cli add — coming soon\n');
+    console.log('For now, manually add a module manifest to mn-config.js');
+    console.log('and create the page file in your app/ or src/pages/ directory.\n');
+    break;
+
+  case 'tokens':
+    console.log('\n@mounaji_npm/cli tokens — coming soon\n');
+    break;
+
+  default:
+    console.log(`
+@mounaji_npm/cli v0.1.0
+
+Usage:
+  npx @mounaji_npm/cli create <project-name>   Scaffold a new SaaS app
+  npx @mounaji_npm/cli add <module-id>         Add a module to an existing app (soon)
+  npx @mounaji_npm/cli tokens export           Export design tokens (soon)
+
+Examples:
+  npx @mounaji_npm/cli create my-saas-app
+  create-mounaji-app my-saas-app
+`);
+}

package/bin/create.js

@@ -0,0 +1,410 @@
+#!/usr/bin/env node
+/**
+ * create-mounaji-app
+ *
+ * Usage:
+ *   npx @mounaji_npm/cli create my-app
+ *
+ * Local linked binary:
+ *   create-mounaji-app my-app
+ *
+ * Interactive prompts:
+ *   1. Project name
+ *   2. Framework (Next.js App Router | Vite + React)
+ *   3. Modules to include (multiselect)
+ *   4. Include admin controls / DevToolbar?
+ *   5. Auth provider (Firebase | Supabase | None)
+ */
+
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { join, resolve } from 'path';
+import { execSync } from 'child_process';
+
+// We avoid hard-coding a dependency on 'prompts' for the scaffold itself
+// so it works immediately without install. Use readline-based prompts instead.
+import { createInterface } from 'readline';
+
+const CYAN   = '\x1b[36m';
+const GREEN  = '\x1b[32m';
+const YELLOW = '\x1b[33m';
+const BOLD   = '\x1b[1m';
+const RESET  = '\x1b[0m';
+
+const ALL_MODULES = [
+  { id: 'home',           label: 'Home',             pkg: null },
+  { id: 'dashboard',      label: 'Dashboard',        pkg: '@mounaji_npm/dashboard' },
+  { id: 'chat',           label: 'Chat',             pkg: '@mounaji_npm/chat' },
+  { id: 'assistants',     label: 'Assistants',       pkg: '@mounaji_npm/assistant' },
+  { id: 'knowledge-base', label: 'Knowledge Base',   pkg: '@mounaji_npm/knowledge-base' },
+  { id: 'tasks',          label: 'Tasks',            pkg: null },
+  { id: 'connections',    label: 'Connections',      pkg: null },
+  { id: 'settings',       label: 'Settings',         pkg: null },
+  { id: 'inventory',      label: 'Inventory',        pkg: null },
+  { id: 'contacts',       label: 'Contacts',         pkg: null },
+  { id: 'workflows',      label: 'Workflows',        pkg: null },
+  { id: 'platforms',      label: 'Platforms',        pkg: null },
+  { id: 'pricing',        label: 'Pricing',          pkg: null },
+];
+
+async function prompt(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(resolve => {
+    rl.question(question, answer => { rl.close(); resolve(answer.trim()); });
+  });
+}
+
+async function multiSelect(items, message) {
+  console.log(`\n${CYAN}${message}${RESET}`);
+  items.forEach((item, i) => console.log(`  ${YELLOW}${i + 1}${RESET}. ${item.label}`));
+  console.log(`  ${YELLOW}a${RESET}. All modules`);
+  const answer = await prompt(`\nEnter numbers separated by commas (e.g. 1,2,3) or 'a' for all: `);
+  if (answer.toLowerCase() === 'a') return items;
+  const indices = answer.split(',').map(s => parseInt(s.trim(), 10) - 1).filter(i => i >= 0 && i < items.length);
+  return indices.map(i => items[i]);
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  let projectName = args[0];
+
+  console.log(`\n${BOLD}${CYAN}◆ create-mounaji-app${RESET}\n`);
+  console.log('Scaffolds a full SaaS app powered by @mounaji_npm/* components.\n');
+
+  if (!projectName) {
+    projectName = await prompt(`${CYAN}Project name${RESET} › `);
+  }
+  if (!projectName) { console.error('Project name is required.'); process.exit(1); }
+
+  const framework = await prompt(`${CYAN}Framework${RESET} [nextjs/vite] (default: nextjs) › `);
+  const useNextjs = !framework || framework.toLowerCase().startsWith('n');
+
+  const selectedModules = await multiSelect(
+    ALL_MODULES,
+    'Select modules to include:'
+  );
+
+  const adminAnswer = await prompt(`\n${CYAN}Include DevToolbar + TokenEditor?${RESET} [y/n] (default: y) › `);
+  const includeAdmin = !adminAnswer || adminAnswer.toLowerCase() !== 'n';
+
+  // Derive output directory
+  const outDir = resolve(process.cwd(), projectName);
+  if (existsSync(outDir)) {
+    console.error(`\n${YELLOW}Directory "${projectName}" already exists.${RESET}`);
+    process.exit(1);
+  }
+
+  console.log(`\n${CYAN}Creating project...${RESET}`);
+  mkdirSync(outDir, { recursive: true });
+
+  // Derive package deps
+  const corePkgs = ['@mounaji_npm/tokens', '@mounaji_npm/ui', '@mounaji_npm/saas-template'];
+  const modulePkgs = [...new Set(selectedModules.map(m => m.pkg).filter(Boolean))];
+  if (includeAdmin) corePkgs.push('@mounaji_npm/admin-controls');
+
+  if (useNextjs) {
+    writeNextjsApp(outDir, projectName, selectedModules, includeAdmin, [...corePkgs, ...modulePkgs]);
+  } else {
+    writeViteApp(outDir, projectName, selectedModules, includeAdmin, [...corePkgs, ...modulePkgs]);
+  }
+
+  console.log(`\n${GREEN}✓ Project created at ${outDir}${RESET}`);
+  console.log(`\n${BOLD}Next steps:${RESET}`);
+  console.log(`  cd ${projectName}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev\n`);
+  console.log(`${CYAN}Docs: https://github.com/mounaji-studio/mounaji-platform/tree/main/npm_components${RESET}\n`);
+}
+
+// ─── Next.js scaffolder ───────────────────────────────────────────────────────
+
+function writeNextjsApp(outDir, name, modules, includeAdmin, deps) {
+  // package.json
+  writeJSON(join(outDir, 'package.json'), {
+    name,
+    version: '0.1.0',
+    private: true,
+    scripts: {
+      dev: 'next dev',
+      build: 'next build',
+      start: 'next start',
+      lint: 'next lint',
+    },
+    dependencies: Object.fromEntries([
+      ['next', '^15.0.0'],
+      ['react', '^19.0.0'],
+      ['react-dom', '^19.0.0'],
+      ...deps.map(d => [d, 'latest']),
+    ]),
+    devDependencies: {
+      eslint: '^9.0.0',
+      'eslint-config-next': '^15.0.0',
+    },
+  });
+
+  // next.config.js
+  writeFile(join(outDir, 'next.config.js'), `/** @type {import('next').NextConfig} */\nconst nextConfig = {};\nexport default nextConfig;\n`);
+
+  // app/layout.js
+  mkdirSync(join(outDir, 'app'), { recursive: true });
+  writeFile(join(outDir, 'app', 'layout.js'), generateNextLayout(modules, includeAdmin, name));
+
+  // app/page.js (home)
+  writeFile(join(outDir, 'app', 'page.js'), generateHomePage(name));
+
+  // Selected module pages
+  modules.filter(m => m.id !== 'home').forEach(m => {
+    const dir = join(outDir, 'app', m.id);
+    mkdirSync(dir, { recursive: true });
+    writeFile(join(dir, 'page.js'), generateModulePage(m));
+  });
+
+  // mn-config.js
+  writeFile(join(outDir, 'mn-config.js'), generateMnConfig(modules, name));
+
+  // .env.local
+  writeFile(join(outDir, '.env.local'), [
+    '# Backend API',
+    'NEXT_PUBLIC_BACKEND_URL=http://localhost:5000',
+    '',
+    '# Firebase (optional)',
+    '# NEXT_PUBLIC_FIREBASE_API_KEY=',
+    '# NEXT_PUBLIC_FIREBASE_PROJECT_ID=',
+  ].join('\n'));
+}
+
+// ─── Vite scaffolder ──────────────────────────────────────────────────────────
+
+function writeViteApp(outDir, name, modules, includeAdmin, deps) {
+  writeJSON(join(outDir, 'package.json'), {
+    name,
+    version: '0.1.0',
+    private: true,
+    type: 'module',
+    scripts: { dev: 'vite', build: 'vite build', preview: 'vite preview' },
+    dependencies: Object.fromEntries([
+      ['react', '^19.0.0'],
+      ['react-dom', '^19.0.0'],
+      ['react-router-dom', '^6.0.0'],
+      ...deps.map(d => [d, 'latest']),
+    ]),
+    devDependencies: {
+      '@vitejs/plugin-react': '^4.3.4',
+      vite: '^6.0.0',
+    },
+  });
+
+  writeFile(join(outDir, 'vite.config.js'), `import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nexport default defineConfig({ plugins: [react()] });\n`);
+
+  mkdirSync(join(outDir, 'src'), { recursive: true });
+  writeFile(join(outDir, 'index.html'), generateViteHtml(name));
+  writeFile(join(outDir, 'src', 'main.jsx'), generateViteMain(modules, includeAdmin, name));
+  writeFile(join(outDir, 'src', 'App.jsx'), generateViteApp(modules, name));
+  writeFile(join(outDir, 'mn-config.js'), generateMnConfig(modules, name));
+}
+
+// ─── Template generators ──────────────────────────────────────────────────────
+
+function generateNextLayout(modules, includeAdmin, name) {
+  const moduleImports = modules.map(m => `  ${toConstName(m.id)}_MODULE`).join(',\n');
+  return `'use client';
+/**
+ * Root layout — generated by create-mounaji-app
+ * Edit mn-config.js to add/remove modules, change branding, or customize tokens.
+ */
+import { AppShell } from '@mounaji_npm/saas-template';
+import {
+${moduleImports},
+} from '@mounaji_npm/saas-template/modules';
+${includeAdmin ? "import { DevToolbar } from '@mounaji_npm/admin-controls';" : ''}
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { MN_CONFIG } from '../mn-config.js';
+
+const MODULES = [
+${modules.map(m => `  ${toConstName(m.id)}_MODULE,`).join('\n')}
+];
+
+function RootLayoutInner({ children }) {
+  const pathname = usePathname();
+  return (
+    <AppShell
+      modules={MODULES}
+      activePath={pathname}
+      LinkComponent={Link}
+      logo={<span style={{ fontWeight: 700, fontSize: '0.9375rem', color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>{MN_CONFIG.name}</span>}
+      tokens={MN_CONFIG.tokens}
+    >
+      {children}
+      ${includeAdmin ? '{process.env.NODE_ENV !== \'production\' && <DevToolbar />}' : ''}
+    </AppShell>
+  );
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body style={{ margin: 0 }}>
+        <RootLayoutInner>{children}</RootLayoutInner>
+      </body>
+    </html>
+  );
+}
+`;
+}
+
+function generateHomePage(name) {
+  return `export default function HomePage() {
+  return (
+    <div style={{ padding: 32 }}>
+      <h1 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 700, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>
+        Welcome to ${name}
+      </h1>
+      <p style={{ color: 'var(--mn-text-secondary-dark, #94A3B8)', marginTop: 8 }}>
+        Your SaaS platform is ready. Start building.
+      </p>
+    </div>
+  );
+}
+`;
+}
+
+function generateModulePage(m) {
+  const compName = toPascalCase(m.id) + 'Page';
+  return `// ${m.label} page — edit this file to build out the ${m.label} module
+export default function ${compName}() {
+  return (
+    <div style={{ padding: 32, fontFamily: 'var(--mn-font-family, inherit)' }}>
+      <h1 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 700, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>
+        ${m.label}
+      </h1>
+      <p style={{ color: 'var(--mn-text-secondary-dark, #94A3B8)', marginTop: 8 }}>
+        Build your ${m.label} page here.
+      </p>
+    </div>
+  );
+}
+`;
+}
+
+function generateMnConfig(modules, name) {
+  return `/**
+ * mn-config.js — Mounaji Platform Configuration
+ *
+ * Edit this file to:
+ *   - Change branding (name, logo)
+ *   - Add/remove nav modules
+ *   - Override design tokens
+ *   - Add custom page modules
+ *
+ * Adding a new page module:
+ *   1. Create app/my-page/page.js (Next.js) or src/pages/MyPage.jsx (Vite)
+ *   2. Add an entry to CUSTOM_MODULES below
+ *   3. Import and add it to AppShell's modules prop in layout.js
+ */
+
+export const MN_CONFIG = {
+  // ── Branding ──────────────────────────────────────────────────────────────
+  name: '${name}',
+  logoUrl: null,    // set to '/logo.png' or a URL
+
+  // ── Design Token Overrides ───────────────────────────────────────────────
+  // These override @mounaji_npm/tokens DEFAULT_TOKENS.
+  // All values are injected as CSS variables at runtime.
+  tokens: {
+    // colorPrimary: '#7C3AED',   // change brand color
+    // radiusLg: '1rem',          // rounder corners
+    // fontFamily: '"Outfit", sans-serif',
+  },
+
+  // ── Custom page modules ───────────────────────────────────────────────────
+  // Add entries here, then import and add to modules array in layout.js
+  customModules: [
+    // {
+    //   id: 'analytics',
+    //   label: 'Analytics',
+    //   icon: '📊',
+    //   path: '/analytics',
+    //   section: 'Workspace',
+    //   order: 10,
+    // },
+  ],
+};
+`;
+}
+
+function generateViteHtml(name) {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body style="margin:0">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+`;
+}
+
+function generateViteMain(modules, includeAdmin, name) {
+  return `import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+`;
+}
+
+function generateViteApp(modules, name) {
+  const routes = modules.map(m => `    { path: '${m.id === 'home' ? '/' : '/' + m.id}', element: <div style={{padding:32}}><h1 style={{color:'var(--mn-text-primary-dark,#F0F4FF)'}}>${m.label}</h1></div> }`).join(',\n');
+  return `import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { AppShell } from '@mounaji_npm/saas-template';
+import { ${modules.map(m => toConstName(m.id) + '_MODULE').join(', ')} } from '@mounaji_npm/saas-template/modules';
+import { MN_CONFIG } from '../mn-config.js';
+
+const MODULES = [${modules.map(m => toConstName(m.id) + '_MODULE').join(', ')}];
+
+function AppInner() {
+  const { pathname } = useLocation();
+  return (
+    <AppShell modules={MODULES} activePath={pathname} tokens={MN_CONFIG.tokens}
+      logo={<span style={{fontWeight:700,color:'var(--mn-text-primary-dark,#F0F4FF)'}}>{MN_CONFIG.name}</span>}>
+      <Routes>
+${routes}
+      </Routes>
+    </AppShell>
+  );
+}
+
+export default function App() {
+  return <BrowserRouter><AppInner /></BrowserRouter>;
+}
+`;
+}
+
+// ─── Utils ────────────────────────────────────────────────────────────────────
+
+function toConstName(id) {
+  return id.toUpperCase().replace(/-/g, '_');
+}
+
+function toPascalCase(id) {
+  return id.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
+}
+
+function writeFile(path, content) {
+  writeFileSync(path, content, 'utf8');
+  console.log(`  ${GREEN}+${RESET} ${path.replace(process.cwd(), '.')}`);
+}
+
+function writeJSON(path, obj) {
+  writeFile(path, JSON.stringify(obj, null, 2) + '\n');
+}
+
+main().catch(err => { console.error(err); process.exit(1); });

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@mounaji_npm/cli",
+  "version": "0.1.0",
+  "description": "CLI to scaffold a new Mounaji SaaS app — full Next.js template with selectable modules",
+  "keywords": ["cli", "scaffold", "saas", "nextjs", "mounaji", "create-app"],
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bin": {
+    "create-mounaji-app": "./bin/create.js",
+    "mounaji": "./bin/cli.js"
+  },
+  "files": ["bin", "templates"],
+  "scripts": {
+    "test": "node bin/create.js --help"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "kleur": "^4.1.5"
+  }
+}