create-lego-one 2.0.10 → 2.0.13

package/template/host/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "host",
+  "version": "2.0.13",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug"
+  },
+  "dependencies": {
+    "@garfish/hooks": "^1.19.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@modern-js/runtime": "^2.60.0",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.91.2",
+    "garfish": "^1.19.0",
+    "lucide-react": "^0.454.0",
+    "pocketbase": "^0.21.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.0",
+    "zustand": "^5.0.1"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "^2.60.0",
+    "@modern-js/plugin-garfish": "^2.60.0",
+    "@modern-js/tsconfig": "^2.60.0",
+    "@playwright/test": "^1.58.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "jsdom": "^27.4.0",
+    "postcss": "^8.4.49",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3",
+    "vitest": "^4.0.18"
+  }
+}

package/template/host/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:8080',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm run dev',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});

package/template/host/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/host/src/App.tsx

@@ -0,0 +1,6 @@
+import { Outlet } from '@modern-js/runtime/router';
+import './global.css';
+
+export default function App() {
+  return <Outlet />;
+}

package/template/host/src/bootstrap.tsx

@@ -0,0 +1,74 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from '@modern-js/runtime/router';
+import App from './App';
+import { registerSharedState } from './kernel/shared-state';
+import { PocketBaseProvider } from './kernel/providers';
+import { QueryProvider } from './kernel/providers';
+import { ThemeProvider } from './kernel/providers';
+import { Toaster } from './kernel/components/ui/toaster';
+import { ChannelProvider, initializeChannelBus } from './kernel/channels';
+import { SlotProvider, initializePluginLoader, usePluginStore } from './kernel/plugins';
+import { saasConfig } from './saas.config';
+import Garfish from 'garfish';
+
+// Register shared state bridge for plugins
+registerSharedState();
+
+// Initialize Garfish channel bus
+initializeChannelBus(Garfish);
+
+// Initialize plugin loader
+initializePluginLoader(Garfish);
+
+/**
+ * Initialize plugins from SaaS config
+ */
+async function initializePlugins() {
+  const store = usePluginStore.getState();
+
+  // Initialize plugins from config
+  for (const plugin of saasConfig.plugins) {
+    const pluginName = plugin.name.split('/').pop() || plugin.name;
+
+    store.registerPlugin({
+      manifest: {
+        name: plugin.name,
+        version: '1.0.0',
+        displayName: pluginName.charAt(0).toUpperCase() + pluginName.slice(1),
+        description: `${pluginName} plugin`,
+      },
+      enabled: plugin.enabled,
+      slots: [],
+    });
+  }
+
+  console.log('[Bootstrap] Plugins initialized from config');
+}
+
+// Create root
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+
+  // Initialize plugins
+  initializePlugins();
+
+  root.render(
+    <StrictMode>
+      <BrowserRouter>
+        <ThemeProvider>
+          <QueryProvider>
+            <PocketBaseProvider>
+              <SlotProvider>
+                <ChannelProvider />
+                <App />
+                <Toaster />
+              </SlotProvider>
+            </PocketBaseProvider>
+          </QueryProvider>
+        </ThemeProvider>
+      </BrowserRouter>
+    </StrictMode>
+  );
+}

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>
+  );
+}