@layers-app/shared 0.1.5 → 0.2.1

package/dist/components/EmojiPicker/EmojiPanel.js

@@ -0,0 +1,271 @@
+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 { Stack as z, FocusTrap as ne, Flex as j, TextInput as ie, Tooltip as ce, ActionIcon as A, Paper as F, Text as q, SimpleGrid as N, Box as se } from "@mantine/core";
+import { useEvent as ae } from "draggable-ui";
+import le from "fuse.js";
+import fe from "../../assets/svg/dog.svg.js";
+import { pickRandomEmoji as ue } from "../../helpers/pickRandomEmoji.js";
+import { NoData as de } from "../NoData/NoData.js";
+import { IconEntity as me } from "../ProjectIcon/ProjectIcon.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(fe, { 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 o = (await import("../../assets/jsons/emoji-categorized.json.js")).default, 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 le(
+        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 = ae((e) => {
+    const o = e.currentTarget.getAttribute("data-icon");
+    o && (x?.(
+      me.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(ne, { active: !0, children: /* @__PURE__ */ v(
+      j,
+      {
+        my: "sm",
+        justify: "space-between",
+        px: 8,
+        w: "100%",
+        gap: 4,
+        h: 38,
+        children: [
+          /* @__PURE__ */ t(
+            ie,
+            {
+              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(ce, { withArrow: !0, label: G("random"), children: /* @__PURE__ */ t(
+            A,
+            {
+              h: 36,
+              w: 36,
+              variant: "outline",
+              color: "var(--mantine-color-default-border)",
+              onClick: () => ue(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(se, { children: /* @__PURE__ */ t(
+            de,
+            {
+              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,9 +25,11 @@ export type EmojiPickerLocales = {
     emojis?: string;
     search?: string;
     searchResults?: string;
+    chooseColor?: string;
     searchNoResults?: string;
     remove?: string;
     icons?: string;
     emojiCategory?: Record<string, string>;
 };
 export declare const EmojiPicker: ({ project, value, querySearch, children, onChange, position, popoverProps, showIcons, showColors, defaultActiveTab, showEmojis, withinPortal, locales: _locales, openWhen, triggerRegex, typingSeq, showRemoveButton, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmojiPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAIxE,OAAO,EAIL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yNAkBzB,iBAAiB,CAAC,gBAAgB,CAAC,4CAuNrC,CAAC"}

package/dist/components/EmojiPicker/EmojiPicker.js

@@ -0,0 +1,222 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useState as a, useMemo as E, useEffect as M } from "react";
+import { flushSync as G } from "react-dom";
+import { useTranslation as J } from "react-i18next";
+import { Popover as k, Center as K, Tabs as t, Flex as R, Button as S } from "@mantine/core";
+import { IconEntity as U } from "../ProjectIcon/ProjectIcon.js";
+import { EmojiPanel as V } from "./EmojiPanel.js";
+import { IconsPanel as X } from "./IconsPanel.js";
+import f from "./EmojiPicker.module.css.js";
+const re = ({
+  project: $,
+  value: s,
+  querySearch: l,
+  children: D,
+  onChange: d,
+  position: I = "bottom-start",
+  popoverProps: y,
+  showIcons: u,
+  showColors: O,
+  defaultActiveTab: w = null,
+  showEmojis: r = !0,
+  withinPortal: z = !1,
+  locales: h,
+  openWhen: g = "click",
+  triggerRegex: P = /(^|\s):([^\s:]{1,})$/,
+  typingSeq: m,
+  showRemoveButton: F = !0
+}) => {
+  const { t: e } = J("ui"), [p, n] = a(!1), [H, b] = a(w), [T, L] = a(500), [A, B] = a(s || null), [v, Q] = a(null), c = E(() => ({
+    emojis: e("emojis"),
+    remove: e("remove"),
+    search: e("search"),
+    searchResults: e("emojiPicker.searchResults"),
+    icons: e("emojiPicker.icons"),
+    searchNoResults: e("emojiPicker.searchNoResults"),
+    chooseColor: e("emojiPicker.chooseColor"),
+    emojiCategory: {
+      frequent: e("emojiPicker.categories.frequent"),
+      people: e("emojiPicker.categories.people"),
+      nature: e("emojiPicker.categories.nature"),
+      foods: e("emojiPicker.categories.foods"),
+      activity: e("emojiPicker.categories.activity"),
+      places: e("emojiPicker.categories.places"),
+      objects: e("emojiPicker.categories.objects"),
+      symbols: e("emojiPicker.categories.symbols"),
+      flags: e("emojiPicker.categories.flags"),
+      ...h?.emojiCategory
+    },
+    ...h
+  }), [e, h]);
+  M(() => {
+    const i = u && U.parse(s)?.icon ? "icons" : r ? "emojis" : null;
+    !p && i && b(i);
+  }, [p, r, u, s]), M(() => {
+    if (g !== "realtime" || typeof m != "number" || v === m) return;
+    Q(m);
+    const i = l ?? "", j = !!r && P.test(i);
+    n(j);
+  }, [
+    g,
+    m,
+    v,
+    l,
+    P,
+    r
+  ]);
+  const C = typeof l == "string";
+  return /* @__PURE__ */ x(
+    k,
+    {
+      withinPortal: z,
+      opened: p,
+      onChange: n,
+      position: I,
+      radius: "var(--mantine-spacing-sm)",
+      styles: {
+        dropdown: {
+          padding: 0,
+          width: "380px",
+          height: "404px",
+          display: "flex",
+          flexDirection: "column",
+          minHeight: 50
+        }
+      },
+      middlewares: {
+        size: {
+          apply({ availableHeight: i, placement: j, y: N, elements: q }) {
+            G(() => L(i - 20)), C && requestAnimationFrame(() => {
+              Object.assign(q.floating.style, {
+                maxHeight: `${i >= 425 ? 425 : i}px`,
+                top: j === "top-start" ? `${N - 20}px` : `${N}px`
+              });
+            });
+          }
+        }
+      },
+      ...y || {},
+      children: [
+        /* @__PURE__ */ o(k.Target, { children: /* @__PURE__ */ o(
+          K,
+          {
+            onClick: g === "click" && !y?.disabled ? () => n(!p) : void 0,
+            children: D ?? A
+          }
+        ) }),
+        /* @__PURE__ */ o(k.Dropdown, { w: "380px", h: "404px", children: /* @__PURE__ */ x(
+          t,
+          {
+            value: H,
+            onChange: b,
+            keepMounted: !1,
+            h: "100%",
+            styles: {
+              root: {
+                display: "flex",
+                flexDirection: "column"
+              },
+              panel: {
+                display: "block"
+              },
+              list: {
+                alignItems: "center",
+                paddingRight: "var(--mantine-spacing-xs)"
+              }
+            },
+            children: [
+              !C && /* @__PURE__ */ x(
+                t.List,
+                {
+                  style: {
+                    gap: "4px"
+                  },
+                  h: 54,
+                  px: 8,
+                  children: [
+                    r && /* @__PURE__ */ o(
+                      t.Tab,
+                      {
+                        className: f.originalTab,
+                        h: "100%",
+                        p: 0,
+                        value: "emojis",
+                        children: /* @__PURE__ */ o(R, { className: f.customTab, px: "sm", h: 36, children: c.emojis })
+                      }
+                    ),
+                    u && /* @__PURE__ */ o(
+                      t.Tab,
+                      {
+                        className: f.originalTab,
+                        h: "100%",
+                        p: 0,
+                        value: "icons",
+                        children: /* @__PURE__ */ o(R, { className: f.customTab, px: "sm", h: 36, children: c.icons })
+                      }
+                    ),
+                    !!String(s) && F && /* @__PURE__ */ o(
+                      S,
+                      {
+                        variant: "subtle",
+                        fz: "sm",
+                        lh: "sm",
+                        fw: 500,
+                        px: 7,
+                        h: 30,
+                        color: "var(--mantine-color-gray-light-color)",
+                        onClick: () => d?.(""),
+                        style: { marginLeft: "auto" },
+                        children: c.remove
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o(
+                t.Panel,
+                {
+                  mah: Math.min(T, 470),
+                  style: { overflow: "auto" },
+                  value: "emojis",
+                  children: /* @__PURE__ */ o(
+                    V,
+                    {
+                      onChange: d,
+                      value: s,
+                      querySearch: l,
+                      locales: c,
+                      setRandomIcon: B,
+                      onClose: () => n(!1)
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ o(
+                t.Panel,
+                {
+                  mah: Math.min(T, 470),
+                  style: { overflow: "auto" },
+                  value: "icons",
+                  children: /* @__PURE__ */ o(
+                    X,
+                    {
+                      project: $,
+                      onChange: d,
+                      value: s,
+                      locales: c,
+                      showColors: O,
+                      onClose: () => n(!1)
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  re as EmojiPicker
+};

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

@@ -0,0 +1,13 @@
+const o = "_item_o1hlf_1", a = "_randomIcon_o1hlf_26", n = "_originalTab_o1hlf_30", t = "_customTab_o1hlf_36", _ = {
+  item: o,
+  randomIcon: a,
+  originalTab: n,
+  customTab: t
+};
+export {
+  t as customTab,
+  _ as default,
+  o as item,
+  n as originalTab,
+  a as randomIcon
+};

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

@@ -1,4 +1,5 @@
 import { EmojiPickerProps } from './EmojiPicker';
-export declare const IconsPanel: import('react').MemoExoticComponent<({ showColors, locales, onChange, value, onClose, project, }: Pick<EmojiPickerProps, "locales" | "showColors" | "value" | "onChange" | "project"> & {
+export declare const IconsPanel: import("react").MemoExoticComponent<({ showColors, locales, onChange, value, onClose, project, }: Pick<EmojiPickerProps, "locales" | "showColors" | "value" | "onChange" | "project"> & {
     onClose: () => void;
 }) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=IconsPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/IconsPanel.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA2BjD,eAAO,MAAM,UAAU,oGAQlB,IAAI,CACL,gBAAgB,EAChB,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC5D,GAAG;IACF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,6CAsSF,CAAC"}