@makolabs/ripple 0.0.1-dev.8 → 0.0.1-dev.81

package/README.md

@@ -41,7 +41,7 @@ Paste the following CSS import code in `app.css`
 @source "../node_modules/@makolabs/ripple";
 
 @theme {
-	/* Default (Gray) */
+	/* Default (default) */
 	--color-default-50: oklch(0.984 0.003 247.858);
 	--color-default-100: oklch(0.96 0.006 247.858);
 	--color-default-200: oklch(0.91 0.008 247.858);

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

@@ -0,0 +1,20 @@
+import type { StorageAdapter, FileItem, FileListResult, ImportOptions, ImportResult, ImportStatus, BatchImportResult } from './types.js';
+/**
+ * Base storage adapter with common functionality
+ */
+export declare abstract class BaseAdapter implements StorageAdapter {
+    abstract getName(): string;
+    abstract list(path: string, searchQuery?: string): Promise<FileListResult>;
+    abstract download(file: FileItem): Promise<string>;
+    abstract isConfigured(): Promise<boolean>;
+    abstract authenticate?(): Promise<boolean>;
+    import(file: FileItem, options: ImportOptions): Promise<ImportResult>;
+    getImportStatus(importId: string, fileKey: string): Promise<ImportStatus>;
+    batchImport(files: FileItem[], options: ImportOptions): Promise<BatchImportResult>;
+    protected abstract getApiPath(): string;
+    setReopenFlag(): void;
+    shouldReopenBrowser(): boolean;
+    clearReopenFlag(): void;
+    protected getDetailedStatus(status: string): string;
+    protected calculateProgress(status: string, processedRows?: number, totalRows?: number): number;
+}

package/dist/adapters/storage/BaseAdapter.js

@@ -0,0 +1,171 @@
+/**
+ * Base storage adapter with common functionality
+ */
+export class BaseAdapter {
+    // Common implementation of import and getImportStatus
+    async import(file, options) {
+        try {
+            const endpoint = `/api/${this.getApiPath()}/import`;
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    key: file.key,
+                    fileId: file.id, // For Google Drive
+                    contentType: options.contentType,
+                    fileFormat: options.fileFormat,
+                    reference: options.reference || file.name,
+                    insurer: options.contentType === 'insurer_statement' ? options.insurer : null
+                })
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to import file');
+            }
+            const result = await response.json();
+            return {
+                success: true,
+                message: `File ${file.name} imported successfully`,
+                fileId: result.fileId || result.importResponse?.uuid,
+                status: 'pending',
+                progress: 10
+            };
+        }
+        catch (err) {
+            console.error(`Error importing ${this.getName()} file:`, err);
+            return {
+                success: false,
+                message: `Failed to import file from ${this.getName()}`,
+                error: err instanceof Error ? err.message : 'Unknown error'
+            };
+        }
+    }
+    async getImportStatus(importId, fileKey) {
+        try {
+            const response = await fetch(`/api/v1/uploads/${importId}`);
+            if (!response.ok) {
+                if (response.status === 404) {
+                    throw new Error(`404: File ${importId} not found on server`);
+                }
+                throw new Error(`Failed to get file status: ${response.status} ${response.statusText}`);
+            }
+            const fileData = await response.json();
+            return {
+                fileId: importId,
+                status: fileData.processing_status,
+                progress: this.calculateProgress(fileData.processing_status, fileData.processed_rows, fileData.total_rows),
+                processedRows: fileData.processed_rows,
+                totalRows: fileData.total_rows,
+                detailedStatus: this.getDetailedStatus(fileData.processing_status),
+                error: fileData.error_details?.message,
+                created_at: fileData.created_at
+            };
+        }
+        catch (err) {
+            console.error('Error polling file status:', err);
+            throw err;
+        }
+    }
+    // Common implementation of batch import
+    async batchImport(files, options) {
+        // Process files sequentially
+        const individualResults = [];
+        for (const file of files) {
+            try {
+                const result = await this.import(file, options);
+                individualResults.push(result);
+            }
+            catch (err) {
+                individualResults.push({
+                    success: false,
+                    message: `Failed to import ${file.name}`,
+                    error: err instanceof Error ? err.message : 'Unknown error',
+                    fileId: file.id
+                });
+            }
+        }
+        // Count successes and failures
+        const succeeded = individualResults.filter(r => r.success).length;
+        const failed = individualResults.length - succeeded;
+        // Return batch import result
+        return {
+            success: failed === 0, // Overall success if all files succeeded
+            message: `Imported ${succeeded} of ${individualResults.length} files`,
+            summary: {
+                total: individualResults.length,
+                succeeded,
+                failed
+            },
+            results: individualResults.map(r => ({
+                key: r.fileId || '',
+                success: r.success,
+                fileId: r.fileId,
+                error: r.error
+            }))
+        };
+    }
+    // Set a flag to reopen the browser after authentication
+    setReopenFlag() {
+        // Default implementation does nothing
+        // Subclasses should override this method to implement storage-specific reopening flags
+    }
+    // Check if the browser should be reopened
+    shouldReopenBrowser() {
+        // Default implementation returns false
+        // Subclasses should override this method to check their specific reopening flags
+        return false;
+    }
+    // Clear the browser reopening flag
+    clearReopenFlag() {
+        // Default implementation does nothing
+        // Subclasses should override this method to clear their specific reopening flags
+    }
+    // Helper method to get detailed status
+    getDetailedStatus(status) {
+        const statusMap = {
+            'pending': 'Waiting to start',
+            'pending_import': 'Preparing import',
+            'initializing': 'Initializing import',
+            'pending_file_retrieval': 'Retrieving file',
+            'retrieving_file': 'Downloading file',
+            'file_retrieved': 'File downloaded',
+            'loading_file_contents_to_db': 'Loading data',
+            'file_contents_loaded': 'Data loaded',
+            'ready_to_process': 'Ready for processing',
+            'validating_source_file_rows': 'Validating file',
+            'converting_to_business_objects': 'Converting data',
+            'processing': 'Processing data',
+            'completed': 'Import completed',
+            'failed': 'Import failed',
+            'partially_processed': 'Partially processed'
+        };
+        return statusMap[status] || status;
+    }
+    // Helper method to calculate progress
+    calculateProgress(status, processedRows, totalRows) {
+        // If we have row counts, use them for more accurate progress
+        if (processedRows !== undefined && totalRows && totalRows > 0) {
+            return Math.min(95, Math.round((processedRows / totalRows) * 100));
+        }
+        // Otherwise, use status-based progress estimates
+        const progressMap = {
+            'pending': 5,
+            'pending_import': 10,
+            'initializing': 15,
+            'pending_file_retrieval': 20,
+            'retrieving_file': 30,
+            'file_retrieved': 40,
+            'loading_file_contents_to_db': 50,
+            'file_contents_loaded': 60,
+            'ready_to_process': 70,
+            'validating_source_file_rows': 80,
+            'converting_to_business_objects': 90,
+            'completed': 100,
+            'failed': 0,
+            'partially_processed': 95
+        };
+        return progressMap[status] || 50;
+    }
+}

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

@@ -0,0 +1,21 @@
+import type { FileItem, FileListResult } from './types.js';
+import { BaseAdapter } from './BaseAdapter.js';
+/**
+ * S3 storage adapter for the FileBrowser component
+ */
+export declare class S3Adapter extends BaseAdapter {
+    private basePath;
+    constructor(basePath?: string, publicS3BasePath?: string);
+    getName(): string;
+    isConfigured(): Promise<boolean>;
+    authenticate(): Promise<boolean>;
+    setReopenFlag(): void;
+    shouldReopenBrowser(): boolean;
+    clearReopenFlag(): void;
+    list(path: string, searchQuery?: string): Promise<FileListResult>;
+    download(file: FileItem): Promise<string>;
+    private removeFileExtensions;
+    private createBreadcrumbs;
+    private extractFolderName;
+    protected getApiPath(): string;
+}

package/dist/adapters/storage/S3Adapter.js

@@ -0,0 +1,194 @@
+import { BaseAdapter } from './BaseAdapter.js';
+/**
+ * S3 storage adapter for the FileBrowser component
+ */
+export class S3Adapter extends BaseAdapter {
+    basePath;
+    constructor(basePath, publicS3BasePath) {
+        super();
+        this.basePath = basePath || publicS3BasePath || 'export/clarkfin/';
+    }
+    getName() {
+        return 'S3';
+    }
+    async isConfigured() {
+        // S3 should always be configured if the environment variables are set
+        return true;
+    }
+    // S3 does not require authentication, but we implement the method to satisfy the interface
+    async authenticate() {
+        return true; // S3 is considered authenticated if isConfigured() returns true
+    }
+    // Override setReopenFlag to store the S3 browser reopening flag
+    setReopenFlag() {
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem('reopen_s3_browser', 'true');
+        }
+    }
+    // Check if the S3 browser should be reopened
+    shouldReopenBrowser() {
+        if (typeof localStorage !== 'undefined') {
+            return localStorage.getItem('reopen_s3_browser') === 'true';
+        }
+        return false;
+    }
+    // Clear the S3 browser reopening flag
+    clearReopenFlag() {
+        if (typeof localStorage !== 'undefined') {
+            localStorage.removeItem('reopen_s3_browser');
+        }
+    }
+    async list(path, searchQuery) {
+        try {
+            // Ensure path ends with a forward slash
+            const normalizedPath = path.endsWith('/') ? path : path + '/';
+            // Build API URL including search term if provided
+            let apiUrl = `/api/s3/list?prefix=${encodeURIComponent(normalizedPath)}`;
+            if (searchQuery) {
+                apiUrl += `&search=${encodeURIComponent(searchQuery)}`;
+            }
+            // Use the API endpoint for listing S3 files
+            const response = await fetch(apiUrl);
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to fetch files');
+            }
+            const result = await response.json();
+            // Transform folders - use the folderName property from the API
+            const folders = (result.folders || [])
+                .map((folder) => {
+                return {
+                    key: folder.prefix,
+                    // Use the folderName from the API if available, otherwise extract it from the prefix
+                    name: folder.folderName || this.extractFolderName(folder.prefix, normalizedPath),
+                    lastModified: new Date(),
+                    size: 0,
+                    isFolder: true
+                };
+            })
+                .filter((folder) => folder.name); // Filter out empty folder names
+            // Transform files - only include files that are directly in this directory
+            const fileItems = (result.files || [])
+                .filter((file) => {
+                // Skip the directory marker itself if it exists as a file
+                if (file.key === normalizedPath)
+                    return false;
+                // Get the relative path within the current directory
+                const relativePath = file.key.slice(normalizedPath.length);
+                // Only include files that don't have additional path separators
+                // (indicating they're directly in this directory)
+                return !relativePath.includes('/');
+            })
+                .map((file) => ({
+                key: file.key,
+                name: this.removeFileExtensions(file.key.slice(normalizedPath.length)),
+                lastModified: new Date(file.lastModified),
+                size: file.size,
+                isFolder: false
+            }));
+            // Combine folders and files
+            const files = [...folders, ...fileItems];
+            // Sort by lastModified in reverse order (newest first), but keep folders first
+            files.sort((a, b) => {
+                // Keep folders first
+                if (a.isFolder !== b.isFolder) {
+                    return a.isFolder ? -1 : 1;
+                }
+                // Sort by lastModified in reverse order (newest first)
+                return b.lastModified.getTime() - a.lastModified.getTime();
+            });
+            // Create breadcrumbs
+            const breadcrumbs = this.createBreadcrumbs(normalizedPath);
+            // Determine parent path
+            const pathParts = normalizedPath.split('/').filter(Boolean);
+            let parentPath = '';
+            if (pathParts.length > 0) {
+                // Remove the last part and join the rest
+                pathParts.pop();
+                parentPath = pathParts.length > 0 ? pathParts.join('/') + '/' : this.basePath;
+                // Ensure we never navigate outside the basePath
+                if (!parentPath.startsWith(this.basePath)) {
+                    parentPath = this.basePath;
+                }
+            }
+            // Debug log
+            console.log(`S3 listing path: ${normalizedPath}, files: ${fileItems.length}, folders: ${folders.length}`);
+            if (folders.length > 0) {
+                console.log('Sample folder names:', folders.slice(0, 3).map((f) => f.name));
+            }
+            return {
+                files,
+                currentPath: normalizedPath,
+                parentPath: normalizedPath !== this.basePath ? parentPath : undefined,
+                breadcrumbs
+            };
+        }
+        catch (err) {
+            console.error('Error fetching S3 files:', err);
+            throw err;
+        }
+    }
+    async download(file) {
+        try {
+            const response = await fetch(`/api/s3/download?key=${encodeURIComponent(file.key)}`);
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to download file');
+            }
+            const url = await response.text();
+            return url;
+        }
+        catch (err) {
+            console.error('Error downloading S3 file:', err);
+            throw err;
+        }
+    }
+    // Helper method to remove file extensions
+    removeFileExtensions(filename) {
+        // First remove .csv.gz if it exists
+        let name = filename.replace(/\.csv\.gz$/, '');
+        // Then remove any remaining extension
+        return name.replace(/\.[^/.]+$/, '');
+    }
+    // Helper method to create breadcrumbs
+    createBreadcrumbs(path) {
+        // If we're at base path, reset breadcrumbs
+        if (path === this.basePath) {
+            return [{ name: 'S3', path: this.basePath, current: true, clickable: true }];
+        }
+        // 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 }];
+        // Add current directory parts
+        if (pathWithoutBase) {
+            const parts = pathWithoutBase.split('/').filter(Boolean);
+            let currentPath = this.basePath;
+            parts.forEach((part, index) => {
+                currentPath += part + '/';
+                breadcrumbs.push({
+                    name: part,
+                    path: currentPath,
+                    current: index === parts.length - 1,
+                    clickable: true
+                });
+            });
+        }
+        return breadcrumbs;
+    }
+    // Helper method to extract folder name from a prefix
+    extractFolderName(prefix, currentPath) {
+        // If the prefix starts with the current path, extract the next segment
+        if (prefix.startsWith(currentPath)) {
+            const relativePath = prefix.slice(currentPath.length);
+            return relativePath.split('/')[0];
+        }
+        // Fallback: use the last non-empty segment before the trailing slash
+        const segments = prefix.split('/').filter(Boolean);
+        return segments.length > 0 ? segments[segments.length - 1] : '';
+    }
+    // Implement the abstract method from BaseAdapter
+    getApiPath() {
+        return 's3';
+    }
+}

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

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './BaseAdapter.js';
+export * from './S3Adapter.js';

package/dist/adapters/storage/index.js

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './BaseAdapter.js';
+export * from './S3Adapter.js';

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

@@ -0,0 +1,102 @@
+/**
+ * Storage adapter interfaces for the unified FileBrowser component
+ */
+export interface FileItem {
+    key: string;
+    name: string;
+    lastModified: Date;
+    createdAt?: Date;
+    size: number;
+    isFolder: boolean;
+    id?: string;
+    mimeType?: string;
+    parentId?: string;
+}
+export interface FileActionSingle {
+    label: (file: FileItem) => string;
+    action: (file: FileItem) => void | Promise<void>;
+    isAllowed: (file: FileItem) => boolean;
+    batchAction?: never;
+}
+export interface FileActionBatch {
+    label: (files: FileItem[]) => string;
+    batchAction: (files: FileItem[]) => void | Promise<void>;
+    isAllowed: (files: FileItem[]) => boolean;
+    action?: never;
+}
+export type FileAction = FileActionSingle | FileActionBatch;
+export interface Breadcrumb {
+    name: string;
+    path: string;
+    id?: string;
+    current: boolean;
+    clickable: boolean;
+}
+export interface FileListResult {
+    files: FileItem[];
+    currentPath: string;
+    parentPath?: string;
+    breadcrumbs?: Breadcrumb[];
+}
+export interface ImportOptions {
+    contentType: string;
+    fileFormat: string;
+    reference?: string;
+    insurer?: string;
+}
+export interface ImportResult {
+    success: boolean;
+    message: string;
+    fileId?: string;
+    error?: string;
+    status?: string;
+    progress?: number;
+}
+export interface BatchImportResult {
+    success: boolean;
+    message: string;
+    summary: {
+        total: number;
+        succeeded: number;
+        failed: number;
+    };
+    results: {
+        key: string;
+        success: boolean;
+        fileId?: string;
+        error?: string;
+    }[];
+}
+export interface ImportStatus {
+    fileId: string;
+    status: string;
+    progress: number;
+    processedRows?: number;
+    totalRows?: number;
+    detailedStatus?: string;
+    error?: string;
+    created_at?: string;
+}
+export interface ErrorReportOptions {
+    errorType: string;
+    errorMessage: string;
+    errorDetails?: string;
+    clientInfo?: Record<string, string>;
+    userAction?: string;
+}
+type URLString = string;
+export interface StorageAdapter {
+    getName(): string;
+    list(path: string, searchQuery?: string): Promise<FileListResult>;
+    download(file: FileItem): Promise<URLString>;
+    import(file: FileItem, options: ImportOptions): Promise<ImportResult>;
+    batchImport(files: FileItem[], options: ImportOptions): Promise<BatchImportResult>;
+    getImportStatus(importId: string, fileKey: string): Promise<ImportStatus>;
+    reportError?(importId: string, options: ErrorReportOptions): Promise<boolean>;
+    isConfigured(): Promise<boolean>;
+    authenticate?(): Promise<boolean>;
+    setReopenFlag(): void;
+    shouldReopenBrowser(): boolean;
+    clearReopenFlag(): void;
+}
+export {};

package/dist/adapters/storage/types.js

@@ -0,0 +1,4 @@
+/**
+ * Storage adapter interfaces for the unified FileBrowser component
+ */
+export {};

package/dist/charts/Chart.svelte

@@ -26,7 +26,13 @@
 	} from 'echarts/components';
 	// @ts-expect-error - ECharts types are not available
 	import { SVGRenderer } from 'echarts/renderers';
-	import type { ChartProps, ChartColors, ChartColorString } from '../index.js';
+	import {
+		type ChartProps,
+		type ChartColorString,
+		type ChartColors,
+		type SeriesConfig
+	} from '../index.js';
+	import { defaultChartColors } from '../variants.js';
 
 	// @ts-expect-error - ECharts types are not available
 	echarts.use([
@@ -104,31 +110,54 @@
 	let chart: echarts.ECharts;
 	let resizeObserver: ResizeObserver;
 
-	const defaultChartColors: ChartColors = {
-		health: '#1F69FF',
-		property: '#2D9D78',
-		auto: '#E8A317',
-		life: '#E34974',
-		other: '#7B3FE4',
-		default: '#6B7280'
-	};
-
 	const chartColors: ChartColors = { ...defaultChartColors, ...colors };
+	const baseColors = [
+		chartColors.health,
+		chartColors.other,
+		chartColors.property,
+		chartColors.auto,
+		chartColors.life,
+		chartColors.default
+	];
 
 	function getColor(color?: ChartColorString): string | undefined {
 		return color ? chartColors[color as keyof ChartColors] || color : undefined;
 	}
 
-	function getSeriesColors(count: number): string[] {
-		const baseColors = [
-			chartColors.health,
-			chartColors.other,
-			chartColors.property,
-			chartColors.auto,
-			chartColors.life,
-			chartColors.default
-		];
+	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
+		if (!seriesConfig.color) return undefined;
+		if (!seriesConfig.showArea) return undefined;
+		
+		const baseLinearAreaStyle = {
+			type: 'linear',
+			x: 0,
+			y: 0,
+			x2: 0,
+			y2: 1
+		};
+		const color = getColor(seriesConfig.color);
+		const opacity = seriesConfig.areaOpacity || 0.2;
+		const opacityHex = Math.floor(opacity * 255)
+			.toString(16)
+			.padStart(2, '0');
+		return {
+			color: {
+				...baseLinearAreaStyle,
+				colorStops: [
+					{
+						offset: 0,
+						color: color + opacityHex
+					},
+					{
+						offset: 1,
+						color: color + '00'
+					}
+				]
+			}
+		};
+	}
 
+	function getSeriesColors(count: number): string[] {
 		let colors = [...baseColors];
 		while (colors.length < count) {
 			const index = colors.length % baseColors.length;
@@ -228,29 +257,7 @@
 						color: getColor(seriesConfig.color),
 						type: seriesConfig.lineStyle?.type || 'solid'
 					},
-					areaStyle: seriesConfig.showArea
-						? {
-								color: {
-									type: 'linear',
-									x: 0,
-									y: 0,
-									x2: 0,
-									y2: 1,
-									colorStops: [
-										{
-											offset: 0,
-											color:
-												getColor(seriesConfig.color) +
-												Math.floor((seriesConfig.areaOpacity || 0.2) * 255).toString(16)
-										},
-										{
-											offset: 1,
-											color: getColor(seriesConfig.color) + '00'
-										}
-									]
-								}
-							}
-						: undefined
+					areaStyle: getAreaStyle(seriesConfig)
 				}),
 
 				...(actualType === 'bar' && {
@@ -422,11 +429,19 @@
 						}),
 						formatter: xAxis.format || '{value}'
 					},
+					boundaryGap: series.every((s) => s.type === 'line')
+						? false
+						: series.some((s) => s.type === 'bar' || s.type === 'horizontal-bar')
+							? true
+							: undefined,
 					name: xAxis.label,
 					nameLocation: 'middle',
 					nameGap: 30,
 					splitLine: {
 						show: grid.vertical || false
+					},
+					axisLine: xAxis.axisLine || {
+						show: false
 					}
 				},
 
@@ -439,11 +454,8 @@
 					position: axis.position || (index === 0 ? 'left' : 'right'),
 					min: axis.min,
 					max: axis.max,
-					axisLine: {
-						show: true,
-						lineStyle: {
-							color: getColor(axis.color)
-						}
+					axisLine: axis.axisLine || {
+						show: false
 					},
 					axisLabel: {
 						// @ts-expect-error - ECharts types are not available