@bigbinary/neeto-commons-frontend 4.14.0 → 4.14.1

package/utils.d.ts

@@ -1,10 +1,10 @@
 import { Mixin, Subscription } from "@rails/actioncable";
 import Dayjs from "dayjs";
-import { utc as utcPlugin } from 'dayjs/plugin/utc';
-import { tz as tzPlugin } from 'dayjs/plugin/timezone';
-import { duration as durationPlugin } from 'dayjs/plugin/duration';
-import { isDayjs as isDayjsPlugin } from 'dayjs';
-import { updateLocale as updateLocalePlugin } from 'dayjs/plugin/updateLocale';
+import { utc as utcPlugin } from "dayjs/plugin/utc";
+import { tz as tzPlugin } from "dayjs/plugin/timezone";
+import { duration as durationPlugin } from "dayjs/plugin/duration";
+import { isDayjs as isDayjsPlugin } from "dayjs";
+import { updateLocale as updateLocalePlugin } from "dayjs/plugin/updateLocale";
 import React from "react";
 import { StringSchema } from "yup";
 export function resetAuthTokens(): void;
@@ -139,23 +139,31 @@ type buildUrlOptions = {
 */
 export function buildUrl(route: string, params: object, options?: buildUrlOptions): string;
 type DateTimeType = string | number | Dayjs.Dayjs | Date | null | undefined;
-export const timeFormat: {
+type HourFormatOptions = {
+  hourFormat?: "12h" | "24h";
+};
+export const createTimeFormat: (dayjsInstance: DayjsStatic) => {
   fromNow: (time: DateTimeType) => string;
-  time: (time: DateTimeType) => string;
-  timeWithSeconds: (time: DateTimeType) => string;
+  time: (time: DateTimeType, options?: HourFormatOptions) => string;
+  timeWithSeconds: (time: DateTimeType, options?: HourFormatOptions) => string;
   date: (time: DateTimeType) => string;
   dateWeek: (time: DateTimeType) => string;
   dateWeekDayExtended: (time: DateTimeType) => string;
   dateWeekWithoutYear: (time: DateTimeType) => string;
   dateWeekWithoutYearDayExtended: (time: DateTimeType) => string;
-  dateTime: (time: DateTimeType) => string;
-  dateTimeWithSeconds: (time: DateTimeType) => string;
-  dateWeekTime: (time: DateTimeType) => string;
-  dateWeekTimeDayExtended: (time: DateTimeType) => string;
-  extended: (time: DateTimeType) => string;
+  dateTime: (time: DateTimeType, options?: HourFormatOptions) => string;
+  dateTimeWithSeconds: (time: DateTimeType, options?: HourFormatOptions) => string;
+  dateWeekTime: (time: DateTimeType, options?: HourFormatOptions) => string;
+  dateWeekTimeDayExtended: (time: DateTimeType, options?: HourFormatOptions) => string;
+  timeWeekday: (time: DateTimeType, options?: HourFormatOptions) => string;
+  monthDay: (time: DateTimeType) => string;
+  monthYear: (time: DateTimeType) => string;
+  extended: (time: DateTimeType, options?: HourFormatOptions) => string;
   default: (time: DateTimeType) => string;
-  defaultWithTime: (time: DateTimeType) => string;
+  defaultWithTime: (time: DateTimeType, options?: HourFormatOptions) => string;
 };
+export const createDateFormat: typeof createTimeFormat;
+export const timeFormat: ReturnType<typeof createTimeFormat>;
 /**
  *
  * The dateFormat and timeFormat functions are aliases of each other, and they
@@ -164,7 +172,9 @@ export const timeFormat: {
  *
  * a convenient way to format date and time values according to specific patterns
  *
- * and display them in a human-readable format.
+ * and display them in a human-readable format. Learn more about the real-world
+ *
+ * scenarios at https://youtu.be/h3L9nb0G0RI.
  *
  * @example 
  *
@@ -182,17 +192,17 @@ export const timeFormat: {
  * dateFormat.date(date); // "Jan 1, 2020"
  * timeFormat.date(date); // "Jan 1, 2020"
  * 
- * dateFormat.dateWeek(date); // "Jan 1, 2020 Wed"
- * timeFormat.dateWeek(date); // "Jan 1, 2020 Wed"
+ * dateFormat.dateWeek(date); // "Wed, Jan 1, 2020"
+ * timeFormat.dateWeek(date); // "Wed, Jan 1, 2020"
  * 
- * dateFormat.dateWeekDayExtended(date); // "Jan 1, 2020 Wednesday"
- * timeFormat.dateWeekDayExtended(date); // "Jan 1, 2020 Wednesday"
+ * dateFormat.dateWeekDayExtended(date); // "Wednesday, Jan 1, 2020"
+ * timeFormat.dateWeekDayExtended(date); // "Wednesday, Jan 1, 2020"
  * 
- * dateFormat.dateWeekWithoutYear(date); // "Jan 1, Wed"
- * timeFormat.dateWeekWithoutYear(date); // "Jan 1, Wed"
+ * dateFormat.dateWeekWithoutYear(date); // "Wed, Jan 1"
+ * timeFormat.dateWeekWithoutYear(date); // "Wed, Jan 1"
  * 
- * dateFormat.dateWeekWithoutYearDayExtended(date); // "Jan 1, Wednesday"
- * timeFormat.dateWeekWithoutYearDayExtended(date); // "Jan 1, Wednesday"
+ * dateFormat.dateWeekWithoutYearDayExtended(date); // "Wednesday, Jan 1"
+ * timeFormat.dateWeekWithoutYearDayExtended(date); // "Wednesday, Jan 1"
  * 
  * dateFormat.dateTime(date); // "Jan 1, 2020 12:00 AM"
  * timeFormat.dateTime(date); // "Jan 1, 2020 12:00 AM"
@@ -200,21 +210,44 @@ export const timeFormat: {
  * dateFormat.dateTimeWithSeconds(date); // "Jan 1, 2020 12:00:00 AM"
  * timeFormat.dateTimeWithSeconds(date); // "Jan 1, 2020 12:00:00 AM"
  * 
- * dateFormat.dateWeekTime(date); // "Jan 1, 2020 Wed 12:00 AM"
- * timeFormat.dateWeekTime(date); // "Jan 1, 2020 Wed 12:00 AM"
+ * dateFormat.dateWeekTime(date); // "Wed, Jan 1, 2020 12:00 AM"
+ * timeFormat.dateWeekTime(date); // "Wed, Jan 1, 2020 12:00 AM"
  * 
- * dateFormat.dateWeekTimeDayExtended(date); // "Jan 1, 2020 Wednesday 12:00 AM"
- * timeFormat.dateWeekTimeDayExtended(date); // "Jan 1, 2020 Wednesday 12:00 AM"
+ * dateFormat.dateWeekTimeDayExtended(date); // "Wednesday, Jan 1, 2020 12:00 AM"
+ * timeFormat.dateWeekTimeDayExtended(date); // "Wednesday, Jan 1, 2020 12:00 AM"
  * 
  * dateFormat.extended(date); // "Wednesday January 1, 2020 12:00 AM (3 years ago)"
  * timeFormat.extended(date); // "Wednesday January 1, 2020 12:00 AM (3 years ago)"
  * 
+ * dateFormat.timeWeekday(date); // "12:00 AM Wednesday"
+ * timeFormat.timeWeekday(date); // "12:00 AM Wednesday"
+ * 
+ * dateFormat.monthDay(date); // "January 1"
+ * timeFormat.monthDay(date); // "January 1"
+ * 
+ * dateFormat.monthYear(date); // "January 2020"
+ * timeFormat.monthYear(date); // "January 2020"
+ * 
  * dateFormat.default(date); // This will return date in user date format in globalProps
  * timeFormat.default(date); // This will return date in user date format in globalProps
  * 
  * dateFormat.defaultWithTime(date); // This will return date time in user date format in globalProps
  * timeFormat.defaultWithTime(date); // This will return date time in user date format in globalProps
  * @endexample
+ * Methods that include time (time, timeWithSeconds, dateTime,
+ *
+ * dateTimeWithSeconds, dateWeekTime, dateWeekTimeDayExtended, extended,
+ *
+ * defaultWithTime, timeWeekday) accept an optional second argument to override
+ *
+ * the global hour format:
+ *
+ * @example 
+ *
+ * dateFormat.time(date, { hourFormat: "24h" }); // "00:00" (even if global is 12h)
+ * dateFormat.time(date, { hourFormat: "12h" }); // "12:00 AM" (even if global is 24h)
+ * dateFormat.dateTime(date, { hourFormat: "24h" }); // "Jan 1, 2020 00:00"
+ * @endexample
  * All neeto-applications should be using any one of these styles (according to the
  *
  * space available) to display date and time unless if the case is too specific to
@@ -575,39 +608,9 @@ export function showThumbsUpToastr(): void;
  * @endexample
 */
 export function slugValidator(label: string): StringSchema;
-/**
- *
- * The captureAnalyticsEvent is a utility function which facilitates logging user
- *
- * events to Mixpanel.
- *
- * @example 
- *
- * import { captureAnalyticsEvent } from "@bigbinary/neeto-commons-frontend/utils";
- * // ...
- * 
- * captureAnalyticsEvent("event_name", { subdomain: "spinkart" });
- * 
- * // The second argument is optional, containing additional data to log as part of the event.
- * @endexample
-*/
 export function captureAnalyticsEvent(name: string, properties?: {
   [key: string]: any;
 }): void;
-/**
- *
- * The captureAnalyticsPageView is a utility function which facilitates logging user page views to Mixpanel.
- *
- * @example 
- *
- * import { captureAnalyticsPageView } from "@bigbinary/neeto-commons-frontend/utils";
- * // ...
- * 
- * captureAnalyticsPageView("page_name", { additional: "information" });
- * 
- * // The second argument is optional, containing additional data to log as part of the page.
- * @endexample
-*/
 export function captureAnalyticsPageView(page: string, properties?: {
   [key: string]: string;
 }): void;
@@ -680,4 +683,146 @@ export function buildNestedAttributesPayload(modifiedValues: {
  * }, []);
  * @endexample
 */
-export function loadGoogleFonts(fontFamilies: string[]): void;
+export function loadGoogleFonts(fontFamilies: string[]): void;
+
+// Device Information Types
+export interface DeviceInformationOptions {
+  appType?: string;
+}
+export interface DeviceInfo {
+  type: string;
+  os: string;
+  osVersion: string;
+  screen: {
+    width: number;
+    height: number;
+    pixelRatio: number;
+    colorDepth: number;
+  };
+  viewport: {
+    width: number;
+    height: number;
+  };
+  memoryGB: number | null;
+}
+export interface BrowserInfo {
+  name: string;
+  version: string;
+  userAgent: string;
+  javaScriptEnabled: boolean;
+  cookiesEnabled: boolean;
+  websockets: boolean;
+  webgl: boolean;
+  doNotTrack: string | null;
+  mimeTypes: string[];
+  network: {
+    effectiveType: string;
+    downlink: number;
+    rtt: number;
+    saveData: boolean;
+  } | null;
+}
+export interface PermissionsInfo {
+  microphone: string;
+  camera: string;
+  geolocation: string;
+  notifications: string;
+  media: {
+    hasMic: boolean | null;
+    hasCamera: boolean | null;
+  };
+}
+export interface MetaInfo {
+  time: {
+    zone: string;
+    offset: string;
+  };
+  referrer: string;
+  appType: string;
+}
+export interface DeviceInformationResult {
+  device: DeviceInfo;
+  browser: BrowserInfo;
+  permissions: PermissionsInfo;
+  meta: MetaInfo;
+}
+/**
+ *
+ * The deviceInformation function collects comprehensive device and browser
+ *
+ * information including device specifications, browser details, permissions, and
+ *
+ * network information. This function is useful for analytics, debugging, feature
+ *
+ * detection, and providing device-specific experiences.
+ *
+ * A Promise that resolves to an object containing:
+ *
+ * @example 
+ *
+ * const deviceInfo = await deviceInformation();
+ * 
+ * console.log(deviceInfo.device.type); // "desktop", "mobile", or "tablet"
+ * console.log(deviceInfo.browser.name); // "Chrome", "Firefox", "Safari", etc.
+ * console.log(deviceInfo.permissions.microphone); // "granted", "denied", "prompt", or "unsupported"
+ * @endexample
+ * @example 
+ *
+ * {
+ *   device: {
+ *     type: "desktop",
+ *     os: "macOS",
+ *     osVersion: "13.0",
+ *     screen: {
+ *       width: 1920,
+ *       height: 1080,
+ *       pixelRatio: 2,
+ *       colorDepth: 24
+ *     },
+ *     viewport: {
+ *       width: 1440,
+ *       height: 900
+ *     },
+ *     memoryGB: 16
+ *   },
+ *   browser: {
+ *     name: "Chrome",
+ *     version: "119.0.0.0",
+ *     userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)...",
+ *     javaScriptEnabled: true,
+ *     cookiesEnabled: true,
+ *     websockets: true,
+ *     webgl: true,
+ *     doNotTrack: null,
+ *     mimeTypes: ["text/html", "text/plain", ...],
+ *     network: {
+ *       effectiveType: "4g",
+ *       downlink: 10,
+ *       rtt: 50,
+ *       saveData: false
+ *     }
+ *   },
+ *   permissions: {
+ *     microphone: "prompt",
+ *     camera: "denied",
+ *     geolocation: "granted",
+ *     notifications: "unsupported",
+ *     media: {
+ *       hasMic: true,
+ *       hasCamera: true
+ *     }
+ *   },
+ *   meta: {
+ *     timezone: "America/New_York",
+ *     referrer: "https://example.com"
+ *   },
+ *   serverDerived: {
+ *     country: "US",
+ *     region: "California",
+ *     city: "San Francisco"
+ *   }
+ * }
+ * @endexample
+*/
+export function deviceInformation(options?: DeviceInformationOptions): Promise<DeviceInformationResult>;
+export function getAppType(): "extension" | "desktop" | "mobile" | "web";

package/configs/scripts/getPkgTranslations.js

@@ -1,45 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-const { mergeDeepLeft } = require("ramda");
-
-const packageDir = path.join(__dirname, "../../../");
-
-const getPkgTransPath = pkg => {
-  const basePath = path.join(packageDir, pkg);
-
-  const transPath1 = path.join(basePath, "app/javascript/src/translations");
-  const transPath2 = path.join(basePath, "src/translations");
-
-  return fs.existsSync(transPath1) ? transPath1 : transPath2;
-};
-
-const packages = fs.readdirSync(packageDir);
-
-const loadTranslations = translationsDir => {
-  try {
-    const jsonFiles = fs
-      .readdirSync(translationsDir)
-      .filter(file => file.endsWith(".json"))
-      .map(file => path.join(translationsDir, file));
-
-    const translations = {};
-
-    jsonFiles.forEach(jsonFile => {
-      const content = fs.readFileSync(jsonFile, "utf8");
-      const basename = path.basename(jsonFile, ".json");
-
-      translations[basename] = { translation: JSON.parse(content) };
-    });
-
-    return translations;
-  } catch {
-    return {};
-  }
-};
-
-const packageTranslations = packages
-  .map(pkg => loadTranslations(getPkgTransPath(pkg)))
-  .reduce(mergeDeepLeft);
-
-module.exports = packageTranslations;

package/cypress-commands.d.ts

@@ -1,110 +0,0 @@
-declare namespace Cypress {
-  interface Chainable {
-    clearAndType(selector: string, text: string): Void;
-    clearAndTypeFast(selector: string, text: string): Void;
-    clearByClickAndTypeFast(selector: string, text: string): Void;
-    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
-        | {
-            title: string;
-            description: string;
-            alias: string;
-            requestCount: number;
-            toastMessage: string;
-            verifyToastIcon: boolean;
-          }
-    ): Void;
-    interceptApi(
-      alias: string,
-      times?: number
-    ): Cypress.Chainable<Cypress.InterceptionOptions>;
-    waitForMultipleRequest(
-      alias: string,
-      times?: number
-    ): Chainable<JQuery<HTMLElement>>;
-
-    /**
-     * Make an HTTP request with specific method.
-     * @see https://on.cypress.io/request
-     */
-    apiRequest(
-      options: Cypress.RequestBody
-    ): Cypress.Chainable<Cypress.Response>;
-
-    reloadAndWait(requestCount?: number): Void;
-    selectOption(containerSelector: string, optionText: string): Void;
-    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
-     */
-    openInSameTabOnClick(props: {
-      url: string;
-      alias: string;
-      selector: string;
-    });
-    globalState(key: string): Void;
-    ifExist(selector: string, callback: Function): Void;
-    ifNotExist(selector: string, callback: Function): Void;
-    dragAndDrop(props: {
-      subject: string;
-      target: string;
-      dragIndex: number;
-      dropIndex: number;
-    });
-    verifyPlaceholder(textInputSelector: string, value: string): Void;
-    enableOrDisableSwitch(switchButton: string, value: string): Void;
-    interceptNonVersionedApi(props: {
-      url: string;
-      alias: string;
-      times?: number; // maximum number of times to match
-    }): Cypress.Chainable<Cypress.InterceptionOptions>;
-    typeOnSearchField(props: {
-      delay?: number;
-      selector: string;
-      value: string;
-      skipSearchRequest?: boolean; // default true
-    });
-    clickByRemoveTargetAttr(selector: string): Void;
-    navigateToPreviewPage(selector: string, requestCount: number): Void;
-    saveChanges(aliasName: string, requestCount: number): Void;
-    verifyAttribute(props: {
-      selector: string;
-      attr: string;
-      value: string;
-    }): Void;
-    verifyUnsavedAlertModal(cancelButton: string): Void;
-    verifyTooltip(selector: string, text: string): Void;
-    /**
-     * Command to get email content using Mailosaur API.
-     * @param props Mailosaur API request body.
-     * @see https://mailosaur.com/docs/frameworks-and-tools/cypress/#library-reference
-     * @param options Used to specify additional criteria for the email retrieval
-     * @see https://mailosaur.com/docs/email-testing/cypress#2-options
-     */
-    getEmailContent(props, options): Void;
-  }
-}

package/cypress-configs/initializer.js

@@ -1,32 +0,0 @@
-const { defineConfig } = require("cypress");
-
-const defineCypressConfig = (overrides = {}) => {
-  const { e2e: e2eOverrides = {}, ...otherProps } = overrides;
-
-  return defineConfig({
-    execTimeout: 1800000,
-    defaultCommandTimeout: 12000,
-    requestTimeout: 15000,
-    pageLoadTimeout: 60000,
-    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 };

package/cypress-configs/plugins.js

@@ -1,114 +0,0 @@
-// @ts-nocheck
-/// <reference types="cypress" />
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-const path = require("path");
-
-const webpack = require("@cypress/webpack-preprocessor");
-const {
-  cypressBrowserPermissionsPlugin,
-} = require("cypress-browser-permissions");
-const { cloudPlugin } = require("cypress-cloud/plugin");
-const fs = require("fs-extra");
-
-const getConfigurationByFile = file => {
-  const pathToConfigFile = `cypress/config/cypress.${file}.json`;
-
-  return file && fs.readJsonSync(path.join(process.cwd(), pathToConfigFile));
-};
-
-const globalState = "globalState.txt";
-
-const merge = (target, source = {}) => {
-  Object.keys(source).forEach(key => {
-    if (source[key] && typeof source[key] === "object") {
-      merge((target[key] = target[key] || {}), source[key]);
-
-      return;
-    }
-    target[key] = source[key];
-  });
-
-  return target;
-};
-
-module.exports = (on, config) => {
-  const environment = config.env.configFile;
-  const configForEnvironment = getConfigurationByFile(environment);
-  const options = {
-    // send in the options from your webpack.config.js
-    webpackOptions: require("./webpack.config"),
-    watchOptions: {},
-  };
-  on("file:preprocessor", webpack(options));
-
-  on("task", {
-    log(...message) {
-      //eslint-disable-next-line
-      console.log(...message);
-
-      return null;
-    },
-  });
-
-  config = cypressBrowserPermissionsPlugin(on, config);
-
-  const newEnvironment = merge(config, configForEnvironment);
-  require("@cypress/grep/src/plugin")(newEnvironment);
-  require("@cypress/code-coverage/task")(on, newEnvironment);
-  cloudPlugin(on, newEnvironment);
-
-  on("before:browser:launch", (browser, launchOptions) => {
-    if (["chrome", "edge"].includes(browser.name) && browser.isHeadless) {
-      launchOptions.args.push("--no-sandbox");
-      launchOptions.args.push("--disable-gl-drawing-for-tests");
-      launchOptions.args.push("--js-flags=--max-old-space-size=5500");
-      launchOptions.args.push("--disable-gpu");
-    }
-
-    return launchOptions;
-  });
-
-  const readFileSyncIfExists = filePath => {
-    try {
-      return JSON.parse(fs.readFileSync(filePath, "utf8"));
-    } catch (error) {
-      if (error.code === "ENOENT") {
-        return {};
-      }
-      console.log(error); // eslint-disable-line
-    }
-
-    return {};
-  };
-
-  const writeDataToFile = (filePath, data) => {
-    try {
-      fs.writeFileSync(filePath, data, "utf8");
-    } catch (err) {
-      console.log(err); // eslint-disable-line
-    }
-
-    return true;
-  };
-
-  on("task", {
-    getGlobalState: key =>
-      key
-        ? readFileSyncIfExists(globalState)?.[key] ?? null
-        : readFileSyncIfExists(globalState),
-    updateGlobalState: ({ key, value }) => {
-      const data = readFileSyncIfExists(globalState);
-      data[key] = value;
-
-      return writeDataToFile(globalState, JSON.stringify(data));
-    },
-    bulkUpdateGlobalState: newState =>
-      writeDataToFile(globalState, JSON.stringify(newState)),
-  });
-
-  return config, newEnvironment;
-};

package/cypress-configs/resolve.js

@@ -1,17 +0,0 @@
-const path = require("path");
-
-const basePath = `${process.cwd()}/cypress/`;
-
-module.exports = {
-  alias: {
-    Fixtures: path.resolve(basePath, "fixtures"),
-    Plugins: path.resolve(basePath, "plugins"),
-    Support: path.resolve(basePath, "support"),
-    Texts: path.resolve(basePath, "constants/texts"),
-    Selectors: path.resolve(basePath, "constants/selectors"),
-    neetocommons: "@bigbinary/neeto-commons-frontend",
-    Constants: path.resolve(basePath, "constants"),
-    neetocist: "@bigbinary/neeto-cist",
-  },
-  fallback: { path: require.resolve("path-browserify") },
-};

package/cypress-configs/webpack.config.js

@@ -1,19 +0,0 @@
-const resolve = require("./resolve");
-
-module.exports = {
-  resolve,
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: [/node_modules/],
-        use: [
-          {
-            loader: "babel-loader",
-            options: { presets: ["@babel/preset-env"] },
-          },
-        ],
-      },
-    ],
-  },
-};