lula2 0.0.5 → 0.0.6

package/src/lib/components/controls/tabs/OverviewTab.svelte

@@ -0,0 +1,151 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { Control, FieldSchema } from '$lib/types';
+	import { FieldRenderer } from '../renderers';
+
+	interface Props {
+		control: Control;
+		fieldSchema: Record<string, FieldSchema>;
+	}
+
+	let { control, fieldSchema }: Props = $props();
+
+	// Get fields for overview tab
+	function getOverviewFields(): Array<[string, FieldSchema]> {
+		return Object.entries(fieldSchema)
+			.filter(([fieldName, field]) => {
+				// Exclude id and family fields from overview since they're in the header
+				if (fieldName === 'id' || fieldName === 'family') {
+					return false;
+				}
+				// Map category to tab if tab not explicitly set
+				const fieldTab = field.tab || getDefaultTabForCategory(field.category);
+				return fieldTab === 'overview' && field.visible;
+			})
+			.sort((a, b) => a[1].display_order - b[1].display_order);
+	}
+
+	function getDefaultTabForCategory(category: string): 'overview' | 'implementation' | 'custom' {
+		switch (category) {
+			case 'core':
+			case 'metadata':
+				return 'overview';
+			case 'compliance':
+			case 'content':
+				return 'implementation';
+			default:
+				return 'custom';
+		}
+	}
+
+	// Helper to determine field layout class based on field type
+	function getFieldLayoutClass(field: FieldSchema): string {
+		// Textareas and long text fields get full width
+		if (field.ui_type === 'textarea' || field.ui_type === 'long_text') {
+			return 'col-span-full';
+		}
+		// Medium text fields also get full width
+		if (field.ui_type === 'medium_text' && field.max_length && field.max_length > 100) {
+			return 'col-span-full';
+		}
+		// Dropdowns and short fields can be side by side
+		if (
+			field.ui_type === 'select' ||
+			field.ui_type === 'boolean' ||
+			field.ui_type === 'date' ||
+			field.ui_type === 'number' ||
+			(field.ui_type === 'short_text' && field.max_length && field.max_length <= 50)
+		) {
+			return 'col-span-1';
+		}
+		// Default to full width for everything else
+		return 'col-span-full';
+	}
+
+	// Helper to group fields by layout type
+	function groupFieldsForLayout(fields: Array<[string, FieldSchema]>) {
+		const groups: Array<Array<[string, FieldSchema]>> = [];
+		let currentGroup: Array<[string, FieldSchema]> = [];
+
+		for (const field of fields) {
+			const layoutClass = getFieldLayoutClass(field[1]);
+
+			if (layoutClass === 'col-span-full') {
+				// Full width fields go in their own group
+				if (currentGroup.length > 0) {
+					groups.push(currentGroup);
+					currentGroup = [];
+				}
+				groups.push([field]);
+			} else {
+				// Half width fields can be grouped
+				currentGroup.push(field);
+				if (currentGroup.length === 2) {
+					groups.push(currentGroup);
+					currentGroup = [];
+				}
+			}
+		}
+
+		// Add any remaining fields
+		if (currentGroup.length > 0) {
+			groups.push(currentGroup);
+		}
+
+		return groups;
+	}
+
+	const overviewFields = $derived(getOverviewFields());
+	const fieldGroups = $derived(groupFieldsForLayout(overviewFields));
+</script>
+
+<!-- Readonly Overview Tab with Clean Styling -->
+<div class="space-y-8">
+	{#if overviewFields.length > 0}
+		<div class="space-y-4">
+			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
+				<div class="space-y-8">
+					{#each fieldGroups as fieldGroup}
+						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+							{#each fieldGroup as [fieldName, field]}
+								<div class={getFieldLayoutClass(field)}>
+									<FieldRenderer 
+										{fieldName} 
+										{field} 
+										value={control[fieldName]} 
+										readonly={true} 
+									/>
+								</div>
+							{/each}
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{:else}
+		<div class="text-center py-12">
+			<p class="text-gray-500 dark:text-gray-400">No overview fields available</p>
+		</div>
+	{/if}
+
+	<!-- Control Properties -->
+	{#if control.properties && Object.keys(control.properties).length > 0}
+		<div class="space-y-4">
+			<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Control Properties</h3>
+			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
+				<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+					{#each Object.entries(control.properties) as [key, value]}
+						<FieldRenderer 
+							fieldName={key.replace(/_/g, ' ')} 
+							field={null} 
+							value={typeof value === 'object' ? JSON.stringify(value, null, 2) : value} 
+							readonly={true} 
+						/>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/src/lib/components/controls/tabs/TimelineTab.svelte

@@ -0,0 +1,41 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { TimelineItem } from '$components/version-control';
+	import type { Control } from '$lib/types';
+	import { EmptyState } from '../../ui';
+
+	interface Props {
+		control: Control;
+		timeline?: any; // Timeline type from control.timeline
+	}
+
+	let { control, timeline }: Props = $props();
+
+	const commits = $derived(timeline?.commits || []);
+</script>
+
+<div>
+	{#if !timeline}
+		<EmptyState
+			title="No timeline data available"
+			description="Timeline information is not available for this control."
+			size="lg"
+		/>
+	{:else if commits.length > 0}
+		<div class="mb-4">
+			<div class="space-y-6">
+				{#each commits as commit, index}
+					<TimelineItem {commit} showConnector={index < commits.length - 1} />
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<EmptyState
+			title="No activity history found"
+			description="This control and its mapping files are new and haven't been committed to git yet."
+			size="lg"
+		/>
+	{/if}
+</div>

package/src/lib/components/controls/tabs/index.ts

@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+export { default as CustomFieldsTab } from './CustomFieldsTab.svelte';
+export { default as ImplementationTab } from './ImplementationTab.svelte';
+export { default as MappingsTab } from './MappingsTab.svelte';
+export { default as OverviewTab } from './OverviewTab.svelte';
+export { default as TimelineTab } from './TimelineTab.svelte';

package/src/lib/components/controls/utils/ProcessedTextRenderer.svelte

@@ -0,0 +1,63 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { processMultilineText } from './textProcessor';
+	
+	interface Props {
+		text: string;
+	}
+	
+	let { text }: Props = $props();
+	
+	const sections = $derived(processMultilineText(text));
+</script>
+
+<div class="space-y-3">
+	{#each sections as section}
+		{#if section.type === 'header'}
+			<h4 class="font-semibold text-gray-900 dark:text-gray-100 mt-4 first:mt-0">
+				{section.content}
+			</h4>
+		{:else if section.type === 'table' && section.data?.rows}
+			<div class="overflow-x-auto">
+				<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+					<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+						{#each section.data.rows as row, i}
+							<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+								{#each row.columns as column, j}
+									<td class="px-3 py-2 text-sm {j === 0 ? 'font-medium text-gray-900 dark:text-gray-100' : 'text-gray-600 dark:text-gray-400'}">
+										{#if column.startsWith('CCI-')}
+											<code class="px-1.5 py-0.5 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
+												{column}
+											</code>
+										{:else if /^[A-Z]{2}-\d+/.test(column)}
+											<code class="px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">
+												{column}
+											</code>
+										{:else}
+											{column}
+										{/if}
+									</td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{:else if section.type === 'list' && section.data?.items}
+			<ul class="space-y-1 ml-4">
+				{#each section.data.items as item}
+					<li class="flex items-start">
+						<span class="text-gray-400 dark:text-gray-500 mr-2 flex-shrink-0">•</span>
+						<span class="text-gray-600 dark:text-gray-400 text-sm">{item}</span>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<p class="text-gray-600 dark:text-gray-400 text-sm whitespace-pre-wrap">
+				{section.content}
+			</p>
+		{/if}
+	{/each}
+</div>

package/src/lib/components/controls/utils/textProcessor.ts

@@ -0,0 +1,164 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+export interface ProcessedSection {
+	type: 'header' | 'paragraph' | 'table' | 'list';
+	content: string;
+	data?: any;
+}
+
+export interface TableRow {
+	columns: string[];
+}
+
+export function processMultilineText(text: string): ProcessedSection[] {
+	if (!text) return [];
+
+	// First check if the entire content is a table
+	if (isEntireContentTable(text)) {
+		return processAsTable(text);
+	}
+
+	const lines = text.split('\n');
+	const sections: ProcessedSection[] = [];
+	let currentSection: string[] = [];
+	let currentType: 'paragraph' | 'list' = 'paragraph';
+
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		const trimmedLine = line.trim();
+
+		// Check for empty lines
+		if (!trimmedLine) {
+			// Process accumulated section if any
+			if (currentSection.length > 0) {
+				flushSection();
+			}
+			continue;
+		}
+
+		// Check for headers (lines ending with colon and followed by content)
+		if (trimmedLine.endsWith(':') && i < lines.length - 1) {
+			const nextLine = lines[i + 1]?.trim();
+			// Only treat as header if next line has content or is followed by content
+			if (nextLine || (i + 2 < lines.length && lines[i + 2]?.trim())) {
+				// Flush any accumulated section
+				if (currentSection.length > 0) {
+					flushSection();
+				}
+
+				// Add header
+				sections.push({
+					type: 'header',
+					content: trimmedLine.slice(0, -1) // Remove the colon
+				});
+				continue;
+			}
+		}
+
+		// Check for list items
+		if (isListItem(trimmedLine)) {
+			if (currentType !== 'list') {
+				// Flush previous section if not list
+				if (currentSection.length > 0) {
+					flushSection();
+				}
+				currentType = 'list';
+			}
+			currentSection.push(trimmedLine);
+			continue;
+		}
+
+		// Default to paragraph
+		if (currentType === 'list') {
+			// Flush previous section if switching from list to paragraph
+			if (currentSection.length > 0) {
+				flushSection();
+			}
+			currentType = 'paragraph';
+		}
+
+		currentSection.push(line); // Preserve original line formatting for paragraphs
+	}
+
+	// Flush any remaining section
+	if (currentSection.length > 0) {
+		flushSection();
+	}
+
+	function flushSection() {
+		if (currentType === 'list') {
+			const items = currentSection.map(line => {
+				// Remove common list prefixes
+				return line.replace(/^[-*•]\s*/, '')
+					.replace(/^\d+\.\s*/, '')
+					.replace(/^[a-zA-Z]\.\s*/, '');
+			});
+
+			sections.push({
+				type: 'list',
+				content: currentSection.join('\n'),
+				data: { items }
+			});
+		} else {
+			sections.push({
+				type: 'paragraph',
+				content: currentSection.join('\n').trim()
+			});
+		}
+
+		currentSection = [];
+	}
+
+	return sections;
+}
+
+function isEntireContentTable(text: string): boolean {
+	const lines = text.split('\n').filter(line => line.trim());
+	if (lines.length === 0) return false;
+
+	// Check if ALL non-empty lines are table rows
+	return lines.every(line => isTableRow(line.trim()));
+}
+
+function processAsTable(text: string): ProcessedSection[] {
+	const lines = text.split('\n').filter(line => line.trim());
+	const rows: TableRow[] = lines.map(line => ({
+		columns: line.split(',').map(col => col.trim())
+	}));
+
+	return [{
+		type: 'table',
+		content: text,
+		data: { rows }
+	}];
+}
+
+function isTableRow(line: string): boolean {
+	// Check if line contains comma-separated values
+	// Must have at least 2 commas and consistent structure
+	const parts = line.split(',');
+	if (parts.length < 2) return false;
+
+	// Common patterns for table data:
+	// - Control IDs (AC-10.1)
+	// - CCI codes (CCI-000054)
+	// - Short descriptive text
+	const hasControlPattern = /^[A-Z]{2}-\d+(\.\d+)?/.test(parts[0].trim());
+	const hasCCIPattern = parts.some(part => /^CCI-\d+/.test(part.trim()));
+
+	// If it looks like structured data with consistent separators
+	return hasControlPattern || hasCCIPattern ||
+		(parts.length >= 2 && parts.every(p => p.trim().length > 0 && p.trim().length < 100));
+}
+
+function isListItem(line: string): boolean {
+	// Check for common list patterns
+	return /^[-*•]\s+/.test(line) || // Bullet points
+		/^\d+\.\s+/.test(line) || // Numbered lists
+		/^[a-zA-Z]\.\s+/.test(line) || // Letter lists
+		/^\[SELECT FROM:/.test(line) || // Special NIST format
+		/^Examine:/.test(line) ||
+		/^Interview:/.test(line) ||
+		/^Test:/.test(line);
+}