@makolabs/ripple 1.2.3 → 1.2.4

package/README.md

@@ -560,3 +560,80 @@ You can still import specific component types when needed:
 
 <Button {...myButton}>Custom Button</Button>
 ```
+
+## Testing
+
+Ripple UI uses [Vitest](https://vitest.dev/) for unit and component testing. The test suite includes tests for core library components using Svelte 5's native testing APIs.
+
+### Running Tests Locally
+
+Run all tests once:
+
+```bash
+npm run test:unit -- --run
+```
+
+Run tests in watch mode (for development):
+
+```bash
+npm run test:unit
+```
+
+Run all tests (unit + e2e):
+
+```bash
+npm test
+```
+
+### Writing Tests
+
+Component tests use Svelte 5's `mount` and `unmount` APIs for testing components. Here's an example test for a Button component:
+
+```typescript
+import { flushSync, mount, unmount } from 'svelte';
+import { expect, test } from 'vitest';
+import ButtonTestWrapper from './ButtonTestWrapper.svelte';
+
+test('renders as a button with slot content and respects disabled prop', () => {
+	const component = mount(ButtonTestWrapper, {
+		target: document.body,
+		props: {
+			disabled: true,
+			text: 'Click me'
+		}
+	});
+
+	const btn = document.body.querySelector('button') as HTMLButtonElement;
+	expect(btn).toBeTruthy();
+	expect(btn.disabled).toBe(true);
+	expect(btn.textContent).toContain('Click me');
+
+	unmount(component);
+});
+```
+
+For components with snippet props (like `children` or `footer`), create a test wrapper component that accepts simple props and renders them as slots.
+
+### Test Configuration
+
+Tests are configured using Vitest workspaces in `vite.config.ts`:
+
+- **Client tests**: Run in jsdom environment, include files matching `src/**/*.svelte.{test,spec}.{js,ts}`
+- **Server tests**: Run in node environment, include files matching `src/**/*.{test,spec}.{js,ts}` (excluding `.svelte` tests)
+
+The setup file `vitest-setup-client.ts` includes:
+
+- `@testing-library/jest-dom` matchers for enhanced assertions
+- `matchMedia` mock for jsdom compatibility with Svelte 5
+
+### Continuous Integration
+
+For CI environments (GitHub Actions, etc.), use:
+
+```yaml
+- name: Install dependencies
+  run: npm ci
+
+- name: Run tests
+  run: npm run test:unit -- --run
+```

package/dist/adapters/ai/OpenAIAdapter.js

@@ -107,10 +107,12 @@ graph TB
                 model: this.config.model,
                 input: messages,
                 max_output_tokens: this.config.maxTokens,
-                ...(thinkingMode && { reasoning: {
+                ...(thinkingMode && {
+                    reasoning: {
                         effort: 'medium',
                         summary: 'auto'
-                    } })
+                    }
+                })
             };
             // Call OpenAI API directly
             const response = await fetch(`${this.config.baseUrl}/responses`, {
@@ -142,15 +144,15 @@ graph TB
                 if (outputItem.type === 'reasoning' && outputItem.summary) {
                     // Extract reasoning summary text
                     reasoningContent = outputItem.summary
-                        .filter(s => s.type === 'summary_text')
-                        .map(s => s.text)
+                        .filter((s) => s.type === 'summary_text')
+                        .map((s) => s.text)
                         .join('');
                 }
                 else if (outputItem.type === 'message' && outputItem.content) {
                     // Extract message content text
                     aiResponseContent = outputItem.content
-                        .filter(c => c.type === 'output_text')
-                        .map(c => c.text)
+                        .filter((c) => c.type === 'output_text')
+                        .map((c) => c.text)
                         .join('');
                 }
             }
@@ -210,10 +212,12 @@ graph TB
                 input: messages,
                 stream: true,
                 max_output_tokens: this.config.maxTokens,
-                ...(thinkingMode && { reasoning: {
+                ...(thinkingMode && {
+                    reasoning: {
                         effort: 'medium',
                         summary: 'auto'
-                    } })
+                    }
+                })
             };
             // Call OpenAI API with streaming
             const response = await fetch(`${this.config.baseUrl}/responses`, {
@@ -298,7 +302,7 @@ graph TB
                                         break;
                                     }
                                 }
-                                catch (e) {
+                                catch {
                                     // Skip invalid JSON chunks
                                     continue;
                                 }
@@ -361,6 +365,7 @@ graph TB
      * Get current configuration (without API key for security)
      */
     getConfig() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { apiKey, ...configWithoutKey } = this.config;
         return configWithoutKey;
     }
@@ -448,8 +453,8 @@ graph TB
                 for (const outputItem of data.output || []) {
                     if (outputItem.type === 'message' && outputItem.content) {
                         const content = outputItem.content
-                            .filter(c => c.type === 'output_text')
-                            .map(c => c.text)
+                            .filter((c) => c.type === 'output_text')
+                            .map((c) => c.text)
                             .join('');
                         return content.trim() || null;
                     }

package/dist/adapters/ai/types.d.ts

@@ -46,15 +46,15 @@ export interface AIAdapter {
     /**
      * Get memory manager if supported
      */
-    getMemoryManager?(): MemoryManager | null;
+    getMemoryManager?(): unknown | null;
     /**
      * Get memory statistics if supported
      */
-    getMemoryStats?(): any;
+    getMemoryStats?(): Record<string, unknown>;
     /**
      * Get essential context if supported
      */
-    getEssentialContext?(): any;
+    getEssentialContext?(): Record<string, unknown>;
     /**
      * Get context prompt if supported
      */

package/dist/adapters/storage/BaseAdapter.d.ts

@@ -9,7 +9,7 @@ export declare abstract class BaseAdapter implements StorageAdapter {
     abstract isConfigured(): Promise<boolean>;
     abstract authenticate?(): Promise<boolean>;
     import(file: FileItem, options: ImportOptions): Promise<ImportResult>;
-    getImportStatus(importId: string, fileKey: string): Promise<ImportStatus>;
+    getImportStatus(importId: string): Promise<ImportStatus>;
     batchImport(files: FileItem[], options: ImportOptions): Promise<BatchImportResult>;
     protected abstract getApiPath(): string;
     setReopenFlag(): void;

package/dist/adapters/storage/BaseAdapter.js

@@ -42,7 +42,7 @@ export class BaseAdapter {
             };
         }
     }
-    async getImportStatus(importId, fileKey) {
+    async getImportStatus(importId) {
         try {
             const response = await fetch(`/api/v1/uploads/${importId}`);
             if (!response.ok) {

package/dist/adapters/storage/S3Adapter.js

@@ -146,7 +146,7 @@ export class S3Adapter extends BaseAdapter {
     // Helper method to remove file extensions
     removeFileExtensions(filename) {
         // First remove .csv.gz if it exists
-        let name = filename.replace(/\.csv\.gz$/, '');
+        const name = filename.replace(/\.csv\.gz$/, '');
         // Then remove any remaining extension
         return name.replace(/\.[^/.]+$/, '');
     }
@@ -159,7 +159,7 @@ export class S3Adapter extends BaseAdapter {
         // Extract parts for display
         const pathWithoutBase = path.startsWith(this.basePath) ? path.slice(this.basePath.length) : '';
         // Add base path as the first item
-        let breadcrumbs = [{ name: 'S3', path: this.basePath, current: false, clickable: true }];
+        const breadcrumbs = [{ name: 'S3', path: this.basePath, current: false, clickable: true }];
         // Add current directory parts
         if (pathWithoutBase) {
             const parts = pathWithoutBase.split('/').filter(Boolean);

package/dist/ai/AIChatInterface.svelte

@@ -18,7 +18,6 @@
 		messages?: ChatMessage[];
 		class?: string;
 		context?: Record<string, unknown>;
-		showHeader?: boolean;
 	}
 
 	let {
@@ -31,12 +30,12 @@
 		loading = false,
 		messages = $bindable([]),
 		class: className = '',
-		context = {},
-		showHeader = true
+		context = {}
 	}: AIChatInterfaceProps = $props();
 
 	let userInput = $state('');
 	let isProcessing = $state(false);
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	let error = $state<string | null>(null);
 	let chatContainer: HTMLDivElement | undefined = $state();
 	let isAdapterConfigured = $state(false);
@@ -44,7 +43,7 @@
 	let thinkingMode = $state(true);
 	let availableHeight = $state('100vh');
 
-	const { sendButton, background } = $derived(
+	const { background } = $derived(
 		aiChatInterface({
 			color: color as
 				| 'default'
@@ -66,7 +65,7 @@
 	// Simple and reliable height calculation using native ResizeObserver
 	function findLayoutParent() {
 		if (!chatContainer) return null;
-		
+
 		let parent = chatContainer.parentElement;
 		while (parent && parent !== document.body) {
 			const style = window.getComputedStyle(parent);
@@ -96,20 +95,20 @@
 		if (typeof window !== 'undefined' && chatContainer) {
 			// Initial calculation
 			updateAvailableHeight();
-			
+
 			// Set up ResizeObserver for the layout parent
 			const layoutParent = findLayoutParent();
 			if (layoutParent && 'ResizeObserver' in window) {
 				const resizeObserver = new ResizeObserver(() => {
 					updateAvailableHeight();
 				});
-				
+
 				resizeObserver.observe(layoutParent);
-				
+
 				// Also observe viewport changes
 				const handleResize = () => updateAvailableHeight();
 				window.addEventListener('resize', handleResize);
-				
+
 				return () => {
 					resizeObserver.disconnect();
 					window.removeEventListener('resize', handleResize);
@@ -118,7 +117,7 @@
 				// Fallback for browsers without ResizeObserver
 				const handleResize = () => updateAvailableHeight();
 				window.addEventListener('resize', handleResize);
-				
+
 				return () => {
 					window.removeEventListener('resize', handleResize);
 				};
@@ -138,8 +137,6 @@
 		)
 	);
 
-
-
 	function addMessage(
 		type: 'chat' | 'action' | 'thinking',
 		content: string,
@@ -163,15 +160,20 @@
 		return message;
 	}
 
-	function updateMessageById(messageId: string, content: string, thinkingContent?: string, isThinkingComplete?: boolean): void {
-		messages = messages.map((msg) => 
-			msg.id === messageId 
-				? { 
-					...msg, 
-					content, 
-					...(thinkingContent !== undefined && { thinkingContent }),
-					...(isThinkingComplete !== undefined && { isThinkingComplete })
-				} 
+	function updateMessageById(
+		messageId: string,
+		content: string,
+		thinkingContent?: string,
+		isThinkingComplete?: boolean
+	): void {
+		messages = messages.map((msg) =>
+			msg.id === messageId
+				? {
+						...msg,
+						content,
+						...(thinkingContent !== undefined && { thinkingContent }),
+						...(isThinkingComplete !== undefined && { isThinkingComplete })
+					}
 				: msg
 		);
 	}
@@ -200,9 +202,9 @@
 							// Only create new streaming message if there's content or thinking content
 							if (response.content || response.thinkingContent) {
 								addMessage(
-									response.type, 
-									response.content, 
-									response.action, 
+									response.type,
+									response.content,
+									response.action,
 									response.messageId,
 									response.thinkingContent,
 									response.isThinkingComplete
@@ -211,7 +213,7 @@
 						} else {
 							// Update existing message
 							updateMessageById(
-								response.messageId, 
+								response.messageId,
 								response.content,
 								response.thinkingContent,
 								response.isThinkingComplete
@@ -228,9 +230,9 @@
 				const contextWithThinking = { ...context, thinkingMode } as Record<string, unknown>;
 				const response = await adapter.sendMessage(input, contextWithThinking);
 				addMessage(
-					response.type, 
-					response.content, 
-					response.action, 
+					response.type,
+					response.content,
+					response.action,
 					undefined,
 					response.thinkingContent,
 					response.isThinkingComplete
@@ -274,8 +276,6 @@
 		console.log('Thinking mode:', enabled ? 'enabled' : 'disabled');
 	}
 
-
-
 	// Check adapter configuration
 	$effect(() => {
 		if (adapter) {
@@ -301,7 +301,6 @@
 			}, 100);
 		}
 	});
-
 </script>
 
 <!-- Unified Layout Container -->
@@ -371,14 +370,14 @@
 
 		<!-- Chat Messages Area -->
 		<main class="flex flex-1 flex-col overflow-y-auto">
-			<div class="mx-auto w-full max-w-4xl space-y-4 px-6 py-4 flex-1">
+			<div class="mx-auto w-full max-w-4xl flex-1 space-y-4 px-6 py-4">
 				{#each messages as message (message.id)}
 					{@const isUser = message.content.startsWith('User:')}
 					{@const displayContent = isUser ? message.content.replace('User: ', '') : message.content}
 
 					<!-- Show thinking display for AI messages when thinking mode is enabled -->
 					{#if !isUser && message.thinkingContent}
-						<ThinkingDisplay 
+						<ThinkingDisplay
 							content={message.thinkingContent}
 							isComplete={message.isThinkingComplete || false}
 							class="mb-2"
@@ -426,7 +425,6 @@
 		{isProcessing}
 		{disabled}
 		{isAdapterConfigured}
-		{color}
 		hasMessages={messages.length > 0}
 		onSubmit={handleSubmit}
 		onKeyDown={handleKeyDown}

package/dist/ai/AIChatInterface.svelte.d.ts

@@ -11,7 +11,6 @@ interface AIChatInterfaceProps {
     messages?: ChatMessage[];
     class?: string;
     context?: Record<string, unknown>;
-    showHeader?: boolean;
 }
 declare const AiChatInterface: import("svelte").Component<AIChatInterfaceProps, {}, "messages">;
 type AiChatInterface = ReturnType<typeof AiChatInterface>;

package/dist/ai/AIChatInterfaceTestWrapper.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import AIChatInterface from './AIChatInterface.svelte';
+	import type { AIAdapter } from '../adapters/ai/index.js';
+	import type { ChatMessage, VariantColors } from '../index.js';
+
+	interface AIChatInterfaceTestWrapperProps {
+		adapter: AIAdapter;
+		title?: string;
+		subtitle?: string;
+		placeholder?: string;
+		color?: VariantColors;
+		disabled?: boolean;
+		loading?: boolean;
+		messages?: ChatMessage[];
+		class?: string;
+		context?: Record<string, unknown>;
+	}
+
+	let {
+		adapter,
+		messages = $bindable([]),
+		...restProps
+	}: AIChatInterfaceTestWrapperProps = $props();
+</script>
+
+<AIChatInterface {adapter} bind:messages {...restProps} />

package/dist/ai/AIChatInterfaceTestWrapper.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { AIAdapter } from '../adapters/ai/index.js';
+import type { ChatMessage, VariantColors } from '../index.js';
+interface AIChatInterfaceTestWrapperProps {
+    adapter: AIAdapter;
+    title?: string;
+    subtitle?: string;
+    placeholder?: string;
+    color?: VariantColors;
+    disabled?: boolean;
+    loading?: boolean;
+    messages?: ChatMessage[];
+    class?: string;
+    context?: Record<string, unknown>;
+}
+declare const AiChatInterfaceTestWrapper: import("svelte").Component<AIChatInterfaceTestWrapperProps, {}, "messages">;
+type AiChatInterfaceTestWrapper = ReturnType<typeof AiChatInterfaceTestWrapper>;
+export default AiChatInterfaceTestWrapper;

package/dist/ai/ChatInput.svelte

@@ -3,7 +3,6 @@
 	import { browser } from '$app/environment';
 	import { tv } from 'tailwind-variants';
 	import ComposeDropdown from './ComposeDropdown.svelte';
-	import type { VariantColors } from '../index.js';
 
 	interface ChatInputProps {
 		userInput: string;
@@ -12,7 +11,6 @@
 		isProcessing: boolean;
 		disabled: boolean;
 		isAdapterConfigured: boolean;
-		color?: VariantColors;
 		hasMessages: boolean;
 		thinkingMode?: boolean;
 		onSubmit: () => void;
@@ -27,7 +25,6 @@
 		isProcessing,
 		disabled,
 		isAdapterConfigured,
-		color = 'primary',
 		hasMessages,
 		thinkingMode = $bindable(),
 		onSubmit,
@@ -60,13 +57,12 @@
 		variants: {
 			state: {
 				disabled: 'bg-gray-200 text-gray-400 cursor-not-allowed',
-				enabled: 'text-white bg-primary-500 hover:bg-primary-600 focus:ring-2 focus:ring-primary-500/20'
+				enabled:
+					'text-white bg-primary-500 hover:bg-primary-600 focus:ring-2 focus:ring-primary-500/20'
 			}
 		}
 	});
 
-
-
 	const inputArea = tv({
 		variants: {
 			layout: {
@@ -96,12 +92,13 @@
 
 	const sendButtonClasses = $derived(
 		sendButton({
-			state: disabled || !isAdapterConfigured || isProcessing || !userInput.trim() ? 'disabled' : 'enabled'
+			state:
+				disabled || !isAdapterConfigured || isProcessing || !userInput.trim()
+					? 'disabled'
+					: 'enabled'
 		})
 	);
 
-
-
 	const inputAreaClasses = $derived(
 		inputArea({
 			layout: hasMessages ? 'chat' : 'empty'
@@ -158,12 +155,7 @@
 <div class={inputAreaClasses}>
 	<div class={inputContainerClasses}>
 		<!-- Compose Dropdown -->
-		<ComposeDropdown
-			{disabled}
-			{isAdapterConfigured}
-			bind:thinkingMode
-			{onThinkingToggle}
-		/>
+		<ComposeDropdown {disabled} {isAdapterConfigured} bind:thinkingMode {onThinkingToggle} />
 
 		<textarea
 			bind:this={textareaRef}

package/dist/ai/ChatInput.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { VariantColors } from '../index.js';
 interface ChatInputProps {
     userInput: string;
     textareaRef?: HTMLTextAreaElement;
@@ -6,7 +5,6 @@ interface ChatInputProps {
     isProcessing: boolean;
     disabled: boolean;
     isAdapterConfigured: boolean;
-    color?: VariantColors;
     hasMessages: boolean;
     thinkingMode?: boolean;
     onSubmit: () => void;

package/dist/ai/CodeRenderer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Highlight from 'svelte-highlight';
 	import { HighlightAuto } from 'svelte-highlight';
-	
+
 	// Import common languages
 	import javascript from 'svelte-highlight/languages/javascript';
 	import typescript from 'svelte-highlight/languages/typescript';
@@ -24,7 +24,7 @@
 	import powershell from 'svelte-highlight/languages/powershell';
 	import dockerfile from 'svelte-highlight/languages/dockerfile';
 	import markdown from 'svelte-highlight/languages/markdown';
-	
+
 	// Import a clean dark theme
 	import githubDark from 'svelte-highlight/styles/github-dark';
 
@@ -37,7 +37,7 @@
 	let { code, language = 'text', class: className = '' }: Props = $props();
 
 	// Language mapping
-	const languageMap: Record<string, any> = {
+	const languageMap: Record<string, unknown> = {
 		javascript: javascript,
 		js: javascript,
 		typescript: typescript,
@@ -97,32 +97,45 @@
 </script>
 
 <svelte:head>
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html githubDark}
 </svelte:head>
 
-<div class="code-renderer my-4 overflow-hidden rounded-lg border border-gray-700 bg-gray-900 {className}">
+<div
+	class="code-renderer my-4 overflow-hidden rounded-lg border border-gray-700 bg-gray-900 {className}"
+>
 	<!-- Header -->
-	<div class="flex items-center justify-between bg-gray-800 px-4 py-2 border-b border-gray-700">
-		<span class="text-xs font-medium text-gray-300 uppercase tracking-wide">
+	<div class="flex items-center justify-between border-b border-gray-700 bg-gray-800 px-4 py-2">
+		<span class="text-xs font-medium tracking-wide text-gray-300 uppercase">
 			{displayLanguage}
 		</span>
 		<button
 			onclick={copyCode}
-			class="flex items-center gap-1.5 rounded px-2 py-1 text-xs transition-all duration-200 {copied 
-				? 'text-green-400 border border-green-500 bg-green-500/10' 
+			class="flex items-center gap-1.5 rounded px-2 py-1 text-xs transition-all duration-200 {copied
+				? 'border border-green-500 bg-green-500/10 text-green-400'
 				: 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'}"
-			title={copied ? "Copied!" : "Copy code"}
+			title={copied ? 'Copied!' : 'Copy code'}
 		>
 			{#if copied}
 				<!-- Checkmark icon -->
 				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M5 13l4 4L19 7"
+					/>
 				</svg>
 				Copied!
 			{:else}
 				<!-- Copy icon -->
 				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+					/>
 				</svg>
 				Copy
 			{/if}
@@ -171,4 +184,4 @@
 	:global(.code-renderer .hljs::-webkit-scrollbar-thumb:hover) {
 		background: #6e7681;
 	}
-</style>
+</style>