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

package/dist/components/FeedbackForm.svelte

@@ -1,155 +1,155 @@
-<script lang="ts">
-	import { untrack } from 'svelte';
-	import { createStatusClient, type StatusClient } from '../api.js';
-
-	interface Props {
-		apiKey: string;
-		apiUrl: string;
-		categories?: string[];
-		userEmail?: string;
-		onSuccess?: () => void;
-		onError?: (error: string) => void;
-	}
-
-	let {
-		apiKey,
-		apiUrl,
-		categories = ['Bug', 'Feature Request', 'General'],
-		userEmail,
-		onSuccess,
-		onError,
-	}: Props = $props();
-
-	let client: StatusClient | null = $state(null);
-	let lastApiUrl = '';
-	let lastApiKey = '';
-
-	function getClient(): StatusClient {
-		if (!client || lastApiUrl !== apiUrl || lastApiKey !== apiKey) {
-			client = createStatusClient({ apiUrl, apiKey });
-			lastApiUrl = apiUrl;
-			lastApiKey = apiKey;
-		}
-		return client;
-	}
-
-	let category = $state(untrack(() => categories[0] || ''));
-	let message = $state('');
-	let email = $state(untrack(() => userEmail ?? ''));
-	let submitting = $state(false);
-	let submitted = $state(false);
-	let errorMsg = $state('');
-
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		if (!message.trim()) return;
-
-		submitting = true;
-		errorMsg = '';
-
-		try {
-			await getClient().submitFeedback({
-				category,
-				message: message.trim(),
-				email: email.trim() || undefined,
-				pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
-			});
-
-			submitted = true;
-			onSuccess?.();
-		} catch (err) {
-			errorMsg = err instanceof Error ? err.message : 'Something went wrong';
-			onError?.(errorMsg);
-		} finally {
-			submitting = false;
-		}
-	}
-
-	function reset() {
-		message = '';
-		submitted = false;
-		errorMsg = '';
-	}
-</script>
-
-{#if submitted}
-	<div class="rounded-lg border border-green-500/30 bg-green-500/10 p-6 text-center">
-		<i class="fa-solid fa-circle-check mb-2 text-2xl text-green-500"></i>
-		<h3 class="font-semibold text-foreground">Thanks for your feedback!</h3>
-		<p class="mt-1 text-sm text-foreground-secondary">We'll review it shortly.</p>
-		<button
-			onclick={reset}
-			class="mt-4 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
-		>
-			Send more feedback
-		</button>
-	</div>
-{:else}
-	<form onsubmit={handleSubmit} class="space-y-4">
-		{#if categories.length > 1}
-			<div>
-				<label for="sf-category" class="mb-1 block text-sm font-semibold text-foreground">
-					Category
-				</label>
-				<select
-					id="sf-category"
-					bind:value={category}
-					class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
-				>
-					{#each categories as cat (cat)}
-						<option value={cat}>{cat}</option>
-					{/each}
-				</select>
-			</div>
-		{/if}
-
-		<div>
-			<label for="sf-message" class="mb-1 block text-sm font-semibold text-foreground">
-				Message <span class="text-red-500">*</span>
-			</label>
-			<textarea
-				id="sf-message"
-				bind:value={message}
-				placeholder="Tell us what's on your mind..."
-				rows="4"
-				maxlength="5000"
-				required
-				class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-foreground-tertiary"
-			></textarea>
-		</div>
-
-		<div>
-			<label for="sf-email" class="mb-1 block text-sm font-semibold text-foreground">
-				Email <span class="text-foreground-tertiary">(optional)</span>
-			</label>
-			<input
-				id="sf-email"
-				type="email"
-				bind:value={email}
-				placeholder="your@email.com"
-				class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-foreground-tertiary"
-			/>
-		</div>
-
-		{#if errorMsg}
-			<div class="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-500">
-				<i class="fa-solid fa-circle-exclamation mr-1"></i>
-				{errorMsg}
-			</div>
-		{/if}
-
-		<button
-			type="submit"
-			disabled={submitting || !message.trim()}
-			class="w-full rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
-		>
-			{#if submitting}
-				<i class="fa-solid fa-spinner fa-spin mr-1"></i>
-				Submitting...
-			{:else}
-				<i class="fa-solid fa-paper-plane mr-1"></i>
-				Submit Feedback
-			{/if}
-		</button>
-	</form>
-{/if}
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { createStatusClient, type StatusClient } from '../api.js';
+
+	interface Props {
+		apiKey: string;
+		apiUrl: string;
+		categories?: string[];
+		userEmail?: string;
+		onSuccess?: () => void;
+		onError?: (error: string) => void;
+	}
+
+	let {
+		apiKey,
+		apiUrl,
+		categories = ['Bug', 'Feature Request', 'General'],
+		userEmail,
+		onSuccess,
+		onError,
+	}: Props = $props();
+
+	let client: StatusClient | null = $state(null);
+	let lastApiUrl = '';
+	let lastApiKey = '';
+
+	function getClient(): StatusClient {
+		if (!client || lastApiUrl !== apiUrl || lastApiKey !== apiKey) {
+			client = createStatusClient({ apiUrl, apiKey });
+			lastApiUrl = apiUrl;
+			lastApiKey = apiKey;
+		}
+		return client;
+	}
+
+	let category = $state(untrack(() => categories[0] || ''));
+	let message = $state('');
+	let email = $state(untrack(() => userEmail ?? ''));
+	let submitting = $state(false);
+	let submitted = $state(false);
+	let errorMsg = $state('');
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (!message.trim()) return;
+
+		submitting = true;
+		errorMsg = '';
+
+		try {
+			await getClient().submitFeedback({
+				category,
+				message: message.trim(),
+				email: email.trim() || undefined,
+				pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
+			});
+
+			submitted = true;
+			onSuccess?.();
+		} catch (err) {
+			errorMsg = err instanceof Error ? err.message : 'Something went wrong';
+			onError?.(errorMsg);
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function reset() {
+		message = '';
+		submitted = false;
+		errorMsg = '';
+	}
+</script>
+
+{#if submitted}
+	<div class="rounded-lg border border-green-500/30 bg-green-500/10 p-6 text-center">
+		<i class="fa-solid fa-circle-check mb-2 text-2xl text-green-500"></i>
+		<h3 class="font-semibold text-foreground">Thanks for your feedback!</h3>
+		<p class="mt-1 text-sm text-foreground-secondary">We'll review it shortly.</p>
+		<button
+			onclick={reset}
+			class="mt-4 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
+		>
+			Send more feedback
+		</button>
+	</div>
+{:else}
+	<form onsubmit={handleSubmit} class="space-y-4">
+		{#if categories.length > 1}
+			<div>
+				<label for="sf-category" class="mb-1 block text-sm font-semibold text-foreground">
+					Category
+				</label>
+				<select
+					id="sf-category"
+					bind:value={category}
+					class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
+				>
+					{#each categories as cat (cat)}
+						<option value={cat}>{cat}</option>
+					{/each}
+				</select>
+			</div>
+		{/if}
+
+		<div>
+			<label for="sf-message" class="mb-1 block text-sm font-semibold text-foreground">
+				Message <span class="text-red-500">*</span>
+			</label>
+			<textarea
+				id="sf-message"
+				bind:value={message}
+				placeholder="Tell us what's on your mind..."
+				rows="4"
+				maxlength="5000"
+				required
+				class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-foreground-tertiary"
+			></textarea>
+		</div>
+
+		<div>
+			<label for="sf-email" class="mb-1 block text-sm font-semibold text-foreground">
+				Email <span class="text-foreground-tertiary">(optional)</span>
+			</label>
+			<input
+				id="sf-email"
+				type="email"
+				bind:value={email}
+				placeholder="your@email.com"
+				class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-foreground-tertiary"
+			/>
+		</div>
+
+		{#if errorMsg}
+			<div class="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-500">
+				<i class="fa-solid fa-circle-exclamation mr-1"></i>
+				{errorMsg}
+			</div>
+		{/if}
+
+		<button
+			type="submit"
+			disabled={submitting || !message.trim()}
+			class="w-full rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{#if submitting}
+				<i class="fa-solid fa-spinner fa-spin mr-1"></i>
+				Submitting...
+			{:else}
+				<i class="fa-solid fa-paper-plane mr-1"></i>
+				Submit Feedback
+			{/if}
+		</button>
+	</form>
+{/if}

package/dist/components/StatusBanner.svelte

@@ -1,105 +1,105 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { System, SystemStatus } from '../types.js';
-	import { createStatusClient, type StatusClient } from '../api.js';
-	import { deriveOverallStatus } from '../utils.js';
-	import StatusIndicator from './shared/StatusIndicator.svelte';
-
-	interface Props {
-		/** Systems data (pass-through mode) */
-		systems?: System[];
-		/** API URL for self-fetching mode */
-		apiUrl?: string;
-		/** API key for self-fetching mode */
-		apiKey?: string;
-		/** Link to full status page */
-		statusUrl?: string;
-		/** Auto-refresh interval in seconds. 0 = disabled. Default: 60 */
-		refreshInterval?: number;
-	}
-
-	let { systems: systemsProp, apiUrl, apiKey, statusUrl, refreshInterval = 60 }: Props = $props();
-
-	let systems = $derived(systemsProp ?? []);
-	let loading = $derived(!systemsProp && !!apiUrl && !!apiKey);
-	let fetchFailed = $state(false);
-
-	let usesApi = $derived(!systemsProp && !!apiUrl && !!apiKey);
-
-	let cachedClient: StatusClient | null = null;
-	let cachedApiUrl = '';
-	let cachedApiKey = '';
-
-	function getClient(): StatusClient {
-		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
-			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
-			cachedApiUrl = apiUrl!;
-			cachedApiKey = apiKey!;
-		}
-		return cachedClient;
-	}
-
-	async function fetchData() {
-		if (!usesApi) return;
-		try {
-			const client = getClient();
-			const data = await client.getStatus();
-			systems = data.systems;
-			fetchFailed = false;
-		} catch {
-			fetchFailed = true;
-		} finally {
-			loading = false;
-		}
-	}
-
-	onMount(() => {
-		fetchData();
-
-		let timer: ReturnType<typeof setInterval> | null = null;
-		if (usesApi && refreshInterval > 0) {
-			timer = setInterval(fetchData, refreshInterval * 1000);
-		}
-
-		return () => {
-			if (timer) clearInterval(timer);
-		};
-	});
-
-	let overallStatus = $derived(deriveOverallStatus(systems));
-
-	const messages: Record<SystemStatus, string> = {
-		operational: 'All systems operational',
-		degraded: 'Some systems degraded',
-		outage: 'System outage detected',
-		maintenance: 'Scheduled maintenance',
-	};
-</script>
-
-{#if loading}
-	<div class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-tertiary">
-		<div class="h-2 w-2 animate-pulse rounded-full bg-foreground-tertiary"></div>
-		<span>Loading...</span>
-	</div>
-{:else if fetchFailed}
-	<button
-		onclick={() => { loading = true; fetchData(); }}
-		class="inline-flex items-center gap-2 rounded-full border border-red-500/30 px-3 py-1.5 text-xs text-red-400 transition-colors hover:bg-red-500/10"
-	>
-		<i class="fa-solid fa-circle-exclamation"></i>
-		<span>Status unavailable</span>
-	</button>
-{:else if statusUrl}
-	<a
-		href={statusUrl}
-		class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-secondary transition-colors hover:bg-surface-hover"
-	>
-		<StatusIndicator status={overallStatus} size="sm" />
-		<span>{messages[overallStatus]}</span>
-	</a>
-{:else}
-	<div class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-secondary">
-		<StatusIndicator status={overallStatus} size="sm" />
-		<span>{messages[overallStatus]}</span>
-	</div>
-{/if}
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { System, SystemStatus } from '../types.js';
+	import { createStatusClient, type StatusClient } from '../api.js';
+	import { deriveOverallStatus } from '../utils.js';
+	import StatusIndicator from './shared/StatusIndicator.svelte';
+
+	interface Props {
+		/** Systems data (pass-through mode) */
+		systems?: System[];
+		/** API URL for self-fetching mode */
+		apiUrl?: string;
+		/** API key for self-fetching mode */
+		apiKey?: string;
+		/** Link to full status page */
+		statusUrl?: string;
+		/** Auto-refresh interval in seconds. 0 = disabled. Default: 60 */
+		refreshInterval?: number;
+	}
+
+	let { systems: systemsProp, apiUrl, apiKey, statusUrl, refreshInterval = 60 }: Props = $props();
+
+	let systems = $derived(systemsProp ?? []);
+	let loading = $derived(!systemsProp && !!apiUrl && !!apiKey);
+	let fetchFailed = $state(false);
+
+	let usesApi = $derived(!systemsProp && !!apiUrl && !!apiKey);
+
+	let cachedClient: StatusClient | null = null;
+	let cachedApiUrl = '';
+	let cachedApiKey = '';
+
+	function getClient(): StatusClient {
+		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
+			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
+			cachedApiUrl = apiUrl!;
+			cachedApiKey = apiKey!;
+		}
+		return cachedClient;
+	}
+
+	async function fetchData() {
+		if (!usesApi) return;
+		try {
+			const client = getClient();
+			const data = await client.getStatus();
+			systems = data.systems;
+			fetchFailed = false;
+		} catch {
+			fetchFailed = true;
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(() => {
+		fetchData();
+
+		let timer: ReturnType<typeof setInterval> | null = null;
+		if (usesApi && refreshInterval > 0) {
+			timer = setInterval(fetchData, refreshInterval * 1000);
+		}
+
+		return () => {
+			if (timer) clearInterval(timer);
+		};
+	});
+
+	let overallStatus = $derived(deriveOverallStatus(systems));
+
+	const messages: Record<SystemStatus, string> = {
+		operational: 'All systems operational',
+		degraded: 'Some systems degraded',
+		outage: 'System outage detected',
+		maintenance: 'Scheduled maintenance',
+	};
+</script>
+
+{#if loading}
+	<div class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-tertiary">
+		<div class="h-2 w-2 animate-pulse rounded-full bg-foreground-tertiary"></div>
+		<span>Loading...</span>
+	</div>
+{:else if fetchFailed}
+	<button
+		onclick={() => { loading = true; fetchData(); }}
+		class="inline-flex items-center gap-2 rounded-full border border-red-500/30 px-3 py-1.5 text-xs text-red-400 transition-colors hover:bg-red-500/10"
+	>
+		<i class="fa-solid fa-circle-exclamation"></i>
+		<span>Status unavailable</span>
+	</button>
+{:else if statusUrl}
+	<a
+		href={statusUrl}
+		class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-secondary transition-colors hover:bg-surface-hover"
+	>
+		<StatusIndicator status={overallStatus} size="sm" />
+		<span>{messages[overallStatus]}</span>
+	</a>
+{:else}
+	<div class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-secondary">
+		<StatusIndicator status={overallStatus} size="sm" />
+		<span>{messages[overallStatus]}</span>
+	</div>
+{/if}