@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/OnBoarding/styles.module.css.js

@@ -0,0 +1,15 @@
+const a = "_boardContainer_zk8z5_1", e = "_appShell_zk8z5_10", n = "_navBar_zk8z5_16", t = "_appShellHeader_zk8z5_25", o = "_button_zk8z5_42", _ = {
+  boardContainer: a,
+  appShell: e,
+  navBar: n,
+  appShellHeader: t,
+  button: o
+};
+export {
+  e as appShell,
+  t as appShellHeader,
+  a as boardContainer,
+  o as button,
+  _ as default,
+  n as navBar
+};

package/dist/components/PaymentCancel/PaymentCancel.js

@@ -0,0 +1,41 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { useNavigate as r } from "react-router-dom";
+import { NoData as a } from "../NoData/NoData.js";
+import { useMenu as s } from "../../hooks/useMenu.js";
+import { Stack as l } from "@mantine/core";
+import { IconChevronLeft as m, IconHome2 as c } from "@tabler/icons-react";
+const g = () => {
+  const i = r(), { t } = n(), { isMobile: o } = s();
+  return /* @__PURE__ */ e(l, { mih: "100dvh", gap: "sm", justify: "center", flex: 1, align: "center", children: /* @__PURE__ */ e(
+    a,
+    {
+      title: t("backPayment.title"),
+      flex: "0,0,0",
+      h: "60dvh",
+      w: o ? 500 : "70%",
+      titleProps: { mt: 40 },
+      description: t("backPayment.description"),
+      buttons: [
+        {
+          size: "md",
+          variant: "subtle",
+          leftSection: /* @__PURE__ */ e(m, { size: 18 }),
+          onClick: () => i("/settings/plans"),
+          children: t("backToPlans")
+        },
+        {
+          size: "md",
+          variant: "filled",
+          leftSection: /* @__PURE__ */ e(c, { size: 18 }),
+          onClick: () => i("/"),
+          children: t("404.goHome")
+        }
+      ],
+      illustration: "alertMan"
+    }
+  ) });
+};
+export {
+  g as PaymentCancel
+};

package/dist/components/PaymentError/PaymentError.js

@@ -0,0 +1,41 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { useNavigate as r } from "react-router-dom";
+import { NoData as s } from "../NoData/NoData.js";
+import { useMenu as c } from "../../hooks/useMenu.js";
+import { Stack as m } from "@mantine/core";
+import { IconChevronLeft as a, IconHome2 as l } from "@tabler/icons-react";
+const S = () => {
+  const o = r(), { t } = n(), { isMobile: i } = c();
+  return /* @__PURE__ */ e(m, { mih: "100dvh", gap: "sm", justify: "center", flex: 1, align: "center", children: /* @__PURE__ */ e(
+    s,
+    {
+      title: t("paymentNotSuccess.title"),
+      flex: "0,0,0",
+      h: "60dvh",
+      w: i ? 500 : "70%",
+      titleProps: { mt: 40 },
+      description: t("paymentNotSuccess.description"),
+      buttons: [
+        {
+          size: "md",
+          variant: "subtle",
+          leftSection: /* @__PURE__ */ e(a, { size: 18 }),
+          onClick: () => o("/settings/plans"),
+          children: t("backToPlans")
+        },
+        {
+          size: "md",
+          variant: "filled",
+          leftSection: /* @__PURE__ */ e(l, { size: 18 }),
+          onClick: () => o("/"),
+          children: t("404.goHome")
+        }
+      ],
+      illustration: "notSuccessMan"
+    }
+  ) });
+};
+export {
+  S as PaymentError
+};

package/dist/components/PaymentSuccess/PaymentSuccess.js

@@ -0,0 +1,41 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { useNavigate as s } from "react-router-dom";
+import { NoData as r } from "../NoData/NoData.js";
+import { useMenu as c } from "../../hooks/useMenu.js";
+import { Stack as m } from "@mantine/core";
+import { IconChevronLeft as a, IconHome2 as l } from "@tabler/icons-react";
+const g = () => {
+  const i = s(), { t } = n(), { isMobile: o } = c();
+  return /* @__PURE__ */ e(m, { mih: "100dvh", gap: "sm", justify: "center", flex: 1, align: "center", children: /* @__PURE__ */ e(
+    r,
+    {
+      title: t("paymentSuccess.title"),
+      flex: "0,0,0",
+      h: "60dvh",
+      w: o ? 500 : "70%",
+      titleProps: { mt: 40 },
+      description: t("paymentSuccess.description"),
+      buttons: [
+        {
+          size: "md",
+          variant: "subtle",
+          leftSection: /* @__PURE__ */ e(a, { size: 18 }),
+          onClick: () => i("/settings/plans"),
+          children: t("backToPlans")
+        },
+        {
+          size: "md",
+          variant: "filled",
+          leftSection: /* @__PURE__ */ e(l, { size: 18 }),
+          onClick: () => i("/"),
+          children: t("404.goHome")
+        }
+      ],
+      illustration: "paymentSuccess"
+    }
+  ) });
+};
+export {
+  g as PaymentSuccess
+};

package/dist/components/PinModal/PinModal.js

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useState as m, useRef as M, useMemo as z, useEffect as a } from "react";
+import { Modal as I, Box as j, Text as f, Stack as P, Flex as d, PinInput as T, Button as F } from "@mantine/core";
+import { useForm as w } from "@mantine/form";
+import { usePinModalStore as p, closePinModal as B } from "./slice.js";
+const G = () => {
+  const {
+    submitFunc: o,
+    description: r,
+    submitLabel: h,
+    hideGeneratedCode: i,
+    pinLength: s = 4
+  } = p(), [t, b] = m(""), [n, g] = m(""), u = M(null), x = z(() => t.length < s ? !0 : i ? !1 : t !== n, [t, s, i, n]), C = w({
+    initialValues: {
+      pinCode: ""
+    }
+  }), S = () => {
+    o(t, n);
+  };
+  return a(() => {
+    const l = Math.floor(1e3 + Math.random() * 9e3).toString();
+    g(l);
+  }, []), a(() => {
+    const y = setTimeout(() => {
+      u.current && u.current.focus();
+    }, 1);
+    return () => clearTimeout(y);
+  }, []), /* @__PURE__ */ c(j, { children: [
+    /* @__PURE__ */ e(f, { c: "dimmed", fz: 12, mt: 19, lh: "14px", children: r }),
+    /* @__PURE__ */ e("form", { onSubmit: C.onSubmit(S), children: /* @__PURE__ */ c(P, { gap: 0, children: [
+      /* @__PURE__ */ e(d, { justify: "center", align: "center", children: !i && /* @__PURE__ */ e(
+        f,
+        {
+          size: "xl",
+          fw: 600,
+          style: { letterSpacing: "5px" },
+          fz: 32,
+          my: 12,
+          children: n
+        }
+      ) }),
+      /* @__PURE__ */ e(d, { justify: "center", align: "center", mb: "md", children: /* @__PURE__ */ e(
+        T,
+        {
+          ref: u,
+          length: s,
+          value: t,
+          onChange: b,
+          styles: {
+            pinInput: {
+              marginTop: "12px"
+            }
+          },
+          type: "number",
+          radius: "sm",
+          placeholder: "○",
+          size: "sm",
+          gap: "md"
+        }
+      ) }),
+      /* @__PURE__ */ e(d, { justify: "flex-end", mt: "md", children: /* @__PURE__ */ e(
+        F,
+        {
+          fullWidth: !0,
+          w: "auto",
+          type: "submit",
+          size: "sm",
+          disabled: x,
+          children: h
+        }
+      ) })
+    ] }) })
+  ] });
+}, E = () => {
+  const { opened: o, title: r } = p();
+  return /* @__PURE__ */ e(
+    I,
+    {
+      size: "md",
+      opened: o,
+      centered: !0,
+      onClose: B,
+      title: r,
+      children: /* @__PURE__ */ e(G, {})
+    }
+  );
+};
+export {
+  E as PinModal
+};

package/dist/components/PinModal/slice.js

@@ -0,0 +1,28 @@
+import { create as i } from "zustand";
+const t = i(() => ({
+  opened: !1,
+  submitFunc: () => {
+  },
+  title: "",
+  description: "",
+  submitLabel: "",
+  hideGeneratedCode: !1,
+  pinLength: 4
+})), s = (e) => {
+  t.setState({
+    opened: !0,
+    title: e.title,
+    description: e.description,
+    submitLabel: e.submitLabel,
+    submitFunc: e.submitFunc,
+    hideGeneratedCode: e.hideGeneratedCode,
+    pinLength: e.pinLength
+  });
+}, d = () => {
+  t.setState({ opened: !1 });
+};
+export {
+  d as closePinModal,
+  s as openPinModal,
+  t as usePinModalStore
+};

package/dist/components/ProjectIcon/ProjectIcon.d.ts

@@ -34,4 +34,5 @@ export declare const ProjectIcon: import('react').ForwardRefExoticComponent<{
     size?: number | string;
     textSize?: number;
 } & import('react').RefAttributes<HTMLDivElement>>;
+export declare const renderIcon: (data: IconData | null, fallback?: ProjectIconProps["fallback"], initials?: ProjectIconProps["initials"], name?: ProjectIconProps["name"]) => string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/ProjectIcon/ProjectIcon.js

@@ -0,0 +1,88 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { Avatar as h, Text as y } from "@mantine/core";
+import { omit as j, isString as L, isNil as w } from "lodash-es";
+import x from "query-string";
+import { DEFAULT_VALUES as S } from "../../constants.js";
+import { customIcons as v } from "../EmojiPicker/custom-icons/customIcons.js";
+var I = /* @__PURE__ */ ((r) => (r.OUTLINED = "o", r.FILLED = "f", r))(I || {}), c;
+((r) => {
+  r.parse = (t) => {
+    if (!L(t) || t.trim() === "") return null;
+    const e = new URLSearchParams(t);
+    return {
+      icon: e.get("i") || "",
+      emoji: e.get("e") || "",
+      color: e.get("c") || "",
+      type: e.get("t") || "o"
+      /* OUTLINED */
+    };
+  }, r.stringify = (t) => w(t) ? "" : x.stringify({
+    i: t.icon || void 0,
+    c: t.color || void 0,
+    e: t.emoji || void 0,
+    t: t.type || "o"
+    /* OUTLINED */
+  });
+})(c || (c = {}));
+const O = d(
+  ({
+    icon: r,
+    name: t,
+    fallback: e,
+    size: i,
+    textSize: n,
+    fallbackColorById: f,
+    initials: l = !0,
+    fallbackColor: g,
+    ...s
+  }, p) => {
+    const m = c.parse(r);
+    if (!m && !e) return null;
+    const u = m?.color || (f ? "initials" : g) || S.COLORS[0];
+    return /* @__PURE__ */ o(
+      h,
+      {
+        ref: p,
+        variant: "transparent",
+        color: u,
+        name: f,
+        size: i || 20,
+        style: {
+          overflow: s.radius ? "hidden" : "visible",
+          ...s.style
+        },
+        ...j(s, ["style"]),
+        children: /* @__PURE__ */ o(
+          y,
+          {
+            fz: `${n || i}px`,
+            fw: "bold",
+            tt: "uppercase",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              lineHeight: "normal"
+            },
+            children: A(m, e, l, t)
+          }
+        )
+      }
+    );
+  }
+), A = (r, t, e, i) => {
+  const n = v?.[r?.icon || ""];
+  return n ? /* @__PURE__ */ o(n, { width: "1em", height: "1em" }) : r?.icon ? /* @__PURE__ */ o("svg", { width: "1em", height: "1em", children: /* @__PURE__ */ o(
+    "use",
+    {
+      xlinkHref: `/tabler-sprite${r.type === "f" ? "-filled" : ""}.svg#tabler-${r.type === "f" ? "filled-" : ""}${r.icon}`
+    }
+  ) }) : r?.emoji ? r.emoji : t || (i && e ? C(i) : null);
+}, C = (r) => String.fromCodePoint(r?.trim()?.codePointAt(0) ?? 1);
+export {
+  c as IconEntity,
+  I as IconType,
+  O as ProjectIcon,
+  A as renderIcon
+};

package/dist/components/SearchFilters/SearchFilters.js

@@ -0,0 +1,37 @@
+import { jsx as o, jsxs as f, Fragment as i } from "react/jsx-runtime";
+import { Flex as x } from "@mantine/core";
+import { DateFilter as u } from "./components/DateFilter.js";
+import { Sort as y } from "./components/Sort.js";
+import { Type as O } from "./components/Type.js";
+const R = ({
+  setSelectedFilter: r,
+  selectedFilter: m,
+  allowedTypes: p = ["PAGE", "PROJECT", "FORM", "FLOW", "FOLDER"],
+  allowedFilters: n = ["type", "range", "sort"]
+}) => /* @__PURE__ */ o(x, { my: 12, px: 10, children: r && /* @__PURE__ */ f(i, { children: [
+  n.includes("sort") && /* @__PURE__ */ o(
+    y,
+    {
+      selectedFilter: m,
+      setSelectedFilter: r
+    }
+  ),
+  n.includes("range") && /* @__PURE__ */ o(
+    u,
+    {
+      selectedFilter: m,
+      setSelectedFilter: r
+    }
+  ),
+  n.includes("type") && /* @__PURE__ */ o(
+    O,
+    {
+      allowedTypes: p,
+      selectedFilter: m,
+      setSelectedFilter: r
+    }
+  )
+] }) });
+export {
+  R as SearchFilters
+};

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

@@ -0,0 +1,9 @@
+const l = "_filterPill_cfyaq_1", e = "_filterPillLabel_cfyaq_9", i = {
+  filterPill: l,
+  filterPillLabel: e
+};
+export {
+  i as default,
+  l as filterPill,
+  e as filterPillLabel
+};

package/dist/components/SearchFilters/components/DateFilter.js

@@ -0,0 +1,199 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { useTranslation as I } from "react-i18next";
+import { parseDate as w } from "../../../helpers/dates.js";
+import { Popover as m, Pill as j, Flex as A, Select as O, Button as T, Divider as D } from "@mantine/core";
+import { DatePicker as E } from "@mantine/dates";
+import { IconCalendarEvent as l, IconChevronDown as x, IconClockEdit as R } from "@tabler/icons-react";
+import { endOfDay as u, startOfDay as f, subDays as b, format as v } from "date-fns";
+import p from "../SearchFilters.module.css.js";
+const J = ({ setSelectedFilter: i, selectedFilter: s }) => {
+  const { t: a, i18n: F } = I("searchPage"), [o, d] = y([
+    null,
+    null
+  ]), [h, M] = y("updatedAt"), g = () => {
+    i(
+      (e) => ({
+        ...e,
+        range: null
+      })
+    ), d([null, null]);
+  }, P = (e) => {
+    if (s?.range?.createdAtFrom === e.createdAtFrom && s?.range?.createdAtTo === e.createdAtTo)
+      g();
+    else {
+      const c = e.createdAtFrom ? new window.Date(e.createdAtFrom) : null, S = e.createdAtTo ? new window.Date(e.createdAtTo) : null;
+      d([c, S]), i((z) => ({
+        ...z,
+        range: {
+          createdAtFrom: e.createdAtFrom || 0,
+          createdAtTo: e.createdAtTo || 0
+        }
+      }));
+    }
+  }, C = (e) => {
+    const r = [
+      w(e[0]),
+      w(e[1])
+    ];
+    d(r), i(
+      (c) => ({
+        ...c,
+        range: {
+          createdAtFrom: r[0]?.getTime() || 0,
+          createdAtTo: r[1]?.getTime() || 0
+        }
+      })
+    );
+  }, k = [
+    {
+      icon: /* @__PURE__ */ t(l, {}),
+      text: a("searchModal.filters.date.today"),
+      range: {
+        createdAtFrom: f(/* @__PURE__ */ new Date()).getTime(),
+        createdAtTo: u(/* @__PURE__ */ new Date()).getTime()
+      }
+    },
+    {
+      icon: /* @__PURE__ */ t(l, {}),
+      text: a("searchModal.filters.date.last7day"),
+      range: {
+        createdAtFrom: f(b(/* @__PURE__ */ new Date(), 7)).getTime(),
+        createdAtTo: u(/* @__PURE__ */ new Date()).getTime()
+      }
+    },
+    {
+      icon: /* @__PURE__ */ t(l, {}),
+      text: a("searchModal.filters.date.last30day"),
+      range: {
+        createdAtFrom: f(b(/* @__PURE__ */ new Date(), 30)).getTime(),
+        createdAtTo: u(/* @__PURE__ */ new Date()).getTime()
+      }
+    }
+  ];
+  return /* @__PURE__ */ n(
+    m,
+    {
+      transitionProps: { duration: 150, transition: "fade-down" },
+      withArrow: !0,
+      position: "bottom-start",
+      radius: "md",
+      children: [
+        /* @__PURE__ */ t(m.Target, { children: /* @__PURE__ */ n(
+          j,
+          {
+            classNames: {
+              root: p.filterPill,
+              label: p.filterPillLabel
+            },
+            styles: {
+              root: {
+                background: Object.keys(s?.range || {}).length ? "#228BE61F" : "transparent"
+              }
+            },
+            radius: "lg",
+            children: [
+              /* @__PURE__ */ t(l, { size: 16 }),
+              o[0] && o[1] ? `${v(o[0], "dd MMM yyyy")} — ${v(o[1], "dd MMM yyyy")}` : a("searchModal.filters.date.title"),
+              /* @__PURE__ */ t(x, { size: 16 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(m.Dropdown, { p: 4, w: 270, children: /* @__PURE__ */ n(A, { gap: 0, direction: "column", justify: "start", children: [
+          /* @__PURE__ */ n(A, { justify: "space-between", w: "100%", children: [
+            /* @__PURE__ */ t(
+              O,
+              {
+                comboboxProps: { withinPortal: !1 },
+                w: 150,
+                classNames: {
+                  input: p.selectInput
+                },
+                styles: {
+                  root: {
+                    paddingInline: 0,
+                    paddingLeft: 3
+                  },
+                  input: {
+                    color: "gray",
+                    fontSize: 12
+                  }
+                },
+                defaultValue: h,
+                variant: "unstyled",
+                withCheckIcon: !1,
+                value: h,
+                leftSection: /* @__PURE__ */ t(R, { size: 12 }),
+                rightSection: /* @__PURE__ */ t(x, { size: 12 }),
+                fz: "xs",
+                px: 12,
+                c: "dimmed",
+                onChange: (e) => M((r) => e || r),
+                data: [
+                  {
+                    value: "createdAt",
+                    label: a("searchModal.filters.date.created")
+                  },
+                  {
+                    value: "updatedAt",
+                    label: a("searchModal.filters.date.edited")
+                  }
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(
+              T,
+              {
+                px: 12,
+                w: "30%",
+                variant: "subtle",
+                style: { alignSelf: "flex-start" },
+                onClick: g,
+                children: a("clear")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t(D, { w: "100%" }),
+          k.map((e) => /* @__PURE__ */ t(
+            T,
+            {
+              h: 32,
+              fullWidth: !0,
+              leftSection: e.icon,
+              variant: "subtle",
+              fz: "sm",
+              color: "system",
+              onClick: () => P(e.range),
+              styles: {
+                section: {
+                  width: 16,
+                  height: 16
+                },
+                inner: {
+                  justifyContent: "flex-start"
+                }
+              },
+              children: e.text
+            },
+            e.text
+          )),
+          /* @__PURE__ */ t(D, { w: "100%" }),
+          /* @__PURE__ */ t(
+            E,
+            {
+              pt: 16,
+              type: "range",
+              value: o,
+              locale: F.language,
+              onChange: C,
+              allowSingleDateInRange: !0
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  J as DateFilter
+};