@questpie/admin 0.0.1

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

@@ -0,0 +1,206 @@
+/**
+ * AdminRouter Component
+ *
+ * Automatic routing for all collections from CMS + admin config
+ *
+ * URL Patterns:
+ * - /admin -> Dashboard
+ * - /admin/:collection -> List view
+ * - /admin/:collection/new -> Create form
+ * - /admin/:collection/:id -> Edit form
+ */
+
+import * as React from "react";
+import { CollectionList } from "../collection/collection-list";
+import { CollectionForm } from "../collection/collection-form";
+import { AutoFormFields } from "../collection/auto-form-fields";
+import { LocaleSwitcher } from "../common/locale-switcher";
+import type { ComponentRegistry } from "../../config/component-registry";
+
+export interface AdminRouterProps {
+	/**
+	 * Admin configuration
+	 */
+	config: {
+		collections?: Record<
+			string,
+			{
+				label?: string;
+				list?: {
+					defaultColumns?: string[];
+					defaultSort?: { field: string; direction: "asc" | "desc" };
+					with?: string[];
+				};
+				fields?: Record<
+					string,
+					{
+						label?: string;
+						list?: {
+							renderCell?: string | React.ComponentType;
+						};
+					}
+				>;
+			}
+		>;
+	};
+
+	/**
+	 * Current route segments (parsed from URL)
+	 * Example: ["barbers", "123"] for /admin/barbers/123
+	 */
+	segments: string[];
+
+	/**
+	 * Navigate function (router-specific)
+	 */
+	navigate: (path: string) => void;
+
+	/**
+	 * Custom dashboard component
+	 */
+	DashboardComponent?: React.ComponentType;
+
+	/**
+	 * Custom collection components override
+	 */
+	collectionComponents?: Record<
+		string,
+		{
+			List?: React.ComponentType;
+			Form?: React.ComponentType;
+		}
+	>;
+
+	/**
+	 * Render custom form fields for collection
+	 * If not provided, will use default field detection
+	 */
+	renderFormFields?: (collection: string) => React.ReactNode;
+
+	/**
+	 * Component registry
+	 */
+	registry?: ComponentRegistry;
+}
+
+/**
+ * Default Dashboard
+ */
+function DefaultDashboard() {
+	return (
+		<div className="container py-8">
+			<h1 className="mb-8 text-3xl font-bold">Dashboard</h1>
+			<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+				<div className="rounded-lg border bg-card p-6">
+					<h3 className="font-semibold">Collections</h3>
+					<p className="mt-2 text-3xl font-bold">--</p>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function AdminRouter({
+	config,
+	segments,
+	navigate,
+	DashboardComponent,
+	collectionComponents,
+	renderFormFields,
+	registry,
+}: AdminRouterProps): React.ReactElement {
+	// Dashboard: no segments
+	if (segments.length === 0) {
+		const Dashboard = DashboardComponent || DefaultDashboard;
+		return <Dashboard />;
+	}
+
+	const [collection, idOrNew] = segments;
+	const collectionConfig = config.collections?.[collection];
+
+	// Custom collection component override
+	const customComponents = collectionComponents?.[collection];
+
+	// List view: /admin/:collection
+	if (!idOrNew) {
+		if (customComponents?.List) {
+			return <customComponents.List />;
+		}
+
+		// Auto-generate columns from config
+		const columns = collectionConfig?.list?.defaultColumns?.map((field) => ({
+			accessorKey: field,
+			header: collectionConfig.fields?.[field]?.label || field,
+		})) || [{ accessorKey: "id", header: "ID" }];
+
+		const withRelations = collectionConfig?.list?.with;
+
+		return (
+			<div className="container py-8">
+				<CollectionList
+					collection={collection as any}
+					columns={columns as any}
+					baseFindOptions={
+						withRelations
+							? {
+									with: withRelations.reduce((acc, rel) => {
+										acc[rel] = true;
+										return acc;
+									}, {} as any),
+								}
+							: undefined
+					}
+					realtime={true}
+					headerActions={
+						<div className="flex items-center gap-2">
+							<LocaleSwitcher />
+							<button
+								type="button"
+								onClick={() => navigate(`/admin/${collection}/new`)}
+								className="rounded bg-primary px-4 py-2 text-primary-foreground"
+							>
+								Create {collectionConfig?.label || collection}
+							</button>
+						</div>
+					}
+					onRowClick={(item: any) => {
+						navigate(`/admin/${collection}/${item.id}`);
+					}}
+				/>
+			</div>
+		);
+	}
+
+	// Form view: /admin/:collection/new or /admin/:collection/:id
+	const id = idOrNew === "new" ? undefined : idOrNew;
+
+	if (customComponents?.Form) {
+		return <customComponents.Form />;
+	}
+
+	return (
+		<div className="container max-w-2xl py-8">
+			<CollectionForm
+				collection={collection as any}
+				id={id}
+				title={
+					id
+						? `Edit ${collectionConfig?.label || collection}`
+						: `New ${collectionConfig?.label || collection}`
+				}
+				headerActions={<LocaleSwitcher />}
+				onSuccess={() => navigate(`/admin/${collection}`)}
+				onCancel={() => navigate(`/admin/${collection}`)}
+			>
+				{renderFormFields?.(collection) || (
+					<AutoFormFields
+						collection={collection as any}
+						config={collectionConfig}
+						registry={registry}
+						allCollectionsConfig={config.collections}
+					/>
+				)}
+			</CollectionForm>
+		</div>
+	);
+}

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

@@ -0,0 +1,185 @@
+/**
+ * AdminSidebar Component
+ *
+ * Automatically generated sidebar from admin config
+ * Fully customizable via config overrides
+ */
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface AdminSidebarProps {
+	/**
+	 * Admin configuration
+	 */
+	config: {
+		app?: {
+			brand?: {
+				name?: string;
+				logo?: React.ComponentType;
+				homeRoute?: string;
+			};
+		};
+		collections?: Record<
+			string,
+			{
+				label?: string;
+				icon?: string | React.ComponentType;
+				group?: string;
+			}
+		>;
+	};
+
+	/**
+	 * Current active route (e.g., "/admin/barbers")
+	 */
+	activeRoute?: string;
+
+	/**
+	 * Link component (router-specific)
+	 * Must accept: to, className, children
+	 */
+	LinkComponent: React.ComponentType<{
+		to: string;
+		className?: string;
+		children: React.ReactNode;
+		activeProps?: { className?: string };
+	}>;
+
+	/**
+	 * Custom class for sidebar container
+	 */
+	className?: string;
+
+	/**
+	 * Custom class for brand section
+	 */
+	brandClassName?: string;
+
+	/**
+	 * Custom class for nav section
+	 */
+	navClassName?: string;
+
+	/**
+	 * Render custom brand content
+	 */
+	renderBrand?: (config: AdminSidebarProps["config"]) => React.ReactNode;
+
+	/**
+	 * Render custom nav item
+	 */
+	renderNavItem?: (params: {
+		collectionName: string;
+		config: NonNullable<AdminSidebarProps["config"]["collections"]>[string];
+		isActive: boolean;
+	}) => React.ReactNode;
+}
+
+export function AdminSidebar({
+	config,
+	activeRoute,
+	LinkComponent,
+	className,
+	brandClassName,
+	navClassName,
+	renderBrand,
+	renderNavItem,
+}: AdminSidebarProps): React.ReactElement {
+	const brand = config.app?.brand;
+	const collections = config.collections || {};
+
+	// Group collections if needed
+	const groupedCollections = React.useMemo(() => {
+		const groups: Record<string, typeof collections> = { "": {} };
+
+		Object.entries(collections).forEach(([name, collectionConfig]) => {
+			const group = collectionConfig.group || "";
+			if (!groups[group]) groups[group] = {};
+			groups[group][name] = collectionConfig;
+		});
+
+		return groups;
+	}, [collections]);
+
+	return (
+		<aside
+			className={cn(
+				"w-64 border-r bg-neutral-50 dark:bg-neutral-900",
+				className,
+			)}
+		>
+			{/* Brand Section */}
+			<div className={cn("p-4", brandClassName)}>
+				{renderBrand ? (
+					renderBrand(config)
+				) : (
+					<>
+						{brand?.logo && <brand.logo />}
+						<h1 className="text-xl font-bold">{brand?.name || "Admin"}</h1>
+					</>
+				)}
+			</div>
+
+			{/* Navigation */}
+			<nav className={cn("space-y-1 p-2", navClassName)}>
+				{Object.entries(groupedCollections).map(
+					([groupName, groupCollections]) => (
+						<div key={groupName}>
+							{/* Group Label */}
+							{groupName && (
+								<div className="px-3 py-2 text-xs font-semibold uppercase text-neutral-500">
+									{groupName}
+								</div>
+							)}
+
+							{/* Collection Links */}
+							{Object.entries(groupCollections).map(
+								([collectionName, collectionConfig]) => {
+									const isActive = activeRoute === `/admin/${collectionName}`;
+
+									if (renderNavItem) {
+										return (
+											<React.Fragment key={collectionName}>
+												{renderNavItem({
+													collectionName,
+													config: collectionConfig,
+													isActive,
+												})}
+											</React.Fragment>
+										);
+									}
+
+									return (
+										<LinkComponent
+											key={collectionName}
+											to={`/admin/${collectionName}`}
+											className="block rounded px-3 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800"
+											activeProps={{
+												className:
+													"bg-neutral-100 dark:bg-neutral-800 font-medium",
+											}}
+										>
+											{/* Icon */}
+											{collectionConfig.icon &&
+												typeof collectionConfig.icon === "string" && (
+													<span className="mr-2">{collectionConfig.icon}</span>
+												)}
+											{collectionConfig.icon &&
+												typeof collectionConfig.icon !== "string" && (
+													<collectionConfig.icon />
+												)}
+
+											{/* Label */}
+											{collectionConfig.label || collectionName}
+										</LinkComponent>
+									);
+								},
+							)}
+						</div>
+					),
+				)}
+			</nav>
+		</aside>
+	);
+}

package/src/views/layout/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Layout views - admin layout and navigation
+ */
+
+export { AdminLayout } from "./admin-layout";
+export type { AdminLayoutProps } from "./admin-layout";
+
+export { AdminSidebar } from "./admin-sidebar";
+export type { AdminSidebarProps } from "./admin-sidebar";
+
+export { AdminRouter } from "./admin-router";
+export type { AdminRouterProps } from "./admin-router";

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "@questpie/typescript-config/react-library.json",
+	"compilerOptions": {
+		"outDir": "./dist",
+		"rootDir": "./src",
+		"baseUrl": ".",
+		"paths": {
+			"#questpie/admin/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.test.ts"]
+}