@questpie/admin 0.0.1

package/src/views/collection/collection-form.tsx

@@ -0,0 +1,186 @@
+import React from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import type { Questpie } from "questpie";
+import type { QuestpieClient } from "questpie/client";
+import {
+	useCollection,
+	useCollectionItemById,
+} from "../../hooks/use-collection-db";
+import { Button } from "../../components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "../../components/ui/card";
+
+/**
+ * Collection item type helper
+ */
+type CollectionItem<
+	T extends Questpie<any>,
+	K extends keyof QuestpieClient<T>["collections"],
+> = Awaited<ReturnType<QuestpieClient<T>["collections"][K]["find"]>> extends {
+	docs: Array<infer TItem>;
+}
+	? TItem
+	: never;
+
+/**
+ * CollectionForm props
+ */
+export type CollectionFormProps<
+	T extends Questpie<any>,
+	K extends keyof QuestpieClient<T>["collections"],
+> = {
+	/**
+	 * Collection name
+	 */
+	collection: K;
+
+	/**
+	 * Item ID (for edit mode)
+	 */
+	id?: string;
+
+	/**
+	 * Default values (for create mode)
+	 */
+	defaultValues?: Partial<CollectionItem<T, K>>;
+
+	/**
+	 * Custom field renderer
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * On submit success callback
+	 */
+	onSuccess?: (item: CollectionItem<T, K>) => void;
+
+	/**
+	 * On cancel callback
+	 */
+	onCancel?: () => void;
+
+	/**
+	 * Form title
+	 */
+	title?: string;
+
+	/**
+	 * Header actions (e.g. locale switcher)
+	 */
+	headerActions?: React.ReactNode;
+
+	/**
+	 * Submit button text
+	 */
+	submitText?: string;
+
+	/**
+	 * Cancel button text
+	 */
+	cancelText?: string;
+};
+
+/**
+ * CollectionForm - Form wrapper for CMS collections
+ * Uses React Hook Form + TanStack DB Collection for optimistic updates
+ *
+ * @example
+ * ```tsx
+ * import { CollectionForm } from '@questpie/admin/views'
+ * import type { cms } from './server/cms'
+ *
+ * function PostForm({ id }: { id?: string }) {
+ *   return (
+ *     <CollectionForm<typeof cms, 'posts'>
+ *       collection="posts"
+ *       id={id}
+ *       title={id ? 'Edit Post' : 'Create Post'}
+ *       onSuccess={() => router.push('/posts')}
+ *     >
+ *       <FormField name="title" label="Title" />
+ *       <FormField name="content" label="Content" type="textarea" />
+ *     </CollectionForm>
+ *   )
+ * }
+ * ```
+ */
+export function CollectionForm<
+	T extends Questpie<any>,
+	K extends keyof QuestpieClient<T>["collections"],
+>({
+	collection,
+	id,
+	defaultValues,
+	children,
+	onSuccess,
+	onCancel,
+	title,
+	headerActions,
+	submitText = "Save",
+	cancelText = "Cancel",
+}: CollectionFormProps<T, K>): React.ReactElement {
+	const collectionData = useCollection<T, K>(collection);
+	// Get item from collection - useCollectionItemById returns undefined if not found
+	const item = id
+		? collectionData.toArray.find((i) => collectionData.config.getKey(i) === id)
+		: undefined;
+
+	const form = useForm({
+		defaultValues: (item ?? defaultValues ?? {}) as any,
+	});
+
+	React.useEffect(() => {
+		form.reset((item ?? defaultValues ?? {}) as any);
+	}, [form, item, defaultValues]);
+
+	const onSubmit = async (data: any) => {
+		try {
+			let result: any;
+
+			if (id) {
+				// Update existing item
+				await collectionData.update(id, data);
+				result = { ...item, ...data };
+			} else {
+				// Create new item
+				result = await collectionData.insert(data);
+			}
+
+			onSuccess?.(result);
+		} catch (error) {
+			console.error("Form submission error:", error);
+			// TODO: Show error toast
+		}
+	};
+
+	return (
+		<FormProvider {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)}>
+				<Card>
+					{(title || headerActions) && (
+						<CardHeader className="flex flex-wrap items-center justify-between gap-3">
+							{title && <CardTitle>{title}</CardTitle>}
+							{headerActions && <div>{headerActions}</div>}
+						</CardHeader>
+					)}
+					<CardContent className="space-y-4">{children}</CardContent>
+					<CardFooter className="flex justify-end gap-2">
+						{onCancel && (
+							<Button type="button" variant="outline" onClick={onCancel}>
+								{cancelText}
+							</Button>
+						)}
+						<Button type="submit" disabled={form.formState.isSubmitting}>
+							{form.formState.isSubmitting ? "Saving..." : submitText}
+						</Button>
+					</CardFooter>
+				</Card>
+			</form>
+		</FormProvider>
+	);
+}

package/src/views/collection/collection-list.tsx

@@ -0,0 +1,223 @@
+import React from "react";
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+	getSortedRowModel,
+	type SortingState,
+} from "@tanstack/react-table";
+import type { Questpie } from "questpie";
+import type { QuestpieClient } from "questpie/client";
+import { useCollection } from "../../hooks/use-collection-db";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "../../components/ui/table";
+import { Button } from "../../components/ui/button";
+
+/**
+ * Collection item type helper
+ */
+type CollectionItem<
+	T extends Questpie<any>,
+	K extends keyof QuestpieClient<T>["collections"],
+> = Awaited<ReturnType<QuestpieClient<T>["collections"][K]["find"]>> extends {
+	docs: Array<infer TItem>;
+}
+	? TItem
+	: never;
+
+/**
+ * CollectionList props
+ */
+export type CollectionListProps<
+	T extends Questpie<any>,
+	K extends keyof QuestpieClient<T>["collections"],
+> = {
+	/**
+	 * Collection name
+	 */
+	collection: K;
+
+	/**
+	 * Column definitions
+	 */
+	columns: ColumnDef<CollectionItem<T, K>>[];
+
+	/**
+	 * Base query options (filters, sorting, relations)
+	 */
+	baseFindOptions?: Parameters<QuestpieClient<T>["collections"][K]["find"]>[0];
+
+	/**
+	 * Enable realtime sync
+	 */
+	realtime?: boolean;
+
+	/**
+	 * Custom row actions
+	 */
+	rowActions?: (item: CollectionItem<T, K>) => React.ReactNode;
+
+	/**
+	 * Custom header actions
+	 */
+	headerActions?: React.ReactNode;
+
+	/**
+	 * Custom empty state
+	 */
+	emptyState?: React.ReactNode;
+
+	/**
+	 * On row click handler
+	 */
+	onRowClick?: (item: CollectionItem<T, K>) => void;
+};
+
+/**
+ * CollectionList - Table view for CMS collections
+ * Uses TanStack DB Collection for offline-first, realtime data
+ *
+ * @example
+ * ```tsx
+ * import { CollectionList } from '@questpie/admin/views'
+ * import type { cms } from './server/cms'
+ *
+ * function PostsList() {
+ *   return (
+ *     <CollectionList<typeof cms, 'posts'>
+ *       collection="posts"
+ *       columns={[
+ *         { accessorKey: 'title', header: 'Title' },
+ *         { accessorKey: 'createdAt', header: 'Created' },
+ *       ]}
+ *       realtime={true}
+ *       onRowClick={(post) => router.push(`/posts/${post.id}`)}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export function CollectionList<
+	T extends Questpie<any>,
+	K extends keyof QuestpieClient<T>["collections"],
+>({
+	collection,
+	columns,
+	baseFindOptions,
+	realtime = false,
+	rowActions,
+	headerActions,
+	emptyState,
+	onRowClick,
+}: CollectionListProps<T, K>): React.ReactElement {
+	const collectionData = useCollection<T, K>(collection, {
+		baseFindOptions,
+		realtime,
+	});
+
+	const [sorting, setSorting] = React.useState<SortingState>([]);
+
+	const items = collectionData.toArray;
+
+	const table = useReactTable({
+		data: items as any[],
+		columns: columns as ColumnDef<any>[],
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		onSortingChange: setSorting,
+		state: {
+			sorting,
+		},
+	});
+
+	return (
+		<div className="space-y-4">
+			{/* Header */}
+			{headerActions && (
+				<div className="flex items-center justify-between">
+					<div className="text-sm text-muted-foreground">
+						{items.length} items
+					</div>
+					<div>{headerActions}</div>
+				</div>
+			)}
+
+			{/* Table */}
+			<div className="rounded-md border">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<TableHead key={header.id}>
+										{header.isPlaceholder ? null : (
+											<div
+												className={
+													header.column.getCanSort()
+														? "cursor-pointer select-none flex items-center gap-2"
+														: ""
+												}
+												onClick={header.column.getToggleSortingHandler()}
+											>
+												{flexRender(
+													header.column.columnDef.header,
+													header.getContext(),
+												)}
+												{header.column.getIsSorted() && (
+													<span>
+														{header.column.getIsSorted() === "asc" ? "↑" : "↓"}
+													</span>
+												)}
+											</div>
+										)}
+									</TableHead>
+								))}
+								{rowActions && <TableHead>Actions</TableHead>}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows?.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow
+									key={row.id}
+									data-state={row.getIsSelected() && "selected"}
+									onClick={() => onRowClick?.(row.original)}
+									className={onRowClick ? "cursor-pointer" : ""}
+								>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>
+											{flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext(),
+											)}
+										</TableCell>
+									))}
+									{rowActions && (
+										<TableCell>{rowActions(row.original)}</TableCell>
+									)}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell
+									colSpan={columns.length + (rowActions ? 1 : 0)}
+									className="h-24 text-center"
+								>
+									{emptyState || "No results."}
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+		</div>
+	);
+}

package/src/views/collection/form-field.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import type { FormFieldProps } from "../../components/fields/field-types";
+import { CheckboxField } from "../../components/fields/checkbox-field";
+import { CustomField } from "../../components/fields/custom-field";
+import { DateField } from "../../components/fields/date-field";
+import { DatetimeField } from "../../components/fields/datetime-field";
+import { EmailField } from "../../components/fields/email-field";
+import { NumberField } from "../../components/fields/number-field";
+import { PasswordField } from "../../components/fields/password-field";
+import { SelectField } from "../../components/fields/select-field";
+import { SwitchField } from "../../components/fields/switch-field";
+import { TextareaField } from "../../components/fields/textarea-field";
+import { TextField } from "../../components/fields/text-field";
+
+export type { FormFieldProps } from "../../components/fields/field-types";
+
+/**
+ * FormField - Generic form field with React Hook Form integration
+ */
+export function FormField({
+	type = "text",
+	component,
+	options,
+	...baseProps
+}: FormFieldProps): React.ReactElement {
+	if (component) {
+		return <CustomField {...baseProps} component={component} />;
+	}
+
+	switch (type) {
+		case "textarea":
+			return <TextareaField {...baseProps} />;
+		case "checkbox":
+			return <CheckboxField {...baseProps} />;
+		case "switch":
+			return <SwitchField {...baseProps} />;
+		case "select":
+			return <SelectField {...baseProps} options={options} />;
+		case "number":
+			return <NumberField {...baseProps} />;
+		case "date":
+			return <DateField {...baseProps} />;
+		case "datetime":
+			return <DatetimeField {...baseProps} />;
+		case "email":
+			return <EmailField {...baseProps} />;
+		case "password":
+			return <PasswordField {...baseProps} />;
+		default:
+			return <TextField {...baseProps} />;
+	}
+}

package/src/views/collection/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Collection views - CRUD for CMS collections
+ */
+
+export { CollectionList } from "./collection-list";
+export type { CollectionListProps } from "./collection-list";
+
+export { CollectionForm } from "./collection-form";
+export type { CollectionFormProps } from "./collection-form";
+
+export { FormField } from "./form-field";
+export type { FormFieldProps } from "./form-field";
+
+export { AutoFormFields } from "./auto-form-fields";
+export type { AutoFormFieldsProps } from "./auto-form-fields";

package/src/views/common/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Common views - shared utility views
+ */
+
+export { LocaleSwitcher } from "./locale-switcher";
+
+export { VersionHistory } from "./version-history";
+export type { VersionHistoryProps } from "./version-history";

package/src/views/common/locale-switcher.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { useAdminContext } from "../../hooks/admin-provider";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+} from "../../components/ui/select";
+import { Badge } from "../../components/ui/badge";
+
+export function LocaleSwitcher() {
+	const { locale, setLocale, locales } = useAdminContext<any>();
+	const available = locales?.available ?? [];
+
+	if (!setLocale || available.length <= 1) return null;
+
+	const currentLocale = locale ?? locales?.default ?? available[0];
+
+	return (
+		<div className="flex items-center gap-2">
+			<Badge variant="outline" className="uppercase text-[10px] tracking-wide">
+				Locale
+			</Badge>
+			<Select
+				value={currentLocale}
+				onValueChange={(value) => {
+					if (value) setLocale(value);
+				}}
+			>
+				<SelectTrigger className="h-8 w-[120px]">
+					<span className="truncate">
+						{currentLocale?.toUpperCase() ?? "Locale"}
+					</span>
+				</SelectTrigger>
+				<SelectContent>
+					{available.map((code: string) => (
+						<SelectItem key={code} value={code}>
+							{code.toUpperCase()}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</div>
+	);
+}