@questpie/admin 0.0.1 → 1.0.1

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

@@ -1,186 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,8 +0,0 @@
-/**
- * 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

@@ -1,45 +0,0 @@
-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>
-	);
-}