pixelize-design-library 1.0.35 → 1.0.36

package/dist/Components/Drawer/Drawer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DrawerProps } from "./DrawerProps";
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): React.JSX.Element;

package/dist/Components/Drawer/Drawer.js

@@ -0,0 +1,24 @@
+"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 Drawer(_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.placement, placement = _b === void 0 ? "right" : _b, _c = _a.size, size = _c === void 0 ? "xl" : _c, id = _a.id, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, children = _a.children;
+    var isReactElement = function (child) {
+        return child !== null && typeof child === "object" && "type" in child;
+    };
+    var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === "header"; });
+    var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === "body"; });
+    var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === "footer"; });
+    return (react_1.default.createElement(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id },
+        react_1.default.createElement(react_2.DrawerOverlay, null),
+        react_1.default.createElement(react_2.DrawerContent, null,
+            react_1.default.createElement(react_2.DrawerCloseButton, null),
+            header && (react_1.default.createElement(react_2.DrawerHeader, { borderBottomWidth: "1px" }, header)),
+            react_1.default.createElement(react_2.DrawerBody, null, body && body),
+            footer && react_1.default.createElement(react_2.DrawerFooter, { borderTopWidth: "1px" }, footer))));
+}
+exports.default = Drawer;

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DrawerProps as ChakraDrawerProps } from "@chakra-ui/react";
+export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    placement?: "top" | "right" | "bottom" | "left";
+    vaiant?: "solid" | "outline" | "ghost" | "link";
+    children?: React.ReactNode;
+};

package/dist/Components/Drawer/DrawerProps.js

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

package/dist/Layout.js

@@ -67,6 +67,7 @@ var NoteTextArea_1 = __importDefault(require("./Components/NoteTextArea/NoteText
 var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 var VerifyEmailOtp_1 = __importDefault(require("./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
+var Drawer_1 = __importDefault(require("./Components/Drawer/Drawer"));
 var Layout = function () {
     var navmenus = [
         { title: "Account Settings", url: "myaccount" },
@@ -268,6 +269,13 @@ var Layout = function () {
         console.log("Note: ", noteValue);
         console.log("File: ", file);
     };
+    var _j = (0, react_2.useState)(false), drawerOpen = _j[0], setDrawerOpen = _j[1];
+    var handleOnclick3 = function () {
+        setDrawerOpen(true);
+    };
+    var handleOnclick4 = function () {
+        setDrawerOpen(false);
+    };
     return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
         react_2.default.createElement(Loading_1.default, { text: "Loading", isLoading: false }),
         react_2.default.createElement(react_1.Flex, null,
@@ -408,6 +416,12 @@ var Layout = function () {
                             console.log("onchange", val);
                         }, onComplete: function (val) {
                             console.log("onComplete", val);
-                        }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify" }))))));
+                        }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify" }),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement(Button_1.default, { label: "DrawerButton", onClick: handleOnclick3, width: 250, variant: "solid", color: "blue" }),
+                    react_2.default.createElement(Drawer_1.default, { isOpen: drawerOpen, onClose: handleOnclick4, size: "xl" },
+                        react_2.default.createElement("header", null, "Drawer Header"),
+                        react_2.default.createElement("body", null, "Drawer Body"),
+                        react_2.default.createElement("footer", null, "Drawer Footer")))))));
 };
 exports.default = Layout;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import Button from "./Components/Button/Button";
 import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
 import Card from "./Components/Card/Card";
 import Checkbox from "./Components/Checkbox/Checkbox";
+import Drawer from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
@@ -27,4 +28,4 @@ import TextInput from "./Components/Input/TextInput";
 import Toaster, { useToaster } from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
 import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
-export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
+export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };

package/dist/index.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
 var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
@@ -42,6 +42,8 @@ var Card_1 = __importDefault(require("./Components/Card/Card"));
 exports.Card = Card_1.default;
 var Checkbox_1 = __importDefault(require("./Components/Checkbox/Checkbox"));
 exports.Checkbox = Checkbox_1.default;
+var Drawer_1 = __importDefault(require("./Components/Drawer/Drawer"));
+exports.Drawer = Drawer_1.default;
 var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 exports.Dropdown = DropDown_1.default;
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -75,4 +75,4 @@
       "prettier --write"
     ]
   }
-}
+}