@importcsv/react 0.2.14 → 0.4.0

package/build/components/CSVImporter/index.d.ts

@@ -0,0 +1,55 @@
+import { JSX } from 'preact/compat';
+import { CSVImporterProps } from "../../types";
+import "../../index.css";
+import "./style/csv-importer.css";
+import "./style/dark-mode.css";
+import "../Modal/style.css";
+declare const CSVImporter: <TSchema = any>(props: {
+    schema?: import("zod").ZodType<TSchema, import("zod").ZodTypeDef, TSchema> | undefined;
+    columns?: import("../../types").Column[] | undefined;
+    importerKey?: string | undefined;
+    onComplete?: ((data: TSchema[]) => void) | undefined;
+    backendUrl?: string | undefined;
+    user?: Record<string, any> | undefined;
+    metadata?: Record<string, any> | undefined;
+    theme?: "default" | "minimal" | "modern" | "compact" | "dark" | import("../../types/theme").ThemeConfig | undefined;
+    darkMode?: boolean | undefined;
+    primaryColor?: string | undefined;
+    className?: string | undefined;
+    customStyles?: string | Record<string, string> | undefined;
+    classNames?: {
+        root?: string | undefined;
+        modal?: string | undefined;
+        header?: string | undefined;
+        stepper?: string | undefined;
+        content?: string | undefined;
+        footer?: string | undefined;
+        button?: string | undefined;
+        input?: string | undefined;
+        table?: string | undefined;
+        dropzone?: string | undefined;
+    } | undefined;
+    showDownloadTemplateButton?: boolean | undefined;
+    skipHeaderRowSelection?: boolean | undefined;
+    waitOnComplete?: boolean | undefined;
+    invalidRowHandling?: "include" | "exclude" | "block" | undefined;
+    includeUnmatchedColumns?: boolean | undefined;
+    language?: string | undefined;
+    customTranslations?: {
+        [language: string]: {
+            [key: string]: string;
+        };
+    } | undefined;
+    demoData?: {
+        fileName: string;
+        csvContent: string;
+    } | undefined;
+} & {
+    isModal?: boolean | undefined;
+    modalIsOpen?: boolean | undefined;
+    modalOnCloseTriggered?: (() => void) | undefined;
+    modalCloseOnOutsideClick?: boolean | undefined;
+} & {
+    ref?: any;
+}) => JSX.Element;
+export default CSVImporter;

package/build/components/CSVImporterHeadless.d.ts

@@ -0,0 +1,46 @@
+/**
+ * INTERNAL EXAMPLE: Complete CSV Importer built with headless primitives
+ *
+ * This component demonstrates how to build a full-featured importer using
+ * only the headless primitives. It's kept as an internal reference and for tests.
+ *
+ * Users should either:
+ * - Use the main CSVImporter component (full-featured, production-ready)
+ * - Build custom importers using CSV.* primitives (maximum flexibility)
+ * - Use standalone Uploader/ColumnMapper components (pick what you need)
+ *
+ * This is NOT exported from the package - it serves as documentation
+ * and a comprehensive integration test of the headless architecture.
+ */
+import { h } from 'preact';
+import { z } from 'zod';
+import type { Column } from '../headless/types';
+export interface CSVImporterHeadlessProps {
+    schema?: z.ZodSchema<any>;
+    columns?: Column[];
+    onComplete: (data: any[]) => void | Promise<void>;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    className?: string;
+    theme?: 'light' | 'dark';
+    appearance?: {
+        variables?: {
+            colorPrimary?: string;
+            borderRadius?: string;
+        };
+    };
+    skipColumnMapping?: boolean;
+    skipValidation?: boolean;
+    autoSkipIfPerfectMatch?: boolean;
+    maxFileSize?: number;
+    acceptedFormats?: string[];
+    showPreview?: boolean;
+    previewRows?: number;
+}
+/**
+ * Main CSVImporter component built with headless primitives
+ */
+export declare const CSVImporterHeadless: ({ schema, columns, onComplete, onError, className, theme, appearance, skipColumnMapping, skipValidation, autoSkipIfPerfectMatch, maxFileSize, acceptedFormats, showPreview, previewRows }: CSVImporterHeadlessProps) => h.JSX.Element;
+export default CSVImporterHeadless;

package/build/components/ColumnMapper.d.ts

@@ -0,0 +1,28 @@
+import { h } from 'preact';
+import { z } from 'zod';
+import type { Column } from '../headless/types';
+interface ColumnMapperProps {
+    schema?: z.ZodSchema<any>;
+    columns?: Column[];
+    data: {
+        rows: any[];
+    };
+    onComplete: (mapping: Record<string, string>) => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    autoSuggest?: boolean;
+    showPreview?: boolean;
+    previewRows?: number;
+    autoSkipIfPerfectMatch?: boolean;
+    className?: string;
+    theme?: 'light' | 'dark';
+    appearance?: {
+        variables?: {
+            colorPrimary?: string;
+        };
+    };
+}
+export declare const ColumnMapper: ({ schema, columns: propColumns, data, onComplete, onError, autoSuggest, showPreview, previewRows, autoSkipIfPerfectMatch, className, theme, appearance }: ColumnMapperProps) => h.JSX.Element;
+export default ColumnMapper;

package/build/{preact/components → components}/Modal/index.d.ts

@@ -8,5 +8,5 @@ interface ModalProps {
     overlayClassName?: string;
     contentClassName?: string;
 }
-declare const Modal: ({ isOpen, onClose, children, closeOnOutsideClick, className, overlayClassName, contentClassName }: ModalProps) => import('preact').VNode<any> | null;
+declare const Modal: ({ isOpen, onClose, children, closeOnOutsideClick, className, overlayClassName, contentClassName }: ModalProps) => import("preact").VNode<any> | null;
 export default Modal;

package/build/components/Uploader.d.ts

@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import { z } from 'zod';
+import type { Column } from '../headless/types';
+interface UploaderProps {
+    schema?: z.ZodSchema<any>;
+    columns?: Column[];
+    onUpload: (data: {
+        rows: any[];
+    }) => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    placeholder?: string;
+    maxSize?: number;
+    acceptedFormats?: string[];
+    className?: string;
+    theme?: 'light' | 'dark';
+    appearance?: {
+        variables?: {
+            colorPrimary?: string;
+            borderRadius?: string;
+        };
+    };
+}
+export declare const Uploader: ({ schema, columns, onUpload, ...props }: UploaderProps) => h.JSX.Element;
+export default Uploader;

package/build/components/Validator.d.ts

@@ -0,0 +1,28 @@
+import { h } from 'preact';
+import { z } from 'zod';
+import type { Column } from '../headless/types';
+interface ValidatorProps {
+    schema?: z.ZodSchema<any>;
+    columns?: Column[];
+    data: {
+        rows: any[];
+    };
+    mapping?: Record<string, string>;
+    onComplete: (validData: any[]) => void;
+    autoValidate?: boolean;
+    allowInlineEdit?: boolean;
+    allowRemoveRows?: boolean;
+    allowSubmitWithErrors?: boolean;
+    allowExportErrors?: boolean;
+    className?: string;
+    theme?: 'light' | 'dark';
+    appearance?: {
+        variables?: {
+            colorError?: string;
+            colorSuccess?: string;
+        };
+    };
+    errorsPerPage?: number;
+}
+export declare const Validator: ({ schema, columns, data, mapping, onComplete, autoValidate, allowInlineEdit, allowRemoveRows, allowSubmitWithErrors, allowExportErrors, className, theme, appearance, errorsPerPage }: ValidatorProps) => h.JSX.Element;
+export default Validator;

package/build/components/__tests__/ColumnMapper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/__tests__/Uploader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/__tests__/Validator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/index.d.ts

@@ -0,0 +1,3 @@
+export { Uploader } from './Uploader';
+export { ColumnMapper } from './ColumnMapper';
+export { Validator } from './Validator';

package/build/config/index.d.ts

@@ -0,0 +1,5 @@
+export function getApiBaseUrl(backendUrl: string): string;
+declare namespace _default {
+    export { getApiBaseUrl };
+}
+export default _default;

package/build/headless/__tests__/integration.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Integration tests for building a complete CSV importer using headless components
+ *
+ * These tests verify that:
+ * 1. Headless components can build a full CSV import workflow
+ * 2. The workflow matches the behavior of the existing CSVImporter
+ * 3. All features work together seamlessly
+ * 4. Backward compatibility with legacy API is maintained
+ */
+export {};

package/build/headless/__tests__/root.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/headless/__tests__/root.types.test-d.d.ts

@@ -0,0 +1 @@
+export {};

package/build/headless/__tests__/slot-components.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/headless/__tests__/validator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/headless/back-button.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentChildren } from 'preact';
+export interface BackButtonProps {
+    asChild?: boolean;
+    onClick?: () => void;
+    children: ComponentChildren;
+    [key: string]: any;
+}
+/**
+ * BackButton component - Go to previous step
+ *
+ * @example
+ * // Default button
+ * <BackButton onClick={goToPreviousStep}>Back</BackButton>
+ *
+ * @example
+ * // With shadcn/ui Button
+ * import { Button } from '@/components/ui/button';
+ * <BackButton asChild>
+ *   <Button variant="outline">Back</Button>
+ * </BackButton>
+ *
+ * @example
+ * // With Chakra UI Button
+ * import { Button } from '@chakra-ui/react';
+ * <BackButton asChild>
+ *   <Button colorScheme="gray">Back</Button>
+ * </BackButton>
+ */
+export declare function BackButton({ asChild, children, onClick, ...props }: BackButtonProps): import("preact").JSX.Element;

package/build/headless/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Headless CSV Importer Components
+ *
+ * Domain logic primitives with no UI dependencies.
+ * Works with any design system (shadcn/ui, MUI, Chakra, etc.)
+ *
+ * @example
+ * // With Zod schema
+ * import * as CSV from '@importcsv/react/headless';
+ * import { z } from 'zod';
+ *
+ * const schema = z.object({
+ *   name: z.string(),
+ *   email: z.string().email()
+ * });
+ *
+ * <CSV.Root schema={schema} onComplete={handleComplete}>
+ *   <CSV.Validator>
+ *     {({ errors, validate }) => (
+ *       // Your custom UI here
+ *     )}
+ *   </CSV.Validator>
+ * </CSV.Root>
+ *
+ * @example
+ * // With design system components (asChild pattern)
+ * import { Button } from '@/components/ui/button';
+ *
+ * <CSV.UploadTrigger asChild>
+ *   <Button variant="primary">Upload CSV</Button>
+ * </CSV.UploadTrigger>
+ */
+export { Root, useCSV } from './root';
+export { Validator } from './validator';
+export { UploadTrigger } from './upload-trigger';
+export { NextButton } from './next-button';
+export { BackButton } from './back-button';
+export { SubmitButton } from './submit-button';
+export type { Column, ValidationError, CSVContextValue, RootProps, ValidatorProps, ValidatorChildProps } from './types';
+export type { UploadTriggerProps } from './upload-trigger';
+export type { NextButtonProps } from './next-button';
+export type { BackButtonProps } from './back-button';
+export type { SubmitButtonProps } from './submit-button';
+export { zodSchemaToColumns } from './utils/zodSchemaToColumns';
+export { Slot } from './utils/slot';

package/build/headless/next-button.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentChildren } from 'preact';
+export interface NextButtonProps {
+    asChild?: boolean;
+    onClick?: () => void;
+    children: ComponentChildren;
+    [key: string]: any;
+}
+/**
+ * NextButton component - Proceed to next step
+ *
+ * @example
+ * // Default button
+ * <NextButton onClick={goToNextStep}>Next</NextButton>
+ *
+ * @example
+ * // With shadcn/ui Button
+ * import { Button } from '@/components/ui/button';
+ * <NextButton asChild>
+ *   <Button variant="primary">Next</Button>
+ * </NextButton>
+ *
+ * @example
+ * // With Material-UI Button
+ * import { Button } from '@mui/material';
+ * <NextButton asChild>
+ *   <Button variant="contained">Next</Button>
+ * </NextButton>
+ */
+export declare function NextButton({ asChild, children, onClick, ...props }: NextButtonProps): import("preact").JSX.Element;

package/build/headless/root.d.ts

@@ -0,0 +1,40 @@
+import type { CSVContextValue, RootProps } from './types';
+export declare const CSVContext: import("preact").Context<CSVContextValue<any> | null>;
+/**
+ * CSV Root context provider with Zod schema support
+ *
+ * @example
+ * // With Zod schema (recommended)
+ * const schema = z.object({
+ *   name: z.string(),
+ *   email: z.string().email()
+ * });
+ *
+ * <CSV.Root schema={schema} onComplete={(data) => console.log(data)}>
+ *   <CSV.Uploader />
+ *   <CSV.Validator />
+ * </CSV.Root>
+ *
+ * @example
+ * // With legacy columns array (backward compatibility)
+ * <CSV.Root
+ *   columns={[
+ *     { id: 'name', label: 'Name', type: 'string', required: true },
+ *     { id: 'email', label: 'Email', type: 'email', required: true }
+ *   ]}
+ *   onComplete={(data) => console.log(data)}
+ * >
+ *   <CSV.Uploader />
+ * </CSV.Root>
+ */
+export declare function Root<TSchema = any>({ children, schema, columns, onComplete, data }: RootProps<TSchema>): import("preact").JSX.Element;
+/**
+ * Hook to access CSV context
+ *
+ * @example
+ * function MyComponent() {
+ *   const { columns, validate, schema } = useCSV();
+ *   return <div>{columns.length} columns</div>;
+ * }
+ */
+export declare function useCSV(): CSVContextValue<any>;

package/build/headless/submit-button.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentChildren } from 'preact';
+export interface SubmitButtonProps {
+    asChild?: boolean;
+    onClick?: () => void;
+    children: ComponentChildren;
+    [key: string]: any;
+}
+/**
+ * SubmitButton component - Submit final data
+ *
+ * @example
+ * // Default button
+ * <SubmitButton>Submit</SubmitButton>
+ *
+ * @example
+ * // With shadcn/ui Button
+ * import { Button } from '@/components/ui/button';
+ * <SubmitButton asChild>
+ *   <Button variant="primary">Submit</Button>
+ * </SubmitButton>
+ *
+ * @example
+ * // With Material-UI Button
+ * import { Button } from '@mui/material';
+ * <SubmitButton asChild>
+ *   <Button variant="contained" type="submit">Submit</Button>
+ * </SubmitButton>
+ */
+export declare function SubmitButton({ asChild, children, onClick, ...props }: SubmitButtonProps): import("preact").JSX.Element;

package/build/headless/types.d.ts

@@ -0,0 +1,52 @@
+import { z } from 'zod';
+import { ComponentChildren } from 'preact';
+export interface Column {
+    id: string;
+    label?: string;
+    type?: string;
+    required?: boolean;
+    validators?: Array<{
+        type: string;
+        value?: any;
+        message?: string;
+        pattern?: string;
+    }>;
+    transformations?: Array<{
+        type: string;
+        [key: string]: any;
+    }>;
+    options?: string[];
+    description?: string;
+    placeholder?: string;
+}
+export interface ValidationError {
+    row: number;
+    column: string;
+    message: string;
+}
+export interface CSVContextValue<TSchema = any> {
+    columns: Column[];
+    schema?: z.ZodSchema<TSchema>;
+    validate: (row: any) => z.SafeParseReturnType<TSchema, TSchema>;
+    onComplete: (data: TSchema[]) => void | Promise<void>;
+    data?: {
+        rows: any[];
+    };
+}
+export interface RootProps<TSchema = any> {
+    children: ComponentChildren;
+    schema?: z.ZodSchema<TSchema>;
+    columns?: Column[];
+    onComplete: (data: TSchema[]) => void | Promise<void>;
+    data?: {
+        rows: any[];
+    };
+}
+export interface ValidatorChildProps {
+    errors: ValidationError[];
+    validate: () => Promise<ValidationError[]>;
+    isValidating: boolean;
+}
+export interface ValidatorProps {
+    children: (props: ValidatorChildProps) => any;
+}

package/build/headless/upload-trigger.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentChildren } from 'preact';
+export interface UploadTriggerProps {
+    asChild?: boolean;
+    onClick?: () => void;
+    children: ComponentChildren;
+    [key: string]: any;
+}
+/**
+ * UploadTrigger component - Trigger file picker
+ *
+ * @example
+ * // Default button
+ * <UploadTrigger>Upload CSV</UploadTrigger>
+ *
+ * @example
+ * // With shadcn/ui Button
+ * import { Button } from '@/components/ui/button';
+ * <UploadTrigger asChild>
+ *   <Button variant="primary">Upload CSV</Button>
+ * </UploadTrigger>
+ *
+ * @example
+ * // With Material-UI Button
+ * import { Button } from '@mui/material';
+ * <UploadTrigger asChild>
+ *   <Button variant="contained">Upload CSV</Button>
+ * </UploadTrigger>
+ */
+export declare function UploadTrigger({ asChild, children, onClick, ...props }: UploadTriggerProps): import("preact").JSX.Element;

package/build/headless/utils/slot.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentChildren, type VNode } from 'preact';
+interface SlotProps {
+    children: ComponentChildren;
+    onClick?: (...args: any[]) => void;
+    className?: string;
+    [key: string]: any;
+}
+/**
+ * Slot component for Preact - enables composition pattern (asChild)
+ *
+ * Merges props from parent to child element, similar to Radix UI's Slot
+ *
+ * @example
+ * const Comp = asChild ? Slot : 'button';
+ * <Comp onClick={handleClick} className="btn">
+ *   <CustomButton>Click me</CustomButton>
+ * </Comp>
+ */
+export declare function Slot({ children, ...props }: SlotProps): VNode<any> | null;
+export {};

package/build/headless/utils/zodSchemaToColumns.d.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod';
+import type { Column } from '../../types';
+/**
+ * Converts a Zod schema to Column[] with full validator/transformer extraction
+ *
+ * @example
+ * const schema = z.object({
+ *   name: z.string().min(1, 'Name is required'),
+ *   email: z.string().email('Must be a valid email'),
+ *   age: z.number().min(18).optional(),
+ *   department: z.enum(['engineering', 'sales', 'marketing'])
+ * });
+ *
+ * const columns = zodSchemaToColumns(schema);
+ * // Result: [
+ * //   { id: 'name', label: 'Name', type: 'string', validators: [...] },
+ * //   { id: 'email', label: 'Email', type: 'email', validators: [...] },
+ * //   { id: 'age', label: 'Age', type: 'number', validators: [...] },
+ * //   { id: 'department', label: 'Department', type: 'select', options: [...] }
+ * // ]
+ *
+ * @note Boolean fields are mapped to 'string' type for CSV compatibility,
+ *       as CSV data is text-based and typically represents booleans as 'true'/'false' strings.
+ */
+export declare function zodSchemaToColumns<T>(schema: z.ZodSchema<T>): Column[];

package/build/headless/utils/zodSchemaToColumns.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/headless/validator.d.ts

@@ -0,0 +1,28 @@
+import type { ValidatorProps } from './types';
+/**
+ * CSV Validator component with Zod integration
+ *
+ * Provides validation functionality using Zod schemas or custom validation logic
+ *
+ * @example
+ * <CSV.Validator>
+ *   {({ errors, validate, isValidating }) => (
+ *     <div>
+ *       <button onClick={validate} disabled={isValidating}>
+ *         {isValidating ? 'Validating...' : 'Validate Data'}
+ *       </button>
+ *       {errors.length > 0 && (
+ *         <div>
+ *           <h3>Validation Errors:</h3>
+ *           {errors.map((error, i) => (
+ *             <div key={i}>
+ *               Row {error.row + 1}, Column {error.column}: {error.message}
+ *             </div>
+ *           ))}
+ *         </div>
+ *       )}
+ *     </div>
+ *   )}
+ * </CSV.Validator>
+ */
+export declare function Validator({ children }: ValidatorProps): any;

package/build/importer/components/Box/index.d.ts

@@ -0,0 +1,2 @@
+import { BoxProps } from "./types";
+export default function Box({ className, variants, ...props }: BoxProps): import("preact").JSX.Element;

package/build/importer/components/Box/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/{preact/importer → importer}/components/Box/types/index.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "preact";
 export type BoxVariant = "fluid" | "mid" | "wide" | "space-l" | "space-mid" | "space-none" | "bg-shade";
 export type BoxProps = JSX.HTMLAttributes<HTMLDivElement> & {
     variants?: BoxVariant[];

package/build/importer/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from "preact";
+import { CheckboxProps } from "./types";
+export default function Checkbox({ label, className, ...props }: CheckboxProps): JSX.Element;

package/build/importer/components/Checkbox/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/importer/components/Checkbox/types/index.d.ts

@@ -0,0 +1,8 @@
+import { JSX, VNode } from "preact";
+export type CheckboxProps = Omit<JSX.HTMLAttributes<HTMLInputElement>, 'label'> & {
+    label?: string | VNode;
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: JSX.TargetedEvent<HTMLInputElement, Event>) => void;
+};

package/build/{bundled/importer → importer}/components/Errors/index.d.ts

@@ -1,4 +1,4 @@
 export default function Errors({ error, centered }: {
     error?: unknown;
     centered?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("preact").JSX.Element | null;

package/build/{bundled/importer → importer}/components/Input/index.d.ts

@@ -1,2 +1,2 @@
-import { InputProps } from './types';
-export default function Input({ as, label, icon, iconAfter, error, options, className, variants, children, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+import { InputProps } from "./types";
+export default function Input({ as, label, icon, iconAfter, error, options, className, variants, children, ...props }: InputProps): import("preact/compat").JSX.Element;

package/build/importer/components/Input/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/importer/components/Input/types/index.d.ts

@@ -0,0 +1,24 @@
+import { JSX, VNode } from "preact";
+export type inputTypes = "date" | "datetime-local" | "email" | "file" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
+export type InputVariants = "fluid" | "small";
+export type InputOption = JSX.HTMLAttributes<HTMLButtonElement> & {
+    required?: boolean;
+    value?: string;
+};
+export type InputProps = Omit<JSX.HTMLAttributes<HTMLInputElement>, 'label'> & Omit<JSX.HTMLAttributes<HTMLSelectElement>, 'label'> & Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, 'label'> & {
+    as?: "input" | "textarea";
+    label?: string | VNode;
+    icon?: VNode;
+    iconAfter?: VNode;
+    error?: string;
+    options?: {
+        [key: string]: InputOption;
+    };
+    variants?: InputVariants[];
+    type?: inputTypes;
+    name?: string;
+    disabled?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+};