create-lego-one 2.0.9 → 2.0.12

package/template/host/src/lib/pocketbase/types.ts

@@ -0,0 +1,102 @@
+// PocketBase field types
+export interface BoolField {
+  name: string;
+  type: 'bool';
+  required?: boolean;
+  default?: boolean;
+}
+
+export interface NumberField {
+  name: string;
+  type: 'number';
+  required?: boolean;
+  min?: number;
+  max?: number;
+  default?: number;
+}
+
+export interface TextField {
+  name: string;
+  type: 'text';
+  required?: boolean;
+  min?: number;
+  max?: number;
+  default?: string;
+  pattern?: string;
+  unique?: boolean;
+}
+
+export interface EmailField {
+  name: string;
+  type: 'email';
+  required?: boolean;
+}
+
+export interface UrlField {
+  name: string;
+  type: 'url';
+  required?: boolean;
+}
+
+export interface DateField {
+  name: string;
+  type: 'date';
+  required?: boolean;
+}
+
+export interface AutodateField {
+  name: string;
+  type: 'autodate';
+  required?: boolean;
+}
+
+export interface SelectField {
+  name: string;
+  type: 'select';
+  required?: boolean;
+  values: string[];
+  default?: string;
+}
+
+export interface JsonField {
+  name: string;
+  type: 'json';
+  required?: boolean;
+}
+
+export interface RelationField {
+  name: string;
+  type: 'relation';
+  required?: boolean;
+  maxSelect?: number;
+  collectionId: string;
+  cascadeDelete?: boolean;
+}
+
+export type Field =
+  | BoolField
+  | NumberField
+  | TextField
+  | EmailField
+  | UrlField
+  | DateField
+  | AutodateField
+  | SelectField
+  | JsonField
+  | RelationField;
+
+// Collection definition
+export interface Collection {
+  type: 'base' | 'auth' | 'view';
+  name: string;
+  listRule?: string | null;
+  viewRule?: string | null;
+  createRule?: string | null;
+  updateRule?: string | null;
+  deleteRule?: string | null;
+  fields: Field[];
+  indexes?: string[];
+}
+
+// Migration function type
+export type Migration = () => Collection | Collection[];

package/template/host/src/modern.runtime.ts

@@ -0,0 +1,26 @@
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+// Development vs Production configuration
+const isDev = import.meta.env.MODE === 'development';
+
+export default defineRuntimeConfig({
+  masterApp: {
+    apps: [
+      {
+        name: '@lego/plugin-dashboard',
+        // Dev: Separate server │ Prod: Bundled via dynamic import
+        entry: isDev
+          ? 'http://localhost:3001'
+          : () => import('@lego/plugin-dashboard'),
+        activeWhen: '/dashboard',
+      },
+      {
+        name: '@lego/plugin-todo',
+        entry: isDev
+          ? 'http://localhost:3002'
+          : () => import('@lego/plugin-todo'),
+        activeWhen: '/todos',
+      },
+    ],
+  },
+});

package/template/host/src/plugins.d.ts

@@ -0,0 +1,9 @@
+declare module '@lego/plugin-dashboard' {
+  const App: React.ComponentType;
+  export { App };
+}
+
+declare module '@lego/plugin-todo' {
+  const App: React.ComponentType;
+  export { App };
+}

package/template/host/src/providers/PocketBaseProvider.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, ReactNode } from 'react';
+import { getPocketBase, getPocketBaseAdmin, resetPocketBase } from '../lib/pocketbase';
+import type PocketBase from 'pocketbase';
+
+const PocketBaseContext = createContext<PocketBase | null>(null);
+
+export function PocketBaseProvider({ children }: { children: ReactNode }) {
+  const pb = getPocketBase();
+
+  return (
+    <PocketBaseContext.Provider value={pb}>{children}</PocketBaseContext.Provider>
+  );
+}
+
+export function usePocketBase(): PocketBase {
+  const pb = useContext(PocketBaseContext);
+
+  if (!pb) {
+    throw new Error('usePocketBase must be used within PocketBaseProvider');
+  }
+
+  return pb;
+}
+
+export function usePocketBaseAdmin() {
+  return getPocketBaseAdmin();
+}
+
+// For testing
+export { resetPocketBase as resetPocketBaseForTesting };

package/template/host/src/routes/_.tsx

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

package/template/host/src/routes/dashboard._.tsx

@@ -0,0 +1,41 @@
+import { useGlobalKernelState } from '../kernel/shared-state';
+import { Skeleton } from '../kernel/components/ui/skeleton';
+
+export default function DashboardPluginRoute() {
+  const { isAuthenticated, isLoading } = useGlobalKernelState();
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-64" />
+        <div className="grid gap-6 md:grid-cols-3">
+          <Skeleton className="h-32" />
+          <Skeleton className="h-32" />
+          <Skeleton className="h-32" />
+        </div>
+        <Skeleton className="h-64" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <div className="text-center">
+        <h1 className="text-2xl font-bold">Authentication Required</h1>
+        <p className="mt-2 text-muted-foreground">
+          Please sign in to access the dashboard.
+        </p>
+      </div>
+    );
+  }
+
+  // Placeholder - the actual plugin will be rendered by Garfish
+  return (
+    <div className="text-center">
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+      <p className="mt-2 text-muted-foreground">
+        The Dashboard plugin is not yet implemented.
+      </p>
+    </div>
+  );
+}

package/template/host/src/routes/index.tsx

@@ -0,0 +1,93 @@
+import { Link } from '@modern-js/runtime/router';
+import { ArrowRight, LayoutDashboard, CheckSquare, Shield } from 'lucide-react';
+import { useGlobalKernelState } from '../kernel/shared-state';
+
+export default function HomePage() {
+  const { isAuthenticated, user } = useGlobalKernelState();
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <div className="space-y-6">
+        {/* Hero */}
+        <div className="rounded-xl border bg-card p-8 text-center">
+          <h1 className="text-4xl font-bold tracking-tight">Welcome to Lego-One</h1>
+          <p className="mt-4 text-lg text-muted-foreground">
+            A modular SaaS boilerplate with microkernel architecture
+          </p>
+
+          {isAuthenticated ? (
+            <div className="mt-8">
+              <p className="text-muted-foreground">
+                Welcome back, {user?.name || 'User'}!
+              </p>
+            </div>
+          ) : (
+            <div className="mt-8 flex justify-center gap-4">
+              <Link
+                to="/login"
+                className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground hover:bg-primary/90"
+              >
+                Sign In
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </div>
+          )}
+        </div>
+
+        {/* Features */}
+        <div className="grid gap-6 md:grid-cols-3">
+          <div className="rounded-xl border bg-card p-6">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <LayoutDashboard className="h-6 w-6" />
+            </div>
+            <h3 className="mt-4 text-lg font-semibold">Dashboard Plugin</h3>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Overview of your account with stats and quick actions
+            </p>
+            <Link
+              to="/dashboard"
+              className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
+            >
+              View Dashboard
+              <ArrowRight className="ml-1 h-4 w-4" />
+            </Link>
+          </div>
+
+          <div className="rounded-xl border bg-card p-6">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <CheckSquare className="h-6 w-6" />
+            </div>
+            <h3 className="mt-4 text-lg font-semibold">Todo Plugin</h3>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Manage your tasks with this example plugin
+            </p>
+            <Link
+              to="/todos"
+              className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
+            >
+              View Todos
+              <ArrowRight className="ml-1 h-4 w-4" />
+            </Link>
+          </div>
+
+          <div className="rounded-xl border bg-card p-6">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <Shield className="h-6 w-6" />
+            </div>
+            <h3 className="mt-4 text-lg font-semibold">Multi-Tenancy</h3>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Built-in support for organizations and RBAC
+            </p>
+            <Link
+              to="/settings"
+              className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
+            >
+              Manage Settings
+              <ArrowRight className="ml-1 h-4 w-4" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/host/src/routes/login.tsx

@@ -0,0 +1,36 @@
+import { Navigate } from '@modern-js/runtime/router';
+import { LoginForm } from '../kernel/auth/components/LoginForm';
+import { useAuth } from '../kernel/auth/hooks';
+
+export default function LoginPage() {
+  const { isAuthenticated } = useAuth();
+
+  if (isAuthenticated) {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center p-6">
+      <div className="w-full max-w-md space-y-6">
+        {/* Logo and branding */}
+        <div className="text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xl font-bold">
+            L
+          </div>
+          <h1 className="mt-4 text-2xl font-bold">Lego-One</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign in to access your account
+          </p>
+        </div>
+
+        {/* Login form */}
+        <LoginForm />
+
+        {/* Help text */}
+        <div className="text-center text-sm text-muted-foreground">
+          <p>Default credentials: admin@example.com / admin123</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/host/src/saas.config.ts

@@ -0,0 +1,52 @@
+import { z } from 'zod';
+import { pluginConfigSchema } from './kernel/plugins/schemas';
+import type { PluginConfig } from './kernel/plugins/types';
+
+/**
+ * SaaS configuration file
+ *
+ * This file controls which plugins are enabled and their configuration.
+ * Admin can override this via UI (stored in PocketBase).
+ */
+
+const saasConfigSchema = z.object({
+  plugins: z.array(z.object({
+    name: z.string(),
+    enabled: z.boolean(),
+  })),
+  settings: z.record(z.any()).optional(),
+});
+
+export type SaaSConfig = z.infer<typeof saasConfigSchema>;
+
+/**
+ * Default SaaS configuration
+ * Modify this to enable/disable plugins by default
+ */
+export const saasConfig: SaaSConfig = {
+  plugins: [
+    {
+      name: '@lego/plugin-dashboard',
+      enabled: true,
+    },
+    {
+      name: '@lego/plugin-todo',
+      enabled: true,
+    },
+  ],
+  settings: {
+    // Global settings
+    allowPublicSignup: false,
+    defaultOrganizationRequired: true,
+  },
+};
+
+/**
+ * Validate config on load
+ */
+export function validateConfig(config: unknown): SaaSConfig {
+  return saasConfigSchema.parse(config);
+}
+
+// Export for type safety
+export default saasConfig;

package/template/host/src/test/setup.ts

@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach, vi } from 'vitest';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Mock PocketBase
+vi.mock('pocketbase', () => ({
+  default: vi.fn().mockImplementation(() => ({
+    collection: vi.fn(),
+    send: vi.fn(),
+    records: {
+      subscribe: vi.fn(),
+    },
+  })),
+}));
+
+// Mock window bridge
+global.window.__LEGO_KERNEL_STATE__ = {
+  user: null,
+  organization: null,
+  isAuthenticated: false,
+};
+
+global.window.__LEGO_CHANNEL_BUS__ = {
+  publish: vi.fn(),
+  subscribe: vi.fn(),
+};
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  takeRecords() {
+    return [];
+  }
+  unobserve() {}
+} as any;
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+} as any;
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});

package/template/host/src/test/utils.tsx

@@ -0,0 +1,69 @@
+import { ReactElement } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from '@modern-js/runtime/router';
+
+// Test wrappers
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });
+
+interface AllTheProvidersProps {
+  children: React.ReactNode;
+}
+
+function AllTheProviders({ children }: AllTheProvidersProps) {
+  const queryClient = createTestQueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>{children}</BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+function customRender(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) {
+  return render(ui, { wrapper: AllTheProviders, ...options });
+}
+
+// Mock data generators
+export const mockUser = {
+  id: 'test-user-id',
+  email: 'test@example.com',
+  name: 'Test User',
+};
+
+export const mockOrganization = {
+  id: 'test-org-id',
+  name: 'Test Organization',
+  slug: 'test-org',
+};
+
+export const mockAuthState = {
+  user: mockUser,
+  organization: mockOrganization,
+  isAuthenticated: true,
+};
+
+export function setupMockState() {
+  global.window.__LEGO_KERNEL_STATE__ = mockAuthState;
+}
+
+export function clearMockState() {
+  global.window.__LEGO_KERNEL_STATE__ = {
+    user: null,
+    organization: null,
+    isAuthenticated: false,
+  };
+}
+
+// Re-export everything from RTL
+export * from '@testing-library/react';
+export { customRender as render };

package/template/host/src/test/vitest-globals.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="vitest/globals" />
+
+import type { User, Organization } from '../kernel/shared-state/types';
+
+declare global {
+  interface Window {
+    __LEGO_KERNEL_STATE__?: {
+      user?: User | null;
+      organization?: Organization | null;
+      isAuthenticated: boolean;
+    };
+    __LEGO_CHANNEL_BUS__?: {
+      publish: (channel: string, message: any) => void;
+      subscribe: (channel: string, callback: (data: any) => void) => () => void;
+    };
+  }
+}
+
+export {};

package/template/host/src/vite-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_POCKETBASE_URL: string;
+  readonly VITE_POCKETBASE_ADMIN_EMAIL: string;
+  readonly VITE_POCKETBASE_ADMIN_PASSWORD: string;
+  readonly VITE_SEED_ADMIN_EMAIL: string;
+  readonly VITE_SEED_ADMIN_PASSWORD: string;
+  readonly VITE_SEED_ADMIN_NAME: string;
+  readonly VITE_SEED_ORG_NAME: string;
+  readonly MODE: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/template/host/tailwind.config.ts

@@ -0,0 +1,77 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    '../../packages/plugins/@lego/*/src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
+
+export default config;

package/template/host/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@modern-js/tsconfig/base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@lego/kernel/*": ["./src/kernel/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/__tests__", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx", "src/test"]
+}