react-csv-importer - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/index.d.ts

@@ -54,2 +54,6 @@ // Generated by dts-bundle-generator v6.4.0
 export declare const deDE: ImporterLocale;
+export declare const itIT: ImporterLocale;
+export declare const ptBR: ImporterLocale;
+export declare const daDK: ImporterLocale;
+export declare const trTR: ImporterLocale;
 export interface CustomizablePapaParseConfig {
@@ -98,6 +102,21 @@ delimiter?: Papa.ParseConfig["delimiter"];
 }
-export interface ImporterProps<Row extends BaseRow> extends CustomizablePapaParseConfig {
+export declare type ImporterDataHandlerProps<Row extends BaseRow> = {
+	dataHandler: ParseCallback<Row>;
+	processChunk?: undefined;
+} | {
+	/**
+	 * @deprecated renamed to `dataHandler`
+	 */
+	processChunk: ParseCallback<Row>;
+	dataHandler?: undefined;
+};
+export declare type ImporterProps<Row extends BaseRow> = ImporterDataHandlerProps<Row> & {
+	defaultNoHeader?: boolean;
+	/**
+	 * @deprecated renamed to `defaultNoHeader`
+	 */
 	assumeNoHeaders?: boolean;
+	displayColumnPageSize?: number;
+	displayFieldRowSize?: number;
 	restartable?: boolean;
-	processChunk: ParseCallback<Row>;
 	onStart?: (info: ImportInfo) => void;
@@ -108,6 +127,6 @@ onComplete?: (info: ImportInfo) => void;
 	locale?: ImporterLocale;
-}
+} & CustomizablePapaParseConfig;
 export declare const ImporterField: React.FC<ImporterFieldProps>;
-export declare function Importer<Row extends BaseRow>({ assumeNoHeaders, restartable, processChunk, onStart, onComplete, onClose, children: content, locale, ...customPapaParseConfig }: ImporterProps<Row>): React.ReactElement;
+export declare function Importer<Row extends BaseRow>(props: ImporterProps<Row>): React.ReactElement;
 
 export {};

package.json

 {
   "name": "react-csv-importer",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "React CSV import widget with user-customizable mapping",
@@ -32,3 +32,4 @@ "keywords": [
     "stylelint-fix": "stylelint \"src/**/*.scss\" --fix",
-    "test": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} mocha --require ts-node/register --timeout 10000 test/**/*.test.ts",
+    "test-prep": "yarn global add chromedriver@latest",
+    "test": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} mocha --require ts-node/register --timeout 30000 test/**/*.test.ts",
     "storybook": "start-storybook -p 6006",
@@ -68,3 +69,2 @@ "build-storybook": "build-storybook",
     "chai": "^4.2.0",
-    "chromedriver": "^100.0.0",
     "clean-webpack-plugin": "^3.0.0",
@@ -111,6 +111,6 @@ "cross-env": "^7.0.3",
   "dependencies": {
+    "@use-gesture/react": "^10.2.11",
     "papaparse": "^5.3.0",
-    "react-dropzone": "^11.0.3",
-    "react-use-gesture": "^7.0.16"
+    "react-dropzone": "^12.1.0"
   }
 }

README.md

@@ -6,26 +6,25 @@ # React CSV Importer
 This library combines an uploader + CSV parser + raw file preview + UI for custom user column
-mapping, all in one. It wraps the popular PapaParse CSV library to preview and process file contents directly in-browser.
+mapping, all in one.
 
-Use this to implement the following bulk data import story in your app:
+Use this to provide a typical bulk data import experience:
 
-- 📤 user drag-drops (or selects) a file for upload
-- 👓 previews the raw uploaded data before parsing
-- ✏ picks which columns to import
+- 📤 drag-drop or select a file for upload
+- 👓 preview the raw uploaded data
+- ✏ pick which columns to import
+- ⏳ wait for backend logic to finish processing data
 
-Your front-end code will receive parsed CSV data as a series of JSON objects. You can then validate and send the data to the backend in any final format it may require instead of raw CSV. Parsing is async-enabled, so your logic can take its time: meanwhile, the user will see an animated progress bar.
-
 ![React CSV Importer usage demo](https://github.com/beamworks/react-csv-importer/raw/59f967c13bbbd20eb2a663538797dd718f9bc57e/package-core/react-csv-importer-demo-20200915.gif)
 
-[Try the live editable code sandbox](https://codesandbox.io/s/github/beamworks/react-csv-importer/tree/master/demo-sandbox) or see the [themed demo app](https://react-csv-importer.vercel.app/).
+[Try it in the live code sandbox](https://codesandbox.io/s/github/beamworks/react-csv-importer/tree/master/demo-sandbox)
 
 ### Feature summary:
 
-- wraps the well-known Papa Parse CSV library
 - raw file preview
-- user-selectable column mapping (drag-drop UI)
-- auto-map fields to matching column names
+- drag-drop UI to remap input columns as needed
+- i18n (EN, DA, DE, IT, PT, TR or custom)
+- screen reader accessibility (yes, really!)
+- keyboard a11y
+- standalone CSS stylesheet (no frameworks required)
+- existing parser implementation: Papa Parse CSV
 - TypeScript support
-- screen reader a11y
-- keyboard a11y
-- i18n
 
@@ -36,10 +35,5 @@ ### Enterprise-level data file handling:
 - automatically strip leading BOM character in data
+- async parsing logic (pause file read while your app makes backend updates)
 - fixes a [multibyte streaming issue in PapaParse](https://github.com/mholt/PapaParse/issues/908)
-- runs entirely in-browser
-- async parsing logic (pauses while your app makes backend updates)
 
-The UI theme CSS is standalone (no external dependencies such as Material UI) and tailored to
-universally fit within most application design frameworks. Interface elements are tested for screen
-reader accessibility and keyboard-only usage (yes, actually!).
-
 ## Install
@@ -55,4 +49,14 @@
 
-This package is easy to fork with your own customizations, and you can use your fork directly as a [Git dependency](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#git-urls-as-dependencies) in any of your projects, see below.
+Make sure that the bundled CSS stylesheet (`/dist/index.css`) is present in your app's page or bundle.
 
+This package is easy to fork with your own customizations, and you can use your fork directly as a [Git dependency](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#git-urls-as-dependencies) in any of your projects, see below. For simple CSS customization you can also just override the built-in styling with your own style rules.
+
+## How It Works
+
+Render the React CSV Importer UI component where you need it in your app. This will present the upload widget to the user. After a file is selected and reviewed by the user, CSV file data is parsed in-browser and passed to your front-end code as a list of JSON objects. Each object will have fields corresponding to the columns that the user selected.
+
+Large files (can be up to 1GB and more!) are parsed in chunks: return a promise from your data handler and the file reader will pause until you are ready for more data.
+
+Instead of a custom CSV parser this library uses the popular Papa Parse CSV reader. Because the file reader runs in-browser, your backend (if you have one) never has to deal with raw CSV data.
+
 ## Example Usage
@@ -68,9 +72,3 @@
 <Importer
-  assumeNoHeaders={false} // optional, keeps "data has headers" checkbox off by default
-  restartable={false} // optional, lets user choose to upload another file when import is complete
-  onStart={({ file, preview, fields, columnFields }) => {
-    // optional, invoked when user has mapped columns and started import
-    prepMyAppForIncomingData();
-  }}
-  processChunk={async (rows, { startIndex }) => {
+  dataHandler={async (rows, { startIndex }) => {
     // required, may be called several times
@@ -83,2 +81,8 @@ // receives a list of parsed objects based on defined fields and user column mapping;
   }}
+  defaultNoHeader={false} // optional, keeps "data has headers" checkbox off by default
+  restartable={false} // optional, lets user choose to upload another file when import is complete
+  onStart={({ file, preview, fields, columnFields }) => {
+    // optional, invoked when user has mapped columns and started import
+    prepMyAppForIncomingData();
+  }}
   onComplete={({ file, preview, fields, columnFields }) => {
@@ -130,8 +134,4 @@ // optional, invoked right after import is done (but user did not dismiss/reset the widget yet)
 
-## Dependencies
+For more, please see [storybook examples](src/components/Importer.stories.tsx).
 
-- [Papa Parse](https://www.papaparse.com/) for CSV parsing
-- [react-dropzone](https://react-dropzone.js.org/) for file upload
-- [react-use-gesture](https://github.com/react-spring/react-use-gesture) for drag-and-drop
-
 ## Internationalization (i18n) and Localization (l10n)
@@ -151,4 +151,19 @@
 
-You can also pass your own fully custom locale definition as the locale value. See `ImporterLocale` interface in `src/locale` for the full definition, and use an existing locale like `enUS` as basis. For better performance, please ensure that the value is stable (i.e. does not change on every render).
+These locales are provided as part of the NPM module:
 
+- `en-US`
+- `de-DE`
+- `it-IT`
+- `pt-BR`
+- `da-DK`
+- `tr-TR`
+
+You can also pass your own fully custom locale definition as the locale value. See `ImporterLocale` interface in `src/locale` for the full definition, and use an existing locale like `en-US` as basis. For better performance, please ensure that the customized locale value does not change on every render.
+
+## Dependencies
+
+- [Papa Parse](https://www.papaparse.com/) for CSV parsing
+- [react-dropzone](https://react-dropzone.js.org/) for file upload
+- [@use-gesture/react](https://github.com/pmndrs/use-gesture) for drag-and-drop
+
 ## Local Development
@@ -178,8 +193,16 @@
 
+- 0.8.0
+  - more translations (thanks [**@p-multani-0**](https://github.com/p-multani-0), [**@GuilhermeMelati**](https://github.com/GuilhermeMelati), [**@tobiaskkd**](https://github.com/tobiaskkd) and [**@memoricab**](https://github.com/memoricab))
+  - refactor to work with later versions of @use-gesture/react (thanks [**@dbismut**](https://github.com/dbismut))
+  - upgrade to newer version of react-dropzone
+  - rename assumeNoHeaders to defaultNoHeader (with deprecation warning)
+  - rename processChunk to dataHandler (with deprecation warning)
+  - expose display width customization (`displayColumnPageSize`, `displayFieldRowSize`)
+  - bug fixes for button type and labels
 - 0.7.1
-  - fix peerDependencies for React 18+
+  - fix peerDependencies for React 18+ (thanks [**@timarney**](https://github.com/timarney))
   - hide Finish button by default
   - button label tweaks
 - 0.7.0
-  - add i18n
+  - add i18n (thanks [**@tstehr**](https://github.com/tstehr) and [**@Valodim**](https://github.com/Valodim))
 - 0.6.0
@@ -223,5 +246,1 @@ - improve multibyte stream parsing safety
   - lifecycle hooks receive info about the import
-
-## Credits
-
-Translations contributed by: [**@tstehr**](https://github.com/tstehr) and [**@Valodim**](https://github.com/Valodim).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

374588

increased by81.66%

Dev dependency count

52

decreased by-1.89%

Lines of code

3698

increased by123.99%

Number of lines in readme file

238

increased by8.68%

Dependency changes

• + Added@use-gesture/react@^10.2.11

• + Added@use-gesture/core@10.3.1(transitive)

• + Added@use-gesture/react@10.3.1(transitive)

• + Addedfile-selector@0.5.0(transitive)

• + Addedreact-dropzone@12.1.0(transitive)

• - Removedreact-use-gesture@^7.0.16

• - Removedfile-selector@0.4.0(transitive)

• - Removedreact-dropzone@11.7.1(transitive)

• - Removedreact-use-gesture@7.0.16(transitive)

• Updatedreact-dropzone@^12.1.0