@mmapp/react-compiler 0.1.0-alpha.1 → 0.1.0-alpha.4

package/src/__tests__/auth-template-compilation.test.ts

@@ -1,589 +0,0 @@
-/**
- * Auth Template Compilation Tests
- *
- * Feeds the auth add-on and auth-app template files through the project compiler
- * to verify they compile successfully (or identify what fails and why).
- */
-
-import { describe, it, expect } from 'vitest';
-import { compileProject } from '../project-compiler';
-import type { IRExperienceNode } from '@mindmatrix/player-core';
-
-// =============================================================================
-// Auth Add-on Template Strings (from project-addons/auth.ts)
-// =============================================================================
-
-const ADDON_LOGIN = `import { Stack, Heading, Text, TextInput, Button, Card, Link } from '@mindmatrix/react';
-import { useAuth, useForm, useRouter } from '@mindmatrix/react';
-
-/**
- * Login page — email/password form using useAuth() hook.
- */
-export default function LoginPage() {
-  const { login, loading, error } = useAuth();
-  const router = useRouter();
-  const form = useForm({
-    fields: {
-      email: { initial: '', required: true },
-      password: { initial: '', required: true },
-    },
-  });
-
-  const handleSubmit = async () => {
-    if (!form.isValid) return;
-    try {
-      await login({ email: form.values.email, password: form.values.password });
-      router.navigate('/');
-    } catch {
-      // error is surfaced via useAuth().error
-    }
-  };
-
-  return (
-    <Stack sx={{ minHeight: '100vh', alignItems: 'center', justifyContent: 'center', background: 'var(--muted)', padding: 24 }}>
-      <Card sx={{ maxWidth: 400, width: '100%', padding: 32 }}>
-        <Stack gap={20}>
-          <Stack gap={4} sx={{ textAlign: 'center' }}>
-            <Heading text="Sign In" level="h2" />
-            <Text text="Enter your credentials to continue" sx={{ color: 'var(--muted-foreground)', fontSize: 14 }} />
-          </Stack>
-
-          {error && (
-            <Text text={error.message} sx={{ color: 'var(--destructive)', fontSize: 13, padding: '8px 12px', background: 'var(--destructive)/10', borderRadius: 6 }} />
-          )}
-
-          <Stack gap={12}>
-            <TextInput
-              label="Email"
-              placeholder="you@example.com"
-              value={form.values.email}
-              onChange={form.register('email').onChange}
-            />
-            <TextInput
-              label="Password"
-              placeholder="\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022"
-              type="password"
-              value={form.values.password}
-              onChange={form.register('password').onChange}
-            />
-          </Stack>
-
-          <Button
-            label={loading ? 'Signing in...' : 'Sign In'}
-            variant="primary"
-            onClick={handleSubmit}
-            disabled={loading || !form.isValid}
-            sx={{ width: '100%' }}
-          />
-
-          <Text sx={{ textAlign: 'center', fontSize: 13 }}>
-            <Text text="Don't have an account? " sx={{ color: 'var(--muted-foreground)' }} />
-            <Link label="Sign up" to="/signup" />
-          </Text>
-        </Stack>
-      </Card>
-    </Stack>
-  );
-}
-`;
-
-const ADDON_SIGNUP = `import { Stack, Heading, Text, TextInput, Button, Card, Link } from '@mindmatrix/react';
-import { useAuth, useForm, useRouter } from '@mindmatrix/react';
-
-/**
- * Signup page — registration form with password confirmation.
- */
-export default function SignupPage() {
-  const { login } = useAuth();
-  const router = useRouter();
-  const form = useForm({
-    fields: {
-      fullName: { initial: '', required: true },
-      email: { initial: '', required: true },
-      password: { initial: '', required: true },
-      confirmPassword: { initial: '', required: true },
-    },
-    validate: (values) => {
-      const errors: Record<string, string> = {};
-      if (values.password.length < 8) errors.password = 'Password must be at least 8 characters';
-      if (values.password !== values.confirmPassword) errors.confirmPassword = 'Passwords do not match';
-      return errors;
-    },
-  });
-
-  const handleSubmit = async () => {
-    if (!form.isValid) return;
-    try {
-      const res = await fetch('/api/v1/auth/register', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: form.values.email,
-          password: form.values.password,
-          full_name: form.values.fullName,
-        }),
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        throw new Error(body.message || 'Registration failed');
-      }
-      const { token } = await res.json();
-      localStorage.setItem('auth_token', token);
-      await login({ email: form.values.email, password: form.values.password });
-      router.navigate('/');
-    } catch (err) {
-      form.setError('email', err instanceof Error ? err.message : 'Registration failed');
-    }
-  };
-
-  return (
-    <Stack sx={{ minHeight: '100vh', alignItems: 'center', justifyContent: 'center', background: 'var(--muted)', padding: 24 }}>
-      <Card sx={{ maxWidth: 400, width: '100%', padding: 32 }}>
-        <Stack gap={20}>
-          <Stack gap={4} sx={{ textAlign: 'center' }}>
-            <Heading text="Create Account" level="h2" />
-            <Text text="Get started with your new account" sx={{ color: 'var(--muted-foreground)', fontSize: 14 }} />
-          </Stack>
-
-          <Stack gap={12}>
-            <TextInput
-              label="Full Name"
-              placeholder="John Doe"
-              value={form.values.fullName}
-              onChange={form.register('fullName').onChange}
-              error={form.errors.fullName}
-            />
-            <TextInput
-              label="Email"
-              placeholder="you@example.com"
-              value={form.values.email}
-              onChange={form.register('email').onChange}
-              error={form.errors.email}
-            />
-            <TextInput
-              label="Password"
-              placeholder="At least 8 characters"
-              type="password"
-              value={form.values.password}
-              onChange={form.register('password').onChange}
-              error={form.errors.password}
-            />
-            <TextInput
-              label="Confirm Password"
-              placeholder="\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022"
-              type="password"
-              value={form.values.confirmPassword}
-              onChange={form.register('confirmPassword').onChange}
-              error={form.errors.confirmPassword}
-            />
-          </Stack>
-
-          <Button
-            label="Create Account"
-            variant="primary"
-            onClick={handleSubmit}
-            disabled={!form.isValid}
-            sx={{ width: '100%' }}
-          />
-
-          <Text sx={{ textAlign: 'center', fontSize: 13 }}>
-            <Text text="Already have an account? " sx={{ color: 'var(--muted-foreground)' }} />
-            <Link label="Sign in" to="/login" />
-          </Text>
-        </Stack>
-      </Card>
-    </Stack>
-  );
-}
-`;
-
-const ADDON_USER_MENU = `import { Stack, Text, Button } from '@mindmatrix/react';
-import { useAuth } from '@mindmatrix/react';
-
-/**
- * UserMenu — displays current user name with a logout button.
- * Composed from atoms, no custom atom needed.
- */
-export default function UserMenu() {
-  const { user, logout } = useAuth();
-
-  return (
-    <Stack direction="row" gap={8} sx={{ alignItems: 'center' }}>
-      {/* User initial avatar */}
-      <Stack sx={{
-        width: 28, height: 28, borderRadius: '50%',
-        background: 'var(--primary)', color: 'var(--primary-foreground)',
-        alignItems: 'center', justifyContent: 'center',
-        fontSize: 12, fontWeight: 600,
-      }}>
-        <Text text={user?.name?.charAt(0)?.toUpperCase() || '?'} />
-      </Stack>
-      <Text text={user?.name || 'User'} sx={{ fontSize: 13, fontWeight: 500 }} />
-      <Button label="Logout" variant="ghost" onClick={logout} sx={{ fontSize: 12 }} />
-    </Stack>
-  );
-}
-`;
-
-// =============================================================================
-// Auth App Template Strings (from project-templates/auth-app.ts)
-// =============================================================================
-
-const TEMPLATE_MAIN_WORKFLOW = `import { Route, Stack } from '@mindmatrix/react';
-import { useAuth } from '@mindmatrix/react';
-import LoginPage from './pages/login';
-import SignupPage from './pages/signup';
-import HomePage from './pages/home';
-
-/**
- * My Auth App — Root app with auth-protected routing.
- *
- * Route guards use $user.authenticated — unauthenticated users
- * are redirected to /login automatically.
- */
-export default function App() {
-  return (
-    <>
-      <Route path="/login">
-        <LoginPage />
-      </Route>
-      <Route path="/signup">
-        <SignupPage />
-      </Route>
-      <Route path="/" guard="$user.authenticated" redirect="/login">
-        <HomePage />
-      </Route>
-    </>
-  );
-}
-`;
-
-const TEMPLATE_HOME = `import { Stack, Heading, Text, Button, Card } from '@mindmatrix/react';
-import { useAuth } from '@mindmatrix/react';
-import UserMenu from '../components/user-menu';
-
-/**
- * Home page — protected, only visible when authenticated.
- * The route guard ($user.authenticated) handles redirect to /login.
- */
-export default function HomePage() {
-  const { user } = useAuth();
-
-  return (
-    <Stack gap={0} sx={{ minHeight: '100vh' }}>
-      {/* Top bar */}
-      <Stack direction="row" sx={{ padding: '12px 24px', borderBottom: '1px solid var(--border)', alignItems: 'center', justifyContent: 'space-between' }}>
-        <Heading text="My Auth App" level="h3" />
-        <UserMenu />
-      </Stack>
-
-      {/* Content */}
-      <Stack sx={{ padding: 24, flex: 1 }} gap={16}>
-        <Heading text={\`Welcome, \${user?.name || 'User'}!\`} level="h2" />
-        <Text text="You are now logged in. This content is protected by a route guard." sx={{ color: 'var(--muted-foreground)' }} />
-
-        <Stack direction="row" gap={16}>
-          <Card sx={{ padding: 20, flex: 1 }}>
-            <Stack gap={4}>
-              <Text text="Email" sx={{ fontSize: 12, color: 'var(--muted-foreground)' }} />
-              <Text text={user?.email || ''} />
-            </Stack>
-          </Card>
-          <Card sx={{ padding: 20, flex: 1 }}>
-            <Stack gap={4}>
-              <Text text="Role" sx={{ fontSize: 12, color: 'var(--muted-foreground)' }} />
-              <Text text={user?.roles?.join(', ') || 'user'} />
-            </Stack>
-          </Card>
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-}
-`;
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-function findByComponent(node: IRExperienceNode, component: string): IRExperienceNode | undefined {
-  if (node.component === component) return node;
-  for (const child of node.children ?? []) {
-    const found = findByComponent(child, component);
-    if (found) return found;
-  }
-  return undefined;
-}
-
-function findAllByComponent(node: IRExperienceNode, component: string): IRExperienceNode[] {
-  const results: IRExperienceNode[] = [];
-  if (node.component === component) results.push(node);
-  for (const child of node.children ?? []) {
-    results.push(...findAllByComponent(child, component));
-  }
-  return results;
-}
-
-// =============================================================================
-// Tests: Individual File Compilation (Add-on files)
-// =============================================================================
-
-describe('Auth Add-on Template Compilation', () => {
-  describe('Individual file compilation (add-on pages/)', () => {
-    it('should compile pages/login.tsx (add-on)', () => {
-      const result = compileProject({
-        'mm.config.ts': `
-          import { defineBlueprint } from '@mindmatrix/react';
-          export default defineBlueprint({ slug: 'auth-addon-test', name: 'Auth Addon Test', version: '1.0.0' });
-        `,
-        'pages/login.tsx': ADDON_LOGIN,
-      });
-
-      console.log('pages/login.tsx errors:', JSON.stringify(result.errors, null, 2));
-      console.log('pages/login.tsx warnings:', JSON.stringify(result.warnings, null, 2));
-
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-      expect(result.fileIRs['pages/login.tsx']).toBeDefined();
-    });
-
-    it('should compile pages/signup.tsx (add-on)', () => {
-      const result = compileProject({
-        'mm.config.ts': `
-          import { defineBlueprint } from '@mindmatrix/react';
-          export default defineBlueprint({ slug: 'auth-addon-test', name: 'Auth Addon Test', version: '1.0.0' });
-        `,
-        'pages/signup.tsx': ADDON_SIGNUP,
-      });
-
-      console.log('pages/signup.tsx errors:', JSON.stringify(result.errors, null, 2));
-      console.log('pages/signup.tsx warnings:', JSON.stringify(result.warnings, null, 2));
-
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-      expect(result.fileIRs['pages/signup.tsx']).toBeDefined();
-    });
-
-    it('should compile components/user-menu.tsx (add-on)', () => {
-      const result = compileProject({
-        'mm.config.ts': `
-          import { defineBlueprint } from '@mindmatrix/react';
-          export default defineBlueprint({ slug: 'auth-addon-test', name: 'Auth Addon Test', version: '1.0.0' });
-        `,
-        'components/user-menu.tsx': ADDON_USER_MENU,
-      });
-
-      console.log('components/user-menu.tsx errors:', JSON.stringify(result.errors, null, 2));
-      console.log('components/user-menu.tsx warnings:', JSON.stringify(result.warnings, null, 2));
-
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-      expect(result.fileIRs['components/user-menu.tsx']).toBeDefined();
-    });
-  });
-
-  describe('All add-on files together', () => {
-    it('should compile all add-on files as a project', () => {
-      const result = compileProject({
-        'mm.config.ts': `
-          import { defineBlueprint } from '@mindmatrix/react';
-          export default defineBlueprint({ slug: 'auth-addon-full', name: 'Auth Addon Full', version: '1.0.0' });
-        `,
-        'pages/login.tsx': ADDON_LOGIN,
-        'pages/signup.tsx': ADDON_SIGNUP,
-        'components/user-menu.tsx': ADDON_USER_MENU,
-      });
-
-      console.log('All add-on files errors:', JSON.stringify(result.errors, null, 2));
-      console.log('All add-on files warnings:', JSON.stringify(result.warnings, null, 2));
-
-      const fileErrors = result.errors.filter(e => e.severity === 'error');
-      if (fileErrors.length > 0) {
-        console.log('FAILING FILES:');
-        for (const err of fileErrors) {
-          console.log(`  ${err.file} (line ${err.line}): ${err.message}`);
-        }
-      }
-
-      expect(fileErrors).toHaveLength(0);
-    });
-  });
-});
-
-// =============================================================================
-// Tests: Auth App Template Files
-// =============================================================================
-
-describe('Auth App Template Compilation', () => {
-  describe('Individual file compilation (template)', () => {
-    it('should compile main.workflow.tsx (template)', () => {
-      const result = compileProject({
-        'mm.config.ts': `
-          import { defineBlueprint } from '@mindmatrix/react';
-          export default defineBlueprint({ slug: 'auth-app', name: 'Auth App', version: '1.0.0' });
-        `,
-        'main.workflow.tsx': TEMPLATE_MAIN_WORKFLOW,
-      });
-
-      console.log('main.workflow.tsx errors:', JSON.stringify(result.errors, null, 2));
-      console.log('main.workflow.tsx warnings:', JSON.stringify(result.warnings, null, 2));
-
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-      expect(result.fileIRs['main.workflow.tsx']).toBeDefined();
-    });
-
-    it('should compile pages/login.tsx (template — same as add-on)', () => {
-      const result = compileProject({
-        'pages/login.tsx': ADDON_LOGIN,
-      });
-
-      console.log('template pages/login.tsx errors:', JSON.stringify(result.errors, null, 2));
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-    });
-
-    it('should compile pages/signup.tsx (template — same as add-on)', () => {
-      const result = compileProject({
-        'pages/signup.tsx': ADDON_SIGNUP,
-      });
-
-      console.log('template pages/signup.tsx errors:', JSON.stringify(result.errors, null, 2));
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-    });
-
-    it('should compile pages/home.tsx (template)', () => {
-      const result = compileProject({
-        'mm.config.ts': `
-          import { defineBlueprint } from '@mindmatrix/react';
-          export default defineBlueprint({ slug: 'auth-app', name: 'Auth App', version: '1.0.0' });
-        `,
-        'pages/home.tsx': TEMPLATE_HOME,
-        'components/user-menu.tsx': ADDON_USER_MENU,
-      });
-
-      console.log('pages/home.tsx errors:', JSON.stringify(result.errors, null, 2));
-      console.log('pages/home.tsx warnings:', JSON.stringify(result.warnings, null, 2));
-
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-      expect(result.fileIRs['pages/home.tsx']).toBeDefined();
-    });
-
-    it('should compile components/user-menu.tsx (template — same as add-on)', () => {
-      const result = compileProject({
-        'components/user-menu.tsx': ADDON_USER_MENU,
-      });
-
-      console.log('template components/user-menu.tsx errors:', JSON.stringify(result.errors, null, 2));
-      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0);
-    });
-  });
-
-  describe('Full auth-app template project', () => {
-    it('should compile all auth-app template files together', () => {
-      const result = compileProject({
-        'mm.config.ts': `import { defineBlueprint } from '@mindmatrix/react';
-
-export default defineBlueprint({
-  slug: 'my-auth-app',
-  name: 'My Auth App',
-  version: '1.0.0',
-  category: 'blueprint',
-  description: 'My Auth App — app with authentication',
-});
-`,
-        'main.workflow.tsx': TEMPLATE_MAIN_WORKFLOW,
-        'pages/login.tsx': ADDON_LOGIN,
-        'pages/signup.tsx': ADDON_SIGNUP,
-        'pages/home.tsx': TEMPLATE_HOME,
-        'components/user-menu.tsx': ADDON_USER_MENU,
-      });
-
-      console.log('Full auth-app errors:', JSON.stringify(result.errors, null, 2));
-      console.log('Full auth-app warnings:', JSON.stringify(result.warnings, null, 2));
-
-      const fileErrors = result.errors.filter(e => e.severity === 'error');
-      if (fileErrors.length > 0) {
-        console.log('FAILING FILES:');
-        for (const err of fileErrors) {
-          console.log(`  ${err.file} (line ${err.line}:${err.column}): ${err.message}`);
-        }
-      }
-
-      // Report which files compiled successfully
-      console.log('Successfully compiled files:', Object.keys(result.fileIRs));
-      console.log('Page experiences:', Object.keys(result.pageExperiences));
-      console.log('Component definitions:', Object.keys(result.componentDefinitions));
-      console.log('Child definitions:', result.childDefinitions.map(cd => cd.slug));
-      console.log('Route table:', result.routeTable);
-
-      expect(fileErrors).toHaveLength(0);
-    });
-
-    it('should produce correct experience tree structure', () => {
-      const result = compileProject({
-        'mm.config.ts': `import { defineBlueprint } from '@mindmatrix/react';
-export default defineBlueprint({ slug: 'auth-exp-test', name: 'Auth Exp Test', version: '1.0.0' });
-`,
-        'main.workflow.tsx': TEMPLATE_MAIN_WORKFLOW,
-        'pages/login.tsx': ADDON_LOGIN,
-        'pages/signup.tsx': ADDON_SIGNUP,
-        'pages/home.tsx': TEMPLATE_HOME,
-        'components/user-menu.tsx': ADDON_USER_MENU,
-      });
-
-      if (result.errors.filter(e => e.severity === 'error').length > 0) {
-        console.log('Skipping experience tree check due to compilation errors');
-        console.log('Errors:', JSON.stringify(result.errors, null, 2));
-        return;
-      }
-
-      // Check that we got an experience tree
-      const exp = (result.ir as any).experience as IRExperienceNode | undefined;
-      console.log('Experience tree:', JSON.stringify(exp, null, 2).substring(0, 2000));
-
-      if (exp) {
-        // Should have some meaningful structure
-        expect(exp.component).toBeDefined();
-        console.log('Root component:', exp.component);
-        console.log('Children count:', exp.children?.length);
-      }
-    });
-  });
-
-  describe('Detailed per-file IR inspection', () => {
-    it('should inspect main.workflow.tsx IR structure', () => {
-      const result = compileProject({
-        'main.workflow.tsx': TEMPLATE_MAIN_WORKFLOW,
-      });
-
-      const ir = result.fileIRs['main.workflow.tsx'];
-      if (ir) {
-        console.log('main.workflow.tsx IR slug:', ir.slug);
-        console.log('main.workflow.tsx IR states:', ir.states.map(s => s.name));
-        console.log('main.workflow.tsx IR fields:', ir.fields.map(f => f.name));
-        const views = (ir as any).views;
-        if (views?.default) {
-          console.log('main.workflow.tsx view tree:', JSON.stringify(views.default, null, 2).substring(0, 1500));
-        }
-      } else {
-        console.log('main.workflow.tsx did NOT produce an IR');
-        console.log('Errors:', JSON.stringify(result.errors, null, 2));
-      }
-    });
-
-    it('should inspect pages/login.tsx IR for experience nodes', () => {
-      const result = compileProject({
-        'pages/login.tsx': ADDON_LOGIN,
-      });
-
-      const ir = result.fileIRs['pages/login.tsx'];
-      if (ir) {
-        const views = (ir as any).views;
-        if (views?.default) {
-          const stacks = findAllByComponent(views.default, 'Stack');
-          const buttons = findAllByComponent(views.default, 'Button');
-          const textInputs = findAllByComponent(views.default, 'TextInput');
-          console.log('Login page Stack nodes:', stacks.length);
-          console.log('Login page Button nodes:', buttons.length);
-          console.log('Login page TextInput nodes:', textInputs.length);
-        }
-      }
-    });
-  });
-});