pixelize-design-library 2.1.12 → 2.1.13

package/dist/App.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import './global.css';
+declare function App(): React.JSX.Element;
+export default App;

package/dist/App.js

@@ -0,0 +1,128 @@
+"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 = __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 Layout_1 = __importDefault(require("./Layout"));
+var lucide_react_1 = require("lucide-react");
+require("./global.css");
+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 = [
+        { id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "dashboard" },
+        { id: 2, title: "Calendar", icon: lucide_react_1.Calendar, url: "calendar" },
+        { id: 3, title: "Reports", icon: lucide_react_1.Calendar, url: "reports" },
+        { id: 4, title: "Settings", icon: lucide_react_1.Calendar, url: "settings" },
+        { id: 5, title: "Users", icon: lucide_react_1.Calendar, url: "users" },
+        { id: 6, title: "Notifications notifications notifications notifications notifications", icon: lucide_react_1.Calendar, url: "notifications" },
+        { id: 7, title: "Analytics", icon: lucide_react_1.Calendar, url: "analytics" },
+        {
+            id: 8, title: "Projects", icon: lucide_react_1.Calendar, url: "projects", subMenu: [{
+                    id: 21, title: "submenu1hghvhvkhvkhvkhvh", icon: lucide_react_1.Calendar, url: "submenu1"
+                },
+                {
+                    id: 22, title: "submenu2", icon: lucide_react_1.Calendar, url: "submenu2"
+                }]
+        },
+        { id: 9, title: "Tasks", icon: lucide_react_1.Calendar, url: "tasks" },
+        { id: 10, title: "Teams", icon: lucide_react_1.Calendar, url: "teams" },
+        { id: 11, title: "Clients", icon: lucide_react_1.Calendar, url: "clients" },
+        { id: 12, title: "Invoices", icon: lucide_react_1.Calendar, url: "invoices" },
+        { id: 13, title: "Payments", icon: lucide_react_1.Calendar, url: "payments" },
+        { id: 14, title: "Leads", icon: lucide_react_1.Calendar, url: "leads" },
+        { id: 15, title: "Opportunities", icon: lucide_react_1.Calendar, url: "opportunities" },
+        { id: 16, title: "Campaigns", icon: lucide_react_1.Calendar, url: "campaigns" },
+        { id: 17, title: "Documents", icon: lucide_react_1.Calendar, url: "documents" },
+        { id: 18, title: "Files", icon: lucide_react_1.Calendar, url: "files" },
+        { id: 19, title: "Support", icon: lucide_react_1.Calendar, url: "support" },
+        { id: 20, title: "Integrations", icon: lucide_react_1.Calendar, url: "integrations" },
+    ];
+    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 (menu) {
+        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.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(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://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo"
+                        // }
+                        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", navigationBarText: {
+                            text: "Dashboard",
+                            onIconClick: function () {
+                                console.log("Back icon clicked");
+                            },
+                        }, moreIcon: react_1.default.createElement(lucide_react_1.Calendar, null) }),
+                    react_1.default.createElement("br", null),
+                    react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(lucide_react_1.ChevronRight, { 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/Assets/defaultLogo.d.ts

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

package/dist/Assets/defaultLogo.js

@@ -0,0 +1,15 @@
+"use strict";
+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 useCustomTheme_1 = require("../Theme/useCustomTheme");
+var DefaultLogo = function () {
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: theme.colors.black }),
+        react_1.default.createElement("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: theme.colors.black }),
+        react_1.default.createElement("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: theme.colors.black })));
+};
+exports.default = DefaultLogo;

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Accordion/Accordion.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AccordionProps } from "./AccordionProps";
+declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => React.JSX.Element;
+export default Accordion;

package/dist/Components/Accordion/Accordion.js

@@ -0,0 +1,40 @@
+"use strict";
+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;
+};
+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_2 = require("@chakra-ui/react");
+var Accordion = function (_a) {
+    var allowMultiple = _a.allowMultiple, allowToggle = _a.allowToggle, index = _a.index, onChange = _a.onChange, reduceMotion = _a.reduceMotion, items = _a.items, rest = __rest(_a, ["allowMultiple", "allowToggle", "index", "onChange", "reduceMotion", "items"]);
+    return (react_1.default.createElement(react_2.Accordion, __assign({ allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion }, rest), items.map(function (item, idx) {
+        var _a, _b, _c, _d;
+        return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx }, item.itemProps, { sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle }),
+            react_1.default.createElement("h2", null,
+                react_1.default.createElement(react_2.AccordionButton, __assign({}, item.buttonProps, { sx: __assign(__assign({}, (_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle), { '&:hover': __assign({}, (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle) }) }), item.header)),
+            react_1.default.createElement(react_2.AccordionPanel, __assign({}, item.panelProps, { sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.panelStyle }), item.content)));
+    })));
+};
+exports.default = Accordion;

package/dist/Components/Accordion/AccordionProps.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AccordionProps as ChakraAccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps } from "@chakra-ui/react";
+export type AccordionProps = ChakraAccordionProps & {
+    items: {
+        header: React.ReactNode;
+        content: React.ReactNode;
+        buttonProps?: AccordionButtonProps;
+        panelProps?: AccordionPanelProps;
+        itemProps?: AccordionItemProps;
+        customStyles?: {
+            buttonStyle?: React.CSSProperties;
+            hoverbuttonStyle?: React.CSSProperties;
+            panelStyle?: React.CSSProperties;
+            itemStyle?: React.CSSProperties;
+        };
+    }[];
+};

package/dist/Components/Accordion/AccordionProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AlertDialogsProps } from "./AlertDialogProps";
+declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, confirmButtonColor, key, }: AlertDialogsProps) => React.JSX.Element;
+export default AlertDialog;

package/dist/Components/AlertDialog/AlertDialog.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var AlertDialog = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, ContentStyle = _a.ContentStyle, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, _d = _a.confirmButtonColor, confirmButtonColor = _d === void 0 ? "red" : _d, key = _a.key;
+    return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, key: key },
+        react_2.default.createElement(react_1.AlertDialogOverlay, null),
+        react_2.default.createElement(react_1.AlertDialogContent, { sx: ContentStyle },
+            react_2.default.createElement(react_1.AlertDialogHeader, { sx: headerStyle }, title),
+            react_2.default.createElement(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }),
+            react_2.default.createElement(react_1.AlertDialogBody, { sx: bodyStyle }, content),
+            react_2.default.createElement(react_1.AlertDialogFooter, { sx: footerStyle },
+                react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, size: "sm", sx: button1Style }, cancelButtonText),
+                react_2.default.createElement(react_1.Button, { colorScheme: confirmButtonColor, onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style }, confirmButtonText)))));
+};
+exports.default = AlertDialog;

package/dist/Components/AlertDialog/AlertDialogProps.d.ts

@@ -0,0 +1,20 @@
+import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
+import { ReactElement } from "react";
+export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
+    title: string;
+    content: ReactElement;
+    isCentered?: boolean;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    isConfirmLoading?: boolean;
+    onConfirm: () => void;
+    ContentStyle?: React.CSSProperties;
+    headerStyle?: React.CSSProperties;
+    bodyStyle?: React.CSSProperties;
+    footerStyle?: React.CSSProperties;
+    closeButtonStyle?: React.CSSProperties;
+    button1Style?: React.CSSProperties;
+    button2Style?: React.CSSProperties;
+    key?: string | number;
+    confirmButtonColor?: string;
+};

package/dist/Components/AlertDialog/AlertDialogProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ApexBarChartProps } from "./ApexBarChartProps";
+export default function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, }: ApexBarChartProps): React.JSX.Element;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -0,0 +1,64 @@
+"use strict";
+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_apexcharts_1 = __importDefault(require("react-apexcharts"));
+function ApexBarChart(_a) {
+    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, _d = _a.barColor, barColor = _d === void 0 ? ["#3182ce"] : _d, _e = _a.xAxisStyle, xAxisStyle = _e === void 0 ? {
+        color: "#ffffff",
+    } : _e, _f = _a.yAxisStyle, yAxisStyle = _f === void 0 ? {
+        color: "#ffffff",
+    } : _f, _g = _a.titleStyle, titleStyle = _g === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _g;
+    var options = {
+        chart: {
+            type: "bar",
+            height: 350,
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 4,
+                horizontal: false,
+            },
+        },
+        dataLabels: {
+            enabled: false,
+            style: {
+                fontSize: "12px",
+                colors: ["#00E396"], //data label color
+            },
+        },
+        xaxis: {
+            categories: labels,
+            labels: {
+                style: xAxisStyle,
+            },
+        },
+        yaxis: {
+            labels: {
+                style: yAxisStyle,
+            },
+        },
+        title: {
+            text: title,
+            align: titlePosition,
+            style: titleStyle,
+        },
+        colors: barColor, //bar color
+    };
+    var series = [
+        {
+            name: "Data",
+            data: data,
+        },
+    ];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "bar", height: height, width: width })));
+}
+exports.default = ApexBarChart;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts

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

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexBarChart from './ApexBarChart';
+// import { ApexBarChartProps } from './ApexBarChartProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChartProps.d.ts

@@ -0,0 +1,19 @@
+export type ApexBarChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    barColor?: string[];
+    xAxisStyle?: StyleProps;
+    yAxisStyle?: StyleProps;
+    titleStyle?: StyleProps;
+};
+type StyleProps = {
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    color?: string;
+};
+export {};

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChartProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ApexPieChartProps } from "./ApexPieChartProps";
+export default function ApexPieChart({ data, labels, title, titlePosition, height, width, chartColor, titleStyle, }: ApexPieChartProps): React.JSX.Element;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -0,0 +1,29 @@
+"use strict";
+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_apexcharts_1 = __importDefault(require("react-apexcharts"));
+function ApexPieChart(_a) {
+    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, chartColor = _a.chartColor, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
+        color: "#3182ce",
+    } : _d;
+    var options = {
+        chart: {
+            type: "pie",
+            height: 350,
+        },
+        labels: labels,
+        title: {
+            text: title,
+            align: titlePosition,
+            style: titleStyle,
+        },
+        colors: chartColor,
+    };
+    var series = data;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "pie", height: height, width: width })));
+}
+exports.default = ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.d.ts

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

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexPieChart from './ApexPieChart';
+// import { ApexPieChartProps } from './ApexPieChartProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -0,0 +1,41 @@
+export type ApexPieChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    chartColor?: string[];
+    titleStyle?: StyleProps;
+};
+type StyleProps = {
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    color?: string;
+};
+export interface ApexOptions {
+    annotations?: ApexAnnotations;
+    chart?: ApexChart;
+    colors?: any[];
+    dataLabels?: ApexDataLabels;
+    fill?: ApexFill;
+    forecastDataPoints?: ApexForecastDataPoints;
+    grid?: ApexGrid;
+    labels?: string[];
+    legend?: ApexLegend;
+    markers?: ApexMarkers;
+    noData?: ApexNoData;
+    plotOptions?: ApexPlotOptions;
+    responsive?: ApexResponsive[];
+    series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
+    states?: ApexStates;
+    stroke?: ApexStroke;
+    subtitle?: ApexTitleSubtitle;
+    theme?: ApexTheme;
+    title?: ApexTitleSubtitle;
+    tooltip?: ApexTooltip;
+    xaxis?: ApexXAxis;
+    yaxis?: ApexYAxis | ApexYAxis[];
+}
+export {};

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { BreadcrumbsProps } from "./BreadcrumbsProps";
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): React.JSX.Element;

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,17 @@
+"use strict";
+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_2 = require("@chakra-ui/react");
+function Breadcrumbs(_a) {
+    var spacing = _a.spacing, separator = _a.separator, fontWeight = _a.fontWeight, fontSize = _a.fontSize, isCurrentPage = _a.isCurrentPage, handleClick = _a.handleClick, items = _a.items;
+    var theme = (0, react_2.useTheme)();
+    return (react_1.default.createElement(react_2.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body }, items.map(function (item, index) { return (react_1.default.createElement(react_2.BreadcrumbItem, { key: index, isCurrentPage: isCurrentPage && index === items.length - 1 },
+        react_1.default.createElement(react_2.BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: function (event) {
+                event.preventDefault();
+                handleClick(item.path);
+            } }, item.label))); })));
+}
+exports.default = Breadcrumbs;

package/dist/Components/Breadcrumbs/Breadcrumbs.stories.d.ts

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

package/dist/Components/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import Breadcrumbs from './Breadcrumbs';
+// import { BreadcrumbsProps } from './BreadcrumbsProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts

@@ -0,0 +1,11 @@
+import { BreadcrumbProps } from "@chakra-ui/react";
+export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
+    isCurrentPage?: boolean;
+    isLastChild?: boolean;
+    handleClick: (path: string) => void;
+    items: BreadcrumbItem[];
+};
+export type BreadcrumbItem = {
+    path: string;
+    label: string;
+};

package/dist/Components/Breadcrumbs/BreadcrumbsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ButtonProps } from "./ButtonProps";
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, }: ButtonProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Button>;
+export default _default;

package/dist/Components/Button/Button.js

@@ -0,0 +1,32 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+function Button(_a) {
+    var label = _a.label, children = _a.children, onClick = _a.onClick, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref, border = _a.border, borderRadius = _a.borderRadius;
+    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius }, children !== null && children !== void 0 ? children : label));
+}
+exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/Button.stories.d.ts

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

package/dist/Components/Button/Button.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { Meta, StoryObj } from '@storybook/react';
+// import Button from './Button';
+// import { fn } from '@storybook/test';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Button/Button.styles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Button: ComponentStyleConfig;