@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/AppContainer/components/menus/UserMenu/MenuUserDropdown.js

@@ -0,0 +1,44 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Menu as t, Stack as l, Flex as h, Text as i, Divider as a } from "@mantine/core";
+import { UserAvatar as d } from "../../../../UserAvatar/index.js";
+const f = ({
+  position: o = "bottom-end",
+  children: m,
+  user: r,
+  menuItems: c
+}) => /* @__PURE__ */ n(t, { keepMounted: !0, position: o, children: [
+  /* @__PURE__ */ e(t.Target, { children: m ?? /* @__PURE__ */ e(
+    d,
+    {
+      user: r,
+      size: 36,
+      style: {
+        cursor: "pointer"
+      }
+    }
+  ) }),
+  /* @__PURE__ */ e(t.Dropdown, { w: 264, children: /* @__PURE__ */ n(l, { gap: 2, children: [
+    /* @__PURE__ */ n(h, { h: 49, px: "sm", gap: 10, mb: 5, py: 6, children: [
+      /* @__PURE__ */ e(d, { user: r, size: 36 }),
+      /* @__PURE__ */ n("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            c: "var(--mantine-color-bright)",
+            lh: "sm",
+            fz: "sm",
+            fw: 700,
+            truncate: "end",
+            children: r.name
+          }
+        ),
+        /* @__PURE__ */ e(i, { lh: "140%", fz: "xs", c: "dimmed", truncate: "end", children: r.email })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(a, {}),
+    c
+  ] }) })
+] });
+export {
+  f as MenuUserDropdown
+};

package/dist/components/AppContainer/hooks/useAppContainer.d.ts

@@ -1,2 +1,2 @@
 import { AppContainerActionsStore, AppContainerDataStore } from '../types';
-export declare const useAppContainer: ({ user, workspaceMenu, tools, userMenuItems, notifications, isAnonym, readNotificationsFunc, publicMode, showMessenger, showNewMessage, version, updatedAt, privacyPolicyLink, whatsNewItems, }: AppContainerDataStore & AppContainerActionsStore) => void;
+export declare const useAppContainer: ({ user, workspaceMenu, tools, userMenuItems, notifications, isAnonym, readNotificationsFunc, publicMode, showMessenger, showNewMessage, version, updatedAt, privacyPolicyLink, userAgreementLink, whatsNewItems, }: AppContainerDataStore & AppContainerActionsStore) => void;

package/dist/components/AppContainer/hooks/useAppContainer.js

@@ -0,0 +1,60 @@
+import { useLayoutEffect as z } from "react";
+import { useAppContainerActionsStore as B } from "./useAppContainerActionsStore.js";
+import { useAppContainerDataStore as G } from "./useAppContainerDataStore.js";
+const O = ({
+  user: t,
+  workspaceMenu: p,
+  tools: S,
+  userMenuItems: f,
+  notifications: r,
+  isAnonym: C,
+  readNotificationsFunc: m,
+  publicMode: o,
+  showMessenger: x,
+  showNewMessage: A,
+  version: D,
+  updatedAt: E,
+  privacyPolicyLink: a,
+  userAgreementLink: j,
+  whatsNewItems: q
+}) => {
+  z(() => {
+    G.setState({
+      user: t,
+      workspaceMenu: p,
+      tools: S,
+      userMenuItems: f,
+      notifications: r,
+      isAnonym: C,
+      publicMode: o,
+      showMessenger: x,
+      showNewMessage: A,
+      version: D,
+      updatedAt: E,
+      privacyPolicyLink: a,
+      userAgreementLink: j,
+      whatsNewItems: q
+    }), B.setState({
+      readNotificationsFunc: m
+    });
+  }, [
+    C,
+    r,
+    o,
+    m,
+    x,
+    A,
+    S,
+    t,
+    f,
+    p,
+    D,
+    E,
+    a,
+    j,
+    q
+  ]);
+};
+export {
+  O as useAppContainer
+};

package/dist/components/AppContainer/hooks/useAppContainerActionsStore.js

@@ -0,0 +1,10 @@
+import { create as o } from "zustand";
+const e = o(
+  () => ({
+    readNotificationsFunc: () => {
+    }
+  })
+);
+export {
+  e as useAppContainerActionsStore
+};

package/dist/components/AppContainer/hooks/useAppContainerDataStore.js

@@ -0,0 +1,37 @@
+import { create as e } from "zustand";
+const a = e(() => ({
+  tools: [],
+  user: {
+    avatar: "",
+    email: "",
+    id: "",
+    name: "",
+    mode: "SAAS",
+    role: ""
+  },
+  version: "",
+  updatedAt: "",
+  privacyPolicyLink: "",
+  userAgreementLink: "",
+  userMenuItems: null,
+  workspaceMenu: {
+    items: [],
+    active: {
+      workspaceId: "",
+      workspaceName: "",
+      workspaceIcon: "",
+      plan: "FREE"
+    }
+  },
+  whatsNewItems: [],
+  notifications: [],
+  isAnonym: !1,
+  publicMode: !1,
+  showMessenger: () => {
+  },
+  showNewMessage: () => {
+  }
+}));
+export {
+  a as useAppContainerDataStore
+};

package/dist/components/AppContainer/hooks/useAppContainerStore.d.ts

@@ -1,5 +1,5 @@
 import { StoreApi, UseBoundStore } from 'zustand';
-import { AppContainerStore } from '../types';
+import { AppContainerLayout, AppContainerStore } from '../types';
 export declare const appContainerStore: {
     useStore: UseBoundStore<Omit<StoreApi<AppContainerStore>, "setState" | "persist"> & {
         setState(partial: AppContainerStore | Partial<AppContainerStore> | ((state: AppContainerStore) => AppContainerStore | Partial<AppContainerStore>), replace?: false | undefined): unknown;
@@ -25,8 +25,7 @@ export declare const appContainerStore: {
         setToolbarWidth: (width: number) => void;
         setRightbarWidth: (width: number) => void;
         toggleToolVisibility: (id: string) => void;
-        setWithoutToolbar: (flag: boolean) => void;
-        setWithoutHeader: (flag: boolean) => void;
+        setLayout: (layout: AppContainerLayout) => void;
         setTheme: (theme: string) => void;
     };
 };

package/dist/components/AppContainer/hooks/useAppContainerStore.js

@@ -0,0 +1,62 @@
+import { create as s } from "zustand";
+import { persist as r, createJSONStorage as i } from "zustand/middleware";
+const l = () => {
+  const o = s(
+    r(
+      () => ({
+        layout: "default",
+        showToolbar: !0,
+        theme: "indigo",
+        tools: [],
+        hiddenTools: [],
+        toolbarWidth: 280,
+        isTourPassed: !1,
+        showRightbar: !1,
+        rightbarWidth: 200
+      }),
+      {
+        name: "app-menu",
+        storage: i(() => localStorage)
+      }
+    )
+  );
+  return {
+    useStore: o,
+    api: h(o)
+  };
+}, h = (o) => ({
+  toggleToolbar: () => {
+    o.setState((t) => ({ ...t, showToolbar: !t.showToolbar }));
+  },
+  closeToolbar: () => o.setState({ showToolbar: !1 }),
+  openToolbar: () => o.setState({ showToolbar: !0 }),
+  toggleRightbar: () => {
+    o.setState((t) => ({ ...t, showRightbar: !t.showRightbar }));
+  },
+  closeRightbar: () => o.setState({ showRightbar: !1 }),
+  openRightbar: () => o.setState({ showRightbar: !0 }),
+  toggleTourPassed: (t) => {
+    o.setState({ isTourPassed: t });
+  },
+  setToolbarWidth: (t) => {
+    o.setState({ toolbarWidth: t });
+  },
+  setRightbarWidth: (t) => {
+    o.setState({ rightbarWidth: t });
+  },
+  toggleToolVisibility: (t) => {
+    o.setState((e) => ({
+      ...e,
+      hiddenTools: e.hiddenTools.includes(t) ? e.hiddenTools.filter((a) => a !== t) : [...e.hiddenTools, t]
+    }));
+  },
+  setLayout: (t) => {
+    o.setState({ layout: t });
+  },
+  setTheme: (t) => {
+    o.setState({ theme: t });
+  }
+}), y = l();
+export {
+  y as appContainerStore
+};

package/dist/components/AppContainer/hooks/useSetAppContainerLayout.d.ts

@@ -0,0 +1,2 @@
+import { AppContainerLayout } from '../types';
+export declare const useSetAppContainerLayout: (layout?: AppContainerLayout) => void;

package/dist/components/AppContainer/hooks/useSetAppContainerLayout.js

@@ -0,0 +1,10 @@
+import { useEffect as o } from "react";
+import { appContainerStore as e } from "./useAppContainerStore.js";
+const p = (t = "default") => {
+  o(() => (e.api.setLayout(t), () => {
+    e.api.setLayout("default");
+  }), [t]);
+};
+export {
+  p as useSetAppContainerLayout
+};

package/dist/components/AppContainer/types.d.ts

@@ -5,17 +5,20 @@ import { MenuUser, UserNotifications } from './components/menus/UserMenu/MenuUse
 export type ToolDef = {
     id: string;
     name: string;
-    icon: ReactNode;
+    icon: (props?: {
+        size?: number;
+    }) => ReactNode;
     path: string;
     onClick?: () => void;
     withBackButton?: boolean;
     entityName?: string;
 };
 export type AppContainerProps = {
+    showAppsSidebar?: boolean;
     content?: ReactNode;
     toolbar?: ReactNode;
     rightbar?: ReactNode;
-    header?: ReactNode;
+    header: ReactNode;
     navbarTitle?: string;
     displayType?: 'ROUNDED' | 'BOXED';
     footer?: ReactNode;
@@ -38,6 +41,7 @@ export type AppContainerDataStore = {
     version: string;
     updatedAt: string;
     privacyPolicyLink: string;
+    userAgreementLink: string;
     whatsNewItems: WhatsNewProps['items'];
 };
 type ReadNotificationsRequest = {
@@ -48,13 +52,13 @@ type ReadNotificationsRequest = {
 export type AppContainerActionsStore = {
     readNotificationsFunc: (data: ReadNotificationsRequest) => void;
 };
+export type AppContainerLayout = 'header-only' | 'nothing' | 'default';
 export type AppContainerStore = {
     toolbarWidth: number;
     showToolbar: boolean;
     theme: string;
     hiddenTools: string[];
-    withoutToolbar: boolean;
-    withoutHeader: boolean;
+    layout: AppContainerLayout;
     isTourPassed: boolean;
     showRightbar: boolean;
     rightbarWidth: number;

package/dist/components/AppShell/AppShell.js

@@ -0,0 +1,18 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Box as r } from "@mantine/core";
+import o from "./AppShell.module.css.js";
+const s = ({ children: e, ...t }) => /* @__PURE__ */ n(r, { className: o.section, ...t, children: e }), a = ({ children: e, ...t }) => /* @__PURE__ */ n(r, { className: o.content, ...t, children: e }), c = ({ children: e, ...t }) => /* @__PURE__ */ n(r, { component: "header", className: o.header, ...t, children: e }), m = ({ children: e, ...t }) => /* @__PURE__ */ n(r, { className: o.leftSidebar, ...t, children: e }), i = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ n(r, { className: o.root, ...t, children: e }), l = ({ children: e, ...t }) => /* @__PURE__ */ n(r, { className: o.rightSidebar, ...t, children: e }), p = ({ children: e, ...t }) => /* @__PURE__ */ n(r, { component: "main", className: o.main, ...t, children: e }), u = ({ children: e, ...t }) => /* @__PURE__ */ n(r, { className: o.workContent, ...t, children: e }), b = Object.assign(i, {
+  Section: s,
+  LeftSidebar: m,
+  RightSidebar: l,
+  Content: a,
+  Header: c,
+  Main: p,
+  WorkContent: u
+});
+export {
+  b as AppShell
+};

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

@@ -0,0 +1,19 @@
+const e = "_root_9zlef_1", t = "_header_9zlef_9", o = "_section_9zlef_20", _ = "_leftSidebar_9zlef_28", n = "_rightSidebar_9zlef_36", r = "_main_9zlef_44", i = "_workContent_9zlef_52", a = {
+  root: e,
+  header: t,
+  section: o,
+  leftSidebar: _,
+  rightSidebar: n,
+  main: r,
+  workContent: i
+};
+export {
+  a as default,
+  t as header,
+  _ as leftSidebar,
+  r as main,
+  n as rightSidebar,
+  e as root,
+  o as section,
+  i as workContent
+};

package/dist/components/AttachmentsGalleryModal/AttachmentsGalleryContext.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
 import { EmblaCarouselType } from 'embla-carousel';
 interface AttachmentsGalleryContextValue {
     embla: EmblaCarouselType | null;
@@ -11,12 +12,13 @@ interface AttachmentsGalleryContextValue {
     setSelectedIndex: (value: number) => void;
     zoomPercentage: number;
     setZoomPercentage: (value: number) => void;
-    transformRefs: React.MutableRefObject<any[]>;
+    transformRefs: React.MutableRefObject<ReactZoomPanPinchContentRef[]>;
     prevIndexRef: React.MutableRefObject<number>;
 }
 export declare const useAttachmentsGalleryContext: () => AttachmentsGalleryContextValue;
 interface AttachmentsGalleryProviderProps {
     children: ReactNode;
+    initialIndex: number;
 }
-export declare const AttachmentsGalleryProvider: ({ children, }: AttachmentsGalleryProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AttachmentsGalleryProvider: ({ children, initialIndex, }: AttachmentsGalleryProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/AttachmentsGalleryModal/AttachmentsGalleryContext.js

@@ -0,0 +1,39 @@
+import { jsx as C } from "react/jsx-runtime";
+import { useState as e, useRef as n, createContext as P, useContext as S } from "react";
+const o = P(null), G = () => {
+  const t = S(o);
+  if (!t)
+    throw new Error(
+      "useAttachmentsGalleryContext must be used within AttachmentsGalleryProvider"
+    );
+  return t;
+}, p = ({
+  children: t,
+  initialIndex: r
+}) => {
+  const [s, l] = e(null), [c, a] = e(!1), [m, x] = e(!1), [u, d] = e(r ?? 0), [f, i] = e(100), h = n([]), v = n(0);
+  return /* @__PURE__ */ C(
+    o.Provider,
+    {
+      value: {
+        embla: s,
+        setEmbla: l,
+        canScrollPrev: c,
+        setCanScrollPrev: a,
+        canScrollNext: m,
+        setCanScrollNext: x,
+        selectedIndex: u,
+        setSelectedIndex: d,
+        zoomPercentage: f,
+        setZoomPercentage: i,
+        transformRefs: h,
+        prevIndexRef: v
+      },
+      children: t
+    }
+  );
+};
+export {
+  p as AttachmentsGalleryProvider,
+  G as useAttachmentsGalleryContext
+};

package/dist/components/AttachmentsGalleryModal/AttachmentsGalleryModal.js

@@ -0,0 +1,127 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { memo as w } from "react";
+import { Carousel as h } from "@mantine/carousel";
+import { Modal as B, Box as a, ActionIcon as v } from "@mantine/core";
+import { useHotkeys as I } from "@mantine/hooks";
+import { IconChevronLeft as M, IconChevronRight as P } from "@tabler/icons-react";
+import b from "clsx";
+import { AttachmentsGalleryProvider as G, useAttachmentsGalleryContext as R } from "./AttachmentsGalleryContext.js";
+import { GallerySlide as k } from "./components/GallerySlide.js";
+import { ModalFooter as E } from "./components/ModalFooter.js";
+import { ModalHeader as F } from "./components/ModalHeader.js";
+import { MODAL_TRANSITION as L } from "./constants.js";
+import { useEmblaCarousel as T } from "./hooks/useEmblaCarousel.js";
+import o from "./styles.module.css.js";
+const j = ({
+  onClose: t,
+  initialIndex: l = 0,
+  attachments: r = []
+}) => {
+  const { setEmbla: s, selectedIndex: n, setZoomPercentage: g, transformRefs: C } = R(), {
+    scrollPrev: c,
+    scrollNext: m,
+    canScrollPrev: N,
+    canScrollNext: S,
+    visibleSlides: y
+  } = T();
+  I([
+    ["arrowLeft", c],
+    ["arrowRight", m]
+  ]);
+  const d = r?.length <= 1;
+  return /* @__PURE__ */ p(a, { autoFocus: !0, className: o.root, children: [
+    /* @__PURE__ */ e(F, { attachments: r, onClose: t }),
+    /* @__PURE__ */ p("div", { className: o.container, children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          draggable: !1,
+          getEmblaApi: s,
+          withIndicators: !1,
+          withControls: !1,
+          initialSlide: l ?? 0,
+          height: "100%",
+          classNames: {
+            root: o.carouselRoot,
+            viewport: o.carouselViewport,
+            slide: o.carouselSlide
+          },
+          children: r.map((f, i) => {
+            const A = y.includes(i);
+            return /* @__PURE__ */ e(h.Slide, { children: A ? /* @__PURE__ */ e(
+              k,
+              {
+                isActive: i === n,
+                ref: (u) => {
+                  C.current[i] = u;
+                },
+                attachment: f,
+                onTransformed: (u, x) => {
+                  i === n && g(
+                    Number((x.scale * 100).toFixed(0))
+                  );
+                }
+              }
+            ) : /* @__PURE__ */ e(a, {}) }, f?.id);
+          })
+        }
+      ),
+      !d && /* @__PURE__ */ e(a, { className: b(o.navButton, o.navButtonPrev), children: /* @__PURE__ */ e(
+        v,
+        {
+          variant: "subtle",
+          bg: "transparent",
+          size: 44,
+          onClick: c,
+          disabled: !N,
+          color: "var(--app-container-item-bg-hover)",
+          children: /* @__PURE__ */ e(M, {})
+        }
+      ) }),
+      !d && /* @__PURE__ */ e(a, { className: b(o.navButton, o.navButtonNext), children: /* @__PURE__ */ e(
+        v,
+        {
+          variant: "subtle",
+          disabled: !S,
+          bg: "transparent",
+          color: "var(--app-container-item-bg-hover)",
+          size: 44,
+          onClick: m,
+          children: /* @__PURE__ */ e(P, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(E, { attachments: r })
+  ] });
+}, Y = w(
+  ({
+    opened: t,
+    onOpenChange: l,
+    attachments: r,
+    initialIndex: s
+  }) => /* @__PURE__ */ e(
+    B,
+    {
+      transitionProps: L,
+      classNames: {
+        content: o.modalContent,
+        body: o.modalBody
+      },
+      withCloseButton: !1,
+      opened: t,
+      onClose: () => l?.(!1),
+      fullScreen: !0,
+      children: t && /* @__PURE__ */ e(G, { initialIndex: s ?? 0, children: /* @__PURE__ */ e(
+        j,
+        {
+          attachments: r,
+          initialIndex: s,
+          onClose: () => l?.(!1)
+        }
+      ) })
+    }
+  )
+);
+export {
+  Y as AttachmentsGalleryModal
+};

package/dist/components/AttachmentsGalleryModal/components/ErrorSection.js

@@ -0,0 +1,14 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { useTranslation as o } from "react-i18next";
+import { Flex as i, Text as l } from "@mantine/core";
+import { IconAlertCircle as n } from "@tabler/icons-react";
+const s = () => {
+  const { t } = o("ui");
+  return /* @__PURE__ */ e(i, { align: "center", justify: "center", direction: "column", children: [
+    /* @__PURE__ */ r(n, { size: 36, color: "var(--app-gallary-text)" }),
+    /* @__PURE__ */ r(l, { c: "var(--app-gallary-text)", children: t("gallery.fileError") })
+  ] });
+};
+export {
+  s as ErrorSection
+};

package/dist/components/AttachmentsGalleryModal/components/GallerySlide.js

@@ -0,0 +1,69 @@
+import { jsx as r, Fragment as a } from "react/jsx-runtime";
+import { memo as u, forwardRef as g } from "react";
+import { TransformWrapper as h, TransformComponent as C } from "react-zoom-pan-pinch";
+import { ShakaVideoPlayer as N } from "./ShakePlayer/ShakaPlayer.js";
+import { Box as O } from "@mantine/core";
+import { BaseLoader as P } from "../../Loaders/BaseLoader.js";
+import { ZOOM_CONFIG as o, TRANSFORM_COMPONENT_STYLES as t } from "../constants.js";
+import { useGetPreviewUrl as b } from "../hooks/useGetPreviewUrl.js";
+import { usePanning as w } from "../hooks/usePanning.js";
+import { ErrorSection as y } from "./ErrorSection.js";
+import m from "../styles.module.css.js";
+const k = u(
+  g(
+    ({ onTransformed: n, attachment: e, isActive: s }, d) => {
+      const { isError: p, setIsError: c, fileUrl: f, isFetching: i, isVideo: l } = b(e), S = w({ isFetching: i, isVideo: l });
+      return /* @__PURE__ */ r(
+        h,
+        {
+          panning: {
+            disabled: !0
+          },
+          onTransformed: n,
+          initialScale: o.initialScale,
+          minScale: o.minScale,
+          maxScale: o.maxScale,
+          limitToBounds: !0,
+          disabled: i || l,
+          disablePadding: !0,
+          centerZoomedOut: !0,
+          ref: d,
+          wheel: {
+            disabled: !1,
+            step: o.wheelStep
+          },
+          doubleClick: {
+            disabled: !0
+          },
+          children: /* @__PURE__ */ r(
+            C,
+            {
+              wrapperStyle: t,
+              contentStyle: t,
+              wrapperProps: S,
+              children: i ? /* @__PURE__ */ r(P, {}) : /* @__PURE__ */ r(a, { children: l ? /* @__PURE__ */ r(O, { className: m.videoContainer, children: /* @__PURE__ */ r(
+                N,
+                {
+                  isActive: s,
+                  autoPlay: !1,
+                  attachmentId: e.id
+                }
+              ) }) : /* @__PURE__ */ r(a, { children: p ? /* @__PURE__ */ r(y, {}) : /* @__PURE__ */ r(
+                "img",
+                {
+                  onError: () => c(!0),
+                  alt: e.originalFileName || "file",
+                  className: m.imageContainer,
+                  src: e?.Url ?? f ?? ""
+                }
+              ) }) })
+            }
+          )
+        }
+      );
+    }
+  )
+);
+export {
+  k as GallerySlide
+};

package/dist/components/AttachmentsGalleryModal/components/ModalFooter.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useMenu as l } from "../../../hooks/useMenu.js";
+import { Flex as i, Text as s } from "@mantine/core";
+import { useAttachmentsGalleryContext as a } from "../AttachmentsGalleryContext.js";
+const f = ({
+  attachments: t
+}) => {
+  const { selectedIndex: r } = a(), o = t?.[r], { isMobile: n } = l();
+  return n ? /* @__PURE__ */ e(i, { justify: "center", style: { flex: "none" }, children: /* @__PURE__ */ e(s, { py: 8, size: "xs", c: "var(--app-gallary-text)", children: o?.originalFileName }) }) : null;
+};
+export {
+  f as ModalFooter
+};