@woosmap/ui 2.58.0 → 3.4.0

package/.storybook/preview.js

@@ -36,12 +36,12 @@ let isConsoleStyle = false;
 
 
 if (mode === 'prod') {
-  import('../src/styles/style-website.styl');
+  import('../src/styles/style-next-website.styl');
   import('../src/styles/style-stories.styl');
 } else {
  import('../src/styles/style-stories.styl').then((storiesStyl) => {
    import('../src/styles/style-console.styl').then((consoleStylLoaded) => {
-     import('../src/styles/style-website.styl').then((websiteStylLoaded) => {
+     import('../src/styles/style-next-website.styl').then((websiteStylLoaded) => {
       const storeGlobals = sessionStorage.getItem('@storybook/preview/store');
       const globalTheme = storeGlobals ? JSON.parse(storeGlobals).globals.theme : null;
       const defaultStyle = urlParams.get('theme')|| globalTheme || "Website theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.58.0",
+  "version": "3.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -28,7 +28,7 @@
   "scripts": {
     "start": "yarn storybook:dev",
     "build": "rimraf dist && NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --ignore '**/*.stories.js,**/*.test.js,**/*.styl' && yarn build-css",
-    "build-css": "stylus ./src/styles/style-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
+    "build-css": "stylus ./src/styles/style-next-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
     "test": "react-scripts test",
     "test:generate-output": "react-scripts test --json --outputFile=./.storybook/jest-test-results.json --silent",
     "prestorybook:dev": "clear && echo \"DOING FIRST TEST RUN\" && CI=true npm run test:generate-output",

package/src/components/Demo/SkeletonDemo.js

@@ -160,78 +160,26 @@ export default class SkeletonDemo extends Component {
     };
 
     render() {
-        const {
-            noheader,
-            header,
-            id,
-            result,
-            withMap,
-            request,
-            response,
-            className,
-            leftContent,
-            docLink,
-            docLabel,
-            renderCode,
-            subHeader,
-        } = this.props;
+        const { result, request, response, renderCode } = this.props;
         const { copied } = this.state;
         return (
-            <div className={cl('demo', className)} id={id}>
-                <div className="demo__header">
-                    {!noheader && (
-                        <div className="demo__presentation">
-                            <div className="demo__title">
-                                <h1>{header.title}</h1>
-                            </div>
-                            <p className="demo__desc">
-                                {header.desc} &nbsp;
-                                <a
-                                    rel="noreferrer"
-                                    href={docLink || tr('http://developers.woosmap.com')}
-                                    target="_blank"
-                                    onClick={() => {
-                                        const { trackEvent } = this.context;
-                                        if (trackEvent) {
-                                            trackEvent(
-                                                'Showcase',
-                                                "Developer's Documentation",
-                                                `User went to the ${header.title} documentation`
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {docLabel || tr('Go to documentation')}
-                                </a>
-                            </p>
-                            <div className="demo__desc">{subHeader}</div>
+            <article className="demo">
+                <div className="demo__content">
+                    <div className="demo__showcase">
+                        <div className="demo__filters">
+                            {this.renderHeaderFilters()}
+                            {this.renderFooterFilters()}
+                        </div>
+                        <div className="demo__map">
+                            <div className="map" ref={this.mapDivRef} />
                         </div>
-                    )}
-                </div>
-                <div className="demo__content-wrapper">
-                    <div className="demo__content-header">
-                        {this.renderHeaderTagline()}
-                        {this.renderHeaderFilters()}
                     </div>
-                    {this.renderFooterFilters()}
-                    <div className="demo__content">
-                        <div className="demo__results__leftcontent">{leftContent}</div>
-                        {result ? (
-                            <div className="demo__results">
-                                <div className="demo__results__header">{tr('Results')}</div>
-                                <div className="demo__results__content">{result}</div>
-                            </div>
-                        ) : null}
-                        {withMap ? (
-                            <div
-                                className={cl('demo__map', {
-                                    'demo__map--small': result,
-                                })}
-                            >
-                                <div className="map" ref={this.mapDivRef} />
-                            </div>
-                        ) : null}
-                        <div className="demo__api">
+                    <div className="demo__data">
+                        <div className="demo__results">
+                            <div className="demo__results__header">{tr('Results')}</div>
+                            <div className="demo__results__content">{result}</div>
+                        </div>
+                        <div className="demo__code">
                             <Tab
                                 actions={[
                                     {
@@ -271,7 +219,7 @@ export default class SkeletonDemo extends Component {
                         </div>
                     </div>
                 </div>
-            </div>
+            </article>
         );
     }
 }
@@ -279,46 +227,28 @@ export default class SkeletonDemo extends Component {
 SkeletonDemo.contextType = TrackEventContext;
 
 SkeletonDemo.defaultProps = {
-    id: '',
-    docLink: null,
-    docLabel: null,
     renderCode: null,
     headerFilters: null,
     headerTagline: null,
     footerFilters: null,
-    leftContent: null,
-    className: '',
     result: null,
-    withMap: false,
     request: null,
     response: {},
     params: {},
-    noheader: false,
     referer: '',
     body: '',
     method: '',
-    header: null,
-    subHeader: null,
 };
 SkeletonDemo.propTypes = {
-    id: PropTypes.string,
-    docLink: PropTypes.string,
     renderCode: PropTypes.func,
-    docLabel: PropTypes.string,
     params: PropTypes.object,
-    noheader: PropTypes.bool,
-    header: PropTypes.object,
     headerTagline: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
     headerFilters: PropTypes.array,
     footerFilters: PropTypes.array,
     result: PropTypes.node,
-    withMap: PropTypes.bool,
-    leftContent: PropTypes.node,
     request: PropTypes.string,
     referer: PropTypes.string,
     body: PropTypes.string,
     method: PropTypes.string,
-    subHeader: PropTypes.object,
     response: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };

package/src/components/Icon/Icon.js

@@ -1,23 +1,6 @@
 import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
-import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
-import { ReactComponent as Buildings } from '../../icons/buildings.svg';
-import { ReactComponent as Battery } from '../../icons/battery.svg';
-import { ReactComponent as Cars } from '../../icons/cars.svg';
-import { ReactComponent as Github } from '../../icons/github.svg';
-import { ReactComponent as Green } from '../../icons/green.svg';
-import { ReactComponent as MapHd } from '../../icons/map-hd.svg';
-import { ReactComponent as Markers } from '../../icons/markers.svg';
-import { ReactComponent as Notification } from '../../icons/notification.svg';
-import { ReactComponent as Quote } from '../../icons/quote.svg';
-import { ReactComponent as Position } from '../../icons/position.svg';
-import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
-import { ReactComponent as Schedule } from '../../icons/schedule.svg';
-import { ReactComponent as Security } from '../../icons/security.svg';
-import { ReactComponent as World } from '../../icons/world.svg';
-import { ReactComponent as Zoom } from '../../icons/zoom.svg';
-
 import { ReactComponent as Access } from '../../icons/access.svg';
 import { ReactComponent as Add } from '../../icons/add.svg';
 import { ReactComponent as AddCircle } from '../../icons/add-circle.svg';
@@ -37,10 +20,12 @@ import { ReactComponent as ArrowLink } from '../../icons/arrow-link.svg';
 import { ReactComponent as Asset } from '../../icons/asset.svg';
 import { ReactComponent as AssetAddFile } from '../../icons/asset-add-file.svg';
 import { ReactComponent as AssetAdd } from '../../icons/asset-add.svg';
+import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
 import { ReactComponent as Bank } from '../../icons/bank.svg';
 import { ReactComponent as Beaker } from '../../icons/beaker.svg';
 import { ReactComponent as Bell } from '../../icons/bell.svg';
 import { ReactComponent as Bookmark } from '../../icons/bookmark.svg';
+import { ReactComponent as Buildings } from '../../icons/buildings.svg';
 import { ReactComponent as Bulb } from '../../icons/bulb.svg';
 import { ReactComponent as CaretBotton } from '../../icons/caret-bottom.svg';
 import { ReactComponent as CaretLeft } from '../../icons/caret-left.svg';
@@ -72,6 +57,7 @@ import { ReactComponent as Exchange } from '../../icons/exchange.svg';
 import { ReactComponent as Expand } from '../../icons/expand.svg';
 import { ReactComponent as Export } from '../../icons/export.svg';
 import { ReactComponent as Flag } from '../../icons/flag.svg';
+import { ReactComponent as Github } from '../../icons/github.svg';
 import { ReactComponent as Globe } from '../../icons/globe.svg';
 import { ReactComponent as Home } from '../../icons/home.svg';
 import { ReactComponent as HomeUser } from '../../icons/home-user.svg';
@@ -93,19 +79,23 @@ import { ReactComponent as Organization } from '../../icons/organization.svg';
 import { ReactComponent as Organizations } from '../../icons/organizations.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
 import { ReactComponent as Platform } from '../../icons/platform.svg';
+import { ReactComponent as Position } from '../../icons/position.svg';
 import { ReactComponent as ProductActivated } from '../../icons/product-activated.svg';
 import { ReactComponent as ProductAdd } from '../../icons/product-add.svg';
 import { ReactComponent as Products } from '../../icons/products.svg';
 import { ReactComponent as Projects } from '../../icons/projects.svg';
 import { ReactComponent as Puzzle } from '../../icons/puzzle.svg';
 import { ReactComponent as Question } from '../../icons/question.svg';
+import { ReactComponent as Quote } from '../../icons/quote.svg';
 import { ReactComponent as Receipt } from '../../icons/receipt.svg';
+import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
 import { ReactComponent as Search } from '../../icons/search.svg';
 import { ReactComponent as SeePage } from '../../icons/see-page.svg';
 import { ReactComponent as Settings } from '../../icons/settings.svg';
 import { ReactComponent as Shield } from '../../icons/shield.svg';
 import { ReactComponent as Star } from '../../icons/star.svg';
 import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
+import { ReactComponent as Stores } from '../../icons/stores.svg';
 import { ReactComponent as Support } from '../../icons/support.svg';
 import { ReactComponent as Switch } from '../../icons/switch.svg';
 import { ReactComponent as Team } from '../../icons/team.svg';
@@ -117,36 +107,19 @@ import { ReactComponent as ViewList } from '../../icons/view-list.svg';
 import { ReactComponent as ViewMiniCard } from '../../icons/view-mini-card.svg';
 import { ReactComponent as Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
+import { ReactComponent as World } from '../../icons/world.svg';
 import { ReactComponent as Address } from '../../icons/address.svg';
 import { ReactComponent as Distance } from '../../icons/distance.svg';
 import { ReactComponent as Geolocation } from '../../icons/geolocation.svg';
 import { ReactComponent as Localities } from '../../icons/localities.svg';
 import { ReactComponent as Map } from '../../icons/map.svg';
 import { ReactComponent as Merchant } from '../../icons/merchant.svg';
-import { ReactComponent as Stores } from '../../icons/stores.svg';
 import { ReactComponent as Traffic } from '../../icons/traffic.svg';
 import { ReactComponent as SocialFacebook } from '../../icons/social-facebook.svg';
 import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
 import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
 
 const Icons = {
-    autocomplete: Autocomplete,
-    battery: Battery,
-    buildings: Buildings,
-    cars: Cars,
-    github: Github,
-    green: Green,
-    'map-hd': MapHd,
-    markers: Markers,
-    notification: Notification,
-    position: Position,
-    quote: Quote,
-    'save-money': SaveMoney,
-    schedule: Schedule,
-    security: Security,
-    world: World,
-    zoom: Zoom,
-
     access: Access,
     add: Add,
     'add-circle': AddCircle,
@@ -166,10 +139,12 @@ const Icons = {
     asset: Asset,
     'asset-add-file': AssetAddFile,
     'asset-add': AssetAdd,
+    autocomplete: Autocomplete,
     bank: Bank,
     beaker: Beaker,
     bell: Bell,
     bookmark: Bookmark,
+    buildings: Buildings,
     bulb: Bulb,
     'caret-bottom': CaretBotton,
     'caret-left': CaretLeft,
@@ -202,6 +177,7 @@ const Icons = {
     export: Export,
     flag: Flag,
     globe: Globe,
+    github: Github,
     home: Home,
     'home-user': HomeUser,
     import: Import,
@@ -222,13 +198,16 @@ const Icons = {
     organizations: Organizations,
     phone: Phone,
     platform: Platform,
+    position: Position,
     'product-activated': ProductActivated,
     'product-add': ProductAdd,
     products: Products,
     projects: Projects,
     puzzle: Puzzle,
     question: Question,
+    quote: Quote,
     receipt: Receipt,
+    'save-money': SaveMoney,
     search: Search,
     'see-page': SeePage,
     settings: Settings,
@@ -247,6 +226,7 @@ const Icons = {
     'view-mini-card': ViewMiniCard,
     warning: Warning,
     woosmap: Woosmap,
+    world: World,
     address: Address,
     distance: Distance,
     geolocation: Geolocation,

package/src/components/Map/drawOnMap.js

@@ -84,46 +84,52 @@ export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(view
     );
 };
 
-export const createWoosmapMap = (node) =>
-    new window.woosmap.map.Map(node, {
-        styles: [
-            {
-                featureType: 'administrative',
-                elementType: 'all',
-                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
-            },
-            {
-                featureType: 'road',
-                elementType: 'all',
-                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
-            },
-            {
-                featureType: 'water',
-                elementType: 'all',
-                stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
-            },
-            {
-                featureType: 'landscape.man_made',
-                elementType: 'all',
-                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
-            },
-            {
-                featureType: 'landscape.natural',
-                elementType: 'all',
-                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
-            },
-            {
-                featureType: 'poi',
-                elementType: 'all',
-                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
-            },
-            {
-                featureType: 'transit',
-                elementType: 'all',
-                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
-            },
-        ],
-    });
+export const createWoosmapMap = (node) => {
+    try {
+        return new window.woosmap.map.Map(node, {
+            styles: [
+                {
+                    featureType: 'administrative',
+                    elementType: 'all',
+                    stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
+                },
+                {
+                    featureType: 'road',
+                    elementType: 'all',
+                    stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
+                },
+                {
+                    featureType: 'water',
+                    elementType: 'all',
+                    stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
+                },
+                {
+                    featureType: 'landscape.man_made',
+                    elementType: 'all',
+                    stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
+                },
+                {
+                    featureType: 'landscape.natural',
+                    elementType: 'all',
+                    stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
+                },
+                {
+                    featureType: 'poi',
+                    elementType: 'all',
+                    stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+                },
+                {
+                    featureType: 'transit',
+                    elementType: 'all',
+                    stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+                },
+            ],
+        });
+    } catch (e) {
+        console.error(e);
+        return null;
+    }
+};
 export class WoosmapMapBoundingBox {
     constructor(bounds, padding) {
         this.overlayView = new window.woosmap.map.OverlayView();