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

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.
 
-## Usage
+## Notes
 
-Get started using `@wayke-se/components-react`.
+* 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.
 
-### Before you start
+## Usage
 
-**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/ecom-web/dist/index.css'; // Only required if Ecom is activated
+import '@wayke-se/components-react/assets/default.css';
+// Optional
+import '@wayke-se/ecom-web/dist/index.css';
 
 const ProviderSettings: WaykeProviderSettings = {
   graphQlUrl: "https://gql.wayketech.se/query",
@@ -66,9 +66,10 @@ 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, if the user reloads the page, 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`:
@@ -83,7 +84,9 @@ Examples given the application is located in `/search/vehicles`:
 ```javascript
 import React from 'react';
 import { WaykeCompositePath } from '@wayke-se/components-react'
-import '@wayke-se/ecom-web/dist/index.css'; // Only required if Ecom is activated
+import '@wayke.se/components-react/assets/default.css';
+// Optional
+import '@wayke-se/ecom-web/dist/index.css';
 
 const App = () => (
   <WaykeCompositePath
@@ -116,6 +119,7 @@ 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
@@ -123,7 +127,9 @@ 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/ecom-web/dist/index.css'; // Only required if Ecom is activated
+import '@wayke.se/components-react/assets/default.css';
+// Optional
+import '@wayke-se/ecom-web/dist/index.css';
 
 const App = ({}) => {
   const id = 'd01f79a3-7552-49c4-9d4d-deb3aa581c31';
@@ -158,7 +164,7 @@ 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.
@@ -432,7 +438,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 {
@@ -464,23 +470,17 @@ 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`.
 
-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 this repository
-
-This repository contains an example app that uses [@wayke-se/components-react](https://www.npmjs.com/package/@wayke-se/components-react).
+> **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.
 
+## 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).
 
-### Setup environment variables
 
-To start the example create an `.env` file in root with the following content.
 
+To start the example create an `.env` file in root.
 ```
 WAYKE_HOST=YOUR_HOST_1,YOUR_HOST_2
 WAYKE_SEARCH_URL=https://test-ext-api.wayketech.se/vehicles
@@ -491,15 +491,10 @@ WAYKE_ECOM_URL=https://ecom.wayketech.se
 GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_STATIC_API_KEY
 ```
 
-#### Notes
-
-* `WAYKE_SEARCH_MLT_URL` - An *optional* flag. Will fetch related vehicles to current vehicle. If not provided
+* `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.
 
-### Start the example app
-
-Run the following commands to start the example app.
-
+Then run the following:
 ```bash
 npm install
 cd example
@@ -507,38 +502,35 @@ npm install
 npm start
 ```
 
-### 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 do so update your local host file and add:
-```txt
+`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 app and open `test.com.localhost:5000` in your browser.
-
-### Multiple hosts
+This will change the origin, while still pointing to localhost.
+Start the example and open `test.com.localhost:5000`.
 
-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
+To add more hosts, add all to your local host file and then update `WAYKE_HOST` (comma separated):
+```
 WAYKE_HOST=a.com.localhost,b.com.localhost
 ```
-
 `a.com.localhost:5000` and `b.com.localhost:5000` can now be accessed.
 
-### Available routes (independent)
 
-**WaykeComposite**
+### Available Routes (Independent)
+
+#### 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
 
-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).
+### 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)

package/assets/default.css

@@ -0,0 +1 @@
+@charset 'UTF-8';.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}.slick-next:before{content:'→'}[dir=rtl] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-family:slick;font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000}

package/assets/fonts/slick.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="slick" horiz-adv-x="512">
+<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
+</font></defs></svg>

package/dist-node/index.js

@@ -3457,76 +3457,6 @@ 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} {
@@ -3539,6 +3469,7 @@ 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;
     }