@teselagen/ui 0.7.31 → 0.7.33-beta.1

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/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;

package/src/HotkeysDialog/index.js

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

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

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

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

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

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

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