@mounaji_npm/cli 0.1.1 → 0.1.2

package/bin/cli.js

@@ -28,7 +28,7 @@ switch (command) {
 
   default:
     console.log(`
-@mounaji_npm/cli v0.1.1
+@mounaji_npm/cli v0.1.2
 
 Usage:
   npx @mounaji_npm/cli create <project-name>   Scaffold a new SaaS app

package/bin/create.js

@@ -46,6 +46,18 @@ const ALL_MODULES = [
   { id: 'pricing',        label: 'Pricing',          pkg: null },
 ];
 
+const PACKAGE_VERSIONS = {
+  '@mounaji_npm/admin-controls': '^0.1.1',
+  '@mounaji_npm/assistant': '^0.1.1',
+  '@mounaji_npm/auth': '^0.1.2',
+  '@mounaji_npm/chat': '^0.1.1',
+  '@mounaji_npm/dashboard': '^0.1.1',
+  '@mounaji_npm/knowledge-base': '^0.1.1',
+  '@mounaji_npm/saas-template': '^0.1.2',
+  '@mounaji_npm/tokens': '^0.1.1',
+  '@mounaji_npm/ui': '^0.1.1',
+};
+
 async function prompt(question) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   return new Promise(resolve => {
@@ -97,7 +109,7 @@ async function main() {
   mkdirSync(outDir, { recursive: true });
 
   // Derive package deps
-  const corePkgs = ['@mounaji_npm/tokens', '@mounaji_npm/ui', '@mounaji_npm/saas-template'];
+  const corePkgs = ['@mounaji_npm/tokens', '@mounaji_npm/ui', '@mounaji_npm/saas-template', '@mounaji_npm/auth'];
   const modulePkgs = [...new Set(selectedModules.map(m => m.pkg).filter(Boolean))];
   if (includeAdmin) corePkgs.push('@mounaji_npm/admin-controls');
 
@@ -123,6 +135,7 @@ function writeNextjsApp(outDir, name, modules, includeAdmin, deps) {
     name,
     version: '0.1.0',
     private: true,
+    type: 'module',
     scripts: {
       dev: 'next dev',
       build: 'next build',
@@ -133,7 +146,7 @@ function writeNextjsApp(outDir, name, modules, includeAdmin, deps) {
       ['next', '^15.0.0'],
       ['react', '^19.0.0'],
       ['react-dom', '^19.0.0'],
-      ...deps.map(d => [d, 'latest']),
+      ...deps.map(d => [d, resolveDepVersion(d)]),
     ]),
     devDependencies: {
       eslint: '^9.0.0',
@@ -147,6 +160,8 @@ function writeNextjsApp(outDir, name, modules, includeAdmin, deps) {
   // app/layout.js
   mkdirSync(join(outDir, 'app'), { recursive: true });
   writeFile(join(outDir, 'app', 'layout.js'), generateNextLayout(modules, includeAdmin, name));
+  mkdirSync(join(outDir, 'lib'), { recursive: true });
+  writeFile(join(outDir, 'lib', 'demoAuthAdapter.js'), generateDemoAuthAdapter());
 
   // app/page.js (home)
   writeFile(join(outDir, 'app', 'page.js'), generateHomePage(name));
@@ -185,7 +200,7 @@ function writeViteApp(outDir, name, modules, includeAdmin, deps) {
       ['react', '^19.0.0'],
       ['react-dom', '^19.0.0'],
       ['react-router-dom', '^6.0.0'],
-      ...deps.map(d => [d, 'latest']),
+      ...deps.map(d => [d, resolveDepVersion(d)]),
     ]),
     devDependencies: {
       '@vitejs/plugin-react': '^4.3.4',
@@ -196,9 +211,11 @@ function writeViteApp(outDir, name, modules, includeAdmin, deps) {
   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 });
+  mkdirSync(join(outDir, 'src', 'lib'), { 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, 'src', 'App.jsx'), generateViteApp(modules, includeAdmin, name));
+  writeFile(join(outDir, 'src', 'lib', 'demoAuthAdapter.js'), generateDemoAuthAdapter());
   writeFile(join(outDir, 'mn-config.js'), generateMnConfig(modules, name));
 }
 
@@ -210,33 +227,72 @@ function generateNextLayout(modules, includeAdmin, name) {
 /**
  * Root layout — generated by create-mounaji-app
  * Edit mn-config.js to add/remove modules, change branding, or customize tokens.
+ * Replace demoAuthAdapter with a real provider such as
+ * createFirebaseAdapter from @mounaji_npm/auth/firebase when ready.
  */
+import { useEffect, useState } from 'react';
 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 { AuthProvider, LoginButton } from '@mounaji_npm/auth';
+import { usePathname, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { MN_CONFIG } from '../mn-config.js';
+import { createDemoAuthAdapter } from '../lib/demoAuthAdapter.js';
 
 const MODULES = [
 ${modules.map(m => `  ${toConstName(m.id)}_MODULE,`).join('\n')}
 ];
 
+const THEME_STORAGE_KEY = 'mn_theme_mode';
+
 function RootLayoutInner({ children }) {
   const pathname = usePathname();
+  const router = useRouter();
+  const [adapter] = useState(() => createDemoAuthAdapter());
+  const [isDark, setIsDark] = useState(true);
+
+  useEffect(() => {
+    const savedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+    if (savedTheme === 'light') {
+      setIsDark(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, isDark ? 'dark' : 'light');
+  }, [isDark]);
+
   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>
+    <AuthProvider adapter={adapter}>
+      <AppShell
+        modules={MODULES}
+        activePath={pathname}
+        LinkComponent={Link}
+        logo={(
+          <span
+            style={{
+              fontWeight: 700,
+              fontSize: '0.9375rem',
+              color: isDark
+                ? 'var(--mn-text-primary-dark, #F0F4FF)'
+                : 'var(--mn-text-primary-light, #1C1915)',
+            }}
+          >
+            {MN_CONFIG.name}
+          </span>
+        )}
+        tokens={MN_CONFIG.tokens}
+        isDark={isDark}
+        onThemeToggle={() => setIsDark((value) => !value)}
+        topNavRight={<LoginButton isDark={isDark} onNavigate={(path) => router.push(path)} />}
+      >
+        {children}
+        ${includeAdmin ? '{process.env.NODE_ENV !== \'production\' && <DevToolbar />}' : ''}
+      </AppShell>
+    </AuthProvider>
   );
 }
 
@@ -256,12 +312,18 @@ 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)' }}>
+      <h1 className="mn-page-title" style={{ margin: 0, fontSize: '1.5rem', fontWeight: 700 }}>
         Welcome to ${name}
       </h1>
-      <p style={{ color: 'var(--mn-text-secondary-dark, #94A3B8)', marginTop: 8 }}>
+      <p className="mn-page-copy" style={{ marginTop: 8 }}>
         Your SaaS platform is ready. Start building.
       </p>
+      <style>{\`
+        .mn-page-title { color: var(--mn-text-primary-dark, #F0F4FF); }
+        .mn-page-copy { color: var(--mn-text-secondary-dark, #94A3B8); }
+        [data-mn-theme="light"] .mn-page-title { color: var(--mn-text-primary-light, #1C1915); }
+        [data-mn-theme="light"] .mn-page-copy { color: var(--mn-text-secondary-light, #47413C); }
+      \`}</style>
     </div>
   );
 }
@@ -274,12 +336,18 @@ function generateModulePage(m) {
 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)' }}>
+      <h1 className="mn-page-title" style={{ margin: 0, fontSize: '1.5rem', fontWeight: 700 }}>
         ${m.label}
       </h1>
-      <p style={{ color: 'var(--mn-text-secondary-dark, #94A3B8)', marginTop: 8 }}>
+      <p className="mn-page-copy" style={{ marginTop: 8 }}>
         Build your ${m.label} page here.
       </p>
+      <style>{\`
+        .mn-page-title { color: var(--mn-text-primary-dark, #F0F4FF); }
+        .mn-page-copy { color: var(--mn-text-secondary-dark, #94A3B8); }
+        [data-mn-theme="light"] .mn-page-title { color: var(--mn-text-primary-light, #1C1915); }
+        [data-mn-theme="light"] .mn-page-copy { color: var(--mn-text-secondary-light, #47413C); }
+      \`}</style>
     </div>
   );
 }
@@ -361,24 +429,93 @@ createRoot(document.getElementById('root')).render(
 `;
 }
 
-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';
+function generateViteApp(modules, includeAdmin, name) {
+  const routes = modules.map(m => `  { path: '${m.id === 'home' ? '/' : '/' + m.id}', title: '${m.label}', description: '${m.id === 'home' ? 'Your SaaS platform is ready. Start building.' : `Build your ${m.label} page here.`}' }`).join(',\n');
+  return `import { useEffect, useState } from 'react';
+import { BrowserRouter, Routes, Route, useLocation, useNavigate } 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 { AuthProvider, LoginButton } from '@mounaji_npm/auth';
+${includeAdmin ? "import { DevToolbar } from '@mounaji_npm/admin-controls';" : ''}
 import { MN_CONFIG } from '../mn-config.js';
+import { createDemoAuthAdapter } from './lib/demoAuthAdapter.js';
 
 const MODULES = [${modules.map(m => toConstName(m.id) + '_MODULE').join(', ')}];
+const ROUTES = [
+${routes}
+];
+const THEME_STORAGE_KEY = 'mn_theme_mode';
+
+function PageFrame({ title, description }) {
+  return (
+    <div style={{ padding: 32, fontFamily: 'var(--mn-font-family, inherit)' }}>
+      <h1 className="mn-page-title" style={{ margin: 0, fontSize: '1.5rem', fontWeight: 700 }}>
+        {title}
+      </h1>
+      <p className="mn-page-copy" style={{ marginTop: 8 }}>
+        {description}
+      </p>
+      <style>{\`
+        .mn-page-title { color: var(--mn-text-primary-dark, #F0F4FF); }
+        .mn-page-copy { color: var(--mn-text-secondary-dark, #94A3B8); }
+        [data-mn-theme="light"] .mn-page-title { color: var(--mn-text-primary-light, #1C1915); }
+        [data-mn-theme="light"] .mn-page-copy { color: var(--mn-text-secondary-light, #47413C); }
+      \`}</style>
+    </div>
+  );
+}
 
 function AppInner() {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const [adapter] = useState(() => createDemoAuthAdapter());
+  const [isDark, setIsDark] = useState(true);
+
+  useEffect(() => {
+    const savedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+    if (savedTheme === 'light') {
+      setIsDark(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, isDark ? 'dark' : 'light');
+  }, [isDark]);
+
   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>
+    <AuthProvider adapter={adapter}>
+      <AppShell
+        modules={MODULES}
+        activePath={pathname}
+        tokens={MN_CONFIG.tokens}
+        isDark={isDark}
+        onThemeToggle={() => setIsDark((value) => !value)}
+        topNavRight={<LoginButton isDark={isDark} onNavigate={(path) => navigate(path)} />}
+        logo={
+          <span
+            style={{
+              fontWeight: 700,
+              color: isDark
+                ? 'var(--mn-text-primary-dark, #F0F4FF)'
+                : 'var(--mn-text-primary-light, #1C1915)',
+            }}
+          >
+            {MN_CONFIG.name}
+          </span>
+        }
+      >
+        <Routes>
+          {ROUTES.map((route) => (
+            <Route
+              key={route.path}
+              path={route.path}
+              element={<PageFrame title={route.title} description={route.description} />}
+            />
+          ))}
+        </Routes>
+        ${includeAdmin ? '{import.meta.env.DEV && <DevToolbar />}' : ''}
+      </AppShell>
+    </AuthProvider>
   );
 }
 
@@ -388,6 +525,112 @@ export default function App() {
 `;
 }
 
+function generateDemoAuthAdapter() {
+  return `const USER_STORAGE_KEY = 'mn_demo_auth_user';
+const TOKEN_STORAGE_KEY = 'mn_demo_auth_token';
+
+export function createDemoAuthAdapter() {
+  const listeners = new Set();
+
+  function readSession() {
+    if (typeof window === 'undefined') {
+      return { user: null, token: null };
+    }
+
+    const token = window.localStorage.getItem(TOKEN_STORAGE_KEY);
+    const rawUser = window.localStorage.getItem(USER_STORAGE_KEY);
+
+    if (!token || !rawUser) {
+      return { user: null, token: null };
+    }
+
+    try {
+      return { user: JSON.parse(rawUser), token };
+    } catch {
+      window.localStorage.removeItem(USER_STORAGE_KEY);
+      window.localStorage.removeItem(TOKEN_STORAGE_KEY);
+      return { user: null, token: null };
+    }
+  }
+
+  function emit() {
+    const { user, token } = readSession();
+    listeners.forEach((callback) => callback(user, token));
+  }
+
+  return {
+    async login({ method = 'google' } = {}) {
+      if (typeof window === 'undefined') {
+        return null;
+      }
+
+      const user = {
+        id: 'demo-user',
+        name: 'Demo User',
+        email: 'demo@mounaji.app',
+        avatar: null,
+        roles: { admin: true },
+        raw: {
+          method,
+          source: 'demo-auth-adapter',
+        },
+      };
+
+      window.localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user));
+      window.localStorage.setItem(TOKEN_STORAGE_KEY, 'demo-token');
+      emit();
+      return user;
+    },
+
+    async logout() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
+      window.localStorage.removeItem(USER_STORAGE_KEY);
+      window.localStorage.removeItem(TOKEN_STORAGE_KEY);
+      emit();
+    },
+
+    async getToken() {
+      if (typeof window === 'undefined') {
+        return null;
+      }
+
+      return window.localStorage.getItem(TOKEN_STORAGE_KEY);
+    },
+
+    onAuthChange(callback) {
+      listeners.add(callback);
+
+      const handleStorage = () => {
+        const { user, token } = readSession();
+        callback(user, token);
+      };
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('storage', handleStorage);
+      }
+
+      Promise.resolve().then(() => {
+        const { user, token } = readSession();
+        callback(user, token);
+      });
+
+      return () => {
+        listeners.delete(callback);
+        if (typeof window !== 'undefined') {
+          window.removeEventListener('storage', handleStorage);
+        }
+      };
+    },
+
+    provider: 'demo',
+  };
+}
+`;
+}
+
 // ─── Utils ────────────────────────────────────────────────────────────────────
 
 function toConstName(id) {
@@ -398,6 +641,10 @@ function toPascalCase(id) {
   return id.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
 }
 
+function resolveDepVersion(dep) {
+  return PACKAGE_VERSIONS[dep] ?? 'latest';
+}
+
 function writeFile(path, content) {
   writeFileSync(path, content, 'utf8');
   console.log(`  ${GREEN}+${RESET} ${path.replace(process.cwd(), '.')}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mounaji_npm/cli",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CLI to scaffold a new Mounaji SaaS app — full Next.js template with selectable modules",
   "keywords": [
     "cli",