@contractspec/example.saas-boilerplate 1.46.1 → 1.48.0

package/src/ui/hooks/useProjectList.ts

@@ -0,0 +1,95 @@
+/**
+ * Hook for fetching and managing project list data
+ *
+ * Uses runtime-local database-backed handlers.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import type {
+  Project as RuntimeProject,
+  Subscription as RuntimeSubscription,
+  SaasHandlers,
+} from '../../handlers/saas.handlers';
+
+// Re-export types for convenience
+export type Project = RuntimeProject;
+export type Subscription = RuntimeSubscription;
+
+export interface ListProjectsOutput {
+  items: Project[];
+  total: number;
+}
+
+export interface UseProjectListOptions {
+  status?: 'DRAFT' | 'ACTIVE' | 'ARCHIVED' | 'all';
+  search?: string;
+  limit?: number;
+}
+
+export function useProjectList(options: UseProjectListOptions = {}) {
+  const { handlers, projectId } = useTemplateRuntime<{ saas: SaasHandlers }>();
+  const { saas } = handlers;
+
+  const [data, setData] = useState<ListProjectsOutput | null>(null);
+  const [subscription, setSubscription] = useState<Subscription | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [page, setPage] = useState(1);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const [projectsResult, subscriptionResult] = await Promise.all([
+        saas.listProjects({
+          projectId,
+          status: options.status === 'all' ? undefined : options.status,
+          search: options.search,
+          limit: options.limit ?? 20,
+          offset: (page - 1) * (options.limit ?? 20),
+        }),
+        saas.getSubscription({ projectId }),
+      ]);
+      setData({
+        items: projectsResult.items,
+        total: projectsResult.total,
+      });
+      setSubscription(subscriptionResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Unknown error'));
+    } finally {
+      setLoading(false);
+    }
+  }, [saas, projectId, options.status, options.search, options.limit, page]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Calculate stats
+  const stats = useMemo(() => {
+    if (!data) return null;
+    const items = data.items;
+    return {
+      total: data.total,
+      activeCount: items.filter((p) => p.status === 'ACTIVE').length,
+      draftCount: items.filter((p) => p.status === 'DRAFT').length,
+      // Subscription stats are optional since they may not be seeded
+      projectLimit: 10, // Default limit for demo
+      usagePercent: Math.min((data.total / 10) * 100, 100),
+    };
+  }, [data]);
+
+  return {
+    data,
+    subscription,
+    loading,
+    error,
+    stats,
+    page,
+    refetch: fetchData,
+    nextPage: () => setPage((p) => p + 1),
+    prevPage: () => page > 1 && setPage((p) => p - 1),
+  };
+}

package/src/ui/hooks/useProjectMutations.ts

@@ -0,0 +1,166 @@
+/**
+ * Hook for SaaS project mutations (commands)
+ *
+ * Uses runtime-local database-backed handlers for:
+ * - CreateProjectContract
+ * - UpdateProjectContract
+ * - DeleteProjectContract
+ */
+import { useCallback, useState } from 'react';
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import type {
+  CreateProjectInput,
+  Project,
+  UpdateProjectInput,
+  SaasHandlers,
+} from '../../handlers/saas.handlers';
+
+export interface MutationState<T> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+}
+
+export interface UseProjectMutationsOptions {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export function useProjectMutations(options: UseProjectMutationsOptions = {}) {
+  const { handlers, projectId } = useTemplateRuntime<{ saas: SaasHandlers }>();
+  const { saas } = handlers;
+
+  const [createState, setCreateState] = useState<MutationState<Project>>({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  const [updateState, setUpdateState] = useState<MutationState<Project>>({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  const [deleteState, setDeleteState] = useState<
+    MutationState<{ success: boolean }>
+  >({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  /**
+   * Create a new project
+   */
+  const createProject = useCallback(
+    async (input: CreateProjectInput): Promise<Project | null> => {
+      setCreateState({ loading: true, error: null, data: null });
+      try {
+        const result = await saas.createProject(input, {
+          projectId,
+          organizationId: 'demo-org',
+        });
+        setCreateState({ loading: false, error: null, data: result });
+        options.onSuccess?.();
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error('Failed to create project');
+        setCreateState({ loading: false, error, data: null });
+        options.onError?.(error);
+        return null;
+      }
+    },
+    [saas, projectId, options]
+  );
+
+  /**
+   * Update a project
+   */
+  const updateProject = useCallback(
+    async (input: UpdateProjectInput): Promise<Project | null> => {
+      setUpdateState({ loading: true, error: null, data: null });
+      try {
+        const result = await saas.updateProject(input);
+        setUpdateState({ loading: false, error: null, data: result });
+        options.onSuccess?.();
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error('Failed to update project');
+        setUpdateState({ loading: false, error, data: null });
+        options.onError?.(error);
+        return null;
+      }
+    },
+    [saas, options]
+  );
+
+  /**
+   * Delete a project (soft delete)
+   */
+  const deleteProject = useCallback(
+    async (id: string): Promise<boolean> => {
+      setDeleteState({ loading: true, error: null, data: null });
+      try {
+        await saas.deleteProject(id);
+        setDeleteState({
+          loading: false,
+          error: null,
+          data: { success: true },
+        });
+        options.onSuccess?.();
+        return true;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error('Failed to delete project');
+        setDeleteState({ loading: false, error, data: null });
+        options.onError?.(error);
+        return false;
+      }
+    },
+    [saas, options]
+  );
+
+  /**
+   * Archive a project (status change)
+   */
+  const archiveProject = useCallback(
+    async (id: string): Promise<Project | null> => {
+      return updateProject({ id, status: 'ARCHIVED' });
+    },
+    [updateProject]
+  );
+
+  /**
+   * Activate a project (status change)
+   */
+  const activateProject = useCallback(
+    async (id: string): Promise<Project | null> => {
+      return updateProject({ id, status: 'ACTIVE' });
+    },
+    [updateProject]
+  );
+
+  return {
+    // Mutations
+    createProject,
+    updateProject,
+    deleteProject,
+    archiveProject,
+    activateProject,
+
+    // State
+    createState,
+    updateState,
+    deleteState,
+
+    // Convenience
+    isLoading:
+      createState.loading || updateState.loading || deleteState.loading,
+  };
+}
+
+// Note: Types are re-exported from the handlers package
+// Consumers should import types directly from '@contractspec/example.saas-boilerplate/handlers'

package/src/ui/index.ts

@@ -0,0 +1,18 @@
+// Main dashboard
+export * from './SaasDashboard';
+
+// Standalone components
+export * from './SaasProjectList';
+export * from './SaasSettingsPanel';
+
+// Modals
+export * from './modals';
+
+// Hooks
+export * from './hooks';
+
+// Renderers
+export * from './renderers';
+
+// Overlays
+export * from './overlays';

package/src/ui/modals/CreateProjectModal.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+/**
+ * CreateProjectModal - Form for creating a new project
+ *
+ * Wires to CreateProjectContract via useProjectMutations hook.
+ */
+import { useState } from 'react';
+import { Button, Input } from '@contractspec/lib.design-system';
+
+// Local type definition for modal props
+export interface CreateProjectInput {
+  name: string;
+  description?: string;
+  tier: 'FREE' | 'PRO' | 'ENTERPRISE';
+}
+
+interface CreateProjectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (input: CreateProjectInput) => Promise<void>;
+  isLoading?: boolean;
+}
+
+const TIERS: { value: CreateProjectInput['tier']; label: string }[] = [
+  { value: 'FREE', label: 'Free' },
+  { value: 'PRO', label: 'Pro' },
+  { value: 'ENTERPRISE', label: 'Enterprise' },
+];
+
+export function CreateProjectModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false,
+}: CreateProjectModalProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [tier, setTier] = useState<CreateProjectInput['tier']>('FREE');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validation
+    if (!name.trim()) {
+      setError('Project name is required');
+      return;
+    }
+
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        tier,
+      });
+
+      // Reset form
+      setName('');
+      setDescription('');
+      setTier('FREE');
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create project');
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="bg-background/80 absolute inset-0 backdrop-blur-sm"
+        onClick={onClose}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') onClose();
+        }}
+        aria-label="Close modal"
+      />
+
+      {/* Modal */}
+      <div className="bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl">
+        <h2 className="mb-4 text-xl font-semibold">Create New Project</h2>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Project Name */}
+          <div>
+            <label
+              htmlFor="project-name"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Project Name *
+            </label>
+            <Input
+              id="project-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., My Awesome Project"
+              disabled={isLoading}
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label
+              htmlFor="project-description"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Description
+            </label>
+            <textarea
+              id="project-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Describe what this project is about..."
+              rows={3}
+              disabled={isLoading}
+              className="border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+            />
+          </div>
+
+          {/* Tier */}
+          <div>
+            <label
+              htmlFor="project-tier"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Tier
+            </label>
+            <select
+              id="project-tier"
+              value={tier}
+              onChange={(e) =>
+                setTier(e.target.value as CreateProjectInput['tier'])
+              }
+              disabled={isLoading}
+              className="border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+            >
+              {TIERS.map((t) => (
+                <option key={t.value} value={t.value}>
+                  {t.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Error Message */}
+          {error && (
+            <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              onPress={onClose}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? 'Creating...' : 'Create Project'}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}