@importcsv/react 0.1.12 → 0.1.14

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

@@ -22,6 +22,10 @@ declare const CSVImporter: React.ForwardRefExoticComponent<{
     user?: Record<string, any> | undefined;
     metadata?: Record<string, any> | undefined;
     useIframe?: boolean | undefined;
+    demoData?: {
+        fileName: string;
+        csvContent: string;
+    } | undefined;
 } & {
     isModal?: boolean | undefined;
     modalIsOpen?: boolean | undefined;

package/build/importer/features/configure-import/index.d.ts

@@ -3,10 +3,11 @@ interface ConfigureImportProps {
     template: Template;
     data: any;
     onSuccess: (mapping: any, headerRow: number) => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     isSubmitting?: boolean;
     importerKey?: string;
     backendUrl?: string;
+    isDemoMode?: boolean;
 }
-export default function ConfigureImport({ template, data, onSuccess, onCancel, isSubmitting, importerKey, backendUrl, }: ConfigureImportProps): import("react/jsx-runtime").JSX.Element;
+export default function ConfigureImport({ template, data, onSuccess, onCancel, isSubmitting, importerKey, backendUrl, isDemoMode, }: ConfigureImportProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/importer/features/configure-import/types/index.d.ts

@@ -3,10 +3,11 @@ export interface ConfigureImportProps {
     template: Template;
     data: any;
     onSuccess: (mapping: any, headerRow: number) => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     isSubmitting?: boolean;
     importerKey?: string;
     backendUrl?: string;
+    isDemoMode?: boolean;
 }
 export interface TemplateColumnMapping {
     key: string;

package/build/importer/features/main/hooks/useStepNavigation.d.ts

@@ -6,7 +6,7 @@ export declare const StepEnum: {
     Validation: number;
     Complete: number;
 };
-declare function useStepNavigation(initialStep: number, skipHeader: boolean, useConsolidated?: boolean): {
+declare function useStepNavigation(initialStep: number, skipHeader: boolean, useConsolidated?: boolean, isDemoMode?: boolean): {
     currentStep: any;
     setStep: (newStep: number) => void;
     goBack: (backStep?: number) => void;

package/build/index.esm.js

@@ -30186,13 +30186,19 @@ var getStepConfig = function (skipHeader, useConsolidated) {
         { label: "Validation", id: Steps.Validation },
     ];
 };
-function useStepNavigation(initialStep, skipHeader, useConsolidated) {
+function useStepNavigation(initialStep, skipHeader, useConsolidated, isDemoMode) {
     var _a;
     if (useConsolidated === void 0) { useConsolidated = true; }
+    if (isDemoMode === void 0) { isDemoMode = false; }
     var t = useTranslation().t;
     var translatedSteps = getStepConfig(skipHeader, useConsolidated).map(function (step) { return (__assign$1(__assign$1({}, step), { label: t(step.label) })); });
-    var stepper = useStepper(translatedSteps, StepEnum.Upload, skipHeader);
-    var _b = useMutableLocalStorage("tf_steps", ""), storageStep = _b[0], setStorageStep = _b[1];
+    // Map initial step to stepper index for consolidated flow
+    var initialStepperIndex = useConsolidated && initialStep === StepEnum.MapColumns ? 1 :
+        useConsolidated && initialStep === StepEnum.Validation ? 2 :
+            useConsolidated && initialStep === StepEnum.Complete ? 3 : 0;
+    var stepper = useStepper(translatedSteps, initialStepperIndex, skipHeader);
+    // Don't use localStorage in demo mode
+    var _b = useMutableLocalStorage("tf_steps", isDemoMode ? "" : ""), storageStep = _b[0], setStorageStep = _b[1];
     var _c = useState$1(initialStep), currentStep = _c[0], setCurrentStep = _c[1];
     var goBack = function (backStep) {
         var targetStep = backStep !== undefined ? backStep : Math.max(0, currentStep - 1);
@@ -30217,6 +30223,10 @@ function useStepNavigation(initialStep, skipHeader, useConsolidated) {
         stepper.setCurrent(stepperIndex);
     };
     useEffect$2(function () {
+        // In demo mode, don't use localStorage
+        if (isDemoMode) {
+            return;
+        }
         var step = storageStep || 0;
         // Map the step to the correct stepper index for consolidated flow
         var stepperIndex = useConsolidated ?
@@ -30227,9 +30237,9 @@ function useStepNavigation(initialStep, skipHeader, useConsolidated) {
             : step;
         stepper.setCurrent(stepperIndex);
         setCurrentStep(step);
-    }, [storageStep]);
+    }, [storageStep, isDemoMode]);
     return {
-        currentStep: storageStep || currentStep,
+        currentStep: isDemoMode ? currentStep : (storageStep || currentStep),
         setStep: setStep,
         goBack: goBack,
         goNext: goNext,
@@ -32174,11 +32184,11 @@ styleInject(css_248z$4);
 
 function ConfigureImport(_a) {
     var _this = this;
-    var template = _a.template, data = _a.data, onSuccess = _a.onSuccess, onCancel = _a.onCancel, _b = _a.isSubmitting, isSubmitting = _b === void 0 ? false : _b, importerKey = _a.importerKey, backendUrl = _a.backendUrl;
+    var template = _a.template, data = _a.data, onSuccess = _a.onSuccess, onCancel = _a.onCancel, _b = _a.isSubmitting, isSubmitting = _b === void 0 ? false : _b, importerKey = _a.importerKey, backendUrl = _a.backendUrl, _c = _a.isDemoMode, isDemoMode = _c === void 0 ? false : _c;
     var t = useTranslation().t;
     var selectedHeaderRow = 0; // Always use first row as headers
-    var _c = useState$1({}), columnMapping = _c[0], setColumnMapping = _c[1];
-    var _d = useState$1(null), error = _d[0], setError = _d[1];
+    var _d = useState$1({}), columnMapping = _d[0], setColumnMapping = _d[1];
+    var _e = useState$1(null), error = _e[0], setError = _e[1];
     var llmEnhancementCalled = useRef$1(false);
     // Get preview data (first 5 rows)
     useMemo$1(function () {
@@ -32357,7 +32367,7 @@ function ConfigureImport(_a) {
                                                                         columnMapping[idx].key !== field.key;
                                                                     return (jsx(SelectItem, __assign$1({ value: idx.toString(), disabled: isAlreadyMapped }, { children: isAlreadyMapped ? (jsxs("span", __assign$1({ className: "text-gray-400" }, { children: [header, " (mapped)"] }))) : (header) }), idx));
                                                                 })] })] })) })), jsx("td", __assign$1({ className: "px-6 py-4" }, { children: jsx(Text, __assign$1({ className: "text-sm text-gray-600 truncate max-w-[300px]", title: mappedColumn ? getSampleData(parseInt(mappedColumn)) : '' }, { children: mappedColumn ? (getSampleData(parseInt(mappedColumn)) || '-') : '' })) }))] }), field.key));
-                                }) })] })) })), error && (jsx(Box, __assign$1({ className: "bg-red-50 border border-red-200 rounded-lg px-4 py-3" }, { children: jsx(Text, __assign$1({ className: "text-sm text-red-700" }, { children: error })) }))), jsxs(Flex, __assign$1({ justify: "between", className: "w-full pt-6 border-t border-gray-200" }, { children: [jsx(Button, __assign$1({ variant: "outline", onClick: onCancel, disabled: isSubmitting, size: "default" }, { children: t('Back') })), jsx(Button, __assign$1({ onClick: handleSubmit, isLoading: isSubmitting, disabled: !allRequiredFieldsMapped, size: "default", variant: "default" }, { children: t('Continue') }))] }))] })) })));
+                                }) })] })) })), error && (jsx(Box, __assign$1({ className: "bg-red-50 border border-red-200 rounded-lg px-4 py-3" }, { children: jsx(Text, __assign$1({ className: "text-sm text-red-700" }, { children: error })) }))), jsxs(Flex, __assign$1({ justify: "between", className: "w-full pt-6 border-t border-gray-200" }, { children: [!isDemoMode && onCancel && (jsx(Button, __assign$1({ variant: "outline", onClick: onCancel, disabled: isSubmitting, size: "default" }, { children: t('Back') }))), isDemoMode && jsx("div", {}), jsx(Button, __assign$1({ onClick: handleSubmit, isLoading: isSubmitting, disabled: !allRequiredFieldsMapped, size: "default", variant: "default" }, { children: t('Continue') }))] }))] })) })));
 }
 
 /**
@@ -35772,14 +35782,18 @@ function IframeWrapper(_a) {
 
 function Main(props) {
     var _this = this;
-    var _a = props.isModal, isModal = _a === void 0 ? true : _a, _b = props.modalOnCloseTriggered, modalOnCloseTriggered = _b === void 0 ? function () { return null; } : _b, onComplete = props.onComplete, customStyles = props.customStyles, showDownloadTemplateButton = props.showDownloadTemplateButton, skipHeaderRowSelection = props.skipHeaderRowSelection, importerKey = props.importerKey, _c = props.backendUrl, backendUrl = _c === void 0 ? config.apiBaseUrl : _c, user = props.user, metadata = props.metadata, _d = props.useIframe, useIframe = _d === void 0 ? true : _d;
+    var _a = props.isModal, isModal = _a === void 0 ? true : _a, _b = props.modalOnCloseTriggered, modalOnCloseTriggered = _b === void 0 ? function () { return null; } : _b, onComplete = props.onComplete, customStyles = props.customStyles, showDownloadTemplateButton = props.showDownloadTemplateButton, skipHeaderRowSelection = props.skipHeaderRowSelection, importerKey = props.importerKey, _c = props.backendUrl, backendUrl = _c === void 0 ? config.apiBaseUrl : _c, user = props.user, metadata = props.metadata, _d = props.useIframe, useIframe = _d === void 0 ? true : _d, // Default to using iframe for CSS isolation
+    demoData = props.demoData;
     var skipHeader = skipHeaderRowSelection !== null && skipHeaderRowSelection !== void 0 ? skipHeaderRowSelection : false;
+    var isDemoMode = !!demoData;
     var t = useTranslation().t;
     // Apply custom styles
     useCustomStyles(parseObjectOrStringJSON("customStyles", customStyles));
     // Stepper handler - using consolidated flow
     var useConsolidatedFlow = true; // Using consolidated flow to combine header selection and mapping
-    var _e = useStepNavigation(StepEnum.Upload, skipHeader, useConsolidatedFlow), currentStep = _e.currentStep, setStep = _e.setStep, goNext = _e.goNext, goBack = _e.goBack, stepper = _e.stepper;
+    // Start at MapColumns step if demo mode is active
+    var initialStep = isDemoMode ? StepEnum.MapColumns : StepEnum.Upload;
+    var _e = useStepNavigation(initialStep, skipHeader, useConsolidatedFlow, isDemoMode), currentStep = _e.currentStep, setStep = _e.setStep, goNext = _e.goNext, goBack = _e.goBack, stepper = _e.stepper;
     // Error handling
     var _f = useState$1(null), initializationError = _f[0], setInitializationError = _f[1];
     var _g = useState$1(null), dataError = _g[0], setDataError = _g[1];
@@ -35804,6 +35818,29 @@ function Main(props) {
     var _p = useState$1(false), includeUnmatchedColumns = _p[0], setIncludeUnmatchedColumns = _p[1];
     var _q = useState$1(false), filterInvalidRows = _q[0], setFilterInvalidRows = _q[1];
     var _r = useState$1(false), disableOnInvalidRows = _r[0], setDisableOnInvalidRows = _r[1];
+    // Initialize demo data if provided
+    useEffect$2(function () {
+        if (isDemoMode && demoData) {
+            // Parse the demo CSV content
+            papaparse_min.parse(demoData.csvContent, {
+                complete: function (results) {
+                    var csvData = results.data;
+                    var isNotBlankRow = function (row) { return row.some(function (cell) { return cell.toString().trim() !== ""; }); };
+                    var rows = csvData.filter(isNotBlankRow).map(function (row, index) { return ({ index: index, values: row }); });
+                    setData({
+                        fileName: demoData.fileName,
+                        rows: rows,
+                        sheetList: [],
+                        errors: results.errors.map(function (error) { return error.message; }),
+                    });
+                    // Ensure we're on the correct step after data is loaded
+                    if (currentStep === StepEnum.Upload) {
+                        setStep(StepEnum.MapColumns);
+                    }
+                },
+            });
+        }
+    }, [isDemoMode, demoData]);
     // Fetch schema from the backend using importerKey
     useEffect$2(function () {
         var fetchSchema = function () { return __awaiter(_this, void 0, void 0, function () {
@@ -36106,7 +36143,7 @@ function Main(props) {
                             setColumnMapping(mapping);
                             setSelectedHeaderRow(headerRow);
                             goNext();
-                        }, onCancel: function () { return goBack(StepEnum.Upload); }, isSubmitting: isSubmitting, importerKey: importerKey, backendUrl: backendUrl }));
+                        }, onCancel: isDemoMode ? undefined : function () { return goBack(StepEnum.Upload); }, isSubmitting: isSubmitting, importerKey: importerKey, backendUrl: backendUrl, isDemoMode: isDemoMode }));
                 }
             case StepEnum.Validation:
                 return (jsx(Validation, { template: parsedTemplate, data: data, columnMapping: columnMapping, selectedHeaderRow: selectedHeaderRow, onSuccess: handleValidationComplete, onCancel: handleBackToMapColumns, isSubmitting: isSubmitting, backendUrl: backendUrl, importerKey: importerKey, filterInvalidRows: filterInvalidRows, disableOnInvalidRows: disableOnInvalidRows }));
@@ -37802,9 +37839,9 @@ styleInject(css_248z);
 
 var CSVImporter = forwardRef(function (importerProps, forwardRef) {
     // Destructure all known props from CSVImporterProps
-    var _a = importerProps.isModal, isModal = _a === void 0 ? true : _a, _b = importerProps.modalIsOpen, modalIsOpen = _b === void 0 ? true : _b, _c = importerProps.modalOnCloseTriggered, modalOnCloseTriggered = _c === void 0 ? function () { return null; } : _c, modalCloseOnOutsideClick = importerProps.modalCloseOnOutsideClick, _d = importerProps.darkMode, darkMode = _d === void 0 ? false : _d, _e = importerProps.primaryColor, primaryColor = _e === void 0 ? "#2563eb" : _e, className = importerProps.className, onComplete = importerProps.onComplete, customStyles = importerProps.customStyles, showDownloadTemplateButton = importerProps.showDownloadTemplateButton, skipHeaderRowSelection = importerProps.skipHeaderRowSelection, language = importerProps.language, customTranslations = importerProps.customTranslations, importerKey = importerProps.importerKey, backendUrl = importerProps.backendUrl, user = importerProps.user, metadata = importerProps.metadata, 
+    var _a = importerProps.isModal, isModal = _a === void 0 ? true : _a, _b = importerProps.modalIsOpen, modalIsOpen = _b === void 0 ? true : _b, _c = importerProps.modalOnCloseTriggered, modalOnCloseTriggered = _c === void 0 ? function () { return null; } : _c, modalCloseOnOutsideClick = importerProps.modalCloseOnOutsideClick, _d = importerProps.darkMode, darkMode = _d === void 0 ? false : _d, _e = importerProps.primaryColor, primaryColor = _e === void 0 ? "#2563eb" : _e, className = importerProps.className, onComplete = importerProps.onComplete, customStyles = importerProps.customStyles, showDownloadTemplateButton = importerProps.showDownloadTemplateButton, skipHeaderRowSelection = importerProps.skipHeaderRowSelection, language = importerProps.language, customTranslations = importerProps.customTranslations, importerKey = importerProps.importerKey, backendUrl = importerProps.backendUrl, user = importerProps.user, metadata = importerProps.metadata, demoData = importerProps.demoData, 
     // Any remaining props will be valid DOM props
-    domProps = __rest$1(importerProps, ["isModal", "modalIsOpen", "modalOnCloseTriggered", "modalCloseOnOutsideClick", "darkMode", "primaryColor", "className", "onComplete", "customStyles", "showDownloadTemplateButton", "skipHeaderRowSelection", "language", "customTranslations", "importerKey", "backendUrl", "user", "metadata"]);
+    domProps = __rest$1(importerProps, ["isModal", "modalIsOpen", "modalOnCloseTriggered", "modalCloseOnOutsideClick", "darkMode", "primaryColor", "className", "onComplete", "customStyles", "showDownloadTemplateButton", "skipHeaderRowSelection", "language", "customTranslations", "importerKey", "backendUrl", "user", "metadata", "demoData"]);
     var ref = forwardRef !== null && forwardRef !== void 0 ? forwardRef : useRef$1(null);
     var current = ref === null || ref === void 0 ? void 0 : ref.current;
     useEffect$2(function () {
@@ -37845,7 +37882,7 @@ var CSVImporter = forwardRef(function (importerProps, forwardRef) {
     // domProps should only contain valid DOM attributes
     var elementProps = __assign$1(__assign$1(__assign$1({ ref: ref }, (isModal ? { onClick: backdropClick } : {})), { className: domElementClass, "data-theme": darkMode ? "dark" : "light", style: { colorScheme: darkMode ? "dark" : "light" } }), domProps);
     // Create a new component that properly passes only the props that Importer needs
-    var ImporterComponent = function () { return (jsx(Providers, __assign$1({ primaryColor: primaryColor }, { children: jsx(Main, { isModal: isModal, modalIsOpen: modalIsOpen, modalOnCloseTriggered: modalOnCloseTriggered, modalCloseOnOutsideClick: modalCloseOnOutsideClick, darkMode: darkMode, primaryColor: primaryColor, className: className, onComplete: onComplete, customStyles: customStyles, showDownloadTemplateButton: showDownloadTemplateButton, skipHeaderRowSelection: skipHeaderRowSelection, language: language, customTranslations: customTranslations, importerKey: importerKey, backendUrl: backendUrl, user: user, metadata: metadata }) }))); };
+    var ImporterComponent = function () { return (jsx(Providers, __assign$1({ primaryColor: primaryColor }, { children: jsx(Main, { isModal: isModal, modalIsOpen: modalIsOpen, modalOnCloseTriggered: modalOnCloseTriggered, modalCloseOnOutsideClick: modalCloseOnOutsideClick, darkMode: darkMode, primaryColor: primaryColor, className: className, onComplete: onComplete, customStyles: customStyles, showDownloadTemplateButton: showDownloadTemplateButton, skipHeaderRowSelection: skipHeaderRowSelection, language: language, customTranslations: customTranslations, importerKey: importerKey, backendUrl: backendUrl, user: user, metadata: metadata, demoData: demoData }) }))); };
     return isModal ? (jsx("div", __assign$1({ className: "csvImporter" }, { children: jsx("dialog", __assign$1({}, elementProps, { children: jsx(ImporterComponent, {}) })) }))) : (jsx("div", __assign$1({}, elementProps, { children: jsx(ImporterComponent, {}) })));
 });