pixelize-design-library 1.1.7 → 1.1.8

package/dist/App.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 declare function App(): React.JSX.Element;
 export default App;

package/dist/App.js

@@ -1,12 +1,102 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var Loading_1 = __importDefault(require("./Components/Loading/Loading"));
+var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
+var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
+var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
+var icons_1 = require("@chakra-ui/icons");
+var fi_1 = require("react-icons/fi");
 var Layout_1 = __importDefault(require("./Layout"));
 function App() {
+    function useWindowSize() {
+        var _a = (0, react_1.useState)({
+            width: 0,
+            height: 0,
+        }), windowSize = _a[0], setWindowSize = _a[1];
+        (0, react_1.useEffect)(function () {
+            function handleResize() {
+                setWindowSize({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            }
+            window.addEventListener("resize", handleResize);
+            handleResize();
+            return function () { return window.removeEventListener("resize", handleResize); };
+        }, []);
+        return windowSize;
+    }
+    var _a = useWindowSize(), width = _a.width, height = _a.height;
+    var breadcrumbItems = [
+        { path: "/home", label: "Home" },
+        { path: "/about", label: "About" },
+        { path: "/contact", label: "Contact" },
+    ];
+    var handleClick = function (path) {
+        console.log("Navigating to ".concat(path));
+    };
+    var menu = [
+        {
+            title: "Dashboard",
+            icon: fi_1.FiHome,
+            url: "dashboard",
+        },
+        {
+            title: "Calendar",
+            icon: fi_1.FiCalendar,
+            url: "description",
+        },
+    ];
+    var _b = (0, react_1.useState)(true), toggle = _b[0], changeToggle = _b[1];
+    var _c = (0, react_1.useState)(""), activeMenu = _c[0], setActiveMenu = _c[1];
+    var handleMenuClick = function (title, url) {
+        setActiveMenu(title);
+    };
+    var navmenus = [
+        { title: "Account Settings", url: "myaccount" },
+        { title: "Resetpassword", url: "resetpassword" },
+    ];
+    var handleNavOnClick = function (title) { };
+    var handleLogout = function () { };
     return (react_1.default.createElement("div", { className: "App" },
-        react_1.default.createElement(Layout_1.default, null)));
+        react_1.default.createElement(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
+            react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
+            react_1.default.createElement(react_2.Flex, null,
+                react_1.default.createElement(react_2.Box, null,
+                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://bit.ly/dan-abramov", companyName: "PIXELIZE" })),
+                react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
+                    react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar" }),
+                    react_1.default.createElement("br", null),
+                    react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(icons_1.ChevronRightIcon, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
+                    react_1.default.createElement(react_2.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
+                        react_1.default.createElement(Layout_1.default, null)))))));
 }
 exports.default = App;

package/dist/Components/Input/TextInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { TextInputProps } from "./TextInputProps";
-declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, size, isInformation, informationMessage, }: TextInputProps): React.JSX.Element;
+declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size, isInformation, informationMessage, leftElementStyle, rightElementStyle, }: TextInputProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TextInput>;
 export default _default;

package/dist/Components/Input/TextInput.js

@@ -21,15 +21,30 @@ var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 function TextInput(_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "sm" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage;
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "sm" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var getPadding = function () {
+        if (inputLeftIcon && inputRightIcon) {
+            return "0 1.6rem 0 1.6rem";
+        }
+        else if (inputLeftIcon) {
+            return "0 0.5rem 0 1.6rem";
+        }
+        else if (inputRightIcon) {
+            return "0 1.6rem 0 0.5rem";
+        }
+        else {
+            return "0 0.5rem";
+        }
+    };
     return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
         react_1.default.createElement(react_2.InputGroup, { width: width, style: inputGroupStyle },
+            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, { onClick: onLeftIconClick, style: __assign(__assign({}, leftElementStyle), { height: "1.8rem", width: "1.8rem", cursor: "pointer" }) }, inputLeftIcon)),
             react_1.default.createElement(react_2.Input, { type: type, 
                 // variant={variant}
-                placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
-            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, { onClick: onRightIconclick }, inputRightIcon))),
+                placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: getPadding(), fontSize: 15, letterSpacing: 0.7 }) }),
+            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, { onClick: onRightIconclick, style: __assign(__assign({}, rightElementStyle), { height: "1.8rem", width: "1.8rem" }) }, inputRightIcon))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Input/TextInputProps.d.ts

@@ -9,8 +9,12 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     helperText?: string;
     onRightIconclick?: () => void;
     inputRightIcon?: JSX.Element | string;
+    onLeftIconClick?: () => void;
+    inputLeftIcon?: JSX.Element | string;
     inputStyle?: {};
     inputGroupStyle?: {};
     isInformation?: boolean;
     informationMessage?: string;
+    leftElementStyle?: {};
+    rightElementStyle?: {};
 };

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SelectSearchProps } from "./SelectSearchProps";
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, }: Readonly<SelectSearchProps>): React.JSX.Element;
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -39,7 +39,7 @@ var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function SelectSearch(_a) {
-    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e, _f = _a.isInformation, isInformation = _f === void 0 ? false : _f, informationMessage = _a.informationMessage;
+    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e, _f = _a.isInformation, isInformation = _f === void 0 ? false : _f, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _g = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _g[0], setInputValue = _g[1];
     var _h = (0, react_1.useState)(false), isOpen = _h[0], setIsOpen = _h[1];
@@ -128,9 +128,11 @@ function SelectSearch(_a) {
     }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
     return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: false, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: function (e) { return inputOnchange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, 
-            // {...inputStyle}
-            style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+        react_1.default.createElement(react_2.InputGroup, null,
+            react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: function (e) { return inputOnchange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, 
+                // {...inputStyle}
+                style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+            rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
         isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 }, RenderOptions()))));
 }
 exports.default = SelectSearch;

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -17,6 +17,8 @@ export type SelectSearchProps = {
     searchQuery: string;
     isInformation?: boolean;
     informationMessage?: string;
+    rightIcon?: React.ReactNode;
+    rightElementStyle?: {};
 };
 export type MultiSelectOptions = {
     id: string;

package/dist/Components/SideBar/SideBar.js

@@ -32,6 +32,11 @@ function Sidebar(_a) {
                     "&:hover::-webkit-scrollbar-thumb": {
                         background: "#888",
                     },
+                    // scrollbarWidth: "thin",
+                    // scrollbarColor: "transparent transparent",
+                    // "&:hover": {
+                    //  scrollbarColor: "#888 transparent",
+                    // },
                 }, ml: toggle ? "-8px" : "0px" }, menus.map(function (menu) { return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
                 react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title ? theme.colors.primary[500] : "none", borderRadius: 8, _hover: {
                         textDecor: "none",

package/dist/Layout.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
+import React from 'react';
 declare const Layout: () => React.JSX.Element;
 export default Layout;