@teselagen/ui 0.7.36 → 0.8.1

package/src/FormComponents/style.css

@@ -0,0 +1,275 @@
+.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/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-es";
+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>
+  );
+}

package/src/HotkeysDialog/style.css

@@ -0,0 +1,54 @@
+.tg-hotkeys-dialog .bp3-tab-list {
+  /* border-top: 1px solid #ddd; */
+  display: flex;
+  justify-content: center;
+  padding-left: 10px;
+  margin-top: 5px;
+}
+
+.tg-hotkeys-dialog table {
+  table-layout: fixed;
+  margin: 0 5px 5px;
+  width: calc(100% - 10px);
+  border-spacing: 0;
+}
+
+.tg-hotkeys-dialog .bp3-tab-panel {
+  margin-top: 5px;
+  padding: 10px;
+}
+.tg-hotkeys-dialog thead,
+.tg-hotkeys-dialog tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed; /* even columns width , fix width of table too*/
+}
+
+.tg-hotkeys-dialog .tg-table-wrapper tbody {
+  display: block;
+  max-height: 55vh;
+  overflow-y: auto;
+}
+
+.tg-hotkeys-dialog th {
+  width: 50%;
+  font-weight: bold;
+  color: black;
+  border-bottom: 3px solid #ddd;
+}
+
+.tg-hotkeys-dialog tr:nth-child(2n) td {
+  background-color: #f8f8f8;
+}
+.bp3-dark .tg-hotkeys-dialog tr:nth-child(2n) td {
+  background-color: #3e4b6d;
+}
+
+.tg-hotkeys-dialog td,
+.tg-hotkeys-dialog th {
+  padding: 8px 12px;
+}
+
+.tg-hotkeys-dialog td:first-child {
+  border-right: 1px solid lightgrey;
+}

package/src/InfoHelper/index.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { Popover, Button, Tooltip, Icon } from "@blueprintjs/core";
+import classnames from "classnames";
+import "./style.css";
+import { popoverOverflowModifiers } from "..";
+
+export default ({
+  className,
+  content,
+  children,
+  icon = "info-sign",
+  isPopover,
+  isButton,
+  size,
+  isInline,
+  clickable,
+  color,
+  noMarginTop,
+  popoverProps = {},
+  disabled,
+  displayToSide,
+  style,
+  ...rest
+}) => {
+  const IconToUse = isButton ? Button : Icon;
+  const iconProps = {
+    icon,
+    color,
+    disabled
+  };
+  if (!isButton) iconProps.iconSize = size;
+
+  const IconInner = <IconToUse {...iconProps} {...rest} />;
+  let toReturn;
+  const toolTipOrPopoverProps = {
+    disabled:
+      disabled ||
+      (!isPopover && window.Cypress && !window.Cypress.allowInfoHelperTooltips),
+    popoverClassName: "tg-info-helper-popover bp3-tooltip",
+    content: content || children,
+    modifiers: popoverOverflowModifiers,
+    ...popoverProps
+  };
+  if (displayToSide) {
+    toReturn = (
+      <React.Fragment>
+        {IconInner}
+        <span style={{ paddingLeft: 5, fontStyle: "italic" }}>
+          {content || children}
+        </span>
+      </React.Fragment>
+    );
+  } else if (isPopover) {
+    toReturn = <Popover {...toolTipOrPopoverProps} target={IconInner} />;
+  } else {
+    toReturn = <Tooltip {...toolTipOrPopoverProps} target={IconInner} />;
+  }
+  const El = isInline ? "span" : "div";
+  return (
+    <El
+      style={{
+        ...(clickable ? { cursor: "pointer" } : {}),
+        ...(isInline ? {} : { display: "flex" }),
+        ...style
+      }}
+      className={classnames(
+        "info-helper-wrapper",
+        {
+          "info-helper-wrapper-noMarginTop": noMarginTop,
+          "info-helper-clickable": isPopover
+        },
+        className
+      )}
+    >
+      {toReturn}
+    </El>
+  );
+};

package/src/InfoHelper/style.css

@@ -0,0 +1,7 @@
+.bp3-popover.tg-info-helper-popover .bp3-popover-content {
+  max-width: 340px;
+}
+
+.info-helper-clickable .bp3-popover-target {
+  cursor: pointer;
+}

package/src/IntentText/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+const intentToClass = {
+  danger: Classes.INTENT_DANGER,
+  warning: Classes.INTENT_WARNING,
+  success: Classes.INTENT_SUCCESS,
+  primary: Classes.INTENT_PRIMARY
+};
+
+export default function IntentText({ intent, text, children }) {
+  return (
+    <div className={classNames(Classes.FORM_GROUP, intentToClass[intent])}>
+      <div className={Classes.FORM_HELPER_TEXT}>{text || children}</div>
+    </div>
+  );
+}

package/src/Loading/index.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react";
+import DNALoader from "../DNALoader";
+import "./style.css";
+import { BounceLoader } from "../BounceLoader";
+
+const Loading = ({
+  loading,
+  style: userStyle,
+  className,
+  containerStyle = {},
+  children,
+  displayInstantly = false,
+  bounce = false,
+  withTimeout,
+  inDialog,
+  centeredInPage
+}) => {
+  const [longerThan200MS, setLongerThan200MS] = useState(false);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setLongerThan200MS(true);
+    }, 200);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  const style = {
+    ...userStyle,
+    ...(inDialog && { minHeight: 120 })
+  };
+
+  const LoaderComp = bounce || inDialog ? BounceLoader : DNALoader;
+
+  if (loading || !children) {
+    if (
+      !displayInstantly &&
+      !longerThan200MS &&
+      ((!bounce && !inDialog) || withTimeout)
+    ) {
+      return <div />;
+    }
+    return (
+      <div
+        className="tg-loader-container tg-flex justify-center align-center"
+        style={{
+          width: "100%",
+          ...containerStyle,
+          ...(centeredInPage && {
+            width: undefined,
+            zIndex: 20,
+            height: 10,
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, 0)"
+          })
+        }}
+      >
+        <LoaderComp style={style} className={className} />
+      </div>
+    );
+  } else {
+    return children || null;
+  }
+};
+
+export default Loading;

package/src/Loading/style.css

@@ -0,0 +1,4 @@
+.tg-loader-container {
+  height: 100%;
+  align-self: center;
+}