@usecsv/react 0.0.2 → 0.1.0

package/reports/coverage/sorter.js

@@ -0,0 +1,170 @@
+/* eslint-disable */
+var addSorting = (function() {
+    'use strict';
+    var cols,
+        currentSort = {
+            index: 0,
+            desc: false
+        };
+
+    // returns the summary table element
+    function getTable() {
+        return document.querySelector('.coverage-summary');
+    }
+    // returns the thead element of the summary table
+    function getTableHeader() {
+        return getTable().querySelector('thead tr');
+    }
+    // returns the tbody element of the summary table
+    function getTableBody() {
+        return getTable().querySelector('tbody');
+    }
+    // returns the th element for nth column
+    function getNthColumn(n) {
+        return getTableHeader().querySelectorAll('th')[n];
+    }
+
+    // loads all columns
+    function loadColumns() {
+        var colNodes = getTableHeader().querySelectorAll('th'),
+            colNode,
+            cols = [],
+            col,
+            i;
+
+        for (i = 0; i < colNodes.length; i += 1) {
+            colNode = colNodes[i];
+            col = {
+                key: colNode.getAttribute('data-col'),
+                sortable: !colNode.getAttribute('data-nosort'),
+                type: colNode.getAttribute('data-type') || 'string'
+            };
+            cols.push(col);
+            if (col.sortable) {
+                col.defaultDescSort = col.type === 'number';
+                colNode.innerHTML =
+                    colNode.innerHTML + '<span class="sorter"></span>';
+            }
+        }
+        return cols;
+    }
+    // attaches a data attribute to every tr element with an object
+    // of data values keyed by column name
+    function loadRowData(tableRow) {
+        var tableCols = tableRow.querySelectorAll('td'),
+            colNode,
+            col,
+            data = {},
+            i,
+            val;
+        for (i = 0; i < tableCols.length; i += 1) {
+            colNode = tableCols[i];
+            col = cols[i];
+            val = colNode.getAttribute('data-value');
+            if (col.type === 'number') {
+                val = Number(val);
+            }
+            data[col.key] = val;
+        }
+        return data;
+    }
+    // loads all row data
+    function loadData() {
+        var rows = getTableBody().querySelectorAll('tr'),
+            i;
+
+        for (i = 0; i < rows.length; i += 1) {
+            rows[i].data = loadRowData(rows[i]);
+        }
+    }
+    // sorts the table using the data for the ith column
+    function sortByIndex(index, desc) {
+        var key = cols[index].key,
+            sorter = function(a, b) {
+                a = a.data[key];
+                b = b.data[key];
+                return a < b ? -1 : a > b ? 1 : 0;
+            },
+            finalSorter = sorter,
+            tableBody = document.querySelector('.coverage-summary tbody'),
+            rowNodes = tableBody.querySelectorAll('tr'),
+            rows = [],
+            i;
+
+        if (desc) {
+            finalSorter = function(a, b) {
+                return -1 * sorter(a, b);
+            };
+        }
+
+        for (i = 0; i < rowNodes.length; i += 1) {
+            rows.push(rowNodes[i]);
+            tableBody.removeChild(rowNodes[i]);
+        }
+
+        rows.sort(finalSorter);
+
+        for (i = 0; i < rows.length; i += 1) {
+            tableBody.appendChild(rows[i]);
+        }
+    }
+    // removes sort indicators for current column being sorted
+    function removeSortIndicators() {
+        var col = getNthColumn(currentSort.index),
+            cls = col.className;
+
+        cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
+        col.className = cls;
+    }
+    // adds sort indicators for current column being sorted
+    function addSortIndicators() {
+        getNthColumn(currentSort.index).className += currentSort.desc
+            ? ' sorted-desc'
+            : ' sorted';
+    }
+    // adds event listeners for all sorter widgets
+    function enableUI() {
+        var i,
+            el,
+            ithSorter = function ithSorter(i) {
+                var col = cols[i];
+
+                return function() {
+                    var desc = col.defaultDescSort;
+
+                    if (currentSort.index === i) {
+                        desc = !currentSort.desc;
+                    }
+                    sortByIndex(i, desc);
+                    removeSortIndicators();
+                    currentSort.index = i;
+                    currentSort.desc = desc;
+                    addSortIndicators();
+                };
+            };
+        for (i = 0; i < cols.length; i += 1) {
+            if (cols[i].sortable) {
+                // add the click event handler on the th so users
+                // dont have to click on those tiny arrows
+                el = getNthColumn(i).querySelector('.sorter').parentElement;
+                if (el.addEventListener) {
+                    el.addEventListener('click', ithSorter(i));
+                } else {
+                    el.attachEvent('onclick', ithSorter(i));
+                }
+            }
+        }
+    }
+    // adds sorting functionality to the UI
+    return function() {
+        if (!getTable()) {
+            return;
+        }
+        cols = loadColumns();
+        loadData();
+        addSortIndicators();
+        enableUI();
+    };
+})();
+
+window.addEventListener('load', addSorting);

package/src/dev/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>usecsv plugin</title>
+</head>
+
+<body id="root">
+
+</body>
+
+</html>

package/src/dev/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import UseCsvButton from "../index";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <div
+      style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translateX(-50%) translateY(-50%)",
+      }}
+    >
+      <UseCsvButton importerKey="your-importer-key" user={{ userId: "12345" }} metadata={{ anotherId: "12345" }}>
+        Import Data
+      </UseCsvButton>
+    </div>
+  </React.StrictMode>,
+  document.getElementById("root"),
+);

package/src/index.tsx

@@ -0,0 +1,3 @@
+import UseCsvButton from "./lib/useCsvReactPlugin";
+
+export default UseCsvButton;

package/src/lib/useCsvReactPlugin.tsx

@@ -0,0 +1,42 @@
+import useCsvPlugin from "@usecsv/js";
+import React, { FC, ReactNode } from "react";
+
+type UserObject = {
+  readonly userId: string;
+};
+type UseCsvButtonTypes = {
+  readonly importerKey: string;
+  readonly user?: UserObject;
+  readonly metadata: Record<string, string | number> | undefined;
+  readonly render?: ((onClick: () => Promise<any>) => ReactNode) | undefined | null;
+};
+
+const UseCsvButton: FC<UseCsvButtonTypes> = ({ children, importerKey, user, metadata, render }) => {
+  return (
+    <>
+      {render ? (
+        <>{render(() => useCsvPlugin({ importerKey, user, metadata }))}</>
+      ) : (
+        <button
+          type="button"
+          id="usecsv-button"
+          style={{
+            backgroundColor: "#FFF",
+            color: "#000",
+            border: "2px solid #000",
+            borderRadius: "6px",
+            padding: "10px 15px",
+            textAlign: "center",
+            fontSize: "16px",
+            cursor: "pointer",
+          }}
+          onClick={() => useCsvPlugin({ importerKey, user, metadata })}
+        >
+          {children}
+        </button>
+      )}
+    </>
+  );
+};
+
+export default UseCsvButton;

package/src/test/jest-setup.ts

@@ -0,0 +1,7 @@
+// Global setup for Jest, will run once per test file
+// TODO: add spec files
+afterAll(() => {
+  console.log("done");
+});
+
+export default {};

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    // Module settings.
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    // Strictness and quality settings.
+    "alwaysStrict": true,
+    "forceConsistentCasingInFileNames": true,
+    "importsNotUsedAsValues": "error",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true,
+    "pretty": true /* Stylize errors and messages using color and context. */,
+    // Type-checking settings.
+    "lib": [
+      "ES2020",
+      "DOM"
+    ],
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "jsx": "react"
+  },
+  "include": [
+    "./src/**/*.ts",
+    "src/index.tsx", "./src/**/*.tsx",
+  ],
+}

package/tsconfig.module.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    // Transpilation settings.
+    "module": "ES2020",
+    "target": "ES5",
+    // Output settings.
+    "charset": "utf-8",
+    "newLine": "LF",
+    "sourceMap": true,
+    // Type declaration settings.
+    "declaration": true,
+    "declarationDir": "build/types/",
+    // "emitDeclarationOnly": true,
+    "declarationMap": true,
+    "jsx": "react"
+  },
+  "exclude": [
+    "src/lib/**/*.spec.ts",
+    "src/**/dev",
+    "./**/test"
+  ]
+}