@zeesoft/i18n-verify 1.0.0 → 2.0.1

package/dist/lib/config.js

@@ -40,6 +40,9 @@ class Config {
   static getGarbledChars() {
     return [...(this.#options.garbledChars || []), ..._constants.GARBLED_CHARACTERS];
   }
+  static getL10nReportsPath() {
+    return this.#options.l10nReportsPath;
+  }
   static setDriver(driver) {
     this.#driver = driver;
   }

package/dist/utils/configFile.js

@@ -12,6 +12,7 @@ const getConfigTemplate = (type = '') => `{
     "type": "${type}", // set automation framework type ${(0, _common.arr2Txt)(Object.values(_constants.SYSTEM_TYPES))}
     "qaLocale": "", // set the qa locale used in your project
     "l10nResourcePath": "./l10nResources", // set the dir path of l10n resources
+    "l10nReportsPath": "./l10nReports/", // set the dir path of l10n reports
     "supportedLocales": ["en_US", "fr_FR", "ja_JP"], // set the list of supported locales
     "defaultLocale": "en_US", // set default locale of the application
     "qaMock": { // set the prefix and suffix characters of qa locale
@@ -48,7 +49,7 @@ const validateConfig = config => {
 
   // add required property validations
   const missingKeys = [];
-  if (!(0, _common.allPropertyExists)(['l10nResourcePath', 'supportedLocales', 'defaultLocale', 'type'], config, missingKeys)) {
+  if (!(0, _common.allPropertyExists)(['l10nResourcePath', 'l10nReportsPath', 'supportedLocales', 'defaultLocale', 'type'], config, missingKeys)) {
     throw new Error(`following properties are missing in ${_constants.CONFIG_FILE_NAME} file: ${(0, _common.arr2Txt)(missingKeys)}`);
   }
   if (!Object.values(_constants.SYSTEM_TYPES).includes(config?.type || '')) {

package/dist/utils/reportFactory/html/index.js

@@ -10,7 +10,7 @@ var _logs = _interopRequireDefault(require("../../logs.js"));
 var _base = _interopRequireDefault(require("../base.js"));
 var _css = require("./template/css.js");
 var _html = require("./template/html.js");
-var _javascript = require("./template/javascript.js");
+var _index = _interopRequireDefault(require("./template/javascript/index.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class HtmlReport extends _base.default {
   constructor() {
@@ -18,9 +18,9 @@ class HtmlReport extends _base.default {
   }
   buildContent() {
     const metaInfo = this.getMetaInfo();
-    const script = (0, _javascript.getJsData)(metaInfo);
+    const script = (0, _index.default)(metaInfo);
     const style = (0, _css.getCssData)();
-    const body = (0, _html.getBodyData)(metaInfo);
+    const body = (0, _html.getBodyData)();
     return (0, _html.renderHtml)({
       appName: metaInfo.appName,
       reportTime: metaInfo.reportTime,

package/dist/utils/reportFactory/html/template/css.js

@@ -6,14 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.getCssData = void 0;
 const getCssData = () => `
   * {
-    user-select: none;
-  }
+      user-select: none;
+    }
 
   body {
     margin: 0;
     display: flex;
     flex-direction: column;
     font-family: Arial, sans-serif;
+    font-family: "Helvetica Neue", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased; /* Webkit-based browsers */
+    -moz-osx-font-smoothing: grayscale; /* Firefox on OS X */
+    font-smooth: always; /* Non-standard, some browsers */
   }
 
   header {
@@ -29,7 +33,7 @@ const getCssData = () => `
   }
 
   .sidebar {
-    width: 250px;
+    width: 16rem;
     height: 100%;
     background-color: #333;
     color: #fff;
@@ -77,7 +81,13 @@ const getCssData = () => `
   }
 
   .menu-item.has-submenu > a::after {
-    content: '▼';
+    content: "⯆";
+    float: right;
+    margin-left: 5px;
+  }
+
+  .menu-item.has-submenu.selected > a::after {
+    content: "⯅";
     float: right;
     margin-left: 5px;
   }
@@ -86,6 +96,10 @@ const getCssData = () => `
     background-color: #555;
   }
 
+  .submenu .sub-menu-item {
+    margin: 3px auto;
+  }
+
   .submenu .sub-menu-item a:hover {
     background-color: #777;
   }
@@ -99,10 +113,11 @@ const getCssData = () => `
   }
 
   .content-wrapper {
-    padding: 20px;
+    padding: 1rem;
     float: left;
-    width: calc(100% - 250px);
+    width: calc(100% - 16rem);
     background-color: #f4f4f4;
+    overflow: hidden;
   }
 
   .content {
@@ -112,21 +127,287 @@ const getCssData = () => `
   .content .title {
     font-size: 1rem;
     color: #080404e2;
+    font-weight: 600;
   }
 
   .content .title::after {
-    content: ':';
+    content: ":";
   }
 
   .content.active {
     display: flex !important;
     flex-direction: column;
+    gap: 0.9rem;
+    flex-wrap: wrap;
+    transition: all 2s ease-in-out;
+  }
+
+  .sidebar .footer {
+    bottom: 5px;
+    position: absolute;
+    font-size: 12.4px;
+    color: #14cf96;
+    font-family: system-ui;
+  }
+
+  #overview {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  #overview .card {
+    display: flex;
+    flex-direction: column;
+    width: 25rem;
+    height: 12.5rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background: white;
+    padding: 1rem;
+  }
+
+  #overview .overall-quality {
+    height: 20rem;
+    flex-basis: 100%;
+    line-height: 14px;
+  }
+
+  #overview .overall-quality .section {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #overview .overall-quality .section .block {
+    width: 50%;
+  }
+
+  #overview .overall-quality .section .block article {
+    padding: 5px;
+  }
+
+  #overview .overall-quality .section .block article p.desc {
+    font-size: 0.9em;
+  }
+
+  #overview .overall-quality .section .block article .items li {
+    font-size: 0.87em;
+  }
+
+  #overview .overall-quality .section .block article .items li .detail {
+    margin-top: -10px;
+  }
+
+  #overview .overall-quality .section .block .graph {
+    margin-top: 1.5em;
+  }
+
+  #overview .string-quality,
+  #overview .number-quality,
+  #overview .datetime-quality,
+  #overview .skipped-items {
+    flex-basis: 45%;
+  }
+
+  #overview .string-quality .graph,
+  #overview .number-quality .graph,
+  #overview .datetime-quality .graph,
+  #overview .skipped-items .graph {
+    align-self: center;
+  }
+
+  #overview .string-quality .graph {
+    margin-left: 4rem;
+  }
+
+  #overview .number-quality.card,
+  #overview .datetime-quality.card {
+    height: 13rem;
+  }
+
+  #overview .number-quality .graph,
+  #overview .datetime-quality .graph {
+    margin-top: -0.9rem;
+    margin-left: 4.5rem;
+  }
+
+  #insights .cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  #insights .cards .holder {
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  #insights .cards .card {
+    display: flex;
+    flex-direction: column;
+    width: 20rem;
+    min-height: 10rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background: white;
+  }
+
+  #insights .cards .card:hover {
+    transform: scale(1.015);
+    box-shadow: 0 22px 35px -16px #07ff7d33;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+  }
+
+  #insights .cards .card .title {
+    height: 2.5rem;
+    font-size: 1rem;
+    padding-top: 1rem;
+    font-weight: 500;
+    width: calc(100% - 1rem);
+    background: #0c5ad9d6;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    padding-left: 1rem;
+    color: white;
+  }
+
+  #insights .cards .card .title::after {
+    content: "";
+  }
+
+  #insights .cards .card .card-content {
+    display: flex;
+    flex-direction: column;
     gap: 1rem;
+    padding: 1rem;
+  }
+
+  #insights .cards .card .status-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  #insights .cards .card .status-bar .bar-container .name {
+    font-size: 0.78rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  #insights .cards .card .status-bar .bar-container .name::after {
+    content: ":";
+  }
+
+  #insights .cards .card .status-bar .bar-container .bar-holder {
+    width: 100%;
+    height: 10px;
+    border: 1px solid #00000038;
+    border-radius: 2px;
+  }
+
+  #insights .cards .card .status-bar .bar-container .bar-holder .bar {
+    background-color: #14cf96;
+    height: 100%;
+    font-size: 0.63rem;
+    text-align: right;
+    color: white;
+  }
+
+  #insights .cards .card .stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    border: 0.5px solid #00000012;
+    border-radius: 6px;
+  }
+
+  #insights .cards .card .stat table td {
+    font-size: 0.78rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  #insights .cards .card .stat table td.name {
+    width: 70%;
+  }
+
+  #insights .cards .card .stat table td.value::before {
+    content: ":  ";
+  }
+
+  #locale {
+    background: white;
+    padding: 12px;
+    border-radius: 5px;
+    padding-top: 20px;
+  }
+
+  #locale .title {
+    content: ":";
+  }
+
+  #locale .coverage-info {
+    margin-top: 1rem;
+    width: 100%;
+    height: 80vh;
+    padding-right: 1rem;
+    padding-left: 0.1rem;
+  }
+
+  #locale table thead th select.filter {
+    margin-left: 1rem;
+    max-width: 8rem;
+    text-overflow: ellipsis;
+  }
+
+  #locale .image-viewer {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    text-align: center;
+  }
+
+  #locale .image-container {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-block;
+  }
+
+  #locale .image-viewer img {
+    max-width: 90%;
+    max-height: 90%;
+  }
+
+  #locale .close-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    color: #ffffffbf;
+    font-size: 3.1rem;
+    cursor: pointer;
+  }
+
+  #locale .close-button:hover {
+    color: white;
+  }
+
+  #locale table td .view-screenshot-btn {
+    color: blue;
   }
 
   @media (max-width: 768px) {
     .sidebar {
-      width: 100%;
+      width: 16rem;
       padding: 10px;
     }
   }`;

package/dist/utils/reportFactory/html/template/html.js

@@ -24,6 +24,22 @@ const renderHtml = ({
       content="I18n verification report"
     />
     <title>I18n Verification Report | ${reportTime}</title>
+        <!-- 3rd party dependecies -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css"
+    />
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
+      integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
+      crossorigin="anonymous"
+      defer
+    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts" defer></script>
+    <script
+      src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"
+      defer
+    ></script>
     <style>
       ${style}
     </style>
@@ -37,7 +53,7 @@ const renderHtml = ({
 </html>
 `;
 exports.renderHtml = renderHtml;
-const getBodyData = () => ` <header><div class="logo">zI18n-Verify</div></header>
+const getBodyData = () => `<header><div class="logo">zI18n-Verify</div></header>
     <main>
       <div class="sidebar">
         <ul class="menu" id="menu">
@@ -46,33 +62,96 @@ const getBodyData = () => ` <header><div class="logo">zI18n-Verify</div></header
           </li>
           <li class="menu-item has-submenu" data-page="insights">
             <a href="#" data-page="insights">Insights</a>
-            <ul class="submenu">
-              <li class="sub-menu-item" data-locale="en_US">
-                <a href="#">en_US</a>
-              </li>
-              <li class="sub-menu-item" data-locale="fr_CA">
-                <a href="#">fr_CA</a>
-              </li>
-            </ul>
+            <ul class="submenu"></ul>
           </li>
         </ul>
+        <div class="footer"></div>
       </div>
       <div class="content-wrapper">
         <div id="overview" class="content">
-          <div class="overall-quality">
-            <span class="title">Overall I18n Quality</span>
+          <div class="overall-quality card">
+            <span class="title">Overall I18n Coverage</span>
+            <div class="section">
+              <div class="block">
+                <article>
+                  <p class="desc">
+                    zI18n-Verify report provides a comprehensive information
+                    about the I18n and L10n quailty of your application.
+                  </p>
+                  <ul class="items">
+                    <li>
+                      <h4>Reviewed:</h4>
+                      <p class="detail">
+                        Total strings which are captured and processed by
+                        zI18n-Verify.
+                      </p>
+                    </li>
+                    <li>
+                      <h4>Internationlized:</h4>
+                      <p class="detail">
+                        Different types of value like string, number, date-time
+                        which are properly Internationalized.
+                      </p>
+                    </li>
+                    <li>
+                      <h4>Not Internationalized:</h4>
+                      <p class="detail">
+                        Values which are not Internationalized. Also includes
+                        Partially Localized strings and Encoding Issues.
+                      </p>
+                    </li>
+                    <li>
+                      <h4>Skipped:</h4>
+                      <p class="detail">
+                        Values which are skipped from processing because they
+                        are listed in DNT / Ignored lists or contains Auto
+                        Ignored pattern / User input pattern.
+                      </p>
+                    </li>
+                  </ul>
+                </article>
+              </div>
+              <div class="block">
+                <div class="graph"></div>
+              </div>
+            </div>
+          </div>
+          <div class="string-quality card">
+            <span class="title">String Coverage</span>
+            <div class="graph"></div>
+          </div>
+          <div class="skipped-items card">
+            <span class="title">Skipped Items</span>
+            <div class="graph"></div>
+          </div>
+          <div class="number-quality card">
+            <span class="title">Number Coverage</span>
+            <div class="graph"></div>
+          </div>
+          <div class="datetime-quality card">
+            <span class="title">DateTime Coverage</span>
+            <div class="graph"></div>
           </div>
-          <div><span class="title">String Quality</span></div>
-          <div><span class="title">Number Quality</span></div>
-          <div><span class="title">DateTime Quality</span></div>
         </div>
         <div id="insights" class="content">
           <div class="cards">
-            <span class="title">Locale wise info cards</span>
+            <span class="title">Locale Quality</span>
+            <div class="holder"></div>
           </div>
         </div>
         <div id="locale" class="content">
-          <div class="string-data"><span class="title">String Data</span></div>
+          <span class="title">Locale Quality</span>
+          <div class="coverage-info">
+            <table class="row-border hover order-column stripe"></table>
+          </div>
+          <div id="imageViewer" class="image-viewer">
+            <span class="close-button" onclick="closeImageViewer()"
+              >&times;</span
+            >
+            <div class="image-container">
+              <img id="imageView" src="" alt="Image" />
+            </div>
+          </div>
         </div>
       </div>
     </main>`;

package/dist/utils/reportFactory/html/template/javascript/data.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = (locales, stats, statsByLocale) => ``;
+exports.default = _default;