@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/table/components/TableRow.js

@@ -0,0 +1,85 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { memo as g } from "react";
+import n from "@emotion/styled";
+import { TABLE_ATTRIBUTES as t } from "../constants.js";
+import { TableCell as a } from "./TableCell.js";
+const L = g(
+  ({ row: r, meta: d, columns: e, selected: h, start: s }) => {
+    const c = !!h?.includes(r.id);
+    return /* @__PURE__ */ m(
+      b,
+      {
+        [t.ROW]: r.id,
+        [t.ROW_SELECTED]: c,
+        [t.ROW_CHILD]: !d[r.id]?.main,
+        style: {
+          "--start": s + "px"
+        },
+        children: [
+          e.left.length > 0 && /* @__PURE__ */ o(l, { [t.PANEL_SIDE]: "left", children: e.left.map((i) => /* @__PURE__ */ o(a, { row: r, column: i }, i.field)) }),
+          /* @__PURE__ */ o(f, { children: e.base.map((i) => /* @__PURE__ */ o(a, { row: r, column: i }, i.field)) }),
+          e.right.length > 0 && /* @__PURE__ */ o(l, { [t.PANEL_SIDE]: "right", children: e.right.map((i) => /* @__PURE__ */ o(a, { row: r, column: i }, i.field)) })
+        ]
+      }
+    );
+  }
+), f = n.div`
+  display: flex;
+  flex: 1;
+  min-width: var(--base-cols-width);
+`, l = n.div`
+  top: 0;
+  min-width: 0;
+  flex-shrink: 0;
+  width: min-content;
+  z-index: 1;
+  height: 100%;
+  display: flex;
+  position: sticky;
+  background-color: var(--mantine-color-body);
+  transition: background-color 0.2s ease;
+
+  &[${t.PANEL_SIDE}='left'] {
+    left: 0;
+
+    [${t.CELL}]:last-of-type {
+      box-shadow: 2px 0 0 0
+        light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    }
+  }
+
+  &[${t.PANEL_SIDE}='right'] {
+    right: 0;
+
+    [${t.CELL}]:first-of-type {
+      box-shadow: -2px 0 0 0
+        light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    }
+  }
+`, b = n.div`
+  display: flex;
+  width: max-content;
+  min-width: 100%;
+  height: var(--row-height);
+  transition: background-color 0.2s ease;
+
+  &[${t.ROW_SELECTED}='true'] {
+    background-color: light-dark(
+      var(--mantine-color-blue-0),
+      var(--mantine-color-dark-8)
+    );
+
+    ${l} {
+      background-color: light-dark(
+        var(--mantine-color-blue-0),
+        var(--mantine-color-dark-8)
+      );
+    }
+  }
+
+  border-bottom: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+`;
+export {
+  L as TableRow
+};

package/dist/components/table/components/TableRows.js

@@ -0,0 +1,66 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as h, useCallback as a } from "react";
+import g from "@emotion/styled";
+import { useVirtualizer as u } from "@tanstack/react-virtual";
+import { TABLE_ATTRIBUTES as c } from "../constants.js";
+import { useTableStore as R } from "../hooks/useTableStore.js";
+import { TableRow as d } from "./TableRow.js";
+const k = h(
+  ({ rows: e, meta: n, columns: s, selected: m, virtual: r }) => {
+    const { useStore: l } = R(), p = l((t) => t.scrollRef), o = l((t) => t.props.rowHeight), f = u({
+      count: e.length,
+      enabled: r,
+      getScrollElement: a(() => p, [p]),
+      estimateSize: a(() => o, [o]),
+      getItemKey: a((t) => e[t].id, [e])
+    });
+    return /* @__PURE__ */ i(
+      b,
+      {
+        "data-virtual": r,
+        style: {
+          height: r ? `${f.getTotalSize()}px` : void 0
+        },
+        children: r ? f.getVirtualItems().map((t) => /* @__PURE__ */ i(
+          d,
+          {
+            meta: n,
+            start: t.start,
+            row: e[t.index],
+            columns: s,
+            selected: m
+          },
+          t.key
+        )) : e.map((t, T) => /* @__PURE__ */ i(
+          d,
+          {
+            meta: n,
+            start: T * o,
+            row: t,
+            columns: s,
+            selected: m
+          },
+          t.id
+        ))
+      }
+    );
+  }
+), b = g.div`
+  width: max-content;
+  min-width: 100%;
+  position: relative;
+  flex-shrink: 0;
+  transform: translateY(var(--start));
+
+  &[${c.VIRTUAL_CONTAINER}='true'] {
+    [${c.ROW}] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: translateY(var(--start));
+    }
+  }
+`;
+export {
+  k as TableRows
+};

package/dist/components/table/components/TableSearch.js

@@ -0,0 +1,32 @@
+import { jsx as c } from "react/jsx-runtime";
+import { memo as u, useState as h, useEffect as p, useCallback as f } from "react";
+import { TextInput as i } from "@mantine/core";
+import { useDebouncedCallback as S } from "@mantine/hooks";
+import { IconSearch as b } from "@tabler/icons-react";
+import { useTableStore as T } from "../hooks/useTableStore.js";
+const I = u(() => {
+  const { api: s, useStore: n } = T(), t = n((e) => e.search), [m, r] = h(""), o = S((e) => s.setSearch(e), 800);
+  p(() => {
+    r(t);
+  }, [t]);
+  const l = f(
+    (e) => {
+      const a = e.currentTarget.value;
+      r(a), o(a);
+    },
+    [o]
+  );
+  return /* @__PURE__ */ c(
+    i,
+    {
+      leftSection: /* @__PURE__ */ c(b, { size: "1em" }),
+      value: m,
+      onChange: l,
+      placeholder: "Type to search...",
+      variant: "default"
+    }
+  );
+});
+export {
+  I as TableSearch
+};

package/dist/components/table/components/TableSkeleton.js

@@ -0,0 +1,60 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as w, useMemo as h } from "react";
+import g from "@emotion/styled";
+import { Skeleton as d } from "@mantine/core";
+import { SELECT_COLUMN_FIELD as m, EXPAND_COLUMN_FIELD as l } from "../constants.js";
+import { useTableStore as S } from "../hooks/useTableStore.js";
+import { TableRow as _ } from "./TableRow.js";
+const y = [], c = w(({ count: o, columns: r }) => {
+  const { useStore: a } = S(), n = a((e) => e.props.rowHeight), f = h(() => ({
+    left: r.left.map((e) => ({
+      ...e,
+      cellStyle: e.field === m || e.field === l ? { padding: 12, width: "100%" } : { width: "100%" },
+      render: () => /* @__PURE__ */ i(d, { h: 16, w: "100%", flex: 1 })
+    })),
+    base: r.base.map((e) => ({
+      ...e,
+      cellStyle: e.field === m || e.field === l ? { padding: 12, width: "100%" } : { width: "100%" },
+      render: () => /* @__PURE__ */ i(d, { h: 16, w: "100%", flex: 1 })
+    })),
+    right: r.right.map((e) => ({
+      ...e,
+      cellStyle: e.field === m || e.field === l ? { padding: 12, width: "100%" } : { width: "100%" },
+      render: () => /* @__PURE__ */ i(d, { h: 16 })
+    }))
+  }), [r.base, r.left, r.right]), p = h(() => {
+    const e = {};
+    return Array.from({ length: o }, (t, s) => s).forEach((t) => {
+      e[t] = {
+        main: !0
+      };
+    }), e;
+  }, [o]);
+  return /* @__PURE__ */ i(
+    E,
+    {
+      style: {
+        height: `${o * n}px`
+      },
+      children: Array.from({ length: o }, (e, t) => t).map((e, t) => /* @__PURE__ */ i(
+        _,
+        {
+          start: t * n,
+          row: { id: t.toString() },
+          columns: f,
+          meta: p,
+          selected: y
+        },
+        t.toString()
+      ))
+    }
+  );
+}), E = g.div`
+  width: max-content;
+  min-width: 100%;
+  position: relative;
+  flex-shrink: 0;
+`;
+export {
+  c as TableSkeleton
+};

package/dist/components/table/components/TableTitle.js

@@ -0,0 +1,26 @@
+import e from "@emotion/styled";
+const t = e.div``, i = e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  text-transform: none;
+`, n = e.div`
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+`, d = e.div`
+  text-transform: none;
+`;
+export {
+  d as TableDesc,
+  i as TableHeader,
+  n as TableRoot,
+  t as TableTitle
+};

package/dist/components/table/constants.js

@@ -0,0 +1,28 @@
+const a = {
+  ROW: "data-row",
+  CELL: "data-cell",
+  ROOT: "data-root",
+  COLUMN_ALIGN: "data-al",
+  SCROLLED: "data-scrolled",
+  SORTABLE: "data-sortable",
+  RESIZER: "data-resizer",
+  RESIZER_SIDE: "data-side",
+  ROW_SELECTED: "data-sel",
+  ROW_CHILD: "data-child",
+  SORTED: "data-sorted",
+  HEADER_CELL: "data-header",
+  INNER: "data-inner",
+  AUTOSIZE: "data-autosize",
+  PANEL_SIDE: "data-side",
+  HEADER_GRID: "data-header-grid",
+  VIRTUAL_CONTAINER: "data-virtual",
+  BASE: "data-base",
+  HEADERS: "data-headers",
+  HEADER_GROUP: "data-header-group"
+}, E = "__checkbox__", d = "__expand__", t = "__aggregation__";
+export {
+  d as EXPAND_COLUMN_FIELD,
+  E as SELECT_COLUMN_FIELD,
+  t as TABLE_AGGREGATION_ROW_ID,
+  a as TABLE_ATTRIBUTES
+};

package/dist/components/table/export.js

@@ -0,0 +1,58 @@
+import { format as f } from "date-fns";
+import l from "exceljs";
+import { isArray as u, get as b } from "lodash-es";
+const i = async ({
+  rows: a,
+  columns: e,
+  fileName: o
+}) => {
+  const t = new l.Workbook(), r = t.addWorksheet(o), n = p(e);
+  return r.columns = p(e).map((s) => ({
+    key: s.field,
+    header: s.header
+  })), a.map((s) => w(s, n)).forEach((s) => r.addRow(s)), t;
+}, x = async ({
+  rows: a,
+  columns: e,
+  fileName: o
+}) => {
+  const r = await (await i({ rows: a, columns: e, fileName: o })).xlsx.writeBuffer(), n = new Blob([r], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+  });
+  c(n, o);
+}, y = async ({
+  rows: a,
+  columns: e,
+  fileName: o
+}) => {
+  const r = await (await i({ rows: a, columns: e, fileName: o })).csv.writeBuffer(), n = new Blob([r], {
+    type: "text/csv;charset=utf-8;"
+  });
+  c(n, o);
+}, c = (a, e) => {
+  const o = URL.createObjectURL(a), t = document.createElement("a");
+  t.href = o, t.download = [e, f(/* @__PURE__ */ new Date(), "yyyy-MM-dd")].join("_"), t.click(), URL.revokeObjectURL(o);
+}, p = (a) => a.filter((e) => e.exportable).flatMap((e) => {
+  const { exportSettings: o } = e;
+  return o ? (u(o) ? o : [o]).map((r, n) => ({
+    header: r.header ?? (typeof e.header == "string" ? e.header : ""),
+    field: [e.field, n].join("_"),
+    value: r.value,
+    baseField: e.field
+  })) : [{
+    header: typeof e.header == "string" ? e.header : "",
+    field: e.field,
+    value: (n, d) => d,
+    baseField: e.field
+  }];
+}), w = (a, e) => e.reduce(
+  (o, t) => {
+    const r = b(a, t.baseField), n = t?.value ? t.value(a, r) : r;
+    return o[t.field] = n, o;
+  },
+  {}
+);
+export {
+  y as exportToCSV,
+  x as exportToExcel
+};

package/dist/components/table/helpers/columns.js

@@ -0,0 +1,198 @@
+import { jsx as o, Fragment as z } from "react/jsx-runtime";
+import E from "@emotion/styled";
+import { ActionIcon as N, Checkbox as v } from "@mantine/core";
+import { IconChevronDown as W, IconChevronRight as A } from "@tabler/icons-react";
+import { isValid as h, format as p } from "date-fns";
+import { round as a, assignWith as D, get as c, isNil as R } from "lodash-es";
+import { EXPAND_COLUMN_FIELD as g, SELECT_COLUMN_FIELD as m } from "../constants.js";
+import { useTableStore as I } from "../hooks/useTableStore.js";
+import { selectionReselect as T } from "../selectors.js";
+import { Numbers as s } from "./formatters.js";
+const C = (e) => ({
+  render: (t, r) => {
+    const n = new Date(r);
+    return h(n) ? p(n, e?.format ?? "MMM dd, yyyy") : null;
+  },
+  exportSettings: {
+    value: (t, r) => {
+      const n = new Date(r);
+      return h(n) ? p(n, e?.format ?? "yyyy-MM-dd") : null;
+    }
+  }
+}), S = (e = { decimal: !0 }) => ({
+  align: "right",
+  render: (t, r) => s.format(r, e),
+  exportSettings: {
+    value: (t, r) => a(s.parse(r), e.decimal ? 2 : 0).toString()
+  }
+}), x = (e = { decimal: !0 }) => ({
+  align: "right",
+  render: (t, r) => r ? "x" + s.format(r, e) : "",
+  exportSettings: {
+    value: (t, r) => a(s.parse(r), 2).toString()
+  }
+}), b = (e = { decimal: !0 }) => ({
+  align: "right",
+  render: (t, r) => s.formatPercents(r, e),
+  exportSettings: {
+    value: (t, r) => a(s.parse(r), e.decimal ? 2 : 0).toString()
+  }
+}), y = (e) => ({
+  align: "right",
+  render: (t, r) => s.formatCurrency(r, e),
+  exportSettings: {
+    value: (t, r) => a(s.parse(r), 2).toString()
+  }
+}), _ = (e) => {
+  let t = 2166136261;
+  for (let r = 0; r < e.length; r++)
+    t ^= e.charCodeAt(r), t += (t << 1) + (t << 4) + (t << 7) + (t << 8) + (t << 24);
+  return ("0000000" + (t >>> 0).toString(16)).slice(-8);
+}, w = (e) => {
+  let t = {};
+  return typeof e == "object" ? e.type === "number" ? t = S(e) : e.type === "currency" ? t = y(e) : e.type === "percent" ? t = b(e) : e.type === "ratio" ? t = x(e) : e.type === "date" && (t = C(e)) : e === "number" ? t = S() : e === "currency" ? t = y() : e === "percent" ? t = b() : e === "ratio" ? t = x() : e === "date" && (t = C()), t;
+}, G = (e) => e === g || e === m;
+function J(e, t) {
+  return e.filter((r) => r.pinned === t);
+}
+const L = {
+  resizable: !0,
+  exportable: !0,
+  sortable: !0,
+  management: {
+    show: !0
+  }
+}, K = (e, t) => ({
+  ...L,
+  ...w(t?.type ?? e.type),
+  ...D(
+    {},
+    e,
+    t,
+    (r, n) => n === void 0 ? r : n
+  ),
+  computedWidth: t?.computedWidth,
+  setWidth: t?.setWidth,
+  get finalWidth() {
+    return this.setWidth ?? this.computedWidth;
+  },
+  get id() {
+    return _(this.field);
+  }
+}), Q = (e) => ({
+  gridTemplateColumns: e.map((r) => `var(--col-${_(r.field)})`).join(" "),
+  "--col-count": e.length
+}), Y = ({
+  expanded: e,
+  api: t,
+  pinned: r
+}) => ({
+  id: g,
+  field: g,
+  width: 40,
+  headerStyle: {
+    padding: 0
+  },
+  cellStyle: {
+    padding: 0
+  },
+  pinned: r ? "left" : void 0,
+  align: "center",
+  exportable: !1,
+  sortable: !1,
+  resizable: !1,
+  header: null,
+  render: (i) => {
+    if (!Array.isArray(i.__children)) return /* @__PURE__ */ o(z, {});
+    const l = e?.includes(i.id);
+    return /* @__PURE__ */ o(
+      N,
+      {
+        onClick: () => t.toggleRowExpand(i.id),
+        size: "xs",
+        variant: "subtle",
+        children: l ? /* @__PURE__ */ o(W, { size: 16 }) : /* @__PURE__ */ o(A, { size: 16 })
+      }
+    );
+  }
+}), Z = ({
+  selected: e,
+  api: t,
+  pinned: r
+}) => ({
+  id: m,
+  field: m,
+  width: 40,
+  headerStyle: {
+    padding: 0
+  },
+  cellStyle: {
+    padding: 0
+  },
+  pinned: r ? "left" : void 0,
+  align: "center",
+  exportable: !1,
+  sortable: !1,
+  resizable: !1,
+  header: /* @__PURE__ */ o(P, {}),
+  render: (i) => {
+    const l = e.includes(i.id);
+    return /* @__PURE__ */ o(
+      v,
+      {
+        size: "xs",
+        checked: l,
+        onChange: () => {
+          l ? t.unselectRow(i.id) : t.selectRow(i.id);
+        }
+      }
+    );
+  }
+}), P = () => {
+  const { useStore: e, api: t } = I(), { allSelected: r, hasSelected: n } = e(T);
+  return /* @__PURE__ */ o(
+    v,
+    {
+      size: "xs",
+      checked: n,
+      indeterminate: n && !r,
+      onChange: () => {
+        n ? t.unselectVisibleRows() : t.selectVisibleRows();
+      }
+    }
+  );
+}, ee = (e, t, r) => e.map((n) => {
+  const { aggregation: i, field: l, type: M } = n;
+  return {
+    ...n,
+    render: () => {
+      if (!i) return null;
+      if (i.render)
+        return /* @__PURE__ */ o(u, { children: i.render?.(r) });
+      const d = c(t, l), f = w(M);
+      return f.render ? /* @__PURE__ */ o(u, { children: f.render(t, d) }) : typeof d == "object" ? null : /* @__PURE__ */ o(u, { children: d });
+    }
+  };
+}), te = (e, t) => {
+  const r = e.aggregation;
+  if (!r || r.render) return null;
+  const n = t.map((i) => c(i, e.field)).map(s.parse).filter((i) => !isNaN(i));
+  return r.type === "sum" ? n.reduce((i, l) => i + l, 0) : r.type === "avg" ? n.reduce((i, l) => i + l, 0) / n.length : r.type === "min" ? Math.min(...n) : r.type === "max" ? Math.max(...n) : r.type === "count" ? t.map((l) => c(l, e.field)).filter((l) => !R(l)).length : null;
+}, u = E.div``;
+export {
+  J as filterPinnedColumns,
+  te as getAggregateValue,
+  ee as getAggregationColumns,
+  _ as getColumnId,
+  w as getColumnsProps,
+  y as getCurrencyColumn,
+  C as getDateColumn,
+  Y as getExpandingColumn,
+  Q as getHeaderStyles,
+  S as getNumberColumn,
+  b as getPercentColumn,
+  x as getRatioColumn,
+  Z as getSelectionColumn,
+  G as isTechnicalColumn,
+  K as mergeColumn
+};

package/dist/components/table/helpers/formatters.js

@@ -0,0 +1,65 @@
+import { isNil as N } from "lodash-es";
+var u;
+((r) => {
+  r.parse = (t) => {
+    if (N(t))
+      return NaN;
+    if (typeof t == "number" && !isNaN(t))
+      return t;
+    const n = typeof t == "string" ? parseFloat(t) : NaN;
+    return isNaN(n) ? NaN : n;
+  }, r.isPositive = (t) => (0, r.isNumber)(t) && t > 0, r.isNegative = (t) => (0, r.isNumber)(t) && t < 0, r.getDynamic = (t, n) => {
+    const e = (0, r.parse)(t);
+    return (0, r.isNumber)(e) ? (0, r.isPositive)(e) ? n ? "negative" : "positive" : (0, r.isNegative)(e) ? n ? "positive" : "negative" : "neutral" : null;
+  }, r.isNumber = (t) => typeof t == "number" && !isNaN(t), r.format = (t, n = {}) => {
+    const {
+      locale: e = "en-US",
+      invalidValue: i = "n/a",
+      style: o,
+      currency: a,
+      decimal: c,
+      minimumFractionDigits: s,
+      maximumFractionDigits: p,
+      divide: l,
+      short: y,
+      ...g
+    } = n, m = (0, r.parse)(t);
+    if (isNaN(m)) return i;
+    const d = new Intl.NumberFormat(e, {
+      style: o,
+      ...o === "currency" ? { currency: a || "USD", currencyDisplay: "symbol" } : {},
+      minimumFractionDigits: s ?? (c ? 2 : 0),
+      maximumFractionDigits: p ?? (c ? 2 : 0),
+      notation: y ? "compact" : void 0,
+      compactDisplay: y ? "short" : void 0,
+      ...g
+    });
+    try {
+      return d.format(l ? m / 100 : m);
+    } catch {
+      return i;
+    }
+  }, r.formatCurrency = (t, n) => (0, r.format)(t, { style: "currency", ...n }), r.formatPercents = (t, n) => (0, r.format)(t, { style: "percent", ...n }), r.dynamicTypesList = ["positive", "negative", "neutral"];
+  const f = {
+    currency: r.formatCurrency,
+    number: r.format,
+    percent: r.formatPercents
+  };
+  r.round = (t, n = -2, e = "round") => {
+    if (t = Number(t), n % 1 !== 0 || Number.isNaN(t))
+      return NaN;
+    if (n === 0)
+      return Math[e](t);
+    const [i, o = 0] = t.toString().split("e"), a = Math[e](
+      +`${i}e${Number(o) - n}`
+    ), [c, s = 0] = a.toString().split("e");
+    return +`${c}e${+s + n}`;
+  }, r.formatByType = (t, n, e) => f[t](n, e), r.getCurrencySymbol = (t, n = "en-US") => new Intl.NumberFormat(n, {
+    style: "currency",
+    currency: t,
+    currencyDisplay: "symbol"
+  }).formatToParts(1).find((a) => a.type === "currency")?.value || "";
+})(u || (u = {}));
+export {
+  u as Numbers
+};

package/dist/components/table/hooks/TableProvider.js

@@ -0,0 +1,62 @@
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as S, useLayoutEffect as C } from "react";
+const b = S(
+  null
+), P = ({
+  children: h,
+  store: t,
+  rows: p,
+  columns: s,
+  loading: i,
+  pageSizeOptions: r,
+  rowHeight: e,
+  headerHeight: a,
+  rowCount: n,
+  exportFileName: g,
+  pagination: l,
+  virtualization: u,
+  searching: x,
+  selection: c,
+  sorting: d,
+  expanding: f
+}) => (C(() => {
+  t.useStore.setState((o) => ({
+    ...o,
+    props: {
+      headerHeight: a ?? o.props.headerHeight,
+      loading: i ?? o.props.loading,
+      pageSizeOptions: r ?? o.props.pageSizeOptions,
+      rowCount: n ?? o.props.rowCount,
+      rowHeight: e ?? o.props.rowHeight,
+      exportFileName: g ?? o.props.exportFileName,
+      pagination: l ?? o.props.pagination,
+      searching: x ?? o.props.searching,
+      selection: c ?? o.props.selection,
+      expanding: f ?? o.props.expanding,
+      virtualization: u ?? o.props.virtualization,
+      sorting: d ?? o.props.sorting,
+      columns: s,
+      rows: p
+    }
+  }));
+}, [
+  s,
+  f,
+  g,
+  a,
+  i,
+  r,
+  l,
+  n,
+  e,
+  p,
+  x,
+  c,
+  d,
+  u,
+  t.useStore
+]), /* @__PURE__ */ m(b.Provider, { value: t, children: h }));
+export {
+  b as TableContext,
+  P as TableProvider
+};