Admin API

import { adminConfig } from "#questpie/factories";

export default adminConfig({
	sidebar: {
		sections: [
			{ id: "content", title: { en: "Content", sk: "Obsah" } },
			{ id: "settings", title: { en: "Settings" } },
		],
		items: [
			{ sectionId: "content", type: "collection", collection: "posts" },
			{ sectionId: "settings", type: "global", global: "siteSettings" },
			{
				sectionId: "settings",
				type: "link",
				label: { en: "Documentation" },
				href: "https://docs.example.com",
				external: true,
				icon: { type: "icon", props: { name: "ph:book-open" } },
			},
		],
	},
	dashboard: {
		title: { en: "Dashboard" },
		description: { en: "Overview of your content" },
		columns: 3,
		realtime: true,
		sections: [
			{ id: "stats", label: "Quick Stats" },
			{ id: "recent", label: "Recent Activity" },
		],
		items: [
			{
				sectionId: "stats",
				id: "total-posts",
				type: "stats",
				collection: "posts",
				label: "Total Posts",
			},
			{
				sectionId: "recent",
				id: "recent-posts",
				type: "recentItems",
				collection: "posts",
				limit: 5,
				dateField: "createdAt",
				label: "Recent Posts",
			},
		],
	},
	branding: {
		name: { en: "My App", sk: "Moja aplikacia" },
	},
	locale: {
		locales: ["en", "sk"],
		defaultLocale: "en",
	},
});

import type { AdminSidebarBrandProps } from "@questpie/admin/client";

export default function MyBrand({ name, collapsed }: AdminSidebarBrandProps) {
	return (
		<div className="flex items-center gap-2">
			<img src="/logo.svg" alt={name} className="size-6" />
			{!collapsed && <span className="font-bold">{name}</span>}
		</div>
	);
}

import type { AuthLayoutProps } from "@questpie/admin/client";

export default function MyAuthLayout({
	title,
	children,
	footer,
}: AuthLayoutProps) {
	return (
		<div className="min-h-screen flex items-center justify-center bg-zinc-950">
			<div className="w-full max-w-sm space-y-4 p-6">
				<h1 className="text-2xl font-bold text-white">{title}</h1>
				{children}
				{footer && <div className="text-sm text-zinc-400">{footer}</div>}
			</div>
		</div>
	);
}

import { field } from "@questpie/admin/client";

export default field("text", {
	component: () => import("./text-field.js"),
	cell: () => import("./cells/primitive-cells.js"),
});

import { view } from "@questpie/admin/client";

export default view("collection-table", {
	kind: "list",
	component: () => import("./table-view.js"),
});

export default view("collection-form", {
	kind: "form",
	component: () => import("./form-view.js"),
});

import { widget } from "@questpie/admin/client";

export default widget("stats", {
	component: () => import("./stats-widget.js"),
});

import { configureField } from "@questpie/admin/client";

const instance = configureField(textFieldDef, {
	label: "Title",
	required: true,
	placeholder: "Enter title...",
});

interface AdminState {
	fields: Record<string, FieldDefinition>;
	views: Record<string, ViewDefinition>;
	pages: Record<string, PageDefinition>;
	widgets: Record<string, WidgetDefinition>;
	components: Record<string, MaybeLazyComponent>;
	blocks: Record<string, MaybeLazyComponent>;
	translations: Record<string, Record<string, string>>;
	locale: string;
}

import admin from "@/questpie/admin/.generated/client";

v.collectionForm({
	sidebar: {
		position: "right",
		fields: [f.status, f.publishedAt],
	},
	fields: [
		f.title,
		f.slug,
		{
			type: "section",
			label: { en: "Content" },
			description: { en: "Main content area" },
			layout: "stack",
			fields: [f.content, f.excerpt],
		},
	],
});

{
  field: f.slug,
  hidden: ({ data }) => !data.title,
  readOnly: ({ data }) => data.status === "published",
  compute: {
    handler: ({ data }) => slugify(data.title),
    deps: ({ data }) => [data.title],
    debounce: 300,
  },
}