@woosmap/ui 3.192.0 → 4.0.0

package/.eslintrc

@@ -28,6 +28,8 @@
     "react/jsx-props-no-spreading": 0,
     "react/jsx-no-bind": 0,
     "react/prefer-stateless-function": 0,
+    "react/no-unused-class-component-methods": 0,
+    "class-methods-use-this": 0,
     "react/jsx-filename-extension": [
       1,
       {

package/.storybook/main.js

@@ -30,19 +30,19 @@ const getStylusLoader = (cssOptions) => {
     },
     {
       loader: require.resolve('postcss-loader'),
-      options: {
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-        sourceMap: shouldUseSourceMap,
-      },
+      // options: {
+      //   ident: 'postcss',
+      //   plugins: () => [
+      //     require('postcss-flexbugs-fixes'),
+      //     require('postcss-preset-env')({
+      //       autoprefixer: {
+      //         flexbox: 'no-2009',
+      //       },
+      //       stage: 3,
+      //     }),
+      //   ],
+        //sourceMap: shouldUseSourceMap,
+      // },
     },
     {
       loader: require.resolve('stylus-loader'),
@@ -57,6 +57,9 @@ const getStylusLoader = (cssOptions) => {
 
 // Export a function. Accept the base config as the only param.
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.192.0",
+  "version": "4.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -14,20 +14,21 @@
   },
   "dependencies": {
     "@mapbox/polyline": "^1.1.1",
+    "@storybook/manager-webpack5": "^6.5.15",
     "axios": "^0.21.1",
-    "classnames": "^2.3.1",
-    "framer-motion": "^4.1.17",
-    "google-map-react": "^2.1.10",
-    "i18next": "^20.3.5",
-    "moment": "^2.29.1",
-    "perfect-scrollbar": "^1.5.2",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-datetime": "^3.0.4",
-    "react-dom": "^17.0.2",
-    "react-laag": "^2.0.3",
-    "react-select": "^4.3.1",
-    "react-syntax-highlighter": "^15.4.4",
+    "classnames": "^2.3.2",
+    "framer-motion": "^8.1.9",
+    "google-map-react": "^2.2.0",
+    "i18next": "^22.4.8",
+    "moment": "^2.29.4",
+    "perfect-scrollbar": "^1.5.5",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-datetime": "^3.2.0",
+    "react-dom": "^18.2.0",
+    "react-laag": "^2.0.4",
+    "react-select": "^5.7.0",
+    "react-syntax-highlighter": "^15.5.0",
     "resize-observer-polyfill": "^1.5.1",
     "zxcvbn": "^4.4.2"
   },
@@ -66,33 +67,34 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.14.8",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-jest": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/node-logger": "^6.3.6",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.6",
-    "@storybook/storybook-deployer": "^2.8.10",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "babel-plugin-i18next-extract": "^0.8.3",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.7",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-jest": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/node-logger": "^6.5.15",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.15",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "babel-plugin-i18next-extract": "^0.9.0",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
     "concurrently": "^6.2.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-sonarjs": "^0.9.1",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-sonarjs": "^0.17.0",
     "jest-google-maps-mock": "^1.0.7",
-    "prettier": "^2.3.2",
-    "react-scripts": "4.0.3",
+    "prettier": "^2.8.1",
+    "react-scripts": "5.0.1",
     "rimraf": "^3.0.2",
-    "stylus": "^0.54.8",
-    "stylus-loader": "^4.3.3",
-    "svgo": "^2.3.1"
+    "stylus": "^0.59.0",
+    "stylus-loader": "^7.1.0",
+    "svgo": "^3.0.2"
   }
 }

package/src/components/CopyClipboardButton/CopyToClipboard.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import CopyClipboardButton from './CopyClipboardButton';
@@ -18,20 +17,20 @@ it('renders a CopyClipboardButton component without label', () => {
 it('copies the content', () => {
     const { container } = render(<CopyClipboardButton text="Text to be copied" />);
     document.execCommand = jest.fn();
-    userEvent.click(container.firstChild);
+    fireEvent.click(container.firstChild);
     expect(document.execCommand).toHaveBeenCalledWith('copy');
 });
 
 it('copies the content from callback', () => {
     const { container } = render(<CopyClipboardButton getText={() => 'Text to be copied'} />);
     document.execCommand = jest.fn();
-    userEvent.click(container.firstChild);
+    fireEvent.click(container.firstChild);
     expect(document.execCommand).toHaveBeenCalledWith('copy');
 });
 
 it('copies the content and send a call back', () => {
     const cb = jest.fn();
     const { container } = render(<CopyClipboardButton text="text" copyCallback={cb} />);
-    userEvent.click(container.firstChild);
+    fireEvent.click(container.firstChild);
     expect(cb).toHaveBeenCalledWith();
 });

package/src/components/Demo/GeolocationDemo.js

@@ -52,6 +52,7 @@ export default class GeolocationDemo extends Component {
             });
     };
 
+    // eslint-disable-next-line class-methods-use-this
     getRequestparams = () => ({
         key: Constants.geolocationWoosmapSearchKey,
         radius: 200000,

package/src/components/Demo/LocalitiesAllDemo.js

@@ -12,6 +12,7 @@ export default class LocalitiesAllDemo extends Component {
         this.state = { usecase: 'localities' };
     }
 
+    // eslint-disable-next-line class-methods-use-this
     renderSubHeader = () => (
         <p>
             {tr('You can select bewteen 2 use cases:')}

package/src/components/Demo/LocalitiesDemo.js

@@ -145,6 +145,7 @@ export default class LocalitiesDemo extends Component {
         }
     };
 
+    // eslint-disable-next-line class-methods-use-this
     getHighlightedLocalityDesc = (locality) => {
         let { description } = locality;
 

package/src/components/Demo/LocalitiesFRAddressDemo.js

@@ -1,4 +1,4 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable  */
 import axios from 'axios';
 import React, { Component } from 'react';
 import Demo from './SkeletonDemo';

package/src/components/Demo/LocalitiesUKAddressDemo.js

@@ -1,4 +1,4 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable */
 import axios from 'axios';
 import React, { Component } from 'react';
 import Demo from './SkeletonDemo';

package/src/components/Demo/MapDemo.js

@@ -1,4 +1,4 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Demo from './SkeletonDemo';

package/src/components/Demo/MerchantDemo.js

@@ -253,6 +253,7 @@ export default class MerchantDemo extends Component {
         this.setState({ transaction, place: {} });
     };
 
+    // eslint-disable-next-line class-methods-use-this
     getRequestparams = () => ({
         private_key: '{your private key}',
     });

package/src/components/Dropdown/Dropdown.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
@@ -28,7 +27,7 @@ it('opens / closes the dropdown ', () => {
         </Dropdown>
     );
     expect(container.firstChild).not.toHaveClass('open');
-    userEvent.click(screen.getByText('My dropdown'));
+    fireEvent.click(screen.getByText('My dropdown'));
     expect(container.firstChild).toHaveClass('open');
 });
 

package/src/components/DynamicTag/DynamicTag.stories.js

@@ -45,3 +45,7 @@ export const Default = Template.bind({});
 Default.args = {
     isSelector: false,
 };
+
+Default.parameters = {
+    jest: ['DynamicTag.test.js'],
+};

package/src/components/DynamicTag/DynamicTag.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen, getByRole, fireEvent } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
 
 import DynamicTag from './DynamicTag';
 
@@ -29,7 +28,7 @@ it('remove a tag if closed', () => {
     const close = getByRole(tags[0], 'button');
     expect(close).toBeTruthy();
     act(() => {
-        userEvent.click(close);
+        fireEvent.click(close);
     });
     expect(ref.current.getTags()).toEqual([]);
 });
@@ -40,13 +39,13 @@ it('add a tag by clicking the OK btn', () => {
     const input = screen.getByPlaceholderText('tags');
     expect(input).toBeTruthy();
 
-    userEvent.type(input, 'mytag');
+    fireEvent.change(input, { target: { value: 'mytag' } });
     expect(input).toHaveValue('mytag');
 
     expect(ref.current.getTags()).toEqual([]);
     const ok = screen.getByRole('button');
     act(() => {
-        userEvent.click(ok);
+        fireEvent.click(ok);
     });
     expect(ref.current.getTags()).toEqual(['mytag']);
 });
@@ -57,21 +56,22 @@ it('cant add the same value twice', () => {
     const input = screen.getByPlaceholderText('tags');
     expect(input).toBeTruthy();
 
-    userEvent.type(input, 'mytag');
+    fireEvent.change(input, { target: { value: 'mytag' } });
+
     expect(input).toHaveValue('mytag');
 
     expect(ref.current.getTags()).toEqual([]);
     const ok = screen.getByRole('button');
     act(() => {
-        userEvent.click(ok);
+        fireEvent.click(ok);
     });
     expect(ref.current.getTags()).toEqual(['mytag']);
 
-    userEvent.type(input, 'mytag');
+    fireEvent.change(input, { target: { value: 'mytag' } });
     expect(input).toHaveValue('mytag');
 
     act(() => {
-        userEvent.click(ok);
+        fireEvent.click(ok);
     });
 
     expect(screen.getByTestId('input-error')).toBeVisible();

package/src/components/InfoMessage/InfoMessage.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import InfoMessage from './InfoMessage';
 

package/src/components/InfoMessage/InfoMessage.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import InfoMessage from './InfoMessage';
@@ -19,7 +18,7 @@ it('opens a modal with the content when clicking the button ', () => {
     } catch (e) {
         // nothink
     }
-    userEvent.click(container.firstChild);
+    fireEvent.click(container.firstChild);
     const modal = screen.getByTestId('info-message-modal');
     expect(modal).toHaveClass('modal');
 });

package/src/components/Modal/Modal.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { act } from 'react-dom/test-utils';
-import userEvent from '@testing-library/user-event';
 
 import Modal from './Modal';
 
@@ -28,7 +27,7 @@ it('is hidden after clicking cancel', () => {
         modalRef.current.open();
     });
     const cancel = screen.getByTestId('modal-cancel-button');
-    userEvent.click(cancel);
+    fireEvent.click(cancel);
     try {
         screen.getByTestId('modal');
         expect('Modal displayed').toBeFalsy();
@@ -50,7 +49,7 @@ it('is hidden after clicking validate', () => {
     });
     expect(validateCb.mock.calls.length).toBe(0);
     const validate = screen.getByTestId('modal-validate-button');
-    userEvent.click(validate);
+    fireEvent.click(validate);
     expect(validateCb.mock.calls.length).toBe(1);
 });
 

package/src/components/Panel/Panel.js

@@ -85,6 +85,7 @@ class Panel extends Component {
         );
     };
 
+    // eslint-disable-next-line class-methods-use-this
     getPlaceholderHeader = () => <span className="panel__header__fake-action" />;
 
     render() {

package/src/components/PasswordStrengthBar/PasswordStrengthBar.js

@@ -5,7 +5,7 @@ export default class PasswordStrengthBar extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            score: 0,
+            score: null,
         };
     }
 
@@ -44,25 +44,27 @@ export default class PasswordStrengthBar extends Component {
         }
 
         return (
-            <div className="password-strength">
-                <div className="password-strength__wrapper">
-                    {[1, 2, 3, 4].map((el) => (
-                        <Fragment key={`password-strength-bar-item-${el}`}>
-                            {el > 1 && <div className="password-strength__space" />}
-                            <div
-                                className="password-strength__item"
-                                data-testid={el}
-                                style={{
-                                    backgroundColor: score >= el ? barColors[score] : barColors[0],
-                                }}
-                            />
-                        </Fragment>
-                    ))}
+            score !== null && (
+                <div className="password-strength">
+                    <div className="password-strength__wrapper">
+                        {[1, 2, 3, 4].map((el) => (
+                            <Fragment key={`password-strength-bar-item-${el}`}>
+                                {el > 1 && <div className="password-strength__space" />}
+                                <div
+                                    className="password-strength__item"
+                                    data-testid={el}
+                                    style={{
+                                        backgroundColor: score >= el ? barColors[score] : barColors[0],
+                                    }}
+                                />
+                            </Fragment>
+                        ))}
+                    </div>
+                    <p className="password-strength__desc" style={{ color: barColors[score] }}>
+                        {newShortScoreWord}
+                    </p>
                 </div>
-                <p className="password-strength__desc" style={{ color: barColors[score] }}>
-                    {newShortScoreWord}
-                </p>
-            </div>
+            )
         );
     }
 }

package/src/components/PasswordStrengthBar/PasswordStrengthBar.stories.js

@@ -20,3 +20,7 @@ export const Default = Template.bind({});
 Default.args = {
     password: 'mypassword',
 };
+
+Default.parameters = {
+    jest: ['PasswordStrengthBar.test.js'],
+};

package/src/components/PasswordStrengthBar/PasswordStrengthBar.test.js

@@ -21,13 +21,6 @@ const green = '#25c281';
 const barColors = [grey, red, orange, blue, green];
 
 describe('PasswordStrengthBar', () => {
-    it('renders', async () => {
-        const { container } = render(<PasswordStrengthBar password="mypassword" />);
-        expect(container.firstChild).toHaveClass('password-strength');
-
-        const bar1 = await waitFor(() => screen.getByTestId('1'));
-        expect(bar1).toHaveClass('password-strength__item');
-    });
 
     describe('Color changing / complexity', () => {
         it('renders all bars in grey when password is too short', async () => {

package/src/components/Select/Select.js

@@ -9,6 +9,7 @@ import CreatableSelect from 'react-select/creatable';
  *
  */
 export default class Select extends Component {
+    // eslint-disable-next-line class-methods-use-this
     renderInput = (props) => {
         const { error, isCreatable, color, ...rest } = props;
 

package/src/components/SnackBar/SnackBar.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import {render, screen, waitFor} from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
+import fireEvent from '@testing-library/user-event';
 import SnackBar from './SnackBar';
 import withSnackBar from './withSnackBar';
 import Button from '../Button/Button';
@@ -26,7 +26,7 @@ class SomeChildComponent extends React.Component {
 
 const WithSnackBarComponent = withSnackBar(SomeChildComponent);
 
-it('renders a Snackbar component ', () => {
+it('renders a Snackbar component ', async () => {
     render(
         <SnackBar>
             <div>
@@ -40,10 +40,10 @@ it('renders a Snackbar component ', () => {
     } catch (e) {
         // nothing
     }
-    userEvent.click(screen.getByTestId('open'));
-    const snackbar = screen.getByTestId('snackbar');
+    fireEvent.click(screen.getByTestId('open'));
+    const snackbar = await waitFor(() => screen.getByTestId('snackbar'));
     expect(snackbar).toHaveTextContent('This is the content of the Snackbar.');
-    userEvent.click(screen.getByTestId('close'));
+    fireEvent.click(screen.getByTestId('close'));
     try {
         screen.getByTestId('snackbar');
         expect('SnackBar exists').toBeFalsy();

package/src/components/Switch/Switch.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
 
 import Switch from './Switch';
 
@@ -37,7 +36,7 @@ it('calls the onChange prop when clicking the label', () => {
         />
     );
     expect(onChange.mock.calls.length).toBe(0);
-    userEvent.click(screen.getByRole('switch'));
+    fireEvent.click(screen.getByRole('switch'));
     expect(onChange.mock.calls.length).toBe(1);
 });
 

package/src/components/Tab/Tab.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import Tab from './Tab';
 

package/src/components/Tab/Tab.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import Tab from './Tab';
@@ -28,7 +27,7 @@ it('renders a tab component with 2 tabs and content', () => {
     const firstTab = screen.getByText('First');
     expect(firstTab).toHaveClass('active');
 
-    userEvent.click(screen.getByText('tab 2'));
+    fireEvent.click(screen.getByText('tab 2'));
 });
 
 it('changes active tab after click', () => {
@@ -39,7 +38,7 @@ it('changes active tab after click', () => {
         </Tab>
     );
 
-    userEvent.click(screen.getByText('tab 2'));
+    fireEvent.click(screen.getByText('tab 2'));
     const secondTab = screen.getByText('Second');
     expect(secondTab).toHaveClass('active');
 });

package/src/components/withClickOutside/withClickOutside.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
 
 import withClickOutside from './withClickOutside';
 
@@ -29,8 +28,8 @@ it('renders a label component ', () => {
         </>
     );
     expect(handleClickOutside.mock.calls.length).toBe(0);
-    userEvent.click(container.firstChild);
+    fireEvent.mouseDown(container.firstChild);
     expect(handleClickOutside.mock.calls.length).toBe(0);
-    userEvent.click(screen.getByTestId('outside'));
+    fireEvent.mouseDown(screen.getByTestId('outside'));
     expect(handleClickOutside.mock.calls.length).toBe(1);
 });

package/src/components/withFormValidation/withFormValidation.test.js

@@ -1,8 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
 import Input from '../Input/Input';
 import Button from '../Button/Button';
 import withFormValidation, { validationStrategy } from './withFormValidation';
@@ -42,13 +41,13 @@ it('renders a withFormValidation component ', () => {
             <WrappedWithFormValidation />
         </>
     );
-    userEvent.click(screen.getByTestId('submit'));
+    fireEvent.click(screen.getByTestId('submit'));
     expect(screen.getByTestId('form')).toHaveTextContent('Required field');
 });
 
 it('validates min length', () => {
     let error = validationStrategy('minLength', { minLength: 6 }, 'short');
-    expect(error).toEqual('Should be at least 6 chars long');
+    expect(error).toEqual('Should be at least 6 char long');
     error = validationStrategy('minLength', { minLength: 6 }, 'longvalue');
     expect(error).toBeFalsy();
 });
@@ -57,7 +56,7 @@ it('validates max length', () => {
     let error = validationStrategy('maxLength', { maxLength: 6 }, 'short');
     expect(error).toBeFalsy();
     error = validationStrategy('maxLength', { maxLength: 6 }, 'tooolong');
-    expect(error).toEqual('Should be at most 6 chars long');
+    expect(error).toEqual('Should be at most 6 char long');
 });
 
 it('validates required', () => {