create-lego-one 2.0.10 → 2.0.13

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

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

@@ -0,0 +1,105 @@
+import { useEffect } from 'react';
+import { useDashboardStats } from '../hooks/useDashboardStats';
+import { useRecentActivity } from '../hooks/useRecentActivity';
+import { StatCard } from '../components/StatCard';
+import { ActivityFeed } from '../components/ActivityFeed';
+import { QuickActions } from '../components/QuickActions';
+
+/**
+ * Dashboard Page
+ *
+ * Main dashboard page showing:
+ * - Organization statistics
+ * - Recent activity feed
+ * - Quick action buttons
+ */
+export default function DashboardPage() {
+  const { data: stats, isLoading: statsLoading } = useDashboardStats();
+  const { data: activities, isLoading: activityLoading } = useRecentActivity();
+
+  // Publish toast helper
+  const publishToast = (data: { type: string; title: string; description?: string }) => {
+    const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+    if (channelBus) {
+      channelBus.publish('lego:toast', { channel: 'lego:toast', data });
+    }
+  };
+
+  // Notify that plugin is ready
+  useEffect(() => {
+    const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+    if (channelBus) {
+      channelBus.publish('lego:plugin:ready', {
+        channel: 'lego:plugin:ready',
+        data: { name: '@lego/plugin-dashboard', version: '1.0.0' }
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (stats) {
+      console.log('[Dashboard] Stats loaded:', stats);
+    }
+  }, [stats]);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome to your organization dashboard
+        </p>
+      </div>
+
+      {/* Statistics Grid */}
+      {statsLoading ? (
+        <div className="grid gap-4 md:grid-cols-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-32 animate-pulse rounded-lg bg-muted" />
+          ))}
+        </div>
+      ) : stats ? (
+        <div className="grid gap-4 md:grid-cols-3">
+          <StatCard
+            title="Total Users"
+            value={stats.totalUsers}
+            icon="Users"
+            description="Active users in organization"
+            trend={{ value: 12, direction: 'up' }}
+          />
+          <StatCard
+            title="Active Todos"
+            value={stats.activeTodos}
+            icon="CheckSquare"
+            description="Tasks in progress"
+            trend={{ value: 8, direction: 'up' }}
+          />
+          <StatCard
+            title="Completed Todos"
+            value={stats.completedTodos}
+            icon="CheckCircle"
+            description="Tasks completed"
+            trend={{ value: 5, direction: 'down' }}
+          />
+        </div>
+      ) : null}
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Quick Actions */}
+        <QuickActions onToast={publishToast} />
+
+        {/* Recent Activity */}
+        {activityLoading ? (
+          <div className="space-y-4">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="h-16 animate-pulse rounded-lg bg-muted" />
+            ))}
+          </div>
+        ) : (
+          <ActivityFeed activities={activities || []} />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+import type { ReactNode, ComponentType } from 'react';
+import { SidebarWidget } from './components/SidebarWidget';
+import { QuickActionSlot } from './components/QuickActionSlot';
+
+// Local type definitions for plugin config
+interface PluginManifest {
+  name: string;
+  version: string;
+  displayName: string;
+  description: string;
+  author: string;
+  permissions: string[];
+}
+
+interface SlotInjection {
+  slot: string;
+  component: ReactNode | ComponentType<any>;
+  order?: number;
+  props?: Record<string, unknown>;
+  condition?: () => boolean;
+}
+
+interface RouteConfig {
+  path: string;
+  component: () => Promise<{ default: ComponentType<any> }>;
+  protected?: boolean;
+  permissions?: string[];
+}
+
+interface PluginSetting {
+  key: string;
+  type: 'boolean' | 'string' | 'number' | 'select';
+  label: string;
+  description?: string;
+  defaultValue?: unknown;
+  options?: { label: string; value: string }[];
+}
+
+interface PluginConfig {
+  manifest: PluginManifest;
+  enabled: boolean;
+  slots: SlotInjection[];
+  routes?: RouteConfig[];
+  settings?: PluginSetting[];
+}
+
+/**
+ * Dashboard plugin configuration
+ *
+ * This config defines:
+ * - Plugin metadata (manifest)
+ * - Slot injections (content injected into host layout)
+ * - Routes (plugin pages)
+ * - Settings (configurable by admin)
+ */
+export const pluginConfig: PluginConfig = {
+  manifest: {
+    name: '@lego/plugin-dashboard',
+    version: '1.0.0',
+    displayName: 'Dashboard',
+    description: 'Organization dashboard with stats, activity, and quick actions',
+    author: 'Lego-One',
+    permissions: ['organizations.read', 'audit_logs.read'],
+  },
+
+  enabled: true,
+
+  // Slot injections - add content to host layout
+  slots: [
+    {
+      slot: 'sidebar:nav',
+      component: SidebarWidget,
+      order: 50, // After Home, before Todos
+      props: {
+        to: '/dashboard',
+        icon: 'LayoutDashboard',
+        label: 'Dashboard',
+      },
+    },
+    {
+      slot: 'dashboard:widgets',
+      component: QuickActionSlot,
+      order: 100,
+    },
+  ],
+
+  // Plugin routes
+  routes: [
+    {
+      path: '/dashboard',
+      component: () => import('./pages/DashboardPage').then(m => ({ default: m.default })),
+      protected: true,
+      permissions: ['organizations.read'],
+    },
+  ],
+
+  // Plugin settings (shown in admin UI)
+  settings: [
+    {
+      key: 'showStats',
+      type: 'boolean',
+      label: 'Show Statistics',
+      description: 'Display organization statistics on dashboard',
+      defaultValue: true,
+    },
+    {
+      key: 'showActivity',
+      type: 'boolean',
+      label: 'Show Recent Activity',
+      description: 'Display recent activity feed',
+      defaultValue: true,
+    },
+    {
+      key: 'activityLimit',
+      type: 'number',
+      label: 'Activity Feed Limit',
+      description: 'Number of activity items to show',
+      defaultValue: 10,
+    },
+  ],
+};

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

@@ -0,0 +1,18 @@
+/**
+ * Plugin entry point
+ *
+ * This file is the main entry point for the Dashboard plugin.
+ * It exports the plugin config and the root component.
+ */
+
+import { pluginConfig } from './plugin.config';
+import DashboardApp from './App';
+
+export default {
+  config: pluginConfig,
+  App: DashboardApp,
+};
+
+// Also export for convenience
+export { pluginConfig };
+export { default as App } from './App';

package/template/packages/plugins/@lego/plugin-dashboard/src/vite-env.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="vite/client" />
+
+declare global {
+  interface ImportMetaEnv {
+    readonly VITE_POCKETBASE_URL: string;
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+
+  interface Window {
+    __LEGO_KERNEL_STATE__?: {
+      useGlobalKernelState: {
+        getState: () => {
+          token?: string;
+          organization?: { id: string };
+          user?: any;
+        };
+        subscribe: (callback: (state: any) => void) => () => void;
+      };
+    };
+    __LEGO_CHANNEL_BUS__?: {
+      publish: (channel: string, data: any) => void;
+      subscribe: (channel: string, callback: (data: any) => void) => () => void;
+      unsubscribe: (channel: string, callback: (data: any) => void) => void;
+      unsubscribeAll: (channel: string) => void;
+    };
+  }
+}
+
+export {};

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

@@ -0,0 +1,35 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

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

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

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

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

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

@@ -0,0 +1,41 @@
+{
+  "name": "@lego/plugin-todo",
+  "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"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
+    "@modern-js/runtime": "^2.70.0",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.62.0",
+    "class-variance-authority": "^0.7.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",
+    "react-hook-form": "^7.53.0",
+    "tailwind-merge": "^2.5.4",
+    "zod": "^3.23.8"
+  },
+  "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-todo/postcss.config.mjs

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

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

@@ -0,0 +1,12 @@
+import { Route, Routes } from '@modern-js/runtime/router';
+import { TodoPage } from './pages/TodoPage';
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/todo" element={<TodoPage />} />
+    </Routes>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,16 @@
+import { CheckSquare } from 'lucide-react';
+import { useNavigate } from '@modern-js/runtime/router';
+
+export function SidebarWidget() {
+  const navigate = useNavigate();
+
+  return (
+    <button
+      onClick={() => navigate('/todo')}
+      className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+    >
+      <CheckSquare className="h-4 w-4" />
+      <span>Todo</span>
+    </button>
+  );
+}

package/template/packages/plugins/@lego/plugin-todo/src/components/TodoDialog.tsx

@@ -0,0 +1,55 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { TodoForm } from './TodoForm';
+import { TodoFormInput } from '../schemas';
+import { cn } from '../lib/utils';
+
+interface TodoDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: TodoFormInput) => void;
+  isLoading?: boolean;
+}
+
+export function TodoDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  isLoading,
+}: TodoDialogProps) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content
+          className={cn(
+            'fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2',
+            'rounded-lg border bg-background p-6 shadow-lg',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+            'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]'
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <Dialog.Title className="text-lg font-semibold">
+              Create New Todo
+            </Dialog.Title>
+            <Dialog.Close
+              disabled={isLoading}
+              className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Dialog.Close>
+          </div>
+
+          <div className="mt-4">
+            <TodoForm onSubmit={onSubmit} isLoading={isLoading} />
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/template/packages/plugins/@lego/plugin-todo/src/components/TodoFilters.tsx

@@ -0,0 +1,79 @@
+import { Search, Filter } from 'lucide-react';
+import { TodoFilters as TodoFiltersType } from '../types';
+import { cn } from '../lib/utils';
+
+interface TodoFiltersProps {
+  filters: TodoFiltersType;
+  onFiltersChange: (filters: TodoFiltersType) => void;
+  todoCount: number;
+}
+
+export function TodoFilters({
+  filters,
+  onFiltersChange,
+  todoCount,
+}: TodoFiltersProps) {
+  return (
+    <div className="space-y-4">
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="text"
+          placeholder="Search todos..."
+          value={filters.search || ''}
+          onChange={(e) =>
+            onFiltersChange({ ...filters, search: e.target.value })
+          }
+          className="w-full rounded-md border border-input bg-background pl-10 pr-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        />
+      </div>
+
+      {/* Filter Controls */}
+      <div className="flex flex-wrap gap-2">
+        {/* Status Filter */}
+        <div className="flex items-center gap-2 rounded-md border bg-background p-1">
+          <Filter className="h-4 w-4 text-muted-foreground" />
+          <select
+            value={filters.status || 'all'}
+            onChange={(e) =>
+              onFiltersChange({
+                ...filters,
+                status: e.target.value as TodoFiltersType['status'],
+              })
+            }
+            className="bg-transparent text-sm focus:outline-none"
+          >
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="completed">Completed</option>
+          </select>
+        </div>
+
+        {/* Priority Filter */}
+        <div className="flex items-center gap-2 rounded-md border bg-background p-1">
+          <select
+            value={filters.priority || 'all'}
+            onChange={(e) =>
+              onFiltersChange({
+                ...filters,
+                priority: e.target.value as TodoFiltersType['priority'],
+              })
+            }
+            className="bg-transparent text-sm focus:outline-none"
+          >
+            <option value="all">All Priority</option>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </select>
+        </div>
+
+        {/* Results Count */}
+        <div className="ml-auto flex items-center text-sm text-muted-foreground">
+          {todoCount} {todoCount === 1 ? 'todo' : 'todos'}
+        </div>
+      </div>
+    </div>
+  );
+}