@bigbinary/neeto-commons-frontend 2.0.25 → 2.0.27

package/README.md

@@ -3,12 +3,161 @@
 A library encapsulating common boilerplate frontend code required for all neeto
 products.
 
+<table>
+<thead>
+<tr>
+<th>
+
+Name
+
+</th>
+<th>
+
+Category
+
+</th>
+</tr>
+</thead>
+<tbody>
+
+<tr>
+<td  style="vertical-align: top;">
+
+- [Set up axios](./docs/initializers/axios.md)
+- [Set up globalProps](./docs/initializers/globalProps.md)
+- [Set up translations](./docs/initializers/translation.md)
+- [Set up mixpanel](./docs/initializers/mixpanel.md)
+- [Set up logger](./docs/initializers/logger.md)
+</td>
+<td  style="vertical-align: top;">
+
+[Initializers](./docs/initializers/README.md)
+
+</td>
+</tr>
+<tr></tr>
+
+<tr>
+<td  style="vertical-align: top;">
+
+- [useDebounce](./docs/react/hooks.md#usedebounce)
+- [useFuncDebounce](./docs/react/hooks.md#usefuncdebounce)
+- [usePrevious](./docs/react/hooks.md#useprevious)
+- [useUpdateEffect](./docs/react/hooks.md#useupdateeffect)
+- [useLocalStorage](./docs/react/hooks.md#uselocalstorage)
+- [useOnClickOutside](./docs/react/hooks.md#useonclickoutside)
+- [useFieldSubmit](./docs/react/hooks.md#usefieldsubmit)
+- [PrivateRoute](./docs/react/components.md#privateroute)
+- [HoneybadgerErrorBoundary](./docs/react/components.md#honeybadgererrorboundary)
+- [Sidebar](./docs/react/components.md#sidebar)
+- [Error page](./docs/react/components.md#error-page)
+- [Login page](./docs/react/components.md#login-page)
+- [DateFormat/TimeFormat](./docs/react/components.md#dateformattimeformat)
+- [Columns](./docs/react/components.md#columns)
+- [NeetoWidget.EmbedCode](./docs/react/components.md#neetowidgetembedcode)
+- [Schedule](./docs/react/components.md#schedule)
+- [CustomDomain](./docs/react/components.md#customdomain)
+- [BrowserSupport](./docs/react/components.md#browsersupport)
+- [IpRestriction](./docs/react/components.md#iprestriction)
+- [withImmutableActions](./docs/react/utils.md#withimmutableactions) (zustand middleware)
+- [withTitle](./docs/react/utils.md#withtitle) (set browser title for pages)
+- [registerBrowserNotifications](./docs/react/utils.md#registerbrowsernotifications)
+  (register browser subscription for push notifications)
+- [destroyBrowserSubscription](./docs/react/utils.md#destroybrowsersubscription)
+   (destroy browser subscription for push notifications)
+
+</td>
+<td  style="vertical-align: top;">
+
+[React utilities](./docs/react/README.md)
+
+</td>
+</tr>
+<tr></tr>
+<tr>
+<td style="vertical-align: top;">
+
+- [findById](./docs/pure/arrays.md#findbyid)
+- [findIndexById](./docs/pure/arrays.md#findindexbyid)
+- [removeById](./docs/pure/arrays.md#removebyid)
+- [replaceById](./docs/pure/arrays.md#replacebyid)
+- [modifyById](./docs/pure/arrays.md#modifybyid)
+- [existsById](./docs/pure/arrays.md#existsbyid)
+- [findBy](./docs/pure/arrays.md#findby)
+- [findIndexBy](./docs/pure/arrays.md#findindexby)
+- [removeBy](./docs/pure/arrays.md#removeby)
+- [replaceBy](./docs/pure/arrays.md#replaceby)
+- [modifyBy](./docs/pure/arrays.md#modifyby)
+- [existsBy](./docs/pure/arrays.md#existsby)
+- [findLastBy](./docs/pure/arrays.md#findlastby)
+- [findLastIndexBy](./docs/pure/arrays.md#findlastindexby)
+- [filterBy](./docs/pure/arrays.md#filterby)
+- [countBy](./docs/pure/arrays.md#countby)
+- [renameKeys](./docs/pure/arrays.md#renamekeys)
+- [copyKeys](./docs/pure/arrays.md#copykeys)
+- [copyKeysDeep](./docs/pure/arrays.md#copykeysdeep)
+- [transformObjectDeep](./docs/pure/objects.md#transformobjectdeep)
+- [preprocessForSerialization](./docs/pure/objects.md#preprocessforserialization)
+- [keysToCamelCase](./docs/pure/objects.md#keystocamelcase)
+- [keysToSnakeCase](./docs/pure/objects.md#keystosnakecase)
+- [deepFreezeObject](./docs/pure/objects.md#deepfreezeobject)
+- [matches](./docs/pure/objects.md#matches)
+- [filterNonNull](./docs/pure/objects.md#filternonnull)
+- [slugify](./docs/pure/strings.md#slugify)
+- [humanize](./docs/pure/strings.md#humanize)
+- [snakeToCamelCase](./docs/pure/strings.md#snaketocamelcase)
+- [camelToSnakeCase](./docs/pure/strings.md#cameltosnakecase)
+- [capitalize](./docs/pure/strings.md#capitalize)
+- [truncate](./docs/pure/strings.md#truncate)
+- [noop](./docs/pure/general.md#noop)
+- [toLabelAndValue](./docs/pure/general.md#tolabelandvalue)
+- [getRandomInt](./docs/pure/general.md#getrandomint)
+- [randomPick](./docs/pure/general.md#randompick)
+- [dynamicArray](./docs/pure/general.md#dynamicarray)
+- [isNotNil](./docs/pure/general.md#isnotnil)
+- [isNotEmpty](./docs/pure/general.md#isnotempty)
+- [isNot (alias notEquals)](./docs/pure/general.md#isnot_alias_notequals)
+- [isNotEqualDeep (alias notEqualsDeep)](./docs/pure/general.md#isnotequaldeep_alias_notequalsdeep)
+
+</td>
+<td style="vertical-align: top;">
+
+[Pure utility functions](./docs/pure/README.md)
+
+</td>
+</tr>
+
+<tr></tr>
+
+<tr>
+<td style="vertical-align: top;">
+
+- [withEventTargetValue](./docs/utils/README.md#witheventtargetvalue)
+- [getSubdomain](./docs/utils/README.md#getsubdomain)
+- [simulateApiCall](./docs/utils/README.md#simulateapicall)
+- [copyToClipboard](./docs/utils/README.md#copytoclipboard)
+- [buildUrl](./docs/utils/README.md#buildurl)
+- [dateFormat/timeFormat](./docs/utils/README.md#dateformattimeformat)
+- [toLocale](./docs/utils/README.md#tolocale)
+- [getQueryParams](./docs/utils/README.md#getqueryparams)
+
+</td>
+<td style="vertical-align: top;">
+
+[Web utility functions](./docs/utils/README.md)
+
+</td>
+</tr>
+
+</tbody>
+</table>
+
 ## Installation Instructions
 
 Install from npm:
 
 ```bash
-yarn add "@bigbinary/neeto-commons-frontend@2.0.25"
+yarn add "@bigbinary/neeto-commons-frontend@latest"
 ```
 
 This package relies on the host project's tailwind configuration. So add
@@ -28,95 +177,17 @@ module.exports = {
 
 ## Usage
 
-This package exports four different sets of functions and components. Click on
+This package exports five different sets of functions and components. Click on
 them to read more:
 
 1. [Initializers](./docs/initializers/README.md)
 2. [React utilities](./docs/react/README.md)
 3. [Pure utility functions](./docs/pure/README.md)
 4. [Web utility functions](./docs/utils/README.md)
+5. [Default configurations](./docs/configs/README.md)
+
+## Other references
 
-## Migrating from version 1 to 2
-
-There is only a single breaking change from version 1 to version 2. The pure
-functions (which has only ramda as its peerDependency) have been moved to a
-separate bundle (named pure). You can import them from
-`@bigbinary/neeto-commons-frontend/pure` instead of
-`@bigbinary/neeto-commons-frontend/utils`.
-
-Here is a list of functions that have been moved:
-
-`removeById`, `findById`, `replaceById`, `modifyById`, `findBy`, `removeBy`,
-`replaceBy`,`modifyBy`, `existsById`, `existsBy`, `findLastBy`, `findIndexById`,
-`findIndexBy`,`findLastIndexBy`, `filterBy`, `countBy`, `copyKeys`,
-`renameKeys`, `copyKeysDeep`
-
-`noop`, `toLabelAndValue`, `getRandomInt`, `randomPick`, `dynamicArray`,
-`isNotNil`, `isNotEmpty`, `notEquals`, `isNot`, `notEqualsDeep`,
-`isNotEqualDeep`
-
-`transformObjectDeep`, `keysToCamelCase`, `keysToSnakeCase`, `deepFreezeObject`,
-`matches`, `filterNonNull`
-
-`slugify`, `humanize`, `snakeToCamelCase`, `camelToSnakeCase`, `capitalize`,
-`truncate`
-
-When you are migrating from version 1 to version 2, do the following:
-
-1. Search for all imports from `@bigbinary/neeto-commons-frontend/utils` and
-   delete the above mentioned functions from those imports.
-2. Import these functions from `@bigbinary/neeto-commons-frontend/pure` instead.
-
-## Development instructions
-
-1. Clone this repository.
-2. Run `yarn install` to download the dependencies and setup the development
-   environment.
-3. Have a host application ready.
-4. Run `yarn build --watch` to automatically transpile code as you save the
-   file. You can omit the `--watch` flag if you want to run the build only once.
-5. In a different terminal, run `yalc publish` to publish the
-   neeto-commons-frontend to the local yalc store.
-6. Run `yalc add @bigbinary/neeto-commons-frontend` to install the
-   neeto-commons-frontend to the host application.
-7. After making necessary changes to `neeto-commons-frontend`, run `yalc push`
-   to push the changes to the host application (assuming that you are in watch
-   mode and the changes are bundled automatically).
-8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
-
-## Building and releasing.
-
-This is how releases are managed in this repo.
-
-- We will create a branch with the next release version as its name (`2.0.x`)
-  from main branch.
-- Version in
-  [README.md](https://github.com/bigbinary/neeto-commons-frontend/blob/main/README.md#L10)
-  and
-  [package.json](https://github.com/bigbinary/neeto-commons-frontend/blob/main/package.json#L3)
-  will be updated to the current branch name.
-- We will create a draft PR of this branch targeting main. This keeps the branch
-  in sync with main branch (bot-bigbinary will auto-merge the changes).
-- When all features have been built, we will deploy it to all neeto-applications
-  locally using `yalc` package manager. We won't raise PR until the deployment
-  and verification is successfully done locally for all neeto-applications. The
-  usage of yalc is explained in this video:
-  https://vimeo.com/722958162/9e931b640c
-- In case if we notice any problem during verification, like any missed edge
-  cases, we will fix the problem in neeto-commons-frontend locally and re-run
-  `yalc push` to update the local host projects.
-- Once everything is working fine and the verification is complete, create a PR
-  with those bug fixes and get it merged.
-- We will now merge the PR `2.X.Y` to main.
-- We can now create a
-  [new github release](https://github.com/bigbinary/neeto-commons-frontend/releases/new)
-  from main branch with the current version as the tag name (`2.X.Y`).
-- Whenever a new release is created with a new version number, the github
-  actions will automatically publish the built package to npm.
-- Immediately, we will open another branch with the next version (`2.X.Z`) and
-  the cycle will continue.
-- Now we can run `yalc remove neeto-commons-frontend` to remove yalc based
-  package and run `yarn add neeto-commons-frontend@2.X.Y` to fetch the latest
-  changes from npm in all repos and raise PR. You might be able to slightly
-  tweak this script to get the job done:
-  https://gist.github.com/jagannathBhat/42a584748d97fe134f0abadb191ef29a
+- [Development instructions](./docs/general/development-instructions.md)
+- [Building and releasing](./docs/general/building-and-releasing.md)
+- [Migrating from v1 to v2](./docs/general/migrating-from-1-to-2.md)

package/configs/babel.js

@@ -0,0 +1,42 @@
+const VALID_ENVIRONMENTS = ["development", "test", "production"];
+
+module.exports = function (api) {
+  const currentEnv = api.env();
+  const isDevelopmentEnv = api.env("development");
+  const isProductionEnv = api.env("production");
+  const isTestEnv = api.env("test");
+
+  if (!VALID_ENVIRONMENTS.includes(currentEnv)) {
+    throw new Error(
+      "Please specify a valid `NODE_ENV` or `BABEL_ENV` environment variables. " +
+        'Valid values are "development", "test", and "production". ' +
+        `Instead, received: ${JSON.stringify(currentEnv)}.`
+    );
+  }
+
+  return {
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          forceAllTransforms: isProductionEnv,
+          useBuiltIns: "entry",
+          corejs: "3.27.0",
+          modules: false,
+        },
+      ],
+      ["@babel/preset-react", { development: isDevelopmentEnv || isTestEnv }],
+    ].filter(Boolean),
+    plugins: [
+      "babel-plugin-macros",
+      "@babel/plugin-transform-runtime",
+      isTestEnv
+        ? "babel-plugin-dynamic-import-node" // tests run in node environment
+        : "@babel/plugin-syntax-dynamic-import",
+      isProductionEnv && [
+        "babel-plugin-transform-react-remove-prop-types",
+        { removeImport: true },
+      ],
+    ].filter(Boolean),
+  };
+};

package/configs/eslint/globals.js

@@ -0,0 +1,13 @@
+module.exports = {
+  // Globals can be disabled with the string "off"
+  // "writable" to allow the variable to be overwritten or "readonly" to disallow overwriting.
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+    // Makes logger function available everywhere. Else eslint will complaint of undef-var.
+    logger: "readonly",
+    module: "writable",
+    // Makes props obtained from Rails backend available everywhere in this project.
+    globalProps: "readonly",
+  },
+};

package/configs/eslint/helpers/index.js

@@ -0,0 +1,61 @@
+const fs = require("fs");
+const path = require("path");
+
+const { mergeDeepLeft } = require("ramda");
+
+const loadJS = jsPath => {
+  try {
+    return require(path.resolve(__dirname, "../../../..", jsPath));
+  } catch (error) {
+    return {};
+  }
+};
+
+const buildPathGroupsBasedOnWebpackAliases = ({
+  customJSRoot = "app/javascript/",
+  customAliasPath = "config/webpack/resolve.js",
+}) => {
+  const rootOfProject = `${__dirname}/../../../../../../`;
+
+  const isFile = filePath =>
+    fs.existsSync(filePath) && fs.lstatSync(filePath).isFile();
+
+  const isRailsProject = isFile(`${rootOfProject}Gemfile`);
+
+  const emptyPathGroups = [];
+
+  if (!isRailsProject) return emptyPathGroups;
+
+  const projectResolve = loadJS(rootOfProject + customAliasPath);
+  const commonResolve = loadJS(
+    `${rootOfProject}node_modules/@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js`
+  );
+  const { alias } = mergeDeepLeft(projectResolve, commonResolve);
+
+  const railsJSFilesRoot = rootOfProject + customJSRoot;
+
+  const pathGroups = Object.entries(alias).map(([name, path]) => {
+    // sometimes alias might be already resolved to full absolute path
+    const isAlreadyAnAbsolutePath =
+      path.includes("cypress-tests/") || path.includes("app/");
+
+    const absolutePath = isAlreadyAnAbsolutePath
+      ? path
+      : `${railsJSFilesRoot}${path}`;
+    const wildCard =
+      isFile(`${absolutePath}.js`) || isFile(`${absolutePath}.jsx`)
+        ? ""
+        : "/**";
+
+    let group = "internal";
+    if (name === "neetoui") {
+      group = "external";
+    }
+
+    return { pattern: `${name}${wildCard}`, group };
+  });
+
+  return pathGroups;
+};
+
+module.exports = { buildPathGroupsBasedOnWebpackAliases };

package/configs/eslint/imports/enforced.js

@@ -0,0 +1,29 @@
+module.exports = {
+  rules: {
+    // not-auto-fixable: Prefer a default export if module exports a single name.
+    "import/prefer-default-export": "off",
+    // not-auto-fixable: Forbid a module from importing a module with a dependency path back to itself.
+    "import/no-cycle": ["warn", { maxDepth: 1, ignoreExternal: true }],
+    // not-auto-fixable: Prevent unnecessary path segments in import and require statements.
+    "import/no-useless-path-segments": ["error", { noUselessIndex: true }],
+    // not-auto-fixable: Report any invalid exports, i.e. re-export of the same name.
+    "import/export": "error",
+    // not-auto-fixable: Forbid the use of mutable exports with var or let.
+    "import/no-mutable-exports": "error",
+    // not-auto-fixable: Ensure all imports appear before other statements.
+    "import/first": "error",
+    // not-auto-fixable: Ensure all exports appear after other statements.
+    "import/exports-last": "error",
+    // auto-fixable: Enforce a newline after import statements.
+    "import/newline-after-import": ["error", { count: 1 }],
+    // auto-fixable: Remove file extensions for import statements.
+    "import/extensions": [
+      "error",
+      "never",
+      {
+        ignorePackages: true,
+        pattern: { json: "always", mp3: "always", ico: "always" },
+      },
+    ],
+  },
+};

package/configs/eslint/imports/order.js

@@ -0,0 +1,65 @@
+const { buildPathGroupsBasedOnWebpackAliases } = require("../helpers");
+
+const pathGroups = buildPathGroupsBasedOnWebpackAliases({});
+
+const pathGroupForKeepingReactImportsAtTop = {
+  pattern: "react+(-native|)",
+  group: "external",
+  position: "before",
+};
+
+/*
+Example pathGroups structure. Adding this here
+so that if anyone wants to add custom config,
+they can make use of this:
+[
+  { pattern: 'apis/**', group: 'internal' },
+  { pattern: 'common/**', group: 'internal' },
+  { pattern: 'components/**', group: 'internal' },
+  { pattern: 'constants/**', group: 'internal' },
+  { pattern: 'contexts/**', group: 'internal' },
+  { pattern: 'reducers/**', group: 'internal' },
+  { pattern: 'Constants', group: 'internal' },
+  { pattern: 'neetoui/**', group: 'external' },
+  {
+    pattern: 'react+(-native|)',
+    group: 'external',
+    position: 'before'
+  }
+]
+*/
+pathGroups.push(pathGroupForKeepingReactImportsAtTop);
+
+module.exports = {
+  rules: {
+    // auto-fixable: Enforce a convention in module import order - we enforce https://www.bigbinary.com/react-best-practices/sort-import-statements
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        alphabetize: { order: "asc", caseInsensitive: true },
+        warnOnUnassignedImports: true,
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "index",
+          "sibling",
+          "parent",
+          "object",
+          "type",
+        ],
+        /*
+         * Currently we check for existence of webpack alias
+         * config and then iterate over the aliases and create
+         * these pathGroups. Only caveat with this mechanism
+         * is that in VSCode eslint plugin won't dynamically
+         * read it. But eslint cli would!
+         */
+        pathGroups,
+        // Ignore react imports so that they're always ordered to the top of the file.
+        pathGroupsExcludedImportTypes: ["react", "react-native"],
+      },
+    ],
+  },
+};

package/configs/eslint/index.js

@@ -0,0 +1,156 @@
+module.exports = {
+  env: {
+    browser: true, // window object etc part of browser are made available globally.
+    es2020: true, // to include BigInt support
+    es6: true,
+    commonjs: true,
+    node: true,
+  },
+  /*
+   * The order of extending each plugin matters a LOT!!
+   * Thus don't change order of items in this array
+   * unless you're sure of it.
+   */
+  extends: [
+    "plugin:@bigbinary/neeto/recommended",
+    "plugin:cypress/recommended",
+    "plugin:json/recommended",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/globals",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/imports/order",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/overrides",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/imports/enforced",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/react",
+    "./node_modules/@bigbinary/neeto-commons-frontend/configs/eslint/promise",
+    "prettier",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+    // 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"],
+      },
+    },
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  // babel-eslint is deprecated now. This is the latest package.
+  parser: "@babel/eslint-parser",
+  plugins: [
+    "react",
+    "prettier",
+    "import",
+    "react-hooks",
+    "promise",
+    "jam3",
+    "unused-imports",
+    "@bigbinary/neeto",
+  ],
+  rules: {
+    // auto-fixable: Respect all Prettier rules and apply it.
+    "prettier/prettier": "error",
+    // not-auto-fixable: No unused variables allowed.
+    "no-unused-vars": [
+      "error",
+      {
+        args: "all",
+        argsIgnorePattern: "^_",
+        destructuredArrayIgnorePattern: "^_",
+        caughtErrors: "all",
+      },
+    ],
+    // not-auto-fixable: No undefined variables allowed.
+    "no-undef": "error",
+    // not-auto-fixable: Dont use console statements. Use logger which babel will remove during bundling.
+    "no-console": "error",
+    // not-auto-fixable: require `return` statements to either always or never specify values.
+    "consistent-return": "error",
+    // auto-fixable: disallows repeating variable name when declaring object properties.
+    "object-shorthand": "error",
+    // auto-fixable: sadly this doesn't support guard clauses yet.
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: "if", next: ["if", "return"] },
+      // The newline-before-return rule is deprecated in favor of the following:
+      { blankLine: "always", prev: "*", next: "return" },
+      // Add newline between function declarations
+      {
+        blankLine: "always",
+        prev: [
+          "block",
+          "multiline-block-like",
+          "function",
+          "iife",
+          "multiline-const",
+          "multiline-expression",
+        ],
+        next: ["function", "iife", "multiline-const", "multiline-expression"],
+      },
+    ],
+    // auto-fixable: Single line statements needn't have any braces. But in all other cases enforce curly braces.
+    curly: ["error", "multi-line"],
+    // auto-fixable: Remove the else part, if the "if" or "else-if" chain has a return statement
+    "no-else-return": "error",
+    // not-auto-fixable: Prevent un-sanitized dangerouslySetInnerHTML.
+    "jam3/no-sanitizer-with-danger": [
+      2,
+      {
+        wrapperName: ["dompurify", "sanitizer", "sanitize"],
+      },
+    ],
+    // auto-fixable: Requires trailing commas when the last element or property is in a different line than the closing ] or }
+    "comma-dangle": [
+      "error",
+      {
+        arrays: "always-multiline",
+        objects: "always-multiline",
+        imports: "always-multiline",
+        exports: "always-multiline",
+        functions: "never",
+      },
+    ],
+    // auto-fixable: If a variable is never reassigned, using the const declaration is better.
+    "prefer-const": "error",
+    // auto-fixable: It is considered good practice to use the type-safe equality operators === and !==.
+    eqeqeq: "error",
+    // not-auto-fixable: Rule flags optional chaining expressions in positions where short-circuiting to undefined causes throwing a TypeError afterward.
+    "no-unsafe-optional-chaining": "error",
+    // auto-fixable: Remove all unused imports.
+    "unused-imports/no-unused-imports": "error",
+    // auto-fixable-1-level-deep: Using nested ternary operators make the code unreadable. Use if/else or switch with if/else. If it's JSX then move it out into a function or a variable. It's fine to use nestedTernary in JSX when it makes code more readable.
+    "no-nested-ternary": "warn",
+    // auto-fixable: Enforces no braces where they can be omitted.
+    "arrow-body-style": ["error", "as-needed"],
+    // auto-fixable: Suggests using template literals instead of string concatenation.
+    "prefer-template": "error",
+    // auto-fixable: Disallows ternary operators when simpler alternatives exist.
+    "no-unneeded-ternary": ["error", { defaultAssignment: false }],
+    // not-auto-fixable: Enforces declaring default params last
+    "default-param-last": "error",
+    // not-auto-fixable: Remove redundant async-awaits
+    "no-return-await": "warn",
+    // not-auto-fixable: Disallow empty block statements
+    "no-empty": ["error", { allowEmptyCatch: true }],
+    // not-auto-fixable: Enforce return statements in callbacks of array methods.
+    "array-callback-return": ["error"],
+    // auto-fixable: Partially fixable. Unless there's a need to the this keyword, there's no advantage of using a plain function.
+    "prefer-arrow-callback": ["error", { allowUnboundThis: true }],
+    // not-auto-fixable: Convert multiple imports from same module into a single import.
+    "no-duplicate-imports": ["error", { includeExports: true }],
+    // auto-fixable: Partially fixable. In JavaScript, there are a lot of different ways to convert value types. Allow only readable coercions.
+    "no-implicit-coercion": ["error", { allow: ["!!"] }],
+    // auto-fixable: Require let or const instead of var.
+    "no-var": "error",
+    // auto-fixable: This rule conflicts with prettier rules. Thus we've NOT kept this rule in react file. This rule ensures we don't add blank lines in JSX.
+    "react/jsx-newline": ["error", { prevent: true }],
+  },
+};

package/configs/eslint/overrides.js

@@ -0,0 +1,24 @@
+module.exports = {
+  // Currently we are using this section for excluding certain files from certain rules.
+  overrides: [
+    {
+      files: [
+        ".eslintrc.js",
+        ".prettierrc.js",
+        "app/assets/**/*",
+        "app/javascript/packs/**/*",
+        "*.json",
+      ],
+      rules: {
+        "import/order": "off",
+        "react-hooks/rules-of-hooks": "off",
+      },
+    },
+    {
+      files: ["app/javascript/packs/**/*.{js,jsx}"],
+      rules: {
+        "no-redeclare": "off",
+      },
+    },
+  ],
+};

package/configs/eslint/promise.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    // not-auto-fixable: ensure people use async/await promising chaining rather than using "then-catch-finally" statements
+    "promise/prefer-await-to-then": "error",
+    // auto-fixable: avoid calling "new" on a Promise static method like reject, resolve etc
+    "promise/no-new-statics": "error",
+  },
+};