@bigbinary/neeto-commons-frontend 4.14.0 → 4.14.2

package/configs/esbuild/utils.js

@@ -1,5 +1,16 @@
 const esbuild = require("esbuild");
 const path = require("path");
+const fs = require("fs");
+const { execSync, spawn } = require("child_process");
+const { pick } = require("ramda");
+const { globSync } = require("glob");
+const remapping = require("@jridgewell/remapping");
+const {
+  DEFAULT_VISUALIZER_TEMPLATE,
+  NODE_MODULES_PKG_REGEX,
+} = require("./constants");
+const { writeImportMap, removeImportMap } = require("./importMap");
+const { prevalPlugin } = require("./plugins/preval");
 
 // colors for console output
 const consoleColors = {
@@ -19,22 +30,194 @@ const createDefinitions = process => {
 
 const entryPoint = file => path.join(process.cwd(), file);
 
+const writeMetafile = (metafile, outdir) => {
+  const metaFilePath = path.join(outdir, "meta.json");
+  fs.writeFileSync(metaFilePath, JSON.stringify(metafile, null, 2));
+  return metaFilePath;
+};
+
+const generateBundleReport = async ({ metaFilePath, outdir, template }) => {
+  try {
+    console.info(
+      `${consoleColors.info}[bundle-analyzer]${consoleColors.reset} Generating bundle report...`
+    );
+
+    const htmlFilePath = path.join(outdir, "bundle-report.html");
+    execSync(
+      `npx esbuild-visualizer --metadata ${metaFilePath} --filename ${htmlFilePath} --template ${template}`,
+      { stdio: "inherit" }
+    );
+
+    console.info(
+      `${consoleColors.success}[bundle-analyzer]${consoleColors.reset} Bundle report generated at ${htmlFilePath}`
+    );
+
+    const command = process.platform === "win32" ? "start" : "open";
+    spawn(command, [htmlFilePath], { detached: true, stdio: "ignore" });
+    console.info(
+      `${consoleColors.success}[bundle-analyzer]${consoleColors.reset} Bundle report opened in browser`
+    );
+
+    return htmlFilePath;
+  } catch (error) {
+    console.error(
+      `${consoleColors.error}[bundle-analyzer]${consoleColors.reset} Failed to generate bundle report: ${error.message}`
+    );
+    throw error;
+  }
+};
+
+const loadUpstreamMap = jsAbsPath => {
+  const mapPath = jsAbsPath + ".map";
+  if (!fs.existsSync(mapPath)) return null;
+
+  try {
+    const map = JSON.parse(fs.readFileSync(mapPath, "utf-8"));
+    if (!map.sources?.length || map.sources.every(s => !s)) return null;
+
+    return map;
+  } catch {
+    return null;
+  }
+};
+
+const normalizeSourcePath = source => {
+  const match = source.match(NODE_MODULES_PKG_REGEX);
+  if (match) return `${match[1]}:${match[2]}`;
+
+  return source;
+};
+
+const fixSourcemaps = outdir => {
+  const mapFiles = globSync("**/*.map", {
+    cwd: outdir,
+    absolute: true,
+    nodir: true,
+  });
+
+  if (!mapFiles.length) return;
+
+  for (const mapFile of mapFiles) {
+    let parsed;
+
+    try {
+      const raw = fs.readFileSync(mapFile, "utf-8");
+      parsed = JSON.parse(raw);
+    } catch {
+      continue;
+    }
+
+    if (!parsed.sources?.length) continue;
+
+    try {
+      const mapDir = path.dirname(mapFile);
+
+      const result = remapping(parsed, (sourcePath, ctx) => {
+        if (!sourcePath) return null;
+
+        const baseDir = ctx.importer
+          ? path.dirname(path.resolve(mapDir, ctx.importer))
+          : mapDir;
+        const absPath = path.resolve(baseDir, sourcePath);
+        if (!absPath.includes("node_modules/@bigbinary")) return null;
+
+        return loadUpstreamMap(absPath);
+      });
+
+      result.sources = result.sources.map(normalizeSourcePath);
+
+      fs.writeFileSync(mapFile, JSON.stringify(result));
+    } catch {
+      parsed.sources = parsed.sources.map(normalizeSourcePath);
+      fs.writeFileSync(mapFile, JSON.stringify(parsed));
+    }
+  }
+};
+
+// `importMap` is not an esbuild option. It is on unless the product sets it to
+// false.
+const resolveImportMap = ({ importMap = true, ...config }) => ({
+  ...config,
+  importMap,
+});
+
+const withImportMapPlugins = config =>
+  config.importMap
+    ? {
+        ...config,
+        plugins: config.plugins.map(plugin =>
+          plugin.name === "preval-plugin"
+            ? prevalPlugin({ inlineEnglishTranslations: false })
+            : plugin
+        ),
+      }
+    : config;
+
 const build = async config => {
   try {
     console.info(
       `${consoleColors.info}[esbuild]${consoleColors.reset} Building...`
     );
-    await esbuild.build(config);
+
+    const entrypoint = process.argv.includes("--entrypoint")
+      ? process.argv[process.argv.indexOf("--entrypoint") + 1]
+      : null;
+
+    const template = process.argv.includes("--template")
+      ? process.argv[process.argv.indexOf("--template") + 1]
+      : DEFAULT_VISUALIZER_TEMPLATE;
+
+    const { importMap, ...esbuildConfig } = withImportMapPlugins(
+      resolveImportMap(config)
+    );
+    const buildConfig = entrypoint
+      ? {
+          ...esbuildConfig,
+          entryPoints: pick([entrypoint], esbuildConfig.entryPoints),
+        }
+      : esbuildConfig;
+
+    const shouldAnalyze = buildConfig.metafile;
+    removeImportMap(buildConfig.outdir);
+    const result = await esbuild.build({
+      ...buildConfig,
+      metafile: shouldAnalyze || importMap,
+    });
+
+    fixSourcemaps(buildConfig.outdir);
+
+    if (importMap) {
+      writeImportMap({
+        metafile: result.metafile,
+        outdir: buildConfig.outdir,
+        publicPath: buildConfig.publicPath,
+        absWorkingDir: buildConfig.absWorkingDir,
+      });
+    }
+
+    if (shouldAnalyze) {
+      const metaFilePath = writeMetafile(result.metafile, buildConfig.outdir);
+      await generateBundleReport({
+        metaFilePath,
+        outdir: buildConfig.outdir,
+        template,
+      });
+    }
+
     console.info(
       `${consoleColors.success}[esbuild]${consoleColors.reset} Build successful`
     );
-  } catch {
+  } catch (error) {
+    console.error(`Build error: ${error.message}`);
     const errorMessage = `${consoleColors.error}[esbuild]${consoleColors.reset} Build failed`;
     throw new Error(errorMessage);
   }
 };
 
-const watch = async config => {
+const watch = async ({ importMap: _importMap, ...config }) => {
+  // Watch builds are served without an import map; remove any left over from a
+  // previous production build so the layout does not use stale mappings.
+  removeImportMap(config.outdir);
   const ctx = await esbuild.context(config);
   await ctx.watch();
   await ctx.serve({

package/configs/eslint/helpers/index.mjs

@@ -1,9 +1,12 @@
 import fs from "fs";
+import { createRequire } from "node:module";
 import path from "path";
 import { fileURLToPath } from "url";
 
 import { mergeDeepLeft, mergeLeft, keys } from "ramda";
 
+const require = createRequire(import.meta.url);
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -38,7 +41,7 @@ const generatePathGroupsFromAssets = assetsPath => {
 };
 
 const buildPathGroupsBasedOnWebpackAliases = ({
-  customAliasPath = "config/webpack/resolve.js",
+  customAliasPath = "config/esbuild/config.js",
   commonAliasPath = "node_modules/@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js",
 }) => {
   const rootOfProject = path.join(__dirname, "../../../../../../");

package/configs/eslint/index.mjs

@@ -7,6 +7,7 @@ import js from "@eslint/js";
 import { defineConfig } from "eslint/config";
 import jam3 from "eslint-plugin-jam3";
 import prettier from "eslint-plugin-prettier";
+import pluginPromise from "eslint-plugin-promise";
 import react from "eslint-plugin-react";
 import * as reactHooks from "eslint-plugin-react-hooks";
 import security from "eslint-plugin-security";
@@ -31,17 +32,43 @@ const compat = new FlatCompat({ baseDirectory: __dirname });
  * unless you're sure of it.
  */
 export default defineConfig([
+  {
+    ignores: [
+      "**/public/**",
+      "**/coverage/**",
+      "**/db/**",
+      "**/docs/**",
+      "**/log/**",
+      "**/.semaphore/**",
+      "**/test/**",
+      "**/tmp/**",
+      "**/.vscode/**",
+      "**/babel.config.js",
+      "**/esbuild.config.js",
+      "**/vite.config.js",
+      "**/app/javascript/packs/**",
+      "**/rollup.config.js",
+      "**/tailwind.config.js",
+      "**/.prettierrc.js",
+      "!.scripts/**",
+      "**/node_modules/**",
+      "**/eslint.config.mjs",
+      "**/package.json",
+      "**/jsconfig.json",
+    ],
+  },
+
   js.configs.recommended,
   security.configs.recommended,
+  pluginPromise.configs["flat/recommended"],
 
   ...compat.extends(
-    "plugin:@bigbinary/neeto/recommended",
     "plugin:import/recommended",
     "plugin:promise/recommended",
-    // "plugin:json/recommended",
-    "plugin:cypress/recommended",
+    "plugin:json/recommended-legacy",
     "plugin:react/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:@bigbinary/neeto/recommended"
   ),
   globalsConfig,
   orderConfig,
@@ -73,7 +100,7 @@ export default defineConfig([
         ...globals.commonjs,
         ...globals.node,
       },
-      parser: babelParser, // babel-eslint is deprecated now. This is the latest package.
+      parser: babelParser,
       ecmaVersion: 2018,
       sourceType: "module",
       parserOptions: {
@@ -195,12 +222,12 @@ export default defineConfig([
       "sonarjs/no-identical-conditions": "error",
       // not-auto-fixable: This rule prevents using a function with no return as output, passing it to another function, or assigning its result to a variable.
       "sonarjs/no-use-of-empty-return-value": "error",
-      // not-auto-fixable: This rule prevents using loops with at most one iteration.
-      "sonarjs/no-one-iteration-loop": "error",
       // not-auto-fixable: This rule prevents using catch clause that only throws an error.
       "sonarjs/no-useless-catch": "error",
       // not-auto-fixable: This rule warns against "eval(variable)" which can allow an attacker to run arbitrary code inside your process.
       "security/detect-eval-with-expression": "warn",
+      // TODO Temporarily disabled for ESlint major version upgrade.
+      "import/no-unresolved": "off",
     },
   },
 ]);

package/configs/jest/prevalTransformer.js

@@ -0,0 +1,33 @@
+const { createTransformer } = require("babel-jest");
+
+const { prevalReplace } = require("../utils/prevalReplace");
+
+const babelTransformer = createTransformer();
+
+module.exports = {
+  ...babelTransformer,
+  getCacheKey(sourceText, sourcePath, options) {
+    const replaced = prevalReplace(sourceText);
+    const code = replaced ?? sourceText;
+
+    return babelTransformer.getCacheKey(code, sourcePath, options);
+  },
+  process(sourceText, sourcePath, options) {
+    const replaced = prevalReplace(sourceText);
+    const code = replaced ?? sourceText;
+
+    return babelTransformer.process(code, sourcePath, options);
+  },
+  processAsync(sourceText, sourcePath, options) {
+    const replaced = prevalReplace(sourceText);
+    const code = replaced ?? sourceText;
+
+    return babelTransformer.processAsync(code, sourcePath, options);
+  },
+  getCacheKeyAsync(sourceText, sourcePath, options) {
+    const replaced = prevalReplace(sourceText);
+    const code = replaced ?? sourceText;
+
+    return babelTransformer.getCacheKeyAsync(code, sourcePath, options);
+  },
+};

package/configs/nanos/eslint/index.mjs

@@ -1,17 +1,25 @@
-import js from "@eslint/js";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import { FlatCompat } from "@eslint/eslintrc";
 import { defineConfig } from "eslint/config";
 
+import orderConfig from "./imports/order.mjs";
+
 import commonConfiguration from "../../eslint/index.mjs";
 import globalsConfig from "../../eslint/globals.mjs";
 import enforcedConfig from "../../eslint/imports/enforced.mjs";
-import orderConfig from "../../eslint/imports/order.mjs";
 import overridesConfig from "../../eslint/overrides.mjs";
 import promiseConfig from "../../eslint/promise.mjs";
 import reactConfig from "../../eslint/react.mjs";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
 export default defineConfig([
-  js.configs.recommended,
   ...commonConfiguration,
+  ...compat.extends("plugin:@bigbinary/neeto/nanos-recommended"),
   globalsConfig,
   orderConfig,
   overridesConfig,

package/configs/nanos/rollup/watchConfig.js

@@ -0,0 +1,136 @@
+/* eslint-disable security/detect-non-literal-fs-filename */
+import fs from "fs";
+import { createRequire } from "module";
+import path from "path";
+
+import { globby } from "globby";
+import copy from "rollup-plugin-copy";
+
+const require = createRequire(import.meta.url);
+
+const getAppArg = () => {
+  const argv = process.argv.slice(2);
+
+  for (let i = 0; i < argv.length; i++) {
+    if (argv[i] === "--app" && argv[i + 1] && !argv[i + 1].startsWith("--")) {
+      return argv[i + 1];
+    }
+
+    if (argv[i].startsWith("--app=")) {
+      return argv[i].split("=")[1];
+    }
+  }
+
+  return null;
+};
+
+const invalidateYarnCache = destination => {
+  const nodeModulesDir = path.resolve(destination, "../..");
+
+  // Yarn 1.x uses .yarn-integrity
+  const integrityPath = path.join(nodeModulesDir, ".yarn-integrity");
+  if (fs.existsSync(integrityPath)) fs.unlinkSync(integrityPath);
+
+  // Yarn 4.x (with nodeLinker: node-modules) uses .yarn-state.yml
+  const statePath = path.join(nodeModulesDir, ".yarn-state.yml");
+  if (fs.existsSync(statePath)) fs.unlinkSync(statePath);
+};
+
+const emitReadyFile = (
+  destination,
+  { shouldInvalidateYarnCache = false } = {}
+) => ({
+  name: "emit-ready-file",
+  writeBundle: () => {
+    const markerPath = path.join(destination, ".ready");
+
+    require("fs").writeFileSync(
+      markerPath,
+      `Built at ${new Date().toISOString()}`
+    );
+
+    if (shouldInvalidateYarnCache) invalidateYarnCache(destination);
+  },
+});
+
+const watchPaths = customWatchPaths => ({
+  name: "watch-translations",
+  async buildStart() {
+    const pathsToWatch = [];
+
+    if (fs.existsSync("app/javascript/src/translations")) {
+      pathsToWatch.push("app/javascript/src/translations");
+    } else if (fs.existsSync("src/translations")) {
+      pathsToWatch.push("src/translations");
+    }
+
+    if (fs.existsSync("typeTemplates")) {
+      pathsToWatch.push("typeTemplates/**/*");
+    } else {
+      pathsToWatch.push("types/**/*");
+      pathsToWatch.push("*.d.ts");
+    }
+
+    if (customWatchPaths && customWatchPaths.length) {
+      pathsToWatch.push(...customWatchPaths);
+    }
+
+    const matchedPaths = await globby(pathsToWatch);
+
+    matchedPaths.forEach(p => this.addWatchFile(path.resolve(p)));
+  },
+});
+
+const copyFiles = (destination, customCopyPaths) =>
+  copy({
+    targets: [
+      { src: "package.json", dest: destination },
+      { src: "*.d.ts", dest: destination },
+      { src: "types/", dest: destination },
+      { src: "LICENSE.md", dest: destination },
+      { src: "src/translations", dest: path.join(destination, "src") },
+      {
+        src: "app/javascript/src/translations",
+        dest: path.join(destination, "app/javascript/src"),
+      },
+      ...customCopyPaths.map(p => ({
+        src: p.src,
+        dest: path.join(destination, p.dest),
+      })),
+    ],
+  });
+
+const getWatchConfig = ({
+  customCopyPaths = [],
+  customWatchPaths = [],
+} = {}) => {
+  const appArg = getAppArg();
+
+  const currentDir = process.cwd();
+
+  if (!appArg) {
+    return {
+      watchPlugins: [emitReadyFile(path.resolve(currentDir, "dist"))],
+      appPath: null,
+    };
+  }
+
+  const packageJson = require(path.resolve(currentDir, "package.json"));
+
+  const appPath = path.resolve(
+    currentDir,
+    appArg,
+    "node_modules",
+    packageJson.name
+  );
+
+  const watchPlugins = [
+    watchPaths(customWatchPaths),
+    copyFiles(appPath, customCopyPaths),
+    emitReadyFile(appPath, { shouldInvalidateYarnCache: true }),
+  ];
+
+  return { watchPlugins, appPath };
+};
+
+export { getWatchConfig };

package/configs/nanos/webpack/resolve.js

@@ -25,12 +25,36 @@ module.exports = {
     utils: `${srcPath}/utils`,
     src: srcPath,
     neetoui: "@bigbinary/neetoui",
+    neetoatoms: "@bigbinary/neeto-atoms",
     neetocommons: "@bigbinary/neeto-commons-frontend",
+    neetointegrations: "@bigbinary/neeto-integrations-frontend",
+    neetothemes: "@bigbinary/neeto-themes-frontend",
+    neetoslack: "@bigbinary/neeto-slack-frontend",
+    neetorules: "@bigbinary/neeto-rules-frontend",
+    neetoapprovals: "@bigbinary/neeto-approvals-frontend",
+    neetofields: "@bigbinary/neeto-fields-frontend",
+    neetofolders: "@bigbinary/neeto-folders-frontend",
+    neetoredirecturls: "@bigbinary/neeto-redirect-urls-frontend",
+    neetogithub: "@bigbinary/neeto-github-frontend",
+    neetoratelimit: "@bigbinary/neeto-rate-limit-frontend",
+    neetoaccesscontrol: "@bigbinary/neeto-access-control-frontend",
+    neetotags: "@bigbinary/neeto-tags-frontend",
+    neetoactivities: "@bigbinary/neeto-activities-frontend",
+    neetotemplates: "@bigbinary/neeto-templates-frontend",
+    neetoapikeys: "@bigbinary/neeto-api-keys-frontend",
+    neetoemailnotifications: "@bigbinary/neeto-email-notifications-frontend",
+    neetothankyou: "@bigbinary/neeto-thank-you-frontend",
+    neetoimageuploader: "@bigbinary/neeto-image-uploader-frontend",
+    neetowebhooks: "@bigbinary/neeto-webhooks-frontend",
+    neetoform: "@bigbinary/neeto-form-frontend",
+    neetoprojects: "@bigbinary/neeto-projects-frontend",
+    neetomessagetemplates: "@bigbinary/neeto-message-templates-frontend",
     neetoicons: "@bigbinary/neeto-icons",
     neetoteam: "@bigbinary/neeto-team-members-frontend",
-    neetoeditor: "@bigbinary/neeto-editor",
+    neetoeditor: "@bigbinary/neeto-editor-frontend",
     neetofilters: "@bigbinary/neeto-filters-frontend",
     neetomolecules: "@bigbinary/neeto-molecules",
+    neetopayments: "@bigbinary/neeto-payments-frontend",
     neetocist: "@bigbinary/neeto-cist",
     neetohotkeys: "@bigbinary/neeto-hotkeys",
   },

package/configs/nextjs/eslint/index.mjs

@@ -1,17 +1,25 @@
-import js from "@eslint/js";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import { FlatCompat } from "@eslint/eslintrc";
 import { defineConfig } from "eslint/config";
 
+import orderConfig from "./imports/order.mjs";
+
 import commonConfiguration from "../../eslint/index.mjs";
 import globalsConfig from "../../eslint/globals.mjs";
 import enforcedConfig from "../../eslint/imports/enforced.mjs";
-import orderConfig from "../../eslint/imports/order.mjs";
 import overridesConfig from "../../eslint/overrides.mjs";
 import promiseConfig from "../../eslint/promise.mjs";
 import reactConfig from "../../eslint/react.mjs";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
 export default defineConfig([
-  js.configs.recommended,
   ...commonConfiguration,
+  ...compat.extends("plugin:@bigbinary/neeto/nextjs-recommended"),
   globalsConfig,
   orderConfig,
   overridesConfig,

package/configs/prettier.js

@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: ["prettier-plugin-tailwindcss"],
   tailwindConfig: "./tailwind.config.js",
   trailingComma: "es5",
   arrowParens: "avoid",

package/configs/scripts/buildTranslationImports.js

@@ -0,0 +1,21 @@
+const fs = require("fs");
+const path = require("path");
+
+const getTranslationImports = () => {
+  const translationsDir = path.resolve("dist/translations");
+
+  const files = fs
+    .readdirSync(translationsDir)
+    .filter(file => file.endsWith(".json"));
+
+  // Create a map like { "en": () => import("dist/translations/en.json") }
+  const entries = files.map(file => {
+    const lang = path.basename(file, ".json");
+
+    return `"${lang}": () => import("${process.cwd()}/dist/translations/${file}")`;
+  });
+
+  return `{ ${entries.join(",\n")} }`;
+};
+
+module.exports = getTranslationImports;