@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/CommunitiesDialog/index.js

@@ -0,0 +1,149 @@
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import { useTranslation as h, Trans as g } from "react-i18next";
+import { Dialog as f, Stack as n, Flex as c, Text as s, Button as a, Group as u } from "@mantine/core";
+import { IconAmpersand as w, IconBrandDiscord as x, IconBrandTelegram as D } from "@tabler/icons-react";
+import { useMenu as y } from "../../hooks/useMenu.js";
+import { useDiscordDialogStore as b, closeUserDiscordDialog as F } from "../../store/discordDialogStore.js";
+import k from "../../assets/svg/discord.svg.js";
+import v from "../../assets/svg/telegram.svg.js";
+import z from "./styles.module.css.js";
+const E = ({
+  handleAccess: l,
+  handleRemindLater: p
+}) => {
+  const { t: i } = h(), { opened: m } = b((d) => d), t = () => {
+    F();
+  }, { isMobile: r } = y();
+  return /* @__PURE__ */ o(
+    f,
+    {
+      opened: m,
+      onClose: () => {
+        p(), t();
+      },
+      radius: "md",
+      withCloseButton: !0,
+      mih: 289,
+      maw: 380,
+      w: "auto",
+      shadow: "md",
+      pt: 0,
+      px: 0,
+      pb: 12,
+      bg: "var(--app-container-background)",
+      style: {
+        position: "relative"
+      },
+      ml: 5,
+      position: r ? {
+        right: 5,
+        bottom: 0
+      } : void 0,
+      children: /* @__PURE__ */ e(n, { w: "100%", children: [
+        /* @__PURE__ */ o(
+          c,
+          {
+            h: "50%",
+            w: "100%",
+            className: z.section,
+            style: { zIndex: -1 }
+          }
+        ),
+        /* @__PURE__ */ e(n, { gap: 32, w: "100%", children: [
+          /* @__PURE__ */ e(c, { w: "100%", justify: "center", pt: 30, children: [
+            /* @__PURE__ */ o(k, { width: 66, height: 66 }),
+            /* @__PURE__ */ o(w, { color: "#FFFFFF", size: 32 }),
+            /* @__PURE__ */ o(v, { width: 66, height: 66 })
+          ] }),
+          /* @__PURE__ */ e(
+            n,
+            {
+              gap: 8,
+              align: "center",
+              justify: "space-between",
+              w: "100%",
+              px: 12,
+              children: [
+                /* @__PURE__ */ o(s, { fz: 20, fw: 700, lh: "24px", ta: "center", children: /* @__PURE__ */ o(
+                  g,
+                  {
+                    i18nKey: i("communityDialog.desc1"),
+                    components: {
+                      Text: /* @__PURE__ */ o(
+                        s,
+                        {
+                          fz: "inherit",
+                          fw: "inherit",
+                          component: "span",
+                          td: "wavy underline"
+                        }
+                      )
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ o(s, { px: 12, fz: 14, lh: "16px", ta: "center", children: i("communityDialog.desc2") }),
+                /* @__PURE__ */ e(
+                  c,
+                  {
+                    w: "100%",
+                    justify: "space-between",
+                    p: 0,
+                    mt: 16,
+                    gap: 0,
+                    wrap: "wrap",
+                    children: [
+                      /* @__PURE__ */ o(
+                        a,
+                        {
+                          variant: "subtle",
+                          onClick: () => {
+                            p(), t();
+                          },
+                          children: i("communityDialog.remind")
+                        }
+                      ),
+                      /* @__PURE__ */ e(u, { gap: 8, children: [
+                        /* @__PURE__ */ o(
+                          a,
+                          {
+                            component: "a",
+                            href: "https://discord.gg/mEd2PbchRD",
+                            target: "_blank",
+                            px: 16,
+                            color: "#5A66F5",
+                            onClick: () => {
+                              l(), t();
+                            },
+                            children: r ? /* @__PURE__ */ o(x, { size: 20 }) : "Discord"
+                          }
+                        ),
+                        /* @__PURE__ */ o(
+                          a,
+                          {
+                            onClick: () => {
+                              l(), t();
+                            },
+                            component: "a",
+                            href: "https://t.me/layers_app",
+                            target: "_blank",
+                            c: "#fff",
+                            px: 16,
+                            color: "#3BB3F2",
+                            children: r ? /* @__PURE__ */ o(D, { size: 20 }) : "Telegram"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  E as CommunitiesDialog
+};

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

@@ -0,0 +1,7 @@
+const s = "_section_ew7ws_3", t = {
+  section: s
+};
+export {
+  t as default,
+  s as section
+};

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

@@ -0,0 +1,7 @@
+const r = "_brandingWrapper_vvk0o_1", a = {
+  brandingWrapper: r
+};
+export {
+  r as brandingWrapper,
+  a as default
+};

package/dist/components/Copyright/index.d.ts

@@ -4,7 +4,6 @@ interface CopyrightProps {
     className?: string;
     color?: string;
     title?: string;
-    size?: ButtonProps['size'];
 }
-export declare const Copyright: React.FC<CopyrightProps>;
+export declare const Copyright: React.FC<CopyrightProps & ButtonProps>;
 export {};

package/dist/components/Copyright/index.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { DEFAULT_FONT_FAMILY as n } from "../../constants.js";
+import { Button as p } from "@mantine/core";
+import a from "clsx";
+import { Logotype as l } from "../Logotype.js";
+import f from "./Copyright.module.css.js";
+const F = ({
+  color: o,
+  title: t,
+  className: e,
+  size: i = "md",
+  ...m
+}) => /* @__PURE__ */ r(
+  p,
+  {
+    component: "a",
+    href: "https://layers.md",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    leftSection: /* @__PURE__ */ r(l, { variant: "copyright", isLink: !1 }),
+    variant: "filled",
+    size: i,
+    color: o,
+    className: a(f.brandingWrapper, e),
+    style: { fontFamily: n },
+    ...m,
+    children: t
+  }
+);
+export {
+  F as Copyright
+};

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

@@ -0,0 +1,7 @@
+const o = "_root_195do_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/CustomKBD/index.js

@@ -0,0 +1,40 @@
+import { jsx as c } from "react/jsx-runtime";
+import { Box as f } from "@mantine/core";
+import n from "./CustomKBD.module.css.js";
+const B = ({
+  value: o,
+  miw: r = 31,
+  w: t = 16,
+  mr: e = 0,
+  fz: s = 12,
+  fontFamily: m = "Space Mono",
+  fw: a = 400,
+  bbw: d = 2,
+  br: i = 4,
+  onClick: p = () => {
+  },
+  ...l
+}) => /* @__PURE__ */ c(
+  f,
+  {
+    ...l,
+    className: n.root,
+    onClick: p,
+    py: 2,
+    miw: r,
+    w: t,
+    mr: e,
+    fw: a,
+    fz: s,
+    style: {
+      borderRadius: i,
+      borderBottomWidth: d,
+      fontFamily: m
+    },
+    children: o
+  }
+);
+export {
+  B as CustomKBD,
+  B as default
+};

package/dist/components/EmojiPicker/EmojiPanel.d.ts

@@ -1,4 +1,4 @@
-import { EmojiPickerProps } from '../..';
+import { EmojiPickerProps } from './EmojiPicker';
 export declare const EmojiPanel: ({ locales, onChange, onClose, setRandomIcon, querySearch, }: Pick<EmojiPickerProps, "locales" | "value" | "onChange" | "querySearch"> & {
     onClose: () => void;
     setRandomIcon: (icon: string) => void;

package/dist/components/EmojiPicker/EmojiPanel.js

@@ -0,0 +1,273 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import { useState as u, useRef as d, useEffect as R, useCallback as K } from "react";
+import { useTranslation as L } from "react-i18next";
+import { Search01Icon as U, ShuffleIcon as V, Clock01Icon as W, SmileIcon as X, Pizza01Icon as Z, FootballIcon as _, Airplane01Icon as ee, BulbIcon as te, Asterisk02Icon as oe, Flag02Icon as re } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as c } from "@hugeicons/react";
+import { IconEntity as ne } from "../ProjectIcon/ProjectIcon.js";
+import { pickRandomEmoji as ie } from "../../helpers/pickRandomEmoji.js";
+import { Stack as z, FocusTrap as ce, Flex as j, TextInput as se, Tooltip as ae, ActionIcon as A, Paper as F, Text as q, SimpleGrid as N, Box as le } from "@mantine/core";
+import { useEvent as fe } from "draggable-ui";
+import ue from "fuse.js";
+import de from "../../assets/svg/dog.svg.js";
+import { NoData as me } from "../NoData/NoData.js";
+import { frequentEmoji as pe } from "./constants.js";
+import T from "./EmojiPicker.module.css.js";
+const he = [
+  { i: "frequent", icon: /* @__PURE__ */ t(c, { size: 20, icon: W }) },
+  { i: "people", icon: /* @__PURE__ */ t(c, { size: 20, icon: X }) },
+  {
+    i: "nature",
+    icon: /* @__PURE__ */ t(de, { width: 20, height: 20 })
+  },
+  { i: "foods", icon: /* @__PURE__ */ t(c, { size: 20, icon: Z }) },
+  { i: "activity", icon: /* @__PURE__ */ t(c, { size: 20, icon: _ }) },
+  { i: "places", icon: /* @__PURE__ */ t(c, { size: 20, icon: ee }) },
+  { i: "objects", icon: /* @__PURE__ */ t(c, { size: 20, icon: te }) },
+  { i: "symbols", icon: /* @__PURE__ */ t(c, { size: 20, icon: oe }) },
+  { i: "flags", icon: /* @__PURE__ */ t(c, { size: 20, icon: re }) }
+], Re = ({
+  locales: m,
+  onChange: x,
+  onClose: M,
+  setRandomIcon: P,
+  querySearch: p
+}) => {
+  const [y, b] = u("frequent"), k = d("frequent"), h = d({}), I = d(null), [C, w] = u(""), [Q, B] = u([]), [a, O] = u(null), [S, E] = u([]), { t: G } = L(), g = d(!1), l = d(null);
+  R(() => {
+    if (typeof p == "string") {
+      const e = p.slice(1);
+      if (w(e), a) {
+        const o = a.search(e);
+        E(o.map((r) => r.item.e));
+      }
+    }
+  }, [p, a]), R(() => {
+    (async () => {
+      const { default: o } = await import("../../assets/jsons/emoji-categorized.json.js"), r = o.flatMap(
+        (i) => i.e.map((n) => ({
+          e: n.e,
+          // эмодзи
+          n: n.n,
+          // название
+          k: n.k
+          // категория
+        }))
+      ), s = pe.map(
+        (i) => r.find((n) => n.e === i)
+      );
+      B([{ i: "frequent", e: s }, ...o]);
+      const f = new ue(
+        o.flatMap(
+          (i) => i.e.map((n) => ({
+            e: n.e,
+            n: n.n,
+            k: n.k
+          }))
+        ),
+        {
+          keys: ["n", "k"],
+          threshold: 0.3
+        }
+      );
+      O(f);
+    })();
+  }, []);
+  const H = K(
+    (e) => {
+      const o = e.currentTarget.value;
+      if (w(o), a) {
+        const r = a.search(o);
+        E(r.map((s) => s.item.e));
+      }
+    },
+    [a]
+  ), D = fe((e) => {
+    const o = e.currentTarget.getAttribute("data-icon");
+    o && (x?.(
+      ne.stringify({
+        emoji: o.replace("e:", "")
+      })
+    ), M());
+  }), Y = (e) => {
+    const o = I.current, r = h.current[e.i];
+    if (!o || !r) return;
+    g.current = !0, l.current = e.i, b(e.i);
+    const s = r.offsetTop - o.offsetTop;
+    o.scrollTo({ top: s, behavior: "smooth" });
+  }, $ = () => {
+    const e = I.current;
+    if (!e) return;
+    const o = e.scrollTop;
+    if (g.current && l.current) {
+      const f = h.current[l.current];
+      if (f) {
+        const i = f.offsetTop - e.offsetTop;
+        Math.abs(i - o) < 12 && (g.current = !1, k.current = l.current, b(l.current), l.current = null);
+      }
+      if (g.current) return;
+    }
+    let r = "frequent", s = 1 / 0;
+    Object.entries(h.current).forEach(([f, i]) => {
+      if (i) {
+        const n = Math.abs(i.offsetTop - e.offsetTop - o);
+        n < s && (s = n, r = f);
+      }
+    }), r !== k.current && (k.current = r, b(r));
+  }, J = typeof p == "string";
+  return /* @__PURE__ */ v(z, { gap: 0, h: "100%", children: [
+    /* @__PURE__ */ t(ce, { active: !0, children: /* @__PURE__ */ v(
+      j,
+      {
+        my: "sm",
+        justify: "space-between",
+        px: 8,
+        w: "100%",
+        gap: 4,
+        h: 38,
+        children: [
+          /* @__PURE__ */ t(
+            se,
+            {
+              leftSection: /* @__PURE__ */ t(c, { size: 16, icon: U }),
+              value: C,
+              placeholder: `${m?.search}...`,
+              "data-autofocus": !0,
+              styles: {
+                input: {
+                  border: "1px solid var(--mantine-color-default-border)",
+                  borderRadius: "var(--mantine-radius-default)"
+                }
+              },
+              w: 320,
+              onChange: H,
+              radius: "var(--mantine-radius-default)"
+            }
+          ),
+          /* @__PURE__ */ t(ae, { withArrow: !0, label: G("random"), children: /* @__PURE__ */ t(
+            A,
+            {
+              h: 36,
+              w: 36,
+              variant: "outline",
+              color: "var(--mantine-color-default-border)",
+              onClick: () => ie(P, x),
+              className: T.randomIcon,
+              children: /* @__PURE__ */ t(
+                c,
+                {
+                  color: "var(--mantine-color-default-color)",
+                  size: 20,
+                  icon: V
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(z, { pl: 8, h: "230px", children: /* @__PURE__ */ t(
+      z,
+      {
+        gap: "xs",
+        h: "100%",
+        pb: 4,
+        style: {
+          overflowY: "auto"
+        },
+        ref: I,
+        onScroll: $,
+        children: C ? /* @__PURE__ */ v("div", { children: [
+          !J && /* @__PURE__ */ t(
+            F,
+            {
+              py: 6,
+              pos: "sticky",
+              top: -1,
+              style: { zIndex: 1 },
+              bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
+              children: /* @__PURE__ */ t(q, { fz: "sm", c: "dimmed", children: m?.searchResults })
+            }
+          ),
+          S.length ? /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: S.map((e) => /* @__PURE__ */ t(
+            "div",
+            {
+              className: T.item,
+              "data-icon": e,
+              onClick: D,
+              children: e
+            },
+            e
+          )) }) : /* @__PURE__ */ t(le, { children: /* @__PURE__ */ t(
+            me,
+            {
+              size: 100,
+              description: m?.searchNoResults,
+              descriptionProps: {
+                fz: "sm"
+              }
+            }
+          ) })
+        ] }) : Q.map((e) => /* @__PURE__ */ v(
+          "div",
+          {
+            ref: (o) => {
+              h.current[e.i] = o;
+            },
+            children: [
+              /* @__PURE__ */ t(
+                F,
+                {
+                  bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
+                  py: 2,
+                  pos: "sticky",
+                  top: -1,
+                  h: 23,
+                  style: { zIndex: 1 },
+                  children: /* @__PURE__ */ t(q, { fz: "xs", c: "dimmed", children: m?.emojiCategory?.[e.i] })
+                }
+              ),
+              /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: e.e.map((o) => /* @__PURE__ */ t(
+                "div",
+                {
+                  className: T.item,
+                  "data-icon": o.e,
+                  onClick: D,
+                  children: o.e
+                },
+                o.e
+              )) })
+            ]
+          },
+          e.i
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      j,
+      {
+        style: {
+          borderTop: "1px solid var(--tab-border-color)"
+        },
+        justify: "space-between",
+        h: "56px",
+        px: 8,
+        children: he.map((e) => /* @__PURE__ */ t(
+          A,
+          {
+            variant: y === e.i ? "light" : "subtle",
+            color: y === e.i ? "var(--mantine-color-default-color)" : "var(--mantine-color-dimmed)",
+            radius: "default",
+            size: 32,
+            onClick: () => Y(e),
+            "data-active": y === e.i,
+            children: e.icon
+          },
+          e.i
+        ))
+      }
+    )
+  ] });
+};
+export {
+  Re as EmojiPanel
+};

package/dist/components/EmojiPicker/EmojiPicker.d.ts

@@ -25,6 +25,7 @@ export type EmojiPickerLocales = {
     emojis?: string;
     search?: string;
     searchResults?: string;
+    chooseColor?: string;
     searchNoResults?: string;
     remove?: string;
     icons?: string;