@bigbinary/neeto-commons-frontend 2.0.72 → 2.0.74

package/configs/eslint/imports/enforced.js

@@ -22,7 +22,7 @@ module.exports = {
       "never",
       {
         ignorePackages: true,
-        pattern: { json: "always", mp3: "always", ico: "always" },
+        pattern: { json: "always", ico: "always" },
       },
     ],
   },

package/configs/eslint/index.js

@@ -32,7 +32,7 @@ module.exports = {
     // We need this for the import/extensions rule to work: https://github.com/import-js/eslint-plugin-import#importextensions
     "import/resolver": {
       node: {
-        extensions: [".js", ".jsx", ".ts", ".tsx", ".svg", ".json", ".mp3"],
+        extensions: [".js", ".jsx", ".ts", ".tsx", ".svg", ".json"],
       },
     },
   },

package/configs/nanos/eslint/neeto.js

@@ -3,7 +3,7 @@ const path = require("path");
 const { mergeDeepLeft } = require("ramda");
 
 const rootOfTheProject = path.join(__dirname, "../../../../../../");
-const pathToTranslationFile = "src/translations/en.json";
+const pathToTranslationsDir = "src/translations";
 const pathToResolveFile = "resolve.js";
 const pathToJsConfigFile = "jsconfig.json";
 
@@ -19,7 +19,6 @@ const commonResolve = loadJS(
   "node_modules/@bigbinary/neeto-commons-frontend/configs/nanos/webpack/resolve.js"
 );
 const projectResolve = loadJS(pathToResolveFile);
-const en = loadJS(pathToTranslationFile);
 const resolve = mergeDeepLeft(projectResolve, commonResolve);
 
 module.exports = {
@@ -77,7 +76,10 @@ module.exports = {
     "@bigbinary/neeto/no-axios-import-outside-apis": ["error", resolve.alias],
     "@bigbinary/neeto/no-missing-localization": [
       "error",
-      { name: "en.json", lng: "en", content: en },
+      {
+        translationsDir: path.join(rootOfTheProject, pathToTranslationsDir),
+        languages: ["en"],
+      },
     ],
     "@bigbinary/neeto/prefix-neeto-ui-import-alias": ["error", resolve.alias],
     "@bigbinary/neeto/use-webpack-alias": ["error", resolve.alias],

package/configs/scripts/dead-code-eliminator/constants.js

@@ -0,0 +1,12 @@
+const RAILS_MOUNTED_COMPONENTS_REGEX = /app\/javascript\/src\/[^/]*\.(js|jsx)$/;
+const PACKS_FILES_REGEX = /app\/javascript\/packs\/[^/]*\.(js|jsx)$/;
+
+const TYPES = {
+  CLASS_DECLARATION: "ClassDeclaration",
+  FUNCTION_DECLARATION: "FunctionDeclaration",
+  IMPORT_DEFAULT_SPECIFIER: "ImportDefaultSpecifier",
+  IMPORT_NAMESPACE_SPECIFIER: "ImportNamespaceSpecifier",
+  VARIABLE_DECLARATION: "VariableDeclaration",
+};
+
+module.exports = { RAILS_MOUNTED_COMPONENTS_REGEX, PACKS_FILES_REGEX, TYPES };

package/configs/scripts/dead-code-eliminator/index.js

@@ -0,0 +1,272 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+const { exec, execSync } = require("child_process");
+const fs = require("fs");
+const pathLib = require("path");
+
+const generate = require("@babel/generator").default;
+const babelParser = require("@babel/parser");
+const traverse = require("@babel/traverse").default;
+const {
+  isNotEmpty,
+  existsBy,
+} = require("@bigbinary/neeto-commons-frontend/pure");
+const enhancedResolve = require("enhanced-resolve");
+const { isEmpty } = require("ramda");
+
+const {
+  RAILS_MOUNTED_COMPONENTS_REGEX,
+  TYPES,
+  PACKS_FILES_REGEX,
+} = require("./constants");
+
+// @ts-ignore
+// eslint-disable-next-line import/extensions
+const webpackConfig = require("../../../../../../config/webpack/webpack.config.js");
+
+let modifiedFiles = [];
+let importedItems = [];
+let unusedFiles = [];
+let iterationCount = 1;
+
+const javascriptDir = pathLib.resolve(
+  __dirname,
+  "../../../../../../app/javascript"
+);
+
+const resolver = enhancedResolve.create.sync({
+  alias: webpackConfig.resolve.alias,
+  modules: webpackConfig.resolve.modules,
+  extensions: webpackConfig.resolve.extensions,
+  conditionNames: ["require", "import", "node", "default", "types"],
+});
+
+const isRailsMountedOrPacksFiles = filePath =>
+  RAILS_MOUNTED_COMPONENTS_REGEX.test(filePath) ||
+  PACKS_FILES_REGEX.test(filePath);
+
+const isInImportedList = (item, filePath) =>
+  existsBy({ item, filePath }, importedItems);
+
+const findImports = filePath => {
+  const code = fs.readFileSync(filePath, "utf8");
+  const ast = babelParser.parse(code, {
+    sourceType: "module",
+    plugins: ["jsx"],
+  });
+
+  traverse(ast, {
+    ImportDeclaration(path) {
+      const { node } = path;
+
+      const currentDir = pathLib.dirname(filePath);
+      const importSource = node.source.value;
+
+      const resolvedPath = resolver(currentDir, importSource);
+      const isNodeModule = resolvedPath.includes("node_modules");
+      if (isNodeModule) return;
+
+      if (isEmpty(node.specifiers)) {
+        importedItems.push({ item: "*", filePath: resolvedPath });
+      }
+
+      node.specifiers.forEach(specifier => {
+        if (specifier.type === TYPES.IMPORT_NAMESPACE_SPECIFIER) {
+          const binding = path.scope.getBinding(specifier.local.name);
+          binding?.referencePaths?.forEach(refPath => {
+            const item = refPath.parentPath?.node?.property?.name;
+            importedItems.push({ item, filePath: resolvedPath });
+          });
+        } else if (specifier.type === TYPES.IMPORT_DEFAULT_SPECIFIER) {
+          importedItems.push({ item: "default", filePath: resolvedPath });
+        } else {
+          const item = specifier.imported.name;
+          importedItems.push({ item, filePath: resolvedPath });
+        }
+      });
+    },
+  });
+};
+
+const removeUnusedExports = filePath => {
+  if (isRailsMountedOrPacksFiles(filePath)) return;
+
+  if (!existsBy({ filePath }, importedItems)) {
+    unusedFiles.push(filePath);
+
+    return;
+  }
+
+  let isPathModified = false;
+  const code = fs.readFileSync(filePath, "utf8");
+  const ast = babelParser.parse(code, {
+    sourceType: "module",
+    plugins: ["jsx"],
+  });
+
+  traverse(ast, {
+    ExportNamedDeclaration(path) {
+      const { node } = path;
+      if (node.declaration) {
+        if (node.declaration.type === TYPES.VARIABLE_DECLARATION) {
+          node.declaration.declarations.forEach(declaration => {
+            const exportedItem = declaration.id.name;
+            if (isInImportedList(exportedItem, filePath)) return;
+
+            path.replaceWith(path.node.declaration);
+            isPathModified = true;
+          });
+        } else if (
+          node.declaration.type === TYPES.FUNCTION_DECLARATION ||
+          node.declaration.type === TYPES.CLASS_DECLARATION
+        ) {
+          const exportedItem = node.declaration.id.name;
+          if (isInImportedList(exportedItem, filePath)) return;
+
+          path.replaceWith(path.node.declaration);
+          isPathModified = true;
+        }
+      } else {
+        path.get("specifiers").forEach(specifierPath => {
+          const exportedItem = specifierPath.node.exported.name;
+          if (isInImportedList(exportedItem, filePath)) return;
+
+          node.specifiers.length === 1 ? path.remove() : specifierPath.remove();
+          isPathModified = true;
+        });
+      }
+    },
+    ExportDefaultDeclaration(path) {
+      const exportedItem = "default";
+      if (isInImportedList(exportedItem, filePath)) return;
+
+      path.remove();
+      isPathModified = true;
+    },
+  });
+
+  if (!isPathModified) return;
+
+  const newCode = generate(ast, {
+    retainLines: true,
+    retainFunctionParens: true,
+  }).code;
+
+  fs.writeFileSync(filePath, newCode);
+  modifiedFiles.push(filePath);
+};
+
+const traverseDirectoryAndExecuteFunc = (dir, func) => {
+  const files = fs.readdirSync(dir);
+
+  files.forEach(file => {
+    const filePath = pathLib.join(dir, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isFile() && [".js", ".jsx"].includes(pathLib.extname(filePath))) {
+      func(filePath);
+    } else if (stats.isDirectory()) {
+      traverseDirectoryAndExecuteFunc(filePath, func);
+    }
+  });
+};
+
+const runLintersAndRemoveUnusedFiles = () => {
+  const commands = [];
+
+  if (isNotEmpty(unusedFiles)) commands.push(`rm -f ${unusedFiles.join(" ")}`);
+
+  if (isNotEmpty(modifiedFiles)) {
+    commands.push(`npx prettier --write ${modifiedFiles.join(" ")}`);
+    commands.push(`npx eslint --fix ${modifiedFiles.join(" ")}`);
+  }
+
+  // script will be executed recursively until we have no modified files or unused files
+  exec(commands.join(" && "), () => run());
+};
+
+const restoreEslintNeetoVersion = () => {
+  execSync("git restore package.json yarn.lock", { stdio: "ignore" });
+  execSync("yarn", { stdio: "ignore" });
+};
+
+const reportNonFixableEslintErrors = () => {
+  const modifiedFiles = execSync("git diff --name-only --diff-filter=M")
+    .toString()
+    .split("\n")
+    .join(" ");
+
+  if (!modifiedFiles) {
+    console.log("✅  Script executed successfully!\n");
+
+    return;
+  }
+
+  exec(`npx eslint ${modifiedFiles} --quiet`, (_, stdout) => {
+    if (stdout) {
+      console.log(stdout);
+      console.log(
+        "⭕️ Auto-fixing is not implemented for the above eslint errors. Please fix them manually.\n"
+      );
+    } else {
+      console.log("- No errors found.\n\n✅  Script executed successfully!\n");
+    }
+  });
+};
+
+const postExecution = () => {
+  console.log("\n4. Restoring @bigbinary/eslint-plugin-neeto version.");
+  restoreEslintNeetoVersion();
+
+  console.log("\n5. Checking if there are any non-fixable eslint errors.");
+  reportNonFixableEslintErrors();
+};
+
+const installCustomEslintNeetoVersion = () =>
+  execSync(
+    "yarn add @bigbinary/eslint-plugin-neeto@1.0.43-no-unused-vars-autofix",
+    { stdio: "ignore" }
+  );
+
+const run = () => {
+  console.log(`\nIteration: ${iterationCount++}`);
+  console.log(".............");
+
+  modifiedFiles = [];
+  importedItems = [];
+  unusedFiles = [];
+
+  console.log("* Collecting all the imports.");
+  traverseDirectoryAndExecuteFunc(javascriptDir, findImports);
+
+  console.log("* Removing exports which are not imported.");
+  traverseDirectoryAndExecuteFunc(javascriptDir, removeUnusedExports);
+
+  const filesCountMsg = `\nModified files: ${modifiedFiles.length}\nUnused files: ${unusedFiles.length}`;
+
+  const isExecutionCompleted = isEmpty(modifiedFiles) && isEmpty(unusedFiles);
+  if (isExecutionCompleted) {
+    console.log(filesCountMsg);
+    postExecution();
+  } else {
+    console.log(
+      "* Running linters on modified files and removing unused files."
+    );
+    runLintersAndRemoveUnusedFiles();
+    console.log(filesCountMsg);
+  }
+};
+
+// Script execution starts here
+console.log("\nPlease wait, this may take a few minutes...");
+
+console.log(
+  "\n1. Installing @bigbinary/eslint-plugin-neeto custom release required for this script."
+);
+installCustomEslintNeetoVersion();
+
+console.log(
+  "\n2. Executing script recursively until we have no modified or unused files."
+);
+run();

package/configs/scripts/remove-unused-translation-keys/constants.js

@@ -0,0 +1,11 @@
+const I18NEXT_PLURALS = ["zero", "one", "two", "few", "many", "other"];
+
+/*
+  Matches the following:
+    - t(`some.${key}`), t(key), t(getKey()), t(key, { count: 1 })
+    - i18nKey={`some.${key}`}, i18nKey={key}, i18nKey={getKey()}
+*/
+const INTERPOLATED_TRANSLATION_KEY_REGEX =
+  /(?<![a-z0-9])t\((?:`.*`|[a-z0-9\-_()]*)(?:,.*)?\)|i18nKey={(`.*`|[a-z0-9-_()]*)}/gi;
+
+module.exports = { I18NEXT_PLURALS, INTERPOLATED_TRANSLATION_KEY_REGEX };

package/configs/scripts/remove-unused-translation-keys/index.js

@@ -0,0 +1,186 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+const fs = require("fs");
+const path = require("path");
+
+const { Command } = require("commander");
+const { isEmpty, path: rPath } = require("ramda");
+
+const {
+  I18NEXT_PLURALS,
+  INTERPOLATED_TRANSLATION_KEY_REGEX,
+} = require("./constants");
+
+const isI18nextPlural = key =>
+  I18NEXT_PLURALS.some(pluralKey => key.endsWith(`_${pluralKey}`));
+
+const logUnusedKeysAndInterpolatedKeys = (
+  unusedTranslationKeys,
+  transFuncWithInterpolatedKeys
+) => {
+  console.log("\nUnused translation keys");
+  console.log("-----------------------");
+
+  if (isEmpty(unusedTranslationKeys)) {
+    console.log("No unused keys found.");
+  } else {
+    const unusedKeyCount = unusedTranslationKeys.length;
+    unusedTranslationKeys.forEach(key => console.log(key));
+    console.log(`\nDeleted ${unusedKeyCount} unused keys successfully.`);
+  }
+
+  console.log("\n\nTranslation functions with interpolated keys");
+  console.log("--------------------------------------------");
+
+  if (isEmpty(transFuncWithInterpolatedKeys)) {
+    console.log("No translation functions with interpolated keys found.\n");
+  } else {
+    transFuncWithInterpolatedKeys.forEach(hash => {
+      console.log(`Code: ${hash.code}`);
+      console.log(`File path: ${hash.filePath}\n`);
+    });
+
+    console.log(
+      "Please verify whether the keys required by the above translation functions have been removed or not. If removed, please restore them.\n"
+    );
+  }
+};
+
+const deleteUnusedKeysFromData = (translationData, unusedTranslationKeys) => {
+  unusedTranslationKeys.forEach(translationKey => {
+    const keys = translationKey.split(".");
+    const lastKey = keys.pop();
+
+    if (isEmpty(keys)) {
+      delete translationData[lastKey];
+    } else {
+      const currentData = rPath(keys, translationData);
+      if (currentData) delete currentData[lastKey];
+    }
+  });
+};
+
+const deleteEmptyValuesFromData = translationData => {
+  for (const [key, value] of Object.entries(translationData)) {
+    if (typeof value === "object") {
+      if (isEmpty(value)) delete translationData[key];
+      else deleteEmptyValuesFromData(value);
+    }
+  }
+};
+
+const deleteUsedKeysFromKeysList = (dirPath, keys) => {
+  fs.readdirSync(dirPath).forEach(fileName => {
+    const filePath = path.join(dirPath, fileName);
+    if (fs.statSync(filePath).isFile()) {
+      const extension = path.extname(filePath);
+      if (![".js", ".jsx", ".rb", ".jbuilder"].includes(extension)) return;
+
+      const data = fs.readFileSync(filePath, "utf8");
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        const isKeyFound =
+          data.includes(key) ||
+          (isI18nextPlural(key) && data.includes(key.replace(/_[^_]*$/, "")));
+
+        if (isKeyFound) {
+          keys.splice(i, 1);
+          i--;
+        }
+      }
+    } else if (fs.statSync(filePath).isDirectory()) {
+      deleteUsedKeysFromKeysList(filePath, keys);
+    }
+  });
+};
+
+const getUnusedKeys = (searchPath, translationKeys) => {
+  const keys = [...translationKeys];
+  deleteUsedKeysFromKeysList(searchPath, keys);
+
+  return keys;
+};
+
+const findTransFuncWithInterpolatedKeys = dirPath => {
+  const transFuncWithInterpolatedKeys = [];
+
+  fs.readdirSync(dirPath).forEach(fileName => {
+    const filePath = path.join(dirPath, fileName);
+    if (fs.statSync(filePath).isFile()) {
+      const extension = path.extname(filePath);
+      if (![".js", ".jsx"].includes(extension)) return;
+
+      const data = fs.readFileSync(filePath, "utf8");
+      const relativePath = path.relative(process.cwd(), filePath);
+      const matchedCodes = data.match(INTERPOLATED_TRANSLATION_KEY_REGEX);
+
+      matchedCodes?.forEach(code => {
+        transFuncWithInterpolatedKeys.push({
+          code,
+          filePath: relativePath,
+        });
+      });
+    } else if (fs.statSync(filePath).isDirectory()) {
+      transFuncWithInterpolatedKeys.push(
+        ...findTransFuncWithInterpolatedKeys(filePath)
+      );
+    }
+  });
+
+  return transFuncWithInterpolatedKeys;
+};
+
+const generateTranslationKeys = (data, parentKey = null) => {
+  const translationKeys = [];
+
+  for (const [key, value] of Object.entries(data)) {
+    const currentKey = parentKey ? `${parentKey}.${key}` : key;
+
+    if (typeof value === "object") {
+      translationKeys.push(...generateTranslationKeys(value, currentKey));
+    } else {
+      translationKeys.push(currentKey);
+    }
+  }
+
+  return translationKeys;
+};
+
+const getCommandLineOptions = () => {
+  const program = new Command();
+  program
+    .option("--translation-path <path>", "Path to translation file")
+    .option("--search-path <path>", "Path to search for unused keys")
+    .parse(process.argv);
+
+  return program.opts();
+};
+
+// Script execution starts here
+const {
+  translationPath = "app/javascript/src/translations/en.json",
+  searchPath = "app",
+} = getCommandLineOptions();
+
+console.log("\nPlease wait, this may take a few seconds...");
+
+const translationData = JSON.parse(fs.readFileSync(translationPath, "utf8"));
+const translationKeys = generateTranslationKeys(translationData);
+const unusedTranslationKeys = getUnusedKeys(searchPath, translationKeys);
+
+deleteUnusedKeysFromData(translationData, unusedTranslationKeys);
+deleteEmptyValuesFromData(translationData);
+
+fs.writeFileSync(
+  translationPath,
+  `${JSON.stringify(translationData, null, 2)}\n`
+);
+
+const transFuncWithInterpolatedKeys =
+  findTransFuncWithInterpolatedKeys(searchPath);
+
+logUnusedKeysAndInterpolatedKeys(
+  unusedTranslationKeys,
+  transFuncWithInterpolatedKeys
+);

package/configs/webpack/rules.js

@@ -20,20 +20,6 @@ module.exports = [
       },
     },
   },
-  {
-    test: /\.mp3$/,
-    use: [
-      "babel-loader",
-      {
-        loader: "file-loader",
-        options: {
-          query: {
-            name: "static/media/[name].[hash:8].[ext]",
-          },
-        },
-      },
-    ],
-  },
   {
     test: /\.m?js$/,
     resolve: {

package/cypress-commands.d.ts

@@ -6,6 +6,11 @@ declare namespace Cypress {
     typeFast(selector: string, text: string): Void;
     typeAndEnter(selector: string, text: string): Void;
     verifyToastMessage(message: string): Void;
+
+    /**
+     * @param closeToastr Default value is true
+     */
+    verifyToastIcon(closeToastr: boolean): Void;
     continueOnAlert(
       alias:
         | string
@@ -40,8 +45,19 @@ declare namespace Cypress {
     clickDropdownOption(optionText: string, dropdownSelector: string): Void;
     getText(selector: string): Chainable<JQuery<HTMLElement>>;
     getValue(selector: string): Chainable<JQuery<HTMLElement>>;
+
+    /**
+     * @deprecated Use `withinIframe` instead.
+     */
     getIframe(iframeSelector: string): Chainable<JQuery<HTMLElement>>;
 
+    /**
+     * Selects and performs commands within an iframe element based on the given selector.
+     * @param iframeSelector The selector to locate the iframe element.
+     * @param callbackFn The callback function containing the commands to execute within the iframe.
+     */
+    withinIframe(iframeSelector: string, callbackFn: void): Void;
+
     /**
      * Command to open the url in the same window after clicking on a button that opens the url in a new tab
      */
@@ -76,9 +92,9 @@ declare namespace Cypress {
     navigateToPreviewPage(selector: string, requestCount: number): Void;
     saveChanges(aliasName: string, requestCount: number): Void;
     verifyAttribute(props: {
-      selector: string,
-      attr: string,
-      value: string
+      selector: string;
+      attr: string;
+      value: string;
     }): Void;
     verifyUnsavedAlertModal(cancelButton: string): Void;
     verifyTooltip(selector: string, text: string): Void;