@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/SearchFilters/components/SearchHelp.js

@@ -0,0 +1,121 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { memo as i } from "react";
+import { useTranslation as c } from "react-i18next";
+import { CustomKBD as n } from "../../CustomKBD/index.js";
+import { Modal as h, Stack as l, Text as s, Group as m } from "@mantine/core";
+import { create as x } from "zustand";
+const p = x(() => ({
+  opened: !1
+})), g = () => {
+  p.setState({ opened: !0 });
+}, M = () => {
+  p.setState({ opened: !1 });
+}, b = () => {
+  const { t: e } = c("searchPage"), a = [
+    {
+      symbol: '" "',
+      description: e("searchModal.help.exactPhrase"),
+      example: '"exact phrase"'
+    },
+    {
+      symbol: "*",
+      description: e("searchModal.help.wildcard"),
+      example: "report*",
+      w: 20
+    },
+    {
+      symbol: "?",
+      description: e("searchModal.help.singleCharacter"),
+      example: "file_?",
+      w: 20
+    },
+    {
+      symbol: "AND",
+      description: e("searchModal.help.andOperator"),
+      example: "task AND report"
+    },
+    {
+      symbol: "+",
+      description: e("searchModal.help.plusOperator"),
+      example: "task +report",
+      w: 20
+    },
+    {
+      symbol: "OR",
+      description: e("searchModal.help.orOperator"),
+      example: "task OR report",
+      w: 27
+    },
+    {
+      symbol: "/",
+      description: e("searchModal.help.slashOperator"),
+      example: "task /report",
+      w: 20
+    },
+    {
+      symbol: "NOT",
+      description: e("searchModal.help.notOperator"),
+      example: "task NOT report"
+    },
+    {
+      symbol: "-",
+      description: e("searchModal.help.minusOperator"),
+      example: "draft -report",
+      w: 20
+    },
+    {
+      symbol: "( )",
+      description: e("searchModal.help.parentheses"),
+      example: "(task OR project) AND report"
+    }
+  ];
+  return /* @__PURE__ */ t(l, { gap: "sm", children: [
+    /* @__PURE__ */ r(s, { size: "xs", c: "dimmed", children: e("searchModal.help.description") }),
+    /* @__PURE__ */ r(l, { gap: 0, pb: 12, px: 8, children: a.map((o, d) => /* @__PURE__ */ t(m, { h: 48, children: [
+      /* @__PURE__ */ r(
+        n,
+        {
+          bbw: 3,
+          br: 6,
+          miw: o.w,
+          fz: 12,
+          value: o.symbol,
+          c: "system"
+        }
+      ),
+      /* @__PURE__ */ r(s, { size: "sm", style: { flex: 1 }, children: o.description }),
+      /* @__PURE__ */ r(s, { size: "xs", children: o.example })
+    ] }, d)) })
+  ] });
+}, k = i(() => {
+  const { t: e } = c("searchPage"), a = p((o) => o.opened);
+  return /* @__PURE__ */ r(
+    h,
+    {
+      opened: a,
+      title: e("searchModal.help.title"),
+      onClose: M,
+      size: 531,
+      radius: "md",
+      centered: !0,
+      styles: {
+        title: {
+          fontSize: 14
+        },
+        header: {
+          fontSize: 14,
+          padding: "0px 12px 0px 12px"
+        },
+        body: {
+          padding: "0px 12px 0px 12px"
+        }
+      },
+      children: /* @__PURE__ */ r(b, {})
+    }
+  );
+});
+export {
+  k as SearchHelpModal,
+  M as closeSearchHelpModal,
+  g as openSearchHelpModal
+};

package/dist/components/SearchFilters/components/Sort.js

@@ -0,0 +1,99 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { useRef as O } from "react";
+import { useTranslation as j } from "react-i18next";
+import { Popover as d, Pill as k, Flex as A, Button as M } from "@mantine/core";
+import { useDisclosure as P } from "@mantine/hooks";
+import { IconArrowsSort as g, IconChevronDown as C } from "@tabler/icons-react";
+import m from "../SearchFilters.module.css.js";
+const K = ({ setSelectedFilter: p, selectedFilter: v }) => {
+  const { t: r } = j("searchPage"), [i, { close: o, open: x }] = P(!1), y = O(null), S = (t) => {
+    o(), p((a) => {
+      const n = a.sort?.[0], c = n ? Object.keys(n)[0] : null, b = c ? n[c].order : null;
+      return c === t.value && b === t.order ? { ...a, sort: [] } : { ...a, sort: [{ [t.value]: { order: t.order } }] };
+    });
+  }, u = [
+    {
+      value: "name",
+      text: r("searchModal.filters.sort.matches"),
+      order: "desc"
+    },
+    {
+      value: "createdAt",
+      text: r("searchModal.filters.sort.createdNew"),
+      order: "desc"
+    },
+    {
+      value: "createdAt",
+      text: r("searchModal.filters.sort.createdOld"),
+      order: "asc"
+    },
+    {
+      value: "updatedAt",
+      text: r("searchModal.filters.sort.editedNew"),
+      order: "desc"
+    },
+    {
+      value: "updatedAt",
+      text: r("searchModal.filters.sort.editedOld"),
+      order: "asc"
+    }
+  ], s = v?.sort?.[0], f = s ? Object.keys(s)[0] : null, w = s?.[f || ""] ?? null, l = u.find(
+    (t) => t.value === f && t.order === w?.order
+  );
+  return /* @__PURE__ */ e("div", { ref: y, style: { height: 22 }, children: /* @__PURE__ */ h(
+    d,
+    {
+      clickOutsideEvents: ["mouseup", "touchend"],
+      withArrow: !0,
+      position: "bottom-start",
+      radius: "md",
+      opened: i,
+      onClose: o,
+      transitionProps: { duration: 150, transition: "fade-down" },
+      children: [
+        /* @__PURE__ */ e(d.Target, { children: /* @__PURE__ */ h(
+          k,
+          {
+            onClick: i ? o : x,
+            classNames: {
+              root: m.filterPill,
+              label: m.filterPillLabel
+            },
+            styles: {
+              root: {
+                background: l ? "#228BE61F" : "transparent"
+              }
+            },
+            radius: "lg",
+            children: [
+              /* @__PURE__ */ e(g, { size: 14 }),
+              l ? l.text : r("searchModal.filters.sort.title"),
+              /* @__PURE__ */ e(C, { size: 16 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(d.Dropdown, { p: 4, children: /* @__PURE__ */ e(A, { direction: "column", justify: "start", children: u.map((t) => /* @__PURE__ */ e(
+          M,
+          {
+            onClick: () => S(t),
+            h: 32,
+            fullWidth: !0,
+            fz: "sm",
+            variant: "subtle",
+            color: "system",
+            styles: {
+              inner: {
+                justifyContent: "flex-start"
+              }
+            },
+            children: t.text
+          },
+          t.text
+        )) }) })
+      ]
+    }
+  ) });
+};
+export {
+  K as Sort
+};

package/dist/components/SearchFilters/components/Type.js

@@ -0,0 +1,124 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { useRef as x, useEffect as w } from "react";
+import { useTranslation as g } from "react-i18next";
+import { File01Icon as C, CheckmarkSquare03Icon as P, FlowIcon as k, Task02Icon as I, FolderCloudIcon as z } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as s } from "@hugeicons/react";
+import { Popover as u, Pill as E, Flex as M, FocusTrap as d, Button as O } from "@mantine/core";
+import { useDisclosure as T } from "@mantine/hooks";
+import { IconFileUnknown as b, IconChevronDown as j } from "@tabler/icons-react";
+import m from "../SearchFilters.module.css.js";
+const H = ({
+  setSelectedFilter: p,
+  selectedFilter: n,
+  allowedTypes: h
+}) => {
+  const { t: r } = g("searchPage"), l = x(null), [f, { close: i, open: y }] = T(!1), v = (e) => {
+    if (i(), n?.type === e) {
+      p((t) => ({
+        ...t,
+        type: n.type
+      }));
+      return;
+    }
+    p((t) => ({
+      ...t,
+      type: e
+    }));
+  };
+  w(() => {
+    const e = (t) => {
+      l.current && !l.current.contains(t.target) && i();
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [i]);
+  const a = [
+    {
+      value: "PAGE",
+      text: r("searchModal.filters.type.page"),
+      icon: /* @__PURE__ */ o(s, { icon: C, size: 16 })
+    },
+    {
+      value: "PROJECT",
+      text: r("searchModal.filters.type.project"),
+      icon: /* @__PURE__ */ o(s, { icon: P, size: 16 })
+    },
+    {
+      value: "FLOW",
+      text: r("searchModal.filters.type.flow"),
+      icon: /* @__PURE__ */ o(s, { icon: k, size: 16 })
+    },
+    {
+      value: "FORM",
+      text: r("searchModal.filters.type.forms"),
+      icon: /* @__PURE__ */ o(s, { icon: I, size: 16 })
+    },
+    {
+      value: "FOLDER",
+      text: r("searchModal.filters.type.cloud"),
+      icon: /* @__PURE__ */ o(s, { icon: z, size: 16 })
+    }
+  ];
+  return /* @__PURE__ */ o("div", { ref: l, style: { height: 22 }, children: /* @__PURE__ */ c(
+    u,
+    {
+      withArrow: !0,
+      position: "bottom-start",
+      radius: "md",
+      transitionProps: { duration: 150, transition: "fade-down" },
+      opened: f,
+      withinPortal: !1,
+      onClose: i,
+      closeOnClickOutside: !0,
+      children: [
+        /* @__PURE__ */ o(u.Target, { children: /* @__PURE__ */ c(
+          E,
+          {
+            onClick: f ? i : y,
+            classNames: {
+              root: m.filterPill,
+              label: m.filterPillLabel
+            },
+            styles: {
+              root: {
+                background: n?.type ? "#228BE61F" : "transparent"
+              }
+            },
+            children: [
+              n?.type ? a.find((e) => e.value === n.type)?.icon : /* @__PURE__ */ o(b, { size: 16 }),
+              n?.type ? a.find((e) => e.value === n.type)?.text : r("searchModal.filters.type.title"),
+              /* @__PURE__ */ o(j, { size: 16 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ o(u.Dropdown, { p: 4, children: /* @__PURE__ */ c(M, { direction: "column", justify: "start", gap: 0, children: [
+          /* @__PURE__ */ o(d.InitialFocus, {}),
+          a.filter((e) => h?.includes(e.value)).map((e) => /* @__PURE__ */ o(d, { active: !0, children: /* @__PURE__ */ o(
+            O,
+            {
+              onClick: (t) => {
+                t.stopPropagation(), t.preventDefault(), console.log("called?"), v(e.value);
+              },
+              h: 32,
+              fullWidth: !0,
+              fz: "sm",
+              variant: "subtle",
+              color: "system",
+              leftSection: e.icon,
+              styles: {
+                inner: {
+                  justifyContent: "flex-start"
+                }
+              },
+              children: e.text
+            }
+          ) }, e.value))
+        ] }) })
+      ]
+    }
+  ) });
+};
+export {
+  H as Type
+};

package/dist/components/SortableList/SortableList.js

@@ -0,0 +1,44 @@
+import { jsx as o } from "react/jsx-runtime";
+import b, { useState as h } from "react";
+import { useSensors as x, useSensor as i, PointerSensor as y, KeyboardSensor as I, DndContext as v } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as C, SortableContext as E, rectSortingStrategy as H, arrayMove as K } from "@dnd-kit/sortable";
+import { useDisableWindowScrollDuringDrag as L } from "../../hooks/useDisableWindowScroll.js";
+/* empty css                 */
+import { SortableItem as _, DragHandle as j } from "./components/SortableItem/SortableItem.js";
+function s({
+  items: e,
+  onChange: l,
+  renderItem: c,
+  onDragStart: g,
+  onDragEnd: S,
+  gap: f = 8
+}) {
+  const m = x(
+    i(y),
+    i(I, {
+      coordinateGetter: C
+    })
+  ), [D, d] = h(!1);
+  return L(D), /* @__PURE__ */ o(
+    v,
+    {
+      sensors: m,
+      onDragStart: (r) => {
+        d(!0), g?.(r);
+      },
+      onDragEnd: (r) => {
+        const { active: t, over: n } = r;
+        if (d(!1), n && t.id !== n?.id) {
+          const p = e.findIndex(({ id: a }) => a === t.id), u = e.findIndex(({ id: a }) => a === n.id);
+          l(K(e, p, u)), S?.(r);
+        }
+      },
+      children: /* @__PURE__ */ o(E, { items: e, strategy: H, children: /* @__PURE__ */ o("ul", { className: "SortableList", role: "application", style: { gap: f }, children: e.map((r, t) => /* @__PURE__ */ o(b.Fragment, { children: c(r, t) }, r.id)) }) })
+    }
+  );
+}
+s.Item = _;
+s.DragHandle = j;
+export {
+  s as SortableList
+};

package/dist/components/SortableList/components/SortableItem/SortableItem.js

@@ -0,0 +1,82 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as d, createContext as p, useContext as b } from "react";
+import { useSortable as S } from "@dnd-kit/sortable";
+import { CSS as v } from "@dnd-kit/utilities";
+import { ActionIcon as x } from "@mantine/core";
+import { IconGripVertical as g } from "@tabler/icons-react";
+/* empty css                 */
+const a = p({
+  attributes: {},
+  listeners: void 0,
+  ref() {
+  }
+});
+function z({ children: o, id: n }) {
+  const {
+    attributes: t,
+    listeners: e,
+    setNodeRef: i,
+    setActivatorNodeRef: s,
+    transform: c,
+    transition: l,
+    isDragging: m
+  } = S({ id: n }), f = d(
+    () => ({
+      attributes: t,
+      listeners: e,
+      ref: s
+    }),
+    [t, e, s]
+  ), u = {
+    transform: v.Translate.toString(c),
+    transition: l,
+    maxWidth: "100%",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    zIndex: m ? 9999 : void 0
+  };
+  return /* @__PURE__ */ r(a.Provider, { value: f, children: /* @__PURE__ */ r(
+    "li",
+    {
+      className: "SortableItem",
+      ref: i,
+      style: u,
+      children: o
+    }
+  ) });
+}
+function D({
+  iconProps: o,
+  actionIconProps: n
+}) {
+  const { attributes: t, listeners: e, ref: i } = b(a);
+  return /* @__PURE__ */ r(
+    x,
+    {
+      variant: "subtle",
+      ...t,
+      ...e,
+      styles: {
+        root: {
+          cursor: "grab",
+          userSelect: "none",
+          touchAction: "none"
+        }
+      },
+      ...n,
+      ref: i,
+      children: /* @__PURE__ */ r(
+        g,
+        {
+          size: 14,
+          ...o,
+          color: "var(--mantine-color-gray-5)"
+        }
+      )
+    }
+  );
+}
+export {
+  D as DragHandle,
+  z as SortableItem
+};

package/dist/components/StorageUsageEntityList/StorageEntityItem.js

@@ -0,0 +1,62 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { Flex as o, Text as i } from "@mantine/core";
+import { formatStorage as a } from "../../utils/formatStorage.js";
+import c from "../../assets/fileTypes/archives.svg.js";
+import d from "../../assets/fileTypes/audio.svg.js";
+import g from "../../assets/fileTypes/code.svg.js";
+import p from "../../assets/fileTypes/documentsStorage.svg.js";
+import u from "../../assets/fileTypes/images.svg.js";
+import f from "../../assets/fileTypes/other.svg2.js";
+import l from "../../assets/fileTypes/videos.svg.js";
+const h = (r) => {
+  switch (r) {
+    case "archives":
+      return c;
+    case "audio":
+      return d;
+    case "code":
+      return g;
+    case "documents":
+      return p;
+    case "images":
+      return u;
+    case "videos":
+      return l;
+    default:
+      return f;
+  }
+}, L = ({
+  category: r
+}) => {
+  const { t: m } = n("settingsPage"), s = h(r.type);
+  return /* @__PURE__ */ e(
+    o,
+    {
+      h: 48,
+      w: "100%",
+      justify: "space-between",
+      align: "center",
+      px: 16,
+      style: {
+        border: "1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))",
+        borderRadius: "var(--mantine-radius-md)"
+      },
+      children: [
+        /* @__PURE__ */ e(o, { align: "center", gap: 8, children: [
+          /* @__PURE__ */ t(s, { width: 24, height: 24 }),
+          /* @__PURE__ */ t(i, { fz: 14, children: m(`workspace.categories.${r.type}`) })
+        ] }),
+        /* @__PURE__ */ e(i, { c: "dimmed", fz: 14, children: [
+          r.percentage,
+          "% (",
+          a(r.usedKb),
+          ")"
+        ] })
+      ]
+    }
+  );
+};
+export {
+  L as StorageEntityItem
+};

package/dist/components/StorageUsageEntityList/StorageUsageEntityList.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Stack as a } from "@mantine/core";
+import { StorageEntityItem as p } from "./StorageEntityItem.js";
+const r = {
+  documents: 0,
+  images: 1,
+  videos: 2,
+  audio: 3,
+  code: 4,
+  archives: 5,
+  other: 6
+}, y = ({
+  storageByCategory: s,
+  totalStorageKb: c
+}) => {
+  const n = s.map((t) => {
+    const e = t.usedKb / c * 100;
+    return {
+      ...t,
+      percentage: parseFloat(e.toFixed(1))
+    };
+  }).sort((t, e) => r[t.type] - r[e.type]);
+  return /* @__PURE__ */ o(a, { gap: 12, children: n.map((t) => /* @__PURE__ */ o(p, { category: t }, t.type)) });
+};
+export {
+  y as StorageEntityList
+};

package/dist/components/StorageUsageProgress/index.js

@@ -0,0 +1,52 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useTranslation as h } from "react-i18next";
+import { Box as i, Progress as t, Tooltip as l } from "@mantine/core";
+import { formatStorage as d } from "../../utils/formatStorage.js";
+const F = {
+  documents: "#F03E3E",
+  images: "#FF6F00",
+  other: "#868E96",
+  archives: "#9B14EA",
+  audio: "#0CA678",
+  code: "#1C7ED6",
+  videos: "#FAB005"
+}, $ = ({
+  storageByCategory: c,
+  totalStorageKb: n,
+  size: a = 30,
+  simple: m = !1,
+  color: p = "#1C7ED6"
+}) => {
+  const { t: g } = h();
+  if (m) {
+    const e = c.reduce(
+      (s, { usedKb: f }) => s + f,
+      0
+    ), r = e / n * 100;
+    return /* @__PURE__ */ o(i, { w: "100%", children: /* @__PURE__ */ o(t.Root, { size: a, children: /* @__PURE__ */ o(l, { label: `${d(e)}`, children: /* @__PURE__ */ o(t.Section, { value: r, color: p }) }) }) });
+  }
+  const u = c.filter(({ usedKb: e }) => e > 0).map((e) => {
+    const r = e.usedKb / n * 100;
+    return {
+      ...e,
+      percentage: parseFloat(r.toFixed(4))
+    };
+  });
+  return /* @__PURE__ */ o(i, { w: "100%", children: /* @__PURE__ */ o(t.Root, { size: a, children: u.map(({ type: e, usedKb: r, percentage: s }) => /* @__PURE__ */ o(
+    l,
+    {
+      label: `${g(`settingsPage:workspace.categories.${e}`)} – ${d(r)}`,
+      children: /* @__PURE__ */ o(
+        t.Section,
+        {
+          value: s,
+          color: F[e]
+        }
+      )
+    },
+    e
+  )) }) });
+};
+export {
+  $ as StorageUsageProgress
+};

package/dist/components/SubmitModal/index.js

@@ -0,0 +1,12 @@
+import { modals as n } from "@mantine/modals";
+import o from "i18next";
+const l = (e) => n.openConfirmModal({
+  keepMounted: !1,
+  centered: !0,
+  children: e.children,
+  labels: { confirm: o.t("remove"), cancel: o.t("cancel") },
+  ...e
+});
+export {
+  l as openSubmitModal
+};

package/dist/components/ThemeIndicator/index.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useIsDarkTheme as m } from "../../helpers/themeUtils.js";
+import { Indicator as a } from "@mantine/core";
+const c = ({
+  children: r,
+  ...o
+}) => {
+  const t = m();
+  return /* @__PURE__ */ e(
+    a,
+    {
+      color: t ? "var(--mantine-color-gray-0)" : "dark",
+      size: 6,
+      ...o,
+      children: r
+    }
+  );
+};
+export {
+  c as ThemeIndicator
+};

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

@@ -1,7 +1,8 @@
-import { default as React } from 'react';
+import { default as React, ReactNode } from 'react';
 import { AvatarProps } from '@mantine/core';
 import { MenuUser } from '../AppContainer/components/menus/UserMenu/MenuUserDropdown';
 export interface UserAvatarProps extends AvatarProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AvatarProps> {
-    user?: MenuUser | null;
+    user?: Partial<MenuUser> | null;
+    emptyIcon?: ReactNode;
 }
 export declare const UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/UserAvatar/index.js

@@ -0,0 +1,22 @@
+import { jsx as t, Fragment as a } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { Avatar as c } from "@mantine/core";
+import { IconUser as p } from "@tabler/icons-react";
+const h = n(
+  ({ user: r, size: o = 24, emptyIcon: i, ...e }, m) => /* @__PURE__ */ t(
+    c,
+    {
+      src: r?.avatar,
+      color: "initials",
+      tt: "uppercase",
+      size: o,
+      name: r?.id ?? "",
+      ...e,
+      ref: m,
+      children: r ? /* @__PURE__ */ t(a, { children: r.name?.charAt(0) }) : /* @__PURE__ */ t(a, { children: i ?? /* @__PURE__ */ t(p, { size: "70%" }) })
+    }
+  )
+);
+export {
+  h as UserAvatar
+};