@symply.io/basic-components 1.3.11-alpha.1 → 1.3.11-alpha.10

package/ToastPrompt/index.d.ts

@@ -1,14 +1,3 @@
-import { ReactNode } from "react";
-export interface PromptProviderProps {
-    children: ReactNode;
-}
-export interface ShowPromptProps {
-    type: "success" | "warning" | "error" | "info";
-    message: string | 400;
-    timeout?: number;
-}
+import type { PromptProviderProps, PromptContextProps } from "./types";
 export declare function PromptProvider(props: PromptProviderProps): JSX.Element;
-export declare function usePrompt(): {
-    showPrompt: (props: ShowPromptProps) => void;
-};
-export default usePrompt;
+export declare function usePrompt(): PromptContextProps;

package/ToastPrompt/index.js

@@ -1,30 +1,15 @@
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useRef, useContext } from "react";
-import Logics from "./Logics";
-import ToastPrompt from "./Presentation";
-var PromptContext = createContext({});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, cloneElement } from "react";
+import { default as Prompt } from "./Prompt";
+import useInteractions from "./useInteractions";
+const PromptContext = createContext({
+    showPrompt: () => { }
+});
 export function PromptProvider(props) {
-    var children = props.children;
-    var toastRef = useRef(null);
-    function showPrompt(props) {
-        var type = props.type, message = props.message, timeout = props.timeout;
-        var _a = ((toastRef === null || toastRef === void 0 ? void 0 : toastRef.current) || {}).show, show = _a === void 0 ? function () { } : _a;
-        show(type, message, timeout);
-    }
-    return (_jsx(PromptContext.Provider, __assign({ value: { showPrompt: showPrompt } }, { children: _jsxs(_Fragment, { children: [children, _jsx(Logics, __assign({ ref: toastRef }, { children: _jsx(ToastPrompt, {}) }))] }) })));
+    const { children } = props;
+    const { promptArgs, onShow, onHide } = useInteractions();
+    return (_jsxs(PromptContext.Provider, { value: { showPrompt: onShow }, children: [children, cloneElement(_jsx(Prompt, { ...promptArgs, onClose: onHide }))] }));
 }
 export function usePrompt() {
     return useContext(PromptContext);
 }
-export default usePrompt;

package/ToastPrompt/types.d.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { SnackbarCloseReason } from "@mui/material/Snackbar";
+import type { SvgIconComponent } from "@mui/icons-material";
+export declare type Variant = "success" | "warning" | "info" | "error";
+export declare type PromptStyles = Record<Variant, {
+    backgroundColor: CSSProperties["color"];
+}>;
+export declare type PromptIcons = Record<Variant, SvgIconComponent>;
+declare type PromptArgs = {
+    message: string | 400;
+    variant: Variant;
+    timeout: number;
+};
+export interface InterfaceStates {
+    promptArgs: PromptArgs & Record<"open", boolean>;
+    onHide: (_: any, 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;
+}
+export interface PromptContextProps {
+    showPrompt: InterfaceStates["onShow"];
+}
+export {};

package/ToastPrompt/types.js

@@ -0,0 +1 @@
+export {};

package/ToastPrompt/useInteractions.d.ts

@@ -0,0 +1,14 @@
+declare function useInteractions(): {
+    promptArgs: {
+        message: string | 400;
+        variant: import("./types").Variant;
+        timeout: number;
+    } & Record<"open", boolean>;
+    onShow: (args: {
+        message: string | 400;
+        variant: import("./types").Variant;
+        timeout: number;
+    }) => void;
+    onHide: (_: any, reason: import("@mui/material").SnackbarCloseReason) => void;
+};
+export default useInteractions;

package/ToastPrompt/useInteractions.js

@@ -0,0 +1,27 @@
+import { useState, useCallback } from "react";
+function useInteractions() {
+    const ERROR_MESSAGE = "Internal Server Error";
+    const [promptArgs, setPromptArgs] = useState({
+        open: false,
+        message: "Saved",
+        variant: "success",
+        timeout: 3500
+    });
+    const onHide = useCallback((_, reason) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        setPromptArgs(args => ({ ...args, open: false }));
+    }, []);
+    const onShow = useCallback(args => {
+        const { message = "Unknown message", variant = "info", timeout = 3500 } = args;
+        setPromptArgs({
+            open: true,
+            message: message === 400 ? ERROR_MESSAGE : message,
+            variant,
+            timeout
+        });
+    }, []);
+    return { promptArgs, onShow, onHide };
+}
+export default useInteractions;

package/VideoPlayerModal/index.js

@@ -1,25 +1,3 @@
-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";
@@ -32,12 +10,12 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function VideoPlayerModal(props) {
-    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: {
+    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: {
                             file: { attributes: { disablePictureInPicture: !pip } }
-                        } }, 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" })) }))] })) })] })) })));
+                        }, ...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" }) })] }) })] }) }));
 }
 export default VideoPlayerModal;
 export * from "./types";

package/package.json

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

package/useCustomTheme.js

@@ -1,18 +1,7 @@
-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) {
-    var _a = props || {}, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
-    var themeOptions = {
+    const { primaryColor, secondaryColor } = props || {};
+    const themeOptions = {
         components: {
             MuiButton: {
                 styleOverrides: {
@@ -34,13 +23,19 @@ function useCustomTheme(props) {
     };
     if (!!primaryColor || !!secondaryColor) {
         if (!!primaryColor) {
-            themeOptions.palette = __assign(__assign({}, themeOptions.palette), { primary: { main: primaryColor } });
+            themeOptions.palette = {
+                ...themeOptions.palette,
+                primary: { main: primaryColor }
+            };
         }
         if (!!secondaryColor) {
-            themeOptions.palette = __assign(__assign({}, themeOptions.palette), { secondary: { main: secondaryColor } });
+            themeOptions.palette = {
+                ...themeOptions.palette,
+                secondary: { main: secondaryColor }
+            };
         }
     }
-    var theme = createTheme(themeOptions);
+    const theme = createTheme(themeOptions);
     return theme;
 }
 export default useCustomTheme;

package/utils/uuid.js

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

package/ToastPrompt/Logics.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-interface LogicsProps {
-    children: React.ReactNode | undefined;
-}
-export interface PromptPropsType {
-    open: boolean;
-    message: string | number;
-    variant: "success" | "warning" | "error" | "info" | undefined;
-    timeout: number;
-}
-declare const Logics: import("react").ForwardRefExoticComponent<LogicsProps & import("react").RefAttributes<unknown>>;
-export default Logics;

package/ToastPrompt/Logics.js

@@ -1,37 +0,0 @@
-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, cloneElement, forwardRef, useImperativeHandle } from "react";
-var ERROR_MESSAGE = "Internal Server Error";
-var Logics = forwardRef(function (props, ref) {
-    var children = props.children;
-    var _a = useState({
-        open: false,
-        message: "Saved",
-        variant: "success",
-        timeout: 3500
-    }), promptProps = _a[0], setPromptProps = _a[1];
-    function hide(_, reason) {
-        if (reason === "clickaway") {
-            return;
-        }
-        setPromptProps(__assign(__assign({}, promptProps), { open: false }));
-    }
-    function show(type, message, timeout) {
-        if (timeout === void 0) { timeout = 3500; }
-        setPromptProps(__assign(__assign({}, promptProps), { open: true, variant: type, message: message === 400 ? ERROR_MESSAGE : message, timeout: timeout }));
-    }
-    useImperativeHandle(ref, function () { return ({
-        show: show
-    }); });
-    return cloneElement(children, __assign(__assign({}, promptProps), { onClose: hide }));
-});
-export default Logics;

package/ToastPrompt/Presentation.d.ts

@@ -1,16 +0,0 @@
-import { ElementType } from "react";
-import { SlideProps } from "@mui/material/Slide";
-import { SnackbarOrigin } from "@mui/material/Snackbar";
-interface ToastPromptProps {
-    open?: boolean;
-    vertical?: SnackbarOrigin["vertical"];
-    horizontal?: SnackbarOrigin["horizontal"];
-    timeout?: number;
-    onClose?: () => void;
-    transitionDirection?: SlideProps["direction"];
-    message?: string;
-    icon?: ElementType;
-    variant?: "success" | "warning" | "info" | "error";
-}
-declare const ToastPrompt: (props: ToastPromptProps) => JSX.Element;
-export default ToastPrompt;

package/ToastPrompt/Presentation.js

@@ -1,82 +0,0 @@
-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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Typography from "@mui/material/Typography";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import Slide from "@mui/material/Slide";
-import SnackbarContent from "@mui/material/SnackbarContent";
-import Snackbar from "@mui/material/Snackbar";
-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";
-var ToastPrompt = function (props) {
-    var _a;
-    var _b = props.open, open = _b === void 0 ? false : _b, _c = props.vertical, vertical = _c === void 0 ? "bottom" : _c, _d = props.horizontal, horizontal = _d === void 0 ? "left" : _d, _e = props.timeout, timeout = _e === void 0 ? 3000 : _e, onClose = props.onClose, _f = props.transitionDirection, transitionDirection = _f === void 0 ? "up" : _f, _g = props.message, message = _g === void 0 ? "Unknown message" : _g, _h = props.icon, icon = _h === void 0 ? _jsx(_Fragment, {}) : _h, _j = props.variant, variant = _j === void 0 ? "info" : _j, other = __rest(props, ["open", "vertical", "horizontal", "timeout", "onClose", "transitionDirection", "message", "icon", "variant"]);
-    var theme = useCustomTheme();
-    var styles = {
-        success: {
-            backgroundColor: green[500]
-        },
-        error: {
-            backgroundColor: red[400]
-        },
-        info: {
-            backgroundColor: blue[600]
-        },
-        warning: {
-            backgroundColor: amber["A700"]
-        }
-    };
-    var Transition = function (args) {
-        return _jsx(Slide, __assign({}, args, { direction: transitionDirection }));
-    };
-    var VariantIcon = {
-        success: SuccessIcon,
-        warning: WarningIcon,
-        error: ErrorIcon,
-        info: InfoIcon
-    };
-    var Icon = VariantIcon[variant];
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: vertical, horizontal: horizontal }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
-                zIndex: 99999,
-                marginTop: "3vh"
-            } }, { children: _jsx(SnackbarContent, __assign({ sx: __assign(__assign({}, styles[variant]), { root: (_a = {},
-                        _a[theme.breakpoints.down("sm")] = {
-                            maxWidth: "320px",
-                            borderRadius: "4px"
-                        },
-                        _a) }), "aria-describedby": "Toast", message: _jsxs(Typography, __assign({ id: "Toast", component: "span", sx: {
-                        fontSize: 14,
-                        fontWeight: 700,
-                        display: "flex",
-                        alignItems: "center"
-                    } }, { children: [variant ? (_jsx(Icon, { sx: {
-                                fontSize: 20,
-                                opacity: 0.9,
-                                marginRight: theme.spacing(1)
-                            } })) : (_jsx(_Fragment, { children: icon })), message] })) }, other)) }), "".concat(Date.now() * Math.round(Math.random()))) })));
-};
-export default ToastPrompt;