empower-container 0.1.3 → 0.1.6

package/dist/scss/components/_modal.scss

@@ -1,5 +1,5 @@
 /* Modal */
-.e-modal{
+.em-modal{
     position: fixed;
     top: 0;
     left: 0;
@@ -9,47 +9,58 @@
     padding: 30px 15px;
     display: flex;
     justify-content: center;
-    overflow: auto;
+    overflow: auto; 
+    
+    &:before{
+        content: '';
+        width: 100vw;
+        height: 100vh;
+        z-index: 9000;
+        position: fixed;
+        top: 0;
+        left: 0;
+        opacity: 0.9;
+        background: linear-gradient(to bottom, rgba(13,14,28,0.9), rgba(8,19,117,0.9));
+    }
 }
 
-.e-modal .e-modal-container{
+.em-modal-container{
     position: relative;
     z-index: 9001;
     margin: auto;
     display: flex;
     height: initial;
-}
 
-.e-modal .e-modal-container  > div{
-    margin: auto;
+    > div{
+        margin: auto;
+    }
 }
 
-.e-modal:before{
-    content: '';
-    width: 100vw;
-    height: 100vh;
-    z-index: 9000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    opacity: 0.9;
-    background: linear-gradient(to bottom, rgba(13,14,28,0.9), rgba(8,19,117,0.9));
-}
+.em-card {
+    background-color: $white;
+    padding: 5px;
+    box-shadow: $shadow-card;
+    border-radius: 10px;
 
-.e-modal .card.modal-sm{
-    width: 100vw;
-    max-width: 400px;
-    margin: 0 auto;
-}
+    &.modal-sm{
+        width: 100vw;
+        max-width: 400px;
+        margin: 0 auto;
+    }
 
-.e-modal .card.modal-md{
-    width: 100vw;
-    max-width: 600px;
-    margin: 0 auto;
+    &.modal-md{
+        width: 100vw;
+        max-width: 600px;
+        margin: 0 auto;
+    }
+
+    &.modal-lg{
+        width: 100vw;
+        max-width: 960px;
+        margin: 0 auto;
+    } 
 }
 
-.e-modal .card.modal-lg{
-    width: 100vw;
-    max-width: 960px;
-    margin: 0 auto;
+.em-card-content {
+    padding: 15px;   
 }

package/dist/scss/elements/_button.scss

@@ -1,5 +1,3 @@
-@use '../foundation' as *;
-
 .button{
   display: inline-flex;
   align-items: center;
@@ -105,5 +103,5 @@
               color: $gray;
           }
       }
-  } 
+    } 
 } 

package/dist/scss/elements/_popover.scss

@@ -1,40 +1,8 @@
-@use '../foundation' as *;
-
-.MuiPopover-root .MuiPopover-paper {
-    box-shadow: none;
-    overflow: visible;
-
-}
-
-
-.popover.em-popover-input .button-check {
-    border-radius: 10px;
-    height: 40px;
-    width: 40px;
-}
-
-.popover.em-popover-input .button-check svg path{
-    fill: #393F5A;
-}
-
-.popover.em-popover-input .button-check:hover {
-    background-color: $blue-light1;
-}
-
-.card{
+.em-popover {
     background-color: $white;
-    padding: 5px;
-    box-shadow: 0 30px 60px rgb(0 0 0 / 20%);
-    border-radius: 10px;
-}
-
-.card .card-belt{
-    padding: 10px 15px;
-    min-height: 40px;
-    box-shadow: none;
-    background-color: transparent;
-}
-
-.card .card-content{
-    padding: 15px;
+    border-top: 5px solid $blue-light4;
+    border-bottom-left-radius: $border-radius-md;
+    border-bottom-right-radius: $border-radius-md;
+    box-shadow: $shadow-popover;
+    max-width: 650px;
 }

package/dist/scss/foundation/_mixins.scss

@@ -1,5 +1,3 @@
-@use 'settings' as *;
-
 // Breakpoint: Smaller devices
 @mixin xs {
     @media (min-width: #{$screen-xs-min}) {

package/dist/scss/foundation/_typography.scss

@@ -1,7 +1,3 @@
-@use 'colors' as *;
-@use 'mixins' as *;
-@use 'settings' as *;
-
 body {
     font-family: 'Roboto', sans-serif;
 }

package/dist/scss/library/_information.scss

@@ -0,0 +1,68 @@
+.em-belt-info {
+    position: relative;
+
+    .em-info-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        width: 40px;
+        border-radius: $border-radius-md;
+
+        &:hover {
+            background-color: $blue-light;
+    
+            svg {
+                path {
+                    stroke: #5C7FF3;
+                }
+
+                circle {
+                    fill: #5C7FF3;
+                }
+            }
+        }
+    }
+}
+
+.em-popover-i {      
+    background-color: $white;  
+    width: 650px;
+    border-bottom-left-radius: $border-radius-md;
+    border-bottom-right-radius: $border-radius-md;
+
+    .em-popover-i-content {
+        > div {
+            max-height: calc(75vh - 120px);
+            overflow-y: auto;
+            border-bottom: 1px solid $gray-light1;
+            padding: 15px;
+
+            &:last-of-type {
+                border: none;
+                border-bottom-left-radius: $border-radius-md;
+                border-bottom-right-radius: $border-radius-md;
+            }
+        }
+
+        .em-popover-i-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .em-popover-i-category {
+            display: flex;
+            justify-content: space-between;
+
+            &:hover {
+                cursor: pointer;
+                background-color: $gray-light;
+            }
+        }
+
+        .em-popover-i-close {
+            cursor: pointer;
+        }
+    }
+}

package/dist/scss/library/{input.scss → _input.scss}

@@ -1,5 +1,3 @@
-@use '../foundation' as *;
-
 .em-input {
     position: relative;
     width: 100%;

package/dist/scss/library/{menubar.scss → _menubar.scss}

@@ -1,5 +1,3 @@
-@use '../foundation' as *;
-
 .em-card-belt {
     display: flex;
     justify-content: space-between;

package/{src/scss/library/select.scss → dist/scss/library/_select.scss}

@@ -1,5 +1,3 @@
-@use '../foundation' as *;
-
 .em-select {
     position: relative;
     width: 100%;
@@ -66,8 +64,6 @@
     background-color: $white;
     font-size: 0.875rem;
     color: $gray-dark;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
     border-top: 5px solid $blue;
     box-shadow: 0 15px 30px 0 rgb(19 37 154 / 15%);  
     z-index: 100; 

package/dist/scss/style.scss

@@ -1,8 +1,24 @@
+@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700|Roboto:400,400i,700&display=swap");
 
-@use 'components';
-@use 'foundation';
-@use 'elements';
-@use 'library';
+@import 'foundation/colors';
+@import 'foundation/settings';
+@import 'foundation/mixins';
+@import 'foundation/typography';
+@import 'foundation/normalize';
+@import 'components/modal';
+@import 'elements/button';
+@import 'elements/popover';
+@import 'library/input';
+@import 'library/menubar';
+@import 'library/select';
+@import 'library/information';
 
-@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700|Roboto:400,400i,700&display=swap");
+body {
+    font-family: 'Roboto', sans-serif;
+}
 
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "empower-container",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "private": false,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -11,11 +11,14 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
-    "@types/react": "^17.0.40",
+    "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.13",
+    "html-to-text": "^8.1.0",
     "react": "^17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "^17.0.2",
+    "react-native": "^0.68.0",
+    "react-native-render-html": "^6.3.4",
     "react-render-html": "^0.6.0",
     "react-scripts": "5.0.0",
     "sass": "^1.49.9",
@@ -33,7 +36,7 @@
     "dist": "npm run  build:esm && npm run  build:cjs && npm run copy-files",
     "build:esm": "tsc -b src/main/",
     "build:cjs": "tsc -p src/main/tsconfig.common.json",
-    "copy-files": "cp -r ./src/scss/ ./dist/ && cp -r ./src/main/assets/ ./dist/",
+    "copy-files": "cp -r ./src/scss/ ./dist/",
     "dev": "npx tsc -p src/sample/tsconfig.json -w"
   },
   "eslintConfig": {

package/src/main/DatetimeFormatter.js

@@ -135,6 +135,8 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         newFormat = dayName + ", " + dayDate + " " + monthName + " " + year;
                         break;
                     case "momentsAgo":
+                        var diff = 0;
+                        var diffMinute = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -143,28 +145,28 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                             else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    var diff = todayTS - dateTS;
+                                    diff = todayTS - dateTS;
                                     if (diff === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    var diffHour = diff / 3600;
-                                    diffHour = ~~diffHour;
-                                    newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
+                                    var diffHour_1 = diff / 3600;
+                                    diffHour_1 = ~~diffHour_1;
+                                    newFormat = diffHour_1 === 1 ? "An hour ago" : diffHour_1 + " hours ago";
                                 }
                                 else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        var diff = todayTS - dateTS;
+                                        diff = todayTS - dateTS;
                                         if (diff === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        var diffMinute = diff / 60;
+                                        diffMinute = diff / 60;
                                         diffMinute = ~~diffMinute;
                                         newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
                                     }
                                     else {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0 || diff <= 10) {
+                                        var diff_1 = todayTS - dateTS;
+                                        if (diff_1 === 0 || diff_1 <= 10) {
                                             newFormat = "Few seconds ago";
                                         }
                                         else {
@@ -179,6 +181,7 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         }
                         break;
                     case "momentsAgoConvo":
+                        var diffHour = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -187,28 +190,28 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                             else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    var diff = todayTS - dateTS;
-                                    if (diff === 0) {
+                                    var diff_2 = todayTS - dateTS;
+                                    if (diff_2 === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    var diffHour = diff / 3600;
+                                    diffHour = diff_2 / 3600;
                                     diffHour = ~~diffHour;
                                     newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
                                 }
                                 else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0) {
+                                        var diff_3 = todayTS - dateTS;
+                                        if (diff_3 === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        var diffMinute = diff / 60;
-                                        diffMinute = ~~diffMinute;
-                                        newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
+                                        var diffMinute_1 = diff_3 / 60;
+                                        diffMinute_1 = ~~diffMinute_1;
+                                        newFormat = diffMinute_1 === 1 ? "A minute ago" : diffMinute_1 + " minutes ago";
                                     }
                                     else {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0 || diff <= 10) {
+                                        var diff_4 = todayTS - dateTS;
+                                        if (diff_4 === 0 || diff_4 <= 10) {
                                             newFormat = "Few moments ago";
                                         }
                                         else {
@@ -227,11 +230,11 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
-                                var diff = todayTS - dateTS;
-                                if (diff === 0) {
+                                var diff_5 = todayTS - dateTS;
+                                if (diff_5 === 0) {
                                     newFormat = "1 day";
                                 }
-                                var diffDay = diff / 86400;
+                                var diffDay = diff_5 / 86400;
                                 diffDay = ~~diffDay;
                                 newFormat = diffDay === 1 ? "1 day" : diffDay + " days";
                             }

package/src/main/DatetimeFormatter.tsx

@@ -137,6 +137,8 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                         newFormat = dayName + ", " + dayDate + " " + monthName + " " + year;
                         break;
                     case "momentsAgo":
+                        let diff = 0;
+                        let diffMinute = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -144,7 +146,7 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                             } else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    let diff = todayTS - dateTS;
+                                    diff = todayTS - dateTS;
                                     if (diff === 0) {
                                         newFormat = "An hour ago";
                                     }
@@ -154,11 +156,11 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                                 } else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        let diff = todayTS - dateTS;
+                                        diff = todayTS - dateTS;
                                         if (diff === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        let diffMinute = diff / 60;
+                                        diffMinute = diff / 60;
                                         diffMinute = ~~diffMinute
                                         newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
                                     } else {
@@ -177,6 +179,7 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
 
                         break;
                     case "momentsAgoConvo":
+                        let diffHour = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -188,7 +191,7 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                                     if (diff === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    let diffHour = diff / 3600;
+                                    diffHour = diff / 3600;
                                     diffHour = ~~diffHour
                                     newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
                                 } else {

package/src/main/Information.js

@@ -22,16 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-// @ts-ignore
-var react_render_html_1 = __importDefault(require("react-render-html"));
 var Information = function (_a) {
     var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
     var _b = (0, react_1.useState)(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
+    var renderHtml = function (html) {
+        return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
+    };
     var showRowDetails = function (e, idx) {
         e && e.preventDefault();
         if (rowAnchorEl === idx) {
@@ -44,22 +42,22 @@ var Information = function (_a) {
     };
     var View = function () {
         return react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "popover popover-i" }, typeof desc != 'undefined' && desc ? (react_1.default.createElement("div", { className: "popover-i-content" },
-                react_1.default.createElement("div", { className: "popover-i-title" },
+            react_1.default.createElement("div", { className: "em-popover-i" }, typeof desc != 'undefined' && desc ? (react_1.default.createElement("div", { className: "em-popover-i-content" },
+                react_1.default.createElement("div", { className: "em-popover-i-title" },
                     react_1.default.createElement("h6", null, title),
-                    react_1.default.createElement("div", { className: "popover-i-close", onClick: hide })),
-                react_1.default.createElement("div", null, typeof items != 'undefined' && items ? (0, react_render_html_1.default)(items) : ''))) : (react_1.default.createElement("div", { className: "popover-i-content" },
-                react_1.default.createElement("div", { className: "popover-i-title" },
+                    react_1.default.createElement("div", { className: "em-popover-i-close", onClick: hide })),
+                react_1.default.createElement("div", null, typeof items != 'undefined' && items ? renderHtml(items) : ''))) : (react_1.default.createElement("div", { className: "em-popover-i-content" },
+                react_1.default.createElement("div", { className: "em-popover-i-title" },
                     react_1.default.createElement("h6", null, title),
-                    react_1.default.createElement("div", { className: "popover-i-close", onClick: hide })),
+                    react_1.default.createElement("div", { className: "em-popover-i-close", onClick: hide })),
                 listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (react_1.default.createElement(react_1.default.Fragment, { key: key },
-                    react_1.default.createElement("div", { className: "popover-i-category", onClick: function (event) { return showRowDetails(event, key); } },
+                    react_1.default.createElement("div", { className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } },
                         react_1.default.createElement("div", null,
                             react_1.default.createElement("h6", null, item)),
                         rowAnchorEl === key ? (react_1.default.createElement("img", { src: "/images/icons/icon-arrowup-gray.svg", alt: "" })) : (react_1.default.createElement("img", { src: "/images/icons/icon-arrowdown-gray.svg", alt: "" }))),
-                    rowAnchorEl === key ? (react_1.default.createElement("div", { className: "popover-i-details" }, item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? (0, react_render_html_1.default)(items.companyPolicy) : '') :
-                        (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? (0, react_render_html_1.default)(items.systemPolicy) : '') :
-                            (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? (0, react_render_html_1.default)(items.instruction) : '')))) : null)); })) : null) : null))));
+                    rowAnchorEl === key ? (react_1.default.createElement("div", { className: "em-popover-i-details" }, item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
+                        (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
+                            (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')))) : null)); })) : null) : null))));
     };
     return View();
 };