@questpie/admin 0.0.1 → 1.0.1

package/src/__tests__/vitest.d.ts

@@ -1,9 +0,0 @@
-import "vitest";
-import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
-
-declare module "vitest" {
-	interface Assertion<T = any>
-		extends TestingLibraryMatchers<typeof expect.stringContaining, T> {}
-	interface AsymmetricMatchersContaining
-		extends TestingLibraryMatchers<unknown, unknown> {}
-}

package/src/components/admin-app.tsx

@@ -1,221 +0,0 @@
-/**
- * AdminApp Component
- *
- * MAIN ENTRY POINT - Mount this and you have a complete admin!
- *
- * Minimal usage:
- *   <AdminApp client={cmsClient} />
- *
- * Everything else is OPTIONAL customization.
- */
-
-import * as React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import type { Questpie } from "questpie";
-import type { QuestpieClient } from "questpie/client";
-import { AdminProvider } from "../hooks/admin-provider";
-import { AdminLayout } from "../views/layout/admin-layout";
-import { AdminRouter } from "../views/layout/admin-router";
-import type { ComponentRegistry } from "../config/component-registry";
-import { mergeComponentRegistry } from "../config/component-registry";
-
-export interface AdminAppProps<T extends Questpie<any>> {
-	/**
-	 * CMS client - THE ONLY REQUIRED PROP!
-	 */
-	client: QuestpieClient<T>;
-
-	/**
-	 * Admin config (OPTIONAL)
-	 * If not provided, auto-generates from CMS schema
-	 */
-	config?: {
-		app?: {
-			brand?: {
-				name?: string;
-				logo?: React.ComponentType;
-				homeRoute?: string;
-			};
-			locales?: {
-				default: string;
-				available: string[];
-			};
-			header?: {
-				show?: boolean;
-				component?: React.ComponentType;
-			};
-			footer?: {
-				show?: boolean;
-				component?: React.ComponentType;
-			};
-			debug?: {
-				showQueryDevtools?: boolean;
-				showRouterDevtools?: boolean;
-			};
-		};
-		collections?: Record<string, any>;
-		globals?: Record<string, any>;
-		pages?: Record<string, any>;
-	};
-
-	/**
-	 * Component registry (OPTIONAL)
-	 * Custom field components, layouts, etc.
-	 */
-	registry?: Partial<ComponentRegistry>;
-
-	/**
-	 * QueryClient instance (OPTIONAL)
-	 * If not provided, creates default
-	 */
-	queryClient?: QueryClient;
-
-	/**
-	 * Router integration (framework-specific)
-	 */
-	router: {
-		/**
-		 * Link component from your router
-		 * Example: from TanStack Router, Next.js, React Router
-		 */
-		LinkComponent: React.ComponentType<{
-			to: string;
-			className?: string;
-			children: React.ReactNode;
-			activeProps?: { className?: string };
-		}>;
-
-		/**
-		 * Current route path
-		 */
-		currentPath: string;
-
-		/**
-		 * Route segments after /admin
-		 * Example: for /admin/barbers/123 -> ["barbers", "123"]
-		 */
-		segments: string[];
-
-		/**
-		 * Navigate function
-		 */
-		navigate: (path: string) => void;
-	};
-
-	/**
-	 * Base path for admin routes (OPTIONAL)
-	 * Default: "/admin"
-	 */
-	basePath?: string;
-
-	/**
-	 * Custom dashboard component (OPTIONAL)
-	 */
-	DashboardComponent?: React.ComponentType;
-
-	/**
-	 * Custom collection components (OPTIONAL)
-	 */
-	collectionComponents?: Record<
-		string,
-		{
-			List?: React.ComponentType;
-			Form?: React.ComponentType;
-		}
-	>;
-
-	/**
-	 * Render custom form fields (OPTIONAL - will be replaced by AutoFormFields)
-	 */
-	renderFormFields?: (collection: string) => React.ReactNode;
-}
-
-/**
- * Default QueryClient configuration
- */
-function createDefaultQueryClient() {
-	return new QueryClient({
-		defaultOptions: {
-			queries: {
-				staleTime: 60 * 1000, // 1 minute
-				refetchOnWindowFocus: false,
-			},
-		},
-	});
-}
-
-/**
- * AdminApp Component
- *
- * ONE COMPONENT TO RULE THEM ALL!
- */
-export function AdminApp<T extends Questpie<any>>({
-	client,
-	config,
-	registry,
-	queryClient,
-	router,
-	basePath = "/admin",
-	DashboardComponent,
-	collectionComponents,
-	renderFormFields,
-}: AdminAppProps<T>): React.ReactElement {
-	// Create or use provided QueryClient
-	const [defaultQueryClient] = React.useState(
-		() => queryClient ?? createDefaultQueryClient(),
-	);
-
-	// Merge component registry
-	const mergedRegistry = React.useMemo(
-		() => mergeComponentRegistry(registry),
-		[registry],
-	);
-
-	// Auto-generate config from CMS if not provided
-	const finalConfig = React.useMemo(() => {
-		if (config) return config;
-
-		// TODO: Auto-generate from CMS schema
-		// For now, return minimal config
-		return {
-			app: {
-				brand: {
-					name: "Admin",
-				},
-			},
-			collections: {},
-		};
-	}, [config]);
-
-	return (
-		<QueryClientProvider client={defaultQueryClient}>
-			<AdminProvider
-				client={client}
-				queryClient={defaultQueryClient}
-				locales={finalConfig.app?.locales}
-			>
-				<AdminLayout
-					config={finalConfig}
-					activeRoute={router.currentPath}
-					LinkComponent={router.LinkComponent}
-				>
-					<AdminRouter
-						config={finalConfig}
-						segments={router.segments}
-						navigate={router.navigate}
-						DashboardComponent={DashboardComponent}
-						collectionComponents={collectionComponents}
-						renderFormFields={renderFormFields}
-						registry={mergedRegistry}
-					/>
-				</AdminLayout>
-			</AdminProvider>
-
-			{/* Optional: Query Devtools */}
-			{config?.app?.debug?.showQueryDevtools && (
-				// TODO: Add ReactQueryDevtools
-				<div />
-			)}
-		</QueryClientProvider>
-	);
-}

package/src/components/fields/array-field.tsx

@@ -1,237 +0,0 @@
-/**
- * ArrayField Component
- *
- * Handles arrays of primitive values with optional ordering.
- */
-
-import * as React from "react";
-import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
-import { CaretDown, CaretUp, Plus, Trash } from "@phosphor-icons/react";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Textarea } from "../ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select";
-import { LocaleBadge } from "./locale-badge";
-import type { FieldComponentProps } from "../../config/component-registry";
-
-export type ArrayFieldItemType =
-	| "text"
-	| "number"
-	| "email"
-	| "textarea"
-	| "select";
-
-export interface ArrayFieldProps extends FieldComponentProps<any[]> {
-	itemType?: ArrayFieldItemType;
-	options?: Array<{ label: string; value: any }>;
-	orderable?: boolean;
-	minItems?: number;
-	maxItems?: number;
-}
-
-export function ArrayField({
-	name,
-	value,
-	label,
-	description,
-	placeholder,
-	required,
-	disabled,
-	readOnly,
-	error,
-	localized,
-	locale,
-	itemType = "text",
-	options,
-	orderable = false,
-	minItems,
-	maxItems,
-}: ArrayFieldProps) {
-	const form = useFormContext();
-	const { control } = form;
-	const { fields, append, remove, move } = useFieldArray({ control, name });
-	const values = (useWatch({ control, name }) as any[] | undefined) ?? value;
-
-	const canAddMore = !maxItems || fields.length < maxItems;
-	const canRemove = !readOnly && (!minItems || fields.length > minItems);
-
-	const createEmptyItem = React.useCallback(() => {
-		if (itemType === "number") return undefined;
-		if (itemType === "select") {
-			return options?.[0]?.value ?? "";
-		}
-		return "";
-	}, [itemType, options]);
-
-	const handleAdd = () => {
-		if (disabled || readOnly || !canAddMore) return;
-		append(createEmptyItem());
-	};
-
-	const handleRemove = (index: number) => {
-		if (!canRemove) return;
-		remove(index);
-	};
-
-	const handleMove = (from: number, to: number) => {
-		if (to < 0 || to >= fields.length) return;
-		move(from, to);
-	};
-
-	const renderItemInput = (index: number) => {
-		const itemName = `${name}.${index}`;
-		const itemValue = values?.[index];
-		const itemPlaceholder = placeholder || `Item ${index + 1}`;
-
-		if (itemType === "textarea") {
-			return (
-				<Textarea
-					id={itemName}
-					placeholder={itemPlaceholder}
-					disabled={disabled || readOnly}
-					defaultValue={itemValue ?? ""}
-					{...form.register(itemName)}
-				/>
-			);
-		}
-
-		if (itemType === "select") {
-			return (
-				<Select
-					value={itemValue ?? ""}
-					onValueChange={(value) =>
-						form.setValue(itemName, value, {
-							shouldDirty: true,
-							shouldTouch: true,
-						})
-					}
-					disabled={disabled || readOnly}
-				>
-					<SelectTrigger id={itemName}>
-						<span className="truncate">
-							{options?.find((o) => o.value === itemValue)?.label ||
-								itemPlaceholder}
-						</span>
-					</SelectTrigger>
-					<SelectContent>
-						{options?.map((option) => (
-							<SelectItem key={option.value} value={option.value}>
-								{option.label}
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
-			);
-		}
-
-		return (
-			<Input
-				id={itemName}
-				type={itemType === "email" ? "email" : itemType}
-				placeholder={itemPlaceholder}
-				disabled={disabled || readOnly}
-				defaultValue={itemValue ?? ""}
-				{...form.register(
-					itemName,
-					itemType === "number" ? { valueAsNumber: true } : undefined,
-				)}
-			/>
-		);
-	};
-
-	return (
-		<div className="space-y-2">
-			{label && (
-				<div className="flex items-center gap-2">
-					<label htmlFor={name} className="text-sm font-medium">
-						{label}
-						{required && <span className="text-destructive">*</span>}
-						{maxItems && (
-							<span className="ml-2 text-xs text-muted-foreground">
-								({fields.length}/{maxItems})
-							</span>
-						)}
-					</label>
-					{localized && <LocaleBadge locale={locale || "i18n"} />}
-				</div>
-			)}
-			{description && (
-				<p className="text-sm text-muted-foreground">{description}</p>
-			)}
-
-			<div className="space-y-2">
-				{fields.length === 0 ? (
-					<div className="rounded-lg border border-dashed p-4 text-center">
-						<p className="text-sm text-muted-foreground">
-							{placeholder || `No ${label || "items"} added yet`}
-						</p>
-					</div>
-				) : (
-					fields.map((field, index) => {
-						const canMoveUp = orderable && index > 0;
-						const canMoveDown = orderable && index < fields.length - 1;
-
-						return (
-							<div key={field.id} className="flex items-start gap-2">
-								<div className="flex-1">{renderItemInput(index)}</div>
-								{orderable && !readOnly && (
-									<div className="flex flex-col gap-1">
-										<Button
-											type="button"
-											variant="ghost"
-											size="icon"
-											className="h-6 w-6"
-											onClick={() => handleMove(index, index - 1)}
-											disabled={!canMoveUp || disabled}
-											title="Move up"
-										>
-											<CaretUp className="h-3 w-3" />
-										</Button>
-										<Button
-											type="button"
-											variant="ghost"
-											size="icon"
-											className="h-6 w-6"
-											onClick={() => handleMove(index, index + 1)}
-											disabled={!canMoveDown || disabled}
-											title="Move down"
-										>
-											<CaretDown className="h-3 w-3" />
-										</Button>
-									</div>
-								)}
-								{!readOnly && canRemove && (
-									<Button
-										type="button"
-										variant="ghost"
-										size="icon"
-										className="h-6 w-6"
-										onClick={() => handleRemove(index)}
-										disabled={disabled}
-										title="Remove"
-									>
-										<Trash className="h-3 w-3" />
-									</Button>
-								)}
-							</div>
-						);
-					})
-				)}
-			</div>
-
-			{!readOnly && canAddMore && (
-				<Button
-					type="button"
-					variant="outline"
-					onClick={handleAdd}
-					disabled={disabled}
-				>
-					<Plus className="h-4 w-4" />
-					Add {label || "item"}
-				</Button>
-			)}
-
-			{error && <p className="text-sm text-destructive">{error}</p>}
-		</div>
-	);
-}

package/src/components/fields/checkbox-field.tsx

@@ -1,47 +0,0 @@
-import { Controller } from "react-hook-form";
-import { CheckboxInput } from "../primitives/checkbox-input";
-import { FieldWrapper } from "./field-wrapper";
-import { useResolvedControl } from "./field-utils";
-import type { BooleanFieldProps } from "./field-types";
-
-export function CheckboxField({
-	name,
-	label,
-	description,
-	required,
-	disabled,
-	localized,
-	locale,
-	control,
-	className,
-}: BooleanFieldProps) {
-	const resolvedControl = useResolvedControl(control);
-
-	return (
-		<Controller
-			name={name}
-			control={resolvedControl}
-			render={({ field, fieldState }) => (
-				<FieldWrapper
-					name={name}
-					label={label}
-					description={description}
-					required={required}
-					disabled={disabled}
-					localized={localized}
-					locale={locale}
-					error={fieldState.error?.message}
-				>
-					<CheckboxInput
-						id={name}
-						value={!!field.value}
-						onChange={field.onChange}
-						disabled={disabled}
-						aria-invalid={!!fieldState.error}
-						className={className}
-					/>
-				</FieldWrapper>
-			)}
-		/>
-	);
-}

package/src/components/fields/custom-field.tsx

@@ -1,50 +0,0 @@
-import * as React from "react";
-import { Controller } from "react-hook-form";
-import { FieldWrapper } from "./field-wrapper";
-import { useResolvedControl } from "./field-utils";
-import type { BaseFieldProps } from "./field-types";
-
-type CustomFieldProps = BaseFieldProps & {
-	component: React.ComponentType<any>;
-};
-
-export function CustomField({
-	name,
-	label,
-	description,
-	placeholder,
-	required,
-	disabled,
-	localized,
-	locale,
-	control,
-	component: Component,
-}: CustomFieldProps) {
-	const resolvedControl = useResolvedControl(control);
-
-	return (
-		<Controller
-			name={name}
-			control={resolvedControl}
-			render={({ field, fieldState }) => (
-				<FieldWrapper
-					name={name}
-					label={label}
-					description={description}
-					required={required}
-					disabled={disabled}
-					localized={localized}
-					locale={locale}
-					error={fieldState.error?.message}
-				>
-					<Component
-						{...field}
-						id={name}
-						disabled={disabled}
-						placeholder={placeholder}
-					/>
-				</FieldWrapper>
-			)}
-		/>
-	);
-}

package/src/components/fields/date-field.tsx

@@ -1,65 +0,0 @@
-import { Controller } from "react-hook-form";
-import { DateInput } from "../primitives/date-input";
-import { FieldWrapper } from "./field-wrapper";
-import { useResolvedControl } from "./field-utils";
-import type { DateFieldProps } from "./field-types";
-
-export function DateField({
-	name,
-	label,
-	description,
-	placeholder,
-	required,
-	disabled,
-	localized,
-	locale,
-	control,
-	className,
-	minDate,
-	maxDate,
-	format,
-}: DateFieldProps) {
-	const resolvedControl = useResolvedControl(control);
-
-	return (
-		<Controller
-			name={name}
-			control={resolvedControl}
-			render={({ field, fieldState }) => {
-				// Handle string dates from form (convert to Date object)
-				const dateValue =
-					field.value instanceof Date
-						? field.value
-						: field.value
-							? new Date(field.value)
-							: null;
-
-				return (
-					<FieldWrapper
-						name={name}
-						label={label}
-						description={description}
-						required={required}
-						disabled={disabled}
-						localized={localized}
-						locale={locale}
-						error={fieldState.error?.message}
-					>
-						<DateInput
-							id={name}
-							value={dateValue}
-							onChange={field.onChange}
-							minDate={minDate}
-							maxDate={maxDate}
-							format={format}
-							placeholder={placeholder}
-							disabled={disabled}
-							aria-invalid={!!fieldState.error}
-							className={className}
-						/>
-					</FieldWrapper>
-				);
-			}}
-		/>
-	);
-}

package/src/components/fields/datetime-field.tsx

@@ -1,67 +0,0 @@
-import { Controller } from "react-hook-form";
-import { DateTimeInput } from "../primitives/date-input";
-import { FieldWrapper } from "./field-wrapper";
-import { useResolvedControl } from "./field-utils";
-import type { DateTimeFieldProps } from "./field-types";
-
-export function DatetimeField({
-	name,
-	label,
-	description,
-	placeholder,
-	required,
-	disabled,
-	localized,
-	locale,
-	control,
-	className,
-	minDate,
-	maxDate,
-	format,
-	precision,
-}: DateTimeFieldProps) {
-	const resolvedControl = useResolvedControl(control);
-
-	return (
-		<Controller
-			name={name}
-			control={resolvedControl}
-			render={({ field, fieldState }) => {
-				// Handle string dates from form (convert to Date object)
-				const dateValue =
-					field.value instanceof Date
-						? field.value
-						: field.value
-							? new Date(field.value)
-							: null;
-
-				return (
-					<FieldWrapper
-						name={name}
-						label={label}
-						description={description}
-						required={required}
-						disabled={disabled}
-						localized={localized}
-						locale={locale}
-						error={fieldState.error?.message}
-					>
-						<DateTimeInput
-							id={name}
-							value={dateValue}
-							onChange={field.onChange}
-							minDate={minDate}
-							maxDate={maxDate}
-							format={format}
-							precision={precision}
-							placeholder={placeholder}
-							disabled={disabled}
-							aria-invalid={!!fieldState.error}
-							className={className}
-						/>
-					</FieldWrapper>
-				);
-			}}
-		/>
-	);
-}