@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-beta.1

package/AlertDialog/index.d.ts

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

package/AlertDialog/index.js

@@ -32,7 +32,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import Slide from "@mui/material/Slide";
 import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["title", "maxWidth", "children", "open", "onClose", "DialogButtons", "primaryColor", "secondaryColor"]);
@@ -42,7 +42,7 @@ var AlertDialog = function (props) {
                 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) }), void 0));
+            }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title })), _jsx(DialogContent, { children: children }), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }))) })] })) })));
 };
 export default AlertDialog;
 export * from "./types";

package/Autocomplete/index.d.ts

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

package/Autocomplete/index.js

@@ -0,0 +1,38 @@
+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 ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function CustomAutocomplete(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, value) {
+                onChange(value);
+            }, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return _jsx(TextField, __assign({}, params, rest, { size: size })); } }) })));
+}
+export default CustomAutocomplete;
+export * from "./types";

package/Autocomplete/types.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface IAutocompleteOption {
+    label: string;
+    [name: string]: unknown;
+}
+export declare type AutocompleteOptionType = IAutocompleteOption | string;
+export interface CustomAutocompleteProps extends Omit<TextFieldProps, "onChange"> {
+    multiple?: boolean;
+    options: Array<AutocompleteOptionType>;
+    value: Array<AutocompleteOptionType> | AutocompleteOptionType | null;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: Array<AutocompleteOptionType> | AutocompleteOptionType | null) => void;
+}

package/Autocomplete/types.js

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

package/Autocomplete/useInteractions.d.ts

@@ -0,0 +1,5 @@
+declare function useInteractions(): {
+    inputValue: string;
+    onInputChange: (_: object, value: string) => void;
+};
+export default useInteractions;

package/Autocomplete/useInteractions.js

@@ -0,0 +1,9 @@
+import { useState, useCallback } from "react";
+function useInteractions() {
+    var _a = useState(""), inputValue = _a[0], setInputValue = _a[1];
+    var onInputChange = useCallback(function (_, value) {
+        setInputValue(value);
+    }, []);
+    return { inputValue: inputValue, onInputChange: onInputChange };
+}
+export default useInteractions;

package/AutocompleteWithFilter/index.d.ts

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

package/AutocompleteWithFilter/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, jsxs as _jsxs } from "react/jsx-runtime";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import useCustomTheme from "../useCustomTheme";
+var icon = _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+var checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
+function AutocompleteWithFilter(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, disableCloseOnSelect = props.disableCloseOnSelect, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange"]);
+    var filter = createFilterOptions({
+        ignoreCase: true,
+        ignoreAccents: true,
+        trim: true,
+        stringify: function (option) {
+            return typeof option === "string" ? option : option.label;
+        }
+    });
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
+                onChange(value);
+            }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
+                return typeof option === "string" ? option || "" : option.label || "";
+            }, renderOption: function (props, option, _a) {
+                var selected = _a.selected;
+                return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), typeof option === "string" ? option || "" : option.label || ""] })));
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined" }))); } }) })));
+}
+export default AutocompleteWithFilter;
+export * from "./types";

package/AutocompleteWithFilter/types.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface IAutoCompleteWithFilterOption {
+    label: string;
+    [name: string]: unknown;
+}
+export declare type AutoCompleteWithFilterOptionType = IAutoCompleteWithFilterOption | string;
+export interface AutoCompleteWithFilterProps extends Omit<TextFieldProps, "onChange"> {
+    multiple?: boolean;
+    value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null;
+    options: Array<AutoCompleteWithFilterOptionType>;
+    disableCloseOnSelect?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null) => void;
+}

package/AutocompleteWithFilter/types.js

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

package/BasicModal/Content.d.ts

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

package/BasicModal/Content.js

@@ -32,6 +32,6 @@ function Content(props) {
                             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));
+                        } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !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 })) })), _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 })) }))] })) })) })))] }));
 }
 export default Content;

package/BasicModal/index.d.ts

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

package/BasicModal/index.js

@@ -30,7 +30,7 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Content from "./Content";
 import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onClose", "onSubmit", "maxWidth", "open", "noForm", "primaryColor", "secondaryColor"]);
@@ -40,16 +40,13 @@ function BasicModal(props) {
                 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
+            }, maxWidth: maxWidth, fullWidth: true, TransitionComponent: Transition, "aria-labelledby": "form-dialog-title", fullScreen: fullScreen, disableEscapeKeyDown: true }, { children: _jsx(Grid, __assign({ 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) }), void 0));
+                    } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit })) })) })) })));
 }
 export default BasicModal;
 export * from "./types";

package/BreadCrumbs/index.d.ts

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

package/BreadCrumbs/index.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 } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { navigate } from "@reach/router";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import useCustomTheme from "../useCustomTheme";
+function Crumbs(props) {
+    var routes = props.routes, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var onNavigateTo = useCallback(function (url) {
+        navigate(url, { replace: true });
+    }, []);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Breadcrumbs, __assign({ "aria-label": "breadcrumb", separator: _jsx(NavigateNextIcon, { fontSize: "small" }) }, { children: [_jsx(Typography, {}), routes.map(function (route) {
+                    var href = route.href, label = route.label;
+                    return href ? (_jsx(Typography, __assign({ variant: "body2", color: "inherit", sx: {
+                            "&:hover": {
+                                cursor: "pointer",
+                                color: theme.palette.primary.light,
+                            },
+                        }, onClick: function () { return onNavigateTo(href); } }, { children: label }), label)) : (_jsx(Typography, __assign({ variant: "body2", color: "primary" }, { children: label }), label));
+                })] })) })));
+}
+export default Crumbs;
+export * from "./types";

package/BreadCrumbs/types.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+export interface BreadCrumbsProps {
+    routes: Array<{
+        href?: string;
+        label: string;
+    }>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/BreadCrumbs/types.js

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

package/CheckBox/CheckBox.d.ts

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

package/CheckBox/CheckBox.js

@@ -0,0 +1,36 @@
+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 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) {
+    var label = props.label, onChange = props.onChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["label", "onChange", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, __assign({ onChange: function (event) {
+                    event.stopPropagation();
+                    onChange(event.target.checked);
+                } }, rest)), label: label }) })));
+}
+export default CheckBox;

package/CheckBox/CheckBoxGroup.d.ts

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

package/CheckBox/CheckBoxGroup.js

@@ -0,0 +1,30 @@
+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 FormGroup from "@mui/material/FormGroup";
+import CheckBox from "./CheckBox";
+export function CheckBoxGroup(props) {
+    var checkboxes = props.checkboxes, rest = __rest(props, ["checkboxes"]);
+    return (_jsx(FormGroup, __assign({}, rest, { children: checkboxes.map(function (checkbox, index) { return (_jsx(CheckBox, __assign({}, checkbox), index)); }) })));
+}
+export default CheckBoxGroup;

package/CheckBox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export * from "./types";

package/CheckBox/index.js

@@ -0,0 +1,3 @@
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export * from "./types";

package/CheckBox/types.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from "react";
+import { CheckboxProps } from "@mui/material/Checkbox";
+import { FormGroupProps } from "@mui/material/FormGroup";
+export interface CheckBoxProps extends Omit<CheckboxProps, "onChange"> {
+    label: string | ReactNode;
+    onChange: (val: boolean) => void;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}
+export interface CheckBoxGroupProps extends FormGroupProps {
+    checkboxes: Array<CheckBoxProps>;
+}

package/CheckBox/types.js

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

package/Copyright/index.d.ts

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

package/Copyright/index.js

@@ -0,0 +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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function Copyright(props) {
+    var primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary", align: "center" }, { children: ["Copyright © ", _jsx(Link, __assign({ color: "inherit", href: "https://symply.io/" }, { children: "Symply Software Inc" })), "\u00A0", new Date().getFullYear() > 2020
+                    ? "2020-".concat(new Date().getFullYear())
+                    : new Date().getFullYear(), "."] })) })));
+}
+export default Copyright;
+export * from "./types";

package/Copyright/types.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from "react";
+export interface CopyrightProps {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/Copyright/types.js

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

package/DateInput/FullDateInput/index.d.ts

@@ -0,0 +1,5 @@
+import { DateInputprops } from "./types";
+export declare function MonthDayYearFormat(str: string): string;
+export declare function verifyDate(dateString: string): boolean;
+declare function FullDateInput(props: DateInputprops): JSX.Element;
+export default FullDateInput;

package/DateInput/FullDateInput/index.js

@@ -0,0 +1,66 @@
+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 } from "react/jsx-runtime";
+import { useRifm } from "rifm";
+import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../../useCustomTheme";
+export function MonthDayYearFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 2) {
+            return "".concat(prev, " / ").concat(curr);
+        }
+        else if (index === 4) {
+            return "".concat(prev, " / ").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "");
+}
+export function verifyDate(dateString) {
+    var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1}|[1-2]{1}\d{1})))\s?\/\s?\d{4}$/g;
+    if (reg.test(dateString)) {
+        var tmpArr = dateString.split("/");
+        var month = parseInt(tmpArr[0].trim(), 10);
+        var day = parseInt(tmpArr[1].trim(), 10);
+        var year = parseInt(tmpArr[2].trim(), 10);
+        var verifyLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+        if (month === 2 && !verifyLeapYear) {
+            return day < 29;
+        }
+        return true;
+    }
+    return false;
+}
+function FullDateInput(props) {
+    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
+        mask: true,
+        value: String(value),
+        onChange: onChange,
+        replace: addMask,
+        format: MonthDayYearFormat
+    });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / DD / YYYY", error: error ||
+                (valLength > 0 && (verifyFn ? !verifyFn(value) : !verifyDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : !verifyDate(value))
+                ? helperText
+                : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
+                shrink: true
+            } }) })));
+}
+export default FullDateInput;

package/DateInput/FullDateInput/types.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+export interface DateInputprops {
+    name: string;
+    onChange: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    verifyFn?: (value?: string) => boolean;
+    helperText?: string;
+    margin?: "none" | "normal" | "dense" | undefined;
+    error?: boolean;
+    value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/DateInput/FullDateInput/types.js

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

package/DateInput/FullDateInput/useInteractions.d.ts

@@ -0,0 +1,8 @@
+interface InteractionProps {
+    value: string;
+}
+declare function useInteractions(props: InteractionProps): {
+    valLength: number;
+    addMask: (str: string) => string;
+};
+export default useInteractions;

package/DateInput/FullDateInput/useInteractions.js

@@ -0,0 +1,20 @@
+import { useCallback, useMemo } from "react";
+function useInteractions(props) {
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var month = digits.slice(0, 2).padEnd(2, "_");
+        var day = digits.slice(2, 4).padEnd(2, "_");
+        var Year = digits.slice(4, 8).padEnd(4, "_");
+        if (digits) {
+            return "".concat(month, " / ").concat(day, " / ").concat(Year);
+        }
+        return "";
+    }, []);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
+        return digitsArr ? digitsArr.length : 0;
+    }, [value]);
+    return { valLength: valLength, addMask: addMask };
+}
+export default useInteractions;

package/DateInput/MonthDayInput/index.d.ts

@@ -0,0 +1,5 @@
+import { DateInputprops } from "./types";
+export declare function MonthDayFormat(str: string): string;
+export declare function verifyMonthDayDate(monthDayString: string): boolean;
+declare function MonthDayInput(props: DateInputprops): JSX.Element;
+export default MonthDayInput;