@archbase/components 3.0.0

package/src/spreadsheet/ArchbaseSpreadsheetImport.tsx

@@ -0,0 +1,223 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { Modal, Button, Group, Text, Stack, Paper, Progress, Alert } from '@mantine/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import { ReactSpreadsheetImport } from 'react-spreadsheet-import';
+import type {
+  ArchbaseSpreadsheetImportProps,
+  SpreadsheetField,
+  SpreadsheetRow,
+} from './ArchbaseSpreadsheetImport.types';
+
+type RsiField = {
+  label: string;
+  key: string;
+  description?: string;
+  alternateMatches?: string[];
+  validations?: any[];
+  fieldType: { type: 'input' } | { type: 'checkbox'; booleanMatches?: { [key: string]: boolean } } | { type: 'select'; options: { label: string; value: string }[] };
+  example?: string;
+};
+
+function convertFieldToRsi(field: SpreadsheetField): RsiField {
+  const baseField: RsiField = {
+    label: field.label,
+    key: field.key,
+    fieldType: { type: 'input' },
+  };
+
+  if (field.fieldType === 'boolean') {
+    baseField.fieldType = { type: 'checkbox' };
+  } else if (field.fieldType === 'select' && field.options) {
+    baseField.fieldType = {
+      type: 'select',
+      options: field.options.map((opt) => ({ label: opt, value: opt })),
+    };
+  }
+
+  // Add validations
+  if (field.validations) {
+    baseField.validations = [];
+
+    if (field.validations.pattern) {
+      baseField.validations!.push({
+        rule: 'regex',
+        value: field.validations.pattern,
+        errorMessage: 'Invalid format',
+      });
+    }
+  }
+
+  return baseField;
+}
+
+export function ArchbaseSpreadsheetImport<T = any>({
+  dataSource,
+  onDataLoaded,
+  onRowAdded,
+  fields,
+  isOpen = true,
+  onClose,
+  title,
+  description,
+  allowedFileTypes = ['csv', 'xlsx', 'xls'],
+  maxFileSize = 10 * 1024 * 1024, // 10MB
+  maxRows = 1000,
+  customHeaderComponent,
+  customButtonComponent,
+  translations,
+  style,
+  className,
+  disabled = false,
+  initialData,
+  mapRows,
+  validationCallback,
+}: ArchbaseSpreadsheetImportProps<T>) {
+  const { t } = useArchbaseTranslation();
+  const [isOpenState, setIsOpenState] = useState(isOpen);
+  const [step, setStep] = useState<'upload' | 'review' | 'complete'>('upload');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [errors, setErrors] = useState<string[]>([]);
+  const [resultData, setResultData] = useState<{ validCount: number; invalidCount: number } | null>(null);
+
+  const rsiFields = useMemo(() => {
+    if (!fields) return undefined;
+
+    return fields.map(convertFieldToRsi) as RsiField[];
+  }, [fields]);
+
+  const defaultFields = useMemo<RsiField[]>(() => {
+    if (rsiFields) return rsiFields;
+
+    return [
+      { label: 'Column 1', key: 'column1', fieldType: { type: 'input' }, validations: [{ rule: 'required' }] },
+      { label: 'Column 2', key: 'column2', fieldType: { type: 'input' } },
+      { label: 'Column 3', key: 'column3', fieldType: { type: 'input' } },
+    ];
+  }, [rsiFields]);
+
+  const rsiTranslations = useMemo(() => ({
+    uploadStep: {
+      title: translations?.uploadStep || String(t('Import Spreadsheet')),
+      description: translations?.dragDrop || String(t('Drag and drop your file here')),
+      fileFormatError: translations?.supportedFormats || String(t('Supported formats: CSV, XLSX, XLS')),
+      maxSizeError: `File size exceeds ${maxFileSize} bytes`,
+    },
+    selectHeaderStep: {
+      title: String(t('Select File')),
+      description: String(t('Upload File')),
+    },
+    matchColumnsStep: {
+      title: translations?.reviewStep || String(t('Review Data')),
+      description: translations?.reviewDescription || String(t('Review and edit your data before importing')),
+    },
+    validationStep: {
+      title: translations?.confirmStep || String(t('Confirm Import')),
+      description: translations?.confirmDescription || String(t('Confirm the data to be imported')),
+    },
+  }), [translations, t, maxFileSize]);
+
+  const handleClose = useCallback(() => {
+    setIsOpenState(false);
+    setStep('upload');
+    setResultData(null);
+    setErrors([]);
+    onClose?.();
+  }, [onClose]);
+
+  const handleSubmit = useCallback(async (data: any, file: File) => {
+    setIsProcessing(true);
+    setStep('complete');
+
+    try {
+      // Combine valid and invalid data
+      const allData = [...data.validData, ...data.invalidData];
+
+      // Map rows if mapper provided
+      const mappedData = mapRows ? mapRows(allData as SpreadsheetRow[]) : (allData as unknown[] as T[]);
+
+      // Add to data source if provided
+      if (dataSource && mappedData.length > 0) {
+        for (const row of mappedData) {
+          onRowAdded?.(row);
+        }
+      }
+
+      // Set result data
+      setResultData({
+        validCount: data.validData.length,
+        invalidCount: data.invalidData.length,
+      });
+
+      // Callback with loaded data
+      onDataLoaded?.(mappedData);
+
+      setIsProcessing(false);
+    } catch (error) {
+      setErrors([String(error)]);
+      setIsProcessing(false);
+    }
+  }, [mapRows, dataSource, onRowAdded, onDataLoaded]);
+
+  const controlledIsOpen = isOpen !== undefined ? isOpen : isOpenState;
+
+  return (
+    <Modal
+      opened={controlledIsOpen}
+      onClose={handleClose}
+      size={step === 'complete' ? 'md' : 'xl'}
+      title={title || String(t('Import Spreadsheet'))}
+      style={style}
+      className={className}
+    >
+      <Stack gap="md">
+        {description && <Text size="sm">{description}</Text>}
+
+        {errors.length > 0 && (
+          <Alert color="red" title={String(t('Error'))}>
+            {errors.map((error, i) => (
+              <Text key={i} size="sm">{error}</Text>
+            ))}
+          </Alert>
+        )}
+
+        {isProcessing && (
+          <Progress value={undefined} size="sm" />
+        )}
+
+        {step === 'complete' && resultData ? (
+          <Stack align="center" gap="md">
+            <Text size="lg" fw={500}>
+              {resultData.validCount} {String(t('rows imported'))}
+            </Text>
+            {resultData.invalidCount > 0 && (
+              <Text size="sm" c="orange">
+                {resultData.invalidCount} {String(t('rows skipped'))}
+              </Text>
+            )}
+            <Button onClick={handleClose}>
+              {translations?.closeButton || String(t('Close'))}
+            </Button>
+          </Stack>
+        ) : (
+          <ReactSpreadsheetImport
+            isOpen={controlledIsOpen}
+            onClose={handleClose}
+            onSubmit={handleSubmit}
+            fields={defaultFields}
+            translations={rsiTranslations}
+            maxRecords={maxRows}
+            maxFileSize={maxFileSize}
+          />
+        )}
+      </Stack>
+    </Modal>
+  );
+}
+
+// Export types
+export type {
+  ArchbaseSpreadsheetImportProps,
+  SpreadsheetField,
+  SpreadsheetRow,
+  SpreadsheetFileType,
+} from './ArchbaseSpreadsheetImport.types';

package/src/spreadsheet/ArchbaseSpreadsheetImport.types.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { IArchbaseDataSourceBase } from '@archbase/data';
+
+export type SpreadsheetFileType = 'csv' | 'xlsx' | 'xls' | 'all';
+
+export interface SpreadsheetField {
+  key: string;
+  label: string;
+  required?: boolean;
+  fieldType?: 'text' | 'number' | 'date' | 'email' | 'boolean' | 'select';
+  options?: string[];
+  validations?: {
+    min?: number;
+    max?: number;
+    pattern?: string;
+    custom?: (value: any) => boolean | string;
+  };
+}
+
+export interface SpreadsheetRow {
+  [key: string]: any;
+}
+
+export interface ArchbaseSpreadsheetImportProps<T = any> {
+  dataSource?: IArchbaseDataSourceBase<T>;
+  onDataLoaded?: (data: T[]) => void;
+  onRowAdded?: (row: T) => void;
+  fields?: SpreadsheetField[];
+  isOpen?: boolean;
+  onClose?: () => void;
+  title?: string;
+  description?: string;
+  allowedFileTypes?: SpreadsheetFileType[];
+  maxFileSize?: number; // in bytes
+  maxRows?: number;
+  customHeaderComponent?: ReactNode;
+  customButtonComponent?: ReactNode;
+  translations?: {
+    uploadStep?: string;
+    selectFile?: string;
+    dragDrop?: string;
+    supportedFormats?: string;
+    reviewStep?: string;
+    reviewDescription?: string;
+    confirmStep?: string;
+    confirmDescription?: string;
+    successStep?: string;
+    successDescription?: string;
+    uploadButton?: string;
+    nextButton?: string;
+    backButton?: string;
+    confirmButton?: string;
+    doneButton?: string;
+    closeButton?: string;
+    invalidRow?: string;
+    requiredField?: string;
+    rowsAdded?: string;
+    rowsSkipped?: string;
+  };
+  style?: CSSProperties;
+  className?: string;
+  disabled?: boolean;
+  initialData?: SpreadsheetRow[];
+  mapRows?: (rows: SpreadsheetRow[]) => T[];
+  validationCallback?: (row: SpreadsheetRow, index: number) => { valid: boolean; errors?: string[] };
+}

package/src/spreadsheet/index.ts

@@ -0,0 +1,10 @@
+export {
+  ArchbaseSpreadsheetImport,
+} from './ArchbaseSpreadsheetImport';
+
+export type {
+  ArchbaseSpreadsheetImportProps,
+  SpreadsheetField,
+  SpreadsheetRow,
+  SpreadsheetFileType,
+} from './ArchbaseSpreadsheetImport.types';