@questpie/admin 0.0.1 → 1.0.1

package/src/views/common/version-history.tsx

@@ -1,406 +0,0 @@
-/**
- * VersionHistory Component
- *
- * Displays version history and audit log for a collection item
- * - Shows all versions with timestamps
- * - Displays who made changes
- * - Allows comparing versions
- * - Shows diff between versions
- * - Ability to restore previous versions
- */
-
-import * as React from "react";
-import { useQuery } from "@tanstack/react-query";
-import {
-	ClockCounterClockwise,
-	User,
-	Clock,
-	CaretDown,
-	CaretRight,
-	ArrowCounterClockwise,
-} from "@phosphor-icons/react";
-import { Button } from "../../components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "../../components/ui/card";
-import { Badge } from "../../components/ui/badge";
-import { Separator } from "../../components/ui/separator";
-import { Spinner } from "../../components/ui/spinner";
-import { useAdminContext } from "../../hooks/admin-provider";
-import type { Questpie } from "questpie";
-
-export interface VersionHistoryProps<T extends Questpie<any>> {
-	/**
-	 * Collection name
-	 */
-	collection: string;
-
-	/**
-	 * Item ID
-	 */
-	itemId: string;
-
-	/**
-	 * Show restore buttons
-	 */
-	allowRestore?: boolean;
-
-	/**
-	 * Callback when version is restored
-	 */
-	onRestore?: (versionId: string) => void;
-
-	/**
-	 * Custom render for version data
-	 */
-	renderVersion?: (version: any) => React.ReactNode;
-
-	/**
-	 * Show full diff or summary
-	 */
-	showFullDiff?: boolean;
-}
-
-interface Version {
-	id: string;
-	versionNumber: number;
-	createdAt: string;
-	createdBy?: {
-		id: string;
-		name?: string;
-		email?: string;
-	};
-	changes?: {
-		field: string;
-		oldValue: any;
-		newValue: any;
-	}[];
-	action: "created" | "updated" | "deleted" | "restored";
-	data: Record<string, any>;
-}
-
-export function VersionHistory<T extends Questpie<any>>({
-	collection,
-	itemId,
-	allowRestore = false,
-	onRestore,
-	renderVersion,
-	showFullDiff = false,
-}: VersionHistoryProps<T>) {
-	const { client, locale } = useAdminContext<T>();
-	const localeKey = locale ?? "default";
-	const [expandedVersions, setExpandedVersions] = React.useState<Set<string>>(
-		new Set(),
-	);
-
-	// Fetch version history
-	const {
-		data: versions,
-		isLoading,
-		error,
-	} = useQuery({
-		queryKey: ["version-history", collection, itemId, localeKey],
-		queryFn: async () => {
-			// TODO: Implement actual version history endpoint
-			// For now, return mock data structure
-			// const result = await client.collections[collection].getVersionHistory(itemId);
-			// return result;
-
-			// Mock data for demonstration
-			return [
-				{
-					id: "v3",
-					versionNumber: 3,
-					createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
-					createdBy: {
-						id: "user1",
-						name: "John Doe",
-						email: "john@example.com",
-					},
-					action: "updated",
-					changes: [
-						{ field: "status", oldValue: "pending", newValue: "confirmed" },
-					],
-					data: {},
-				},
-				{
-					id: "v2",
-					versionNumber: 2,
-					createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
-					createdBy: {
-						id: "user2",
-						name: "Jane Smith",
-						email: "jane@example.com",
-					},
-					action: "updated",
-					changes: [
-						{
-							field: "scheduledAt",
-							oldValue: "2025-01-15T10:00:00",
-							newValue: "2025-01-20T14:00:00",
-						},
-					],
-					data: {},
-				},
-				{
-					id: "v1",
-					versionNumber: 1,
-					createdAt: new Date(
-						Date.now() - 7 * 24 * 60 * 60 * 1000,
-					).toISOString(),
-					createdBy: {
-						id: "user1",
-						name: "John Doe",
-						email: "john@example.com",
-					},
-					action: "created",
-					changes: [],
-					data: {},
-				},
-			] as Version[];
-		},
-	});
-
-	const toggleVersion = (versionId: string) => {
-		setExpandedVersions((prev) => {
-			const next = new Set(prev);
-			if (next.has(versionId)) {
-				next.delete(versionId);
-			} else {
-				next.add(versionId);
-			}
-			return next;
-		});
-	};
-
-	const handleRestore = (versionId: string) => {
-		onRestore?.(versionId);
-	};
-
-	const formatDate = (dateString: 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} minute${diffMins > 1 ? "s" : ""} ago`;
-		if (diffHours < 24)
-			return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
-		if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
-		return date.toLocaleDateString();
-	};
-
-	const getActionBadge = (action: Version["action"]) => {
-		const variants: Record<Version["action"], { variant: any; label: string }> =
-			{
-				created: { variant: "default", label: "Created" },
-				updated: { variant: "secondary", label: "Updated" },
-				deleted: { variant: "destructive", label: "Deleted" },
-				restored: { variant: "outline", label: "Restored" },
-			};
-
-		const config = variants[action];
-		return <Badge variant={config.variant}>{config.label}</Badge>;
-	};
-
-	const formatValue = (value: any): string => {
-		if (value === null || value === undefined) return "—";
-		if (typeof value === "boolean") return value ? "Yes" : "No";
-		if (typeof value === "object") return JSON.stringify(value);
-		return String(value);
-	};
-
-	if (isLoading) {
-		return (
-			<Card>
-				<CardHeader>
-					<CardTitle className="flex items-center gap-2">
-						<ClockCounterClockwise className="h-5 w-5" />
-						Version History
-					</CardTitle>
-				</CardHeader>
-				<CardContent className="flex items-center justify-center p-8">
-					<Spinner className="h-6 w-6" />
-				</CardContent>
-			</Card>
-		);
-	}
-
-	if (error) {
-		return (
-			<Card>
-				<CardHeader>
-					<CardTitle className="flex items-center gap-2">
-						<ClockCounterClockwise className="h-5 w-5" />
-						Version History
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<p className="text-sm text-destructive">
-						Failed to load version history:{" "}
-						{error instanceof Error ? error.message : "Unknown error"}
-					</p>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	if (!versions || versions.length === 0) {
-		return (
-			<Card>
-				<CardHeader>
-					<CardTitle className="flex items-center gap-2">
-						<ClockCounterClockwise className="h-5 w-5" />
-						Version History
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<p className="text-sm text-muted-foreground">
-						No version history available
-					</p>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle className="flex items-center gap-2">
-					<ClockCounterClockwise className="h-5 w-5" />
-					Version History
-				</CardTitle>
-				<CardDescription>
-					{versions.length} version{versions.length !== 1 ? "s" : ""}
-				</CardDescription>
-			</CardHeader>
-			<CardContent className="space-y-4">
-				{versions.map((version, index) => {
-					const isExpanded = expandedVersions.has(version.id);
-					const isLatest = index === 0;
-
-					return (
-						<div key={version.id}>
-							{index > 0 && <Separator className="my-4" />}
-
-							<div className="space-y-2">
-								<div className="flex items-start gap-3">
-									<Button
-										variant="ghost"
-										size="icon"
-										className="h-6 w-6 shrink-0"
-										onClick={() => toggleVersion(version.id)}
-									>
-										{isExpanded ? (
-											<CaretDown className="h-4 w-4" />
-										) : (
-											<CaretRight className="h-4 w-4" />
-										)}
-									</Button>
-
-									<div className="flex-1 space-y-1">
-										{/* Version Header */}
-										<div className="flex items-center gap-2">
-											<span className="text-sm font-medium">
-												Version {version.versionNumber}
-											</span>
-											{getActionBadge(version.action)}
-											{isLatest && <Badge variant="outline">Current</Badge>}
-										</div>
-
-										{/* Metadata */}
-										<div className="flex items-center gap-4 text-xs text-muted-foreground">
-											<div className="flex items-center gap-1">
-												<Clock className="h-3 w-3" />
-												{formatDate(version.createdAt)}
-											</div>
-											{version.createdBy && (
-												<div className="flex items-center gap-1">
-													<User className="h-3 w-3" />
-													{version.createdBy.name || version.createdBy.email}
-												</div>
-											)}
-										</div>
-
-										{/* Changes Summary */}
-										{version.changes &&
-											version.changes.length > 0 &&
-											!isExpanded && (
-												<p className="text-xs text-muted-foreground">
-													{version.changes.length} field
-													{version.changes.length !== 1 ? "s" : ""} changed
-												</p>
-											)}
-
-										{/* Expanded Changes */}
-										{isExpanded && (
-											<div className="mt-3 space-y-2">
-												{version.changes && version.changes.length > 0 ? (
-													<div className="rounded-lg border bg-muted/50 p-3 space-y-2">
-														{version.changes.map((change, changeIndex) => (
-															<div key={changeIndex} className="text-xs">
-																<div className="font-medium text-foreground mb-1">
-																	{change.field}
-																</div>
-																<div className="grid grid-cols-2 gap-2">
-																	<div>
-																		<div className="text-muted-foreground">
-																			Old value:
-																		</div>
-																		<div className="font-mono rounded bg-background p-1 mt-1">
-																			{formatValue(change.oldValue)}
-																		</div>
-																	</div>
-																	<div>
-																		<div className="text-muted-foreground">
-																			New value:
-																		</div>
-																		<div className="font-mono rounded bg-background p-1 mt-1">
-																			{formatValue(change.newValue)}
-																		</div>
-																	</div>
-																</div>
-															</div>
-														))}
-													</div>
-												) : (
-													<p className="text-xs text-muted-foreground">
-														No changes recorded
-													</p>
-												)}
-
-												{/* Custom Version Render */}
-												{renderVersion && renderVersion(version)}
-
-												{/* Restore Button */}
-												{allowRestore && !isLatest && (
-													<Button
-														variant="outline"
-														size="sm"
-														onClick={() => handleRestore(version.id)}
-														className="mt-2"
-													>
-														<ArrowCounterClockwise className="mr-2 h-3 w-3" />
-														Restore this version
-													</Button>
-												)}
-											</div>
-										)}
-									</div>
-								</div>
-							</div>
-						</div>
-					);
-				})}
-			</CardContent>
-		</Card>
-	);
-}

package/src/views/index.ts

@@ -1,25 +0,0 @@
-/**
- * @questpie/admin Views
- *
- * Full-page and section-level view components.
- * Views are smart components that handle routing, data fetching, and state.
- *
- * Architecture:
- * - ui/        - Headless/styled primitives (Button, Card, Input)
- * - primitives/ - Generic input wrappers with callback API
- * - fields/    - react-hook-form connected field components
- * - views/     - Route-level components with business logic (this directory)
- * - features/  - Complex feature modules (Puck editor, media library)
- */
-
-// Auth views
-export * from "./auth";
-
-// Layout views
-export * from "./layout";
-
-// Collection views
-export * from "./collection";
-
-// Common/utility views
-export * from "./common";

package/src/views/layout/admin-layout.tsx

@@ -1,117 +0,0 @@
-/**
- * AdminLayout Component
- *
- * Complete admin layout generated from config
- * - Sidebar navigation
- * - Main content area
- * - Optional header/footer
- */
-
-import * as React from "react";
-import { cn } from "../../lib/utils";
-import { AdminSidebar, type AdminSidebarProps } from "./admin-sidebar";
-
-export interface AdminLayoutProps {
-	/**
-	 * Admin configuration
-	 */
-	config: AdminSidebarProps["config"] & {
-		app?: {
-			header?: {
-				show?: boolean;
-				component?: React.ComponentType;
-			};
-			footer?: {
-				show?: boolean;
-				component?: React.ComponentType;
-			};
-		};
-	};
-
-	/**
-	 * Current active route
-	 */
-	activeRoute?: string;
-
-	/**
-	 * Link component (router-specific)
-	 */
-	LinkComponent: AdminSidebarProps["LinkComponent"];
-
-	/**
-	 * Main content to render
-	 */
-	children: React.ReactNode;
-
-	/**
-	 * Custom layout className
-	 */
-	className?: string;
-
-	/**
-	 * Custom sidebar props
-	 */
-	sidebarProps?: Partial<AdminSidebarProps>;
-
-	/**
-	 * Custom header content
-	 */
-	renderHeader?: () => React.ReactNode;
-
-	/**
-	 * Custom footer content
-	 */
-	renderFooter?: () => React.ReactNode;
-}
-
-export function AdminLayout({
-	config,
-	activeRoute,
-	LinkComponent,
-	children,
-	className,
-	sidebarProps,
-	renderHeader,
-	renderFooter,
-}: AdminLayoutProps): React.ReactElement {
-	const showHeader = config.app?.header?.show ?? false;
-	const showFooter = config.app?.footer?.show ?? false;
-	const HeaderComponent = config.app?.header?.component;
-	const FooterComponent = config.app?.footer?.component;
-
-	return (
-		<div className={cn("flex h-screen flex-col", className)}>
-			{/* Header (optional) */}
-			{showHeader && (
-				<header className="border-b">
-					{renderHeader
-						? renderHeader()
-						: HeaderComponent && <HeaderComponent />}
-				</header>
-			)}
-
-			{/* Main Layout */}
-			<div className="flex flex-1 overflow-hidden">
-				{/* Sidebar */}
-				<AdminSidebar
-					config={config}
-					activeRoute={activeRoute}
-					LinkComponent={LinkComponent}
-					{...sidebarProps}
-				/>
-
-				{/* Main Content */}
-				<main className="flex-1 overflow-auto">{children}</main>
-			</div>
-
-			{/* Footer (optional) */}
-			{showFooter && (
-				<footer className="border-t">
-					{renderFooter
-						? renderFooter()
-						: FooterComponent && <FooterComponent />}
-				</footer>
-			)}
-		</div>
-	);
-}