pixelize-design-library 2.3.1-beta.16 → 2.3.1-beta.18
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/.claude/settings.local.json +3 -1
- package/dist/Components/Dropdown/DropDown.js +80 -28
- package/dist/Components/Dropdown/DropdownProps.d.ts +4 -1
- package/dist/Components/OrganizationDetails/CreateOrgModal.d.ts +4 -0
- package/dist/Components/OrganizationDetails/CreateOrgModal.js +122 -0
- package/dist/Components/OrganizationDetails/DeleteOrgModal.d.ts +4 -0
- package/dist/Components/OrganizationDetails/DeleteOrgModal.js +29 -0
- package/dist/Components/OrganizationDetails/OrganizationDetails.d.ts +4 -0
- package/dist/Components/OrganizationDetails/OrganizationDetails.js +264 -0
- package/dist/Components/OrganizationDetails/OrganizationDetails.test.d.ts +1 -0
- package/dist/Components/OrganizationDetails/OrganizationDetails.test.js +122 -0
- package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts +88 -0
- package/dist/Components/OrganizationDetails/OrganizationDetailsProps.js +2 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +4 -2
- package/package.json +1 -1
|
@@ -39,7 +39,9 @@
|
|
|
39
39
|
"Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
|
|
40
40
|
"Bash(./node_modules/.bin/tsc --noEmit)",
|
|
41
41
|
"Bash(echo \"tsc exit: $?\")",
|
|
42
|
-
"Bash(echo \"local tsc exit: $?\")"
|
|
42
|
+
"Bash(echo \"local tsc exit: $?\")",
|
|
43
|
+
"Bash(ls -la src/pages/Tasks/TaskComponent/)",
|
|
44
|
+
"Bash(wc -l src/pages/Tasks/TaskComponent/*.tsx)"
|
|
43
45
|
],
|
|
44
46
|
"additionalDirectories": [
|
|
45
47
|
"/private/tmp",
|
|
@@ -50,58 +50,110 @@ var framer_motion_1 = require("framer-motion");
|
|
|
50
50
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
51
51
|
var lucide_react_1 = require("lucide-react");
|
|
52
52
|
var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
|
|
53
|
+
// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
|
|
54
|
+
var SIZE_MAP = {
|
|
55
|
+
xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
|
|
56
|
+
sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
|
|
57
|
+
md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
|
|
58
|
+
lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
|
|
59
|
+
xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
|
|
60
|
+
};
|
|
53
61
|
var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
|
|
54
|
-
var
|
|
62
|
+
var _b, _c;
|
|
63
|
+
var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _d = _a.dropdownType, dropdownType = _d === void 0 ? "button" : _d, text = _a.text, DropdownIcon = _a.DropdownIcon, _e = _a.isVisibleIconShow, isVisibleIconShow = _e === void 0 ? true : _e, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, size = _a.size, optionsSize = _a.optionsSize, _f = _a.divider, divider = _f === void 0 ? false : _f;
|
|
55
64
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
56
|
-
var
|
|
65
|
+
var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onToggle = _g.onToggle, onClose = _g.onClose;
|
|
57
66
|
var dropdownRef = (0, react_1.useRef)(null);
|
|
67
|
+
var menuRef = (0, react_1.useRef)(null);
|
|
68
|
+
var _h = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), menuPos = _h[0], setMenuPos = _h[1];
|
|
69
|
+
var s = (_c = SIZE_MAP[(_b = size !== null && size !== void 0 ? size : optionsSize) !== null && _b !== void 0 ? _b : "md"]) !== null && _c !== void 0 ? _c : SIZE_MAP.md;
|
|
58
70
|
var handleListItemClick = function (optionId, optionLabel) {
|
|
59
71
|
onClose();
|
|
60
72
|
handleOptionSelect(optionId, optionLabel);
|
|
61
73
|
};
|
|
74
|
+
// The menu is portaled to <body> (so it sits above everything). Anchor it to
|
|
75
|
+
// the trigger and keep it anchored while the page/ancestors scroll or resize.
|
|
76
|
+
var updateMenuPos = (0, react_1.useCallback)(function () {
|
|
77
|
+
if (!dropdownRef.current)
|
|
78
|
+
return;
|
|
79
|
+
var r = dropdownRef.current.getBoundingClientRect();
|
|
80
|
+
setMenuPos({ top: r.bottom, left: r.left, width: r.width });
|
|
81
|
+
}, []);
|
|
82
|
+
(0, react_1.useEffect)(function () {
|
|
83
|
+
if (!isOpen)
|
|
84
|
+
return;
|
|
85
|
+
updateMenuPos();
|
|
86
|
+
window.addEventListener("scroll", updateMenuPos, true);
|
|
87
|
+
window.addEventListener("resize", updateMenuPos);
|
|
88
|
+
return function () {
|
|
89
|
+
window.removeEventListener("scroll", updateMenuPos, true);
|
|
90
|
+
window.removeEventListener("resize", updateMenuPos);
|
|
91
|
+
};
|
|
92
|
+
}, [isOpen, updateMenuPos]);
|
|
62
93
|
(0, react_1.useEffect)(function () {
|
|
63
94
|
var handleClickOutside = function (event) {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
95
|
+
var _a, _b;
|
|
96
|
+
var target = event.target;
|
|
97
|
+
// Ignore clicks on the trigger or inside the (portaled) menu.
|
|
98
|
+
if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
|
|
99
|
+
return;
|
|
100
|
+
if ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
|
|
101
|
+
return;
|
|
102
|
+
onClose();
|
|
68
103
|
};
|
|
69
104
|
document.addEventListener("mousedown", handleClickOutside);
|
|
70
105
|
return function () {
|
|
71
106
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
72
107
|
};
|
|
73
|
-
}, [
|
|
108
|
+
}, [onClose]);
|
|
109
|
+
var setMenuRef = function (node) {
|
|
110
|
+
menuRef.current = node;
|
|
111
|
+
if (typeof ref === "function")
|
|
112
|
+
ref(node);
|
|
113
|
+
else if (ref)
|
|
114
|
+
ref.current = node;
|
|
115
|
+
};
|
|
116
|
+
var Chevron = isVisibleIconShow ? (react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" },
|
|
117
|
+
react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevron }))) : undefined;
|
|
74
118
|
var dropDownToggleOption = function () {
|
|
75
|
-
var
|
|
76
|
-
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
119
|
+
var _a, _b, _c, _d;
|
|
120
|
+
var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, rightIcon: Chevron, sx: __assign({ transition: "all 0.15s ease" }, dropDownButtonStyle) }, buttonProps),
|
|
121
|
+
react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0 },
|
|
122
|
+
DropdownIcon,
|
|
123
|
+
ButtonText)));
|
|
124
|
+
var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen },
|
|
80
125
|
DropdownIcon,
|
|
81
|
-
" ",
|
|
82
126
|
text,
|
|
83
|
-
|
|
127
|
+
Chevron));
|
|
84
128
|
return dropdownType === "button" ? ButtonToggle : TextToggle;
|
|
85
129
|
};
|
|
86
130
|
var DropdownContentRender = function () {
|
|
87
|
-
var _a, _b, _c;
|
|
88
|
-
return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
"
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
131
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
132
|
+
return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_e = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]), borderRadius: "0.625rem", boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
|
|
133
|
+
scrollbarWidth: "thin",
|
|
134
|
+
scrollbarColor: "".concat((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[300], " transparent"),
|
|
135
|
+
"&::-webkit-scrollbar": { width: "6px" },
|
|
136
|
+
"&::-webkit-scrollbar-thumb": {
|
|
137
|
+
background: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[300],
|
|
138
|
+
borderRadius: "3px",
|
|
139
|
+
},
|
|
140
|
+
"&::-webkit-scrollbar-thumb:hover": { background: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[400] },
|
|
141
|
+
}, style: ListStyle }, options.map(function (option) {
|
|
142
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
143
|
+
return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
|
|
144
|
+
bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
|
|
145
|
+
color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
|
|
146
|
+
}, borderBottom: divider
|
|
147
|
+
? "0.063rem solid ".concat((_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.boxborder) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray[200])
|
|
148
|
+
: undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle },
|
|
149
|
+
(option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], style: ImageStyle })),
|
|
150
|
+
react_1.default.createElement(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, style: LabelStyle }, option.label)));
|
|
100
151
|
})));
|
|
101
152
|
};
|
|
102
153
|
return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
|
|
103
154
|
dropDownToggleOption(),
|
|
104
|
-
isOpen && (react_1.default.createElement(
|
|
155
|
+
isOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
156
|
+
react_1.default.createElement(MotionBox, { ref: setMenuRef, position: "fixed", top: "".concat(menuPos.top, "px"), left: "".concat(menuPos.left, "px"), minW: "".concat(menuPos.width, "px"), zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle }, DropdownContentRender())))));
|
|
105
157
|
});
|
|
106
158
|
Dropdown.displayName = "Dropdown";
|
|
107
159
|
exports.default = Dropdown;
|
|
@@ -14,7 +14,10 @@ export type DropdownProps = {
|
|
|
14
14
|
ItemStyle?: React.CSSProperties;
|
|
15
15
|
LabelStyle?: React.CSSProperties;
|
|
16
16
|
ImageStyle?: React.CSSProperties;
|
|
17
|
-
|
|
17
|
+
/** Overall size of the trigger + options (like Button sizes). */
|
|
18
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
19
|
+
/** @deprecated Use `size` instead. Kept for backward compatibility. */
|
|
20
|
+
optionsSize?: "sm" | "md" | "lg";
|
|
18
21
|
divider?: boolean;
|
|
19
22
|
};
|
|
20
23
|
type Option = {
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
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 () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
47
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
var react_1 = __importStar(require("react"));
|
|
51
|
+
var react_2 = require("@chakra-ui/react");
|
|
52
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
53
|
+
var Button_1 = __importDefault(require("../Button/Button"));
|
|
54
|
+
var TextInput_1 = __importDefault(require("../Input/TextInput"));
|
|
55
|
+
var EMPTY = {
|
|
56
|
+
company_name: "",
|
|
57
|
+
company_address: "",
|
|
58
|
+
phone: "",
|
|
59
|
+
};
|
|
60
|
+
var CreateOrgModal = function (_a) {
|
|
61
|
+
var _b, _c, _d;
|
|
62
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, isLoading = _a.isLoading, onSubmit = _a.onSubmit, labels = _a.labels;
|
|
63
|
+
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
64
|
+
var _e = (0, react_1.useState)(EMPTY), values = _e[0], setValues = _e[1];
|
|
65
|
+
var _f = (0, react_1.useState)({}), errors = _f[0], setErrors = _f[1];
|
|
66
|
+
(0, react_1.useEffect)(function () {
|
|
67
|
+
if (isOpen) {
|
|
68
|
+
setValues(EMPTY);
|
|
69
|
+
setErrors({});
|
|
70
|
+
}
|
|
71
|
+
}, [isOpen]);
|
|
72
|
+
var setField = function (key, value) {
|
|
73
|
+
setValues(function (prev) {
|
|
74
|
+
var _a;
|
|
75
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[key] = value, _a)));
|
|
76
|
+
});
|
|
77
|
+
if (errors[key])
|
|
78
|
+
setErrors(function (prev) {
|
|
79
|
+
var _a;
|
|
80
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[key] = undefined, _a)));
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
var validate = function () {
|
|
84
|
+
var next = {};
|
|
85
|
+
if (!values.company_name.trim())
|
|
86
|
+
next.company_name = labels.requiredField;
|
|
87
|
+
if (!values.company_address.trim())
|
|
88
|
+
next.company_address = labels.requiredField;
|
|
89
|
+
var digits = values.phone.replace(/\D/g, "");
|
|
90
|
+
if (!values.phone.trim()) {
|
|
91
|
+
next.phone = labels.requiredField;
|
|
92
|
+
}
|
|
93
|
+
else if (digits.length < 8) {
|
|
94
|
+
next.phone = labels.invalidPhone;
|
|
95
|
+
}
|
|
96
|
+
setErrors(next);
|
|
97
|
+
return Object.keys(next).length === 0;
|
|
98
|
+
};
|
|
99
|
+
var handleSubmit = function () {
|
|
100
|
+
if (!validate())
|
|
101
|
+
return;
|
|
102
|
+
onSubmit({
|
|
103
|
+
company_name: values.company_name.trim(),
|
|
104
|
+
company_address: values.company_address.trim(),
|
|
105
|
+
phone: values.phone.trim(),
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false },
|
|
109
|
+
react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
|
|
110
|
+
react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
|
|
111
|
+
react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600 }, labels.createOrganization),
|
|
112
|
+
react_1.default.createElement(react_2.ModalCloseButton, null),
|
|
113
|
+
react_1.default.createElement(react_2.ModalBody, { py: 6 },
|
|
114
|
+
react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
|
|
115
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: function (e) { return setField("company_name", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }),
|
|
116
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: function (e) { return setField("company_address", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }),
|
|
117
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: function (e) { return setField("phone", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })),
|
|
118
|
+
react_1.default.createElement(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6 },
|
|
119
|
+
react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }),
|
|
120
|
+
react_1.default.createElement(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading }))))));
|
|
121
|
+
};
|
|
122
|
+
exports.default = CreateOrgModal;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var react_2 = require("@chakra-ui/react");
|
|
8
|
+
var lucide_react_1 = require("lucide-react");
|
|
9
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
10
|
+
var Button_1 = __importDefault(require("../Button/Button"));
|
|
11
|
+
var DeleteOrgModal = function (_a) {
|
|
12
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
13
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, isLoading = _a.isLoading, onConfirm = _a.onConfirm, labels = _a.labels;
|
|
14
|
+
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
15
|
+
return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
|
|
16
|
+
react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
|
|
17
|
+
react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
|
|
18
|
+
react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3 },
|
|
19
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444" },
|
|
20
|
+
react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 })),
|
|
21
|
+
react_1.default.createElement(react_2.Text, { fontSize: "1.05rem", fontWeight: 600 }, labels.confirmDeletion)),
|
|
22
|
+
react_1.default.createElement(react_2.ModalCloseButton, null),
|
|
23
|
+
react_1.default.createElement(react_2.ModalBody, { py: 6 },
|
|
24
|
+
react_1.default.createElement(react_2.Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", mb: 5 }, labels.deleteConfirmText),
|
|
25
|
+
react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3 },
|
|
26
|
+
react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }),
|
|
27
|
+
react_1.default.createElement(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 15 }) }))))));
|
|
28
|
+
};
|
|
29
|
+
exports.default = DeleteOrgModal;
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
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 () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
47
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
48
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
49
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
50
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
51
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
52
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
56
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
57
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
58
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
59
|
+
function step(op) {
|
|
60
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
61
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
62
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
63
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
64
|
+
switch (op[0]) {
|
|
65
|
+
case 0: case 1: t = op; break;
|
|
66
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
67
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
68
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
69
|
+
default:
|
|
70
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
71
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
72
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
73
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
74
|
+
if (t[2]) _.ops.pop();
|
|
75
|
+
_.trys.pop(); continue;
|
|
76
|
+
}
|
|
77
|
+
op = body.call(thisArg, _);
|
|
78
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
79
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
83
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
84
|
+
};
|
|
85
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
86
|
+
var react_1 = __importStar(require("react"));
|
|
87
|
+
var react_2 = require("@chakra-ui/react");
|
|
88
|
+
var lucide_react_1 = require("lucide-react");
|
|
89
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
90
|
+
var Button_1 = __importDefault(require("../Button/Button"));
|
|
91
|
+
var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
|
|
92
|
+
var CreateOrgModal_1 = __importDefault(require("./CreateOrgModal"));
|
|
93
|
+
var DeleteOrgModal_1 = __importDefault(require("./DeleteOrgModal"));
|
|
94
|
+
var DEFAULT_LABELS = {
|
|
95
|
+
greeting: "Hello, User!",
|
|
96
|
+
manageSubtitle: "Manage your organizations",
|
|
97
|
+
organizationDetails: "Organization Details",
|
|
98
|
+
createNewOrganization: "Create New Organization",
|
|
99
|
+
createOrganization: "Create Organization",
|
|
100
|
+
activeOrganizations: "Active Organizations",
|
|
101
|
+
invitedOrganizations: "Invited Organizations",
|
|
102
|
+
setAsDefault: "Set as Default",
|
|
103
|
+
settingDefault: "Setting...",
|
|
104
|
+
default: "Default",
|
|
105
|
+
pending: "Pending",
|
|
106
|
+
accept: "Accept",
|
|
107
|
+
accepting: "Accepting...",
|
|
108
|
+
decline: "Decline",
|
|
109
|
+
deleteOrganization: "Delete Organization",
|
|
110
|
+
protectedOrganization: "Protected organization",
|
|
111
|
+
delete: "Delete",
|
|
112
|
+
noOrganizationsTitle: "No organizations found",
|
|
113
|
+
noOrganizationsDescription: "Get started by creating your first organization or wait for an invitation",
|
|
114
|
+
companyName: "Company Name",
|
|
115
|
+
companyAddress: "Company Address",
|
|
116
|
+
phone: "Phone",
|
|
117
|
+
cancel: "Cancel",
|
|
118
|
+
submit: "Submit",
|
|
119
|
+
requiredField: "This field is required",
|
|
120
|
+
invalidPhone: "Phone number must be at least 8 digits",
|
|
121
|
+
confirmDeletion: "Confirm Deletion",
|
|
122
|
+
deleteConfirmText: "Are you sure you want to delete this Organization?",
|
|
123
|
+
copyright: "Pixelize Corp. All rights reserved.",
|
|
124
|
+
termsOfService: "Terms of Service",
|
|
125
|
+
};
|
|
126
|
+
var OrganizationDetails = function (_a) {
|
|
127
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
128
|
+
var activeOrganizations = _a.activeOrganizations, invitedOrganizations = _a.invitedOrganizations, _0 = _a.isLoading, isLoading = _0 === void 0 ? false : _0, _1 = _a.switchingOrgIds, switchingOrgIds = _1 === void 0 ? [] : _1, _2 = _a.respondingOrgIds, respondingOrgIds = _2 === void 0 ? [] : _2, _3 = _a.isCreating, isCreating = _3 === void 0 ? false : _3, userName = _a.userName, userAvatarUrl = _a.userAvatarUrl, onSetDefault = _a.onSetDefault, onAcceptInvite = _a.onAcceptInvite, onDeclineInvite = _a.onDeclineInvite, onDeleteOrganization = _a.onDeleteOrganization, onCreateOrganization = _a.onCreateOrganization, onBack = _a.onBack, footerSlot = _a.footerSlot, labelOverrides = _a.labels;
|
|
129
|
+
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
130
|
+
var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
|
|
131
|
+
var _4 = (0, react_1.useState)(false), isCreateOpen = _4[0], setCreateOpen = _4[1];
|
|
132
|
+
var _5 = (0, react_1.useState)(null), deleteOrgId = _5[0], setDeleteOrgId = _5[1];
|
|
133
|
+
var border = (_e = (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : "#E2E8F0";
|
|
134
|
+
var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
|
|
135
|
+
var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
|
|
136
|
+
var subtle = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : "#475569";
|
|
137
|
+
var heading = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[800]) !== null && _m !== void 0 ? _m : "#1E293B";
|
|
138
|
+
var pageBg = (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#F8FAFC";
|
|
139
|
+
var primary50 = (_r = (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[50]) !== null && _r !== void 0 ? _r : "#EEF2FF";
|
|
140
|
+
var primary100 = (_t = (_s = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : "#E0E7FF";
|
|
141
|
+
var primary500 = (_v = (_u = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _u === void 0 ? void 0 : _u[500]) !== null && _v !== void 0 ? _v : "#6366F1";
|
|
142
|
+
var primary600 = (_x = (_w = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _w === void 0 ? void 0 : _w[600]) !== null && _x !== void 0 ? _x : "#4F46E5";
|
|
143
|
+
var cardSx = {
|
|
144
|
+
backgroundColor: surface,
|
|
145
|
+
borderRadius: "xl",
|
|
146
|
+
border: "1px solid",
|
|
147
|
+
borderColor: border,
|
|
148
|
+
boxShadow: "0 1px 2px rgba(16,24,40,0.05)",
|
|
149
|
+
};
|
|
150
|
+
var sectionBadge = function (count, scheme) { return (react_1.default.createElement(react_2.Badge, { colorScheme: scheme, variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem" }, count)); };
|
|
151
|
+
var renderActiveCard = function (item) {
|
|
152
|
+
var _a, _b, _c, _d, _e, _f;
|
|
153
|
+
var isSwitching = switchingOrgIds.includes(item.orgId);
|
|
154
|
+
var isProtected = item.defaultOrg === 1;
|
|
155
|
+
return (react_1.default.createElement(react_2.Box, __assign({ key: item.orgId }, cardSx, { p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
|
|
156
|
+
borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#A5B4FC",
|
|
157
|
+
boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
|
|
158
|
+
transform: "translateY(-3px)",
|
|
159
|
+
} }),
|
|
160
|
+
react_1.default.createElement(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2 },
|
|
161
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600 },
|
|
162
|
+
react_1.default.createElement(lucide_react_1.Building2, { size: 18 })),
|
|
163
|
+
react_1.default.createElement(react_2.Box, { mr: "2rem" }, item.default === 1 ? (react_1.default.createElement(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600 },
|
|
164
|
+
react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 12 }),
|
|
165
|
+
labels.default)) : isSwitching ? (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, color: primary500 },
|
|
166
|
+
react_1.default.createElement(react_2.Spinner, { size: "sm" }),
|
|
167
|
+
react_1.default.createElement(react_2.Text, { fontSize: "xs" }, labels.settingDefault))) : (react_1.default.createElement(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: function () { return onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId); } },
|
|
168
|
+
react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 12 }),
|
|
169
|
+
react_1.default.createElement(react_2.Text, null, labels.setAsDefault))))),
|
|
170
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1 }, item.company_name),
|
|
171
|
+
react_1.default.createElement(react_2.Tooltip, { label: isProtected ? labels.protectedOrganization : labels.deleteOrganization, hasArrow: true },
|
|
172
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": labels.deleteOrganization, icon: react_1.default.createElement(lucide_react_1.Trash2, { size: 14 }), size: "xs", variant: "ghost", position: "absolute", top: 2, right: 2, borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
|
|
173
|
+
bg: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.red) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#FEF2F2",
|
|
174
|
+
color: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600]) !== null && _f !== void 0 ? _f : "#DC2626",
|
|
175
|
+
}, onClick: function () { return setDeleteOrgId(item.orgId); } }))));
|
|
176
|
+
};
|
|
177
|
+
var renderInvitedCard = function (item) {
|
|
178
|
+
var _a, _b, _c, _d;
|
|
179
|
+
var isResponding = respondingOrgIds.includes(item.orgId);
|
|
180
|
+
return (react_1.default.createElement(react_2.Box, __assign({ key: item.orgId }, cardSx, { p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
|
|
181
|
+
boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
|
|
182
|
+
transform: "translateY(-3px)",
|
|
183
|
+
} }),
|
|
184
|
+
react_1.default.createElement(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2 },
|
|
185
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#FEF9C3", color: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#CA8A04" },
|
|
186
|
+
react_1.default.createElement(lucide_react_1.Building2, { size: 18 })),
|
|
187
|
+
react_1.default.createElement(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600 }, labels.pending)),
|
|
188
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1 }, item.company_name),
|
|
189
|
+
item.company_url && (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2 },
|
|
190
|
+
react_1.default.createElement(lucide_react_1.Globe, { size: 13 }),
|
|
191
|
+
react_1.default.createElement(react_2.Text, { noOfLines: 1, title: item.company_url }, item.company_url))),
|
|
192
|
+
react_1.default.createElement(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border },
|
|
193
|
+
react_1.default.createElement(react_2.Box, { flex: 1 },
|
|
194
|
+
react_1.default.createElement(Button_1.default, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: function () { return onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId); } })),
|
|
195
|
+
react_1.default.createElement(react_2.Box, { flex: 1 },
|
|
196
|
+
react_1.default.createElement(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: function () { return onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId); } })))));
|
|
197
|
+
};
|
|
198
|
+
var gridSx = {
|
|
199
|
+
display: "grid",
|
|
200
|
+
gridTemplateColumns: {
|
|
201
|
+
base: "1fr",
|
|
202
|
+
md: "repeat(2, 1fr)",
|
|
203
|
+
lg: "repeat(3, 1fr)",
|
|
204
|
+
},
|
|
205
|
+
gap: 3,
|
|
206
|
+
width: "100%",
|
|
207
|
+
};
|
|
208
|
+
var hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
|
|
209
|
+
return (react_1.default.createElement(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 } },
|
|
210
|
+
react_1.default.createElement(react_2.Flex, __assign({}, cardSx, { px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: "linear(135deg, ".concat(primary50, " 0%, ").concat(primary100, " 100%)") }),
|
|
211
|
+
react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: 3 },
|
|
212
|
+
onBack && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Go back", icon: react_1.default.createElement(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })),
|
|
213
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: "white" },
|
|
214
|
+
react_1.default.createElement(lucide_react_1.Building2, { size: 18 })),
|
|
215
|
+
react_1.default.createElement(react_2.Box, null,
|
|
216
|
+
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
217
|
+
react_1.default.createElement(react_2.Heading, { size: "sm", color: heading, fontWeight: 700 }, userName ? "".concat(labels.greeting.replace(/User!?/, "")).concat(userName, "!").trim() : labels.greeting),
|
|
218
|
+
react_1.default.createElement(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })),
|
|
219
|
+
react_1.default.createElement(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5 }, labels.manageSubtitle))),
|
|
220
|
+
react_1.default.createElement(Button_1.default, { label: labels.createNewOrganization, onClick: function () { return setCreateOpen(true); }, leftIcon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })),
|
|
221
|
+
isLoading ? (react_1.default.createElement(react_2.Box, __assign({}, gridSx), Array.from({ length: 6 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Box, __assign({ key: idx }, cardSx, { p: 3 }),
|
|
222
|
+
react_1.default.createElement(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }),
|
|
223
|
+
react_1.default.createElement(react_2.SkeletonText, { noOfLines: 2, spacing: 2 }))); }))) : !hasOrganizations ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: react_1.default.createElement(Button_1.default, { label: labels.createOrganization, onClick: function () { return setCreateOpen(true); }, leftIcon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 4 },
|
|
224
|
+
activeOrganizations.length > 0 && (react_1.default.createElement(react_2.Box, null,
|
|
225
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 2 },
|
|
226
|
+
react_1.default.createElement(lucide_react_1.Users, { size: 16, color: primary500 }),
|
|
227
|
+
react_1.default.createElement(react_2.Heading, { size: "sm", color: heading, fontWeight: 600 }, labels.activeOrganizations),
|
|
228
|
+
sectionBadge(activeOrganizations.length, "blue")),
|
|
229
|
+
react_1.default.createElement(react_2.Box, __assign({}, gridSx), activeOrganizations.map(renderActiveCard)))),
|
|
230
|
+
invitedOrganizations.length > 0 && (react_1.default.createElement(react_2.Box, null,
|
|
231
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 2 },
|
|
232
|
+
react_1.default.createElement(lucide_react_1.Mail, { size: 16, color: (_z = (_y = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _y === void 0 ? void 0 : _y[500]) !== null && _z !== void 0 ? _z : "#EAB308" }),
|
|
233
|
+
react_1.default.createElement(react_2.Heading, { size: "sm", color: heading, fontWeight: 600 }, labels.invitedOrganizations),
|
|
234
|
+
sectionBadge(invitedOrganizations.length, "yellow")),
|
|
235
|
+
react_1.default.createElement(react_2.Box, __assign({}, gridSx), invitedOrganizations.map(renderInvitedCard)))))),
|
|
236
|
+
footerSlot,
|
|
237
|
+
react_1.default.createElement(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: function () { return setCreateOpen(false); }, isLoading: isCreating, onSubmit: function (values) { return __awaiter(void 0, void 0, void 0, function () {
|
|
238
|
+
return __generator(this, function (_a) {
|
|
239
|
+
switch (_a.label) {
|
|
240
|
+
case 0: return [4 /*yield*/, (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values))];
|
|
241
|
+
case 1:
|
|
242
|
+
_a.sent();
|
|
243
|
+
setCreateOpen(false);
|
|
244
|
+
return [2 /*return*/];
|
|
245
|
+
}
|
|
246
|
+
});
|
|
247
|
+
}); }, labels: labels }),
|
|
248
|
+
react_1.default.createElement(DeleteOrgModal_1.default, { isOpen: deleteOrgId !== null, onClose: function () { return setDeleteOrgId(null); }, onConfirm: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
249
|
+
return __generator(this, function (_a) {
|
|
250
|
+
switch (_a.label) {
|
|
251
|
+
case 0:
|
|
252
|
+
if (!(deleteOrgId !== null)) return [3 /*break*/, 2];
|
|
253
|
+
return [4 /*yield*/, (onDeleteOrganization === null || onDeleteOrganization === void 0 ? void 0 : onDeleteOrganization(deleteOrgId))];
|
|
254
|
+
case 1:
|
|
255
|
+
_a.sent();
|
|
256
|
+
_a.label = 2;
|
|
257
|
+
case 2:
|
|
258
|
+
setDeleteOrgId(null);
|
|
259
|
+
return [2 /*return*/];
|
|
260
|
+
}
|
|
261
|
+
});
|
|
262
|
+
}); }, labels: labels })));
|
|
263
|
+
};
|
|
264
|
+
exports.default = OrganizationDetails;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var react_2 = require("@testing-library/react");
|
|
8
|
+
require("@testing-library/jest-dom");
|
|
9
|
+
var react_3 = require("@chakra-ui/react");
|
|
10
|
+
var OrganizationDetails_1 = __importDefault(require("./OrganizationDetails"));
|
|
11
|
+
jest.mock("../../Theme/useCustomTheme", function () { return ({
|
|
12
|
+
useCustomTheme: function () { return ({
|
|
13
|
+
colors: {
|
|
14
|
+
white: "#ffffff",
|
|
15
|
+
gray: {
|
|
16
|
+
50: "#f8fafc",
|
|
17
|
+
100: "#f0f0f0",
|
|
18
|
+
200: "#e2e8f0",
|
|
19
|
+
300: "#cbd5e1",
|
|
20
|
+
500: "#64748b",
|
|
21
|
+
600: "#475569",
|
|
22
|
+
700: "#334155",
|
|
23
|
+
800: "#1e293b",
|
|
24
|
+
},
|
|
25
|
+
primary: {
|
|
26
|
+
50: "#eef2ff",
|
|
27
|
+
100: "#e0e7ff",
|
|
28
|
+
300: "#a5b4fc",
|
|
29
|
+
500: "#6366f1",
|
|
30
|
+
600: "#4f46e5",
|
|
31
|
+
700: "#4338ca",
|
|
32
|
+
},
|
|
33
|
+
boxborder: { 200: "#e2e8f0" },
|
|
34
|
+
text: { 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155" },
|
|
35
|
+
secondary: { 500: "#805ad5" },
|
|
36
|
+
backgroundColor: { light: "#ffffff" },
|
|
37
|
+
yellow: { 100: "#fef9c3", 200: "#fef08a", 500: "#eab308", 600: "#ca8a04" },
|
|
38
|
+
green: { 400: "#4ade80", 500: "#22c55e" },
|
|
39
|
+
red: { 50: "#fef2f2", 400: "#f87171", 500: "#ef4444", 600: "#dc2626" },
|
|
40
|
+
semantic: { error: { 50: "#fef2f2", 500: "#ef4444" } },
|
|
41
|
+
},
|
|
42
|
+
}); },
|
|
43
|
+
}); });
|
|
44
|
+
beforeAll(function () {
|
|
45
|
+
Object.defineProperty(window, "matchMedia", {
|
|
46
|
+
writable: true,
|
|
47
|
+
configurable: true,
|
|
48
|
+
value: jest.fn().mockImplementation(function (query) { return ({
|
|
49
|
+
matches: false,
|
|
50
|
+
media: query,
|
|
51
|
+
onchange: null,
|
|
52
|
+
addListener: jest.fn(),
|
|
53
|
+
removeListener: jest.fn(),
|
|
54
|
+
addEventListener: jest.fn(),
|
|
55
|
+
removeEventListener: jest.fn(),
|
|
56
|
+
dispatchEvent: jest.fn(),
|
|
57
|
+
}); }),
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
var active = [
|
|
61
|
+
{
|
|
62
|
+
orgId: 1,
|
|
63
|
+
company_name: "Acme Corp",
|
|
64
|
+
company_url: "acme.example.com",
|
|
65
|
+
default: 1,
|
|
66
|
+
uiInvite: 1,
|
|
67
|
+
defaultOrg: 1,
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
orgId: 2,
|
|
71
|
+
company_name: "Globex",
|
|
72
|
+
company_url: "globex.example.com",
|
|
73
|
+
default: 0,
|
|
74
|
+
uiInvite: 1,
|
|
75
|
+
defaultOrg: 0,
|
|
76
|
+
},
|
|
77
|
+
];
|
|
78
|
+
var invited = [
|
|
79
|
+
{
|
|
80
|
+
orgId: 3,
|
|
81
|
+
company_name: "Initech",
|
|
82
|
+
company_url: "initech.example.com",
|
|
83
|
+
default: 0,
|
|
84
|
+
uiInvite: 0,
|
|
85
|
+
defaultOrg: 0,
|
|
86
|
+
},
|
|
87
|
+
];
|
|
88
|
+
var renderWithChakra = function (ui) {
|
|
89
|
+
return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
|
|
90
|
+
};
|
|
91
|
+
describe("OrganizationDetails", function () {
|
|
92
|
+
it("renders active and invited organizations", function () {
|
|
93
|
+
renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: active, invitedOrganizations: invited }));
|
|
94
|
+
expect(react_2.screen.getByText("Active Organizations")).toBeInTheDocument();
|
|
95
|
+
expect(react_2.screen.getByText("Acme Corp")).toBeInTheDocument();
|
|
96
|
+
expect(react_2.screen.getByText("Globex")).toBeInTheDocument();
|
|
97
|
+
expect(react_2.screen.getByText("Invited Organizations")).toBeInTheDocument();
|
|
98
|
+
expect(react_2.screen.getByText("Initech")).toBeInTheDocument();
|
|
99
|
+
});
|
|
100
|
+
it("shows an empty state when there are no organizations", function () {
|
|
101
|
+
renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: [], invitedOrganizations: [] }));
|
|
102
|
+
expect(react_2.screen.getByText("No organizations found")).toBeInTheDocument();
|
|
103
|
+
});
|
|
104
|
+
it("opens the create organization modal", function () {
|
|
105
|
+
renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: active, invitedOrganizations: [] }));
|
|
106
|
+
react_2.fireEvent.click(react_2.screen.getByText("Create New Organization"));
|
|
107
|
+
var dialog = react_2.screen.getByRole("dialog");
|
|
108
|
+
expect((0, react_2.within)(dialog).getByText("Create Organization")).toBeInTheDocument();
|
|
109
|
+
expect((0, react_2.within)(dialog).getByText("Company Address")).toBeInTheDocument();
|
|
110
|
+
});
|
|
111
|
+
it("opens the delete confirmation for a non-protected org", function () {
|
|
112
|
+
renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: active, invitedOrganizations: [] }));
|
|
113
|
+
react_2.fireEvent.click(react_2.screen.getAllByLabelText("Delete Organization")[1]);
|
|
114
|
+
expect(react_2.screen.getByText("Are you sure you want to delete this Organization?")).toBeInTheDocument();
|
|
115
|
+
});
|
|
116
|
+
it("calls onAcceptInvite when Accept is clicked", function () {
|
|
117
|
+
var onAcceptInvite = jest.fn();
|
|
118
|
+
renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: [], invitedOrganizations: invited, onAcceptInvite: onAcceptInvite }));
|
|
119
|
+
react_2.fireEvent.click(react_2.screen.getByText("Accept"));
|
|
120
|
+
expect(onAcceptInvite).toHaveBeenCalledWith(3);
|
|
121
|
+
});
|
|
122
|
+
});
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export type OrganizationItem = {
|
|
3
|
+
orgId: number;
|
|
4
|
+
company_name: string;
|
|
5
|
+
company_url: string;
|
|
6
|
+
/** 1 when this org is the user's default org. */
|
|
7
|
+
default: number;
|
|
8
|
+
/** 1 = active/accepted, 0 = pending invite. */
|
|
9
|
+
uiInvite: number;
|
|
10
|
+
/** 1 when the org is protected and cannot be deleted. */
|
|
11
|
+
defaultOrg: number;
|
|
12
|
+
};
|
|
13
|
+
export type CreateOrgFormValues = {
|
|
14
|
+
company_name: string;
|
|
15
|
+
company_address: string;
|
|
16
|
+
phone: string;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* All user-facing strings. Provide translated values from the host app; every
|
|
20
|
+
* key has a sensible English default so the component works standalone.
|
|
21
|
+
*/
|
|
22
|
+
export type OrganizationDetailsLabels = {
|
|
23
|
+
greeting?: string;
|
|
24
|
+
manageSubtitle?: string;
|
|
25
|
+
organizationDetails?: string;
|
|
26
|
+
createNewOrganization?: string;
|
|
27
|
+
createOrganization?: string;
|
|
28
|
+
activeOrganizations?: string;
|
|
29
|
+
invitedOrganizations?: string;
|
|
30
|
+
setAsDefault?: string;
|
|
31
|
+
settingDefault?: string;
|
|
32
|
+
default?: string;
|
|
33
|
+
pending?: string;
|
|
34
|
+
accept?: string;
|
|
35
|
+
accepting?: string;
|
|
36
|
+
decline?: string;
|
|
37
|
+
deleteOrganization?: string;
|
|
38
|
+
protectedOrganization?: string;
|
|
39
|
+
delete?: string;
|
|
40
|
+
noOrganizationsTitle?: string;
|
|
41
|
+
noOrganizationsDescription?: string;
|
|
42
|
+
companyName?: string;
|
|
43
|
+
companyAddress?: string;
|
|
44
|
+
phone?: string;
|
|
45
|
+
cancel?: string;
|
|
46
|
+
submit?: string;
|
|
47
|
+
requiredField?: string;
|
|
48
|
+
invalidPhone?: string;
|
|
49
|
+
confirmDeletion?: string;
|
|
50
|
+
deleteConfirmText?: string;
|
|
51
|
+
copyright?: string;
|
|
52
|
+
termsOfService?: string;
|
|
53
|
+
};
|
|
54
|
+
export interface OrganizationDetailsProps {
|
|
55
|
+
activeOrganizations: OrganizationItem[];
|
|
56
|
+
invitedOrganizations: OrganizationItem[];
|
|
57
|
+
isLoading?: boolean;
|
|
58
|
+
/** Org ids currently being switched to default. */
|
|
59
|
+
switchingOrgIds?: number[];
|
|
60
|
+
/** Org ids currently responding to an invite. */
|
|
61
|
+
respondingOrgIds?: number[];
|
|
62
|
+
isCreating?: boolean;
|
|
63
|
+
createError?: string;
|
|
64
|
+
userName?: string;
|
|
65
|
+
userAvatarUrl?: string;
|
|
66
|
+
onSetDefault?: (orgId: number) => void;
|
|
67
|
+
onAcceptInvite?: (orgId: number) => void;
|
|
68
|
+
onDeclineInvite?: (orgId: number) => void;
|
|
69
|
+
onDeleteOrganization?: (orgId: number) => void | Promise<void>;
|
|
70
|
+
onCreateOrganization?: (values: CreateOrgFormValues) => void | Promise<void>;
|
|
71
|
+
onBack?: () => void;
|
|
72
|
+
footerSlot?: ReactNode;
|
|
73
|
+
labels?: OrganizationDetailsLabels;
|
|
74
|
+
}
|
|
75
|
+
export interface CreateOrgModalProps {
|
|
76
|
+
isOpen: boolean;
|
|
77
|
+
onClose: () => void;
|
|
78
|
+
isLoading?: boolean;
|
|
79
|
+
onSubmit: (values: CreateOrgFormValues) => void | Promise<void>;
|
|
80
|
+
labels: Required<Pick<OrganizationDetailsLabels, "createOrganization" | "companyName" | "companyAddress" | "phone" | "cancel" | "submit" | "requiredField" | "invalidPhone">>;
|
|
81
|
+
}
|
|
82
|
+
export interface DeleteOrgModalProps {
|
|
83
|
+
isOpen: boolean;
|
|
84
|
+
onClose: () => void;
|
|
85
|
+
isLoading?: boolean;
|
|
86
|
+
onConfirm: () => void;
|
|
87
|
+
labels: Required<Pick<OrganizationDetailsLabels, "confirmDeletion" | "deleteConfirmText" | "cancel" | "delete">>;
|
|
88
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -76,9 +76,11 @@ import UserDetails from "./Components/UserDetails/UserDetails";
|
|
|
76
76
|
import RolesPermission from "./Components/RolesPermission/RolesPermission";
|
|
77
77
|
import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
|
|
78
78
|
import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
|
|
79
|
-
|
|
79
|
+
import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
|
|
80
|
+
export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
|
|
80
81
|
export default withTheme;
|
|
81
82
|
export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
|
|
82
83
|
export type { RolesPermissionProps, RolesPermissionLabels, RolesPermissionView, RolesPermissionMode, Permission, PermissionKey, RoleData, } from "./Components/RolesPermission/RolesPermissionProps";
|
|
83
84
|
export type { CustomModulesTableProps, CustomModulesTableLabels, ModuleItem, UpdateModulePayload, } from "./Components/CustomModulesTable/CustomModulesTableProps";
|
|
84
85
|
export type { SignInActivityTableProps, SignInActivityLabels, SignInDevice, } from "./Components/SignInActivityTable/SignInActivityTableProps";
|
|
86
|
+
export type { OrganizationDetailsProps, OrganizationDetailsLabels, OrganizationItem, CreateOrgFormValues, } from "./Components/OrganizationDetails/OrganizationDetailsProps";
|
package/dist/index.js
CHANGED
|
@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
37
37
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
38
|
};
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.
|
|
41
|
-
exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = void 0;
|
|
40
|
+
exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = exports.UpgradeButton = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
|
|
41
|
+
exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = void 0;
|
|
42
42
|
var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
|
|
43
43
|
exports.Accordian = Accordion_1.default;
|
|
44
44
|
var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
|
|
@@ -207,4 +207,6 @@ var CustomModulesTable_1 = __importDefault(require("./Components/CustomModulesTa
|
|
|
207
207
|
exports.CustomModulesTable = CustomModulesTable_1.default;
|
|
208
208
|
var SignInActivityTable_1 = __importDefault(require("./Components/SignInActivityTable/SignInActivityTable"));
|
|
209
209
|
exports.SignInActivityTable = SignInActivityTable_1.default;
|
|
210
|
+
var OrganizationDetails_1 = __importDefault(require("./Components/OrganizationDetails/OrganizationDetails"));
|
|
211
|
+
exports.OrganizationDetails = OrganizationDetails_1.default;
|
|
210
212
|
exports.default = withTheme_1.default;
|