chore(webapp): add missing packages

packages/webapp/package.json

@@ -6,6 +6,7 @@
     "@blueprintjs-formik/core": "^0.3.6",
     "@blueprintjs-formik/datetime": "^0.3.7",
     "@blueprintjs-formik/select": "^0.3.5",
+    "@blueprintjs/colors": "4.1.19",
     "@blueprintjs/core": "^4.20.2",
     "@blueprintjs/datetime": "^4.4.37",
     "@blueprintjs/popover2": "^0.11.1",
@@ -26,6 +27,7 @@
     "@types/ramda": "^0.28.14",
     "@types/react": "^16.14.28",
     "@types/react-body-classname": "^1.1.7",
+    "@types/react-dom": "^16.9.16",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.5",
@@ -38,8 +40,8 @@
     "axios": "^0.21.2",
     "basscss": "^8.0.2",
     "camelcase": "^5.3.1",
+    "classnames": "^2.3.2",
     "cross-env": "^7.0.2",
-    "deep-map-keys": "^2.0.1",
     "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
     "dotenv-webpack": "^8.0.1",
@@ -47,16 +49,19 @@
     "fast-deep-equal": "^3.1.3",
     "flat": "^5.0.2",
     "formik": "^2.2.5",
+    "history": "4.10.1",
     "http-proxy-middleware": "^1.0.0",
     "jest": "24.9.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
+    "js-cookie": "2.2.1",
     "js-money": "^0.6.3",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.33",
     "path-browserify": "^1.0.1",
+    "prop-types": "15.8.1",
     "query-string": "^7.1.1",
     "ramda": "^0.27.1",
     "react": "^18.2.0",
@@ -67,12 +72,14 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^11.0.1",
     "react-error-boundary": "^3.0.2",
+    "react-error-overlay": "^6.0.9",
     "react-hotkeys-hook": "^3.0.3",
     "react-intl-universal": "^2.4.7",
     "react-loadable": "^5.5.0",
     "react-query": "^3.6.0",
     "react-query-devtools": "^2.1.1",
     "react-redux": "^7.2.9",
+    "react-router": "5.3.4",
     "react-router-breadcrumbs-hoc": "^3.2.10",
     "react-router-dom": "^5.3.3",
     "react-scripts": "5.0.1",
@@ -90,7 +97,9 @@
     "redux-devtools": "^3.5.0",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",
+    "reselect": "4.1.7",
     "rtl-detect": "^1.0.3",
+    "sass": "^1.68.0",
     "semver": "6.3.0",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
@@ -105,14 +114,10 @@
     "storybook": "start-storybook -p 6006"
   },
   "proxy": "http://localhost:3000/",
-  "devDependencies": {
-    "@types/react-dom": "^16.9.16",
-    "react-error-overlay": "^6.0.9",
-    "sass": "^1.68.0"
-  },
   "resolutions": {
     "react-error-overlay": "6.0.9"
   },
+  
   "browserslist": {
     "production": [
       ">0.2%",

packages/webapp/src/components/Accounts/AccountsTypesSelect.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { FSelect } from '@/components/Forms';
 
 export function AccountsTypesSelect({ ...props }) {

packages/webapp/src/components/Accounts/_components.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 
 // Filters accounts items.
 export const accountPredicate = (query, account, _index, exactMatch) => {

packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { Formik, FastField, FieldArray, useFormikContext } from 'formik';
+import { Formik, FastField, FieldArray } from 'formik';
 import {
   Button,
   FormGroup,

packages/webapp/src/components/App.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { QueryClientProvider, QueryClient } from 'react-query';

packages/webapp/src/components/Dashboard/SplashScreen.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import * as R from 'ramda';
 import BigcapitalLoading from './BigcapitalLoading';
 import withDashboard from '@/containers/Dashboard/withDashboard';

packages/webapp/src/components/DialogsContainer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import AccountDialog from '@/containers/Dialogs/AccountDialog';
 import InviteUserDialog from '@/containers/Dialogs/InviteUserDialog';
 import UserFormDialog from '@/containers/Dialogs/UserFormDialog';

packages/webapp/src/components/Utils/For.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export const For = ({ render, of }) =>

packages/webapp/src/containers/Authentication/Login.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { Formik } from 'formik';
 import { Link } from 'react-router-dom';
 

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
 
 import { CommercialDocBox } from '@/components';

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
 
 import { Card } from '@/components';

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.tsx

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import React from 'react';
-
 import { Row, Col } from '@/components';
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   NavbarGroup,
   Button,

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormGroup, Position, Checkbox } from '@blueprintjs/core';

packages/webapp/src/containers/ItemsCategories/ItemsCategoryActionsBar.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   NavbarGroup,
   NavbarDivider,

packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export default function PreferencesPageLoader(props) {

packages/webapp/src/style/App.scss

@@ -1,25 +1,10 @@
 @import './normalize.scss';
-@import './Base.scss';
+@import './_base.scss';
 
-$svg-icon-map: (
-  '16px/small-minus.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='%23fff'/",
-  '16px/small-tick.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5z' fill='%23fff'/",
-  '16px/chevron-right.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/",
-  '16px/more.svg': "g fill='%235C7080'%3E%3Ccircle cx='2' cy='8.03' r='2'/%3E%3Ccircle cx='14' cy='8.03' r='2'/%3E%3Ccircle cx='8' cy='8.03' r='2'/%3E%3C/g",
-);
-
-@function svg-icon($inline-svg, $fill-color) {
-  @return url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3C"+ map-get($svg-icon-map, $inline-svg) + "%3E%3C/svg%3E")
-}
-
-
-// Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
 @import '@blueprintjs/popover2/src/blueprint-popover2.scss';
 
-@import 'basscss';
-
 // Objects
 @import 'objects/form';
 @import 'objects/switch';

packages/webapp/src/style/Base.scss

@@ -1,3 +0,0 @@
-
-@import 'variables';
-@import 'functions';

packages/webapp/src/style/_base.scss

@@ -0,0 +1,3 @@
+
+@import '_variables';
+@import '_functions';

packages/webapp/src/style/_functions.scss

@@ -0,0 +1,54 @@
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+$svg-icon-map: ('16px/small-minus.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='%23fff'/",
+  '16px/small-tick.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5z' fill='%23fff'/",
+  '16px/chevron-right.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/",
+  '16px/more.svg': "g fill='%235C7080'%3E%3Ccircle cx='2' cy='8.03' r='2'/%3E%3Ccircle cx='14' cy='8.03' r='2'/%3E%3Ccircle cx='8' cy='8.03' r='2'/%3E%3C/g",
+) !default;
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+
+    @each $char,
+    $encoded in $escaped-characters {
+
+      @if str-index($string, "url(")==1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      }
+
+      @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+@function svg-icon($inline-svg, $fill-color) {
+  @return url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3C"+ map-get($svg-icon-map, $inline-svg) + "%3E%3C/svg%3E")
+}

packages/webapp/src/style/_variables.scss

@@ -48,4 +48,4 @@ $form-check-input-checked-bg-image: "" !default;
 
 // z-indexs
 $zindex-dashboard-splash-screen: 39;
-$zindex-toast: 40;
+$zindex-toast: 40;

packages/webapp/src/style/functions.scss

@@ -1,40 +0,0 @@
-
-// Characters which are escaped by the escape-svg function
-$escaped-characters: (
-  ("<","%3c"),
-  (">","%3e"),
-  ("#","%23"),
-  ("(","%28"),
-  (")","%29"),
-) !default;
-
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-  @return $string;
-}
-
-@function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
-    @each $char, $encoded in $escaped-characters {
-    
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
-      } @else {
-        $string: str-replace($string, $char, $encoded);
-      }
-    }
-  }
-  @return $string;
-}

packages/webapp/src/utils/index.tsx

@@ -1,22 +1,19 @@
 // @ts-nocheck
-import React from 'react';
 import moment from 'moment';
 import _ from 'lodash';
 import * as R from 'ramda';
 import Currencies from 'js-money/lib/currency';
 import clsx from 'classnames';
-
 import { Intent } from '@blueprintjs/core';
 import Currency from 'js-money/lib/currency';
 import accounting from 'accounting';
-import deepMapKeys from 'deep-map-keys';
 import { createSelectorCreator, defaultMemoize } from 'reselect';
 import { isEqual, castArray, isEmpty, includes, pickBy } from 'lodash';
-
 import jsCookie from 'js-cookie';
-
+import { deepMapKeys } from './map-key-deep';
 export * from './deep';
 
+
 export const getCookie = (name, defaultValue) =>
   _.defaultTo(jsCookie.get(name), defaultValue);
 

packages/webapp/src/utils/map-key-deep.ts

@@ -0,0 +1,79 @@
+import { isArray, isFunction, isNil, isObject } from 'lodash';
+
+interface NonPrimitive extends Object {
+  [key: string]: any;
+  [index: number]: any;
+}
+
+export interface MapFn {
+  (key: string, value: any): string;
+}
+
+export interface Opts {
+  thisArg?: any;
+}
+
+export class DeepMapKeys {
+  private cache = new WeakMap<NonPrimitive, any>();
+
+  constructor(private mapFn: MapFn, private opts: Opts) {}
+
+  public map(value: any): any {
+    return isArray(value)
+      ? this.mapArray(value)
+      : isObject(value)
+      ? this.mapObject(value)
+      : value;
+  }
+
+  private mapArray(arr: any[]): any[] {
+    if (this.cache.has(arr)) {
+      return this.cache.get(arr);
+    }
+
+    let length = arr.length;
+    let result: any[] = [];
+    this.cache.set(arr, result);
+
+    for (let i = 0; i < length; i++) {
+      result.push(this.map(arr[i]));
+    }
+
+    return result;
+  }
+
+  private mapObject(obj: NonPrimitive): NonPrimitive {
+    if (this.cache.has(obj)) {
+      return this.cache.get(obj);
+    }
+
+    let {
+      mapFn,
+      opts: { thisArg },
+    } = this;
+    let result: NonPrimitive = {};
+    this.cache.set(obj, result);
+
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        result[mapFn.call(thisArg, key, obj[key])] = this.map(obj[key]);
+      }
+    }
+
+    return result;
+  }
+}
+
+export function deepMapKeys<T>(object: any, mapFn: MapFn, options?: Opts): T {
+  options = isNil(options) ? {} : options;
+
+  if (!mapFn) {
+    throw new Error('mapFn is required');
+  } else if (!isFunction(mapFn)) {
+    throw new TypeError('mapFn must be a function');
+  } else if (!isObject(options)) {
+    throw new TypeError('options must be an object');
+  }
+
+  return new DeepMapKeys(mapFn, options).map(object);
+}