@importcsv/react 0.2.1 → 0.2.4

package/build/importer/features/map-columns/index.d.ts

@@ -1,2 +1,2 @@
-import { MapColumnsProps } from './types';
+import { MapColumnsProps } from "./types";
 export default function MapColumns({ columns, data, columnMapping, selectedHeaderRow, skipHeaderRowSelection, onSuccess, onCancel, isSubmitting, importerKey, backendUrl, }: MapColumnsProps): import("react/jsx-runtime").JSX.Element | null;

package/build/importer/features/map-columns/types/index.d.ts

@@ -1,5 +1,5 @@
-import { Column, ColumnMapping, ColumnMappingDictionary } from '../../../../types';
-import { FileData } from '../../main/types';
+import { Column, ColumnMapping, ColumnMappingDictionary } from "../../../../types";
+import { FileData } from "../../main/types";
 export type { ColumnMapping, ColumnMappingDictionary };
 export type TemplateColumnMapping = ColumnMapping;
 export type MapColumnsProps = {

package/build/importer/features/row-selection/index.d.ts

@@ -1,2 +1,2 @@
-import { RowSelectionProps } from './types';
+import { RowSelectionProps } from "./types";
 export default function RowSelection({ data, onSuccess, onCancel, selectedHeaderRow, setSelectedHeaderRow }: RowSelectionProps): import("react/jsx-runtime").JSX.Element;

package/build/importer/features/row-selection/types/index.d.ts

@@ -1,4 +1,4 @@
-import { FileData } from '../../main/types';
+import { FileData } from "../../main/types";
 export type RowSelectionProps = {
     data: FileData;
     onSuccess: () => void;

package/build/importer/features/uploader/hooks/useTemplateTable.d.ts

@@ -1,4 +1,4 @@
-import { Column } from '../../../../types';
+import { Column } from "../../../../types";
 export default function useTemplateTable(fields?: Column[]): {
     [x: string]: string | {
         raw: string;

package/build/importer/features/uploader/index.d.ts

@@ -1,2 +1,2 @@
-import { UploaderProps } from './types';
+import { UploaderProps } from "./types";
 export default function Uploader({ columns, skipHeaderRowSelection, onSuccess, showDownloadTemplateButton, setDataError }: UploaderProps): import("react/jsx-runtime").JSX.Element;

package/build/importer/features/uploader/types/index.d.ts

@@ -1,5 +1,5 @@
-import { Column } from '../../../../types';
-import { Dispatch, SetStateAction } from 'react';
+import { Column } from "../../../../types";
+import { Dispatch, SetStateAction } from 'preact/hooks';
 export type UploaderProps = {
     columns?: Column[];
     skipHeaderRowSelection: boolean;

package/build/importer/features/validation/components/TransformPanel.d.ts

@@ -0,0 +1,18 @@
+import { TransformationChange } from '../../../services/transformation';
+interface TransformPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    data: any[];
+    columnMapping: Record<string, any>;
+    backendUrl: string;
+    importerKey: string;
+    validationErrors?: Array<{
+        rowIndex: number;
+        columnKey: string;
+        message: string;
+        value?: any;
+    }>;
+    onApplyTransformations: (changes: TransformationChange[]) => void;
+}
+export default function TransformPanel({ isOpen, onClose, data, columnMapping, backendUrl, importerKey, validationErrors, onApplyTransformations }: TransformPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/importer/features/validation/types.d.ts

@@ -1,6 +1,6 @@
-import { FileData } from '../main/types';
-import { TemplateColumnMapping } from '../map-columns/types';
-import { Column } from '../../../types';
+import { FileData } from "../main/types";
+import { TemplateColumnMapping } from "../map-columns/types";
+import { Column } from "../../../types";
 export interface ValidationError {
     rowIndex: number;
     columnIndex: number;

package/build/importer/hooks/useEventListener.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { RefObject } from "preact/hooks";
 declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void): void;
 declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T>): void;
 export default useEventListener;

package/build/importer/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +1,3 @@
-import { useEffect } from 'react';
+import { useEffect } from "preact/hooks";
 declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;

package/build/importer/providers/Theme.d.ts

@@ -1,5 +1,10 @@
-import { ThemeProps } from './types';
+import type { JSX } from 'preact';
+import { ThemeProps } from "./types";
+import { ThemeConfig, presetThemes } from "../../types/theme";
 export interface ThemeProviderProps extends ThemeProps {
+    theme?: ThemeConfig | keyof typeof presetThemes;
     primaryColor?: string;
+    customStyles?: Record<string, string> | string;
+    targetElement?: HTMLElement;
 }
-export default function ThemeProvider({ children, primaryColor }: ThemeProviderProps): React.ReactElement;
+export default function ThemeProvider({ children, theme, primaryColor, customStyles, targetElement }: ThemeProviderProps): JSX.Element;

package/build/importer/providers/index.d.ts

@@ -1,5 +1,5 @@
-import { ProvidersProps } from './types';
-export interface ProvidersWithThemeProps extends ProvidersProps {
-    primaryColor?: string;
+import { ProvidersProps } from "./types";
+import { ThemeProviderProps } from "./Theme";
+export interface ProvidersWithThemeProps extends ProvidersProps, ThemeProviderProps {
 }
-export default function Providers({ children, primaryColor }: ProvidersWithThemeProps): import("react/jsx-runtime").JSX.Element;
+export default function Providers({ children, theme, primaryColor, customStyles, targetElement }: ProvidersWithThemeProps): import("react/jsx-runtime").JSX.Element;

package/build/importer/providers/types/index.d.ts

@@ -1,4 +1,10 @@
-import { default as React } from 'react';
-export type ProvidersProps = React.PropsWithChildren<{}>;
-export type QueriesProps = React.PropsWithChildren<{}>;
-export type ThemeProps = React.PropsWithChildren<{}>;
+import type { ComponentChildren } from 'preact';
+export type ProvidersProps = {
+    children: ComponentChildren;
+};
+export type QueriesProps = {
+    children: ComponentChildren;
+};
+export type ThemeProps = {
+    children: ComponentChildren;
+};

package/build/importer/settings/theme/index.d.ts

@@ -1,2 +1,2 @@
-export * from './colors';
-export * from './sizes';
+export * from "./colors";
+export * from "./sizes";

package/build/importer/stores/theme.d.ts

@@ -3,15 +3,15 @@ type themeStoreType = {
     theme: Theme;
     setTheme: (theme?: Theme) => void;
 };
-declare const useThemeStore: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<themeStoreType>, "persist"> & {
+declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<themeStoreType>, "persist"> & {
     persist: {
-        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<themeStoreType, themeStoreType>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<themeStoreType, themeStoreType>>) => void;
         clearStorage: () => void;
         rehydrate: () => void | Promise<void>;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: themeStoreType) => void) => () => void;
         onFinishHydration: (fn: (state: themeStoreType) => void) => () => void;
-        getOptions: () => Partial<import('zustand/middleware').PersistOptions<themeStoreType, themeStoreType>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<themeStoreType, themeStoreType>>;
     };
 }>;
 export default useThemeStore;

package/build/importer/theme/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Theme module exports
+ * Central export point for all theme-related functionality
+ */
+export { styles, designTokens, cssVariables } from './styles';
+export { presets } from './presets';
+export { applyTheme, getCurrentTheme, resetTheme, createThemeFromColor, type SimpleTheme } from './runtime';
+export { styles as default } from './styles';

package/build/importer/theme/presets.d.ts

@@ -0,0 +1,314 @@
+/**
+ * Pre-built theme presets for the CSV Importer
+ * Use these as starting points or use them directly
+ */
+export declare const presets: {
+    default: {
+        typography: {
+            title: string;
+            subtitle: string;
+            label: string;
+            body: string;
+            caption: string;
+        };
+        spacing: {
+            page: string;
+            header: string;
+            content: string;
+            footer: string;
+            section: string;
+        };
+        layout: {
+            header: string;
+            subHeader: string;
+            content: string;
+            footer: string;
+            container: string;
+        };
+        colors: {
+            borderDefault: string;
+            bgPrimary: string;
+            bgSecondary: string;
+            bgHover: string;
+            textPrimary: string;
+            textSecondary: string;
+            textMuted: string;
+        };
+        components: {
+            card: string;
+            input: string;
+            table: string;
+            tableHeader: string;
+            tableRow: string;
+        };
+        buttons: {
+            primary: string;
+            secondary: string;
+            outline: string;
+        };
+    };
+    minimal: {
+        typography: {
+            title: string;
+            subtitle: string;
+            label: string;
+            body: string;
+            caption: string;
+        };
+        colors: {
+            borderDefault: string;
+            bgPrimary: string;
+            bgSecondary: string;
+            bgHover: string;
+            textPrimary: string;
+            textSecondary: string;
+            textMuted: string;
+        };
+        buttons: {
+            primary: string;
+            secondary: string;
+            outline: string;
+        };
+        spacing: {
+            page: string;
+            header: string;
+            content: string;
+            footer: string;
+            section: string;
+        };
+        layout: {
+            header: string;
+            subHeader: string;
+            content: string;
+            footer: string;
+            container: string;
+        };
+        components: {
+            card: string;
+            input: string;
+            table: string;
+            tableHeader: string;
+            tableRow: string;
+        };
+    };
+    modern: {
+        typography: {
+            title: string;
+            subtitle: string;
+            label: string;
+            body: string;
+            caption: string;
+        };
+        components: {
+            card: string;
+            input: string;
+            table: string;
+            tableHeader: string;
+            tableRow: string;
+        };
+        buttons: {
+            primary: string;
+            secondary: string;
+            outline: string;
+        };
+        spacing: {
+            page: string;
+            header: string;
+            content: string;
+            footer: string;
+            section: string;
+        };
+        layout: {
+            header: string;
+            subHeader: string;
+            content: string;
+            footer: string;
+            container: string;
+        };
+        colors: {
+            borderDefault: string;
+            bgPrimary: string;
+            bgSecondary: string;
+            bgHover: string;
+            textPrimary: string;
+            textSecondary: string;
+            textMuted: string;
+        };
+    };
+    compact: {
+        spacing: {
+            page: string;
+            header: string;
+            content: string;
+            footer: string;
+            section: string;
+        };
+        typography: {
+            title: string;
+            subtitle: string;
+            label: string;
+            body: string;
+            caption: string;
+        };
+        components: {
+            input: string;
+            card: string;
+            table: string;
+            tableHeader: string;
+            tableRow: string;
+        };
+        layout: {
+            header: string;
+            subHeader: string;
+            content: string;
+            footer: string;
+            container: string;
+        };
+        colors: {
+            borderDefault: string;
+            bgPrimary: string;
+            bgSecondary: string;
+            bgHover: string;
+            textPrimary: string;
+            textSecondary: string;
+            textMuted: string;
+        };
+        buttons: {
+            primary: string;
+            secondary: string;
+            outline: string;
+        };
+    };
+    dark: {
+        typography: {
+            title: string;
+            subtitle: string;
+            label: string;
+            body: string;
+            caption: string;
+        };
+        spacing: {
+            page: string;
+            header: string;
+            content: string;
+            footer: string;
+            section: string;
+        };
+        layout: {
+            header: string;
+            subHeader: string;
+            content: string;
+            footer: string;
+            container: string;
+        };
+        colors: {
+            borderDefault: string;
+            bgPrimary: string;
+            bgSecondary: string;
+            bgHover: string;
+            textPrimary: string;
+            textSecondary: string;
+            textMuted: string;
+        };
+        components: {
+            card: string;
+            input: string;
+            table: string;
+            tableHeader: string;
+            tableRow: string;
+        };
+        buttons: {
+            primary: string;
+            secondary: string;
+            outline: string;
+        };
+    };
+    corporate: {
+        typography: {
+            title: string;
+            subtitle: string;
+            label: string;
+            body: string;
+            caption: string;
+        };
+        colors: {
+            borderDefault: string;
+            bgPrimary: string;
+            bgSecondary: string;
+            bgHover: string;
+            textPrimary: string;
+            textSecondary: string;
+            textMuted: string;
+        };
+        buttons: {
+            primary: string;
+            secondary: string;
+            outline: string;
+        };
+        spacing: {
+            page: string;
+            header: string;
+            content: string;
+            footer: string;
+            section: string;
+        };
+        layout: {
+            header: string;
+            subHeader: string;
+            content: string;
+            footer: string;
+            container: string;
+        };
+        components: {
+            card: string;
+            input: string;
+            table: string;
+            tableHeader: string;
+            tableRow: string;
+        };
+    };
+    playful: {
+        typography: {
+            title: string;
+            subtitle: string;
+            label: string;
+            body: string;
+            caption: string;
+        };
+        components: {
+            card: string;
+            input: string;
+            table: string;
+            tableHeader: string;
+            tableRow: string;
+        };
+        buttons: {
+            primary: string;
+            secondary: string;
+            outline: string;
+        };
+        spacing: {
+            page: string;
+            header: string;
+            content: string;
+            footer: string;
+            section: string;
+        };
+        layout: {
+            header: string;
+            subHeader: string;
+            content: string;
+            footer: string;
+            container: string;
+        };
+        colors: {
+            borderDefault: string;
+            bgPrimary: string;
+            bgSecondary: string;
+            bgHover: string;
+            textPrimary: string;
+            textSecondary: string;
+            textMuted: string;
+        };
+    };
+};

package/build/importer/theme/runtime.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Runtime theme utilities for dynamic styling
+ * Allows changing themes without re-rendering components
+ */
+import { styles } from './styles';
+export interface SimpleTheme {
+    colors?: {
+        primary?: string;
+        primaryHover?: string;
+        background?: string;
+        foreground?: string;
+        border?: string;
+        error?: string;
+        success?: string;
+        warning?: string;
+    };
+    typography?: {
+        fontFamily?: string;
+        fontSize?: {
+            base?: string;
+            small?: string;
+            large?: string;
+        };
+    };
+    spacing?: {
+        compact?: boolean;
+        scale?: number;
+    };
+    components?: {
+        button?: {
+            variant?: 'solid' | 'outline' | 'ghost';
+            rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+        };
+        table?: {
+            striped?: boolean;
+            bordered?: boolean;
+            compact?: boolean;
+        };
+        modal?: {
+            blur?: boolean;
+            shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+        };
+        input?: {
+            variant?: 'outline' | 'filled' | 'underline';
+            rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+        };
+    };
+}
+/**
+ * Apply a theme to the importer
+ * Can accept preset name, theme object, or partial overrides
+ */
+export declare function applyTheme(container: HTMLElement, theme: string | SimpleTheme | typeof styles): void;
+/**
+ * Get the current theme from a container
+ */
+export declare function getCurrentTheme(container: HTMLElement): string | null;
+/**
+ * Reset theme to default
+ */
+export declare function resetTheme(container: HTMLElement): void;
+/**
+ * Create a theme from a primary color
+ * Generates a full theme based on a single color
+ */
+export declare function createThemeFromColor(primaryColor: string): SimpleTheme;

package/build/importer/theme/styles.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Core styles for the CSV Importer
+ * These styles ensure consistent appearance across all screens
+ * Can be overridden via the theme prop
+ */
+export declare const styles: {
+    typography: {
+        title: string;
+        subtitle: string;
+        label: string;
+        body: string;
+        caption: string;
+    };
+    spacing: {
+        page: string;
+        header: string;
+        content: string;
+        footer: string;
+        section: string;
+    };
+    layout: {
+        header: string;
+        subHeader: string;
+        content: string;
+        footer: string;
+        container: string;
+    };
+    colors: {
+        borderDefault: string;
+        bgPrimary: string;
+        bgSecondary: string;
+        bgHover: string;
+        textPrimary: string;
+        textSecondary: string;
+        textMuted: string;
+    };
+    components: {
+        card: string;
+        input: string;
+        table: string;
+        tableHeader: string;
+        tableRow: string;
+    };
+    buttons: {
+        primary: string;
+        secondary: string;
+        outline: string;
+    };
+};
+export declare const cssVariables: {
+    '--csv-color-primary': string;
+    '--csv-color-primary-hover': string;
+    '--csv-color-primary-foreground': string;
+    '--csv-color-secondary': string;
+    '--csv-color-secondary-foreground': string;
+    '--csv-color-background': string;
+    '--csv-color-foreground': string;
+    '--csv-color-border': string;
+    '--csv-color-muted': string;
+    '--csv-color-muted-foreground': string;
+    '--csv-font-family': string;
+    '--csv-font-size-xs': string;
+    '--csv-font-size-sm': string;
+    '--csv-font-size-base': string;
+    '--csv-font-size-lg': string;
+    '--csv-font-size-xl': string;
+    '--csv-spacing-xs': string;
+    '--csv-spacing-sm': string;
+    '--csv-spacing-md': string;
+    '--csv-spacing-lg': string;
+    '--csv-spacing-xl': string;
+    '--csv-radius-sm': string;
+    '--csv-radius-md': string;
+    '--csv-radius-lg': string;
+    '--csv-radius-xl': string;
+};
+export declare const designTokens: {
+    typography: {
+        title: string;
+        subtitle: string;
+        label: string;
+        body: string;
+        caption: string;
+    };
+    spacing: {
+        page: string;
+        header: string;
+        content: string;
+        footer: string;
+        section: string;
+    };
+    layout: {
+        header: string;
+        subHeader: string;
+        content: string;
+        footer: string;
+        container: string;
+    };
+    colors: {
+        borderDefault: string;
+        bgPrimary: string;
+        bgSecondary: string;
+        bgHover: string;
+        textPrimary: string;
+        textSecondary: string;
+        textMuted: string;
+    };
+    components: {
+        card: string;
+        input: string;
+        table: string;
+        tableHeader: string;
+        tableRow: string;
+    };
+    buttons: {
+        primary: string;
+        secondary: string;
+        outline: string;
+    };
+};