@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/WorkspaceAvatar/WorkspaceAvatar.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Avatar as i } from "@mantine/core";
+import m from "../../assets/svg/default_icon.svg.js";
+const n = e(
+  ({ workspace: r, ...a }, o) => /* @__PURE__ */ t(
+    i,
+    {
+      src: r?.workspaceIcon || m,
+      tt: "uppercase",
+      color: "initials",
+      variant: "filled",
+      name: r?.workspaceId,
+      radius: "var(--mantine-radius-default)",
+      ...a,
+      ref: o
+    }
+  )
+);
+export {
+  n as WorkspaceAvatar
+};

package/dist/components/WorkspaceMenu/WorkspaceItem.js

@@ -0,0 +1,41 @@
+import { jsx as e, jsxs as t, Fragment as a } from "react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { Menu as c, Flex as o, Box as i, Text as m } from "@mantine/core";
+import { WorkspaceAvatar as p } from "../WorkspaceAvatar/WorkspaceAvatar.js";
+const b = ({ workspace: n, onClick: l }) => {
+  const { t: r } = s("workspaceMenu");
+  return /* @__PURE__ */ e(
+    c.Item,
+    {
+      p: 4,
+      onClick: () => l?.(n),
+      component: "a",
+      styles: { itemLabel: { minWidth: 0 } },
+      children: /* @__PURE__ */ t(o, { gap: 12, children: [
+        /* @__PURE__ */ e(p, { workspace: n, size: 36 }),
+        /* @__PURE__ */ t(i, { flex: 1, miw: 0, children: [
+          /* @__PURE__ */ e(m, { truncate: !0, size: "sm", fw: 500, c: "var(--mantine-color-bright", children: n.workspaceName }),
+          !n?.invitation && /* @__PURE__ */ e(m, { c: "gray", fw: 500, size: "xs", component: "span", children: /* @__PURE__ */ t(o, { gap: 8, component: "span", children: [
+            n.totalMembers ? /* @__PURE__ */ t(a, { children: [
+              r("member", { count: n.totalMembers }),
+              /* @__PURE__ */ e(
+                i,
+                {
+                  w: 2,
+                  h: 2,
+                  bdrs: 2,
+                  bg: "currentColor",
+                  component: "span"
+                }
+              )
+            ] }) : null,
+            r(`plans.${n.plan}`)
+          ] }) })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  b as WorkspaceItem
+};

package/dist/components/WorkspaceMenu/WorkspaceMenu.js

@@ -0,0 +1,211 @@
+import { jsx as e, Fragment as S, jsxs as n } from "react/jsx-runtime";
+import { useState as A } from "react";
+import { useTranslation as u } from "react-i18next";
+import { Link as z } from "react-router-dom";
+import { Setting07Icon as L, UserMultiple02Icon as K, Add01Icon as T } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as k } from "@hugeicons/react";
+import { Flex as a, Menu as m, Tooltip as P, Text as d, Stack as p, Box as h, Button as b, ScrollArea as U, Progress as B } from "@mantine/core";
+import { useMenu as D } from "../../hooks/useMenu.js";
+import { formatStorage as M } from "../../utils/formatStorage.js";
+import { Logotype as F } from "../Logotype.js";
+import { WorkspaceAvatar as y } from "../WorkspaceAvatar/WorkspaceAvatar.js";
+import { Numbers as O } from "../table/helpers/formatters.js";
+import { WorkspaceItem as H } from "./WorkspaceItem.js";
+const oe = ({
+  children: r,
+  onCreate: t,
+  onClick: s,
+  active: o,
+  items: i,
+  workspaceLink: c,
+  settingsLink: l,
+  membersLink: x,
+  canEditWorkspace: I,
+  isAnonym: C,
+  publicMode: W
+}) => {
+  const { t: N } = u("workspaceMenu"), { isMobile: w } = D(), [j, f] = A(!1);
+  return C || W ? /* @__PURE__ */ e(a, { w: "100%", justify: w ? "start" : "center", children: /* @__PURE__ */ e("a", { href: "/", children: /* @__PURE__ */ e(
+    F,
+    {
+      minified: !w,
+      w: w ? 65 : 24,
+      isLink: !1
+    }
+  ) }) }) : /* @__PURE__ */ e(S, { children: /* @__PURE__ */ n(
+    m,
+    {
+      opened: j,
+      onChange: f,
+      position: "right-start",
+      keepMounted: !1,
+      clickOutsideEvents: ["mousedown", "click"],
+      children: [
+        /* @__PURE__ */ e(m.Target, { children: r ?? /* @__PURE__ */ n(a, { onClick: () => f((g) => !g), children: [
+          /* @__PURE__ */ e(y, { size: 30, workspace: o }),
+          /* @__PURE__ */ e(a, { justify: "space-between", align: "center", w: "100%", miw: 0, children: /* @__PURE__ */ e(P, { label: o.workspaceName, children: /* @__PURE__ */ e(d, { size: "md", truncate: !0, children: o?.workspaceName || N("noName") }) }) })
+        ] }) }),
+        /* @__PURE__ */ e(m.Dropdown, { w: 280, children: /* @__PURE__ */ n(p, { gap: 6, children: [
+          /* @__PURE__ */ e(
+            $,
+            {
+              active: o,
+              workspaceLink: c,
+              settingsLink: l,
+              membersLink: x,
+              canEditWorkspace: I,
+              onClose: () => f(!1)
+            }
+          ),
+          /* @__PURE__ */ e(h, { px: 4, children: /* @__PURE__ */ e(m.Divider, {}) }),
+          /* @__PURE__ */ e(
+            E,
+            {
+              onCreate: t,
+              onClick: s,
+              items: i.filter(
+                (g) => g.workspaceId !== o?.workspaceId
+              ),
+              onClose: () => f(!1)
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+}, $ = ({
+  active: r,
+  workspaceLink: t,
+  settingsLink: s,
+  membersLink: o,
+  canEditWorkspace: i,
+  onClose: c
+}) => {
+  const { t: l } = u("workspaceMenu");
+  return /* @__PURE__ */ n(p, { p: 4, pb: 5, gap: 12, children: [
+    /* @__PURE__ */ n(a, { gap: 12, children: [
+      /* @__PURE__ */ e(y, { size: 48, workspace: r }),
+      /* @__PURE__ */ n(p, { gap: 0, miw: 0, children: [
+        /* @__PURE__ */ e(d, { truncate: !0, size: "md", fw: 500, c: "var(--mantine-color-bright", children: r.workspaceName || l("noName") }),
+        /* @__PURE__ */ e(d, { c: "gray", size: "sm", fw: 500, component: "span", children: /* @__PURE__ */ n(a, { gap: 8, component: "span", children: [
+          r.totalMembers ? /* @__PURE__ */ n(S, { children: [
+            l("member", { count: r.totalMembers }),
+            /* @__PURE__ */ e(
+              h,
+              {
+                w: 2,
+                h: 2,
+                bdrs: 2,
+                bg: "currentColor",
+                component: "span"
+              }
+            )
+          ] }) : null,
+          l(`plans.${r.plan}`)
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(q, { active: r }),
+    /* @__PURE__ */ n(a, { children: [
+      /* @__PURE__ */ e(
+        b,
+        {
+          flex: 1,
+          component: z,
+          variant: "default",
+          size: "sm",
+          leftSection: /* @__PURE__ */ e(k, { size: 16, icon: L }),
+          to: i ? t ?? "" : s ?? "",
+          onClick: c,
+          children: l("settings")
+        }
+      ),
+      /* @__PURE__ */ e(
+        b,
+        {
+          flex: 1,
+          component: z,
+          variant: "default",
+          size: "sm",
+          leftSection: /* @__PURE__ */ e(k, { size: 16, icon: K }),
+          to: o ?? "",
+          onClick: c,
+          children: l("members")
+        }
+      )
+    ] })
+  ] });
+}, q = ({
+  active: r
+}) => {
+  const { t } = u("workspaceMenu"), s = (r?.storageUsedKb || 0) / (r?.storageLimitKb || 1), o = O.formatPercents(s);
+  return /* @__PURE__ */ n(p, { gap: 4, w: "100%", children: [
+    /* @__PURE__ */ n(a, { justify: "space-between", children: [
+      /* @__PURE__ */ n(d, { size: "sm", fw: 500, children: [
+        t("usedStorage"),
+        ": ",
+        o
+      ] }),
+      /* @__PURE__ */ n(d, { size: "sm", fw: 500, c: "gray", children: [
+        M(r?.storageUsedKb),
+        " ",
+        t("of"),
+        " ",
+        M(r?.storageLimitKb)
+      ] })
+    ] }),
+    /* @__PURE__ */ e(B, { h: 4, value: s * 100 })
+  ] });
+}, E = ({
+  onCreate: r,
+  onClick: t,
+  items: s,
+  onClose: o
+}) => {
+  const { t: i } = u("workspaceMenu");
+  return /* @__PURE__ */ n(p, { gap: 12, children: [
+    /* @__PURE__ */ n(p, { gap: 6, children: [
+      /* @__PURE__ */ e(m.Label, { fw: 600, px: 4, py: 5, fz: "sm", children: i("switchWorkspace") }),
+      /* @__PURE__ */ e(h, { w: "100%", children: /* @__PURE__ */ e(
+        U.Autosize,
+        {
+          mah: 200,
+          w: "100%",
+          offsetScrollbars: !0,
+          scrollbars: "y",
+          type: "always",
+          styles: {
+            content: {
+              minWidth: 0
+            }
+          },
+          children: /* @__PURE__ */ e(p, { gap: 6, miw: 0, children: s.map((c) => /* @__PURE__ */ e(
+            H,
+            {
+              workspace: c,
+              onClick: t
+            },
+            c.workspaceId
+          )) })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(h, { p: 4, pt: 0, children: /* @__PURE__ */ e(
+      b,
+      {
+        fullWidth: !0,
+        variant: "default",
+        size: "sm",
+        onClick: () => {
+          r?.(), o?.();
+        },
+        leftSection: /* @__PURE__ */ e(k, { icon: T, size: 16 }),
+        children: i("newWorkspace")
+      }
+    ) })
+  ] });
+};
+export {
+  $ as ActiveWorkspace,
+  oe as WorkspaceMenu
+};

package/dist/components/modals/RemoveConfirmModal.d.ts

@@ -1,2 +1,9 @@
+import { ReactNode } from 'react';
 import { modals } from '@mantine/modals';
-export declare const openRemoveConfirmModal: (props: Parameters<typeof modals.openConfirmModal>[0]) => void;
+export declare const openRemoveConfirmModal: (props: Parameters<typeof modals.openConfirmModal>[0] & {
+    labels?: {
+        confirm?: string;
+        cancel?: string;
+    };
+    icon?: ReactNode | null;
+}) => void;

package/dist/components/modals/RemoveConfirmModal.js

@@ -0,0 +1,68 @@
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { Delete03Icon as w } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as g } from "@hugeicons/react";
+import { Stack as C, Text as c } from "@mantine/core";
+import { modals as a } from "@mantine/modals";
+const P = (s) => {
+  const {
+    title: m,
+    children: d,
+    onConfirm: o,
+    onClose: p,
+    labels: n,
+    icon: t = /* @__PURE__ */ e(
+      g,
+      {
+        size: 20,
+        icon: w,
+        color: "var(--mantine-color-red-filled)"
+      }
+    ),
+    closeOnConfirm: f = !0,
+    ...u
+  } = s, h = a.openConfirmModal({
+    withCloseButton: !1,
+    keepMounted: !1,
+    centered: !0,
+    confirmProps: {
+      color: "red",
+      fullWidth: !0,
+      variant: "filled",
+      size: "sm",
+      children: n?.confirm ?? "Delete"
+    },
+    cancelProps: {
+      variant: "default",
+      size: "sm",
+      fullWidth: !0,
+      children: n?.cancel ?? "Cancel"
+    },
+    groupProps: {
+      mt: 24,
+      wrap: "nowrap",
+      gap: 8
+    },
+    styles: {
+      body: {
+        paddingTop: "var(--mantine-spacing-xl)"
+      }
+    },
+    children: /* @__PURE__ */ v(C, { gap: 0, align: "center", mb: 0, children: [
+      t && t,
+      /* @__PURE__ */ e(c, { mt: "xs", fw: "700", ta: "center", children: m }),
+      /* @__PURE__ */ e(c, { mt: 6, size: "sm", c: "gray", ta: "center", children: d })
+    ] }),
+    onConfirm: o,
+    onClose: () => {
+      window.removeEventListener("keydown", r), p?.();
+    },
+    ...u
+  }), r = (i) => {
+    const l = document.activeElement?.tagName;
+    l === "TEXTAREA" || l === "INPUT" || i.key === "Enter" && (i.preventDefault(), o?.(), f && a.close(h));
+  };
+  window.addEventListener("keydown", r);
+};
+export {
+  P as openRemoveConfirmModal
+};

package/dist/components/table/FrontTable.js

@@ -0,0 +1,21 @@
+import { Table as e } from "./components/Table.js";
+import { TableMenu as o } from "./components/TableMenu.js";
+import { TablePagination as r } from "./components/TablePagination.js";
+import { TableSearch as a } from "./components/TableSearch.js";
+import { TableRoot as t, TableDesc as i, TableTitle as l, TableHeader as m } from "./components/TableTitle.js";
+import { TableProvider as T } from "./hooks/TableProvider.js";
+const d = Object.assign(e, {
+  Header: m,
+  Title: l,
+  Desc: i,
+  Pagination: r,
+  Search: a,
+  Root: t,
+  Provider: T,
+  Menu: o
+});
+export {
+  d as FrontTable,
+  r as TablePagination,
+  a as TableSearch
+};

package/dist/components/table/api.js

@@ -0,0 +1,248 @@
+import { xor as G, clamp as M } from "lodash-es";
+import { TABLE_ATTRIBUTES as p } from "./constants.js";
+import { exportToExcel as H, exportToCSV as X } from "./export.js";
+import { isTechnicalColumn as Z } from "./helpers/columns.js";
+import { visibleColumnsBySideReselect as V, columnsMapReselect as y, visibleRowsReselect as L, visibleColumnsReselect as J, paginationMetaReselect as B, columnsReselect as z } from "./selectors.js";
+const lt = (s) => {
+  const i = (t) => {
+    s.setState({
+      pageSize: t,
+      page: 0
+    });
+  }, r = (t) => {
+    s.setState({
+      page: t
+    });
+  }, u = (t) => {
+    s.setState({
+      sort: t
+    });
+  }, a = () => {
+    const t = s.getState(), { props: e } = t, { exportFileName: n } = e, c = z(t), { rows: o } = L(t);
+    X({
+      rows: o,
+      columns: c,
+      fileName: n ?? "export"
+    });
+  }, l = () => {
+    const t = s.getState(), { props: e } = t, { exportFileName: n } = e, c = z(t), { rows: o } = L(t);
+    H({
+      rows: o,
+      columns: c,
+      fileName: n ?? "export"
+    });
+  }, d = (t) => {
+    s.setState({ selected: t });
+  }, w = (t) => {
+    s.setState((e) => ({
+      ...e,
+      columnsState: {
+        ...e.columnsState,
+        [t]: {
+          ...e.columnsState[t],
+          hidden: !e.columnsState[t]?.hidden
+        }
+      }
+    }));
+  }, S = (t) => {
+    s.setState((e) => {
+      const n = z(e);
+      return {
+        ...e,
+        columnsState: n.reduce(
+          (c, { field: o }) => (c[o] = { ...c[o], hidden: !t.includes(o) }, c),
+          { ...e.columnsState }
+        )
+      };
+    });
+  }, R = (t) => {
+    s.setState({ search: t });
+  }, g = () => {
+    s.setState((t) => {
+      const { pageCount: e } = B(t);
+      return { ...t, page: M(t.page - 1, 0, e - 1) };
+    });
+  }, E = () => {
+    s.setState((t) => {
+      const { pageCount: e } = B(t);
+      return { ...t, page: M(t.page + 1, 0, e - 1) };
+    });
+  }, h = (t, e) => {
+    s.setState((n) => ({
+      ...n,
+      columnsState: {
+        ...n.columnsState,
+        [t]: { ...n.columnsState[t], setWidth: e }
+      }
+    }));
+  }, W = (t) => {
+    s.setState((e) => ({ ...e, expanded: G(e.expanded, [t]) }));
+  }, C = (t) => {
+    s.setState({
+      rootRef: t
+    });
+  }, x = (t) => {
+    s.setState({
+      scrollRef: t
+    });
+  }, F = () => {
+    const t = s.getState(), { rootRef: e } = t;
+    e?.setAttribute(p.AUTOSIZE, "");
+  }, _ = () => {
+    const t = s.getState(), { rootRef: e } = t;
+    e?.removeAttribute(p.AUTOSIZE);
+  }, P = (t = !0) => {
+    const e = s.getState(), n = J(e);
+    !t && n.every((o) => typeof o.computedWidth == "number") || (F(), requestAnimationFrame(() => {
+      s.setState((o) => {
+        if (!o.rootRef) return o;
+        const m = { ...o, columnsState: { ...o.columnsState } }, f = y(o), b = K(o.rootRef), k = Q({
+          originalWidths: b,
+          columnsMap: f
+        }), D = Y({
+          rootRef: o.rootRef,
+          validatedWidths: k,
+          columnsMap: f
+        });
+        for (const [N, O] of Object.entries(D)) {
+          const T = m.columnsState[N];
+          m.columnsState[N] = {
+            ...T,
+            computedWidth: t ? O : T?.computedWidth ?? O
+          }, m.columnsState[f[N].field] = {
+            ...T,
+            computedWidth: t ? O : T?.computedWidth ?? O
+          };
+        }
+        return m;
+      }), _();
+    }));
+  }, j = () => {
+    const t = s.getState(), { rows: e } = L(t), { selected: n } = t, c = e.map((o) => o.id);
+    d(n.filter((o) => !c.includes(o)));
+  }, q = () => {
+    const { rows: t } = L(s.getState());
+    d(t.map((e) => e.id));
+  }, U = (t) => {
+    const e = s.getState(), { selected: n } = e;
+    d(n.filter((c) => c !== t));
+  }, $ = (t) => {
+    const e = s.getState(), { selected: n } = e;
+    d([.../* @__PURE__ */ new Set([...n, t])]);
+  }, A = (t) => {
+    const e = y(s.getState()), n = t.filter(
+      (c) => !Z(c) || !e[c]?.ignoreOrder
+    );
+    s.setState({
+      columnsOrder: n
+    });
+  }, I = (t, e, n) => {
+    const c = t.indexOf(e);
+    return c === -1 || n < 0 || n > t.length ? t : t.toSpliced(c, 1).toSpliced(n, 0, e);
+  };
+  return {
+    setPageSize: i,
+    setPage: r,
+    setSort: u,
+    downloadCSV: a,
+    downloadExcel: l,
+    setSelected: d,
+    toggleColumn: w,
+    setVisibleColumns: S,
+    setSearch: R,
+    setPrevPage: g,
+    setNextPage: E,
+    setColumnWidth: h,
+    toggleRowExpand: W,
+    setRootRef: C,
+    setScrollRef: x,
+    calculateColumnWidths: P,
+    selectVisibleRows: q,
+    unselectVisibleRows: j,
+    unselectRow: U,
+    selectRow: $,
+    setAutosize: F,
+    removeAutosize: _,
+    setColumnsOrder: A,
+    setColumnOrder: (t, e) => {
+      const n = s.getState(), { columnsOrder: c } = n, o = I(c, t, e);
+      A(o);
+    },
+    moveColumnLeft: (t) => {
+      const e = s.getState(), { left: n, base: c, right: o } = V(e), m = [...n, ...c, ...o].map((b) => b.field), f = I(
+        m,
+        t,
+        m.indexOf(t) - 1
+      );
+      A(f);
+    },
+    moveColumnRight: (t) => {
+      const e = s.getState(), { left: n, base: c, right: o } = V(e), m = [...n, ...c, ...o].map((b) => b.field), f = I(
+        m,
+        t,
+        m.indexOf(t) + 1
+      );
+      A(f);
+    }
+  };
+}, K = (s) => {
+  const i = {};
+  return s.querySelectorAll(
+    `[${p.ROW}]`
+  ).forEach((u) => {
+    u.querySelectorAll(`[${p.CELL}]`).forEach((a) => {
+      const l = a.getAttribute(p.CELL);
+      if (!l) return;
+      i[l] || (i[l] = []);
+      const d = a.getBoundingClientRect().width;
+      i[l].push(d);
+    });
+  }), s.querySelectorAll(`[${p.HEADER_CELL}]`).forEach((u) => {
+    const a = u.getAttribute(p.HEADER_CELL);
+    if (!a) return;
+    i[a] || (i[a] = []);
+    const l = u.getBoundingClientRect().width;
+    i[a].push(l);
+  }), i;
+}, Q = ({
+  columnsMap: s,
+  originalWidths: i
+}) => {
+  const r = {};
+  for (const [u, a] of Object.entries(i)) {
+    const {
+      width: l,
+      minWidth: d = 0,
+      maxWidth: w = Number.MAX_SAFE_INTEGER
+    } = s[u], S = l ?? M(Math.max(...a), d, w);
+    r[u] = S;
+  }
+  return r;
+}, Y = ({
+  validatedWidths: s,
+  rootRef: i,
+  columnsMap: r
+}) => {
+  const u = i.clientWidth - parseFloat(getComputedStyle(i).paddingLeft) - parseFloat(getComputedStyle(i).paddingRight) - 16, a = Object.values(s).reduce(
+    (R, g) => R + g,
+    0
+  );
+  let l = Math.max(0, u - a);
+  const d = { ...s }, w = Object.keys(s);
+  let S = new Set(w);
+  for (; l > 0.1 && S.size > 0; ) {
+    const R = l / S.size;
+    let g = 0;
+    const E = /* @__PURE__ */ new Set();
+    for (const h of S) {
+      const W = r[h]?.width ?? r[h]?.maxWidth ?? Number.MAX_SAFE_INTEGER, C = d[h], x = Math.min(R, W - C);
+      d[h] = C + x, g += x, C + x < W && E.add(h);
+    }
+    if (l -= g, g === 0) break;
+    S = E;
+  }
+  return d;
+};
+export {
+  lt as createApi
+};