@symply.io/basic-components 1.0.0-alpha.1

package/ToastPrompt/Logics.js

@@ -0,0 +1,37 @@
+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 = "Our system has encountered an issue please try again, if the problem still exist please contact customer support. We apologize for the inconvenience.";
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,80 @@
+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 useTheme from "@mui/material/styles/useTheme";
+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";
+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 styles = {
+        success: {
+            backgroundColor: green[600],
+        },
+        error: {
+            backgroundColor: red[700],
+        },
+        info: {
+            backgroundColor: blue[600],
+        },
+        warning: {
+            backgroundColor: amber[900],
+        },
+    };
+    var Transition = function (args) {
+        return _jsx(Slide, __assign({}, args, { direction: transitionDirection }), void 0);
+    };
+    var VariantIcon = {
+        success: SuccessIcon,
+        warning: WarningIcon,
+        error: ErrorIcon,
+        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()))));
+};
+export default ToastPrompt;

package/ToastPrompt/index.d.ts

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

package/ToastPrompt/index.js

@@ -0,0 +1,29 @@
+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({});
+export var PromptProvider = function (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, {}, void 0) }), void 0)] }, void 0) }), void 0));
+};
+export function usePrompt() {
+    return useContext(PromptContext);
+}

package/VideoPlayerModal/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,42 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import ReactPlayer from "react-player";
+import Grid from "@mui/material/Grid";
+import Dialog from "@mui/material/Dialog";
+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";
+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 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));
+}
+export default VideoPlayerModal;
+export * from "./types";

package/VideoPlayerModal/types.d.ts

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

package/VideoPlayerModal/types.js

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

package/index.d.ts

@@ -0,0 +1,29 @@
+export * from "./AlertDialog";
+export * from "./BasicModal";
+export * from "./DigitInput";
+export * from "./DynamicHeaderBar";
+export * from "./FormRadioGroup";
+export * from "./FormSelector";
+export * from "./HelpCaption";
+export * from "./LoadingModal";
+export * from "./MenuButtonGroup";
+export * from "./NumberInput";
+export * from "./PasswordInput";
+export * from "./PhoneNumberInput";
+export * from "./TabGroup";
+export * from "./TextInput";
+export * from "./ToastPrompt";
+export * from "./VideoPlayerModal";
+export { default as AlertDialog } from "./AlertDialog";
+export { default as BasicModal } from "./BasicModal";
+export { default as DigitInput } from "./DigitInput";
+export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
+export { default as FormRadioGroup } from "./FormRadioGroup";
+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 PhoneNumberInput } from "./PhoneNumberInput";
+export { default as TabGroup } from "./TabGroup";
+export { default as TextInput } from "./TextInput";
+export { default as VideoPlayerModal } from "./VideoPlayerModal";

package/index.js

@@ -0,0 +1,29 @@
+export * from "./AlertDialog";
+export * from "./BasicModal";
+export * from "./DigitInput";
+export * from "./DynamicHeaderBar";
+export * from "./FormRadioGroup";
+export * from "./FormSelector";
+export * from "./HelpCaption";
+export * from "./LoadingModal";
+export * from "./MenuButtonGroup";
+export * from "./NumberInput";
+export * from "./PasswordInput";
+export * from "./PhoneNumberInput";
+export * from "./TabGroup";
+export * from "./TextInput";
+export * from "./ToastPrompt";
+export * from "./VideoPlayerModal";
+export { default as AlertDialog } from "./AlertDialog";
+export { default as BasicModal } from "./BasicModal";
+export { default as DigitInput } from "./DigitInput";
+export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
+export { default as FormRadioGroup } from "./FormRadioGroup";
+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 PhoneNumberInput } from "./PhoneNumberInput";
+export { default as TabGroup } from "./TabGroup";
+export { default as TextInput } from "./TextInput";
+export { default as VideoPlayerModal } from "./VideoPlayerModal";

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@symply.io/basic-components",
+  "version": "1.0.0-alpha.1",
+  "description": "Basic and reusable components for all frontend of Symply apps",
+  "keywords": [
+    "react",
+    "react-component",
+    "material-ui"
+  ],
+  "main": "index.js",
+  "type": "module",
+  "types": "**/*.d.ts",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/baseline-software/symply-basic-components"
+  },
+  "bugs": {
+    "url": "https://github.com/baseline-software/symply-basic-components/issues",
+    "email": "janden_ma@qq.com"
+  },
+  "homepage": "https://github.com/baseline-software/symply-basic-components",
+  "author": {
+    "name": "Janden Ma",
+    "email": "janden_ma@qq.com",
+    "url": "https://github.com/JandneMa"
+  },
+  "contributors": [
+    {
+      "name": "Hiram Yong",
+      "email": "1029730656@qq.com",
+      "url": "https://github.com/HiramYong"
+    },
+    {
+      "name": "Jake Tompkins",
+      "email": "jake@symply.io",
+      "url": "https://github.com/JakeTompkins"
+    }
+  ],
+  "devDependencies": {
+    "@types/body-parser": "^1.19.2",
+    "@types/react": "^17.0.27",
+    "@types/react-dom": "^17.0.9",
+    "babel-loader": "^8.2.2",
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.4.2",
+    "@mui/material": "^5.4.2",
+    "@mui/system": "^5.4.2",
+    "react-player": "^2.9.0",
+    "rifm": "^0.12.1"
+  },
+  "scripts": {
+    "build": "./node_modules/.bin/tsc"
+  },
+  "files": [
+    "*.js",
+    "*.d.ts",
+    "**/*.js",
+    "**/*.d.ts",
+    ".gitignore",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ]
+}