feat: ✨ V1 of the component

Author: hibou24

.gitignore

@@ -0,0 +1 @@
+node_modules

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

dist/index.es.js

@@ -0,0 +1,39 @@
+{
+  "name": "react-multy-csv-viewer",
+  "version": "1.0.0",
+  "description": "'component to visualize a csv file for react app'",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-lib": "rollup -c"
+  },
+  "author": "Ibrahima Diama ka",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/preset-react": "^7.14.5",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@storybook/addon-actions": "^6.3.2",
+    "@storybook/addon-essentials": "^6.3.2",
+    "@storybook/addon-links": "^6.3.2",
+    "@storybook/react": "^6.3.2",
+    "antd": "^4.16.6",
+    "babel-loader": "^8.2.2",
+    "papaparse": "^5.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.52.7",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "peerDependencies": {
+    "antd": "^4.16.6",
+    "papaparse": "^5.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "dependencies": {}
+}

dist/index.js

@@ -0,0 +1,35 @@
+import babel from "rollup-plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import external from "rollup-plugin-peer-deps-external";
+import { terser } from "rollup-plugin-terser";
+// import postcss from 'rollup-plugin-postcss';
+
+export default [
+  {
+    input: "./src/index.js",
+    output: [
+      {
+        file: "dist/index.js",
+        format: "cjs",
+      },
+      {
+        file: "dist/index.es.js",
+        format: "es",
+        exports: "named",
+      },
+    ],
+    plugins: [
+      //   postcss({
+      //     plugins: [],
+      //     minimize: true,
+      //   }),
+      babel({
+        exclude: "node_modules/**",
+        presets: ["@babel/preset-react"],
+      }),
+      external(),
+      resolve(),
+      terser(),
+    ],
+  },
+];

package-lock.json

@@ -0,0 +1,10 @@
+import React from "react";
+import { UploadFile } from "../upload";
+
+export const MultipleCsvViewer = () => {
+  return (
+    <div>
+      <UploadFile />
+    </div>
+  );
+};

package.json

@@ -0,0 +1 @@
+export * from "./MultipleCsvViewer";

rollup.config.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Row, Col, Table, Tabs } from "antd";
+import "antd/dist/antd.css";
+
+const { TabPane } = Tabs;
+
+export const DisplayData = ({ dataTransformed }) => {
+  return (
+    <Row>
+      <Col span={24}>
+        <Tabs defaultActiveKey="1" centered>
+          {dataTransformed.map(({ name, data, colomns }, index) => {
+            return (
+              <TabPane key={index + 1} tab={name}>
+                <Table dataSource={data} columns={colomns} />
+              </TabPane>
+            );
+          })}
+        </Tabs>
+      </Col>
+    </Row>
+  );
+};

src/components/Main/MultipleCsvViewer.js

@@ -0,0 +1 @@
+export * from "./DisplayData";

src/components/Main/index.js

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { Row, Col, Upload, Button } from "antd";
+import * as Papa from "papaparse";
+import "antd/dist/antd.css";
+
+import { DisplayData } from "../tabs";
+
+export const UploadFile = () => {
+  const [fileTransformed, setFileTransformed] = useState([]);
+  const handleUploadFile = async (file) => {
+    let fileTransformed = [];
+    const { fileList } = file;
+    for (let file of fileList) {
+      const { originFileObj, name } = file;
+      const csvString = await readUploadedFileAsText(originFileObj);
+      const [data, colomns] = transformCsvToArray(csvString);
+
+      fileTransformed.push({ name, data, colomns });
+    }
+    //console.log(fileTransformed);
+    setFileTransformed(fileTransformed);
+  };
+
+  const transformCsvToArray = (csvString) => {
+    const { data } = Papa.parse(csvString, {
+      header: true,
+    });
+    const colomns = makeColomn(data[0]);
+    return [data, colomns];
+  };
+
+  const makeColomn = (object) => {
+    let colonmsField = [];
+    for (const [key] of Object.entries(object)) {
+      colonmsField.push(key);
+    }
+
+    const colomns = colonmsField.map((colomn) => {
+      return {
+        title: colomn.toUpperCase(),
+        dataIndex: colomn,
+        key: colomn,
+      };
+    });
+
+    return colomns;
+  };
+
+  const readUploadedFileAsText = (inputFile) => {
+    const temporaryFileReader = new FileReader();
+
+    return new Promise((resolve, reject) => {
+      temporaryFileReader.onerror = () => {
+        temporaryFileReader.abort();
+        reject(new DOMException("Problem parsing input file."));
+      };
+
+      temporaryFileReader.onload = () => {
+        resolve(temporaryFileReader.result);
+      };
+      temporaryFileReader.readAsText(inputFile);
+    });
+  };
+
+  return (
+    <Row gutter={[48, 0]}>
+      <Col span={24}>
+        <Upload
+          accept=".txt, .csv"
+          onChange={handleUploadFile}
+          multiple={true}
+          action={false}
+          //showUploadList={{ showRemoveIcon: false }}
+          showUploadList={false}
+        >
+          <Button>Choose File</Button>
+        </Upload>
+      </Col>
+      {fileTransformed.length && (
+        <Col span={24}>
+          <DisplayData dataTransformed={fileTransformed} />
+        </Col>
+      )}
+    </Row>
+  );
+};
+
+//export default UploadFile;

src/components/tabs/DisplayData.js

@@ -0,0 +1 @@
+export * from "./UploadFile";

src/components/tabs/index.js

@@ -0,0 +1 @@
+export * from "./components/Main";

src/components/upload/UploadFile.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+
+import { MultipleCsvViewer } from "../src/components/Main";
+
+const stories = storiesOf("App test", module);
+
+stories.add("App", () => {
+  return <MultipleCsvViewer />;
+});