@teselagen/ui 0.7.34 → 0.7.36

package/src/FormComponents/itemUpload.js

@@ -1,84 +0,0 @@
-import React from "react";
-import {
-  ProgressBar,
-  Intent,
-  Button,
-  Tooltip,
-  Position,
-  Icon
-} from "@blueprintjs/core";
-
-const itemUpload = props => {
-  const item = props.item;
-  const name = nameShortener(item.name);
-
-  return (
-    <div className="item-upload-container" key={item.id}>
-      <div className="item-upload">
-        <div>
-          {!props.saved ? (
-            <Tooltip
-              content={
-                <span>
-                  {`Click to
-              ${props.active ? "abort this uploading" : "remove this file"}`}
-                </span>
-              }
-              position={Position.LEFT}
-              usePortal={true}
-            >
-              <Button
-                intent={Intent.DANGER}
-                minimal
-                icon="delete"
-                onClick={props.onCancel}
-              />
-            </Tooltip>
-          ) : null}
-        </div>
-        <div>
-          <span>{name}</span>
-        </div>
-        <div>
-          {props.active ? `${props.value}%` : null}
-          {props.error ? (
-            <Tooltip content={props.error} usePortal={true}>
-              <Icon icon="error" intent={Intent.DANGER} />
-            </Tooltip>
-          ) : null}
-          {props.saved ? (
-            <Tooltip content={"File Saved"} usePortal={true}>
-              <Icon icon="saved" intent={Intent.SUCCESS} />
-            </Tooltip>
-          ) : null}
-        </div>
-      </div>
-      {props.active ? (
-        <ProgressBar intent={Intent.PRIMARY} value={props.value / 100} />
-      ) : null}
-    </div>
-  );
-};
-
-/**
- * Short file names length to display
- * @param {*} itemName
- */
-const nameShortener = itemName => {
-  if (itemName.length > 40) {
-    let name = "";
-    const arr = itemName.split(".");
-    name += `${arr[0].substring(0, 20)}...`;
-    if (arr.length >= 2) {
-      name += `${arr[arr.length - 2].substring(
-        arr[arr.length - 2].length - 5,
-        arr[arr.length - 2].length
-      )}`;
-      name += `.${arr[arr.length - 1]}`;
-    }
-    return name;
-  }
-  return itemName;
-};
-
-export default itemUpload;

package/src/FormComponents/sortify.js

@@ -1,73 +0,0 @@
-/*!
- *    Copyright 2015-2016 Thomas Rosenau
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-/**
- * Create a “sorted” version of an object.
- *
- * JS engines internally keep track of an object's keys in the order of
- * creation time, i.e. {a:1,b:2} is treated differently from {b:2,a:1}.
- * That difference can be seen when JSON.stringify is called on that object.
- * This function normalizes any kind of object by rearranging the keys in
- * alphabetical order (numerical keys first, since v8 does so, and there's
- * nothing we can do about it).
- * @param {*} o The object to be sorted
- */
-
-/* eslint-disable */
-const sortKeys = o => {
-  if (Array.isArray(o)) {
-    return o.map(sortKeys);
-  } else if (o instanceof Object) {
-    // put numeric keys first
-    let numeric = [];
-    let nonNumeric = [];
-    Object.keys(o).forEach(key => {
-      if (/^(0|[1-9][0-9]*)$/.test(key)) {
-        numeric.push(+key);
-      } else {
-        nonNumeric.push(key);
-      }
-    });
-    // do the rearrangement
-    return numeric
-      .sort(function (a, b) {
-        return a - b;
-      })
-      .concat(nonNumeric.sort())
-      .reduce((result, key) => {
-        result[key] = sortKeys(o[key]); // recurse!
-        return result;
-      }, {});
-  }
-  return o;
-};
-
-const jsonStringify = JSON.stringify.bind(JSON);
-
-const sortify = (value, replacer, space) => {
-  // replacer, toJSON(), cyclic references and other stuff is better handled by native stringifier.
-  // So we do JSON.stringify(sortKeys( JSON.parse(JSON.stringify()) )).
-  // This approach is slightly slower but much safer than a manual stringification.
-  let nativeJson = jsonStringify(value, replacer, 0);
-  if (!nativeJson || (nativeJson[0] !== "{" && nativeJson[0] !== "[")) {
-    // if value is not an Object or Array
-    return nativeJson;
-  }
-  let cleanObj = JSON.parse(nativeJson);
-  return jsonStringify(sortKeys(cleanObj), null, space);
-};
-
-export default sortify;

package/src/FormComponents/style.css

@@ -1,275 +0,0 @@
-.tg-flex-form-content .bp3-form-content {
-  display: flex;
-}
-
-.error-popover {
-  margin: 5px;
-  color: red;
-}
-
-.te-file-upload-input {
-  min-width: 140px;
-}
-
-.ant-upload.ant-upload-drag {
-  border-width: 2px;
-}
-
-.tg-upload-inner {
-  margin: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-size: 16px;
-}
-.tg-dropzone.tg-dropzone-minimal {
-  height: 30px !important;
-  width: fit-content !important;
-}
-.tg-dropzone-minimal .tg-upload-inner {
-  flex-direction: row;
-  margin: 4px;
-}
-.tg-dropzone-minimal .bp3-icon {
-  flex-direction: row;
-  margin-right: 5px;
-}
-
-.tg-hide-drop-target .ant-upload.ant-upload-drag {
-  display: none;
-}
-
-.tg-dropzone {
-  width: 100% !important;
-  height: 100% !important;
-  border-width: 2px;
-  border-color: #d9d9d9;
-  border-style: dashed;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: all 1s;
-}
-.tg-dropzone:hover {
-  border-color: rgb(91, 157, 211);
-}
-.tg-dropzone-active {
-  border-color: rgb(91, 157, 211);
-}
-.tg-dropzone-accept {
-  border-color: rgb(123, 214, 150);
-}
-.tg-dropzone-reject {
-  border-color: rgb(91, 157, 211);
-}
-.tg-dropzone-disabled {
-  cursor: not-allowed;
-  border-color: rgb(136, 133, 132) !important;
-  opacity: 0.8;
-}
-.tg-upload-file-list-item {
-  display: flex;
-  justify-content: space-between;
-  margin: 2px;
-  border-radius: 3px;
-  padding: 2px;
-}
-.tg-upload-file-list-item:hover {
-  background: rgb(215, 238, 255);
-}
-.clickableIcon {
-  cursor: pointer;
-}
-.clickableIcon:hover {
-  opacity: 0.7;
-}
-
-.tg-upload-file-list-item a {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tg-upload-file-list-item-overflow {
-  overflow: auto;
-  height: 150px;
-}
-
-.tg-upload-file-list-counter {
-  position: absolute;
-  padding: 5px;
-}
-
-.tg-spin {
-  animation-name: spin;
-  animation-duration: 1500ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* .Select-multi-value-wrapper {
-  max-height: 100px;
-  overflow: scroll;
-} */
-
-/* dark styles */
-.bp3-dark .Select.is-open > .Select-control,
-.bp3-dark .Select-control,
-.bp3-dark .Select.is-disabled > .Select-control {
-  background: rgba(16, 22, 26, 0.3);
-  box-shadow:
-    0 0 0 0 rgba(19, 124, 189, 0),
-    0 0 0 0 rgba(19, 124, 189, 0),
-    0 0 0 0 rgba(19, 124, 189, 0),
-    inset 0 0 0 1px rgba(16, 22, 26, 0.3),
-    inset 0 1px 1px rgba(16, 22, 26, 0.4);
-  background: rgba(16, 22, 26, 0.3);
-  color: #f5f8fa;
-}
-
-.bp3-dark .Select.is-focused:not(.is-open) > .Select-control {
-  background: rgba(16, 22, 26, 0.3);
-  color: #f5f8fa;
-}
-
-.bp3-dark .Select-placeholder,
-.bp3-dark .Select--single > .Select-control .Select-value {
-  color: rgb(191, 204, 214, 0.5); /*#bfccd6*/
-}
-
-.bp3-dark .Select-control {
-  border: none !important;
-}
-
-.bp3-dark
-  .Select.has-value.Select--single
-  > .Select-control
-  .Select-value
-  .Select-value-label,
-.bp3-dark
-  .Select.has-value.is-pseudo-focused.Select--single
-  > .Select-control
-  .Select-value
-  .Select-value-label,
-.bp3-dark .Select-option.is-selected {
-  color: #f5f8fa;
-}
-
-.bp3-dark .Select-option {
-  background: #30404d;
-  color: #f5f8fa;
-}
-
-.bp3-dark .Select-menu-outer {
-  border: 1px solid #26738cb0;
-  background: #202b33;
-}
-
-.bp3-dark .Select-option.is-focused {
-  background: rgba(0, 126, 255, 0.08);
-  color: #f5f8fa;
-}
-
-.bp3-dark .tg-upload-file-list-item:hover {
-  background: #26738cb0;
-}
-
-.tg-tooltipError .bp3-popover-wrapper {
-  width: 100%;
-}
-
-.tg-no-fill-field {
-  display: table !important;
-}
-
-.item-upload-container {
-  padding: 5px;
-  width: 290px;
-}
-
-.item-upload {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* .bp3-control {
-  display: flex;
-  align-items: center;
-} */
-
-.bp3-form-group.bp3-inline .bp3-form-content {
-  flex: 1;
-}
-
-.bp3-dark input {
-  color: #f5f8fa;
-}
-
-.tg-no-fill-field .bp3-checkbox {
-  display: flex;
-  align-items: center;
-}
-
-.bp3-form-group .info-helper-wrapper:not(.info-helper-wrapper-noMarginTop) {
-  margin-top: -9px !important;
-}
-
-.generateDefaultDot {
-  cursor: pointer;
-  border-radius: 50%;
-  background: #ffca00;
-  box-shadow: 0px 0px 2px black;
-  height: 8px;
-  width: 8px;
-}
-.bp3-dark .generateDefaultDot {
-  background: yellow;
-}
-
-.bp3-label {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-:not(.no-inline-label-margins).bp3-inline .bp3-label {
-  /* text-align: right; */
-  padding-right: 20px;
-  min-width: 100px;
-}
-
-.bp3-dark .tg-color-picker-selector input {
-  color: #222222;
-}
-
-.form-separator {
-  p {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-  p::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 1px;
-    background-color: #e1e4e8;
-    margin-right: 16px;
-  }
-  p::after {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 1px;
-    background-color: #e1e4e8;
-    margin-left: 16px;
-  }
-}

package/src/FormComponents/tryToMatchSchemas.js

@@ -1,264 +0,0 @@
-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/src/FormComponents/utils.js

@@ -1,6 +0,0 @@
-export const REQUIRED_ERROR = "This field is required.";
-
-export const fieldRequired = value =>
-  !value || (Array.isArray(value) && !value.length)
-    ? REQUIRED_ERROR
-    : undefined;