@bigbinary/neeto-commons-frontend 0.0.1

package/README.md

@@ -0,0 +1,93 @@
+# neeto-commons-frontend
+
+The commons frontend library for Neeto Applications.
+
+## Installation Instructions
+
+Install from npm:
+
+```bash
+yarn add "@bigbinary/neeto-commons-frontend@0.0.1"
+```
+
+This package relies on the host project's tailwind configuration. So add
+neeto-commons-frontend to your project's tailwind.config.js file:
+
+```js
+module.exports = {
+  purge: {
+    content: [
+      // ... other content directories
+      "./node_modules/@bigbinary/neeto-commons-frontend/**/*.js",
+    ],
+  },
+  // ... other tailwind config options
+};
+```
+
+## Usage
+
+This package exports four 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. [General utility functions](./docs/utils/README.md)
+
+## 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 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
+   the changes to the host application.
+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 (`1.0.x`)
+  from master branch.
+- Version in
+  [README.md](https://github.com/bigbinary/neeto-commons-frontend/blob/master/README.md#L10)
+  and
+  [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`.
+- 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
+  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 this repo and re-run `yalc push` to install
+  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`
+  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
+  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
+  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
+  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.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var objects = require('pure/objects');
+var axios = require('axios');
+var ramda = require('ramda');
+var mixpanel = require('mixpanel-browser');
+var i18n = require('i18next');
+var reactI18next = require('react-i18next');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var mixpanel__default = /*#__PURE__*/_interopDefaultLegacy(mixpanel);
+var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
+
+var _document$getElements, _document$getElements2;
+window.globalProps = objects.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) || "{}"));
+objects.deepFreezeObject(window.globalProps);
+
+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;
+}
+
+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 setAxiosDefaults = function setAxiosDefaults() {
+  axios__default["default"].defaults.baseURL = "/";
+  setAuthHeaders();
+  registerIntercepts();
+};
+
+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;
+  }
+};
+
+var handleSuccessResponse = function handleSuccessResponse(response) {
+  var _response$config = response.config,
+      _response$config$tran = _response$config.transformResponseCase,
+      transformResponseCase = _response$config$tran === void 0 ? true : _response$config$tran,
+      _response$config$incl = _response$config.includeMetadataInResponse,
+      includeMetadataInResponse = _response$config$incl === void 0 ? false : _response$config$incl;
+
+  if (transformResponseCase && response.data) {
+    response.data = objects.keysToCamelCase(response.data);
+  }
+
+  return includeMetadataInResponse ? response : response.data;
+};
+
+var handleErrorResponse = function handleErrorResponse(error) {
+  var _error$response, _error$response2;
+
+  if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 404) {
+    window.location.href = "/page-not-found";
+  } else if (((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) === 401) {
+    resetAuthTokens();
+    setTimeout(function () {
+      var redirectTo = window.location.pathname === "/login" ? "/login" : "/login?redirect_uri=".concat(encodeURIComponent(window.location.href));
+      window.location.href = redirectTo;
+    }, 300);
+  }
+
+  return Promise.reject(error);
+};
+
+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.evolve({
+    data: objects.keysToSnakeCase
+  })(request);
+};
+
+var registerIntercepts = function registerIntercepts() {
+  axios__default["default"].interceptors.request.use(ramda.pipe(cleanupCredentialsForCrossOrigin, transformDataToSnakeCase));
+  axios__default["default"].interceptors.response.use(handleSuccessResponse, handleErrorResponse);
+};
+
+setAxiosDefaults();
+
+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");
+}
+
+var neetoCommons = {
+	errorPage: {
+		pageDoesNotExist: "Page does not exist.",
+		goToHome: "Go home"
+	},
+	sidebar: {
+		profile: "Profile",
+		orgSettings: "Organization Settings",
+		logout: "Logout",
+		help: "Help"
+	},
+	common: {
+		actions: {
+			cancel: "Cancel",
+			save: "Save"
+		}
+	},
+	toastr: {
+		success: {
+			copiedToClipboard: "Copied to clipboard!"
+		}
+	},
+	notice: {
+		errorOccurred: "Some error occurred."
+	}
+};
+var en = {
+	neetoCommons: neetoCommons
+};
+
+var initializeI18n = function initializeI18n(resources) {
+  i18n__default["default"].use(reactI18next.initReactI18next).init({
+    resources: ramda.mergeDeepLeft({
+      en: {
+        translation: en
+      }
+    }, resources),
+    lng: "en",
+    fallbackLng: "en",
+    interpolation: {
+      escapeValue: false,
+      skipOnVariables: false
+    }
+  });
+};
+
+/* eslint-disable import/order */
+function initializeApplication(_ref) {
+  var translationResources = _ref.translationResources;
+  initializeI18n(translationResources);
+}
+
+module.exports = initializeApplication;

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@bigbinary/neeto-commons-frontend",
+  "version": "0.0.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>",
+  "license": "apache-2.0",
+  "scripts": {
+    "prepare": "husky install",
+    "sync_with_wheel": "./.scripts/sync_with_wheel.sh",
+    "test": "TZ=UTC jest",
+    "build": "NODE_ENV=production rollup -c rollup.config.js",
+    "watch": "rollup -c rollup.config.js --watch"
+  },
+  "files": [
+    "initializers*.js",
+    "react*.js",
+    "utils*.js",
+    "pure*.js"
+  ],
+  "lint-staged": {
+    "**/*.{js,jsx,json}": [
+      ".scripts/fix-lints.sh"
+    ]
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.18.2",
+    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.16.7",
+    "@bigbinary/neeto-icons": "^1.8.35",
+    "@bigbinary/neetoui": "^3.5.11",
+    "@honeybadger-io/react": "2.0.1",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@svgr/rollup": "^6.2.1",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.3",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/user-event": "13.5.0",
+    "autoprefixer": "^10.4.7",
+    "axios": "^0.27.2",
+    "babel-jest": "27.0.6",
+    "dayjs": "1.11.1",
+    "eslint": "^8.15.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jam3": "^0.2.3",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-neeto": "^1.0.8",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "4.2.1-alpha-13455d26d-20211104",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "formik": "^2.2.9",
+    "husky": "^7.0.4",
+    "i18next": "21.7.0",
+    "jest": "27.5.1",
+    "lint-staged": "^12.3.7",
+    "mixpanel-browser": "^2.45.0",
+    "prettier": "^2.6.2",
+    "ramda": "^0.28.0",
+    "react": "^17.0.2",
+    "react-dom": "17.0.2",
+    "react-i18next": "11.16.8",
+    "react-router-dom": "^5.2.0",
+    "rollup": "^2.76.0",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "yup": "^0.32.11"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@bigbinary/neeto-icons": "^1.8.35",
+    "@bigbinary/neetoui": "^3.5.11",
+    "@honeybadger-io/react": "2.0.1",
+    "axios": "^0.27.2",
+    "dayjs": "1.11.1",
+    "formik": "^2.2.9",
+    "i18next": "21.7.0",
+    "mixpanel-browser": "^2.45.0",
+    "ramda": "^0.28.0",
+    "react": "^17.0.2",
+    "react-i18next": "11.16.8",
+    "react-router-dom": "^5.2.0",
+    "yup": "^0.32.11"
+  }
+}