@contractspec/example.saas-boilerplate 1.46.0 → 1.47.0

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

package/src/ui/modals/ProjectActionsModal.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+/**
+ * ProjectActionsModal - Actions for a specific project
+ *
+ * Wires to UpdateProjectContract, DeleteProjectContract
+ * via useProjectMutations hook.
+ */
+import { useEffect, useState } from 'react';
+import { Button, Input } from '@contractspec/lib.design-system';
+
+// Local type definitions for modal props
+export interface Project {
+  id: string;
+  name: string;
+  description?: string;
+  status: 'DRAFT' | 'ACTIVE' | 'ARCHIVED';
+  tier: 'FREE' | 'PRO' | 'ENTERPRISE';
+}
+
+export interface UpdateProjectInput {
+  id: string;
+  name?: string;
+  description?: string;
+}
+
+type ActionMode = 'menu' | 'edit' | 'archive' | 'delete';
+
+interface ProjectActionsModalProps {
+  isOpen: boolean;
+  project: Project | null;
+  onClose: () => void;
+  onUpdate: (input: UpdateProjectInput) => Promise<void>;
+  onArchive: (projectId: string) => Promise<void>;
+  onActivate: (projectId: string) => Promise<void>;
+  onDelete: (projectId: string) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function ProjectActionsModal({
+  isOpen,
+  project,
+  onClose,
+  onUpdate,
+  onArchive,
+  onActivate,
+  onDelete,
+  isLoading = false,
+}: ProjectActionsModalProps) {
+  const [mode, setMode] = useState<ActionMode>('menu');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const resetForm = () => {
+    setMode('menu');
+    setError(null);
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? '');
+    }
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  // Initialize form when project changes
+  useEffect(() => {
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? '');
+    }
+  }, [project]);
+
+  const handleEdit = async () => {
+    if (!project) return;
+    setError(null);
+
+    if (!name.trim()) {
+      setError('Project name is required');
+      return;
+    }
+
+    try {
+      await onUpdate({
+        id: project.id,
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update project');
+    }
+  };
+
+  const handleArchive = async () => {
+    if (!project) return;
+    setError(null);
+
+    try {
+      await onArchive(project.id);
+      handleClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to archive project'
+      );
+    }
+  };
+
+  const handleActivate = async () => {
+    if (!project) return;
+    setError(null);
+
+    try {
+      await onActivate(project.id);
+      handleClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to activate project'
+      );
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!project) return;
+    setError(null);
+
+    try {
+      await onDelete(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete project');
+    }
+  };
+
+  if (!isOpen || !project) 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={handleClose}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') handleClose();
+        }}
+        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">
+        {/* Project Header */}
+        <div className="border-border mb-4 border-b pb-4">
+          <h2 className="text-xl font-semibold">{project.name}</h2>
+          <p className="text-muted-foreground text-sm">
+            {project.tier} · {project.status}
+          </p>
+        </div>
+
+        {/* Main Menu */}
+        {mode === 'menu' && (
+          <div className="space-y-3">
+            <Button
+              className="w-full justify-start"
+              variant="ghost"
+              onPress={() => setMode('edit')}
+            >
+              <span className="mr-2">✏️</span> Edit Project
+            </Button>
+
+            {project.status === 'ACTIVE' || project.status === 'DRAFT' ? (
+              <Button
+                className="w-full justify-start"
+                variant="ghost"
+                onPress={() => setMode('archive')}
+              >
+                <span className="mr-2">📦</span> Archive Project
+              </Button>
+            ) : project.status === 'ARCHIVED' ? (
+              <Button
+                className="w-full justify-start"
+                variant="ghost"
+                onPress={handleActivate}
+                disabled={isLoading}
+              >
+                <span className="mr-2">🔄</span> Restore Project
+              </Button>
+            ) : null}
+
+            <Button
+              className="w-full justify-start text-red-500 hover:text-red-600"
+              variant="ghost"
+              onPress={() => setMode('delete')}
+            >
+              <span className="mr-2">🗑️</span> Delete Project
+            </Button>
+
+            <div className="border-border border-t pt-3">
+              <Button
+                className="w-full"
+                variant="outline"
+                onPress={handleClose}
+              >
+                Close
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Edit Form */}
+        {mode === 'edit' && (
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="edit-name"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Project Name *
+              </label>
+              <Input
+                id="edit-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="edit-description"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Description
+              </label>
+              <textarea
+                id="edit-description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                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>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Back
+              </Button>
+              <Button onPress={handleEdit} disabled={isLoading}>
+                {isLoading ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Archive Confirmation */}
+        {mode === 'archive' && (
+          <div className="space-y-4">
+            <p className="text-muted-foreground">
+              Are you sure you want to archive{' '}
+              <span className="text-foreground font-medium">
+                {project.name}
+              </span>
+              ?
+            </p>
+            <p className="text-muted-foreground text-sm">
+              Archived projects can be restored later.
+            </p>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Cancel
+              </Button>
+              <Button onPress={handleArchive} disabled={isLoading}>
+                {isLoading ? 'Archiving...' : '📦 Archive'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Delete Confirmation */}
+        {mode === 'delete' && (
+          <div className="space-y-4">
+            <p className="text-muted-foreground">
+              Are you sure you want to delete{' '}
+              <span className="text-foreground font-medium">
+                {project.name}
+              </span>
+              ?
+            </p>
+            <p className="text-destructive text-sm">
+              This action cannot be undone.
+            </p>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onPress={handleDelete}
+                disabled={isLoading}
+              >
+                {isLoading ? 'Deleting...' : '🗑️ Delete'}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/modals/index.ts

@@ -0,0 +1,2 @@
+export { CreateProjectModal } from './CreateProjectModal';
+export { ProjectActionsModal } from './ProjectActionsModal';