@bigbinary/neeto-commons-frontend 0.0.1 → 0.0.2

package/README.md

@@ -7,7 +7,7 @@ The commons frontend library for Neeto Applications.
 Install from npm:
 
 ```bash
-yarn add "@bigbinary/neeto-commons-frontend@0.0.1"
+yarn add "@bigbinary/neeto-commons-frontend@0.0.2"
 ```
 
 This package relies on the host project's tailwind configuration. So add
@@ -32,7 +32,39 @@ them to read more:
 
 1. [Initializers](./docs/initializers/README.md)
 2. [React utilities](./docs/react/README.md)
-3. [General utility functions](./docs/utils/README.md)
+3. [Pure utility functions](./docs/pure/README.md)
+4. [Web utility functions](./docs/utils/README.md)
+
+## 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
 
@@ -46,7 +78,7 @@ them to read more:
    neeto-commons-frontend to the local yalc store.
 6. Run `yalc install` to install the neeto-commons-frontend to the host
    application.
-7. After making all changes to `neeto-commons-frontend`, run `yal push` to push
+7. After making all changes to `neeto-commons-frontend`, run `yalc push` to push
    the changes to the host application.
 8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
 
@@ -62,7 +94,7 @@ This is how releases are managed in this repo.
   [package.json](https://github.com/bigbinary/neeto-commons-frontend/blob/master/package.json#L3)
   will be updated to the current branch name.
 - From now on, we can install the package to neeto-applications using the
-  version `1.X.Y`.
+  version `2.X.Y`.
 - We will create a draft PR of this branch targeting master. This keeps the
   branch in sync with master branch (bot-bigbinary will auto-merge the changes).
 - When all features have been built, we will deploy it to all neeto-applications
@@ -75,19 +107,19 @@ This is how releases are managed in this repo.
   the latest changes.
 - Once everything is fine and the verification is complete, we will create a
   [new github release](https://github.com/bigbinary/neeto-commons-frontend/releases/new)
-  from `1.X.Y` branch with the exact same name for the tag (`1.X.Y`). The target
-  branch will be kept as `1.X.Y`. This will create a tag from the latest `1.X.Y`
+  from `2.X.Y` branch with the exact same name for the tag (`2.X.Y`). The target
+  branch will be kept as `2.X.Y`. This will create a tag from the latest `2.X.Y`
   branch and this ensures that the latest commit on that branch will remain
   intact even if that branch gets deleted.
 - Whenever a new release is created with a new version number, the github
   actions will automatically publish the built package to npm.
-- Now we will squash and merge the PR `1.X.Y` to master and delete its source
+- Now we will squash and merge the PR `2.X.Y` to master and delete its source
   branch. This will delete all commits except the top one (since we have created
   a tag with it).
-- Immediately, we will open another branch with the next version (`1.X.Y`) and
+- Immediately, we will open another branch with the next version (`2.X.Y`) 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@1.X.Y` to fetch the latest
+  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

package/initializers.cjs.js

@@ -0,0 +1,438 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var neetoui = require('@bigbinary/neetoui');
+var axios = require('axios');
+var i18next = require('i18next');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var mixpanel = require('mixpanel-browser');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+var mixpanel__default = /*#__PURE__*/_interopDefaultLegacy(mixpanel);
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var snakeToCamelCase = function snakeToCamelCase(string) {
+  return string.replace(/(_\w)/g, function (letter) {
+    return letter[1].toUpperCase();
+  });
+};
+var camelToSnakeCase = function camelToSnakeCase(string) {
+  return string.replace(/[A-Z]/g, function (letter) {
+    return "_".concat(letter.toLowerCase());
+  });
+};
+
+var transformObjectDeep = function transformObjectDeep(object, keyValueTransformer) {
+  var objectPreProcessor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+
+  if (objectPreProcessor && typeof objectPreProcessor === "function") {
+    object = objectPreProcessor(object);
+  }
+
+  if (Array.isArray(object)) {
+    return object.map(function (obj) {
+      return transformObjectDeep(obj, keyValueTransformer, objectPreProcessor);
+    });
+  } else if (object === null || _typeof(object) !== "object") {
+    return object;
+  }
+
+  return Object.fromEntries(Object.entries(object).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    return keyValueTransformer(key, transformObjectDeep(value, keyValueTransformer, objectPreProcessor));
+  }));
+};
+var keysToCamelCase = function keysToCamelCase(object) {
+  return transformObjectDeep(object, function (key, value) {
+    return [snakeToCamelCase(key), value];
+  });
+};
+var serializeKeysToSnakeCase = function serializeKeysToSnakeCase(object) {
+  return transformObjectDeep(object, function (key, value) {
+    return [camelToSnakeCase(key), value];
+  }, function (object) {
+    return typeof (object === null || object === void 0 ? void 0 : object.toJSON) === "function" ? object.toJSON() : object;
+  });
+};
+var deepFreezeObject = function deepFreezeObject(object) {
+  if (object && _typeof(object) === "object" && !Object.isFrozen(object)) {
+    Object.keys(object).forEach(function (property) {
+      return deepFreezeObject(object[property]);
+    });
+    Object.freeze(object);
+  }
+
+  return object;
+};
+
+var HEADERS_KEYS = {
+  xAuthEmail: "X-Auth-Email",
+  xAuthToken: "X-Auth-Token",
+  xCsrfToken: "X-CSRF-TOKEN"
+};
+
+var resetAuthTokens = function resetAuthTokens() {
+  ramda.values(HEADERS_KEYS).forEach(function (header) {
+    delete axios__default["default"].defaults.headers[header];
+  });
+};
+
+var shouldNot = function shouldNot(skip) {
+  return _typeof(skip) === "object" || !skip;
+};
+
+var setAuthHeaders = function setAuthHeaders() {
+  var _globalProps$user, _globalProps$user2;
+
+  axios__default["default"].defaults.headers = _defineProperty({
+    Accept: "application/json",
+    "Content-Type": "application/json"
+  }, HEADERS_KEYS.xCsrfToken, document.querySelector('[name="csrf-token"]').getAttribute("content"));
+  var token = (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.authenticationToken;
+  var email = (_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.email;
+
+  if (token && email) {
+    axios__default["default"].defaults.headers[HEADERS_KEYS.xAuthEmail] = email;
+    axios__default["default"].defaults.headers[HEADERS_KEYS.xAuthToken] = token;
+  }
+}; // pipe function from ramda doesn't accept array of functions.
+// We can't use spread operator too. So this is a workaround.
+
+
+var createPipe = function createPipe(functions) {
+  return function (data) {
+    return functions.reduce(function (acc, fn) {
+      return fn(acc);
+    }, data);
+  };
+};
+
+var transformKeysToCamelCase = function transformKeysToCamelCase(response) {
+  var _response$config$tran = response.config.transformResponseCase,
+      transformResponseCase = _response$config$tran === void 0 ? true : _response$config$tran;
+
+  if (response.data && transformResponseCase) {
+    response.data = keysToCamelCase(response.data);
+  }
+
+  return response;
+};
+
+var showSuccessToastr = function showSuccessToastr(response) {
+  var _response$config$show = response.config.showToastr,
+      showToastr = _response$config$show === void 0 ? true : _response$config$show;
+
+  if (showToastr && typeof response.data.notice === "string") {
+    neetoui.Toastr.success(response.data.notice);
+  }
+
+  return response;
+};
+
+var pullDataFromResponse = function pullDataFromResponse(response) {
+  var _response$config$incl = response.config.includeMetadataInResponse,
+      includeMetadataInResponse = _response$config$incl === void 0 ? false : _response$config$incl;
+  return includeMetadataInResponse ? response : response.data;
+};
+
+var buildSuccessResponseHandler = function buildSuccessResponseHandler(skip) {
+  var interceptors = [];
+  if (!(skip !== null && skip !== void 0 && skip.transformCase)) interceptors.push(transformKeysToCamelCase);
+  if (!(skip !== null && skip !== void 0 && skip.showToastr)) interceptors.push(showSuccessToastr);
+  if (!(skip !== null && skip !== void 0 && skip.pullDataFromResponse)) interceptors.push(pullDataFromResponse);
+  return createPipe(interceptors);
+};
+
+var handleUnauthorizedErrorResponse = function handleUnauthorizedErrorResponse(error) {
+  var _error$response;
+
+  if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) !== 401) return error;
+  resetAuthTokens();
+  var _error$config$redirec = error.config.redirectOnError,
+      redirectOnError = _error$config$redirec === void 0 ? true : _error$config$redirec;
+
+  if (redirectOnError) {
+    setTimeout(function () {
+      var redirectTo = window.location.pathname === "/login" ? "/login" : "/login?redirect_uri=".concat(encodeURIComponent(window.location.href));
+      window.location.href = redirectTo;
+    }, 300);
+  }
+
+  return error;
+};
+
+var showErrorToastr = function showErrorToastr(error) {
+  var _error$config$showToa = error.config.showToastr,
+      showToastr = _error$config$showToa === void 0 ? true : _error$config$showToa;
+  if (!showToastr) return error;
+
+  if (axios__default["default"].isCancel(error)) {
+    neetoui.Toastr.error(i18next__default["default"].t("neetoCommons.toastr.error.requestCanceled"));
+  } else if (error.message === "Network Error") {
+    neetoui.Toastr.error(i18next__default["default"].t("neetoCommons.toastr.error.networkError"));
+  } else {
+    neetoui.Toastr.error(error);
+  }
+
+  return error;
+};
+
+var redirect404 = function redirect404(error) {
+  var _error$response2;
+
+  var _error$config$redirec2 = error.config.redirectOnError,
+      redirectOnError = _error$config$redirec2 === void 0 ? true : _error$config$redirec2;
+
+  if (redirectOnError && ((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) === 404) {
+    window.location.href = "/page-not-found";
+  }
+
+  return error;
+};
+
+var buildErrorResponseHandler = function buildErrorResponseHandler(skip) {
+  var interceptors = [];
+  if (!(skip !== null && skip !== void 0 && skip.redirectOn404)) interceptors.push(redirect404);
+  if (!(skip !== null && skip !== void 0 && skip.logoutOn401)) interceptors.push(handleUnauthorizedErrorResponse);
+  if (!(skip !== null && skip !== void 0 && skip.showToastr)) interceptors.push(showErrorToastr);
+  interceptors.push(Promise.reject.bind(Promise));
+  return createPipe(interceptors);
+};
+
+var cleanupCredentialsForCrossOrigin = function cleanupCredentialsForCrossOrigin(request) {
+  if (!request.url.includes("://")) return request;
+  if (request.url.includes(window.location.hostname)) return request;
+  return ramda.evolve({
+    headers: ramda.omit(ramda.values(HEADERS_KEYS))
+  })(request);
+};
+
+var transformDataToSnakeCase = function transformDataToSnakeCase(request) {
+  var _request$transformReq = request.transformRequestCase,
+      transformRequestCase = _request$transformReq === void 0 ? true : _request$transformReq;
+  if (!transformRequestCase || !request.data) return request;
+  return ramda.modify("data", serializeKeysToSnakeCase, request);
+};
+
+var addRequestInterceptors = function addRequestInterceptors(skip) {
+  if (!(skip !== null && skip !== void 0 && skip.cleanCredentialsForCrossOrigin)) {
+    axios__default["default"].interceptors.request.use(cleanupCredentialsForCrossOrigin);
+  }
+
+  if (!(skip !== null && skip !== void 0 && skip.transformCase)) {
+    axios__default["default"].interceptors.request.use(transformDataToSnakeCase);
+  }
+};
+
+var addResponseInterceptors = function addResponseInterceptors(skip) {
+  axios__default["default"].interceptors.response.use(buildSuccessResponseHandler(skip), buildErrorResponseHandler(skip));
+};
+
+var registerIntercepts = function registerIntercepts(skip) {
+  if (shouldNot(skip === null || skip === void 0 ? void 0 : skip.request)) addRequestInterceptors(skip === null || skip === void 0 ? void 0 : skip.request);
+  if (shouldNot(skip === null || skip === void 0 ? void 0 : skip.response)) addResponseInterceptors(skip === null || skip === void 0 ? void 0 : skip.response);
+};
+
+function initializeAxios(skip) {
+  if (!(skip !== null && skip !== void 0 && skip.baseURL)) axios__default["default"].defaults.baseURL = "/";
+  if (!(skip !== null && skip !== void 0 && skip.authHeaders)) setAuthHeaders();
+  if (shouldNot(skip === null || skip === void 0 ? void 0 : skip.interceptors)) registerIntercepts(skip === null || skip === void 0 ? void 0 : skip.interceptors);
+}
+
+function initializeGlobalProps() {
+  var _document$getElements, _document$getElements2;
+
+  window.globalProps = keysToCamelCase(JSON.parse(((_document$getElements = document.getElementsByClassName("root-container")[0]) === null || _document$getElements === void 0 ? void 0 : (_document$getElements2 = _document$getElements.dataset) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.reactProps) || "{}"));
+  deepFreezeObject(window.globalProps);
+}
+
+var neetoCommons = {
+	errorPage: {
+		pageDoesNotExist: "Page does not exist.",
+		goToHome: "Go home"
+	},
+	fallbackComponent: {
+		somethingWentWrong: "Sorry, something went wrong.",
+		tryReloading: "Please try reloading the page.",
+		reload: "Reload"
+	},
+	sidebar: {
+		myProfile: "My Profile",
+		myOrganization: "My Organization",
+		logout: "Logout",
+		help: "Help"
+	},
+	common: {
+		actions: {
+			cancel: "Cancel",
+			save: "Save"
+		}
+	},
+	toastr: {
+		success: {
+			copiedToClipboard: "Copied to clipboard!"
+		},
+		error: {
+			requestCanceled: "Request cancelled",
+			networkError: "No Internet Connection"
+		}
+	},
+	notice: {
+		errorOccurred: "Some error occurred."
+	}
+};
+var en = {
+	neetoCommons: neetoCommons
+};
+
+var initializeI18n = function initializeI18n(resources) {
+  i18next__default["default"].use(reactI18next.initReactI18next).init({
+    resources: ramda.mergeDeepLeft({
+      en: {
+        translation: en
+      }
+    }, resources),
+    lng: "en",
+    fallbackLng: "en",
+    interpolation: {
+      escapeValue: false,
+      skipOnVariables: false
+    }
+  });
+};
+
+function initializeMixPanel() {
+  var isProduction = process.env.NODE_ENV === "production";
+  var isTokenPresent = !!process.env.MIXPANEL_TOKEN;
+  var isUserLoggedIn = !ramda.either(ramda.isEmpty, ramda.isNil)(globalProps.user);
+
+  if (isProduction && isTokenPresent && isUserLoggedIn) {
+    mixpanel__default["default"].init(process.env.MIXPANEL_TOKEN || "");
+    mixpanel__default["default"].people.set({
+      $email: globalProps.user.email,
+      $fist_name: globalProps.user.firstName,
+      $last_name: globalProps.user.lastName
+    });
+    mixpanel__default["default"].identify(globalProps.user.email);
+  } else {
+    /*
+    We need to initialize mixpanel with a bogus token in development and test environment to
+    prevent mixpanel library from throwing an error when we use mixpanel.track() method in react components.
+    */
+    mixpanel__default["default"].init("TEST_TOKEN");
+  }
+}
+
+exports.globalProps = {};
+function initializeApplication(_ref) {
+  var translationResources = _ref.translationResources,
+      skip = _ref.skip;
+
+  if (!(skip !== null && skip !== void 0 && skip.globalProps)) {
+    initializeGlobalProps();
+    exports.globalProps = window.globalProps;
+  }
+
+  if (!(skip !== null && skip !== void 0 && skip.mixpanel)) initializeMixPanel();
+
+  if (_typeof(skip === null || skip === void 0 ? void 0 : skip.axios) === "object" || !(skip !== null && skip !== void 0 && skip.axios)) {
+    initializeAxios(skip === null || skip === void 0 ? void 0 : skip.axios);
+  }
+
+  if (!(skip !== null && skip !== void 0 && skip.i18n)) initializeI18n(translationResources);
+}
+
+exports["default"] = initializeApplication;

package/initializers.d.ts

@@ -0,0 +1,59 @@
+type Skippable<T> = boolean | Partial<T>;
+
+type Configurations = {
+  translationResources?: { en: { translation: object } };
+  skip?: Partial<{
+    globalProps: boolean;
+    mixpanel: boolean;
+    i18n: boolean;
+    axios: Skippable<{
+      baseURL: boolean;
+      authHeaders: boolean;
+      interceptors: Skippable<{
+        request: Skippable<{
+          cleanCredentialsForCrossOrigin: boolean;
+          transformCase: boolean;
+        }>;
+        response: Skippable<{
+          transformCase: boolean;
+          showToastr: boolean;
+          pullDataFromResponse: boolean;
+          redirectOn404: boolean;
+          logoutOn401: boolean;
+        }>;
+      }>;
+    }>;
+  }>;
+};
+
+type GlobalPropsType = {
+  nodeEnv: string;
+  honeybadgerApiKey: string;
+  organization: {
+    name: string;
+    subdomain: string;
+    faviconUrl: string;
+    [key: string]: any;
+  };
+  user?: {
+    id: string;
+    email: string;
+    lastName: string;
+    firstName: string;
+    profileImageUrl: string;
+    active: boolean;
+    authenticationToken: string;
+    [key: string]: any;
+  };
+  authenticated: boolean;
+  neetoApps: string[];
+  isOwner: boolean;
+  permissions: string[];
+  [key: string]: any;
+};
+
+export default function initializeApplication(
+  configurations: Configurations
+): void;
+
+export const globalProps: GlobalPropsType;