@alliance-droid/status-feedback-system 2.3.1 → 3.0.0

package/dist/components/shared/StatusIndicator.svelte

@@ -1,50 +1,50 @@
-<script lang="ts">
-	import type { SystemStatus } from '../../types.js';
-
-	interface Props {
-		status: SystemStatus;
-		size?: 'sm' | 'md' | 'lg';
-		showLabel?: boolean;
-	}
-
-	let { status, size = 'md', showLabel = false }: Props = $props();
-
-	const config: Record<SystemStatus, { label: string; icon: string; colorClass: string }> = {
-		operational: {
-			label: 'Operational',
-			icon: 'fa-circle-check',
-			colorClass: 'text-green-500',
-		},
-		degraded: {
-			label: 'Degraded',
-			icon: 'fa-exclamation-triangle',
-			colorClass: 'text-yellow-500',
-		},
-		outage: {
-			label: 'Outage',
-			icon: 'fa-circle-xmark',
-			colorClass: 'text-red-500',
-		},
-		maintenance: {
-			label: 'Maintenance',
-			icon: 'fa-wrench',
-			colorClass: 'text-blue-500',
-		},
-	};
-
-	const sizeClasses: Record<string, string> = {
-		sm: 'text-xs',
-		md: 'text-sm',
-		lg: 'text-base',
-	};
-
-	let current = $derived(config[status]);
-	let sizeClass = $derived(sizeClasses[size]);
-</script>
-
-<span class="inline-flex items-center gap-1.5 {sizeClass}" role="status" aria-label="{current.label}">
-	<i class="fa-solid {current.icon} {current.colorClass}" aria-hidden="true"></i>
-	{#if showLabel}
-		<span class="text-foreground-secondary">{current.label}</span>
-	{/if}
-</span>
+<script lang="ts">
+	import type { SystemStatus } from '../../types.js';
+
+	interface Props {
+		status: SystemStatus;
+		size?: 'sm' | 'md' | 'lg';
+		showLabel?: boolean;
+	}
+
+	let { status, size = 'md', showLabel = false }: Props = $props();
+
+	const config: Record<SystemStatus, { label: string; icon: string; colorClass: string }> = {
+		operational: {
+			label: 'Operational',
+			icon: 'fa-circle-check',
+			colorClass: 'text-green-500',
+		},
+		degraded: {
+			label: 'Degraded',
+			icon: 'fa-exclamation-triangle',
+			colorClass: 'text-yellow-500',
+		},
+		outage: {
+			label: 'Outage',
+			icon: 'fa-circle-xmark',
+			colorClass: 'text-red-500',
+		},
+		maintenance: {
+			label: 'Maintenance',
+			icon: 'fa-wrench',
+			colorClass: 'text-blue-500',
+		},
+	};
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'text-xs',
+		md: 'text-sm',
+		lg: 'text-base',
+	};
+
+	let current = $derived(config[status]);
+	let sizeClass = $derived(sizeClasses[size]);
+</script>
+
+<span class="inline-flex items-center gap-1.5 {sizeClass}" role="status" aria-label="{current.label}">
+	<i class="fa-solid {current.icon} {current.colorClass}" aria-hidden="true"></i>
+	{#if showLabel}
+		<span class="text-foreground-secondary">{current.label}</span>
+	{/if}
+</span>

package/dist/components/shared/SystemCard.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-	import type { System, StatusHistoryEntry } from '../../types.js';
-	import StatusIndicator from './StatusIndicator.svelte';
-	import UptimeBar from './UptimeBar.svelte';
-
-	interface Props {
-		system: System;
-		history?: StatusHistoryEntry[];
-		showUptime?: boolean;
-	}
-
-	let { system, history = [], showUptime = true }: Props = $props();
-</script>
-
-<div class="rounded-lg border border-border bg-surface p-4">
-	<div class="flex items-center justify-between">
-		<div>
-			<h3 class="text-sm font-semibold text-foreground">{system.name}</h3>
-			{#if system.description}
-				<p class="mt-0.5 text-xs text-foreground-tertiary">{system.description}</p>
-			{/if}
-		</div>
-		<StatusIndicator status={system.status} showLabel size="sm" />
-	</div>
-	{#if showUptime && history.length > 0}
-		<div class="mt-3">
-			<UptimeBar {history} />
-		</div>
-	{/if}
-</div>
+<script lang="ts">
+	import type { System, StatusHistoryEntry } from '../../types.js';
+	import StatusIndicator from './StatusIndicator.svelte';
+	import UptimeBar from './UptimeBar.svelte';
+
+	interface Props {
+		system: System;
+		history?: StatusHistoryEntry[];
+		showUptime?: boolean;
+	}
+
+	let { system, history = [], showUptime = true }: Props = $props();
+</script>
+
+<div class="rounded-lg border border-border bg-surface p-4">
+	<div class="flex items-center justify-between">
+		<div>
+			<h3 class="text-sm font-semibold text-foreground">{system.name}</h3>
+			{#if system.description}
+				<p class="mt-0.5 text-xs text-foreground-tertiary">{system.description}</p>
+			{/if}
+		</div>
+		<StatusIndicator status={system.status} showLabel size="sm" />
+	</div>
+	{#if showUptime && history.length > 0}
+		<div class="mt-3">
+			<UptimeBar {history} />
+		</div>
+	{/if}
+</div>

package/dist/components/shared/UptimeBar.svelte

@@ -1,85 +1,85 @@
-<script lang="ts">
-	import type { StatusHistoryEntry, SystemStatus } from '../../types.js';
-
-	interface Props {
-		history: StatusHistoryEntry[];
-		days?: number;
-	}
-
-	let { history, days = 90 }: Props = $props();
-
-	const statusColors: Record<SystemStatus, string> = {
-		operational: '#22c55e',
-		degraded: '#eab308',
-		outage: '#ef4444',
-		maintenance: '#3b82f6',
-	};
-
-	/**
-	 * Build day-by-day status bars from history entries.
-	 * Each day gets the "worst" status that occurred during it.
-	 */
-	let dayBars = $derived.by(() => {
-		const now = Date.now();
-		const msPerDay = 24 * 60 * 60 * 1000;
-		const bars: { date: string; status: SystemStatus; color: string }[] = [];
-
-		const severity: Record<SystemStatus, number> = {
-			operational: 0,
-			maintenance: 1,
-			degraded: 2,
-			outage: 3,
-		};
-
-		for (let i = days - 1; i >= 0; i--) {
-			const dayStart = now - (i + 1) * msPerDay;
-			const dayEnd = now - i * msPerDay;
-			const dateStr = new Date(dayEnd).toLocaleDateString();
-
-			// Find worst status that overlapped with this day
-			let worstStatus: SystemStatus = 'operational';
-			let worstSeverity = 0;
-
-			for (const entry of history) {
-				if (entry.changedAt <= dayEnd && entry.changedAt >= dayStart - msPerDay) {
-					const s = severity[entry.status] ?? 0;
-					if (s > worstSeverity) {
-						worstSeverity = s;
-						worstStatus = entry.status;
-					}
-				}
-			}
-
-			bars.push({
-				date: dateStr,
-				status: worstStatus,
-				color: statusColors[worstStatus],
-			});
-		}
-
-		return bars;
-	});
-
-	let uptimePercent = $derived.by(() => {
-		if (dayBars.length === 0) return 100;
-		const operational = dayBars.filter((d) => d.status === 'operational').length;
-		return Math.round((operational / dayBars.length) * 1000) / 10;
-	});
-</script>
-
-<div class="space-y-1">
-	<div class="flex items-center justify-between text-xs text-foreground-tertiary">
-		<span>{days} days ago</span>
-		<span>{uptimePercent}% uptime</span>
-		<span>Today</span>
-	</div>
-	<div class="flex gap-px">
-		{#each dayBars as bar (bar.date)}
-			<div
-				class="h-8 flex-1 rounded-sm transition-opacity hover:opacity-80"
-				style="background-color: {bar.color}"
-				title="{bar.date}: {bar.status}"
-			></div>
-		{/each}
-	</div>
-</div>
+<script lang="ts">
+	import type { StatusHistoryEntry, SystemStatus } from '../../types.js';
+
+	interface Props {
+		history: StatusHistoryEntry[];
+		days?: number;
+	}
+
+	let { history, days = 90 }: Props = $props();
+
+	const statusColors: Record<SystemStatus, string> = {
+		operational: '#22c55e',
+		degraded: '#eab308',
+		outage: '#ef4444',
+		maintenance: '#3b82f6',
+	};
+
+	/**
+	 * Build day-by-day status bars from history entries.
+	 * Each day gets the "worst" status that occurred during it.
+	 */
+	let dayBars = $derived.by(() => {
+		const now = Date.now();
+		const msPerDay = 24 * 60 * 60 * 1000;
+		const bars: { date: string; status: SystemStatus; color: string }[] = [];
+
+		const severity: Record<SystemStatus, number> = {
+			operational: 0,
+			maintenance: 1,
+			degraded: 2,
+			outage: 3,
+		};
+
+		for (let i = days - 1; i >= 0; i--) {
+			const dayStart = now - (i + 1) * msPerDay;
+			const dayEnd = now - i * msPerDay;
+			const dateStr = new Date(dayEnd).toLocaleDateString();
+
+			// Find worst status that overlapped with this day
+			let worstStatus: SystemStatus = 'operational';
+			let worstSeverity = 0;
+
+			for (const entry of history) {
+				if (entry.changedAt <= dayEnd && entry.changedAt >= dayStart - msPerDay) {
+					const s = severity[entry.status] ?? 0;
+					if (s > worstSeverity) {
+						worstSeverity = s;
+						worstStatus = entry.status;
+					}
+				}
+			}
+
+			bars.push({
+				date: dateStr,
+				status: worstStatus,
+				color: statusColors[worstStatus],
+			});
+		}
+
+		return bars;
+	});
+
+	let uptimePercent = $derived.by(() => {
+		if (dayBars.length === 0) return 100;
+		const operational = dayBars.filter((d) => d.status === 'operational').length;
+		return Math.round((operational / dayBars.length) * 1000) / 10;
+	});
+</script>
+
+<div class="space-y-1">
+	<div class="flex items-center justify-between text-xs text-foreground-tertiary">
+		<span>{days} days ago</span>
+		<span>{uptimePercent}% uptime</span>
+		<span>Today</span>
+	</div>
+	<div class="flex gap-px">
+		{#each dayBars as bar (bar.date)}
+			<div
+				class="h-8 flex-1 rounded-sm transition-opacity hover:opacity-80"
+				style="background-color: {bar.color}"
+				title="{bar.date}: {bar.status}"
+			></div>
+		{/each}
+	</div>
+</div>

package/package.json

@@ -1,66 +1,66 @@
-{
-	"name": "@alliance-droid/status-feedback-system",
-	"version": "2.3.1",
-	"type": "module",
-	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"CHANGELOG.md"
-	],
-	"scripts": {
-		"build": "svelte-package -o dist && publint",
-		"lint": "eslint src",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"test": "vitest run",
-		"test:watch": "vitest",
-		"prepublishOnly": "npm run build"
-	},
-	"peerDependencies": {
-		"@alliance-droid/svelte-component-library": ">=1.0.0",
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@alliance-droid/svelte-component-library": "^1.0.5",
-		"@eslint/js": "^10.0.1",
-		"@sveltejs/package": "^2.3.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/svelte": "^5.3.1",
-		"eslint": "^10.4.0",
-		"eslint-plugin-svelte": "^3.17.1",
-		"globals": "^17.6.0",
-		"jsdom": "^29.0.0",
-		"publint": "^0.3.0",
-		"svelte": "^5.48.0",
-		"svelte-check": "^4.3.0",
-		"typescript": "^5.9.0",
-		"typescript-eslint": "^8.59.4",
-		"vite": "^7.3.0",
-		"vitest": "^4.0.0"
-	},
-	"keywords": [
-		"svelte",
-		"sveltekit",
-		"status-page",
-		"feedback",
-		"uptime"
-	],
-	"author": "Alliance Technical Group",
-	"license": "UNLICENSED",
-	"publishConfig": {
-		"access": "restricted"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://alliance.ghe.com/alliance/status-feedback-system.git"
-	}
-}
+{
+	"name": "@alliance-droid/status-feedback-system",
+	"version": "3.0.0",
+	"type": "module",
+	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"CHANGELOG.md"
+	],
+	"scripts": {
+		"build": "svelte-package -o dist && publint",
+		"lint": "eslint src",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"@alliance-droid/svelte-component-library": ">=1.0.0",
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@alliance-droid/svelte-component-library": "^1.0.5",
+		"@eslint/js": "^10.0.1",
+		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/svelte": "^5.3.1",
+		"eslint": "^10.4.0",
+		"eslint-plugin-svelte": "^3.17.1",
+		"globals": "^17.6.0",
+		"jsdom": "^29.0.0",
+		"publint": "^0.3.0",
+		"svelte": "^5.48.0",
+		"svelte-check": "^4.3.0",
+		"typescript": "^5.9.0",
+		"typescript-eslint": "^8.59.4",
+		"vite": "^7.3.0",
+		"vitest": "^4.0.0"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"status-page",
+		"feedback",
+		"uptime"
+	],
+	"author": "Alliance Technical Group",
+	"license": "UNLICENSED",
+	"publishConfig": {
+		"access": "restricted"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://alliance.ghe.com/alliance/status-feedback-system.git"
+	}
+}