@teselagen/ui 0.7.33-beta.5 → 0.7.33

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), "");
+};

package/validateTableWideErrors.js

@@ -0,0 +1,160 @@
+import { getIdOrCodeOrIndex } from "./utils";
+import { getCellVal } from "./getCellVal";
+import { forEach, isArray } from "lodash-es";
+import { startCase } from "lodash-es";
+import { camelCase } from "lodash-es";
+
+const uniqueMsg = "This value must be unique";
+export function validateTableWideErrors({
+  entities,
+  schema,
+  optionalUserSchema,
+  newCellValidate
+}) {
+  forEach(newCellValidate, (err, cellId) => {
+    if (err && err._isTableWideError) {
+      delete newCellValidate[cellId];
+    }
+  });
+  if (schema.tableWideValidation) {
+    const newErrs = schema.tableWideValidation({
+      entities
+    });
+    forEach(newErrs, (err, cellId) => {
+      newCellValidate[cellId] = {
+        message: err,
+        _isTableWideError: true
+      };
+    });
+  }
+  const displayNameMap = {};
+  const fieldUpperToPath = {};
+
+  forEach(schema.fields, f => {
+    fieldUpperToPath[f.path.toUpperCase()] = f.path;
+    displayNameMap[f.path] = f.displayName || startCase(camelCase(f.path));
+  });
+  function getDisplayName(path) {
+    return displayNameMap[path] || startCase(camelCase(path));
+  }
+
+  if (schema.requireAtLeastOneOf) {
+    //make sure at least one of the required fields is present
+    (isArray(schema.requireAtLeastOneOf[0])
+      ? schema.requireAtLeastOneOf
+      : [schema.requireAtLeastOneOf]
+    ).forEach(alo => {
+      entities.forEach(entity => {
+        if (!alo.some(path => getCellVal(entity, path))) {
+          alo.forEach(path => {
+            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+            newCellValidate[cellId] = {
+              message: `At least one of these fields must be present - ${alo
+                .map(getDisplayName)
+                .join(", ")}`,
+              _isTableWideError: true
+            };
+          });
+        }
+      });
+    });
+  }
+  if (schema.requireExactlyOneOf) {
+    (isArray(schema.requireExactlyOneOf[0])
+      ? schema.requireExactlyOneOf
+      : [schema.requireExactlyOneOf]
+    ).forEach(reqs => {
+      entities.forEach(entity => {
+        const present = reqs.filter(path => getCellVal(entity, path));
+        if (present.length !== 1) {
+          reqs.forEach(path => {
+            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+            const fields = reqs.map(getDisplayName).join(", ");
+            const err = {
+              message:
+                present.length === 0
+                  ? `One of these fields is required - ${fields}`
+                  : `Cannot have more than one of these fields - ${fields}`,
+              _isTableWideError: true
+            };
+            newCellValidate[cellId] = err;
+          });
+        }
+      });
+    });
+  }
+
+  const requireIfs = [];
+  schema.fields.forEach(col => {
+    const { path, requireIf } = col;
+    if (requireIf) {
+      const requireIfPath = fieldUpperToPath[requireIf.toUpperCase()];
+      requireIfs.push([requireIfPath, path]);
+    }
+  });
+  requireIfs.forEach(([requireIfPath, path]) => {
+    entities.forEach(entity => {
+      const requireIfVal = getCellVal(entity, requireIfPath);
+      const pathVal = getCellVal(entity, path);
+      if (requireIfVal && !pathVal) {
+        const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+        newCellValidate[cellId] = {
+          message: `This field is required if ${displayNameMap[requireIfPath]} is present`,
+          _isTableWideError: true
+        };
+      }
+    });
+  });
+  if (schema.requireAllOrNone) {
+    (isArray(schema.requireAllOrNone[0])
+      ? schema.requireAllOrNone
+      : [schema.requireAllOrNone]
+    ).forEach(reqs => {
+      entities.forEach(entity => {
+        const present = reqs.filter(path => getCellVal(entity, path));
+        if (present.length && present.length !== reqs.length) {
+          reqs.forEach(path => {
+            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+            const fields = reqs.map(getDisplayName).join(", ");
+            const err = {
+              message: `Please specify either ALL of the following fields or NONE of them - ${fields}`,
+              _isTableWideError: true
+            };
+            newCellValidate[cellId] = err;
+          });
+        }
+      });
+    });
+  }
+
+  schema.fields.forEach(col => {
+    let { path, isUnique } = col;
+    if (isUnique) {
+      if (optionalUserSchema) {
+        path = col.matches[0].item.path;
+      }
+      const existingVals = {};
+      entities.forEach(entity => {
+        const val = getCellVal(entity, path, col);
+        if (!val) return;
+        const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+        if (existingVals[val]) {
+          newCellValidate[cellId] = {
+            message: uniqueMsg,
+            _isTableWideError: true
+          };
+          newCellValidate[existingVals[val]] = {
+            message: uniqueMsg,
+            _isTableWideError: true
+          };
+        } else {
+          if (newCellValidate[cellId] === uniqueMsg) {
+            delete newCellValidate[cellId];
+          }
+          existingVals[val] = cellId;
+        }
+      });
+    }
+  });
+  return newCellValidate;
+}