@eui/tools 5.3.90 → 6.1.1

package/scripts/csdr/audit/styles.js

@@ -0,0 +1,457 @@
+'use strict';
+
+// GLOBAL
+const path = require('path');
+const glob = require('glob');
+
+// LOCAL
+const tools = require('../../utils/tools');
+const notificationUtils = require('../../utils/notification/notification-utils');
+
+
+const runStylesAudit = module.exports.runStylesAudit = (pkg) => {
+
+  const generateIndicesContent = (indices, file, fileContent) => {
+    let content = [];
+
+    indices.forEach((i) => {
+      for (var pos = i-1; pos >=0; pos--) {
+        if (fileContent.charAt(pos) === '\n') {
+          break;
+        }
+      }
+      const remaining = fileContent.substring(pos+1).trim();
+      const breakPos = remaining.indexOf('\n');
+      const indiceContent = remaining.substring(0, breakPos-1);
+
+      const lineNumber = fileContent.substring(0, i).split('\n').length;
+
+      content.push({
+        file: file,
+        lineNumber: lineNumber,
+        content: indiceContent,
+      })
+    })
+
+    return content;
+  }
+
+  const getStatus = (count) => {
+    return (count > 5) ? 'CRITICAL' : (count > 0 && count <= 5) ? 'IMPROVE' : 'OK';
+  }
+
+
+
+
+  tools.logTitle(`Auditing : ${pkg.name}`);
+
+  const report = {
+    package: null,
+    score: 0,
+    total: 0,
+    pcScore: 0,
+    scssFilesCount: 0,
+    scssEmptyFiles: 0,
+    htmlFilesCount: 0,
+    htmlLinesCount: 0,
+    scssLinescount: 0,
+    tsOver500: {
+      count: 0,
+      files: []
+   },
+   euiOverrides: {
+     count: 0,
+     indices: []
+    },
+    sizesPxEm: {
+      count: 0,
+      indices: []
+    },
+    boxShadow: {
+      count: 0,
+      indices: []
+    },
+    fontFamily: {
+      count: 0,
+      indices: []
+    },
+    important: {
+     count: 0,
+     indices: []
+    },
+    plainColors: {
+      count: 0,
+      indices: []
+    },
+    ngDeep: {
+      count: 0,
+      indices: []
+    },
+    inlineStyles: {
+      count: 0,
+      indices: []
+    },
+    material: {
+      count: 0,
+      indices: []
+    },
+    primeng: {
+      count: 0,
+      indices: []
+    },
+    uxCmp: {
+      count: 0,
+      // indices: []
+    },
+    finalReport: {}
+  };
+
+
+  report.package = pkg.name;
+
+  let files = glob.sync('**/*.scss', { cwd: pkg.paths.src, nodir: true, follow: true, dot: true });
+
+  report.scssFilesCount += files.length;
+
+  files.forEach(file => {
+    const filePath = path.join(pkg.paths.src, file);
+    const fileContent = tools.getFileContent(filePath).trim();
+    const linesCount = fileContent.split('\n').length;
+
+    if (fileContent === '') {
+      report.scssEmptyFiles++;
+    }
+    report.scssLinescount += linesCount;
+
+
+   let result, euiIndices = [];
+   let regex = /\.eui|\.ux/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     euiIndices.push(result.index);
+   }
+   report.euiOverrides.count += euiIndices.length;
+   report.euiOverrides.indices = [...report.euiOverrides.indices, ...generateIndicesContent(euiIndices, file, fileContent)];
+
+   let sizesIndices = [];
+   regex = /px/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     sizesIndices.push(result.index);
+   }
+   report.sizesPxEm.count += sizesIndices.length;
+   report.sizesPxEm.indices = [...report.sizesPxEm.indices, ...generateIndicesContent(sizesIndices, file, fileContent)];
+
+   let boxShadowIndices = [];
+   regex = /box-shadow/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     boxShadowIndices.push(result.index);
+   }
+   report.boxShadow.count += boxShadowIndices.length;
+   report.boxShadow.indices = [...report.boxShadow.indices, ...generateIndicesContent(boxShadowIndices, file, fileContent)];
+
+   let fontFamilyIndices = [];
+   regex = /font-family/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     fontFamilyIndices.push(result.index);
+   }
+   report.fontFamily.count += fontFamilyIndices.length;
+   report.fontFamily.indices = [...report.fontFamily.indices, ...generateIndicesContent(fontFamilyIndices, file, fileContent)];
+
+
+   let importantIndices = [];
+   regex = /!important/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     importantIndices.push(result.index);
+   }
+   report.important.count += importantIndices.length;
+   report.important.indices = [...report.important.indices, ...generateIndicesContent(importantIndices, file, fileContent)];
+
+   let colorsIndices = [];
+   regex = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})|rgba|hsl/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     colorsIndices.push(result.index);
+   }
+   report.plainColors.count += colorsIndices.length;
+   report.plainColors.indices = [...report.plainColors.indices, ...generateIndicesContent(colorsIndices, file, fileContent)];
+
+   let ngDeepIndices = [];
+   regex = /::ng-deep/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     ngDeepIndices.push(result.index);
+   }
+   report.ngDeep.count += ngDeepIndices.length;
+   report.ngDeep.indices = [...report.ngDeep.indices, ...generateIndicesContent(ngDeepIndices, file, fileContent)];
+ });
+
+
+
+ files = glob.sync('**/*.html', { cwd: pkg.paths.src, nodir: true, follow: true, dot: true });
+
+ report.htmlFilesCount += files.length;
+
+ files.forEach(file => {
+   const filePath = path.join(pkg.paths.src, file);
+   const fileContent = tools.getFileContent(filePath);
+   const linesCount = fileContent.split('\n').length;
+
+   report.htmlLinesCount += linesCount;
+
+   let result, inlineStylesIndices = [];
+   let regex = /style=/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     inlineStylesIndices.push(result.index);
+   }
+   report.inlineStyles.count += inlineStylesIndices.length;
+   report.inlineStyles.indices = [...report.inlineStyles.indices, ...generateIndicesContent(inlineStylesIndices, file, fileContent)];
+
+   let uxCmpIndices = [];
+   regex = /ux-/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     uxCmpIndices.push(result.index);
+   }
+   report.uxCmp.count += uxCmpIndices.length;
+   // report.uxCmp.indices = [...report.uxCmp.indices, ...generateIndicesContent(uxCmpIndices, file, fileContent)];
+ });
+
+
+
+
+ files = glob.sync('**/*.ts', { cwd: pkg.paths.src, nodir: true, follow: true, dot: true });
+
+ files.forEach(file => {
+   const filePath = path.join(pkg.paths.src, file);
+   const fileContent = tools.getFileContent(filePath);
+   const linesCount = fileContent.split('\n').length;
+
+   if (linesCount > 500) {
+     report.tsOver500.count++;
+     report.tsOver500.files.push(file);
+   }
+
+   let result, primengIndices = [];
+   let regex = /primeng/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     primengIndices.push(result.index);
+   }
+   report.primeng.count += primengIndices.length;
+   report.primeng.indices = [...report.primeng.indices, ...generateIndicesContent(primengIndices, file, fileContent)];
+
+   let materialIndices = [];
+   regex = /@angular\/material/gi;
+   while ( (result = regex.exec(fileContent)) ) {
+     materialIndices.push(result.index);
+   }
+   report.material.count += materialIndices.length;
+   report.material.indices = [...report.material.indices, ...generateIndicesContent(materialIndices, file, fileContent)];
+ })
+
+
+
+
+
+ // GLOBAL STATS - ANALYZING DATA / SET STATUS
+
+ if (report.htmlFilesCount !== 0) {
+   const scssHtmlRatio = Math.floor(100 * report.scssFilesCount / report.htmlFilesCount);
+   report.finalReport['scssHtmlRatio'] = {
+     description: 'scss files VS html files',
+     value: `${report.scssFilesCount} out of ${report.htmlFilesCount} (${scssHtmlRatio}%)`,
+     status: (scssHtmlRatio >= 25) ? 'CRITICAL' : (scssHtmlRatio >= 10 && scssHtmlRatio <= 25) ? 'IMPROVE' : 'OK',
+     comment: null,
+   }
+   if (report.finalReport['scssHtmlRatio'].status === 'CRITICAL') {
+    report.finalReport['scssHtmlRatio'].comment = 'The percentage of html files having scss declaration is too high';
+   }
+ }
+
+ if (report.htmlLinesCount !== 0) {
+   const scssHtmlLinesRatio = Math.floor(100 * report.scssLinescount / report.htmlLinesCount);
+   report.finalReport['scssHtmlLinesRatio'] = {
+     description: 'scss lines count VS html lines count',
+     value: `${report.scssLinescount} / ${report.htmlLinesCount} (${scssHtmlLinesRatio}%)`,
+     status: (scssHtmlLinesRatio >= 25) ? 'CRITICAL' : (scssHtmlLinesRatio >= 10 && scssHtmlLinesRatio <= 25) ? 'IMPROVE' : 'OK',
+     comment: null,
+   }
+   if (report.finalReport['scssHtmlLinesRatio'].status === 'CRITICAL') {
+    report.finalReport['scssHtmlLinesRatio'].comment = 'The percentage of scss lines is too high';
+   }
+ }
+
+ if (report.scssFilesCount !== 0) {
+   report.finalReport['scssEmptyFiles'] = {
+     description: 'scss empty files',
+     value: `${report.scssEmptyFiles} out of ${report.scssFilesCount} (${Math.floor(100 * report.scssEmptyFiles / report.scssFilesCount)}%)`,
+     status: (report.scssEmptyFiles !== 0) ? 'IMPROVE' : 'OK',
+     comment: (report.scssEmptyFiles !== 0) ? 'Scss files without content should be cleaned up' : null
+   }
+ }
+
+
+
+ // BALANCED - styles content
+
+ if (report.scssFilesCount !== 0) {
+
+  report.finalReport['euiOverrides'] = {
+    description: 'eUI overrides found',
+    value: report.euiOverrides.count,
+    status: getStatus(report.euiOverrides.count),
+    comment: (report.euiOverrides.count !== 0) ? 'No eUI overrides should be applied, contact eUI support for assistance' : null
+  }
+  report.finalReport['sizesPxEm'] = {
+    description: 'Sizes in px usage found',
+    value: report.sizesPxEm.count,
+    status: getStatus(report.sizesPxEm.count),
+    comment: (report.sizesPxEm.count !== 0) ? 'if sizes should be tweaked, usage of eUI CSS vars should be applied' : null
+  }
+  report.finalReport['boxShadow'] = {
+    description: 'box-shadow usage found',
+    value: report.boxShadow.count,
+    status: getStatus(report.boxShadow.count),
+    comment: (report.boxShadow.count !== 0) ? 'if box-shadow should be tweaked (on specific context), usage of eUI CSS vars should be applied' : null
+  }
+  report.finalReport['fontFamily'] = {
+    description: 'font-family usage found',
+    value: report.fontFamily.count,
+    status: getStatus(report.fontFamily.count),
+    comment: (report.fontFamily.count !== 0) ? 'if font-family should be tweaked (on specific context), usage of eUI CSS vars should be applied' : null
+  }
+  report.finalReport['plainColors'] = {
+    description: 'Plain colors usage found',
+    value: report.plainColors.count,
+    status: getStatus(report.plainColors.count),
+    comment: (report.plainColors.count !== 0) ? 'if colors should be used in scss, usage of eUI CSS vars should be applied' : null
+  }
+  report.finalReport['important'] = {
+    description: '!important usage found',
+    value: report.important.count,
+    status: getStatus(report.important.count),
+    comment: (report.important.count !== 0) ? 'No !important allowed' : null
+  }
+  report.finalReport['ngDeep'] = {
+    description: '::ng-deep usage found',
+    value: report.ngDeep.count,
+    status: getStatus(report.ngDeep.count),
+    comment: (report.ngDeep.count !== 0) ? 'Avoid ::ng-deep usage' : null
+  }
+ }
+
+ // CRITICAL ONLY
+
+ report.finalReport['inlineStyles'] = {
+   description: 'inline styles found in HTML',
+   value: report.inlineStyles.count,
+   status: (report.inlineStyles.count !== 0) ? 'CRITICAL' : 'OK',
+   comment: (report.inlineStyles.count !== 0) ? 'No inline styles should be present in html, usage classes with scss / eUI utilities instead' : null
+ }
+ report.finalReport['material'] = {
+   description: 'material component usage found in HTML',
+   value: report.material.count,
+   status: (report.material.count !== 0) ? 'CRITICAL' : 'OK',
+   comment: (report.material.count !== 0) ? 'Usage of material should be avoided' : null
+ }
+ report.finalReport['primeng'] = {
+   description: 'PrimeNG components usage found in HTML',
+   value: report.primeng.count,
+   status: (report.primeng.count !== 0) ? 'CRITICAL' : 'OK',
+   comment: (report.primeng.count !== 0) ? 'Remove any PrimeNG usage, deprecated in eUI' : null
+ }
+
+
+
+ // IMPROVE ONLY
+
+ report.finalReport['uxCmp'] = {
+   description: 'eUI ux- components usage found in HTML',
+   value: report.uxCmp.count,
+   status: (report.uxCmp.count !== 0) ? 'IMPROVE' : 'OK',
+   comment: (report.uxCmp.count !== 0) ? 'Replace by "eui-" components whenever possible, to ensure future proof migration' : null
+ }
+
+ report.finalReport['tsOver500'] = {
+   description: 'TS file containing more than 500 lines',
+   value: report.tsOver500.count,
+   status: (report.tsOver500.count !== 0) ? 'IMPROVE' : 'OK',
+   comment: (report.tsOver500.count !== 0) ? 'Split TS files into multiple ones for readability' : null
+ }
+
+
+ // Calculating score
+
+ let score = 0, total = 0;
+
+ Object.entries(report.finalReport).forEach((v) => {
+  total++;
+
+  switch(v[1].status) {
+    case 'OK':
+      score++;
+      break;
+    case 'IMPROVE':
+      score+=0.5;
+      break;
+  }
+ });
+
+ report.score = score;
+ report.total = total;
+ report.pcScore = Math.floor(100 * score / total);
+
+
+ // return JSON report
+
+ tools.logInfo('STATS report');
+ console.log(JSON.stringify(report, null, 2));
+
+ return report;
+}
+
+
+
+
+module.exports.audit = (pkg) => {
+  if (pkg.remote) {
+    return;
+  }
+
+  tools.logTitle('Audit package styles');
+
+  return Promise.resolve()
+   .then(() => {
+
+    const report = runStylesAudit(pkg);
+
+    // FINAL REPORT
+
+    let finalReportMessage = `*STYLES AUDIT REPORT for ${pkg.name}:*\n\n`;
+
+    Object.entries(report.finalReport).forEach((v) => {
+      let statusEmoji;
+
+      if (v[1].status === 'CRITICAL') {
+        statusEmoji = ':no_entry:';
+      } else if (v[1].status === 'IMPROVE') {
+        statusEmoji = ':warning:';
+      } else {
+        statusEmoji = ':white_tick:';
+      }
+
+      finalReportMessage += `:black_small_square: ${statusEmoji} *${v[1].description}*: found *${v[1].value}* - status: *${v[1].status}* ${(v[1].comment) ? '==> ' + v[1].comment : ''}\n`;
+    });
+
+    finalReportMessage +=`\neUI compliance score : *${report.score}* out of *${report.total}* *(${report.pcScore}%)*`;
+
+    tools.logInfo('Sending final report message');
+    console.log(finalReportMessage);
+
+    return notificationUtils.package.sendPackageMessage({
+      package: pkg,
+      text: finalReportMessage
+    });
+
+   })
+   .catch((e) => {
+     console.log(e);
+   })
+
+ }
+

package/scripts/csdr/audit/yarn.js

@@ -0,0 +1,105 @@
+'use strict';
+
+// GLOBAL
+const path = require('path');
+const execa = require('execa');
+
+// LOCAL
+const tools = require('../../utils/tools');
+const notificationUtils = require('../../utils/notification/notification-utils');
+
+// GET ARGS
+const { dryRun } = tools.getArgs();
+
+
+
+const getVulnerabilitiesList = () => {
+  let auditContent;
+  const auditFile = path.join(process.cwd(), 'audit.json');
+
+  if (tools.isFileExists(auditFile)) {
+    auditContent = tools.getFileContent(auditFile);
+  } else {
+    tools.logWarning(`${auditFile} not found... unable to precess audit content`);
+    return null;
+  }
+
+  let auditContentArray = [];
+  let vulnerabilitiesFound = {};
+
+  // yarn audit output uses a specific json-lines format, we need to split it first
+  auditContentArray = auditContent.split('\n');
+
+  // extracting the audit summary lines
+  auditContentArray.forEach((c) => {
+    try {
+      const parsedContent = JSON.parse(c);
+      if (parsedContent && parsedContent.type === 'auditSummary') {
+        vulnerabilitiesFound = parsedContent.data.vulnerabilities;
+      }
+    } catch(e) {} // it can fail
+  })
+
+  return vulnerabilitiesFound;
+}
+
+
+module.exports.audit = (pkg) => {
+  if (dryRun) return;
+
+  tools.logTitle('Yarn auditing package');
+
+  return Promise.resolve()
+
+    // first pass to display the visual report into the CI logs
+    .then(() => {
+      return Promise.resolve()
+        .then(() => {
+          return execa.shellSync('yarn audit --level high', { cwd: process.cwd(), stdio: 'inherit' });
+        })
+        .catch((e) => {}) // it can fail
+    })
+
+    // second pass to extract the audit summary lines
+    .then(() => {
+      return Promise.resolve()
+        .then(() => {
+          const auditFile = path.join(process.cwd(), 'audit.json');
+          tools.logInfo(`Creating audit file`)
+          return execa.shellSync(`yarn audit --level high --json > ${auditFile}`, { cwd: process.cwd(), stdio: 'inherit' });
+        })
+        .then(() => {
+          tools.logSuccess();
+          return null;
+        })
+        .catch((e) => {
+          tools.logError('Auditing detected vulnerabilities in dependencies');
+          return getVulnerabilitiesList();
+        })
+    })
+
+    // sending output to slack channel
+    .then((vulnerabilityReport) => {
+      if (!vulnerabilityReport) {
+        tools.logSuccess('OK, no vulnerabilities detected');
+
+        return notificationUtils.package.sendPackageMessage({
+          package: pkg,
+          text: 'Dependencies audit : NO vulnerabilities detected'
+        });
+
+      } else {
+        tools.logWarning(JSON.stringify(vulnerabilityReport));
+
+        let message = '';
+        Object.entries(vulnerabilityReport).forEach((v) => {
+          message += `${v[0]}:*${v[1]}* `;
+        });
+
+        return notificationUtils.package.sendPackageMessage({
+          package: pkg,
+          text: `Dependencies audit detected vulnerabilities : ${message}`
+        });
+      }
+    })
+}

package/scripts/csdr/config/angular.js

@@ -7,7 +7,7 @@ const path = require('path');
 const tools = require('../../utils/tools');
 
 const innerPackages = require('./packages');
-
+const innerProjects = require('./projects');
 
 // CONFIGS skeletons
 const {
@@ -76,14 +76,7 @@ module.exports.registerAngularPackage = (pkg, isReset) => {
     pathBase = 'packages/' + pkg.parentPkg + '/packages';
   }
 
-  let packageEuiVersion;
-
-  if (pkg.build && pkg.build.euiVersion) {
-    packageEuiVersion = pkg.build.euiVersion;
-
-  } else {
-    packageEuiVersion = innerPackages.getPackageEuiVersion(pkg);
-  }
+  const packageEuiVersion = innerPackages.getPackageEuiVersion(pkg);
 
   let projectDef = JSON.stringify(angularPackageDef);
 
@@ -119,12 +112,7 @@ module.exports.registerAngularPackageSubEntry = (subEntryName, subEntryPath, pkg
   const file = path.join(process.cwd(), 'angular.json');
   const jsonFile = require(file);
 
-  let packageEuiVersion;
-  if (pkg.build && pkg.build.euiVersion) {
-    packageEuiVersion = pkg.build.euiVersion;
-  } else {
-    packageEuiVersion = innerPackages.getPackageEuiVersion(pkg);
-  }
+  const packageEuiVersion = innerPackages.getPackageEuiVersion(pkg);
 
   let projectDef = JSON.stringify(angularPackageSubEntryDef);
 
@@ -175,11 +163,23 @@ module.exports.registerAngularPackageSubEntry = (subEntryName, subEntryPath, pkg
 
 
 
-module.exports.registerAngularProjectDef = (project, build = false) => {
+module.exports.registerAngularProjectDef = (project, build = false, element = false) => {
+  tools.logInfo('Registering angular project definition...');
 
   // checking if root angular.json exists, create if not
   const file = path.join(process.cwd(), 'angular.json');
 
+  // getting the eUI version of the project
+  let euiVersion;
+  if (element) {
+    euiVersion = innerPackages.getRemoteEuiVersion(project);
+  } else {
+    euiVersion = innerProjects.getProjectEuiVersion(project);
+  }
+
+
+  tools.logInfo(`Registering angular project for eUI version : ${euiVersion}`);
+
   if (!tools.isFileExists(file)) {
     tools.writeJsonFileSync(file, angularConfigDef);
   }
@@ -189,7 +189,9 @@ module.exports.registerAngularProjectDef = (project, build = false) => {
 
   if (tools.isFileExists(path.join(project.paths.angularPath, 'angular-config.json'))) {
     tools.logInfo(`Registering project angular config...`);
-    angularConfigFile = require(path.join(project.paths.angularPath, 'angular-config.json'));
+    const angularConfigFilePath = path.join(project.paths.angularPath, 'angular-config.json');
+    delete require.cache[angularConfigFilePath];
+    angularConfigFile = require(angularConfigFilePath);
   }
 
   if (angularConfigFile) {
@@ -205,18 +207,18 @@ module.exports.registerAngularProjectDef = (project, build = false) => {
       tools.logInfo('Processing angular config...');
       let projectDef;
       if (project.csdrFullSkeleton) {
-        if (project.build && project.build.euiVersion === '13.x') {
+        if (euiVersion === '13.x') {
           projectDef = JSON.stringify(angularProjectDefFullSkeletonV13);
-        } else if (project.build && (project.build.euiVersion === '14.x' || project.build.euiVersion === '15.x')) {
+        } else if (euiVersion === '14.x' || euiVersion === '15.x') {
           projectDef = JSON.stringify(angularProjectDefFullSkeletonV14);
         } else {
           projectDef = JSON.stringify(angularProjectDefFullSkeleton);
         }
 
       } else {
-        if (project.build && project.build.euiVersion === '13.x') {
+        if (euiVersion === '13.x') {
           projectDef = JSON.stringify(angularProjectDefV13);
-        } else if (project.build && (project.build.euiVersion === '14.x' || project.build.euiVersion === '15.x')) {
+        } else if (euiVersion === '14.x' || euiVersion === '15.x') {
              projectDef = JSON.stringify(angularProjectDefV14);
         } else {
           if (project.build && project.build.csdrFileReplacement === true) {
@@ -227,6 +229,9 @@ module.exports.registerAngularProjectDef = (project, build = false) => {
         }
       }
       let replaceProject = tools.replaceAll(projectDef, '@project.name@', project.name);
+      if (project.virtual && project.host) {
+        replaceProject = tools.replaceAll(replaceProject, 'apps/', 'hosts/');
+      }
       replaceProject = JSON.parse(replaceProject);
 
       jsonFile['projects'][project.name] = replaceProject;
@@ -373,8 +378,6 @@ module.exports.registerModulePaths = (pkg, isReset) => {
     jsonFileBuildSpec['compilerOptions']['paths'] = {};
   }
 
-  console.log(pkg);
-
   if (!pkg.paths || tools.isDirExists(pkg.paths.pkgSrc)) {
     if (pkg.paths) {
       tools.logInfo(`${pkg.paths.pkgSrc} exists => pointing to /src folder`);