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

package/ToastPrompt/useInteractions.js

@@ -1,27 +1,34 @@
+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 UNKNOWN_MESSAGE = "Unknown Message";
+    var _a = useState({
         open: false,
-        message: "Saved",
-        variant: "success",
+        message: UNKNOWN_MESSAGE,
+        type: "error",
         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;
-        setPromptArgs({
-            open: true,
-            message: message === 400 ? ERROR_MESSAGE : message,
-            variant,
-            timeout
-        });
+    var onShow = useCallback(function (args) {
+        var _a = args.message, message = _a === void 0 ? UNKNOWN_MESSAGE : _a, _b = args.type, type = _b === void 0 ? "error" : _b, _c = args.timeout, timeout = _c === void 0 ? 3500 : _c;
+        setPromptArgs(function (args) { return (__assign(__assign({}, args), { message: message === 400 ? ERROR_MESSAGE : message, type: type, timeout: timeout, open: true })); });
     }, []);
-    return { promptArgs, onShow, onHide };
+    return __assign(__assign({}, promptArgs), { onShow: onShow, onHide: onHide });
 }
 export default useInteractions;

package/VideoPlayerModal/index.d.ts

@@ -1,4 +1,4 @@
-import { VideoPlayerModalProps } from "./types";
+import type { VideoPlayerModalProps } from "./types";
 declare function VideoPlayerModal(props: VideoPlayerModalProps): JSX.Element;
 export default VideoPlayerModal;
-export * from "./types";
+export type { VideoPlayerModalProps };

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,11 @@ 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/index.d.ts

@@ -4,6 +4,8 @@ export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
+export * from "./CheckBoxGroup";
+export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
 export * from "./DateInput";
@@ -31,6 +33,9 @@ export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
@@ -42,6 +47,7 @@ export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";
 export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
+export { default as PasswordInput } from "./PasswordInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as Sidebar } from "./Sidebar";
 export { default as SocialInput } from "./SocialInput";

package/index.js

@@ -4,6 +4,8 @@ export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
+export * from "./CheckBoxGroup";
+export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
 export * from "./DateInput";
@@ -31,6 +33,9 @@ export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
@@ -42,6 +47,7 @@ export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";
 export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
+export { default as PasswordInput } from "./PasswordInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as Sidebar } from "./Sidebar";
 export { default as SocialInput } from "./SocialInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.3.11-alpha.9",
+  "version": "1.4.0-alpha.10",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -8,7 +8,6 @@
     "material-ui"
   ],
   "main": "index.js",
-  "type": "module",
   "types": "**/*.d.ts",
   "license": "MIT",
   "private": false,

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();

package/CheckBox/CheckBox.d.ts

@@ -1,3 +0,0 @@
-import { CheckBoxProps } from "./types";
-export declare function CheckBox(props: CheckBoxProps): JSX.Element;
-export default CheckBox;

package/CheckBox/CheckBox.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Checkbox from "@mui/material/Checkbox";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import useCustomTheme from "../useCustomTheme";
-export function CheckBox(props) {
-    const { label, onChange, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: event => {
-                    event.stopPropagation();
-                    onChange(event.target.checked);
-                }, ...rest }), label: label }) }));
-}
-export default CheckBox;

package/CheckBox/CheckBoxGroup.d.ts

@@ -1,3 +0,0 @@
-import { CheckBoxGroupProps } from "./types";
-export declare function CheckBoxGroup(props: CheckBoxGroupProps): JSX.Element;
-export default CheckBoxGroup;

package/CheckBox/CheckBoxGroup.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import FormGroup from "@mui/material/FormGroup";
-import CheckBox from "./CheckBox";
-export function CheckBoxGroup(props) {
-    const { checkboxes, ...rest } = props;
-    return (_jsx(FormGroup, { ...rest, children: checkboxes.map((checkbox, index) => (_jsx(CheckBox, { ...checkbox }, index))) }));
-}
-export default CheckBoxGroup;

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
-export interface ConfirmPasswordProps extends Omit<TextFieldProps, "onChange"> {
-    password: string;
-    value: string;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-    onChange: (value: string) => void;
-}
-declare function ConfirmPassword(props: ConfirmPasswordProps): JSX.Element;
-export default ConfirmPassword;

package/PasswordInput/ConfirmPassword.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import TextField from "@mui/material/TextField";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import useCustomTheme from "../useCustomTheme";
-function ConfirmPassword(props) {
-    const { password, helperText = "Passwords do not match", value, label = "Confirm Password", name = "confirmPassword", variant = "outlined", margin = "dense", disabled, primaryColor, secondaryColor, onChange, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const isMatched = useMemo(() => {
-        if (value?.length > 0) {
-            return password === value;
-        }
-        return true;
-    }, [value, password]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: event => {
-                event.preventDefault();
-                onChange(event.target.value);
-            }, fullWidth: true, required: true, ...rest }) }));
-}
-export default ConfirmPassword;

package/PasswordInput/Password.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import useCustomTheme from "../useCustomTheme";
-export function onValidatePassword(password) {
-    const reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
-    return reg.test(password);
-}
-function Password(props) {
-    const { strategies = {
-        uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
-        lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
-        specialCharacter: {
-            label: "1 Special Character",
-            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/
-        },
-        number: { label: "1 Number", regex: /\d+/ },
-        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
-    }, successColor = "green", value, error, primaryColor, secondaryColor, onValidate, onChange, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const isValidPassword = useMemo(() => {
-        if (value?.length > 0) {
-            return onValidate ? onValidate(value) : onValidatePassword(value);
-        }
-        return true;
-    }, [value, onValidate, onValidatePassword]);
-    const helperTextColor = useMemo(() => {
-        const textColors = Object.keys(strategies).reduce((temp, key) => {
-            const { regex } = strategies[key];
-            if (value === "") {
-                temp[key] = undefined;
-            }
-            else if (regex.test(value)) {
-                temp[key] = successColor;
-            }
-            else {
-                temp[key] = "red";
-            }
-            return temp;
-        }, {});
-        return textColors;
-    }, [value, strategies]);
-    const helperText = useMemo(() => {
-        return (_jsx(_Fragment, { children: Object.keys(strategies).map(key => {
-                const { label } = strategies[key];
-                return (_jsx(Typography, { component: "li", variant: "caption", style: { color: helperTextColor[key] }, children: label }, key));
-            }) }));
-    }, [helperTextColor, strategies]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: event => {
-                event.preventDefault();
-                onChange(event.target.value);
-            }, fullWidth: true, required: true, ...rest }) }));
-}
-export default Password;