@layers-app/shared 0.1.5 → 0.2.0

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 N } 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 M, 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: R,
+  value: s,
+  querySearch: l,
+  children: $,
+  onChange: d,
+  position: D = "bottom-start",
+  popoverProps: I,
+  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, y] = a(w), [b, 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]);
+  N(() => {
+    const i = u && U.parse(s)?.icon ? "icons" : r ? "emojis" : null;
+    !p && i && y(i);
+  }, [p, r, u, s]), N(() => {
+    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 T = typeof l == "string";
+  return /* @__PURE__ */ x(
+    k,
+    {
+      withinPortal: z,
+      opened: p,
+      onChange: n,
+      position: D,
+      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: C, elements: q }) {
+            G(() => L(i - 20)), T && requestAnimationFrame(() => {
+              Object.assign(q.floating.style, {
+                maxHeight: `${i >= 425 ? 425 : i}px`,
+                top: j === "top-start" ? `${C - 20}px` : `${C}px`
+              });
+            });
+          }
+        }
+      },
+      ...I || {},
+      children: [
+        /* @__PURE__ */ o(k.Target, { children: /* @__PURE__ */ o(
+          K,
+          {
+            onClick: g === "click" ? () => n(!p) : void 0,
+            children: $ ?? A
+          }
+        ) }),
+        /* @__PURE__ */ o(k.Dropdown, { w: "380px", h: "404px", children: /* @__PURE__ */ x(
+          t,
+          {
+            value: H,
+            onChange: y,
+            keepMounted: !1,
+            h: "100%",
+            styles: {
+              root: {
+                display: "flex",
+                flexDirection: "column"
+              },
+              panel: {
+                display: "block"
+              },
+              list: {
+                alignItems: "center",
+                paddingRight: "var(--mantine-spacing-xs)"
+              }
+            },
+            children: [
+              !T && /* @__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(M, { 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(M, { 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(b, 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(b, 470),
+                  style: { overflow: "auto" },
+                  value: "icons",
+                  children: /* @__PURE__ */ o(
+                    X,
+                    {
+                      project: R,
+                      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.js

@@ -0,0 +1,267 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { memo as B, useState as k, useEffect as M, useCallback as U, useMemo as V } from "react";
+import { useTranslation as G } from "react-i18next";
+import { Search01Icon as Q, ShuffleIcon as Y } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as L } from "@hugeicons/react";
+import { ColorPicker as _ } from "../ColorPicker/ColorPicker.js";
+import { IconEntity as y, IconType as z } from "../ProjectIcon/ProjectIcon.js";
+import { useMantineTheme as j, parseThemeColor as J, darken as K, Stack as x, Text as b, Flex as W, FocusTrap as X, TextInput as Z, Tooltip as ee, ActionIcon as oe, Box as E, Paper as N, SimpleGrid as A } from "@mantine/core";
+import { useEvent as re } from "draggable-ui";
+import { groupBy as te } from "lodash-es";
+import { DEFAULT_VALUES as ie } from "../../constants.js";
+import { NoData as ne } from "../NoData/NoData.js";
+import { customIcons as D } from "./custom-icons/customIcons.js";
+import { getIconsList as F } from "./getIconsList.js";
+import { getRandomIcon as ce } from "./getRandomIcon.js";
+import h from "./EmojiPicker.module.css.js";
+async function ae(c, a, l = 500) {
+  const u = [], p = c.length;
+  for (let t = 0; t < p; t += l) {
+    const f = c.slice(t, t + l).filter(a);
+    u.push(...f), await new Promise((I) => setTimeout(I, 0));
+  }
+  return u;
+}
+const Ce = B(
+  ({
+    showColors: c,
+    locales: a,
+    onChange: l,
+    value: u,
+    onClose: p,
+    project: t
+  }) => {
+    const C = j(), [f, I] = k(""), { t: w } = G("ui"), [R, P] = k(
+      []
+    );
+    M(() => {
+      (async () => {
+        const r = await F(t), s = te(r, "c");
+        P(
+          Object.entries(s).map((g) => ({
+            id: g[0],
+            icons: g[1].map((d) => d.n)
+          }))
+        );
+      })();
+    }, [t]);
+    const [T, S] = k([]), $ = U(
+      async (o) => {
+        const r = o.currentTarget.value;
+        I(r);
+        const s = await F(t), g = await ae(
+          s,
+          (d) => d.t.split(",").some((q) => r.includes(String(q))) || d.n.includes(r),
+          500
+        );
+        S(g.map((d) => d.n));
+      },
+      [t]
+    ), i = y.parse(u), v = re((o) => {
+      const r = o.currentTarget.getAttribute("data-icon");
+      r && (l?.(
+        y.stringify({
+          icon: r.replace("i:", ""),
+          color: i?.color,
+          type: z.FILLED
+        })
+      ), c || p());
+    }), n = J({
+      color: i?.color || ie.COLORS[0],
+      theme: C
+    }), H = V(() => n.isThemeColor ? {
+      "--icon-color": `var(--mantine-color-${n.color}-filled)`,
+      "--icon-color-hover": `var(--mantine-color-${n.color}-filled-hover)`
+    } : {
+      "--icon-color": n.value,
+      "--icon-color-hover": K(n.value, 0.2)
+    }, [n]), O = async () => {
+      const o = await ce(t);
+      S([]), l?.(y.stringify({ icon: o, color: i?.color })), c || p();
+    };
+    return /* @__PURE__ */ m(x, { w: "100%", gap: "sm", pt: 12, pb: 8, h: "100%", children: [
+      c && /* @__PURE__ */ m(x, { gap: 4, px: 8, w: "100%", children: [
+        /* @__PURE__ */ e(b, { lh: "140%", fw: 500, c: "dimmed", fz: "xs", children: a?.chooseColor || w("chooseColor") }),
+        /* @__PURE__ */ e(
+          _,
+          {
+            swatchSize: 24,
+            gap: 4,
+            value: n.color,
+            onChange: (o) => l?.(
+              y.stringify({
+                color: o,
+                icon: i?.icon,
+                type: z.FILLED
+              })
+            ),
+            colors: [
+              "violet",
+              "indigo",
+              "blue",
+              "teal",
+              "green",
+              "yellow",
+              "orange",
+              "red",
+              "grey",
+              "dark"
+            ]
+          },
+          n.color
+        )
+      ] }),
+      /* @__PURE__ */ m(W, { w: "100%", justify: "space-between", gap: 4, px: 8, h: 38, children: [
+        /* @__PURE__ */ e(X, { active: !0, children: /* @__PURE__ */ e(
+          Z,
+          {
+            leftSection: /* @__PURE__ */ e(L, { size: 16, icon: Q }),
+            value: f,
+            placeholder: `${a?.search}...`,
+            "data-autofocus": !0,
+            styles: {
+              input: {
+                border: "1px solid var(--mantine-color-default-border)",
+                borderRadius: "var(--mantine-radius-default)"
+              }
+            },
+            w: 320,
+            onChange: $,
+            radius: "var(--mantine-radius-default)"
+          }
+        ) }),
+        /* @__PURE__ */ e(ee, { withArrow: !0, label: w("random"), children: /* @__PURE__ */ e(
+          oe,
+          {
+            h: 36,
+            w: 36,
+            variant: "outline",
+            color: "var(--mantine-color-default-border)",
+            onClick: O,
+            className: h.randomIcon,
+            children: /* @__PURE__ */ e(
+              L,
+              {
+                color: "var(--mantine-color-default-color)",
+                size: 20,
+                icon: Y
+              }
+            )
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e(E, { pl: 8, style: H, children: /* @__PURE__ */ e(
+        x,
+        {
+          h: "210px",
+          style: {
+            overflowY: "auto"
+          },
+          gap: 16,
+          children: f ? /* @__PURE__ */ m("div", { children: [
+            /* @__PURE__ */ e(
+              N,
+              {
+                py: 6,
+                pos: "sticky",
+                top: -1,
+                style: { zIndex: 1 },
+                bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
+                children: /* @__PURE__ */ e(b, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: a?.searchResults })
+              }
+            ),
+            T.length ? /* @__PURE__ */ e(A, { cols: 8, spacing: 0, children: T.map((o) => {
+              const r = D[o];
+              return r ? /* @__PURE__ */ e(
+                "div",
+                {
+                  className: h.item,
+                  "data-icon": o,
+                  "data-active": o === i?.icon,
+                  onClick: v,
+                  children: /* @__PURE__ */ e(r, {})
+                },
+                o
+              ) : /* @__PURE__ */ e(
+                "div",
+                {
+                  className: h.item,
+                  "data-icon": o,
+                  "data-active": o === i?.icon,
+                  onClick: v,
+                  children: /* @__PURE__ */ e("svg", { width: "1em", height: "1em", children: /* @__PURE__ */ e(
+                    "use",
+                    {
+                      xlinkHref: `/tabler-sprite-filled.svg#tabler-filled-${o}`
+                    }
+                  ) })
+                },
+                o
+              );
+            }) }) : /* @__PURE__ */ e(E, { pt: 16, children: /* @__PURE__ */ e(
+              ne,
+              {
+                size: 100,
+                description: a?.searchNoResults,
+                descriptionProps: {
+                  fz: "sm"
+                }
+              }
+            ) })
+          ] }) : R.map((o) => /* @__PURE__ */ m("div", { children: [
+            /* @__PURE__ */ e(
+              N,
+              {
+                bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
+                py: 6,
+                pos: "sticky",
+                top: -1,
+                style: { zIndex: 1 },
+                children: /* @__PURE__ */ e(b, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: o.id || w("noCat") })
+              }
+            ),
+            /* @__PURE__ */ e(A, { cols: 10, spacing: 0, children: o.icons.map((r) => {
+              const s = D[r];
+              return s ? /* @__PURE__ */ e(
+                "div",
+                {
+                  className: h.item,
+                  "data-icon": r,
+                  "data-active": r === i?.icon,
+                  onClick: v,
+                  children: /* @__PURE__ */ e(
+                    s,
+                    {
+                      width: "1em",
+                      height: "1em",
+                      color: "currentColor"
+                    }
+                  )
+                },
+                r
+              ) : /* @__PURE__ */ e(
+                "div",
+                {
+                  className: h.item,
+                  "data-icon": r,
+                  "data-active": r === i?.icon,
+                  onClick: v,
+                  children: /* @__PURE__ */ e("svg", { width: "1em", height: "1em", children: /* @__PURE__ */ e(
+                    "use",
+                    {
+                      xlinkHref: `/tabler-sprite-filled.svg#tabler-filled-${r}`
+                    }
+                  ) })
+                },
+                r
+              );
+            }) })
+          ] }, o.id))
+        }
+      ) })
+    ] });
+  }
+);
+export {
+  Ce as IconsPanel
+};

package/dist/components/EmojiPicker/constants.js

@@ -0,0 +1,36 @@
+const e = [
+  "Logic",
+  "Gestures",
+  "Version control",
+  "Gender",
+  "Currencies",
+  "Electrical",
+  "Communication",
+  "Brand",
+  "Numbers",
+  "Extensions",
+  "Laundry",
+  "Computers",
+  "Animals",
+  "Badges",
+  "Arrows",
+  "Letters",
+  "Text",
+  "System",
+  "Design",
+  "Math"
+], r = [
+  "👍",
+  "😀",
+  "😘",
+  "😍",
+  "😆",
+  "😜",
+  "😅",
+  "😂",
+  "😱"
+];
+export {
+  e as excludeCategories,
+  r as frequentEmoji
+};

package/dist/components/EmojiPicker/custom-icons/StatusCancel.js

@@ -0,0 +1,37 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+const n = ({
+  color: t = "currentColor",
+  ...e
+}) => /* @__PURE__ */ s(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...e,
+    children: [
+      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "9", stroke: t, strokeWidth: "1.5" }),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M15 9L9 15",
+          stroke: t,
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M9 9L15 15",
+          stroke: t,
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
+export {
+  n as StatusCancel
+};

package/dist/components/EmojiPicker/custom-icons/StatusDone.js

@@ -0,0 +1,29 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+const n = ({
+  color: o = "currentColor",
+  ...t
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: [
+      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "9", stroke: o, strokeWidth: "1.5" }),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M8 12L11 15L16 10",
+          stroke: o,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+export {
+  n as StatusDone
+};

package/dist/components/EmojiPicker/custom-icons/StatusProgress00.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+const e = ({
+  color: o = "currentColor",
+  ...t
+}) => /* @__PURE__ */ r(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "9", stroke: o, strokeWidth: "1.5" })
+  }
+);
+export {
+  e as StatusProgress00
+};

package/dist/components/EmojiPicker/custom-icons/StatusProgress10.js

@@ -0,0 +1,20 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+const i = ({
+  color: r = "currentColor",
+  ...t
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: [
+      /* @__PURE__ */ s("circle", { cx: "12", cy: "12", r: "9", stroke: r, strokeWidth: "1.5" }),
+      /* @__PURE__ */ s("path", { d: "M12 5C13.3 5 14.6 5.4 15.7 6.1L12 12L12 5Z", fill: r })
+    ]
+  }
+);
+export {
+  i as StatusProgress10
+};

package/dist/components/EmojiPicker/custom-icons/StatusProgress100.js

@@ -0,0 +1,20 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+const o = ({
+  color: r = "currentColor",
+  ...t
+}) => /* @__PURE__ */ c(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: [
+      /* @__PURE__ */ s("circle", { cx: "12", cy: "12", r: "8", stroke: r, strokeWidth: "1.5" }),
+      /* @__PURE__ */ s("circle", { cx: "12", cy: "12", r: "6", fill: r })
+    ]
+  }
+);
+export {
+  o as StatusProgress100
+};

package/dist/components/EmojiPicker/custom-icons/StatusProgress20.js

@@ -0,0 +1,26 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+const i = ({
+  color: r = "currentColor",
+  ...t
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: [
+      /* @__PURE__ */ s("circle", { cx: "12", cy: "12", r: "9", stroke: r, strokeWidth: "1.5" }),
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: "M12 5C13.3 5 14.6 5.4 15.7 6.1C16.8 6.8 17.6 7.8 18 9L12 12L12 5Z",
+          fill: r
+        }
+      )
+    ]
+  }
+);
+export {
+  i as StatusProgress20
+};