@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/NewColorPicker/components/Pallete.js

@@ -0,0 +1,46 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { Box as s, Text as b, SimpleGrid as h, Tooltip as u, Menu as v, ActionIcon as x, alpha as c } from "@mantine/core";
+const I = ({
+  value: d,
+  item: i,
+  onChange: r,
+  hideModeLabel: n,
+  radius: t,
+  hint: a
+}) => /* @__PURE__ */ p(s, { children: [
+  !n && i.label && /* @__PURE__ */ e(b, { c: "dimmed", fz: "xs", pb: 3, children: i.label }),
+  /* @__PURE__ */ e(h, { cols: 5, spacing: 8, children: i.palette.map((l) => {
+    const o = l.value === "inherit";
+    return /* @__PURE__ */ e(
+      u,
+      {
+        label: l.label,
+        zIndex: 1e3,
+        disabled: a !== "tooltip",
+        children: /* @__PURE__ */ e(v.Item, { component: "div", p: 0, children: /* @__PURE__ */ e(
+          x,
+          {
+            title: a === "title" ? l.label : void 0,
+            variant: i.filled ? "filled" : "outline",
+            color: o ? "dark" : l.value,
+            bd: d === l.value ? `2px solid ${o ? "#ccc" : c(l.value, 1)}` : "1px solid #ccc",
+            bg: i.filled && o ? "white" : void 0,
+            onClick: () => r(l),
+            radius: t,
+            "aria-label": l.label,
+            w: 26,
+            miw: 26,
+            h: 26,
+            mih: 26,
+            style: i.filled ? { color: c(l.value, 1) } : {},
+            children: l.icon
+          }
+        ) })
+      },
+      l.value
+    );
+  }) })
+] });
+export {
+  I as Palette
+};

package/dist/components/NewColorPicker/components/Target.js

@@ -0,0 +1,47 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useTranslation as m } from "react-i18next";
+import { Tooltip as d, Button as p, ColorSwatch as f } from "@mantine/core";
+import { IconLetterA as h, IconChevronDown as b } from "@tabler/icons-react";
+const k = s(
+  ({ value: r, disabled: i, radius: l, hint: t, withoutIcon: c, ...n }, a) => {
+    const { t: e } = m("ui");
+    return /* @__PURE__ */ o(d, { label: e("colorPicker.color"), disabled: t !== "tooltip", children: /* @__PURE__ */ o(
+      p,
+      {
+        ref: a,
+        disabled: i,
+        variant: "subtle",
+        color: "gray",
+        "aria-label": "Formatting text color",
+        title: t === "title" ? e("colorPicker.color") : void 0,
+        rightSection: /* @__PURE__ */ o(b, { size: 18 }),
+        px: 8,
+        styles: { section: { marginLeft: 2 } },
+        ...n,
+        children: /* @__PURE__ */ o(
+          f,
+          {
+            styles: {
+              childrenOverlay: { border: "1px solid #ccc" },
+              alphaOverlay: { display: "none" }
+            },
+            radius: l,
+            size: 22,
+            color: r.background,
+            children: !c && /* @__PURE__ */ o(
+              h,
+              {
+                size: 14,
+                color: r.color === "inherit" ? "var(--mantine-color-text)" : r.color
+              }
+            )
+          }
+        )
+      }
+    ) });
+  }
+);
+export {
+  k as Target
+};

package/dist/components/NewColorPicker/index.js

@@ -0,0 +1,92 @@
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useMemo as P } from "react";
+import { useTranslation as x } from "react-i18next";
+import { alpha as C, Menu as n, Stack as I } from "@mantine/core";
+import { IconLetterA as M } from "@tabler/icons-react";
+import { Palette as y } from "./components/Pallete.js";
+import { Target as z } from "./components/Target.js";
+const S = (u) => {
+  const { t: a } = x("ui"), {
+    value: t,
+    data: c,
+    modes: i = ["color", "background"],
+    onChange: g,
+    target: b,
+    menuProps: h,
+    disabled: f,
+    hideModeLabel: k,
+    hideInherit: l,
+    radius: m = 6,
+    hint: d = "tooltip",
+    alpha: s = 0.19
+  } = u, w = P(
+    () => ({
+      color: {
+        label: a("colorPicker.color"),
+        palette: p.slice(l ? 1 : 0).map(({ name: o, color: e }) => ({
+          label: a(`colorPicker.colors.${o}`),
+          value: e,
+          icon: /* @__PURE__ */ r(M, { size: 14 })
+        }))
+      },
+      background: {
+        label: a("colorPicker.background"),
+        filled: !0,
+        palette: p.slice(l ? 1 : 0).map(({ name: o, color: e }) => ({
+          label: a(`colorPicker.colors.${o}`),
+          value: e === "inherit" ? e : C(e, s),
+          filled: !0
+        }))
+      },
+      ...c ?? {}
+    }),
+    [c, l, s, a]
+  );
+  return /* @__PURE__ */ v(
+    n,
+    {
+      shadow: "md",
+      styles: { dropdown: { overflow: "auto", zIndex: 1e3 } },
+      middlewares: { size: { padding: 8 } },
+      ...h || {},
+      children: [
+        /* @__PURE__ */ r(n.Target, { children: b || /* @__PURE__ */ r(
+          z,
+          {
+            value: t,
+            disabled: f,
+            radius: m,
+            hint: d,
+            withoutIcon: !i.includes("color")
+          }
+        ) }),
+        /* @__PURE__ */ r(n.Dropdown, { onMouseDown: (o) => o.preventDefault(), children: /* @__PURE__ */ r(I, { gap: "sm", children: i.map((o) => /* @__PURE__ */ r(
+          y,
+          {
+            value: t[o],
+            item: w[o],
+            hideModeLabel: k,
+            radius: m,
+            hint: d,
+            onChange: (e) => g({ value: e.value, meta: e.meta, mode: o })
+          },
+          o
+        )) }) })
+      ]
+    }
+  );
+}, p = [
+  { name: "standard", color: "inherit" },
+  { name: "gray", color: "rgb(155, 155, 155)" },
+  { name: "brown", color: "rgb(159, 107, 83)" },
+  { name: "orange", color: "rgb(217, 115, 13)" },
+  { name: "yellow", color: "rgb(203, 145, 47)" },
+  { name: "green", color: "rgb(68, 131, 97)" },
+  { name: "blue", color: "rgb(51, 126, 169)" },
+  { name: "purple", color: "rgb(144, 101, 176)" },
+  { name: "pink", color: "rgb(193, 76, 138)" },
+  { name: "red", color: "rgb(212, 76, 71)" }
+];
+export {
+  S as NewColorPicker
+};

package/dist/components/NoData/NoData.js

@@ -0,0 +1,103 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { Stack as h, Box as p, Flex as j, Title as x, Text as y, Group as F, Button as M } from "@mantine/core";
+import R from "../../assets/svg/alertMan.svg.js";
+import k from "../../assets/svg/noData/404.svg.js";
+import w from "../../assets/svg/noData/500.svg.js";
+import T from "../../assets/svg/noData/empty.svg.js";
+import E from "../../assets/svg/noData/folder.svg.js";
+import I from "../../assets/svg/noData/noAccess.svg.js";
+import A from "../../assets/svg/noData/noAnswers.svg.js";
+import C from "../../assets/svg/noData/noCloud.svg.js";
+import G from "../../assets/svg/noData/noComments.svg.js";
+import b from "../../assets/svg/noData/noData.svg.js";
+import D from "../../assets/svg/noData/noFlows.svg.js";
+import B from "../../assets/svg/noData/noForms.svg.js";
+import P from "../../assets/svg/noData/noGroups.svg.js";
+import W from "../../assets/svg/noData/noImage.svg.js";
+import z from "../../assets/svg/noData/noMembers.svg.js";
+import _ from "../../assets/svg/noData/noNotifications.svg.js";
+import q from "../../assets/svg/noData/noResults.svg.js";
+import H from "../../assets/svg/noData/noSearchResults.svg.js";
+import J from "../../assets/svg/noData/noTaskResults.svg.js";
+import K from "../../assets/svg/noData/noTasks.svg.js";
+import L from "../../assets/svg/noData/noWorkspaces.svg.js";
+import O from "../../assets/svg/noData/trash.svg.js";
+import Q from "../../assets/svg/notSuccessMan.svg.js";
+import U from "../../assets/svg/successMan.svg.js";
+import c from "./NoData.module.css.js";
+const V = (m) => /(\p{Emoji_Presentation}|\p{Emoji}\uFE0F)/u.test(m), X = {
+  empty: T,
+  noAccess: I,
+  trash: O,
+  noImage: W,
+  noResults: q,
+  noComments: G,
+  noData: b,
+  emptyFolder: E,
+  noTaskResults: J,
+  noSearchResults: H,
+  noMembers: z,
+  noGroups: P,
+  noNotifications: _,
+  noWorkspaces: L,
+  paymentSuccess: U,
+  notSuccessMan: Q,
+  noAnswers: A,
+  alertMan: R,
+  noFlows: D,
+  noTasks: K,
+  noCloud: C,
+  noForms: B,
+  404: k,
+  500: w
+}, Ro = ({
+  title: m,
+  titleProps: e,
+  description: s,
+  descriptionProps: f,
+  buttons: n,
+  illustration: r,
+  size: t = 145,
+  width: g,
+  height: S,
+  showDots: l = !0,
+  ...v
+}) => {
+  const i = r && typeof r == "string" && V(r), a = r && !i ? X[r] : null;
+  return /* @__PURE__ */ d(
+    h,
+    {
+      gap: "sm",
+      justify: "center",
+      flex: 1,
+      align: "center",
+      pos: "relative",
+      style: {
+        zIndex: 3
+      },
+      ...v,
+      children: [
+        l && /* @__PURE__ */ o(p, { className: c.bgPattern, children: /* @__PURE__ */ o(p, { className: c.bgGradient }) }),
+        r && /* @__PURE__ */ o(
+          j,
+          {
+            justify: "center",
+            style: {
+              height: S || t,
+              width: g || t,
+              fontSize: t
+            },
+            children: i ? /* @__PURE__ */ o("span", { children: r }) : a && /* @__PURE__ */ o(a, {})
+          }
+        ),
+        m && /* @__PURE__ */ o(x, { order: 2, ta: "center", mt: 0, maw: 450, ...e, children: m }),
+        s && /* @__PURE__ */ o(y, { fz: "md", ta: "center", c: "dimmed", maw: 400, ...f, children: s }),
+        n?.length ? /* @__PURE__ */ o(F, { gap: "xs", justify: "center", children: n.map((u, N) => /* @__PURE__ */ o(M, { variant: "filled", ...u }, N)) }) : null
+      ]
+    }
+  );
+};
+export {
+  Ro as NoData,
+  X as illustrationMap
+};

package/dist/components/NoData/NoData.module.css.js

@@ -0,0 +1,7 @@
+const t = "_bgPattern_1c45n_1", e = {
+  bgPattern: t
+};
+export {
+  t as bgPattern,
+  e as default
+};

package/dist/components/NotFound/NoFound.js

@@ -0,0 +1,65 @@
+import { jsxs as r, Fragment as a, jsx as t } from "react/jsx-runtime";
+import { Helmet as d } from "react-helmet";
+import { useTranslation as f } from "react-i18next";
+import { useNavigate as h } from "react-router-dom";
+import { Stack as p, CloseButton as u } from "@mantine/core";
+import { IconChevronLeft as g, IconHome2 as v } from "@tabler/icons-react";
+import { useMenu as k } from "../../hooks/useMenu.js";
+import { NoData as x } from "../NoData/NoData.js";
+const B = ({
+  title: n,
+  description: l,
+  buttons: s,
+  closeAction: i,
+  ...m
+}) => {
+  const { t: e } = f(), o = h(), { isMobile: c } = k();
+  return /* @__PURE__ */ r(a, { children: [
+    /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t("title", { children: "404 " }) }),
+    /* @__PURE__ */ r(p, { mih: "100dvh", gap: "sm", justify: "center", flex: 1, align: "center", children: [
+      /* @__PURE__ */ t(
+        x,
+        {
+          ...m,
+          title: n || e("404.title"),
+          flex: "0,0,0",
+          h: "60dvh",
+          w: c ? 500 : "70%",
+          width: 330,
+          height: 160,
+          titleProps: { mt: 40 },
+          description: l || e("404.description"),
+          illustration: "404",
+          buttons: s || [
+            {
+              size: "md",
+              variant: "subtle",
+              leftSection: /* @__PURE__ */ t(g, { size: 18 }),
+              onClick: () => o(-1),
+              children: e("404.goBack")
+            },
+            {
+              size: "md",
+              variant: "filled",
+              leftSection: /* @__PURE__ */ t(v, { size: 18 }),
+              onClick: () => o("/"),
+              children: e("404.goHome")
+            }
+          ]
+        }
+      ),
+      i && /* @__PURE__ */ t(
+        u,
+        {
+          pos: "absolute",
+          top: 16,
+          right: 16,
+          onClick: i
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  B as NotFound
+};

package/dist/components/NotPublicPanel/NotPublicPanel.js

@@ -0,0 +1,53 @@
+import { jsxs as l, Fragment as t, jsx as i } from "react/jsx-runtime";
+import { useTranslation as c } from "react-i18next";
+import { Title as n, Button as m } from "@mantine/core";
+import e from "./NotPublicPanel.module.css.js";
+const N = ({
+  entityData: s,
+  handlePublish: o,
+  isPublishing: d = !1,
+  PreviewComponent: r
+}) => {
+  const { t: a } = c();
+  return /* @__PURE__ */ l(t, { children: [
+    /* @__PURE__ */ i("div", { className: e.previewBoxTitle, children: /* @__PURE__ */ i(n, { order: 4, children: a("publish") }) }),
+    /* @__PURE__ */ l("div", { className: e.previewBox, children: [
+      /* @__PURE__ */ l("div", { className: e.previewContainer, children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            style: s.type === "FORM" ? { minHeight: "22px" } : void 0,
+            className: e.previewHeader,
+            children: [
+              /* @__PURE__ */ i("div", { className: e.headerDot }),
+              /* @__PURE__ */ i("div", { className: e.headerDot }),
+              /* @__PURE__ */ i("div", { className: e.headerDot })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            style: s.type === "FORM" ? { minHeight: "500px" } : void 0,
+            className: e.previewContent,
+            children: r ? /* @__PURE__ */ i(r, { data: s }) : null
+          }
+        )
+      ] }),
+      " ",
+      /* @__PURE__ */ i(
+        m,
+        {
+          fullWidth: !0,
+          onClick: o,
+          loading: d,
+          className: `${e.pulseSlow} ${e.processing}`,
+          children: a("publishToWeb")
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  N as NotPublicPanel
+};

package/dist/components/NotPublicPanel/NotPublicPanel.module.css.js

@@ -0,0 +1,19 @@
+const e = "_previewBoxTitle_1xmos_1", o = "_previewBox_1xmos_1", r = "_previewContainer_1xmos_45", t = "_previewHeader_1xmos_58", i = "_headerDot_1xmos_70", s = "_previewContent_1xmos_80", n = "_processing_1xmos_103", _ = {
+  previewBoxTitle: e,
+  previewBox: o,
+  previewContainer: r,
+  previewHeader: t,
+  headerDot: i,
+  previewContent: s,
+  processing: n
+};
+export {
+  _ as default,
+  i as headerDot,
+  o as previewBox,
+  e as previewBoxTitle,
+  r as previewContainer,
+  s as previewContent,
+  t as previewHeader,
+  n as processing
+};

package/dist/components/Notification/Notification.js

@@ -0,0 +1,117 @@
+import { jsxs as i, Fragment as A, jsx as e } from "react/jsx-runtime";
+import { useState as D, useRef as w, useCallback as g, useEffect as y } from "react";
+import { useTranslation as N } from "react-i18next";
+import { useNavigate as E } from "react-router-dom";
+import { Flex as a, Text as l, Box as k, Button as b, Divider as v, Group as d } from "@mantine/core";
+import { IconArrowsSort as F } from "@tabler/icons-react";
+import { useAppContainerActionsStore as j } from "../AppContainer/hooks/useAppContainerActionsStore.js";
+import { useAppContainerDataStore as S } from "../AppContainer/hooks/useAppContainerDataStore.js";
+import { CustomKBD as C } from "../CustomKBD/index.js";
+import { NoData as B } from "../NoData/NoData.js";
+import I from "./NotificationCard.js";
+import K from "./Notification.module.css.js";
+const J = () => {
+  const { t: r } = N("appContainer"), h = E(), { notifications: n } = S(), { readNotificationsFunc: p } = j(), [s, c] = D(null), u = w([]), x = w(null), m = g(
+    async (t) => {
+      if (!n?.length) return;
+      const o = `/invitation/${n[t].link}`;
+      p({
+        messageIds: [n[t].id],
+        markAll: !1,
+        action: 1
+      }), h(o);
+    },
+    [h, n, p]
+  ), f = g(
+    (t) => {
+      t.key === "ArrowDown" ? (t.preventDefault(), c(
+        (o) => o === null ? 0 : Math.min(o + 1, n?.length - 1)
+      )) : t.key === "ArrowUp" ? (t.preventDefault(), c(
+        (o) => o === null ? n?.length - 1 : Math.max(o - 1, 0)
+      )) : t.key === "Enter" && s !== null && n?.length && m(s);
+    },
+    [s, m, n?.length]
+  );
+  return y(() => (window.addEventListener("keydown", f), () => {
+    c(null), window.removeEventListener("keydown", f);
+  }), [f]), y(() => {
+    const t = u.current[s ?? -1];
+    t && t.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+  }, [s]), /* @__PURE__ */ i(A, { children: [
+    /* @__PURE__ */ i(a, { p: "sm", justify: "space-between", children: [
+      /* @__PURE__ */ i(a, { children: [
+        /* @__PURE__ */ e(l, { fz: "sm", children: r("notification") }),
+        /* @__PURE__ */ e(k, { className: K.headerCounter, children: /* @__PURE__ */ e(l, { fz: "xs", children: n?.length < 100 ? n?.length : "99+" }) })
+      ] }),
+      /* @__PURE__ */ e(b, { h: 22, variant: "transparent", size: "xs", children: /* @__PURE__ */ e(l, { h: 22, fz: "md", children: r("showAll") }) })
+    ] }),
+    /* @__PURE__ */ e(v, {}),
+    /* @__PURE__ */ e(
+      d,
+      {
+        mah: 280,
+        ref: x,
+        style: {
+          overflowY: "auto"
+        },
+        gap: 0,
+        children: n ? n?.map((t, o) => /* @__PURE__ */ e(
+          k,
+          {
+            onClick: () => m(o),
+            style: {
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ e(
+              I,
+              {
+                isFocused: o === s,
+                notification: t,
+                ref: (z) => u.current[o] = z
+              }
+            )
+          },
+          t.id
+        )) : /* @__PURE__ */ e(
+          B,
+          {
+            py: "md",
+            size: 140,
+            my: 20,
+            illustration: "noNotifications",
+            descriptionProps: { maw: 300 },
+            description: r("emptyNotifyDescription")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(v, {}),
+    /* @__PURE__ */ i(a, { bottom: 0, p: "sm", justify: "space-between", children: [
+      /* @__PURE__ */ i(a, { gap: 24, children: [
+        /* @__PURE__ */ i(d, { gap: 8, children: [
+          /* @__PURE__ */ e(
+            C,
+            {
+              miw: 26,
+              w: 26,
+              bbw: 4,
+              value: /* @__PURE__ */ e(F, { stroke: 1.5, width: 16, height: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(l, { fz: "sm", fw: 400, children: r("choose") })
+        ] }),
+        /* @__PURE__ */ i(d, { gap: 8, children: [
+          /* @__PURE__ */ e(C, { miw: 45, w: 45, bbw: 4, value: "Enter" }),
+          /* @__PURE__ */ e(l, { fz: "sm", fw: 400, children: r("open") })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(b, { h: 22, variant: "transparent", size: "xs", children: /* @__PURE__ */ e(l, { h: 22, fz: "md", children: r("closeAll") }) })
+    ] })
+  ] });
+};
+export {
+  J as Notification
+};

package/dist/components/Notification/Notification.module.css.js

@@ -0,0 +1,7 @@
+const e = "_headerCounter_1kh0c_1", t = {
+  headerCounter: e
+};
+export {
+  t as default,
+  e as headerCounter
+};

package/dist/components/Notification/NotificationCard.js

@@ -0,0 +1,92 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useTranslation as g } from "react-i18next";
+import { Flex as a, Text as l, Tooltip as x } from "@mantine/core";
+import { IconFileText as h, IconCheckbox as u, IconX as y } from "@tabler/icons-react";
+const b = p(
+  ({ isFocused: o, notification: e }, n) => {
+    const { i18n: s } = g("appContainer"), i = (d) => {
+      const m = s.language === "ru" ? "ru-RU" : "en-US";
+      return d.toLocaleDateString(m, {
+        day: "numeric",
+        month: "long",
+        year: "numeric"
+      });
+    }, c = new Date(e.createdAt), f = i(c);
+    return /* @__PURE__ */ t(
+      a,
+      {
+        ref: n,
+        px: 8,
+        w: "100%",
+        py: "sm",
+        justify: "flex-start",
+        style: {
+          backgroundColor: o ? "#f0f0f0" : "transparent",
+          cursor: "pointer",
+          borderRadius: "4px"
+        },
+        children: [
+          /* @__PURE__ */ t(a, { w: 274, justify: "flex-start", children: [
+            /* @__PURE__ */ r(
+              h,
+              {
+                size: 20,
+                color: "gray",
+                style: { alignSelf: "flex-start" }
+              }
+            ),
+            /* @__PURE__ */ r(l, { fz: 16, style: { alignSelf: "flex-start" }, children: e.pageIcon === "DefaultIcon" ? /* @__PURE__ */ r(u, { size: 20, color: "gray" }) : e.pageIcon }),
+            /* @__PURE__ */ t(a, { direction: "column", gap: 0, w: 200, children: [
+              /* @__PURE__ */ r(
+                x,
+                {
+                  disabled: e.description.length < 40,
+                  label: e.description,
+                  children: /* @__PURE__ */ r(
+                    l,
+                    {
+                      fz: "sm",
+                      style: {
+                        alignSelf: "flex-start",
+                        lineHeight: "16px"
+                      },
+                      lineClamp: 2,
+                      children: e.description
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ t(
+                l,
+                {
+                  c: "dimmed",
+                  fz: "sm",
+                  h: "16",
+                  style: { alignSelf: "flex-start" },
+                  children: [
+                    " ",
+                    e.pageName
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ r(l, { c: "dimmed", fz: "sm", w: 98, style: { alignSelf: "flex-start" }, children: f }),
+          /* @__PURE__ */ r(
+            y,
+            {
+              width: 12,
+              height: 12,
+              color: "gray",
+              style: { alignSelf: "flex-start", marginTop: "5px" }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  b as default
+};