@bigbinary/neeto-commons-frontend 3.0.7 → 3.0.10

package/cjs/configs/scripts/jsdoc-builder/utils.mjs

@@ -0,0 +1,219 @@
+import fs from "fs";
+import path from "path";
+
+import * as babelParser from "@babel/parser";
+import { curry, __, mergeLeft } from "ramda";
+import remarkParse from "remark-parse";
+import { unified } from "unified";
+
+import {
+  ASTERISK,
+  ASTERISK_WITH_SPACES,
+  CODE_PATTERN,
+  DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT,
+  EXPORTED_TYPES_FOLDER_NAME,
+  HTML_EXCEPT_IMG_PATTERN,
+  IMG_PATTERN,
+  JSDOC_EXAMPLE_TAG,
+  JSDOC_END_EXAMPLE_TAG,
+  JSDOC_IMG_HEIGHT,
+  JSDOC_IMG_WIDTH,
+  LINE_BREAK,
+  PARAGRAPH_PATTERN,
+  SUBHEADING_PATTERN,
+  TYPES_FOLDER_NAME,
+  WHITESPACE_PARENTHESIS_REGEX,
+} from "./constants.mjs";
+import * as babelTypes from "@babel/types";
+import _traverse from "@babel/traverse";
+import _generate from "@babel/generator";
+
+import { matches } from "@bigbinary/neeto-cist";
+
+const traverse = _traverse.default;
+const generate = _generate.default;
+
+const removeWhiteSpaceAndParentheses = string =>
+  string.replace(WHITESPACE_PARENTHESIS_REGEX, "");
+
+const addLeadingCommentForTextWithLineBreaks = ({
+  text,
+  addCommentForFirstItem = true,
+  addDoubleLineBreaks = true,
+}) => {
+  if (!hasLineBreaks(text)) return addLeadingComment(text);
+  const joinString = addDoubleLineBreaks
+    ? DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT
+    : LINE_BREAK;
+
+  return text
+    .split(LINE_BREAK)
+    .map((item, idx) => {
+      if (!addCommentForFirstItem && idx === 0) return item;
+
+      return addLeadingComment(item);
+    })
+    .join(joinString);
+};
+
+const addLeadingComment = (text, trimWhiteSpace = false) =>
+  (trimWhiteSpace ? ASTERISK : ASTERISK_WITH_SPACES) + text;
+
+const transformCode = node => {
+  let text = "";
+  text += addLeadingComment(JSDOC_EXAMPLE_TAG);
+  text += DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+  text += addLeadingCommentForTextWithLineBreaks({
+    text: removeCommentTags(node.value),
+    addDoubleLineBreaks: false,
+  });
+  text += LINE_BREAK;
+  text += addLeadingComment(JSDOC_END_EXAMPLE_TAG);
+  text += LINE_BREAK;
+
+  return text;
+};
+
+const hasLineBreaks = text => text?.includes(LINE_BREAK);
+
+const getParagraphChildrenText = node => {
+  const children = node.children;
+  if (children.length === 1) return children[0].value;
+
+  return children.map(child => child.value || child.children[0].value).join("");
+};
+
+const transformParagraph = node => {
+  let text = "";
+  text += ASTERISK_WITH_SPACES;
+  const childrenText = getParagraphChildrenText(node);
+
+  if (hasLineBreaks(childrenText)) {
+    text += addLeadingCommentForTextWithLineBreaks({
+      text: childrenText,
+      addCommentForFirstItem: false,
+    });
+  } else {
+    text += childrenText;
+  }
+  text += DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+
+  return text;
+};
+
+const transformImg = node => {
+  const { src, alt } = parseImgTag(node.value);
+  let text = ASTERISK_WITH_SPACES;
+  text += `![${alt}](${src}|height=${JSDOC_IMG_HEIGHT}|width=${JSDOC_IMG_WIDTH})`;
+  text += DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+
+  return text;
+};
+
+const transformNodesToText = nodes => {
+  let text = DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+
+  nodes.forEach(node => {
+    if (matches(CODE_PATTERN, node)) {
+      text += transformCode(node);
+    } else if (matches(IMG_PATTERN, node)) {
+      text += transformImg(node);
+    } else if (matches(PARAGRAPH_PATTERN, node)) {
+      text += transformParagraph(node);
+    }
+  });
+
+  return addLeadingComment(text, true);
+};
+
+const parseImgTag = imgTagStr =>
+  imgTagStr.split(" ").reduce((acc, item) => {
+    let [attrName, attrValue] = item.split("=");
+    attrValue = attrValue?.replaceAll(">", "").replaceAll('"', "");
+
+    return mergeLeft({ [attrName]: attrValue }, acc);
+  }, {});
+
+const removeCommentTags = str => str.replaceAll("/*", "").replaceAll("*/", "");
+
+export const parseTypeFile = typeFileContent =>
+  babelParser.parse(typeFileContent, {
+    sourceType: "module",
+    plugins: [["typescript", { dts: true }]],
+  });
+
+export const buildEntityTitleToEntityDescMap = (nodes, map) => {
+  nodes.forEach((node, idx) => {
+    if (!matches(SUBHEADING_PATTERN, node)) return;
+
+    const entityName = removeWhiteSpaceAndParentheses(node.children[0].value);
+    const entityRightSiblings = [];
+
+    for (let i = idx + 1; i < nodes.length; i++) {
+      const siblingNode = nodes[i];
+
+      if (matches(HTML_EXCEPT_IMG_PATTERN, siblingNode)) continue;
+
+      if (matches(SUBHEADING_PATTERN, siblingNode)) break;
+
+      entityRightSiblings.push(siblingNode);
+    }
+    const entityRightSiblingsText = transformNodesToText(entityRightSiblings);
+    map[entityName] = entityRightSiblingsText;
+  });
+};
+
+export const defaultTypeFileTraverser = ({
+  typeFileAST,
+  typeFileName,
+  entityTitleToDescMapOfAllFiles,
+}) =>
+  traverse(typeFileAST, {
+    ExportNamedDeclaration: ({ node }) => {
+      const entityName = findEntityName(node);
+      const entityDesc = entityTitleToDescMapOfAllFiles[entityName];
+
+      if (!entityName || !entityDesc) {
+        return;
+      }
+
+      babelTypes.addComment(node, "leading", entityDesc);
+
+      const { code } = generate(typeFileAST, {});
+
+      fs.writeFileSync(path.resolve(typeFileName), code);
+    },
+  });
+
+export const syncTypeFiles = exportedTypesFolderName => {
+  const sourceDir = path.resolve(TYPES_FOLDER_NAME);
+  const destDir = path.resolve(exportedTypesFolderName);
+
+  fs.cpSync(sourceDir, destDir, { recursive: true });
+};
+
+export const getFileNameList = dirPath => {
+  let files = [];
+  const items = fs.readdirSync(dirPath, { withFileTypes: true });
+
+  for (const item of items) {
+    if (item.isDirectory()) {
+      files = [...files, ...getFileNameList(path.join(dirPath, item.name))];
+    } else {
+      files.push(path.join(dirPath, item.name));
+    }
+  }
+
+  return files;
+};
+
+export const getFileContent = fileName =>
+  fs.readFileSync(path.resolve(fileName), "utf8").toString();
+
+export const parseMarkdown = fileContent =>
+  unified().use(remarkParse).parse(fileContent);
+
+export const findEntityName = node =>
+  node?.declaration?.declarations?.[0]?.id?.name || node?.declaration?.id?.name;
+
+export const matchesAny = curry((list, obj) => list.some(matches(__, obj)));

package/cjs/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\((?:\s*`.*`|\s*[a-z0-9\-_()]*)(?:,.*)?\s*\)|i18nKey={\s*(`.*`|[a-z0-9-_()]*)\s*}/gi;
+
+module.exports = { I18NEXT_PLURALS, INTERPOLATED_TRANSLATION_KEY_REGEX };

package/cjs/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/cjs/configs/tailwind.js

@@ -0,0 +1,13 @@
+module.exports = {
+  important: true,
+  purge: {
+    enabled: process.env.NODE_ENV === "production",
+    content: [
+      "./app/javascript/**/*.{js,jsx}",
+      "./app/views/**/*.html.erb",
+      "./app/views/**/*.slim",
+      "./node_modules/@bigbinary/**/*.js",
+    ],
+    defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
+  },
+};

package/cjs/configs/webpack/helpers/customize-default-rules.js

@@ -0,0 +1,54 @@
+/*
+  Customize default webpack rules/loaders configuration.
+  A custom helpers till shakapacker introduces the feature.
+  Track the following the issues to get the status of feature development in shakapacker:
+  https://github.com/shakacode/shakapacker/issues/80
+  https://github.com/shakacode/shakapacker/issues/87
+  Usage:
+    const customizeWebpackDefaultRules = require("./helpers/customize-default-rules");
+    const defaultRules = {
+      "asset/resource": {
+        test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2)$/
+      },
+      "asset/source": {
+        exclude: /\.(js|mjs|jsx|ts|tsx|js)$/,
+      },
+    };
+    const customWebpackConfig = customizeWebpackDefaultRules(webpackConfig, defaultRules);
+  NOTE:
+    - Check if the option to output default configuration is introduced or not before upgrading further.
+    - Update the defaultRuleType constant whenever shakapacker introduces a new default rule/loader.
+*/
+const { findBy, findIndexBy } = require("@bigbinary/neeto-cist");
+
+const modifyDefaultRulesConfig = (webpackConfig, rules = {}) => {
+  const defaultRuleType = ["asset/resource", "asset/source"];
+
+  Object.keys(rules).forEach(ruleName => {
+    if (defaultRuleType.includes(ruleName)) {
+      const rule = findBy(
+        { type: "asset/resource" },
+        webpackConfig.module.rules
+      );
+
+      const rulePosition = findIndexBy(
+        { type: ruleName },
+        webpackConfig.module.rules
+      );
+
+      Object.keys(rules[ruleName]).forEach(attribute => {
+        if (rule[attribute] !== undefined) {
+          rule[attribute] = rules[ruleName][attribute];
+        }
+      });
+
+      webpackConfig.module.rules[rulePosition] = rule;
+    } else {
+      throw new Error("Invalid default rule type");
+    }
+  });
+
+  return webpackConfig;
+};
+
+module.exports = modifyDefaultRulesConfig;

package/cjs/configs/webpack/index.js

@@ -0,0 +1,59 @@
+const process = require("process");
+
+const Dotenv = require("dotenv-webpack");
+const { webpackConfig, merge } = require("shakapacker");
+const webpack = require("webpack");
+
+const customizeWebpackDefaultRules = require("./helpers/customize-default-rules");
+const resolve = require("./resolve");
+const rules = require("./rules");
+
+const dotEnvFileSuffix =
+  process.env.NODE_ENV === "production" ? "" : `.${process.env.NODE_ENV}`;
+
+let devtool = "hidden-source-map",
+  mode = "production";
+if (process.env.RAILS_ENV === "test") {
+  devtool = false;
+  mode = "none";
+} else if (process.env.RAILS_ENV === "development") {
+  devtool = "eval-cheap-module-source-map";
+  mode = "development";
+}
+
+const commonOptions = {
+  mode,
+  infrastructureLogging: { level: "warn" },
+  devtool,
+  resolve,
+  optimization: {
+    splitChunks: {
+      maxSize: 15000000, // 15MB
+    },
+  },
+  module: { rules },
+  plugins: [
+    new webpack.ProvidePlugin({ process: "process/browser" }),
+    new Dotenv({
+      path: `./.env${dotEnvFileSuffix}`,
+      systemvars: true,
+      silent: true,
+    }),
+  ],
+  ignoreWarnings: [/Failed to parse source map/],
+  snapshot: { managedPaths: [/^(node_modules\/@bigbinary\/.+)/] },
+};
+
+// This rule is causing issues to react-svg-loader
+const defaultRules = {
+  "asset/resource": {
+    test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2)$/,
+  },
+};
+
+const customWebpackConfig = customizeWebpackDefaultRules(
+  webpackConfig,
+  defaultRules
+);
+
+module.exports = merge(customWebpackConfig, commonOptions);

package/cjs/configs/webpack/resolve.js

@@ -0,0 +1,53 @@
+const path = require("path");
+
+const absolutePath = basePath =>
+  path.resolve(__dirname, "../../../../../", `app/javascript/${basePath}`);
+
+module.exports = {
+  alias: {
+    apis: absolutePath("src/apis"),
+    assets: absolutePath("src/assets"),
+    components: absolutePath("src/components"),
+    hooks: absolutePath("src/hooks"),
+    reducers: absolutePath("src/reducers"),
+    routes: absolutePath("src/routes"),
+    stores: absolutePath("src/stores"),
+    translations: absolutePath("src/translations"),
+    utils: absolutePath("src/utils"),
+    src: absolutePath("src"),
+    neetoui: "@bigbinary/neetoui",
+    neetocommons: "@bigbinary/neeto-commons-frontend",
+    neetoicons: "@bigbinary/neeto-icons",
+    neetoteam: "@bigbinary/neeto-team-members-frontend",
+    neetoeditor: "@bigbinary/neeto-editor",
+    neetofilters: "@bigbinary/neeto-filters-frontend",
+    neetomolecules: "@bigbinary/neeto-molecules",
+    neetopayments: "@bigbinary/neeto-payments-frontend",
+    neetocist: "@bigbinary/neeto-cist",
+    images: path.resolve(__dirname, "../../../../../", "app/assets/images"),
+  },
+  extensions: [
+    ".ts",
+    ".mjs",
+    ".js",
+    ".sass",
+    ".scss",
+    ".css",
+    ".module.sass",
+    ".module.scss",
+    ".module.css",
+    ".png",
+    ".svg",
+    ".gif",
+    ".jpeg",
+    ".jpg",
+  ],
+  fallback: {
+    util: require.resolve("util/"),
+    url: require.resolve("url/"),
+    fs: false,
+    buffer: require.resolve("buffer/"),
+    crypto: require.resolve("crypto-browserify"),
+    stream: require.resolve("stream-browserify"),
+  },
+};

package/cjs/configs/webpack/rules.js

@@ -0,0 +1,34 @@
+module.exports = [
+  {
+    test: /\.svg$/i,
+    use: [
+      {
+        loader: "@svgr/webpack",
+        options: { svgoConfig: { plugins: ["preset-default"] } },
+      },
+    ],
+  },
+  {
+    test: /\.ts$/,
+    exclude: /node_modules/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: ["@babel/preset-env", "@babel/preset-typescript"],
+      },
+    },
+  },
+  {
+    test: /\.js$/,
+    include:
+      /node_modules\/@bigbinary\/neeto-commons-frontend\/initializers\/i18n/,
+    use: { loader: "babel-loader", options: { plugins: ["preval"] } },
+  },
+  {
+    test: /\.m?js$/,
+    resolve: {
+      fullySpecified: false, // allows webpack to ignore some package rules as the Strict EcmaScript Module mode.
+    },
+  },
+  { test: /\.js$/, enforce: "pre", use: ["source-map-loader"] },
+];

package/cjs/cypress-configs/initializer.js

@@ -0,0 +1,32 @@
+const { defineConfig } = require("cypress");
+
+const defineCypressConfig = (overrides = {}) => {
+  const { e2e: e2eOverrides = {}, ...otherProps } = overrides;
+
+  return defineConfig({
+    execTimeout: 1800000,
+    defaultCommandTimeout: 8000,
+    requestTimeout: 15000,
+    pageLoadTimeout: 30000,
+    responseTimeout: 45000,
+    viewportWidth: 1440,
+    viewportHeight: 960,
+    chromeWebSecurity: false,
+    env: { grepFilterSpecs: true, grepOmitFiltered: true },
+    retries: { runMode: 1, openMode: 0 },
+    e2e: {
+      setupNodeEvents(on, config) {
+        return require("./plugins")(on, config);
+      },
+      specPattern: "cypress/e2e/**/*.spec.js",
+      excludeSpecPattern: ["cypress/e2e/**/*.wip.spec.js"],
+      experimentalRunAllSpecs: true,
+      testIsolation: true,
+      experimentalMemoryManagement: true,
+      ...e2eOverrides,
+    },
+    ...otherProps,
+  });
+};
+
+module.exports = { defineCypressConfig };