@soppiya/app-bridge 1.0.0

package/README.md

@@ -0,0 +1,23 @@
+# Rslib project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```

package/dist/assets/images/docs.js

@@ -0,0 +1,2 @@
+import docs_namespaceObject from "../../static/image/docs.png";
+export { docs_namespaceObject as default };

package/dist/assets/images/document.js

@@ -0,0 +1,2 @@
+import document_namespaceObject from "../../static/image/document.png";
+export { document_namespaceObject as default };

package/dist/assets/images/pdf.js

@@ -0,0 +1,2 @@
+import pdf_namespaceObject from "../../static/image/pdf.png";
+export { pdf_namespaceObject as default };

package/dist/assets/images/play.js

@@ -0,0 +1,2 @@
+import play_namespaceObject from "../../static/image/play.png";
+export { play_namespaceObject as default };

package/dist/assets/images/ppt.js

@@ -0,0 +1,2 @@
+import ppt_namespaceObject from "../../static/image/ppt.png";
+export { ppt_namespaceObject as default };

package/dist/assets/images/rar.js

@@ -0,0 +1,2 @@
+import rar_namespaceObject from "../../static/image/rar.png";
+export { rar_namespaceObject as default };

package/dist/assets/images/sound.js

@@ -0,0 +1,2 @@
+import sound_namespaceObject from "../../static/image/sound.png";
+export { sound_namespaceObject as default };

package/dist/assets/images/txt.js

@@ -0,0 +1,2 @@
+import txt_namespaceObject from "../../static/image/txt.png";
+export { txt_namespaceObject as default };

package/dist/assets/images/xls.js

@@ -0,0 +1,2 @@
+import xls_namespaceObject from "../../static/image/xls.png";
+export { xls_namespaceObject as default };

package/dist/assets/images/zip.js

@@ -0,0 +1,2 @@
+import zip_namespaceObject from "../../static/image/zip.png";
+export { zip_namespaceObject as default };

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Media } from "./media";
+export { SaveBar } from "./savebar";

package/dist/components/index.js

@@ -0,0 +1,3 @@
+import { Media } from "./media/index.js";
+import { SaveBar } from "./savebar/index.js";
+export { Media, SaveBar };

package/dist/components/infinity-scroll/InfinityScroll.d.ts

@@ -0,0 +1,5 @@
+type InfinityScrollProps = {
+    onFetch: () => void;
+};
+declare const InfinityScroll: ({ onFetch }: InfinityScrollProps) => import("react/jsx-runtime").JSX.Element;
+export default InfinityScroll;

package/dist/components/infinity-scroll/InfinityScroll.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { BlockStack, Spinner } from "@soppiya/elementus";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
+import { useEffect } from "react";
+const InfinityScroll = ({ onFetch })=>{
+    const [ref, entry] = useIntersectionObserver({
+        threshold: 0,
+        root: null,
+        rootMargin: "0px"
+    });
+    const isIntersecting = entry?.isIntersecting;
+    useEffect(()=>{
+        if (isIntersecting) onFetch();
+    }, [
+        isIntersecting,
+        onFetch
+    ]);
+    return /*#__PURE__*/ jsx(BlockStack, {
+        ref: ref,
+        justifyContent: "center",
+        alignItems: "center",
+        className: "p-5",
+        children: /*#__PURE__*/ jsx(Spinner, {
+            size: "md"
+        })
+    });
+};
+const infinity_scroll_InfinityScroll = InfinityScroll;
+export { infinity_scroll_InfinityScroll as default };

package/dist/components/infinity-scroll/index.d.ts

@@ -0,0 +1 @@
+export { default as InfinityScroll } from "./InfinityScroll";

package/dist/components/infinity-scroll/index.js

@@ -0,0 +1,2 @@
+import InfinityScroll from "./InfinityScroll.js";
+export { InfinityScroll };

package/dist/components/media/Media.d.ts

@@ -0,0 +1,11 @@
+import { MediaType } from "../../shared/graphql/graphql";
+type MediaProps = {
+    title?: string;
+    types?: MediaType[];
+    limit?: number;
+    isFilterByTypes?: boolean;
+    onClose?: () => void;
+    onOk?: (medias: string[]) => void;
+};
+declare const Media: ({ title, types, isFilterByTypes, limit, onClose, onOk, }: MediaProps) => import("react/jsx-runtime").JSX.Element;
+export default Media;

package/dist/components/media/Media.js

@@ -0,0 +1,349 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MediaType } from "../../shared/graphql/graphql.js";
+import { CombinedGraphQLErrors } from "@apollo/client";
+import { BlockStack, Box, Button, InlineStack, Input, Modal, ProgressBar, SoppiyaIcon, Spinner, Text } from "@soppiya/elementus";
+import classnames from "classnames";
+import { useState } from "react";
+import { Bounce, ToastContainer, toast } from "react-toastify";
+import { InfinityScroll } from "../infinity-scroll/index.js";
+import { formatToBytes } from "./format.js";
+import MediaItem from "./MediaItem.js";
+import MediaPreview from "./MediaPreview.js";
+import MediaSorting from "./MediaSorting.js";
+import { View } from "./types.js";
+import { useUploadMedias } from "./uploadMedias.js";
+import { useDeleteMedias } from "./useDeleteMedias.js";
+import { useDrop } from "./useDrop.js";
+import { useMediaFilter } from "./useMediaFilter.js";
+import { useMedias } from "./useMedias.js";
+import { useMediaSorting } from "./useMediaSorting.js";
+import { useStorage } from "./useStorage.js";
+const Media_Media = ({ title = "Media", types = [
+    MediaType.audio,
+    MediaType.file,
+    MediaType.image,
+    MediaType.video
+], isFilterByTypes = false, limit = 1 / 0, onClose, onOk })=>{
+    const { query, debounceQuery, onChangeQuery } = useMediaFilter();
+    const { sorting, onChangeSorting } = useMediaSorting();
+    const [selectedMedias, setSelectedMedias] = useState([]);
+    const [preview, setPreview] = useState(null);
+    const [view, setView] = useState(View.Grid);
+    const { medias, isLoadingMedias, isFetchingMore, pageInfo, fetchMoreMedias } = useMedias({
+        count: 20,
+        query: debounceQuery,
+        reverse: sorting.reverse,
+        sortKey: sorting.sortKey,
+        ...isFilterByTypes && {
+            filterKeys: {
+                types
+            }
+        }
+    });
+    const { usageStorage, mediaUsage, totalStorage, refetchMediaUsage } = useStorage();
+    const { isUploadingMedias, uploadMedias } = useUploadMedias();
+    const { deleteMedias, isDeletingMedias } = useDeleteMedias();
+    const { ref, onChangeFile, onDrop, onDragOver } = useDrop({
+        async onComplete (files) {
+            try {
+                await uploadMedias({
+                    variables: {
+                        input: files.map((file)=>file.file)
+                    }
+                });
+                refetchMediaUsage();
+            } catch (error) {
+                if (CombinedGraphQLErrors.is(error)) toast(error.message);
+            }
+        }
+    });
+    const isMediaSelected = selectedMedias.length > 0;
+    const activePreviewMedia = medias.find((media)=>media?._id === preview);
+    const handlePreview = (value)=>{
+        setPreview((prev)=>value && prev !== value ? value : null);
+    };
+    const toggleView = ()=>{
+        setView((prev)=>prev === View.Grid ? View.List : View.Grid);
+    };
+    const handleSelectMedia = (media)=>{
+        if (selectedMedias.some((mediaId)=>mediaId === media)) return void setSelectedMedias((prev)=>prev.filter((mediaId)=>mediaId !== media));
+        setSelectedMedias((prev)=>prev.concat(media));
+    };
+    const handleDeleteMedias = async ()=>{
+        try {
+            await deleteMedias({
+                variables: {
+                    cursors: selectedMedias
+                }
+            });
+            refetchMediaUsage();
+            setSelectedMedias([]);
+            if (selectedMedias.includes(String(preview))) setPreview(null);
+        } catch (error) {
+            if (CombinedGraphQLErrors.is(error)) toast(error.message);
+        }
+    };
+    const handleOk = ()=>{
+        if ("function" == typeof onOk) onOk(selectedMedias);
+    };
+    const isValidMedia = ()=>{
+        if (!isMediaSelected) return false;
+        const isTypeMatch = medias?.every((media)=>selectedMedias.includes(String(media?._id)) ? types.includes(media?.type) : true);
+        if (!isTypeMatch) return false;
+        if (limit === 1 / 0) return true;
+        return selectedMedias.length <= limit;
+    };
+    const modalFooterJSX = /*#__PURE__*/ jsxs(InlineStack, {
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [
+            /*#__PURE__*/ jsxs(BlockStack, {
+                className: "!max-w-[150px] w-full",
+                gapY: 30,
+                children: [
+                    /*#__PURE__*/ jsxs(InlineStack, {
+                        alignItems: "center",
+                        gapX: 40,
+                        children: [
+                            /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                icon: "upload-02.svg",
+                                size: "md"
+                            }),
+                            /*#__PURE__*/ jsxs(Text, {
+                                size: "sm",
+                                weight: "semibold",
+                                color: "secondary",
+                                children: [
+                                    formatToBytes(mediaUsage, 2),
+                                    " / ",
+                                    formatToBytes(totalStorage, 2)
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ProgressBar, {
+                        accept: `${usageStorage}%`
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(InlineStack, {
+                gapX: 60,
+                stack: "full",
+                justifyContent: "end",
+                children: /*#__PURE__*/ jsx(Button, {
+                    size: "xs",
+                    disabled: !isValidMedia(),
+                    onClick: handleOk,
+                    children: "Done"
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Modal, {
+        title: title,
+        open: true,
+        size: "lg",
+        scroll: false,
+        bodyPadding: 0,
+        buttons: modalFooterJSX,
+        onClose: onClose,
+        children: [
+            /*#__PURE__*/ jsx(ToastContainer, {
+                position: "bottom-center",
+                autoClose: 5000,
+                hideProgressBar: false,
+                newestOnTop: false,
+                closeOnClick: false,
+                rtl: false,
+                pauseOnFocusLoss: true,
+                draggable: true,
+                pauseOnHover: true,
+                theme: "dark",
+                transition: Bounce
+            }),
+            /*#__PURE__*/ jsxs(BlockStack, {
+                className: "relative z",
+                onDrop: onDrop,
+                onDragOver: onDragOver,
+                children: [
+                    /*#__PURE__*/ jsx(BlockStack, {
+                        padding: 80,
+                        gapY: 30,
+                        children: /*#__PURE__*/ jsxs(InlineStack, {
+                            justifyContent: "space-between",
+                            stack: "full",
+                            children: [
+                                /*#__PURE__*/ jsx(Box, {
+                                    className: "w-[207px] lg:w-[300px]",
+                                    children: /*#__PURE__*/ jsx(Input, {
+                                        size: "sm",
+                                        type: "search",
+                                        placeholder: "Search files",
+                                        value: query,
+                                        onChange: (event)=>onChangeQuery(event.target.value)
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxs(InlineStack, {
+                                    gap: 50,
+                                    flexWrap: "wrap",
+                                    justifyContent: "end",
+                                    children: [
+                                        /*#__PURE__*/ jsxs(Box, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(Button, {
+                                                    color: "primary",
+                                                    className: "!px-[8px]",
+                                                    onClick: ()=>ref.current?.click(),
+                                                    children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                                        size: "sm",
+                                                        icon: "plus.svg",
+                                                        color: "white"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx("input", {
+                                                    className: "hidden",
+                                                    type: "file",
+                                                    onChange: onChangeFile,
+                                                    multiple: true,
+                                                    ref: ref,
+                                                    accept: [
+                                                        "jpg",
+                                                        "png",
+                                                        "svg",
+                                                        "gif",
+                                                        "avif",
+                                                        "webp",
+                                                        "heic",
+                                                        "mp4",
+                                                        "avi",
+                                                        "mkv",
+                                                        "mov",
+                                                        "webm",
+                                                        "mpeg",
+                                                        "ogv",
+                                                        "flv",
+                                                        "pdf",
+                                                        "zip",
+                                                        "rar",
+                                                        "doc",
+                                                        "docx",
+                                                        "ppt",
+                                                        "pptx",
+                                                        "xls",
+                                                        "xlsx",
+                                                        "rtf",
+                                                        "txt",
+                                                        "mp3",
+                                                        "wav",
+                                                        "aac",
+                                                        "ogg",
+                                                        "m4a"
+                                                    ].map((type)=>"." + type).join(",")
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(MediaSorting, {
+                                            sort: sorting,
+                                            onChange: onChangeSorting
+                                        }),
+                                        /*#__PURE__*/ jsx(Box, {
+                                            children: /*#__PURE__*/ jsx(Button, {
+                                                variant: "outline",
+                                                color: "secondary",
+                                                className: "!px-[8px]",
+                                                onClick: toggleView,
+                                                children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                                    size: "sm",
+                                                    icon: view === View.Grid ? "list-01.svg" : "grid.svg"
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Box, {
+                                            children: /*#__PURE__*/ jsx(Button, {
+                                                variant: "outline",
+                                                color: "secondary",
+                                                className: "!px-[8px]",
+                                                disabled: !isMediaSelected,
+                                                loading: isDeletingMedias,
+                                                onClick: handleDeleteMedias,
+                                                children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                                    size: "sm",
+                                                    icon: "delete-02.svg",
+                                                    color: isMediaSelected ? "danger" : "secondary"
+                                                })
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    (isUploadingMedias || isDeletingMedias) && /*#__PURE__*/ jsx(BlockStack, {
+                        justifyContent: "center",
+                        alignItems: "center",
+                        className: "absolute h-full w-full z-1 bg-gray-400 opacity-50",
+                        children: /*#__PURE__*/ jsx(Spinner, {
+                            size: "lg"
+                        })
+                    }),
+                    isLoadingMedias && !isFetchingMore ? /*#__PURE__*/ jsx(BlockStack, {
+                        justifyContent: "center",
+                        alignItems: "center",
+                        className: "absolute h-full w-full z-1 bg-gray-400 opacity-50",
+                        children: /*#__PURE__*/ jsx(Spinner, {
+                            size: "lg"
+                        })
+                    }) : /*#__PURE__*/ jsxs(InlineStack, {
+                        gapX: {
+                            xs: 0,
+                            md: 70,
+                            lg: 80
+                        },
+                        padding: {
+                            px: 80
+                        },
+                        stack: "full",
+                        alignItems: "initial",
+                        children: [
+                            /*#__PURE__*/ jsxs(BlockStack, {
+                                gapY: 90,
+                                className: classnames("max-h-[calc(100dvh-300px)] overflow-x-hidden overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", {
+                                    "md:!w-[calc(100%-300px)] lg:!w-[calc(100%-336px)]": Boolean(preview)
+                                }),
+                                children: [
+                                    /*#__PURE__*/ jsx(Box, {
+                                        className: `mx-auto ${preview ? "md:w-[395px] lg:w-[444px]" : "w-[320px] md:w-[708px] lg:w-[780px] "}`,
+                                        children: /*#__PURE__*/ jsx(Box, {
+                                            className: classnames("grid", {
+                                                "grid-cols-[repeat(1,1fr)]": view === View.List,
+                                                "grid-cols-[repeat(auto-fill,minmax(150px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(117px,1fr))] !rounded-[6px] gap-[20px] lg:gap-[35px]": view === View.Grid,
+                                                "gap-[20px]": view === View.Grid && Boolean(preview)
+                                            }),
+                                            children: medias.map((media)=>/*#__PURE__*/ jsx(MediaItem, {
+                                                    view: view,
+                                                    media: media,
+                                                    isSelected: selectedMedias.includes(String(media?._id)),
+                                                    isPreview: Boolean(preview),
+                                                    onPreview: handlePreview,
+                                                    onSelect: handleSelectMedia
+                                                }, media?._id))
+                                        })
+                                    }),
+                                    pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
+                                        onFetch: fetchMoreMedias
+                                    })
+                                ]
+                            }),
+                            !!preview && /*#__PURE__*/ jsx(MediaPreview, {
+                                media: activePreviewMedia,
+                                onClose: handlePreview
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const Media = Media_Media;
+export { Media as default };

package/dist/components/media/Media.stories.d.ts

@@ -0,0 +1,18 @@
+declare const meta: {
+    title: string;
+    component: ({ title, types, isFilterByTypes, limit, onClose, onOk, }: {
+        title?: string;
+        types?: import("../../shared/graphql/graphql").MediaType[];
+        limit?: number;
+        isFilterByTypes?: boolean;
+        onClose?: () => void;
+        onOk?: (medias: string[]) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+export declare const Default: {
+    args: {
+        primary: boolean;
+        label: string;
+    };
+};

package/dist/components/media/Media.stories.js

@@ -0,0 +1,13 @@
+import Media from "./Media.js";
+const meta = {
+    title: 'Example/Media',
+    component: Media
+};
+const Media_stories = meta;
+const Default = {
+    args: {
+        primary: true,
+        label: 'Button'
+    }
+};
+export { Default, Media_stories as default };

package/dist/components/media/MediaItem.d.ts

@@ -0,0 +1,12 @@
+import { Maybe, Media } from "../../shared/graphql/graphql";
+import { View } from "./types";
+type MediaItemProps = {
+    view: View;
+    media?: Maybe<Media>;
+    isPreview: boolean;
+    isSelected: boolean;
+    onPreview: (value?: string | null) => void;
+    onSelect: (value: string) => void;
+};
+declare const MediaItem: ({ view, media, isPreview, isSelected, onPreview, onSelect }: MediaItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaItem;

package/dist/components/media/MediaItem.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import play from "../../assets/images/play.js";
+import { BlockStack, Box, Button, InlineStack, SoppiyaIcon, Spinner, Text } from "@soppiya/elementus";
+import classnames from "classnames";
+import { View } from "./types.js";
+import { useThumbnail } from "./useThumbnail.js";
+const MediaItem = ({ view, media, isPreview = false, isSelected = false, onPreview, onSelect })=>{
+    const { url, loading } = useThumbnail(media);
+    return /*#__PURE__*/ jsxs(InlineStack, {
+        flexDirection: view === View.Grid ? "col" : "row",
+        className: classnames("group p-[10px]", {
+            "w-full gap-x-[12px] border-b border-b-[#ebebeb] last:border-b-0 lg:cursor-pointer relative hover:!bg-[#f7f7f7]": view === View.List,
+            "w-[150px] h-[180px] md:h-[150px] lg:h-[154px]  md:w-[117px] lg:w-[128px]": view === View.Grid,
+            "bg-[#ebebeb]": isSelected
+        }),
+        onClick: ()=>onSelect(String(media?._id)),
+        children: [
+            /*#__PURE__*/ jsxs(Box, {
+                className: classnames("relative", {
+                    "w-[50px] h-[50px]": view === View.List,
+                    "w-[130px] md:w-[100px] lg:w-[108px] h-[130px] md:h-[100px] lg:h-[108px]": view === View.Grid
+                }),
+                children: [
+                    media?.type === "image" || media?.type === "video" ? /*#__PURE__*/ jsxs(Box, {
+                        className: "relative w-full h-full",
+                        children: [
+                            loading && /*#__PURE__*/ jsx(BlockStack, {
+                                justifyContent: "center",
+                                alignItems: "center",
+                                className: "absolute left-0 top-o z-1 backdrop-blur-xs h-full",
+                                children: /*#__PURE__*/ jsx(Spinner, {
+                                    size: "lg"
+                                })
+                            }),
+                            media?.type === "video" && /*#__PURE__*/ jsx(BlockStack, {
+                                justifyContent: "center",
+                                alignItems: "center",
+                                className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+                                children: /*#__PURE__*/ jsx("img", {
+                                    src: play,
+                                    className: "object-cover w-[50px] invert brightness-0",
+                                    alt: "video"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("img", {
+                                className: "w-full h-full object-cover rounded-[5px]",
+                                src: String(url)
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(Box, {
+                        className: "w-full h-full flex justify-center items-center border border-dashed-[#ebebeb]",
+                        children: /*#__PURE__*/ jsx("img", {
+                            className: "w-[50px] h-[50px] object-cover rounded-[5px]",
+                            src: String(url)
+                        })
+                    }),
+                    view === View.Grid && /*#__PURE__*/ jsx(Box, {
+                        className: "hidden group-hover:block absolute top-1 right-1",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            color: "white",
+                            size: "xs",
+                            className: "!px-[5px] !border-0 !rounded-[3px]",
+                            onClick: (event)=>{
+                                event.stopPropagation();
+                                onPreview(media?._id);
+                            },
+                            children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                icon: isPreview ? "eye-close.svg" : "eye-open.svg",
+                                size: "sm"
+                            })
+                        })
+                    })
+                ]
+            }),
+            view === View.List && /*#__PURE__*/ jsx(Box, {
+                className: "hidden group-hover:block absolute right-4 top-1/2 -translate-y-1/2",
+                children: /*#__PURE__*/ jsx(Button, {
+                    color: "white",
+                    size: "xs",
+                    className: "!px-[5px] !border-0 !rounded-[3px]",
+                    onClick: (event)=>{
+                        event.stopPropagation();
+                        onPreview(media?.url);
+                    },
+                    children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                        icon: isPreview ? "eye-open.svg" : "eye-close.svg",
+                        size: "sm"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(InlineStack, {
+                justifyContent: "center",
+                className: "mt-[10px]",
+                children: /*#__PURE__*/ jsx(Text, {
+                    truncate: "truncate-1",
+                    size: "xs",
+                    children: media?.file_name
+                })
+            })
+        ]
+    });
+};
+const media_MediaItem = MediaItem;
+export { media_MediaItem as default };

package/dist/components/media/MediaPreview.d.ts

@@ -0,0 +1,7 @@
+import { Maybe, Media } from "../../shared/graphql/graphql";
+type MediaPreviewProps = {
+    media: Maybe<Media | undefined>;
+    onClose: () => void;
+};
+declare const MediaPreview: ({ media, onClose }: MediaPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaPreview;