@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/src/ui/SaasProjectList.tsx

@@ -4,110 +4,110 @@
  * SaaS Project List - Standalone project list component
  */
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
-  EmptyState,
-  LoaderBlock,
-  ErrorState,
-  Button,
+	Button,
+	EmptyState,
+	EntityCard,
+	ErrorState,
+	LoaderBlock,
+	StatCard,
+	StatCardGroup,
+	StatusChip,
 } from '@contractspec/lib.design-system';
-import { useProjectList, type Project } from './hooks/useProjectList';
+import { type Project, useProjectList } from './hooks/useProjectList';
 
 interface SaasProjectListProps {
-  onProjectClick?: (projectId: string) => void;
-  onCreateProject?: () => void;
+	onProjectClick?: (projectId: string) => void;
+	onCreateProject?: () => void;
 }
 
 function getStatusTone(
-  status: Project['status']
+	status: Project['status']
 ): 'success' | 'warning' | 'neutral' | 'danger' {
-  switch (status) {
-    case 'ACTIVE':
-      return 'success';
-    case 'DRAFT':
-      return 'neutral';
-    case 'ARCHIVED':
-      return 'danger';
-    default:
-      return 'neutral';
-  }
+	switch (status) {
+		case 'ACTIVE':
+			return 'success';
+		case 'DRAFT':
+			return 'neutral';
+		case 'ARCHIVED':
+			return 'danger';
+		default:
+			return 'neutral';
+	}
 }
 
 export function SaasProjectList({
-  onProjectClick,
-  onCreateProject,
+	onProjectClick,
+	onCreateProject,
 }: SaasProjectListProps) {
-  const { data, loading, error, stats, refetch } = useProjectList();
+	const { data, loading, error, stats, refetch } = useProjectList();
 
-  if (loading && !data) {
-    return <LoaderBlock label="Loading projects..." />;
-  }
+	if (loading && !data) {
+		return <LoaderBlock label="Loading projects..." />;
+	}
 
-  if (error) {
-    return (
-      <ErrorState
-        title="Failed to load projects"
-        description={error.message}
-        onRetry={refetch}
-        retryLabel="Retry"
-      />
-    );
-  }
+	if (error) {
+		return (
+			<ErrorState
+				title="Failed to load projects"
+				description={error.message}
+				onRetry={refetch}
+				retryLabel="Retry"
+			/>
+		);
+	}
 
-  if (!data?.items.length) {
-    return (
-      <EmptyState
-        title="No projects found"
-        description="Create your first project to get started."
-        primaryAction={
-          onCreateProject ? (
-            <Button onPress={onCreateProject}>Create Project</Button>
-          ) : undefined
-        }
-      />
-    );
-  }
+	if (!data?.items.length) {
+		return (
+			<EmptyState
+				title="No projects found"
+				description="Create your first project to get started."
+				primaryAction={
+					onCreateProject ? (
+						<Button onPress={onCreateProject}>Create Project</Button>
+					) : undefined
+				}
+			/>
+		);
+	}
 
-  return (
-    <div className="space-y-6">
-      {stats && (
-        <StatCardGroup>
-          <StatCard label="Total Projects" value={stats.total.toString()} />
-          <StatCard label="Active" value={stats.activeCount.toString()} />
-          <StatCard label="Draft" value={stats.draftCount.toString()} />
-        </StatCardGroup>
-      )}
+	return (
+		<div className="space-y-6">
+			{stats && (
+				<StatCardGroup>
+					<StatCard label="Total Projects" value={stats.total.toString()} />
+					<StatCard label="Active" value={stats.activeCount.toString()} />
+					<StatCard label="Draft" value={stats.draftCount.toString()} />
+				</StatCardGroup>
+			)}
 
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {data.items.map((project: Project) => (
-          <EntityCard
-            key={project.id}
-            cardTitle={project.name}
-            cardSubtitle={project.tier}
-            meta={
-              <p className="text-muted-foreground text-sm">
-                {project.description}
-              </p>
-            }
-            chips={
-              <StatusChip
-                tone={getStatusTone(project.status)}
-                label={project.status}
-              />
-            }
-            footer={
-              <span className="text-muted-foreground text-xs">
-                {project.updatedAt.toLocaleDateString()}
-              </span>
-            }
-            onClick={
-              onProjectClick ? () => onProjectClick(project.id) : undefined
-            }
-          />
-        ))}
-      </div>
-    </div>
-  );
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+				{data.items.map((project: Project) => (
+					<EntityCard
+						key={project.id}
+						cardTitle={project.name}
+						cardSubtitle={project.tier}
+						meta={
+							<p className="text-muted-foreground text-sm">
+								{project.description}
+							</p>
+						}
+						chips={
+							<StatusChip
+								tone={getStatusTone(project.status)}
+								label={project.status}
+							/>
+						}
+						footer={
+							<span className="text-muted-foreground text-xs">
+								{project.updatedAt.toLocaleDateString()}
+							</span>
+						}
+						onClick={
+							onProjectClick ? () => onProjectClick(project.id) : undefined
+						}
+					/>
+				))}
+			</div>
+		</div>
+	);
 }

package/src/ui/SaasSettingsPanel.tsx

@@ -1,96 +1,96 @@
 'use client';
 
+import { Button } from '@contractspec/lib.design-system';
 /**
  * SaaS Settings Panel - Organization and user settings
  */
 import { useState } from 'react';
-import { Button } from '@contractspec/lib.design-system';
 
 export function SaasSettingsPanel() {
-  const [orgName, setOrgName] = useState('Demo Organization');
-  const [timezone, setTimezone] = useState('UTC');
+	const [orgName, setOrgName] = useState('Demo Organization');
+	const [timezone, setTimezone] = useState('UTC');
 
-  return (
-    <div className="space-y-6">
-      <div className="border-border bg-card rounded-xl border p-6">
-        <h3 className="mb-4 text-lg font-semibold">Organization Settings</h3>
-        <div className="space-y-4">
-          <div>
-            <label
-              htmlFor="setting-org-name"
-              className="block text-sm font-medium"
-            >
-              Organization Name
-            </label>
-            <input
-              id="setting-org-name"
-              type="text"
-              value={orgName}
-              onChange={(e) => setOrgName(e.target.value)}
-              className="border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
-            />
-          </div>
-          <div>
-            <label
-              htmlFor="setting-timezone"
-              className="block text-sm font-medium"
-            >
-              Default Timezone
-            </label>
-            <select
-              id="setting-timezone"
-              value={timezone}
-              onChange={(e) => setTimezone(e.target.value)}
-              className="border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
-            >
-              <option value="UTC">UTC</option>
-              <option value="America/New_York">America/New_York</option>
-              <option value="Europe/London">Europe/London</option>
-              <option value="Asia/Tokyo">Asia/Tokyo</option>
-            </select>
-          </div>
-        </div>
-        <div className="mt-6">
-          <Button variant="default">Save Changes</Button>
-        </div>
-      </div>
+	return (
+		<div className="space-y-6">
+			<div className="rounded-xl border border-border bg-card p-6">
+				<h3 className="mb-4 font-semibold text-lg">Organization Settings</h3>
+				<div className="space-y-4">
+					<div>
+						<label
+							htmlFor="setting-org-name"
+							className="block font-medium text-sm"
+						>
+							Organization Name
+						</label>
+						<input
+							id="setting-org-name"
+							type="text"
+							value={orgName}
+							onChange={(e) => setOrgName(e.target.value)}
+							className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
+						/>
+					</div>
+					<div>
+						<label
+							htmlFor="setting-timezone"
+							className="block font-medium text-sm"
+						>
+							Default Timezone
+						</label>
+						<select
+							id="setting-timezone"
+							value={timezone}
+							onChange={(e) => setTimezone(e.target.value)}
+							className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
+						>
+							<option value="UTC">UTC</option>
+							<option value="America/New_York">America/New_York</option>
+							<option value="Europe/London">Europe/London</option>
+							<option value="Asia/Tokyo">Asia/Tokyo</option>
+						</select>
+					</div>
+				</div>
+				<div className="mt-6">
+					<Button variant="default">Save Changes</Button>
+				</div>
+			</div>
 
-      <div className="border-border bg-card rounded-xl border p-6">
-        <h3 className="mb-4 text-lg font-semibold">Notifications</h3>
-        <div className="space-y-3">
-          {[
-            { label: 'Email notifications', defaultChecked: true },
-            { label: 'Usage alerts', defaultChecked: true },
-            { label: 'Weekly digest', defaultChecked: false },
-          ].map((item) => (
-            <label key={item.label} className="flex items-center gap-3">
-              <input
-                type="checkbox"
-                defaultChecked={item.defaultChecked}
-                className="border-input h-4 w-4 rounded"
-              />
-              <span className="text-sm">{item.label}</span>
-            </label>
-          ))}
-        </div>
-      </div>
+			<div className="rounded-xl border border-border bg-card p-6">
+				<h3 className="mb-4 font-semibold text-lg">Notifications</h3>
+				<div className="space-y-3">
+					{[
+						{ label: 'Email notifications', defaultChecked: true },
+						{ label: 'Usage alerts', defaultChecked: true },
+						{ label: 'Weekly digest', defaultChecked: false },
+					].map((item) => (
+						<label key={item.label} className="flex items-center gap-3">
+							<input
+								type="checkbox"
+								defaultChecked={item.defaultChecked}
+								className="h-4 w-4 rounded border-input"
+							/>
+							<span className="text-sm">{item.label}</span>
+						</label>
+					))}
+				</div>
+			</div>
 
-      <div className="rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950/20">
-        <h3 className="mb-2 text-lg font-semibold text-red-700 dark:text-red-400">
-          Danger Zone
-        </h3>
-        <p className="mb-4 text-sm text-red-600 dark:text-red-300">
-          These actions are irreversible. Please proceed with caution.
-        </p>
-        <div className="flex gap-3">
-          <Button variant="secondary" size="sm">
-            Export Data
-          </Button>
-          <Button variant="secondary" size="sm">
-            Delete Organization
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
+			<div className="rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950/20">
+				<h3 className="mb-2 font-semibold text-lg text-red-700 dark:text-red-400">
+					Danger Zone
+				</h3>
+				<p className="mb-4 text-red-600 text-sm dark:text-red-300">
+					These actions are irreversible. Please proceed with caution.
+				</p>
+				<div className="flex gap-3">
+					<Button variant="secondary" size="sm">
+						Export Data
+					</Button>
+					<Button variant="secondary" size="sm">
+						Delete Organization
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/ui/hooks/index.ts

@@ -1,9 +1,9 @@
 'use client';
 
-export { useProjectList, type UseProjectListOptions } from './useProjectList';
+export { type UseProjectListOptions, useProjectList } from './useProjectList';
 export {
-  useProjectMutations,
-  type UseProjectMutationsOptions,
+	type UseProjectMutationsOptions,
+	useProjectMutations,
 } from './useProjectMutations';
 
 // Note: For project types (CreateProjectInput, UpdateProjectInput, Project), import directly from:

package/src/ui/hooks/useProjectList.ts

@@ -3,12 +3,13 @@
  *
  * Uses runtime-local database-backed handlers.
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type {
-  Project as RuntimeProject,
-  Subscription as RuntimeSubscription,
-  SaasHandlers,
+	Project as RuntimeProject,
+	Subscription as RuntimeSubscription,
+	SaasHandlers,
 } from '../../handlers/saas.handlers';
 
 // Re-export types for convenience
@@ -16,80 +17,80 @@ export type Project = RuntimeProject;
 export type Subscription = RuntimeSubscription;
 
 export interface ListProjectsOutput {
-  items: Project[];
-  total: number;
+	items: Project[];
+	total: number;
 }
 
 export interface UseProjectListOptions {
-  status?: 'DRAFT' | 'ACTIVE' | 'ARCHIVED' | 'all';
-  search?: string;
-  limit?: number;
+	status?: 'DRAFT' | 'ACTIVE' | 'ARCHIVED' | 'all';
+	search?: string;
+	limit?: number;
 }
 
 export function useProjectList(options: UseProjectListOptions = {}) {
-  const { handlers, projectId } = useTemplateRuntime<{ saas: SaasHandlers }>();
-  const { saas } = handlers;
+	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 [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);
+	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]);
+		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]);
+	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]);
+	// 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),
-  };
+	return {
+		data,
+		subscription,
+		loading,
+		error,
+		stats,
+		page,
+		refetch: fetchData,
+		nextPage: () => setPage((p) => p + 1),
+		prevPage: () => page > 1 && setPage((p) => p - 1),
+	};
 }