@bigbinary/neeto-commons-frontend 4.8.12 → 4.11.0-beta.1

package/README.md

@@ -135,6 +135,7 @@ Web utility functions [↗](./docs/utils/README.md)
 - [captureAnalyticsEvent](./docs/utils/captureAnalyticsEvent.md)
 - [captureAnalyticsPageView](./docs/utils/captureAnalyticsPageView.md)
 - [buildNestedAttributesPayload](./docs/utils/buildNestedAttributesPayload.md)
+- [loadGoogleFonts](./docs/utils/loadGoogleFonts.md)
 
 </td>
 

package/configs/esbuild/alias.js

@@ -0,0 +1,25 @@
+const path = require("path");
+
+const commonResolve = require("@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js");
+
+const appResolve = require("../webpack/resolve.js");
+
+module.exports = {
+  ...commonResolve.alias,
+  ...appResolve.alias,
+  images: path.resolve(process.cwd(), "app/assets/images"),
+  assert: require.resolve("assert/"),
+  buffer: require.resolve("buffer/"),
+  crypto: require.resolve("crypto-browserify"),
+  http: require.resolve("stream-http"),
+  https: require.resolve("https-browserify"),
+  os: require.resolve("os-browserify/browser"),
+  path: require.resolve("path-browserify"),
+  perf_hooks: require.resolve("perf_hooks"),
+  stream: require.resolve("stream-browserify"),
+  tty: require.resolve("tty-browserify"),
+  url: require.resolve("url/"),
+  util: require.resolve("util/"),
+  vm: require.resolve("vm-browserify"),
+  zlib: require.resolve("browserify-zlib"),
+};

package/configs/esbuild/babel.config.js

@@ -0,0 +1,25 @@
+const {
+  TRANSFORM_RULES,
+} = require("@bigbinary/neeto-commons-frontend/configs/constants.js");
+
+module.exports = api => {
+  api.cache(true);
+
+  return {
+    presets: ["@bigbinary/neeto"],
+    plugins: [
+      [
+        "module-resolver",
+        {
+          root: ["./src"],
+          alias: {
+            "dayjs/plugin/timezone":
+              "@bigbinary/neeto-commons-frontend/utils/timezonePlugin",
+          },
+          loglevel: "silent",
+        },
+      ],
+      ...TRANSFORM_RULES,
+    ],
+  };
+};

package/configs/esbuild/index.js

@@ -0,0 +1,90 @@
+const path = require("path");
+
+const commonResolve = require("@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js");
+const dotenv = require("dotenv");
+const rails = require("esbuild-rails");
+const { sassPlugin } = require("esbuild-sass-plugin");
+const postcss = require("postcss");
+
+const alias = require("./alias.js");
+const { babelPlugin } = require("./plugins/babel.js");
+const { prevalPlugin } = require("./plugins/preval.js");
+const {
+  createDefinitions,
+  entryPoint,
+  createModuleEntryPoints,
+  build,
+  watch,
+  createBigbinaryEntryPoints,
+} = require("./utils.js");
+
+// @ts-ignore
+const postCssConfig = require("../../../../../postcss.config.js");
+
+const isProduction = process.env.NODE_ENV === "production";
+const isWatchMode = process.argv.includes("--watch");
+
+dotenv.config({ path: isProduction ? ".env" : ".env.development" });
+
+const config = {
+  entryPoints: {
+    application: entryPoint("app/javascript/packs/application.js"),
+    ...createBigbinaryEntryPoints(),
+    ...createModuleEntryPoints(["antd", "recharts", "emojiMart"]),
+  },
+  bundle: true,
+  splitting: true,
+  outdir: path.join(process.cwd(), "app/assets/builds"),
+  minify: isProduction,
+  sourcemap: true,
+  assetNames: "assets/[name]-[hash].digested",
+  chunkNames: "chunks/[name]-[hash].digested",
+  publicPath: `${process.env.ASSET_HOST ?? ""}/assets`,
+  plugins: [
+    rails(),
+    prevalPlugin(),
+    babelPlugin(),
+    sassPlugin({
+      async transform(source) {
+        const { css } = await postcss(postCssConfig.plugins).process(source);
+
+        return css;
+      },
+      importMapper: path =>
+        path.replace("@bigbinary/neetoui", "@bigbinary/neetoui/dist"),
+    }),
+  ],
+  conditions: ["style"],
+  logLevel: "error",
+  format: "esm",
+  metafile: true,
+  platform: "browser",
+  mainFields: ["browser", "module", "main"],
+  loader: {
+    ".png": "file",
+    ".jpeg": "file",
+    ".jpg": "file",
+    ".svg": "file",
+    ".ico": "file",
+  },
+  external: ["fs", "path", "os", "events"],
+  alias,
+  jsx: "automatic",
+  resolveExtensions: [...commonResolve.extensions, ".jsx"],
+  define: {
+    "process.env.RAILS_ENV": "'development'",
+    "process.env.NODE_DEBUG": "'development'",
+    ...createDefinitions(process),
+  },
+  banner: {
+    js: isWatchMode
+      ? `(() => new EventSource("http://localhost:${
+          process.env.ESBUILD_PORT || 8000
+        }/esbuild").addEventListener('change', () => location.reload()))();`
+      : "",
+  },
+};
+
+isWatchMode ? watch(config) : build(config);
+
+exports.config = config;

package/configs/esbuild/plugins/babel.js

@@ -0,0 +1,24 @@
+const babel = require("@babel/core");
+const parser = require("@babel/parser");
+
+const babelPlugin = () => ({
+  name: "babel-plugin",
+  setup(build) {
+    build.onLoad({ filter: /app\/javascript\/.*\.*\.jsx?$/ }, async args => {
+      const fs = require("fs").promises;
+      const contents = await fs.readFile(args.path, "utf8");
+
+      const ast = parser.parse(contents, {
+        sourceType: "module",
+        plugins: ["jsx"],
+      });
+
+      const result = babel.transformFromAstSync(ast, contents);
+      const transformedContents = result?.code;
+
+      return { contents: transformedContents, loader: "jsx" };
+    });
+  },
+});
+
+module.exports = { babelPlugin };

package/configs/esbuild/plugins/preval.js

@@ -0,0 +1,26 @@
+const PkgTranslations = require("@bigbinary/neeto-commons-frontend/configs/scripts/getPkgTranslations.js");
+
+const prevalPlugin = () => ({
+  name: "preval-plugin",
+  setup(build) {
+    build.onLoad(
+      {
+        filter:
+          /node_modules\/@bigbinary\/neeto-commons-frontend\/dist\/(cjs\/)?initializers\/i18n.js/,
+      },
+      async args => {
+        const fs = require("fs").promises;
+        const contents = await fs.readFile(args.path, "utf8");
+
+        const transformedContents = contents.replace(
+          `preval.require("../../configs/scripts/getPkgTranslations.js")`,
+          JSON.stringify(PkgTranslations)
+        );
+
+        return { contents: transformedContents, loader: "js" };
+      }
+    );
+  },
+});
+
+module.exports = { prevalPlugin };

package/configs/esbuild/utils.js

@@ -0,0 +1,93 @@
+const esbuild = require("esbuild");
+const path = require("path");
+const fs = require("fs");
+
+// colors for console output
+const consoleColors = {
+  info: "\x1b[34m", // Blue
+  success: "\x1b[32m", // Green
+  warning: "\x1b[33m", // Yellow
+  error: "\x1b[31m", // Red
+  reset: "\x1b[0m", // Reset
+};
+
+const createDefinitions = process => {
+  return Object.keys(process.env).reduce((acc, key) => {
+    acc[`process.env.${key}`] = JSON.stringify(process.env[key]);
+    return acc;
+  }, {});
+};
+
+const entryPoint = file => path.join(process.cwd(), file);
+
+const createBigbinaryEntryPoints = () => {
+  const directoryPath = "node_modules/@bigbinary";
+  const excludeList = ["babel-preset-neeto", "eslint-plugin-neeto"];
+  const entries = {};
+  try {
+    const items = fs.readdirSync(directoryPath);
+    items.forEach(item => {
+      if (excludeList.includes(item)) return;
+      const itemPath = path.join(directoryPath, item, "/dist/index.js");
+      try {
+        fs.accessSync(itemPath);
+        entries[item] = entryPoint(itemPath);
+      } catch {
+        console.log(itemPath, "doesn't exist");
+      }
+    });
+    return entries;
+  } catch (error) {
+    console.error(`Error reading directory ${directoryPath}:`, error);
+    return {};
+  }
+};
+
+const createModuleEntryPoints = modules => {
+  const entries = {};
+  modules.forEach(module => {
+    const modulePath = `node_modules/${
+      module instanceof String ? module : module.path
+    }`;
+    const name = module instanceof String ? module : module.name;
+    if (fs.existsSync(modulePath)) {
+      entries[name] = entryPoint(modulePath);
+    }
+  });
+  return entries;
+};
+
+const build = async config => {
+  try {
+    console.info(
+      `${consoleColors.info}[esbuild]${consoleColors.reset} Building...`
+    );
+    await esbuild.build(config);
+    console.info(
+      `${consoleColors.success}[esbuild]${consoleColors.reset} Build successful`
+    );
+  } catch {
+    console.error(
+      `${consoleColors.error}[esbuild]${consoleColors.reset} Build failed`
+    );
+  }
+};
+
+const watch = async config => {
+  const ctx = await esbuild.context(config);
+  await ctx.watch();
+  await ctx.serve({
+    servedir: config.outdir,
+    port: parseInt(process.env.ESBUILD_PORT || "8000"),
+  });
+  console.log("watching...");
+};
+
+module.exports = {
+  createDefinitions,
+  entryPoint,
+  createModuleEntryPoints,
+  build,
+  watch,
+  createBigbinaryEntryPoints,
+};

package/dist/cjs/utils/index.js

@@ -10,6 +10,7 @@ var utils_validators_slug = require('./validators/slug.js');
 var utils_captureAnalyticsEvent = require('./captureAnalyticsEvent.js');
 var utils_captureAnalyticsPageView = require('./captureAnalyticsPageView.js');
 var utils_buildNestedAttributesPayload = require('./buildNestedAttributesPayload.js');
+var utils_loadGoogleFonts = require('./loadGoogleFonts.js');
 var utils_dayjs = require('./dayjs.js');
 require('axios');
 require('../initializers/constants.js');
@@ -60,5 +61,6 @@ exports.slugValidator = utils_validators_slug.slugValidator;
 exports.captureAnalyticsEvent = utils_captureAnalyticsEvent.captureAnalyticsEvent;
 exports.captureAnalyticsPageView = utils_captureAnalyticsPageView.captureAnalyticsPageView;
 exports.buildNestedAttributesPayload = utils_buildNestedAttributesPayload.buildNestedAttributesPayload;
+exports.loadGoogleFonts = utils_loadGoogleFonts.loadGoogleFonts;
 exports.dayjs = utils_dayjs;
 //# sourceMappingURL=index.js.map

package/dist/cjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/utils/loadGoogleFonts.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var loadGoogleFonts = function loadGoogleFonts(fontFamilies) {
+  fontFamilies.forEach(function (fontFamily) {
+    var link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=".concat(fontFamily);
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+  });
+};
+
+exports.loadGoogleFonts = loadGoogleFonts;
+//# sourceMappingURL=loadGoogleFonts.js.map

package/dist/cjs/utils/loadGoogleFonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadGoogleFonts.js","sources":["../../../src/utils/loadGoogleFonts.js"],"sourcesContent":["export const loadGoogleFonts = fontFamilies => {\n  fontFamilies.forEach(fontFamily => {\n    const link = document.createElement(\"link\");\n    link.href = `https://fonts.googleapis.com/css2?family=${fontFamily}`;\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  });\n};\n"],"names":["loadGoogleFonts","fontFamilies","forEach","fontFamily","link","document","createElement","href","concat","rel","head","appendChild"],"mappings":";;IAAaA,eAAe,GAAG,SAAlBA,eAAeA,CAAGC,YAAY,EAAI;AAC7CA,EAAAA,YAAY,CAACC,OAAO,CAAC,UAAAC,UAAU,EAAI;AACjC,IAAA,IAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC,CAAA;AAC3CF,IAAAA,IAAI,CAACG,IAAI,GAAA,2CAAA,CAAAC,MAAA,CAA+CL,UAAU,CAAE,CAAA;IACpEC,IAAI,CAACK,GAAG,GAAG,YAAY,CAAA;AACvBJ,IAAAA,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACP,IAAI,CAAC,CAAA;AACjC,GAAC,CAAC,CAAA;AACJ;;;;"}

package/dist/utils/index.js

@@ -8,6 +8,7 @@ export { slugValidator } from './validators/slug.js';
 export { captureAnalyticsEvent } from './captureAnalyticsEvent.js';
 export { captureAnalyticsPageView } from './captureAnalyticsPageView.js';
 export { buildNestedAttributesPayload } from './buildNestedAttributesPayload.js';
+export { loadGoogleFonts } from './loadGoogleFonts.js';
 export { default as dayjs } from './dayjs.js';
 import 'axios';
 import '../initializers/constants.js';

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/loadGoogleFonts.js

@@ -0,0 +1,11 @@
+var loadGoogleFonts = function loadGoogleFonts(fontFamilies) {
+  fontFamilies.forEach(function (fontFamily) {
+    var link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=".concat(fontFamily);
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+  });
+};
+
+export { loadGoogleFonts };
+//# sourceMappingURL=loadGoogleFonts.js.map

package/dist/utils/loadGoogleFonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadGoogleFonts.js","sources":["../../src/utils/loadGoogleFonts.js"],"sourcesContent":["export const loadGoogleFonts = fontFamilies => {\n  fontFamilies.forEach(fontFamily => {\n    const link = document.createElement(\"link\");\n    link.href = `https://fonts.googleapis.com/css2?family=${fontFamily}`;\n    link.rel = \"stylesheet\";\n    document.head.appendChild(link);\n  });\n};\n"],"names":["loadGoogleFonts","fontFamilies","forEach","fontFamily","link","document","createElement","href","concat","rel","head","appendChild"],"mappings":"IAAaA,eAAe,GAAG,SAAlBA,eAAeA,CAAGC,YAAY,EAAI;AAC7CA,EAAAA,YAAY,CAACC,OAAO,CAAC,UAAAC,UAAU,EAAI;AACjC,IAAA,IAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC,CAAA;AAC3CF,IAAAA,IAAI,CAACG,IAAI,GAAA,2CAAA,CAAAC,MAAA,CAA+CL,UAAU,CAAE,CAAA;IACpEC,IAAI,CAACK,GAAG,GAAG,YAAY,CAAA;AACvBJ,IAAAA,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACP,IAAI,CAAC,CAAA;AACjC,GAAC,CAAC,CAAA;AACJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "4.8.12",
+  "version": "4.11.0-beta.1",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -142,6 +142,9 @@
     "cypress": "11.2.0",
     "dayjs": "1.11.10",
     "dompurify": "^2.4.0",
+    "esbuild": "^0.24.0",
+    "esbuild-rails": "^1.0.7",
+    "esbuild-sass-plugin": "^3.3.1",
     "eslint": "8.14.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "2.12.1",
@@ -227,6 +230,9 @@
     "dayjs": "1.11.10",
     "dompurify": "^2.4.0",
     "dotenv-webpack": "^8.0.1",
+    "esbuild": "^0.24.0",
+    "esbuild-rails": "^1.0.7",
+    "esbuild-sass-plugin": "^3.3.1",
     "formik": "2.2.9",
     "framer-motion": "11.2.14",
     "husky": "7.0.4",

package/utils.d.ts

@@ -663,4 +663,21 @@ export function buildNestedAttributesPayload(modifiedValues: {
   [key: string]: any;
 }, nestedKeyToModify: string, nestedAttributeKeyInPayload: string, nestedAttributesForArrayKey: string): {
   [key: string]: any;
-};
+};
+/**
+ *
+ * The loadGoogleFonts is a utility function which facilitates loading multiple Google Fonts dynamically by injecting link elements into the document head.
+ *
+ * @example 
+ *
+ * import { useEffect } from "react";
+ * 
+ * import { loadGoogleFonts } from "@bigbinary/neeto-commons-frontend/utils";
+ * 
+ * useEffect(() => {
+ *   const fontFamilies = ['Roboto', 'Open Sans', 'Lato'];
+ *   loadGoogleFonts(fontFamilies);
+ * }, []);
+ * @endexample
+*/
+export function loadGoogleFonts(fontFamilies: string[]): void;