@bigbinary/neeto-commons-frontend 4.6.2 → 4.8.2

package/README.md

@@ -0,0 +1,195 @@
+# neeto-commons-frontend
+
+A library that packages common boilerplate frontend code necessary for all neeto
+products.
+
+<table>
+<thead>
+<tr>
+<th style="text-align: left;">
+
+Category
+
+</th>
+<th style="text-align: left;">
+
+Name
+
+</th>
+</tr>
+</thead>
+<tbody>
+
+<tr>
+<td  style="vertical-align: top;">
+
+Initializers [↗](./docs/initializers/README.md)
+
+</td>
+<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 logger](./docs/initializers/logger.md)
+- [Disable React Developer Tools in production](./docs/initializers/reactDevTools.md)
+- [Set up mixpanel](./docs/initializers/mixpanel.md)
+
+</td>
+</tr>
+<tr></tr>
+
+<tr>
+<td  style="vertical-align: top;">
+
+React utilities [↗](./docs/react/README.md)
+
+</td>
+<td  style="vertical-align: top;">
+
+- [useDebounce](./docs/react/hooks/useDebounce.md)
+- [useFuncDebounce](./docs/react/hooks/useFuncDebounce.md)
+- [usePrevious](./docs/react/hooks/usePrevious.md)
+- [useUpdateEffect](./docs/react/hooks/useUpdateEffect.md)
+- [useLocalStorage](./docs/react/hooks/useLocalStorage.md)
+- [useOnClickOutside](./docs/react/hooks/useOnClickOutside.md)
+- [useFieldSubmit](./docs/react/hooks/useFieldSubmit.md)
+- [useKeyboardShortcutsPaneState](./docs/react/hooks/useKeyboardShortcutsPaneState.md)
+- [useDisplayErrorPage](./docs/react/hooks/useDisplayErrorPage.md)
+- [useErrorDisplayStore](./docs/react/hooks/useDisplayErrorPage.md#useerrordisplaystore-source-code)
+- [useTimer](./docs/react/hooks/useTimer.md)
+- [useRegisterNavigationCheckpoint](./docs/react/hooks/useRegisterNavigationCheckpoint.md)
+- [useNavigationCheckpoints](./docs/react/hooks/useNavigationCheckpoints.md)
+- [useRestoreScrollPosition](./docs/reaact/hooks/useRestoreScrollPosition.md)
+- [useRemoveNavigationCheckpoint](./docs/react/hooks/useRemoveNavigationCheckpoint.md)
+- [useMutationWithInvalidation](./docs/react/hooks/useMutationWithInvalidation.md)
+- [useFetchNeetoApps](./docs/react/hooks/useFetchNeetoApps.md)
+- [usePersistedQuery](./docs/react/hooks/usePersistedQuery.md)
+- [useIsElementVisibleInDom](./docs/react/hooks/useIsElementVisibleInDom.md)
+- [useStateWithDependency](./docs/react/hooks/useStateWithDependency.md)
+- [useQueryParams](./docs/react/hooks/useQueryParams.md)
+- [useBreakpoints](./docs/react/hooks/useBreakpoints.md)
+- [PrivateRoute](./docs/react/components/PrivateRoute.md)
+- [AppContainer](./docs/react/components/AppContainer.md)
+- [QueryClientProvider](./docs/react/components/QueryClientProvider.md)
+- [HoneybadgerErrorBoundary](./docs/react/components/HoneybadgerErrorBoundary.md)
+- [withImmutableActions](./docs/react/utils/withImmutableActions.md)
+- [withTitle](./docs/react/utils/withTitle.md)
+- [registerBrowserNotifications](./docs/react/utils/registerBrowserNotifications.md)
+- [destroyBrowserSubscription](./docs/react/utils/destroyBrowserSubscription.md)
+- [handleMetaClick](./docs/react/utils/handleMetaClick.md)
+- [isMetaKeyPressed](./docs/react/utils/isMetaKeyPressed.md)
+- [withT](./docs/react/utils/withT.md)
+
+</td>
+  </tr>
+</td>
+
+</tr>
+<tr></tr>
+<tr>
+<td style="vertical-align: top;">
+
+Pure utility functions [↗](https://github.com/bigbinary/neeto-cist)
+
+</td>
+<td style="vertical-align: top;">
+
+Moved into [@bigbinary/neeto-cist](https://github.com/bigbinary/neeto-cist)
+
+</td>
+
+</tr>
+
+<tr></tr>
+
+<tr>
+<td style="vertical-align: top;">
+
+Web utility functions [↗](./docs/utils/README.md)
+
+</td>
+<td style="vertical-align: top;">
+
+- [withEventTargetValue](./docs/utils/withEventTargetValue.md)
+- [getSubdomain](./docs/utils/getSubdomain.md)
+- [simulateApiCall](./docs/utils/simulateApiCall.md)
+- [copyToClipboard](./docs/utils/copyToClipboard.md)
+- [buildUrl](./docs/utils/buildUrl.md)
+- [dateFormat](./docs/utils/dateFormat.md)
+- [dayjs](./docs/utils/dayjs.md)
+- [toLocale](./docs/utils/toLocale.md)
+- [getQueryParams](./docs/utils/getQueryParams.md)
+- [joinHyphenCase](./docs/utils/joinHyphenCase.md)
+- [hyphenize](./docs/utils/hyphenize.md)
+- [debounce](./docs/utils/debounce.md)
+- [hasPermission](./docs/utils/hasPermission.md)
+- [hasAnyPermission](./docs/utils/hasAnyPermission.md)
+- [hasAllPermissions](./docs/utils/hasAllPermissions.md)
+- [createSubscription](./docs/utils/createSubscription.md)
+- [getFromLocalStorage](./docs/utils/getFromLocalStorage.md)
+- [setToLocalStorage](./docs/utils/setToLocalStorage.md)
+- [removeFromLocalStorage](./docs/utils/removeFromLocalStorage.md)
+- [currencyFormat](./docs/utils/currencyFormat.md)
+- [showThumbsUpToastr](./docs/utils/showThumbsUpToastr.md)
+- [captureAnalyticsEvent](./docs/utils/captureAnalyticsEvent.md)
+- [captureAnalyticsPageView](./docs/utils/captureAnalyticsPageView.md)
+- [buildNestedAttributesPayload](./docs/utils/buildNestedAttributesPayload.md)
+
+</td>
+
+</tr>
+
+</tbody>
+</table>
+
+## Installation Instructions
+
+Install from npm:
+
+```bash
+yarn add "@bigbinary/neeto-commons-frontend@latest"
+```
+
+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 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. [Web utility functions](./docs/utils/README.md)
+4. [Default configurations](./docs/configs/README.md)
+5. [Cypress Utils](./docs/cypress/README.md)
+6. [Common constants](./docs/constants#common-constants)
+
+## Other references
+
+- [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)
+- [API documentation logistics](./docs/general/api-documentation-logistics.md)
+
+## Testing using yalc
+
+All our build files are in `dist` folder, so when you publish make sure to pass
+the dist dir
+
+```bash
+yalc publish dist
+```

package/configs/babel.js

@@ -50,7 +50,6 @@ module.exports = function (api) {
         "babel-plugin-transform-react-remove-prop-types",
         { removeImport: true },
       ],
-      ["ramda", { useES: !isTestEnv }],
       ...TRANSFORM_RULES,
     ].filter(Boolean),
   };

package/configs/scripts/getPkgTranslations.js

@@ -3,7 +3,7 @@ const path = require("path");
 
 const { mergeDeepLeft } = require("ramda");
 
-const packageDir = path.join(__dirname, "../../");
+const packageDir = path.join(__dirname, "../../../");
 
 const getPkgTransPath = pkg => {
   const basePath = path.join(packageDir, pkg);

package/configs/scripts/jsdoc-builder/constants.mjs

@@ -28,7 +28,6 @@ export const INLINE_CODE_PATTERN = { type: REMARK_NODE_TYPES.INLINE_CODE };
 export const TEXT_PATTERN = { type: REMARK_NODE_TYPES.TEXT };
 export const DOCS_FOLDER_NAME = "docs";
 export const TYPES_FOLDER_NAME = "typeTemplates";
-export const EXPORTED_TYPES_FOLDER_NAME = "dist"; // root
 
 export const JSDOC_IMG_HEIGHT = "200";
 export const JSDOC_IMG_WIDTH = "300";

package/configs/scripts/jsdoc-builder/index.mjs

@@ -5,11 +5,7 @@ import _generate from "@babel/generator";
 import _traverse from "@babel/traverse";
 import * as babelTypes from "@babel/types";
 
-import {
-  DOCS_FOLDER_NAME,
-  EXPORTED_TYPES_FOLDER_NAME,
-  TYPES_FOLDER_NAME,
-} from "./constants.mjs";
+import { DOCS_FOLDER_NAME, TYPES_FOLDER_NAME } from "./constants.mjs";
 import {
   buildEntityTitleToEntityDescMap,
   getFileContent,
@@ -25,12 +21,11 @@ const generate = _generate.default;
 
 const buildJsdoc = ({
   customTypeFileTraverser = defaultTypeFileTraverser,
-  exportedTypesFolderName = EXPORTED_TYPES_FOLDER_NAME,
 } = {}) => {
   const fileNamesInsideDocs = getFileNameList(path.resolve(DOCS_FOLDER_NAME));
   const typeFileNames = fs.readdirSync(path.resolve(TYPES_FOLDER_NAME));
 
-  syncTypeFiles(exportedTypesFolderName);
+  syncTypeFiles();
 
   const entityTitleToDescMapOfAllFiles = {};
 
@@ -46,13 +41,11 @@ const buildJsdoc = ({
 
   // eslint-disable-next-line consistent-return
   typeFileNames.forEach(typeFileName => {
-    const typeFileContent = getFileContent(
-      path.join(exportedTypesFolderName, typeFileName)
-    );
+    const typeFileContent = getFileContent(typeFileName);
     const typeFileAST = parseTypeFile(typeFileContent);
 
     customTypeFileTraverser({
-      typeFileName: `${exportedTypesFolderName}/${typeFileName}`,
+      typeFileName,
       typeFileAST,
       entityTitleToDescMapOfAllFiles,
       babelTraverse: traverse,

package/configs/scripts/jsdoc-builder/utils.mjs

@@ -11,7 +11,6 @@ import {
   ASTERISK_WITH_SPACES,
   CODE_PATTERN,
   DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT,
-  EXPORTED_TYPES_FOLDER_NAME,
   HTML_EXCEPT_IMG_PATTERN,
   IMG_PATTERN,
   JSDOC_EXAMPLE_TAG,
@@ -185,11 +184,10 @@ export const defaultTypeFileTraverser = ({
     },
   });
 
-export const syncTypeFiles = exportedTypesFolderName => {
+export const syncTypeFiles = () => {
   const sourceDir = path.resolve(TYPES_FOLDER_NAME);
-  const destDir = path.resolve(exportedTypesFolderName);
 
-  fs.cpSync(sourceDir, destDir, { recursive: true });
+  fs.cpSync(sourceDir, path.resolve(), { recursive: true });
 };
 
 export const getFileNameList = dirPath => {

package/configs/webpack/rules.js

@@ -21,7 +21,7 @@ module.exports = [
   {
     test: /\.js$/,
     include:
-      /node_modules\/@bigbinary\/neeto-commons-frontend\/initializers\/i18n/,
+      /node_modules\/@bigbinary\/neeto-commons-frontend\/dist\/(cjs\/)?initializers\/i18n/,
     use: { loader: "babel-loader", options: { plugins: ["preval"] } },
   },
   {

package/dist/_commonjsHelpers-ae89b920.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs as g };
+//# sourceMappingURL=_commonjsHelpers-ae89b920.js.map

package/dist/_commonjsHelpers-ae89b920.js.map

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

package/dist/cjs/_commonjsHelpers-755157d3.js

@@ -0,0 +1,8 @@
+'use strict';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+//# sourceMappingURL=_commonjsHelpers-755157d3.js.map

package/dist/cjs/_commonjsHelpers-755157d3.js.map

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

package/dist/cjs/constants/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var constants_regex = require('./regex.js');
+
+var BASE_API_V1_URL = "/api/v1";
+var DEFAULT_PAGE_SIZE = 30;
+var DEFAULT_PAGE_INDEX = 1;
+var DEFAULT_STALE_TIME = 3600000; // 1 hour
+
+// Constants for translation
+var SINGULAR = {
+  count: 1
+};
+var PLURAL = {
+  count: 2
+};
+
+exports.VALID_EMAIL_REGEX = constants_regex.VALID_EMAIL_REGEX;
+exports.VALID_SLUG_REGEX = constants_regex.VALID_SLUG_REGEX;
+exports.VALID_URL_REGEX = constants_regex.VALID_URL_REGEX;
+exports.BASE_API_V1_URL = BASE_API_V1_URL;
+exports.DEFAULT_PAGE_INDEX = DEFAULT_PAGE_INDEX;
+exports.DEFAULT_PAGE_SIZE = DEFAULT_PAGE_SIZE;
+exports.DEFAULT_STALE_TIME = DEFAULT_STALE_TIME;
+exports.PLURAL = PLURAL;
+exports.SINGULAR = SINGULAR;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/constants/index.js"],"sourcesContent":["export const BASE_API_V1_URL = \"/api/v1\";\n\nexport const DEFAULT_PAGE_SIZE = 30;\nexport const DEFAULT_PAGE_INDEX = 1;\nexport const DEFAULT_STALE_TIME = 3_600_000; // 1 hour\n\n// Constants for translation\nexport const SINGULAR = { count: 1 };\nexport const PLURAL = { count: 2 };\n\nexport * from \"./regex\";\n"],"names":["BASE_API_V1_URL","DEFAULT_PAGE_SIZE","DEFAULT_PAGE_INDEX","DEFAULT_STALE_TIME","SINGULAR","count","PLURAL"],"mappings":";;;;;;AAAO,IAAMA,eAAe,GAAG,UAAS;AAEjC,IAAMC,iBAAiB,GAAG,GAAE;AAC5B,IAAMC,kBAAkB,GAAG,EAAC;AACtBC,IAAAA,kBAAkB,GAAG,QAAU;;AAE5C;AACO,IAAMC,QAAQ,GAAG;AAAEC,EAAAA,KAAK,EAAE,CAAA;AAAE,EAAC;AAC7B,IAAMC,MAAM,GAAG;AAAED,EAAAA,KAAK,EAAE,CAAA;AAAE;;;;;;;;;;;;"}

package/dist/cjs/constants/regex.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var VALID_EMAIL_REGEX = /^[\w+-.]+@[a-z\d-]+(\.[a-z\d-]+)*\.[a-z]+$/i;
+var VALID_URL_REGEX = /^((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#-]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+(&[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+)*)?$/;
+var VALID_SLUG_REGEX = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+exports.VALID_EMAIL_REGEX = VALID_EMAIL_REGEX;
+exports.VALID_SLUG_REGEX = VALID_SLUG_REGEX;
+exports.VALID_URL_REGEX = VALID_URL_REGEX;
+//# sourceMappingURL=regex.js.map

package/dist/cjs/constants/regex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"regex.js","sources":["../../../src/constants/regex.js"],"sourcesContent":["export const VALID_EMAIL_REGEX = /^[\\w+-.]+@[a-z\\d-]+(\\.[a-z\\d-]+)*\\.[a-z]+$/i;\n\nexport const VALID_URL_REGEX =\n  /^((https?):\\/\\/)?(www.)?[a-z0-9-]+(\\.[a-z]{2,}){1,3}(#?\\/?[a-zA-Z0-9#-]+)*\\/?(\\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+(&[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+)*)?$/;\n\nexport const VALID_SLUG_REGEX = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;\n"],"names":["VALID_EMAIL_REGEX","VALID_URL_REGEX","VALID_SLUG_REGEX"],"mappings":";;;;AAAO,IAAMA,iBAAiB,GAAG,8CAA6C;AAEvE,IAAMC,eAAe,GAC1B,oJAAmJ;AAE9I,IAAMC,gBAAgB,GAAG;;;;;;"}

package/dist/cjs/cypress-utils/.eslintrc.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var _commonjsHelpers = require('../_commonjsHelpers-755157d3.js');
+
+// DO NOT ADD ANY OTHER RULES TO THIS FILE WITHOUT
+// CONSULTING WITH THE WHEEL TEAM.
+
+var _eslintrc = {
+  root: true,
+  "extends": ["../../.eslintrc", "plugin:cypress/recommended"],
+  rules: {
+    // disable async/await for cypress given that cypress doesn't allow async/await syntax
+    // https://docs.cypress.io/faq/questions/using-cypress-faq#Can-I-use-the-new-ES7-async-await-syntax
+    "promise/prefer-await-to-then": "off",
+    "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!
+       */
+      // Ignore react imports so that they're always ordered to the top of the file.
+      pathGroupsExcludedImportTypes: ["react", "react-native"]
+    }],
+    "@bigbinary/neeto/use-react-query-for-managing-remote-data": "off"
+  }
+};
+
+var _eslintrc$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(_eslintrc);
+
+module.exports = _eslintrc$1;
+//# sourceMappingURL=.eslintrc.js.map

package/dist/cjs/cypress-utils/.eslintrc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":".eslintrc.js","sources":["../../../src/cypress-utils/.eslintrc.js"],"sourcesContent":["// DO NOT ADD ANY OTHER RULES TO THIS FILE WITHOUT\n// CONSULTING WITH THE WHEEL TEAM.\n\nmodule.exports = {\n  root: true,\n  extends: [\"../../.eslintrc\", \"plugin:cypress/recommended\"],\n  rules: {\n    // disable async/await for cypress given that cypress doesn't allow async/await syntax\n    // https://docs.cypress.io/faq/questions/using-cypress-faq#Can-I-use-the-new-ES7-async-await-syntax\n    \"promise/prefer-await-to-then\": \"off\",\n    \"import/order\": [\n      \"error\",\n      {\n        \"newlines-between\": \"always\",\n        alphabetize: { order: \"asc\", caseInsensitive: true },\n        warnOnUnassignedImports: true,\n        groups: [\n          \"builtin\",\n          \"external\",\n          \"internal\",\n          \"index\",\n          \"sibling\",\n          \"parent\",\n          \"object\",\n          \"type\",\n        ],\n        /*\n         * Currently we check for existence of webpack alias\n         * config and then iterate over the aliases and create\n         * these pathGroups. Only caveat with this mechanism\n         * is that in VSCode eslint plugin won't dynamically\n         * read it. But eslint cli would!\n         */\n        // Ignore react imports so that they're always ordered to the top of the file.\n        pathGroupsExcludedImportTypes: [\"react\", \"react-native\"],\n      },\n    ],\n    \"@bigbinary/neeto/use-react-query-for-managing-remote-data\": \"off\",\n  },\n};\n"],"names":["module","root","rules","alphabetize","order","caseInsensitive","warnOnUnassignedImports","groups","pathGroupsExcludedImportTypes"],"mappings":";;;;AAAA;AACA;;AAEAA,IAAAA,SAAc,GAAG;AACfC,EAAAA,IAAI,EAAE,IAAI;AACV,EAAA,SAAA,EAAS,CAAC,iBAAiB,EAAE,4BAA4B,CAAC;AAC1DC,EAAAA,KAAK,EAAE;AACL;AACA;AACA,IAAA,8BAA8B,EAAE,KAAK;IACrC,cAAc,EAAE,CACd,OAAO,EACP;AACE,MAAA,kBAAkB,EAAE,QAAQ;AAC5BC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,KAAK,EAAE,KAAK;AAAEC,QAAAA,eAAe,EAAE,IAAA;OAAM;AACpDC,MAAAA,uBAAuB,EAAE,IAAI;AAC7BC,MAAAA,MAAM,EAAE,CACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,CACP;AACD;AACR;AACA;AACA;AACA;AACA;AACA;AACQ;AACAC,MAAAA,6BAA6B,EAAE,CAAC,OAAO,EAAE,cAAc,CAAA;AACzD,KAAC,CACF;AACD,IAAA,2DAA2D,EAAE,KAAA;AAC/D,GAAA;AACF,CAAC,CAAA;;;;;;"}