@woosmap/ui 3.183.0 → 3.185.0

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,9 +57,6 @@ 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.183.0",
+  "version": "3.185.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -13,21 +13,20 @@
   },
   "dependencies": {
     "@mapbox/polyline": "^1.1.1",
-    "@storybook/manager-webpack5": "^6.5.15",
     "axios": "^0.21.1",
-    "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",
+    "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",
     "resize-observer-polyfill": "^1.5.1",
     "zxcvbn": "^4.4.2"
   },
@@ -66,34 +65,33 @@
     ]
   },
   "devDependencies": {
-    "@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/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-plugin-transform-dynamic-import": "^2.1.0",
     "concurrently": "^6.2.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-sonarjs": "^0.17.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-sonarjs": "^0.9.1",
     "jest-google-maps-mock": "^1.0.7",
-    "prettier": "^2.8.1",
-    "react-scripts": "5.0.1",
+    "prettier": "^2.3.2",
+    "react-scripts": "4.0.3",
     "rimraf": "^3.0.2",
-    "stylus": "^0.59.0",
-    "stylus-loader": "^7.1.0",
-    "svgo": "^3.0.2"
+    "stylus": "^0.54.8",
+    "stylus-loader": "^4.3.3",
+    "svgo": "^2.3.1"
   }
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 
 import CopyClipboardButton from './CopyClipboardButton';
@@ -17,20 +18,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();
-    fireEvent.click(container.firstChild);
+    userEvent.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();
-    fireEvent.click(container.firstChild);
+    userEvent.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} />);
-    fireEvent.click(container.firstChild);
+    userEvent.click(container.firstChild);
     expect(cb).toHaveBeenCalledWith();
 });

package/src/components/Demo/GeolocationDemo.js

@@ -52,7 +52,6 @@ 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,7 +12,6 @@ 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,7 +145,6 @@ 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  */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 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 */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 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  */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Demo from './SkeletonDemo';

package/src/components/Demo/MerchantDemo.js

@@ -253,7 +253,6 @@ 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,5 +1,6 @@
 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';
 
@@ -27,7 +28,7 @@ it('opens / closes the dropdown ', () => {
         </Dropdown>
     );
     expect(container.firstChild).not.toHaveClass('open');
-    fireEvent.click(screen.getByText('My dropdown'));
+    userEvent.click(screen.getByText('My dropdown'));
     expect(container.firstChild).toHaveClass('open');
 });
 

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

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

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

@@ -2,6 +2,7 @@ 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';
 
@@ -28,7 +29,7 @@ it('remove a tag if closed', () => {
     const close = getByRole(tags[0], 'button');
     expect(close).toBeTruthy();
     act(() => {
-        fireEvent.click(close);
+        userEvent.click(close);
     });
     expect(ref.current.getTags()).toEqual([]);
 });
@@ -39,13 +40,13 @@ it('add a tag by clicking the OK btn', () => {
     const input = screen.getByPlaceholderText('tags');
     expect(input).toBeTruthy();
 
-    fireEvent.change(input, { target: { value: 'mytag' } });
+    userEvent.type(input, 'mytag');
     expect(input).toHaveValue('mytag');
 
     expect(ref.current.getTags()).toEqual([]);
     const ok = screen.getByRole('button');
     act(() => {
-        fireEvent.click(ok);
+        userEvent.click(ok);
     });
     expect(ref.current.getTags()).toEqual(['mytag']);
 });
@@ -56,22 +57,21 @@ it('cant add the same value twice', () => {
     const input = screen.getByPlaceholderText('tags');
     expect(input).toBeTruthy();
 
-    fireEvent.change(input, { target: { value: 'mytag' } });
-
+    userEvent.type(input, 'mytag');
     expect(input).toHaveValue('mytag');
 
     expect(ref.current.getTags()).toEqual([]);
     const ok = screen.getByRole('button');
     act(() => {
-        fireEvent.click(ok);
+        userEvent.click(ok);
     });
     expect(ref.current.getTags()).toEqual(['mytag']);
 
-    fireEvent.change(input, { target: { value: 'mytag' } });
+    userEvent.type(input, 'mytag');
     expect(input).toHaveValue('mytag');
 
     act(() => {
-        fireEvent.click(ok);
+        userEvent.click(ok);
     });
 
     expect(screen.getByTestId('input-error')).toBeVisible();

package/src/components/Icon/Icon.js

@@ -6,6 +6,7 @@ import { ReactComponent as AutocompleteCheck } from '../../icons/autocomplete-ch
 import { ReactComponent as Buildings } from '../../icons/buildings.svg';
 import { ReactComponent as Battery } from '../../icons/battery.svg';
 import { ReactComponent as Blog } from '../../icons/blog.svg';
+import { ReactComponent as MarkerPng } from '../../images/marker.png';
 import { ReactComponent as Book } from '../../icons/book.svg';
 import { ReactComponent as Calendar } from '../../icons/calendar.svg';
 import { ReactComponent as Care } from '../../icons/care.svg';
@@ -538,6 +539,7 @@ const ConsoleIcons = {
     longitude: Longitude,
     manage: Manage,
     marker: Marker,
+    markerPng: MarkerPng,
     member: Member,
     members: Members,
     'menu-circle-horizontal': MenuCircleHorizontal,

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

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

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

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

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

@@ -2,6 +2,7 @@ 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';
 
@@ -27,7 +28,7 @@ it('is hidden after clicking cancel', () => {
         modalRef.current.open();
     });
     const cancel = screen.getByTestId('modal-cancel-button');
-    fireEvent.click(cancel);
+    userEvent.click(cancel);
     try {
         screen.getByTestId('modal');
         expect('Modal displayed').toBeFalsy();
@@ -49,7 +50,7 @@ it('is hidden after clicking validate', () => {
     });
     expect(validateCb.mock.calls.length).toBe(0);
     const validate = screen.getByTestId('modal-validate-button');
-    fireEvent.click(validate);
+    userEvent.click(validate);
     expect(validateCb.mock.calls.length).toBe(1);
 });
 

package/src/components/Panel/Panel.js

@@ -85,7 +85,6 @@ 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: null,
+            score: 0,
         };
     }
 
@@ -44,27 +44,25 @@ export default class PasswordStrengthBar extends Component {
         }
 
         return (
-            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 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>
         );
     }
 }

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

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

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

@@ -21,6 +21,13 @@ 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,7 +9,6 @@ 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, waitFor} from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import fireEvent from '@testing-library/user-event';
+import userEvent 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 ', async () => {
+it('renders a Snackbar component ', () => {
     render(
         <SnackBar>
             <div>
@@ -40,10 +40,10 @@ it('renders a Snackbar component ', async () => {
     } catch (e) {
         // nothing
     }
-    fireEvent.click(screen.getByTestId('open'));
-    const snackbar = await waitFor(() => screen.getByTestId('snackbar'));
+    userEvent.click(screen.getByTestId('open'));
+    const snackbar = screen.getByTestId('snackbar');
     expect(snackbar).toHaveTextContent('This is the content of the Snackbar.');
-    fireEvent.click(screen.getByTestId('close'));
+    userEvent.click(screen.getByTestId('close'));
     try {
         screen.getByTestId('snackbar');
         expect('SnackBar exists').toBeFalsy();

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

@@ -1,6 +1,7 @@
 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';
 
@@ -36,7 +37,7 @@ it('calls the onChange prop when clicking the label', () => {
         />
     );
     expect(onChange.mock.calls.length).toBe(0);
-    fireEvent.click(screen.getByRole('switch'));
+    userEvent.click(screen.getByRole('switch'));
     expect(onChange.mock.calls.length).toBe(1);
 });
 

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } 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';
@@ -41,13 +42,13 @@ it('renders a withFormValidation component ', () => {
             <WrappedWithFormValidation />
         </>
     );
-    fireEvent.click(screen.getByTestId('submit'));
+    userEvent.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 char long');
+    expect(error).toEqual('Should be at least 6 chars long');
     error = validationStrategy('minLength', { minLength: 6 }, 'longvalue');
     expect(error).toBeFalsy();
 });
@@ -56,7 +57,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 char long');
+    expect(error).toEqual('Should be at most 6 chars long');
 });
 
 it('validates required', () => {