pixelize-design-library 1.0.51 → 1.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -6
- package/dist/Components/DatePicker/DatePickerProps.d.ts +5 -1
- package/dist/Components/Modal/Modal.d.ts +1 -1
- package/dist/Components/Modal/Modal.js +11 -3
- package/dist/Components/Modal/ModalProps.d.ts +1 -0
- package/dist/Components/ProfileCard/ProfileCard.d.ts +1 -1
- package/dist/Components/ProfileCard/ProfileCard.js +19 -6
- package/dist/Components/ProfileCard/ProfileCardProps.d.ts +3 -6
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +34 -10
- package/dist/Components/SelectSearch/SelectSearch.d.ts +3 -0
- package/dist/Components/SelectSearch/SelectSearch.js +88 -0
- package/dist/Components/SelectSearch/SelectSearchProps.d.ts +10 -0
- package/dist/Components/SelectSearch/SelectSearchProps.js +2 -0
- package/dist/Components/Timeline/Timeline.js +42 -13
- package/dist/Layout.js +60 -9
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3 -1
- package/package.json +1 -1
- package/dist/.dev-server.zip +0 -0
- package/dist/@mf-types.d.ts +0 -3
- package/dist/@mf-types.zip +0 -0
package/README.md
CHANGED
|
@@ -31,13 +31,13 @@ PixelizeDesign Library Components Are Below
|
|
|
31
31
|
- ButtonGroupIcon,
|
|
32
32
|
- Card,
|
|
33
33
|
- Checkbox,
|
|
34
|
-
- DatePicker,
|
|
34
|
+
- DatePicker,
|
|
35
35
|
- Dropdown,
|
|
36
|
-
- Editor,
|
|
36
|
+
- Editor,
|
|
37
37
|
- InputTextArea,
|
|
38
38
|
- Loading,
|
|
39
39
|
- Modal,
|
|
40
|
-
- MultiSelect,
|
|
40
|
+
- MultiSelect,
|
|
41
41
|
- NavigationBar,
|
|
42
42
|
- NoteTextArea,
|
|
43
43
|
- NumberInput,
|
|
@@ -47,15 +47,16 @@ PixelizeDesign Library Components Are Below
|
|
|
47
47
|
- ProgressBar,
|
|
48
48
|
- RadioButton,
|
|
49
49
|
- RadioButtonGroup,
|
|
50
|
-
- Search,
|
|
50
|
+
- Search,
|
|
51
51
|
- Select,
|
|
52
|
+
- SelectSearch, \* New
|
|
52
53
|
- SideBar,
|
|
53
54
|
- Skeletons,
|
|
54
55
|
- Switch,
|
|
55
56
|
- Table,
|
|
56
57
|
- TextInput,
|
|
57
|
-
- Timeline,
|
|
58
|
+
- Timeline,
|
|
58
59
|
- Toaster,
|
|
59
60
|
- useToaster,
|
|
60
61
|
- ToolTip,
|
|
61
|
-
- VerifyEmailOtp
|
|
62
|
+
- VerifyEmailOtp
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import DatePicker from "react-datepicker";
|
|
3
|
+
type ReactDatePickerProps = React.ComponentProps<typeof DatePicker>;
|
|
1
4
|
export type DatePickerProps = {
|
|
2
5
|
selectedDate: Date | null;
|
|
3
6
|
onChange: (date: Date | null) => void;
|
|
@@ -11,4 +14,5 @@ export type DatePickerProps = {
|
|
|
11
14
|
label?: string;
|
|
12
15
|
id?: string;
|
|
13
16
|
name?: string;
|
|
14
|
-
}
|
|
17
|
+
} & Partial<ReactDatePickerProps>;
|
|
18
|
+
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ChakraModelProps } from "./ModalProps";
|
|
3
|
-
export default function Modal({ size, isOpen, onClose,
|
|
3
|
+
export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }: ChakraModelProps): React.JSX.Element;
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
var react_1 = __importDefault(require("react"));
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
function Modal(_a) {
|
|
9
|
-
var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose,
|
|
9
|
+
var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.overlaybg, overlaybg = _c === void 0 ? "blackAlpha.300" : _c, _d = _a.overlaybackdropFilter, overlaybackdropFilter = _d === void 0 ? "blur(10px) hue-rotate(90deg)" : _d, overlaybackdropInvert = _a.overlaybackdropInvert, overlaybackdropBlur = _a.overlaybackdropBlur, isCentered = _a.isCentered, finalFocusRef = _a.finalFocusRef, blockScrollOnMount = _a.blockScrollOnMount, initialFocusRef = _a.initialFocusRef, closeOnOverlayClick = _a.closeOnOverlayClick, motionPreset = _a.motionPreset, scrollBehavior = _a.scrollBehavior, children = _a.children, isLoading = _a.isLoading;
|
|
10
10
|
if (!isOpen)
|
|
11
11
|
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
12
12
|
var filterChildren = function (type) {
|
|
@@ -20,10 +20,18 @@ function Modal(_a) {
|
|
|
20
20
|
var footerContent = filterChildren("footer");
|
|
21
21
|
return (react_1.default.createElement(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior },
|
|
22
22
|
react_1.default.createElement(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }),
|
|
23
|
-
react_1.default.createElement(react_2.ModalContent, null,
|
|
23
|
+
react_1.default.createElement(react_2.ModalContent, null, isLoading ? (react_1.default.createElement("div", { style: {
|
|
24
|
+
display: "flex",
|
|
25
|
+
justifyContent: "center",
|
|
26
|
+
alignItems: "center",
|
|
27
|
+
height: "100%",
|
|
28
|
+
width: "100%",
|
|
29
|
+
padding: "25%",
|
|
30
|
+
} },
|
|
31
|
+
react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
24
32
|
headerContent && react_1.default.createElement(react_2.ModalHeader, null, headerContent),
|
|
25
33
|
react_1.default.createElement(react_2.ModalCloseButton, null),
|
|
26
34
|
react_1.default.createElement(react_2.ModalBody, null, bodyContent),
|
|
27
|
-
footerContent && react_1.default.createElement(react_2.ModalFooter, null, footerContent))));
|
|
35
|
+
footerContent && react_1.default.createElement(react_2.ModalFooter, null, footerContent))))));
|
|
28
36
|
}
|
|
29
37
|
exports.default = Modal;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ProfileCardProps } from "./ProfileCardProps";
|
|
3
|
-
export default function ProfileCard({ key, maxW, align, variant, direction, justify,
|
|
3
|
+
export default function ProfileCard({ key, maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, }: ProfileCardProps): React.JSX.Element;
|
|
@@ -6,12 +6,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
var react_1 = __importDefault(require("react"));
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
function ProfileCard(_a) {
|
|
9
|
-
var key = _a.key, maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify,
|
|
9
|
+
var key = _a.key, maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "gray.300" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "1px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d;
|
|
10
|
+
var filterChildren = function (type) {
|
|
11
|
+
return react_1.default.Children.map(children, function (child) {
|
|
12
|
+
if (child.type === type)
|
|
13
|
+
return child.props.children;
|
|
14
|
+
}).filter(Boolean)[0];
|
|
15
|
+
};
|
|
16
|
+
var headerContent = filterChildren("header");
|
|
17
|
+
var bodyContent = filterChildren("body");
|
|
18
|
+
var footerContent = filterChildren("footer");
|
|
10
19
|
return (react_1.default.createElement(react_2.Card, { key: key, maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, mr: 10 },
|
|
11
|
-
|
|
12
|
-
react_1.default.createElement(react_2.CardHeader,
|
|
13
|
-
react_1.default.createElement(react_2.Divider, {
|
|
14
|
-
|
|
15
|
-
|
|
20
|
+
headerContent && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
21
|
+
react_1.default.createElement(react_2.CardHeader, { style: { fontWeight: "bold" } }, headerContent),
|
|
22
|
+
react_1.default.createElement(react_2.Divider, { style: {
|
|
23
|
+
borderColor: dividercolor,
|
|
24
|
+
borderWidth: dividersize,
|
|
25
|
+
borderStyle: dividervariant,
|
|
26
|
+
} }))),
|
|
27
|
+
react_1.default.createElement(react_2.CardBody, null, bodyContent),
|
|
28
|
+
react_1.default.createElement(react_2.CardFooter, null, footerContent)));
|
|
16
29
|
}
|
|
17
30
|
exports.default = ProfileCard;
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { CardProps } from "@chakra-ui/react";
|
|
3
2
|
export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
|
|
4
|
-
|
|
5
|
-
footer?: React.ReactNode;
|
|
6
|
-
children: React.ReactNode;
|
|
3
|
+
children: any;
|
|
7
4
|
variant?: "elevated" | "outlein" | "filled" | "unstyled";
|
|
8
5
|
size?: "sm" | "md" | "lg";
|
|
9
6
|
color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
|
|
10
7
|
key?: string;
|
|
11
|
-
dividercolor?:
|
|
8
|
+
dividercolor?: string;
|
|
12
9
|
dividersize?: string;
|
|
13
|
-
dividervariant?: "solid" | "dashed";
|
|
10
|
+
dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
|
|
14
11
|
};
|
|
@@ -10,18 +10,39 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
-
var
|
|
14
|
-
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
15
35
|
};
|
|
16
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
var react_1 =
|
|
37
|
+
var react_1 = __importStar(require("react"));
|
|
18
38
|
var react_2 = require("@chakra-ui/react");
|
|
19
|
-
var
|
|
20
|
-
var
|
|
39
|
+
var icons_1 = require("@chakra-ui/icons");
|
|
40
|
+
var fi_1 = require("react-icons/fi");
|
|
41
|
+
var fa_1 = require("react-icons/fa");
|
|
21
42
|
function ProfilePhotoViewer(_a) {
|
|
22
|
-
var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView,
|
|
23
|
-
var
|
|
24
|
-
var fileInputRef = (0,
|
|
43
|
+
var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
|
|
44
|
+
var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
|
|
45
|
+
var fileInputRef = (0, react_1.useRef)(null);
|
|
25
46
|
var handlePhotoChange = function (event) {
|
|
26
47
|
var _a;
|
|
27
48
|
if (!isEditable)
|
|
@@ -43,13 +64,16 @@ function ProfilePhotoViewer(_a) {
|
|
|
43
64
|
return;
|
|
44
65
|
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
45
66
|
};
|
|
67
|
+
var isPdf = photo.endsWith(".pdf") || true;
|
|
46
68
|
return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, sx: {
|
|
47
69
|
"&:hover .icon-button": {
|
|
48
70
|
opacity: 1,
|
|
49
71
|
},
|
|
50
72
|
} },
|
|
51
|
-
photo ? (react_1.default.createElement(react_2.
|
|
52
|
-
react_1.default.createElement(
|
|
73
|
+
photo ? (isPdf ? (react_1.default.createElement(react_2.Box, { width: imageWidth, height: imageWidth, borderRadius: imageBorderRadius, bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
|
|
74
|
+
react_1.default.createElement(fa_1.FaFilePdf, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
|
|
75
|
+
react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold" }, fallbackText))) : (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
|
|
76
|
+
react_1.default.createElement(fi_1.FiUser, { size: "50%" }))),
|
|
53
77
|
(isEditable || isView) && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
54
78
|
react_1.default.createElement(react_2.Box, { className: "icon-button", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-25%, -25%)", sx: {
|
|
55
79
|
opacity: 0,
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
+
}
|
|
12
|
+
Object.defineProperty(o, k2, desc);
|
|
13
|
+
}) : (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
o[k2] = m[k];
|
|
16
|
+
}));
|
|
17
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
+
}) : function(o, v) {
|
|
20
|
+
o["default"] = v;
|
|
21
|
+
});
|
|
22
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
+
if (mod && mod.__esModule) return mod;
|
|
24
|
+
var result = {};
|
|
25
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
+
__setModuleDefault(result, mod);
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
30
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
31
|
+
};
|
|
32
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
|
+
var react_1 = __importStar(require("react"));
|
|
34
|
+
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
35
|
+
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
36
|
+
var Input = styled_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n border-color: #3182ce;\n }\n &:focus-visible,\n &:focus {\n border-color: #3182ce;\n // box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\n outline: none;\n }\n"], ["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n border-color: #3182ce;\n }\n &:focus-visible,\n &:focus {\n border-color: #3182ce;\n // box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\n outline: none;\n }\n"])));
|
|
37
|
+
var Dropdown = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n max-height: 150px;\n overflow-y: auto;\n z-index: 1000;\n max-width: 50%;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n max-height: 150px;\n overflow-y: auto;\n z-index: 1000;\n max-width: 50%;\n"])));
|
|
38
|
+
var Option = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 8px;\n cursor: pointer;\n &:hover {\n background: #3182ce24;\n }\n"], ["\n padding: 8px;\n cursor: pointer;\n &:hover {\n background: #3182ce24;\n }\n"])));
|
|
39
|
+
var NoOptions = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 8px;\n color: #999;\n"], ["\n padding: 8px;\n color: #999;\n"])));
|
|
40
|
+
function SelectSearch(_a) {
|
|
41
|
+
var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect;
|
|
42
|
+
var _c = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _c[0], setInputValue = _c[1];
|
|
43
|
+
var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
|
|
44
|
+
// const [selectedOption, setSelectedOption] =
|
|
45
|
+
// useState<MultiSelctOPtions | null>(initialSelectedOption);
|
|
46
|
+
var inputRef = (0, react_1.useRef)(null);
|
|
47
|
+
var dropdownRef = (0, react_1.useRef)(null);
|
|
48
|
+
var filteredOptions = options.filter(function (option) {
|
|
49
|
+
return option.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
50
|
+
});
|
|
51
|
+
var handleOptionClick = function (option) {
|
|
52
|
+
// setSelectedOption(option);
|
|
53
|
+
setInputValue(option.label);
|
|
54
|
+
setIsOpen(false);
|
|
55
|
+
onOptionSelect(option);
|
|
56
|
+
};
|
|
57
|
+
var handleInputChange = function (e) {
|
|
58
|
+
setInputValue(e.target.value);
|
|
59
|
+
setIsOpen(true);
|
|
60
|
+
};
|
|
61
|
+
var handleKeyDown = function (e) {
|
|
62
|
+
if (e.key === "Enter") {
|
|
63
|
+
var matchingOption = options.find(function (option) { return option.label.toLowerCase() === inputValue.toLowerCase(); });
|
|
64
|
+
if (matchingOption) {
|
|
65
|
+
handleOptionClick(matchingOption);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
(0, react_1.useEffect)(function () {
|
|
70
|
+
var handleClickOutside = function (event) {
|
|
71
|
+
if (inputRef.current &&
|
|
72
|
+
dropdownRef.current &&
|
|
73
|
+
!inputRef.current.contains(event.target) &&
|
|
74
|
+
!dropdownRef.current.contains(event.target)) {
|
|
75
|
+
setIsOpen(false);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
79
|
+
return function () {
|
|
80
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
81
|
+
};
|
|
82
|
+
}, []);
|
|
83
|
+
return (react_1.default.createElement(Container, null,
|
|
84
|
+
react_1.default.createElement(Input, { ref: inputRef, value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: handleInputChange, placeholder: "Select option", onKeyDown: handleKeyDown, id: "select-search", type: "text" }),
|
|
85
|
+
isOpen && (react_1.default.createElement(Dropdown, { ref: dropdownRef }, filteredOptions.length > 0 ? (filteredOptions.map(function (option) { return (react_1.default.createElement(Option, { key: option.id, onClick: function () { return handleOptionClick(option); } }, option.label)); })) : (react_1.default.createElement(NoOptions, null, "No options found"))))));
|
|
86
|
+
}
|
|
87
|
+
exports.default = SelectSearch;
|
|
88
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export type SelectSearchProps = {
|
|
2
|
+
options: MultiSelectOptions[];
|
|
3
|
+
isSearchEnabled?: boolean;
|
|
4
|
+
initialSelectedOption?: MultiSelectOptions | null;
|
|
5
|
+
onOptionSelect: (option: MultiSelectOptions) => void;
|
|
6
|
+
};
|
|
7
|
+
export type MultiSelectOptions = {
|
|
8
|
+
id: string;
|
|
9
|
+
label: string;
|
|
10
|
+
};
|
|
@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
var react_1 = __importDefault(require("react"));
|
|
11
11
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
12
12
|
var fa_1 = require("react-icons/fa");
|
|
13
|
+
var react_2 = require("@chakra-ui/react");
|
|
13
14
|
var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"])));
|
|
14
15
|
var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"])));
|
|
15
16
|
var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"])), function (_a) {
|
|
@@ -38,23 +39,26 @@ var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTem
|
|
|
38
39
|
// `;
|
|
39
40
|
var EventContent = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n // margin-left: 24px;\n"], ["\n // margin-left: 24px;\n"])));
|
|
40
41
|
var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
// const EventDescription = styled.p`
|
|
43
|
+
// margin: 0;
|
|
44
|
+
// `;
|
|
45
|
+
var EventDate = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"], ["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"])));
|
|
46
|
+
var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"], ["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"])), function (_a) {
|
|
44
47
|
var isLeft = _a.isLeft;
|
|
45
48
|
return (isLeft ? "38% " : "53%");
|
|
46
49
|
});
|
|
47
|
-
var EventGroupDate = styled_1.default.div(
|
|
48
|
-
var EventGroupSeparator = styled_1.default.div(
|
|
49
|
-
var EventGroupHeader = styled_1.default.div(
|
|
50
|
+
var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"], ["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"])));
|
|
51
|
+
var EventGroupSeparator = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
52
|
+
var EventGroupHeader = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: relative;\n margin-bottom: 24px;\n"], ["\n position: relative;\n margin-bottom: 24px;\n"])));
|
|
53
|
+
// const FlexContainer = styled.div`
|
|
54
|
+
// display: flex;
|
|
55
|
+
// align-items: center;
|
|
56
|
+
// `;
|
|
50
57
|
var Timeline = function (_a) {
|
|
51
58
|
var timelineEvents = _a.timelineEvents;
|
|
52
59
|
var formatTimestamp = function (timestamp, type) {
|
|
53
|
-
// console.log("Raw timestamp:", timestamp);
|
|
54
60
|
var parsedTimestamp = parseInt(timestamp, 10);
|
|
55
|
-
// console.log("Parsed timestamp:", parsedTimestamp);
|
|
56
61
|
var date = new Date(parsedTimestamp);
|
|
57
|
-
// console.log("Date object:", date);
|
|
58
62
|
if (isNaN(date.getTime())) {
|
|
59
63
|
return "Invalid Date";
|
|
60
64
|
}
|
|
@@ -115,7 +119,26 @@ var Timeline = function (_a) {
|
|
|
115
119
|
}, {});
|
|
116
120
|
};
|
|
117
121
|
var groupedEvents = groupEventsByDate(timelineEvents);
|
|
118
|
-
|
|
122
|
+
var formatChanges = function (changes) {
|
|
123
|
+
if (changes === null) {
|
|
124
|
+
return "No Changes";
|
|
125
|
+
}
|
|
126
|
+
var result = Object.entries(JSON.parse(changes))
|
|
127
|
+
.map(function (_a) {
|
|
128
|
+
var key = _a[0], value = _a[1];
|
|
129
|
+
var changeRecord = value;
|
|
130
|
+
if (changeRecord.original === null ||
|
|
131
|
+
changeRecord.original === undefined) {
|
|
132
|
+
return "".concat(key, " changed from null to ").concat(changeRecord.updated);
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
return "".concat(key, " updated to ").concat(changeRecord.updated);
|
|
136
|
+
}
|
|
137
|
+
})
|
|
138
|
+
.join("\n");
|
|
139
|
+
return result;
|
|
140
|
+
};
|
|
141
|
+
// console.log("groupedEvents", groupedEvents);
|
|
119
142
|
return (react_1.default.createElement(TimelineContainer, null,
|
|
120
143
|
react_1.default.createElement(Line, null),
|
|
121
144
|
Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(EventGroupSeparator, { key: date },
|
|
@@ -126,12 +149,18 @@ var Timeline = function (_a) {
|
|
|
126
149
|
react_1.default.createElement(EventTime, { isLeft: index % 2 === 0 }, formatTimestamp(event.created_at, "time")),
|
|
127
150
|
react_1.default.createElement(Event, null,
|
|
128
151
|
react_1.default.createElement(EventContent, null,
|
|
129
|
-
react_1.default.createElement(
|
|
130
|
-
|
|
152
|
+
react_1.default.createElement("div", { style: {
|
|
153
|
+
display: "flex",
|
|
154
|
+
alignItems: "center",
|
|
155
|
+
justifyContent: index % 2 === 0 ? "flex-start" : "flex-end",
|
|
156
|
+
} },
|
|
157
|
+
react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
|
|
158
|
+
react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), shouldWrapChildren: true, placement: "top", hasArrow: true },
|
|
159
|
+
react_1.default.createElement(fa_1.FaInfoCircle, { style: { marginLeft: "5px" } }))),
|
|
131
160
|
react_1.default.createElement(EventDate, null, " by " +
|
|
132
161
|
event.action_by +
|
|
133
162
|
" " +
|
|
134
163
|
formatTimestamp(event.created_at, "date")))))); }))); })));
|
|
135
164
|
};
|
|
136
165
|
exports.default = Timeline;
|
|
137
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12
|
|
166
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
package/dist/Layout.js
CHANGED
|
@@ -72,6 +72,7 @@ var MultiSelect_1 = __importDefault(require("./Components/MultiSelect/MultiSelec
|
|
|
72
72
|
var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker"));
|
|
73
73
|
var Search_1 = __importDefault(require("./Components/Search/Search"));
|
|
74
74
|
var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));
|
|
75
|
+
var SelectSearch_1 = __importDefault(require("./Components/SelectSearch/SelectSearch"));
|
|
75
76
|
var Layout = function () {
|
|
76
77
|
var navmenus = [
|
|
77
78
|
{ title: "Account Settings", url: "myaccount" },
|
|
@@ -370,12 +371,23 @@ var Layout = function () {
|
|
|
370
371
|
action_from: "Notes",
|
|
371
372
|
action_by: "pixelize technology",
|
|
372
373
|
created_at: 1723202829694,
|
|
373
|
-
changes: null,
|
|
374
|
+
changes: '{"shipping_code":{"original":null,"updated":"aaa"},"shipping_country":{"original":null,"updated":"QQdd"},"description":{"original":null,"updated":"ssAA"},"profile":{"updated":"profile updated"}}',
|
|
374
375
|
},
|
|
375
376
|
];
|
|
376
377
|
// const handleTimelineChange = (event: any, index: number) => {
|
|
377
378
|
// console.log("Event clicked:", event, "at index:", index);
|
|
378
379
|
// };
|
|
380
|
+
var _p = (0, react_2.useState)(true), isModelLoading = _p[0], setIsModelLoading = _p[1];
|
|
381
|
+
(0, react_2.useEffect)(function () {
|
|
382
|
+
var timer = setTimeout(function () {
|
|
383
|
+
setIsModelLoading(false);
|
|
384
|
+
}, 5000);
|
|
385
|
+
// Cleanup the timer on component unmount
|
|
386
|
+
return function () { return clearTimeout(timer); };
|
|
387
|
+
}, []);
|
|
388
|
+
var handleSelectClick = function (option) {
|
|
389
|
+
console.log("Selected option:", option);
|
|
390
|
+
};
|
|
379
391
|
return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
|
|
380
392
|
react_2.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
|
|
381
393
|
react_2.default.createElement(react_1.Flex, null,
|
|
@@ -407,7 +419,9 @@ var Layout = function () {
|
|
|
407
419
|
} }),
|
|
408
420
|
react_2.default.createElement("br", null),
|
|
409
421
|
react_2.default.createElement("br", null),
|
|
410
|
-
react_2.default.createElement(Button_1.default, { label: "TestButton", onClick: function () {
|
|
422
|
+
react_2.default.createElement(Button_1.default, { label: "TestButton", onClick: function () {
|
|
423
|
+
console.log("hello");
|
|
424
|
+
}, variant: "solid", color: "blue", size: "md", width: 100, type: "submit" }),
|
|
411
425
|
react_2.default.createElement("br", null),
|
|
412
426
|
react_2.default.createElement("br", null),
|
|
413
427
|
react_2.default.createElement(Button_1.default, { label: "Tosterbutton", onClick: handleOnclick, variant: "solid", color: "blue", size: "md", width: 100 }),
|
|
@@ -418,7 +432,10 @@ var Layout = function () {
|
|
|
418
432
|
react_2.default.createElement("br", null),
|
|
419
433
|
react_2.default.createElement(Button_1.default, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid", color: "blue" }),
|
|
420
434
|
react_2.default.createElement("br", null),
|
|
421
|
-
react_2.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); },
|
|
435
|
+
react_2.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); },
|
|
436
|
+
// overlaybg={"blackAlpha.300"}
|
|
437
|
+
// overlaybackdropFilter={"blur(10px) hue-rotate(90deg)"}
|
|
438
|
+
size: "sm", isCentered: true, isLoading: isModelLoading },
|
|
422
439
|
react_2.default.createElement("header", null, "hai"),
|
|
423
440
|
react_2.default.createElement("body", null, "heelo"),
|
|
424
441
|
react_2.default.createElement("footer", null, "welcome")),
|
|
@@ -460,8 +477,12 @@ var Layout = function () {
|
|
|
460
477
|
react_2.default.createElement(PinInput_1.default, { pins: 5, label: "Enter pin" }),
|
|
461
478
|
react_2.default.createElement("br", null),
|
|
462
479
|
react_2.default.createElement("br", null),
|
|
463
|
-
react_2.default.createElement(ProfileCard_1.default, { align: "center",
|
|
464
|
-
react_2.default.createElement(
|
|
480
|
+
react_2.default.createElement(ProfileCard_1.default, { align: "center", dividercolor: "red" },
|
|
481
|
+
react_2.default.createElement("header", null, "Customer dashboard"),
|
|
482
|
+
react_2.default.createElement("body", null,
|
|
483
|
+
react_2.default.createElement(react_1.Text, null, "View a summary of all your customers over the last month.")),
|
|
484
|
+
react_2.default.createElement("footer", null,
|
|
485
|
+
react_2.default.createElement(react_1.Button, { colorScheme: "blue" }, "View here"))),
|
|
465
486
|
react_2.default.createElement("br", null),
|
|
466
487
|
react_2.default.createElement("br", null),
|
|
467
488
|
react_2.default.createElement(Card_1.default, null,
|
|
@@ -502,10 +523,20 @@ var Layout = function () {
|
|
|
502
523
|
titleStyle: { color: "#00E396" } }))),
|
|
503
524
|
react_2.default.createElement("br", null),
|
|
504
525
|
react_2.default.createElement(ProfilePhotoViewer_1.default
|
|
505
|
-
//photoUrl="
|
|
526
|
+
// photoUrl=""
|
|
527
|
+
// photoUrl={
|
|
528
|
+
// "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" ??
|
|
529
|
+
// "https://bit.ly/dan-abramov"
|
|
530
|
+
// }
|
|
531
|
+
// photoUrl={"https://morth.nic.in/sites/default/files/dd12-13_0.pdf"}
|
|
506
532
|
, {
|
|
507
|
-
//photoUrl="
|
|
508
|
-
photoUrl
|
|
533
|
+
// photoUrl=""
|
|
534
|
+
// photoUrl={
|
|
535
|
+
// "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" ??
|
|
536
|
+
// "https://bit.ly/dan-abramov"
|
|
537
|
+
// }
|
|
538
|
+
// photoUrl={"https://morth.nic.in/sites/default/files/dd12-13_0.pdf"}
|
|
539
|
+
photoUrl: "https://docs.google.com/file/d/0B2qlP_VOf718Q3BPaGd0czhmZjg/edit?resourcekey=0-NnzZa3RIV8dL44Tv4mjZng", onPhotoChange: function (file) { return console.log(file); }, isEditable: true, isView: true, fallbackText: "" }),
|
|
509
540
|
react_2.default.createElement("br", null),
|
|
510
541
|
react_2.default.createElement(Switch_1.default, { leftText: "Overview", rightText: "Timeline", switchActive: switchActive, onSwitchToggle: handleSwitchToggle }),
|
|
511
542
|
react_2.default.createElement("br", null),
|
|
@@ -556,6 +587,26 @@ var Layout = function () {
|
|
|
556
587
|
react_2.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery }),
|
|
557
588
|
react_2.default.createElement("br", null),
|
|
558
589
|
react_2.default.createElement("br", null),
|
|
559
|
-
react_2.default.createElement(Timeline_1.default, { timelineEvents: timeline })
|
|
590
|
+
react_2.default.createElement(Timeline_1.default, { timelineEvents: timeline }),
|
|
591
|
+
react_2.default.createElement("br", null),
|
|
592
|
+
react_2.default.createElement("br", null),
|
|
593
|
+
react_2.default.createElement("br", null),
|
|
594
|
+
react_2.default.createElement("br", null),
|
|
595
|
+
react_2.default.createElement(SelectSearch_1.default, { options: [
|
|
596
|
+
{ id: "1", label: "Option 1" },
|
|
597
|
+
{ id: "2", label: "select 2" },
|
|
598
|
+
{
|
|
599
|
+
id: "3",
|
|
600
|
+
label: "clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3",
|
|
601
|
+
},
|
|
602
|
+
], initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: handleSelectClick }),
|
|
603
|
+
react_2.default.createElement("br", null),
|
|
604
|
+
react_2.default.createElement("br", null),
|
|
605
|
+
react_2.default.createElement("br", null),
|
|
606
|
+
react_2.default.createElement("br", null),
|
|
607
|
+
react_2.default.createElement("br", null),
|
|
608
|
+
react_2.default.createElement("br", null),
|
|
609
|
+
react_2.default.createElement("br", null),
|
|
610
|
+
react_2.default.createElement("br", null))))));
|
|
560
611
|
};
|
|
561
612
|
exports.default = Layout;
|
package/dist/index.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ import ProgressBar from "./Components/ProgressBar/ProgressBar";
|
|
|
23
23
|
import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioButton";
|
|
24
24
|
import Search from "./Components/Search/Search";
|
|
25
25
|
import Select from "./Components/Select/Select";
|
|
26
|
+
import SelectSearch from "./Components/SelectSearch/SelectSearch";
|
|
26
27
|
import SideBar from "./Components/SideBar/SideBar";
|
|
27
28
|
import Skeletons from "./Components/Skeletons/Skeletons";
|
|
28
29
|
import Switch from "./Components/Switch/Switch";
|
|
@@ -32,4 +33,4 @@ import Timeline from "./Components/Timeline/Timeline";
|
|
|
32
33
|
import Toaster, { useToaster } from "./Components/Toaster/Toaster";
|
|
33
34
|
import ToolTip from "./Components/ToolTip/ToolTip";
|
|
34
35
|
import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
|
|
35
|
-
export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
|
|
36
|
+
export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
|
package/dist/index.js
CHANGED
|
@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
|
|
30
|
+
exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
|
|
31
31
|
var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
|
|
32
32
|
exports.ApexBarChart = ApexBarChart_1.default;
|
|
33
33
|
var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
|
|
@@ -79,6 +79,8 @@ var Search_1 = __importDefault(require("./Components/Search/Search"));
|
|
|
79
79
|
exports.Search = Search_1.default;
|
|
80
80
|
var Select_1 = __importDefault(require("./Components/Select/Select"));
|
|
81
81
|
exports.Select = Select_1.default;
|
|
82
|
+
var SelectSearch_1 = __importDefault(require("./Components/SelectSearch/SelectSearch"));
|
|
83
|
+
exports.SelectSearch = SelectSearch_1.default;
|
|
82
84
|
var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
|
|
83
85
|
exports.SideBar = SideBar_1.default;
|
|
84
86
|
var Skeletons_1 = __importDefault(require("./Components/Skeletons/Skeletons"));
|
package/package.json
CHANGED
package/dist/.dev-server.zip
DELETED
|
Binary file
|
package/dist/@mf-types.d.ts
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
export type RemoteKeys = 'REMOTE_ALIAS_IDENTIFIER/Version' | 'REMOTE_ALIAS_IDENTIFIER/TextInput' | 'REMOTE_ALIAS_IDENTIFIER/InputTextArea' | 'REMOTE_ALIAS_IDENTIFIER/Select' | 'REMOTE_ALIAS_IDENTIFIER/Checkbox' | 'REMOTE_ALIAS_IDENTIFIER/Button' | 'REMOTE_ALIAS_IDENTIFIER/Toaster' | 'REMOTE_ALIAS_IDENTIFIER/Modal' | 'REMOTE_ALIAS_IDENTIFIER/theme' | 'REMOTE_ALIAS_IDENTIFIER/Sidebar' | 'REMOTE_ALIAS_IDENTIFIER/Navbar' | 'REMOTE_ALIAS_IDENTIFIER/Loading' | 'REMOTE_ALIAS_IDENTIFIER/Skeletons' | 'REMOTE_ALIAS_IDENTIFIER/RadioButton' | 'REMOTE_ALIAS_IDENTIFIER/ButtonGroupIcon' | 'REMOTE_ALIAS_IDENTIFIER/ProgressBar' | 'REMOTE_ALIAS_IDENTIFIER/NumberInput' | 'REMOTE_ALIAS_IDENTIFIER/PinInput' | 'REMOTE_ALIAS_IDENTIFIER/ProfileCard' | 'REMOTE_ALIAS_IDENTIFIER/Breadcrumb' | 'REMOTE_ALIAS_IDENTIFIER/TableComponent' | 'REMOTE_ALIAS_IDENTIFIER/Tooltip' | 'REMOTE_ALIAS_IDENTIFIER/ApexBarChart' | 'REMOTE_ALIAS_IDENTIFIER/ApexPieChart' | 'REMOTE_ALIAS_IDENTIFIER/ProfilePhotoViewer';
|
|
3
|
-
type PackageType<T> = T extends 'REMOTE_ALIAS_IDENTIFIER/ProfilePhotoViewer' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ProfilePhotoViewer') :T extends 'REMOTE_ALIAS_IDENTIFIER/ApexPieChart' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ApexPieChart') :T extends 'REMOTE_ALIAS_IDENTIFIER/ApexBarChart' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ApexBarChart') :T extends 'REMOTE_ALIAS_IDENTIFIER/Tooltip' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Tooltip') :T extends 'REMOTE_ALIAS_IDENTIFIER/TableComponent' ? typeof import('REMOTE_ALIAS_IDENTIFIER/TableComponent') :T extends 'REMOTE_ALIAS_IDENTIFIER/Breadcrumb' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Breadcrumb') :T extends 'REMOTE_ALIAS_IDENTIFIER/ProfileCard' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ProfileCard') :T extends 'REMOTE_ALIAS_IDENTIFIER/PinInput' ? typeof import('REMOTE_ALIAS_IDENTIFIER/PinInput') :T extends 'REMOTE_ALIAS_IDENTIFIER/NumberInput' ? typeof import('REMOTE_ALIAS_IDENTIFIER/NumberInput') :T extends 'REMOTE_ALIAS_IDENTIFIER/ProgressBar' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ProgressBar') :T extends 'REMOTE_ALIAS_IDENTIFIER/ButtonGroupIcon' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ButtonGroupIcon') :T extends 'REMOTE_ALIAS_IDENTIFIER/RadioButton' ? typeof import('REMOTE_ALIAS_IDENTIFIER/RadioButton') :T extends 'REMOTE_ALIAS_IDENTIFIER/Skeletons' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Skeletons') :T extends 'REMOTE_ALIAS_IDENTIFIER/Loading' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Loading') :T extends 'REMOTE_ALIAS_IDENTIFIER/Navbar' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Navbar') :T extends 'REMOTE_ALIAS_IDENTIFIER/Sidebar' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Sidebar') :T extends 'REMOTE_ALIAS_IDENTIFIER/theme' ? typeof import('REMOTE_ALIAS_IDENTIFIER/theme') :T extends 'REMOTE_ALIAS_IDENTIFIER/Modal' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Modal') :T extends 'REMOTE_ALIAS_IDENTIFIER/Toaster' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Toaster') :T extends 'REMOTE_ALIAS_IDENTIFIER/Button' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Button') :T extends 'REMOTE_ALIAS_IDENTIFIER/Checkbox' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Checkbox') :T extends 'REMOTE_ALIAS_IDENTIFIER/Select' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Select') :T extends 'REMOTE_ALIAS_IDENTIFIER/InputTextArea' ? typeof import('REMOTE_ALIAS_IDENTIFIER/InputTextArea') :T extends 'REMOTE_ALIAS_IDENTIFIER/TextInput' ? typeof import('REMOTE_ALIAS_IDENTIFIER/TextInput') :T extends 'REMOTE_ALIAS_IDENTIFIER/Version' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Version') :any;
|
package/dist/@mf-types.zip
DELETED
|
Binary file
|