@wayke-se/components-react 3.0.0 → 3.1.0-beta.2

package/README.md

@@ -1,29 +1,29 @@
 # Components React
 
-> This repository contains components for search and items to use on external websites.
+This repository contains components for search and items to use on external websites.
 
-## Notes
+## Usage
 
-* Starting from version `2.0.0` and above will require import of `@wayke.se/components-react/assets/default.css` in order to apply basic styling to the gallery.
+Get started using `@wayke-se/components-react`.
 
-## Usage
+### Before you start
 
-Install
+**Install**
 ```bash
 npm install @wayke-se/components-react
 ```
 
-Install peer dependencies
+**Install peer dependencies**
 ```bash
 npm install react react-dom styled-components
 ```
 
+### Basic usage
+
 ```javascript
 import React from 'react';
 import WaykeComposite from '@wayke-se/components-react'
-import '@wayke-se/components-react/assets/default.css';
-// Optional
-import '@wayke-se/ecom-web/dist/index.css';
+import '@wayke-se/ecom-web/dist/index.css'; // Only required if Ecom is activated
 
 const ProviderSettings: WaykeProviderSettings = {
   graphQlUrl: "https://gql.wayketech.se/query",
@@ -66,18 +66,24 @@ const ProviderSettings: WaykeProviderSettings = {
 }
 ```
 
-
 ### WaykeComposite uses hash-route, i want to use path-route
 
-In this case you need to make sure that you are in control of the routing where same html file is 
+In this case you need to make sure that you are in control of the routing, if the user reloads the page, where same html file is
 served for `/your/path/to/this/component` and `/your/path/to/this/component/00000000-0000-0000-0000-000000000000`.
 
+Examples given the application is located in `/search/vehicles`:
+
+1) pathRoute is `/search/vehicles` => `//yoursite.com/search/vehicles/00000000-0000-0000-0000-000000000000`
+2) pathRoute is `/item` => `//yoursite.com/item/00000000-0000-0000-0000-000000000000`
+3) pathRoute is `/a/b` => `//yoursite.com/a/b/00000000-0000-0000-0000-000000000000`
+4) pathRoute is `item` => `//yoursite.com/search/item/00000000-0000-0000-0000-000000000000`
+5) pathRoute is `a/b` => `//yoursite.com/search/a/b/00000000-0000-0000-0000-000000000000`
+6) pathRoute is `https://www.wayke.se/objekt` => `https://www.wayke.se/objekt/00000000-0000-0000-0000-000000000000`
+
 ```javascript
 import React from 'react';
 import { WaykeCompositePath } from '@wayke-se/components-react'
-import '@wayke.se/components-react/assets/default.css';
-// Optional
-import '@wayke-se/ecom-web/dist/index.css';
+import '@wayke-se/ecom-web/dist/index.css'; // Only required if Ecom is activated
 
 const App = () => (
   <WaykeCompositePath
@@ -110,7 +116,6 @@ const App = () => {
   );
 };
 ```
-
 ### I only want to use the Search Item component
 
 It's recomended to place WaykeItemProvider close to app-root in order to keep the cache
@@ -118,9 +123,7 @@ It's recomended to place WaykeItemProvider close to app-root in order to keep th
 ```javascript
 import React, { useCallback } from 'react';
 import { WaykeItemProvider, WaykeSearchItem } from '@wayke-se/components-react'
-import '@wayke.se/components-react/assets/default.css';
-// Optional
-import '@wayke-se/ecom-web/dist/index.css';
+import '@wayke-se/ecom-web/dist/index.css'; // Only required if Ecom is activated
 
 const App = ({}) => {
   const id = 'd01f79a3-7552-49c4-9d4d-deb3aa581c31';
@@ -155,12 +158,12 @@ const App = ({}) => {
 | disableResetScrollOnInit | boolean  | false    |                      |
 | placeholderImage         | string   | false    |                      |
 | onClickSearchItem        | function | false    | (id: string) => void |
-| modifyDocumentTitleItem  | boolean  | false    |                      | 
+| modifyDocumentTitleItem  | boolean  | false    |                      |
 
 * Required
   * `id` - Guid that represents a vehicle.
 * Optional
-  * `pathRoute` - If set to true, then if a item is clicked it will append /{pathRoute}/guid to the url.
+  * `pathRoute` - If set, then if a item is clicked it will use the provided url and append the guid. Supports both relative and absolute.
   * `hashRoute` - If set to true, then if a item is clicked it will append #guid to the url (is not used if `pathRoute` is set).
   * `disableResetScrollOnInit` - Loading the item page resets the scroll, here it's possible to disable it.
   * `placeholderImage` - Provide custom placeholder image when image is missing.
@@ -181,7 +184,7 @@ const App = ({}) => {
 | modifyDocumentTitleSearch | string                    |                           |
 
 * Optional
-  * `pathRoute` - If set to true, then if a item is clicked it will append /guid to the url.
+  * `pathRoute` - If set, then if a item is clicked it will use the provided url and append the guid. Supports both relative and absolute.
   * `hashRoute` - If set to true, then if a item is clicked it will append #guid to the url (is not used if `pathRoute` is set).
   * `filterList` - Select what filters that should be visible and in whiched order, drivingWheel, price, mileage, modelYear
   * `initialQueryParams` - Set the default filter that should be applid upon init.
@@ -429,7 +432,7 @@ To style the components, copy the following snippet into your *CSS* file and mod
 }
 ```
 
-...or if you want to use it as Sass (.scss):
+...or if you want to use it as _Sass_ (.scss):
 
 ```scss
 .wayke__theme {
@@ -461,17 +464,23 @@ To style the components, copy the following snippet into your *CSS* file and mod
 }
 ```
 
+> **It is highly recommended to *NOT* add or remove any properties defined above in the color selectors**. However, since fonts usually requires more configuration we encourage you to add the necessary font styling required to match your current profile. If you add new properties to the font selectors, please be careful and ensure everything looks as intended before going into production.
+
 ### Ecom theme
-The default ecom css can be found and imported `node_module/@wayke-se/ecom-web/dist/index.css`.
 
-> **It is highly recommended to *NOT* add or remove any properties defined above in the color selectors**. However, since fonts usually requires more configuration we encourage you to add the necessary font styling required to match your current profile. If you add new properties to the font selectors, please be careful and ensure everything looks as intended before going into production.
+The default Ecom *CSS* can be found and imported from `@wayke-se/ecom-web/dist/index.css`. This is only necessary if Ecom is activated. If activated and the *CSS* is not imported, the Ecom module will not be displayed correctly.
+
+If you want to customize the look of the Ecom module we refer you to the documentation of [@wayke-se/ecom-web](https://www.npmjs.com/package/@wayke-se/ecom-web).
 
-## Run example from repo
-This repository contains a example app that uses [@wayke-se/components-react](https://www.npmjs.com/package/@wayke-se/components-react).
+## Run example from this repository
 
+This repository contains an example app that uses [@wayke-se/components-react](https://www.npmjs.com/package/@wayke-se/components-react).
 
 
-To start the example create an `.env` file in root.
+### Setup environment variables
+
+To start the example create an `.env` file in root with the following content.
+
 ```
 WAYKE_HOST=YOUR_HOST_1,YOUR_HOST_2
 WAYKE_SEARCH_URL=https://test-ext-api.wayketech.se/vehicles
@@ -482,10 +491,15 @@ WAYKE_ECOM_URL=https://ecom.wayketech.se
 GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_STATIC_API_KEY
 ```
 
-* `WAYKE_SEARCH_MLT_URL` - An *optional* flag. Will fetch related vehicles to current vehicle. If not provided 
+#### Notes
+
+* `WAYKE_SEARCH_MLT_URL` - An *optional* flag. Will fetch related vehicles to current vehicle. If not provided
 `WAYKE_SEARCH_URL` will be used instead, but will fetch latest vehicles.
 
-Then run the following:
+### Start the example app
+
+Run the following commands to start the example app.
+
 ```bash
 npm install
 cd example
@@ -493,35 +507,38 @@ npm install
 npm start
 ```
 
-`WAYKE_HOST` can be used instead of using and exposing the `WAYKE_SEARCH_X_API_KEY`. If, for example, your development host is `test.com.localhost`
-Update your local host file and add:
-127.0.0.1   test.com.localhost
-This will change the origin, while still pointing to localhost.
-Start the example and open `test.com.localhost:5000`.
+### Custom host
+
+`WAYKE_HOST` can be used instead of using and exposing the `WAYKE_SEARCH_X_API_KEY`. If, for example, your development host is `test.com.localhost`.
 
-To add more hosts, add all to your local host file and then update `WAYKE_HOST` (comma separated):
+To do so update your local host file and add:
+```txt
+127.0.0.1   test.com.localhost
 ```
+
+This will change the origin, while still pointing to `localhost`. Start the example app and open `test.com.localhost:5000` in your browser.
+
+### Multiple hosts
+
+To add multiple hosts, add all hohsts to your local host file and then update `WAYKE_HOST` in `.env` as a comma separated list.
+
+```txt
 WAYKE_HOST=a.com.localhost,b.com.localhost
 ```
-`a.com.localhost:5000` and `b.com.localhost:5000` can now be accessed.
 
+`a.com.localhost:5000` and `b.com.localhost:5000` can now be accessed.
 
-### Available Routes (Independent)
+### Available routes (independent)
 
-#### WaykeComposite
+**WaykeComposite**
 [http://localhost:5000](http://localhost:5000)
 
-#### WaykeSearch With WaykeProvider
+**WaykeSearch With WaykeProvider**
 [http://localhost:5000/search](http://localhost:5000/search)
 
-#### WaykeSearchItem With WaykeProvider
+**WaykeSearchItem With WaykeProvider**
 [http://localhost:5000/search-item/d01f79a3-7552-49c4-9d4d-deb3aa581c31](http://localhost:5000/search-item/d01f79a3-7552-49c4-9d4d-deb3aa581c31)
 
-
 ## Example repositories
 
-### React and Typescript example
-[https://github.com/wayke-se/components-react-boilerplate](https://github.com/wayke-se/components-react-boilerplate)
-
-### Non-React with/without Typescript example
-[https://github.com/wayke-se/components-react-example](https://github.com/wayke-se/components-react-example)
+We have setup an example repository where you can see how we've implemented `@wayke-se/components-react`. You'll find the repository here: [https://github.com/wayke-se/components-react-example](https://github.com/wayke-se/components-react-example).

package/dist-node/index.js

@@ -2475,9 +2475,13 @@ const ProductCard = ({
   const _onClick = React.useMemo(() => onClick ? () => onClick(id) : undefined, [id]);
 
   const onHrefClick = React.useCallback(e => {
-    if (!!pathRoute && href) {
-      e.preventDefault();
-      pushState(href);
+    if (pathRoute && href) {
+      const reg = new RegExp('^((http|https)://)|//');
+
+      if (!pathRoute.match(reg) && !pathRoute.startsWith(location.origin)) {
+        e.preventDefault();
+        pushState(href);
+      }
     }
   }, [id, pathRoute, href]);
   return React__default.createElement(Wrapper$8, {
@@ -2528,10 +2532,25 @@ const Grid = ({
   }
 
   return React__default.createElement(Wrapper$7, null, React__default.createElement(List$4, null, documents.map(document => {
-    const _path = pathRoute === null || pathRoute === void 0 ? void 0 : pathRoute.replace(/^\/|\/$/g, '');
+    /*
+    const _path = pathRoute?.replace(/^\/|\/$/g, '');
+       const prefix = _path ? `/${_path}/` : '/';
+       const pathRouteUrl =
+      window.location.pathname === '/'
+        ? `${prefix}${document._id}`
+        : `${window.location.pathname}${prefix}${document._id}`;
+    */
+
+    /*
+    const _pathRoute = pathRoute
+      ? pathRoute.startsWith('/')
+        ? `${location.pathname}${pathRoute}/${document._id}`
+        : `${pathRoute}/${document._id}`
+      : undefined;
+       console.log(_pathRoute);
+    */
+    const _pathRoute = pathRoute ? `${pathRoute}/${document._id}` : undefined;
 
-    const prefix = _path ? `/${_path}/` : '/';
-    const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : `${window.location.pathname}${prefix}${document._id}`;
     return React__default.createElement(Item$4, {
       key: document._id
     }, React__default.createElement(ProductCard, {
@@ -2539,7 +2558,7 @@ const Grid = ({
       onClick: onClickItem,
       title: document.title,
       pathRoute: pathRoute,
-      href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined,
+      href: _pathRoute ? _pathRoute : hashRoute ? `#${document._id}` : undefined,
       image: resolveImage(document),
       placeholderImage: placeholderImage,
       description: document.shortDescription,
@@ -3438,6 +3457,76 @@ const SliderWrapper = styled__default.div`
     bottom: 0;
     left: 0;
     right: 0;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+
+    .slick-list,
+    .slick-track {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .slick-list {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+
+  .slick-track {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &::before,
+    &::after {
+      content: '';
+      display: table;
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+
+  .slick-slide {
+    display: none;
+    float: left;
+    min-height: 1px;
+  }
+
+  .slick-loading {
+    .slick-track {
+      visibility: hidden;
+    }
+
+    img {
+      display: none;
+    }
+  }
+
+  .slick-initialized {
+    .slick-slide {
+      display: block;
+    }
+  }
+
+  .slick-slide.dragging img {
+    pointer-events: none;
   }
 
   ${props => props.theme.breakpoint.LtMd} {
@@ -3450,7 +3539,6 @@ const SliderWrapper = styled__default.div`
 
     .slick-slide {
       border-right: ${size(1)} solid ${props => props.theme.color.bg};
-      //transform: scale(0.95);
       transform-origin: 0 50%;
       transition: transform 150ms ease;
     }
@@ -6939,7 +7027,7 @@ const useRelatedSearch = id => {
 const regexEndGuid = /[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/;
 const escapeRegExpString = s => s.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
 const regexPathGuid = path => {
-  if (!path) {
+  if (!path || path) {
     return regexEndGuid;
   }
 
@@ -6991,8 +7079,8 @@ const Related = ({
     var _document$featuredIma, _document$featuredIma2, _document$featuredIma3;
 
     const prefix = pathRoute ? `/${pathRoute}` : '/';
-    const r = regexPathGuid(pathRoute);
-    const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, `${pathRoute}${document._id}`) : `${window.location.pathname}${prefix}${document._id}`;
+    const r = regexPathGuid();
+    const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, document._id) : `${window.location.pathname}${prefix}${document._id}`;
     return React__default.createElement(OverflowGridItem, {
       key: document._id
     }, React__default.createElement(ProductCard, {