@os1-platform/console-ui-react 0.1.0

package/dist/commonjs/aaa/index.js

@@ -0,0 +1,319 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OS1HttpClient = exports.OS1Modal = exports.OS1Toast = exports.OS1Provider = exports.ConsoleUIContext = exports.AuthContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var console_ui_js_1 = require("@os1-platform/console-ui-js");
+Object.defineProperty(exports, "OS1HttpClient", { enumerable: true, get: function () { return console_ui_js_1.HttpClient; } });
+var react_1 = __importStar(require("react"));
+var axios_1 = __importDefault(require("axios"));
+exports.AuthContext = react_1.default.createContext(undefined);
+exports.ConsoleUIContext = react_1.default.createContext(undefined);
+var HeaderAndSideBar = function (props) {
+    var _a = (0, react_1.useState)(null), consoleInstance = _a[0], setConsoleInstance = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (!props.isLoading) {
+            var console_1 = console_ui_js_1.ConsoleUiInit.getInstance(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devOrgName, props.authurl, props.appId, props.userManager);
+            setConsoleInstance(console_1);
+            console_1.renderHeaderAndSidebar('headerAndSidebar', props.controls);
+        }
+    }, [props.isLoading]);
+    if (props.isLoading) {
+        if (props.loader) {
+            return props.loader;
+        }
+        else {
+            var keyframes = "\n      @-webkit-keyframes spin {\n        0% {\n          -webkit-transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n        }\n      }\n    ";
+            var styleSheets = Array.from(document.styleSheets).filter(function (styleSheet) {
+                return !styleSheet.href || styleSheet.href.startsWith(window.location.origin);
+            });
+            for (var _i = 0, styleSheets_1 = styleSheets; _i < styleSheets_1.length; _i++) {
+                var style = styleSheets_1[_i];
+                if (style instanceof CSSStyleSheet && style.cssRules) {
+                    style.insertRule(keyframes, style.cssRules.length);
+                }
+            }
+            var loaderStyle = function () { return ({
+                marginTop: '50vh',
+                marginLeft: '50vw',
+                border: '12px solid #F3F3F3',
+                borderRadius: '50%',
+                borderTop: '12px solid grey',
+                width: '40px',
+                height: '40px',
+                animationName: 'spin',
+                animationDuration: '2s',
+                animationTimingFunction: 'linear',
+                animationIterationCount: 'infinite',
+            }); };
+            return (0, jsx_runtime_1.jsx)("div", { style: loaderStyle() });
+        }
+    }
+    //console.log(consoleInstance, props);
+    return ((0, jsx_runtime_1.jsx)(exports.ConsoleUIContext.Provider, __assign({ value: consoleInstance }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ id: "headerAndSidebar" }, { children: props.children })) })));
+};
+var getCleanedDomain = function (domain) {
+    var cleanedDomain = String(domain);
+    var splitHost = cleanedDomain.split('.');
+    var org = splitHost[0] || '';
+    var cleanedOrg = org.replace('-cdev', '');
+    var base = splitHost.join('.');
+    return { orgShortName: cleanedOrg, baseDomain: base };
+};
+var getTenantFromDevPortal = function (orgShortName) { return __awaiter(void 0, void 0, void 0, function () {
+    var url, response;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                url = "https://api.getos1.com/app/core-api/tenant?orgShortName=".concat(orgShortName);
+                return [4 /*yield*/, axios_1.default.get(url)];
+            case 1:
+                response = _a.sent();
+                return [2 /*return*/, response.data.data];
+        }
+    });
+}); };
+var getTenantId = function (devOrgNameArg) {
+    if (devOrgNameArg === void 0) { devOrgNameArg = null; }
+    var devOrgName = devOrgNameArg;
+    //if (!devOrgNameArg) devOrgName = getAuthConfig().devOrgName;
+    var hostname = window.location.hostname || null;
+    return hostname
+        ? (hostname.split('.')[0] == 'developer' ||
+            hostname.split('.')[0] == 'developer2' ||
+            hostname.split('.')[0].includes('-cdev')) &&
+            devOrgName
+            ? devOrgName
+            : hostname.split('.')[0]
+        : '';
+};
+var getKeyCloakAuthority = function (domain, devOrgName) { return __awaiter(void 0, void 0, void 0, function () {
+    var orgName, baseDomainName, _a, orgShortName, baseDomain, tenant, tenantId;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                orgName = '';
+                baseDomainName = '';
+                if (devOrgName != undefined) {
+                    orgName = devOrgName;
+                    baseDomainName = domain.substring(domain.indexOf('.'));
+                }
+                else {
+                    _a = getCleanedDomain(domain), orgShortName = _a.orgShortName, baseDomain = _a.baseDomain;
+                    orgName = orgShortName;
+                    baseDomainName = baseDomain;
+                }
+                if (!baseDomainName.includes('os1')) return [3 /*break*/, 2];
+                return [4 /*yield*/, getTenantFromDevPortal(orgName)];
+            case 1:
+                tenant = _b.sent();
+                return [2 /*return*/, "".concat(tenant.stackAuthUrl, "/auth/realms/").concat(tenant.tenantId)];
+            case 2:
+                tenantId = getTenantId(orgName);
+                //console.log(tenantId);
+                return [2 /*return*/, "https://keycloak".concat(baseDomainName, "/auth/realms/").concat(tenantId)];
+        }
+    });
+}); };
+var OS1Provider = function (props) {
+    var _a = (0, react_1.useState)(''), authUrl = _a[0], setAuthUrl = _a[1];
+    // const [tenantDns, setTenantDns] = useState('');
+    // let isMountedRef = useRef<boolean>(false);
+    var authUrls = '';
+    (0, react_1.useEffect)(function () {
+        (function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, getKeyCloakAuthority(window.location.hostname, props.devOrgName)];
+                        case 1:
+                            authUrls = _a.sent();
+                            setAuthUrl(authUrls);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        })();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(OS1Provider2, { clientId: props.clientId, loginRedirectPath: props.loginRedirectPath, logoutRedirectPath: props.logoutRedirectPath, devOrgName: props.devOrgName, appId: props.appId, controls: props.controls, authUrl: authUrl, props: props }));
+};
+exports.OS1Provider = OS1Provider;
+var OS1Provider2 = function (props) {
+    //console.log(props);
+    var userManager = new console_ui_js_1.AAA(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devOrgName, props.authUrl);
+    var value = '';
+    //console.log('userManager', userManager);
+    var _a = (0, react_1.useState)(true), isLoading = _a[0], setIsLoading = _a[1];
+    var isMountedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        // Store current isMounted since this could change while awaiting async operations below
+        isMountedRef.current = true;
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = undefined;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, userManager.getUserInfo()];
+                    case 2:
+                        user = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        window.console.log('Error: ', error_1);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        if (!hasCodeInUrl(window.location)) return [3 /*break*/, 6];
+                        return [4 /*yield*/, (userManager === null || userManager === void 0 ? void 0 : userManager.logincallback())];
+                    case 5:
+                        _a.sent();
+                        cleanBrowserUrl();
+                        setIsLoading(false);
+                        return [2 /*return*/];
+                    case 6: return [4 /*yield*/, (userManager === null || userManager === void 0 ? void 0 : userManager.isAuthenticated())];
+                    case 7:
+                        if (!(_a.sent())) {
+                            userManager === null || userManager === void 0 ? void 0 : userManager.login();
+                        }
+                        else if (isMountedRef.current) {
+                            setIsLoading(false);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+        return function () {
+            isMountedRef.current = false;
+        };
+    }, [window.location, userManager]);
+    return ((0, jsx_runtime_1.jsx)(exports.AuthContext.Provider, __assign({ value: value }, { children: (0, jsx_runtime_1.jsx)(HeaderAndSideBar, __assign({ userManager: userManager, isLoading: isLoading, loader: props.loader, devOrgName: props.devOrgName, controls: props.controls, appId: props.appId, authUrl: props.authUrl }, { children: props.props.children })) })));
+};
+var hasCodeInUrl = function (location) {
+    var searchParams = new URLSearchParams(location.search);
+    var hashParams = new URLSearchParams(location.hash.replace('#', '?'));
+    return Boolean(searchParams.get('code') ||
+        searchParams.get('id_token') ||
+        searchParams.get('session_state') ||
+        searchParams.get('state') ||
+        hashParams.get('code') ||
+        hashParams.get('id_token') ||
+        hashParams.get('session_state') ||
+        hashParams.get('state'));
+};
+var cleanBrowserUrl = function () {
+    var search = window.location.search;
+    if (search &&
+        (search.includes('session_state=') ||
+            search.includes('state=') ||
+            search.includes('code='))) {
+        /*
+         * Use replaceState to redirect the user away and remove the querystring parameters
+         */
+        window.history.replaceState({}, document.title, window.location.href.split('?')[0]);
+    }
+};
+// export { Toast, Modal };
+var OS1Toast = function (props) {
+    var consoleInstance = react_1.default.useContext(exports.ConsoleUIContext);
+    var _a = (0, react_1.useState)(''), authUrl = _a[0], setAuthUrl = _a[1];
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (consoleInstance) {
+            setAuthUrl((_b = (_a = consoleInstance.authInitializer) === null || _a === void 0 ? void 0 : _a.client) === null || _b === void 0 ? void 0 : _b._settings._authority);
+        }
+        var console = console_ui_js_1.ConsoleUiInit.getInstance(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devOrgName, authUrl, props.appId);
+        console.renderToast(props.elementId, props.toastConfig);
+    }, []);
+    return (0, jsx_runtime_1.jsx)("div", { id: props.elementId });
+};
+exports.OS1Toast = OS1Toast;
+var OS1Modal = function (props) {
+    var consoleInstance = react_1.default.useContext(exports.ConsoleUIContext);
+    var _a = (0, react_1.useState)(''), authUrl = _a[0], setAuthUrl = _a[1];
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (consoleInstance) {
+            setAuthUrl((_b = (_a = consoleInstance.authInitializer) === null || _a === void 0 ? void 0 : _a.client) === null || _b === void 0 ? void 0 : _b._settings._authority);
+        }
+        var console = console_ui_js_1.ConsoleUiInit.getInstance(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devOrgName, authUrl, props.appId);
+        console.renderModal('modal-ele', props.modalConfig);
+    }, []);
+    return (0, jsx_runtime_1.jsx)("div", { id: "modal-ele" });
+};
+exports.OS1Modal = OS1Modal;
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@os1-platform/console-ui-react",
+  "version": "0.1.0",
+  "description": "React wrapper for console-ui library",
+  "main": "dist/commonjs/aaa/index.js",
+  "types": "dist/commonjs/types/aaa/index.d.ts",
+  "type": "commonjs",
+  "files": [
+    "tsconfig.json",
+    "/src/*"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "postcss src/css/tailwind.css -o public/build/main.css",
+    "build": "rm -rf dist && tsc -p .",
+    "start": "postcss src/assets/tailwind.css -o src/assets/main.css --watch",
+    "watch:css": "postcss src/css/tailwind.css -o public/build/main.css -w",
+    "dev": "npx tailwindcss -i ./styles/tailwind.css -o ./styles/output.css --watch"
+  },
+  "author": "kshitij.sharma@delhivery.com",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/react-router-dom": "^5.3.3",
+    "autoprefixer": "^10.4.13",
+    "tailwindcss": "^1.2.0"
+  },
+  "dependencies": {
+    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@os1-platform/console-ui-js": "^0.1.0",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@types/react": "^17.0.37",
+    "axios": "^0.21.4",
+    "cssnano": "^5.1.15",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.10.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  }
+}

package/readme.md

@@ -0,0 +1,294 @@
+# @os1-platform/console-ui-react
+
+## Installation and Usage
+
+## How to use?
+
+1. Install **console-ui-react** into your project.
+
+   #### `npm install @os1-platform/console-ui-react`
+
+2. Use `OS1Provider` function of the library to use aunthentication and render header and sidebar. Pass function as a prop to your application that has setState method which sets the state of console Ui Instance.
+
+   ```javascript
+   import { OS1Provider } from '@os1-platform/console-ui-react';
+
+   <OS1Provider
+     clientId={`sampleClientId`} // This is the clientId that you get after creating an app.
+     loginRedirectPath={'/abc'} // path that will be given when someone logins into console ui for the first time
+     logoutRedirectPath={'/'} //path that needs to be redirected when someone logouts from your application.
+     devOrgName={'orgName'} // this is an optional parameter, need only to be passed when using in development mode.
+     appId={'SolutionName-appId'} //initial appId on which you want to land when loading console ui for the first time.
+   >
+     <Initiate setConsole={handleConsoleInstanceChange} /> //This is your
+     component, which is needed to set Instance of Console ui.
+   </OS1Provider>;
+   ```
+
+3. Create Any Component that uses `ConsoleUiContext` and sets that as a state to be used by client application.
+
+   ```javascript
+   import React from 'react';
+   import { ConsoleUIContext } from '@os1-platform/console-ui-react';
+
+   function Initiate(props) {
+     const consoleInstance = React.useContext(ConsoleUIContext);
+     if (consoleInstance) {
+       props.setConsole(consoleInstance);
+     }
+   }
+
+   export default Initiate;
+   ```
+
+4. We can also provide injectable controls to our header and sidebar by passing them as props to OS1Provider.
+
+   ```javascript
+   import { OS1Provider } from "@os1-platform/console-ui-react";
+
+    const controls = [{
+        type: "AutoComplete", //Type can be TextBox,TextBoxButton,DropDown, SearchBox, AutoComplete
+        width: 100, // width as percentage of maximum width that is assigned to injectable component
+        placeholder: "Search Items", // placeHolder text
+        id: "AutoComplete1", //Unique Id which distinguish it with other injectable controls.
+        float: "left", // Option to align items left or right
+        functionBoundOption: autoComplete(), // Function that return value as an array of object in the form of [{ value: string, text: string }]
+    }]
+     <OS1Provider clientId={`sampleClientId`} loginRedirectPath={"/abc"} logoutRedirectPath={"/"} devOrgName={"orgName"} controls ={controls} appId={'SolutionName-appId'}>
+                <Initiate setConsole={handleConsoleInstanceChange} />
+    </OS1Provider>
+   ```
+
+   NOTE: There can not be more than 3 injectable controls and each injectable control should be given a unique id.
+
+5. Use the Toast function to render toast component in your webpage.
+   For example:
+
+   ```javascript
+   const toastConfig = {
+      bgColor: "yellow", // background color of the toast [green,red,yellow,black,white]
+      message: "Operation Successful", // message that will be shown inside the toast [128 character limit]
+      timeout: 10, // time in seconds after which toast will disappear
+      icon: "error", // icon that will be appearing before the message [info,error,warning,success,failure,none]
+      closeButton: true, // denotes whether the close button will be present on the right of the toast
+   }
+
+   <OS1Toast clientId={"sampleClientId"} loginRedirectPath={"/xyz"} logoutRedirectPath={"/"} devOrgName={"orgName"} appId={'sampleAppId'} elementId={"toastElement"} toastConfig={toastConfig} />
+   ```
+
+   NOTE: Each toast element that is to be rendered on the page should be given a unique elementId.
+
+6. Use the Modal function to render a modal component in your webpage.
+   For example:
+
+   ```javascript
+   const modalConfig = {
+     title: 'Deactivate', // Title of the modal [96 characters limit]
+     message: 'Do you want to continue?', // message that will be appearing on the modal
+     icon: 'info', // icon that will be appearing along with the message [info,error,warning,success,failure,none]
+     buttons: [
+       // maximum two buttons allowed
+       {
+         id: 'button-element-1', // unique id of the button
+         backgroundColor: 'green', // background color of the button
+         text: 'Cancel', // text appearing on the button
+         event: 'upEvent', // unique name of the custom event that will be triggered on click
+       },
+     ],
+   };
+   <OS1Modal
+     clientId={'sampleClientId'}
+     loginRedirectPath={'/abc'}
+     logoutRedirectPath={'/'}
+     devOrgName={'orgNme'}
+     appId={'sampleAppId'}
+     elementId={'modalElement'}
+     modalConfig={modalConfig}
+   />;
+   ```
+
+   Note:- Listen to event when button is clicked, `event.details` will contain the modal element Id.
+
+7. Use state variable of `ConsoleUIContext` context to listen to events emitted by injectable controls. This instance is usually passed as a prop to apps.
+   For example:
+
+   ```javascript
+   const { consoleInstance } = props;
+   if (consoleInstance) {
+     consoleInstance
+       .eventBus()
+       .on(consoleInstance.events().OnChangeEvent, (e) =>
+         window.console.log(e)
+       );
+   }
+   ```
+
+   Note:- We are exposing OnChangeEvent, OnBlurEvent, OnScrollEvent, OnClickEvent, OnFocusEvent for injectableId's.
+
+8. Use `OS1HttpClient` API to create a client for network requests and pass `authInitializer` property of ConsoleUiContext as a constructor parameter.
+
+   ```javascript
+   import { OS1HttpClient } from '@os1-platform/console-ui-react';
+
+   class NetworkClient {
+     public readonly instance: any;
+
+     constructor(`instanceName`) {
+       this.instance = OS1HttpClient.createClient({
+        baseURL: `https://abc.domain.com`,
+      },`instanceName`);
+     }
+   }
+   ```
+
+9. Following headers are automatically configured to requests originating from the `NetworkClient` adding Access token(`x-coreos-access`) or Tenant id(`x-coreos-tid`) or User info(`x-coreos-userinfo`) or Auth token(`x-coreos-auth`) headers to the actual request.
+
+   - `withAccess`
+   - `withTid`
+   - `withUserInfo`
+   - `withAuth`
+
+   Note:
+
+   1. By default all these headers are true, pass value against these headers as `false` to remove from request.
+   2. Access token is verified and regenerated (if expired), every time an api request is made.
+   3. `x-coreos-userinfo` contains the userId.
+   4. `x-coreos-auth` contains the id_token.
+
+   ```javascript
+   import NetworkClient from "./networkClient";
+
+   const handleClick = () => {
+   //here consoleInstance is the state variable of ConsoleUIContext;
+       if (consoleInstance) {
+           const client1 = new NetworkClient(consoleInstance.authInitializer); //consoleInstance.authInitializer is an instance of AAA class that we get from ConsoleUi Context
+           const reqHeaders: any = {
+               withAccess: false,
+               withTid: false,
+               withUserInfo: false,
+               withAuth: false,
+           };
+           client1.users.('45', reqHeaders).catch(function (err) {
+           console.log('errr', err);
+           console.log('error', JSON.stringify(err));
+           });
+       };
+   };
+   ```
+
+10. Use Contact Us page, if you want to query about any application.
+
+- We provide text area to describe the issue in details.
+- We provide option to upload screenshots if any, that may help to understand the issue.
+  `We will get the query along with your details and we can contact you.`
+
+11. Option to change the timezone of the application. At initital load, time zone will be tenant specific but user can change the time zone according to his choice and it will be stored in his browser's local Storage.
+
+12. Exposed `convertTime` function that converts time of the user's application in their desired format and `currentTimeZone` function that gives user current timezone that is stored in the browser.
+
+    ```javascript
+    const { consoleInstance } = props;
+    if (consoleInstance) {
+      console.log(
+        consoleInstance.convertTime('2014-06-01 12:00', 'MM-DD-YYYY HH:mm:ss')
+      ); // In this 2nd parameter i.e. format in which we want to convert time is optional.
+      console.log(consoleInstance.currentTimeZone());
+    }
+    ```
+
+13. We have provided that defines how user navigates on Routing of tabs. Users can choose, how they want to navigate for particular app i.e. they want to open the app on new tab or the current tab. This is done by going into user preference in profile dropdown and select the choice in Set App Redirect Behaviour.
+
+14. When user clicks on subroutes, then event naming `changeRoutes` is emitted, which contains the details of subMenu apps and their parent app details like appId, appUrl and appName.
+
+15. If nothing is selected then, when user clicks on app for the first time, it asks how we want to redirect the app.
+
+16. Link to acceess [example app](https://github.com/FoxtrotPlatform/console-ui-sdk/tree/development/example)
+
+## Configuration for Injectable Controls offered by the Library
+
+##### TextBox:-
+
+- To use textbox in console ui, we provide following configuration:-
+
+```javascript
+        {
+            type: "TextBox", // type of injectable control
+            width: 100, // maximum width in percentage that can be given
+            placeholder: "Search Package", // placeholder text
+            float: "left", // aligning the injectable control in left or right direction
+            id: "TextBox1" // unique id that can be given to injectable control
+          attributes: {
+                maxlength: “50”;
+
+  } // this is optional attributes parameter that contains object which defines if any attribute needs to be set to injectable controls
+  }
+```
+
+##### TextBoxButton:-
+
+- To use textbox with button in console ui, we provide following configuration:-
+
+```javascript
+  {
+  type: "TextBoxButton", // type of injectable control
+  width: 100, // maximum width in percentage that can be given
+  placeholder: "Search Package", // placeholder text
+  float: "left", // aligning the injectable control in left or right direction
+  id: "TextBoxButton1" // unique id that can be given to injectable control
+  attributes: {
+  maxlength: “50”;
+  } // this is optional attributes parameter that contains object which defines if any attribute needs to be set to injectable controls
+  button: true, // this by default set to false,
+  buttonText: “Search”, // this field needs to be present when button is true.
+  buttonColor: “red”, // this field needs to be present when button is true.
+  }
+
+```
+
+##### Search Box:-
+
+- To use SearchBox with Lens Icon in console ui, we provide following configuration:-
+
+```javascript
+      {
+          type: "SearchBox", // type of injectable control
+          width: 100, // maximum width in percentage that can be given
+          placeholder: "Search Package", // placeholder text
+          float: "right", // aligning the injectable control in left or right      direction
+          id: "SearchBox1" // unique id that can be given to injectable control
+          attributes: { maxlength: “50”; } // this is optional attributes parameter that contains object which defines if any attribute needs to be set to injectable controls
+           lensIcon: true // this field is optional, if set to true then lensIcon will be shown.
+        }
+
+```
+
+##### AutoComplete:-
+
+- To use AutoComplete in console ui, we provide following configuration:-
+
+```javascript
+  {
+  type: "AutoComplete", // type of injectable control
+  width: 100, // maximum width in percentage that can be given
+  placeholder: "Search Package", // placeholder text
+  float: "right", // aligning the injectable control in left or right direction
+  id: "AutcoComplete1" // unique id that can be given to injectable control
+  functionBoundOption: autoComplete(), // This field can be a function which return array of Objects or normal array of objects in the form of [{ value: string, text: string }],
+  }
+
+```
+
+##### DropDown:-
+
+- To use DropDown in console ui , we provide following configuration:-
+
+```javascript
+  {
+  type: "DropDown", // type of injectable control
+  width: 100, // maximum width in percentage that can be given
+  placeholder: "Search Package", // placeholder text
+  float: "right", // aligning the injectable control in left or right direction
+  id: "DropDown1" // unique id that can be given to injectable control
+  functionBoundOption: [{ value: "1", text: "Mobiles" },{ value:"2", text: "Laptops" }], // This field can be a function which return array of Objects or normal array of objects in the form of [{ value: string, text: string }],
+  }
+```

package/src/aaa/index.tsx

@@ -0,0 +1,318 @@
+import { AAA, ConsoleUiInit, HttpClient } from '@os1-platform/console-ui-js';
+import React, { useEffect, useRef, useState } from 'react';
+import { ModalProps } from '../components/modal/interface';
+import { ToastProps } from '../components/toast/interface';
+import axios from 'axios';
+
+export const AuthContext = React.createContext<any | undefined>(undefined);
+export const ConsoleUIContext = React.createContext<any>(undefined);
+
+const HeaderAndSideBar = (props: any) => {
+  const [consoleInstance, setConsoleInstance] = useState<any>(null);
+
+  useEffect(() => {
+    if (!props.isLoading) {
+      const console = ConsoleUiInit.getInstance(
+        props.clientId,
+        props.loginRedirectPath,
+        props.logoutRedirectPath,
+        props.devOrgName,
+        props.authurl,
+        props.appId,
+        props.userManager
+      );
+
+      setConsoleInstance(console);
+      console.renderHeaderAndSidebar('headerAndSidebar', props.controls);
+    }
+  }, [props.isLoading]);
+
+  if (props.isLoading) {
+    if (props.loader) {
+      return props.loader;
+    } else {
+      const keyframes = `
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+    `;
+      const styleSheets = Array.from(document.styleSheets).filter(
+        (styleSheet) =>
+          !styleSheet.href || styleSheet.href.startsWith(window.location.origin)
+      );
+      for (let style of styleSheets) {
+        if (style instanceof CSSStyleSheet && style.cssRules) {
+          style.insertRule(keyframes, style.cssRules.length);
+        }
+      }
+      const loaderStyle = () => ({
+        marginTop: '50vh',
+        marginLeft: '50vw',
+        border: '12px solid #F3F3F3',
+        borderRadius: '50%',
+        borderTop: '12px solid grey',
+        width: '40px',
+        height: '40px',
+        animationName: 'spin',
+        animationDuration: '2s',
+        animationTimingFunction: 'linear',
+        animationIterationCount: 'infinite',
+      });
+      return <div style={loaderStyle()}></div>;
+    }
+  }
+  //console.log(consoleInstance, props);
+  return (
+    <ConsoleUIContext.Provider value={consoleInstance}>
+      <div id="headerAndSidebar">{props.children}</div>
+    </ConsoleUIContext.Provider>
+  );
+};
+
+interface TenantDTO {
+  tenantId: string;
+  tenantStatus: string;
+  tenantDns: string;
+  stackId: string;
+  stackName: string;
+  organizationShortName: string;
+  organizationBaseDomain: string;
+  stackAuthUrl: string;
+}
+
+const getCleanedDomain = (domain: string) => {
+  const cleanedDomain = String(domain);
+  const splitHost = cleanedDomain.split('.');
+  const org = splitHost[0] || '';
+  const cleanedOrg = org.replace('-cdev', '');
+  const base = splitHost.join('.');
+  return { orgShortName: cleanedOrg, baseDomain: base };
+};
+
+const getTenantFromDevPortal = async (
+  orgShortName: any
+): Promise<TenantDTO> => {
+  const url = `https://api.getos1.com/app/core-api/tenant?orgShortName=${orgShortName}`;
+  const response = await axios.get(url);
+  return response.data.data;
+};
+
+const getTenantId = (devOrgNameArg: string | null = null): string => {
+  let devOrgName = devOrgNameArg;
+  //if (!devOrgNameArg) devOrgName = getAuthConfig().devOrgName;
+
+  const hostname = window.location.hostname || null;
+
+  return hostname
+    ? (hostname.split('.')[0] == 'developer' ||
+        hostname.split('.')[0] == 'developer2' ||
+        hostname.split('.')[0].includes('-cdev')) &&
+      devOrgName
+      ? devOrgName
+      : hostname.split('.')[0]
+    : '';
+};
+
+const getKeyCloakAuthority = async (domain: string, devOrgName: string) => {
+  let orgName: string = '';
+  let baseDomainName: string = '';
+
+  if (devOrgName != undefined) {
+    orgName = devOrgName;
+    baseDomainName = domain.substring(domain.indexOf('.'));
+  } else {
+    const { orgShortName, baseDomain } = getCleanedDomain(domain);
+
+    orgName = orgShortName;
+    baseDomainName = baseDomain;
+  }
+
+  if (baseDomainName.includes('os1')) {
+    const tenant = await getTenantFromDevPortal(orgName);
+
+    return `${tenant.stackAuthUrl}/auth/realms/${tenant.tenantId}`;
+  }
+
+  const tenantId = getTenantId(orgName);
+  //console.log(tenantId);
+  return `https://keycloak${baseDomainName}/auth/realms/${tenantId}`;
+};
+
+const OS1Provider = (props: any) => {
+  const [authUrl, setAuthUrl] = useState('');
+  // const [tenantDns, setTenantDns] = useState('');
+  // let isMountedRef = useRef<boolean>(false);
+
+  let authUrls = '';
+  useEffect(() => {
+    (async function () {
+      authUrls = await getKeyCloakAuthority(
+        window.location.hostname,
+        props.devOrgName
+      );
+      setAuthUrl(authUrls);
+    })();
+  }, []);
+
+  return (
+    <OS1Provider2
+      clientId={props.clientId}
+      loginRedirectPath={props.loginRedirectPath}
+      logoutRedirectPath={props.logoutRedirectPath}
+      devOrgName={props.devOrgName}
+      appId={props.appId}
+      controls={props.controls}
+      authUrl={authUrl}
+      props={...props}
+    />
+  );
+};
+const OS1Provider2 = (props: any) => {
+  //console.log(props);
+  const userManager = new AAA(
+    props.clientId,
+    props.loginRedirectPath,
+    props.logoutRedirectPath,
+    props.devOrgName,
+    props.authUrl
+  );
+  const value = '';
+  //console.log('userManager', userManager);
+  const [isLoading, setIsLoading] = useState(true);
+  let isMountedRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    // Store current isMounted since this could change while awaiting async operations below
+    isMountedRef.current = true;
+    (async () => {
+      let user = undefined;
+      try {
+        user = await userManager!.getUserInfo();
+      } catch (error: any) {
+        window.console.log('Error: ', error);
+      }
+      /**
+       * Check if the user is returning back from OIDC.
+       */
+      if (hasCodeInUrl(window.location)) {
+        await userManager?.logincallback();
+        cleanBrowserUrl();
+        setIsLoading(false);
+        return;
+      }
+
+      if (!(await userManager?.isAuthenticated())) {
+        userManager?.login();
+      } else if (isMountedRef.current) {
+        setIsLoading(false);
+      }
+    })();
+
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [window.location, userManager]);
+
+  return (
+    <AuthContext.Provider value={value}>
+      <HeaderAndSideBar
+        userManager={userManager}
+        isLoading={isLoading}
+        loader={props.loader}
+        devOrgName={props.devOrgName}
+        controls={props.controls}
+        appId={props.appId}
+        authUrl={props.authUrl}
+      >
+        {props.props.children}
+      </HeaderAndSideBar>
+    </AuthContext.Provider>
+  );
+};
+const hasCodeInUrl = (location: Location): boolean => {
+  const searchParams = new URLSearchParams(location.search);
+  const hashParams = new URLSearchParams(location.hash.replace('#', '?'));
+  return Boolean(
+    searchParams.get('code') ||
+      searchParams.get('id_token') ||
+      searchParams.get('session_state') ||
+      searchParams.get('state') ||
+      hashParams.get('code') ||
+      hashParams.get('id_token') ||
+      hashParams.get('session_state') ||
+      hashParams.get('state')
+  );
+};
+
+const cleanBrowserUrl = () => {
+  const search = window.location.search;
+
+  if (
+    search &&
+    (search.includes('session_state=') ||
+      search.includes('state=') ||
+      search.includes('code='))
+  ) {
+    /*
+     * Use replaceState to redirect the user away and remove the querystring parameters
+     */
+    window.history.replaceState(
+      {},
+      document.title,
+      window.location.href.split('?')[0]
+    );
+  }
+};
+
+// export { Toast, Modal };
+
+const OS1Toast = (props: ToastProps) => {
+  const consoleInstance = React.useContext(ConsoleUIContext);
+  const [authUrl, setAuthUrl] = useState('');
+
+  useEffect(() => {
+    if (consoleInstance) {
+      setAuthUrl(consoleInstance.authInitializer?.client?._settings._authority);
+    }
+    const console = ConsoleUiInit.getInstance(
+      props.clientId,
+      props.loginRedirectPath,
+      props.logoutRedirectPath,
+      props.devOrgName,
+      authUrl,
+      props.appId
+    );
+    console.renderToast(props.elementId, props.toastConfig);
+  }, []);
+
+  return <div id={props.elementId}></div>;
+};
+
+const OS1Modal = (props: ModalProps) => {
+  const consoleInstance = React.useContext(ConsoleUIContext);
+  const [authUrl, setAuthUrl] = useState('');
+
+  useEffect(() => {
+    if (consoleInstance) {
+      setAuthUrl(consoleInstance.authInitializer?.client?._settings._authority);
+    }
+    const console = ConsoleUiInit.getInstance(
+      props.clientId,
+      props.loginRedirectPath,
+      props.logoutRedirectPath,
+      props.devOrgName,
+      authUrl,
+      props.appId
+    );
+    console.renderModal('modal-ele', props.modalConfig);
+  }, []);
+
+  return <div id="modal-ele"></div>;
+};
+
+export { OS1Provider, OS1Toast, OS1Modal, HttpClient as OS1HttpClient };

package/src/components/modal/index.tsx

@@ -0,0 +1,18 @@
+// import { ConsoleUiInit } from '@foxtrotplatform/console-ui-sdk';
+// import { useEffect } from 'react';
+// import { ModalProps } from './interface';
+
+// export const OS1Modal = (props: ModalProps) => {
+//   // const console = ConsoleUiInit.getInstance(
+//   //   props.clientId,
+//   //   props.loginRedirectPath,
+//   //   props.logoutRedirectPath,
+//   //   props.devOrgName
+//   // );
+
+//   // useEffect(() => {
+//   //   console.renderModal('modal-ele', props.modalConfig);
+//   // }, []);
+
+//   return <div id="modal-ele"></div>;
+// };

package/src/components/modal/interface.ts

@@ -0,0 +1,32 @@
+export interface ModalConfig {
+    bgColor: string,
+    title: string,
+    message: string,
+    icon: string,
+    buttons: Button[]
+    id?: string,
+}
+
+export interface Button {
+    id: string,
+    backgroundColor: string,
+    text: string,
+    event: string,
+}
+
+export interface ModalProps {
+    clientId: string,
+    loginRedirectPath: string,
+    logoutRedirectPath: string,
+    devOrgName: string,
+    appId: string,
+    elementId: string,
+    modalConfig: ModalConfig;
+}
+
+export interface RouterProps {
+    component: string,
+    path: string,
+    exact: boolean,
+    props?: {} | undefined
+}

package/src/components/toast/index.tsx

@@ -0,0 +1,19 @@
+// import { ConsoleUiInit } from '@foxtrotplatform/console-ui-sdk';
+// import { useEffect } from 'react';
+// import { ToastProps, ToastConfig } from './interface';
+
+// export const OS1Toast = (props: ToastProps) => {
+//   // const console = ConsoleUiInit.getInstance(
+//   //   props.clientId,
+//   //   props.loginRedirectPath,
+//   //   props.logoutRedirectPath,
+//   //   props.devOrgName
+//   // );
+
+//   // useEffect(() => {
+//   //   console.renderToast(props.elementId, props.toastConfig);
+//   //   // console.renderHeaderAndSidebar(document.getElementById('headerAndSidebar'));
+//   // }, []);
+
+//   return <div id={props.elementId}></div>;
+// };

package/src/components/toast/interface.ts

@@ -0,0 +1,20 @@
+export interface ToastConfig {
+    bgColor: string,
+    message: string,
+    timeout?: number,
+    icon: string,
+    closeButton: boolean,
+    id?: string,
+}
+
+export interface ToastProps {
+    clientId: string,
+    loginRedirectPath: string,
+    logoutRedirectPath: string,
+    devOrgName: string,
+    authurl: string,
+    appId: string,
+    userManager: string,
+    elementId: string,
+    toastConfig: ToastConfig;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+//import { AAAInstantiate, HeaderAndSideBar } from "./init";
+import { OS1Provider, ConsoleUIContext } from './aaa';
+// import { OS1Toast } from './components/toast';
+// import { OS1Modal } from './components/modal';
+
+export { OS1Provider, ConsoleUIContext };

package/src/init/index.tsx

@@ -0,0 +1,149 @@
+// import {
+//   AAA,
+//   ConsoleUiInit,
+//   HttpClient as client,
+// } from '@foxtrotplatform/console-ui-sdk';
+// // import { SideNav } from '../components/side-nav';
+// import * as React from 'react';
+// import { useEffect, useLayoutEffect, useState } from 'react';
+// import { AAAElements } from './interface';
+
+// // export class ReactConsoleUiInit {
+// //     public authInitializer: any;
+// //     public console: any;
+// //     public tenantId: string;
+// //     constructor(clientId: string,
+// //         loginRedirectPath: string,
+// //         logoutRedirectPath: string,
+// //         devOrgName: string = '') {
+
+// //         this.console = new ConsoleUiInit(
+// //             clientId,
+// //             loginRedirectPath,
+// //             logoutRedirectPath,
+// //             devOrgName,
+
+// //         );
+
+// //         this.tenantId = devOrgName;
+// //     }
+
+// //     HeaderAndSideBar = () => {
+
+// //         return (
+// //             <div id='app'>
+// //                 Hello
+// //             </div>
+// //         )
+// //     }
+
+// //     // headerAndSideBar() {
+// //     //     const headerAndSideBar = new SideNav(this.tenantId, this.authInitializer);
+// //     //     return headerAndSideBar.render();
+// //     // }
+// // }
+// let count: number = 0;
+
+// export const AAAInstantiate = (aaaElements: AAAElements) => {
+//   const aaa: any = new AAA(
+//     aaaElements.clientId,
+//     aaaElements.loginRedirectPath,
+//     aaaElements.logoutRedirectPath,
+//     aaaElements.devOrgName
+//   );
+//   return aaa;
+// };
+
+// export const HeaderAndSideBar = (props: any) => {
+//   count++;
+//   window.console.log('Count: ', count);
+
+//   // const [aaaInstance, setAaaInstance] = useState<any>(null);
+//   const [consoleInstance, setConsoleInstance] = useState<any>(null);
+//   // const [userSignedIn, setUserSignedInstance] = useState<boolean>(true);
+//   // const aaa: any = new AAA(
+//   //     props.clientId,
+//   //     props.loginRedirectPath,
+//   //     props.logoutRedirectPath,
+//   //     props.devOrgName,
+//   // );
+//   // setAaaInstance(aaa);
+//   useEffect(() => {
+//     window.console.log('aaaInstance.client: ', props.aaaInstance.client);
+//     if (hasCodeInUrl(window.location)) {
+//       return;
+//     }
+//     if (props.aaaInstance.client) {
+//       // const aaa: any = new AAA(
+//       //     props.clientId,
+//       //     props.loginRedirectPath,
+//       //     props.logoutRedirectPath,
+//       //     props.devOrgName,
+//       // );
+
+//       (async () => {
+//         await props.aaaInstance.login();
+//         // setAaaInstance(aaa);
+//         // setUserSignedInstance(false);
+//       })();
+//     }
+//   }, []);
+
+//   // useEffect(() => {
+//   //     window.console.log("AAAINSTANCE: ", props.aaaInstance);
+//   //     const console: any = new ConsoleUiInit(
+//   //         props.clientId,
+//   //         props.loginRedirectPath,
+//   //         props.logoutRedirectPath,
+//   //         props.devOrgName,
+//   //         props.aaaInstance,
+//   //     );
+//   //     setConsoleInstance(console);
+
+//   // }, [props.aaaInstance]);
+
+//   // useEffect(() => {
+//   //     window.console.log("Initialization called: ", consoleInstance);
+//   //     if (consoleInstance && props.aaaInstance) {
+//   //         window.console.log("ConsoleInstance");
+//   //         (async () => {
+//   //             // window.console.log("Get TOken: ", await aaaInstance.getToken());
+//   //             // if (await aaaInstance.isAuthenticated()) {
+//   //             //     window.console.log("IsUserLoaded[authenticated]: ", aaaInstance.isUserLoaded);
+//   //             //     window.console.log("Is Authenticated true");
+//   //             //     consoleInstance.renderHeaderAndSidebar(document.getElementById('headerAndSidebar') as HTMLDivElement);
+//   //             // } else {
+//   //             //     window.console.log("IsUserLoaded: ", aaaInstance.isUserLoaded);
+//   //             //     if (!aaaInstance.isUserLoaded) {
+//   //             //         window.console.log("Login fn called");
+//   //             //         await aaaInstance.login();
+//   //             //     }
+//   //             // }
+//   //             // aaaInstance.loginOnload();
+//   //         })()
+
+//   //     }
+//   // }, [consoleInstance]);
+
+//   // (async () => {
+//   //     const token = await aaaInstance.getToken();
+//   //     window.console.log("Token: ", token);
+//   // })()
+
+//   return <div id="headerAndSidebar"></div>;
+// };
+
+// const hasCodeInUrl = (location: Location): boolean => {
+//   const searchParams = new URLSearchParams(location.search);
+//   const hashParams = new URLSearchParams(location.hash.replace('#', '?'));
+//   return Boolean(
+//     searchParams.get('code') ||
+//       searchParams.get('id_token') ||
+//       searchParams.get('session_state') ||
+//       searchParams.get('state') ||
+//       hashParams.get('code') ||
+//       hashParams.get('id_token') ||
+//       hashParams.get('session_state') ||
+//       hashParams.get('state')
+//   );
+// };

package/src/init/interface.ts

@@ -0,0 +1,6 @@
+export interface AAAElements {
+    clientId: string,
+    loginRedirectPath: string,
+    logoutRedirectPath: string,
+    devOrgName: string,
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": true,
+    "strict": true,
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noImplicitReturns": true,
+    "inlineSources": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "experimentalDecorators": true,
+    "typeRoots": ["./node_modules/@types"],
+    "declarationDir": "./dist/commonjs/types",
+    "outDir": "./dist/commonjs",
+    "lib": ["ES2015", "dom", "DOM.Iterable", "ESNext"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "test"]
+}