@teselagen/ui 0.7.33-beta.3 → 0.7.33-beta.5

package/src/style.css

@@ -1,13 +1,265 @@
-.tag-select-popover {
-  padding: 10px;
+:root {
+  --base1: #ffffff;
+  --base2: #cdcdcd;
 }
 
-.tag-select-popover-inner {
-  max-height: 150px;
+body.bp3-dark {
+  --base1: #393a3a;
+  --base2: #293742;
+}
+
+.bp3-dark .tg-card {
+  background: #394b59 !important;
+}
+
+.preserve-newline {
+  white-space: pre-line;
+}
+
+.bp3-dialog {
+  max-width: 100vw;
+}
+
+/* adding back in blueprint v2 default styling to all <h/> elements */
+h1 {
+  line-height: 40px;
+  font-size: 36px;
+}
+
+h2 {
+  line-height: 32px;
+  font-size: 28px;
+}
+
+h3 {
+  line-height: 25px;
+  font-size: 22px;
+}
+
+h4 {
+  line-height: 21px;
+  font-size: 18px;
+}
+
+h5 {
+  line-height: 19px;
+  font-size: 16px;
+}
+
+h6 {
+  line-height: 16px;
+  font-size: 14px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+h1.bp3-heading,
+h2.bp3-heading,
+h3.bp3-heading,
+h4.bp3-heading,
+h5.bp3-heading,
+h6.bp3-heading {
+  color: #182026;
+  font-weight: 300;
+  margin: 0 0 10px;
+  padding: 0;
+  line-height: normal;
+}
+
+.bp3-dark h1,
+.bp3-dark h2,
+.bp3-dark h3,
+.bp3-dark h4,
+.bp3-dark h5,
+.bp3-dark h6 {
+  color: #f5f8fa;
+}
+.bp3-dark textarea {
+  background: #293742;
+  color: #f5f8fa;
+}
+
+/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
+.bp3-popover-wrapper {
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+}
+/* this line is necessary otherwise the line above setting "position: relative;" caused nested long bp3 submenus to not appear correctly when using the fix below */
+.bp3-submenu .bp3-popover-wrapper {
+  position: unset;
+}
+/* this fixes https://github.com/palantir/blueprint/issues/4791 but requires the "position: unset;" fix above */
+.bp3-submenu > * > .bp3-menu {
+  max-height: 96vh;
   overflow: auto;
-  display: grid;
-  padding-top: 10px;
-  grid-column-gap: 5px;
-  row-gap: 8px;
-  grid-template-columns: max-content max-content;
+}
+
+/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
+span.bp3-popover-target {
+  display: block;
+}
+
+.bp3-portal {
+  z-index: 100000;
+}
+.bp3-switch {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+}
+
+.Select {
+  min-width: 170px;
+}
+
+/* override the default blueprint input focus to instead rely on an inset box shadow. This resolves any issues with overflow:hidden cutting off input box shadows */
+.bp3-dark .bp3-input:focus,
+.bp3-input:focus {
+  box-shadow: inset 0 0 3px 1px #137cbd;
+}
+
+.notClickable {
+  cursor: default !important;
+}
+.bp3-toast-container {
+  z-index: 100001;
+}
+
+.link-button {
+  background: none !important;
+  border: none;
+  padding: 0 !important;
+  font-family: arial, sans-serif;
+  color: rgb(0, 151, 227);
+  /* text-decoration: underline; */
+  cursor: pointer;
+}
+.link-button:hover {
+  color: rgb(98, 198, 248);
+  text-decoration: underline;
+}
+
+.above-dialog {
+  z-index: 100001;
+}
+
+code {
+  display: block;
+  white-space: pre-wrap;
+}
+
+.bp3-toast.no-close-button [aria-label="Close"] {
+  display: none;
+}
+
+.isDataTitle .tippy-box[data-theme~="teselagen"] .tippy-arrow {
+  opacity: 0 !important;
+}
+.isDataTitle .tippy-box[data-theme~="teselagen"] {
+  background-color: #4f4a50f4 !important;
+  border-radius: 0 !important;
+  color: #f3f3f3 !important;
+  font-size: 11px !important;
+  white-space: pre-wrap;
+  padding: 0px 0px !important;
+}
+
+[data-tippy-root]:has(.tippy-box[data-theme~="teselagen"]) {
+  z-index: 100000 !important;
+}
+
+[data-tippy-root] .tippy-box[data-theme~="teselagen"] {
+  background-color: #394b59;
+  color: #f5f8fa;
+  padding: 4px 4px;
+  word-break: break-word;
+}
+[data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
+  color: #394b59;
+}
+.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] {
+  background-color: #e1e8ed;
+  color: #394b59;
+}
+.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
+  /* background-color: #e1e8ed; */
+  color: #e1e8ed;
+}
+.isCellEditable .rt-td {
+  position: relative;
+}
+
+.ReactTable .tg-cell-edit-boolean-checkbox {
+  margin-bottom: 0;
+}
+
+.cellDragHandle {
+  height: 8px;
+  width: 8px;
+  cursor: crosshair;
+  border: 1px solid rgb(255, 255, 255);
+  background-color: rgb(76, 107, 171);
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+}
+
+/* make AnchorButton match Button */
+.bp3-button {
+  font-family: Arial;
+}
+
+button {
+  transition: all 0.2s ease-in-out;
+}
+
+button:not(:disabled):active {
+  transform: translateY(1px);
+}
+.bp3-tabs.bp3-vertical > .bp3-tab-panel {
+  min-width: 0px;
+}
+.bp3-toast[class*="bp3-intent-"] .bp3-button.tg-clear-all-toasts {
+  border: 1px solid white !important;
+}
+.bp3-toast[class*="bp3-intent-"] .bp3-button.tg-clear-all-toasts:hover {
+  /* background: blue !important; */
+  /* background: unset !important; */
+  background-color: #137cbd !important;
+}
+
+/* .bp3-toast .tg-clear-all-toasts {
+  background: unset !important;
+  color: unset !important;
+  padding: unset !important;
+  margin: unset !important;
+  font-size: unset !important;
+  line-height: unset !important;
+  border: unset !important;
+  box-shadow: unset !important;
+  text-align: unset !important;
+  cursor: pointer !important;
+} */
+
+.bp3-dialog-header .bp3-heading {
+  width: 10px; /* tnw: this is a hack to prevent the dialog title from causing the dialog width to expand larger than the dialog content*/
+}
+
+/* to fix tooltip styling issue - https://github.com/palantir/blueprint/issues/3430 */
+.bp3-popover[style*="transform-origin"][style*="bottom"] .bp3-popover-arrow {
+  transform: translate(0, -0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="left"] .bp3-popover-arrow {
+  transform: translate(0.5px, 0);
+}
+.bp3-popover[style*="transform-origin"][style*="top"] .bp3-popover-arrow {
+  transform: translate(0, 0.5px);
+}
+.bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow {
+  transform: translate(-0.5px, 0);
 }

package/src/utils/hooks/index.js

@@ -0,0 +1 @@
+export { useDeepEqualMemo } from "./useDeepEqualMemo";

package/DataTable/utils/simplifyHasuraWhere.d.ts

@@ -1 +0,0 @@
-export function simplifyHasuraWhere(whereClause: any): {};

package/src/simplifyHasuraWhere.js

@@ -1,80 +0,0 @@
-export function simplifyHasuraWhere(whereClause) {
-  const simplifiedWhere = {};
-
-  for (const key in whereClause) {
-    // eslint-disable-next-line no-prototype-builtins
-    if (whereClause.hasOwnProperty(key)) {
-      const value = whereClause[key];
-
-      if (
-        typeof value === "object" &&
-        value !== null &&
-        !Array.isArray(value)
-      ) {
-        if (key.includes(".")) {
-          // Handle dot-nested where clauses
-          const keys = key.split(".");
-          let currentObj = simplifiedWhere;
-          for (let i = 0; i < keys.length - 1; i++) {
-            const nestedKey = keys[i];
-            if (!currentObj[nestedKey]) {
-              currentObj[nestedKey] = {};
-            }
-            currentObj = currentObj[nestedKey];
-          }
-          if (typeof value === "object" && value !== null && "_eq" in value) {
-            currentObj[keys[keys.length - 1]] = value;
-          } else {
-            currentObj[keys[keys.length - 1]] = { _eq: value };
-          }
-        } else {
-          // Handle regular Hasura operators or already nested objects.
-          if (
-            typeof value === "object" &&
-            value !== null &&
-            !("_eq" in value) &&
-            !("_gt" in value) &&
-            !("_lt" in value) &&
-            !("_gte" in value) &&
-            !("_lte" in value) &&
-            !("_in" in value) &&
-            !("_nin" in value) &&
-            !("_neq" in value) &&
-            !("_like" in value) &&
-            !("_nlike" in value) &&
-            !("_ilike" in value) &&
-            !("_nilike" in value) &&
-            !("_similar" in value) &&
-            !("_nsimilar" in value) &&
-            !("_regex" in value) &&
-            !("_nregex" in value) &&
-            !("_iregex" in value) &&
-            !("_niregex" in value)
-          ) {
-            simplifiedWhere[key] = simplifyHasuraWhere(value);
-          } else {
-            simplifiedWhere[key] = value;
-          }
-        }
-      } else {
-        // Handle simplified _eq where clauses
-        if (key.includes(".")) {
-          const keys = key.split(".");
-          let currentObj = simplifiedWhere;
-          for (let i = 0; i < keys.length - 1; i++) {
-            const nestedKey = keys[i];
-            if (!currentObj[nestedKey]) {
-              currentObj[nestedKey] = {};
-            }
-            currentObj = currentObj[nestedKey];
-          }
-          currentObj[keys[keys.length - 1]] = { _eq: value };
-        } else {
-          simplifiedWhere[key] = { _eq: value };
-        }
-      }
-    }
-  }
-
-  return simplifiedWhere;
-}

package/src/tableQueryParamsToHasuraClauses.js

@@ -1,113 +0,0 @@
-export function tableQueryParamsToHasuraClauses({
-  page,
-  pageSize,
-  searchTerm,
-  filters,
-  order,
-  schema, // Add schema as a parameter
-  additionalFilter
-}) {
-  let where = {};
-  const order_by = {};
-  const limit = pageSize || 25;
-  const offset = page && pageSize ? (page - 1) * pageSize : 0;
-
-  if (searchTerm) {
-    const searchTermFilters = [];
-    schema.fields.forEach(field => {
-      const { type, path, searchDisabled } = field;
-      if (searchDisabled || field.filterDisabled || type === "color") return;
-      const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
-
-      if (type === "string" || type === "lookup") {
-        searchTermFilters.push({
-          [path]: { _ilike: `%${filterValue}%` }
-        });
-      } else if (type === "boolean") {
-        let regex;
-        try {
-          regex = new RegExp("^" + searchTerm, "ig");
-        } catch (error) {
-          //ignore
-        }
-        if (regex) {
-          if ("true".replace(regex, "") !== "true") {
-            searchTermFilters.push({
-              [path]: { _eq: true }
-            });
-          } else if ("false".replace(regex, "") !== "false") {
-            searchTermFilters.push({
-              [path]: { _eq: false }
-            });
-          }
-        }
-      } else if (
-        (type === "number" || type === "integer") &&
-        !isNaN(filterValue)
-      ) {
-        searchTermFilters.push({
-          [path]: { _eq: parseFloat(filterValue) }
-        });
-      }
-    });
-    if (searchTermFilters.length > 0) {
-      if (Object.keys(where).length > 0) {
-        where = { _and: [where, { _or: searchTermFilters }] };
-      } else {
-        where = { _or: searchTermFilters };
-      }
-    }
-  }
-
-  if (filters && filters.length > 0) {
-    const filterClauses = filters.map(filter => {
-      const { selectedFilter, filterOn, filterValue } = filter;
-      switch (selectedFilter) {
-        case "textContains":
-          return { [filterOn]: { _ilike: `%${filterValue}%` } };
-        case "textEquals":
-          return { [filterOn]: { _eq: filterValue } };
-        case "textNotEquals":
-          return { [filterOn]: { _neq: filterValue } };
-        case "numberEquals":
-          return { [filterOn]: { _eq: parseFloat(filterValue) } };
-        case "numberGreaterThan":
-          return { [filterOn]: { _gt: parseFloat(filterValue) } };
-        case "numberLessThan":
-          return { [filterOn]: { _lt: parseFloat(filterValue) } };
-        case "numberGreaterThanEquals":
-          return { [filterOn]: { _gte: parseFloat(filterValue) } };
-        case "numberLessThanEquals":
-          return { [filterOn]: { _lte: parseFloat(filterValue) } };
-        case "isNull":
-          return { [filterOn]: { _is_null: true } };
-        case "isNotNull":
-          return { [filterOn]: { _is_null: false } };
-        default:
-          console.warn(`Unsupported filter type: ${selectedFilter}`);
-          return {};
-      }
-    });
-
-    if (filterClauses.length > 0) {
-      if (Object.keys(where).length > 0) {
-        where = { _and: [where, ...filterClauses] };
-      } else {
-        where = { _and: filterClauses };
-      }
-    }
-  }
-
-  if (order && order.length > 0) {
-    order.forEach(item => {
-      const field = item.startsWith("-") ? item.substring(1) : item;
-      const direction = item.startsWith("-") ? "desc" : "asc";
-      order_by[field] = direction;
-    });
-  }
-
-  if (additionalFilter) {
-    where = { _and: [where, additionalFilter] };
-  }
-  return { where, order_by, limit, offset };
-}