create-lego-one 2.0.10 → 2.0.12

package/template/host/vitest.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    include: ['**/__tests__/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    exclude: ['node_modules', 'dist'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        '**/*.config.{js,ts}',
+        '**/types/**',
+        'src/test/',
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

package/template/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "lego-one",
+  "version": "2.0.12",
+  "private": true,
+  "description": "Microkernel SaaS OS with Modern.js + Garfish + PocketBase",
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm --filter './host' dev",
+    "dev:host": "pnpm --filter './host' dev",
+    "dev:plugins": "pnpm -r --filter './packages/plugins/@lego/*' dev",
+    "dev:all": "pnpm --filter './host' dev & pnpm -r --filter './packages/plugins/@lego/*' dev",
+    "build": "pnpm --filter './host' build && pnpm -r --filter './packages/plugins/@lego/*' build",
+    "lint": "pnpm -r lint",
+    "lint:fix": "pnpm -r lint:fix",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "typecheck": "pnpm -r typecheck",
+    "test": "pnpm -r test",
+    "test:e2e": "pnpm --filter './host' test:e2e",
+    "clean": "pnpm -r exec rm -rf dist node_modules",
+    "create-plugin": "node scripts/create-plugin.js",
+    "version:patch": "node scripts/version.js patch",
+    "version:minor": "node scripts/version.js minor",
+    "version:major": "node scripts/version.js major",
+    "version:pre": "node scripts/version.js pre",
+    "publish:cli": "node scripts/publish-cli.js",
+    "release": "pnpm run build && pnpm run test && pnpm run version:patch && pnpm run publish:cli && git push && git push --tags"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "kleur": "^4.1.5",
+    "prettier": "^3.2.0",
+    "prettier-plugin-tailwindcss": "^0.5.0",
+    "typescript": "^5.3.0"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.0.0"
+  }
+}

package/template/packages/plugins/@lego/plugin-dashboard/modern.config.ts

@@ -0,0 +1,19 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { garfishPlugin } from '@modern-js/plugin-garfish';
+
+export default defineConfig({
+  dev: {
+    port: 3001,
+  },
+
+  runtime: {
+    router: true,
+  },
+
+  // Mark as micro-frontend sub-app
+  deploy: {
+    microFrontend: true,
+  },
+
+  plugins: [appTools(), garfishPlugin()],
+});

package/template/packages/plugins/@lego/plugin-dashboard/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lego/plugin-dashboard",
+  "version": "2.0.12",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@modern-js/runtime": "^2.70.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.62.0",
+    "clsx": "^2.1.1",
+    "garfish": "^1.19.0",
+    "lucide-react": "^0.468.0",
+    "pocketbase": "^0.22.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "^2.70.0",
+    "@modern-js/plugin-garfish": "^2.70.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3"
+  }
+}

package/template/packages/plugins/@lego/plugin-dashboard/postcss.config.mjs

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

package/template/packages/plugins/@lego/plugin-dashboard/src/App.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useChannelIntegration } from './hooks/useChannelIntegration';
+import './global.css';
+
+interface DashboardAppProps {
+  basename?: string; // Provided by Garfish
+}
+
+/**
+ * Dashboard Plugin App Component
+ *
+ * This is the root component of the Dashboard plugin.
+ * It handles:
+ * - Channel integration (notify host when ready)
+ * - Rendering the appropriate route
+ */
+export default function DashboardApp({ basename }: DashboardAppProps) {
+  // Notify host that plugin is ready
+  useChannelIntegration();
+
+  return (
+    <div className="dashboard-plugin">
+      {/* Routes are handled by host via activeWhen */}
+      {/* The host renders this component at /dashboard */}
+    </div>
+  );
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/components/ActivityFeed.tsx

@@ -0,0 +1,63 @@
+import { Activity } from '../hooks/useRecentActivity';
+import { User, Settings, CheckSquare, AlertCircle } from 'lucide-react';
+
+interface ActivityFeedProps {
+  activities: Activity[];
+}
+
+function getActivityIcon(action: string) {
+  if (action.includes('create')) return CheckSquare;
+  if (action.includes('delete')) return AlertCircle;
+  if (action.includes('update')) return Settings;
+  return User;
+}
+
+function formatRelativeTime(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+}
+
+export function ActivityFeed({ activities }: ActivityFeedProps) {
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      <h2 className="text-lg font-semibold">Recent Activity</h2>
+      <div className="mt-4 space-y-4">
+        {activities.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No recent activity</p>
+        ) : (
+          activities.map((activity) => {
+            const Icon = getActivityIcon(activity.action);
+            return (
+              <div key={activity.id} className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted">
+                  <Icon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 space-y-1">
+                  <p className="text-sm">
+                    <span className="font-medium">{activity.userName}</span>
+                    {' '}
+                    <span className="text-muted-foreground">
+                      {activity.action} {activity.resource}
+                    </span>
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatRelativeTime(activity.createdAt)}
+                  </p>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/components/QuickActionSlot.tsx

@@ -0,0 +1,11 @@
+/**
+ * Quick Action Slot - Slot injection component
+ *
+ * This demonstrates how a plugin can inject a widget into
+ * the dashboard:widgets slot (if host has one)
+ */
+export function QuickActionSlot() {
+  // This would be rendered in a slot on the dashboard
+  // For now, it's a placeholder showing how slots work
+  return null;
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/components/QuickActions.tsx

@@ -0,0 +1,68 @@
+import { Plus, Users, Settings } from 'lucide-react';
+
+interface QuickActionsProps {
+  onToast?: (data: { type: string; title: string; description?: string }) => void;
+}
+
+export function QuickActions({ onToast }: QuickActionsProps) {
+  const actions = [
+    {
+      icon: Plus,
+      label: 'New Todo',
+      description: 'Create a new todo item',
+      onClick: () => {
+        onToast?.({
+          type: 'info',
+          title: 'Quick Action',
+          description: 'Navigate to Todos to create a new item',
+        });
+      },
+    },
+    {
+      icon: Users,
+      label: 'Invite User',
+      description: 'Invite a team member',
+      onClick: () => {
+        onToast?.({
+          type: 'info',
+          title: 'Quick Action',
+          description: 'Navigate to Settings to invite users',
+        });
+      },
+    },
+    {
+      icon: Settings,
+      label: 'Settings',
+      description: 'Manage organization settings',
+      onClick: () => {
+        window.location.href = '/settings';
+      },
+    },
+  ];
+
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      <h2 className="text-lg font-semibold">Quick Actions</h2>
+      <div className="mt-4 space-y-2">
+        {actions.map((action) => {
+          const Icon = action.icon;
+          return (
+            <button
+              key={action.label}
+              onClick={action.onClick}
+              className="flex w-full items-center gap-3 rounded-lg border border-transparent bg-muted/50 p-3 text-left hover:bg-muted hover:underline"
+            >
+              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-background">
+                <Icon className="h-4 w-4" />
+              </div>
+              <div className="flex-1">
+                <div className="text-sm font-medium">{action.label}</div>
+                <div className="text-xs text-muted-foreground">{action.description}</div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/components/SidebarWidget.tsx

@@ -0,0 +1,35 @@
+import { NavLink } from '@modern-js/runtime/router';
+import { cn } from '../lib/utils';
+import { LayoutDashboard } from 'lucide-react';
+
+interface SidebarWidgetProps {
+  to: string;
+  icon: string;
+  label: string;
+}
+
+/**
+ * Sidebar Widget - Slot injection component
+ *
+ * This component is injected into the host's sidebar nav slot
+ * It demonstrates how plugins can add navigation items
+ */
+export function SidebarWidget({ to, label }: SidebarWidgetProps) {
+  return (
+    <NavLink
+      to={to}
+      end={to === '/'}
+      className={({ isActive }) =>
+        cn(
+          'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+          isActive
+            ? 'bg-primary text-primary-foreground'
+            : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+        )
+      }
+    >
+      <LayoutDashboard className="h-5 w-5" />
+      <span>{label}</span>
+    </NavLink>
+  );
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/components/StatCard.tsx

@@ -0,0 +1,47 @@
+import { cn } from '../lib/utils';
+import { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: number;
+  icon: string;
+  description: string;
+  trend?: {
+    value: number;
+    direction: 'up' | 'down';
+  };
+}
+
+// Icon map - in production you'd use proper icon loading
+const iconMap: Record<string, LucideIcon> = {};
+
+export function StatCard({ title, value, icon, description, trend }: StatCardProps) {
+  // For now, use a simple icon fallback
+  const Icon = iconMap[icon] || ((props: any) => <div {...props} className="h-4 w-4" />);
+
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      <div className="flex items-center justify-between">
+        <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+          <Icon className="h-6 w-6 text-primary" />
+        </div>
+        {trend && (
+          <div
+            className={cn(
+              'flex items-center gap-1 text-sm font-medium',
+              trend.direction === 'up' ? 'text-green-600' : 'text-red-600'
+            )}
+          >
+            <span>{trend.direction === 'up' ? '+' : '-'}</span>
+            <span>{trend.value}%</span>
+          </div>
+        )}
+      </div>
+      <div className="mt-4">
+        <div className="text-2xl font-bold">{value.toLocaleString()}</div>
+        <div className="text-sm text-muted-foreground">{title}</div>
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">{description}</p>
+    </div>
+  );
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/global.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/hooks/useChannelIntegration.ts

@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook for integrating with host channels
+ *
+ * This handles:
+ * - Listening for auth changes
+ * - Listening for organization changes
+ */
+export function useChannelIntegration() {
+  useEffect(() => {
+    // Get channel bus from host
+    const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+
+    if (!channelBus) {
+      console.warn('[Dashboard] Channel bus not found');
+      return;
+    }
+
+    // Listen for auth changes
+    const authUnsubscribe = channelBus.subscribe('lego:auth:change', (data: any) => {
+      console.log('[Dashboard] Auth changed:', data);
+
+      if (!data.isAuthenticated) {
+        // Clear plugin data when logged out
+        console.log('[Dashboard] Clearing data due to logout');
+      }
+    });
+
+    // Listen for organization changes
+    const orgUnsubscribe = channelBus.subscribe('lego:organization:change', (data: any) => {
+      console.log('[Dashboard] Organization changed:', data);
+
+      // Refresh dashboard data for new organization
+      // This will trigger a refetch via TanStack Query's invalidation
+    });
+
+    return () => {
+      authUnsubscribe?.();
+      orgUnsubscribe?.();
+    };
+  }, []);
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/hooks/useDashboardStats.ts

@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+
+interface DashboardStats {
+  totalUsers: number;
+  activeTodos: number;
+  completedTodos: number;
+}
+
+/**
+ * Fetch dashboard statistics
+ */
+export function useDashboardStats() {
+  const pb = usePocketBase();
+
+  return useQuery({
+    queryKey: ['dashboard', 'stats'],
+    queryFn: async (): Promise<DashboardStats> => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      // Get current organization from host state
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        throw new Error('No organization selected');
+      }
+
+      const orgId = state.organization.id;
+
+      // Fetch stats in parallel
+      const [usersResult, todosResult] = await Promise.all([
+        // Get users count (simplified - in production use proper aggregation)
+        pb.collection('user_roles').getList(1, 1, {
+          filter: `organizationId = "${orgId}"`,
+          requestKey: `users-count-${orgId}`,
+        }).then(() => {
+          // For simplicity, return a mock count
+          // In production, you'd use PocketBase's aggregate features
+          return Math.floor(Math.random() * 50) + 10;
+        }),
+
+        // Get active todos count
+        pb.collection('todos').getList(1, 1, {
+          filter: `organizationId = "${orgId}" && completed = false`,
+        }).then((result: any) => result.totalItems),
+
+        // Get completed todos count
+        pb.collection('todos').getList(1, 1, {
+          filter: `organizationId = "${orgId}" && completed = true`,
+        }).then((result: any) => result.totalItems),
+      ]);
+
+      return {
+        totalUsers: usersResult as number,
+        activeTodos: todosResult[0] as number,
+        completedTodos: todosResult[1] as number,
+      };
+    },
+    enabled: !!pb,
+    refetchInterval: 60000, // Refresh every minute
+  });
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/hooks/usePocketBase.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import PocketBase from 'pocketbase';
+
+/**
+ * Get PocketBase instance from host
+ *
+ * Plugins access PocketBase through the window bridge
+ * that was set up by the host's shared state system
+ */
+export function usePocketBase() {
+  const [pb, setPb] = useState<PocketBase | null>(null);
+
+  useEffect(() => {
+    // Access PocketBase from host's state bridge
+    const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+
+    if (!kernelState) {
+      console.error('[Dashboard] Kernel state bridge not found');
+      return;
+    }
+
+    // Get PocketBase URL from env or default to localhost
+    const pbUrl = import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090';
+    const client = new PocketBase(pbUrl);
+
+    // Get auth token from host state
+    const state = kernelState.useGlobalKernelState.getState();
+    if (state.token) {
+      client.authStore.save(state.token, null as any);
+    }
+
+    // Listen for token changes
+    const unsubscribe = kernelState.useGlobalKernelState.subscribe((newState: any) => {
+      if (newState.token && newState.token !== client.authStore.token) {
+        client.authStore.save(newState.token, null as any);
+      }
+    });
+
+    setPb(client);
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return pb;
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/hooks/useRecentActivity.ts

@@ -0,0 +1,55 @@
+import { useQuery } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+
+export interface Activity {
+  id: string;
+  action: string;
+  resource: string;
+  userId: string;
+  userName?: string;
+  createdAt: string;
+}
+
+/**
+ * Fetch recent activity feed
+ */
+export function useRecentActivity(limit = 10) {
+  const pb = usePocketBase();
+
+  return useQuery({
+    queryKey: ['dashboard', 'activity', limit],
+    queryFn: async (): Promise<Activity[]> => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      // Get current organization from host state
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        return [];
+      }
+
+      const orgId = state.organization.id;
+
+      // Fetch recent audit logs
+      const result = await pb.collection('audit_logs').getList(1, limit, {
+        filter: `organizationId = "${orgId}"`,
+        sort: '-created',
+        expand: 'userId',
+      });
+
+      return result.items.map((item: any) => ({
+        id: item.id,
+        action: item.action,
+        resource: item.resource,
+        userId: item.userId,
+        userName: item.expand?.userId?.name || item.expand?.userId?.email || 'Unknown',
+        createdAt: item.created,
+      }));
+    },
+    enabled: !!pb,
+    refetchInterval: 30000, // Refresh every 30 seconds
+  });
+}

package/template/packages/plugins/@lego/plugin-dashboard/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}