@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/table/components/Table.js

@@ -0,0 +1,139 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { memo as T, useRef as d, useEffect as z } from "react";
+import { useTranslation as C } from "react-i18next";
+import { keyframes as N } from "@emotion/react";
+import n from "@emotion/styled";
+import { NoData as l } from "../../NoData/NoData.js";
+import { TABLE_ATTRIBUTES as o } from "../constants.js";
+import { useColumnsResizing as k } from "../hooks/useColumnsResizing.js";
+import { useSorting as D } from "../hooks/useSorting.js";
+import { useTableStore as $ } from "../hooks/useTableStore.js";
+import { variableReselect as A, visibleRowsReselect as I, visibleColumnsReselect as O, metaReselect as L } from "../selectors.js";
+import { TableHeaders as j } from "./TableHeaders.js";
+import { TablePanel as B } from "./TablePanel.js";
+const ot = T(() => {
+  const { useStore: i, api: e } = $(), { t: f } = C(), r = i((s) => s.props.loading), h = i(A), { rows: m } = i(I), g = i(O), { zeroColumns: R, zeroRows: x, hasSearch: b } = i(L), c = d(!1), v = D(c), { onDragStart: w, onPointerDown: y } = k(c), p = d(!0), E = JSON.stringify(g.map((s) => s.field));
+  z(() => {
+    e.calculateColumnWidths(p.current), p.current = r;
+  }, [e, m, E, r]);
+  const S = {
+    ...h
+  };
+  return /* @__PURE__ */ u(
+    W,
+    {
+      style: S,
+      ref: e.setRootRef,
+      [o.ROOT]: "",
+      children: [
+        r && m.length ? /* @__PURE__ */ t(P, {}) : null,
+        /* @__PURE__ */ u(
+          U,
+          {
+            ref: e.setScrollRef,
+            onClick: v,
+            onDragStart: w,
+            onPointerDown: y,
+            [o.INNER]: "",
+            children: [
+              /* @__PURE__ */ t(j, {}),
+              /* @__PURE__ */ t(B, {}),
+              R ? /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
+                l,
+                {
+                  size: 100,
+                  title: f("noColumns"),
+                  illustration: "emptyFolder"
+                }
+              ) }) : x ? b ? /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
+                l,
+                {
+                  size: 100,
+                  title: "No results found",
+                  illustration: "noResults"
+                }
+              ) }) : /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(l, { size: 100, title: "No data", illustration: "noData" }) }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}), a = n.div`
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  z-index: 1;
+  left: 0;
+  min-height: 150px;
+  flex: 1;
+`, H = N`
+  0%   { background-position: -150% 0, -150% 0 }
+  66%  { background-position: 250% 0, -150% 0 }
+  100% { background-position: 250% 0,  250% 0 }
+`, P = n.div`
+  height: 4px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: var(--loader-offset);
+  z-index: 1;
+
+  background-size: 60% 100%;
+  animation: ${H} 4s infinite;
+`, U = n.div`
+  display: flex;
+  flex-direction: column;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  position: relative;
+  min-height: 0;
+  flex: 1;
+`, W = n.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+
+  &[${o.AUTOSIZE}] {
+    [${o.CELL}] {
+      width: auto !important;
+    }
+
+    [${o.HEADER_GRID}] {
+      grid-template-columns: repeat(var(--col-count), auto) !important;
+      min-width: auto !important;
+    }
+
+    [${o.INNER}] {
+      --base-cols-width: 0px !important;
+    }
+
+    [data-virtual] {
+      height: auto !important;
+    }
+
+    [${o.ROW}] {
+      position: static !important;
+      transform: none !important;
+    }
+
+    [${o.HEADERS}] {
+      width: auto !important;
+      min-width: auto !important;
+    }
+
+    [${o.BASE}] {
+      flex: unset !important;
+      width: auto !important;
+      min-width: auto !important;
+    }
+  }
+`;
+export {
+  ot as Table
+};

package/dist/components/table/components/TableAggregation.js

@@ -0,0 +1,31 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import c from "@emotion/styled";
+import { useTableStore as g } from "../hooks/useTableStore.js";
+import { aggregationReselect as l } from "../selectors.js";
+import { TableRow as f } from "./TableRow.js";
+const p = [], u = {}, x = () => {
+  const n = g(), { left: t, base: o, right: e, hasAggregation: i, aggregatedRow: s } = n.useStore(l), m = a(() => ({
+    left: t,
+    base: o,
+    right: e
+  }), [o, t, e]);
+  return i ? /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(
+    f,
+    {
+      start: 0,
+      row: s,
+      selected: p,
+      meta: u,
+      columns: m
+    }
+  ) }) : null;
+}, d = c.div`
+  min-width: 100%;
+  width: max-content;
+  position: sticky;
+  bottom: 0;
+`;
+export {
+  x as TableAggregation
+};

package/dist/components/table/components/TableCell.js

@@ -0,0 +1,55 @@
+import { jsx as l } from "react/jsx-runtime";
+import { memo as f, useMemo as s } from "react";
+import o from "@emotion/styled";
+import { get as a } from "lodash-es";
+import { TABLE_ATTRIBUTES as t } from "../constants.js";
+import { getColumnId as n } from "../helpers/columns.js";
+const C = f(({ column: e, row: r }) => {
+  const d = s(() => {
+    const i = a(r, e.field);
+    return e.render ? e.render?.(r, i) : typeof i == "object" ? null : i;
+  }, [e, r]);
+  return /* @__PURE__ */ l(
+    p,
+    {
+      [t.COLUMN_ALIGN]: e.align,
+      [t.CELL]: n(e.field),
+      style: {
+        ...e.fullCellStyle,
+        width: `var(--col-${n(e.field)})`
+      },
+      children: /* @__PURE__ */ l(h, { style: e.cellStyle, children: d })
+    }
+  );
+}), p = o.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+
+  border-right: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+
+  &[${t.COLUMN_ALIGN}='left'] {
+    justify-content: flex-start;
+  }
+  &[${t.COLUMN_ALIGN}='right'] {
+    justify-content: flex-end;
+  }
+  &[${t.COLUMN_ALIGN}='center'] {
+    justify-content: center;
+  }
+`, h = o.div`
+  /* height: 100%; */
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* width: 100%; */
+`;
+export {
+  p as CellRoot,
+  C as TableCell
+};

package/dist/components/table/components/TableHeaderCell.js

@@ -0,0 +1,159 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { useRef as g, useMemo as a } from "react";
+import i from "@emotion/styled";
+import { ActionIcon as C } from "@mantine/core";
+import { IconSortDescending as x, IconSortAscending as v } from "@tabler/icons-react";
+import { TABLE_ATTRIBUTES as r } from "../constants.js";
+import { getColumnId as d } from "../helpers/columns.js";
+const z = ({
+  column: e,
+  sort: n,
+  style: h
+}) => {
+  const c = g(null), l = a(() => e.resizable ? /* @__PURE__ */ t(
+    R,
+    {
+      [r.RESIZER_SIDE]: e.pinned,
+      [r.RESIZER]: d(e.field),
+      children: /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(
+        "svg",
+        {
+          width: "15",
+          height: "15",
+          viewBox: "0 0 15 15",
+          fill: "none",
+          className: "resizeBtn",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ t(
+            "path",
+            {
+              d: "M5.5 4.625C6.12132 4.625 6.625 4.12132 6.625 3.5C6.625 2.87868 6.12132 2.375 5.5 2.375C4.87868 2.375 4.375 2.87868 4.375 3.5C4.375 4.12132 4.87868 4.625 5.5 4.625ZM9.5 4.625C10.1213 4.625 10.625 4.12132 10.625 3.5C10.625 2.87868 10.1213 2.375 9.5 2.375C8.87868 2.375 8.375 2.87868 8.375 3.5C8.375 4.12132 8.87868 4.625 9.5 4.625ZM10.625 7.5C10.625 8.12132 10.1213 8.625 9.5 8.625C8.87868 8.625 8.375 8.12132 8.375 7.5C8.375 6.87868 8.87868 6.375 9.5 6.375C10.1213 6.375 10.625 6.87868 10.625 7.5ZM5.5 8.625C6.12132 8.625 6.625 8.12132 6.625 7.5C6.625 6.87868 6.12132 6.375 5.5 6.375C4.87868 6.375 4.375 6.87868 4.375 7.5C4.375 8.12132 4.87868 8.625 5.5 8.625ZM10.625 11.5C10.625 12.1213 10.1213 12.625 9.5 12.625C8.87868 12.625 8.375 12.1213 8.375 11.5C8.375 10.8787 8.87868 10.375 9.5 10.375C10.1213 10.375 10.625 10.8787 10.625 11.5ZM5.5 12.625C6.12132 12.625 6.625 12.1213 6.625 11.5C6.625 10.8787 6.12132 10.375 5.5 10.375C4.87868 10.375 4.375 10.8787 4.375 11.5C4.375 12.1213 4.87868 12.625 5.5 12.625Z",
+              fill: "currentColor",
+              fillRule: "evenodd",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      ) })
+    }
+  ) : null, [e.field, e.pinned, e.resizable]), f = e.sortField || e.field, o = n?.field === f, s = a(() => !e.sortable || !o ? null : /* @__PURE__ */ t(
+    C,
+    {
+      variant: "subtle",
+      size: "sm",
+      color: "gray",
+      style: { flexShrink: 0 },
+      children: n?.sort === "desc" ? /* @__PURE__ */ t(x, { size: 16 }) : /* @__PURE__ */ t(v, { size: 16 })
+    }
+  ), [e.sortable, n?.sort, o]);
+  return /* @__PURE__ */ p(
+    E,
+    {
+      [r.COLUMN_ALIGN]: e.align,
+      [r.SORTABLE]: e.sortable,
+      [r.SORTED]: o,
+      [r.HEADER_CELL]: d(e.field),
+      style: { ...e.headerStyle, ...h },
+      ref: c,
+      children: [
+        e.pinned === "right" && l,
+        e.align === "right" && s,
+        /* @__PURE__ */ t(u, { style: e.headerContentStyle, children: e.header }),
+        e.align !== "right" && s,
+        e.pinned !== "right" && l
+      ]
+    }
+  );
+}, y = i.div`
+  user-select: none;
+  touch-action: none;
+  background-color: light-dark(
+    var(--mantine-color-gray-2),
+    var(--mantine-color-dark-4)
+  );
+  transform: translateX(6px);
+  border-radius: 10px;
+  padding: 2px 0px;
+  border: 0 solid transparent;
+  display: flex;
+  align-items: center;
+  width: 12px;
+  height: 20px;
+
+  &:hover {
+    background-color: var(--mantine-color-blue-6);
+    color: var(--mantine-color-white);
+  }
+`, R = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  cursor: col-resize;
+  justify-self: flex-end;
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  touch-action: none;
+
+  &[${r.RESIZER_SIDE}='right'] {
+    left: 0;
+    right: auto;
+  }
+`, E = i.div`
+  position: relative;
+  width: 100%;
+  min-height: var(--header-height);
+  display: flex;
+  align-items: center;
+  user-select: none;
+  flex-shrink: 0;
+  text-overflow: ellipsis;
+  min-width: 0;
+  padding: 0 8px;
+  gap: 4px;
+
+  border-right: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+
+  &:hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-0),
+      var(--mantine-color-dark-6)
+    );
+  }
+
+  &[${r.COLUMN_ALIGN}='left'] {
+    justify-content: flex-start;
+  }
+  &[${r.COLUMN_ALIGN}='right'] {
+    justify-content: flex-end;
+  }
+  &[${r.COLUMN_ALIGN}='center'] {
+    justify-content: center;
+  }
+
+  &[${r.SORTABLE}] {
+    cursor: pointer;
+  }
+
+  &:not(:hover) {
+    [${r.RESIZER}] {
+      display: none;
+    }
+  }
+`, u = i.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+`;
+export {
+  u as HeaderCellContent,
+  E as HeaderCellRoot,
+  z as TableHeaderCell
+};

package/dist/components/table/components/TableHeaders.js

@@ -0,0 +1,99 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { memo as h } from "react";
+import s from "@emotion/styled";
+import { TABLE_ATTRIBUTES as t } from "../constants.js";
+import { useTableStore as d } from "../hooks/useTableStore.js";
+import { visibleColumnsBySideReselect as p } from "../selectors.js";
+import { TableHeaderCell as g } from "./TableHeaderCell.js";
+import { getHeaderStyles as E, getColumnId as b } from "../helpers/columns.js";
+const D = h(() => {
+  const { useStore: e } = d(), { left: i, base: n, right: r } = e(p);
+  return /* @__PURE__ */ c(x, { [t.HEADERS]: "", children: [
+    i.length > 0 && /* @__PURE__ */ o(l, { [t.PANEL_SIDE]: "left", children: /* @__PURE__ */ o(a, { columns: i }) }),
+    /* @__PURE__ */ o(f, { [t.BASE]: "", children: /* @__PURE__ */ o(a, { columns: n }) }),
+    r.length > 0 && /* @__PURE__ */ o(l, { [t.PANEL_SIDE]: "right", children: /* @__PURE__ */ o(a, { columns: r }) })
+  ] });
+}), a = ({ columns: e }) => {
+  const { useStore: i } = d(), n = i((r) => r.sort);
+  return /* @__PURE__ */ o(
+    m,
+    {
+      style: E(e),
+      [t.HEADER_GRID]: "",
+      children: e.map((r) => /* @__PURE__ */ o(
+        g,
+        {
+          column: r,
+          sort: n
+        },
+        b(r.field)
+      ))
+    }
+  );
+}, f = s.div`
+  flex: 1;
+  min-width: var(--base-cols-width);
+`, x = s.div`
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  width: max-content;
+  min-width: 100%;
+`, m = s.div`
+  display: grid;
+  position: relative;
+  align-items: stretch;
+  height: 100%;
+  background-color: var(--mantine-color-body);
+  border-bottom: 2px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+
+  grid-template-rows: var(--header-height);
+`, l = s.div`
+  top: 0;
+  min-width: 0;
+  flex-shrink: 0;
+  width: min-content;
+  z-index: 2;
+  background-color: var(--mantine-color-body);
+
+  &[${t.PANEL_SIDE}='left'] {
+    position: sticky;
+    left: 0;
+
+    [${t.HEADER_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.HEADER_GROUP}]: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'] {
+    position: sticky;
+    right: 0;
+
+    [${t.HEADER_CELL}]:first-of-type {
+      box-shadow: -2px 0 0 0
+        light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    }
+
+    [${t.HEADER_GROUP}]:first-of-type {
+      box-shadow: -2px 0 0 0
+        light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    }
+  }
+
+  ${m} {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+`;
+export {
+  D as TableHeaders
+};

package/dist/components/table/components/TableMenu.js

@@ -0,0 +1,59 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { memo as c } from "react";
+import { useTranslation as m } from "react-i18next";
+import { Menu as o, Button as s } from "@mantine/core";
+import { IconFileDownload as d, IconFileTypeCsv as a, IconFileExcel as f } from "@tabler/icons-react";
+import { useTableStore as p } from "../hooks/useTableStore.js";
+const T = c(
+  ({
+    onExport: i,
+    isLoading: l
+  }) => {
+    const { t: r } = m(), { api: t } = p();
+    return /* @__PURE__ */ n(o, { children: [
+      /* @__PURE__ */ e(o.Target, { children: /* @__PURE__ */ e(
+        s,
+        {
+          variant: "default",
+          size: "sm",
+          disabled: l,
+          leftSection: /* @__PURE__ */ e(d, { size: "1em" }),
+          children: r("export")
+        }
+      ) }),
+      /* @__PURE__ */ n(o.Dropdown, { children: [
+        /* @__PURE__ */ e(
+          o.Item,
+          {
+            leftSection: /* @__PURE__ */ e(a, { size: 20 }),
+            onClick: () => {
+              if (i) {
+                i("csv");
+                return;
+              }
+              t.downloadCSV();
+            },
+            children: r("exportCSV")
+          }
+        ),
+        /* @__PURE__ */ e(
+          o.Item,
+          {
+            leftSection: /* @__PURE__ */ e(f, { size: 20 }),
+            onClick: () => {
+              if (i) {
+                i("xlsx");
+                return;
+              }
+              t.downloadExcel();
+            },
+            children: r("exportXLSX")
+          }
+        )
+      ] })
+    ] });
+  }
+);
+export {
+  T as TableMenu
+};

package/dist/components/table/components/TablePagination.js

@@ -0,0 +1,52 @@
+import { jsxs as i, jsx as o, Fragment as h } from "react/jsx-runtime";
+import { memo as d } from "react";
+import { Flex as p, Menu as r, Tooltip as z, Button as w, ActionIcon as c } from "@mantine/core";
+import { IconChevronLeft as f, IconChevronRight as u } from "@tabler/icons-react";
+import { useTableStore as C } from "../hooks/useTableStore.js";
+import { paginationMetaReselect as S } from "../selectors.js";
+const R = d(() => {
+  const { useStore: t, api: a } = C(), n = t((e) => e.page), s = t((e) => e.pageSize), { rowCount: l, pageCount: g } = t(S), m = t((e) => e.props.pageSizeOptions);
+  return /* @__PURE__ */ i(p, { gap: 8, children: [
+    /* @__PURE__ */ i(r, { children: [
+      /* @__PURE__ */ o(r.Target, { children: /* @__PURE__ */ o(z, { label: "Change rows per page", position: "top", withArrow: !0, children: /* @__PURE__ */ o(w, { variant: "light", color: "dark", size: "sm", children: l > 0 ? /* @__PURE__ */ i(h, { children: [
+        "Rows ",
+        n * s + 1,
+        "-",
+        Math.min((n + 1) * s, l),
+        " of ",
+        l
+      ] }) : "No rows" }) }) }),
+      /* @__PURE__ */ i(r.Dropdown, { miw: 100, children: [
+        /* @__PURE__ */ o(r.Label, { children: "Rows per page" }),
+        m?.map((e) => /* @__PURE__ */ o(r.Item, { onClick: () => a.setPageSize(e), children: e }, e))
+      ] })
+    ] }),
+    /* @__PURE__ */ i(p, { children: [
+      /* @__PURE__ */ o(
+        c,
+        {
+          variant: "light",
+          color: "dark",
+          size: "lg",
+          onClick: a.setPrevPage,
+          disabled: n <= 0,
+          children: /* @__PURE__ */ o(f, { size: "1em" })
+        }
+      ),
+      /* @__PURE__ */ o(
+        c,
+        {
+          variant: "light",
+          color: "dark",
+          size: "lg",
+          disabled: n >= g - 1,
+          onClick: a.setNextPage,
+          children: /* @__PURE__ */ o(u, { size: "1em" })
+        }
+      )
+    ] })
+  ] });
+});
+export {
+  R as TablePagination
+};

package/dist/components/table/components/TablePanel.js

@@ -0,0 +1,26 @@
+import { jsxs as p, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { memo as g } from "react";
+import { useTableStore as b } from "../hooks/useTableStore.js";
+import { visibleRowsReselect as f, visibleColumnsBySideReselect as d, metaReselect as v } from "../selectors.js";
+import { TableAggregation as R } from "./TableAggregation.js";
+import { TableRows as S } from "./TableRows.js";
+import { TableSkeleton as w } from "./TableSkeleton.js";
+const y = g(() => {
+  const { useStore: e } = b(), l = e((o) => o.selected), i = e((o) => o.pageSize), n = e((o) => o.props.loading), m = e((o) => o.props.virtualization), { rows: s, meta: a } = e(f), r = e(d), { zeroColumns: c } = e(v);
+  return c ? null : s.length ? /* @__PURE__ */ p(u, { children: [
+    /* @__PURE__ */ t(
+      S,
+      {
+        rows: s,
+        virtual: m,
+        columns: r,
+        selected: l,
+        meta: a
+      }
+    ),
+    /* @__PURE__ */ t(R, {})
+  ] }) : n ? /* @__PURE__ */ t(w, { count: i, columns: r }) : null;
+});
+export {
+  y as TablePanel
+};