create-lego-one 2.0.10 → 2.0.12

package/template/host/src/global.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/template/host/src/index.ts

@@ -0,0 +1,2 @@
+import '@modern-js/runtime/garfish';
+import './bootstrap';

package/template/host/src/kernel/__tests__/lib-utils.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { cn } from '../lib/utils';
+
+describe('cn utility function', () => {
+  it('should merge class names correctly', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+
+  it('should handle conditional classes', () => {
+    expect(cn('foo', false && 'bar', 'baz')).toBe('foo baz');
+  });
+
+  it('should handle undefined and null values', () => {
+    expect(cn('foo', undefined, null, 'bar')).toBe('foo bar');
+  });
+
+  it('should handle Tailwind conflict resolution', () => {
+    expect(cn('p-4', 'p-2')).toBe('p-2');
+  });
+
+  it('should handle empty input', () => {
+    expect(cn()).toBe('');
+  });
+
+  it('should handle arrays of classes', () => {
+    expect(cn(['foo', 'bar'], 'baz')).toBe('foo bar baz');
+  });
+
+  it('should handle objects with boolean values', () => {
+    expect(cn({ foo: true, bar: false, baz: true })).toBe('foo baz');
+  });
+});

package/template/host/src/kernel/__tests__/rbac-hooks.test.tsx

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  useCurrentOrganization,
+  useRequirePermission,
+  useUserPermissions,
+} from '../rbac/hooks';
+import * as types from '../rbac/types';
+import { useGlobalKernelState } from '../shared-state';
+
+// Mock PocketBase
+vi.mock('pocketbase', () => ({
+  default: vi.fn().mockImplementation(() => ({
+    collection: vi.fn(),
+  })),
+}));
+
+// Mock PocketBase provider
+vi.mock('../providers/PocketBaseProvider', () => ({
+  PocketBaseProvider: ({ children }: { children: React.ReactNode }) => children,
+  usePocketBase: () => null,
+}));
+
+const mockPermissions: types.Permission[] = [
+  { id: '1', resource: 'users' as const, action: 'read' as const, description: 'Read users' },
+  { id: '2', resource: 'users' as const, action: 'write' as const, description: 'Write users' },
+];
+
+const createWrapper = (queryClient: QueryClient) => {
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('RBAC Hooks', () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+  });
+
+  describe('useCurrentOrganization', () => {
+    it('should return current organization from state', () => {
+      const mockOrg: types.Organization = {
+        id: 'test-org',
+        name: 'Test Organization',
+        slug: 'test-org',
+        created: '2024-01-01',
+        updated: '2024-01-01',
+      };
+
+      const wrapper = createWrapper(queryClient);
+      const { result } = renderHook(() => useCurrentOrganization(), { wrapper });
+
+      // Initially null
+      expect(result.current.organization).toBeNull();
+
+      // Set organization via Zustand
+      act(() => {
+        useGlobalKernelState.getState().setOrganization(mockOrg);
+      });
+
+      // Check that hook returns the organization
+      const { result: newResult } = renderHook(() => useCurrentOrganization(), { wrapper });
+      expect(newResult.current.organization).toEqual(mockOrg);
+    });
+
+    it('should clear query client when setting organization', () => {
+      const mockOrg: types.Organization = {
+        id: 'test-org',
+        name: 'Test Organization',
+        slug: 'test-org',
+        created: '2024-01-01',
+        updated: '2024-01-01',
+      };
+
+      const clearSpy = vi.spyOn(queryClient, 'clear');
+
+      const wrapper = createWrapper(queryClient);
+      const { result } = renderHook(() => useCurrentOrganization(), { wrapper });
+
+      act(() => {
+        result.current.setCurrentOrganization(mockOrg);
+      });
+
+      expect(clearSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('useUserPermissions', () => {
+    it('should return undefined when not authenticated', () => {
+      const wrapper = createWrapper(queryClient);
+      const { result } = renderHook(() => useUserPermissions(), { wrapper });
+
+      // Service is not available (usePocketBase returns null)
+      // Query is disabled, so data is undefined
+      expect(result.current.data).toBeUndefined();
+    });
+
+    it('should not be enabled when user is null', () => {
+      const wrapper = createWrapper(queryClient);
+      const { result } = renderHook(() => useUserPermissions(), { wrapper });
+
+      // With no user, the hook should not be enabled
+      expect(result.current.isLoading).toBe(false);
+    });
+  });
+});

package/template/host/src/kernel/__tests__/rbac-utils.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from 'vitest';
+import { initializeFirstOrganization } from '../rbac/utils';
+
+describe('RBAC Utils', () => {
+  describe('initializeFirstOrganization', () => {
+    it('should return existing organization if user has one', async () => {
+      const mockPb = {
+        collection: vi.fn().mockReturnValue({
+          getOne: vi.fn().mockResolvedValue({
+            expand: {
+              organizations: [
+                { id: 'existing-org', name: 'Existing Org', slug: 'existing' },
+              ],
+            },
+          }),
+        }),
+      };
+
+      const result = await initializeFirstOrganization(mockPb, 'user-123');
+
+      expect(result).toEqual({
+        id: 'existing-org',
+        name: 'Existing Org',
+        slug: 'existing',
+      });
+    });
+
+    it('should create new organization if user has none', async () => {
+      const mockPb = {
+        collection: vi.fn((name: string) => {
+          if (name === 'users') {
+            return {
+              getOne: vi.fn().mockResolvedValue({
+                name: 'Test User',
+                email: 'test@example.com',
+                expand: { organizations: [] },
+              }),
+            };
+          }
+          if (name === 'organizations') {
+            return {
+              create: vi.fn().mockResolvedValue({
+                id: 'new-org',
+                name: "Test User's Organization",
+                slug: 'test-123456',
+              }),
+            };
+          }
+          return {};
+        }),
+      };
+
+      const result = await initializeFirstOrganization(mockPb, 'user-123');
+
+      expect(result).toEqual({
+        id: 'new-org',
+        name: "Test User's Organization",
+        slug: 'test-123456',
+      });
+    });
+
+    it('should return null on error', async () => {
+      const mockPb = {
+        collection: vi.fn().mockReturnValue({
+          getOne: vi.fn().mockRejectedValue(new Error('DB error')),
+        }),
+      };
+
+      const result = await initializeFirstOrganization(mockPb, 'user-123');
+
+      expect(result).toBeNull();
+    });
+
+    it('should handle user without email gracefully', async () => {
+      const mockPb = {
+        collection: vi.fn((name: string) => {
+          if (name === 'users') {
+            return {
+              getOne: vi.fn().mockResolvedValue({
+                name: null,
+                email: null,
+                expand: { organizations: [] },
+              }),
+            };
+          }
+          if (name === 'organizations') {
+            return {
+              create: vi.fn().mockResolvedValue({
+                id: 'new-org',
+                name: "User's Organization",
+                slug: 'user-123456',
+              }),
+            };
+          }
+          return {};
+        }),
+      };
+
+      const result = await initializeFirstOrganization(mockPb, 'user-123');
+
+      expect(result).toEqual({
+        id: 'new-org',
+        name: "User's Organization",
+        slug: 'user-123456',
+      });
+    });
+  });
+});

package/template/host/src/kernel/auth/ProtectedRoute.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useNavigate } from '@modern-js/runtime/router';
+import { useRequireAuth } from './hooks';
+import { Skeleton } from '../components/ui/skeleton';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+export function ProtectedRoute({
+  children,
+  redirectTo = '/login',
+}: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading, shouldRedirect } = useRequireAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (shouldRedirect) {
+      navigate(redirectTo);
+    }
+  }, [shouldRedirect, navigate, redirectTo]);
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="space-y-4 text-center">
+          <Skeleton className="mx-auto h-12 w-12 rounded-full" />
+          <Skeleton className="mx-auto h-4 w-48" />
+          <Skeleton className="mx-auto h-4 w-32" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return null; // Will redirect
+  }
+
+  return <>{children}</>;
+}

package/template/host/src/kernel/auth/components/LoginForm.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { useNavigate } from '@modern-js/runtime/router';
+import { useAuth } from '../hooks';
+import { loginSchema, type LoginFormData } from '../schemas';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../../components/ui/card';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { Loader2 } from 'lucide-react';
+
+export function LoginForm() {
+  const navigate = useNavigate();
+  const { login, isLoading, error } = useAuth();
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    setSubmitError(null);
+    try {
+      await login(data);
+      navigate('/dashboard');
+    } catch (err: any) {
+      setSubmitError(err.message || 'Login failed. Please try again.');
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle className="text-2xl">Sign In</CardTitle>
+        <CardDescription>
+          Enter your credentials to access your account
+        </CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent className="space-y-4">
+          {(submitError || error) && (
+            <Alert variant="destructive">
+              <AlertDescription>
+                {submitError || (error as any)?.message}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="admin@example.com"
+              {...register('email')}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              {...register('password')}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive">{errors.password.message}</p>
+            )}
+          </div>
+        </CardContent>
+
+        <CardFooter>
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Signing in...
+              </>
+            ) : (
+              'Sign In'
+            )}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

package/template/host/src/kernel/auth/components/LogoutButton.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { useNavigate } from '@modern-js/runtime/router';
+import { useAuth } from '../hooks';
+import { Button } from '../../components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../components/ui/dropdown-menu';
+import { Loader2, LogOut, Settings, User } from 'lucide-react';
+import { getInitials } from '../../lib/utils';
+import { useGlobalKernelState } from '../../shared-state';
+
+export function LogoutButton() {
+  const { logout, isLoading } = useAuth();
+  const navigate = useNavigate();
+  const { user } = useGlobalKernelState();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    try {
+      await logout();
+      navigate('/login');
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-9 w-9 rounded-full">
+          {user?.name ? (
+            <span className="flex h-full w-full items-center justify-center bg-primary text-primary-foreground text-sm font-medium">
+              {getInitials(user.name)}
+            </span>
+          ) : (
+            <User className="h-5 w-5" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">{user?.name}</p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {user?.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => navigate('/settings/profile')}>
+          <User className="mr-2 h-4 w-4" />
+          <span>Profile</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => navigate('/settings')}>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>Settings</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={handleLogout}
+          disabled={isLoading || isLoggingOut}
+        >
+          {isLoggingOut ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <LogOut className="mr-2 h-4 w-4" />
+          )}
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}