create-lego-one 2.0.10 → 2.0.13

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

@@ -0,0 +1,94 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { todoFormSchema, type TodoFormInput } from '../schemas';
+import { cn } from '../lib/utils';
+
+interface TodoFormProps {
+  onSubmit: (data: TodoFormInput) => void;
+  isLoading?: boolean;
+}
+
+export function TodoForm({ onSubmit, isLoading }: TodoFormProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TodoFormInput>({
+    resolver: zodResolver(todoFormSchema),
+    defaultValues: {
+      priority: 'medium',
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <label htmlFor="title" className="text-sm font-medium">
+          Title *
+        </label>
+        <input
+          id="title"
+          placeholder="What needs to be done?"
+          {...register('title')}
+          className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+        {errors.title && (
+          <p className="text-sm text-destructive">{errors.title.message}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="description" className="text-sm font-medium">
+          Description
+        </label>
+        <input
+          id="description"
+          placeholder="Add details (optional)"
+          {...register('description')}
+          className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+        {errors.description && (
+          <p className="text-sm text-destructive">{errors.description.message}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="priority" className="text-sm font-medium">
+          Priority *
+        </label>
+        <select
+          {...register('priority')}
+          className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          <option value="low">Low</option>
+          <option value="medium">Medium</option>
+          <option value="high">High</option>
+        </select>
+        {errors.priority && (
+          <p className="text-sm text-destructive">{errors.priority.message}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="dueDate" className="text-sm font-medium">
+          Due Date
+        </label>
+        <input
+          id="dueDate"
+          type="date"
+          {...register('dueDate')}
+          className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+      >
+        {isLoading ? 'Creating...' : 'Create Todo'}
+      </button>
+    </form>
+  );
+}

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

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { CheckSquare, Square, Trash2, Edit2, Calendar } from 'lucide-react';
+import { TodoWithOwner } from '../types';
+import { useUpdateTodo } from '../hooks/useUpdateTodo';
+import { useDeleteTodo } from '../hooks/useDeleteTodo';
+import { cn } from '../lib/utils';
+import { formatRelativeTime } from '../lib/utils';
+
+interface TodoItemProps {
+  todo: TodoWithOwner;
+}
+
+const priorityColors = {
+  low: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+  medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
+  high: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+};
+
+export function TodoItem({ todo }: TodoItemProps) {
+  const updateTodo = useUpdateTodo();
+  const deleteTodo = useDeleteTodo();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleToggleComplete = () => {
+    updateTodo.mutate({
+      id: todo.id,
+      data: { completed: !todo.completed },
+    });
+  };
+
+  const handleDelete = () => {
+    if (confirm('Are you sure you want to delete this todo?')) {
+      deleteTodo.mutate(todo.id);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'group rounded-lg border p-4 transition-colors hover:bg-muted/50',
+        todo.completed && 'opacity-60'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {/* Checkbox */}
+        <button
+          onClick={handleToggleComplete}
+          disabled={updateTodo.isPending}
+          className="mt-0.5 shrink-0"
+        >
+          {todo.completed ? (
+            <CheckSquare className="h-5 w-5 text-primary" />
+          ) : (
+            <Square className="h-5 w-5 text-muted-foreground" />
+          )}
+        </button>
+
+        {/* Content */}
+        <div className="flex-1 space-y-1">
+          <div className="flex items-start justify-between gap-2">
+            <h4
+              className={cn(
+                'font-medium',
+                todo.completed && 'line-through text-muted-foreground'
+              )}
+            >
+              {todo.title}
+            </h4>
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+              <button
+                onClick={() => setIsEditing(true)}
+                className="rounded p-1 hover:bg-muted"
+              >
+                <Edit2 className="h-4 w-4" />
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={deleteTodo.isPending}
+                className="rounded p-1 hover:bg-destructive hover:text-destructive-foreground"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          {todo.description && (
+            <p className="text-sm text-muted-foreground">{todo.description}</p>
+          )}
+
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span className={cn('rounded-full px-2 py-0.5', priorityColors[todo.priority])}>
+              {todo.priority}
+            </span>
+            {todo.dueDate && (
+              <span className="flex items-center gap-1">
+                <Calendar className="h-3 w-3" />
+                {formatRelativeTime(todo.dueDate)}
+              </span>
+            )}
+            {todo.ownerName && (
+              <span>Created by {todo.ownerName}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Edit dialog would go here - for now using inline state */}
+      {isEditing && (
+        <div className="mt-4 pt-4 border-t">
+          <p className="text-sm text-muted-foreground">Edit functionality coming soon</p>
+          <button
+            onClick={() => setIsEditing(false)}
+            className="mt-2 text-sm text-primary hover:underline"
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { TodoWithOwner } from '../types';
+import { TodoItem } from './TodoItem';
+
+interface TodoListProps {
+  todos: TodoWithOwner[];
+  isLoading?: boolean;
+}
+
+export function TodoList({ todos, isLoading }: TodoListProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="h-20 animate-pulse rounded-lg bg-muted" />
+        ))}
+      </div>
+    );
+  }
+
+  if (todos.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+          <span className="text-2xl">📝</span>
+        </div>
+        <h3 className="mt-4 text-lg font-semibold">No todos found</h3>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Create your first todo to get started
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {todos.map((todo) => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </div>
+  );
+}

package/template/packages/plugins/@lego/plugin-todo/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './TodoForm';
+export * from './TodoItem';
+export * from './TodoList';
+export * from './TodoDialog';
+export * from './TodoFilters';
+export * from './SidebarWidget';

package/template/packages/plugins/@lego/plugin-todo/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/packages/plugins/@lego/plugin-todo/src/hooks/useCreateTodo.ts

@@ -0,0 +1,62 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+import type { TodoFormData } from '../types';
+
+export function useCreateTodo() {
+  const pb = usePocketBase();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (data: TodoFormData) => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        throw new Error('No organization selected');
+      }
+
+      const result = await pb.collection('todos').create({
+        title: data.title,
+        description: data.description || '',
+        completed: false,
+        priority: data.priority,
+        dueDate: data.dueDate || null,
+        organizationId: state.organization.id,
+        ownerId: state.user?.id,
+      });
+
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+      const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+      if (channelBus) {
+        channelBus.publish('lego:toast', {
+          channel: 'lego:toast',
+          data: {
+            type: 'success',
+            title: 'Todo created',
+            description: 'Your todo has been created successfully',
+          },
+        });
+      }
+    },
+    onError: (error: any) => {
+      const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+      if (channelBus) {
+        channelBus.publish('lego:toast', {
+          channel: 'lego:toast',
+          data: {
+            type: 'error',
+            title: 'Failed to create todo',
+            description: error.message || 'An error occurred',
+          },
+        });
+      }
+    },
+  });
+}

package/template/packages/plugins/@lego/plugin-todo/src/hooks/useDeleteTodo.ts

@@ -0,0 +1,46 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+
+export function useDeleteTodo() {
+  const pb = usePocketBase();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      await pb.collection('todos').delete(id);
+
+      return id;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+      const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+      if (channelBus) {
+        channelBus.publish('lego:toast', {
+          channel: 'lego:toast',
+          data: {
+            type: 'success',
+            title: 'Todo deleted',
+            description: 'Your todo has been deleted',
+          },
+        });
+      }
+    },
+    onError: (error: any) => {
+      const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+      if (channelBus) {
+        channelBus.publish('lego:toast', {
+          channel: 'lego:toast',
+          data: {
+            type: 'error',
+            title: 'Failed to delete todo',
+            description: error.message || 'An error occurred',
+          },
+        });
+      }
+    },
+  });
+}

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

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import PocketBase from 'pocketbase';
+
+export function usePocketBase() {
+  const [pb, setPb] = useState<PocketBase | null>(null);
+
+  useEffect(() => {
+    const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+
+    if (!kernelState) {
+      console.error('[Todo] Kernel state bridge not found');
+      return;
+    }
+
+    const pbUrl = import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090';
+    const client = new PocketBase(pbUrl);
+
+    // Sync auth token
+    const state = kernelState.useGlobalKernelState.getState();
+    if (state.token) {
+      client.authStore.save(state.token, null as any);
+    }
+
+    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-todo/src/hooks/useTodos.ts

@@ -0,0 +1,64 @@
+import { useQuery } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+import type { TodoWithOwner, TodoFilters } from '../types';
+
+export function useTodos(filters: TodoFilters = {}) {
+  const pb = usePocketBase();
+
+  return useQuery({
+    queryKey: ['todos', filters],
+    queryFn: async (): Promise<TodoWithOwner[]> => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        return [];
+      }
+
+      const orgId = state.organization.id;
+
+      // Build filter
+      let filterParts: string[] = [`organizationId = "${orgId}"`];
+
+      if (filters.status === 'active') {
+        filterParts.push('completed = false');
+      } else if (filters.status === 'completed') {
+        filterParts.push('completed = true');
+      }
+
+      if (filters.priority && filters.priority !== 'all') {
+        filterParts.push(`priority = "${filters.priority}"`);
+      }
+
+      if (filters.search) {
+        filterParts.push(`title ~ "${filters.search}"`);
+      }
+
+      const result = await pb.collection('todos').getList(1, 50, {
+        filter: filterParts.join(' && '),
+        sort: filters.status === 'completed' ? '-updated,-created' : '-created',
+        expand: 'ownerId',
+      });
+
+      return result.items.map((item: any) => ({
+        id: item.id,
+        title: item.title,
+        description: item.description,
+        completed: item.completed,
+        priority: item.priority,
+        dueDate: item.dueDate,
+        organizationId: item.organizationId,
+        ownerId: item.ownerId,
+        created: item.created,
+        updated: item.updated,
+        ownerName: item.expand?.ownerId?.name || item.expand?.ownerId?.email,
+        ownerEmail: item.expand?.ownerId?.email,
+      }));
+    },
+    enabled: !!pb,
+  });
+}

package/template/packages/plugins/@lego/plugin-todo/src/hooks/useUpdateTodo.ts

@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+
+export function useUpdateTodo() {
+  const pb = usePocketBase();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: Partial<any> }) => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      const result = await pb.collection('todos').update(id, data);
+
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+    },
+    onError: (error: any) => {
+      const channelBus = (window as any).__LEGO_CHANNEL_BUS__;
+      if (channelBus) {
+        channelBus.publish('lego:toast', {
+          channel: 'lego:toast',
+          data: {
+            type: 'error',
+            title: 'Failed to update todo',
+            description: error.message || 'An error occurred',
+          },
+        });
+      }
+    },
+  });
+}

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

@@ -0,0 +1,5 @@
+import '@modern-js/runtime/plugins';
+import './global.css';
+import { App } from './App';
+
+export { App };

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

@@ -0,0 +1,20 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export 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`;
+}

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

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { TodoList } from '../components/TodoList';
+import { TodoDialog } from '../components/TodoDialog';
+import { TodoFilters } from '../components/TodoFilters';
+import { useTodos } from '../hooks/useTodos';
+import { useCreateTodo } from '../hooks/useCreateTodo';
+import { TodoFilters as TodoFiltersType } from '../types';
+import { todoFormSchema, type TodoFormInput } from '../schemas';
+
+export function TodoPage() {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [filters, setFilters] = useState<TodoFiltersType>({
+    status: 'all',
+    priority: 'all',
+    search: '',
+  });
+
+  const { data: todos = [], isLoading } = useTodos(filters);
+  const createTodo = useCreateTodo();
+
+  const handleCreateTodo = (data: TodoFormInput) => {
+    createTodo.mutate(data, {
+      onSuccess: () => {
+        setIsDialogOpen(false);
+      },
+    });
+  };
+
+  const filteredTodos = todos.filter((todo) => {
+    // Status filter
+    if (filters.status === 'active' && todo.completed) return false;
+    if (filters.status === 'completed' && !todo.completed) return false;
+
+    // Priority filter
+    if (filters.priority !== 'all' && todo.priority !== filters.priority) {
+      return false;
+    }
+
+    // Search filter
+    if (filters.search) {
+      const searchLower = filters.search.toLowerCase();
+      const matchesTitle = todo.title.toLowerCase().includes(searchLower);
+      const matchesDescription = todo.description?.toLowerCase().includes(searchLower);
+      if (!matchesTitle && !matchesDescription) return false;
+    }
+
+    return true;
+  });
+
+  return (
+    <div className="container mx-auto max-w-4xl py-8 px-4">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold tracking-tight">Todos</h1>
+        <p className="mt-2 text-muted-foreground">
+          Manage your tasks and stay organized
+        </p>
+      </div>
+
+      {/* Actions */}
+      <div className="mb-6 flex items-center justify-between">
+        <TodoFilters
+          filters={filters}
+          onFiltersChange={setFilters}
+          todoCount={filteredTodos.length}
+        />
+        <button
+          onClick={() => setIsDialogOpen(true)}
+          className="flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+        >
+          <Plus className="h-4 w-4" />
+          New Todo
+        </button>
+      </div>
+
+      {/* Todo List */}
+      <TodoList todos={filteredTodos} isLoading={isLoading} />
+
+      {/* Create Dialog */}
+      <TodoDialog
+        open={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        onSubmit={handleCreateTodo}
+        isLoading={createTodo.isPending}
+      />
+    </div>
+  );
+}