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

package/.gitignore

@@ -0,0 +1,15 @@
+node_modules
+package-lock.json
+yarn.lock
+.vscode
+.DS_Store
+/coverage
+/.pnp
+.pnp.js
+/build
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.js
+*.d.ts
+dist

package/AlertDialog/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AlertDialogProps } from "./types";
+declare const AlertDialog: (props: AlertDialogProps) => JSX.Element;
+export default AlertDialog;
+export * from "./types";

package/AlertDialog/index.js

@@ -0,0 +1,47 @@
+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 { forwardRef, cloneElement } from "react";
+import useTheme from "@mui/material/styles/useTheme";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Slide from "@mui/material/Slide";
+var Transition = forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+});
+var AlertDialog = function (props) {
+    var _a = props.title, title = _a === void 0 ? "Info" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "md" : _b, children = props.children, open = props.open, onClose = props.onClose, DialogButtons = props.DialogButtons, rest = __rest(props, ["title", "maxWidth", "children", "open", "onClose", "DialogButtons"]);
+    var theme = useTheme();
+    var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    return (_jsxs(Dialog, __assign({ maxWidth: maxWidth, fullScreen: fullScreen, TransitionComponent: Transition, open: open, onClose: function (_, reason) {
+            if (reason !== "backdropClick") {
+                onClose();
+            }
+        }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title }), void 0), _jsx(DialogContent, { children: children }, void 0), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }), void 0)) }, void 0)] }), void 0));
+};
+export default AlertDialog;
+export * from "./types";

package/AlertDialog/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+import { DialogProps } from "@mui/material/Dialog";
+import { DialogContentProps } from "@mui/material/DialogContent";
+export interface AlertDialogProps {
+    title?: string;
+    maxWidth?: DialogProps["maxWidth"];
+    children: DialogContentProps["children"];
+    open: boolean;
+    onClose: () => void;
+    DialogButtons?: ReactElement;
+}

package/AlertDialog/types.js

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

package/BasicModal/Content.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BasicModalContentProps } from "./types";
+declare function Content(props: BasicModalContentProps): JSX.Element;
+export default Content;

package/BasicModal/Content.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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import useTheme from "@mui/material/styles/useTheme";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import Grid from "@mui/material/Grid";
+function Content(props) {
+    var children = props.children, title = props.title, desc = props.desc, _a = props.color, color = _a === void 0 ? "primary" : _a, loading = props.loading, disabled = props.disabled, buttons = props.buttons, _b = props.submitText, submitText = _b === void 0 ? "Save" : _b, _c = props.cancelText, cancelText = _c === void 0 ? "Cancel" : _c, _d = props.showTopRightCloseButton, showTopRightCloseButton = _d === void 0 ? false : _d, _e = props.hideBottomButtons, hideBottomButtons = _e === void 0 ? false : _e, _f = props.noForm, noForm = _f === void 0 ? false : _f, onClose = props.onClose, onSubmit = props.onSubmit;
+    var theme = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, __assign({ id: "form-dialog-title", sx: {
+                    "& > h6": {
+                        fontWeight: "700",
+                    },
+                } }, { children: [title, showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
+                            position: "absolute",
+                            right: 8,
+                            top: 8,
+                            color: theme.palette.grey[500],
+                        } }, { children: _jsx(CloseIcon, {}, void 0) }), void 0)) : null] }), void 0), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }, void 0), Boolean(children) && cloneElement(children)] }), void 0), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText }), void 0) }), void 0), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText }), void 0) }), void 0)] }, void 0)) }), void 0) }), void 0))] }, void 0));
+}
+export default Content;

package/BasicModal/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BasicModalProps } from "./types";
+declare function BasicModal(props: BasicModalProps): JSX.Element;
+export default BasicModal;
+export * from "./types";

package/BasicModal/index.js

@@ -0,0 +1,54 @@
+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 } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Grid from "@mui/material/Grid";
+import Dialog from "@mui/material/Dialog";
+import Slide from "@mui/material/Slide";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+import Content from "./Content";
+var Transition = forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+});
+function BasicModal(props) {
+    var onClose = props.onClose, onSubmit = props.onSubmit, _a = props.maxWidth, maxWidth = _a === void 0 ? "sm" : _a, _b = props.open, open = _b === void 0 ? false : _b, _c = props.noForm, noForm = _c === void 0 ? false : _c, rest = __rest(props, ["onClose", "onSubmit", "maxWidth", "open", "noForm"]);
+    var theme = useTheme();
+    var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    return (_jsx(Dialog, __assign({ open: open, onClose: function (_, reason) {
+            if (reason !== "backdropClick") {
+                onClose();
+            }
+        }, maxWidth: maxWidth, fullWidth: true, TransitionComponent: Transition, "aria-labelledby": "form-dialog-title", fullScreen: fullScreen, disableEscapeKeyDown: true }, { children: _jsx(Grid, __assign({ container: true, direction: "column", sx: {
+                height: "100%",
+                overflowY: "hidden",
+            }, component: noForm ? "div" : "form", onSubmit: noForm
+                ? undefined
+                : function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onSubmit();
+                } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit }), void 0) }), void 0) }), void 0));
+}
+export default BasicModal;
+export * from "./types";

package/BasicModal/types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { ButtonProps } from "@mui/material/Button";
+export interface BasicModalContentProps {
+    children: ReactNode;
+    color?: ButtonProps["color"];
+    title: string;
+    desc?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    buttons?: ReactNode;
+    submitText?: string;
+    cancelText?: string;
+    showTopRightCloseButton?: boolean;
+    hideBottomButtons?: boolean;
+    noForm?: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+}
+export interface BasicModalProps extends BasicModalContentProps {
+    open?: boolean;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+}

package/BasicModal/types.js

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

package/DigitInput/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TextFieldProps } from "@mui/material/TextField";
+import { DigitInputProps } from "./types";
+declare type TextProps = Omit<TextFieldProps, "onChange">;
+declare function DigitInput(props: DigitInputProps & TextProps): JSX.Element;
+export default DigitInput;
+export * from "./types";

package/DigitInput/index.js

@@ -0,0 +1,35 @@
+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 } from "react/jsx-runtime";
+import Tooltip from "@mui/material/Tooltip";
+import Field from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+function DigitInput(props) {
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, error = props.error, helperText = props.helperText, _b = props.maxLength, maxLength = _b === void 0 ? 999 : _b, _c = props.minLength, minLength = _c === void 0 ? 0 : _c, endAdornment = props.endAdornment, rest = __rest(props, ["onChange", "value", "size", "tooltip", "error", "helperText", "maxLength", "minLength", "endAdornment"]);
+    var _d = useInteractions({ onChange: onChange }), tooltipOpen = _d.tooltipOpen, handleChange = _d.handleChange, onOpenTooltip = _d.onOpenTooltip, onCloseTooltip = _d.onCloseTooltip;
+    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
+                endAdornment: endAdornment,
+            }, onChange: handleChange }, rest), void 0) }), void 0));
+}
+export default DigitInput;
+export * from "./types";

package/DigitInput/types.d.ts

@@ -0,0 +1,9 @@
+import { InputProps } from "@mui/material/Input";
+export interface DigitInputProps {
+    onChange: (value: string) => void;
+    value: string;
+    tooltip?: string;
+    maxLength?: number;
+    minLength?: number;
+    endAdornment?: InputProps["endAdornment"];
+}

package/DigitInput/types.js

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

package/DigitInput/useInteractions.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from "react";
+interface InteractionProps {
+    onChange: (value: string) => void;
+}
+declare function useInteractions(props: InteractionProps): {
+    tooltipOpen: boolean;
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
+};
+export default useInteractions;

package/DigitInput/useInteractions.js

@@ -0,0 +1,24 @@
+import { useState, useCallback } from "react";
+function useInteractions(props) {
+    var onChange = props.onChange;
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var handleChange = useCallback(function (event) {
+        event.preventDefault();
+        if (!event.target.value || /^\d+$/g.test(event.target.value)) {
+            onChange(event.target.value);
+        }
+    }, []);
+    var onOpenTooltip = useCallback(function () {
+        setTooltipOpen(true);
+    }, []);
+    var onCloseTooltip = useCallback(function () {
+        setTooltipOpen(false);
+    }, []);
+    return {
+        tooltipOpen: tooltipOpen,
+        handleChange: handleChange,
+        onOpenTooltip: onOpenTooltip,
+        onCloseTooltip: onCloseTooltip,
+    };
+}
+export default useInteractions;

package/DynamicHeaderBar/HeaderBar.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, CSSProperties } from "react";
+import { HeaderButtonProps } from "./types";
+export interface HeaderBarProps {
+    title: string;
+    color?: CSSProperties["color"];
+    subtitle?: string | ReactElement;
+    bottomEl?: ReactElement;
+    buttons?: Array<HeaderButtonProps>;
+    showBackButton?: boolean;
+    onBack?: () => void;
+}
+declare function HeaderBar(props: HeaderBarProps): JSX.Element;
+export default HeaderBar;

package/DynamicHeaderBar/HeaderBar.js

@@ -0,0 +1,31 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, useMemo } from "react";
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
+import IconButton from "@mui/material/IconButton";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import HeaderLine from "./HeaderLine";
+import HeaderButtons from "./HeaderButtons";
+function HeaderBar(props) {
+    var title = props.title, color = props.color, subtitle = props.subtitle, bottomEl = props.bottomEl, _a = props.buttons, buttons = _a === void 0 ? [] : _a, showBackButton = props.showBackButton, onBack = props.onBack;
+    var theme = useTheme();
+    var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
+    var hasButtons = useMemo(function () { return buttons.length > 0; }, [buttons.length]);
+    return (_jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
+                                        onBack ? onBack() : window.history.back();
+                                    } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }, void 0) }), void 0)), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }), void 0)] }), void 0) }), void 0), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }, void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0))] }), void 0), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }, void 0) }), void 0) }), void 0), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle }, void 0)) : (cloneElement(subtitle)) }), void 0) }), void 0)), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) }), void 0) }), void 0))] }), void 0));
+}
+export default HeaderBar;

package/DynamicHeaderBar/HeaderButtons.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { HeaderButtonProps } from "./types";
+export interface HeaderButtonsProps {
+    buttons: Array<HeaderButtonProps>;
+}
+declare function HeaderButtons(props: HeaderButtonsProps): JSX.Element;
+export default HeaderButtons;

package/DynamicHeaderBar/HeaderButtons.js

@@ -0,0 +1,43 @@
+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 } from "react/jsx-runtime";
+import Fab from "@mui/material/Fab";
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+import MenuButtonGroup from "../MenuButtonGroup";
+import { HeaderButtonCategory } from "./types";
+function HeaderButtons(props) {
+    var buttons = props.buttons;
+    var theme = useTheme();
+    var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
+    return (_jsx(Grid, __assign({ container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center" }, { children: buttons.map(function (button) {
+            switch (button.type) {
+                case HeaderButtonCategory.TextButton: {
+                    var _a = button.variant, variant = _a === void 0 ? "contained" : _a, text = button.text, onClick = button.onClick, color = button.color, size = button.size, startIcon = button.startIcon, endIcon = button.endIcon, disabled = button.disabled;
+                    return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text }), void 0) }), text));
+                }
+                case HeaderButtonCategory.IconButton: {
+                    var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon;
+                    return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon }), void 0) }), title));
+                }
+                case HeaderButtonCategory.MenuButton: {
+                    var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size;
+                    return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, buttonText: buttonText, disabled: disabled }, void 0) }), buttonText));
+                }
+                default:
+                    return _jsx(_Fragment, {}, void 0);
+            }
+        }) }), void 0));
+}
+export default HeaderButtons;

package/DynamicHeaderBar/HeaderLine.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+interface HeaderLineProps {
+    color?: CSSProperties["color"];
+}
+declare function HeaderLine(props: HeaderLineProps): JSX.Element;
+export default HeaderLine;

package/DynamicHeaderBar/HeaderLine.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Divider from "@mui/material/Divider";
+import useTheme from "@mui/material/styles/useTheme";
+function HeaderLine(props) {
+    var color = props.color;
+    var theme = useTheme();
+    return (_jsx(Divider, { sx: {
+            height: "3px",
+            backgroundColor: color || theme.palette.primary.main,
+        } }, void 0));
+}
+export default HeaderLine;

package/DynamicHeaderBar/index.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+import { SxProps } from "@mui/material/styles";
+import { HeaderBarProps } from "./HeaderBar";
+interface HeaderProviderProps {
+    sx?: SxProps;
+    children: ReactElement;
+}
+interface HeaderContextProps {
+    onInit: (props: HeaderBarProps) => void;
+    onShow: () => void;
+    onHide: () => void;
+}
+export declare function HeaderProvider(props: HeaderProviderProps): JSX.Element;
+export declare function useHeaderBar(): HeaderContextProps;
+export { default } from "./HeaderBar";
+export { default as HeaderButtons } from "./HeaderButtons";
+export { default as HeaderLine } from "./HeaderLine";
+export * from "./HeaderBar";
+export * from "./HeaderButtons";
+export * from "./HeaderLine";
+export * from "./types";

package/DynamicHeaderBar/index.js

@@ -0,0 +1,57 @@
+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 { cloneElement, createContext, useContext, useState, useCallback, } from "react";
+import Grid from "@mui/material/Grid";
+import HeaderBar from "./HeaderBar";
+var HeaderContext = createContext({
+    onInit: function () { },
+    onShow: function () { },
+    onHide: function () { },
+});
+export function HeaderProvider(props) {
+    var children = props.children, _a = props.sx, sx = _a === void 0 ? {} : _a;
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    var _c = useState({ title: "" }), headerProps = _c[0], setHeaderProps = _c[1];
+    var _d = useState(0), height = _d[0], setHeight = _d[1];
+    var onInit = useCallback(function (args) {
+        setHeaderProps(args);
+    }, []);
+    var onShow = useCallback(function () {
+        setVisible(true);
+    }, []);
+    var onHide = useCallback(function () {
+        setVisible(false);
+    }, []);
+    var measureRef = useCallback(function (node) {
+        if (node && headerProps) {
+            setHeight(node.getBoundingClientRect().height);
+        }
+    }, [headerProps]);
+    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps), void 0) }), void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0)), cloneElement(children, {
+                    sx: {
+                        p: 3,
+                        py: 1,
+                        pt: height ? "calc(".concat(height, "px)") : undefined,
+                    },
+                })] }, void 0) }), void 0));
+}
+export function useHeaderBar() {
+    return useContext(HeaderContext);
+}
+export { default } from "./HeaderBar";
+export { default as HeaderButtons } from "./HeaderButtons";
+export { default as HeaderLine } from "./HeaderLine";
+export * from "./HeaderBar";
+export * from "./HeaderButtons";
+export * from "./HeaderLine";
+export * from "./types";

package/DynamicHeaderBar/types.d.ts

@@ -0,0 +1,33 @@
+import { ReactElement } from "react";
+import { ButtonProps } from "@mui/material/Button";
+import { IconButtonProps } from "@mui/material/IconButton";
+import { MenuButtonGroupProps } from "../MenuButtonGroup";
+export declare enum HeaderButtonCategory {
+    IconButton = "icon",
+    TextButton = "text",
+    MenuButton = "menu"
+}
+interface HeaderTextButtonProps {
+    text: string;
+    type: HeaderButtonCategory.TextButton;
+    variant?: ButtonProps["variant"];
+    color?: ButtonProps["color"];
+    size?: ButtonProps["size"];
+    startIcon?: ButtonProps["startIcon"];
+    endIcon?: ButtonProps["endIcon"];
+    disabled?: boolean;
+    onClick: ButtonProps["onClick"];
+}
+interface HeaderIconButtonProps {
+    title: string;
+    icon: ReactElement;
+    type: HeaderButtonCategory.IconButton;
+    color?: IconButtonProps["color"];
+    size?: IconButtonProps["size"];
+    onClick: IconButtonProps["onClick"];
+}
+declare type HeaderMenuButtonProps = {
+    type: HeaderButtonCategory.MenuButton;
+} & MenuButtonGroupProps;
+export declare type HeaderButtonProps = HeaderTextButtonProps | HeaderIconButtonProps | HeaderMenuButtonProps;
+export {};

package/DynamicHeaderBar/types.js

@@ -0,0 +1,6 @@
+export var HeaderButtonCategory;
+(function (HeaderButtonCategory) {
+    HeaderButtonCategory["IconButton"] = "icon";
+    HeaderButtonCategory["TextButton"] = "text";
+    HeaderButtonCategory["MenuButton"] = "menu";
+})(HeaderButtonCategory || (HeaderButtonCategory = {}));

package/FormRadioGroup/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FormRadioGroupProps } from "./types";
+declare function FormRadioGroup(props: FormRadioGroupProps): JSX.Element;
+export default FormRadioGroup;
+export * from "./types";

package/FormRadioGroup/index.js

@@ -0,0 +1,35 @@
+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 Radio from "@mui/material/Radio";
+import Tooltip from "@mui/material/Tooltip";
+import FormLabel from "@mui/material/FormLabel";
+import Typography from "@mui/material/Typography";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+function FormRadioGroup(props) {
+    var formLabel = props.formLabel, color = props.color, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, onChange = props.onChange;
+    return (_jsxs(FormControl, __assign({ sx: { mt: 3 }, component: "fieldset", disabled: disabled }, { children: [tooltip ? (_jsx(Tooltip, __assign({ title: tooltip, placement: "right", disableTouchListener: true }, { children: _jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0) }), void 0)) : (_jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0)), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
+                    onChange(event.target.value);
+                }, sx: {
+                    my: 1,
+                    "& label span:first-child span:first-child": {
+                        margin: "-5px 0 -5px 0",
+                    },
+                } }, { children: options.map(function (opt) {
+                    var _a;
+                    return (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, { color: color || "primary" }, void 0), label: _jsx(Typography, { children: opt.label }, void 0), disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
+                }) }), void 0)] }), void 0));
+}
+export default FormRadioGroup;
+export * from "./types";

package/FormRadioGroup/types.d.ts

@@ -0,0 +1,16 @@
+import { RadioProps } from "@mui/material/Radio";
+interface IRadioOption {
+    label: string;
+    value: string | boolean | number;
+    disabled?: boolean;
+}
+export interface FormRadioGroupProps {
+    color?: RadioProps["color"];
+    formLabel: string;
+    options: Array<IRadioOption>;
+    value: string | boolean | number;
+    disabled?: boolean;
+    tooltip?: string;
+    onChange: (value: string | boolean | number) => void;
+}
+export {};

package/FormRadioGroup/types.js

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

package/FormSelector/MultipleSelector.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { MultipleSelectorProps } from "./types";
+declare function MultipleSelector(props: MultipleSelectorProps): JSX.Element;
+export default MultipleSelector;