@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/src/ui/hooks/useProjectMutations.ts

@@ -6,160 +6,161 @@
  * - UpdateProjectContract
  * - DeleteProjectContract
  */
-import { useCallback, useState } from 'react';
+
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { useCallback, useState } from 'react';
 import type {
-  CreateProjectInput,
-  Project,
-  UpdateProjectInput,
-  SaasHandlers,
+	CreateProjectInput,
+	Project,
+	SaasHandlers,
+	UpdateProjectInput,
 } from '../../handlers/saas.handlers';
 
 export interface MutationState<T> {
-  loading: boolean;
-  error: Error | null;
-  data: T | null;
+	loading: boolean;
+	error: Error | null;
+	data: T | null;
 }
 
 export interface UseProjectMutationsOptions {
-  onSuccess?: () => void;
-  onError?: (error: Error) => void;
+	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,
-  };
+	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

package/src/ui/index.ts

@@ -1,18 +1,14 @@
 // 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';
-
+// Modals
+export * from './modals';
 // Overlays
 export * from './overlays';
+// Renderers
+export * from './renderers';
+export * from './SaasDashboard';
+// Standalone components
+export * from './SaasProjectList';
+export * from './SaasSettingsPanel';

package/src/ui/modals/CreateProjectModal.tsx

@@ -1,176 +1,176 @@
 'use client';
 
+import { Button, Input } from '@contractspec/lib.design-system';
 /**
  * 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';
+	name: string;
+	description?: string;
+	tier: 'FREE' | 'PRO' | 'ENTERPRISE';
 }
 
 interface CreateProjectModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (input: CreateProjectInput) => Promise<void>;
-  isLoading?: boolean;
+	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' },
+	{ value: 'FREE', label: 'Free' },
+	{ value: 'PRO', label: 'Pro' },
+	{ value: 'ENTERPRISE', label: 'Enterprise' },
 ];
 
 export function CreateProjectModal({
-  isOpen,
-  onClose,
-  onSubmit,
-  isLoading = false,
+	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>
-  );
+	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="absolute inset-0 bg-background/80 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="relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl">
+				<h2 className="mb-4 font-semibold text-xl">Create New Project</h2>
+
+				<form onSubmit={handleSubmit} className="space-y-4">
+					{/* Project Name */}
+					<div>
+						<label
+							htmlFor="project-name"
+							className="mb-1 block font-medium text-muted-foreground text-sm"
+						>
+							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="mb-1 block font-medium text-muted-foreground text-sm"
+						>
+							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="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+						/>
+					</div>
+
+					{/* Tier */}
+					<div>
+						<label
+							htmlFor="project-tier"
+							className="mb-1 block font-medium text-muted-foreground text-sm"
+						>
+							Tier
+						</label>
+						<select
+							id="project-tier"
+							value={tier}
+							onChange={(e) =>
+								setTier(e.target.value as CreateProjectInput['tier'])
+							}
+							disabled={isLoading}
+							className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+						>
+							{TIERS.map((t) => (
+								<option key={t.value} value={t.value}>
+									{t.label}
+								</option>
+							))}
+						</select>
+					</div>
+
+					{/* Error Message */}
+					{error && (
+						<div className="rounded-md bg-destructive/10 p-3 text-destructive 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>
+	);
 }