@htlkg/components 0.0.2 → 0.0.4

package/src/composables/useConfirmation.ts

@@ -0,0 +1,358 @@
+/**
+ * Confirmation Composable
+ *
+ * Manages confirmation dialog state for destructive actions.
+ * Works with uiModal from @hotelinking/ui.
+ */
+
+import { ref, computed, type Ref, type ComputedRef, type Component } from 'vue';
+
+/**
+ * Confirmation dialog variant
+ */
+export type ConfirmationVariant = 'danger' | 'warning' | 'info' | 'default';
+
+/**
+ * Configuration for a confirmation dialog
+ */
+export interface ConfirmationConfig {
+	/** Dialog title */
+	title: string;
+	/** Dialog message/description */
+	message: string;
+	/** Text for confirm button */
+	confirmText?: string;
+	/** Text for cancel button */
+	cancelText?: string;
+	/** Visual variant */
+	variant?: ConfirmationVariant;
+	/** Icon component to display */
+	icon?: Component;
+	/** Whether action is in progress */
+	loading?: boolean;
+}
+
+/**
+ * Internal state for pending confirmation
+ */
+interface PendingConfirmation {
+	resolve: (value: boolean) => void;
+	reject: (reason?: unknown) => void;
+}
+
+/**
+ * Options for useConfirmation
+ */
+export interface UseConfirmationOptions {
+	/** Default confirm button text */
+	defaultConfirmText?: string;
+	/** Default cancel button text */
+	defaultCancelText?: string;
+	/** Default variant */
+	defaultVariant?: ConfirmationVariant;
+}
+
+/**
+ * Return type for useConfirmation
+ */
+export interface UseConfirmationReturn {
+	/** Whether dialog is open */
+	isOpen: Ref<boolean>;
+	/** Current dialog configuration */
+	config: Ref<ConfirmationConfig>;
+	/** Whether action is in progress */
+	isLoading: Ref<boolean>;
+
+	/** Open confirmation dialog and wait for response */
+	confirm: (options: ConfirmationConfig) => Promise<boolean>;
+	/** Handle confirm button click */
+	handleConfirm: () => void;
+	/** Handle cancel button click */
+	handleCancel: () => void;
+	/** Close dialog without triggering callbacks */
+	close: () => void;
+
+	/** Convenience: Confirm delete action */
+	confirmDelete: (itemName: string, options?: Partial<ConfirmationConfig>) => Promise<boolean>;
+	/** Convenience: Confirm bulk delete action */
+	confirmBulkDelete: (count: number, itemType?: string, options?: Partial<ConfirmationConfig>) => Promise<boolean>;
+	/** Convenience: Confirm destructive action */
+	confirmDestructive: (actionName: string, options?: Partial<ConfirmationConfig>) => Promise<boolean>;
+	/** Convenience: Confirm with custom async action */
+	confirmWithAction: <T>(
+		options: ConfirmationConfig,
+		action: () => Promise<T>
+	) => Promise<{ confirmed: boolean; result?: T; error?: Error }>;
+
+	/** Props for uiModal component */
+	modalProps: ComputedRef<{
+		title: string;
+		open: boolean;
+		modalName: string;
+		actions: Array<{ name: string; value: string }>;
+	}>;
+}
+
+/**
+ * Creates a confirmation dialog composable
+ *
+ * @example
+ * ```typescript
+ * const confirmation = useConfirmation();
+ *
+ * async function handleDelete(item: Item) {
+ *   const confirmed = await confirmation.confirmDelete(item.name);
+ *   if (confirmed) {
+ *     await deleteItem(item.id);
+ *   }
+ * }
+ *
+ * // Or with async action
+ * async function handleDeleteWithAction(item: Item) {
+ *   const { confirmed, error } = await confirmation.confirmWithAction(
+ *     { title: 'Delete Item', message: `Delete "${item.name}"?` },
+ *     () => deleteItem(item.id)
+ *   );
+ *   if (confirmed && !error) {
+ *     showSuccess('Item deleted');
+ *   }
+ * }
+ *
+ * // In template
+ * <Modal
+ *   v-bind="confirmation.modalProps"
+ *   @modal-action="(e) => e.action === 'confirm' ? confirmation.handleConfirm() : confirmation.handleCancel()"
+ * >
+ *   <p>{{ confirmation.config.message }}</p>
+ * </Modal>
+ * ```
+ */
+export function useConfirmation(options: UseConfirmationOptions = {}): UseConfirmationReturn {
+	const {
+		defaultConfirmText = 'Confirm',
+		defaultCancelText = 'Cancel',
+		defaultVariant = 'default',
+	} = options;
+
+	// State
+	const isOpen = ref(false);
+	const isLoading = ref(false);
+	const config = ref<ConfirmationConfig>({
+		title: '',
+		message: '',
+		confirmText: defaultConfirmText,
+		cancelText: defaultCancelText,
+		variant: defaultVariant,
+	});
+
+	// Pending promise resolution
+	let pending: PendingConfirmation | null = null;
+
+	/**
+	 * Open confirmation dialog and wait for user response
+	 */
+	function confirm(confirmConfig: ConfirmationConfig): Promise<boolean> {
+		// Set configuration with defaults
+		config.value = {
+			...confirmConfig,
+			confirmText: confirmConfig.confirmText ?? defaultConfirmText,
+			cancelText: confirmConfig.cancelText ?? defaultCancelText,
+			variant: confirmConfig.variant ?? defaultVariant,
+		};
+
+		isOpen.value = true;
+		isLoading.value = false;
+
+		return new Promise((resolve, reject) => {
+			pending = { resolve, reject };
+		});
+	}
+
+	/**
+	 * Handle confirm button click
+	 */
+	function handleConfirm(): void {
+		if (pending) {
+			pending.resolve(true);
+			pending = null;
+		}
+		isOpen.value = false;
+		isLoading.value = false;
+	}
+
+	/**
+	 * Handle cancel button click
+	 */
+	function handleCancel(): void {
+		if (pending) {
+			pending.resolve(false);
+			pending = null;
+		}
+		isOpen.value = false;
+		isLoading.value = false;
+	}
+
+	/**
+	 * Close dialog without resolving
+	 */
+	function close(): void {
+		if (pending) {
+			pending.resolve(false);
+			pending = null;
+		}
+		isOpen.value = false;
+		isLoading.value = false;
+	}
+
+	/**
+	 * Convenience: Confirm delete action
+	 */
+	function confirmDelete(
+		itemName: string,
+		confirmConfig?: Partial<ConfirmationConfig>
+	): Promise<boolean> {
+		return confirm({
+			title: 'Delete Item',
+			message: `Are you sure you want to delete "${itemName}"? This action cannot be undone.`,
+			confirmText: 'Delete',
+			cancelText: 'Cancel',
+			variant: 'danger',
+			...confirmConfig,
+		});
+	}
+
+	/**
+	 * Convenience: Confirm bulk delete action
+	 */
+	function confirmBulkDelete(
+		count: number,
+		itemType: string = 'items',
+		confirmConfig?: Partial<ConfirmationConfig>
+	): Promise<boolean> {
+		return confirm({
+			title: `Delete ${count} ${itemType}`,
+			message: `Are you sure you want to delete ${count} ${itemType}? This action cannot be undone.`,
+			confirmText: 'Delete All',
+			cancelText: 'Cancel',
+			variant: 'danger',
+			...confirmConfig,
+		});
+	}
+
+	/**
+	 * Convenience: Confirm destructive action
+	 */
+	function confirmDestructive(
+		actionName: string,
+		confirmConfig?: Partial<ConfirmationConfig>
+	): Promise<boolean> {
+		return confirm({
+			title: `Confirm ${actionName}`,
+			message: `Are you sure you want to ${actionName.toLowerCase()}? This action cannot be undone.`,
+			confirmText: actionName,
+			cancelText: 'Cancel',
+			variant: 'danger',
+			...confirmConfig,
+		});
+	}
+
+	/**
+	 * Convenience: Confirm with async action execution
+	 */
+	async function confirmWithAction<T>(
+		confirmConfig: ConfirmationConfig,
+		action: () => Promise<T>
+	): Promise<{ confirmed: boolean; result?: T; error?: Error }> {
+		const confirmed = await confirm(confirmConfig);
+
+		if (!confirmed) {
+			return { confirmed: false };
+		}
+
+		// Show loading state
+		isLoading.value = true;
+
+		try {
+			const result = await action();
+			isOpen.value = false;
+			isLoading.value = false;
+			return { confirmed: true, result };
+		} catch (error) {
+			isLoading.value = false;
+			return {
+				confirmed: true,
+				error: error instanceof Error ? error : new Error(String(error)),
+			};
+		}
+	}
+
+	/**
+	 * Props for uiModal component
+	 */
+	const modalProps = computed(() => ({
+		title: config.value.title,
+		open: isOpen.value,
+		modalName: 'confirmation-dialog',
+		actions: [
+			{
+				name: config.value.cancelText ?? defaultCancelText,
+				value: 'cancel',
+			},
+			{
+				name: config.value.confirmText ?? defaultConfirmText,
+				value: 'confirm',
+			},
+		],
+	}));
+
+	return {
+		// State
+		isOpen,
+		config,
+		isLoading,
+
+		// Core methods
+		confirm,
+		handleConfirm,
+		handleCancel,
+		close,
+
+		// Convenience methods
+		confirmDelete,
+		confirmBulkDelete,
+		confirmDestructive,
+		confirmWithAction,
+
+		// Modal props
+		modalProps,
+	};
+}
+
+/**
+ * Global confirmation instance for use across components
+ */
+let globalConfirmation: UseConfirmationReturn | null = null;
+
+/**
+ * Get or create global confirmation instance
+ *
+ * @example
+ * ```typescript
+ * // In any component
+ * const confirmation = useGlobalConfirmation();
+ * await confirmation.confirmDelete('Item Name');
+ * ```
+ */
+export function useGlobalConfirmation(): UseConfirmationReturn {
+	if (!globalConfirmation) {
+		globalConfirmation = useConfirmation();
+	}
+	return globalConfirmation;
+}
+
+/**
+ * Reset global confirmation instance (useful for testing)
+ */
+export function resetGlobalConfirmation(): void {
+	globalConfirmation = null;
+}

package/src/composables/usePageContext.ts

@@ -0,0 +1,171 @@
+/**
+ * Page Context Composable
+ *
+ * Provides access to common page context data (user, brand, routes)
+ * within Vue components, without prop drilling.
+ */
+
+import { computed, inject, type InjectionKey, type ComputedRef } from "vue";
+import { useStore } from "@nanostores/vue";
+import { atom } from "nanostores";
+import { routes, type Routes } from "@htlkg/core";
+
+/**
+ * User information from authentication
+ */
+export interface PageUser {
+	username: string;
+	email?: string;
+	isAdmin: boolean;
+	isSuperAdmin: boolean;
+	brandIds?: number[];
+	accountIds?: number[];
+	roles?: string[];
+}
+
+/**
+ * Brand context for brand-scoped pages
+ */
+export interface PageBrand {
+	id: number;
+	name: string;
+	logo?: string;
+}
+
+/**
+ * Full page context
+ */
+export interface PageContext {
+	user: PageUser | null;
+	brand?: PageBrand;
+	brandId?: number;
+	isAdmin: boolean;
+	isSuperAdmin: boolean;
+	routes: Routes;
+}
+
+/**
+ * Injection key for providing page context
+ */
+export const PAGE_CONTEXT_KEY: InjectionKey<PageContext> = Symbol("pageContext");
+
+/**
+ * Nanostore for user state (set by AdminLayout)
+ */
+export const $user = atom<PageUser | null>(null);
+
+/**
+ * Nanostore for current brand (set by BrandLayout)
+ */
+export const $currentBrand = atom<PageBrand | null>(null);
+
+/**
+ * Set user in the store (called from layout)
+ */
+export function setUser(user: PageUser | null): void {
+	$user.set(user);
+}
+
+/**
+ * Set current brand in the store (called from layout)
+ */
+export function setCurrentBrand(brand: PageBrand | null): void {
+	$currentBrand.set(brand);
+}
+
+/**
+ * Get page context within a Vue component
+ *
+ * This composable provides access to:
+ * - Current user information
+ * - Current brand (if in brand context)
+ * - Admin/superadmin status
+ * - Type-safe routes
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePageContext } from '@htlkg/components';
+ *
+ * const { user, isAdmin, routes } = usePageContext();
+ *
+ * function goToAccounts() {
+ *   window.location.href = routes.admin.accounts();
+ * }
+ * </script>
+ * ```
+ *
+ * @example With provider pattern
+ * ```vue
+ * // In parent component
+ * import { provide, PAGE_CONTEXT_KEY } from '@htlkg/components';
+ * provide(PAGE_CONTEXT_KEY, { user, brand, isAdmin: true, routes });
+ *
+ * // In child component
+ * const context = usePageContext();
+ * ```
+ */
+export function usePageContext(): ComputedRef<PageContext> {
+	// Try injection first (from provider)
+	const injected = inject(PAGE_CONTEXT_KEY, null);
+	if (injected) {
+		return computed(() => injected);
+	}
+
+	// Fallback to nanostores
+	const user = useStore($user);
+	const brand = useStore($currentBrand);
+
+	return computed(() => ({
+		user: user.value,
+		brand: brand.value ?? undefined,
+		brandId: brand.value?.id,
+		isAdmin: user.value?.isAdmin ?? false,
+		isSuperAdmin: user.value?.isSuperAdmin ?? false,
+		routes,
+	}));
+}
+
+/**
+ * Check if user has access to a specific brand
+ */
+export function useHasAccessToBrand(brandId: number): ComputedRef<boolean> {
+	const context = usePageContext();
+
+	return computed(() => {
+		const user = context.value.user;
+		if (!user) return false;
+		if (user.isAdmin || user.isSuperAdmin) return true;
+		return user.brandIds?.includes(brandId) ?? false;
+	});
+}
+
+/**
+ * Check if user has access to a specific account
+ */
+export function useHasAccessToAccount(accountId: number): ComputedRef<boolean> {
+	const context = usePageContext();
+
+	return computed(() => {
+		const user = context.value.user;
+		if (!user) return false;
+		if (user.isAdmin || user.isSuperAdmin) return true;
+		return user.accountIds?.includes(accountId) ?? false;
+	});
+}
+
+/**
+ * Get user roles
+ */
+export function useUserRoles(): ComputedRef<string[]> {
+	const context = usePageContext();
+	return computed(() => context.value.user?.roles ?? []);
+}
+
+/**
+ * Check if user has a specific role
+ */
+export function useHasRole(role: string): ComputedRef<boolean> {
+	const roles = useUserRoles();
+	return computed(() => roles.value.includes(role));
+}