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

package/dist/components/DevFeedback.svelte.d.ts

@@ -1,8 +1,13 @@
 interface Props {
     apiUrl: string;
     apiKey: string;
-    /** Explicit enable/disable — overrides auto-detection */
-    enabled?: boolean | undefined;
+    /**
+     * The sole gate for the widget — wire it to your role/permission check
+     * (e.g. `enabled={userHasFeedbackRole}`). When false, nothing renders and
+     * no listeners attach. A non-empty `userEmail` is also required. There is
+     * no environment auto-detection.
+     */
+    enabled: boolean;
     /** Max console errors to capture */
     maxConsoleErrors?: number;
     /** Show onboarding toast on first visit */

package/dist/components/FeedbackBoard.svelte

@@ -1,110 +1,110 @@
-<script lang="ts">
-	/**
-	 * All-in-one feedback board component.
-	 * Composes the board sub-components (FeedbackSidebar, FeedbackList,
-	 * FeedbackSubmitForm) with a shared FeedbackBoardState.
-	 */
-	import { untrack } from 'svelte';
-	import { Button } from '@alliance-droid/svelte-component-library';
-	import type { BoardItem } from '../api.js';
-	import { createFeedbackBoard, type CategoryConfig, type FeedbackBoardState } from './board/index.js';
-	import FeedbackSidebar from './board/FeedbackSidebar.svelte';
-	import FeedbackList from './board/FeedbackList.svelte';
-	import FeedbackDetail from './board/FeedbackDetail.svelte';
-	import FeedbackSubmitForm from './board/FeedbackSubmitForm.svelte';
-
-	interface Props {
-		apiUrl: string;
-		apiKey: string;
-		/** Authenticated user email. Required for submitting feedback and replies. */
-		userEmail?: string;
-		/** Category labels and icons — order determines sidebar order */
-		categoryConfig?: Record<string, CategoryConfig>;
-		/** Title shown at the top */
-		title?: string;
-		/** Show the submit form inline */
-		showSubmit?: boolean;
-		/** Available categories for the submit form */
-		submitCategories?: string[];
-	}
-
-	let {
-		apiUrl,
-		apiKey,
-		userEmail,
-		categoryConfig = {},
-		title = 'Feedback Board',
-		showSubmit = true,
-		submitCategories = [],
-	}: Props = $props();
-
-	let board: FeedbackBoardState = $derived(
-		createFeedbackBoard({ apiUrl, apiKey, userEmail, categoryConfig })
-	);
-
-	let showForm = $state(false);
-	let selectedItem = $state<BoardItem | null>(null);
-
-	function selectItem(item: BoardItem) {
-		selectedItem = item;
-	}
-
-	function clearSelection() {
-		selectedItem = null;
-	}
-</script>
-
-<div class="flex gap-6 min-h-[400px]">
-	<!-- Sidebar -->
-	<aside class="w-56 flex-shrink-0">
-		<FeedbackSidebar {board} />
-	</aside>
-
-	<!-- Main -->
-	<main class="flex-1 min-w-0">
-		<div class="flex items-start justify-between mb-4">
-			<div>
-				{#if board.activeCategory}
-					<h2 class="text-xl font-bold flex items-center gap-2">
-						<i class={board.getCategoryIcon(board.activeCategory)}></i>
-						{board.getCategoryLabel(board.activeCategory)}
-					</h2>
-					{#if board.getCategoryDescription(board.activeCategory)}
-						<p class="text-sm text-foreground-secondary mt-1">{board.getCategoryDescription(board.activeCategory)}</p>
-					{/if}
-				{:else if title}
-					<h2 class="text-xl font-bold">{title}</h2>
-				{/if}
-			</div>
-			{#if showSubmit}
-				<Button variant="primary" onclick={() => (showForm = !showForm)}>
-					<i class="fa-solid fa-plus mr-1.5"></i> Submit
-				</Button>
-			{/if}
-		</div>
-
-		<!-- Submit form -->
-		{#if showForm}
-			<div class="mb-4">
-				<FeedbackSubmitForm {board} categories={submitCategories} />
-			</div>
-		{/if}
-
-		<!-- Items / Detail -->
-		{#if selectedItem}
-			<div class="mb-4">
-				<button
-					onclick={clearSelection}
-					class="text-sm text-foreground-secondary hover:text-foreground transition-colors mb-3"
-				>
-					<i class="fa-solid fa-arrow-left mr-1" aria-hidden="true"></i> Back to list
-				</button>
-				<div class="rounded-xl border border-border bg-surface p-5">
-					<FeedbackDetail {board} item={selectedItem} />
-				</div>
-			</div>
-		{:else}
-			<FeedbackList {board} onSelect={selectItem} />
-		{/if}
-	</main>
-</div>
+<script lang="ts">
+	/**
+	 * All-in-one feedback board component.
+	 * Composes the board sub-components (FeedbackSidebar, FeedbackList,
+	 * FeedbackSubmitForm) with a shared FeedbackBoardState.
+	 */
+	import { untrack } from 'svelte';
+	import { Button } from '@alliance-droid/svelte-component-library';
+	import type { BoardItem } from '../api.js';
+	import { createFeedbackBoard, type CategoryConfig, type FeedbackBoardState } from './board/index.js';
+	import FeedbackSidebar from './board/FeedbackSidebar.svelte';
+	import FeedbackList from './board/FeedbackList.svelte';
+	import FeedbackDetail from './board/FeedbackDetail.svelte';
+	import FeedbackSubmitForm from './board/FeedbackSubmitForm.svelte';
+
+	interface Props {
+		apiUrl: string;
+		apiKey: string;
+		/** Authenticated user email. Required for submitting feedback and replies. */
+		userEmail?: string;
+		/** Category labels and icons — order determines sidebar order */
+		categoryConfig?: Record<string, CategoryConfig>;
+		/** Title shown at the top */
+		title?: string;
+		/** Show the submit form inline */
+		showSubmit?: boolean;
+		/** Available categories for the submit form */
+		submitCategories?: string[];
+	}
+
+	let {
+		apiUrl,
+		apiKey,
+		userEmail,
+		categoryConfig = {},
+		title = 'Feedback Board',
+		showSubmit = true,
+		submitCategories = [],
+	}: Props = $props();
+
+	let board: FeedbackBoardState = $derived(
+		createFeedbackBoard({ apiUrl, apiKey, userEmail, categoryConfig })
+	);
+
+	let showForm = $state(false);
+	let selectedItem = $state<BoardItem | null>(null);
+
+	function selectItem(item: BoardItem) {
+		selectedItem = item;
+	}
+
+	function clearSelection() {
+		selectedItem = null;
+	}
+</script>
+
+<div class="flex gap-6 min-h-[400px]">
+	<!-- Sidebar -->
+	<aside class="w-56 flex-shrink-0">
+		<FeedbackSidebar {board} />
+	</aside>
+
+	<!-- Main -->
+	<main class="flex-1 min-w-0">
+		<div class="flex items-start justify-between mb-4">
+			<div>
+				{#if board.activeCategory}
+					<h2 class="text-xl font-bold flex items-center gap-2">
+						<i class={board.getCategoryIcon(board.activeCategory)}></i>
+						{board.getCategoryLabel(board.activeCategory)}
+					</h2>
+					{#if board.getCategoryDescription(board.activeCategory)}
+						<p class="text-sm text-foreground-secondary mt-1">{board.getCategoryDescription(board.activeCategory)}</p>
+					{/if}
+				{:else if title}
+					<h2 class="text-xl font-bold">{title}</h2>
+				{/if}
+			</div>
+			{#if showSubmit}
+				<Button variant="primary" onclick={() => (showForm = !showForm)}>
+					<i class="fa-solid fa-plus mr-1.5"></i> Submit
+				</Button>
+			{/if}
+		</div>
+
+		<!-- Submit form -->
+		{#if showForm}
+			<div class="mb-4">
+				<FeedbackSubmitForm {board} categories={submitCategories} />
+			</div>
+		{/if}
+
+		<!-- Items / Detail -->
+		{#if selectedItem}
+			<div class="mb-4">
+				<button
+					onclick={clearSelection}
+					class="text-sm text-foreground-secondary hover:text-foreground transition-colors mb-3"
+				>
+					<i class="fa-solid fa-arrow-left mr-1" aria-hidden="true"></i> Back to list
+				</button>
+				<div class="rounded-xl border border-border bg-surface p-5">
+					<FeedbackDetail {board} item={selectedItem} />
+				</div>
+			</div>
+		{:else}
+			<FeedbackList {board} onSelect={selectItem} />
+		{/if}
+	</main>
+</div>

package/dist/components/FeedbackButton.svelte

@@ -1,72 +1,72 @@
-<script lang="ts">
-	import FeedbackForm from './FeedbackForm.svelte';
-
-	interface Props {
-		apiKey: string;
-		apiUrl: string;
-		categories?: string[];
-		userEmail?: string;
-		position?: 'bottom-right' | 'bottom-left';
-	}
-
-	let {
-		apiKey,
-		apiUrl,
-		categories,
-		userEmail,
-		position = 'bottom-right',
-	}: Props = $props();
-
-	let open = $state(false);
-
-	let positionStyles = $derived(
-		position === 'bottom-right'
-			? 'right: 1rem; bottom: 1rem;'
-			: 'left: 1rem; bottom: 1rem;'
-	);
-
-	let panelStyles = $derived(
-		position === 'bottom-right'
-			? 'right: 0; bottom: 3.5rem;'
-			: 'left: 0; bottom: 3.5rem;'
-	);
-</script>
-
-<div class="fixed z-50" style={positionStyles}>
-	{#if open}
-		<div class="absolute w-80 rounded-lg border border-border bg-background shadow-lg" style={panelStyles}>
-			<div class="flex items-center justify-between border-b border-border px-4 py-3">
-				<h3 class="text-sm font-semibold text-foreground">
-					<i class="fa-solid fa-comment mr-1.5 text-primary"></i>
-					Send Feedback
-				</h3>
-				<button
-					onclick={() => (open = false)}
-					class="text-foreground-tertiary transition-colors hover:text-foreground"
-					aria-label="Close feedback"
-				>
-					<i class="fa-solid fa-xmark"></i>
-				</button>
-			</div>
-			<div class="p-4">
-				<FeedbackForm
-					{apiKey}
-					{apiUrl}
-					{categories}
-					{userEmail}
-					onSuccess={() => {
-						setTimeout(() => (open = false), 2000);
-					}}
-				/>
-			</div>
-		</div>
-	{/if}
-
-	<button
-		onclick={() => (open = !open)}
-		class="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105"
-		aria-label="Send feedback"
-	>
-		<i class="fa-solid {open ? 'fa-xmark' : 'fa-comment'} text-lg"></i>
-	</button>
-</div>
+<script lang="ts">
+	import FeedbackForm from './FeedbackForm.svelte';
+
+	interface Props {
+		apiKey: string;
+		apiUrl: string;
+		categories?: string[];
+		userEmail?: string;
+		position?: 'bottom-right' | 'bottom-left';
+	}
+
+	let {
+		apiKey,
+		apiUrl,
+		categories,
+		userEmail,
+		position = 'bottom-right',
+	}: Props = $props();
+
+	let open = $state(false);
+
+	let positionStyles = $derived(
+		position === 'bottom-right'
+			? 'right: 1rem; bottom: 1rem;'
+			: 'left: 1rem; bottom: 1rem;'
+	);
+
+	let panelStyles = $derived(
+		position === 'bottom-right'
+			? 'right: 0; bottom: 3.5rem;'
+			: 'left: 0; bottom: 3.5rem;'
+	);
+</script>
+
+<div class="fixed z-50" style={positionStyles}>
+	{#if open}
+		<div class="absolute w-80 rounded-lg border border-border bg-background shadow-lg" style={panelStyles}>
+			<div class="flex items-center justify-between border-b border-border px-4 py-3">
+				<h3 class="text-sm font-semibold text-foreground">
+					<i class="fa-solid fa-comment mr-1.5 text-primary"></i>
+					Send Feedback
+				</h3>
+				<button
+					onclick={() => (open = false)}
+					class="text-foreground-tertiary transition-colors hover:text-foreground"
+					aria-label="Close feedback"
+				>
+					<i class="fa-solid fa-xmark"></i>
+				</button>
+			</div>
+			<div class="p-4">
+				<FeedbackForm
+					{apiKey}
+					{apiUrl}
+					{categories}
+					{userEmail}
+					onSuccess={() => {
+						setTimeout(() => (open = false), 2000);
+					}}
+				/>
+			</div>
+		</div>
+	{/if}
+
+	<button
+		onclick={() => (open = !open)}
+		class="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105"
+		aria-label="Send feedback"
+	>
+		<i class="fa-solid {open ? 'fa-xmark' : 'fa-comment'} text-lg"></i>
+	</button>
+</div>