@questpie/admin 0.0.1

package/dist/config/index.mjs

@@ -0,0 +1,129 @@
+//#region src/config/index.ts
+/**
+* Define admin configuration with type inference
+*
+* @example
+* ```ts
+* import { defineAdminConfig } from '@questpie/admin/config'
+* import type { cms } from './server/cms'
+*
+* export const admin = defineAdminConfig<typeof cms>()({
+*   app: {
+*     brand: { name: "My CMS" }
+*   },
+*   collections: {
+*     posts: {
+*       label: "Posts",
+*       icon: "posts"
+*     }
+*   }
+* })
+* ```
+*/
+const defineAdminConfig = () => (config) => {
+	return config;
+};
+/**
+* Define a single collection config (for modular configs)
+*
+* @example
+* ```ts
+* // collections/posts.admin.ts
+* import { defineCollectionConfig } from '@questpie/admin/config'
+* import type { cms } from '../server/cms'
+*
+* export const postsAdminConfig = defineCollectionConfig<typeof cms, "posts">()({
+*   label: "Blog Posts",
+*   icon: "article",
+*   list: {
+*     defaultColumns: ["title", "status", "createdAt"],
+*   },
+*   edit: {
+*     sections: [
+*       { title: "Content", fields: ["title", "content"] },
+*       { title: "Settings", fields: ["status", "publishedAt"] },
+*     ],
+*   },
+* })
+* ```
+*/
+const defineCollectionConfig = () => (config) => {
+	return config;
+};
+/**
+* Merge multiple admin configs into one
+*
+* @example
+* ```ts
+* const admin = defineAdminConfig<typeof cms>()(
+*   mergeAdminConfigs([
+*     baseConfig,
+*     postsConfig,
+*     productsConfig,
+*   ])
+* )
+* ```
+*/
+function mergeAdminConfigs(configs) {
+	const result = { app: {} };
+	for (const config of configs) {
+		if (config.app) result.app = {
+			...result.app,
+			...config.app
+		};
+		if (config.collections) result.collections = {
+			...result.collections,
+			...config.collections
+		};
+	}
+	return result;
+}
+/**
+* Define app config separately
+*
+* @example
+* ```ts
+* export const appConfig = defineAppConfig({
+*   brand: { name: "My CMS" },
+*   locales: { default: "en", available: ["en", "sk"] },
+* })
+* ```
+*/
+const defineAppConfig = (config) => {
+	return config;
+};
+/**
+* Define dashboard config
+*
+* @example
+* ```ts
+* export const dashboardConfig = defineDashboardConfig({
+*   widgets: [
+*     { id: "stats", type: "stats", position: { x: 0, y: 0, w: 4, h: 2 } },
+*   ],
+* })
+* ```
+*/
+const defineDashboardConfig = (config) => {
+	return config;
+};
+/**
+* Define views configuration
+*
+* @example
+* ```ts
+* import { defineViewsConfig } from '@questpie/admin/config'
+* import { CustomLoginForm } from './components/CustomLoginForm'
+*
+* export const viewsConfig = defineViewsConfig({
+*   LoginForm: CustomLoginForm,
+*   // Override any default view
+* })
+* ```
+*/
+const defineViewsConfig = (config) => {
+	return config;
+};
+
+//#endregion
+export { defineAdminConfig, defineAppConfig, defineCollectionConfig, defineDashboardConfig, defineViewsConfig, mergeAdminConfigs };

package/dist/hooks/admin-provider.mjs

@@ -0,0 +1,70 @@
+import React, { createContext, useContext } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hooks/admin-provider.tsx
+const AdminContextInstance = createContext(null);
+/**
+* Hook to access admin context
+*/
+function useAdminContext() {
+	const context = useContext(AdminContextInstance);
+	if (!context) throw new Error("useAdminContext must be used within AdminProvider. Wrap your app with <AdminProvider client={client}>");
+	return context;
+}
+/**
+* Admin provider - provides CMS client and query client to the app
+*
+* @example
+* ```tsx
+* import { AdminProvider } from '@questpie/admin/hooks'
+* import { createQuestpieClient } from 'questpie/client'
+* import { QueryClient } from '@tanstack/react-query'
+* import type { cms } from './server/cms'
+*
+* const client = createQuestpieClient<typeof cms>({
+*   baseURL: 'http://localhost:3000'
+* })
+*
+* const queryClient = new QueryClient()
+*
+* function App() {
+*   return (
+*     <AdminProvider client={client} queryClient={queryClient}>
+*       <YourAdminApp />
+*     </AdminProvider>
+*   )
+* }
+* ```
+*/
+function AdminProvider({ client, queryClient, locales, children }) {
+	const [defaultQueryClient] = React.useState(() => queryClient ?? new QueryClient());
+	const [locale, setLocale] = React.useState(() => {
+		if (locales?.default) return locales.default;
+		if (locales?.available?.length) return locales.available[0];
+		return typeof client.getLocale === "function" ? client.getLocale() : void 0;
+	});
+	React.useEffect(() => {
+		if (!locales?.available?.length) return;
+		if (!locale || !locales.available.includes(locale)) setLocale(locales.default ?? locales.available[0]);
+	}, [locale, locales]);
+	React.useEffect(() => {
+		if (typeof client.setLocale !== "function") return;
+		client.setLocale(locale);
+	}, [client, locale]);
+	return /* @__PURE__ */ jsx(AdminContextInstance.Provider, {
+		value: {
+			client,
+			locale,
+			setLocale,
+			locales
+		},
+		children: /* @__PURE__ */ jsx(QueryClientProvider, {
+			client: defaultQueryClient,
+			children
+		})
+	});
+}
+
+//#endregion
+export { AdminProvider, useAdminContext };

package/dist/hooks/index.mjs

@@ -0,0 +1,7 @@
+import { AdminProvider, useAdminContext } from "./admin-provider";
+import { createAdminAuthClient } from "./use-auth";
+import { useCollection, useCollectionDelete, useCollectionInsert, useCollectionItemById, useCollectionUpdate } from "./use-collection-db";
+import { useCollectionCreate, useCollectionDelete as useCollectionDeleteMutation, useCollectionItem, useCollectionList, useCollectionUpdate as useCollectionUpdateMutation } from "./use-collection";
+import { useGlobal, useGlobalUpdate } from "./use-global";
+
+export { AdminProvider, createAdminAuthClient, useAdminContext, useCollection, useCollectionCreate, useCollectionDelete, useCollectionDeleteMutation, useCollectionInsert, useCollectionItem, useCollectionItemById, useCollectionList, useCollectionUpdate, useCollectionUpdateMutation, useGlobal, useGlobalUpdate };

package/dist/hooks/store.mjs

@@ -0,0 +1,178 @@
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+//#region src/hooks/store.ts
+/**
+* Jotai Store for Admin State Management
+*
+* Centralized state atoms for the admin UI.
+* Uses Jotai for reactive, atomic state management.
+*/
+/**
+* Sidebar collapsed state (persisted to localStorage)
+*/
+const sidebarCollapsedAtom = atomWithStorage("admin:sidebar-collapsed", false);
+/**
+* Current active locale
+*/
+const localeAtom = atom(null);
+/**
+* Available locales configuration
+*/
+const localesConfigAtom = atom(null);
+/**
+* Mobile menu open state
+*/
+const mobileMenuOpenAtom = atom(false);
+/**
+* Command palette open state
+*/
+const commandPaletteOpenAtom = atom(false);
+const themeModeAtom = atomWithStorage("admin:theme-mode", "system");
+/**
+* Derived atom for resolved theme (accounts for system preference)
+*/
+const resolvedThemeAtom = atom((get) => {
+	const mode = get(themeModeAtom);
+	if (mode !== "system") return mode;
+	if (typeof window !== "undefined") return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	return "light";
+});
+/**
+* Current active collection (for breadcrumbs, etc.)
+*/
+const activeCollectionAtom = atom(null);
+/**
+* Current active item ID (for editing)
+*/
+const activeItemIdAtom = atom(null);
+/**
+* Navigation history stack
+*/
+const navigationHistoryAtom = atom([]);
+/**
+* Global form dirty state (to warn on navigation)
+*/
+const formDirtyAtom = atom(false);
+/**
+* Active form errors count
+*/
+const formErrorsCountAtom = atom(0);
+const notificationsAtom = atom([]);
+/**
+* Derived atom to add notification
+*/
+const addNotificationAtom = atom(null, (get, set, notification) => {
+	const id = Math.random().toString(36).substring(2, 9);
+	const newNotification = {
+		...notification,
+		id
+	};
+	set(notificationsAtom, [...get(notificationsAtom), newNotification]);
+	if (notification.duration !== 0) setTimeout(() => {
+		set(notificationsAtom, (prev) => prev.filter((n) => n.id !== id));
+	}, notification.duration ?? 5e3);
+	return id;
+});
+/**
+* Derived atom to remove notification
+*/
+const removeNotificationAtom = atom(null, (get, set, id) => {
+	set(notificationsAtom, (prev) => prev.filter((n) => n.id !== id));
+});
+/**
+* Hook for sidebar state
+*/
+function useSidebar() {
+	const [collapsed, setCollapsed] = useAtom(sidebarCollapsedAtom);
+	return {
+		collapsed,
+		setCollapsed,
+		toggle: () => setCollapsed(!collapsed)
+	};
+}
+/**
+* Hook for theme state
+*/
+function useTheme() {
+	const [mode, setMode] = useAtom(themeModeAtom);
+	const resolved = useAtomValue(resolvedThemeAtom);
+	return {
+		mode,
+		setMode,
+		resolved,
+		isDark: resolved === "dark",
+		isLight: resolved === "light"
+	};
+}
+/**
+* Hook for locale state
+*/
+function useLocale() {
+	const [locale, setLocale] = useAtom(localeAtom);
+	const config = useAtomValue(localesConfigAtom);
+	return {
+		locale: locale ?? config?.default ?? null,
+		setLocale,
+		available: config?.available ?? [],
+		default: config?.default ?? null
+	};
+}
+/**
+* Hook for notifications
+*/
+function useNotifications() {
+	const notifications = useAtomValue(notificationsAtom);
+	const addNotification = useSetAtom(addNotificationAtom);
+	return {
+		notifications,
+		add: addNotification,
+		remove: useSetAtom(removeNotificationAtom),
+		success: (title, message) => addNotification({
+			type: "success",
+			title,
+			message
+		}),
+		error: (title, message) => addNotification({
+			type: "error",
+			title,
+			message
+		}),
+		warning: (title, message) => addNotification({
+			type: "warning",
+			title,
+			message
+		}),
+		info: (title, message) => addNotification({
+			type: "info",
+			title,
+			message
+		})
+	};
+}
+/**
+* Hook for command palette
+*/
+function useCommandPalette() {
+	const [open, setOpen] = useAtom(commandPaletteOpenAtom);
+	return {
+		open,
+		setOpen,
+		toggle: () => setOpen(!open)
+	};
+}
+/**
+* Hook for form dirty state
+*/
+function useFormDirty() {
+	const [dirty, setDirty] = useAtom(formDirtyAtom);
+	return {
+		dirty,
+		setDirty,
+		markDirty: () => setDirty(true),
+		markClean: () => setDirty(false)
+	};
+}
+
+//#endregion
+export { activeCollectionAtom, activeItemIdAtom, addNotificationAtom, commandPaletteOpenAtom, formDirtyAtom, formErrorsCountAtom, localeAtom, localesConfigAtom, mobileMenuOpenAtom, navigationHistoryAtom, notificationsAtom, removeNotificationAtom, resolvedThemeAtom, sidebarCollapsedAtom, themeModeAtom, useCommandPalette, useFormDirty, useLocale, useNotifications, useSidebar, useTheme };

package/dist/hooks/use-auth.mjs

@@ -0,0 +1,76 @@
+import { createAuthClient } from "better-auth/react";
+
+//#region src/hooks/use-auth.ts
+/**
+* Auth client utilities for admin package
+*
+* Better Auth handles all auth state management internally.
+* This module provides type-safe client creation helpers with
+* full type inference from your CMS auth configuration.
+*
+* @example
+* ```tsx
+* // In your app, create the auth client once:
+* import { createAdminAuthClient } from '@questpie/admin/hooks'
+* import type { cms } from './server/cms'
+*
+* export const authClient = createAdminAuthClient<typeof cms>({
+*   baseURL: 'http://localhost:3000'
+* })
+*
+* // Then use the built-in hooks:
+* function MyComponent() {
+*   const { data: session, isPending, error } = authClient.useSession()
+*
+*   if (isPending) return <div>Loading...</div>
+*   if (!session) return <LoginForm />
+*
+*   return <div>Welcome {session.user.name}</div>
+* }
+* ```
+*/
+/**
+* Create a type-safe Better Auth client for the admin UI
+*
+* The returned client includes full type inference from your CMS auth configuration:
+* - `useSession()` - React hook for session state (typed based on your user/session schema)
+* - `signIn` methods (email, social providers configured in CMS)
+* - `signOut` - Sign out the current user
+* - `signUp` - Register new users
+* - Plugin-specific hooks (e.g., `useListAccounts` for admin plugin)
+*
+* @example
+* ```tsx
+* import { createAdminAuthClient } from '@questpie/admin/hooks'
+* import type { cms } from './server/cms'
+*
+* // Create client with type inference from your CMS
+* export const authClient = createAdminAuthClient<typeof cms>({
+*   baseURL: 'http://localhost:3000'
+* })
+*
+* // Session data is fully typed based on your CMS auth config
+* function App() {
+*   const { data: session, isPending } = authClient.useSession()
+*
+*   if (isPending) return <Loading />
+*   if (!session) return <LoginPage authClient={authClient} />
+*
+*   // session.user has all fields from your user schema
+*   return <AdminDashboard user={session.user} />
+* }
+* ```
+*/
+function createAdminAuthClient(options) {
+	const basePath = options.basePath ?? "/cms/auth";
+	return createAuthClient({
+		baseURL: `${options.baseURL}${basePath}`,
+		fetchOptions: {
+			credentials: options.fetchOptions?.credentials ?? "include",
+			headers: options.fetchOptions?.headers
+		}
+	});
+}
+
+//#endregion
+export { createAdminAuthClient };

package/dist/hooks/use-collection-db.mjs

@@ -0,0 +1,146 @@
+import { useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAdminContext } from "./admin-provider";
+import { createQuestpieDBHelpers } from "@questpie/tanstack-query/db";
+
+//#region src/hooks/use-collection-db.ts
+/**
+* Hook to get TanStack DB Collection for a CMS collection
+* Provides offline-first, realtime-synced collection with optimistic updates
+*
+* @example
+* ```tsx
+* function PostsList() {
+*   const posts = useCollection('posts', {
+*     baseFindOptions: { where: { published: { eq: true } } },
+*     realtime: true, // Enable realtime sync
+*   })
+*
+*   return (
+*     <div>
+*       {posts.items.map(post => (
+*         <div key={post.id}>{post.title}</div>
+*       ))}
+*     </div>
+*   )
+* }
+* ```
+*/
+function useCollection(collectionName, options) {
+	const { client, locale } = useAdminContext();
+	const queryClient = useQueryClient();
+	const localeKey = locale ?? "default";
+	return useMemo(() => {
+		const collectionHelper = createQuestpieDBHelpers(client, { keyPrefix: [
+			"qcms",
+			"locale",
+			localeKey
+		] }).collections[collectionName];
+		if (!collectionHelper) throw new Error(`Collection "${String(collectionName)}" not found in CMS`);
+		return collectionHelper.createCollection({
+			queryClient,
+			getKey: options?.getKey ?? ((item) => item.id),
+			baseFindOptions: options?.baseFindOptions,
+			realtime: options?.realtime ?? false
+		});
+	}, [
+		client,
+		queryClient,
+		collectionName,
+		localeKey,
+		options?.baseFindOptions,
+		options?.realtime,
+		options?.getKey
+	]);
+}
+/**
+* Hook to get a single item from collection by ID
+* Uses TanStack DB Collection for offline-first access
+*
+* @example
+* ```tsx
+* function PostDetail({ id }: { id: string }) {
+*   const posts = useCollection('posts')
+*   const post = useCollectionItemById(posts, id)
+*
+*   if (!post) return <div>Loading...</div>
+*
+*   return <div>{post.title}</div>
+* }
+* ```
+*/
+function useCollectionItemById(collection, id) {
+	return collection.toArray.find((item) => collection.config.getKey(item) === id);
+}
+/**
+* Hook to create item in collection
+* Uses TanStack DB Collection with optimistic updates
+*
+* @example
+* ```tsx
+* function CreatePost() {
+*   const posts = useCollection('posts')
+*
+*   const handleCreate = async () => {
+*     await posts.insert({
+*       title: 'New Post',
+*       content: 'Hello World'
+*     })
+*   }
+*
+*   return <button onClick={handleCreate}>Create Post</button>
+* }
+* ```
+*/
+function useCollectionInsert(collectionName) {
+	const collection = useCollection(collectionName);
+	return collection.insert.bind(collection);
+}
+/**
+* Hook to update item in collection
+* Uses TanStack DB Collection with optimistic updates
+*
+* @example
+* ```tsx
+* function EditPost({ id }: { id: string }) {
+*   const posts = useCollection('posts')
+*   const post = useCollectionItemById(posts, id)
+*
+*   const handleUpdate = async () => {
+*     await posts.update(id, {
+*       title: 'Updated Title'
+*     })
+*   }
+*
+*   return <button onClick={handleUpdate}>Update</button>
+* }
+* ```
+*/
+function useCollectionUpdate(collectionName) {
+	const collection = useCollection(collectionName);
+	return collection.update.bind(collection);
+}
+/**
+* Hook to delete item from collection
+* Uses TanStack DB Collection with optimistic updates
+*
+* @example
+* ```tsx
+* function DeletePost({ id }: { id: string }) {
+*   const posts = useCollection('posts')
+*
+*   const handleDelete = async () => {
+*     await posts.delete(id)
+*   }
+*
+*   return <button onClick={handleDelete}>Delete</button>
+* }
+* ```
+*/
+function useCollectionDelete(collectionName) {
+	const collection = useCollection(collectionName);
+	return collection.delete.bind(collection);
+}
+
+//#endregion
+export { useCollection, useCollectionDelete, useCollectionInsert, useCollectionItemById, useCollectionUpdate };