npm - fuse-importer - Versions diffs - 0.0.1-staging - Mend

fuse-importer 0.0.1-staging

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (304) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,270 @@
+<div>
+<center>
+<a href="https://fuse.flatirons.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+logo&utm_campaign=NPM">
+<img alt="Flatirons Fuse" src="https://wp.flatirons.com/wp-content/uploads/2022/07/fuse-logo.png">
+</a>
+</center>
+<br>
+<br>
+<p>
+Flatirons Fuse is a customizable and powerful CSV Importer that works with all front-end languages.
+</p>
+</div>
+## Table of Contents
+- [Installation](#installation)
+- [Introduction](#introduction)
+- [Registration](#registration)
+- [Create Your First Importer](#create-your-first-template)
+- [Getting started](#getting-started)
+- [More Examples](#more-examples)
+- [Usage](#usage)
+  - [FuseImporter Hooks](#fuseimporter-hooks)
+    - [`show`](#show)
+    - [`close`](#close)
+    - [`onClose`](#onclose)
+    - [`onValidateRecord`](#onvalidaterecord)
+    - [`formatRecord`](#formatrecord)
+    - [`onSubmit`](#onsubmit)
+## Installation
+You can use Yarn, NPM, or a CDN to install the importer.
+Install with npm:
+```bash
+npm install fuse-importer --save
+```
+Install with yarn:
+```bash
+yarn add fuse-importer
+```
+Install with CDN:
+```html
+<script
+  type="text/javascript"
+  src="https://unpkg.com/fuse-importer@latest.js"
+></script>
+```
+## Introduction
+Flatirons Fuse is our solution to the inevitable difficulties of getting customer data into your solution. We provide a white-labeled, customizable CSV and Spreadsheet import experience that is above all effective and flexible. Not only do we save you the time and effort of developing your own import solution, but we also ensure that setup and integration with your systems are a breeze.
+To get started with our solution, you're going to need a free account and to create a template on our platform: [Flatirons Fuse](https://fuse.flatirons.com/users/sign-up?utm_source=npmjs&utm_medium=Flatirons+Fuse+Get+Started&utm_campaign=NPM)
+To use the importer you will need two keys:
+- Your **Organization's API key**: You can find this at the top of the [Importers page](#create-your-first-template).
+- Your **Importer's ID**: You can find this in the table on the [Importers page](#create-your-first-template).
+For more information see our [full documentation.](https://fuse-docs.flatirons.com?utm_source=npmjs&utm_medium=Fuse+importer+Full+Documentation&utm_campaign=NPM)
+Check it out in action:
+<div>
+<center>
+<img alt="Check it out in action" src="https://wp.flatirons.com/wp-content/uploads/2022/07/ezgif-1-242e10926e.gif">
+</center>
+</div>
+## Registration
+If you don't have an account yet, you can go over the [Registration](https://fuse-docs.flatirons.com/getting-started/registration?utm_source=npmjs&utm_medium=Registration&utm_campaign=NPM).
+## Create Your First Importer
+If you don’t have an Importer yet, you can go over [Create Your First Importer](https://fuse-docs.flatirons.com/getting-started/create-your-first-template?utm_source=npmjs&utm_medium=Create+Your+First+Template&utm_campaign=NPM). Importer represents the fields and validations that your own system accepts, also known as your data schema.
+## Getting started
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/fuse-importer@latest"
+    ></script>
+    <script type="text/javascript">
+      const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
+      const importerId = "YOUR IMPORTER ID";
+      const importer = new FuseImporter(organizationApiKey, importerId);
+      importer.onValidateRecord = async (record) => {
+        // return no frontend validation errors or warnings
+        return { errors: {}, warnings: {} };
+      };
+      importer.onSubmit = async (records) => {
+        // an empty hash will tell us the import was successful!
+        return {
+          message: "Your data was imported successfully",
+          errors: {},
+        };
+      };
+      window.showFuseImporter = () => {
+        if (
+          organizationApiKey.indexOf("YOUR") !== -1 ||
+          importerId.indexOf("YOUR") !== -1
+        ) {
+          window.confirm(
+            "You need to configure your organization api key and Importer id."
+          );
+          return;
+        }
+        importer.show();
+      };
+    </script>
+  </head>
+  <body>
+    <button onclick="javascript:showFuseImporter()">Show Importer</button>
+  </body>
+</html>
+```
+## More Examples
+- [Quickstart Examples](https://fuse-docs.flatirons.com/installation/quickstart-examples?utm_source=npmjs&utm_medium=More+Examples+Quickstart+Examples&utm_campaign=NPM)
+- [React.js](https://fuse-docs.flatirons.com/use-cases/react.js-csv-importer?utm_source=npmjs&utm_medium=More+Examples+React&utm_campaign=NPM)
+- [Angular](https://fuse-docs.flatirons.com/use-cases/angular-csv-importer?utm_source=npmjs&utm_medium=More+Examples+Angular&utm_campaign=NPM)
+- [Vue.js](https://fuse-docs.flatirons.com/use-cases/vue.js-csv-importer?utm_source=npmjs&utm_medium=More+Examples+Vue&utm_campaign=NPM)
+## Usage
+```typescript
+import FuseImporter from "fuse-importer";
+const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
+const importerId = "YOUR IMPORTER ID";
+const importer = new FuseImporter(organizationApiKey, importerId);
+```
+### FuseImporter Hooks
+Hooks allow you to show the importer, run validations, and submit records to your backend.
+#### `show`
+The show function does exactly what it sounds like; it launches the importer. Ensure you have initialized the importer properly beforehand. Use this function like so:
+```typescript
+importer.show();
+```
+#### `close`
+The close function allows you to remove the importer from the view.
+```typescript
+importer.close();
+```
+#### `onClose`
+The onClose function allows you to be notified when the importer is removed from the view.
+```typescript
+importer.onClose = () => {
+  console.log("The importer was closed!");
+};
+```
+#### `onValidateRecord`
+The `onValidationRecord` hook is called for each row (record) that a customer uploads. It allows you to specify custom frontend validations and display error messages in the importer for the user to fix. When you create an importer, each column contains an `internal key`. These internal keys represent the
+Return values:
+- If the record has no errors, we expect you to return an empty object: `return { errors : {}, warnings: {} }`.
+- If the record has validation errors/warnings, you can specify them like below.
+```typescript
+importer.onValidateRecord = async (record) => {
+  const errors = {};
+  const warnings = {};
+  // force emails to include gmail
+  if (!record.email?.includes("gmail")) {
+    errors["email"] = "Email must be from Gmail";
+  }
+  // email should be from the domain.
+  if (!record.email?.includes("@example.com")) {
+    warnings["email"] = "Email is outside the domain";
+  }
+  return { errors: errors, warnings: warnings };
+};
+```
+The differences between errors and warnings are:
+- `warnings` will still allow you to submit the spreadsheet, unlike `errors`.
+- `errors` have a higher priority than warnings, which means if a record has both, you will not be able to see warnings until you fix errors first.
+- Any `errors` must be fixed before the user submits an importer. The user will not be able to submit without fixing all errors.
+#### `formatRecord`
+The `formatRecord` hook can be used to format data automatically on behalf of a user. For example, if you have a field called `first_name` and you know that your system always requires `first_name` to be capitalized, you can use this callback to uppercase all `first_name` records like so:
+```typescript
+importer.formatRecord = (record) => {
+  const newRecord = { ...record };
+  // capitalize first letter in first_name
+  if (typeof newRecord.first_name === "string") {
+    newRecord.first_name =
+      newRecord.first_name.charAt(0).toUpperCase() +
+      newRecord.first_name.slice(1);
+  }
+  return newRecord;
+};
+```
+#### `onSubmit`
+`onSubmit` will pass all records to you after the user has made any necessary corrections to frontend validations. This callback expects you to submit the records to your backend in whatever way you typically would, we do not submit the records for you.
+This callback also allows you to pass back any backend errors for specific rows. Each record passed to this callback will have a unique identifier under the key `record._meta.id`. In this case of a backend validation or error occurring, you can tell the importer to show a specific error to the user for a row. Note that after submission, only records with errors will remain visible to the user.
+Return values:
+- If there were no backend errors, pass back an empty errors object and a message to show to the user like so:
+```typescript
+importer.onSubmit = async (records) => {
+  // submit to backend here
+  let message = "Data imported successfully";
+  return {
+    message,
+    errors: {},
+  };
+};
+```
+- If you find an error with a record in your backend, you can tell the importer to show the error to the user like so:
+```typescript
+importer.onSubmit = async (records) => {
+  // submit to your backend here
+  return {
+    errors: {
+      [records[0]._meta.id]: {
+        email: "Email is already taken. Emails must be unique.",
+        first_name: "First Name must be capitalized.",
+      },
+    },
+  };
+};
+```

package/lib/esm/Importer/ImporterWithContext.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+type LayoutProps = {
+    zIndex: number;
+};
+export declare const Layout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled").CSSProps & LayoutProps, never>;
+export declare const ImporterWithContext: () => JSX.Element;
+export {};

package/lib/esm/Importer/ImporterWithContext.js ADDED Viewed

@@ -0,0 +1,62 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import styled, { ThemeProvider, css } from "styled-components";
+import { Toast } from "../common";
+import { Div } from "../styled";
+import Matcher from "./Matcher";
+import { PreviewFirstTime } from "./PreviewFirstTime";
+import { PreviewModeBanner } from "./PreviewModeBanner";
+import Review from "./Review";
+import { ReviewContextProvider } from "./Review/ReviewContextProvider";
+import { Stepper } from "./Stepper/index";
+import { TrialModeBanner } from "./TrialModeBanner";
+import Uploader from "./Uploader";
+import { AppLoading } from "./common/AppLoading";
+import { Footer } from "./common/Footer";
+import { GlobalStyle } from "./common/GlobalStyle";
+import { ImporterFonts } from "./common/ImporterFonts";
+import { useImporterContext } from "./contexts/ImporterContextProvider";
+export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.backgroundInterface;
+}, function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; });
+var Content = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var colors = _a.theme.colors, inTrialMode = _a.inTrialMode;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    flex: ", ";\n  "], ["\n    background-color: ", ";\n    flex: ", ";\n  "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
+});
+export var ImporterWithContext = function () {
+    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
+    var layoutRef = useRef(null);
+    var t = useTranslation().t;
+    useEffect(function () {
+        var _a;
+        (_a = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+    }, [currentStepIndex, matcherSubstep, layoutRef.current]);
+    var stepLabels = [
+        t("general:steps.upload"),
+        t("general:steps.match"),
+        t("general:steps.review"),
+    ];
+    function renderContent() {
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: stepLabels, logoURL: logoURL })] }), _jsxs(Content, { children: [currentStepIndex === 0 && _jsx(Uploader, {}), currentStepIndex === 1 && _jsx(Matcher, {}), currentStepIndex === 2 && templateHeaders && _jsx(Review, {})] }), inTrialMode && (_jsx(Content, __assign({ inTrialMode: inTrialMode }, { children: _jsx(Footer, {}) })))] }));
+    }
+    var shouldShowPreviewFirstTime = previewFirstTime && previewMode;
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) })) }))) : (_jsx(AppLoading, {}))] })));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const EnumFieldMatcher: ({ templateHeaderLabel }: {
+    templateHeaderLabel: any;
+}) => JSX.Element;

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/index.js ADDED Viewed

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { TableView } from "../../../../common/Table/TableView";
+import { colors } from "../../../../styled/theme/colorPalette";
+import { Div } from "../../../../styled/utils";
+import { defaultTableHeaderHeightPx } from "../../../../common/Table/TableView/common";
+import { getTableHeight } from "../../../common";
+import { useImporterContext } from "../../../contexts/ImporterContextProvider";
+import { MAX_VISIBLE_ROWS } from "../../common";
+import { MatcherStatus } from "../../common/types";
+import { EnumFieldMatcherContextProvider } from "../EnumFieldMatcherContext";
+import { tableColumns } from "./tableColumns";
+import { useTranslation } from "react-i18next";
+export var EnumFieldMatcher = function (_a) {
+    var _b;
+    var templateHeaderLabel = _a.templateHeaderLabel;
+    var t = useTranslation("match").t;
+    var _c = useImporterContext(), enumFieldValueMatchings = _c.enumFieldValueMatchings, templateHeaders = _c.templateHeaders;
+    var isRequired = (_b = templateHeaders.find(function (th) { return th.label === templateHeaderLabel; })) === null || _b === void 0 ? void 0 : _b.required;
+    var enumFieldValueMatching = enumFieldValueMatchings[templateHeaderLabel];
+    var uploadedDataValues = Object.keys(enumFieldValueMatching);
+    var data = uploadedDataValues.map(function (uploadedDataValue) { return ({
+        uploadedDataValue: uploadedDataValue,
+        uploadedDataValueMatching: enumFieldValueMatching[uploadedDataValue],
+        status: enumFieldValueMatching[uploadedDataValue]
+            ? MatcherStatus.matched
+            : MatcherStatus.unmatched,
+    }); });
+    var dataSortingOrderRef = useRef(uploadedDataValues
+        .map(function (uploadedDataValue, index) { return ({
+        index: index,
+        isMatched: !!enumFieldValueMatching[uploadedDataValue],
+    }); })
+        .sort(function (a, b) {
+        if (a.isMatched === b.isMatched) {
+            return a.index - b.index;
+        }
+        else if (a.isMatched) {
+            return -1;
+        }
+        else {
+            return 1;
+        }
+    }));
+    //sort data based on automatched items
+    var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
+    var tableRowHeight = 100;
+    var tableHeight = getTableHeight({
+        headerHeight: defaultTableHeaderHeightPx,
+        rowHeight: tableRowHeight,
+        dataCount: data.length,
+        maxVisibleRows: MAX_VISIBLE_ROWS,
+    });
+    return (_jsxs(Div, { children: [_jsx(Div, __assign({ h5: true, mb: 16 }, { children: t("columns.values_for_the_column", {
+                    column: "".concat(templateHeaderLabel).concat(isRequired ? "*" : ""),
+                }) })), _jsx(Div, __assign({ mb: 40 }, { children: _jsx(EnumFieldMatcherContextProvider, __assign({ templateHeaderLabel: templateHeaderLabel }, { children: _jsx(TableView, { h: tableHeight, rowHeight: tableRowHeight, data: sortedData, columns: tableColumns, bg: colors.white }) })) }))] }));
+};

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/tableColumns.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export declare const tableColumns: ({
+    header: string;
+    width: number;
+    Content: ({ uploadedDataValue }: {
+        uploadedDataValue: any;
+    }) => JSX.Element;
+} | {
+    header: string;
+    width: number;
+    Content: ({ status }: {
+        status: any;
+    }) => JSX.Element;
+})[];

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/tableColumns.js ADDED Viewed

@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Autocomplete } from "../../../../common/inputs/Autocomplete";
+import { Div } from "../../../../styled/utils";
+import { useImporterContext } from "../../../contexts/ImporterContextProvider";
+import { MatchedIndicatorUI, UnmatchedIndicatorUI } from "../../common";
+import { MatcherStatus } from "../../common/types";
+import { useEnumFieldMatcherContext } from "../EnumFieldMatcherContext";
+import { useTranslation } from "react-i18next";
+export var tableColumns = [
+    {
+        header: "match:columns.your_columns",
+        width: 1,
+        Content: function (_a) {
+            var uploadedDataValue = _a.uploadedDataValue;
+            return _jsxs(Div, __assign({ body1: true }, { children: [" ", uploadedDataValue, " "] }));
+        },
+    },
+    {
+        header: "match:columns.our_columns",
+        width: 1,
+        Content: function (_a) {
+            var _b;
+            var uploadedDataValue = _a.uploadedDataValue, uploadedDataValueMatching = _a.uploadedDataValueMatching;
+            var t = useTranslation("match").t;
+            var _c = useImporterContext(), templateHeaders = _c.templateHeaders, enumFieldValueMatchings = _c.enumFieldValueMatchings, setEnumFieldValueMatchings = _c.setEnumFieldValueMatchings;
+            var templateHeaderLabel = useEnumFieldMatcherContext().templateHeaderLabel;
+            var valueOptions = (_b = templateHeaders.find(function (th) { return th.label === templateHeaderLabel; })) === null || _b === void 0 ? void 0 : _b.values;
+            var onChange = function (selected) {
+                var newEnumFieldValueMatchings = __assign({}, enumFieldValueMatchings);
+                newEnumFieldValueMatchings[templateHeaderLabel][uploadedDataValue] = selected;
+                setEnumFieldValueMatchings(newEnumFieldValueMatchings);
+            };
+            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { w: "90%", placeholder: t("columns.placeholder"), onChange: onChange, placement: "bottom", value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
+                        value: vo,
+                        label: vo,
+                    }); }) }) })));
+        },
+    },
+    {
+        header: "match:columns.status",
+        width: 1,
+        Content: function (_a) {
+            var status = _a.status;
+            return (_jsx(_Fragment, { children: status === MatcherStatus.matched ? (_jsx(MatchedIndicatorUI, {})) : (_jsx(UnmatchedIndicatorUI, {})) }));
+        },
+    },
+];

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcherContext.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+type State = {
+    templateHeaderLabel: string;
+};
+type Props = {
+    templateHeaderLabel: string;
+    children: JSX.Element;
+};
+export declare const EnumFieldMatcherContextProvider: ({ templateHeaderLabel, children, }: Props) => JSX.Element;
+export declare const useEnumFieldMatcherContext: () => State;
+export {};

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcherContext.js ADDED Viewed

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+var EnumFieldMatcherContext = createContext({});
+export var EnumFieldMatcherContextProvider = function (_a) {
+    var templateHeaderLabel = _a.templateHeaderLabel, children = _a.children;
+    return (_jsx(EnumFieldMatcherContext.Provider, __assign({ value: { templateHeaderLabel: templateHeaderLabel } }, { children: children })));
+};
+export var useEnumFieldMatcherContext = function () {
+    return useContext(EnumFieldMatcherContext);
+};

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const EnumFieldsMatchers: () => JSX.Element;

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/index.js ADDED Viewed

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Div } from "../../../styled/utils";
+import { useImporterContext } from "../../contexts/ImporterContextProvider";
+import { EnumFieldMatcher } from "./EnumFieldMatcher";
+import { useTranslation } from "react-i18next";
+export var EnumFieldsMatchers = function () {
+    var t = useTranslation("match").t;
+    var enumFieldValueMatchings = useImporterContext().enumFieldValueMatchings;
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, __assign({ flexColumn: true, ml: 32 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16, mt: 40 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 40, maxw: 928 }, { children: t("enum_description") }))] })), _jsx(Div, __assign({ flexColumn: true, alignCenter: true, mb: 20, ml: 32, mr: 32, centered: true }, { children: Object.keys(enumFieldValueMatchings).map(function (templateHeaderLabel, index) {
+                    return (_jsx(Div, __assign({ w: "100%" }, { children: _jsx(EnumFieldMatcher, { templateHeaderLabel: templateHeaderLabel }) }), index));
+                }) }))] }));
+};

package/lib/esm/Importer/Matcher/HeaderMatcher/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const HeaderMatcher: () => JSX.Element;
2	+ export { HeaderMatcher };

package/lib/esm/Importer/Matcher/HeaderMatcher/index.js ADDED Viewed

@@ -0,0 +1,61 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import styled from "styled-components";
+import { defaultTableHeaderHeightPx, TableView, } from "../../../common/Table/TableView";
+import { colors } from "../../../styled/theme";
+import { Div } from "../../../styled/utils";
+import { getTableHeight } from "../../common/index";
+import { useImporterContext } from "../../contexts/ImporterContextProvider";
+import { MAX_VISIBLE_ROWS } from "../common";
+import { MatcherStatus } from "../common/types";
+import { tableColumns } from "./tableColumns";
+import { useTranslation } from "react-i18next";
+var CardContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+var HeaderMatcher = function () {
+    var t = useTranslation("match").t;
+    var _a = useImporterContext(), templateHeaders = _a.templateHeaders, templateHeaderMatchings = _a.templateHeaderMatchings;
+    var templateHeaderLabels = Object.keys(templateHeaderMatchings);
+    var numberOfMatchedHeaders = templateHeaderLabels.filter(function (templateHeaderLabel) { return templateHeaderMatchings[templateHeaderLabel]; }).length;
+    var data = templateHeaderLabels.map(function (templateHeaderLabel) {
+        return {
+            ourColumns: templateHeaderLabel,
+            yourColumns: templateHeaderMatchings[templateHeaderLabel],
+            status: templateHeaderMatchings[templateHeaderLabel]
+                ? MatcherStatus.matched
+                : MatcherStatus.unmatched,
+        };
+    });
+    var dataSortingOrderRef = useRef(templateHeaderLabels.map(function (templateHeaderLabel, index) { return ({
+        index: index,
+        isMatched: !!templateHeaderMatchings[templateHeaderLabel],
+    }); }));
+    var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
+    var tableRowHeight = 100;
+    var tableHeight = getTableHeight({
+        headerHeight: defaultTableHeaderHeightPx,
+        rowHeight: tableRowHeight,
+        dataCount: data.length,
+        maxVisibleRows: MAX_VISIBLE_ROWS,
+    });
+    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, h100: true }, { children: [_jsxs(Div, __assign({ ml: 32, mr: 32 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16, mt: 40 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 24 }, { children: t("description", {
+                                numberOfMatchedHeaders: numberOfMatchedHeaders,
+                                totalNumberOfHeaders: templateHeaders.length,
+                            }) }))] })), _jsx(CardContainer, __assign({ dflex: true, centered: true, alignStart: true, w100: true, h100: true }, { children: _jsx(Div, __assign({ w100: true, h100: true }, { children: _jsx(TableView, { h: tableHeight, data: sortedData, rowHeight: tableRowHeight, columns: tableColumns, bg: colors.white, style: { height: "100%" } }) })) }))] })) }));
+};
+export { HeaderMatcher };
+var templateObject_1;

package/lib/esm/Importer/Matcher/HeaderMatcher/tableColumns.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export declare const tableColumns: ({
+    header: string;
+    width: number;
+    Content: ({ yourColumns, ourColumns }: {
+        yourColumns: any;
+        ourColumns: any;
+    }) => JSX.Element;
+} | {
+    header: string;
+    width: number;
+    Content: ({ status }: {
+        status: any;
+    }) => JSX.Element;
+})[];