@teselagen/ui 0.0.11 → 0.0.13

package/src/FormComponents/itemUpload.js

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,73 @@
+/*!
+ *    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

@@ -0,0 +1,247 @@
+.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 {
+  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;
+}

package/src/FormComponents/tryToMatchSchemas.js

@@ -0,0 +1,222 @@
+import { forEach, isArray, map } from "lodash";
+import { nanoid } from "nanoid";
+import Fuse from "fuse.js";
+import { editCellHelper } from "../DataTable/editCellHelper";
+import { validateTableWideErrors } from "../DataTable/validateTableWideErrors";
+import { isEmpty } from "lodash";
+import getTextFromEl from "../utils/getTextFromEl";
+import { min } from "lodash";
+import { camelCase } from "lodash";
+import { startCase } from "lodash";
+
+const getSchema = data => ({
+  fields: map(data[0], (val, path) => {
+    return { path, type: "string" };
+  }),
+  userData: data
+  // userData: data.map((d) => {
+  //   if (!d.id) {
+  //     d.id = nanoid();
+  //   }
+  //   return d
+  // })
+});
+export default async function tryToMatchSchemas({
+  incomingData,
+  validateAgainstSchema
+}) {
+  const userSchema = getSchema(incomingData);
+
+  const { searchResults, csvValidationIssue } = 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 {
+    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);
+
+  officialSchema.fields.forEach(h => {
+    let hasMatch = false;
+    //run fuse search for results
+    let result = fuse.search(h.path) || [];
+
+    //if there are any exact matches, push them onto the results array
+    userSchema.fields.forEach((uh, i) => {
+      const pathMatch =
+        uh.path.toLowerCase().replace(/ /g, "") ===
+        h.path.toLowerCase().replace(/ /g, "");
+      const displayNameMatch =
+        h.displayName &&
+        uh.path.toLowerCase().replace(/ /g, "") ===
+          getTextFromEl(h.displayName)
+            .toLowerCase()
+            .replace(/ /g, "");
+      const hasAlternatePathMatch =
+        h.alternatePathMatch &&
+        (isArray(h.alternatePathMatch)
+          ? h.alternatePathMatch.some(alternatePathMatch => {
+              return (
+                uh.path.toLowerCase().replace(/ /g, "") ===
+                alternatePathMatch.toLowerCase().replace(/ /g, "")
+              );
+            })
+          : uh.path.toLowerCase().replace(/ /g, "") ===
+            h.alternatePathMatch.toLowerCase().replace(/ /g, ""));
+
+      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.";
+    }
+  });
+  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?`;
+  }
+  // if (!csvValidationIssue) {
+  //   //all the headers match up as does the actual data
+  //   return { csvValidationIssue };
+  // }
+
+  return {
+    searchResults: officialSchema.fields,
+    csvValidationIssue
+  };
+}
+
+export const addSpecialPropToAsyncErrs = res => {
+  forEach(res, (v, k) => {
+    res[k] = {
+      message: v,
+      _isTableAsyncWideError: true
+    };
+  });
+  return res;
+};

package/src/FormComponents/utils.js

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

package/src/HotkeysDialog/index.js

@@ -0,0 +1,79 @@
+import React from "react";
+import {
+  Dialog,
+  Tab,
+  Tabs,
+  KeyCombo,
+  Classes /*, Tooltip*/
+} from "@blueprintjs/core";
+// import { startCase } from "lodash";
+import classNames from "classnames";
+import {
+  getHotkeyProps /*, hotkeysById, comboToLabel*/
+} from "../utils/hotkeyUtils";
+
+import "./style.css";
+
+export default function HotkeysDialog(props) {
+  if (!props.hotkeySets) {
+    console.error("Missing hotkeySets in HotkeysDialog");
+    return null;
+  }
+  const sections = Object.keys(props.hotkeySets);
+  return (
+    <Dialog
+      isOpen={props.isOpen}
+      onClose={props.onClose}
+      title={props.dialogTitle || "Keyboard Shortcuts"}
+    >
+      <Tabs className="tg-hotkeys-dialog">
+        {sections.map(name => (
+          <Tab
+            key={name}
+            id={name}
+            title={sections.length === 1 ? undefined : name}
+            panel={
+              <div className="tg-table-wrapper">
+                <table
+                  className={classNames(
+                    Classes.HTML_TABLE,
+                    Classes.HTML_TABLE_STRIPED,
+                    Classes.HTML_TABLE_BORDERED
+                  )}
+                >
+                  <thead>
+                    <tr>
+                      <th>Action</th>
+                      <th>Shortcut</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.keys(props.hotkeySets[name]).map(id => {
+                      const def = getHotkeyProps(
+                        props.hotkeySets[name][id],
+                        id
+                      );
+                      return (
+                        <tr key={id}>
+                          <td>{def.label}</td>
+                          <td>
+                            <KeyCombo combo={def.combo} />
+                            {/* <Tooltip
+                              content={comboToLabel(def.combo, false)}
+                            >
+                              {comboToLabel(def.combo)}
+                            </Tooltip> */}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            }
+          />
+        ))}
+      </Tabs>
+    </Dialog>
+  );
+}