lula2 0.0.5 → 0.0.6

package/src/lib/components/setup/index.ts

@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+export { default as SpreadsheetImport } from './SpreadsheetImport.svelte';
+export { default as ExistingControlSets } from './ExistingControlSets.svelte';

package/src/lib/components/ui/Dropdown.svelte

@@ -0,0 +1,107 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { fade } from 'svelte/transition';
+
+	import { ChevronDown } from 'carbon-icons-svelte';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		buttonLabel?: string;
+		buttonLabelClass?: string;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		buttonIcon?: any;
+		buttonClass?: string;
+		dropdownClass?: string;
+		iconClass?: string;
+		expandIconClass?: string;
+		isOpen?: boolean;
+		buttonContents?: Snippet;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		children?: any;
+		class?: string;
+	};
+
+	let {
+		buttonLabel = '',
+		buttonLabelClass = 'min-w-0 truncate',
+		buttonIcon = undefined,
+		buttonClass = '',
+		dropdownClass = '',
+		iconClass = '',
+		expandIconClass = '',
+		isOpen = $bindable(false),
+		children,
+		buttonContents,
+		class: propsClass = '',
+		...restProps
+	}: Props = $props();
+
+	// Toggle dropdown open/closed
+	function toggleDropdown() {
+		isOpen = !isOpen;
+	}
+</script>
+
+<div
+	class={twMerge(
+		'relative min-w-0 flex-shrink-0 text-left',
+		dropdownClass?.includes('inline-block') ? '' : 'block',
+		propsClass
+	)}
+	{...restProps}
+>
+	<button
+		onclick={toggleDropdown}
+		class={twMerge(
+			'btn relative flex   w-full items-center justify-between rounded-lg bg-gray-800 px-2 py-1 text-white hover:bg-gray-700 focus:bg-gray-700 md:px-4 md:py-2',
+			buttonClass
+		)}
+		data-testid="dropdown-button"
+		aria-label={buttonLabel}
+	>
+		{#if buttonContents}
+			{@render buttonContents()}
+		{:else}
+			<div class="flex min-w-0 items-center">
+				{#if buttonIcon}
+					{@const SvelteComponent = buttonIcon}
+					<div class={twMerge('mr-2 flex h-5 w-5 items-center justify-center', iconClass)}>
+						<SvelteComponent />
+					</div>
+				{/if}
+				<span class={buttonLabelClass}>{buttonLabel}</span>
+			</div>
+			<ChevronDown class={twMerge('ml-2 h-[12px] w-[12px]', expandIconClass)} />
+		{/if}
+	</button>
+
+	{#if isOpen}
+		<!-- full-screen invisible button mask - closes when clicking off dropdown without clicking underlying element -->
+		<button
+			class="fixed inset-0 z-40 m-0 border-none bg-transparent p-0"
+			aria-label="Close dropdown"
+			onclick={(e) => {
+				isOpen = false;
+				e.stopPropagation();
+			}}
+			onkeydown={(e) => {
+				// close on Enter, Space or Escape
+				if (e.key === 'Enter' || e.key === ' ' || e.key === 'Escape') {
+					isOpen = false;
+					e.preventDefault();
+					e.stopPropagation();
+				}
+			}}
+		></button>
+		<div
+			transition:fade={{ duration: 100 }}
+			class={`absolute right-0 z-100 mt-2 min-w-60 origin-top-right rounded-lg border border-gray-700 bg-gray-800 p-2 shadow-lg focus:outline-none ${dropdownClass}`}
+		>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

package/src/lib/components/ui/EmptyState.svelte

@@ -0,0 +1,80 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		description: string;
+		icon?: Snippet;
+		action?: Snippet;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let { title, description, icon, action, size = 'md' }: Props = $props();
+
+	const getSizeClasses = (size: string) => {
+		switch (size) {
+			case 'sm':
+				return {
+					container: 'py-6',
+					icon: 'h-8 w-8',
+					title: 'text-sm',
+					description: 'text-xs'
+				};
+			case 'lg':
+				return {
+					container: 'py-16',
+					icon: 'h-16 w-16',
+					title: 'text-lg',
+					description: 'text-base'
+				};
+			default: // md
+				return {
+					container: 'py-12',
+					icon: 'h-12 w-12',
+					title: 'text-base',
+					description: 'text-sm'
+				};
+		}
+	};
+
+	const classes = getSizeClasses(size);
+</script>
+
+<div class="text-center {classes.container}">
+	{#if icon}
+		<div class="mx-auto {classes.icon} mb-4 text-gray-400 dark:text-gray-500">
+			{@render icon()}
+		</div>
+	{:else}
+		<!-- Default icon -->
+		<svg
+			class="mx-auto {classes.icon} mb-4 text-gray-400 dark:text-gray-500"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+			/>
+		</svg>
+	{/if}
+
+	<h3 class="font-medium text-gray-900 dark:text-white {classes.title}">
+		{title}
+	</h3>
+	<p class="mt-2 text-gray-500 dark:text-gray-400 {classes.description}">
+		{description}
+	</p>
+
+	{#if action}
+		<div class="mt-6">
+			{@render action()}
+		</div>
+	{/if}
+</div>

package/src/lib/components/ui/FeatureToggle.svelte

@@ -0,0 +1,50 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	interface Props {
+		enabled: boolean;
+		label: string;
+		description?: string;
+		onToggle: (enabled: boolean) => void;
+	}
+
+	let { enabled = $bindable(), label, description, onToggle }: Props = $props();
+
+	function handleToggle() {
+		enabled = !enabled;
+		onToggle(enabled);
+	}
+</script>
+
+<div class="flex items-center justify-between py-3">
+	<div class="flex-1">
+		<div class="flex items-center">
+			<h3 class="text-sm font-medium text-gray-900 dark:text-white">
+				{label}
+			</h3>
+		</div>
+		{#if description}
+			<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+				{description}
+			</p>
+		{/if}
+	</div>
+
+	<button
+		type="button"
+		onclick={handleToggle}
+		class="{enabled
+			? 'bg-blue-600'
+			: 'bg-gray-200 dark:bg-gray-800'} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
+		role="switch"
+		aria-checked={enabled}
+	>
+		<span class="sr-only">{label}</span>
+		<span
+			class="{enabled
+				? 'translate-x-5'
+				: 'translate-x-0'} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+		></span>
+	</button>
+</div>

package/src/lib/components/ui/SearchBar.svelte

@@ -0,0 +1,73 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { complianceStore } from '$stores/compliance';
+
+	let searchInput = $state('');
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function debouncedSearch(term: string) {
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			complianceStore.setSearchTerm(term);
+		}, 300);
+	}
+
+	// Watch for changes to searchInput and trigger debounced search
+	$effect(() => {
+		debouncedSearch(searchInput);
+	});
+
+	function clearSearch() {
+		searchInput = '';
+		complianceStore.setSearchTerm('');
+	}
+</script>
+
+<div class="relative">
+	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+		<svg
+			class="w-5 h-5 text-gray-400 dark:text-gray-500"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			></path>
+		</svg>
+	</div>
+
+	<input
+		bind:value={searchInput}
+		type="text"
+		placeholder="Search controls and mappings..."
+		class="block w-full pl-10 pr-12 py-2 border border-gray-300 dark:border-gray-600 rounded-lg leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+	/>
+
+	{#if searchInput}
+		<button
+			onclick={clearSearch}
+			class="absolute inset-y-0 right-0 pr-3 flex items-center"
+			aria-label="Clear search"
+		>
+			<svg
+				class="w-5 h-5 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				></path>
+			</svg>
+		</button>
+	{/if}
+</div>

package/src/lib/components/ui/StatusBadge.svelte

@@ -0,0 +1,79 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	interface Props {
+		status: string;
+		type?: 'control' | 'mapping' | 'compliance';
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let { status, type = 'control', size = 'sm' }: Props = $props();
+
+	const getStatusColor = (status: string, type: string) => {
+		if (!status) {
+			return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+		}
+
+		if (type === 'mapping') {
+			switch (status.toLowerCase()) {
+				case 'implemented':
+					return 'bg-green-500 text-white';
+				case 'verified':
+					return 'bg-blue-500 text-white';
+				case 'planned':
+					return 'bg-yellow-500 text-white';
+				default:
+					return 'bg-gray-600 text-white';
+			}
+		}
+
+		if (type === 'compliance') {
+			switch (status.toLowerCase()) {
+				case 'compliant':
+					return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+				case 'non-compliant':
+					return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+				case 'not assessed':
+					return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+				default:
+					return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+			}
+		}
+
+		// Default control status colors
+		switch (status.toLowerCase()) {
+			case 'implemented':
+				return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+			case 'planned':
+				return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+			case 'not implemented':
+				return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+			default:
+				return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+		}
+	};
+
+	const getSizeClass = (size: string) => {
+		switch (size) {
+			case 'sm':
+				return 'px-2.5 py-0.5 text-xs';
+			case 'md':
+				return 'px-3 py-1 text-sm';
+			case 'lg':
+				return 'px-4 py-2 text-base';
+			default:
+				return 'px-2.5 py-0.5 text-xs';
+		}
+	};
+</script>
+
+<span
+	class="inline-flex items-center rounded-lg font-medium shadow-sm {getStatusColor(
+		status,
+		type
+	)} {getSizeClass(size)}"
+	title={`${type} status: ${status}`}
+>
+	{status}
+</span>

package/src/lib/components/ui/TabNavigation.svelte

@@ -0,0 +1,48 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	interface Tab {
+		id: string;
+		label: string;
+		icon?: any;
+		count?: number;
+		disabled?: boolean;
+	}
+
+	interface Props {
+		tabs: Tab[];
+		active: string;
+		onSelect: (tabId: string) => void;
+	}
+
+	let { tabs, active, onSelect }: Props = $props();
+</script>
+
+<nav class="border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+	<div class="flex space-x-4">
+		{#each tabs as tab}
+			<button
+				onclick={() => !tab.disabled && onSelect(tab.id)}
+				disabled={tab.disabled}
+				class="inline-flex items-center py-4 border-b-2 font-medium text-sm transition-colors px-4 {active ===
+				tab.id
+					? 'border-blue-500 text-blue-600 dark:text-blue-400'
+					: tab.disabled
+						? 'border-transparent text-gray-300 dark:text-gray-600 cursor-not-allowed'
+						: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}"
+			>
+				{#if tab.icon}
+					{@const IconComponent = tab.icon}
+					<IconComponent class="w-4 h-4 mr-2" />
+				{/if}
+				{tab.label}
+				{#if tab.count !== undefined}
+					<span class="ml-1 text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full">
+						{tab.count}
+					</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+</nav>

package/src/lib/components/ui/Tooltip.svelte

@@ -0,0 +1,120 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+
+	type Props = {
+		content: string;
+		placement?: 'top' | 'bottom' | 'left' | 'right';
+		maxWidth?: string;
+		multiline?: boolean;
+		children: () => any;
+	};
+
+	let {
+		content,
+		placement = 'top',
+		maxWidth = '300px',
+		multiline = false,
+		children
+	}: Props = $props();
+
+	let tooltip: HTMLDivElement | null = $state(null);
+	let trigger: HTMLDivElement;
+	let isVisible = $state(false);
+	let position = $state({ x: 0, y: 0 });
+
+	function calculatePosition() {
+		if (!trigger || !tooltip) return;
+
+		const triggerRect = trigger.getBoundingClientRect();
+		const tooltipRect = tooltip.getBoundingClientRect();
+		const spacing = 8;
+
+		let x = 0;
+		let y = 0;
+
+		switch (placement) {
+			case 'top':
+				x = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+				y = triggerRect.top - tooltipRect.height - spacing;
+				break;
+			case 'bottom':
+				x = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+				y = triggerRect.bottom + spacing;
+				break;
+			case 'left':
+				x = triggerRect.left - tooltipRect.width - spacing;
+				y = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+				break;
+			case 'right':
+				x = triggerRect.right + spacing;
+				y = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+				break;
+		}
+
+		// Keep tooltip within viewport
+		const padding = 8;
+		x = Math.max(padding, Math.min(x, window.innerWidth - tooltipRect.width - padding));
+		y = Math.max(padding, Math.min(y, window.innerHeight - tooltipRect.height - padding));
+
+		position = { x, y };
+	}
+
+	function showTooltip() {
+		isVisible = true;
+		requestAnimationFrame(calculatePosition);
+	}
+
+	function hideTooltip() {
+		isVisible = false;
+	}
+
+	onMount(() => {
+		window.addEventListener('scroll', calculatePosition, true);
+		window.addEventListener('resize', calculatePosition);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('scroll', calculatePosition, true);
+		window.removeEventListener('resize', calculatePosition);
+	});
+</script>
+
+<div
+	bind:this={trigger}
+	class="inline-flex items-center"
+	onmouseenter={showTooltip}
+	onmouseleave={hideTooltip}
+	onfocus={showTooltip}
+	onblur={hideTooltip}
+	role="button"
+	tabindex="0"
+>
+	{@render children?.()}
+</div>
+
+{#if isVisible}
+	<div
+		bind:this={tooltip}
+		class="fixed z-50 px-3 py-2 text-sm text-white bg-gray-900 dark:bg-gray-700 rounded-md shadow-lg pointer-events-none transition-opacity duration-200 {multiline
+			? 'whitespace-pre-wrap'
+			: 'whitespace-nowrap'}"
+		style="left: {position.x}px; top: {position.y}px; max-width: {maxWidth};"
+		role="tooltip"
+	>
+		{content}
+		<div
+			class="absolute w-2 h-2 bg-gray-900 dark:bg-gray-700 transform rotate-45"
+			class:bottom-[-4px]={placement === 'top'}
+			class:left-[50%]={placement === 'top' || placement === 'bottom'}
+			class:translate-x-[-50%]={placement === 'top' || placement === 'bottom'}
+			class:top-[-4px]={placement === 'bottom'}
+			class:right-[-4px]={placement === 'left'}
+			class:top-[50%]={placement === 'left' || placement === 'right'}
+			class:translate-y-[-50%]={placement === 'left' || placement === 'right'}
+			class:left-[-4px]={placement === 'right'}
+		></div>
+	</div>
+{/if}

package/src/lib/components/ui/index.ts

@@ -0,0 +1,10 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as FeatureToggle } from './FeatureToggle.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as TabNavigation } from './TabNavigation.svelte';
+export { default as Tooltip } from './Tooltip.svelte';