create-lego-one 2.0.10 → 2.0.13

package/template/host/src/kernel/plugins/store.ts

@@ -0,0 +1,185 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import type { PluginState, PluginConfig } from './types';
+import { saasConfig } from '../../saas.config';
+
+interface PluginStore {
+  // State
+  plugins: Record<string, PluginState>;
+  isLoading: boolean;
+
+  // Actions
+  registerPlugin: (config: PluginConfig) => void;
+  unregisterPlugin: (name: string) => void;
+  enablePlugin: (name: string) => void;
+  disablePlugin: (name: string) => void;
+  updatePluginSettings: (name: string, settings: Record<string, unknown>) => void;
+  setPluginLoaded: (name: string, loaded: boolean) => void;
+  setPluginError: (name: string, error: string) => void;
+  initializeFromConfig: () => void;
+}
+
+/**
+ * Get default plugin settings from manifest
+ */
+function getDefaultSettings(config: PluginConfig): Record<string, unknown> {
+  const settings: Record<string, unknown> = {};
+
+  if (config.settings) {
+    for (const setting of config.settings) {
+      if (setting.defaultValue !== undefined) {
+        settings[setting.key] = setting.defaultValue;
+      }
+    }
+  }
+
+  return settings;
+}
+
+/**
+ * Create plugin store
+ */
+export const usePluginStore = create<PluginStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        plugins: {},
+        isLoading: false,
+
+        registerPlugin: (config) => {
+          const { name } = config.manifest;
+          const { enabled } = config;
+
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                id: name,
+                manifest: config.manifest,
+                enabled,
+                loaded: false,
+                settings: getDefaultSettings(config),
+              },
+            },
+          }));
+        },
+
+        unregisterPlugin: (name) => {
+          set((state) => {
+            const plugins = { ...state.plugins };
+            delete plugins[name];
+            return { plugins };
+          });
+        },
+
+        enablePlugin: (name) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                enabled: true,
+              },
+            },
+          }));
+        },
+
+        disablePlugin: (name) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                enabled: false,
+                loaded: false,
+              },
+            },
+          }));
+        },
+
+        updatePluginSettings: (name, settings) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                settings: {
+                  ...state.plugins[name].settings,
+                  ...settings,
+                },
+              },
+            },
+          }));
+        },
+
+        setPluginLoaded: (name, loaded) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                loaded,
+              },
+            },
+          }));
+        },
+
+        setPluginError: (name, error) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                error,
+                loaded: false,
+              },
+            },
+          }));
+        },
+
+        initializeFromConfig: () => {
+          const { plugins } = saasConfig;
+
+          set((state) => {
+            const newPlugins = { ...state.plugins };
+
+            for (const plugin of plugins) {
+              const existing = newPlugins[plugin.name];
+
+              if (!existing) {
+                // Create placeholder for plugin that will be loaded
+                newPlugins[plugin.name] = {
+                  id: plugin.name,
+                  manifest: {
+                    name: plugin.name,
+                    version: '0.0.0',
+                    displayName: plugin.name,
+                    description: '',
+                  },
+                  enabled: plugin.enabled,
+                  loaded: false,
+                  settings: {},
+                };
+              } else {
+                // Update enabled state from config
+                newPlugins[plugin.name] = {
+                  ...existing,
+                  enabled: plugin.enabled,
+                };
+              }
+            }
+
+            return { plugins: newPlugins };
+          });
+        },
+      }),
+      {
+        name: 'lego-plugin-store',
+        partialize: (state) => ({
+          plugins: state.plugins,
+        }),
+      }
+    ),
+    { name: 'LegoPluginStore' }
+  )
+);

package/template/host/src/kernel/plugins/types.ts

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Slot names where plugins can inject content
+ */
+export enum SlotName {
+  SIDEBAR_TOP = 'sidebar:top',
+  SIDEBAR_NAV = 'sidebar:nav',
+  SIDEBAR_BOTTOM = 'sidebar:bottom',
+  TOPBAR_LEFT = 'topbar:left',
+  TOPBAR_RIGHT = 'topbar:right',
+  TOPBAR_CENTER = 'topbar:center',
+  SETTINGS_MENU = 'settings:menu',
+  DASHBOARD_WIDGETS = 'dashboard:widgets',
+}
+
+/**
+ * Slot injection configuration
+ */
+export interface SlotInjection {
+  slot: SlotName;
+  component: ReactNode | React.ComponentType;
+  order?: number; // Lower = higher priority
+  props?: Record<string, unknown>;
+  condition?: () => boolean; // Conditional rendering
+}
+
+/**
+ * Plugin manifest metadata
+ */
+export interface PluginManifest {
+  name: string; // e.g., '@lego/plugin-dashboard'
+  version: string;
+  displayName: string;
+  description: string;
+  author?: string;
+  icon?: string;
+  permissions?: string[]; // Required permissions
+}
+
+/**
+ * Plugin configuration
+ */
+export interface PluginConfig {
+  manifest: PluginManifest;
+  enabled: boolean;
+  slots: SlotInjection[];
+  routes?: RouteConfig[];
+  settings?: PluginSetting[];
+}
+
+/**
+ * Plugin route configuration
+ */
+export interface RouteConfig {
+  path: string;
+  component: React.ComponentType;
+  protected?: boolean;
+  permissions?: string[];
+}
+
+/**
+ * Plugin setting for admin UI
+ */
+export interface PluginSetting {
+  key: string;
+  type: 'boolean' | 'string' | 'number' | 'select';
+  label: string;
+  description?: string;
+  defaultValue?: unknown;
+  options?: { label: string; value: string }[];
+}
+
+/**
+ * Plugin state
+ */
+export interface PluginState {
+  id: string;
+  manifest: PluginManifest;
+  enabled: boolean;
+  loaded: boolean;
+  error?: string;
+  settings: Record<string, unknown>;
+}
+
+/**
+ * Plugin registry
+ */
+export interface PluginRegistry {
+  plugins: Map<string, PluginConfig>;
+  enabled: Set<string>;
+  slots: Map<SlotName, SlotInjection[]>;
+}
+
+/**
+ * Plugin info from host config
+ */
+export interface HostPluginInfo {
+  name: string;
+  enabled: boolean;
+  entry: string | (() => Promise<unknown>);
+  activeWhen: string;
+}

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

@@ -0,0 +1,70 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import PocketBase from 'pocketbase';
+import { useGlobalKernelState } from '../shared-state';
+import { initializeFirstOrganization } from '../rbac/utils';
+
+const PocketBaseContext = createContext<PocketBase | null>(null);
+
+export function PocketBaseProvider({ children }: { children: React.ReactNode }) {
+  const [pb, setPb] = useState<PocketBase | null>(null);
+  const { token, clearAuth, setOrganization } = useGlobalKernelState();
+
+  useEffect(() => {
+    // Initialize PocketBase client
+    const client = new PocketBase(import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090');
+
+    // Load stored token
+    const storedToken = localStorage.getItem('pocketbase_auth');
+    if (storedToken) {
+      client.authStore.save(storedToken, null);
+    }
+
+    setPb(client);
+
+    // Set up auth cleanup on token invalidation
+    client.authStore.onChange(async (token, model) => {
+      if (!token) {
+        clearAuth();
+        localStorage.removeItem('pocketbase_auth');
+        setOrganization(null);
+      } else {
+        localStorage.setItem('pocketbase_auth', token);
+
+        // Initialize organization on login
+        if (model && !model.organizationId) {
+          const org = await initializeFirstOrganization(client, model.id);
+          if (org) {
+            setOrganization(org);
+          }
+        }
+      }
+    });
+
+    return () => {
+      // Cleanup on unmount
+    };
+  }, [clearAuth, setOrganization]);
+
+  // Update auth store when token changes in state
+  useEffect(() => {
+    if (pb && token && pb.authStore.token !== token) {
+      pb.authStore.save(token, null);
+    }
+  }, [pb, token]);
+
+  if (!pb) {
+    return null; // or a loading spinner
+  }
+
+  return (
+    <PocketBaseContext.Provider value={pb}>{children}</PocketBaseContext.Provider>
+  );
+}
+
+export function usePocketBase() {
+  const context = useContext(PocketBaseContext);
+  if (!context) {
+    throw new Error('usePocketBase must be used within PocketBaseProvider');
+  }
+  return context;
+}

package/template/host/src/kernel/providers/QueryProvider.tsx

@@ -0,0 +1,28 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState, type ReactNode } from 'react';
+
+export function QueryProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            gcTime: 1000 * 60 * 30, // 30 minutes (formerly cacheTime)
+            retry: 1,
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {import.meta.env.MODE === 'development' && (
+        <ReactQueryDevtools initialIsOpen={false} />
+      )}
+    </QueryClientProvider>
+  );
+}

package/template/host/src/kernel/providers/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useGlobalKernelState, type Theme } from '../shared-state';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const { theme } = useGlobalKernelState();
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove('light', 'dark');
+
+    let effectiveTheme: 'light' | 'dark' = 'light';
+
+    if (theme === 'system') {
+      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    } else {
+      effectiveTheme = theme;
+    }
+
+    root.classList.add(effectiveTheme);
+  }, [theme]);
+
+  return <>{children}</>;
+}

package/template/host/src/kernel/providers/index.ts

@@ -0,0 +1,3 @@
+export * from './PocketBaseProvider';
+export * from './QueryProvider';
+export * from './ThemeProvider';

package/template/host/src/kernel/rbac/components/OrganizationSelector.tsx

@@ -0,0 +1,69 @@
+import { useCurrentOrganization, useOrganizations } from '../hooks';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../components/ui/dropdown-menu';
+import { Button } from '../../components/ui/button';
+import { Building2, ChevronDown, Loader2, Plus } from 'lucide-react';
+import { useNavigate } from '@modern-js/runtime/router';
+
+export function OrganizationSelector() {
+  const { organization, setCurrentOrganization } = useCurrentOrganization();
+  const { data: organizations, isLoading } = useOrganizations();
+  const navigate = useNavigate();
+
+  const handleSwitch = (orgId: string) => {
+    const org = organizations?.find(o => o.id === orgId);
+    if (org) {
+      setCurrentOrganization(org);
+    }
+  };
+
+  const handleCreate = () => {
+    navigate('/settings/organizations/new');
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <Building2 className="h-4 w-4" />
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : organization ? (
+            <span className="max-w-[150px] truncate">{organization.name}</span>
+          ) : (
+            <span>Select Organization</span>
+          )}
+          <ChevronDown className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {organizations?.map((org) => (
+          <DropdownMenuItem
+            key={org.id}
+            onClick={() => handleSwitch(org.id)}
+            className={organization?.id === org.id ? 'bg-accent' : ''}
+          >
+            <Building2 className="mr-2 h-4 w-4" />
+            <span className="flex-1 truncate">{org.name}</span>
+            {organization?.id === org.id && (
+              <span className="text-xs text-muted-foreground">Current</span>
+            )}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleCreate}>
+          <Plus className="mr-2 h-4 w-4" />
+          Create Organization
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/host/src/kernel/rbac/components/PermissionGate.tsx

@@ -0,0 +1,43 @@
+import { useRequirePermission } from '../hooks';
+import type { ResourceType, ActionType } from '../types';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { Lock } from 'lucide-react';
+
+interface PermissionGateProps {
+  resource: ResourceType;
+  action: ActionType;
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function PermissionGate({
+  resource,
+  action,
+  children,
+  fallback,
+}: PermissionGateProps) {
+  const { hasPermission, isLoading } = useRequirePermission(resource, action);
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[200px] items-center justify-center">
+        <div className="text-sm text-muted-foreground">Checking permissions...</div>
+      </div>
+    );
+  }
+
+  if (!hasPermission) {
+    return (
+      fallback || (
+        <Alert variant="destructive">
+          <Lock className="h-4 w-4" />
+          <AlertDescription>
+            You don't have permission to {action} {resource}.
+          </AlertDescription>
+        </Alert>
+      )
+    );
+  }
+
+  return <>{children}</>;
+}