lula2 0.0.5 → 0.0.6

package/src/lib/components/controls/renderers/EditableFieldRenderer.svelte

@@ -0,0 +1,103 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { FieldSchema } from '$lib/types';
+
+	interface Props {
+		fieldName: string;
+		field: FieldSchema;
+		value: any;
+		onChange: () => void;
+	}
+
+	let { fieldName, field, value = $bindable(), onChange }: Props = $props();
+
+	const displayName = $derived(
+		field.original_name || fieldName.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
+	);
+
+	// Generate unique ID for form control
+	const fieldId = $derived(`field-${fieldName}-${Math.random().toString(36).substr(2, 9)}`);
+</script>
+
+<div class="space-y-2">
+	<label for={fieldId} class="text-sm font-medium text-gray-700 dark:text-gray-300">
+		{displayName}
+		{#if field.required}
+			<span class="text-red-500">*</span>
+		{/if}
+	</label>
+
+	{#if field.ui_type === 'select' && field.options}
+		<select
+			id={fieldId}
+			bind:value
+			disabled={!field.editable}
+			onchange={onChange}
+			class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400"
+		>
+			<option value="">-- Select --</option>
+			{#each field.options as option}
+				<option value={option}>{option}</option>
+			{/each}
+		</select>
+	{:else if field.ui_type === 'textarea' || field.ui_type === 'long_text'}
+		<textarea
+			id={fieldId}
+			bind:value
+			disabled={!field.editable}
+			oninput={onChange}
+			rows="8"
+			class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed resize-y min-h-[120px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400"
+			placeholder={field.examples?.[0] || ''}
+		></textarea>
+	{:else if field.ui_type === 'boolean'}
+		<div class="flex items-center">
+			<input
+				id={fieldId}
+				type="checkbox"
+				bind:checked={value}
+				disabled={!field.editable}
+				onchange={onChange}
+				class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+			/>
+			<label class="ml-2 text-sm text-gray-900 dark:text-gray-300" for={fieldId}>
+				{value ? 'Yes' : 'No'}
+			</label>
+		</div>
+	{:else if field.ui_type === 'date'}
+		<input
+			id={fieldId}
+			type="date"
+			bind:value
+			disabled={!field.editable}
+			onchange={onChange}
+			class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400"
+		/>
+	{:else if field.ui_type === 'number'}
+		<input
+			id={fieldId}
+			type="number"
+			bind:value
+			disabled={!field.editable}
+			oninput={onChange}
+			class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400"
+		/>
+	{:else}
+		<!-- Default to text input -->
+		<input
+			id={fieldId}
+			type="text"
+			bind:value
+			disabled={!field.editable}
+			oninput={onChange}
+			class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400"
+			placeholder={field.examples?.[0] || ''}
+		/>
+	{/if}
+
+	{#if field.is_array}
+		<p class="text-xs text-gray-500 dark:text-gray-400">This field supports multiple values</p>
+	{/if}
+</div>

package/src/lib/components/controls/renderers/FieldRenderer.svelte

@@ -0,0 +1,49 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { FieldSchema } from '$lib/types';
+	import ProcessedTextRenderer from '../utils/ProcessedTextRenderer.svelte';
+
+	interface Props {
+		fieldName: string;
+		field: FieldSchema | null;
+		value: any;
+		readonly?: boolean;
+	}
+
+	let { fieldName, field, value, readonly = true }: Props = $props();
+
+	const displayName = $derived(
+		field?.original_name || fieldName.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
+	);
+	
+	// Determine if this is a multiline text field that should be processed
+	const shouldProcessText = $derived(
+		field && 
+		(field.ui_type === 'textarea' || field.ui_type === 'long_text') &&
+		typeof value === 'string' &&
+		value.includes('\n')
+	);
+</script>
+
+<div class="space-y-2">
+	<div class="text-sm font-medium text-gray-500 dark:text-gray-400">
+		{displayName}
+	</div>
+	<div class="text-gray-900 dark:text-white font-medium">
+		{#if value === null || value === undefined || value === ''}
+			<span class="text-gray-400 dark:text-gray-500 italic">Not specified</span>
+		{:else if typeof value === 'boolean'}
+			<span class="capitalize">{value ? 'Yes' : 'No'}</span>
+		{:else if Array.isArray(value)}
+			<span>{value.join(', ')}</span>
+		{:else if shouldProcessText}
+			<div class="border-l-2 border-gray-200 dark:border-gray-700 pl-4">
+				<ProcessedTextRenderer text={value} />
+			</div>
+		{:else}
+			<span class="whitespace-pre-line">{value}</span>
+		{/if}
+	</div>
+</div>

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

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

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

@@ -0,0 +1,130 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { Control, FieldSchema } from '$lib/types';
+	import { EditableFieldRenderer } from '../renderers';
+
+	interface Props {
+		control: Control;
+		fieldSchema: Record<string, FieldSchema>;
+		onFieldChange: (fieldName: string, value: any) => void;
+	}
+
+	let { control, fieldSchema, onFieldChange }: Props = $props();
+
+	// Get fields for custom tab
+	function getCustomFields(): Array<[string, FieldSchema]> {
+		return Object.entries(fieldSchema)
+			.filter(([_, field]) => {
+				const fieldTab = field.tab || getDefaultTabForCategory(field.category);
+				return fieldTab === 'custom' && 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 customFields = $derived(getCustomFields());
+	const fieldGroups = $derived(groupFieldsForLayout(customFields));
+</script>
+
+<div class="space-y-8">
+	{#if customFields.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="text-sm text-gray-500 dark:text-gray-400 mb-4">
+					Additional fields specific to your organization
+				</div>
+				<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)}>
+									<EditableFieldRenderer 
+										{fieldName} 
+										{field} 
+										bind:value={control[fieldName]}
+										onChange={() => onFieldChange(fieldName, control[fieldName])}
+									/>
+								</div>
+							{/each}
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{:else}
+		<div class="text-center py-12">
+			<p class="text-gray-500 dark:text-gray-400">No custom fields configured</p>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,127 @@
+<!-- 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 implementation tab
+	function getImplementationFields(): Array<[string, FieldSchema]> {
+		return Object.entries(fieldSchema)
+			.filter(([_, field]) => {
+				const fieldTab = field.tab || getDefaultTabForCategory(field.category);
+				return fieldTab === 'implementation' && 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 implementationFields = $derived(getImplementationFields());
+	const fieldGroups = $derived(groupFieldsForLayout(implementationFields));
+</script>
+
+<!-- Readonly Implementation Tab with Clean Styling -->
+<div class="space-y-8">
+	{#if implementationFields.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 implementation fields available</p>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,182 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { Control, Mapping } from '$lib/types';
+	import { wsClient } from '$lib/websocket';
+	import { Add, Document } from 'carbon-icons-svelte';
+	import MappingCard from '../MappingCard.svelte';
+	import MappingForm from '../MappingForm.svelte';
+
+	interface Props {
+		control: Control;
+		mappings: Mapping[];
+	}
+
+	let { control, mappings }: Props = $props();
+
+	// Component state
+	let showNewMappingForm = $state(false);
+	let editingMapping = $state<Mapping | null>(null);
+
+	// Form state
+	let newMappingData = $state({
+		justification: '',
+		status: 'planned' as 'planned' | 'implemented' | 'verified',
+		source_entries: [] as { location: string; shasum?: string }[]
+	});
+
+	// Event handlers
+	async function handleCreateMapping(data: typeof newMappingData) {
+		try {
+			const mappingData = {
+				control_id: control.id,
+				justification: data.justification,
+				status: data.status,
+				source_entries: data.source_entries,
+				uuid: '' // Will be generated by backend
+			};
+
+			await wsClient.createMapping(mappingData);
+			resetMappingForm();
+		} catch (error) {
+			console.error('Failed to create mapping:', error);
+		}
+	}
+
+	function cancelNewMapping() {
+		resetMappingForm();
+	}
+
+	function resetMappingForm() {
+		newMappingData = {
+			justification: '',
+			status: 'planned',
+			source_entries: []
+		};
+		showNewMappingForm = false;
+		editingMapping = null;
+	}
+
+	function startEditMapping(mapping: Mapping) {
+		editingMapping = { ...mapping };
+		showNewMappingForm = true;
+		newMappingData = {
+			justification: mapping.justification,
+			status: mapping.status,
+			source_entries: mapping.source_entries || []
+		};
+	}
+
+	async function handleUpdateMapping(data: typeof newMappingData) {
+		if (!editingMapping) return;
+
+		try {
+			const updatedMapping = {
+				...editingMapping,
+				justification: data.justification,
+				status: data.status,
+				source_entries: data.source_entries
+			};
+
+			await wsClient.updateMapping(updatedMapping);
+			resetMappingForm();
+		} catch (error) {
+			console.error('Failed to update mapping:', error);
+		}
+	}
+
+	async function handleDeleteMapping(uuid: string) {
+		try {
+			await wsClient.deleteMapping(uuid);
+		} catch (error) {
+			console.error('Failed to delete mapping:', error);
+		}
+	}
+</script>
+
+<div class="space-y-6">
+	<!-- Existing Mappings -->
+	{#if mappings.length > 0}
+		<div class="space-y-4">
+			{#each mappings as mapping}
+				{#if editingMapping && editingMapping.uuid === mapping.uuid}
+					<!-- Edit Form in place of the mapping being edited -->
+					<div
+						class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm"
+					>
+						<MappingForm
+							initialData={newMappingData}
+							onSubmit={handleUpdateMapping}
+							onCancel={cancelNewMapping}
+							submitLabel="Update Mapping"
+						/>
+					</div>
+				{:else}
+					<MappingCard
+						{mapping}
+						showActions={true}
+						onEdit={startEditMapping}
+						onDelete={handleDeleteMapping}
+					/>
+				{/if}
+			{/each}
+		</div>
+		
+		<!-- Add New Mapping Button or Form -->
+		{#if showNewMappingForm && !editingMapping}
+			<!-- New Mapping Form appears after the button -->
+			<div
+				class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm"
+			>
+				<MappingForm
+					initialData={newMappingData}
+					onSubmit={handleCreateMapping}
+					onCancel={cancelNewMapping}
+					submitLabel="Create Mapping"
+				/>
+			</div>
+		{:else if !editingMapping}
+			<button
+				onclick={() => (showNewMappingForm = true)}
+				class="w-full p-6 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl hover:border-blue-400 dark:hover:border-blue-500 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
+			>
+				<div class="flex items-center justify-center text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400">
+					<Add class="w-5 h-5 mr-2" />
+					<span class="text-sm font-medium">Add New Mapping</span>
+				</div>
+			</button>
+		{/if}
+	{:else}
+		{#if showNewMappingForm}
+			<!-- New Mapping Form for empty state -->
+			<div
+				class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm"
+			>
+				<MappingForm
+					initialData={newMappingData}
+					onSubmit={handleCreateMapping}
+					onCancel={cancelNewMapping}
+					submitLabel="Create Mapping"
+				/>
+			</div>
+		{:else}
+			<!-- Empty State with integrated Add Button -->
+			<div class="text-center py-12">
+				<div class="mx-auto w-16 h-16 mb-4 text-gray-400 dark:text-gray-500">
+					<Document class="w-full h-full" />
+				</div>
+				<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No mappings yet</h3>
+				<p class="text-gray-500 dark:text-gray-400 mb-6">Create your first mapping for this control.</p>
+				
+				<button
+					onclick={() => (showNewMappingForm = true)}
+					class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+				>
+					<Add class="w-4 h-4 mr-2" />
+					Add New Mapping
+				</button>
+			</div>
+		{/if}
+	{/if}
+</div>