@symply.io/basic-components 1.3.11-alpha.8 → 1.4.0-beta.1

package/ToastPrompt/Prompt.js

@@ -1,62 +1,27 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert from "@mui/material/Alert";
 import Slide from "@mui/material/Slide";
+import AlertTitle from "@mui/material/AlertTitle";
 import Snackbar from "@mui/material/Snackbar";
-import Typography from "@mui/material/Typography";
-import SnackbarContent from "@mui/material/SnackbarContent";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import InfoIcon from "@mui/icons-material/Info";
-import ErrorIcon from "@mui/icons-material/Error";
-import WarningIcon from "@mui/icons-material/Warning";
-import SuccessIcon from "@mui/icons-material/CheckCircle";
-import { green, amber, red, blue } from "@mui/material/colors";
 import useCustomTheme from "../useCustomTheme";
-const Transition = (args) => {
-    return _jsx(Slide, { ...args, direction: "up" });
-};
-export default function Prompt(props) {
-    const { open, icon, variant, message, timeout, onClose } = props;
-    const theme = useCustomTheme();
-    const styles = useMemo(() => ({
-        success: {
-            backgroundColor: green[500]
-        },
-        error: {
-            backgroundColor: red[400]
-        },
-        info: {
-            backgroundColor: blue[600]
-        },
-        warning: {
-            backgroundColor: amber["A700"]
-        }
-    }), []);
-    const VariantIcon = useMemo(() => ({
-        success: SuccessIcon,
-        warning: WarningIcon,
-        error: ErrorIcon,
-        info: InfoIcon
-    }), []);
-    const Icon = useMemo(() => VariantIcon[variant], []);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Snackbar, { anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
-                zIndex: 99999,
-                marginTop: "3vh"
-            }, children: _jsx(SnackbarContent, { sx: {
-                    ...styles[variant],
-                    root: {
-                        [theme.breakpoints.down("sm")]: {
-                            maxWidth: "320px",
-                            borderRadius: "4px"
-                        }
-                    }
-                }, "aria-describedby": "Toast", message: _jsxs(Typography, { id: "Toast", component: "span", sx: {
-                        fontSize: 14,
-                        fontWeight: 700,
-                        display: "flex",
-                        alignItems: "center"
-                    }, children: [!icon ? (_jsx(Icon, { sx: {
-                                fontSize: 20,
-                                opacity: 0.9,
-                                marginRight: theme.spacing(1)
-                            } })) : (_jsx(_Fragment, { children: icon })), message] }) }) }, `${Date.now() * Math.round(Math.random())}`) }));
+function Transition(args) {
+    return _jsx(Slide, __assign({}, args, { direction: "up" }));
+}
+function Prompt(props) {
+    var open = props.open, variant = props.variant, message = props.message, timeout = props.timeout, onClose = props.onClose;
+    var theme = useCustomTheme();
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: { zIndex: 99999 } }, { children: _jsxs(Alert, __assign({ variant: "filled", security: variant, sx: { width: "100%" }, onClose: onClose }, { children: [_jsx(AlertTitle, __assign({ sx: { textTransform: "capitalize" } }, { children: variant })), message] })) }), "".concat(Date.now() * Math.round(Math.random()))) })));
 }
+export default Prompt;

package/ToastPrompt/index.js

@@ -1,14 +1,25 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, cloneElement } from "react";
 import Prompt from "./Prompt";
 import useInteractions from "./useInteractions";
-const PromptContext = createContext({
-    showPrompt: () => { }
+var PromptContext = createContext({
+    showPrompt: function () { }
 });
 export function PromptProvider(props) {
-    const { children } = props;
-    const { promptArgs, onShow, onHide } = useInteractions();
-    return (_jsx(PromptContext.Provider, { value: { showPrompt: onShow }, children: _jsxs(_Fragment, { children: [children, _jsx(Prompt, { ...promptArgs, onClose: onHide })] }) }));
+    var children = props.children;
+    var _a = useInteractions(), promptArgs = _a.promptArgs, onShow = _a.onShow, onHide = _a.onHide;
+    return (_jsxs(PromptContext.Provider, __assign({ value: { showPrompt: onShow } }, { children: [children, cloneElement(_jsx(Prompt, __assign({}, promptArgs, { onClose: onHide })))] })));
 }
 export function usePrompt() {
     return useContext(PromptContext);

package/ToastPrompt/types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { CSSProperties, ReactNode, SyntheticEvent } from "react";
 import type { SnackbarCloseReason } from "@mui/material/Snackbar";
 import type { SvgIconComponent } from "@mui/icons-material";
 export declare type Variant = "success" | "warning" | "info" | "error";
@@ -13,19 +13,13 @@ declare type PromptArgs = {
 };
 export interface InterfaceStates {
     promptArgs: PromptArgs & Record<"open", boolean>;
-    onHide: (_: any, reason: SnackbarCloseReason) => void;
+    onHide: (event: SyntheticEvent | Event, reason?: SnackbarCloseReason) => void;
     onShow: (args: PromptArgs) => void;
 }
 export interface PromptProps extends PromptArgs {
     open: boolean;
-    icon?: SvgIconComponent;
     onClose: InterfaceStates["onHide"];
 }
-export interface PromptStates {
-    styles: PromptStyles;
-    icons: PromptIcons;
-    icon: SvgIconComponent;
-}
 export interface PromptProviderProps {
     children: ReactNode;
 }

package/ToastPrompt/useInteractions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare function useInteractions(): {
     promptArgs: {
         message: string | 400;
@@ -9,6 +10,6 @@ declare function useInteractions(): {
         variant: import("./types").Variant;
         timeout: number;
     }) => void;
-    onHide: (_: any, reason: import("@mui/material").SnackbarCloseReason) => void;
+    onHide: (event: Event | import("react").SyntheticEvent<Element, Event>, reason?: import("@mui/material").SnackbarCloseReason | undefined) => void;
 };
 export default useInteractions;

package/ToastPrompt/useInteractions.js

@@ -1,27 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { useState, useCallback } from "react";
 function useInteractions() {
-    const ERROR_MESSAGE = "Internal Server Error";
-    const [promptArgs, setPromptArgs] = useState({
+    var ERROR_MESSAGE = "Internal Server Error";
+    var _a = useState({
         open: false,
         message: "Saved",
         variant: "success",
         timeout: 3500
-    });
-    const onHide = useCallback((_, reason) => {
+    }), promptArgs = _a[0], setPromptArgs = _a[1];
+    var onHide = useCallback(function (_, reason) {
         if (reason === "clickaway") {
             return;
         }
-        setPromptArgs(args => ({ ...args, open: false }));
+        setPromptArgs(function (args) { return (__assign(__assign({}, args), { open: false })); });
     }, []);
-    const onShow = useCallback(args => {
-        const { message = "Unknown message", variant = "info", timeout = 3500 } = args;
+    var onShow = useCallback(function (args) {
+        var _a = args.message, message = _a === void 0 ? "Unknown message" : _a, _b = args.variant, variant = _b === void 0 ? "info" : _b, _c = args.timeout, timeout = _c === void 0 ? 3500 : _c;
         setPromptArgs({
             open: true,
             message: message === 400 ? ERROR_MESSAGE : message,
-            variant,
-            timeout
+            variant: variant,
+            timeout: timeout
         });
     }, []);
-    return { promptArgs, onShow, onHide };
+    return { promptArgs: promptArgs, onShow: onShow, onHide: onHide };
 }
 export default useInteractions;

package/VideoPlayerModal/index.js

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactPlayer from "react-player";
 import Grid from "@mui/material/Grid";
@@ -10,12 +32,12 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function VideoPlayerModal(props) {
-    const { url, pip = false, open = false, title, onClose, extraButtons = [], primaryColor, secondaryColor, ...playerProps } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Dialog, { open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog", children: [title && _jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(ReactPlayer, { controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
+    var url = props.url, _a = props.pip, pip = _a === void 0 ? false : _a, _b = props.open, open = _b === void 0 ? false : _b, title = props.title, onClose = props.onClose, _c = props.extraButtons, extraButtons = _c === void 0 ? [] : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, playerProps = __rest(props, ["url", "pip", "open", "title", "onClose", "extraButtons", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog" }, { children: [title && _jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
                             file: { attributes: { disablePictureInPicture: !pip } }
-                        }, ...playerProps }) }), _jsx(DialogActions, { children: _jsxs(Grid, { container: true, direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 1, children: [extraButtons.map((buttonProps, index) => (_jsx(Grid, { item: true, xs: 12, md: 3, lg: 2, children: _jsx(Button, { ...buttonProps }) }, `extraButton_${index}`))), _jsx(Grid, { item: true, xs: 12, md: 2, lg: 1, children: _jsx(Button, { variant: "outlined", fullWidth: true, color: "secondary", onClick: onClose, children: "Close" }) })] }) })] }) }));
+                        } }, playerProps)) }), _jsx(DialogActions, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 1 }, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps)) }), "extraButton_".concat(index))); }), _jsx(Grid, __assign({ item: true, xs: 12, md: 2, lg: 1 }, { children: _jsx(Button, __assign({ variant: "outlined", fullWidth: true, color: "secondary", onClick: onClose }, { children: "Close" })) }))] })) })] })) })));
 }
 export default VideoPlayerModal;
 export * from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.3.11-alpha.8",
+  "version": "1.4.0-beta.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/useCustomTheme.js

@@ -1,7 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { createTheme } from "@mui/material/styles";
 function useCustomTheme(props) {
-    const { primaryColor, secondaryColor } = props || {};
-    const themeOptions = {
+    var _a = props || {}, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
+    var themeOptions = {
         components: {
             MuiButton: {
                 styleOverrides: {
@@ -23,19 +34,13 @@ function useCustomTheme(props) {
     };
     if (!!primaryColor || !!secondaryColor) {
         if (!!primaryColor) {
-            themeOptions.palette = {
-                ...themeOptions.palette,
-                primary: { main: primaryColor }
-            };
+            themeOptions.palette = __assign(__assign({}, themeOptions.palette), { primary: { main: primaryColor } });
         }
         if (!!secondaryColor) {
-            themeOptions.palette = {
-                ...themeOptions.palette,
-                secondary: { main: secondaryColor }
-            };
+            themeOptions.palette = __assign(__assign({}, themeOptions.palette), { secondary: { main: secondaryColor } });
         }
     }
-    const theme = createTheme(themeOptions);
+    var theme = createTheme(themeOptions);
     return theme;
 }
 export default useCustomTheme;

package/utils/uuid.js

@@ -1,4 +1,5 @@
-function generateUUID(length = 32) {
+function generateUUID(length) {
+    if (length === void 0) { length = 32; }
     if (length < 16)
         throw new Error("Length should be equal or greater than 16");
     function UUID() {
@@ -23,28 +24,28 @@ function generateUUID(length = 32) {
         this.rand = "";
     }
     UUID.prototype = {
-        getRandomUInt() {
-            let s = "";
-            this.chars.sort(() => {
+        getRandomUInt: function () {
+            var s = "";
+            this.chars.sort(function () {
                 return Date.now() % (Math.random() * length * 23) >
                     Math.random() * 7 * length
                     ? -1
                     : 1;
             });
-            for (let i = 0; i < this.chars.length; i += 1) {
+            for (var i = 0; i < this.chars.length; i += 1) {
                 s = s.concat(this.chars[i]);
             }
             return s;
         },
-        getRandomChars() {
+        getRandomChars: function () {
             this.rand = Date.now().toString(16).concat(this.getRandomUInt());
             return this.rand;
         },
-        generate() {
-            let id = Date.now().toString();
-            const idLen = id.length;
+        generate: function () {
+            var id = Date.now().toString();
+            var idLen = id.length;
             this.getRandomChars();
-            for (let i = 0; i < length - idLen; i += 1) {
+            for (var i = 0; i < length - idLen; i += 1) {
                 id = id.concat(this.rand.charAt(Math.floor(Math.random() * this.rand.length)));
             }
             return id.toString();