@symply.io/basic-components 1.0.0-alpha.6 → 1.0.0-alpha.9

package/ToastPrompt/Presentation.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Typography from "@mui/material/Typography";
-import useTheme from "@mui/material/styles/useTheme";
+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";
@@ -31,11 +31,11 @@ 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 withTheme from "../withTheme";
+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 ? "top" : _c, _d = props.horizontal, horizontal = _d === void 0 ? "center" : _d, _e = props.timeout, timeout = _e === void 0 ? 3000 : _e, onClose = props.onClose, _f = props.transitionDirection, transitionDirection = _f === void 0 ? "down" : _f, _g = props.message, message = _g === void 0 ? "Unknown message" : _g, _h = props.icon, icon = _h === void 0 ? _jsx(_Fragment, {}, void 0) : _h, _j = props.variant, variant = _j === void 0 ? "info" : _j, other = __rest(props, ["open", "vertical", "horizontal", "timeout", "onClose", "transitionDirection", "message", "icon", "variant"]);
-    var theme = useTheme();
+    var theme = useCustomTheme();
     var styles = {
         success: {
             backgroundColor: green[600]
@@ -60,22 +60,22 @@ var ToastPrompt = function (props) {
         info: InfoIcon
     };
     var Icon = VariantIcon[variant];
-    return (_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,
-                    display: "flex",
-                    alignItems: "center"
-                } }, { children: [variant ? (_jsx(Icon, { sx: {
-                            fontSize: 20,
-                            opacity: 0.9,
-                            marginRight: theme.spacing(1)
-                        } }, void 0)) : (_jsx(_Fragment, { children: icon }, void 0)), message] }), void 0) }, other), void 0) }), "".concat(Date.now() * Math.round(Math.random()))));
+    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,
+                        display: "flex",
+                        alignItems: "center"
+                    } }, { children: [variant ? (_jsx(Icon, { sx: {
+                                fontSize: 20,
+                                opacity: 0.9,
+                                marginRight: theme.spacing(1)
+                            } }, void 0)) : (_jsx(_Fragment, { children: icon }, void 0)), message] }), void 0) }, other), void 0) }), "".concat(Date.now() * Math.round(Math.random()))) }), void 0));
 };
-export default withTheme(ToastPrompt);
+export default ToastPrompt;

package/VideoPlayerModal/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+import { ReactPlayerProps } from "react-player";
+import { VideoPlayerModalProps } from "./types";
+declare function VideoPlayerModal(props: VideoPlayerModalProps & ReactPlayerProps): JSX.Element;
+export default VideoPlayerModal;
 export * from "./types";

package/VideoPlayerModal/index.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactPlayer from "react-player";
 import Grid from "@mui/material/Grid";
 import Dialog from "@mui/material/Dialog";
@@ -28,16 +28,16 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import Button from "@mui/material/Button";
-import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import withTheme from '../withTheme';
+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, playerProps = __rest(props, ["url", "pip", "open", "title", "onClose", "extraButtons"]);
-    var theme = useTheme();
+    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();
     var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(_Fragment, { 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 }, void 0), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
-                            file: { attributes: { disablePictureInPicture: !pip } },
-                        } }, playerProps), void 0) }, void 0), _jsxs(DialogActions, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps), void 0) }), "extraButton_".concat(index))); }), _jsx(Button, __assign({ variant: "outlined", color: "secondary", onClick: onClose }, { children: "Close" }), void 0)] }, void 0)] }), void 0) }, void 0));
+    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 }, void 0), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
+                            file: { attributes: { disablePictureInPicture: !pip } }
+                        } }, playerProps), void 0) }, void 0), _jsxs(DialogActions, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps), void 0) }), "extraButton_".concat(index))); }), _jsx(Button, __assign({ variant: "outlined", color: "secondary", onClick: onClose }, { children: "Close" }), void 0)] }, void 0)] }), void 0) }), void 0));
 }
-export default withTheme(VideoPlayerModal);
+export default VideoPlayerModal;
 export * from "./types";

package/VideoPlayerModal/types.d.ts

@@ -1,8 +1,11 @@
+import { CSSProperties } from "react";
 import { ButtonProps } from "@mui/material/Button";
 export interface VideoPlayerModalProps {
     title?: string;
     open: boolean;
     pip?: boolean;
     extraButtons?: Array<ButtonProps>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onClose: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.9",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -55,6 +55,7 @@
     "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.4.2",
     "@mui/system": "^5.4.2",
+    "color-alpha": "^1.1.3",
     "react-player": "^2.9.0",
     "rifm": "^0.12.1"
   },

package/useCustomTheme.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+declare function useCustomTheme(props?: {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}): import("@mui/material/styles").Theme;
+export default useCustomTheme;

package/useCustomTheme.js

@@ -0,0 +1,51 @@
+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 colorAlpha from "color-alpha";
+import { createTheme } from "@mui/material/styles";
+function useCustomTheme(props) {
+    var _a = props || {}, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
+    var themeOptions = {
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        whiteSpace: "nowrap",
+                        fontWeight: 600,
+                        fontFamily: "Dinpro"
+                    }
+                }
+            }
+        },
+        typography: {
+            fontFamily: "Dinpro"
+        }
+    };
+    if (primaryColor) {
+        themeOptions = __assign(__assign({}, themeOptions), { palette: {
+                primary: {
+                    main: primaryColor,
+                    light: colorAlpha(primaryColor, 0.08)
+                }
+            } });
+    }
+    if (secondaryColor) {
+        themeOptions = __assign(__assign({}, themeOptions), { palette: {
+                secondary: {
+                    main: secondaryColor,
+                    light: colorAlpha(secondaryColor, 0.08)
+                }
+            } });
+    }
+    var theme = createTheme(themeOptions);
+    return theme;
+}
+export default useCustomTheme;

package/withTheme.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const withTheme: (Component: React.ElementType) => (props: any) => JSX.Element;
-export default withTheme;

package/withTheme.js

@@ -1,35 +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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-var theme = createTheme({
-    components: {
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    whiteSpace: 'nowrap',
-                    fontWeight: 600,
-                    fontFamily: 'Dinpro'
-                }
-            }
-        }
-    },
-    typography: {
-        fontFamily: 'Dinpro'
-    }
-});
-var withTheme = function (Component) {
-    var CustomComponent = function (props) { return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(CssBaseline, {}, void 0), _jsx(Component, __assign({}, props), void 0)] }), void 0)); };
-    return CustomComponent;
-};
-export default withTheme;