[NDS-701] New Fields

.eslintrc.json

@@ -124,11 +124,12 @@
     }
   },
   "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["rollup.config.js"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2022,
     "sourceType": "module",
     "project": ["./tsconfig.json"] // Specify it only for TypeScript files
   }

package.json

@@ -10,19 +10,20 @@
     "@amanda-mitchell/semantic-release-npm-multiple": "^2.8.0",
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
     "@emotion/babel-plugin": "^11.10.5",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/eslint-plugin": "^11.10.0",
     "@emotion/jest": "^11.10.5",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
     "@mdx-js/react": "^1.6.22",
     "@optimize-lodash/rollup-plugin": "^4.0.1",
     "@rollup/plugin-commonjs": "^23.0.7",
@@ -35,7 +36,7 @@
     "@storybook/addon-docs": "^6.5.7",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.5.7",
-    "@storybook/addon-storyshots": "6.3.13",
+    "@storybook/addon-storyshots": "^6.5.7",
     "@storybook/addon-storysource": "^6.5.7",
     "@storybook/addon-viewport": "^6.5.7",
     "@storybook/addons": "^6.5.7",
@@ -56,8 +57,8 @@
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
     "@types/react-highlight-words": "^0.16.1",
+    "@types/react-input-mask": "^3.0.2",
     "@types/react-router-dom": "^5.1.5",
-    "@types/react-test-renderer": "^17.0.1",
     "@types/recharts": "^1.8.16",
     "@types/styled-components": "^5.1.7",
     "@types/uuid": "^8.3.0",
@@ -83,7 +84,6 @@
     "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0",
     "jest-transform-stub": "^2.0.0",
     "jest-webpack-resolver": "^0.3.0",
     "lint-staged": "^11.0.0",
@@ -92,7 +92,6 @@
     "react-dom": "^17.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.2",
     "rollup": "3.9.1",
     "rollup-plugin-delete": "^2.0.0",
@@ -106,23 +105,24 @@
     "ts-jest": "^26.5.6",
     "ts-loader": "^9.1.2",
     "typedoc": "^0.22.12",
-    "typescript": "4.2.4",
+    "typescript": "4.9.5",
     "url-loader": "^4.1.0"
   },
   "dependencies": {
     "@tippyjs/react": "^4.2.5",
-    "@types/react-window": "^1.8.4",
     "dayjs": "^1.8.34",
     "emotion-reset": "^3.0.1",
     "lodash": "^4.17.19",
     "pluralize": "^8.0.0",
     "polished": "^3.4.4",
+    "react-aria": "^3.26.0",
+    "react-aria-components": "^1.0.0-alpha.5",
     "react-fast-compare": "^3.2.0",
     "react-highlight-words": "^0.17.0",
+    "react-input-mask": "^2.0.4",
     "react-media": "^2.0.0-rc.1",
     "react-range": "^1.8.12",
     "react-switch": "^6.0.0",
-    "react-window": "^1.8.6",
     "recharts": "^1.8.5",
     "tslib": "^2.4.1",
     "uuid": "^8.3.2"

rollup.config.js

@@ -1,22 +1,23 @@
-import fs from 'fs';
-
+import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin';
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import svgr from '@svgr/rollup';
-import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin';
 import del from 'rollup-plugin-delete';
 import dts from 'rollup-plugin-dts';
 import css from 'rollup-plugin-import-css';
+// eslint-disable-next-line import/order
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
 // To handle css files
 import { terser } from 'rollup-plugin-terser';
 
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const pkg = require('./package.json');
 
 const regexesOfPackages = (externalPackages = []) =>
-  externalPackages.map((packageName) => new RegExp(`^${packageName}(\/.*)?`));
+  externalPackages.map((packageName) => new RegExp(`^${packageName}(/.*)?`));
 
 export default [
   {
@@ -25,6 +26,7 @@ export default [
       {
         dir: 'dist',
         format: 'esm',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         preserveModules: true,
       },
     ],

src/components/Avatar/Avatar.stories.mdx

@@ -31,7 +31,7 @@ import SectionHeader from '../../storybook/SectionHeader';
 
 ## Overview
 
-A universal Avatar component cam be found around ictinus on menus or can be a standalone component as well. It renders either images, letter or icon from our library
+A universal Avatar component can be found around ictinus on menus or can be a standalone component as well. It renders either images, letter or icon from our library
 
 ## Props
 

src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,7 @@
-import { isEmpty, uniqueId } from 'lodash';
+import { isEmpty } from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { generateUniqueKey } from 'utils/helpers';
 
 import { breadcrumbLinkStyles, breadcrumbStyles } from './Breadcrumb.style';
 import BreadcrumbItem from './BreadcrumbItem/BreadcrumbItem';
@@ -38,7 +39,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({ children, data = [] }) => {
   const getBreadcrumbItem = React.useMemo(
     // eslint-disable-next-line react/display-name
     () => (child: React.ReactNode, index: number) => {
-      const itemKey = uniqueId('data_item_');
+      const itemKey = generateUniqueKey('data_item_');
 
       const isLast = isLastItem(dataItems, index);