@importcsv/react 0.2.1 → 0.2.4

package/build/react/js.d.ts

@@ -0,0 +1,12 @@
+import { CSVImporterProps } from './types';
+type CreateImporterProps = CSVImporterProps & {
+    domElement?: Element;
+};
+export declare function createCSVImporter(props: CreateImporterProps): {
+    instance: (import('../react').FunctionalComponent<import('../react').PropsWithoutRef<CSVImporterProps> & {
+        ref?: import('../react').Ref<unknown> | undefined;
+    }> & HTMLDialogElement) | null;
+    showModal: () => void;
+    closeModal: () => void;
+};
+export {};

package/build/react/settings/defaults.d.ts

@@ -0,0 +1,3 @@
+import { CSVImporterProps } from '../types';
+declare const defaults: CSVImporterProps;
+export default defaults;

package/build/react/styles.d.ts

@@ -0,0 +1 @@
+export declare const importcsvStyles: string;

package/build/react/types/index.d.ts

@@ -0,0 +1,132 @@
+import { ThemeConfig } from './theme';
+export interface Column {
+    id: string;
+    label: string;
+    type?: 'string' | 'number' | 'email' | 'date' | 'phone' | 'select';
+    validators?: Validator[];
+    transformations?: Transformer[];
+    options?: string[];
+    description?: string;
+    placeholder?: string;
+}
+export type Validator = {
+    type: 'required';
+    message?: string;
+} | {
+    type: 'unique';
+    message?: string;
+} | {
+    type: 'regex';
+    pattern: string;
+    message?: string;
+} | {
+    type: 'min';
+    value: number;
+    message?: string;
+} | {
+    type: 'max';
+    value: number;
+    message?: string;
+} | {
+    type: 'min_length';
+    value: number;
+    message?: string;
+} | {
+    type: 'max_length';
+    value: number;
+    message?: string;
+};
+export type TransformationStage = 'pre' | 'post';
+export type Transformer = {
+    type: 'trim';
+    stage?: TransformationStage;
+} | {
+    type: 'uppercase';
+    stage?: TransformationStage;
+} | {
+    type: 'lowercase';
+    stage?: TransformationStage;
+} | {
+    type: 'capitalize';
+    stage?: TransformationStage;
+} | {
+    type: 'remove_special_chars';
+    stage?: TransformationStage;
+} | {
+    type: 'normalize_phone';
+    stage?: TransformationStage;
+} | {
+    type: 'normalize_date';
+    format?: string;
+    stage?: TransformationStage;
+} | {
+    type: 'default';
+    value: string;
+    stage?: TransformationStage;
+} | {
+    type: 'replace';
+    find: string;
+    replace: string;
+    stage?: TransformationStage;
+} | {
+    type: 'custom';
+    fn: (value: any) => any;
+    stage?: TransformationStage;
+};
+export interface ColumnMapping {
+    id: string;
+    label?: string;
+    include: boolean;
+    selected?: boolean;
+}
+export interface ColumnMappingDictionary {
+    [uploadColumnIndex: number]: ColumnMapping;
+}
+type ModalParams = {
+    isModal?: boolean;
+    modalIsOpen?: boolean;
+    modalOnCloseTriggered?: () => void;
+    modalCloseOnOutsideClick?: boolean;
+};
+type CustomTranslationResource = {
+    [language: string]: {
+        [key: string]: string;
+    };
+};
+export type CSVImporterProps = {
+    columns?: Column[];
+    importerKey?: string;
+    onComplete?: (data: any) => void;
+    backendUrl?: string;
+    user?: Record<string, any>;
+    metadata?: Record<string, any>;
+    theme?: ThemeConfig | 'default' | 'minimal' | 'modern' | 'compact' | 'dark';
+    darkMode?: boolean;
+    primaryColor?: string;
+    className?: string;
+    customStyles?: Record<string, string> | string;
+    classNames?: {
+        root?: string;
+        modal?: string;
+        header?: string;
+        stepper?: string;
+        content?: string;
+        footer?: string;
+        button?: string;
+        input?: string;
+        table?: string;
+        dropzone?: string;
+    };
+    showDownloadTemplateButton?: boolean;
+    skipHeaderRowSelection?: boolean;
+    waitOnComplete?: boolean;
+    invalidRowHandling?: 'include' | 'exclude' | 'block';
+    includeUnmatchedColumns?: boolean;
+    language?: string;
+    customTranslations?: CustomTranslationResource;
+    demoData?: {
+        fileName: string;
+        csvContent: string;
+    };
+} & ModalParams;
+export {};

package/build/react/types/theme.d.ts

@@ -0,0 +1,153 @@
+/**
+ * Theme configuration types for CSV Importer
+ */
+export interface ThemeConfig {
+    colors?: {
+        primary?: string;
+        primaryHover?: string;
+        primaryForeground?: string;
+        secondary?: string;
+        secondaryHover?: string;
+        secondaryForeground?: string;
+        background?: string;
+        foreground?: string;
+        card?: string;
+        cardForeground?: string;
+        border?: string;
+        input?: string;
+        ring?: string;
+        muted?: string;
+        mutedForeground?: string;
+        accent?: string;
+        accentForeground?: string;
+        destructive?: string;
+        destructiveForeground?: string;
+        success?: string;
+        successForeground?: string;
+        warning?: string;
+        warningForeground?: string;
+        info?: string;
+        infoForeground?: string;
+    };
+    typography?: {
+        fontFamily?: string;
+        fontFamilyMono?: string;
+        fontSize?: {
+            xs?: string;
+            sm?: string;
+            base?: string;
+            lg?: string;
+            xl?: string;
+            '2xl'?: string;
+            '3xl'?: string;
+        };
+        fontWeight?: {
+            light?: number;
+            normal?: number;
+            medium?: number;
+            semibold?: number;
+            bold?: number;
+        };
+        lineHeight?: {
+            tight?: string;
+            normal?: string;
+            relaxed?: string;
+        };
+    };
+    spacing?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+    };
+    borders?: {
+        radius?: {
+            none?: string;
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+            full?: string;
+        };
+        width?: {
+            none?: string;
+            thin?: string;
+            medium?: string;
+            thick?: string;
+        };
+    };
+    components?: {
+        button?: {
+            padding?: string;
+            fontSize?: string;
+            fontWeight?: string;
+            borderRadius?: string;
+            height?: string;
+            minWidth?: string;
+        };
+        input?: {
+            padding?: string;
+            fontSize?: string;
+            borderRadius?: string;
+            borderWidth?: string;
+            height?: string;
+            background?: string;
+        };
+        modal?: {
+            width?: string;
+            maxWidth?: string;
+            maxHeight?: string;
+            padding?: string;
+            borderRadius?: string;
+            backdropOpacity?: string;
+        };
+        table?: {
+            headerBackground?: string;
+            headerForeground?: string;
+            rowHoverBackground?: string;
+            borderColor?: string;
+            cellPadding?: string;
+        };
+        stepper?: {
+            activeColor?: string;
+            inactiveColor?: string;
+            completedColor?: string;
+            lineColor?: string;
+            dotSize?: string;
+        };
+        dropzone?: {
+            borderStyle?: string;
+            borderColor?: string;
+            borderColorHover?: string;
+            backgroundColor?: string;
+            backgroundColorHover?: string;
+            padding?: string;
+            borderRadius?: string;
+        };
+    };
+    shadows?: {
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    animations?: {
+        duration?: {
+            fast?: string;
+            normal?: string;
+            slow?: string;
+        };
+        easing?: string;
+    };
+}
+export declare const defaultTheme: ThemeConfig;
+export declare const presetThemes: {
+    default: ThemeConfig;
+    minimal: ThemeConfig;
+    modern: ThemeConfig;
+    compact: ThemeConfig;
+    dark: ThemeConfig;
+};

package/build/react/utils/cn.d.ts

@@ -0,0 +1,6 @@
+import { ClassValue } from 'clsx';
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence
+ * Combines clsx for conditional classes and tailwind-merge for deduplication
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/build/react/validation/transformationStages.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Transformation stage definitions for smart auto-detection
+ *
+ * Pre-validation transformations clean and normalize data before validation rules are applied.
+ * Post-validation transformations enrich and format data after validation passes.
+ */
+/**
+ * Transformations that should run BEFORE validation
+ * These typically clean or normalize input to prepare it for validation
+ */
+export declare const PRE_VALIDATION_TRANSFORMS: readonly ["trim", "uppercase", "lowercase", "remove_special_chars", "normalize_phone", "normalize_date"];
+/**
+ * Transformations that should run AFTER validation
+ * These typically format, enrich, or provide defaults for valid data
+ */
+export declare const POST_VALIDATION_TRANSFORMS: readonly ["default", "capitalize", "replace", "custom"];
+export type PreValidationTransform = typeof PRE_VALIDATION_TRANSFORMS[number];
+export type PostValidationTransform = typeof POST_VALIDATION_TRANSFORMS[number];
+/**
+ * Check if a transformation type should run before validation
+ */
+export declare function isPreValidationTransform(type: string): boolean;
+/**
+ * Check if a transformation type should run after validation
+ */
+export declare function isPostValidationTransform(type: string): boolean;

package/build/react/validation/transformer.d.ts

@@ -0,0 +1,17 @@
+import { Transformer } from '../types';
+/**
+ * Apply transformations to a value
+ * @param value The value to transform
+ * @param transformations Array of transformations to apply
+ * @returns Transformed value
+ */
+export declare function applyTransformations(value: any, transformations?: Transformer[]): any;
+/**
+ * Categorize transformations into pre-validation and post-validation stages
+ * @param transformations Array of transformations to categorize
+ * @returns Object with pre and post transformation arrays
+ */
+export declare function categorizeTransformations(transformations?: Transformer[]): {
+    pre: Transformer[];
+    post: Transformer[];
+};

package/build/react/validation/validator.d.ts

@@ -0,0 +1,23 @@
+import { Column } from '../types';
+/**
+ * Validates a single value against a column's validators
+ * @param value The value to validate
+ * @param column The column definition with validators
+ * @returns Error message if validation fails, null if valid
+ */
+export declare function validateColumn(value: any, column: Column): string | null;
+/**
+ * Validates uniqueness across all rows for a column
+ * @param rows All data rows
+ * @param columnIndex The column index to check
+ * @param column The column definition
+ * @returns Array of row indices that have duplicate values
+ */
+export declare function validateUniqueness(rows: any[][], columnIndex: number, column: Column): number[];
+/**
+ * Batch validation for all rows
+ * @param rows Data rows to validate
+ * @param columns Column definitions
+ * @returns Validation results with errors per cell
+ */
+export declare function validateBatch(rows: any[][], columns: Column[]): Map<string, string>;

package/build/services/api.d.ts

@@ -0,0 +1,50 @@
+export function createApi(backendUrl: any, importerKey: any): {
+    auth: {
+        /**
+         * Login to get access token
+         * @param {string} email - User email
+         * @param {string} password - User password
+         * @returns {Promise<Object>} - Response with access token
+         */
+        login: (email: string, password: string) => Promise<Object>;
+        /**
+         * Get current user information
+         * @param {string} token - Access token
+         * @returns {Promise<Object>} - User information
+         */
+        getCurrentUser: (token: string) => Promise<Object>;
+    };
+    schema: {
+        /**
+         * Get all schemas
+         * @param {string} token - Access token
+         * @returns {Promise<Array>} - List of schemas
+         */
+        getSchemas: (token: string) => Promise<any[]>;
+        /**
+         * Get schema template for CSV importer
+         * @param {string} token - Access token
+         * @param {number} schemaId - Schema ID
+         * @returns {Promise<Object>} - Schema template
+         */
+        getSchemaTemplate: (token: string, schemaId: number) => Promise<Object>;
+    };
+    import: {
+        /**
+         * Process CSV data from the frontend importer
+         * @param {string} token - Access token
+         * @param {number} schemaId - Schema ID
+         * @param {Object} importData - Data from CSV importer
+         * @returns {Promise<Object>} - Import job information
+         */
+        processCSVData: (token: string, schemaId: number, importData: Object) => Promise<Object>;
+        /**
+         * Get import job status
+         * @param {string} token - Access token
+         * @param {number} jobId - Import job ID
+         * @returns {Promise<Object>} - Import job status
+         */
+        getImportJobStatus: (token: string, jobId: number) => Promise<Object>;
+    };
+};
+export default createApi;

package/build/services/apiClient.d.ts

@@ -0,0 +1,55 @@
+export default createApiMethods;
+/**
+ * Authentication API
+ */
+export function createApiMethods(backendUrl: any, importerKey: any): {
+    client: any;
+    auth: {
+        /**
+         * Login to get access token
+         * @param {string} email - User email
+         * @param {string} password - User password
+         * @returns {Promise<Object>} - Response with access token
+         */
+        login: (email: string, password: string) => Promise<Object>;
+        /**
+         * Logout the current user
+         */
+        logout: () => Promise<void>;
+        /**
+         * Get current user information
+         * @returns {Promise<Object>} - User information
+         */
+        getCurrentUser: () => Promise<Object>;
+    };
+    schema: {
+        /**
+         * Get all schemas
+         * @returns {Promise<Array>} - List of schemas
+         */
+        getSchemas: () => Promise<any[]>;
+        /**
+         * Get schema template for CSV importer
+         * @param {number} schemaId - Schema ID
+         * @returns {Promise<Object>} - Schema template
+         */
+        getSchemaTemplate: (schemaId: number) => Promise<Object>;
+    };
+    import: {
+        /**
+         * Process CSV data from the frontend importer
+         * @param {number} schemaId - Schema ID
+         * @param {Object} importData - Data from CSV importer
+         * @returns {Promise<Object>} - Import job information
+         */
+        processCSVData: (schemaId: number, importData: Object) => Promise<Object>;
+        /**
+         * Get import job status
+         * @param {number} jobId - Import job ID
+         * @returns {Promise<Object>} - Import job status
+         */
+        getImportJobStatus: (jobId: number) => Promise<Object>;
+    };
+};
+export function createApiClient(backendUrl: any, importerKey: any): any;
+export function setupInterceptors(apiClient: any, baseUrl: any): any;

package/build/settings/defaults.d.ts

@@ -1,3 +1,3 @@
-import { CSVImporterProps } from '../types';
+import { CSVImporterProps } from "../types";
 declare const defaults: CSVImporterProps;
 export default defaults;

package/build/shims/react-compat-shim.d.ts

@@ -0,0 +1,2 @@
+export { createPortal } from "react-dom";
+export { Component, PureComponent, memo, createElement, cloneElement, isValidElement, createContext, forwardRef, lazy, Suspense, Fragment, StrictMode, Profiler, useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue, useTransition, useDeferredValue, useId, useSyncExternalStore, Children, version, default } from "react";

package/build/shims/react-hooks-shim.d.ts

@@ -0,0 +1,2 @@
+export * from "react";
+export { useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback, useImperativeHandle, useLayoutEffect, useDebugValue, useId } from "react";

package/build/types/index.d.ts

@@ -35,31 +35,42 @@ export type Validator = {
     value: number;
     message?: string;
 };
+export type TransformationStage = 'pre' | 'post';
 export type Transformer = {
     type: 'trim';
+    stage?: TransformationStage;
 } | {
     type: 'uppercase';
+    stage?: TransformationStage;
 } | {
     type: 'lowercase';
+    stage?: TransformationStage;
 } | {
     type: 'capitalize';
+    stage?: TransformationStage;
 } | {
     type: 'remove_special_chars';
+    stage?: TransformationStage;
 } | {
     type: 'normalize_phone';
+    stage?: TransformationStage;
 } | {
     type: 'normalize_date';
     format?: string;
+    stage?: TransformationStage;
 } | {
     type: 'default';
     value: string;
+    stage?: TransformationStage;
 } | {
     type: 'replace';
     find: string;
     replace: string;
+    stage?: TransformationStage;
 } | {
     type: 'custom';
     fn: (value: any) => any;
+    stage?: TransformationStage;
 };
 export interface ColumnMapping {
     id: string;
@@ -81,6 +92,7 @@ type CustomTranslationResource = {
         [key: string]: string;
     };
 };
+import { ThemeConfig } from './theme';
 export type CSVImporterProps = {
     columns?: Column[];
     importerKey?: string;
@@ -88,13 +100,28 @@ export type CSVImporterProps = {
     backendUrl?: string;
     user?: Record<string, any>;
     metadata?: Record<string, any>;
+    theme?: ThemeConfig | 'default' | 'minimal' | 'modern' | 'compact' | 'dark';
     darkMode?: boolean;
     primaryColor?: string;
     className?: string;
     customStyles?: Record<string, string> | string;
+    classNames?: {
+        root?: string;
+        modal?: string;
+        header?: string;
+        stepper?: string;
+        content?: string;
+        footer?: string;
+        button?: string;
+        input?: string;
+        table?: string;
+        dropzone?: string;
+    };
     showDownloadTemplateButton?: boolean;
     skipHeaderRowSelection?: boolean;
     waitOnComplete?: boolean;
+    invalidRowHandling?: 'include' | 'exclude' | 'block';
+    includeUnmatchedColumns?: boolean;
     language?: string;
     customTranslations?: CustomTranslationResource;
     demoData?: {