@woosmap/ui 4.221.0 → 4.222.0

package/src/components/Demo/MapDemo.js

@@ -1,58 +1,58 @@
 /* eslint-disable  */
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import Demo from "@/components/Demo/SkeletonDemo";
-import Button from "@/components/Button/Button";
-import ButtonGroup from "@/components/Button/ButtonGroup";
-import marker from "@/images/marker.png";
-import markerAlt from "@/images/marker-alt.png";
-import { tr } from "@/components/utils/locale";
-import Input from "@/components/Input/Input";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Demo from './SkeletonDemo';
+import Button from '../Button/Button';
+import ButtonGroup from '../Button/ButtonGroup';
+import marker from '../../images/marker.png';
+import markerAlt from '../../images/marker-alt.png';
+import { tr } from '../utils/locale';
+import Input from '../Input/Input';
 
 export default class MapDemo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      style: "default",
-      hasStores: false,
-      hasPois: true,
-    };
-    this.map = null;
-    this.marker = null;
-    this.mounted = true;
-    this.viewport = null;
-    this.demoRef = React.createRef();
-  }
+    constructor(props) {
+        super(props);
+        this.state = {
+            style: 'default',
+            hasStores: false,
+            hasPois: true,
+        };
+        this.map = null;
+        this.marker = null;
+        this.mounted = true;
+        this.viewport = null;
+        this.demoRef = React.createRef();
+    }
 
-  componentDidMount() {
-    this.displayMap();
-  }
+    componentDidMount() {
+        this.displayMap();
+    }
 
-  componentWillUnmount() {
-    this.mounted = false;
-  }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
 
-  renderCode = () => {
-    const { style, hasStores, hasPois } = this.state;
+    renderCode = () => {
+        const { style, hasStores, hasPois } = this.state;
 
-    let styleColor = "";
-    if (style === "grey") {
-      styleColor = `
+        let styleColor = '';
+        if (style === 'grey') {
+            styleColor = `
         {featureType: "all", stylers:[{"saturation": -100, "lightness": -30}]},`;
-    }
-    if (style === "lightgrey") {
-      styleColor = `
+        }
+        if (style === 'lightgrey') {
+            styleColor = `
         {featureType: "all", stylers:[{"saturation": -100}]},`;
-    }
-    if (style === "blue") {
-      styleColor = `
+        }
+        if (style === 'blue') {
+            styleColor = `
         {featureType: "all", stylers:[{"hue": "#4998ff"}, {gamma:0.5}]},`;
-    }
-    const styleConf = `[${styleColor}
-        {featureType: "poi", stylers:[{"visibility":"${hasPois ? "on" : "off"}"}]}
+        }
+        const styleConf = `[${styleColor}
+        {featureType: "poi", stylers:[{"visibility":"${hasPois ? 'on' : 'off'}"}]}
     ]`;
-    const stores = hasStores
-      ? `
+        const stores = hasStores
+            ? `
 const storesOverlay = new window.woosmap.map.StoresOverlay({
     breakPoint: 14,
     rules: [],
@@ -78,9 +78,9 @@ const storesOverlay = new window.woosmap.map.StoresOverlay({
 });
 storesOverlay.setMap(map);
         `
-      : "";
+            : '';
 
-    return `const map = new window.woosmap.map.Map(document.getElementById('map'), {
+        return `const map = new window.woosmap.map.Map(document.getElementById('map'), {
     styles: ${styleConf},
     center: {
         lat: 51.52,
@@ -91,216 +91,214 @@ storesOverlay.setMap(map);
 
         ${stores}
         `;
-  };
-
-  renderHeaderFilters = () => {
-    const { style } = this.state;
-
-    const styleChoice = {
-      key: "usecase",
-      label: tr("Choose your style"),
-      component: (
-        <ButtonGroup isLight key="usecase">
-          <Button
-            type="group"
-            active={style === "default"}
-            onClick={() => {
-              this.setState({ style: "default" }, this.displayMap);
-            }}
-            label={tr("Default")}
-          />
-          <Button
-            type="group"
-            active={style === "blue"}
-            onClick={() => {
-              this.setState({ style: "blue" }, this.displayMap);
-            }}
-            label={tr("Blue")}
-          />
-          <Button
-            type="group"
-            active={style === "lightgrey"}
-            onClick={() => {
-              this.setState({ style: "lightgrey" }, this.displayMap);
-            }}
-            label={tr("Light Grey")}
-          />
-          <Button
-            type="group"
-            active={style === "grey"}
-            onClick={() => {
-              this.setState({ style: "grey" }, this.displayMap);
-            }}
-            label={tr("Grey")}
-          />
-        </ButtonGroup>
-      ),
     };
 
-    return [styleChoice];
-  };
+    renderHeaderFilters = () => {
+        const { style } = this.state;
 
-  renderFooterFilters = () => {
-    const { hasStores, hasPois } = this.state;
-    const filterPois = {
-      label: "",
-      key: "pois",
-      component: (
-        <Input
-          label={tr("Display Map POIs")}
-          type="checkbox"
-          checked={hasPois}
-          onChange={(e) => {
-            this.setState({ hasPois: e.target.checked }, this.displayMap);
-          }}
-        />
-      ),
-    };
+        const styleChoice = {
+            key: 'usecase',
+            label: tr('Choose your style'),
+            component: (
+                <ButtonGroup isLight key="usecase">
+                    <Button
+                        type="group"
+                        active={style === 'default'}
+                        onClick={() => {
+                            this.setState({ style: 'default' }, this.displayMap);
+                        }}
+                        label={tr('Default')}
+                    />
+                    <Button
+                        type="group"
+                        active={style === 'blue'}
+                        onClick={() => {
+                            this.setState({ style: 'blue' }, this.displayMap);
+                        }}
+                        label={tr('Blue')}
+                    />
+                    <Button
+                        type="group"
+                        active={style === 'lightgrey'}
+                        onClick={() => {
+                            this.setState({ style: 'lightgrey' }, this.displayMap);
+                        }}
+                        label={tr('Light Grey')}
+                    />
+                    <Button
+                        type="group"
+                        active={style === 'grey'}
+                        onClick={() => {
+                            this.setState({ style: 'grey' }, this.displayMap);
+                        }}
+                        label={tr('Grey')}
+                    />
+                </ButtonGroup>
+            ),
+        };
 
-    const filterStores = {
-      label: "",
-      key: "stores",
-      component: (
-        <Input
-          label={tr("Display Woosmap Stores overlay")}
-          type="checkbox"
-          checked={hasStores}
-          onChange={(e) => {
-            this.setState({ hasStores: e.target.checked }, this.displayMap);
-          }}
-        />
-      ),
+        return [styleChoice];
     };
-    return [filterPois, filterStores];
-  };
 
-  displayMap = () => {
-    const { style, hasStores, hasPois } = this.state;
+    renderFooterFilters = () => {
+        const { hasStores, hasPois } = this.state;
+        const filterPois = {
+            label: '',
+            key: 'pois',
+            component: (
+                <Input
+                    label={tr('Display Map POIs')}
+                    type="checkbox"
+                    checked={hasPois}
+                    onChange={(e) => {
+                        this.setState({ hasPois: e.target.checked }, this.displayMap);
+                    }}
+                />
+            ),
+        };
 
-    if (this.timeoutMap) {
-      clearTimeout(this.timeoutMap);
-    }
+        const filterStores = {
+            label: '',
+            key: 'stores',
+            component: (
+                <Input
+                    label={tr('Display Woosmap Stores overlay')}
+                    type="checkbox"
+                    checked={hasStores}
+                    onChange={(e) => {
+                        this.setState({ hasStores: e.target.checked }, this.displayMap);
+                    }}
+                />
+            ),
+        };
+        return [filterPois, filterStores];
+    };
 
-    const MapHTMLElement = this.demoRef?.current?.getMap();
+    displayMap = () => {
+        const { style, hasStores, hasPois } = this.state;
 
-    if (window?.woosmap?.map && MapHTMLElement) {
-      window.woosmap.map.config.setApiKey(
-        "woos-48c80350-88aa-333e-835a-07f4b658a9a4",
-      );
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
 
-      if (!this.storesOverlay) {
-        this.storesOverlay = new window.woosmap.map.StoresOverlay({
-          breakPoint: 14,
-          rules: [],
-          default: {
-            color: "#5586f7",
-            size: 8,
-            minSize: 1,
-            icon: {
-              url: marker,
-              scaledSize: {
-                height: 46,
-                width: 30,
-              },
-            },
-            selectedIcon: {
-              url: markerAlt,
-              scaledSize: {
-                height: 46,
-                width: 30,
-              },
-            },
-          },
-        });
-      }
+        const MapHTMLElement = this.demoRef?.current?.getMap();
 
-      const styles = [
-        {
-          featureType: "point_of_interest",
-          stylers: [{ visibility: hasPois ? "on" : "off" }],
-        },
-      ];
-      const colorStyle = this.applyStyle(style);
+        if (window?.woosmap?.map && MapHTMLElement) {
+            window.woosmap.map.config.setApiKey('woos-48c80350-88aa-333e-835a-07f4b658a9a4');
 
-      if (colorStyle) {
-        styles.push(colorStyle);
-      }
-      if (!this.map) {
-        this.map = new window.woosmap.map.Map(MapHTMLElement, {
-          styles,
-          center: {
-            lat: 51.51,
-            lng: -0.12,
-          },
-          zoom: 15,
-        });
-      } else {
-        this.map._style.setMapStyle(styles);
-      }
+            if (!this.storesOverlay) {
+                this.storesOverlay = new window.woosmap.map.StoresOverlay({
+                    breakPoint: 14,
+                    rules: [],
+                    default: {
+                        color: '#5586f7',
+                        size: 8,
+                        minSize: 1,
+                        icon: {
+                            url: marker,
+                            scaledSize: {
+                                height: 46,
+                                width: 30,
+                            },
+                        },
+                        selectedIcon: {
+                            url: markerAlt,
+                            scaledSize: {
+                                height: 46,
+                                width: 30,
+                            },
+                        },
+                    },
+                });
+            }
 
-      if (hasStores) {
-        this.storesOverlay.setMap(this.map);
-      } else {
-        this.storesOverlay.setMap(null);
-      }
+            const styles = [
+                {
+                    featureType: 'point_of_interest',
+                    stylers: [{ visibility: hasPois ? 'on' : 'off' }],
+                },
+            ];
+            const colorStyle = this.applyStyle(style);
 
-      this.forceUpdate();
-    } else {
-      this.timeoutMap = setTimeout(this.displayMap, 300);
-    }
-  };
+            if (colorStyle) {
+                styles.push(colorStyle);
+            }
+            if (!this.map) {
+                this.map = new window.woosmap.map.Map(MapHTMLElement, {
+                    styles,
+                    center: {
+                        lat: 51.51,
+                        lng: -0.12,
+                    },
+                    zoom: 15,
+                });
+            } else {
+                this.map._style.setMapStyle(styles);
+            }
 
-  applyStyle = (style) => {
-    if (style === "grey") {
-      return {
-        featureType: "all",
-        stylers: [{ saturation: -100, lightness: -30 }],
-      };
-    }
-    if (style === "lightgrey") {
-      return { featureType: "all", stylers: [{ saturation: -100 }] };
-    }
-    if (style === "blue") {
-      return {
-        featureType: "all",
-        stylers: [{ hue: "#4998ff" }, { gamma: 0.3 }],
-      };
-    }
-    return null;
-  };
+            if (hasStores) {
+                this.storesOverlay.setMap(this.map);
+            } else {
+                this.storesOverlay.setMap(null);
+            }
 
-  render() {
-    const { noheader } = this.props;
+            this.forceUpdate();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
+    };
 
-    const headerLabels = {
-      title: tr("Map API"),
-      desc: tr(
-        "Woosmap Map is a vector tiles map based, which guarantees smooth zooming and panning transitions, a mobile-optimised loading and clear rendering at every scale. It provides a worldwide cover, cutting edge details and ability to display 3D buildings at closest/street zoom levels.",
-      ),
+    applyStyle = (style) => {
+        if (style === 'grey') {
+            return {
+                featureType: 'all',
+                stylers: [{ saturation: -100, lightness: -30 }],
+            };
+        }
+        if (style === 'lightgrey') {
+            return { featureType: 'all', stylers: [{ saturation: -100 }] };
+        }
+        if (style === 'blue') {
+            return {
+                featureType: 'all',
+                stylers: [{ hue: '#4998ff' }, { gamma: 0.3 }],
+            };
+        }
+        return null;
     };
 
-    return (
-      <Demo
-        ref={this.demoRef}
-        header={headerLabels}
-        id="map-demo"
-        className="demo--map"
-        footerFilters={this.renderFooterFilters()}
-        headerFilters={this.renderHeaderFilters()}
-        renderCode={this.renderCode}
-        noheader={noheader}
-        referer="http://localhost/"
-        withMap
-        response={null}
-      />
-    );
-  }
+    render() {
+        const { noheader } = this.props;
+
+        const headerLabels = {
+            title: tr('Map API'),
+            desc: tr(
+                'Woosmap Map is a vector tiles map based, which guarantees smooth zooming and panning transitions, a mobile-optimised loading and clear rendering at every scale. It provides a worldwide cover, cutting edge details and ability to display 3D buildings at closest/street zoom levels.'
+            ),
+        };
+
+        return (
+            <Demo
+                ref={this.demoRef}
+                header={headerLabels}
+                id="map-demo"
+                className="demo--map"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                renderCode={this.renderCode}
+                noheader={noheader}
+                referer="http://localhost/"
+                withMap
+                response={null}
+            />
+        );
+    }
 }
 
 MapDemo.defaultProps = {
-  noheader: false,
+    noheader: false,
 };
 
 MapDemo.propTypes = {
-  noheader: PropTypes.bool,
+    noheader: PropTypes.bool,
 };

package/src/components/Demo/MapDemo.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MapDemo from '@/components/Demo/MapDemo';
+import MapDemo from './MapDemo';
 
 const Story = {
     title: 'demo/Map',

package/src/components/Demo/SearchDemo.js

@@ -2,17 +2,17 @@ import axios from 'axios';
 import cl from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import markerIcon from '@/images/marker.png';
-import markerIconAlt from '@/images/marker-alt.png';
-import Demo from '@/components/Demo/SkeletonDemo';
-import Input from '@/components/Input/Input';
-import Constants from '@/Constants';
+import markerIcon from '../../images/marker.png';
+import markerIconAlt from '../../images/marker-alt.png';
+import Demo from './SkeletonDemo';
+import Input from '../Input/Input';
+import Constants from '../../Constants';
 /* eslint-disable import/no-named-as-default */
 /* eslint-disable import/no-named-as-default-member */
-import FilterSelect from '@/components/Select/FilterSelect';
-import LocalitiesAutocomplete from '@/components/Woosmap/LocalitiesAutocomplete';
-import { tr } from '@/components/utils/locale';
-import { createWoosmapMap } from '@/components/Map/drawOnMap';
+import FilterSelect from '../Select/FilterSelect';
+import LocalitiesAutocomplete from '../Woosmap/LocalitiesAutocomplete';
+import { tr } from '../utils/locale';
+import { createWoosmapMap } from '../Map/drawOnMap';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 export default class SearchDemo extends Component {

package/src/components/Demo/SearchDemo.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SearchDemo from '@/components/Demo/SearchDemo';
+import SearchDemo from './SearchDemo';
 
 const Story = {
     title: 'demo/Search',

package/src/components/Demo/SearchDemo.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import SearchDemo from '@/components/Demo/SearchDemo';
+import SearchDemo from './SearchDemo';
 
 it('renders a SearchDemo', () => {
     const { container } = render(<SearchDemo />);

package/src/components/Demo/Showcase.stories.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import { changeLanguage } from '@/components/utils/locale';
-import TrackEventContext from '@/components/utils/TrackEventContext';
-import DistanceDemo from '@/components/Demo/DistanceDemo';
-import GeolocationDemo from '@/components/Demo/GeolocationDemo';
-import LocalitiesDemo from '@/components/Demo/LocalitiesAllDemo';
-import MapDemo from '@/components/Demo/MapDemo';
-import SearchDemo from '@/components/Demo/SearchDemo';
+import { changeLanguage } from '../utils/locale';
+import TrackEventContext from '../utils/TrackEventContext';
+import DistanceDemo from './DistanceDemo';
+import GeolocationDemo from './GeolocationDemo';
+import LocalitiesDemo from './LocalitiesAllDemo';
+import MapDemo from './MapDemo';
+import SearchDemo from './SearchDemo';
 
 const trackEvent = {
     trackEvent: (category, action, label) => {

package/src/components/Demo/SkeletonDemo.js

@@ -2,14 +2,14 @@
 import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
-import copy from '@/components/utils/CopyToClipoard';
-import Constants from '@/Constants';
-import { tr } from '@/components/utils/locale';
-import Tab from '@/components/Tab/Tab';
-import CodeSnippet from '@/components/CodeSnippet/CodeSnippet';
-import uniqueid from '@/components/uniqueid';
-import TrackEventContext from '@/components/utils/TrackEventContext';
-import Script from '@/components/utils/Script';
+import copy from '../utils/CopyToClipoard';
+import Constants from '../../Constants';
+import { tr } from '../utils/locale';
+import Tab from '../Tab/Tab';
+import CodeSnippet from '../CodeSnippet/CodeSnippet';
+import uniqueid from '../uniqueid';
+import TrackEventContext from '../utils/TrackEventContext';
+import Script from '../utils/Script';
 
 const MAP_CLASSNAME = 'map';
 

package/src/components/Demo/SkeletonDemo.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import GoogleMapReact from 'google-map-react';
-import Demo from '@/components/Demo/SkeletonDemo';
-import Input from '@/components/Input/Input';
+import Demo from './SkeletonDemo';
+import Input from '../Input/Input';
 
 const Story = {
     title: 'demo/Skeleton',

package/src/components/Demo/SkeletonDemo.test.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import SkeletonDemo from '@/components/Demo/SkeletonDemo';
-import Constants from '@/Constants';
+import SkeletonDemo from './SkeletonDemo';
+import Constants from '../../Constants';
 
 const mockScript = jest.fn();
 jest.mock(

package/src/components/Demo/W3WDemo.js

@@ -3,15 +3,15 @@ import axios from 'axios';
 import cl from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Demo from '@/components/Demo/SkeletonDemo';
-import Input from '@/components/Input/Input';
-import Button from '@/components/Button/Button';
-import ButtonGroup from '@/components/Button/ButtonGroup';
-import Constants from '@/Constants';
-import { tr } from '@/components/utils/locale';
-import markerIcon from '@/images/marker.png';
-import markerIconAlt from '@/images/marker-alt.png';
-import { createWoosmapMap } from '@/components/Map/drawOnMap';
+import Demo from './SkeletonDemo';
+import Input from '../Input/Input';
+import Button from '../Button/Button';
+import ButtonGroup from '../Button/ButtonGroup';
+import Constants from '../../Constants';
+import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import markerIconAlt from '../../images/marker-alt.png';
+import { createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },