@teselagen/ui 0.7.33-beta.6 → 0.7.33

package/toastr.js

@@ -0,0 +1,148 @@
+import { Position, Toaster, Intent, Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+const TopToaster = Toaster.create({
+  className: "top-toaster",
+  position: Position.TOP
+});
+
+const BottomToaster = Toaster.create({
+  className: "bottom-toaster",
+  position: Position.BOTTOM
+});
+
+window.__tgClearAllToasts = () => {
+  TopToaster.clear();
+  BottomToaster.clear();
+};
+
+let counter = 5000;
+const generateToast = intent => (message, options) => {
+  options = options || {};
+  const toastToUse = options.bottom ? BottomToaster : TopToaster;
+  let updatedTimeout;
+  if (options.updateTimeout) {
+    //generate a slightly different than default timeout to make the update stay on the page for a full 5 seconds
+    if (counter > 5500) {
+      updatedTimeout = --counter;
+    } else {
+      updatedTimeout = ++counter;
+    }
+  }
+  if (intent === Intent.DANGER) {
+    console.error("Toastr error message: ", message);
+  }
+  if (intent === Intent.WARNING) {
+    console.error("Toastr warning message: ", message);
+  }
+
+  const maybeAddClearAll = () => {
+    // wipe any existing clear all buttons
+    const existingClearAllButtons =
+      document.querySelectorAll(`.tg-clear-all-toasts`);
+    existingClearAllButtons.forEach(button => {
+      button.remove();
+    });
+    const activeToasts = document.querySelectorAll(
+      `.bp3-toast:not(.bp3-toast-exit)`
+    );
+    if (activeToasts.length > 1) {
+      // add custom clear all button
+
+      const topToaster = document.querySelector(`.bp3-toast`);
+      if (!topToaster) return;
+      const closeButton = document.createElement("div");
+      closeButton.classList.add(
+        Classes.BUTTON,
+        Classes.LARGE,
+        Classes.INTENT_PRIMARY,
+        "tg-clear-all-toasts"
+      );
+      closeButton.innerText = "Clear all";
+      closeButton.onclick = window.__tgClearAllToasts;
+      // position the button to the right of the message
+      closeButton.style.position = "absolute";
+      closeButton.style.right = "-100px";
+
+      topToaster.appendChild(closeButton);
+    }
+  };
+  const uniqKey = toastToUse.show(
+    {
+      intent,
+      message,
+      onDismiss: () => {
+        if (options.onDismiss) {
+          options.onDismiss();
+        }
+        setTimeout(() => {
+          maybeAddClearAll();
+        }, 0);
+      },
+      timeout:
+        options.timeout ||
+        updatedTimeout ||
+        (!window.Cypress &&
+        (intent === Intent.DANGER || intent === Intent.WARNING)
+          ? 60000
+          : undefined),
+      action: options.action,
+      icon: options.icon,
+      className: classNames("preserve-newline", options.className)
+    },
+    options.key
+  );
+  setTimeout(() => {
+    maybeAddClearAll();
+  }, 0);
+  function clear() {
+    toastToUse.dismiss(uniqKey);
+    setTimeout(() => {
+      maybeAddClearAll();
+    }, 0);
+  }
+  clear.key = uniqKey;
+  return clear;
+};
+
+function preventDuplicates(func) {
+  const previousToasts = {};
+  return (message, options = {}) => {
+    const clearToast = func(message, options);
+    // no duplicate check for toasts with updates
+
+    if (!options.key) {
+      if (!options.key && previousToasts[message]) {
+        previousToasts[message](); //clear it!
+      }
+
+      setTimeout(() => {
+        delete previousToasts[message];
+      }, options.timeout || 5000);
+
+      previousToasts[message] = clearToast;
+    }
+    return clearToast;
+  };
+}
+
+if (!window.toastr) window.toastr = {};
+if (!window.toastr.success) {
+  window.toastr.success = preventDuplicates(generateToast(Intent.SUCCESS));
+}
+
+if (!window.toastr.error) {
+  window.toastr.error = preventDuplicates(generateToast(Intent.DANGER));
+}
+
+if (!window.toastr.warning) {
+  window.toastr.warning = preventDuplicates(generateToast(Intent.WARNING));
+}
+
+if (!window.toastr.info) {
+  window.toastr.info = preventDuplicates(generateToast(Intent.PRIMARY));
+}
+
+if (!window.toastr.default) {
+  window.toastr.default = preventDuplicates(generateToast(Intent.NONE));
+}

package/tryToMatchSchemas.js

@@ -0,0 +1,264 @@
+import { forEach, isArray, isPlainObject, map, snakeCase } from "lodash-es";
+import { nanoid } from "nanoid";
+import Fuse from "fuse.js";
+import { editCellHelper } from "../DataTable/editCellHelper";
+import { validateTableWideErrors } from "../DataTable/validateTableWideErrors";
+import { isEmpty } from "lodash-es";
+import getTextFromEl from "../utils/getTextFromEl";
+import { min } from "lodash-es";
+import { camelCase } from "lodash-es";
+import { startCase } from "lodash-es";
+
+const getSchema = data => ({
+  fields: map(data[0], (val, path) => {
+    return { path, type: "string" };
+  }),
+  userData: data
+});
+
+export default async function tryToMatchSchemas({
+  incomingData,
+  validateAgainstSchema
+}) {
+  await resolveValidateAgainstSchema(validateAgainstSchema);
+  const userSchema = getSchema(incomingData);
+
+  const { searchResults, csvValidationIssue, ignoredHeadersMsg } =
+    await matchSchemas({
+      userSchema,
+      officialSchema: validateAgainstSchema
+    });
+
+  const incomingHeadersToScores = {};
+
+  searchResults.forEach(r => {
+    r.matches.forEach(match => {
+      incomingHeadersToScores[match.item.path] =
+        incomingHeadersToScores[match.item.path] || [];
+      incomingHeadersToScores[match.item.path].push(match.score);
+    });
+  });
+
+  searchResults.forEach(r => {
+    for (const match of r.matches) {
+      if (!incomingHeadersToScores[match.item.path]) continue;
+      const minScore = min(incomingHeadersToScores[match.item.path]);
+      if (minScore === match.score) {
+        r.topMatch = match.item.path;
+        r.matches.forEach(match => {
+          if (!incomingHeadersToScores[match.item.path]) return;
+          const arr = incomingHeadersToScores[match.item.path];
+          arr.splice(arr.indexOf(match.score), 1);
+        });
+        delete incomingHeadersToScores[match.item.path];
+        break;
+      }
+    }
+  });
+  const matchedHeaders = {};
+  searchResults.forEach(r => {
+    if (r.topMatch) {
+      matchedHeaders[r.path] = r.topMatch;
+    }
+  });
+
+  return {
+    ignoredHeadersMsg,
+    csvValidationIssue,
+    matchedHeaders,
+    userSchema,
+    searchResults
+  };
+}
+
+async function matchSchemas({ userSchema, officialSchema }) {
+  const options = {
+    includeScore: true,
+    keys: ["path", "displayName"]
+  };
+  let csvValidationIssue = false;
+  const fuse = new Fuse(userSchema.fields, options);
+
+  const matchedAltPaths = [];
+  officialSchema.fields.forEach(h => {
+    let hasMatch = false;
+    //run fuse search for results
+    let result = fuse.search(h.path) || [];
+
+    const hadNormalPathMatch = userSchema.fields.some(
+      uh => norm(uh.path) === norm(h.path)
+    );
+    //if there are any exact matches, push them onto the results array
+    userSchema.fields.forEach((uh, i) => {
+      const pathMatch = norm(uh.path) === norm(h.path);
+      const displayNameMatch =
+        h.displayName && norm(uh.path) === norm(getTextFromEl(h.displayName));
+      const hasAlternatePathMatch =
+        !hadNormalPathMatch &&
+        h.alternatePathMatch &&
+        (isArray(h.alternatePathMatch)
+          ? h.alternatePathMatch
+          : [h.alternatePathMatch]
+        ).find(alternatePathMatch => {
+          let altPath = alternatePathMatch;
+          if (isPlainObject(alternatePathMatch)) {
+            altPath = alternatePathMatch.path;
+          }
+          return norm(uh.path) === norm(altPath);
+        });
+
+      if (hasAlternatePathMatch) {
+        matchedAltPaths.push(
+          hasAlternatePathMatch.path || hasAlternatePathMatch
+        );
+        if (hasAlternatePathMatch.format) {
+          h.format = hasAlternatePathMatch.format;
+        }
+      }
+      if (pathMatch || displayNameMatch || hasAlternatePathMatch) {
+        result = result.filter(({ path }) => path === uh.path);
+        //add a fake perfect match result to make sure we get the match
+        result.unshift({
+          item: {
+            path: uh.path,
+            type: h.type
+          },
+          refIndex: i,
+          score: 0
+        });
+        hasMatch = true;
+      }
+    });
+    h.hasMatch = hasMatch;
+    h.matches = result;
+
+    if (!hasMatch && h.isRequired) {
+      csvValidationIssue =
+        "It looks like some of the headers in your uploaded file(s) do not match the expected headers. Please look over and correct any issues with the mappings below.";
+    }
+  });
+  const ignoredUserSchemaFields = [];
+  userSchema.fields.forEach(uh => {
+    if (
+      !officialSchema.fields.find(
+        h =>
+          norm(h.path) === norm(uh.path) ||
+          norm(h.displayName) === norm(uh.path) ||
+          matchedAltPaths.includes(uh.path)
+      )
+    ) {
+      // check that the column does contain data (if it doesn't, it's probably a blank column)
+      if (userSchema.userData.some(e => e[uh.path])) {
+        ignoredUserSchemaFields.push(uh);
+      }
+    }
+  });
+
+  if (officialSchema.coerceUserSchema) {
+    officialSchema.coerceUserSchema({ userSchema, officialSchema });
+  }
+
+  userSchema.userData = map(userSchema.userData, e => {
+    if (!e.id) {
+      return {
+        ...e,
+        id: "__generated__" + nanoid()
+      };
+    }
+    return e;
+  });
+  const editableFields = officialSchema.fields.filter(f => !f.isNotEditable);
+  let hasErr;
+  if (!csvValidationIssue) {
+    userSchema.userData.some(e => {
+      return editableFields.some(columnSchema => {
+        //mutative
+        const { error } = editCellHelper({
+          entity: e,
+          columnSchema,
+          newVal: columnSchema.hasMatch
+            ? e[columnSchema.matches[0]?.item?.path]
+            : undefined
+        });
+        if (error) {
+          hasErr = `${
+            columnSchema.displayName || startCase(camelCase(columnSchema.path))
+          }: ${error}`;
+          return true;
+        }
+
+        return false;
+      });
+    });
+    if (!hasErr) {
+      hasErr = Object.values(
+        validateTableWideErrors({
+          entities: userSchema.userData,
+          schema: officialSchema,
+          optionalUserSchema: userSchema,
+          newCellValidate: {}
+        })
+      )[0];
+    }
+  }
+
+  if (officialSchema.tableWideAsyncValidation) {
+    //do the table wide validation
+    const res = await officialSchema.tableWideAsyncValidation({
+      entities: userSchema.userData
+    });
+    if (!isEmpty(res)) {
+      csvValidationIssue = addSpecialPropToAsyncErrs(res);
+    }
+    //return errors on the tables
+  }
+
+  if (hasErr && !csvValidationIssue) {
+    if (hasErr.message) {
+      csvValidationIssue = hasErr;
+    } else {
+      csvValidationIssue = {
+        message: hasErr
+      };
+      // csvValidationIssue = ` Some of the data doesn't look quite right. Do these header mappings look correct?`;
+    }
+    // csvValidationIssue = `Some of the data doesn't look quite right. Do these header mappings look correct?`;
+  }
+  let ignoredHeadersMsg;
+  if (ignoredUserSchemaFields.length) {
+    ignoredHeadersMsg = `It looks like the following headers in your file didn't map to any of the accepted headers: ${ignoredUserSchemaFields
+      .map(f => f.displayName || f.path)
+      .join(", ")}`;
+  }
+  return {
+    searchResults: officialSchema.fields,
+    csvValidationIssue,
+    ignoredHeadersMsg
+  };
+}
+
+export const addSpecialPropToAsyncErrs = res => {
+  forEach(res, (v, k) => {
+    res[k] = {
+      message: v,
+      _isTableAsyncWideError: true
+    };
+  });
+  return res;
+};
+
+async function resolveValidateAgainstSchema() {
+  //tnw: wip!
+  // mapSeries(validateAgainstSchema.fields, async f => {
+  //   if (f.type === "dropdown") {
+  //     console.log(`type:`, f.type)
+  //     if (f.getValues) {
+  //       f.values = await f.getValues(props);
+  //     }
+  //   }
+  // })
+}
+
+function norm(h) {
+  return snakeCase(h).toLowerCase().replace(/ /g, "");
+}

package/typeToCommonType.js

@@ -0,0 +1,6 @@
+export const typeToCommonType = {
+  string: "Text",
+  number: "Number",
+  boolean: "True/False",
+  dropdown: "Select One"
+};

package/useDeepEqualMemo.js

@@ -0,0 +1,15 @@
+import { isEqual } from "lodash-es";
+import { useEffect, useRef } from "react";
+
+export const useDeepEqualMemo = value => {
+  const ref = useRef();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+};
+
+export const useDeepEqualEffect = (effect, deps) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useEffect(effect, useDeepEqualMemo(deps));
+};

package/useDialog.js

@@ -0,0 +1,63 @@
+import React, { useCallback, useState } from "react";
+
+/*
+
+  const {toggleDialog, comp} = useDialog({
+    ModalComponent: SimpleInsertData,
+  });
+
+  return <div>
+    {comp} //stick the returned dialog comp somewhere in the dom! (it should not effect layout)
+    {...your code here}
+  </div>
+
+*/
+export const useDialog = ({ ModalComponent }) => {
+  const [isOpen, setOpen] = useState(false);
+  const [additionalProps, setAdditionalProps] = useState(false);
+  const Comp = useCallback(
+    () => (
+      <ModalComponent
+        hideModal={() => {
+          setOpen(false);
+        }}
+        hideDialog={() => {
+          setOpen(false);
+        }}
+        {...additionalProps}
+        dialogProps={{
+          isOpen,
+          ...additionalProps?.dialogProps
+        }}
+      />
+    ),
+    [ModalComponent, additionalProps, isOpen]
+  );
+
+  const showDialogPromise = useCallback(async (handlerName, moreProps = {}) => {
+    return new Promise(resolve => {
+      //return a promise that can be awaited
+      setAdditionalProps({
+        hideModal: () => {
+          //override hideModal to resolve also
+          setOpen(false);
+          resolve({});
+        },
+        hideDialog: () => {
+          //override hideModal to resolve also
+          setOpen(false);
+          resolve({});
+        },
+        [handlerName]: r => {
+          setOpen(false);
+          resolve(r || {});
+        },
+        //pass any additional props to the dialog
+        ...moreProps
+      });
+      setOpen(true); //open the dialog
+    });
+  }, []);
+
+  return { Comp, showDialogPromise };
+};

package/useStableReference.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export const useStableReference = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};

package/useTableEntities.js

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { change, initialize } from "redux-form";
+
+export const useTableEntities = tableFormName => {
+  const dispatch = useDispatch();
+  const selectTableEntities = useCallback(
+    (entities = []) => {
+      initialize(tableFormName, {}, true, {
+        keepDirty: true,
+        updateUnregisteredFields: true,
+        keepValues: true
+      });
+      const selectedEntityIdMap = {};
+      entities.forEach(entity => {
+        selectedEntityIdMap[entity.id] = {
+          entity,
+          time: Date.now()
+        };
+      });
+      dispatch(
+        change(
+          tableFormName,
+          "reduxFormSelectedEntityIdMap",
+          selectedEntityIdMap
+        )
+      );
+    },
+    [dispatch, tableFormName]
+  );
+
+  const { allOrderedEntities, selectedEntities } = useSelector(state => ({
+    allOrderedEntities: state.form?.[tableFormName]?.values?.allOrderedEntities,
+    selectedEntities:
+      state.form?.[tableFormName]?.values?.reduxFormSelectedEntityIdMap
+  }));
+  return { selectTableEntities, allOrderedEntities, selectedEntities };
+};

package/useTraceUpdate.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+// useful for debugging rerender errors
+export const useTraceUpdate = props => {
+  const prev = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+      if (prev.current[k] !== v) {
+        ps[k] = [prev.current[k], v];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      // eslint-disable-next-line no-console
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+};

package/utils.js

@@ -0,0 +1,37 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const getFieldPathToIndex = schema => {
+  const fieldToIndex = {};
+  schema.fields.forEach((f, i) => {
+    fieldToIndex[f.path] = i;
+  });
+  return fieldToIndex;
+};
+
+export const defaultParsePaste = str => {
+  return str.split(/\r\n|\n|\r/).map(row => row.split("\t"));
+};
+
+export const getEntityIdToEntity = entities => {
+  const entityIdToEntity = {};
+  entities.forEach((e, i) => {
+    entityIdToEntity[getIdOrCodeOrIndex(e, i)] = { e, i };
+  });
+  return entityIdToEntity;
+};
+
+const endsWithNumber = str => {
+  return /[0-9]+$/.test(str);
+};
+
+export const getNumberStrAtEnd = str => {
+  if (endsWithNumber(str)) {
+    return str.match(/[0-9]+$/)[0];
+  }
+
+  return null;
+};
+
+export const stripNumberAtEnd = str => {
+  return str?.replace?.(getNumberStrAtEnd(str), "");
+};