@importcsv/react 0.1.0

package/build/js.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { CSVImporterProps } from "./types";
+type CreateImporterProps = CSVImporterProps & {
+    domElement?: Element;
+};
+export declare function createCSVImporter(props: CreateImporterProps): {
+    instance: (import("react").ForwardRefExoticComponent<{
+        darkMode?: boolean | undefined;
+        primaryColor?: string | undefined;
+        className?: string | undefined;
+        onComplete?: ((data: any) => void) | undefined;
+        waitOnComplete?: boolean | undefined;
+        customStyles?: string | Record<string, string> | undefined;
+        showDownloadTemplateButton?: boolean | undefined;
+        skipHeaderRowSelection?: boolean | undefined;
+        language?: string | undefined;
+        customTranslations?: import("i18next").Resource | undefined;
+        importerKey?: string | undefined;
+        backendUrl?: string | undefined;
+        user?: Record<string, any> | undefined;
+        metadata?: Record<string, any> | undefined;
+    } & {
+        isModal?: boolean | undefined;
+        modalIsOpen?: boolean | undefined;
+        modalOnCloseTriggered?: (() => void) | undefined;
+        modalCloseOnOutsideClick?: boolean | undefined;
+    } & import("react").RefAttributes<unknown>> & HTMLDialogElement) | null;
+    showModal: () => void;
+    closeModal: () => void;
+};
+export {};

package/build/services/api.d.ts

@@ -0,0 +1,18 @@
+export namespace authApi {
+    function login(email: string, password: string): Promise<Object>;
+    function getCurrentUser(token: string): Promise<Object>;
+}
+export namespace schemaApi {
+    function getSchemas(token: string): Promise<any[]>;
+    function getSchemaTemplate(token: string, schemaId: number): Promise<Object>;
+}
+export namespace importApi {
+    function processCSVData(token: string, schemaId: number, importData: Object): Promise<Object>;
+    function getImportJobStatus(token: string, jobId: number): Promise<Object>;
+}
+declare namespace _default {
+    export { authApi as auth };
+    export { schemaApi as schema };
+    export { importApi as import };
+}
+export default _default;

package/build/services/apiClient.d.ts

@@ -0,0 +1,21 @@
+export namespace authApi {
+    function login(email: string, password: string): Promise<Object>;
+    function logout(): Promise<void>;
+    function getCurrentUser(): Promise<Object>;
+}
+export namespace schemaApi {
+    function getSchemas(): Promise<any[]>;
+    function getSchemaTemplate(schemaId: number): Promise<Object>;
+}
+export namespace importApi {
+    function processCSVData(schemaId: number, importData: Object): Promise<Object>;
+    function getImportJobStatus(jobId: number): Promise<Object>;
+}
+declare namespace _default {
+    export { apiClient as client };
+    export { authApi as auth };
+    export { schemaApi as schema };
+    export { importApi as import };
+}
+export default _default;
+declare const apiClient: any;

package/build/settings/defaults.d.ts

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

package/build/types/index.d.ts

@@ -0,0 +1,24 @@
+import { Resource } from "i18next";
+type ModalParams = {
+    isModal?: boolean;
+    modalIsOpen?: boolean;
+    modalOnCloseTriggered?: () => void;
+    modalCloseOnOutsideClick?: boolean;
+};
+export type CSVImporterProps = {
+    darkMode?: boolean;
+    primaryColor?: string;
+    className?: string;
+    onComplete?: (data: any) => void;
+    waitOnComplete?: boolean;
+    customStyles?: Record<string, string> | string;
+    showDownloadTemplateButton?: boolean;
+    skipHeaderRowSelection?: boolean;
+    language?: string;
+    customTranslations?: Resource;
+    importerKey?: string;
+    backendUrl?: string;
+    user?: Record<string, any>;
+    metadata?: Record<string, any>;
+} & ModalParams;
+export {};

package/build/types.d.ts

@@ -0,0 +1,91 @@
+/**
+ * CSV Importer Types
+ */
+export interface TemplateColumn {
+    name: string;
+    key?: string;
+    required?: boolean;
+    description?: string;
+    data_type?: string;
+    suggested_mappings?: string[];
+}
+export interface Template {
+    columns: TemplateColumn[];
+}
+export interface ImporterOptions {
+    /** The importer ID to use for API calls */
+    importerId: string;
+    /** Whether to show the importer as a modal or embed it directly */
+    isModal?: boolean;
+    /** Whether the modal is open (only used when isModal is true) */
+    modalIsOpen?: boolean;
+    /** Function called when the modal close is triggered */
+    modalOnCloseTriggered?: () => void;
+    /** Whether clicking outside the modal should close it */
+    modalCloseOnOutsideClick?: boolean;
+    /** The template defining the columns to import */
+    template: Template | TemplateColumn[];
+    /** Whether to use dark mode */
+    darkMode?: boolean;
+    /** The primary color to use for the importer */
+    primaryColor?: string;
+    /** Additional CSS class names to apply */
+    className?: string;
+    /** Function called when the import is complete */
+    onComplete?: (data: any) => void;
+    /** Custom CSS styles to apply */
+    customStyles?: Record<string, any>;
+    /** Whether to show the download template button */
+    showDownloadTemplateButton?: boolean;
+    /** Whether to skip the header row selection step */
+    skipHeaderRowSelection?: boolean;
+    /** The language to use */
+    language?: string;
+    /** Custom translations to use */
+    customTranslations?: Record<string, Record<string, string>>;
+    /** Custom API URL to use (overrides global config) */
+    apiUrl?: string;
+}
+export interface CSVImporterProps {
+    /** The importer ID to use for API calls */
+    importerId?: string;
+    /** Whether to show the importer as a modal or embed it directly */
+    isModal?: boolean;
+    /** Whether the modal is open (only used when isModal is true) */
+    modalIsOpen?: boolean;
+    /** Function called when the modal close is triggered */
+    modalOnCloseTriggered?: () => void;
+    /** Whether clicking outside the modal should close it */
+    modalCloseOnOutsideClick?: boolean;
+    /** The template defining the columns to import */
+    template?: Template | TemplateColumn[];
+    /** Whether to use dark mode */
+    darkMode?: boolean;
+    /** The primary color to use for the importer */
+    primaryColor?: string;
+    /** Additional CSS class names to apply */
+    className?: string;
+    /** Function called when the import is complete */
+    onComplete?: (data: any) => void;
+    /** Custom CSS styles to apply */
+    customStyles?: Record<string, any>;
+    /** Whether to show the download template button */
+    showDownloadTemplateButton?: boolean;
+    /** Whether to skip the header row selection step */
+    skipHeaderRowSelection?: boolean;
+    /** The language to use */
+    language?: string;
+    /** Custom translations to use */
+    customTranslations?: Record<string, Record<string, string>>;
+    /** Custom API URL to use (overrides global config) */
+    apiUrl?: string;
+    /** Any additional props to pass to the component */
+    [key: string]: any;
+}
+export interface ImportResult {
+    job_id: string;
+    status: string;
+    total_rows: number;
+    valid_rows: number;
+    invalid_rows: number;
+}

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@importcsv/react",
+  "version": "0.1.0",
+  "description": "Open-source CSV and XLS/XLSX file importer for React and JavaScript",
+  "main": "build/index.js",
+  "module": "build/index.esm.js",
+  "files": [
+    "build"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abhishekray07/importcsv.git"
+  },
+  "keywords": [
+    "csv",
+    "import",
+    "excel",
+    "data",
+    "importer",
+    "react",
+    "csv-import"
+  ],
+  "author": "ImportCSV",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/abhishekray07/importcsv/issues"
+  },
+  "homepage": "https://github.com/abhishekray07/importcsv#readme",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build:js": "rollup --config rollup.config-js.js && cp package-js.json build/package.json",
+    "build:react": "rollup --config rollup.config.js",
+    "build:react:dev": "NODE_ENV=development rollup --config rollup.config.js",
+    "build:react:prod": "NODE_ENV=production rollup --config rollup.config.js",
+    "publish:local:js": "yarn build:js && cd build && yalc publish",
+    "publish:local:react": "yarn build:react:dev && yalc publish",
+    "publish:local:react:prod": "yarn build:react:prod && yalc publish",
+    "publish:js": "yarn build:js && cd build && npm publish",
+    "publish:react": "yarn build:react:prod && npm publish --access public",
+    "build:watch": "NODE_ENV=development rollup -c -w",
+    "storybook": "storybook dev -p 6006",
+    "storybook:export": "build-storybook",
+    "generate": "node ./util/create-component",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@storybook/addon-essentials": "7.0.18",
+    "@storybook/addon-interactions": "7.0.18",
+    "@storybook/addon-links": "7.0.18",
+    "@storybook/blocks": "7.0.18",
+    "@storybook/react": "7.0.18",
+    "@storybook/react-webpack5": "7.0.18",
+    "@storybook/testing-library": "0.0.14-next.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/babel__core": "^7.20.1",
+    "@types/jest": "^24.9.1",
+    "@types/papaparse": "^5.3.14",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/use-sync-external-store": "0.0.3",
+    "@types/xlsx": "^0.0.36",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "core-js": "^3.22.7",
+    "css-loader": "^6.8.1",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
+    "node-sass": "^9.0.0",
+    "prettier": "^2.8.6",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "^2.56.3",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "sass": "^1.69.7",
+    "sass-loader": "^13.3.3",
+    "storybook": "7.0.18",
+    "style-loader": "^3.3.3",
+    "ts-jest": "^26.5.6",
+    "typescript": "^4.5.5",
+    "typescript-plugin-css-modules": "^3.4.0",
+    "use-sync-external-store": "^1.2.0"
+  },
+  "dependencies": {
+    "@chakra-ui/alert": "^2.2.2",
+    "@chakra-ui/button": "^2.1.0",
+    "@chakra-ui/react": "^2.8.1",
+    "@chakra-ui/system": "^2.6.2",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@tanstack/react-table": "^8.21.3",
+    "framer-motion": "^10.17.12",
+    "i18next": "^23.10.1",
+    "papaparse": "^5.4.1",
+    "react-data-grid": "^7.0.0-beta.52",
+    "react-dropzone": "^14.2.3",
+    "react-i18next": "^14.1.0",
+    "react-icons": "^4.12.0",
+    "xlsx": "^0.18.5",
+    "zustand": "^4.4.7"
+  },
+  "type": "module"
+}