@addev-be/ui 0.20.0 → 0.20.2

package/dist/components/ui/Tab/styles.js

@@ -0,0 +1,41 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContainer = exports.TabViewContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var helpers_1 = require("../../../providers/ThemeProvider/helpers");
+exports.TabViewContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  box-shadow: var(--shadow-sm);\n  gap: var(--space-2);\n  overflow-x: scroll;\n  scrollbar-width: none;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  box-shadow: var(--shadow-sm);\n  gap: var(--space-2);\n  overflow-x: scroll;\n  scrollbar-width: none;\n"])));
+exports.TabContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n\n  align-items: center;\n  height: var(--space-8);\n  gap: var(--space-2);\n  cursor: pointer;\n  padding: 0 var(--space-2);\n  transition: border-bottom 0.2s, 0.2s;\n\n  ", ";\n\n  ", "\n"], ["\n  display: flex;\n\n  align-items: center;\n  height: var(--space-8);\n  gap: var(--space-2);\n  cursor: pointer;\n  padding: 0 var(--space-2);\n  transition: border-bottom 0.2s, 0.2s;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var _b = _a.$color, $color = _b === void 0 ? 'primary' : _b;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &:hover {\n      color: var(--color-", ");\n      fill: var(--color-", ");\n    }\n    svg {\n      height: var(--space-4);\n      width: var(--space-4);\n    }\n  "], ["\n    &:hover {\n      color: var(--color-", ");\n      fill: var(--color-", ");\n    }\n    svg {\n      height: var(--space-4);\n      width: var(--space-4);\n    }\n  "])), (0, helpers_1.getColorWithIntensity)($color, 500), (0, helpers_1.getColorWithIntensity)($color, 500));
+}, function (_a) {
+    var $isActive = _a.$isActive, _b = _a.$color, $color = _b === void 0 ? 'primary' : _b;
+    return $isActive && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      fill: var(--color-", ");\n    "], ["\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      fill: var(--color-", ");\n    "])), (0, helpers_1.getColorWithIntensity)($color, 500), (0, helpers_1.getColorWithIntensity)($color, 500));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ui/Tab/types.d.ts

@@ -0,0 +1,13 @@
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+import { IconFC } from '../../../Icons';
+import { ReactNode } from 'react';
+export type Tab = {
+    color?: ThemeColorWithIntensity | ThemeColor;
+    content: ReactNode;
+    icon?: IconFC;
+    key?: string;
+    tabName: string;
+};
+export type TabProps = {
+    tabs: Tab[];
+};

package/dist/components/ui/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Tab: FC;

package/dist/components/ui/Tabs/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// import { TabProps } from '../Tabs';
+var Tab = function () {
+    // const [activeTab, setActiveTab] = useState<string>(Object.keys(tabs)[0]);
+    return (0, jsx_runtime_1.jsx)("div", { children: "Test" });
+};
+exports.Tab = Tab;

package/dist/components/ui/Tabs/styles.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/ui/Tabs/types.d.ts

@@ -0,0 +1,8 @@
+export type Tab = {
+    key: string;
+    tabName: string;
+    backgroundColor?: string;
+};
+export type TabProps = {
+    tabs: Tab[];
+};

package/dist/components/ui/Tab/302/265/index.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Tab: FC;

package/dist/components/ui/Tab/302/265/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// import { TabProps } from '../Tabs';
+var Tab = function () {
+    // const [activeTab, setActiveTab] = useState<string>(Object.keys(tabs)[0]);
+    return (0, jsx_runtime_1.jsx)("div", { children: "Test" });
+};
+exports.Tab = Tab;

package/dist/components/ui/Tab/302/265/styles.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/ui/Tab/302/265/types.d.ts

@@ -0,0 +1,8 @@
+export type Tab = {
+    key: string;
+    tabName: string;
+    backgroundColor?: string;
+};
+export type TabProps = {
+    tabs: Tab[];
+};

package/dist/components/ui/ToastNotification.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export type NotificationContainerProps = {
+    type?: ToastType;
+};
+export declare const ToastNotificationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NotificationContainerProps>> & string;
+export declare const ToastNotification: FC<{
+    title: string;
+    message: ReactNode;
+    type?: ToastType;
+    timer?: number;
+    color?: string;
+    onClose: () => void;
+}>;

package/dist/components/ui/ToastNotification.js

@@ -0,0 +1,78 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastNotification = exports.ToastNotificationContainer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var Icons_1 = require("../../Icons");
+exports.ToastNotificationContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: fixed;\n  right: var(--space-12);\n  bottom: var(--space-12);\n  z-index: 9999;\n  border-radius: var(--rounded-lg);\n  box-shadow: 0 var(--space-2) var(--space-2) rgba(0, 0, 0, 0.4);\n  font-size: var(--text-lg);\n  padding: var(--space-4) var(--space-4);\n  color: var(--color-neutral-500);\n  background-color: var(--color-neutral-100);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4);\n\n  ", "\n"], ["\n  display: flex;\n  position: fixed;\n  right: var(--space-12);\n  bottom: var(--space-12);\n  z-index: 9999;\n  border-radius: var(--rounded-lg);\n  box-shadow: 0 var(--space-2) var(--space-2) rgba(0, 0, 0, 0.4);\n  font-size: var(--text-lg);\n  padding: var(--space-4) var(--space-4);\n  color: var(--color-neutral-500);\n  background-color: var(--color-neutral-100);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4);\n\n  ", "\n"])), function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'info' : _b;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-left: var(--space-2) solid\n      ", ";\n  "], ["\n    border-left: var(--space-2) solid\n      ", ";\n  "])), type === 'success'
+        ? 'var(--color-success-600)'
+        : type === 'error'
+            ? 'var(--color-danger-500)'
+            : type === 'warning'
+                ? 'var(--color-warning-500)'
+                : 'var(--color-info-500)');
+});
+var ContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"])));
+var IconContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-12);\n  height: var(--space-12);\n  border-radius: var(--rounded-full);\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-12);\n  height: var(--space-12);\n  border-radius: var(--rounded-full);\n\n  ", "\n"])), function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'info' : _b;
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), type === 'success'
+        ? 'var(--color-green-600)'
+        : type === 'error'
+            ? 'var(--color-danger-500)'
+            : type === 'warning'
+                ? 'var(--color-warning-500)'
+                : 'var(--color-info-500)');
+});
+var ToastNotification = function (_a) {
+    var title = _a.title, message = _a.message, _b = _a.type, type = _b === void 0 ? 'info' : _b, color = _a.color, _c = _a.timer, timer = _c === void 0 ? 2000 : _c, onClose = _a.onClose;
+    (0, react_1.useEffect)(function () {
+        var timeoutId = setTimeout(onClose, timer);
+        return function () { return clearTimeout(timeoutId); };
+    }, [onClose, timer]);
+    var icon = function () {
+        switch (type) {
+            case 'success':
+                return ((0, jsx_runtime_1.jsx)(Icons_1.CircleCheckIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+            case 'error':
+                return ((0, jsx_runtime_1.jsx)(Icons_1.CircleXMarkIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+            case 'warning':
+                return ((0, jsx_runtime_1.jsx)(Icons_1.TriangleExclamationIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+            case 'info':
+            default:
+                return ((0, jsx_runtime_1.jsx)(Icons_1.CircleInfoIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(exports.ToastNotificationContainer, { type: type, color: color, children: [(0, jsx_runtime_1.jsx)(IconContainer, { type: type, children: icon() }), (0, jsx_runtime_1.jsxs)(ContentWrapper, { children: [(0, jsx_runtime_1.jsx)("strong", { children: title }), (0, jsx_runtime_1.jsx)("div", { children: message })] })] }));
+};
+exports.ToastNotification = ToastNotification;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/ui/index.d.ts

@@ -4,3 +4,4 @@ export * from './ContextMenu';
 export * from './Ellipsis';
 export * from './Label';
 export * from './Message';
+export * from './Tab';

package/dist/components/ui/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./ContextMenu"), exports);
 __exportStar(require("./Ellipsis"), exports);
 __exportStar(require("./Label"), exports);
 __exportStar(require("./Message"), exports);
+__exportStar(require("./Tab"), exports);

package/dist/helpers/index.d.ts

@@ -2,3 +2,4 @@ export * from './dates';
 export * from './numbers';
 export * from './text';
 export * from './responsive';
+export * from './styled';

package/dist/helpers/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./dates"), exports);
 __exportStar(require("./numbers"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./responsive"), exports);
+__exportStar(require("./styled"), exports);

package/dist/helpers/styled/index.d.ts

@@ -0,0 +1 @@
+export * from './space';

package/dist/{components/data/SmartQueryDataGrid/helpers → helpers/styled}/index.js

@@ -14,5 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./smartQueries"), exports);
-__exportStar(require("./columns"), exports);
+__exportStar(require("./space"), exports);

package/dist/helpers/styled/space.d.ts

@@ -0,0 +1,23 @@
+import { ThemeSpace } from '../../providers';
+export type MarginProps = {
+    m?: ThemeSpace;
+    mx?: ThemeSpace;
+    my?: ThemeSpace;
+    mt?: ThemeSpace;
+    mr?: ThemeSpace;
+    mb?: ThemeSpace;
+    ml?: ThemeSpace;
+};
+export declare const margins: import("styled-components").RuleSet<MarginProps>;
+export type PaddingProps = {
+    p?: ThemeSpace;
+    px?: ThemeSpace;
+    py?: ThemeSpace;
+    pt?: ThemeSpace;
+    pr?: ThemeSpace;
+    pb?: ThemeSpace;
+    pl?: ThemeSpace;
+};
+export declare const paddings: import("styled-components").RuleSet<PaddingProps>;
+export type SpaceProps = MarginProps & PaddingProps;
+export declare const space: import("styled-components").RuleSet<SpaceProps>;

package/dist/helpers/styled/space.js

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.space = exports.paddings = exports.margins = void 0;
+var styled_components_1 = require("styled-components");
+exports.margins = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+    var m = _a.m;
+    return m && "margin: var(--space-".concat(m, ");");
+}, function (_a) {
+    var mx = _a.mx;
+    return mx && "margin-left: var(--space-".concat(mx, "); margin-right: var(--space-").concat(mx, ");");
+}, function (_a) {
+    var my = _a.my;
+    return my && "margin-top: var(--space-".concat(my, "); margin-bottom: var(--space-").concat(my, ");");
+}, function (_a) {
+    var mt = _a.mt;
+    return mt && "margin-top: var(--space-".concat(mt, ");");
+}, function (_a) {
+    var mr = _a.mr;
+    return mr && "margin-right: var(--space-".concat(mr, ");");
+}, function (_a) {
+    var mb = _a.mb;
+    return mb && "margin-bottom: var(--space-".concat(mb, ");");
+}, function (_a) {
+    var ml = _a.ml;
+    return ml && "margin-left: var(--space-".concat(ml, ");");
+});
+exports.paddings = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+    var p = _a.p;
+    return p && "padding: var(--space-".concat(p, ");");
+}, function (_a) {
+    var px = _a.px;
+    return px &&
+        "padding-left: var(--space-".concat(px, "); padding-right: var(--space-").concat(px, ");");
+}, function (_a) {
+    var py = _a.py;
+    return py &&
+        "padding-top: var(--space-".concat(py, "); padding-bottom: var(--space-").concat(py, ");");
+}, function (_a) {
+    var pt = _a.pt;
+    return pt && "padding-top: var(--space-".concat(pt, ");");
+}, function (_a) {
+    var pr = _a.pr;
+    return pr && "padding-right: var(--space-".concat(pr, ");");
+}, function (_a) {
+    var pb = _a.pb;
+    return pb && "padding-bottom: var(--space-".concat(pb, ");");
+}, function (_a) {
+    var pl = _a.pl;
+    return pl && "padding-left: var(--space-".concat(pl, ");");
+});
+exports.space = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), exports.margins, exports.paddings);
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useWindowSize';
 export * from './useMediaQuery';
 export * from './useContainerMediaQuery';
 export * from './useMediaQueryForWidth';
+export * from './useMutableState';

package/dist/hooks/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./useWindowSize"), exports);
 __exportStar(require("./useMediaQuery"), exports);
 __exportStar(require("./useContainerMediaQuery"), exports);
 __exportStar(require("./useMediaQueryForWidth"), exports);
+__exportStar(require("./useMutableState"), exports);

package/dist/hooks/useMutableState.d.ts

@@ -0,0 +1,2 @@
+import { DeepPartial } from '../typings';
+export declare const useMutableState: <T>(initialValue?: T | (() => T)) => readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>, (partialValue: DeepPartial<T>) => void];

package/dist/hooks/useMutableState.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMutableState = void 0;
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var useMutableState = function (initialValue) {
+    if (initialValue === void 0) { initialValue = {}; }
+    var _a = (0, react_1.useState)(initialValue), value = _a[0], setValue = _a[1];
+    var setPartialValue = (0, react_1.useCallback)(function (partialValue) {
+        var oldValue = (0, lodash_1.cloneDeep)(value);
+        var newValue = (0, lodash_1.merge)(oldValue, partialValue);
+        setValue(function () { return newValue; });
+    }, [value]);
+    return [value, setValue, setPartialValue];
+};
+exports.useMutableState = useMutableState;

package/dist/providers/AuthenticationProvider/index.d.ts

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
 import { UserDTO } from '../../services';
 export type AuthenticationContextProps = {
+    status?: number;
     token?: string;
     user?: UserDTO;
     isAuthenticated: boolean;

package/dist/providers/AuthenticationProvider/index.js

@@ -53,6 +53,7 @@ var react_1 = require("react");
 var services_1 = require("../../services");
 var helpers_1 = require("./helpers");
 exports.AuthenticationContext = (0, react_1.createContext)({
+    status: undefined,
     authenticate: function () { },
     isAuthenticated: false,
     login: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -78,9 +79,11 @@ var AuthenticationProvider = function (_a) {
     var _b, _c;
     var permissions = _a.permissions, LoginComponent = _a.loginComponent, children = _a.children, requestHandlerName = _a.requestHandlerName;
     var allPermissions = (0, react_1.useMemo)(function () { return (__assign(__assign({}, helpers_1.basePermissions), permissions)); }, [permissions]);
-    var _d = (0, react_1.useState)(false), setWebSocketStatus = _d[1];
-    var _e = (0, react_1.useState)(sessionStorage.getItem('authToken') || undefined), token = _e[0], setToken = _e[1];
-    var _f = (0, react_1.useState)(undefined), user = _f[0], setUser = _f[1];
+    var _d = (0, react_1.useState)(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = (0, react_1.useState)(false), setWebSocketStatus = _e[1];
+    var _f = (0, react_1.useState)(sessionStorage.getItem('authToken') || undefined), token = _f[0], setToken = _f[1];
+    var _g = (0, react_1.useState)(undefined), user = _g[0], setUser = _g[1];
+    var _h = (0, react_1.useState)(undefined), status = _h[0], setStatus = _h[1];
     var sendAuthenticateRequest = (0, services_1.useAuthenticateRequestHandler)(requestHandlerName);
     var sendLoginRequest = (0, services_1.useLoginRequestHandler)();
     var sendLogoutRequest = (0, services_1.useLogoutRequestHandler)();
@@ -89,8 +92,11 @@ var AuthenticationProvider = function (_a) {
     var sendResetPasswordRequest = (0, services_1.useResetPasswordRequestHandler)();
     var authenticate = (0, react_1.useCallback)(function (force) {
         if (force === void 0) { force = false; }
-        if (token && (!user || force)) {
+        if (token && (!user || force) && !isLoading) {
+            setIsLoading(true);
             sendAuthenticateRequest({ token: token }).then(function (response) {
+                setIsLoading(false);
+                setStatus(response.status);
                 if (response.status === 0 && response.user) {
                     setUser(response.user);
                 }
@@ -99,11 +105,12 @@ var AuthenticationProvider = function (_a) {
                     setUser(undefined);
                 }
             }, function () {
+                setIsLoading(false);
                 setToken(undefined);
                 setUser(undefined);
             });
         }
-    }, [sendAuthenticateRequest, token, user]);
+    }, [isLoading, sendAuthenticateRequest, token, user]);
     (0, react_1.useEffect)(function () {
         if (token) {
             sessionStorage.setItem('authToken', token);
@@ -113,10 +120,16 @@ var AuthenticationProvider = function (_a) {
             sessionStorage.removeItem('authToken');
         }
     }, [authenticate, token]);
+    var _j = (0, react_1.useState)(false), networkStatus = _j[0], setNetworkStatus = _j[1];
     var login = (0, react_1.useCallback)(function (username, password) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
+            if (isLoading) {
+                throw new Error('Already loading');
+            }
+            setIsLoading(true);
             return [2 /*return*/, sendLoginRequest({ username: username, password: password })
                     .then(function (response) {
+                    setIsLoading(false);
                     if (response.status === 0 && response.user) {
                         setToken(response.token);
                         setUser(response.user);
@@ -125,12 +138,13 @@ var AuthenticationProvider = function (_a) {
                     throw new Error("Login failed with status ".concat(response.status));
                 })
                     .catch(function () {
+                    setIsLoading(false);
                     setToken(undefined);
                     setUser(undefined);
                     return false;
                 })];
         });
-    }); }, [sendLoginRequest]);
+    }); }, [isLoading, sendLoginRequest]);
     var logout = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, sendLogoutRequest({})
@@ -140,6 +154,7 @@ var AuthenticationProvider = function (_a) {
                     .finally(function () {
                     setToken(undefined);
                     setUser(undefined);
+                    setStatus(undefined);
                 })];
         });
     }); }, [sendLogoutRequest]);
@@ -179,7 +194,33 @@ var AuthenticationProvider = function (_a) {
         (_b = user === null || user === void 0 ? void 0 : user.profile) === null || _b === void 0 ? void 0 : _b.isAdmin,
         (_c = user === null || user === void 0 ? void 0 : user.profile) === null || _c === void 0 ? void 0 : _c.permissions,
     ]);
+    var webSocketStatusChanged = (0, react_1.useCallback)(function (status) {
+        if (!networkStatus && status) {
+            authenticate(true);
+        }
+        setNetworkStatus(status);
+    }, [authenticate, networkStatus]);
+    var webSocketErrorReceived = (0, react_1.useCallback)(function (_a) {
+        var status = _a.status;
+        // Handle logout when NotAuthenticated error is received
+        if (status === -4) {
+            logout();
+        }
+    }, [logout]);
+    (0, react_1.useEffect)(function () {
+        var subscription = services_1.WebSocketService.getInstance().status$.subscribe(webSocketStatusChanged);
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [webSocketStatusChanged]);
+    (0, react_1.useEffect)(function () {
+        var subscription = services_1.WebSocketService.getInstance().error$.subscribe(webSocketErrorReceived);
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [webSocketErrorReceived]);
     var contextValue = (0, react_1.useMemo)(function () { return ({
+        status: status,
         token: token,
         user: user,
         isAuthenticated: !!user,
@@ -193,17 +234,17 @@ var AuthenticationProvider = function (_a) {
         hasPermission: hasPermission,
         setToken: setToken,
     }); }, [
-        allPermissions,
+        status,
+        token,
+        user,
         authenticate,
-        checkRecoveryKey,
-        hasPermission,
         login,
         logout,
-        resetPassword,
         sendRecoveryKey,
-        token,
-        user,
-        setToken,
+        checkRecoveryKey,
+        resetPassword,
+        allPermissions,
+        hasPermission,
     ]);
     (0, react_1.useEffect)(function () {
         var _a;

package/dist/providers/ThemeProvider/helpers.d.ts

@@ -1,3 +1,8 @@
-import { ThemeColorWithIntensity } from './types';
-export declare const getColor: (colorWithIntensity: ThemeColorWithIntensity) => string;
-export declare const getIntensity: (colorWithIntensity: ThemeColorWithIntensity) => string;
+import { ThemeColor, ThemeColorIntensity, ThemeColorWithIntensity } from './types';
+export declare const getColor: (colorWithIntensity: ThemeColorWithIntensity) => ThemeColor;
+export declare const getIntensity: (colorWithIntensity: ThemeColorWithIntensity) => ThemeColorIntensity;
+export declare const isThemeColorWithIntensity: (color: ThemeColor | ThemeColorWithIntensity) => color is ThemeColorWithIntensity;
+export declare const getColorWithIntensity: (color: ThemeColor | ThemeColorWithIntensity, defaultIntensity?: ThemeColorIntensity) => ThemeColorWithIntensity;
+export declare const extractColorAndIntensity: (color: ThemeColor | ThemeColorWithIntensity, defaultIntensity?: ThemeColorIntensity) => [ThemeColor, ThemeColorIntensity];
+export declare const darkenColor: (color: ThemeColor | ThemeColorWithIntensity, amount?: number) => ThemeColorWithIntensity;
+export declare const lightenColor: (color: ThemeColor | ThemeColorWithIntensity, amount?: number) => ThemeColorWithIntensity;

package/dist/providers/ThemeProvider/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIntensity = exports.getColor = void 0;
+exports.lightenColor = exports.darkenColor = exports.extractColorAndIntensity = exports.getColorWithIntensity = exports.isThemeColorWithIntensity = exports.getIntensity = exports.getColor = void 0;
 var getColor = function (colorWithIntensity) {
     var colorName = colorWithIntensity.split('-')[0];
     return colorName;
@@ -8,6 +8,46 @@ var getColor = function (colorWithIntensity) {
 exports.getColor = getColor;
 var getIntensity = function (colorWithIntensity) {
     var _a = colorWithIntensity.split('-'), intensity = _a[1];
-    return intensity;
+    return Number(intensity);
 };
 exports.getIntensity = getIntensity;
+var isThemeColorWithIntensity = function (color) {
+    return color.indexOf('-') >= 0;
+};
+exports.isThemeColorWithIntensity = isThemeColorWithIntensity;
+var getColorWithIntensity = function (color, defaultIntensity) {
+    if (defaultIntensity === void 0) { defaultIntensity = 300; }
+    if ((0, exports.isThemeColorWithIntensity)(color)) {
+        return color;
+    }
+    return "".concat(color, "-").concat(defaultIntensity);
+};
+exports.getColorWithIntensity = getColorWithIntensity;
+var extractColorAndIntensity = function (color, defaultIntensity) {
+    if (defaultIntensity === void 0) { defaultIntensity = 300; }
+    if ((0, exports.isThemeColorWithIntensity)(color)) {
+        var _a = color.split('-'), colorName = _a[0], intensity = _a[1];
+        return [
+            colorName,
+            intensity ? Number(intensity) : defaultIntensity,
+        ];
+    }
+    return [color, defaultIntensity];
+};
+exports.extractColorAndIntensity = extractColorAndIntensity;
+var darkenColor = function (color, amount) {
+    if (amount === void 0) { amount = 100; }
+    var _a = (0, exports.extractColorAndIntensity)(color), colorName = _a[0], intensity = _a[1];
+    var newIntensity = (Math.floor(Math.min(intensity + amount, 950) / 100) *
+        100);
+    return "".concat(colorName, "-").concat(newIntensity);
+};
+exports.darkenColor = darkenColor;
+var lightenColor = function (color, amount) {
+    if (amount === void 0) { amount = 100; }
+    var _a = (0, exports.extractColorAndIntensity)(color), colorName = _a[0], intensity = _a[1];
+    var newIntensity = (Math.floor(Math.max(intensity - amount, 0) / 100) *
+        100);
+    return "".concat(colorName, "-").concat(newIntensity);
+};
+exports.lightenColor = lightenColor;

package/dist/services/WebSocketService.d.ts

@@ -1,11 +1,19 @@
 import { Config } from '../config';
 import { Subject } from 'rxjs';
+export declare class WebSocketError extends Error {
+    status: number;
+    constructor(status: number, message: string);
+}
 export declare class WebSocketService {
     private static instance;
     private config;
     private socket;
     status: boolean | undefined;
     status$: Subject<boolean | undefined>;
+    error$: Subject<{
+        status: number;
+        message: string;
+    }>;
     private queue;
     private promises;
     onOpen?: () => void;