@importcsv/react 0.1.12 → 0.1.13

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/index.esm.js

@@ -32174,11 +32174,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 +32357,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 +35772,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), 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 +35808,25 @@ 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; }),
+                    });
+                },
+            });
+        }
+    }, [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 +36129,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 +37825,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 +37868,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, {}) })));
 });