@zaaxch/tailframe 2.2.0 → 4.0.0

package/src/ui-templates.mjs

@@ -37,6 +37,7 @@ export interface RpcErrorEnvelope {
 export const uiHttpSource = `import axios, { type AxiosError } from "axios";
 import type { ServiceError } from "@/core/errors";
 import type { RpcErrorEnvelope, RpcResponse } from "@/core/rpc";
+import { apiBaseUrl } from "@/platform/config";
 
 const failureKind = (status?: number): ServiceError["kind"] => {
 	if (!status) return "network";
@@ -52,7 +53,7 @@ const failureKind = (status?: number): ServiceError["kind"] => {
 };
 
 export const http = axios.create({
-	baseURL: \`\${window.location.origin}/api/v1\`,
+	baseURL: apiBaseUrl,
 	headers: {
 		"Content-Type": "application/json",
 		Accept: "application/json",
@@ -98,6 +99,139 @@ export async function rpc<T>(operation: string, payload: unknown = {}): Promise<
 }
 `;
 
+export const uiErrorMessagesSource = `import { isServiceError } from "@/core/errors";
+
+export type ErrorMessageMap = Record<string, string>;
+
+export function getErrorMessage(
+	error: unknown,
+	fallback = "Please try again.",
+	messages: ErrorMessageMap = {}
+): string {
+	if (isServiceError(error)) return messages[error.code] ?? fallback;
+	return fallback;
+}
+
+export const hasErrorCode = (error: unknown, code: string) => isServiceError(error) && error.code === code;
+`;
+
+export const notificationStoreSource = `import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+export type NotificationKind = "info" | "success" | "warning" | "error";
+
+export interface NotificationInput {
+	message: string;
+	kind?: NotificationKind;
+	durationMs?: number;
+}
+
+export interface AppNotification {
+	id: number;
+	message: string;
+	kind: NotificationKind;
+	durationMs: number;
+}
+
+export const useNotificationStore = defineStore("notification", () => {
+	const queue = ref<AppNotification[]>([]);
+	const active = computed<AppNotification | undefined>(() => queue.value[0]);
+	let nextId = 1;
+
+	function notify({ message, kind = "info", durationMs = 4000 }: NotificationInput) {
+		const id = nextId++;
+		queue.value.push({ id, message, kind, durationMs });
+		return id;
+	}
+
+	function dismiss(id: number) {
+		queue.value = queue.value.filter((notification) => notification.id !== id);
+	}
+
+	function clear() {
+		queue.value = [];
+	}
+
+	return { queue, active, notify, dismiss, clear };
+});
+`;
+
+export const notificationHostSource = `<template>
+	<div class="tailframe-notifications" aria-live="polite" aria-atomic="true">
+		<div v-if="active" :class="['tailframe-notification', \`is-\${active.kind}\`]" role="status">
+			<span>{{ active.message }}</span>
+			<button type="button" aria-label="Dismiss notification" @click="notifications.dismiss(active.id)">×</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from "vue";
+import { useNotificationStore } from "@/app/stores/notification.store";
+
+const notifications = useNotificationStore();
+const active = computed(() => notifications.active);
+let timer: number | undefined;
+
+watch(
+	active,
+	(notification) => {
+		if (timer !== undefined) window.clearTimeout(timer);
+		timer = undefined;
+		if (notification && notification.durationMs > 0) {
+			timer = window.setTimeout(() => notifications.dismiss(notification.id), notification.durationMs);
+		}
+	},
+	{ immediate: true }
+);
+
+onBeforeUnmount(() => {
+	if (timer !== undefined) window.clearTimeout(timer);
+});
+</script>
+
+<style scoped>
+.tailframe-notifications {
+	position: fixed;
+	inset: auto 1rem 1rem;
+	z-index: 10000;
+	display: grid;
+	justify-items: end;
+	pointer-events: none;
+}
+.tailframe-notification {
+	display: flex;
+	max-width: min(32rem, calc(100vw - 2rem));
+	align-items: center;
+	gap: 0.75rem;
+	border-radius: 0.75rem;
+	background: #1e293b;
+	color: white;
+	padding: 0.75rem 1rem;
+	box-shadow: 0 12px 30px rgb(15 23 42 / 0.28);
+	pointer-events: auto;
+}
+.tailframe-notification.is-success {
+	background: #166534;
+}
+.tailframe-notification.is-warning {
+	background: #92400e;
+}
+.tailframe-notification.is-error {
+	background: #991b1b;
+}
+.tailframe-notification button {
+	border: 0;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+	font: inherit;
+	font-size: 1.25rem;
+	line-height: 1;
+}
+</style>
+`;
+
 export const configureHttpSource = `import type { Pinia } from "pinia";
 import router from "@/app/router";
 import { useAuthStore } from "@/app/stores/auth.store";

package/src/validate.mjs

@@ -1,8 +1,13 @@
+import fs from "node:fs";
+import path from "node:path";
 import { validateArchitecture } from "./architecture.mjs";
+import { appRoot, loadConfig } from "./config.mjs";
 import { validateConventions } from "./conventions.mjs";
 import { isExcepted, loadExceptions } from "./exceptions.mjs";
+import { runSync } from "./sync.mjs";
 
 const NON_EXCEPTABLE_RULES = new Set(["S8", "S9", "U5", "U6", "U7"]);
+const PNPM_VERSION = "11.22.0";
 
 export function runValidate(root, kind) {
 	const structural = validateArchitecture(root, kind);
@@ -15,3 +20,88 @@ export function runValidate(root, kind) {
 		.map((violation) => `${violation.rule}: ${violation.message}`);
 	return [...structural, ...conventions];
 }
+
+function escapeRegex(value) {
+	return value.replace(/[.*+?^$()|[\]\\{}]/g, "\\$&");
+}
+
+function validateVersionMetadata(root, runningVersion) {
+	const errors = [];
+	const packageFile = path.join(root, "package.json");
+	const lockFile = path.join(root, "pnpm-lock.yaml");
+	const workspaceFile = path.join(root, "pnpm-workspace.yaml");
+	if (!fs.existsSync(packageFile)) return ["root package.json is required to pin the Tailframe build-time contract"];
+	let manifest;
+	try { manifest = JSON.parse(fs.readFileSync(packageFile, "utf8")); }
+	catch { return ["root package.json is not valid JSON"]; }
+	if (manifest.private !== true) errors.push("root package.json must be private");
+	if (manifest.packageManager !== `pnpm@${PNPM_VERSION}`) {
+		errors.push(`root package.json packageManager must be pnpm@${PNPM_VERSION}`);
+	}
+	if (manifest.devDependencies?.["@zaaxch/tailframe"] !== runningVersion) {
+		errors.push(`root package.json must pin @zaaxch/tailframe exactly to ${runningVersion}`);
+	}
+	if (!fs.existsSync(workspaceFile)) errors.push("pnpm-workspace.yaml is required at the product root");
+	else {
+		const workspace = fs.readFileSync(workspaceFile, "utf8");
+		if (!/^\s*-\s*["']?apps\/\*["']?\s*$/mu.test(workspace)) {
+			errors.push("pnpm-workspace.yaml must include apps/*");
+		}
+		if (!/^injectWorkspacePackages:\s*true\s*$/mu.test(workspace)) {
+			errors.push("pnpm-workspace.yaml must enable injectWorkspacePackages");
+		}
+	}
+	if (!fs.existsSync(lockFile)) return [...errors, "pnpm-lock.yaml is required to lock the Tailframe contract"];
+	const lock = fs.readFileSync(lockFile, "utf8");
+	const version = escapeRegex(runningVersion);
+	const pin = new RegExp(`['"]?@zaaxch/tailframe['"]?:\\s*\\n\\s*specifier:\\s*['"]?${version}['"]?\\s*\\n\\s*version:\\s*['"]?${version}['"]?`, "u");
+	const resolution = new RegExp(`['"]?@zaaxch/tailframe@${version}['"]?:`, "u");
+	if (!pin.test(lock)) errors.push(`pnpm-lock.yaml root importer must pin @zaaxch/tailframe exactly to ${runningVersion}`);
+	if (!resolution.test(lock)) errors.push(`pnpm-lock.yaml does not resolve @zaaxch/tailframe ${runningVersion}`);
+	return errors;
+}
+
+function validateAppMetadata(productRoot, app) {
+	const errors = [];
+	const root = appRoot(productRoot, app);
+	if (!fs.existsSync(root)) return [`Missing configured application root: ${app.path}`];
+	if (fs.existsSync(path.join(root, "tailframe.json"))) {
+		errors.push(`${app.path}/tailframe.json is forbidden; the product root owns Tailframe metadata`);
+	}
+	if (fs.existsSync(path.join(root, "package-lock.json")) || fs.existsSync(path.join(root, "pnpm-lock.yaml"))) {
+		errors.push(`${app.path} must not contain an application lockfile`);
+	}
+	const packageFile = path.join(root, "package.json");
+	if (!fs.existsSync(packageFile)) errors.push(`${app.path}/package.json is required`);
+	else {
+		try {
+			const manifest = JSON.parse(fs.readFileSync(packageFile, "utf8"));
+			if (manifest.devDependencies?.["@zaaxch/tailframe"] || manifest.dependencies?.["@zaaxch/tailframe"]) {
+				errors.push(`${app.path}/package.json must not depend on @zaaxch/tailframe; pin it at the product root`);
+			}
+		} catch {
+			errors.push(`${app.path}/package.json is not valid JSON`);
+		}
+	}
+	return errors;
+}
+export function runConfiguredValidate(rootArgument, runningVersion, selectedKind) {
+	const loaded = loadConfig(rootArgument);
+	if (loaded.errors.length) return loaded.errors;
+	const errors = [];
+	if (loaded.config.contractVersion !== runningVersion) {
+		errors.push(`tailframe.json requires ${loaded.config.contractVersion}, but this CLI is ${runningVersion}`);
+	}
+	if (selectedKind && !loaded.config.apps.some((app) => app.kind === selectedKind)) {
+		errors.push(`tailframe.json does not declare a ${selectedKind} app`);
+	}
+	errors.push(...validateVersionMetadata(loaded.root, runningVersion));
+	for (const app of loaded.config.apps) errors.push(...validateAppMetadata(loaded.root, app));
+	if (errors.length) return errors;
+	const apps = selectedKind ? loaded.config.apps.filter((app) => app.kind === selectedKind) : loaded.config.apps;
+	for (const app of apps) {
+		for (const error of runValidate(appRoot(loaded.root, app), app.kind)) errors.push(`${app.path}: ${error}`);
+	}
+	errors.push(...runSync(loaded.root, "check", runningVersion, selectedKind).errors);
+	return errors;
+}